/* ============================================================================ Proximity Green — design tokens & shared base ---------------------------------------------------------------------------- THREE LAYERS (re-skin only touches layer 2): 1. Core ramps — raw, brand-agnostic values (--c-*) 2. Theme primitives — selected by [data-theme] × [data-mode] (--t-*) 3. Semantic aliases — what the markup consumes (--surface-*, --text-*, …) Switch the whole site with two attributes on : data-theme = heritage (default) | signal | infra data-mode = dark (default) | light Default (no attributes) = Heritage Deep, dark. Palettes are lifted verbatim from the design system (guidelines/pg-house-brand-directions.html). ============================================================================ */ /* ── Layer 1 · core ramps + non-themeable scales ───────────────────────────*/ :root { /* type */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'DM Mono', ui-monospace, 'SF Mono', monospace; /* raw brand ramps (referenced by themes / skins) */ --c-forest: #10211a; --c-forest-deep: #0b1812; --c-forest-mid: #1c3528; --c-brass: #c9a85a; --c-coral: #cf5a34; --c-sage: #7aa882; --c-lime: #c4ff4d; /* layout (constant across every skin) */ --gutter: 3.5rem; --section-y: 8rem; --maxw: 1200px; /* radii — base radius is themeable (--t-radius); rest derive from it */ --radius: var(--t-radius, 12px); --radius-sm: calc(var(--radius) * 0.6); --radius-lg: calc(var(--radius) * 1.3); --radius-pill: 999px; --easing: cubic-bezier(.22,.61,.36,1); } /* ── Layer 2 · theme primitives ────────────────────────────────────────────*/ /* :root == Heritage Deep, DARK (the default house brand) */ :root { --t-accent: #c9a85a; /* brass */ --t-action: #c9a85a; --t-on-action: #14130c; --t-attention: #cf5a34; /* coral */ --t-nav: #10211a; --t-on-nav: #e9e8dd; --t-nav-pill: rgba(197,160,90,0.22); --t-banner-1: #0b1812; --t-banner-2: #1c3528; --t-on-banner: #ece8db; --t-page: #0d0f0b; --t-card: #1c1f16; --t-raised: #161a12; --t-strong: #efece0; --t-body: #a8a596; --t-muted: #807d70; --t-rule: rgba(255,255,255,0.10); --t-radius: 12px; } /* Signal — graphite + deep sage green (was electric lime), dark */ [data-theme="signal"] { --t-accent: #7aa882; --t-action: #7aa882; --t-on-action: #16170f; --t-attention: #ff7a4d; --t-nav: #16170f; --t-on-nav: #e9e7dc; --t-nav-pill: rgba(122,168,130,0.18); --t-banner-1: #0f1009; --t-banner-2: #24281a; --t-on-banner: #e9e7dc; --t-page: #111208; --t-card: #21231a; --t-raised: #1a1b14; --t-strong: #f0eee2; --t-body: #a3a08f; --t-muted: #8a877a; --t-rule: rgba(255,255,255,0.08); --t-radius: 10px; } /* Infrastructure — slate/ink neutral + sage hairline, dark */ [data-theme="infra"] { --t-accent: #7aa882; --t-action: #2f4d38; --t-on-action: #f3f5f2; --t-attention: #d2754a; --t-nav: #1b1f24; --t-on-nav: #e7e9ec; --t-nav-pill: rgba(122,168,130,0.22); --t-banner-1: #15181d; --t-banner-2: #283038; --t-on-banner: #e7e9ec; --t-page: #111317; --t-card: #1d2026; --t-raised: #16181c; --t-strong: #eceef0; --t-body: #a0a3aa; --t-muted: #767a82; --t-rule: rgba(255,255,255,0.08); --t-radius: 8px; } /* light-mode surface/text overrides (accent/action/banner stay) — order after dark */ [data-mode="light"] { /* default theme = heritage, light */ --t-page: #f5f2e8; --t-card: #fffdf7; --t-raised: #fbf8ef; --t-strong: #14211a; --t-body: #4a4a40; --t-muted: #6f6c5f; --t-rule: #e7e2d4; } [data-theme="signal"][data-mode="light"] { --t-page: #f3f3ec; --t-card: #ffffff; --t-raised: #f8f8f1; --t-strong: #16170f; --t-body: #4a4b40; --t-muted: #6b6c5f; --t-rule: #e6e6dc; } [data-theme="infra"][data-mode="light"] { --t-page: #eef0f2; --t-card: #ffffff; --t-raised: #f6f7f8; --t-strong: #1b1f24; --t-body: #45484d; --t-muted: #646a72; --t-rule: #e0e3e7; } /* ── Layer 3 · semantic aliases (consumed by markup) ───────────────────────*/ :root { --accent: var(--t-accent); --accent-ink: var(--t-accent); /* accent used as TEXT/lines (darkens on light below) */ --action: var(--t-action); --on-action: var(--t-on-action); --attention: var(--t-attention); --surface-page: var(--t-page); --surface-card: var(--t-card); --surface-raised:var(--t-raised); --surface-nav: var(--t-nav); --on-nav: var(--t-on-nav); --nav-pill: var(--t-nav-pill); --banner-1: var(--t-banner-1); --banner-2: var(--t-banner-2); --on-banner: var(--t-on-banner); --text-strong: var(--t-strong); --text-body: var(--t-body); --text-muted: var(--t-muted); --text-emphasis: var(--accent-ink); /* the one italic accent per heading — legible on light too */ --rule: var(--t-rule); /* derived — adapt to any theme automatically */ --nav-scrolled: color-mix(in srgb, var(--surface-page) 80%, transparent); --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent); --wash: color-mix(in srgb, var(--accent) 8%, transparent); --grid-line: color-mix(in srgb, var(--accent) 9%, transparent); } /* On light surfaces a bright accent (especially Signal's lime) is illegible as text or hairlines — darken it toward the ink. Fills, dots and glows keep the pure --accent. */ [data-mode="light"] { --accent-ink: color-mix(in srgb, var(--accent) 45%, var(--text-strong)); } /* ── client brand skins (for the white-label proof shell) ──────────────────*/ /* the shell consumes --skin-* ; default == PG Heritage. */ :root { --skin-nav: var(--surface-nav); --skin-on-nav: var(--on-nav); --skin-nav-pill: var(--nav-pill); --skin-accent: var(--accent); --skin-banner-1: var(--banner-1); --skin-banner-2: var(--banner-2); --skin-on-banner: var(--on-banner); --skin-action: var(--action); --skin-on-action: var(--on-action); --skin-attention: var(--attention); --skin-sunk: #f5f2e8; --skin-card: #fffdf7; --skin-ink: #14211a; --skin-muted: #6f6c5f; --skin-rule: #e7e2d4; --skin-radius: 12px; } [data-brand="w17"] { /* Workshop17 (real build): sage-green nav, deep-forest banner, chalk, ink action */ --skin-nav: #6f9d79; --skin-on-nav: rgba(255,255,255,0.96); --skin-nav-pill: rgba(255,255,255,0.22); --skin-accent: #7aa882; --skin-banner-1: #16281c; --skin-banner-2: #1f3325; --skin-on-banner: #ede8db; --skin-action: #18180f; --skin-on-action: #fafaf7; --skin-attention: #cf5a34; --skin-sunk: #f5f2ec; --skin-card: #ffffff; --skin-ink: #18180f; --skin-muted: #8a857c; --skin-rule: #e8e4dc; --skin-radius: 10px; } [data-brand="kofisi"] { /* KOFISI (real brand, kofisi.africa): navy ink + coral accent, cream surfaces */ --skin-nav: #13233a; --skin-on-nav: #f4efe6; --skin-nav-pill: rgba(232,98,61,0.24); --skin-accent: #e8623d; --skin-banner-1: #13233a; --skin-banner-2: #1f3a5c; --skin-on-banner: #f4efe6; --skin-action: #e8623d; --skin-on-action: #ffffff; --skin-attention: #e8623d; --skin-sunk: #f6f1ea; --skin-card: #ffffff; --skin-ink: #13233a; --skin-muted: #6e7280; --skin-rule: #e7e1d6; --skin-radius: 14px; } [data-brand="campus"] { /* Corporate & banking campus — navy + digital blue (Standard Bank-aligned) */ --skin-nav: #001b4d; --skin-on-nav: #ffffff; --skin-nav-pill: rgba(0,145,247,0.30); --skin-accent: #0091f7; --skin-banner-1: #001442; --skin-banner-2: #0046c0; --skin-on-banner: #eaf2ff; --skin-action: #0091f7; --skin-on-action: #ffffff; --skin-attention: #e0613c; --skin-sunk: #f1f4f9; --skin-card: #ffffff; --skin-ink: #0a1f44; --skin-muted: #5a6b85; --skin-rule: #e1e7f0; --skin-radius: 8px; } [data-brand="student"] { /* Student accommodation — teal + coral */ --skin-nav: #0d4f4f; --skin-on-nav: #e6f2f0; --skin-nav-pill: rgba(232,115,74,0.24); --skin-accent: #e8734a; --skin-banner-1: #0d4f4f; --skin-banner-2: #157272; --skin-on-banner: #e8f4f1; --skin-action: #e8734a; --skin-on-action: #ffffff; --skin-attention: #e8734a; --skin-sunk: #f2f7f6; --skin-card: #ffffff; --skin-ink: #0d4f4f; --skin-muted: #5b7472; --skin-rule: #dcebe8; --skin-radius: 16px; } /* ── shared base ───────────────────────────────────────────────────────────*/ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); font-weight: 300; line-height: 1.7; overflow-x: hidden; transition: background .3s var(--easing), color .3s var(--easing); } /* fixed fractal-noise grain over the page */ body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); opacity: 0.4; mix-blend-mode: overlay; } /* keyframes */ @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } @keyframes orbFloat{ 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-25px) scale(1.03); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* scroll reveal */ .reveal { transition: opacity .8s var(--easing), transform .8s var(--easing); } .reveal.hidden { opacity: 0; transform: translateY(25px); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── review theme switcher (removable in production) ───────────────────────*/ #theme-switch { position: fixed; right: 1rem; bottom: 1rem; z-index: 900; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--surface-card) 88%, transparent); border: 1px solid var(--rule); backdrop-filter: blur(14px); font-family: var(--font-sans); box-shadow: 0 8px 30px rgba(0,0,0,0.25); } #theme-switch .ts-row { display: flex; gap: 4px; } #theme-switch .ts-label { font-size: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; } #theme-switch button { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; cursor: pointer; background: transparent; color: var(--text-muted); border: 1px solid var(--rule); border-radius: var(--radius-sm); transition: all .2s var(--easing); } #theme-switch button:hover { color: var(--text-strong); border-color: var(--accent); } #theme-switch button.on { background: var(--accent); color: var(--on-action); border-color: var(--accent); } #theme-switch .ts-collapse { position: absolute; top: -10px; left: -10px; width: 22px; height: 22px; padding: 0; border-radius: 50%; line-height: 1; font-size: 0.7rem; } #theme-switch.collapsed .ts-body { display: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal.hidden { opacity: 1; transform: none; } }