/* ============================================================================ tokens.css: v3. THE single source of truth for the Wezy design system, NOW THE TWO-THEME ENGINE (the owner's theming rebuild): · :root = shared tokens + the DARK theme (layered near-black graphite + yellow, blue-complemented — the Spotify/Revolut-grade rebuild; AA-raised text/borders). · :root.theme-beige = the BEIGE (light) theme, the exact ux-components.com Beige palette (bg #f5f0e8 · sidebar #ece5d8 · card #e8e0d0 · input #e2d9c8 · hover #ddd4c2 · border #b5a78e · text #3d3428/#6b5d4d/#8a7a66 · accent #5c4a32 · its tag/badge sets). THE THEME LAW: a theme class lives ONLY here; no `.theme-beige` selector may appear in any consumer sheet (suite-anchored). Components express EVERY look through these tokens; the theme switch recolors the whole app from this file. `` carries the class (server-stamped from the `theme` cookie in base.html; the dashboard's themeToggle island flips it; docs/frontend.md). TOKEN SEMANTICS since v3 (the names are historical, the ROLES are the law): --navy… = the SURFACE ladder (hero/secondary → cards → raised → top), theme-recolored; NEVER a text color. --cream / --cream-2 = the page/body surface + its card, theme-recolored. --white / --ink = PRIMARY TEXT on themed surfaces (dark: white; beige: #3d3428), no longer "the color white". --on-accent = the label ON an accent/gold fill. --on-media / --scrim-media / --sheen / --paper = theme-INVARIANT constants (photo overlays · overhead reflections · the invoice paper stage). Raw hex/ms outside this file fails the suite; consumer sheets derive translucency via color-mix(in srgb, var(--X) N%, transparent). ========================================================================== */ /* ---- Typography foundation: Rubik variable (wght 300–900), self-hosted ---- hebrew + latin woff2 subsets (Google Fonts v31, OFL 1.1), explicit unicode-range so each script downloads only when used (DESIGN.md §3). */ @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/static/fonts/rubik-hebrew-var.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/static/fonts/rubik-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* native UI (form controls, date pickers, scrollbars) follows the theme; inheritable, so ONE declaration per theme block covers the app */ color-scheme: dark; /* ======================= COLOR: THE DARK THEME (default) ======================= THE LAYERED GRAPHITE SCALE (operator-commissioned Spotify/Revolut rebuild; was the navy ladder): near-black NEUTRALS (R=G=B — canvas #0b0b0b, a step below Spotify's #121212 base at the operator's darker same-day call; the raised tiers stay Spotify's documented #282828 · #333333), layered, never one flat black and never pure #000. The BLUE now lives only in the complementary page-top/mood gradients (--bg-hero*, --bg-aurora*, --navy-rich art) and the gold accent family is untouched; text/border contrast stays AA-raised. */ /* ---- The surface ladder (elevation = LIGHTER tone, never shadow soup) ---- */ --navy: #0b0b0b; /* canvas + the ONE universal page floor (the former dashboard-only darker floor, promoted platform-wide by operator direction — the §2 exception closed; every page matches the dashboard's depth) */ --navy-deep: #050505; /* the FLOOR: hero/footer ramps settle into it */ --navy-2: #1e1e1e; /* card */ --navy-3: #282828; /* raised / input / hover */ --navy-4: #333333; /* top: modals, popovers, the tab bar */ /* THE (i) POPOVER's ground (components.css .inv-info-pop): deliberately BELOW the popover tier, near the floor, so a small explainer separates from ANY lit hero/plane it floats over and carries its text at the top of the contrast range (operator: white text on a graphite near-black). DARK-ARM ONLY by ruling; the beige arm below stays the popover tier, where a near-black pane would invert the light theme. */ --info-pop-bg: var(--navy-deep); --surface-away: var(--navy-deep); /* a surface that must SEPARATE from a --navy neighbor in BOTH themes, walking AWAY from --navy along each theme's ladder (the direction inverts: dark descends to the floor, beige rises toward navy-3/4; consumer: the assistant send-vs-response bubble pair) */ --navy-rich: #15396b; /* a saturated navy-BLUE, the immersive-gradient TOP accent */ --cream: #0d0d0d; /* the PAGE/BODY surface (a step above the canvas; the old cream-body pages ride this, theme-recolored) */ --cream-2: #1e1e1e; /* card on the body surface (= the card tone) */ --panel: #191919; /* THE SECTION WRAPPER plane (the graphite-grid law, DESIGN.md §7): the tier BETWEEN the body and the card — every page section sits on one (.gg-panel), so grouping is SEEN, not inferred from air; Spotify's main-view-panel move on this ladder */ /* ---- Text tiers (AA-raised) ---- */ --white: #ffffff; /* PRIMARY text on themed surfaces */ --ink: #f8f8f8; /* primary text (light-family alias: converges per theme) */ --slate: #c6c6c6; /* secondary text (brighter than Spotify's #b3b3b3 — the operator's AA/AAA call: ≥7:1 on every surface incl. navy-4, ≥11:1 on the canvas) */ --slate-on-dark: #c6c6c6; /* secondary text, dark-family alias */ --slate-on-dark-bright: color-mix(in srgb, var(--slate-on-dark), var(--white) 45%); /* the SAME muted tone lifted ~45% toward the primary text: secondary text that must read closer to primary */ --slate-on-dark-soft: color-mix(in srgb, var(--slate-on-dark), var(--white) 18%); /* a VERY SLIGHT lift (~18%): hierarchy under a primary title */ /* ---- Borders ---- */ --hairline: #474747; /* the border (raised for card-edge separation) */ --cream-hairline: #2e2e2e;/* the soft divider */ --panel-line: #3a3a3a; /* the ELEVATION line (iteration: the tier edges read clearly on the gray ladder; panels, tiles and the content plane border with THIS, one step louder than the soft divider) */ /* ---- Accent (the yellow identity) ---- */ --gold: #a47622; /* deep gold: large emphasis fills, icon fills */ --gold-bright: #ffcd71; /* light gold: strokes/text/icons/small accents ONLY */ /* the /subscription plans AURORA pair (operator): the under-glass ground blooms are DECORATIVE source-chroma gold — the dark arm keeps the brand golds; the beige arm re-tints to REAL saturated gold (the decorative-accent law: light arm MORE saturated), never the theme's brown accent, which rendered as a stain */ --aurora-gold: #ffcd71; --aurora-gold-deep: #a47622; /* the /subscription glass-card FILM pair (operator): the pane's white sheen film strengths — barely-there on dark (the navy room shows through pure blur); the beige arm re-declares MILKIER stops (less transparent over parchment, operator call) */ --glass-card-film: color-mix(in srgb, var(--sheen) 5%, transparent); --glass-card-film-deep: color-mix(in srgb, var(--sheen) 2%, transparent); /* the DASHBOARD's transparent liquid glass (operator): the cockpit panes (stat chips, chat pair, CTA, agent menu) wear a 2.5% whisper — CLEAR glass taking in the environment, drawn by the lensing rims; the greeting's four meta keys wear its gradient twin, a breath brighter at the lit top edge. Both ride --dash-pane-blur (below, with --glass-nav-blur): the nav recipe's saturate(1.5) re-tints a key navy over the blue pools. Beige re-pins both films to its milky voices. */ --dash-pane-film: color-mix(in srgb, var(--sheen) 2.5%, transparent); --glass-nav-grad-deep: linear-gradient(180deg, color-mix(in srgb, var(--sheen) 3.5%, transparent), color-mix(in srgb, var(--sheen) 2%, transparent)); --gold-deep: #ffc95e; /* strong gold TEXT on the body surface */ --blue: #8ab8ff; /* links/info (AAA-raised), sparingly */ /* (--dashboard-floor retired: the dashboard-only darker floor was promoted INTO --navy above when the operator matched every page to it, so the exception token and its per-arm re-pins had nothing left to override.) */ --whatsapp: #25d366; /* authentic WhatsApp green, the ONE external-brand color (share/invite icons only), theme-invariant */ /* ---- The gold family: exactly TWO named gradients ---- stroke = borders/rings/gradient-ink/bars; fill = filled keys (primary CTAs). The ONE non-gold sibling is --grad-bloom below: hover-bloom layer ONLY, never a fill/ring/text (the user's call: the bloom must read apart from the gold ring it halos). */ --grad-gold: linear-gradient(135deg, #ffe9a8, #ffb54d); --grad-gold-fill: linear-gradient(180deg, #ffd978, #f2a93b); /* the HOVER-BLOOM gradient (the AWS AgentCore 123deg warm→cool grammar; NO purple, the user's call; stops are VIVID tuned members of the system's hue families, at AWS-source chroma, since a bloom at component-token saturation reads as fog): yellow-gold → hot orange → luminous blue → electric cyan. The warm↔cool midpoint mud sits hidden behind the opaque face; the visible halo is the corner stops. Decorative, carries no text (no AA duty). TWO PARTS, because the cool arm is a VARIABLE: the dashboard's signature doors swap it for their own --sig (components.css, the signature tint seam) and the beige theme swaps it for the brown arm, while the angle + warm arm stay ONE source for every consumer. A door restates --grad-bloom rather than --bloom-cool alone because a custom property's var()s substitute at the DECLARING element (the §13 aurora lesson): this recipe computes on :root, so a door-scoped --bloom-cool would never reach it. */ --bloom-ramp: 123deg, #ffd24d 0%, #ff9500 33%; --bloom-cool: #5cb2ff 66%, #3ff0ff 100%; /* the GOLD doors' arm (operator): קהילה + פרסום keep the brand gold pictogram and carry no --sig, so their bloom runs on to BRIGHT YELLOW instead of the cool arm — the default arm read as a blue halo under a yellow glyph. Source chroma and theme-invariant like the warm arm above: the theme browns would read as shadow here. Both stops stay SATURATED, which is why this is NOT --gold-bright→--champagne: that pale lit-face at the cell film's low alpha over graphite reads KHAKI (the §2 pale-gold-over-dark olive trap, measured on the קהילה cell), so the corner takes a vivid yellow instead. */ --bloom-cool-gold: #ffd24d 66%, #ffe36b 100%; --grad-bloom: linear-gradient(var(--bloom-ramp), var(--bloom-cool)); --on-accent: #081a2c; /* the label ON an accent/gold fill (beige: light-on-brown) */ /* ---- Theme-INVARIANT constants (identical in both themes) ---- */ /* THE WEZY SIGNATURE GRADIENT (operator-directed) — the brand plate's own vertical sunset ramp (logo_transp.png, §2): sunrise gold -> warm orange -> violet -> deep navy -> the near-black floor. BRAND ART, so it never rethemes (the decorative-accent law, the wave + rainbow precedent): a beige arm would break the ramp it is sampled from. Reusable on any component that wants the full brand ramp; the gold family (--grad-gold/-fill) stays the ACCENT stroke/fill system and this never replaces it. */ --wezy-gradient: linear-gradient(180deg, #ffce5c 0%, #ff8f5c 20%, #6f4dd6 50%, #141c5c 78%, #060a1f 100%); /* THE RAINBOW KEY constants (the landing hero's animated CTA; operator-directed): the air.inc "One plan. Every model." CTACard palette copied 1:1 from the LIVE container (headed observation + CSSOM dump) — BRAND ART like the pictogram family, theme-invariant. The FULL paint lives here, never in the consumer sheets: the §2.8 token law bans a raw rgba() there, and the source's alpha ramps must stay literal (a color-mix rewrite is a rendered-value risk this art cannot take). Consumers select a ready gradient by token. */ /* the six orb fills: the source's geometry on the LONGER alpha tail (the operator's fluid-pool call) — one ready gradient per hue */ --rainbow-orb-sky: radial-gradient(rgba(5, 99, 233, 1) 0, rgba(5, 99, 233, 0.5) 38%, rgba(5, 99, 233, 0.16) 60%, rgba(5, 99, 233, 0) 80%); --rainbow-orb-cyan: radial-gradient(rgba(63, 240, 255, 1) 0, rgba(63, 240, 255, 0.5) 38%, rgba(63, 240, 255, 0.16) 60%, rgba(63, 240, 255, 0) 80%); --rainbow-orb-teal: radial-gradient(rgba(46, 196, 182, 1) 0, rgba(46, 196, 182, 0.5) 38%, rgba(46, 196, 182, 0.16) 60%, rgba(46, 196, 182, 0) 80%); --rainbow-orb-leaf: radial-gradient(rgba(178, 208, 141, 1) 0, rgba(178, 208, 141, 0.5) 38%, rgba(178, 208, 141, 0.16) 60%, rgba(178, 208, 141, 0) 80%); --rainbow-orb-amber: radial-gradient(rgba(255, 210, 77, 1) 0, rgba(255, 210, 77, 0.5) 38%, rgba(255, 210, 77, 0.16) 60%, rgba(255, 210, 77, 0) 80%); --rainbow-orb-gold: radial-gradient(rgba(255, 205, 113, 1) 0, rgba(255, 205, 113, 0.5) 38%, rgba(255, 205, 113, 0.16) 60%, rgba(255, 205, 113, 0) 80%); /* the two drifting AMBIENCE pools of the landing lift scene (landing.css), cool + warm */ --rainbow-pool-cool: radial-gradient(50% 60% at 30% 70%, rgba(5, 99, 233, 0.28), transparent 70%), radial-gradient(45% 55% at 62% 58%, rgba(63, 240, 255, 0.19), transparent 68%), radial-gradient(40% 50% at 82% 74%, rgba(46, 196, 182, 0.19), transparent 66%); --rainbow-pool-warm: radial-gradient(46% 56% at 26% 72%, rgba(178, 208, 141, 0.18), transparent 66%), radial-gradient(50% 60% at 56% 60%, rgba(255, 210, 77, 0.21), transparent 68%), radial-gradient(44% 54% at 78% 74%, rgba(255, 205, 113, 0.28), transparent 70%); /* the liquid-glass film the container floats under (their exact card::before) */ --rainbow-film: linear-gradient(rgba(27, 27, 27, 0.05), rgba(27, 27, 27, 0.1)); /* the rainbow key's LABEL backshadow — THEMED, not invariant (operator call): the dark arm floats the white label on a stylized wide soft pool of the scrim ink; the beige arm clears it (its matched ink label needs no ground) */ --rainbow-label-shadow: 0 1px 10px rgba(4, 12, 22, 0.24), 0 3px 28px rgba(4, 12, 22, 0.28), 0 0 64px rgba(4, 12, 22, 0.2); /* the AnimatedBorder shimmer stroke (their exact conic; fg = white on their dark section) */ --rainbow-stroke: conic-gradient(at 50% 50%, rgba(255, 255, 255, 0.66) 0deg, rgba(255, 255, 255, 0.1) 20deg, rgba(255, 255, 255, 0.1) 120deg, rgba(255, 255, 255, 1) 180deg, rgba(255, 255, 255, 0.1) 240deg, rgba(255, 255, 255, 0.1) 340deg, rgba(255, 255, 255, 0.66) 1turn); --on-media: #ffffff; /* text/controls over PHOTOS + media scrims */ --scrim-media: rgba(4, 12, 22, 0.55); /* the scrim over photos (photos don't retheme) */ --scrim-media-strong: rgba(4, 12, 22, 0.82); /* the denser variant (chrome pills ON a photo) */ --sheen: #ffffff; /* the overhead-LIGHT source for reflections/lit tops */ /* ---- The COLOR-WAVE rainbow (the /subscription engagement pass, operator): the 8-stop pastel ring behind armColorWave (app.js reads these by name) and the featured card's rotating ring (subscription.css). Source-chroma DECORATIVE accents (the decorative-accent law: identical both themes, never retinted); adjacent stops pair as each wave's two colors, so the order IS the design. */ --wave-1: #ffb592; /* peach */ --wave-2: #faba17; /* gold */ --wave-3: #60e21b; /* green */ --wave-4: #24e0af; /* mint */ --wave-5: #6cd5fd; /* sky */ --wave-6: #a7abff; /* periwinkle */ --wave-7: #f6afff; /* orchid */ --wave-8: #ffb0cd; /* pink */ /* ---- THE CATEGORY-CHART STOPS (the expense chart's identity palette, components.css .inv-catbar--c1..c8). Unlike the source-chroma --wave-* set these RETHEME, because a chart stop is a DATA surface, not a decorative accent: the dark arm is tempered so no saturated large fill lands on graphite (§2 dark-theme science), and the beige arm is DEEPER than its dark twin, because the same mid-tone that reads on near-black washes out on cream (measured live). A category's stop is stable across pages, so the colour itself teaches which column is which. ---- */ --chart-1: #e59a4e; /* amber */ --chart-2: #e0b230; /* gold */ --chart-3: #5fb865; /* green */ --chart-4: #35b39b; /* teal */ --chart-5: #58a6d8; /* sky */ --chart-6: #8f8fe0; /* violet */ --chart-7: #c479c9; /* orchid */ --chart-8: #d97390; /* rose */ /* the stop for money with NO category: deliberately OUTSIDE the eight identity stops, so it can never be mistaken for one. Warm BEIGE on the dark arm, warm BROWN on the light one (operator direction) - the one chart tone that reads as "unplaced", not as a category with a colour of its own. */ --chart-none: #ded3bd; /* beige (dark arm) */ --paper: #ffffff; /* the invoice DOCUMENT paper stage (a printed artifact) */ --paper-ink: #1c2734; /* ink on that paper (matches invoice_doc.css) */ /* ---- Pictogram ART constants (the full-color pictogram family is BRAND ART, like the Rishi poses: it never rethemes; these freeze the original layer tones the .p-* classes painted with when the base tokens were single-theme) ---- */ --picto-shade: #a47622; /* the deep-gold offset shadow twin */ --picto-cream: #fff8e8; /* the cream lit face */ --picto-ink: #0a1a2e; /* the navy ink details */ --picto-bright: #ffcd71; /* the gold-bright sparkle/highlights */ --picto-navy-shade: #0c2140; /* the navy family's cut-shadow twin (the on-gold key) */ --picto-navy: #15396b; /* the navy family's body tone */ --picto-navy-pop: #3a6cb0; /* the navy family's lit core + glint */ /* ---- Feature SIGNATURE colors (DESIGN.md "THE SIGNATURE AURORA"; the operator's claims). Theme-invariant brand claims like the picto ART constants above: the dashboard door tint reads THESE (components.css "THE DASHBOARD SIGNATURE TINT"); each board's aurora carries the same value as an R, G, B triplet in its own sheet (rgba(var(--aurora-accent), a) needs the triplet form). ---- */ --sig-goods: #f6670e; --sig-invoices: #3d8f83; --sig-market: #a86ee0; --sig-search: #85cfe5; --sig-projects: #5a72a0; --sig-forms: #6d9ee8; --sig-license: #a0763f; /* ---- Flat stops of the two sanctioned gradients (not a third gradient): the full-color pictogram family paints in crisp flat tones, BRAND ART, theme-invariant like the Rishi poses. */ --gold-mid: #f2a93b; /* pictogram body */ --champagne: #ffe9a8; /* pictogram lit face */ /* ---- Semantics (never collide with brand gold; AA on their surfaces) ---- --success/--attention/--danger are the TEXT/stroke tier (light on dark); a destructive FILL pairs --danger-fill with --on-danger (a fill needs the deep tone + a light label, since the text tier would wash out as a surface). */ --success: #33c98a; --attention: #ffb547; --danger: #ff7d82; --danger-fill: #c73a40; --on-danger: #ffffff; /* ---- Tag/badge pairs (the ux-components vocabulary, navy-adjusted here; the beige theme carries the reference values verbatim) ---- */ --tag-use: #16452f; --tag-use-text: #9fe8bc; --tag-avoid: #4a2226; --tag-avoid-text: #ffb3b5; --tag-what: #1a3a5c; --tag-what-text: #a8cdf0; --badge-success-bg: #14432e; --badge-success-text: #a7f3c9; --badge-warn-bg: #4a3510; --badge-warn-text: #fcd989; --badge-danger-bg: #4c1f22; --badge-danger-text: #fecaca; --badge-info-bg: #1e3a5f; --badge-info-text: #bfdbfe; /* ---- The celebration palette (Tier-3 confetti ONLY, DESIGN.md §8) ---- Sampled from the rishi-confetti asset; brand art, theme-invariant. */ --celebrate-gold: #f4b12e; --celebrate-amber: #f8cf3c; --celebrate-violet: #a860d8; --celebrate-magenta: #f060a8; --celebrate-orange: #f0902f; /* ---- State layers (M3): derived from the PRIMARY TEXT tone, so hover reads light-on-dark AND dark-on-light from ONE definition ---- */ --state-hover: color-mix(in srgb, var(--white) 8%, transparent); --state-press: color-mix(in srgb, var(--white) 12%, transparent); /* ---- SHARED TRANSLUCENCY STEPS (the styling-refactor alpha-token table): the top color-mix recipes the consumer sheets repeated, named ONCE here. Defined on :root like --state-hover above, so every :root-scoped theme/a11y override of the base color flows through (the beige/contrast --gold etc. re-resolve these). Consumers reference the token instead of restating the recipe (long-tail one-off mixes stay inline; only the repeated steps earn a name). ---- */ --mix-gold-30: color-mix(in srgb, var(--gold) 30%, transparent); --mix-gold-40: color-mix(in srgb, var(--gold) 40%, transparent); --mix-gold-45: color-mix(in srgb, var(--gold) 45%, transparent); --mix-gold-55: color-mix(in srgb, var(--gold) 55%, transparent); --mix-goldbright-40: color-mix(in srgb, var(--gold-bright) 40%, transparent); --mix-goldbright-45: color-mix(in srgb, var(--gold-bright) 45%, transparent); --mix-goldbright-55: color-mix(in srgb, var(--gold-bright) 55%, transparent); --mix-sheen-22: color-mix(in srgb, var(--sheen) 22%, transparent); --mix-white-06: color-mix(in srgb, var(--white) 6%, transparent); --mix-white-12: color-mix(in srgb, var(--white) 12%, transparent); --mix-white-22: color-mix(in srgb, var(--white) 22%, transparent); /* ---- Light effects (glow = the "this matters" mechanism on dark) ---- */ --glow-gold: 0 0 24px rgba(255, 205, 113, 0.85), 0 0 9px rgba(255, 224, 150, 0.8); /* THE TIGHT ARM of the same halo: --glow-gold's radii roughly halved, its alphas at or above --glow-gold's, for surfaces that want the light STRONGER without the blob reaching further (the board cards, operator). Same two-layer shape, so the two read as one family; only the reach differs. The beige arm's two tokens share alphas because that arm already sits at the ceiling; the reach still separates them. */ --glow-gold-tight: 0 0 12px rgba(255, 205, 113, 0.95), 0 0 5px rgba(255, 224, 150, 0.9); --machine-glow: 1; /* the landing machine's lit-glow strength (the beige arm dims it) */ --glow-celebrate: 0 0 42px rgba(255, 205, 113, 1), 0 0 15px rgba(255, 224, 150, 0.9); --drop-glow-gold: 0 0 10px rgba(255, 205, 113, 0.55); /* filter: drop-shadow(), a lit glyph */ --ring-shine: 0 0 0 2px rgba(255, 233, 168, 1); /* hover: the ring LIGHTS UP — a lit rim reads as light only at full alpha; the landed 0.55 rendered a dull olive band over the rest border (live A/B). STRENGTH IS ALPHA, NEVER SPREAD: the 2px stays, so the ring keeps hugging the shape instead of blooming into the neighbours. */ /* THE SMALL-KEY HOVER HALO (the notifications follow-back): a CONTAINED warm ring that hugs a small pill, where the wide --glow-gold double-blob swallows it. The beige arm re-declares it in SOURCE chroma (the decorative-accent law: on sand the muted theme brown reads as a shadow, amber reads as colour). */ --glow-key: 0 0 28px color-mix(in srgb, var(--gold-bright) 78%, transparent), 0 0 12px color-mix(in srgb, var(--gold-bright) 72%, transparent), 0 0 4px var(--gold-bright); --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.22); /* top catchlight: metal, not paint */ --btn-edge: 0 4px 0 rgba(110, 76, 16, 0.95); /* the pressable under-edge (Duolingo) */ --btn-edge-pressed: 0 1px 0 rgba(110, 76, 16, 0.95); --shadow-deep: 0 24px 64px rgba(2, 2, 2, 0.55); /* modal ambient depth */ --overlay: rgba(8, 8, 8, 0.65); /* modal scrim, never pure black */ --navy-glass: rgba(18, 18, 18, 0.88); /* the sticky topbar glass */ /* ---- GLASS (frosted surfaces): LUMINANCE on dark, not a new color ---- */ --glass-blur: 18px; --glass-dark: rgba(40, 40, 40, 0.55); /* frosted card tone */ --glass-dark-strong: rgba(40, 40, 40, 0.74); /* less see-through (nav/sheets) */ --glass-light: rgba(22, 22, 22, 0.72); /* frosted BODY-surface tone */ --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18); /* the lit top edge */ --glass-shadow: 0 16px 40px rgba(2, 2, 2, 0.34); /* the float */ --glass-shadow-sm: 0 6px 18px rgba(2, 2, 2, 0.30); /* the small float, an active pod/chip */ --glass-sheen: linear-gradient(135deg, rgba(255, 233, 168, 0.10), transparent 42%); --glass-dark-grad: linear-gradient(180deg, rgba(46, 46, 46, 0.90), rgba(18, 18, 18, 0.96)); --glass-nav-grad: linear-gradient(180deg, rgba(48, 48, 48, 0.44), rgba(20, 20, 20, 0.62)); --glass-nav-film: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); /* the BOTTOMNAV's TINTLESS film (operator-directed): achromatic white-alpha only, so the bar dynamically reflects whatever ground scrolls beneath it; the tinted --glass-nav-grad above stays for its other consumers (nav pane + dashboard chrome) */ --dash-pane-blur: blur(26px); /* the dashboard glass's PLAIN deep blur (no saturate — a saturate boost re-tints the pane navy over the blue pools); the cockpit panes + the meta keys */ --glass-nav-blur: blur(14px) saturate(1.5); /* the ONE liquid-glass backdrop recipe (the nav pane + the dashboard meta controls), theme-invariant */ /* the LIQUID nav glass: almost-fully-transparent NEUTRAL SMOKE (graphite stops — the graphite rebuild retired the navy-blue tint; the saturate(1.5) pours the content's own hue through, so the pane takes color from the page, never from a tint); base.css solidifies the nav to --navy-4 while lenis scrolls (the blur-drop twin), so translucency never rides a blur-less frame */ --glass-bloom: radial-gradient(118% 128% at 50% -20%, rgba(255, 190, 92, 0.20), transparent 55%), linear-gradient(140deg, rgba(255, 214, 140, 0.12), transparent 38%); /* ---- THE COMMUNITY LIQUID-GLASS SURFACE (the website-assets reference): the "/" feed's page ground + its glass post cards. NIGHT arm here, DAY arm on the beige theme: each theme owns its OWN gradient ground (the reference ships both). The card is TRUE liquid glass: a translucent white film + a lit white rim + inner top/bottom catchlights over a heavy saturating blur; the ground reads THROUGH every card. */ --bg-community: var(--cg-night); /* the value lives in THE COMMUNITY GRADIENT LIBRARY below (named so the picker's night dot wears the same source) */ --glass-post: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)); --glass-post-border: rgba(255, 255, 255, 0.16); --glass-post-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 22px 52px rgba(3, 8, 18, 0.42); --glass-post-blur: blur(30px) saturate(180%); /* theme-invariant (beige inherits) */ /* the hover LIFT arm: the same catchlight grammar, top light raised + the drop deepened (the raise-and-shine hover; community.css owns the transform + sheen layer) */ --glass-post-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 30px 64px rgba(3, 8, 18, 0.5); /* the hover SHEEN sweep, theme-armed: the dark glass needs a QUIETER light (the full-white sweep read over-bright on navy, operator-caught); the beige arm keeps the stronger gleam that white glass can absorb */ --glass-post-sheen: linear-gradient(160deg, color-mix(in srgb, var(--sheen) 15%, transparent) 8%, transparent 48%, color-mix(in srgb, var(--sheen) 6%, transparent) 92%); /* the on-gradient pill STROKE (lens chips · the hero quiet links · group owner tools): the dark arm keeps the navy-3 ring; the beige arm needs a real BROWN (navy-3 resolved near-invisible on the sky, operator-caught) */ --glass-chip-stroke: var(--navy-3); /* the SEEN status ring's tone (the tray tiles + the card author avatars). The dark arm is the tone the shared .status-ring--seen has always painted; the beige arm quiets it far below that (operator: a viewed story must RECEDE on light). */ --status-ring-seen: color-mix(in srgb, var(--slate-on-dark) 55%, var(--navy-3)); /* the build card's POD FILM (auth.css fact pods, ONE film for rest AND live, the owner's call: a mismatched resting fill "looks odd"; live is distinguished by the gold rim + text, never a darker seat) */ --build-pod-film: color-mix(in srgb, var(--sheen) 13%, transparent); /* the register flow CHROME's film (auth.css discs · track · bubble): the DARK arm paints the canonical liquid-nav NEUTRAL-SMOKE tint INTO the film; painted, so the pre-lens and engaged-lens frames render alike (the owner's one-stage law) while the glass reads rich dark graphite; the beige arm keeps the light film (below) */ --build-chrome-film: var(--glass-nav-grad); /* the build card's AURORA + head-glass films (auth.css .reg-build::before / .reg-build-head): the dark arm keeps the shipped gold pools + frosted tints EXACTLY; the beige arm re-paints both as the IRIDESCENT GOLD field (below: the owner's holographic reference, light theme only) */ --build-aurora: radial-gradient(58% 42% at 24% 4%, color-mix(in srgb, var(--gold) 36%, transparent), transparent 68%), radial-gradient(52% 36% at 78% 10%, color-mix(in srgb, var(--sheen) 25%, transparent), transparent 70%); /* the dark head pane is AURORA-INFUSED glass (the owner's call: the flat amber read gold-on-gold under the gradient name): a gold pool and a light pool at the pane's edges over the cooler navy tint, so the middle, where the typed name sits, stays cool and the gold ink pops */ /* the aurora's luminous blue rides BY VALUE (#60a5fb): this token is dark-arm-only, so the literal is theme-safe. (It used to name the dashboard's --dashboard-atmosphere halo as its source; that token was deleted with the dashboard gradient.) */ /* the decorative pools LOWERED to half strength (user call: the loud film made the head read as a banner), then the WHOLE film lowered again (operator call: the card should read as transparent liquid glass, not a painted pane) — the pools halve once more AND the navy base drops from the nav's own --glass-nav-grad (0.44 → 0.62 alpha) to roughly half of it, which is what actually let the aurora behind the card show through. The base is written as a literal here rather than the nav token precisely because the nav must NOT follow: its pane sits over scrolling content and needs the opacity this one is giving up. Dropping it is ALSO what turned the pane golden: the form's own aurora now reads THROUGH the card, which is the look the operator kept when it appeared, so the base went lower again (0.22/0.32 → 0.10/0.16) rather than being restored. Legibility re-measured on the live card after each drop. */ --build-head-glass: linear-gradient(115deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 44%) padding-box, linear-gradient(245deg, color-mix(in srgb, #60a5fb 9%, transparent), transparent 62%) padding-box, radial-gradient(95% 115% at 55% 135%, color-mix(in srgb, var(--navy-rich) 26%, transparent), transparent 70%) padding-box, radial-gradient(85% 55% at 70% -25%, color-mix(in srgb, #60a5fb 8%, transparent), transparent 66%) padding-box, radial-gradient(36% 60% at 96% 20%, color-mix(in srgb, var(--sheen) 5%, transparent), transparent 55%) padding-box, linear-gradient(180deg, rgba(44, 44, 44, 0.20), rgba(18, 18, 18, 0.30)) padding-box; /* THE RING IS A BORDER-BOX SHEET, so it paints the WHOLE box, not just the 1.5px edge: --grad-gold is OPAQUE, so it was the card's real background all along and lowering the film above it only revealed more of it (measured: the pane went MORE golden, not more transparent — the operator's catch). The light arm hit this same trap and solved it with a translucent gold film; the dark arm now does the same, so the golden character the operator kept survives while the form's field pours through the card. A warmer pair was tried and REJECTED (operator preferred the clear glass): the gold film only reads golden as it approaches opacity, and the fully opaque sheet this replaced measured 1.25:1 on the card's own copy. At these alphas the pane is clear glass over the form's field and the copy sits at 6.44:1. */ --build-head-ring: linear-gradient(rgba(255, 205, 113, 0.22), rgba(255, 181, 77, 0.12)); /* THE CARD'S OWN LENS. It rode --glass-nav-blur (blur + saturate 1.5), and on the LIGHT arm that saturate was the entire "bold" read: isolating each layer live, killing the film or the ring moved the pane by 3 units while dropping the saturate recovered the blue channel 189 → 199 and halved the card's warm cast over the field behind it (the operator's catch: the bold part was never the film's opacity). The dark arm keeps the shipped recipe; the light arm swaps to blur alone, which is the same correction the guide-bubble stack already documents a few blocks down. */ --build-head-lens: var(--glass-nav-blur); /* ---- THE SHARED LIT-CARD RECIPE (was the locked market.css/messages.css per-sheet composition, consolidated to ONE token; the reflection auto-themes: --sheen stays a light source in both themes, the tonal ramp rides the surface ladder). The consumer layers `var(--grad-gold) border-box` + the transparent border itself. ---- */ --grad-lit-card: radial-gradient(130% 95% at 50% -28%, color-mix(in srgb, var(--sheen) 7%, transparent), transparent 58%), linear-gradient(176deg, var(--navy-3), var(--navy-2)); --grad-lit-card-raised: radial-gradient(135% 100% at 50% -24%, color-mix(in srgb, var(--sheen) 13%, transparent), transparent 60%), linear-gradient(168deg, var(--navy-4), var(--navy-3)); /* THE DOCK PANE (the bottomnav's own fill): THE DASHBOARD GROUND ITSELF on dark (operator call, tuned from a #161616→#090909 ramp — the pane wears var(--navy) so the bar and the workspace floor are one tone; a whisper of overhead sheen keeps it lit, and the gold ring + float shadow alone carry the separation), the raised tan lit-card on beige (re-declared on .theme-beige below). ONE consumer: components.css .bottomnav. */ --grad-dock: radial-gradient(135% 100% at 50% -24%, color-mix(in srgb, var(--sheen) 5%, transparent), transparent 60%), linear-gradient(var(--navy), var(--navy)); /* the dock's FULL opaque recipe as ONE pair (pane / rim + float): shared by the components.css base rule AND community.css's no-blur + reduced-transparency fallbacks, so the opaque dock has one source everywhere it renders. RING-LESS (operator: the gold ring fought the content for attention; the 2px transparent border stays as the geometry spacer so the pod concentricity and footprint literals hold): the lit top edge, the float shadow and the whisper sheen alone define the pane. */ --dock-opaque-bg: var(--grad-dock) padding-box; --dock-opaque-shadow: var(--glass-edge), var(--glass-shadow), var(--glass-shadow-sm); /* the INACTIVE tab's ink. On dark it is the standing full-opacity WHITE (§2), which the gold active glyph out-warms without out-valuing. The BEIGE arm must mute it (below): that palette's accent (#5C4A32) is LIGHTER than its primary ink (#3D3428), so an ink-white inactive tab renders DARKER than the selected one — selection reading as recession. Measured, not assumed. */ --dock-tab-ink: var(--white); /* the ACTIVE tab's ink: the brand gold on dark; the beige arm deepens its own signature accent (below) because that accent's stock lightness cannot read as selected. */ --dock-tab-active: var(--gold-bright); /* the active glyph's halo. On dark the shared lit-glyph glow; the beige arm is its own (below) — --drop-glow-gold is shared with groups.css, so the dock states its own. */ --dock-tab-glow: var(--drop-glow-gold); /* THE GRADIENT-PRESET GLASS DOCK (operator): on every community GRADIENT ground — the day/night defaults and the picked cg- presets alike — the bar returns to the border-less §2 liquid glass, reflecting the ground; מינימליסטי and a11y-contrast keep the opaque dock. Identity = the opaque recipe, so every other page/regime is byte-identical; the chrome-tint ARM blocks below flip the four (they already encode exactly that condition). Consumer: community.css "THE PRESET GLASS DOCK". */ --cg-dock-bg: var(--dock-opaque-bg); --cg-dock-border-w: 2px; --cg-dock-blur: none; --cg-dock-shadow: var(--dock-opaque-shadow); /* THE DEEP CARD GROUND (born on /subscription, promoted here with its second consumer, /promotions): a deep navy-deep ramp under a warm overhead gold wash. Each layer is padding-box-clipped so a §4 grad-border composite can stack `var(--grad-gold) border-box` beneath it; auto-themes through the surface ladder. */ --grad-deep-card: radial-gradient(120% 80% at 50% -14%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 58%) padding-box, linear-gradient(180deg, var(--navy-deep), color-mix(in srgb, var(--navy-deep) 55%, var(--navy))) padding-box; /* ---- Atmosphere (LUMINANCE, not color; static, always) ---- */ /* the funnel ground (/ hero · /login · /register) = the /search AURORA promoted at PROPORTIONATE strength (operator: the blue tops go, the aurora arrives "not over-bearing"): grain over a flat graphite VEIL over the one gold-to-violet aurora — the veil is the ONE dimming knob (45% floor ≈ the blooms at half presence; a veil over BLACK deepens same-hue, unlike the olive-risk warm-over-blue dims), and the retired -lit gold radial no longer doubles the aurora's own warm pools. The boards/search wear the aurora FULL; only the funnel tempers it (its golden foreground — card · key · CTA — carries the warmth). */ --bg-hero: url("/static/img/grain.png") repeat, linear-gradient(color-mix(in srgb, var(--navy) 45%, transparent), color-mix(in srgb, var(--navy) 45%, transparent)), var(--bg-aurora-hero); --bg-hero-lit: var(--bg-hero); /* dark: the aurora IS the light (beige keeps its own lit radial in the theme block below) */ /* the LANDING hero's ground (direction change, user call: copy the /register//login background to the hero, no extra art): the hero rides the SAME calm funnel ground as auth, var(--bg-hero-lit) referenced as the base layer, ONE source, never a copied recipe, plus only the settle into the landing ground below. Live-verified by Playwright (both themes × mobile+desktop). */ /* the hero's DEDICATED transition band (user call: "extend the bottom to add space for a clean gradient transition"): landing.css grows .hero's bottom padding by exactly this, and the settle layer below spans exactly this: a %-length settle compressed the dawn into a smudge (user-caught twice: first flattened, then abrupt); a PIXEL runway the box itself pays for keeps the decay long and calm at every hero height. */ /* grown (user call: "spread the condensed core further down … add space if needed"): the extra runway is all bottom padding; the field above is untouched; the dawn decays through it before the band below. */ /* TRIMMED (operator call: the hero-to-story gap read drastic). The band was clamp(300px, 50svh, 540px) — half a screen of runway, which alone put 474-540px of bare ground under the trust cues before the section cadence even started (measured: a 676-707px chips-to-title gap on desktop). Every gradient stop below is a FRACTION of this token, so shrinking it rescales the whole eased S-curve rather than compressing its end: the settle keeps its shape and still reads as a melt, not the smudge a two-stop ramp gave. */ --hero-settle-band: clamp(96px, min(22svh, 24vw), 260px); /* phones take a shorter runway (operator: cut the space under the hero) */ --bg-hero-landing: /* the VERTICAL SETTLE (the --bg-aurora-hero grammar): the dedicated band fades into var(--cream-landing) (the band below) on an EASED six-stop S-curve, so the warm→blue hue crossover has no fast zone anywhere (a two-stop ramp still read as a boundary, user-caught); the dawn keeps its full-width presence above it. */ linear-gradient(0deg, var(--cream-landing) 0, color-mix(in srgb, var(--cream-landing) 85%, transparent) calc(var(--hero-settle-band) * 0.18), color-mix(in srgb, var(--cream-landing) 60%, transparent) calc(var(--hero-settle-band) * 0.38), color-mix(in srgb, var(--cream-landing) 32%, transparent) calc(var(--hero-settle-band) * 0.58), color-mix(in srgb, var(--cream-landing) 12%, transparent) calc(var(--hero-settle-band) * 0.78), transparent var(--hero-settle-band)), var(--bg-hero-lit); /* the LANDING page GROUND (user call): darker and deeper than the app-wide --cream body surface, so the hero art + white/gold content pop (the blue arm of that call retired with the graphite rebuild; since the floor unification it IS the universal floor). ONE tone for the ticker band, the light section cadence AND the hero's rounded-corner reveal: they meet at the corners; two tones would show the seam. Beige re-declares it as the unchanged app surface. */ --cream-landing: var(--navy); /* the section/band washes joined the aurora family: the VIOLET arm — the last blue washes went with the blue page tops (dialed with the aurora's violet) */ --bg-section-dark: linear-gradient(180deg, rgba(168, 110, 224, 0.28), var(--navy) 36%); --bg-footer: var(--navy); --halo-gold: radial-gradient(closest-side, rgba(255, 233, 168, 0.1), transparent); /* (--bg-band-edge retired, operator direction: the landing band's violet seam feathers went with its one consumer — the journey's own black is the seam) */ /* ---- The AMBIENT JOURNEY (landing): THE GOLD HORIZON ---- */ --bg-depth: radial-gradient(120% 45% at 50% 115%, rgba(255, 157, 0, 0.12), rgba(164, 118, 34, 0.05) 42%, transparent 62%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 60%, #030303 100%); /* the LIFT scene (the features showcase): a RAINBOW horizon in the rainbow key's own palette (operator call) — six soft pools along the bottom edge, blue at the physical left arcing to gold at the right, over the same navy ground */ --bg-lift: radial-gradient(60% 50% at 8% 112%, rgba(5, 99, 233, 0.22), transparent 62%), radial-gradient(55% 46% at 28% 114%, rgba(63, 240, 255, 0.14), transparent 60%), radial-gradient(58% 48% at 50% 113%, rgba(46, 196, 182, 0.16), transparent 60%), radial-gradient(55% 46% at 68% 114%, rgba(178, 208, 141, 0.15), transparent 60%), radial-gradient(58% 50% at 86% 112%, rgba(255, 210, 77, 0.16), transparent 62%), radial-gradient(62% 52% at 100% 110%, rgba(255, 205, 113, 0.22), transparent 64%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 60%, #030303 100%); --bg-warm: radial-gradient(140% 72% at 50% 108%, rgba(255, 157, 0, 0.24), rgba(255, 181, 77, 0.09) 42%, transparent 62%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 60%, #030303 100%); /* ---- GOLD VEIL (premium sweep) ---- */ --bg-gold-veil: linear-gradient(125deg, rgba(255, 209, 122, 0.42) 0%, rgba(255, 233, 168, 0.18) 16%, rgba(255, 205, 113, 0.05) 34%, transparent 50%), radial-gradient(60% 45% at 90% 6%, rgba(255, 233, 168, 0.22), transparent 68%), linear-gradient(165deg, #1a1332 0%, var(--navy) 45%, var(--navy-deep) 100%); /* ---- THE SIGNATURE HERO GROUND (market/goods/messages/profile + every .market-hero-family surface) = the /search AURORA, promoted (operator: "replace the blue page top gradients with the /search page top gradient on all pages where it applies" — was the gold+logo-blue corner-bloom pair; changed so every applying page top wears the ONE gold-to-violet light). The dark arm ALIASES --bg-aurora-hero, the one source below (top-only art settling onto the var(--navy) floor by its own construction, so heroes still end seamlessly at any height); the beige arm keeps its own brown/tan signature twin. ---- */ /* THE SETTLE REINFORCEMENT: the aurora's own bottom settle is 18% of the PAINTED box, calibrated on the tall /search hero — on the SHORTER signature heroes (messages · profile) the box ended while the blooms still carried alpha and printed a blend LINE (operator-caught). This extra floor-settle layer deepens the melt proportionally to each consumer's own height (32% of it), so every signature hero finishes ON the floor exactly like /search; on the tall reference geometry it is near-invisible, and /search itself (riding --bg-aurora-hero directly) is untouched. */ --bg-hero-signature: linear-gradient(0deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 60%, transparent) 14%, transparent 32%), var(--bg-aurora-hero); /* ---- The BODY-surface atmosphere (the old cream bands, theme-recolored): a soft warm lift settling into the body tone ---- */ --bg-cream: radial-gradient(120% 70% at 50% -10%, rgba(255, 205, 113, 0.07), transparent 60%), linear-gradient(180deg, #0c1848 0%, var(--cream) 100%); --bg-cream-mesh: radial-gradient(55% 50% at 16% 18%, rgba(255, 217, 120, 0.14), transparent 68%), radial-gradient(50% 48% at 86% 24%, rgba(248, 207, 60, 0.10), transparent 66%), radial-gradient(65% 55% at 72% 92%, rgba(255, 181, 77, 0.10), transparent 70%), linear-gradient(165deg, #0c1848 0%, var(--cream) 100%); /* ---- EXPRESSIVE gradients (navy+gold; one mood surface at a time) ---- THE AURORA IS ONE RECIPE WITH TWO KNOBS. Its four coloured blooms sit ON a directional deep-blue→near-black RAMP: the ramp is not filler, it is what gives the surface its depth and direction, and the blooms were calibrated against it. Both are LITERAL here and the token is worn WHOLE; every attempt to serve a translucent consumer by re-tuning it failed on the same wall: dimming it desaturated the blooms to olive, dropping the ramp left four washes on a flat floor, and turning alpha knobs landed a field 2.1x too light and hue-NEUTRAL (mean R≈G≈B, the signature of mud) against .stat-hero's dark blue-dominant 30/39/51. A translucent pane over a lit ground cannot hold this aurora; the subscription hero went back to wearing it OPAQUE. */ /* THE COCKPIT VEIL (dashboard.css .cockpit): the share of the page floor --navy laid OVER --bg-aurora, so the pane reads primarily graphite black with the aurora at the complement (80% veil = aurora at 20%; operator). The beige arm keeps its aurora at 100% (0%). */ --cockpit-veil: 80%; --bg-aurora: radial-gradient(75% 60% at 14% 12%, rgba(255, 205, 113, 0.22), transparent 72%), radial-gradient(65% 55% at 88% 16%, rgba(168, 110, 224, 0.16), transparent 70%), radial-gradient(80% 70% at 78% 92%, rgba(255, 168, 64, 0.2), transparent 74%), radial-gradient(60% 50% at 30% 78%, rgba(255, 233, 168, 0.1), transparent 72%), linear-gradient(155deg, #0b1e33 0%, var(--navy-deep) 70%, #050f22 100%); /* (--grad-banner-lift retired; its two consumers, the messages + profile heroes, joined --bg-hero-signature) */ --grad-feature-disc: radial-gradient(115% 90% at 50% -12%, color-mix(in srgb, var(--sheen) 11%, transparent), transparent 56%), linear-gradient(180deg, var(--navy-3), var(--navy-2)); --bg-aurora-hero: /* the VERTICAL settle band: the base linear runs 167° (the aurora's tilt), so its own last stop reaches the floor on ONE side only (user-caught); this 0° top layer paints the whole bottom edge to the page floor uniformly, fading up into the tilted mood. */ linear-gradient(0deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 55%, transparent) 9%, transparent 18%), radial-gradient(78% 72% at 7% 0%, rgba(255, 205, 113, 0.24), rgba(255, 205, 113, 0.06) 42%, transparent 72%), radial-gradient(66% 60% at 33% 20%, rgba(255, 168, 64, 0.27), rgba(255, 168, 64, 0.07) 44%, transparent 74%), radial-gradient(52% 46% at 52% 0%, rgba(255, 233, 168, 0.16), transparent 60%), /* the violet arm dialed to ~80% of its landed alphas (operator: "slightly lower ... so the purple isn't over-bearing"). THE SIGNATURE SEAM: the accent triplet reads --aurora-accent so a feature board may re-tone its OWN head (goods.css sets the goods orange); the fallback IS the landed violet, so every other consumer renders byte-identically. */ radial-gradient(62% 58% at 72% 18%, rgba(var(--aurora-accent, 168, 110, 224), 0.16), rgba(var(--aurora-accent, 168, 110, 224), 0.04) 44%, transparent 72%), radial-gradient(86% 84% at 98% 0%, rgba(var(--aurora-accent, 168, 110, 224), 0.26), rgba(var(--aurora-accent, 168, 110, 224), 0.08) 42%, transparent 72%), linear-gradient(167deg, #0b1e33 0%, var(--navy) 32%, var(--navy-deep) 74%, var(--navy) 100%); --bg-spotlight: radial-gradient(75% 65% at 70% 24%, rgba(255, 214, 140, 0.26), rgba(214, 150, 60, 0.08) 34%, transparent 66%), radial-gradient(90% 50% at 50% 118%, rgba(164, 118, 34, 0.14), transparent 70%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 45%, #030303 100%); --bg-dawn: radial-gradient(120% 48% at 50% 116%, rgba(255, 210, 130, 0.5), transparent 70%), radial-gradient(40% 30% at 84% 8%, rgba(255, 233, 168, 0.1), transparent 70%), linear-gradient(179deg, #04101f 0%, #071b33 22%, #0e2a49 42%, #243f52 60%, #6b5232 76%, #b9803a 89%, #f0b257 97%, #ffce86 100%); --bg-glass-tint: linear-gradient(135deg, rgba(255, 205, 113, 0.14), rgba(47, 107, 255, 0.06) 60%, transparent); /* ======================= TYPE ROLES ======================= SEVEN roles, FOUR weights, FOUR leadings; components consume roles. */ --font-ui: "Rubik", system-ui, sans-serif; --text-display: clamp(2.5rem, 5vw + 1rem, 3.5rem); /* 40–56 */ --text-h1: 2rem; /* 32 */ --text-h2: 1.5rem; /* 24 */ --text-h3: 1.25rem; /* 20 */ --text-lead: 1.125rem; /* 18: sublines, button labels */ --text-body: 1.0625rem; /* 17: min body 16 (a11y) */ --text-caption: 0.875rem; /* 14 */ --w-display: 800; --w-heading: 700; --w-medium: 500; --w-body: 400; --w-regular: 400; /* alias of --w-body */ --leading-tight: 1.15; /* display */ --leading-heading: 1.3; /* h1–h3 */ --leading: 1.6; /* body (generous for Hebrew) */ --leading-loose: 1.75; /* lead / closer copy */ /* ======================= THE CATEGORY HUE WHEEL (the graphite-grid law) ======================= Eight muted identity hues — the designed substitute for cover art (Spotify's browse-tile grammar adapted to a B2B catalog): browse tiles wear one as a FILL, card media-slot placeholders tint with one. Assignment is class-borne (`gg-hue-` in markup — templates carry no inline styles), so a category keeps its hue on every surface. CONTRAST LAW (computed, suite-anchored): --white clears ≥9.5:1 on every dark arm; --ink clears ≥8:1 on every beige arm. Muted by design — a tile is a GROUND for ink, never a saturated field (§2 saturation guardrails hold). */ --hue-0: #2e4b3c; /* sage */ --hue-1: #1e4644; /* teal */ --hue-2: #27455c; /* steel */ --hue-3: #373560; /* indigo */ --hue-4: #4c2b4e; /* plum */ --hue-5: #542e36; /* wine */ --hue-6: #4e3a24; /* umber */ --hue-7: #3e4629; /* moss */ --grad-agent-wash: /* THE AI SURFACE'S GROUND: an iridescent sweep of the wheel mixed 42% into the --navy-3 plate, so colour never lands on type. Worn by the cockpit agent key (dashboard.css .cockpit-agent-cta, whose border-box rim is the same sweep at full strength) and by the subscription banner (.dash-sub-hero, operator). The hues re-resolve per theme arm, so ONE declaration serves all four. */ linear-gradient(115deg, color-mix(in srgb, var(--hue-1) 42%, var(--navy-3)), color-mix(in srgb, var(--hue-3) 42%, var(--navy-3)), color-mix(in srgb, var(--hue-5) 42%, var(--navy-3)), color-mix(in srgb, var(--hue-7) 42%, var(--navy-3))); /* ======================= SHAPE & RHYTHM ======================= */ --r: 16px; /* default radius (the logo's rounded geometry) */ --r-sm: 10px; --r-lg: 24px; /* hero cards, modals, step cards */ --r-squircle: 38%; /* the feature discs: proportional rounded square */ --r-full: 999px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 104px; --space-8: 144px; --section-pad: clamp(72px, 11vw, 144px); /* ONE vertical cadence for every band */ /* ---- THE GRID SYSTEM (the graphite-grid law, DESIGN.md §7) ---- ONE card-grid vocabulary for every board/shelf: a consumer sets a SIZE VARIANT, never a private minmax floor or column count. Cards are UNIFORM by construction (equal tracks; fixed-aspect media slots), so shelves read clean at any scroll. */ --grid-gap: clamp(12px, 1.6vw, 24px); /* the ONE card-grid gutter */ --card-min-sm: 148px; /* compact tiles: quick picks, category tiles */ --card-min-md: 200px; /* the default board card */ --card-min-lg: 270px; /* wide cards: listing rows, request tickets */ --gg-card-w: clamp(148px, 34vw, 200px); /* the SHELF card: one fixed width per viewport for every card in the lane (uniform sizing = the clean-scroll guarantee; the ramp obeys §13) */ --search-well-w: 560px; /* the hero search well AND its type-tab strip: one width, every board */ --topbar-h: 80px; /* the PINNED glass-bar box; page-top grounds bleed under it by exactly this */ --container-pad: clamp(var(--space-4), 6vw, var(--space-5)); /* the .container inline padding, ONE source */ --panel-pad: clamp(var(--space-3), 3vw, var(--space-5)); /* a PLANE's own inset (the gg-panel inline breath + every side of the headed plane, components.css): 16 on a phone, 40 from ~1333; ONE ramp, so a plane's corner reads the same on every board */ --container-wide: /* THE WIDE CONTAINER (the desktop-scale iteration; the Spotify main-view proportion: content spends the window, gaining COLUMNS while card sizes stay in their band): every signed-in page's .container rides this fluid cap (components.css, the member default) */ clamp(1080px, 92vw, 1600px); --content-rail: /* THE CONTENT RAIL (operator, app-wide width alignment): the member page's content box = the wide container minus its pad = the dashboard's own edge = the .bottomnav's desktop span. EVERY painted plane / frame on a member page caps at THIS and centers in the layout box (never a page's own 1080/1160/66rem/window-centered twin). */ calc(var(--container-wide) - 2 * var(--container-pad)); --chrome-inset: /* THE CHROME RAIL: the ONE inline inset for the app frame — the member header's logo/marks and every back arrow + its mirrored key. ONE value on EVERY member page (operator), so the frame never shifts as you move between pages: it is the WIDE container's content edge, the dashboard's own rail, whether or not THIS page's content column is wide (a 1080-column page keeps its narrower content inside the same frame). It was the per-page container edge until then, so the logo jumped 122px between /dashboard and /profile at 1440. % resolves at the USE SITE: valid only where the box/containing block spans the full layout width (main-anchored absolutes · full-width chrome rows). */ max(var(--container-pad), calc((100% - var(--container-wide)) / 2 + var(--container-pad))); --feature-rail: 760px; /* the centered content rail: the feature grid's box (the member header rode it too until the chrome rail aligned logo↔arrow) */ --bottomnav-reserve: /* the ONE floating-nav clearance (nav footprint 87 = the saturated four-tab dock: list pad 8 + item pad 16 + glyph 40 + gap 3 + label 16 + ring 4 — the size-up at the tuned middle height; + its space-3 inset + a space-5 gap / the safe-area): every consumer reads THIS token (components.css global reserve · the self-clearing page bodies · the groups keyboard scroll-margin); never restate the recipe */ calc(87px + var(--space-3) + max(var(--space-5), env(safe-area-inset-bottom))); /* ======================= MOTION (DESIGN.md §8, the law) ======================= */ --motion-press: 80ms; /* pressed states (<100ms instant class) */ --motion-micro: 150ms; /* icon swaps, ticks, chips */ --motion-state: 220ms; /* tabs, toggles, dropdowns, modal-in */ --motion-swap: 300ms; /* HTMX partial enter */ --motion-page: 380ms; /* page/view transitions */ --motion-reveal: 500ms; /* entrances: count-ups, rings, scroll reveals */ --motion-bloom: 500ms; /* the hover-bloom stretch: the source's gradual ease character, elongated (the user's call: "stretch out gradually"; emphasized/standard curves front-load and READ fast at any duration) */ --motion-celebrate: 900ms; /* the milestone beat */ --motion-morph: 2000ms; /* the band theme-shift, breathes over ~2s */ --motion-ambience: 900ms; /* the gold-horizon scene crossfade */ --motion-theme: 900ms; /* the light<->dark whole-UI DISSOLVE: the switch swaps instantly beneath the island's veil (app.js crossfadeVeil) and only the veil fades, so no element passes through an in-between tone. UNPINNED by the a11y motion arms for the SAME reason as --motion-ground below: an opacity fade carries zero movement, so a member on reduced motion gets the beat, never a snap (operator: the toggle read as "0 animation" on Safari, where OS Reduce Motion is common) */ --motion-ground: 1600ms; /* the community GROUND swap (the picker's JS crossfade veil READS this + --ease-bloom): a whole atmosphere turns, so it fades far slower than the theme reveal, on the gradual bloom curve (emphasized front-loads and reads fast at any duration, the --motion-bloom lesson). DELIBERATELY ABSENT from the a11y-motion and reduced-motion arms below (operator, "the same animation everywhere"): the swap is a pure OPACITY crossfade with ZERO movement, the recommended SUBSTITUTE for motion rather than motion itself (WCAG 2.3.3 targets movement), so every engine and every preference gets the IDENTICAL beat instead of a snap or a rushed variant */ --stagger: 90ms; /* the choreography step between staggered reveals */ /* THE FUNNEL RAIL: the acquisition surfaces' own wider band (the shared .container caps at 1080, which left ~900px of dead margin on a 1990px screen). ONE source, because two surfaces must agree on it EXACTLY or they visibly step: the landing hero + its trust cues (landing.css --hero-rail) and the funnel header (components.css .shell-glass), aligned edge-to-edge by construction at every width (operator call). */ --funnel-rail: min(92vw, 1720px); --reveal-travel: 24px; /* entrance translate (≤32px law, §11 amended) */ --reveal-travel-lg: 32px; /* display-scale entrances (the hero headline) */ /* the closer rocket's scroll-LINKED drift RANGE (landing.css maps ±half of it per axis, so the excursion from rest is 32px: exactly the §11 per-axis ceiling, doubled from the former --reveal-travel-lg mapping which read too subtle — operator call). Its own token because a scroll-linked 1:1 drift is not an entrance translate. */ --launch-travel: 64px; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot ONLY with momentum */ --ease-linear: linear; /* constant-rate: interruption-robust crossfades */ --ease-bloom: cubic-bezier(0.25, 0.1, 0.25, 1); /* the CSS `ease` curve: change spread EVENLY across the duration (no front-load); the hover-bloom ensemble's curve */ /* ======================= TOUCH & FOCUS ======================= */ --tap-min: 48px; /* --focus-edge is THE ring colour and the ONE source both ring tokens compose from. The statutory ring (WCAG 2.0 2.4.7 / IS 5568) is painted as an OUTLINE by base.css's global `:focus-visible`: outline is a property no resting style claims, so no component or page sheet can annul it. The two box-shadow tokens below stay the DECORATIVE layer. */ --focus-edge: rgba(255, 205, 113, 0.7); --focus-ring: 0 0 0 3px var(--focus-edge); /* the focus ring composed WITH the gold glow — COMPOSED, not copied. Both arms used to restate --glow-gold's own radii at their own weaker alphas (dark 0.55/0.5, beige the theme BROWN at 0.26/0.18), so the lit ring drifted below the glow it is named after and the light arm never glowed at all. Referencing the two tokens makes that drift structurally impossible and re-resolves per theme on its own, so the beige arm needs no re-declaration. */ --focus-ring-lit: var(--focus-ring), var(--glow-gold); } /* ============================================================================ THE BEIGE (LIGHT) THEME: :root.theme-beige The exact ux-components.com Beige palette (site-teardown), mapped onto the SAME token roles: page #f5f0e8 · sidebar/hero #ece5d8 · card #e8e0d0 · input/raised #e2d9c8 · hover/top #ddd4c2 · border #b5a78e · text tiers #3d3428 / #6b5d4d / #8a7a66 · accent #5c4a32 · the tag/badge sets verbatim. Effects re-expressed as warm-brown light-mode equivalents (no grain on light). Brand ART stays constant (pictograms, Rishi, confetti, WhatsApp). ========================================================================== */ :root.theme-beige { color-scheme: light; /* the rainbow key's matched-ink label needs no ground on the light arm */ --rainbow-label-shadow: none; /* the dock pane, beige arm: the FLAT CARD TONE. It rode --grad-lit-card-raised and read GREY (operator-caught): that recipe layers a --sheen white film over the ladder, and a white film on warm tan desaturates it into a flat grey wash — the §2 law that a raised tier on beige is the CARD TONE, never a --white N% film. The dark arm's floor tone + whisper sheen is a graphite idiom and stays there. */ --grad-dock: linear-gradient(var(--navy-2), var(--navy-2)); /* the inactive tab ink, beige arm (see the dark arm's note): a muted ink so the signature accent brown reads as the DARKEST + boldest of the four. The alpha is a MEASURED band, not a taste call: 72% dropped the label to 4.18:1 (under AA), 100% renders it DARKER than the accent (selection receding, operator-caught). 80% measures ≈5.5:1 on the card pane — AA-clear and lighter than the active tab's ≈6.7:1. */ --dock-tab-ink: color-mix(in srgb, var(--white) 80%, transparent); /* the active tab ink, beige arm: THE SIGNATURE ACCENT, DEEPENED for text duty — the same brown hue as --gold-bright (#5C4A32), taken down until it is the darkest, strongest element in the bar. Stock #5C4A32 measures 6.7:1 beside the muted inactive's 5.5:1 and read UNSELECTED (operator-caught); a source-chroma sienna read as the wrong colour for this theme. This measures ≈9.4:1. */ --dock-tab-active: #45341f; /* the active glyph's halo, beige arm: STRONGER (operator) and on SOURCE AMBER, the §2 halo law — the theme-brown --drop-glow-gold (rgba(92,74,50,.35)) deepens into a drop SHADOW on sand at any alpha instead of lighting the glyph. Strength is ALPHA, never spread (§2), so the blur stays tight and the alpha carries it. */ --dock-tab-glow: 0 0 9px rgba(242, 169, 59, 0.72); /* ---- Surfaces ---- */ --navy: #ece5d8; /* hero / secondary surface (= the reference sidebar) */ --navy-deep: #e7dfcf; /* the floor */ --navy-2: #e8e0d0; /* card (= the reference card) */ --navy-3: #e2d9c8; /* raised / input (= the reference input) */ --navy-4: #ddd4c2; /* top: modals, popovers (= the reference hover) */ --info-pop-bg: var(--navy-4); /* light keeps the popover tier (the dark arm alone went near-black) */ --surface-away: color-mix(in srgb, var(--navy-3) 50%, var(--navy-deep)); /* the away-from---navy direction (here: DOWN), dialed to the MIDPOINT between the floor (read too close) and navy-3 (read too dark), the owner's two-trim calibration */ --navy-rich: #e4dbc7; --cream: #f5f0e8; /* the PAGE/BODY surface (= the reference bg) */ --cream-2: #e8e0d0; /* card on the body (= the reference card) */ --panel: #efe8db; /* the SECTION WRAPPER plane: between the page and the card (the graphite-grid law; role mirror of the dark arm) */ /* ---- Text tiers ---- */ --white: #3d3428; /* PRIMARY text (= the reference text) */ --ink: #3d3428; --slate: #4e4335; /* secondary — AAA-raised from the reference's #6b5d4d (measured 4.3–5.6:1, AA only) to ≥7.3:1 on the card and 8.5:1 on the page (the graphite-grid AAA pass; the contrast battery anchors the floor) */ --slate-on-dark: #4e4335; /* --slate-on-dark-bright/-soft: the color-mix definitions inherit; mixing toward the (now dark) primary text STRENGTHENS the tone, the correct light-mode direction. The reference's subtle tiers (#6b5d4d/#8a7a66) are retired from TEXT duty — borders/decorative only. */ /* ---- The category hue wheel (beige arms: soft pastels carrying --ink ≥8:1; the light translation of the dark fills — a pastel GROUND, not a field) ---- */ --hue-0: #cfe0cf; /* sage */ --hue-1: #c8deda; /* teal */ --hue-2: #ccdce8; /* steel */ --hue-3: #d4d2e8; /* indigo */ --hue-4: #e0cce0; /* plum */ --hue-5: #e4ccce; /* rose */ --hue-6: #e2d4bc; /* sand */ --hue-7: #d6dcbe; /* moss */ /* ---- The category-chart stops (beige arm): DEEPER than the dark twins on purpose - a chart stop is a DATA fill read against cream, so the mid-tones that carry on near-black wash out here (measured live on /invoices/expenses) ---- */ --chart-1: #b4671f; /* amber */ --chart-2: #a07d16; /* gold */ --chart-3: #3f7f43; /* green */ --chart-4: #1c7a68; /* teal */ --chart-5: #2c6c92; /* sky */ --chart-6: #5b5bb0; /* violet */ --chart-7: #8f4b95; /* orchid */ --chart-8: #a94663; /* rose */ --chart-none: #5c4a32; /* brown (light arm): the unplaced-money tone */ /* ---- Borders ---- */ --hairline: #b5a78e; /* the border (= the reference border) */ --cream-hairline: #d5cab5;/* the soft divider */ --panel-line: #c2b49a; /* the elevation line, beige arm */ /* ---- Accent (the reference's deep warm brown) ---- */ --gold: #6b573d; /* large emphasis fills */ --gold-bright: #5c4a32; /* strokes/text/icons (= the reference accent) */ --gold-deep: #5c4a32; /* the plans aurora re-tints to REAL gold on beige (the :root pair's beige arm): saturated sun-gold blooms, never the brown accent above */ --aurora-gold: #f2a93b; --aurora-gold-deep: #d99a2b; /* beige glass cards sit MILKIER (operator): a real white film over the parchment ground, less transparent than the dark arm's whisper */ --glass-card-film: color-mix(in srgb, var(--sheen) 32%, transparent); --glass-card-film-deep: color-mix(in srgb, var(--sheen) 20%, transparent); /* the dashboard glass on beige keeps the milky voices: the transparent-glass set is dark-theme-only */ --dash-pane-film: var(--glass-card-film); --glass-nav-grad-deep: var(--glass-nav-grad); --blue: #1a4a7a; /* links/info on light */ /* Reuse the established brand-gold flat stops: a champagne-lit core that feathers through gold-mid, rather than carrying dark blue onto beige. */ --grad-gold: linear-gradient(135deg, #8a6f4e, #5c4a32); --grad-gold-fill: linear-gradient(180deg, #6b573d, #54432e); /* the hover-bloom on beige: the dark arm's angle and warm half VERBATIM (the shared --bloom-ramp), with only its cool half turned BROWN (the user's call: half gold-yellow, half brown) — sienna→deep brown where dark runs blue→cyan. Sienna (not the muted theme browns) keeps the brown half reading as COLOR, not shadow. Winner of the brown-arm Playwright A/B. */ --bloom-cool: #b5651d 66%, #8a4a0e 100%; --on-accent: #f5f0e8; /* light label on the brown fill (6.7:1) */ /* ---- Semantics (darkened for AA on the beige surfaces) ---- */ --success: #166a4a; --attention: #875a00; --danger: #b23238; --danger-fill: #b23238; --on-danger: #ffffff; /* ---- Tags/badges: the reference values VERBATIM ---- */ --tag-use: #d4edda; --tag-use-text: #1b5e20; --tag-avoid: #f5d5d5; --tag-avoid-text: #8b1a1a; --tag-what: #d6e4f0; --tag-what-text: #1a4a7a; --badge-success-bg: #dcfce7; --badge-success-text: #166534; --badge-warn-bg: #fef3c7; --badge-warn-text: #92400e; --badge-danger-bg: #fee2e2; --badge-danger-text: #991b1b; --badge-info-bg: #dbeafe; --badge-info-text: #1e40af; /* ---- Light effects, re-expressed for light ground: the blurred HALOS glow in source amber, the 0-blur rims and glyph shadows stay theme-brown strokes ---- */ /* THE LIGHT GROUND HAS LESS CONTRAST HEADROOM, so the beige glow arms run at the TOP of the alpha range: at the landed 0.6/0.5 the same hover that lit a card on graphite read as a faint smudge on sand (live A/B). Alpha carries the strength; the radii are the dark arm's, unchanged — a wider blur would spill the halo off the shape instead of lighting it. The beige arm keeps SOURCE chroma throughout (the decorative-accent law: the theme brown reads as a shadow on sand, amber reads as colour). */ --glow-gold: 0 0 20px rgba(232, 160, 60, 1), 0 0 8px rgba(240, 180, 90, 0.9); --glow-gold-tight: 0 0 10px rgba(232, 160, 60, 1), 0 0 4px rgba(240, 180, 90, 0.9); --machine-glow: 0.7; /* the landing machine's GOLD lit-glow strength: the beige amber halos read overbearing at full on a whole stage of lit cards (operator-caught: a little lower, never dim) */ /* amber, not the theme brown it carried: raising a BROWN halo's alpha on sand only deepens a dirty drop shadow — the same A/B showed the amber arm reading as light at every step */ --glow-celebrate: 0 0 36px rgba(232, 160, 60, 1), 0 0 13px rgba(240, 180, 90, 0.9); --drop-glow-gold: 0 0 8px rgba(92, 74, 50, 0.35); --ring-shine: 0 0 0 2px rgba(92, 74, 50, 0.85); /* the lit rim in the light voice: a confident brown stroke; full alpha goes to a hard near-black outline on cream, so this arm stops at 0.85 */ /* the small-key halo in the light voice: AMBER source chroma (the dark twin documents why; --gold-mid is the theme-invariant brand stop, so the halo reads as light here instead of the brown smudge the theme accent produced) */ --glow-key: 0 0 28px color-mix(in srgb, var(--gold-mid) 85%, transparent), 0 0 12px color-mix(in srgb, var(--gold-mid) 78%, transparent), 0 0 4px var(--gold-mid); --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.45); /* catchlight stays a light source */ --btn-edge: 0 4px 0 rgba(46, 37, 25, 0.95); --btn-edge-pressed: 0 1px 0 rgba(46, 37, 25, 0.95); /* ambient depth on LIGHT ground = a wide, low-opacity halo + a faint contact layer: the dark theme's 0.30-alpha single layer read as a hard dark rim under every card on the warm beige (a dark shadow that disappears on navy POPS on cream); softened + spread (task 14) */ --shadow-deep: 0 24px 80px 10px rgba(74, 63, 48, 0.13), 0 4px 18px rgba(74, 63, 48, 0.08); --overlay: rgba(61, 52, 40, 0.50); --navy-glass: rgba(236, 229, 216, 0.92); /* ---- Glass on light ---- */ --glass-dark: rgba(232, 224, 208, 0.60); --glass-dark-strong: rgba(232, 224, 208, 0.82); --glass-light: rgba(245, 240, 232, 0.70); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.55); --glass-shadow: 0 16px 40px rgba(74, 63, 48, 0.22); --glass-shadow-sm: 0 6px 18px rgba(74, 63, 48, 0.16); --glass-sheen: linear-gradient(135deg, rgba(92, 74, 50, 0.08), transparent 42%); --glass-dark-grad: linear-gradient(180deg, rgba(240, 233, 220, 0.92), rgba(226, 217, 200, 0.96)); --glass-nav-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(250, 246, 238, 0.44)); --glass-nav-film: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.44)); /* the bottomnav's tintless film, light arm: the landed alphas with the warm cream stop turned PURE white (the beige tint, operator-caught) */ /* light-mode liquid glass is bright WHITE glass (the Apple Photos/News floating-bar grammar), never a tan film: the warm brand kiss comes from the bloom + hairline, not the fill */ --glass-bloom: radial-gradient(118% 128% at 50% -20%, rgba(139, 111, 78, 0.14), transparent 55%), linear-gradient(140deg, rgba(139, 111, 78, 0.08), transparent 38%); /* the community liquid-glass DAY arm (the website-assets reference): the sky-to-cream sunrise ground with the warm bottom glow; the card is bright white glass (the dark twin documents the family's roles). Every stop rides 0.45 alpha (the operator dial: 70% off read too faint, +15% back ⇒ ~55% off) so the beige body breathes through the sunrise. */ --bg-community: var(--cg-day); /* the value lives in the gradient library (the same 0.45-dialed arm, named so the picker's day dot wears it) */ --glass-post: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.3)); --glass-post-border: rgba(255, 255, 255, 0.72); --glass-post-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 18px 44px rgba(28, 45, 72, 0.09); --glass-post-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, 0.38), 0 26px 56px rgba(28, 45, 72, 0.14); --glass-post-sheen: linear-gradient(160deg, color-mix(in srgb, var(--sheen) 30%, transparent) 8%, transparent 48%, color-mix(in srgb, var(--sheen) 10%, transparent) 92%); /* the on-gradient pill stroke, light arm: a real BROWN, not the warm gray it carried (operator: the chips read strokeless on the sky) */ --glass-chip-stroke: #8a7358; /* the viewed-story ring recedes on light (the dark twin documents the role) */ --status-ring-seen: color-mix(in srgb, var(--slate-on-dark) 25%, var(--navy-3)); /* the pod film, light arm: ONE strong white film (rest = live) so the pills sit close to the beige paper (the owner's call: light glass, never tan) */ --build-pod-film: color-mix(in srgb, var(--sheen) 62%, transparent); /* the chrome film, light arm: the same light whisper the chrome carried (55% of the pod film ≈ sheen 34%), unchanged look, now token-owned */ --build-chrome-film: color-mix(in srgb, var(--sheen) 34%, transparent); /* the build aurora, light arm: the IRIDESCENT GOLD field (the owner's holographic reference: flowing gold with pink/blue/cyan pools riding the system's bloom hues); pools sit in the card's top third, the gold wash tails down. The head's film thins to a whisper so the field pours through its glass: the striking card IS the point on light. */ /* the field's own strength, LIGHT ARM ONLY (operator call): every pool scaled to ~55% of the shipped alphas, so the form reads as a soft warm light behind the card instead of a painted gold field. The shape is untouched (same pools, same positions, same stops) and the dark arm's aurora is a different token entirely, so nothing else moves. The .reg-build::before opacity LADDER (0.6 climbing to 1 as the profile fills) stays exactly as it is: it is the build-progress signal, not a look. */ --build-aurora: radial-gradient(52% 13% at 26% 5%, rgba(255, 205, 64, 0.165), transparent 52%), radial-gradient(34% 10% at 78% 14%, rgba(196, 148, 58, 0.105), transparent 50%), linear-gradient(180deg, rgba(255, 210, 90, 0.077), rgba(255, 190, 80, 0.044) 24%, transparent 34%); --build-head-glass: linear-gradient(160deg, rgba(255, 210, 95, 0.05), rgba(255, 247, 230, 0.30) 55%, rgba(246, 189, 82, 0.03)) padding-box; /* the head's ring sheet, light arm: the platform --grad-gold is an OPAQUE brown sheet here and BLOCKED the field behind the whisper film (the border-box layer paints the whole box, the canonical lesson, re-hit); a translucent gold film keeps the golden kiss AND lets the field through. LOWERED to a third (operator: the card read too strong on light). Of the CARD'S OWN two background layers this is the only one that ADDS gold, measured by isolating each live: the whisper glass film above LIGHTENS the pane, so lowering it would make the card MORE gold, not less. The aurora behind the card is a separate surface and stays untouched (the operator's scope: the card itself, not its backdrop). Was 0.10 / 0.05. LIGHT ARM ONLY: the dark head keeps its owner-tuned aurora-infused glass. */ --build-head-ring: linear-gradient(rgba(217, 167, 46, 0.033), rgba(217, 167, 46, 0.017)); /* light arm: BLUR ONLY. saturate(1.5) over a warm ground is what painted the card tan instead of glass; the blur alone lets the field read through honestly. */ --build-head-lens: blur(16px); /* ---- Atmosphere on light: soft warm lifts, NO grain (the reference is clean) ---- */ --bg-hero: radial-gradient(140% 80% at 50% -20%, rgba(255, 255, 255, 0.55), transparent 58%), linear-gradient(180deg, #f0ead9 0%, var(--navy) 55%, var(--navy-deep) 100%); --bg-hero-lit: radial-gradient(120% 52% at 50% -8%, rgba(255, 251, 240, 0.75), transparent 60%), var(--bg-hero); /* the LANDING hero's beige twin, the same two-light diagonal in the light voice: champagne-yellow SUNLIGHT at the top inline-start corner and a saturated amber dawn at the bottom inline-end. SOURCE chroma throughout (the champagne/amber family: ffe18c/ffb02b), never the muted theme browns: on sand, brown reads as shadow where amber reads as COLOR (the --grad-bloom lesson). */ --bg-hero-landing: /* the same dedicated-band eased settle in the light voice: the beige hero melts into its own page surface (cream-landing = --cream here) with the amber dawn keeping its full-width presence above the fade. */ linear-gradient(0deg, var(--cream-landing) 0, color-mix(in srgb, var(--cream-landing) 85%, transparent) calc(var(--hero-settle-band) * 0.18), color-mix(in srgb, var(--cream-landing) 60%, transparent) calc(var(--hero-settle-band) * 0.38), color-mix(in srgb, var(--cream-landing) 32%, transparent) calc(var(--hero-settle-band) * 0.58), color-mix(in srgb, var(--cream-landing) 12%, transparent) calc(var(--hero-settle-band) * 0.78), transparent var(--hero-settle-band)), /* the shared funnel ground, unadorned: the dark twin's direction change in the light voice (rationale at the dark twin). */ var(--bg-hero-lit); --cream-landing: var(--cream); /* beige: the landing ground stays the app surface */ --bg-section-dark: linear-gradient(180deg, rgba(226, 217, 200, 0.55), var(--navy) 36%); --halo-gold: radial-gradient(closest-side, rgba(92, 74, 50, 0.10), transparent); --bg-depth: radial-gradient(120% 45% at 50% 115%, rgba(164, 118, 34, 0.10), rgba(164, 118, 34, 0.04) 42%, transparent 62%), linear-gradient(180deg, var(--cream) 0%, var(--navy) 60%, #e2d9c8 100%); /* the lift scene's light arm: the same rainbow horizon, quieter over cream */ --bg-lift: radial-gradient(60% 50% at 8% 112%, rgba(5, 99, 233, 0.12), transparent 62%), radial-gradient(55% 46% at 28% 114%, rgba(63, 240, 255, 0.10), transparent 60%), radial-gradient(58% 48% at 50% 113%, rgba(46, 196, 182, 0.11), transparent 60%), radial-gradient(55% 46% at 68% 114%, rgba(178, 208, 141, 0.11), transparent 60%), radial-gradient(58% 50% at 86% 112%, rgba(255, 210, 77, 0.12), transparent 62%), radial-gradient(62% 52% at 100% 110%, rgba(255, 205, 113, 0.15), transparent 64%), linear-gradient(180deg, var(--cream) 0%, var(--navy) 60%, #e2d9c8 100%); --bg-warm: radial-gradient(140% 72% at 50% 108%, rgba(164, 118, 34, 0.20), rgba(164, 118, 34, 0.07) 42%, transparent 62%), linear-gradient(180deg, var(--cream) 0%, var(--navy) 60%, #e2d9c8 100%); --bg-gold-veil: linear-gradient(125deg, rgba(139, 111, 78, 0.22) 0%, rgba(139, 111, 78, 0.10) 16%, rgba(139, 111, 78, 0.03) 34%, transparent 50%), radial-gradient(60% 45% at 90% 6%, rgba(139, 111, 78, 0.12), transparent 68%), linear-gradient(165deg, #f0ead9 0%, var(--navy) 45%, var(--navy-deep) 100%); /* THE SIGNATURE HERO GROUND's LIGHT twin: the SAME two-equal-blooms build, painted in the beige voice (the signature rebuild): the deep button-BROWN bloom (#5c4a32, the beige accent family) at the top inline-start corner and the warm TAN bloom at the top inline-end corner, over the calm warm-sand body, settling into var(--navy), the beige page floor (seamless at any hero height, no separator). Blurry beige-brown: clean, no discrete pools, never a heavy wash. 🔒 the shape is the signature (the dark twin's lock). */ --bg-hero-signature: radial-gradient(120% 105% at 92% -30%, rgba(92, 74, 50, 0.28), rgba(92, 74, 50, 0.16) 22%, rgba(92, 74, 50, 0.08) 44%, rgba(92, 74, 50, 0.03) 62%, transparent 82%), radial-gradient(130% 115% at 8% -30%, rgba(190, 150, 95, 0.52), rgba(190, 150, 95, 0.30) 22%, rgba(190, 150, 95, 0.14) 45%, rgba(190, 150, 95, 0.05) 64%, transparent 84%), linear-gradient(180deg, #f5ead3 0%, #f4ead8 45%, var(--navy) 92%); --bg-cream: radial-gradient(120% 70% at 50% -10%, rgba(163, 132, 84, 0.08), transparent 60%), linear-gradient(180deg, #faf6ee 0%, var(--cream) 100%); --bg-cream-mesh: radial-gradient(55% 50% at 16% 18%, rgba(197, 164, 108, 0.22), transparent 68%), radial-gradient(50% 48% at 86% 24%, rgba(197, 164, 108, 0.14), transparent 66%), radial-gradient(65% 55% at 72% 92%, rgba(164, 118, 34, 0.12), transparent 70%), linear-gradient(165deg, #faf6ee 0%, var(--cream) 100%); --cockpit-veil: 0%; /* the light arm wears the aurora FULL (operator) */ --bg-aurora: /* the beige blooms lifted ~1.8x (operator: the cockpit's light-arm aurora read near-flat); the dark arm is untouched */ radial-gradient(75% 60% at 14% 12%, rgba(164, 118, 34, 0.22), transparent 72%), radial-gradient(65% 55% at 88% 16%, rgba(147, 111, 180, 0.18), transparent 70%), radial-gradient(80% 70% at 78% 92%, rgba(197, 138, 50, 0.20), transparent 74%), linear-gradient(155deg, #f3ede1 0%, var(--navy) 70%, var(--navy-deep) 100%); --bg-aurora-hero: /* the vertical settle band: the dark arm's uniform fade-into-the-floor grammar */ linear-gradient(0deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 55%, transparent) 9%, transparent 18%), radial-gradient(78% 72% at 7% 0%, rgba(164, 118, 34, 0.14), rgba(164, 118, 34, 0.04) 42%, transparent 72%), radial-gradient(66% 60% at 33% 20%, rgba(197, 138, 50, 0.14), rgba(197, 138, 50, 0.05) 44%, transparent 74%), radial-gradient(52% 46% at 52% 0%, rgba(255, 255, 255, 0.40), transparent 60%), /* the beige violet arm reads the --aurora-accent-light channel first (a feature whose dark accent sits too deep for cream may lift its light arm alone — the licensing bronze), falling back to the SAME shared --aurora-accent seam (its own muted violet fallback + this arm's calmer alphas keep the beige register) */ radial-gradient(62% 58% at 72% 18%, rgba(var(--aurora-accent-light, var(--aurora-accent, 147, 111, 180)), 0.10), rgba(var(--aurora-accent-light, var(--aurora-accent, 147, 111, 180)), 0.03) 44%, transparent 72%), radial-gradient(86% 84% at 98% 0%, rgba(var(--aurora-accent-light, var(--aurora-accent, 147, 111, 180)), 0.16), rgba(var(--aurora-accent-light, var(--aurora-accent, 147, 111, 180)), 0.05) 42%, transparent 72%), linear-gradient(167deg, #f3ede1 0%, var(--navy) 32%, var(--navy-deep) 74%, var(--navy) 100%); --bg-spotlight: radial-gradient(75% 65% at 70% 24%, rgba(164, 118, 34, 0.14), rgba(164, 118, 34, 0.05) 34%, transparent 66%), radial-gradient(90% 50% at 50% 118%, rgba(164, 118, 34, 0.08), transparent 70%), linear-gradient(180deg, #f0ead9 0%, var(--navy-deep) 45%, #ddd2bc 100%); --bg-dawn: radial-gradient(120% 48% at 50% 116%, rgba(240, 178, 87, 0.40), transparent 70%), radial-gradient(40% 30% at 84% 8%, rgba(255, 255, 255, 0.45), transparent 70%), linear-gradient(179deg, #f5f0e8 0%, #f0e9d8 42%, #ecdfc2 70%, #e7cf9d 89%, #e2c07e 100%); --bg-glass-tint: linear-gradient(135deg, rgba(92, 74, 50, 0.08), rgba(26, 74, 122, 0.04) 60%, transparent); /* ---- Focus ---- (the dark twin documents the roles; --focus-edge is the ring colour) ALPHA 0.85, not the 0.55 this theme carried: measured on rendered pixels, the 0.55 ring composited to 2.33–2.45:1 against the beige page and raised surfaces, below DESIGN.md §10's ≥3:1 floor for the focus indicator, on the one indicator IS 5568 makes statutory. At 0.85 the same accent measures ≥3:1 on every beige surface. (The dark twin measures 5.4–6.5:1 at 0.7 and is unchanged.) */ --focus-edge: rgba(92, 74, 50, 0.85); --focus-ring: 0 0 0 3px var(--focus-edge); /* --focus-ring-lit is NOT re-declared here: the :root composition var(--focus-ring), var(--glow-gold) re-resolves against this arm's own two tokens (custom properties substitute at computed-value time), so this theme's lit ring follows automatically. */ } /* ============================================================================ THE COMMUNITY GRADIENT LIBRARY (the additional-gradients reference, the deck's material language; the §2 community glass family's ground wardrobe). Six grounds per theme: day/night are the LANDED defaults (--bg-community's own values, named so the picker dots can wear them); the other five per theme are member-pickable re-skins. The `cgrad` preference cookie stamps `cg-` root classes (base.html, the a11y allow-list grammar); each override re-aims --bg-community INSIDE its own theme only, so a stale other-theme key is inert, and never inside a11y-contrast (that arm's --bg-community: none pin outranks a preference). Constants are background-IMAGE lists (the dot under-fill stays --navy). ========================================================================== */ :root { /* light: sky→sand (the operator's breathe-through arm, re-dialed +15% brighter: 0.45 → 0.52 stops, the radial glow 0.27 → 0.31) */ --cg-day: radial-gradient(1300px 620px at 50% 112%, rgba(255, 205, 135, 0.31), transparent 72%), linear-gradient(180deg, rgba(140, 192, 238, 0.52) 0%, rgba(180, 213, 242, 0.52) 28%, rgba(220, 227, 232, 0.52) 54%, rgba(240, 227, 203, 0.52) 80%, rgba(247, 239, 222, 0.52) 100%); /* light: rose→peach */ --cg-dawn: radial-gradient(1300px 620px at 50% 112%, rgba(255, 186, 150, 0.55), transparent 72%), linear-gradient(180deg, #c8a8d8 0%, #e0b8ce 28%, #f0cfc8 54%, #f8dec4 80%, #fceedd 100%); /* light: sea green→cream */ --cg-mint: radial-gradient(1300px 620px at 50% 112%, rgba(214, 236, 190, 0.55), transparent 72%), linear-gradient(180deg, #7ec3b8 0%, #a6d7cd 28%, #cfe6dc 54%, #e6edd6 80%, #f5f3e6 100%); /* light: periwinkle→blush */ --cg-lilac: radial-gradient(1300px 620px at 50% 112%, rgba(238, 196, 214, 0.55), transparent 72%), linear-gradient(180deg, #9aa8e4 0%, #b8bdec 28%, #d6cfec 54%, #ebd9e4 80%, #f8edf2 100%); /* light: clay→bone */ --cg-sand: radial-gradient(1300px 620px at 50% 112%, rgba(232, 196, 154, 0.55), transparent 72%), linear-gradient(180deg, #d89a78 0%, #e4b294 28%, #edcbae 54%, #f2dec6 80%, #f9f0e2 100%); /* light: ice blue→pale grey */ --cg-glacier: radial-gradient(1300px 620px at 50% 112%, rgba(198, 228, 236, 0.55), transparent 72%), linear-gradient(180deg, #7fb4ce 0%, #a4cbdd 28%, #c8dde6 54%, #dee8ec 80%, #f0f5f7 100%); /* dark: the navy deck ground (= the landed dark default) */ --cg-night: radial-gradient(1400px 700px at 50% 116%, rgba(70, 112, 168, 0.22), transparent 72%), linear-gradient(180deg, #0c1424 0%, #101a2d 34%, #152238 62%, #1a2942 84%, #1f3050 100%); /* dark: deep violet */ --cg-plum: radial-gradient(1400px 700px at 50% 116%, rgba(140, 96, 172, 0.22), transparent 72%), linear-gradient(180deg, #16101f 0%, #1d1529 34%, #251c34 62%, #2d2340 84%, #362b4c 100%); /* dark: deep green */ --cg-forest: radial-gradient(1400px 700px at 50% 116%, rgba(88, 152, 118, 0.22), transparent 72%), linear-gradient(180deg, #0a1712 0%, #0e1d18 34%, #13261f 62%, #182e26 84%, #1e382e 100%); /* dark: warm oxblood */ --cg-ember: radial-gradient(1400px 700px at 50% 116%, rgba(186, 106, 78, 0.22), transparent 72%), linear-gradient(180deg, #1a1012 0%, #221518 34%, #2b1b1d 62%, #342124 84%, #40292b 100%); /* dark: neutral graphite */ --cg-slate: radial-gradient(1400px 700px at 50% 116%, rgba(140, 152, 168, 0.18), transparent 72%), linear-gradient(180deg, #121417 0%, #171a1e 34%, #1d2126 62%, #23282e 84%, #2b3138 100%); /* dark: deep teal */ --cg-abyss: radial-gradient(1400px 700px at 50% 116%, rgba(72, 148, 158, 0.22), transparent 72%), linear-gradient(180deg, #08161a 0%, #0c1d22 34%, #10262c 62%, #152f36 84%, #1b3a42 100%); /* THE PER-THEME VISIBILITY SWITCH, the two-theme law's one escape hatch: a theme class selects HERE alone, so any consumer that must ship both arms and reveal one (the gradient picker's two sets; the app mark's two plates, _macros.html logo_mark) rides these tokens instead of selecting .theme-beige itself. */ --theme-light-only: none; --theme-dark-only: block; /* THE GROUND AXIS, the same switch for "is a gradient atmosphere actually painting": the app mark wears its plate on a FLAT ground and bare ink on a gradient one (_macros.html logo_mark). Declared HERE and flipped by the two blocks that pin --bg-community: none (מינימליסטי + a11y-contrast), so the flatten condition keeps ONE home and a consumer never restates those guards. */ --ground-flat-only: none; --ground-gradient-only: contents; } :root.theme-beige { --theme-light-only: block; --theme-dark-only: none; } /* the five light re-skins: beige-scoped, contrast-guarded. Each key also states its TINT (its radial-glow signature): the chrome-accent recipes below mix over it. */ :root.theme-beige.cg-dawn:not(.a11y-contrast) { --bg-community: var(--cg-dawn); --cg-tint: #ffba96; } :root.theme-beige.cg-mint:not(.a11y-contrast) { --bg-community: var(--cg-mint); --cg-tint: #d6ecbe; } :root.theme-beige.cg-lilac:not(.a11y-contrast) { --bg-community: var(--cg-lilac); --cg-tint: #eec4d6; } :root.theme-beige.cg-sand:not(.a11y-contrast) { --bg-community: var(--cg-sand); --cg-tint: #e8c49a; } :root.theme-beige.cg-glacier:not(.a11y-contrast) { --bg-community: var(--cg-glacier); --cg-tint: #c6e4ec; } /* the five dark re-skins: dark-scoped (a light-theme root keeps day's arm), contrast-guarded */ :root.cg-plum:not(.theme-beige, .a11y-contrast) { --bg-community: var(--cg-plum); --cg-tint: #8c60ac; } :root.cg-forest:not(.theme-beige, .a11y-contrast) { --bg-community: var(--cg-forest); --cg-tint: #589876; } :root.cg-ember:not(.theme-beige, .a11y-contrast) { --bg-community: var(--cg-ember); --cg-tint: #ba6a4e; } :root.cg-slate:not(.theme-beige, .a11y-contrast) { --bg-community: var(--cg-slate); --cg-tint: #8c98a8; } :root.cg-abyss:not(.theme-beige, .a11y-contrast) { --bg-community: var(--cg-abyss); --cg-tint: #48949e; } /* THE MINIMALIST GROUND (the picker's מינימליסטי row, one key per theme slot): the SAVED DEFAULT, the app's own materials with NO gradient atmosphere (beige + brown on light, navy + gold on dark) and the DEFAULT element colors (it opts out of the light-ground ink arm below by key). The degrade-arm shape, here CHOSEN rather than degraded; ladder vars re-resolve per theme, so ONE block serves both arms. */ :root.theme-beige.cg-minimal-light:not(.a11y-contrast), :root.cg-minimal-dark:not(.theme-beige, .a11y-contrast) { --bg-community: none; --ground-flat-only: contents; /* no atmosphere: the mark keeps its plate */ --ground-gradient-only: none; --glass-post: var(--navy-2); --glass-post-border: var(--hairline); --glass-post-shadow: none; --glass-post-shadow-hover: none; --glass-post-blur: none; --glass-post-sheen: none; --glass-chip-stroke: var(--hairline); } /* THE COMMUNITY ELEMENT FAMILY (the mirrored-contrast arms, operator-ruled): main.community-glass REDIRECTS the shared gold accent family to this --cg-e-* namespace (community.css owns the redirect), so ONE token block re-tones EVERY element on the community surfaces while the chrome outside
keeps the platform gold. Defaults are IDENTITY (substitution happens at the DECLARING element, so var(--gold) here resolves to the true gold BEFORE the subtree redirect: no reference cycle, zero rendered change where no arm matches). A picked LIGHT ground reads BLACK ink + liquid glass; a picked DARK ground reads WHITE + liquid glass; מינימליסטי and a11y-contrast OPT OUT (the saved default / the statutory mode keep gold + brown). */ :root { /* the deck ink + frost ladders (the additional-gradients reference card inks) */ --cg-ink: #16202c; --cg-ink-2: #2c3035; --cg-ink-deep: #0e141c; --cg-paper: #f2f6fc; --cg-frost: #ffffff; --cg-coal: #141414; /* ACHROMATIC near-black: the dark arm's pane/on-fill neutral (the deck inks carry a BLUE undertone that read as tint on warm grounds, operator-caught) */ /* identity defaults */ --cg-e-gold: var(--gold); --cg-e-gold-bright: var(--gold-bright); --cg-e-grad-gold: var(--grad-gold); --cg-e-grad-gold-fill: var(--grad-gold-fill); --cg-e-on-accent: var(--on-accent); --cg-e-mix-gold-45: var(--mix-gold-45); --cg-e-mix-goldbright-40: var(--mix-goldbright-40); --cg-e-mix-goldbright-45: var(--mix-goldbright-45); --cg-e-mix-goldbright-55: var(--mix-goldbright-55); --cg-e-glow-gold: var(--glow-gold); --cg-e-glow-key: var(--glow-key); /* the FOCUS family joins the arms (operator: the platform gold/brown focus strokes read as mode ARTIFACTS on the gradient grounds — the composer, the group create, the comment bar). Identity = the statutory platform ring; the arms re-voice the edge to ink/frost (≥3:1 on their grounds) and calm the lit ring's gold tails. */ --cg-e-focus-edge: var(--focus-edge); --cg-focus-ring-lit: var(--focus-ring-lit); /* the groups-create LIVE PREVIEW slab (its landed ladder seat, re-toned by the arms) */ --cg-preview-fill: var(--navy-3); --cg-preview-stroke: var(--navy-4); /* the MUTED text tier + the seen-story ring join the arms (the slate family reads LIGHT BLUE on dark / warm beige on light, operator-caught; under an arm the whole hierarchy rides ALPHA over one ink/frost, never a tinted ladder) */ --cg-e-muted: var(--slate-on-dark); --cg-e-muted-bright: var(--slate-on-dark-bright); --cg-e-muted-soft: var(--slate-on-dark-soft); --cg-e-ring-seen: var(--status-ring-seen); /* the separators + the native-select option rows (hairlines read BLUE on dark / brown on light; a popup sheet must be a NEUTRAL ink/frost, never a navy slab) */ --cg-e-hairline: var(--hairline); --cg-e-hairline-soft: var(--cream-hairline); --cg-e-pop-bg: var(--navy-2); --cg-e-pop-ink: var(--white); --cg-pop-field: var(--navy); /* the dialog detail field's seat (the landed form navy) */ --cg-outline-fill: var(--cream); /* the dialog's quiet key (ביטול): the landed cream fill; the arms go TRANSPARENT on the pop pane */ /* the liquid-glass CTA (the new-posts pill): the landed navy-3 film pill by default */ --cg-cta-film: color-mix(in srgb, var(--navy-3) 88%, transparent); --cg-cta-ink: var(--gold-bright); --cg-cta-blur: blur(8px); /* the מינימליסטי dot's heart: the TRUE theme accent, computed HERE at root so the picker's preview never re-tones under the subtree redirect */ --cg-minimal-heart: var(--gold-bright); /* THE CHROME TINT (the QoL pass): on the community surfaces the active קהילה tab + the header count discs trade the mode gold for the arm ink/frost, TINTED by the active ground (--cg-tint, stated per key above; the arms state day/night). Identity = the landed gold recipes, so מינימליסטי, a11y-contrast and every other page keep the platform chrome untouched (since the dock redesign that landed grammar is the FILLED gold pod + on-accent ink, no glow — the identity trio mirrors it). */ --cg-tint: var(--gold); --cg-nav-accent: var(--gold-bright); --cg-nav-glow: var(--drop-glow-gold); --cg-badge-fill: var(--grad-gold-fill); --cg-badge-ink: var(--on-accent); /* the page-emblem WINDOW (the groups/notifications hero discs): the ACTIVE ground itself (--bg-community resolves per state, so מינימליסטי and a11y-contrast get `none` and the landed champagne-over-ladder disc shows through) */ --cg-emblem-window: var(--bg-community); /* the search well's SELECTION voice + the CTA hover: the landed gold recipes by default; the arms swap the halo for the FULL ground and drop the hover BELOW the key (the under-line itself is retired on this skin, all states) */ --cg-well-glow: var(--focus-ring); --cg-well-halo: none; --cg-btn-hover: var(--ring-shine), var(--glow-gold); --cg-badge-ring: transparent; } /* the LIGHT arm: BLACK ink + liquid glass on every picked light ground (all six; יום IS the beige default state, per the operator ruling) */ :root.theme-beige:not(.cg-minimal-light, .a11y-contrast) { --cg-e-gold: var(--cg-ink-2); --cg-e-gold-bright: var(--cg-ink); --cg-e-grad-gold: linear-gradient(120deg, var(--cg-ink-2) 0%, var(--cg-ink) 55%, var(--cg-ink-deep) 100%); --cg-e-grad-gold-fill: linear-gradient(180deg, #232b34, #141b23); --cg-e-on-accent: var(--cg-paper); --cg-e-mix-gold-45: color-mix(in srgb, var(--cg-ink-2) 45%, transparent); --cg-e-mix-goldbright-40: color-mix(in srgb, var(--cg-ink) 40%, transparent); --cg-e-mix-goldbright-45: color-mix(in srgb, var(--cg-ink) 45%, transparent); --cg-e-mix-goldbright-55: color-mix(in srgb, var(--cg-ink) 55%, transparent); /* the hover halos, LIGHT-gradient arm: ink on a bright sky is a DEPTH cue, not a light, so this arm climbs only to where the halo still reads clean — past ~60% it silts up (live A/B). The frost twin below has the whole night ground for headroom and goes far higher. Reach is fixed in both arms; only the mix moves. */ --cg-e-glow-gold: 0 0 24px color-mix(in srgb, var(--cg-ink) 45%, transparent); --cg-e-glow-key: 0 0 18px color-mix(in srgb, var(--cg-ink) 55%, transparent); --glass-chip-stroke: color-mix(in srgb, var(--cg-ink) 62%, transparent); --cg-e-focus-edge: color-mix(in srgb, var(--cg-ink) 78%, transparent); /* SELF-CONTAINED (never var(--focus-ring): a :root-declared composition bakes the platform gold at substitution time and the arm would inherit it pre-resolved) */ --cg-focus-ring-lit: 0 0 0 3px color-mix(in srgb, var(--cg-ink) 78%, transparent); --cg-preview-fill: color-mix(in srgb, var(--cg-ink) 7%, transparent); --cg-preview-stroke: color-mix(in srgb, var(--cg-ink) 26%, transparent); /* the chrome tint, light arm: ink chrome + the ground's own accent (day's SKY stop, its leading identity: the sand glow read as the platform GOLD, so the tinted chrome looked un-applied, operator-caught; a picked key re-states --cg-tint, and every derived mix re-resolves with it) */ --cg-tint: #8cc0ee; --cg-nav-accent: var(--cg-ink); /* the dock goes BORDER-LESS LIQUID GLASS on every gradient ground of this theme — the day default included (operator); מינימליסטי and a11y-contrast are already outside this scope and keep the opaque dock. The recipe auto-themes. */ --cg-dock-bg: var(--glass-nav-film) padding-box; --cg-dock-border-w: 0px; --cg-dock-blur: var(--glass-nav-blur); --cg-dock-shadow: var(--glass-edge), inset 0 -1px 0 var(--mix-white-12), var(--glass-shadow); --cg-nav-glow: 0 0 10px color-mix(in srgb, var(--cg-tint) 88%, transparent); /* the FULL ground fills the count discs, the well halo, and the CTA lip (the operator's call: the actual gradient, never a color from it); the arm ring keeps the tiny badge legible over any ground */ --cg-badge-fill: var(--bg-community); --cg-badge-ink: var(--cg-coal); --cg-badge-ring: color-mix(in srgb, var(--cg-ink) 45%, transparent); --cg-well-glow: none; --cg-well-halo: var(--bg-community); /* the hover lives BELOW the key (a top shine-arc read wrong over a gradient ground, operator-caught) */ --cg-btn-hover: 0 7px 20px color-mix(in srgb, var(--cg-tint) 55%, transparent); --cg-e-muted: color-mix(in srgb, var(--cg-ink) 64%, transparent); --cg-e-muted-bright: color-mix(in srgb, var(--cg-ink) 80%, transparent); --cg-e-muted-soft: color-mix(in srgb, var(--cg-ink) 70%, transparent); --cg-e-ring-seen: color-mix(in srgb, var(--cg-ink) 34%, transparent); --cg-e-hairline: color-mix(in srgb, var(--cg-ink) 26%, transparent); --cg-e-hairline-soft: color-mix(in srgb, var(--cg-ink) 16%, transparent); --cg-e-pop-bg: var(--cg-frost); --cg-e-pop-ink: var(--cg-ink); --cg-pop-field: color-mix(in srgb, var(--cg-ink) 7%, transparent); --cg-outline-fill: transparent; --cg-cta-film: color-mix(in srgb, var(--cg-ink-deep) 66%, transparent); --cg-cta-ink: var(--cg-paper); --cg-cta-blur: var(--glass-nav-blur); } /* the DARK arm: WHITE + liquid glass on every picked dark ground (the mirror; לילה IS the dark default state). TRUE white only: hierarchy rides ALPHA over --cg-frost, never a gray-blue ladder (the frost-2/frost-3 tail stops read SILVER on the title, operator-caught). The CTA is the black-glass pill's honest mirror: a solid-white glass film with INK text (white text vanished on it). */ :root:not(.theme-beige, .cg-minimal-dark, .a11y-contrast) { --cg-e-gold: var(--cg-frost); --cg-e-gold-bright: var(--cg-frost); --cg-e-grad-gold: linear-gradient(var(--cg-frost), var(--cg-frost)); --cg-e-grad-gold-fill: linear-gradient(180deg, var(--cg-frost), var(--cg-paper)); --cg-e-on-accent: var(--cg-coal); --cg-e-mix-gold-45: color-mix(in srgb, var(--cg-frost) 45%, transparent); --cg-e-mix-goldbright-40: color-mix(in srgb, var(--cg-frost) 40%, transparent); --cg-e-mix-goldbright-45: color-mix(in srgb, var(--cg-frost) 45%, transparent); --cg-e-mix-goldbright-55: color-mix(in srgb, var(--cg-frost) 55%, transparent); /* the hover halos, NIGHT-gradient arm: frost over a deep ground is a real LIGHT, so the mix runs high — the landed 30/36% haze was invisible against the gradient's own luminance (live A/B). Reach fixed; only the mix moves. */ --cg-e-glow-gold: 0 0 24px color-mix(in srgb, var(--cg-frost) 70%, transparent); --cg-e-glow-key: 0 0 18px color-mix(in srgb, var(--cg-frost) 80%, transparent); --glass-chip-stroke: color-mix(in srgb, var(--cg-frost) 72%, transparent); --cg-e-focus-edge: color-mix(in srgb, var(--cg-frost) 85%, transparent); /* self-contained, the light arm's reasoning */ --cg-focus-ring-lit: 0 0 0 3px color-mix(in srgb, var(--cg-frost) 85%, transparent); --cg-preview-fill: color-mix(in srgb, var(--cg-frost) 10%, transparent); --cg-preview-stroke: color-mix(in srgb, var(--cg-frost) 28%, transparent); /* the chrome tint, dark arm: frost chrome + the ground's glow (night's navy default); the count disc DEEPENS the tint toward coal so its frost numerals hold contrast on every key (slate is the palest glow) */ --cg-tint: #4670a8; --cg-nav-accent: var(--cg-frost); /* the glass dock, dark-arm twin (the night default included; see the light arm's note) */ --cg-dock-bg: var(--glass-nav-film) padding-box; --cg-dock-border-w: 0px; --cg-dock-blur: var(--glass-nav-blur); --cg-dock-shadow: var(--glass-edge), inset 0 -1px 0 var(--mix-white-12), var(--glass-shadow); --cg-nav-glow: 0 0 10px color-mix(in srgb, var(--cg-tint) 92%, transparent); /* the FULL ground, dark twin: frost ring + frost numerals keep the badge legible over the deep gradients */ --cg-badge-fill: var(--bg-community); --cg-badge-ink: var(--cg-frost); --cg-badge-ring: color-mix(in srgb, var(--cg-frost) 55%, transparent); --cg-well-glow: none; --cg-well-halo: var(--bg-community); /* the hover lives BELOW the key (a top shine-arc read wrong over a gradient ground, operator-caught) */ --cg-btn-hover: 0 7px 20px color-mix(in srgb, var(--cg-tint) 55%, transparent); --cg-cta-ink: var(--cg-coal); --cg-e-muted: color-mix(in srgb, var(--cg-frost) 66%, transparent); --cg-e-muted-bright: color-mix(in srgb, var(--cg-frost) 82%, transparent); --cg-e-muted-soft: color-mix(in srgb, var(--cg-frost) 72%, transparent); --cg-e-ring-seen: color-mix(in srgb, var(--cg-frost) 38%, transparent); --cg-e-hairline: color-mix(in srgb, var(--cg-frost) 28%, transparent); --cg-e-hairline-soft: color-mix(in srgb, var(--cg-frost) 18%, transparent); --cg-e-pop-bg: var(--cg-coal); --cg-e-pop-ink: var(--cg-frost); --cg-pop-field: color-mix(in srgb, var(--cg-frost) 10%, transparent); --cg-outline-fill: transparent; --cg-cta-film: color-mix(in srgb, var(--cg-frost) 82%, transparent); --cg-cta-blur: var(--glass-nav-blur); } /* ============================================================================ THE ACCESSIBILITY TOKEN OVERRIDES (IS 5568 / WCAG AA, the a11y-menu build; the structural effects live in base.css). These are the TOKEN-level effects: they must compose with BOTH themes, so they live here beside them (the one sanctioned home for theme-class selectors). ========================================================================== */ /* ---- readable font (dyslexia/cognitive): the plain-sans swap Israeli menus ship as "גופן קריא": Arial-first (the conventional readable pick), the whole type system follows through the token. ---- */ :root.a11y-font { --font-ui: "Arial", "Segoe UI", system-ui, sans-serif; } /* ---- motion off: the CLASS twin of the reduced-motion kill switch below (WCAG 2.2.2 pause/stop/hide + 2.3.3), an explicit user choice in the menu, for members whose OS preference isn't set. ---- */ :root.a11y-motion { --motion-press: 1ms; --motion-micro: 1ms; --motion-state: 1ms; --motion-swap: 1ms; --motion-page: 1ms; --motion-reveal: 1ms; --motion-bloom: 1ms; --motion-celebrate: 1ms; --motion-morph: 1ms; --motion-ambience: 1ms; --stagger: 0ms; } /* ---- HIGH CONTRAST (WCAG 1.4.6 AAA-tier ON DEMAND, a real MODE, not a nudge; reworked after the owner's live catch: the first cut only raised muted tiers, imperceptible outside the menu): the WHOLE surface ladder + text + accent re-preset per theme. Dark = bright-yellow-on-near- black (the classic Israeli ניגודיות גבוהה); beige = near-black-on-white. Every pair ≥7:1 body / accent ≥10:1 on its surfaces. ---- */ :root.a11y-contrast { /* the community liquid-glass surface flattens with the atmosphere (the dashboard-spots precedent): the gradient ground yields to the re-pinned floor and the glass card becomes a solid ladder card with a real border; translucency has no place in a statutory-contrast mode. Ladder-var values re-resolve per theme, so ONE pin serves both arms. */ --bg-community: none; --ground-flat-only: contents; /* no atmosphere: the mark keeps its plate */ --ground-gradient-only: none; --glass-post: var(--navy-2); --glass-post-border: var(--hairline); --glass-post-shadow: none; --glass-post-shadow-hover: none; --glass-post-blur: none; --glass-post-sheen: none; --glass-chip-stroke: var(--hairline); /* THE DECORATIVE GROUNDS FLATTEN WITH THE ATMOSPHERE (the --bg-community precedent, extended — after the graphite rebuild these hero/mood recipes were the last blue carriers the operator saw inside this mode): a statutory-contrast page is a FLAT ladder surface — hero/mood art yields to the floor, band/veil washes go off, gold stays in strokes/text/keys. Ladder vars re-resolve per theme, ONE pin per token serves both arms; the flat two-stop form stays a valid for background-image consumers. */ --bg-hero: linear-gradient(var(--navy), var(--navy)); --bg-hero-lit: linear-gradient(var(--navy), var(--navy)); --bg-hero-landing: linear-gradient(var(--navy), var(--navy)); --bg-hero-signature: linear-gradient(var(--navy), var(--navy)); --bg-aurora: linear-gradient(var(--navy), var(--navy)); --bg-aurora-hero: linear-gradient(var(--navy), var(--navy)); --bg-spotlight: linear-gradient(var(--navy), var(--navy)); --bg-dawn: linear-gradient(var(--navy), var(--navy)); --bg-gold-veil: linear-gradient(var(--navy), var(--navy)); --bg-depth: linear-gradient(var(--navy), var(--navy)); --bg-lift: linear-gradient(var(--navy), var(--navy)); --bg-warm: linear-gradient(var(--navy), var(--navy)); --bg-cream: linear-gradient(var(--cream), var(--cream)); --bg-cream-mesh: linear-gradient(var(--cream), var(--cream)); --bg-section-dark: none; --bg-glass-tint: none; --halo-gold: none; --glass-bloom: none; /* the GRAPHITE contrast ladder (following the graphite rebuild: the arm's near-blacks were still the retired navy-blue family; the statutory identity stays bright-yellow-on-near-black, now on dead-neutral grays — every pair re-measured ≥7:1 body / ≥10:1 accent on its surfaces) */ --navy: #040404; --navy-deep: #000000; --navy-2: #101010; --navy-3: #1a1a1a; --navy-4: #262626; --navy-rich: #1a1a1a; --cream: #080808; --cream-2: #101010; --white: #ffffff; --ink: #ffffff; --slate: #f2f2f2; --slate-on-dark: #f2f2f2; --hairline: #bdbdbd; --cream-hairline: #9e9e9e; --gold: #d9a72e; --gold-bright: #ffe066; --gold-deep: #ffe066; --grad-gold: linear-gradient(135deg, #fff0a8, #ffd24d); --grad-gold-fill: linear-gradient(180deg, #ffe066, #f5bd2e); --on-accent: #000000; --blue: #9ec7ff; --success: #4fe3a8; --attention: #ffc76e; --danger: #ff9599; --danger-fill: #d21f27; --state-hover: color-mix(in srgb, var(--white) 14%, transparent); --state-press: color-mix(in srgb, var(--white) 20%, transparent); } :root.theme-beige.a11y-contrast { --navy: #f3f1ec; --navy-deep: #eceae3; --navy-2: #ebe8e2; --navy-3: #e0ddd5; --navy-4: #d5d1c8; --navy-rich: #e6e3dc; --cream: #ffffff; --cream-2: #ebe8e2; --white: #111111; --ink: #111111; --slate: #262626; --slate-on-dark: #262626; --hairline: #57503f; --cream-hairline: #7a7360; --gold: #4a3a1c; --gold-bright: #3a2c14; --gold-deep: #3a2c14; --grad-gold: linear-gradient(135deg, #6b573d, #332818); --grad-gold-fill: linear-gradient(180deg, #4a3a26, #2c2114); --on-accent: #ffffff; --blue: #0b3866; --success: #0c4f36; --attention: #5c3d00; --danger: #8f1f24; --danger-fill: #8f1f24; --state-hover: color-mix(in srgb, var(--white) 10%, transparent); --state-press: color-mix(in srgb, var(--white) 16%, transparent); } /* THE THEME CROSSFADE retired: the switch is a DISSOLVE now (app.js crossfadeVeil), so the UI must change beneath an opaque veil rather than crossfade its own colours. A per-element colour transition made every element pass through an in-between tone, which the operator saw on the greeting's gradient-clipped name; --motion-theme still times the veil. */ /* ============================================================================ THE reduced-motion kill switch (DESIGN.md §8/§11): collapsing the TOKENS disarms every one-shot animation app-wide; --stagger goes to zero so nothing waits. Infinite/working indicators are additionally hard-disabled where they live (base.css). The scroll-reveal engine is separately media-gated (base.css) so reduced-motion and no-JS users simply see content, always. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion-press: 1ms; --motion-micro: 1ms; --motion-state: 1ms; --motion-swap: 1ms; --motion-page: 1ms; --motion-reveal: 1ms; --motion-bloom: 1ms; --motion-celebrate: 1ms; --motion-morph: 1ms; --motion-ambience: 1ms; --stagger: 0ms; } } /* ============================================================================ THE COMMUNITY GLASS DEGRADE ARMS (the §2 law: translucency is a PREFERENCE, never a requirement). ONE token-level pin per arm covers EVERY --glass-post consumer (cards · pills · the field select · the members fold · the composer dialogs), the suite-walker-beats-per-surface-discipline philosophy applied at the token layer: no backdrop-filter support, or a reduced-transparency preference, drops every pane to the opaque ladder tile (theme-aware through --navy-2/--hairline; the a11y-contrast arm above pins the same shape). ========================================================================== */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { :root { --glass-post: var(--navy-2); --glass-post-border: var(--hairline); --glass-post-blur: none; --glass-post-sheen: none; } } @media (prefers-reduced-transparency: reduce) { :root { --glass-post: var(--navy-2); --glass-post-border: var(--hairline); --glass-post-blur: none; --glass-post-sheen: none; } }