/* ============================================================ themes.css — Theme engine for Story Squad ------------------------------------------------------------ Each theme is a set of design tokens (color, type, shape, elevation) scoped under [data-theme="..."] on . The tokens are ORIGINAL interpretations of the aesthetic descriptions published in VoltAgent/awesome-claude-design. They are inspiration, not 1:1 clones — no brand logos, proprietary fonts, or trademarked assets are reproduced. Google Fonts are used as open substitutes for brand faces. ============================================================ */ /* ---- Tokens the rest of the app reads ----------------------- --paper / --paper-deep : surfaces --ink / --ink-soft : text --accent / --accent-deep : brand accent --red-pencil, --leaf : secondary accents (default theme) --font-display / --font-body / --font-hand : type roles --radius : corner roundness --btn-radius : button roundness --shadow-card : card elevation --shadow-press : the "stamped" offset shadow (default) --uppercase : heading text-transform (none/uppercase) --tracking : heading letter-spacing ------------------------------------------------------------- */ /* ========================================================= DEFAULT — Storybook (the original Story Squad look) Warm paper, pencil yellow, characterful serif + handwriting ========================================================= */ :root, [data-theme="storybook"] { --paper: #f5ecd9; --paper-deep: #ebdfc5; --ink: #1a1612; --ink-soft: #4a3f33; --accent: #e8b53a; --accent-deep:#c8941e; --red-pencil: #c0392b; --leaf: #4a7c59; --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Sora", system-ui, sans-serif; --font-hand: "Caveat", "Marker Felt", cursive; --radius: 6px; --btn-radius: 999px; --shadow-card: 4px 4px 0 var(--ink); --shadow-press: 4px 4px 0 var(--accent); --uppercase: none; --tracking: -0.02em; --grain: 1; /* paper grain on/off-ish via opacity */ --hero-rotate: 3deg; /* the tilted notebook card */ /* Type scale (storybook default — characterful, bold, tight) */ --fs-display: clamp(2.5rem, 1.5rem + 4vw, 5rem); --lh-display: 0.98; --fw-display: 900; --ls-display: -0.025em; --fs-section: clamp(1.85rem, 1.3rem + 2vw, 2.75rem); --lh-section: 1.1; --fw-section: 800; --fs-feature-title: 1.4rem; --lh-feature-title: 1.25; --fw-feature-title: 800; --fs-lede: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); --lh-lede: 1.55; --fw-lede: 400; --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); --lh-body: 1.6; --fs-prose: 1.08rem; } /* ============================================================ DARK MODE Driven by [data-mode="dark"] on (set by the header toggle, defaulting to the OS preference via an inline script in ). Each theme defines its own dark surface set; for IBM and Stripe these are the genuine dark-app / dashboard shells their DESIGN.md specs describe, not just inverted marketing pages. ============================================================ */ /* Storybook — warm dark paper */ [data-mode="dark"][data-theme="storybook"], [data-mode="dark"]:root { --paper: #1c1814; --paper-deep: #14110d; --ink: #f1e6cf; --ink-soft: #b8a888; --accent: #f0c14b; --accent-deep:#d4a32a; } /* Apple — the dark gallery: near-black canvas, Sky Link Blue links. (Apple's marketing alternates dark tiles; this is the dark-dominant variant.) */ [data-mode="dark"][data-theme="apple"] { --paper: #000000; /* surface-black */ --paper-deep: #1d1d1f; /* dark tile */ --ink: #f5f5f7; --ink-soft: #a1a1a6; --accent: #2997ff; /* primary-on-dark — Sky Link Blue (Action Blue would vanish) */ --accent-deep:#0071e3; --hairline: #424245; } /* IBM — Carbon dark UI shell: charcoal canvas, white ink, IBM Blue holds. */ [data-mode="dark"][data-theme="ibm"] { --paper: #161616; /* inverse-canvas */ --paper-deep: #262626; /* inverse-surface-1 */ --ink: #ffffff; /* inverse-ink */ --ink-soft: #c6c6c6; /* inverse-ink-muted */ --accent: #4589ff; /* IBM Blue lightens on dark for contrast (Carbon's blue-50) */ --accent-deep:#0f62fe; --inverse-canvas:#000000;/* footer goes one step darker */ --hairline: #393939; } /* WIRED — inverted broadsheet: black canvas, paper-white type, white CTA. */ [data-mode="dark"][data-theme="wired"] { --paper: #0a0a0a; --paper-deep: #161616; --ink: #ffffff; --ink-soft: #9a9a9a; --accent: #ffffff; /* the CTA/wordmark fill stays "primary" — now white on black */ --accent-deep:#e0e0e0; --leaf: #4aa3e0; /* link blue brightens for dark bg */ --hairline: #333333; --sticker-fg: #0a0a0a; /* white sticker pill → dark text */ } /* Stripe — the dark-app dashboard shell: deep navy canvas, indigo holds. */ [data-mode="dark"][data-theme="stripe"] { --paper: #0d253d; /* ink/navy becomes the canvas — the dashboard track */ --paper-deep: #1c1e54; /* brand-dark-900 — chrome */ --ink: #ffffff; --ink-soft: #a8c3de; /* hairline-input tint reads well as muted ink */ --accent: #635efd; /* primary-soft — indigo lifts slightly on navy */ --accent-deep:#533afd; --leaf: #f96bee; /* magenta gradient accent */ --hairline: #2a3f5c; /* keep the gradient mesh but let it sit on navy */ --brand-gradient: linear-gradient(105deg, #1c1e54 0%, #533afd 45%, #ea2261 100%); } /* Nike — true-black studio: the canonical Nike dark surface. */ [data-mode="dark"][data-theme="nike"] { --paper: #111111; --paper-deep: #1c1c1c; --ink: #ffffff; --ink-soft: #b3b3b3; --accent: #ffffff; /* the pill flips to white-on-black on dark */ --accent-deep:#e5e5e5; --red-pencil: #fa5400; /* the sale-red reads hot on black; keep the energy mark */ --hairline: #2e2e2e; --sticker-fg: #111111; /* white sticker → dark text */ } /* Airbnb — dark surface with coral holding as the accent. */ [data-mode="dark"][data-theme="airbnb"] { --paper: #1a1a1a; --paper-deep: #242424; --ink: #ffffff; --ink-soft: #b0b0b0; --accent: #ff5a76; /* coral lifts slightly for contrast on dark */ --accent-deep:#ff385c; --leaf: #00a6ad; --hairline: #3a3a3a; } /* ---- Dark-mode structural fixes ---------------------------------------- Some elements are intentionally inverted in light mode (e.g. the signup card is a dark panel on a light page). In dark mode those need to become a *raised* panel instead of flipping to a white block. */ [data-mode="dark"] .signup-card { background: var(--paper-deep); color: var(--ink); box-shadow: 0 0 0 1px var(--hairline, rgba(255,255,255,.12)), var(--shadow-press); } [data-mode="dark"] .signup-card .section-title { color: var(--ink); } [data-mode="dark"] .signup-row input { background: var(--paper); color: var(--ink); border-color: var(--hairline, #444); } [data-mode="dark"] .store-btn { background: var(--paper); color: var(--ink); } /* The default site footer is a dark panel via var(--ink); in dark mode keep it distinct from the page rather than letting it flip light. */ [data-mode="dark"] .site-footer { background: var(--paper-deep); color: var(--ink); } [data-mode="dark"] .site-footer a { color: var(--ink-soft); } [data-mode="dark"] .copyright { color: var(--ink-soft); border-top-color: var(--hairline, rgba(255,255,255,.12)); } /* IBM's footer inverts via --inverse-canvas (now #000 in dark) — keep its text light. */ [data-mode="dark"][data-theme="ibm"] .site-footer { color: var(--ink); } [data-mode="dark"][data-theme="ibm"] .site-footer a { color: var(--ink-soft); } /* Apple's footer override (light parchment) must yield to dark. */ [data-mode="dark"][data-theme="apple"] .site-footer { background: var(--paper-deep); color: var(--ink-soft); } [data-mode="dark"][data-theme="apple"] .footer-title { color: var(--ink); } /* Mission band uses --paper-deep already, so it follows automatically. The hero notebook "paper" card stays warm cream by design (it's a prop). */ /* ========================================================= APPLE — premium white space, SF-like grotesque, cinematic Light, airy, near-zero accents, soft blue CTA ========================================================= */ /* Token values transcribed from `npx getdesign add apple` (DESIGN.md). SF Pro is proprietary; Inter / Inter Tight are open substitutes chosen to match the spec's metrics (negative display tracking, 17px body). */ [data-theme="apple"] { --paper: #ffffff; /* colors.canvas */ --paper-deep: #f5f5f7; /* colors.canvas-parchment */ --ink: #1d1d1f; /* colors.ink */ --ink-soft: #6e6e73; /* between ink-muted-48 #7a7a7a and body */ --accent: #0066cc; /* colors.primary — Action Blue (was #0071e3) */ --accent-deep:#0071e3; /* colors.primary-focus — the keyboard focus ring */ --accent-on-dark:#2997ff;/* colors.primary-on-dark — Sky Link Blue */ --hairline: #e0e0e0; /* colors.hairline */ --surface-black:#000000; /* colors.surface-black — nav only */ --red-pencil: #0066cc; /* single accent; no second color in this system */ --leaf: #0066cc; --font-display: "Inter Tight", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-hand: "Inter Tight", system-ui, sans-serif; /* Radii grammar: pill for actions, lg (18px) for utility cards, sm (8px) elsewhere */ --radius: 18px; /* rounded.lg — store-utility-card */ --btn-radius: 9999px; /* rounded.pill — the blue CTA */ /* "No shadows on cards, buttons, or text." The ONLY shadow in the system is reserved for product imagery resting on a surface. */ --product-shadow: rgba(0,0,0,0.22) 3px 5px 30px; --shadow-card: 0 0 0 1px var(--hairline); /* hairline ring, not a drop shadow */ --shadow-press: 0 0 0 1px var(--hairline); --uppercase: none; --tracking: -0.022em; /* ~ -0.28px at 56px: the "Apple tight" display cadence */ --body-tracking: -0.022em; /* -0.374px at 17px */ --body-line: 1.47; /* the editorial body leading */ --grain: 0; --hero-rotate: 0deg; } /* ========================================================= IBM — Carbon: structured, grid-locked, blue, plex-like Cool gray surfaces, sharp corners, industrial blue ========================================================= */ /* IBM — refined from `npx getdesign add ibm` (Carbon Design System). Square corners (0px everywhere), Plex Sans weight 300 display, body letter-spacing 0.16px, hairlines + surface change for hierarchy (no shadows), sentence-case eyebrows, single IBM Blue accent. */ [data-theme="ibm"] { --paper: #ffffff; /* canvas */ --paper-deep: #f4f4f4; /* surface-1 */ --ink: #161616; /* ink */ --ink-soft: #525252; /* ink-muted */ --accent: #0f62fe; /* primary — IBM Blue */ --accent-deep:#002d9c; /* blue-80 — pressed */ --red-pencil: #da1e28; /* semantic-error (status only) */ --leaf: #0f62fe; --inverse-canvas:#161616;/* footer inverts to this */ --hairline: #e0e0e0; --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-hand: "IBM Plex Mono", monospace; --radius: 0px; /* rounded.none — flat-square is the brand */ --btn-radius: 0px; --shadow-card: 0 0 0 1px var(--hairline); /* 1px hairline, no drop shadow */ --shadow-press: 0 0 0 1px var(--hairline); --uppercase: none; /* Carbon eyebrows are sentence case */ --tracking: -0.012em; /* display-lg -0.4px at 60px */ --body-tracking: 0.16px; /* Carbon precision detail */ --grain: 0; --hero-rotate: 0deg; } /* ========================================================= WIRED — broadsheet density, paper white, custom serif, ink-blue links. Editorial magazine. ========================================================= */ /* WIRED — refined from `npx getdesign add wired`. Strict black-on-white editorial duet: black is the CTA/wordmark/footer fill, the link blue (#057dbc) is reserved for inline article links ONLY, serif display + serif body + sans labels, square corners, hairline dividers. */ [data-theme="wired"] { --paper: #ffffff; /* canvas */ --paper-deep: #f5f5f5; /* canvas-soft */ --ink: #000000; /* ink — true black */ --ink-soft: #757575; /* body gray */ --accent: #000000; /* primary IS black (CTAs, wordmark, footer) */ --accent-deep:#1a1a1a; /* ink-soft */ --red-pencil: #000000; /* no chromatic accent in chrome */ --leaf: #057dbc; /* link — inline article links only */ --hairline: #e0e0e0; /* display serif + body serif + sans labels — three faces, three roles */ --font-display: "Source Serif 4", "Times New Roman", Georgia, serif; --font-body: "Source Serif 4", Georgia, serif; --font-hand: "Libre Franklin", "Helvetica Neue", sans-serif; --radius: 0px; /* square — printed-magazine geometry */ --btn-radius: 0px; --shadow-card: 0 0 0 1px var(--hairline); /* hairline dividers only */ --shadow-press: 0 0 0 1px var(--hairline); --uppercase: none; /* display serif is mixed-case, not all-caps */ --tracking: -0.008em; /* display-hero -0.5px at 64px */ --grain: 0; --hero-rotate: 0deg; } /* ========================================================= STRIPE — purple gradients, weight-300 elegance, airy ========================================================= */ /* STRIPE — refined from `npx getdesign add stripe`. Indigo #533afd as the single CTA color (not body text), deep navy ink #0d253d, the signature gradient mesh (cream/orange/lavender/indigo/ruby), weight-300 display with negative tracking, tight-radius pills. Ruby/magenta live in the gradient only — never as buttons. */ [data-theme="stripe"] { --paper: #ffffff; /* canvas */ --paper-deep: #f6f9fc; /* canvas-soft */ --ink: #0d253d; /* ink — deep navy (was #0a2540) */ --ink-soft: #64748d; /* ink-mute */ --accent: #533afd; /* primary — indigo (was #635bff) */ --accent-deep:#4434d4; /* primary-deep */ --accent-press:#2e2b8c; /* primary-press */ --brand-dark-900:#1c1e54;/* dashboard chrome / featured tier navy */ --red-pencil: #533afd; --leaf: #ea2261; /* ruby — gradient/chart accent only */ --font-display: "Sora", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-hand: "Sora", sans-serif; --radius: 12px; /* rounded.lg — cards */ --btn-radius: 9999px; /* tight pill */ --shadow-card: 0 12px 30px -8px rgba(0,55,112,0.16), 0 4px 12px -4px rgba(13,37,61,0.08); --shadow-press: 0 10px 24px -8px rgba(83,58,253,0.40); --uppercase: none; --tracking: -0.025em; /* display-xxl -1.4px at 56px: the thin tracking signature */ --grain: 0; --hero-rotate: 0deg; /* The recurring gradient mesh: cream → sherbet → lavender → indigo → ruby */ --brand-gradient: linear-gradient(105deg, #f5e9d4 0%, #f96bee 28%, #b9b9f9 52%, #533afd 78%, #ea2261 100%); } /* ========================================================= NIKE — monochrome, massive uppercase, full-bleed energy ========================================================= */ /* NIKE — refined from `npx getdesign add nike`. True-black #111111 pill CTA (the single primary action), sale-red #d30005 on price rows only (not the orange I had), soft-cloud #f5f5f5 as the "studio" surface, no shadows (flat cards), uppercase campaign display. Category accents (pink/purple/teal) are swatch-only, not chrome. */ [data-theme="nike"] { --paper: #ffffff; /* canvas */ --paper-deep: #f5f5f5; /* soft-cloud — the studio gray */ --ink: #111111; /* ink — true black */ --ink-soft: #707072; /* mute */ --accent: #111111; /* primary pill is true #111111 */ --accent-deep:#000000; --red-pencil: #d30005; /* sale — price rows only (was #fa5400) */ --leaf: #111111; --hairline: #cacacb; --font-display: "Archivo", "Arial Narrow", sans-serif; --font-body: "Archivo", system-ui, sans-serif; --font-hand: "Archivo", sans-serif; --radius: 0px; /* product cards are square/flat */ --btn-radius: 9999px; /* pills — the only button shape */ --shadow-card: none; /* no card elevation, ever */ --shadow-press: none; --uppercase: uppercase; /* campaign display is uppercase Futura */ --tracking: -0.01em; --grain: 0; --hero-rotate: 0deg; } /* ========================================================= AIRBNB — warm coral, photography-driven, rounded, friendly ========================================================= */ /* AIRBNB — refined from `npx getdesign add airbnb`. Coral #ff385c primary / #e00b41 active, ink #222, ONE shadow tier (the specific multi-layer hover float — the only shadow in the whole system), 8px button radius, friendly rounded surfaces. */ [data-theme="airbnb"] { --paper: #ffffff; /* canvas */ --paper-deep: #f7f7f7; /* surface-soft */ --ink: #222222; /* ink */ --ink-soft: #6a6a6a; /* muted */ --accent: #ff385c; /* primary — Rausch coral */ --accent-deep:#e00b41; /* primary-active */ --red-pencil: #ff385c; --leaf: #008489; /* legacy teal (secondary moments) */ --hairline: #dddddd; --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif; --font-hand: "Plus Jakarta Sans", sans-serif; --radius: 14px; /* rounded.md — cards */ --btn-radius: 8px; /* rounded.sm — buttons */ /* The single shadow tier the system defines (used on hover-floated cards). */ --shadow-card: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0; --shadow-press: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0; --uppercase: none; --tracking: -0.02em; /* display-lg -0.44px at 22px */ --grain: 0; --hero-rotate: 0deg; } /* ============================================================ Per-theme TYPE SCALES — transcribed from each DESIGN.md ramp. Hero display sizes are expressed as responsive clamps that land near the spec's headline size but stay fluid for our layout; weights, line-heights, and tracking follow the spec exactly. ============================================================ */ /* Apple — hero-display 56/600/1.07/-0.28px · lead-airy 24/300 · body 17/1.47/-0.374 */ [data-theme="apple"] { --fs-display: clamp(2.6rem, 1.6rem + 4vw, 3.5rem); --lh-display: 1.07; --fw-display: 600; --ls-display: -0.022em; --fs-section: clamp(1.9rem, 1.4rem + 2vw, 2.5rem); --lh-section: 1.1; --fw-section: 600; --fs-feature-title: 1.3125rem; --lh-feature-title: 1.24; --fw-feature-title: 600; --fs-lede: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); --lh-lede: 1.4; --fw-lede: 300; --fs-body: 1.0625rem; --lh-body: 1.47; --fs-prose: 1.0625rem; /* 17px */ } /* IBM — display-lg 60/300/1.17/-0.4px (LIGHT) · card-title 24/400 · body 16/1.5/+0.16 */ [data-theme="ibm"] { --fs-display: clamp(2.6rem, 1.6rem + 4vw, 3.75rem); --lh-display: 1.17; --fw-display: 300; --ls-display: -0.012em; --fs-section: clamp(1.9rem, 1.4rem + 2vw, 2.625rem); --lh-section: 1.2; --fw-section: 300; --fs-feature-title: 1.5rem; --lh-feature-title: 1.33; --fw-feature-title: 400; --fs-lede: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); --lh-lede: 1.4; --fw-lede: 400; --fs-body: 1rem; --lh-body: 1.5; --fs-prose: 1.125rem; /* 16px, +0.16px tracking set elsewhere */ } /* WIRED — display-hero 64/400/0.93/-0.5px serif · display-md 32/400 · body-serif-lg 19/1.47 */ [data-theme="wired"] { --fs-display: clamp(2.75rem, 1.6rem + 4.5vw, 4rem); --lh-display: 0.95; --fw-display: 400; --ls-display: -0.01em; --fs-section: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem); --lh-section: 1.1; --fw-section: 400; --fs-feature-title: 1.375rem; --lh-feature-title: 1.2; --fw-feature-title: 400; --fs-lede: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); --lh-lede: 1.47; --fw-lede: 400; --fs-body: 1.1875rem; --lh-body: 1.47; --fs-prose: 1.1875rem; /* 19px serif reading size */ } /* Stripe — display-xxl 56/300/1.03/-1.4px · display-lg 32/300 · body 16/300/1.4 */ [data-theme="stripe"] { --fs-display: clamp(2.6rem, 1.5rem + 4.2vw, 3.5rem); --lh-display: 1.03; --fw-display: 300; --ls-display: -0.025em; --fs-section: clamp(1.85rem, 1.35rem + 2vw, 2.4rem); --lh-section: 1.1; --fw-section: 300; --fs-feature-title: 1.375rem; --lh-feature-title: 1.2; --fw-feature-title: 300; --fs-lede: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --lh-lede: 1.4; --fw-lede: 300; --fs-body: 1rem; --lh-body: 1.4; --fs-prose: 1rem; } /* Nike — campaign 96/500/0.9 uppercase · heading-xl 32/500 · body 16/1.5 */ [data-theme="nike"] { --fs-display: clamp(3rem, 1.6rem + 6vw, 5.25rem); --lh-display: 0.9; --fw-display: 800; --ls-display: -0.015em; --fs-section: clamp(1.9rem, 1.4rem + 2vw, 2.5rem); --lh-section: 1.2; --fw-section: 700; --fs-feature-title: 1.25rem; --lh-feature-title: 1.2; --fw-feature-title: 700; --fs-lede: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); --lh-lede: 1.5; --fw-lede: 400; --fs-body: 1rem; --lh-body: 1.5; --fs-prose: 1.0625rem; } /* Airbnb — display runs SMALL & tight: display-xl 28/700, display-lg 22/500/-0.44px. We keep the hero restrained (smaller max than other themes) to stay on-brand. */ [data-theme="airbnb"] { --fs-display: clamp(2.25rem, 1.5rem + 3vw, 3rem); --lh-display: 1.1; --fw-display: 700; --ls-display: -0.02em; --fs-section: clamp(1.6rem, 1.3rem + 1.4vw, 2.125rem); --lh-section: 1.18; --fw-section: 700; --fs-feature-title: 1.25rem; --lh-feature-title: 1.25; --fw-feature-title: 600; --fs-lede: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); --lh-lede: 1.45; --fw-lede: 400; --fs-body: 1rem; --lh-body: 1.5; --fs-prose: 1rem; } .display, .section-title, .feature-title, .footer-title, .store-name, .brand-text { text-transform: var(--uppercase, none); letter-spacing: var(--tracking, -0.02em); } /* Body letter-spacing hook (Carbon's 0.16px, Apple's -0.374px, etc.) */ body { letter-spacing: var(--body-tracking, normal); } .feature { border-radius: var(--radius); box-shadow: var(--shadow-card); } .feature:hover { box-shadow: var(--shadow-press); } .btn { border-radius: var(--btn-radius); } .btn-primary { box-shadow: var(--shadow-press); } .paper { transform: rotate(var(--hero-rotate)); } /* Themes that aren't the storybook drop the hand-drawn flourishes so the look stays coherent. We hide doodles + grain for non-default. */ [data-theme="apple"] .paper-doodle, [data-theme="ibm"] .paper-doodle, [data-theme="stripe"] .paper-doodle, [data-theme="nike"] .paper-doodle, [data-theme="airbnb"] .paper-doodle { display: none; } /* Stripe — refined. The CTA is SOLID indigo (the gradient is a backdrop, not a button fill); weight-300 display with tight tracking; gradient mesh washes the top of the hero. ss01 + tnum are brand type features. */ [data-theme="stripe"] .btn-primary, [data-theme="stripe"] .nav-cta { background: var(--accent); /* solid #533afd — one filled pill per band */ border: none; color: #fff; } [data-theme="stripe"] .btn-primary:hover, [data-theme="stripe"] .nav-cta:hover { background: var(--accent-deep); } [data-theme="stripe"] .display, [data-theme="stripe"] .section-title { font-weight: 300; } /* editorial air */ [data-theme="stripe"] .signup-card { box-shadow: var(--shadow-card); } /* The signature gradient mesh across the upper third of the hero. */ [data-theme="stripe"] .hero { background: var(--brand-gradient); background-size: 100% 42%; background-repeat: no-repeat; background-position: top center; } [data-theme="stripe"] .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 42%; background: linear-gradient(to bottom, transparent 60%, var(--paper)); pointer-events: none; z-index: 0; } [data-theme="stripe"] .hero-grid { position: relative; z-index: 1; } /* Spec: "pair every feature explanation with a composited product UI mockup." We render each feature card as a faux console/dashboard panel — window chrome with three dots and a navy header strip — evoking Stripe's composited product mockups without inventing screenshots. */ [data-theme="stripe"] .feature { padding-top: 3.25rem; /* room for the chrome bar */ overflow: hidden; border: 1px solid var(--hairline); } [data-theme="stripe"] .feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.25rem; background: var(--brand-dark-900, #1c1e54); border-bottom: 1px solid var(--hairline); } [data-theme="stripe"] .feature::after { content: ""; position: absolute; top: 0.85rem; left: 1.1rem; width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; /* traffic-light dots */ box-shadow: 14px 0 0 #febc2e, 28px 0 0 #28c840; } /* Nike — refined. Heavy uppercase display, flat cards (1px hairline only), pill CTA. Display weight ~800 approximates Futura ND bold campaign type. */ [data-theme="nike"] .display { font-weight: 800; line-height: 0.92; } [data-theme="nike"] .section-title { font-weight: 700; } [data-theme="nike"] .feature { border: 1px solid var(--hairline); box-shadow: none; } [data-theme="nike"] .feature:hover { box-shadow: none; } [data-theme="nike"] .btn-primary { box-shadow: none; } /* IBM — refined. Plex Sans weight 300 display (never bold), hairline cards, sentence-case eyebrow (no mono/caps), dark inverted footer. */ [data-theme="ibm"] .display { font-weight: 300; } /* the Carbon signature */ [data-theme="ibm"] .section-title { font-weight: 300; } [data-theme="ibm"] .feature { border: 1px solid var(--hairline); box-shadow: none; } [data-theme="ibm"] .feature:hover { box-shadow: none; background: var(--paper-deep); } [data-theme="ibm"] .eyebrow { text-transform: none; letter-spacing: 0.16px; } /* sentence case */ [data-theme="ibm"] .btn-primary { box-shadow: none; } [data-theme="ibm"] .site-footer { background: var(--inverse-canvas); } /* footer inverts */ /* Carbon separates sections via a SURFACE CHANGE, not borders/shadows. The features band sits on surface-1 with cards on canvas for contrast. */ [data-theme="ibm"] .features { background: var(--paper-deep); } [data-theme="ibm"] .feature { background: var(--paper); } [data-theme="ibm"] .feature:hover { background: var(--paper); transform: none; } /* WIRED — refined. Serif display at weight 400 (never bold), black CTA, sans-serif nav/labels, hairline-ruled feature cards. */ [data-theme="wired"] .display { font-weight: 400; } /* elegance is the typeface, not weight */ [data-theme="wired"] .section-title { font-weight: 400; } [data-theme="wired"] .feature { border: none; border-top: 1px solid var(--ink); box-shadow: none; } [data-theme="wired"] .feature:hover { box-shadow: none; } [data-theme="wired"] .site-nav a, [data-theme="wired"] .eyebrow { font-family: var(--font-hand); } /* sans labels */ [data-theme="wired"] .btn-primary { box-shadow: none; } /* The link blue is reserved for inline article links — i.e. prose only. */ [data-theme="wired"] .prose a { color: var(--leaf); } /* Apple — refined from DESIGN.md (`npx getdesign add apple`). Spec rules enforced: 600 display with negative tracking; 17px / 400 / 1.47 body (weight 500 deliberately absent); single accent; no drop shadows on chrome; pill CTAs; scale(0.95) press state; the one product-shadow used only on the hero card (the page's "product render resting on a surface"). */ /* Type sizing/weights now come from the Apple type-scale tokens above. The body letter-spacing (-0.374px) is applied via --body-tracking. */ [data-theme="apple"] .display { letter-spacing: var(--ls-display); } [data-theme="apple"] body, [data-theme="apple"] .feature-body, [data-theme="apple"] .prose { letter-spacing: var(--body-tracking); } /* No shadows on cards/buttons/text — only a hairline ring on utility cards. */ [data-theme="apple"] .feature { border: 1px solid var(--hairline); box-shadow: none; border-radius: var(--radius); /* rounded.lg 18px */ } [data-theme="apple"] .feature:hover { box-shadow: none; transform: translateY(-2px); } [data-theme="apple"] .btn-primary, [data-theme="apple"] .nav-cta { box-shadow: none; } /* System-wide press micro-interaction. */ [data-theme="apple"] .btn:active, [data-theme="apple"] .nav-cta:active, [data-theme="apple"] .store-btn:active { transform: scale(0.95); } /* The single drop-shadow, reserved for the one "product render" on the page. */ [data-theme="apple"] .paper { box-shadow: var(--product-shadow); border-radius: var(--radius); } /* Keyboard focus ring uses the brighter Focus Blue, per spec. */ [data-theme="apple"] .btn:focus-visible, [data-theme="apple"] .signup-row input:focus { outline: 2px solid var(--accent-deep); outline-offset: 2px; } /* Links on dark surfaces use Sky Link Blue (Action Blue would disappear). */ [data-theme="apple"] .signup-card a { color: var(--accent-on-dark); } /* Footer is parchment with muted ink, matching the spec's footer token. */ [data-theme="apple"] .site-footer { background: var(--paper-deep); color: var(--ink-soft); } [data-theme="apple"] .site-footer a { color: var(--ink-soft); } [data-theme="apple"] .footer-title { font-weight: 600; color: var(--ink); } /* 800 not in Apple's ladder */ [data-theme="apple"] .copyright { border-top: 1px solid var(--hairline); color: var(--ink-soft); } /* Airbnb: pill nav, rounded everything */ [data-theme="airbnb"] .store-btn { border-radius: var(--radius); } /* ============================================================ Light/dark mode toggle (header) ============================================================ */ .mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1.5px solid var(--ink); border-radius: var(--btn-radius, 999px); background: var(--paper); color: var(--ink); cursor: pointer; transition: transform .15s ease, background .2s ease; position: relative; } .mode-toggle:hover { transform: translateY(-1px); } .mode-icon { font-size: 1.05rem; line-height: 1; position: absolute; transition: opacity .2s ease, transform .3s ease; } /* Show sun in dark mode (click to go light), moon in light mode (click to go dark) */ .mode-icon-sun { opacity: 0; transform: rotate(-90deg) scale(.6); } .mode-icon-moon { opacity: 1; transform: rotate(0) scale(1); } [data-mode="dark"] .mode-icon-sun { opacity: 1; transform: rotate(0) scale(1); } [data-mode="dark"] .mode-icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); } /* ============================================================ Theme picker UI (header dropdown) ============================================================ */ .theme-picker { position: relative; } .theme-trigger { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border: 1.5px solid var(--ink); border-radius: var(--btn-radius); background: var(--paper); color: var(--ink); font-size: .85rem; font-family: var(--font-body); transition: background .2s ease, color .2s ease, transform .15s ease; } .theme-trigger:hover { transform: translateY(-1px); } .theme-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 2px var(--paper); border: 1.5px solid var(--ink); } .theme-caret { font-size: .7rem; opacity: .7; } .theme-menu { position: absolute; right: 0; top: calc(100% + .5rem); margin: 0; padding: .4rem; list-style: none; background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.18); min-width: 190px; z-index: 100; } .theme-menu li { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; font-size: .9rem; color: var(--ink); transition: background .15s ease; } .theme-menu li:hover, .theme-menu li:focus-visible { background: var(--paper-deep); outline: none; } .theme-menu li[aria-selected="true"] { font-weight: 600; } .theme-menu li[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--accent-deep); } /* swatch dots showing each theme's signature accent */ .theme-menu .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.2); animation: none; /* override the pulsing hero dot */ } .theme-menu .dot-storybook { background: #e8b53a; } .theme-menu .dot-apple { background: #0071e3; } .theme-menu .dot-ibm { background: #0f62fe; } .theme-menu .dot-wired { background: #1a3aff; } .theme-menu .dot-stripe { background: linear-gradient(110deg,#635bff,#00d4ff); } .theme-menu .dot-nike { background: #111111; } .theme-menu .dot-airbnb { background: #ff385c; } /* Sticker text color: dark-accent themes need light text on sticker #1. Storybook keeps dark ink on its yellow sticker (default). */ [data-theme="apple"] { --sticker-fg: #fff; } [data-theme="ibm"] { --sticker-fg: #fff; } [data-theme="wired"] { --sticker-fg: #fff; } [data-theme="stripe"] { --sticker-fg: #fff; } [data-theme="nike"] { --sticker-fg: #fff; } [data-theme="airbnb"] { --sticker-fg: #fff; }