/* ===================================================================== zett-tokens.css Shared Zett style tokens, taken from the landing page as it is now (source of truth: "Zett Design System.dc.html", "Warm Graphite · design system v0.1 · 26 Oct 2026", plus values found in the landing page files). Names follow the landing page. Where the landing page uses a value without a name, the variable name is descriptive and marked "unnamed on landing". Values used only by the member app are under APP ONLY. ===================================================================== */ :root { /* ------------------------------------------------------------------- 01 COLOUR — named in the landing design system "Seven greys and one warm light. No blue, no teal, anywhere." ------------------------------------------------------------------- */ --zett-deep-charcoal: #171717; /* Background for data and dark sections */ --zett-charcoal: #3B3B3D; /* Cards and panels on dark */ --zett-graphite: #5E5E61; /* Hero ground; muted text on soft white; input borders */ --zett-pewter: #8C8B8B; /* Hairlines and large text only */ --zett-warm-stone: #C8C5C0; /* Muted text on charcoal and deeper */ --zett-soft-white: #F3F0EB; /* Text on dark; light sections */ --zett-warm-light: #F0D5A8; /* The single accent: Signal, data highlights, focus ring */ --zett-ember: #D9774A; /* Errors: border and icon with plain words */ /* COLOUR — used on landing, unnamed in its design system */ --zett-white: #FFFFFF; /* Input/card fills on light, hover of buttons. Header, Join, Check, Home, Legal… */ --zett-hairline-dark: #2C2C2D; /* 1px borders on deep charcoal. Header, Footer, Home, Articles… */ --zett-panel-deep: #232323; /* Deep panels, photo-placeholder ends. Home, Daily Debrief, Articles, Video */ --zett-warm-light-ink: #86653A; /* Warm-light tone readable on soft white (eyebrows, rules). Article, Check, FAQ, Join */ --zett-warm-light-fade: rgba(240,213,168,0); /* End stop of wordmark line gradient. Header, Footer */ /* Photo-placeholder gradient tones (Home, Hair Loss, Article(s), Daily Debrief, Video, Check): #8A7560 #7A6A58 #5A5047 #4E4A46 #35322F #3E3A36 #1E1E1E #E2DED7 — decorative only. */ /* Contrast notes (from landing): Pewter for hairlines and large text only. Warm stone sits on charcoal and deeper, not on graphite. Errors use ember as border and icon with plain words, never colour alone. */ /* ------------------------------------------------------------------- 02 TYPE Newsreader Light for display, Hanken Grotesk for everything else. Fonts load from Google Fonts: https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400&family=Hanken+Grotesk:wght@400;500;600&display=swap ------------------------------------------------------------------- */ /* --zett-font-display is set once, in the v4 block at the end of this file. */ --zett-font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; /* weights 400, 500, 600 */ --zett-font-wordmark-alt: Montserrat, 'Hanken Grotesk', sans-serif; /* "ZETT." wordmark variant only, weight 800 */ /* Text styles: family · weight · size / line-height · tracking */ --zett-type-display-size: clamp(44px, 7.2vw, 104px); --zett-type-display-lh: 1.0; /* Newsreader 300, -0.015em */ --zett-type-h1-size: clamp(40px, 6vw, 84px); --zett-type-h1-lh: 1.02; /* H1 inner. Newsreader 300, -0.015em */ --zett-type-h2-size: clamp(34px, 4.2vw, 58px); --zett-type-h2-lh: 1.08; /* Newsreader 300, -0.01em */ --zett-type-aside-size: 28px; --zett-type-aside-lh: 1.2; /* Newsreader 300 italic */ --zett-type-h3-size: 20px; --zett-type-h3-lh: 1.3; /* Hanken Grotesk 600 */ --zett-type-lead-size: clamp(17px, 1.4vw, 20px); --zett-type-lead-lh: 1.5; /* Hanken Grotesk 400 */ --zett-type-body-size: 17px; --zett-type-body-lh: 1.6; /* Hanken Grotesk 400, 16 to 18 / 1.55 to 1.65; never below 16 */ --zett-type-eyebrow-size: 12px; --zett-type-eyebrow-lh: 1.4; /* Hanken Grotesk 500, uppercase, 0.2em */ --zett-type-data-size: 15px; --zett-type-data-lh: 1.4; /* Hanken Grotesk 400, tabular figures */ --zett-type-small-size: 14px; --zett-type-small-lh: 1.5; /* Hanken Grotesk 400, 13 to 14 */ --zett-tracking-display: -0.015em; --zett-tracking-h2: -0.01em; --zett-tracking-eyebrow: 0.2em; /* Reading measure 60 to 75 characters. */ /* ------------------------------------------------------------------- 03 SPACING AND SHAPE — "A 4/8 grid, 2 px corners, 1 px hairlines." ------------------------------------------------------------------- */ --zett-space-4: 4px; --zett-space-8: 8px; --zett-space-12: 12px; --zett-space-16: 16px; --zett-space-24: 24px; --zett-space-32: 32px; --zett-space-48: 48px; --zett-space-64: 64px; --zett-space-96: 96px; --zett-section-padding: clamp(72px, 9vw, 128px); --zett-content-max: 1200px; --zett-gutter: 24px; /* Breakpoints 390 / 834 / 1440. Nothing scrolls sideways at 320. */ --zett-radius: 2px; /* every box, button, field */ --zett-radius-round: 50%; /* dots, rating ticks, spinners, icon chips */ --zett-hairline: 1px; /* Shadows (landing) */ --zett-shadow-dialog-dark: 0 12px 40px rgba(0,0,0,0.45); /* dialogs/sheets on dark. Header, Home, Design System */ --zett-shadow-dialog-light: 0 12px 40px rgba(0,0,0,0.12); --zett-scrim: rgba(0,0,0,0.45); /* ------------------------------------------------------------------- FOCUS — warm light, 2px, 3px offset, on every interactive element (3.2:1 on soft white, 12.5:1 on deep charcoal). Landing also uses offsets 2px (nav, inputs), 4px (wordmark), and inset -2/-3px. Minimum target 44 × 44 px. ------------------------------------------------------------------- */ --zett-focus-color: #F0D5A8; --zett-focus-width: 2px; --zett-focus-offset: 3px; --zett-target-min: 44px; /* ------------------------------------------------------------------- ICON STYLE (landing + app) Line icons, 24 viewBox, fill none, stroke currentColor, stroke-width 1 to 1.5 (Signal lines 1.2), round caps and joins. The Zett Signal: warm-light line, pathLength 1000, stroke-dashoffset draw over 2.6s cubic-bezier(0.22,0.61,0.36,1), point of light r=3. ------------------------------------------------------------------- */ --zett-icon-stroke: 1.4; /* ===================================================================== APP ONLY — values the member app uses that the landing page does not ===================================================================== */ --zett-app-field-light: #E9E5DE; /* App: read-only invite email field, list-row hover on light, table rules on light (Account, Choices, Export) */ --zett-app-focus-halo: 0 0 0 6px #F0D5A8; /* App: focus on dark buttons over light grounds (outline 2px #171717 + this halo); dialogs, Account */ --zett-app-rating-glow: 0 0 0 4px rgba(240,213,168,0.18); /* App: glow round the "today" point on History calendar and Trends chart */ --zett-app-warm-light-18: rgba(240,213,168,0.18); --zett-app-sticky-bar: rgba(23,23,23,0.96); /* App: mobile bottom nav ground */ --zett-app-shadow-float: 0 6px 20px rgba(0,0,0,0.35); /* App: "All screens" button */ --zett-app-shadow-toast: 0 8px 28px rgba(0,0,0,0.4); /* App: toast */ --zett-app-scrim: rgba(0,0,0,0.6); /* App: dialog backdrop */ --zett-app-radius-sheet: 16px; /* App: on/off switches (Weekly summary email, AI wording) */ --zett-app-tracking-label: 0.08em; /* App: small caps labels; also 0.12em, 0.14em */ /* App type sizes not on landing scale: 11, 12, 13, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 32, 44px; app headings clamp(34px,6vw,48px) and clamp(30px,5vw,40px). Hanken weight 700 is used in the app but not loaded (browser synthesises it), same as now. */ } /* --------------------------------------------------------------------- 04 BUTTONS — recipes as on the landing page (all: Hanken 15px/600, height 44px, padding 0 20px, radius 2px, focus outline 2px warm light, offset 3px; disabled = opacity 0.45; loading = 14px spinner + label) ON DARK Primary default: text #171717 on #F3F0EB · hover bg #FFFFFF Secondary default: text #F3F0EB, 1px border #F3F0EB · hover text #171717 on #F3F0EB Text link default: #F3F0EB underlined (offset 4px, colour #F0D5A8) · hover text #F0D5A8 Loading spinner: border 2px #C8C5C0, top #171717 ON LIGHT Primary default: text #F3F0EB on #171717 · hover bg #3B3B3D Secondary default: text #171717, 1px border #171717 · hover bg #FFFFFF Text link default: #171717 underlined (colour #F0D5A8) · hover text #5E5E61 Loading spinner: border 2px #5E5E61, top #F0D5A8 --------------------------------------------------------------------- */ .zett-btn { font: inherit; font-size: 15px; font-weight: 600; height: 44px; padding: 0 20px; border-radius: var(--zett-radius); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 1px solid transparent; text-decoration: none; } .zett-btn:focus-visible { outline: 2px solid var(--zett-focus-color); outline-offset: 3px; } .zett-btn[disabled], .zett-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .zett-on-dark .zett-btn--primary { color: var(--zett-deep-charcoal); background: var(--zett-soft-white); } .zett-on-dark .zett-btn--primary:hover { background: var(--zett-white); } .zett-on-dark .zett-btn--secondary { color: var(--zett-soft-white); background: transparent; border-color: var(--zett-soft-white); } .zett-on-dark .zett-btn--secondary:hover { color: var(--zett-deep-charcoal); background: var(--zett-soft-white); } .zett-on-dark .zett-link { color: var(--zett-soft-white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--zett-warm-light); } .zett-on-dark .zett-link:hover { color: var(--zett-warm-light); } .zett-on-light .zett-btn--primary { color: var(--zett-soft-white); background: var(--zett-deep-charcoal); } .zett-on-light .zett-btn--primary:hover { background: var(--zett-charcoal); } .zett-on-light .zett-btn--secondary { color: var(--zett-deep-charcoal); background: transparent; border-color: var(--zett-deep-charcoal); } .zett-on-light .zett-btn--secondary:hover { background: var(--zett-white); } .zett-on-light .zett-link { color: var(--zett-deep-charcoal); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--zett-warm-light); } .zett-on-light .zett-link:hover { color: var(--zett-graphite); } /* --------------------------------------------------------------------- 05 FORM CONTROLS — "Visible labels, graphite borders, errors in words." Label: 15px/500. Field: height 52px, 1px #5E5E61 border, radius 2px, padding 0 14px, 16px text, placeholder #5E5E61, ground #FFFFFF. Focus: border #171717 + outline 2px #F0D5A8, offset 2px. Error: border #D9774A + 14px message with 16px ember "!" ring icon. Success: 20px #171717 disc with #F0D5A8 tick. Select: same field, Newsreader "⌄" in #5E5E61. 1 to 5 rating: selected = fill #171717 + text #F3F0EB + tick + 600 weight; unselected = #FFFFFF, border #5E5E61, 400 weight. Never colour alone. --------------------------------------------------------------------- */ .zett-field { font: inherit; font-size: 16px; height: 52px; padding: 0 14px; border: 1px solid var(--zett-graphite); border-radius: var(--zett-radius); background: var(--zett-white); color: var(--zett-deep-charcoal); } .zett-field::placeholder { color: var(--zett-graphite); } .zett-field:focus { border-color: var(--zett-deep-charcoal); outline: 2px solid var(--zett-focus-color); outline-offset: 2px; } .zett-field[aria-invalid="true"] { border-color: var(--zett-ember); } .zett-label { font-size: 15px; font-weight: 500; } /* --------------------------------------------------------------------- WORDMARK AND LOGO The wordmark is live type, not an image file (no logo files exist). Default "line": "Zett" in Newsreader 300, 30px, line-height 1, letter-spacing -0.01em, font-variation-settings 'opsz' 72, followed (gap 10px) by a 44 × 1px line, linear-gradient(90deg, #F0D5A8, rgba(240,213,168,0)). Alternative "zett": "ZETT" Montserrat 800, 22px, 0.06em, with "." in #F0D5A8. --------------------------------------------------------------------- */ .zett-wordmark { font-family: var(--zett-font-display); font-weight: 300; font-size: 30px; line-height: 1; letter-spacing: -0.01em; font-variation-settings: 'opsz' 72; } .zett-wordmark-line { display: block; width: 44px; height: 1px; background: linear-gradient(90deg, var(--zett-warm-light), var(--zett-warm-light-fade)); } /* v4 concept tokens (override the values above for the demo inside v4/). */ :root{ --zett-deep-charcoal:#474441; --zett-charcoal:#28221D; --zett-graphite:#5A5149; --zett-pewter:#6E5038; --zett-warm-stone:#D2CAC1; --zett-soft-white:#F2ECE5; --zett-warm-light:#F2DCC4; --zett-ember:#8A4A2A; --zett-white:#F7F3EE; --zett-hairline-dark:#867C74; --zett-panel-deep:#28221D; --zett-warm-light-ink:#6E5038; --zett-app-field-light:#E8DFD6; --zett-font-display:'Archivo','Hanken Grotesk','Helvetica Neue',Arial,sans-serif; --zett-radius:16px; } h1,h2{font-family:'Archivo','Hanken Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:700;letter-spacing:0} /* Headings receive focus for screen readers on screen change; they are not interactive, so no focus ring. */ h1:focus,h2:focus,h3:focus,[tabindex="-1"]:focus{outline:none}