/* =====================================================================
PositiveVibes.app — Soft Editorial Stationery
A small, gentle corner of the internet.
---------------------------------------------------------------------
A complete stylesheet for the message-card generator: design tokens,
base styles, typography, layout, components, and system states.
Fonts (load in before this file):
===================================================================== */
/* ---------------------------------------------------------------------
1. DESIGN TOKENS
--------------------------------------------------------------------- */
:root {
/* — Surfaces & paper — */
--pv-paper: #fffaf3; /* page background — warm cream, never white */
--pv-paper-deep: #fbf5ec; /* footer / inset panels */
--pv-card: #ffffff; /* cards, message surface */
/* — Ink & text — */
--pv-ink: #1f2937; /* headings, message text */
--pv-body: #4b5563; /* default body / UI labels */
--pv-muted: #6b7280; /* secondary copy, sub-heads */
--pv-taupe: #9a8a78; /* card meta labels */
--pv-taupe-soft: #a8957f; /* eyebrows, fine print */
--pv-faint: #c9b89f; /* chevrons, disabled marks */
/* — Warm accent (terracotta) — */
--pv-accent: #9a3412; /* primary action, links, anchor word */
--pv-accent-hover: #82290d; /* button hover */
--pv-accent-soft: #ffedd5; /* selected pill fill */
--pv-accent-tint: #fde7e1; /* error icon halo */
/* — Soft scene gradient stops — */
--pv-sky: #dbeafe;
--pv-sky-2: #e6eefb;
--pv-sand: #f5e6d3;
--pv-peach: #fed7aa;
--pv-rose: #fecdd3;
--pv-sage: #d9ead3;
/* — Category icon tints (soft chips) — */
--pv-tint-sky: #dbeafe;
--pv-tint-peach: #fde7d8;
--pv-tint-sage: #d9ead3;
--pv-tint-ochre: #fde9c8;
--pv-tint-lilac: #e6e0f0;
--pv-tint-sky-ink: #3b5b78;
--pv-tint-sage-ink:#4f7042;
--pv-tint-ochr-ink:#b07d1f;
--pv-tint-lil-ink: #6b5b8a;
/* — Lines — */
--pv-border: #f3e8dc; /* hairline on cream */
--pv-border-warm: #e6d3bd; /* dashed stamp edge */
--pv-line-cool: #d8d2c4;
/* — Type — */
--pv-serif: 'Lora', Georgia, 'Times New Roman', serif;
--pv-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--pv-text-xs: 12px;
--pv-text-sm: 14px;
--pv-text-base: 15px;
--pv-text-lg: 18px;
--pv-text-xl: 20px;
--pv-msg: 33px; /* message card affirmation */
--pv-display: 58px; /* hero headline */
/* — Spacing — */
--pv-1: 4px; --pv-2: 8px; --pv-3: 12px; --pv-4: 16px;
--pv-5: 20px; --pv-6: 24px; --pv-8: 32px; --pv-10: 40px;
--pv-12: 48px; --pv-16: 64px;
/* — Radii (soft, rounded — stationery, not boxy) — */
--pv-r-pill: 999px;
--pv-r-btn: 13px;
--pv-r-input: 13px;
--pv-r-card: 20px;
--pv-r-msg: 26px;
--pv-r-panel: 24px;
/* — Shadows (soft, low, warm-neutral) — */
--pv-shadow-sm: 0 2px 6px rgba(31, 41, 55, .05);
--pv-shadow-card: 0 2px 6px rgba(31, 41, 55, .04);
--pv-shadow-md: 0 18px 40px -26px rgba(31, 41, 55, .28);
--pv-shadow-lg: 0 30px 60px -28px rgba(31, 41, 55, .30);
--pv-shadow-btn: 0 10px 22px -12px rgba(154, 52, 18, .6);
/* — Motion (restrained) — */
--pv-fast: 150ms ease;
--pv-normal: 200ms ease;
/* — Scenes (reusable soft gradients) — */
--pv-scene-dawn: linear-gradient(180deg, #dbeafe 0%, #ffedd5 52%, #fffaf3 100%);
--pv-scene-cool: linear-gradient(180deg, #e6eefb 0%, #fff5ea 64%, #fffaf3 100%);
--pv-scene-warm: linear-gradient(180deg, #fdeede 0%, #fff7ee 70%, #fffaf3 100%);
--pv-sun-glow: radial-gradient(circle, #fff6e6 0%, #fed7aa 58%, rgba(254,215,170,0) 72%);
}
/* ---------------------------------------------------------------------
2. BASE & RESET
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--pv-paper);
color: var(--pv-ink);
font-family: var(--pv-sans);
font-size: var(--pv-text-base);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--pv-accent); text-decoration: none; transition: opacity var(--pv-fast); }
a:hover { opacity: .7; }
/* Accessible focus — soft, never a glow */
:where(a, button, input, select, [tabindex]):focus-visible {
outline: 2px solid var(--pv-accent);
outline-offset: 2px;
border-radius: 4px;
}
/* ---------------------------------------------------------------------
3. TYPOGRAPHY
--------------------------------------------------------------------- */
.pv-eyebrow {
margin: 0 0 var(--pv-3);
font: 600 var(--pv-text-xs)/1 var(--pv-sans);
letter-spacing: .13em;
text-transform: uppercase;
color: var(--pv-taupe-soft);
}
.pv-eyebrow--accent { color: var(--pv-accent); }
.pv-display {
margin: 0;
font: 500 var(--pv-display)/1.08 var(--pv-serif);
letter-spacing: -.02em;
color: var(--pv-ink);
text-wrap: balance;
}
.pv-title {
margin: 0;
font: 500 42px/1.1 var(--pv-serif);
letter-spacing: -.02em;
color: var(--pv-ink);
text-wrap: balance;
}
/* The signature move: a serif-italic anchor word inside a heading */
.pv-anchor {
font-style: italic;
font-weight: 500;
color: var(--pv-accent);
}
.pv-lede {
margin: var(--pv-4) 0 0;
max-width: 36ch;
font: 400 var(--pv-text-lg)/1.55 var(--pv-sans);
color: var(--pv-muted);
text-wrap: pretty;
}
/* The affirmation itself — the star of every card */
.pv-message {
margin: 0;
font: 400 var(--pv-msg)/1.45 var(--pv-serif);
letter-spacing: -.01em;
color: var(--pv-ink);
text-wrap: pretty;
}
.pv-message--sm { font-size: 24px; line-height: 1.5; }
.pv-message--lg { font-size: 50px; line-height: 1.34; letter-spacing: -.015em; }
/* ---------------------------------------------------------------------
4. LAYOUT
--------------------------------------------------------------------- */
.pv-page { position: relative; background: var(--pv-paper); overflow: hidden; }
.pv-container { max-width: 1240px; margin-inline: auto; padding-inline: var(--pv-12); }
.pv-stack > * + * { margin-top: var(--pv-6); }
/* Soft scene band behind a hero (place first, position:absolute) */
.pv-scene {
position: absolute;
inset: 0 0 auto 0;
height: 560px;
background: var(--pv-scene-dawn);
pointer-events: none;
}
.pv-scene--cool { background: var(--pv-scene-cool); }
.pv-scene--warm { background: var(--pv-scene-warm); }
/* A soft sun. Drop into a scene, position it yourself. */
.pv-sun {
position: absolute;
width: 130px; height: 130px;
border-radius: 50%;
background: var(--pv-sun-glow);
pointer-events: none;
}
/* Abstract cloud — fill white, dial opacity down */
.pv-cloud { position: absolute; opacity: .8; pointer-events: none; }
/* markup:
*/
/* ---------------------------------------------------------------------
5. HEADER / NAV
--------------------------------------------------------------------- */
.pv-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--pv-6) var(--pv-12);
}
.pv-nav { display: flex; align-items: center; gap: 30px; }
.pv-nav a:not(.pv-btn) { color: var(--pv-body); font: 500 var(--pv-text-base)/1 var(--pv-sans); }
/* — Wordmark — */
.pv-wordmark {
display: inline-flex;
align-items: center;
gap: var(--pv-2);
font: 600 var(--pv-xl, 20px)/1 var(--pv-serif);
color: var(--pv-ink);
letter-spacing: -.01em;
}
.pv-wordmark .tld { color: var(--pv-accent); }
.pv-wordmark__mark { flex-shrink: 0; }
/* mark markup (small line sun):
*/
/* ---------------------------------------------------------------------
6. BUTTONS
--------------------------------------------------------------------- */
.pv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--pv-2);
border: none;
border-radius: var(--pv-r-btn);
padding: 14px 22px;
font: 600 var(--pv-text-base)/1 var(--pv-sans);
cursor: pointer;
transition: background var(--pv-normal), transform var(--pv-fast),
box-shadow var(--pv-normal), opacity var(--pv-fast);
}
.pv-btn svg { width: 17px; height: 17px; }
/* Primary — warm terracotta */
.pv-btn--primary {
background: var(--pv-accent);
color: var(--pv-paper);
box-shadow: var(--pv-shadow-btn);
}
.pv-btn--primary:hover { background: var(--pv-accent-hover); transform: translateY(-1px); }
/* Secondary — outlined on white */
.pv-btn--secondary {
background: var(--pv-card);
color: var(--pv-ink);
border: 1px solid var(--pv-border);
}
.pv-btn--secondary:hover { background: var(--pv-paper); transform: translateY(-1px); }
.pv-btn--secondary svg { stroke: var(--pv-accent); }
/* Ghost — quiet text action */
.pv-btn--ghost {
background: transparent;
color: var(--pv-accent);
padding: 14px 14px;
}
.pv-btn--ghost:hover { opacity: .7; }
.pv-btn--lg { padding: 16px 28px; font-size: 16px; }
.pv-btn--block { width: 100%; }
.pv-btn--sm { padding: 9px 14px; font-size: 13px; border-radius: 11px; }
.pv-btn:disabled { cursor: wait; opacity: .72; transform: none; }
/* Tiny copy chip on example cards */
.pv-btn--chip {
align-self: flex-start;
gap: 7px;
background: var(--pv-paper);
border: 1px solid var(--pv-border);
border-radius: 10px;
padding: 9px 14px;
font: 600 13px/1 var(--pv-sans);
color: var(--pv-accent);
cursor: pointer;
}
.pv-btn--chip:hover { background: #fff5ea; }
.pv-btn--chip svg { width: 14px; height: 14px; stroke: currentColor; }
/* ---------------------------------------------------------------------
7. SELECTABLE PILLS
--------------------------------------------------------------------- */
.pv-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pv-pill {
display: inline-flex;
align-items: center;
gap: var(--pv-2);
padding: 11px 18px;
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-pill);
background: var(--pv-card);
color: var(--pv-body);
font: 500 var(--pv-text-base)/1 var(--pv-sans);
cursor: pointer;
transition: border-color var(--pv-fast), background var(--pv-fast), color var(--pv-fast);
}
.pv-pill:hover { border-color: var(--pv-border-warm); }
.pv-pill[aria-pressed="true"],
.pv-pill--selected {
border-color: var(--pv-accent);
background: var(--pv-accent-soft);
color: var(--pv-accent);
font-weight: 600;
}
/* Segmented control (Short / Heartfelt) */
.pv-segment {
display: inline-flex;
background: var(--pv-paper-deep);
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-input);
padding: 4px;
}
.pv-segment button {
border: none;
background: transparent;
border-radius: 10px;
padding: 9px 22px;
font: 500 var(--pv-text-base)/1 var(--pv-sans);
color: var(--pv-taupe-soft);
cursor: pointer;
transition: background var(--pv-fast), color var(--pv-fast), box-shadow var(--pv-fast);
}
.pv-segment button[aria-pressed="true"],
.pv-segment .is-active {
background: var(--pv-card);
color: var(--pv-ink);
font-weight: 600;
box-shadow: 0 1px 3px rgba(31, 41, 55, .08);
}
/* ---------------------------------------------------------------------
8. SELECT INPUT
--------------------------------------------------------------------- */
.pv-select {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-input);
padding: 13px 16px;
font: 500 var(--pv-text-base)/1 var(--pv-sans);
color: var(--pv-ink);
cursor: pointer;
}
.pv-select svg { width: 17px; height: 17px; stroke: var(--pv-taupe-soft); }
/* Field label */
.pv-label {
display: block;
margin-bottom: var(--pv-3);
font: 600 var(--pv-text-xs)/1 var(--pv-sans);
letter-spacing: .13em;
text-transform: uppercase;
color: var(--pv-taupe-soft);
}
/* ---------------------------------------------------------------------
9. GENERATOR PANEL
--------------------------------------------------------------------- */
.pv-panel {
position: relative;
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-panel);
padding: var(--pv-10) 42px;
box-shadow: var(--pv-shadow-md), var(--pv-shadow-card);
}
.pv-panel__field + .pv-panel__field { margin-top: 30px; }
.pv-panel__footer {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--pv-6);
margin-top: 32px;
}
/* ---------------------------------------------------------------------
10. MESSAGE CARD (result, share, og)
--------------------------------------------------------------------- */
.pv-msgcard {
position: relative;
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-msg);
padding: 60px 56px 52px;
box-shadow: var(--pv-shadow-lg), var(--pv-shadow-sm);
}
/* Soft meta label (e.g. "Calm · For Mom") */
.pv-tag {
display: inline-block;
margin-bottom: var(--pv-6);
padding: 7px 14px;
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-pill);
background: var(--pv-paper);
font: 600 var(--pv-text-xs)/1 var(--pv-sans);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pv-taupe);
}
/* Dashed postcard stamp in a card corner */
.pv-stamp {
position: absolute;
top: 22px; right: 22px;
width: 46px; height: 46px;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px dashed var(--pv-border-warm);
border-radius: 8px;
}
.pv-stamp svg { width: 20px; height: 20px; stroke: var(--pv-ochre, #d9a441); }
/* Footer mark line inside a share card */
.pv-msgcard__mark {
margin-top: var(--pv-8);
padding-top: var(--pv-5);
border-top: 1px solid var(--pv-border);
font: 500 13px/1 var(--pv-sans);
color: var(--pv-taupe-soft);
}
/* Action row beneath a result card */
.pv-actions { display: flex; justify-content: center; gap: var(--pv-3); flex-wrap: wrap; }
/* ---------------------------------------------------------------------
10A. LIVE APP SHELL
--------------------------------------------------------------------- */
.pv-app {
min-height: 100vh;
padding-bottom: var(--pv-16);
}
.pv-app__sun { top: 64px; right: 11vw; }
.pv-app__cloud--left { top: 150px; left: 6vw; }
.pv-app__cloud--right { top: 96px; right: 22vw; opacity: .6; }
.pv-hero {
position: relative;
text-align: center;
padding-top: var(--pv-12);
}
.pv-hero .pv-lede { margin-inline: auto; max-width: 560px; }
.pv-hero__kicker {
display: inline-flex;
align-items: center;
gap: var(--pv-2);
background: rgba(255, 255, 255, .72);
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-pill);
padding: 7px 15px;
margin-bottom: 26px;
}
.pv-hero__kicker span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pv-accent);
}
.pv-hero__kicker p {
margin: 0;
font: 500 13px/1 var(--pv-sans);
color: #7a6a58;
}
.pv-generator {
position: relative;
max-width: 916px;
margin-top: 44px;
}
.pv-generator__trust {
justify-content: center;
margin-top: var(--pv-5);
}
.pv-result {
position: relative;
max-width: 820px;
margin-top: var(--pv-12);
}
.pv-result__intro {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pv-4);
margin-bottom: var(--pv-5);
}
.pv-result__intro p {
margin: 0;
color: var(--pv-taupe-soft);
font: 500 var(--pv-text-sm)/1.4 var(--pv-sans);
text-align: right;
}
.pv-share-link {
min-height: 0;
margin-top: var(--pv-4);
text-align: center;
color: var(--pv-muted);
font: 500 var(--pv-text-sm)/1.5 var(--pv-sans);
}
.pv-share-link a {
display: inline-flex;
max-width: 100%;
align-items: center;
justify-content: center;
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-input);
padding: 12px 16px;
color: var(--pv-accent);
overflow-wrap: anywhere;
box-shadow: var(--pv-shadow-card);
}
.pv-share-link small {
display: block;
margin-top: var(--pv-2);
color: var(--pv-taupe-soft);
}
.pv-hidden-field {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
white-space: nowrap;
}
/* ---------------------------------------------------------------------
10B. TEXTAREA + SELECTABLE CARD + INK SWATCHES (GroupVibes composer)
--------------------------------------------------------------------- */
.pv-textarea {
width: 100%;
min-height: 96px;
resize: vertical;
padding: 11px 13px;
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-input);
background: var(--pv-card);
font: 400 var(--pv-text-base)/1.5 var(--pv-sans);
color: var(--pv-ink);
outline: none;
transition: border-color .15s;
}
.pv-textarea:focus { border-color: var(--pv-accent); }
.pv-card--selectable { text-align: left; width: 100%; cursor: pointer; font-family: inherit; }
.pv-card--selectable:hover { border-color: var(--pv-border-warm); }
.pv-card--selected,
.pv-card--selectable[aria-pressed="true"] {
border-color: var(--pv-accent);
box-shadow: 0 0 0 3px var(--pv-accent-soft);
}
.pv-card--selectable .pv-tag { margin-bottom: var(--pv-2); }
.pv-card--selectable__text { margin: 0; font: 400 16px/1.55 var(--pv-sans); color: var(--pv-body); }
.pv-inks { display: flex; gap: 8px; }
.pv-ink-dot {
width: 24px; height: 24px;
border-radius: 50%;
border: 2px solid var(--pv-card);
box-shadow: 0 0 0 1px var(--pv-border);
cursor: pointer;
transition: transform .15s;
}
.pv-ink-dot:hover { transform: scale(1.12); }
.pv-ink-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pv-ink); }
/* ---------------------------------------------------------------------
10C. ENVELOPE REVEAL (GroupVibes board signing — per-signer confirmation)
All colors/fonts below reference the same --pv-* tokens as the rest of
the site; only the envelope-fold geometry is bespoke (nothing else in
the design system needs a fold/seal/reveal mechanic).
--------------------------------------------------------------------- */
/* Board page section wrapper: unlike .pv-generator (916px, sized for the
solo one-column form), the board stage uses the full 1240px container —
corporate signers are on desktop and the two-column layout needs the room. */
.pv-board-stage { position: relative; margin-top: 100px; }
@media (max-width: 600px) {
.pv-board-stage { margin-top: 80px; }
.pv-scene-pad { min-height: 440px; }
.pv-env-scene { transform: scale(0.9); transform-origin: top center; }
}
.pv-stage { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
@media (max-width: 880px) { .pv-stage { grid-template-columns: 1fr; gap: 34px; } }
.pv-ctx { margin: 0 0 var(--pv-2); font: 500 var(--pv-text-sm)/1.4 var(--pv-sans); color: var(--pv-taupe-soft); }
.pv-ctx b { color: var(--pv-ink); font-weight: 600; }
.pv-scene-pad { min-height: 520px; position: relative; display: flex; align-items: flex-start; justify-content: center; }
.pv-env-scene { position: relative; perspective: 1400px; width: 100%; min-height: 406px; }
.pv-envelope {
position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
width: 104%; max-width: 660px; height: 380px;
background: linear-gradient(160deg, var(--pv-sand) 0%, var(--pv-peach) 100%);
border-radius: 8px; box-shadow: var(--pv-shadow-lg); z-index: 1;
}
.pv-env-pocket {
position: absolute; left: 0; bottom: 0; width: 100%; height: 62%;
background: linear-gradient(180deg, var(--pv-sand) 0%, var(--pv-peach) 100%);
clip-path: polygon(0 32%, 50% 0, 100% 32%, 100% 100%, 0 100%);
border-radius: 0 0 8px 8px; z-index: 3;
}
.pv-env-flap {
position: absolute; left: 0; top: 0; width: 100%; height: 64%; transform-origin: top center;
background: linear-gradient(180deg, #fff3e6 0%, var(--pv-sand) 100%);
clip-path: polygon(0 0, 100% 0, 50% 100%);
z-index: 5; transition: transform .8s cubic-bezier(.6,0,.2,1), opacity .3s;
transform: rotateX(178deg);
/* At rest (open/unsealed) the 178deg flip places this ~243px above the
envelope (nearly a full rotation about its own top hinge) — invisible by
default so it can't overlap page content above the scene; it only needs
to be seen while animating shut over the card. */
opacity: 0;
}
.pv-sealed .pv-env-flap { transform: rotateX(0deg); opacity: 1; }
.pv-env-seal {
position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%) scale(0);
width: 44px; height: 44px; border-radius: 50%; background: var(--pv-accent); z-index: 6;
display: grid; place-items: center; color: var(--pv-paper); font: 600 1rem/1 var(--pv-serif);
box-shadow: var(--pv-shadow-sm);
transition: transform .4s .5s cubic-bezier(.34,1.56,.64,1);
}
.pv-sealed .pv-env-seal { transform: translate(-50%,-50%) scale(1); }
.pv-env-card {
position: relative; z-index: 2; width: 100%; max-width: 620px; margin: 0 auto;
background: var(--pv-card); border: 1px solid var(--pv-border); border-radius: var(--pv-r-msg);
padding: 42px 40px 34px; box-shadow: var(--pv-shadow-lg), var(--pv-shadow-sm);
transition: transform .8s cubic-bezier(.6,0,.2,1), opacity .5s;
max-height: 480px; display: flex; flex-direction: column; box-sizing: border-box;
}
.pv-sealed .pv-env-card { transform: translateY(46%) scale(.9); opacity: 0; }
.pv-env-card-head { text-align: center; border-bottom: 1px solid var(--pv-border); padding-bottom: 16px; margin-bottom: 18px; }
.pv-env-card-art { font-size: 2.2rem; line-height: 1; margin-bottom: 6px; min-height: 1px; }
.pv-env-card-head h2 { font: 600 1.5rem/1.2 var(--pv-serif); color: var(--pv-accent); margin: 0; }
.pv-env-card-head p { color: var(--pv-taupe-soft); font-size: var(--pv-text-sm); margin: 6px 0 0; }
.pv-wall {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 22px;
flex-grow: 1;
overflow-y: auto;
max-height: 250px;
padding-right: 8px;
scrollbar-width: thin;
scrollbar-color: var(--pv-taupe-soft) transparent;
}
.pv-wall::-webkit-scrollbar {
width: 6px;
}
.pv-wall::-webkit-scrollbar-track {
background: transparent;
}
.pv-wall::-webkit-scrollbar-thumb {
background-color: var(--pv-taupe-soft);
border-radius: 3px;
}
.pv-wall .pv-note { display: flex; flex-direction: column; gap: 5px; }
.pv-wall .pv-note p { margin: 0; font: 400 var(--pv-text-base)/1.5 var(--pv-sans); color: var(--pv-body); word-break: break-word; }
.pv-wall .pv-note .pv-sig { font-size: 1.45rem; color: var(--pv-ink); }
.pv-wall .pv-note:nth-child(3n+1) .pv-sig { font-family: 'Caveat', cursive; transform: rotate(-2deg); }
.pv-wall .pv-note:nth-child(3n+2) .pv-sig { font-family: 'Dancing Script', cursive; transform: rotate(-3deg); }
.pv-wall .pv-note:nth-child(3n+3) .pv-sig { font-family: 'La Belle Aurore', cursive; transform: rotate(1deg); }
.pv-wall-empty { grid-column: 1/-1; color: var(--pv-taupe-soft); font-size: var(--pv-text-sm); text-align: center; padding: 16px 0; }
.pv-note--mine { grid-column: 1 / -1; border-top: 1px dashed var(--pv-border-warm); padding-top: 12px; margin-top: 2px; }
.pv-note--mine p { font-style: italic; color: var(--pv-muted); }
.pv-note--mine p.placeholder { color: var(--pv-faint); font-style: normal; font-family: var(--pv-sans); font-size: var(--pv-text-sm); }
.pv-note--mine .pv-sig { font-family: 'Dancing Script', cursive; transform: rotate(-2deg); font-size: 1.5rem; min-height: 1.5rem; }
.pv-wall-count { text-align: center; color: var(--pv-taupe-soft); font-size: var(--pv-text-sm); margin-top: 18px; }
.pv-delivered {
position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
text-align: center; z-index: 8; color: var(--pv-ink);
}
.pv-delivered.show { display: flex; }
.pv-delivered .big { font: 500 1.4rem/1.2 var(--pv-serif); margin: 12px 0 6px; }
.pv-delivered p { color: var(--pv-muted); font-size: var(--pv-text-sm); max-width: 280px; margin: 0 0 16px; }
/* Recipient/organizer card page (GET /b/:id/card) — single centered column,
no composer. Reuses .pv-envelope/.pv-env-* from the section above. */
.pv-card-page-stage { max-width: 660px; margin: 0 auto; }
.pv-card-page-status { text-align: center; margin-top: 26px; }
.pv-card-page-status .pv-btn { margin-top: 6px; }
/* Applied briefly on load to skip the open-reveal transition (repeat visits,
reduced motion) without a visible snap-then-settle flash. */
.pv-no-anim .pv-env-flap,
.pv-no-anim .pv-env-card,
.pv-no-anim .pv-env-seal { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
.pv-env-flap,
.pv-env-card,
.pv-env-seal { transition: none !important; }
}
/* ---------------------------------------------------------------------
11. EXAMPLE / CATEGORY CARDS
--------------------------------------------------------------------- */
.pv-card {
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: 18px;
padding: 26px 24px;
box-shadow: var(--pv-shadow-card);
transition: box-shadow var(--pv-normal), transform var(--pv-fast), border-color var(--pv-fast);
}
.pv-card:hover {
box-shadow: var(--pv-shadow-md);
border-color: var(--pv-border-warm);
transform: translateY(-2px);
}
.pv-card--example {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 22px;
}
.pv-card__quote { margin: 0; font: 400 var(--pv-xl, 20px)/1.5 var(--pv-serif); color: var(--pv-ink); }
.pv-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pv-4); }
/* Use-case list (workday page) — printed-feeling stacked rows */
.pv-list {
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-card);
overflow: hidden;
box-shadow: var(--pv-shadow-card);
}
.pv-list__row {
display: flex;
align-items: center;
gap: 18px;
padding: 22px 26px;
border-bottom: 1px solid var(--pv-border);
}
.pv-list__row:last-child { border-bottom: none; }
.pv-list__icon {
flex-shrink: 0;
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
background: var(--pv-tint-sky);
}
.pv-list__title { margin: 0 0 3px; font: 600 16px/1.2 var(--pv-sans); color: var(--pv-ink); }
.pv-list__hint { margin: 0; font: 400 var(--pv-text-sm)/1.4 var(--pv-sans); color: var(--pv-taupe); }
.pv-list__chev { width: 18px; height: 18px; stroke: var(--pv-faint); flex-shrink: 0; }
/* Icon tint helpers */
.pv-tint-sky { background: var(--pv-tint-sky); }
.pv-tint-peach { background: var(--pv-tint-peach); }
.pv-tint-sage { background: var(--pv-tint-sage); }
.pv-tint-ochre { background: var(--pv-tint-ochre); }
.pv-tint-lilac { background: var(--pv-tint-lilac); }
/* ---------------------------------------------------------------------
12. TRUST / SAFETY NOTE
--------------------------------------------------------------------- */
.pv-trust {
display: flex;
align-items: center;
gap: 9px;
color: var(--pv-taupe-soft);
font: 400 var(--pv-text-sm)/1.4 var(--pv-sans);
}
.pv-trust svg { width: 15px; height: 15px; stroke: var(--pv-taupe-soft); flex-shrink: 0; }
.pv-trust--boxed {
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-input);
padding: 14px 18px;
}
/* ---------------------------------------------------------------------
13. BROWSER CHROME (share / category route mock)
--------------------------------------------------------------------- */
.pv-chrome {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 18px;
background: #f5f1e8;
border-bottom: 1px solid var(--pv-border);
}
.pv-chrome__dots { display: flex; gap: 7px; }
.pv-chrome__dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--pv-border-warm); }
.pv-chrome__dots span:nth-child(2) { background: #eddcc6; }
.pv-chrome__dots span:nth-child(3) { background: var(--pv-border); }
.pv-chrome__url {
flex: 1;
display: flex;
align-items: center;
gap: 9px;
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: 9px;
padding: 8px 14px;
font: 500 13px/1 var(--pv-sans);
color: var(--pv-muted);
}
.pv-chrome__url svg { width: 13px; height: 13px; stroke: var(--pv-taupe-soft); }
/* ---------------------------------------------------------------------
14. SYSTEM STATES
--------------------------------------------------------------------- */
.pv-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--pv-4);
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: 18px;
padding: 30px 26px;
}
.pv-state__title { margin: 0; font: 400 19px/1.35 var(--pv-serif); color: var(--pv-ink); }
/* Loading — "Finding the right words…" */
.pv-dots { display: flex; gap: 7px; }
.pv-dots span {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--pv-accent);
animation: pv-dot 1.2s ease-in-out infinite;
}
.pv-dots span:nth-child(2) { animation-delay: .2s; }
.pv-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes pv-dot {
0%, 80%, 100% { transform: translateY(0); opacity: .4; }
40% { transform: translateY(-5px); opacity: 1; }
}
/* Error — "Something got tangled…" */
.pv-state__icon {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--pv-accent-tint);
}
.pv-state__icon svg { width: 20px; height: 20px; stroke: var(--pv-accent); }
/* ---------------------------------------------------------------------
15. FOOTER
--------------------------------------------------------------------- */
.pv-footer {
position: relative;
border-top: 1px solid var(--pv-border);
background: var(--pv-paper-deep);
padding: var(--pv-10) var(--pv-12);
}
.pv-footer__inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--pv-10);
flex-wrap: wrap;
}
.pv-footer__tagline { margin: var(--pv-3) 0 0; max-width: 32ch; color: var(--pv-taupe-soft); font: 400 var(--pv-text-sm)/1.5 var(--pv-sans); }
.pv-footer__cols { display: flex; gap: var(--pv-16); flex-wrap: wrap; }
.pv-footer__col { display: flex; flex-direction: column; gap: 11px; }
.pv-footer__col a { color: var(--pv-muted); font: 500 var(--pv-text-sm)/1 var(--pv-sans); }
/* Minimal single-link footer (homepages) */
.pv-footer--minimal { text-align: center; }
.pv-footer__link { color: var(--pv-muted); font: 500 var(--pv-text-sm)/1 var(--pv-sans); }
.pv-footer__link:hover { color: var(--pv-accent); }
/* — Language switch (header) — */
.pv-lang-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pv-body);
font: 500 var(--pv-text-base)/1 var(--pv-sans);
}
.pv-lang-flags { display: inline-flex; gap: 2px; }
.pv-flag-chip {
display: inline-flex;
width: 20px;
height: 14px;
border-radius: 3px;
overflow: hidden;
border: 1px solid rgba(31, 41, 55, .12);
flex-shrink: 0;
}
.pv-flag-chip svg { width: 100%; height: 100%; display: block; }
/* — Pseudo-footer language nudge — */
.pv-footnote {
padding: var(--pv-8) var(--pv-12) var(--pv-10);
text-align: center;
color: var(--pv-taupe-soft);
font: 400 var(--pv-text-sm)/1.5 var(--pv-sans);
}
.pv-footnote a { color: var(--pv-accent); font-weight: 600; }
/* ---------------------------------------------------------------------
16. OPENGRAPH CARD (1200 × 630)
--------------------------------------------------------------------- */
.pv-share-page {
min-height: 100vh;
padding-bottom: var(--pv-16);
}
.pv-share-page__sun {
top: 58px;
right: 12vw;
}
.pv-share-page__cloud--left {
top: 152px;
left: 8vw;
}
.pv-share-page__header {
justify-content: center;
}
.pv-share-page__main {
position: relative;
display: flex;
min-height: calc(100vh - 100px);
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: var(--pv-12);
padding-bottom: var(--pv-16);
text-align: center;
}
.pv-share-card {
width: min(100%, 640px);
margin-top: var(--pv-6);
padding: 72px 68px 60px;
box-shadow: 0 32px 72px -24px rgba(31, 41, 55, .20), 0 4px 10px rgba(31, 41, 55, .06);
}
.pv-share-page__main .pv-eyebrow {
margin-bottom: var(--pv-5);
}
.pv-share-card__message {
max-width: 26ch;
margin-inline: auto;
}
.pv-share-page__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pv-4);
margin-top: var(--pv-10);
}
.pv-share-page__note {
max-width: 32ch;
margin: 0;
color: var(--pv-muted);
font: 400 var(--pv-text-base)/1.55 var(--pv-sans);
}
.pv-share-page__missing {
width: min(100%, 520px);
box-shadow: var(--pv-shadow-md), var(--pv-shadow-card);
}
/* Share page theme modifiers */
.pv-theme--sunshine .pv-scene { background: var(--pv-scene-warm); }
.pv-theme--calm .pv-scene { background: var(--pv-scene-cool); }
.pv-theme--celebration .pv-scene { background: linear-gradient(180deg, #ede9fe 0%, #fce7f3 64%, #fffaf3 100%); }
.pv-theme--cozy .pv-scene { background: linear-gradient(180deg, #fef3c7 0%, #ffedd5 64%, #fffaf3 100%); }
/* ─────────────────────────────────────────────────────────────────────
CARD THEMES — gift-card identity for homepage preview + /v/:id card.
Shared selectors apply to both surfaces. Covers: gradient background,
shadow, top stripe (::after), tag badge, stamp, divider, address.
───────────────────────────────────────────────────────────────────── */
/* Top decorative stripe shared setup */
.pv-msgcard.pv-theme--sunshine::after,
.pv-msgcard.pv-theme--calm::after,
.pv-msgcard.pv-theme--celebration::after,
.pv-msgcard.pv-theme--cozy::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
border-radius: var(--pv-r-msg) var(--pv-r-msg) 0 0;
pointer-events: none;
}
/* ── Sunshine ── warm gold, optimistic ── */
.pv-msgcard.pv-theme--sunshine {
background: linear-gradient(150deg, #fffef8 0%, #fff7de 60%, #fff0c0 100%);
border-color: #d4a830;
box-shadow: 0 30px 60px -28px rgba(180, 130, 10, .30), 0 2px 6px rgba(31, 41, 55, .05);
}
.pv-msgcard.pv-theme--sunshine::after {
background: linear-gradient(90deg, #e8b000 0%, #f5cc40 50%, #e8a000 100%);
}
.pv-msgcard.pv-theme--sunshine .pv-tag {
background: #fef6cc; border-color: #d8b030; color: #6e4c00;
}
.pv-msgcard.pv-theme--sunshine .pv-stamp { border-color: #c89018; }
.pv-msgcard.pv-theme--sunshine .pv-stamp svg { stroke: #b87f10; }
.pv-msgcard.pv-theme--sunshine .pv-msgcard__mark { border-top-color: #ead880; color: #8a6828; }
.pv-msgcard.pv-theme--sunshine .pv-card-address__from { color: #a07820; }
/* ── Calm ── soft periwinkle, peaceful ── */
.pv-msgcard.pv-theme--calm {
background: linear-gradient(150deg, #f7fbff 0%, #eaf2ff 55%, #ddeaff 100%);
border-color: #7aaad8;
box-shadow: 0 30px 60px -28px rgba(50, 100, 180, .22), 0 2px 6px rgba(31, 41, 55, .04);
}
.pv-msgcard.pv-theme--calm::after {
background: linear-gradient(90deg, #4888d0 0%, #78aaf0 50%, #4880c8 100%);
}
.pv-msgcard.pv-theme--calm .pv-tag {
background: #deeeff; border-color: #7ab8e8; color: #1a4880;
}
.pv-msgcard.pv-theme--calm .pv-stamp { border-color: #68a0d0; }
.pv-msgcard.pv-theme--calm .pv-stamp svg { stroke: #4878b8; }
.pv-msgcard.pv-theme--calm .pv-msgcard__mark { border-top-color: #b0cef0; color: #4870a8; }
.pv-msgcard.pv-theme--calm .pv-card-address__from { color: #4070a0; }
/* ── Celebration ── rose-purple, festive ── */
.pv-msgcard.pv-theme--celebration {
background: linear-gradient(150deg, #fef8ff 0%, #f8eeff 45%, #fff0f8 100%);
border-color: #b868d8;
box-shadow: 0 30px 60px -28px rgba(150, 50, 180, .24), 0 2px 6px rgba(31, 41, 55, .04);
}
.pv-msgcard.pv-theme--celebration::after {
background: linear-gradient(90deg, #b050d0 0%, #e060a8 50%, #b040c8 100%);
}
.pv-msgcard.pv-theme--celebration .pv-tag {
background: #f4e0ff; border-color: #c068d8; color: #621090;
}
.pv-msgcard.pv-theme--celebration .pv-stamp { border-color: #a850c8; }
.pv-msgcard.pv-theme--celebration .pv-stamp svg { stroke: #9840b8; }
.pv-msgcard.pv-theme--celebration .pv-msgcard__mark { border-top-color: #e0a8f8; color: #8840b0; }
.pv-msgcard.pv-theme--celebration .pv-card-address__from { color: #8040a8; }
/* ── Cozy ── amber-brown, warm, intimate ── */
.pv-msgcard.pv-theme--cozy {
background: linear-gradient(150deg, #fffdf4 0%, #fef5d4 58%, #feead0 100%);
border-color: #b87820;
box-shadow: 0 30px 60px -28px rgba(140, 80, 10, .26), 0 2px 6px rgba(31, 41, 55, .05);
}
.pv-msgcard.pv-theme--cozy::after {
background: linear-gradient(90deg, #b06010 0%, #d88820 50%, #b06010 100%);
}
.pv-msgcard.pv-theme--cozy .pv-tag {
background: #fef0c8; border-color: #c07820; color: #5e3800;
}
.pv-msgcard.pv-theme--cozy .pv-stamp { border-color: #a86010; }
.pv-msgcard.pv-theme--cozy .pv-stamp svg { stroke: #985810; }
.pv-msgcard.pv-theme--cozy .pv-msgcard__mark { border-top-color: #e8c060; color: #7a5018; }
.pv-msgcard.pv-theme--cozy .pv-card-address__from { color: #7a5018; }
/* Card To/From address block */
.pv-card-address {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: var(--pv-4);
margin-bottom: var(--pv-5);
font: 500 var(--pv-text-sm)/1.4 var(--pv-sans);
}
.pv-card-address__to { color: var(--pv-ink); }
.pv-card-address__from { color: var(--pv-muted); }
/* Personalization panel in result section */
.pv-personalize {
width: min(100%, 560px);
margin-top: var(--pv-6);
padding: var(--pv-5) var(--pv-6);
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-msg);
text-align: left;
}
.pv-personalize__heading {
margin: 0 0 var(--pv-5);
font: 600 var(--pv-text-sm)/1 var(--pv-sans);
color: var(--pv-taupe);
text-transform: uppercase;
letter-spacing: .07em;
}
.pv-personalize__optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--pv-muted); }
.pv-personalize__fields {
display: flex;
gap: var(--pv-3);
margin-bottom: var(--pv-5);
flex-wrap: wrap;
}
.pv-personalize__field {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-width: 160px;
}
.pv-personalize__label {
margin: 0;
font: 500 var(--pv-text-xs)/1 var(--pv-sans);
color: var(--pv-muted);
letter-spacing: .05em;
text-transform: uppercase;
}
.pv-personalize__theme-label { margin-bottom: var(--pv-3); display: block; }
.pv-personalize__input {
padding: 9px 13px;
border: 1px solid var(--pv-border);
border-radius: var(--pv-r-btn);
background: var(--pv-paper);
font: 400 var(--pv-text-base)/1 var(--pv-sans);
color: var(--pv-ink);
outline: none;
transition: border-color .15s;
-webkit-appearance: none;
}
.pv-personalize__input:focus { border-color: var(--pv-accent); }
.pv-og {
position: relative;
width: 1200px;
height: 630px;
background: var(--pv-paper);
overflow: hidden;
}
.pv-og__scene { position: absolute; inset: 0 0 auto 0; height: 330px; background: var(--pv-scene-cool); }
.pv-og__card {
position: absolute;
inset: 0;
margin: var(--pv-16);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: 28px;
padding: 64px 72px;
box-shadow: var(--pv-shadow-lg);
}
/* ---------------------------------------------------------------------
17. PHONE FRAME (mobile previews)
--------------------------------------------------------------------- */
.pv-phone {
width: 404px;
background: var(--pv-ink);
border-radius: 42px;
padding: 12px;
box-shadow: 0 30px 60px -30px rgba(31, 41, 55, .4);
}
.pv-phone__screen {
position: relative;
background: var(--pv-paper);
border-radius: 32px;
overflow: hidden;
}
.pv-statusbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 22px 0;
font: 600 var(--pv-text-xs)/1 var(--pv-sans);
color: var(--pv-ink);
}
/* ---------------------------------------------------------------------
18. RESPONSIVE
--------------------------------------------------------------------- */
@media (max-width: 880px) {
:root { --pv-display: 34px; --pv-msg: 24px; }
.pv-container { padding-inline: var(--pv-6); }
.pv-header, .pv-footer { padding-inline: var(--pv-6); }
.pv-grid-3 { grid-template-columns: 1fr; }
.pv-panel { padding: var(--pv-6) var(--pv-5); }
.pv-panel__footer { align-items: stretch; flex-direction: column; }
.pv-msgcard { padding: 38px 28px; }
.pv-nav a:not(.pv-btn):not(.pv-lang-link) { display: none; } /* collapse nav links */
.pv-nav .pv-btn { display: none; } /* hide header CTA — generator is on-page */
.pv-nav .pv-lang-link { display: inline-flex; } /* keep language switch visible */
.pv-app { padding-bottom: var(--pv-10); }
.pv-app__sun { top: 38px; right: 40px; width: 84px; height: 84px; }
.pv-app__cloud { display: none; }
.pv-header { padding-top: var(--pv-5); padding-bottom: var(--pv-5); }
.pv-hero { padding-top: var(--pv-3); }
.pv-hero__kicker { display: none; }
.pv-generator { margin-top: 26px; }
.pv-result { margin-top: var(--pv-8); }
.pv-result__intro { align-items: flex-start; flex-direction: column; }
.pv-result__intro p { text-align: left; }
.pv-actions { flex-direction: column; }
.pv-actions .pv-btn { width: 100%; }
.pv-share-page { padding-bottom: var(--pv-10); }
.pv-share-page__sun { top: 38px; right: 40px; width: 84px; height: 84px; }
.pv-share-page__cloud { display: none; }
.pv-share-page__main {
min-height: calc(100vh - 84px);
padding-top: var(--pv-5);
padding-bottom: var(--pv-10);
}
.pv-share-card {
padding: 56px 28px 42px;
}
.pv-share-card .pv-stamp {
top: 16px;
right: 16px;
width: 38px;
height: 38px;
}
.pv-share-page__actions,
.pv-share-page__actions .pv-btn {
width: 100%;
}
}
/* ---------------------------------------------------------------------
19. MOTION PREFERENCE
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}