/* Hitou US — warm "handcrafted letter" aesthetic (W10). Buildless, no CDN, system fonts only. Ivory paper canvas with subtle grain, deep-plum ink, rose accent, gold hairlines, serif heads. Compact by design: the whole entry (offer + quiz + companion) fits one screen. Zero added page weight — texture is an inline SVG data-URI, the logo flourish is inline SVG, type is system serif. */ :root { --paper: #fbf5ef; --paper-2: #f3e7dd; --card: #ffffff; --ink: #2a2024; --ink-soft: #6b5b62; --rose: #b23a64; --rose-deep: #8e2c4f; --plum: #6d3b6e; --gold: #c9a24b; --rec: #7a4a9c; /* W33.1 — "recommended" chip accent: a third lane, distinct from --rose (.sel) and --gold (.ex badge) */ --line: #ecdfd5; --shadow: 0 16px 44px -24px rgba(64, 24, 44, 0.42); --shadow-soft: 0 8px 26px -20px rgba(64, 24, 44, 0.38); --radius: 16px; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* W19 theming layer — every card design (html[data-design]) overrides a subset of the variables above plus these. Components must never hardcode a themed color. */ --glow: #ffffff; /* the "lamp": body's radial highlight */ --on-accent: #ffffff; /* text/icons sitting on rose/plum fills */ --font-display: var(--serif); /* headings; designs swap in their webfont */ --font-body: var(--sans); /* EVERYTHING but headings; designs swap in their body face (W19.x) */ --grain-opacity: .5; /* paper grain visibility (dark designs dial it down) */ --bg-layer: none; /* design background image/pattern, layered over the gradient */ --bg-layer-size: auto; --bg-layer-repeat: repeat; } /* W19: registering the palette as lets the design swap CROSS-FADE — transitions animate registered custom properties, so even gradients/shadows built from them glide. Older browsers skip @property and simply switch instantly (fine). Applied only under html.design-anim, which gift.js adds on a swatch tap — never on first paint (the recipient must not watch a morph). */ @property --paper { syntax: ""; inherits: true; initial-value: #fbf5ef; } @property --paper-2 { syntax: ""; inherits: true; initial-value: #f3e7dd; } @property --card { syntax: ""; inherits: true; initial-value: #ffffff; } @property --ink { syntax: ""; inherits: true; initial-value: #2a2024; } @property --ink-soft{ syntax: ""; inherits: true; initial-value: #6b5b62; } @property --rose { syntax: ""; inherits: true; initial-value: #b23a64; } @property --rose-deep { syntax: ""; inherits: true; initial-value: #8e2c4f; } @property --plum { syntax: ""; inherits: true; initial-value: #6d3b6e; } @property --gold { syntax: ""; inherits: true; initial-value: #c9a24b; } @property --line { syntax: ""; inherits: true; initial-value: #ecdfd5; } @property --glow { syntax: ""; inherits: true; initial-value: #ffffff; } @property --on-accent { syntax: ""; inherits: true; initial-value: #ffffff; } html.design-anim, html.design-anim body { transition: --paper .5s ease, --paper-2 .5s ease, --card .5s ease, --ink .5s ease, --ink-soft .5s ease, --rose .5s ease, --rose-deep .5s ease, --plum .5s ease, --gold .5s ease, --line .5s ease, --glow .5s ease, --on-accent .5s ease; } * { box-sizing: border-box; } /* height on only — base for body's min-height:100%. Putting height:100% on too pins the document scrollHeight to the viewport, so content taller than the screen (a long gift page with lyrics) can't scroll and gets clipped. min-height lets the body grow with content. background-color here is load-bearing, not decoration: without it the body's background propagates to the canvas and gets positioned against the html box (= one viewport tall), so the radial gradient TILES every screenful on long pages (lyrics review) — a visible seam where the "lamp" restarts. An own background on stops the propagation; the body then paints its gradient over its full content height. */ html { height: 100%; background-color: var(--paper-2); } body { margin: 0; font-family: var(--font-body); color: var(--ink); background-color: var(--paper); /* W19: --bg-layer is the design's pattern/texture slot (none by default) riding OVER the lamp gradient. `none` is a valid image layer, so the classic default costs nothing. */ background-image: var(--bg-layer), radial-gradient(1100px 560px at 50% -8%, var(--glow) 0%, var(--paper) 46%, var(--paper-2) 100%); background-size: var(--bg-layer-size), auto; background-repeat: var(--bg-layer-repeat), no-repeat; min-height: 100%; display: flex; flex-direction: column; align-items: center; padding: 20px 16px 36px; } /* paper grain — inline SVG fractal noise, fixed overlay, near-invisible. Zero network weight. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } body > * { position: relative; z-index: 1; } /* ── Brand ───────────────────────────────────────────────────────────── */ .brand { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--plum); } .brand-note { width: 23px; height: 23px; flex: none; } /* W19: the header SVGs carry colors as presentation ATTRIBUTES (stroke="#6d3b6e") — CSS wins over attributes, so designs retheme the logo through the variables, markup untouched. */ .brand-note path { stroke: var(--plum); } .brand-note circle { stroke: var(--rose); } .brand-flourish path { stroke: var(--gold); } .brand-name { position: relative; display: inline-block; } .brand-name b { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: 0.2px; } .brand-flourish { position: absolute; left: -2px; right: -2px; bottom: -6px; width: calc(100% + 4px); height: 8px; } .brand-tag { color: var(--ink-soft); font-size: 12.5px; font-style: italic; font-family: var(--serif); margin-left: 3px; } /* ── Shell + offer ───────────────────────────────────────────────────── */ .shell { width: 100%; max-width: 880px; } .offer { text-align: center; max-width: 600px; margin: 0 auto 16px; } .offer .promise { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.14; margin: 0 0 6px; color: var(--ink); letter-spacing: -0.2px; } .offer .promise em { font-style: italic; color: var(--rose-deep); } .offer .lede { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0 auto 9px; max-width: 460px; } .offer .reassure { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--plum); margin: 0; } .offer .reassure .dot { color: var(--gold); } /* ── Funnel layout: quiz + companion rail ────────────────────────────── */ .funnel { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: start; } .card { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 20px; position: relative; overflow: hidden; } .card::before { /* gold hairline at the very top */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--rose), var(--gold), var(--plum)); } /* progress pips */ .pips { display: flex; gap: 7px; margin-bottom: 16px; } .pip { height: 4px; flex: 1; border-radius: 4px; background: var(--line); transition: background .25s; } .pip.done { background: var(--rose); } .pip.active { background: var(--plum); } .step { display: none; animation: rise .3s ease both; } .step.active { display: block; } @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .eyebrow { font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rose-deep); font-weight: 700; } .step h2 { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.2; margin: 5px 0 3px; } .sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 15px; } /* choice chips */ .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .choice { font: inherit; text-align: left; cursor: pointer; background: var(--paper); border: 1.5px solid var(--line); color: var(--ink); border-radius: 12px; padding: 11px 13px; min-height: 48px; display: flex; align-items: center; transition: transform .12s, border-color .15s, box-shadow .15s, background .15s; } .choice:hover { transform: translateY(-2px); border-color: var(--rose); box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--rose) 60%, transparent); } .choice.sel { border-color: var(--rose); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 14%, transparent); } .choice .ico-emoji { font-size: 17px; line-height: 1; margin-right: 9px; flex: none; } .choice .lab { font-weight: 600; font-size: 14px; } .choice .ex { display: inline-block; margin-left: 7px; font-size: 10px; letter-spacing: .4px; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 1px 5px; } .choice.wide { grid-column: 1 / -1; } .choice.surprise { border-style: dashed; color: var(--plum); } /* W33.1 — recommended chip: the likely pick for the chosen occasion floats to the top of the step and wears this accent. A THIRD visual lane, kept distinct from .sel (rose ring) and the .ex badge (gold): --rec border + faint tint + soft ring. Orthogonal to .sel — a chip can be both, and when it is, .sel (rose) wins the ring so "chosen" stays unambiguous. */ .choice.rec { border-color: var(--rec); background: color-mix(in srgb, var(--rec) 8%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rec) 16%, transparent); } .choice.rec:hover { transform: translateY(-2px); border-color: var(--rec); box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--rec) 55%, transparent), 0 0 0 3px color-mix(in srgb, var(--rec) 16%, transparent); } .choice.rec.sel { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 14%, transparent); } /* W23 freeform occasion: the "Something else" card reveals this inline input + Continue row. [hidden] must beat the flex display rule — the display:flex would otherwise resurrect the row. */ .choices .other-row { grid-column: 1 / -1; display: flex; gap: 8px; } .choices .other-row input { flex: 1; min-width: 0; } .choices .other-row .btn { flex: none; padding: 10px 16px; white-space: nowrap; } .choices .other-row[hidden] { display: none !important; } label.field { display: block; margin: 0 0 11px; } label.field .cap { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; } label.field .opt { color: var(--ink-soft); font-weight: 400; } input[type="text"], input[type="email"], textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 12px; resize: vertical; } input:focus, textarea:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 12%, transparent); background: var(--card); } /* W31.8: server-side 422 on the email field — must also win over :focus (it follows it in source). */ input.field-invalid, input.field-invalid:focus { border-color: var(--rose-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose-deep) 14%, transparent); } /* W19: placeholders follow the theme's muted ink — the UA default grey vanishes on dark designs */ input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: .65; } textarea { min-height: 92px; line-height: 1.5; } /* W24 "I already wrote the lyrics" — a full-width tappable switch row (mobile-first: the whole card toggles, 52px+ target), not a bare checkbox. The input stays in the DOM (focus/forms), visually replaced by the .knob track. */ .own-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 12px; padding: 12px 14px; min-height: 52px; cursor: pointer; background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color .18s ease, background .18s ease; } .own-toggle:has(input:checked) { border-color: var(--rose); background: color-mix(in srgb, var(--rose) 5%, var(--paper)); } .own-toggle input { position: absolute; opacity: 0; pointer-events: none; } .own-toggle .knob { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; transition: background .18s ease; } .own-toggle .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: transform .18s ease; } .own-toggle input:checked ~ .knob { background: var(--rose); } .own-toggle input:checked ~ .knob::after { transform: translateX(18px); } .own-toggle input:focus-visible ~ .knob { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 22%, transparent); } /* The story/lyrics box autogrows with the text (JS, scrollHeight) — no inner scroll. */ .story-field textarea { overflow-y: hidden; resize: none; } /* Own mode on: the lyrics box carries the same accent as the switched-on row — it IS the mode. */ .story-field.own-active textarea { border-color: var(--rose); background: color-mix(in srgb, var(--rose) 5%, var(--paper)); } .story-field.own-active .cap { color: var(--rose-deep); } /* Voice narrates a story — with finished lyrics it's off (class-gated: voice.js owns [hidden]) */ .voice.own-hidden { display: none !important; } .char-note { display: block; text-align: right; font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; } .char-note[hidden] { display: none; } /* W46 review-screen editing (shared by the wizard's inline review and the gift page): the lyrics ARE the editor — a textarea dressed as the reading panel it replaced, so nothing shifts when the caret lands in it. Autogrows with the text (JS sets height off scrollHeight) — no inner scroll, no resize handle to fight the script. The frame/padding come from the per-surface .lyrics rules. */ textarea.lyrics { display: block; width: 100%; min-height: 200px; overflow-y: hidden; resize: none; } /* 16px is not a taste call: iOS Safari zooms the page whenever a focused field is smaller, and this field is meant to be tapped on every visit. Beats the 14.5px panel rule on specificity. */ .card.review textarea.lyrics, .gstate[data-state="lyrics_review"] textarea.lyrics { font-size: 16px; } /* The panel's own border out-specifies the shared input:focus rule — restate the ring here, or tapping the text gives no sign that it just became editable. */ .card.review textarea.lyrics:focus, .gstate[data-state="lyrics_review"] textarea.lyrics:focus { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 12%, transparent); } /* The line under the box: the affordance hint, the save state (this IS the save confirmation — there is no Save button) and the restore link. Pulled up snug under the panel. */ .lyr-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: -10px 0 16px; min-height: 22px; text-align: left; } .lyr-hint, .lyr-save { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); } .lyr-save { font-weight: 600; color: var(--plum); } .lyr-save.warn { color: var(--rose-deep); } /* Pinned right: the row's contents come and go (the hint retires after the first edit, the save state appears with it), and with space-between alone the link walked from one end to the other as they did — a moving target under the reader's thumb (Timur, 25.07). */ .lyr-restore { margin-left: auto; font: inherit; font-size: 12.5px; cursor: pointer; background: none; border: none; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; padding: 8px 2px; min-height: 36px; } .lyr-restore:hover { color: var(--rose-deep); } .lyr-restore:disabled { opacity: .5; cursor: default; } .lyr-hint[hidden], .lyr-save[hidden], .lyr-restore[hidden] { display: none !important; } /* W41.0 live draft. What replaced the invented progress curve: the H2 says what is happening and this line carries the detail — both are the panel's OWN type (.sub), not a new visual element. The slow breathe is the only motion left standing in for the bar; the arriving text takes over as the real progress signal the moment there is any. */ .stage-sub { margin: 2px 0 14px; min-height: 20px; animation: stage-breathe 2.6s ease-in-out infinite; } .stage-sub[hidden] { display: none !important; } @keyframes stage-breathe { 0%, 100% { opacity: .68; } 50% { opacity: 1; } } /* While the song is being revealed the box is a display, not an input: no caret, no focus ring, nothing that invites typing into text that is about to be replaced by the finished draft. */ textarea.lyrics.streaming { caret-color: transparent; cursor: default; } .card.review textarea.lyrics.streaming:focus, .gstate[data-state="lyrics_review"] textarea.lyrics.streaming:focus { border-color: var(--line); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .stage-line { animation: none; opacity: 1; } } .lyr-meta .char-note { flex: 1 0 100%; margin-top: 0; } .nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } .back { background: none; border: none; color: var(--ink-soft); font: inherit; cursor: pointer; padding: 8px 6px; min-height: 48px; display: inline-flex; align-items: center; } .back:hover { color: var(--ink); } .back[hidden] { visibility: hidden; } .btn { font: inherit; font-weight: 700; cursor: pointer; color: var(--on-accent); background: linear-gradient(135deg, var(--rose), var(--rose-deep)); border: none; border-radius: 12px; padding: 12px 20px; min-height: 48px; letter-spacing: .2px; box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--rose-deep) 80%, transparent); transition: transform .12s, opacity .15s; } .btn:hover { transform: translateY(-1px); } .btn:disabled { opacity: .55; cursor: progress; transform: none; } /* W6.2: .btn on a link (the expired screen's create-again CTA) — is inline and underlined by default, which breaks the button metrics the class assumes on