/* ============================================================ tokens.css - THE DESIGN SETTINGS FILE Hi Nikita. This is the single most important CSS file on the site. It defines every colour, every text size, every spacing value as a reusable variable (CSS custom property). If you change a value here, the change appears everywhere on the site that uses it. Example: change --gold to a different hex code and every gold button, line, hover state, and accent on every page updates. Variables look like: --name: value; They are used elsewhere like: color: var(--gold); Do not edit anything outside the :root { ... } block in this file. ============================================================ */ :root { /* ---------------------------------------------------------- COLOURS Change these to reskin the site. Use hex codes (#FFFFFF) for solid colours, or rgba(R, G, B, A) for transparent ones. ---------------------------------------------------------- */ --paper: #FAF7F1; /* Main background. A warm off-white. */ --ink: #1F1B16; /* Main text and headlines. A warm dark umber, gentler than pure black. */ --gold: #C9A84C; /* The brand accent. Used on hover, dividers, large display accents, the "are" italic in the hero. */ --gold-deep: #8E6F1F; /* A darker gold for pressed/active states. */ --gold-text: #80631A; /* Accessible gold for SMALL text on the paper background (~5.3:1, WCAG AA). Bright --gold fails contrast at small sizes. */ --cream: #F0E8D5; /* Soft tint for cards and quiet section backgrounds. */ --ash: #6E6962; /* Secondary text. Captions, labels, metadata. */ --rule: rgba(31, 27, 22, 0.12); /* Hairline dividers. 12% opacity ink. */ --paper-tint: rgba(250, 247, 241, 0.96); /* Near-opaque nav background (no blur, for smooth scrolling). */ --coral: #E07856; /* Quirky secondary accent. Used very sparingly (tooltip border on the heart, hero badge background, CTA arrow hover). */ --coral-soft: rgba(224, 120, 86, 0.12); /* Soft coral tint for backgrounds. */ /* Official logo emblem colours (for brand alignment / future use). */ --logo-slate: #373E4C; /* The emblem disc. */ --logo-terracotta: #B65F45; /* The emblem dot (a deeper sibling of --coral). */ /* ---------------------------------------------------------- ACCENT MARKS One reusable hand-drawn gold "brush" underline, used as a scalable background under emphasised words and stat numbers. Because it is sized to the element it underlines (100% 100%), it scales perfectly and never misaligns on mobile or desktop. Use it via the .accent-underline utility (base.css). ---------------------------------------------------------- */ --accent-underline: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2018%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%23C9A84C%27%20d%3D%27M3%2C8%20C35%2C3%2C55%2C12.5%2C95%2C8.5%20C130%2C5%2C150%2C12.5%2C197%2C8%20C199%2C8%2C199%2C11%2C197%2C11%20C150%2C15.5%2C130%2C8%2C95%2C11.5%20C55%2C15%2C35%2C6%2C3%2C11%20C1%2C10.8%2C1%2C8.2%2C3%2C8%20Z%27%2F%3E%3C%2Fsvg%3E"); /* Same brush, different roles: ink under gold words (crisper), coral for section labels. */ --accent-underline-ink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2018%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%231F1B16%27%20d%3D%27M3%2C8%20C35%2C3%2C55%2C12.5%2C95%2C8.5%20C130%2C5%2C150%2C12.5%2C197%2C8%20C199%2C8%2C199%2C11%2C197%2C11%20C150%2C15.5%2C130%2C8%2C95%2C11.5%20C55%2C15%2C35%2C6%2C3%2C11%20C1%2C10.8%2C1%2C8.2%2C3%2C8%20Z%27%2F%3E%3C%2Fsvg%3E"); --accent-underline-coral: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2018%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%23E07856%27%20d%3D%27M3%2C8%20C35%2C3%2C55%2C12.5%2C95%2C8.5%20C130%2C5%2C150%2C12.5%2C197%2C8%20C199%2C8%2C199%2C11%2C197%2C11%20C150%2C15.5%2C130%2C8%2C95%2C11.5%20C55%2C15%2C35%2C6%2C3%2C11%20C1%2C10.8%2C1%2C8.2%2C3%2C8%20Z%27%2F%3E%3C%2Fsvg%3E"); /* ---------------------------------------------------------- FONTS "font-display" is for big headlines. "font-body" is for paragraphs, buttons, navigation. "font-mono" is for small labels and section numbers. The first font in each list is what loads from /assets/fonts. The others (Georgia, Helvetica, etc.) are backup fonts that show only if the main font fails to load. ---------------------------------------------------------- */ /* Headings: Bitter - a warm slab serif (free, Candida-like). Italics carry emphasis. Body: Proxima Nova when licensed, with Montserrat as the free, embeddable stand-in. Fonts load from Google Fonts (see the in each page ). */ --font-display: "Bitter", Georgia, "Times New Roman", serif; --font-body: "Proxima Nova", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------------------------------------------------------- TEXT SIZES clamp(min, fluid, max) means: never smaller than `min`, never bigger than `max`, scale with viewport in between. On mobile the small value wins. On desktop the big value wins. This is how the hero stays readable on phones AND looks huge on big screens without writing media queries. ---------------------------------------------------------- */ --type-display-1: clamp(40px, 9vw, 140px); /* Hero headlines */ --type-display-2: clamp(32px, 6vw, 88px); /* Page titles */ --type-h2: clamp(28px, 4vw, 56px); /* Section headings */ --type-h3-lg: clamp(22px, 2.4vw, 28px); /* Larger sub-headings */ --type-h3: clamp(20px, 2vw, 24px); /* Sub-headings */ --type-lede: clamp(17px, 1.6vw, 20px); /* Intro paragraphs */ --type-body: 17px; /* Default body text */ --type-small: 13px; /* UI labels */ --type-micro: 11px; /* Tiny labels and numerals */ /* ---------------------------------------------------------- LINE HEIGHTS (how tall each line of text is) Smaller numbers = tighter lines (used for big headlines). Bigger numbers = roomier lines (used for body text). ---------------------------------------------------------- */ --lh-display: 0.95; --lh-tight: 1.0; --lh-snug: 1.15; --lh-body: 1.65; --lh-lede: 1.5; /* ---------------------------------------------------------- SPACING SCALE Use these instead of typing pixel values directly. If everything pulls from the same spacing scale the layout looks consistent. Bigger names = bigger gaps. ---------------------------------------------------------- */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 96px; --space-section: clamp(60px, 12vw, 200px); /* Top/bottom padding for whole page sections. Shrinks on mobile. */ /* ---------------------------------------------------------- LAYOUT --max-w: the widest the content ever goes (1440px). --side-pad: the left/right page margin. clamp() shrinks it on small screens so content does not run off-edge. --reading-max-w: max width for long-form text (about 70-80 characters per line, which is most readable). ---------------------------------------------------------- */ --max-w: 1440px; --gutter: 24px; --side-pad: clamp(20px, 6vw, 160px); --reading-max-w: 680px; /* ---------------------------------------------------------- BREAKPOINTS (the widths where layouts change) These are not used directly in CSS . they are reference values. Media queries hard-code these numbers because of how CSS works. If you change one here, change it in the media queries too (search the CSS files for "max-width: 900px" for example). ---------------------------------------------------------- */ --bp-sm: 640px; /* Phones in landscape */ --bp-md: 900px; /* Tablets and small laptops */ --bp-lg: 1200px; /* Laptops and desktops */ --bp-xl: 1440px; /* Large desktops */ /* ---------------------------------------------------------- ANIMATION EASING Easing controls how an animation accelerates and decelerates. "ease-out" starts fast and slows down. It is what almost every motion on the site uses. ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------------------------- ANIMATION DURATIONS (how long things take in milliseconds) 1000ms = 1 second. ---------------------------------------------------------- */ --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms; --dur-reveal: 900ms; /* ---------------------------------------------------------- Z-INDEX (which elements appear on top of others) Higher number = closer to the viewer. ---------------------------------------------------------- */ --z-nav: 100; --z-cookie: 200; --z-cursor: 1000; }