/* love — styles.css Faithful implementation of docs/love-product/design/system.md (G4 approved). Three orthogonal axes, all data attributes on , zero brand/theme branching: data-theme-family: keepsake (default, no attribute) | hearth | fiesta data-theme: dark | light (unset ⇒ prefers-color-scheme) data-brand: udad (default, no attribute) | umom — accent pair only Section order: token layers (Keepsake/Hearth/Fiesta) → §4 component recipes → §3 type-scale note → §5 motion → §6 a11y note → §7 breakpoints → TRANSITIONAL aliases for markup not yet migrated to the §4 recipes. */ /* ====================================================================== FONT FACES — self-hosted, one declaration per family+style+weight, shared across all theme-families (served from /fonts/). ====================================================================== */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/fraunces-latin.woff2') format('woff2');} @font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url('/fonts/fraunces-italic-latin.woff2') format('woff2');} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/sourceserif4-latin.woff2') format('woff2');} @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url('/fonts/sourceserif4-italic-latin.woff2') format('woff2');} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/hanken-var-latin.woff2') format('woff2');} @font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/figtree-latin.woff2') format('woff2');} /* ====================================================================== KEEPSAKE — default theme-family (no data-theme-family attribute needed) love-tokens v1 — system.md §2, values byte-match the canonical block. ====================================================================== */ :root{ /* faces — axis: theme-family=keepsake */ --font-ui:'Source Serif 4',Georgia,serif; --font-story:'Source Serif 4',Georgia,serif; --font-display:'Fraunces',Georgia,serif; --font-wordmark:'Hanken Grotesk',system-ui,sans-serif; /* LOCKED logotype, all themes */ /* type scale — axis: global (faces remap per theme-family) */ --fs-xs:.78rem; --fs-sm:.9rem; --fs-base:1rem; --fs-story:1.0625rem; --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:clamp(1.6rem,5vw,2.05rem); --fs-3xl:clamp(2rem,6vw,2.7rem); --lh-display:1.2; --lh-heading:1.3; --lh-ui:1.5; --lh-story:1.7; /* space / radius / motion — axis: global */ --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:40px; --space-6:64px; --radius:8px; --radius-lg:16px; --radius-pill:999px; --tap:44px; --pad-x:clamp(1rem,3vw,2.5rem); --dur-fast:120ms; --dur:200ms; --ease:cubic-bezier(.2,.6,.2,1); --focus:2px solid var(--acc); /* neutrals · DARK — axis: theme-family × light/dark */ --bg:#17130f; --text:#ede4d3; --mut:#a99a83; --card:rgba(237,228,207,0.05); --card2:rgba(237,228,207,0.09); --sep:rgba(237,228,207,0.10); --ok:#8bbf9a; --warn:#d9926f; /* accent · DARK · brand=udad — axis: theme-family × light/dark × brand */ --acc:#67ad93; --acc-glow:rgba(103,173,147,0.30); --acc-ink:#67ad93; --on-acc:#17130f; color-scheme:dark; } :root[data-brand="umom"]{ --acc:#dd8b9c; --acc-glow:rgba(221,139,156,0.30); --acc-ink:#dd8b9c; } @media (prefers-color-scheme:light){ :root{ --bg:#f4ece0; --text:#2a2320; --mut:#6f6258; --card:#fbf7ef; --card2:#fffdf8; --sep:rgba(42,35,32,0.12); --ok:#3f7d5c; --warn:#9c5a34; --acc:#245740; --acc-glow:rgba(36,87,64,0.22); --acc-ink:#245740; --on-acc:#fffdf8; color-scheme:light; } :root[data-brand="umom"]{ --acc:#822a3d; --acc-glow:rgba(130,42,61,0.20); --acc-ink:#822a3d; } } [data-theme="dark"]{ --bg:#17130f; --text:#ede4d3; --mut:#a99a83; --card:rgba(237,228,207,0.05); --card2:rgba(237,228,207,0.09); --sep:rgba(237,228,207,0.10); --ok:#8bbf9a; --warn:#d9926f; --acc:#67ad93; --acc-glow:rgba(103,173,147,0.30); --acc-ink:#67ad93; --on-acc:#17130f; color-scheme:dark; } [data-theme="dark"][data-brand="umom"]{ --acc:#dd8b9c; --acc-glow:rgba(221,139,156,0.30); --acc-ink:#dd8b9c; } [data-theme="light"]{ --bg:#f4ece0; --text:#2a2320; --mut:#6f6258; --card:#fbf7ef; --card2:#fffdf8; --sep:rgba(42,35,32,0.12); --ok:#3f7d5c; --warn:#9c5a34; --acc:#245740; --acc-glow:rgba(36,87,64,0.22); --acc-ink:#245740; --on-acc:#fffdf8; color-scheme:light; } [data-theme="light"][data-brand="umom"]{ --acc:#822a3d; --acc-glow:rgba(130,42,61,0.20); --acc-ink:#822a3d; } /* ====================================================================== HEARTH — theme-family=hearth · identity-a/palette.md (wine rework) Neutrals/faces/accents lifted from design/mockups/_skin-proof.html; --ok/--warn from identity-a/palette.md §"Status semantics". --radius* stay the global Keepsake values (system.md §1: radius is a global-axis token, identical in all themes) — not overridden here. ====================================================================== */ html[data-theme-family="hearth"]{ --font-ui:'Hanken Grotesk',system-ui,sans-serif; --font-story:'Fraunces',Georgia,serif; --font-display:'Fraunces',Georgia,serif; --font-wordmark:'Hanken Grotesk',system-ui,sans-serif; --bg:#14100e; --text:#f1ebe3; --mut:#a99c90; --card:rgba(241,235,227,0.05); --card2:rgba(241,235,227,0.09); --sep:rgba(241,235,227,0.08); --ok:#7fbe93; --warn:#d9a07a; --acc:#c55d6f; --acc-glow:rgba(197,93,111,0.30); --acc-ink:#c55d6f; --on-acc:#14100e; color-scheme:dark; } html[data-theme-family="hearth"][data-brand="umom"]{ --acc:#d57c90; --acc-glow:rgba(213,124,144,0.30); --acc-ink:#d57c90; } @media (prefers-color-scheme:light){ html[data-theme-family="hearth"]{ --bg:#f3ede6; --text:#211a16; --mut:#6e5f52; --card:rgba(255,255,255,0.62); --card2:rgba(255,255,255,0.92); --sep:rgba(33,26,22,0.10); --ok:#2f7d4f; --warn:#9a5a2a; --acc:#742233; --acc-glow:rgba(116,34,51,0.20); --acc-ink:#742233; --on-acc:#fbf4f1; color-scheme:light; } html[data-theme-family="hearth"][data-brand="umom"]{ --acc:#7e2a3e; --acc-glow:rgba(126,42,62,0.20); --acc-ink:#7e2a3e; } } html[data-theme-family="hearth"][data-theme="dark"]{ --bg:#14100e; --text:#f1ebe3; --mut:#a99c90; --card:rgba(241,235,227,0.05); --card2:rgba(241,235,227,0.09); --sep:rgba(241,235,227,0.08); --ok:#7fbe93; --warn:#d9a07a; --acc:#c55d6f; --acc-glow:rgba(197,93,111,0.30); --acc-ink:#c55d6f; --on-acc:#14100e; color-scheme:dark; } html[data-theme-family="hearth"][data-theme="dark"][data-brand="umom"]{ --acc:#d57c90; --acc-glow:rgba(213,124,144,0.30); --acc-ink:#d57c90; } html[data-theme-family="hearth"][data-theme="light"]{ --bg:#f3ede6; --text:#211a16; --mut:#6e5f52; --card:rgba(255,255,255,0.62); --card2:rgba(255,255,255,0.92); --sep:rgba(33,26,22,0.10); --ok:#2f7d4f; --warn:#9a5a2a; --acc:#742233; --acc-glow:rgba(116,34,51,0.20); --acc-ink:#742233; --on-acc:#fbf4f1; color-scheme:light; } html[data-theme-family="hearth"][data-theme="light"][data-brand="umom"]{ --acc:#7e2a3e; --acc-glow:rgba(126,42,62,0.20); --acc-ink:#7e2a3e; } /* ====================================================================== FIESTA — theme-family=fiesta · identity-c/palette.md (marigold / rosa mexicano) Neutrals/faces/accents lifted from design/mockups/_skin-proof.html; --ok/--warn from identity-c/palette.md (kept, same value both themes — used only as small marks/borders, never body text, no ≥7 bar applies). --acc-ink diverges from --acc in light theme only (a vivid fill can't also be readable text on near-white); --on-acc is a constant, both brands. ====================================================================== */ html[data-theme-family="fiesta"]{ --font-ui:'Figtree',system-ui,sans-serif; --font-story:'Fraunces',Georgia,serif; --font-display:'Fraunces',Georgia,serif; --font-wordmark:'Hanken Grotesk',system-ui,sans-serif; --bg:#1a1222; --text:#f7edf3; --mut:#c3a9bd; --card:rgba(255,240,248,0.06); --card2:rgba(255,240,248,0.11); --sep:rgba(255,240,248,0.09); --ok:#7fc490; --warn:#e0876f; --acc:#ff9d2e; --acc-glow:rgba(255,157,46,0.34); --acc-ink:#ff9d2e; --on-acc:#2a1013; color-scheme:dark; } html[data-theme-family="fiesta"][data-brand="umom"]{ --acc:#ff3f8f; --acc-glow:rgba(255,63,143,0.34); --acc-ink:#ff3f8f; } @media (prefers-color-scheme:light){ html[data-theme-family="fiesta"]{ --bg:#fdf3f5; --text:#241019; --mut:#7a5567; --card:rgba(120,30,70,0.05); --card2:rgba(255,255,255,0.75); --sep:rgba(36,16,25,0.10); --ok:#7fc490; --warn:#e0876f; --acc:#ff9d2e; --acc-glow:rgba(255,157,46,0.30); --acc-ink:#a85a00; --on-acc:#2a1013; color-scheme:light; } html[data-theme-family="fiesta"][data-brand="umom"]{ --acc:#ff3f8f; --acc-glow:rgba(255,63,143,0.30); --acc-ink:#c8206a; } } html[data-theme-family="fiesta"][data-theme="dark"]{ --bg:#1a1222; --text:#f7edf3; --mut:#c3a9bd; --card:rgba(255,240,248,0.06); --card2:rgba(255,240,248,0.11); --sep:rgba(255,240,248,0.09); --ok:#7fc490; --warn:#e0876f; --acc:#ff9d2e; --acc-glow:rgba(255,157,46,0.34); --acc-ink:#ff9d2e; --on-acc:#2a1013; color-scheme:dark; } html[data-theme-family="fiesta"][data-theme="dark"][data-brand="umom"]{ --acc:#ff3f8f; --acc-glow:rgba(255,63,143,0.34); --acc-ink:#ff3f8f; } html[data-theme-family="fiesta"][data-theme="light"]{ --bg:#fdf3f5; --text:#241019; --mut:#7a5567; --card:rgba(120,30,70,0.05); --card2:rgba(255,255,255,0.75); --sep:rgba(36,16,25,0.10); --ok:#7fc490; --warn:#e0876f; --acc:#ff9d2e; --acc-glow:rgba(255,157,46,0.30); --acc-ink:#a85a00; --on-acc:#2a1013; color-scheme:light; } html[data-theme-family="fiesta"][data-theme="light"][data-brand="umom"]{ --acc:#ff3f8f; --acc-glow:rgba(255,63,143,0.30); --acc-ink:#c8206a; } /* ====================================================================== §4.1 Base + skip link + appbar + wordmark (LOCKED) + sign-out ====================================================================== */ *{box-sizing:border-box;} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui); font-size:var(--fs-base);line-height:var(--lh-ui);font-optical-sizing:auto; padding-bottom:env(safe-area-inset-bottom);} .page{max-width:44rem;margin:0 auto;padding:0 var(--pad-x);} :focus-visible{outline:var(--focus);outline-offset:2px;border-radius:2px;} .skip{position:absolute;left:-100%;background:var(--acc);color:var(--on-acc); padding:.5rem 1rem;border-radius:0 0 var(--radius) 0;z-index:20;} .skip:focus{left:0;} .appbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3); padding:calc(var(--space-3) + env(safe-area-inset-top)) var(--pad-x) var(--space-3);} .wordmark{display:inline-flex;align-items:center;gap:.4em; font-family:var(--font-wordmark);font-weight:700;line-height:1; letter-spacing:-.01em;text-transform:lowercase;text-decoration:none;color:var(--text); font-size:var(--wm-size,1.25rem);white-space:nowrap;} .wordmark .u{color:var(--acc-ink);} .wordmark--hero{--wm-size:clamp(2rem,7vw,3rem);} /* The cup/heart mark scales with the wordmark; heart carries the brand accent. */ .wordmark-mark{width:1.05em;height:1.05em;flex:none;display:block;} .wordmark--hero .wordmark-mark{width:1em;height:1em;} /* Icon family: a ref to the inline sprite. Sized in em so it tracks its label; the line inherits currentColor, accent marks the brand var(--acc). */ .icon{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-0.16em; fill:none;color:inherit;} /* The hidden symbol library — kept in flow-free space (not display:none, which can break references in some engines). */ .icon-sprite{position:absolute;width:0;height:0;overflow:hidden;} /* Illustrations: linework inherits the muted token; hearts/accents the brand accent. Decorative (aria-hidden) — the adjacent copy carries the meaning. */ .illus{--ink:var(--mut);display:block;height:auto;max-width:100%;} .illus--feed{width:min(220px,58%);margin:0 auto var(--space-2);} .illus--gathering{width:min(240px,64%);margin:0 auto var(--space-3);} .illus--how{width:100%;max-width:480px;margin:0 auto;} /* Landing hero — a crossfading pool of illustrations presented as a KEEPSAKE CARD: a warm cream matte, rounded, softly framed. The card's own cream background means art with a baked background (Illustrator) and art with a transparent background both read identically, and on the DARK theme it's a deliberate warm keepsake object, never a clashing rectangle. Fixed paper register (theme-independent, like the keepsake export). Slides stack; only .is-active shows; JS crossfades every few seconds. No-JS / reduced-motion: the first slide only. */ .hero-carousel{position:relative;width:min(300px,74%);aspect-ratio:1/1;margin:0 auto var(--space-3); background:#f6efe1;border:3px solid #ece2d0;border-radius:var(--radius-lg); box-shadow:0 8px 28px rgba(0,0,0,.28);overflow:hidden;} .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top; opacity:0;transition:opacity 1.2s ease;} .hero-slide.is-active{opacity:1;} @media (prefers-reduced-motion:reduce){.hero-slide{transition:none;}} /* Live theme-family preview (create form): while .theme-animating is on , every painted color eases to its new value, so switching style themes recolors the page smoothly instead of snapping. JS adds the class for the swap, then removes it. */ html.theme-animating,html.theme-animating *,html.theme-animating *::before,html.theme-animating *::after{ transition:background-color .5s ease,color .5s ease,border-color .5s ease, fill .5s ease,stroke .5s ease,box-shadow .5s ease,outline-color .5s ease !important;} @media (prefers-reduced-motion:reduce){ html.theme-animating,html.theme-animating *,html.theme-animating *::before,html.theme-animating *::after{transition:none !important;}} /* ============================================================ Create studio — preview-first, craft-by-tapping make-a-page. The card mirrors the form; a progress meter (floored at 20%) climbs; the chosen style recolors the whole card live. ============================================================ */ .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0; clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;} .studio{max-width:32rem;margin-inline:auto;} .studio-title{text-align:center;margin:0 0 var(--space-2);} .studio-intro{text-align:center;color:var(--mut);max-width:28rem;margin:0 auto var(--space-4);} .progress{margin:0 0 var(--space-4);} .progress__track{height:8px;border-radius:var(--radius-pill);background:var(--card2);overflow:hidden;} .progress__fill{height:100%;border-radius:var(--radius-pill);background:var(--acc); box-shadow:0 0 12px var(--acc-glow);transition:width .5s var(--ease);} .progress__label{margin:var(--space-2) 0 0;font-size:var(--fs-sm);color:var(--mut);text-align:center;} .progress__label [data-progress-pct]{color:var(--acc-ink);font-weight:600;} .preview-card{margin:0 auto var(--space-3);max-width:22rem;background:var(--card2); border:1px solid var(--sep);border-radius:var(--radius-lg);overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.18);transition:background var(--dur) var(--ease);} .preview-photo{position:relative;} .preview-photo__pick{display:block;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden; background:#f6efe1;cursor:pointer;} .preview-photo__img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;} .preview-photo__cta{position:absolute;left:0;right:0;bottom:0;padding:var(--space-3); font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:600;color:#fff;text-align:center; background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));} .preview-photo__pick:hover .preview-photo__cta, .preview-photo__pick:focus-within .preview-photo__cta{text-decoration:underline;} .preview-photo__remove{position:absolute;top:var(--space-2);right:var(--space-2);border:0; border-radius:var(--radius-pill);padding:6px 12px;font-size:var(--fs-xs);font-weight:600; background:rgba(0,0,0,.62);color:#fff;cursor:pointer;} .preview-body{padding:var(--space-3) var(--space-4) var(--space-4);text-align:center;} .preview-line{display:block;width:100%;background:transparent;border:0;cursor:pointer;color:inherit; font:inherit;padding:var(--space-1) var(--space-2);border-radius:var(--radius); transition:background var(--dur-fast) var(--ease);} .preview-line:hover,.preview-line:focus-visible{background:var(--card);outline:none;} .preview-name{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:500; color:var(--text);line-height:1.12;} .preview-name.is-empty span{color:var(--mut);font-style:italic;} .preview-occ{font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--acc-ink); margin-top:var(--space-1);letter-spacing:.02em;} .preview-occ.is-empty{display:none;} .style-seg{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin:0 0 var(--space-5);} .style-chip input{position:absolute;opacity:0;pointer-events:none;} .style-chip span{display:inline-block;padding:8px 16px;border-radius:var(--radius-pill); border:1px solid var(--sep);background:var(--card);color:var(--mut);font-size:var(--fs-sm); font-weight:600;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);} .style-chip input:checked+span{background:var(--acc);color:var(--on-acc);border-color:var(--acc);} .style-chip input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px;} .studio-form{margin-top:var(--space-2);} @keyframes poke{0%{box-shadow:0 0 0 0 var(--acc-glow);}100%{box-shadow:0 0 0 8px transparent;}} .field.is-poked>input,.field.is-poked>select{animation:poke .9s var(--ease);} @media (prefers-reduced-motion:reduce){.field.is-poked>input,.field.is-poked>select{animation:none;}} /* ============================================================ The wall — public feed of "why I love my mom/dad" posts. ============================================================ */ .wall{max-width:38rem;margin-inline:auto;} .wall-title{text-align:center;margin:0 0 var(--space-2);} .wall-sub{text-align:center;max-width:30rem;margin:0 auto var(--space-4);} /* max-width:none: escape the global form{max-width:34rem}, which otherwise clamps the composer 35px narrower than the cards (textarea/counter/button misaligned with feed). */ .wall-compose{display:block;margin:0 0 var(--space-4);max-width:none;} .wall-compose textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:5rem; font:inherit;font-size:var(--fs-story);color:var(--text);background:var(--card2); border:1px solid var(--sep);border-radius:var(--radius-lg);padding:var(--space-3);} .wall-compose textarea:focus-visible{outline:2px solid var(--acc);outline-offset:1px;} .wall-compose__foot{display:flex;align-items:center;justify-content:space-between; gap:var(--space-3);margin-top:var(--space-2);flex-wrap:wrap;} .wall-compose__hint{font-size:var(--fs-sm);} /* Bot-bait: off-screen, never shown to humans; an automated poster that fills it is nerfed. */ .wall-bait{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .form-note{background:var(--card2);border:1px solid var(--sep);border-radius:var(--radius); padding:var(--space-2) var(--space-3);margin:0 0 var(--space-3);color:var(--mut);font-size:var(--fs-sm);} .wall-sort{text-align:center;margin:0 0 var(--space-3);color:var(--mut);font-size:var(--fs-sm);} .wall-sort a{color:var(--mut);text-decoration:none;} .wall-sort a[aria-current]{color:var(--acc-ink);font-weight:600;} .wall-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);} .wall-empty{text-align:center;padding:var(--space-5) 0;} .wpost{display:flex;gap:var(--space-3);align-items:flex-start;justify-content:space-between; background:var(--card);border:1px solid var(--sep);border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4);} .wpost__main{flex:1;min-width:0;} .wpost__body{margin:0;font-family:var(--font-story);font-size:var(--fs-story);line-height:1.5; white-space:pre-wrap;overflow-wrap:anywhere;} .wpost__time{display:block;margin-top:var(--space-1);font-size:var(--fs-xs);} .wpost__actions{display:flex;align-items:center;gap:var(--space-3);flex:none;} .wpost__reported{font-size:var(--fs-xs);white-space:nowrap;} .wall-count{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;} .wall-count.is-low{color:var(--acc-ink);font-weight:700;} .wvote{display:flex;flex-direction:column;align-items:center;gap:2px;} /* Vote/report are submit buttons (no-JS), so override the global accent-pill button. */ .wpost .wvote__btn{border:0;background:transparent;color:var(--mut);cursor:pointer;line-height:1; font-size:var(--fs-lg);min-height:0;padding:2px 8px;border-radius:var(--radius); transition:color var(--dur-fast) var(--ease);} .wpost .wvote__btn:hover{color:var(--text);background:transparent;} .wpost .wvote__btn.is-on{color:var(--acc);} .wvote__score{font-size:var(--fs-sm);font-weight:700;color:var(--text);min-width:1.5em;text-align:center;} .wpost .wreport__btn{border:0;background:transparent;color:var(--mut);cursor:pointer;min-height:0; font-size:var(--fs-xs);font-weight:400;text-decoration:underline;padding:0;} .wpost .wreport__btn:hover{color:var(--text);background:transparent;} /* Admin moderation queue */ .modqueue{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);} .modrow{background:var(--card);border:1px solid var(--sep);border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4);} .modrow--hidden{border-color:var(--acc);} .modrow--removed{opacity:.6;} .modrow__body{margin:0 0 var(--space-1);font-family:var(--font-story);white-space:pre-wrap;overflow-wrap:anywhere;} .modrow__meta{font-size:var(--fs-xs);margin:0 0 var(--space-2);} .modrow__actions{display:flex;gap:var(--space-2);} /* How-It-Works guide */ .how{max-width:44rem;margin:0 auto;padding:0 var(--pad-x);text-align:center;} .how>.sub{color:var(--mut);max-width:34rem;margin:var(--space-2) auto var(--space-4);} .how-steps{list-style:none;margin:var(--space-4) 0;padding:0;display:grid;gap:var(--space-3);text-align:left;} .how-step{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:var(--space-3); padding:var(--space-3) var(--space-4);background:var(--card);border-radius:var(--radius-lg);} .how-step-num{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:var(--radius-pill); background:var(--acc);color:var(--on-acc);font-weight:700;font-size:var(--fs-sm);} .how-step-icon{width:1.7em;height:1.7em;color:var(--mut);} .how-step-text h2{font-family:var(--font-display);font-weight:500;font-size:var(--fs-lg);margin:0 0 .15em;} .how-step-text p{color:var(--mut);margin:0;} .landing-more{margin-top:var(--space-3);} /* Create-first landing: the primary "Start a page" CTA leads; sign-in is secondary. */ .btn--hero{font-size:var(--fs-lg);padding:var(--space-3) var(--space-5);margin-top:var(--space-2);} .landing-signin{margin-top:var(--space-4);} .appbar-spacer{margin-left:auto;} .signout{display:inline-flex;align-items:center;gap:var(--space-1); background:transparent;border:0;color:var(--mut);font:inherit;cursor:pointer; padding:var(--space-2) var(--space-3);min-height:var(--tap);border-radius:var(--radius);} .signout:hover{color:var(--text);} /* ====================================================================== §4.2 Button / CTA — ONE recipe ====================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); font:inherit;font-weight:600;cursor:pointer;text-decoration:none;text-align:center; min-height:var(--tap);padding:var(--space-2) var(--space-4);border:0; border-radius:var(--radius);background:var(--acc);color:var(--on-acc); transition:filter var(--dur) var(--ease);} .btn:hover{filter:brightness(1.06);} .btn--quiet{background:transparent;color:var(--mut);font-weight:400;min-height:var(--tap); padding:var(--space-2) var(--space-3);} .btn--quiet:hover{color:var(--text);} .btn--pill{border-radius:var(--radius-pill);} .btn:focus-visible{outline:var(--focus);outline-offset:2px;} .btn[aria-busy="true"]{opacity:.85;cursor:default;filter:none;pointer-events:none;} .btn[aria-busy="true"]::after{content:'';width:.85em;height:.85em;margin-left:.1em; border:2px solid currentColor;border-top-color:transparent;border-radius:50%; animation:spin .7s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} /* ====================================================================== §4.3 Card ====================================================================== */ .card{background:var(--card);border-radius:var(--radius-lg);padding:var(--space-4);} .card--raised{background:var(--card2);} .card__title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-xl); line-height:var(--lh-heading);margin:0 0 var(--space-2);} /* ====================================================================== §4.4 Form fields + labels ====================================================================== */ .field{display:flex;flex-direction:column;gap:var(--space-1);margin:0 0 var(--space-3);} .field label{font-size:var(--fs-sm);color:var(--mut);font-weight:600;} .field input,.field textarea,.field select{font:inherit;color:var(--text); background:var(--card2);border:1px solid var(--sep);border-radius:var(--radius); padding:var(--space-2) var(--space-3);min-height:var(--tap);width:100%;} .field textarea{min-height:8rem;resize:vertical;line-height:var(--lh-story); font-family:var(--font-story);} .field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline:var(--focus);outline-offset:1px;border-color:transparent;} /* Native