/* ============================================================================= ONYX & OYSTER — DESIGN TOKENS ----------------------------------------------------------------------------- Every colour, size, rhythm and timing value used anywhere in the site is declared here. Components reference tokens, never raw values, so the whole system can be re-tuned from this one file. ========================================================================== */ :root { /* --------------------------------------------------------------------------- BRAND PALETTE The six brand colours, exactly as specified. ------------------------------------------------------------------------ */ --oo-onyx: #000000; /* typography, navigation, footer, dark sections */ --oo-oyster: #DCCFC3; /* signature warm neutral, panels, light sections */ --oo-evergreen: #013220; /* restrained accent only */ --oo-ivory: #F6F2EC; /* page background, lighter content sections */ --oo-stone: #A99D92; /* supporting text on dark, borders, captions */ --oo-white: #FFFFFF; /* selective contrast and readability */ /* --------------------------------------------------------------------------- EXTENDED NEUTRALS Derived tones. These exist for one reason: Warm Stone reaches only 2.4:1 against Soft Ivory, so it cannot carry text on light backgrounds. The two values below hold the same warmth at accessible contrast. --oo-stone-deep on Soft Ivory 6.7 : 1 --oo-stone-deep on Oyster Pearl 4.9 : 1 ------------------------------------------------------------------------ */ --oo-stone-deep: #5C5349; /* supporting text on Ivory and Pearl */ --oo-onyx-soft: #0B0B0B; /* dark section grounds — avoids OLED smear */ --oo-onyx-raised: #141414; /* raised dark surfaces, cards on black */ --oo-evergreen-deep: #001A10; /* gradient floor beneath Evergreen sections */ /* --------------------------------------------------------------------------- SEMANTIC COLOUR — DARK GROUND (the site's default register) ------------------------------------------------------------------------ */ --oo-bg-dark: var(--oo-onyx); --oo-surface-dark: var(--oo-onyx-raised); --oo-text-on-dark: var(--oo-ivory); --oo-text-muted-on-dark: var(--oo-stone); --oo-rule-on-dark: rgba(220, 207, 195, 0.18); --oo-rule-on-dark-soft: rgba(220, 207, 195, 0.10); /* SEMANTIC COLOUR — LIGHT GROUNDS */ --oo-bg-ivory: var(--oo-ivory); --oo-bg-pearl: var(--oo-oyster); --oo-text-on-light: var(--oo-onyx); --oo-text-muted-on-light: var(--oo-stone-deep); --oo-rule-on-light: rgba(92, 83, 73, 0.24); --oo-rule-on-light-soft: rgba(92, 83, 73, 0.14); /* SEMANTIC COLOUR — ACCENT */ --oo-accent: var(--oo-evergreen); --oo-accent-on-dark: #7FA08E; /* Evergreen is too dark to read on black; this is its legible sibling — 6.4:1 */ /* --------------------------------------------------------------------------- FOCUS Never removed, only restyled. Two variants so the ring stays visible on both grounds. ------------------------------------------------------------------------ */ --oo-focus-dark: var(--oo-oyster); --oo-focus-light: var(--oo-evergreen); --oo-focus-width: 2px; --oo-focus-offset: 3px; /* --------------------------------------------------------------------------- IMAGE TREATMENTS Scrims that keep text legible over photography. Values are deliberately conservative: the photograph should still read as a photograph. ------------------------------------------------------------------------ */ --oo-scrim-hero: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 34%, rgba(0,0,0,0.52) 68%, rgba(0,0,0,0.86) 100%); --oo-scrim-card: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.30) 46%, rgba(0,0,0,0.84) 100%); --oo-scrim-band: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.66) 46%, rgba(0,0,0,0.30) 100%); /* Frosted glass — the finder panel and the modal shell. */ --oo-glass-bg: rgba(10, 10, 10, 0.52); --oo-glass-border: rgba(220, 207, 195, 0.20); --oo-glass-blur: blur(22px) saturate(115%); /* --------------------------------------------------------------------------- TYPEFACES Display Bodoni Moda — the high-contrast editorial Didone standing in for Kudryashev Display. Body Jost — a refined humanist geometric standing in for Abril. Both are served from Google Fonts. To move to the licensed originals, change only these two declarations and the in index.html. ------------------------------------------------------------------------ */ --oo-font-display: 'Bodoni Moda', 'Didot', 'Bodoni MT', 'Times New Roman', serif; --oo-font-body: 'Jost', 'Futura', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --------------------------------------------------------------------------- TYPE SCALE Fluid between the mobile and desktop ends of each clamp, so there are no jumps at breakpoints. ------------------------------------------------------------------------ */ --oo-text-hero: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem); --oo-text-h1: clamp(2.25rem, 1.45rem + 3.4vw, 4.5rem); --oo-text-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3.25rem); --oo-text-h3: clamp(1.375rem, 1.16rem + 0.9vw, 2rem); --oo-text-h4: clamp(1.125rem, 1.04rem + 0.36vw, 1.375rem); --oo-text-lead: clamp(1.0625rem, 1.0rem + 0.34vw, 1.3125rem); --oo-text-body: 1.0625rem; --oo-text-small: 0.9375rem; --oo-text-caption: 0.8125rem; --oo-text-label: 0.75rem; /* uppercase, widely tracked — never for prose */ --oo-leading-tight: 1.06; --oo-leading-snug: 1.24; --oo-leading-normal: 1.5; --oo-leading-relaxed:1.75; --oo-leading-loose: 1.9; --oo-tracking-label: 0.22em; --oo-tracking-wordmark:0.30em; --oo-tracking-button: 0.14em; --oo-tracking-tight: -0.015em; /* --------------------------------------------------------------------------- SPACING — spacious editorial rhythm on a 4px base ------------------------------------------------------------------------ */ --oo-space-3xs: 0.25rem; /* 4px */ --oo-space-2xs: 0.5rem; /* 8px */ --oo-space-xs: 0.75rem; /* 12px */ --oo-space-sm: 1rem; /* 16px */ --oo-space-md: 1.5rem; /* 24px */ --oo-space-lg: 2rem; /* 32px */ --oo-space-xl: 3rem; /* 48px */ --oo-space-2xl: 4rem; /* 64px */ --oo-space-3xl: 6rem; /* 96px */ --oo-space-4xl: 8rem; /* 128px */ --oo-space-5xl: 10rem; /* 160px */ /* Vertical space around a full section. Fluid, so mobile is never cramped and desktop never merely large. */ --oo-section-y: clamp(4.5rem, 3rem + 7vw, 10rem); --oo-section-y-tight: clamp(3.5rem, 2.5rem + 4.5vw, 7rem); /* --------------------------------------------------------------------------- LAYOUT ------------------------------------------------------------------------ */ --oo-container: 75rem; /* 1200px — standard editorial measure */ --oo-container-wide: 87.5rem; /* 1400px — galleries and full-width grids */ --oo-container-text: 40rem; /* 640px — prose, holds 60–75 characters */ --oo-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3.5rem); --oo-nav-height: 5rem; --oo-nav-height-scrolled: 4.25rem; /* --------------------------------------------------------------------------- BORDERS & RADII Minimal rounding throughout. 2px is the maximum anywhere in the system. ------------------------------------------------------------------------ */ --oo-radius: 2px; --oo-radius-none: 0; --oo-hairline: 1px; /* --------------------------------------------------------------------------- MOTION Slow and even. Entrances ease out; exits are shorter than entrances so the interface never feels like it is holding the reader up. ------------------------------------------------------------------------ */ --oo-ease: cubic-bezier(0.22, 1, 0.36, 1); --oo-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --oo-dur-fast: 180ms; --oo-dur-base: 280ms; --oo-dur-slow: 520ms; --oo-dur-reveal: 900ms; --oo-dur-image: 1200ms; /* the slow zoom on hover */ /* --------------------------------------------------------------------------- LAYERING One scale, declared once. Nothing in the codebase invents its own z-index. ------------------------------------------------------------------------ */ --oo-z-base: 1; --oo-z-raised: 10; --oo-z-sticky: 20; --oo-z-menu: 40; /* The bar sits above the mobile menu panel, not below it: the close control lives in the bar, and a panel painted over it would leave the menu with no visible way out. Still below modals, which cover everything. */ --oo-z-nav: 50; --oo-z-overlay: 90; --oo-z-modal: 100; --oo-z-toast: 120; --oo-z-skiplink: 200; }