/* ========================================================================== Great Trek -- design tokens Every other stylesheet derives from this file. Direction: DRAFTING, NOT BROADSHEET. The reference is an architect's presentation set and a surveyor's plan -- strict grid, one hairline system, generous margins, large calm images, near-zero radius, one hot accent used as a marker. ========================================================================== */ :root { /* ---- Palette: "Dawn Horizon" ----------------------------------------- Deliberately not the South African flag. No green/gold/red combination anywhere in this project. */ --ink: #0B0F1A; --ink-raise: #131A2B; /* elevated dark panels, the tally bar */ --ink-sink: #060910; /* footer, the form backdrop */ --bone: #F7F6F3; --bone-sink: #EDEBE4; /* light cards, table zebra */ --indigo: #1E2A5A; --indigo-lift: #2A3A78; /* chart bars, hover */ --sunrise: #FF5A36; /* accent on DARK surfaces only, plus fills */ --sunrise-deep: #C4331A; /* accent TEXT on LIGHT surfaces */ /* Measured contrast ratios. Do not "fix" these later -- they are why the highlight rule inverts with the surface (see .hl in base.css): sunrise on ink 6.11:1 OK for text sunrise on indigo 4.36:1 OK for large text and numerals sunrise on bone 2.89:1 FAILS -- never sunrise text on bone sunrise-deep on bone 5.07:1 OK for text indigo on bone 12.58:1 OK */ /* ---- Type ------------------------------------------------------------- Montserrat is self-hosted (see base.css). Not Google Fonts: it keeps the CSP tight, removes a render-blocking third-party round trip, and means /privacy can truthfully say no other company sees who visits. */ --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-black: 800; --fs-display: clamp(2.1rem, 1.15rem + 4.60vw, 5.75rem); --fs-h1: clamp(1.95rem, 1.30rem + 3.20vw, 4.25rem); --fs-h2: clamp(1.55rem, 1.10rem + 2.20vw, 3.00rem); --fs-h3: clamp(1.25rem, 1.05rem + 1.00vw, 1.75rem); --fs-lead: clamp(1.125rem, 1.03rem + 0.45vw, 1.40rem); --fs-body: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); --fs-small: 0.875rem; --fs-micro: 0.75rem; --fs-stat: clamp(2.20rem, 1.10rem + 5.40vw, 7.00rem); /* Montserrat at 800 sprawls without hard negative tracking and tight leading; its wide even letterforms also read poorly in long lines, hence the 68ch measure below. */ --lh-display: 0.94; --lh-head: 1.04; --lh-body: 1.62; --tr-display: -0.035em; --tr-head: -0.022em; --tr-body: 0em; --tr-micro: 0.14em; /* ---- Space (4px base, musical at the top end) ------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem; --section-y: clamp(3rem, 1.5rem + 7vw, 10rem); --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); /* The "wide" bleed band either side of the content column. ZERO by default and only widened once there is room. As a fixed 6rem it claimed 96px per side on a 375px phone, leaving the content column about 143px wide. A media query is used rather than a clamp() with inline arithmetic, which did not resolve reliably here. */ --bleed-band: 0rem; /* ---- Measure and widths ----------------------------------------------- */ --w-text: 68ch; --w-narrow: 44rem; --w-content: 76rem; --w-wide: 92rem; /* ---- Geometry: square, by intent -------------------------------------- Plots are rectangular; people are not. --r-human carries that idea, but at LABEL scale: the role chip inside each member row, not the whole card. Pill-shaped member cards were tried and abandoned -- in an auto-fill grid they forced ~15rem columns, so a long occupation name wrapped three ways while most of the card sat empty. Rows read faster and give the label its full width. */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-human: 999px; --hair: 1px; /* ---- Elevation --------------------------------------------------------- */ --shadow-card: 0 1px 2px rgb(11 15 26 / 0.06), 0 12px 28px -14px rgb(11 15 26 / 0.16); --shadow-lift: 0 2px 4px rgb(11 15 26 / 0.08), 0 24px 48px -20px rgb(11 15 26 / 0.24); /* ---- Motion ------------------------------------------------------------ Entry and state change only. No ambient loops, no parallax, no floating shapes: the subject is a serious proposal and a page that fidgets undercuts it. */ --t-fast: 120ms; --t: 220ms; --t-slow: 420ms; --t-reveal: 700ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); } /* ========================================================================== Surface contexts ONE set of component CSS, THREE surfaces, each with an assigned MEANING -- not decorative stripes: BONE = reading (the default: argument, explanation, lists) INK = gravity (hero, the Dream, the enrolment form, footer) INDIGO = evidence (charts, the skills wall, the government band) That last one is the payoff of a two-audience site: an analyst learns within one scroll that indigo means data, and a family reader feels the seriousness without having to read a word about it. ========================================================================== */ [data-surface="bone"] { --surface: var(--bone); --surface-2: var(--bone-sink); --on-surface: var(--ink); --on-surface-dim: #4A5260; --rule: rgb(11 15 26 / 0.14); --rule-strong: rgb(11 15 26 / 0.28); --accent-text: var(--sunrise-deep); --accent-fill: var(--sunrise); --on-accent: var(--ink); } [data-surface="ink"] { --surface: var(--ink); --surface-2: var(--ink-raise); --on-surface: var(--bone); --on-surface-dim: #9AA3B4; --rule: rgb(247 246 243 / 0.16); --rule-strong: rgb(247 246 243 / 0.34); --accent-text: var(--sunrise); --accent-fill: var(--sunrise); --on-accent: var(--ink); } [data-surface="ink-sink"] { --surface: var(--ink-sink); --surface-2: var(--ink); --on-surface: var(--bone); --on-surface-dim: #8892A5; --rule: rgb(247 246 243 / 0.12); --rule-strong: rgb(247 246 243 / 0.28); --accent-text: var(--sunrise); --accent-fill: var(--sunrise); --on-accent: var(--ink); } [data-surface="indigo"] { --surface: var(--indigo); --surface-2: var(--indigo-lift); --on-surface: var(--bone); --on-surface-dim: #AEB7D2; --rule: rgb(247 246 243 / 0.20); --rule-strong: rgb(247 246 243 / 0.38); --accent-text: var(--sunrise); --accent-fill: var(--sunrise); --on-accent: var(--ink); } @media (min-width: 48rem) { :root { --bleed-band: 3rem; } } @media (min-width: 64rem) { :root { --bleed-band: 6rem; } }