/* ===================================================================== THE CAPE MOUNTAIN COMPANY — Core Design Tokens Colours, type and base spacing. Import this everywhere. --------------------------------------------------------------------- Brand anchor: #134A26 (deep forest green — "Table Green") Complement: creamy off-white — "Cloud" Palette rooted in the Western Cape landscape: fynbos greens, sandstone, Atlantic sky/ocean, sunbird + protea for the fun layer. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap'); :root { /* --------------------------------------------------------------- 1. RAW PALETTE (the full ramp — reference for tooling) --------------------------------------------------------------- */ /* GREENS — primary. The mountain is the protagonist. */ --green-kloof: #0B2A17; /* darkest ravine green — text on cream, deep bg */ --green-table: #134A26; /* THE brand green — primary */ --green-pine: #1F5C34; /* hover / lifted surfaces on green */ --green-fynbos: #3C7A4E; /* mid green — links, accents on cream */ --green-sage: #8AA88E; /* muted desaturated — borders, quiet UI */ --green-mist: #DDE6D9; /* palest green — tinted surfaces */ /* CREAM & NEUTRALS — warm, sandstone-rooted. Never pure white. */ --cream-cloud: #F4EDDC; /* primary off-white complement — page bg */ --cream-linen: #ECE3CE; /* secondary surface / cards on cloud */ --sand-stone: #D8C4A0; /* sandstone — Table Mountain rock */ --sand-mid: #B7A581; /* mid sandy neutral — dividers on warm bg */ --rock-warm: #6E6450; /* warm taupe — secondary text on cream */ --char-warm: #262420; /* warm near-black — body text, UI ink */ --paper-true: #FBF7EE; /* lightest paper — input fields, popovers */ /* ACCENTS — the fun layer (v2): warm Cape earth. Used sparingly. */ --clay: #BC6B4C; /* sandstone clay — warm workhorse accent */ --clay-deep: #A0573B; --clay-tint: #E0A487; /* soft clay — backgrounds, illustration fills */ --rooibos: #C5503A; /* rooibos red — delight / "our pick" pop */ --rooibos-deep: #A8412E; --restio-gold: #C7A23E; /* dry-fynbos gold — sparing highlight */ --atlantic: #2E6E86; /* Atlantic sky/ocean — the "secret list" cool */ --atlantic-deep: #1F4E5F; /* legacy aliases → repointed to the earth set so old refs update */ --sunbird: var(--rooibos); --sunbird-deep: var(--rooibos-deep); --protea: var(--clay); /* --------------------------------------------------------------- 2. SEMANTIC COLOUR ROLES (use these in product, not raw names) --------------------------------------------------------------- */ --bg: var(--cream-cloud); /* default page background */ --bg-raised: var(--cream-linen); /* cards, raised panels */ --bg-input: var(--paper-true); /* fields, popovers */ --bg-inverse: var(--green-table); /* dark/green sections */ --bg-inverse-2: var(--green-kloof); /* deepest green sections */ --bg-tint: var(--green-mist); /* subtle green-tinted block */ --ink: var(--green-table); /* primary text on cream — Table Mountain green, not black */ --ink-2: var(--rock-warm); /* secondary text on cream */ --ink-3: #978B74; /* tertiary / captions on cream */ --ink-on-green: var(--cream-cloud); /* primary text on green */ --ink-on-green-2:#B7CBB6; /* secondary text on green */ --line: #DCCFB2; /* hairline divider on cream */ --line-strong: var(--sand-mid); /* stronger divider */ --line-on-green: rgba(244,237,220,.18);/* divider on green */ --brand: var(--green-fynbos); /* primary brand / CTA fill — Fynbos */ --brand-hover: #336B43; /* CTA hover — deeper fynbos */ --brand-press: var(--green-table); /* CTA active — Table green */ --link: var(--green-fynbos); /* inline links on cream */ --accent: var(--rooibos); /* fun-layer pop — delight / our pick */ --accent-warm: var(--clay); /* warm secondary accent */ --accent-gold: var(--restio-gold); /* sparing highlight */ --accent-cool: var(--atlantic); /* secret list / cartographic */ /* SEMANTIC STATUS — drawn from the landscape, never garish. NOTE: --error is a deep oxblood, kept browner/darker than the --rooibos accent so a "delight" pop never reads as an error. */ --success: #2F7D4F; --success-bg: #E2EFE4; --error: #8F3324; /* deep oxblood — honest warnings (Platteklip) */ --error-bg: #F3E1DB; --warning: #B8841C; /* deep amber */ --warning-bg: #F6EBD2; --info: var(--atlantic); --info-bg: #DEEBEF; /* Route grade colours (A=easy → C=scramble) — muted, landscape-rooted */ --grade-a: #3C7A4E; /* fynbos green */ --grade-b: #B0792A; /* sandstone ochre */ --grade-c: #A23E2F; /* muted clay */ /* --------------------------------------------------------------- 3. TYPOGRAPHY — a tight TWO-typeface system. That's the whole kit. Archivo : the workhorse — display, headlines, UI, AND data/labels. The cartographic feel of stats, coordinates and grades comes from UPPERCASE + wide tracking + tabular figures, not a separate mono face. Spectral : the serif — used sparingly for the reverent editorial voice (ledes, route stories, the secret list). Script : the logo art itself (cmc-wordmark*.png) — not a font. --------------------------------------------------------------- */ --font-display: 'Archivo', system-ui, -apple-system, sans-serif; --font-ui: 'Archivo', system-ui, -apple-system, sans-serif; --font-serif: 'Spectral', Georgia, 'Times New Roman', serif; /* --font-mono kept as an alias so labels/data keep working — it is the SAME Archivo, differentiated by caps + tracking + tabular nums. */ --font-mono: var(--font-ui); /* Type scale — fluid-ish, rooted at 16px body */ --text-2xs: 0.6875rem; /* 11px — mono micro-labels only */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px — body min */ --text-md: 1.125rem; /* 18px — comfortable reading */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 3rem; /* 48px */ --text-4xl: 4rem; /* 64px */ --text-5xl: 5.5rem; /* 88px — hero display */ --leading-tight: 1.05; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed:1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* eyebrows / overlines */ /* --------------------------------------------------------------- 4. SPACING (8px base grid, with a 4px half-step) --------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* Layout */ --container: 1200px; --container-tight: 760px; /* editorial / reading width */ --gutter: 1.5rem; /* --------------------------------------------------------------- 5. RADII — soft but not bubbly. Outdoor-premium = restrained. --------------------------------------------------------------- */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* --------------------------------------------------------------- 6. SHADOWS — low, warm, soft. Like overcast light, not harsh sun. --------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(38,32,20,.06), 0 1px 1px rgba(38,32,20,.04); --shadow-md: 0 4px 12px rgba(38,32,20,.08), 0 2px 4px rgba(38,32,20,.05); --shadow-lg: 0 12px 32px rgba(38,32,20,.12), 0 4px 8px rgba(38,32,20,.06); --shadow-green: 0 10px 28px rgba(11,42,23,.22); /* --------------------------------------------------------------- 7. MOTION — calm, grounded. Ease, never bounce. Quick, never flashy. --------------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur: 240ms; /* @kind other */ --dur-slow: 420ms; /* @kind other */ } /* ===================================================================== SEMANTIC ELEMENT STYLES — opt-in classes mirroring the hierarchy. Apply .cmc-* or use the tokens directly. ===================================================================== */ .cmc-eyebrow { /* overline / kicker — cartographic label feel */ font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); } .cmc-display { /* hero — heavy grotesque, tight */ font-family: var(--font-display); font-weight: 800; font-size: clamp(2.75rem, 6vw, var(--text-5xl)); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--ink); } .cmc-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--ink); } .cmc-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--ink); } .cmc-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--ink); } .cmc-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink); } .cmc-serif { /* reverent editorial — the mountain's voice */ font-family: var(--font-serif); font-weight: 400; font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--ink); } .cmc-serif-lg { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--ink); } .cmc-lede { /* opening paragraph, serif italic optional */ font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--ink-2); } .cmc-body { font-family: var(--font-ui); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--ink); } .cmc-small { font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-2); } .cmc-data { /* coords, elevation, distance, grade, time — Archivo + tabular */ font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.02em; color: var(--ink); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .cmc-data-label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); }