/* ========================================================================== STRAND INTERGALACTIC — DESIGN TOKENS Single source of truth for color + type. Reference every value in the site by variable name (e.g. var(--cta-blue)) — never hard-code a hex value directly in a component. That's what keeps this file trustworthy. Two palette "moods" are included: Strand Colors 1 (Indigo, default) and Strand Colors 2 (Eggplant). Switch between them by adding data-theme="eggplant" to or — everything else inherits automatically. Do not duplicate the shared tokens into the eggplant block; only the values that differ are overridden there. ========================================================================== */ :root { /* ---- Core neutrals ---- */ --space-black: #050608; /* Nav bar / UI chrome sitting on the galaxy video */ --space-black-scrim: rgba(5, 6, 8, 0.8); /* Translucent nav overlay, 0.75–0.85 range */ --navy-ink: #0A0E1F; /* Module 1 + 4 + 6 backgrounds, Module 3 headline text, Record card bg */ --card-surface: #141A2E; /* Elevated card/panel fill on Navy or Indigo/Eggplant */ --paper: #EDEFF7; /* Module 3 background */ /* ---- Mood background (default = Indigo / Strand Colors 1) ---- */ --mood-dark: #131033; /* Module 2 + 5 background */ --mood-accent: #B674DC; /* Module 5 "For Rights Holders" eyebrow / dots / CTA outline */ /* ---- Whites & grays ---- */ --headline-white: #F5F6FA; /* Large reading content on dark backgrounds */ --pure-white: #FFFFFF; /* Small UI chrome: logo mark, filled-button labels, pill text */ --gray-on-dark: #9CA3B1; /* Nav, eyebrows, subheads, dividers/borders on dark backgrounds */ --gray-on-light: #5E6677; /* Same role as --gray-on-dark, but for use on --paper (contrast-corrected) */ /* ---- Blues ---- */ --headline-light-blue: #BFD7FF; /* Accent word within dark-bg headlines; Trust module "Cleared" node */ --cta-blue: #3B6FE0; /* Logo, primary CTA fills, Loop active-pill ring, Trust Gate rings/labels */ --cta-blue-hover: #274AAE; /* Button hover/active state */ --accent-blue-on-light: #2A4FC0; /* Accent word within light-bg (Paper) headlines */ /* ---- Categorical ramp: Loop steps + Record chart ---- */ --ramp-1: #74C0DC; /* 196° — Loop 01 License / Record Actor 1 */ --ramp-2: #749ADC; /* 218° — Loop 02 Create / Record Actor 2 */ --ramp-3: #7474DC; /* 240° — Loop 03 Attribute/ Record Background */ --ramp-4: #9374DC; /* 258° — Loop 04 Clear / Record Park bench */ --ramp-5: #B674DC; /* 278° — Loop 05 Monetize / Record Dog */ --flag-color: #DC9374; /* Record — Unattributed. Deliberately off-ramp: this is a warning, not a category. */ } /* ---- Strand Colors 2 (Eggplant mood) ---- */ [data-theme="eggplant"] { --mood-dark: #241A33; /* Module 2 + 5 background */ --mood-accent: #9970D5; /* Module 5 "For Rights Holders" accent — NOT the same value as Indigo's --mood-accent */ } /* ========================================================================== TYPOGRAPHY Font sizes below are the reference scale pulled from Figma. Treat them as the real working scale, not placeholders — line-height and letter-spacing percentages are meaningless without a size to compute against, so these anchor the whole type system. Adjust down for mobile breakpoints as needed; keep the same line-height/letter-spacing ratios. ========================================================================== */ :root { --font-display: 'Gabarito', sans-serif; /* Logo, H1–H3, Subheads, Body */ --font-mono: 'IBM Plex Mono', monospace; /* Nav, CTA, Eyebrow, Data/Labels */ /* Wordmark */ --logo-strand-size: 28px; --logo-strand-weight: 900; /* Gabarito Black */ --logo-strand-line-height: 149%; --logo-strand-letter-spacing: 0em; --logo-intergalactic-size: 25px; --logo-intergalactic-weight: 400; /* Gabarito Regular */ --logo-intergalactic-line-height: 149%; --logo-intergalactic-letter-spacing: 0em; /* UI / mono set */ --nav-size: 15px; --nav-weight: 400; --nav-line-height: 100%; --nav-letter-spacing: 0.12em; --cta-label-size: 16px; --cta-label-weight: 600; /* SemiBold */ --cta-label-line-height: 100%; --cta-label-letter-spacing: 0.08em; --eyebrow-size: 16px; --eyebrow-weight: 300; /* Light */ --eyebrow-line-height: 100%; --eyebrow-letter-spacing: 0.25em; --data-label-size: 16px; --data-label-weight: 400; --data-label-line-height: 100%; --data-label-letter-spacing: 0em; /* Display / content set */ --h1-size: 161px; --h1-line-height: 98%; --h1-letter-spacing: -0.02em; --h1-weight: 700; --h2-size: 75px; --h2-line-height: 100%; --h2-letter-spacing: -0.02em; --h2-weight: 700; --h3-size: 62px; --h3-line-height: 94%; --h3-letter-spacing: -0.02em; --h3-weight: 700; --subhead-size: 28px; --subhead-line-height: 100%; --subhead-letter-spacing: -0.02em; --subhead-weight: 700; /* Three-tier body system, largest to smallest. Confirmed. */ --body-1-size: 26px; --body-1-line-height: 149%; --body-1-letter-spacing: 0em; --body-1-weight: 400; --body-2-size: 23px; --body-2-line-height: 150%; --body-2-letter-spacing: 0em; --body-2-weight: 400; --body-3-size: 19px; --body-3-line-height: 150%; --body-3-letter-spacing: 0em; --body-3-weight: 400; } /* ========================================================================== WORDMARK — never wrap to two lines ========================================================================== */ .logo-lockup { display: flex; align-items: baseline; white-space: nowrap; flex-shrink: 0; /* prevents flex/grid parents from squeezing it into a wrap */ } .logo-lockup .logo-strand, .logo-lockup .logo-intergalactic { white-space: nowrap; } /* Decision: wordmark never wraps or shrinks. On narrow viewports the nav collapses to a hamburger instead, at whatever breakpoint the nav items would otherwise start crowding the wordmark. ⚠ BUILD GAP: the site does not currently have a hamburger/mobile nav at all. This needs to be built, not just styled — flag it to whoever's implementing as a required piece, not a nice-to-have, since the nowrap rule above depends on it existing. */