/* ========================================================================== tokens.css — the single source of truth for the design system. Everything downstream (layout, components, sections) references these variables and never hard-codes a colour or a size. The comp was drawn at 1440x793. Rather than special-casing three desktop widths, the root font-size scales fluidly and every value here is expressed in rem — so the whole composition scales as one system. ========================================================================== */ /* --- Brand palette (from the supplied colour plate) ---------------------- */ :root { --navy: #0A1E3F; --royal: #0055A4; --silver: #A7A9AC; --gold: #AB8053; --plate: #D8E6E7; --reviews-field: #ECF0F1; --light-silver: #D3D5D8; --white: #FFFFFF; /* --- Extended palette -------------------------------------------------- Derived from the brand colours and sampled from the section exports. Kept as explicit tokens so the designer can retune one value. */ --teal: #0E7C86; --royal-600: #00447F; --royal-300: #4A8CC4; --pale-blue: #EAF2F7; --off-white: #F4F6F8; --mist: #FAFBFC; --ink: #1A1F26; --black: #000000; /* several bands set copy in pure black */ --ink-muted: #5B6472; --hairline: rgba(10, 30, 63, 0.12); --scrim-navy: 10, 30, 63; } /* --- Fluid scale --------------------------------------------------------- 1440px viewport -> 16px root (the comp's native size) 1366px viewport -> 15.2px root (comp scales down proportionally) 1920px viewport -> capped at 17px so type does not balloon ---------------------------------------------------------------------- The cap was 19px until the type-scale rework; 19px rendered the body at 19px and section headings at 42.8px on a 1920 screen, which read as zoomed rather than as "more room". 17px keeps a little headroom above the 1440 design point (the ramp reaches 17px at a 1530px viewport, so it holds steady above that) without the runaway growth. Because the rail is 80rem, the cap also narrows the content column on big screens -- 1520px at 1920 under the old cap, 1360px now -- which is a deliberate improvement in measure, not a side effect to undo. Raise it to 19px to revert. */ :root { font-size: clamp(15.2px, 1.1111vw, 17px); } /* --- Layout -------------------------------------------------------------- */ :root { --rail: 80rem; /* 1280px at 1440 */ --gutter: max(1.25rem, calc((100vw - var(--rail)) / 2)); --nav-height: 6.25rem; /* 100px — header band */ --section-pad-y: clamp(4rem, 7vw, 7rem); --section-pad-y-tight: clamp(3rem, 5vw, 5rem); } /* --- Typography ---------------------------------------------------------- Typefaces are self-hosted (see fonts.css). Each stack ends in a metric -compatible fallback so a blocked font file degrades gracefully. Trajan Pro is capitals only, so every heading that needs true lowercase (the founder's name, the reviewer attributions) opts into Times instead. ---------------------------------------------------------------------- */ :root { /* Heading face. Trajan first everywhere; the Times stack stays as the fallback chain so a blocked Trajan file still renders as a serif. */ --font-heading: 'Trajan Pro', 'Times New Roman', Times, Georgia, serif; --font-display: 'Times New Roman', Times, Georgia, 'Liberation Serif', serif; /* Licensed Proxima Nova is named first so real files can be dropped in and take over immediately. The supplied Fontspring DEMO builds are never loaded — they substitute a watermark glyph for "+" and "-". */ --font-ui: 'Proxima Nova', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif; --font-phone: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* --- The standard scale ---------------------------------------------- One size per role, shared by every section. Sized in rem so the whole page still scales off the single fluid root. These replaced a run of per-section values measured off individual exports (24/30/56/74px) and are deliberately standard reading sizes rather than comp measurements: role px @1440 was hero h1 48 74 section h2 36 56 standfirst 24 30 body 16 24 small 15 18.8 ui / label 13 13 ------------------------------------------------------------------ */ --fs-hero: 3rem; /* 48px */ --fs-hero-sub: 1.875rem; /* 30px — hero standfirst, per spec */ --fs-h2: 2.25rem; /* 36px */ --fs-lead: 1.5rem; /* 24px */ --fs-body: 1rem; /* 16px */ --fs-small: 0.9375rem; /* 15px */ --fs-ui: 0.8125rem; /* 13px */ /* Nav and label roles are the same 13px as --fs-ui; kept as their own names because they are separate roles in components.css. */ --fs-nav: var(--fs-ui); --fs-label: var(--fs-ui); --lh-hero: 1.05; --lh-h2: 1.12; --lh-lead: 1.3; --lh-body: 1.6; --lh-tight: 1.15; --tracking-label: 0.14em; --tracking-nav: 0.02em; } /* --- Radii, shadows, transitions ---------------------------------------- */ :root { --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.875rem; --radius-xl: 1.25rem; --radius-pill: 62.4375rem; --shadow-sm: 0 1px 2px rgba(10, 30, 63, 0.06), 0 2px 6px rgba(10, 30, 63, 0.05); --shadow-md: 0 4px 12px rgba(10, 30, 63, 0.08), 0 12px 28px rgba(10, 30, 63, 0.07); --shadow-lg: 0 10px 30px rgba(10, 30, 63, 0.12), 0 30px 60px rgba(10, 30, 63, 0.10); --shadow-pill: 0 6px 18px rgba(4, 23, 55, 0.28); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.32s; } /* 13x11 arrow glyph, used as a CSS mask so it can take the brand colour. */ :root { --arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0 5.5h8.6M6.6 1.4 11.1 5.5 6.6 9.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* --- Breakpoints --------------------------------------------------------- Declared here so they are documented in one place; the media queries that consume them live next to the rules they affect. 1600px large desktop / full HD 1200px desktop 992px compact desktop 768px tablet -> split layouts stack 480px large phone ---------------------------------------------------------------------- */