/* ========================================================================== DESIGN TOKENS Every colour, size, space and duration on the site. If a hex code or a raw px value appears in main.css, it belongs here instead. Two fonts only: Playfair Display for headings, Inter for everything else including buttons and labels. ========================================================================== */ /* ---- @font-face ---------------------------------------------------------- Self-hosted and subsetted. inc/performance.php blocks fonts.googleapis.com deliberately: a remote font costs a DNS lookup plus a TLS handshake before first paint, which was a measurable part of the render-blocking time the audit found. Subsetted to Latin plus the punctuation this design uses. The full Google Fonts files carry Cyrillic, Greek and Vietnamese, which for an English-language site is most of the weight for none of the benefit. Inter variable 854 kb -> 70 kb Inter italic 883 kb -> 77 kb Playfair Bold 177 kb -> 26 kb Playfair italic 169 kb -> 27 kb ------ 201 kb for all four Only display.woff2 and body.woff2 are preloaded; the italics load on demand, because italic text is rare enough that preloading it would cost more than it saves. font-display:swap paints text immediately in the fallback and swaps when the webfont lands. Never "block", which leaves text invisible while it loads. -------------------------------------------------------------------------- */ /* Playfair Display — static Bold, which is the only weight the headings use */ @font-face{font-family:"Playfair Display"; src:url("../fonts/display.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:"Playfair Display"; src:url("../fonts/display-italic.woff2") format("woff2"); font-weight:700;font-style:italic;font-display:swap} /* Inter — variable, so one file covers every weight from 100 to 900 */ @font-face{font-family:"Inter"; src:url("../fonts/body.woff2") format("woff2-variations"), url("../fonts/body.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:"Inter"; src:url("../fonts/body-italic.woff2") format("woff2-variations"), url("../fonts/body-italic.woff2") format("woff2"); font-weight:100 900;font-style:italic;font-display:swap} /* ========================================================================== SEHRISH KHALID — shared stylesheet Deep teal + soft lime. Playfair Display headings, Inter body and buttons. ========================================================================== */ :root{ --d-900:#08201F; --d-800:#0D2B2A; --d-700:#143A38; --d-600:#1D4A47; --lime:#C3E956; --lime-2:#B2DC3E; --lime-soft:#E8F6BE; --lime-wash:#F4FBE3; --paper:#FFFFFF; --paper-2:#F6F8F3; --ink:#0A1A19; --ink-soft:#5A6A66; --line:#E4EADF; --line-d:rgb(255 255 255/.13); --on-d:#F2F7EC; --on-d-soft:#A5BAB3; /* Playfair Display for headings, Inter for everything else including buttons */ --f-head:"Playfair Display",Georgia,serif; --f-body:"Inter",system-ui,-apple-system,sans-serif; --t-2xs:clamp(.6875rem,.68rem + .05vw,.75rem); --t-xs:clamp(.75rem,.735rem + .08vw,.8125rem); --t-sm:clamp(.875rem,.855rem + .11vw,.9375rem); --t-base:clamp(1rem,.97rem + .16vw,1.0625rem); --t-lg:clamp(1.125rem,1.07rem + .28vw,1.25rem); --t-xl:clamp(1.25rem,1.15rem + .5vw,1.5rem); --t-2xl:clamp(1.625rem,1.4rem + 1.15vw,2.25rem); --t-3xl:clamp(1.875rem,1.55rem + 1.6vw,2.75rem); --t-4xl:clamp(2.25rem,1.7rem + 2.4vw,3.5rem); --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem; --s-6:2rem;--s-7:2.5rem;--s-8:3rem;--s-9:4rem;--s-10:5rem;--s-11:6rem; --sec:clamp(4.5rem,9vw,7.5rem); /* 72px to 120px */ --container:1280px;--narrow:760px;--measure:66ch; --gutter:clamp(1.25rem,4vw,2.5rem); --r:12px;--r-lg:20px;--r-xl:28px;--r-2xl:36px;--r-pill:999px; --sh:0 2px 8px rgb(10 26 25/.05),0 16px 40px rgb(10 26 25/.07); --sh-lg:0 4px 12px rgb(10 26 25/.06),0 28px 64px rgb(10 26 25/.11); --dur-f:150ms;--dur:300ms;--dur-s:700ms; --ease:cubic-bezier(.22,1,.36,1); --tap:48px;--hdr:80px; } @media (prefers-reduced-motion:reduce){:root{--dur-f:.01ms;--dur:.01ms;--dur-s:.01ms}} /* ========================================================================== CONTRAST REPORT (WCAG AA: 4.5:1 body text, 3:1 large text and UI edges) #0A1A19 ink on #FFFFFF paper ....... 18.6:1 pass #5A6A66 soft on #FFFFFF paper ....... 5.6:1 pass #0A1A19 ink on #C3E956 lime ........ 14.1:1 pass (buttons, badges) #F2F7EC on-dark on #0D2B2A dark ........ 14.2:1 pass #A5BAB3 soft on #0D2B2A dark ........ 7.1:1 pass #C3E956 lime on #0D2B2A dark ........ 10.4:1 pass (accent words) FAILS, and what was done about them #FFFFFF white on #C3E956 lime .......... 1.4:1 never used Anything sitting on lime takes ink, never white. --btn--l enforces it. #C3E956 lime as TEXT on #FFFFFF paper .. 1.4:1 never used On light surfaces the accent is an underline behind dark text, not the text colour. .hl handles both cases: underline on light, lime text on dark. That flip is why the same motif works on every background. ========================================================================== */