/* ========================================================================== base.css — Church Boilerplate -------------------------------------------------------------------------- Reset · @font-face (Google Sans Flex — single upright typeface) · 16-col Swiss grid system · fluid type scale (opsz bound to size) · accent-word utility (.hl) · progressive-enhancement motion base states (behind .js on ) · focus-ring · helpers · full prefers-reduced-motion path. RULES OBSERVED: - Uses ONLY var(--token) from tokens.css. No raw hex anywhere in this file. - smooth-scroll is OFF (Lenis owns smooth scrolling). - No-JS shows EVERYTHING: hidden/transform initial states live behind .js on , which main.js adds at boot. ========================================================================== */ /* ========================================================================== 1. FONTS ========================================================================== */ /* Google Sans Flex — the SINGLE self-hosted typeface (SIL OFL). Variable woff2, full axis range, UPRIGHT ONLY: registered font-style: normal so no oblique is ever applied or synthesised (slnt is never requested anywhere). */ @font-face { font-family: "Google Sans Flex"; src: url("../assets/fonts/GoogleSansFlex.woff2") format("woff2"); font-weight: 1 1000; font-stretch: 75% 125%; font-style: normal; font-display: swap; } /* THEME STUDIO — four more self-hosted families, selectable at runtime via html[data-font] (which re-points --font-sans in tokens.css §1c). ALL faces are font-style: normal — UPRIGHT ONLY, no italic anywhere (banned). Poppins / Montserrat / Rubik are static weights 400/500/600/700/800, each split into `latin` + `latin-ext` subsets (latin-ext carries Turkish ğ ş İ ı ç ö ü …) by unicode-range exactly as fontsource/Google publish them. General Sans is Fontshare's one full-charset woff2 per weight (no subset split, no 800). */ /* --- Poppins (data-font="poppins") --- */ @font-face { font-family:"Poppins"; src:url("../assets/fonts/poppins-400.woff2") format("woff2"); font-weight:400; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Poppins"; src:url("../assets/fonts/poppins-400-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Poppins"; src:url("../assets/fonts/poppins-500.woff2") format("woff2"); font-weight:500; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Poppins"; src:url("../assets/fonts/poppins-500-ext.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Poppins"; src:url("../assets/fonts/poppins-600.woff2") format("woff2"); font-weight:600; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Poppins"; src:url("../assets/fonts/poppins-600-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Poppins"; src:url("../assets/fonts/poppins-700.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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Poppins"; src:url("../assets/fonts/poppins-700-ext.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Poppins"; src:url("../assets/fonts/poppins-800.woff2") format("woff2"); font-weight:800; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Poppins"; src:url("../assets/fonts/poppins-800-ext.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* --- Montserrat (data-font="montserrat") --- */ @font-face { font-family:"Montserrat"; src:url("../assets/fonts/montserrat-400.woff2") format("woff2"); font-weight:400; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Montserrat"; src:url("../assets/fonts/montserrat-400-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Montserrat"; src:url("../assets/fonts/montserrat-500.woff2") format("woff2"); font-weight:500; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Montserrat"; src:url("../assets/fonts/montserrat-500-ext.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Montserrat"; src:url("../assets/fonts/montserrat-600.woff2") format("woff2"); font-weight:600; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Montserrat"; src:url("../assets/fonts/montserrat-600-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Montserrat"; src:url("../assets/fonts/montserrat-700.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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Montserrat"; src:url("../assets/fonts/montserrat-700-ext.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Montserrat"; src:url("../assets/fonts/montserrat-800.woff2") format("woff2"); font-weight:800; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Montserrat"; src:url("../assets/fonts/montserrat-800-ext.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* --- Rubik (data-font="hanken") — self-hosted from Google Fonts (fontsource, OFL); static weights 400/500/600/700/800, UPRIGHT ONLY (no italic). Replaces the former Hanken Grotesk; the data-font attribute value stays "hanken". latin + latin-ext subsets per weight (latin-ext carries Turkish ğ ş İ ı ç ö ü …). --- */ @font-face { font-family:"Rubik"; src:url("../assets/fonts/rubik-400.woff2") format("woff2"); font-weight:400; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Rubik"; src:url("../assets/fonts/rubik-400-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Rubik"; src:url("../assets/fonts/rubik-500.woff2") format("woff2"); font-weight:500; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Rubik"; src:url("../assets/fonts/rubik-500-ext.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Rubik"; src:url("../assets/fonts/rubik-600.woff2") format("woff2"); font-weight:600; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Rubik"; src:url("../assets/fonts/rubik-600-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Rubik"; src:url("../assets/fonts/rubik-700.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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Rubik"; src:url("../assets/fonts/rubik-700-ext.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:"Rubik"; src:url("../assets/fonts/rubik-800.woff2") format("woff2"); font-weight:800; 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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:"Rubik"; src:url("../assets/fonts/rubik-800-ext.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* --- General Sans (data-font="general") — Fontshare, one full-charset woff2 per weight (Turkish included), no subset split. NO 800 face → headings use 700. --- */ @font-face { font-family:"General Sans"; src:url("../assets/fonts/general-sans-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"General Sans"; src:url("../assets/fonts/general-sans-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"General Sans"; src:url("../assets/fonts/general-sans-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"General Sans"; src:url("../assets/fonts/general-sans-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } /* THEME STUDIO v2 — ten more self-hosted families, selectable at runtime via html[data-font]. Each ships as ONE variable woff2 (wght axis only, plus opsz where the family exposes it), subset to Latin + Latin Extended-A and the punctuation the site uses. Built from the UPRIGHT google/fonts variable TTF (OFL) with fontTools; the -Italic sources were never fetched — UPRIGHT ONLY, no italic anywhere (banned). Turkish ı İ ğ Ğ ş Ş ç Ç ö Ö ü Ü verified present and outlined in every one of the ten. Familjen Grotesk's wght axis stops at 700 (see the heading override below); the other nine reach 800. */ @font-face { font-family:"Bricolage Grotesque"; src:url("../assets/fonts/bricolage-var.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face { font-family:"Archivo"; src:url("../assets/fonts/archivo-var.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face { font-family:"Epilogue"; src:url("../assets/fonts/epilogue-var.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face { font-family:"Schibsted Grotesk"; src:url("../assets/fonts/schibsted-var.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face { font-family:"Chivo"; src:url("../assets/fonts/chivo-var.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face { font-family:"Familjen Grotesk"; src:url("../assets/fonts/familjen-var.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; } @font-face { font-family:"Fraunces"; src:url("../assets/fonts/fraunces-var.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face { font-family:"Literata"; src:url("../assets/fonts/literata-var.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face { font-family:"Newsreader"; src:url("../assets/fonts/newsreader-var.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face { font-family:"Bitter"; src:url("../assets/fonts/bitter-var.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } /* ========================================================================== 2. MODERN RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { /* Lenis handles smooth scrolling — keep native smooth OFF. */ scroll-behavior: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* root font-size: subtle fluid bump so rem-based scale breathes. */ font-size: clamp(100%, 0.95rem + 0.25vw, 112.5%); /* Account for the sticky header when JS-less anchor jumps happen. */ scroll-padding-top: clamp(4.5rem, 9vw, 6.5rem); /* MUST be here, not only on body. Viewport overflow propagates from the ROOT element; body's value is used only when html's is `visible`, and in practice `overflow-x: clip` on body alone left the viewport scrollable. Measured on hakkimizda.html at 1440: with the .about-wm watermarks unclipped, body's clip gave scrollWidth 1485 and scrollTo(400,0) landed at scrollX 45. With this line, scrollWidth is 1440 and scrollX stays 0. `clip`, NOT `hidden`: `hidden` would make html a scroll container, which breaks every `position: sticky` measured against the viewport (the Hizmetlerimiz stage). `clip` clips without creating a scroll container. */ overflow-x: clip; } body { min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-weight: var(--wght-regular); font-variation-settings: "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); line-height: 1.55; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* ~17px body */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; /* THEME STUDIO: never synthesise bold (or oblique). Headings request a REAL heavier face per font; this guarantees no faux-bold if a face is missing (e.g. General Sans, which has no 800 → its headings fall to the real 700). */ font-synthesis: none; overflow-x: clip; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; font-variation-settings: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } :where(h1, h2, h3, h4, h5, h6) { font-weight: var(--wght-semibold); line-height: 1.08; text-wrap: balance; } p { text-wrap: pretty; } /* Reduce default media query weirdness; honor hidden. */ [hidden] { display: none !important; } /* ========================================================================== 3. SELECTION + GLOBAL ACCENT ========================================================================== */ ::selection { background: var(--accent-soft); color: var(--accent-strong); } /* ========================================================================== 4. 16-COLUMN SWISS GRID .container — centered max-width wrapper with edge padding .grid — 16-col grid using --col / --gutter .col-span-N — span N columns (1..16) .col-start-N — start at column line N (1..16) Collapses 16 → 8 → 4 conceptually at tablet / mobile. ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--page-pad); } .grid { display: grid; grid-template-columns: repeat(var(--columns), 1fr); column-gap: var(--gutter); row-gap: var(--block-y); } /* Default content band: col 2 → -2 (the editorial inset the brief specifies). */ .grid--inset > * { grid-column: 2 / -2; } /* Span helpers 1..16. Two-value form `span N / span N` (NOT single-value `span N`). Single-value sets only grid-column-start:span N and leaves grid-column-end:auto, so when an element also has .col-start-M (declared later) the line number overrides grid-column-start and the span is lost → element collapses to one column. Putting the span on grid-column-end too keeps it intact alongside col-start. */ .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-5 { grid-column: span 5 / span 5; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-7 { grid-column: span 7 / span 7; } .col-span-8 { grid-column: span 8 / span 8; } .col-span-9 { grid-column: span 9 / span 9; } .col-span-10 { grid-column: span 10 / span 10; } .col-span-11 { grid-column: span 11 / span 11; } .col-span-12 { grid-column: span 12 / span 12; } .col-span-13 { grid-column: span 13 / span 13; } .col-span-14 { grid-column: span 14 / span 14; } .col-span-15 { grid-column: span 15 / span 15; } .col-span-16 { grid-column: span 16 / span 16; } /* Start-line helpers 1..16 */ .col-start-1 { grid-column-start: 1; } .col-start-2 { grid-column-start: 2; } .col-start-3 { grid-column-start: 3; } .col-start-4 { grid-column-start: 4; } .col-start-5 { grid-column-start: 5; } .col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; } .col-start-9 { grid-column-start: 9; } .col-start-10 { grid-column-start: 10; } .col-start-11 { grid-column-start: 11; } .col-start-12 { grid-column-start: 12; } .col-start-13 { grid-column-start: 13; } .col-start-14 { grid-column-start: 14; } .col-start-15 { grid-column-start: 15; } .col-start-16 { grid-column-start: 16; } /* End-line helper for explicit ranges. */ .col-end-2 { grid-column-end: 2; } .col-end--2 { grid-column-end: -2; } .col-end--1 { grid-column-end: -1; } /* TABLET: collapse 16 → 8. Spans/starts above 8 clamp to the 8-track frame. */ @media (max-width: 64rem) { .grid { grid-template-columns: repeat(8, 1fr); } .grid--inset > * { grid-column: 1 / -1; } .col-span-9, .col-span-10, .col-span-11, .col-span-12, .col-span-13, .col-span-14, .col-span-15, .col-span-16 { grid-column: span 8 / span 8; } .col-span-6, .col-span-7, .col-span-8 { grid-column: span 8 / span 8; } .col-start-9, .col-start-10, .col-start-11, .col-start-12, .col-start-13, .col-start-14, .col-start-15, .col-start-16 { grid-column-start: 1; } } /* MOBILE: collapse 8 → 4. Almost everything goes full width. */ @media (max-width: 40rem) { .grid { grid-template-columns: repeat(4, 1fr); row-gap: var(--space-6); } [class*="col-span-"] { grid-column: 1 / -1; } [class*="col-start-"] { grid-column-start: 1; } } /* ========================================================================== 5. FLUID TYPE SCALE (utility classes; opsz tracks size) .t-display .t-h1 .t-h2 .t-h3 .t-lead .t-body .t-eyebrow .t-mono Larger size → larger opsz, tighter line-height, tasteful tracking. ========================================================================== */ .t-display { font-size: clamp(3rem, 1.6rem + 7vw, 9rem); /* up to ~144px */ line-height: 0.96; letter-spacing: -0.02em; word-spacing: 0.02em; font-weight: var(--wght-bold); font-variation-settings: "opsz" 144, "wght" var(--wght-bold), "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); text-wrap: balance; } .t-h1 { font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem); /* up to ~72px */ line-height: 1.02; letter-spacing: -0.018em; font-weight: var(--wght-bold); font-variation-settings: "opsz" 72, "wght" var(--wght-bold), "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); text-wrap: balance; } .t-h2 { font-size: clamp(1.75rem, 1.25rem + 2.4vw, 2.75rem); /* up to ~44px */ line-height: 1.08; letter-spacing: -0.014em; font-weight: var(--wght-semibold); font-variation-settings: "opsz" 40, "wght" var(--wght-semibold), "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); text-wrap: balance; } .t-h3 { font-size: clamp(1.3125rem, 1.05rem + 1.1vw, 1.75rem); /* up to ~28px */ line-height: 1.16; letter-spacing: -0.008em; font-weight: var(--wght-semibold); font-variation-settings: "opsz" 28, "wght" var(--wght-semibold), "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); } .t-lead { font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem); /* up to ~22px */ line-height: 1.45; letter-spacing: -0.004em; font-weight: var(--wght-regular); color: var(--text-muted); font-variation-settings: "opsz" 22, "wght" var(--wght-regular), "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); text-wrap: pretty; } .t-body { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* ~17px */ line-height: 1.6; letter-spacing: 0; font-weight: var(--wght-regular); font-variation-settings: "opsz" 17, "wght" var(--wght-regular), "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); text-wrap: pretty; } .t-eyebrow { font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* ~13px */ line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; /* uppercase, tracked micro-label (no leading rule) */ font-weight: var(--wght-medium); color: var(--text-muted); font-variation-settings: "opsz" 13, "wght" var(--wght-medium), "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); } .t-mono { font-family: var(--font-mono); font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* ~13px */ line-height: 1.3; letter-spacing: 0.04em; font-weight: var(--wght-medium); font-variation-settings: "wght" var(--wght-medium); } /* Tighten word/letter spacing only on the very largest sizes for craft. */ .t-display, .t-h1 { word-spacing: -0.01em; } /* ========================================================================== 6. ACCENT-WORD UTILITY (.hl) Single-font emphasis: maroon + heavier weight, fully UPRIGHT (no slant). Graceful: even if axes are unsupported, the maroon color still reads. ========================================================================== */ .hl { color: var(--accent); font-style: normal; /* upright — emphasis is colour + weight, never a lean */ /* font-variation-settings is all-or-nothing: every unlisted axis resets to the font default (opsz would fall back to 18). We therefore declare opsz explicitly via --hl-opsz, which each type tier overrides to match its own optical size — keeping the accent's optical cut in step with its heading. */ font-variation-settings: "opsz" var(--hl-opsz), "wght" var(--hl-wght), "wdth" var(--hl-wdth), "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); letter-spacing: -0.01em; } /* Bind the accent word's optical size to the heading tier it sits inside, so the display-grade neighbours and the accent share the same optical cut. (Values mirror each tier's own "opsz" in the FLUID TYPE SCALE above.) */ .t-display .hl { --hl-opsz: 144; } .t-h1 .hl { --hl-opsz: 72; } .t-h2 .hl { --hl-opsz: 40; } .t-h3 .hl { --hl-opsz: 28; } .t-lead .hl { --hl-opsz: 22; } /* ========================================================================== 6b. BOLDER HEADINGS (THEME STUDIO — user request) h1 + h2 → 800, h3 → 700, across ALL five fonts, using each font's REAL weight FACE (no faux-bold; body sets font-synthesis:none). • Static fonts (Poppins / Montserrat / Hanken / General) select the face via the `font-weight` property below (Poppins / Montserrat / Rubik / General). • The VARIABLE Google Sans Flex ignores font-weight when an explicit font-variation-settings "wght" is present (the type scale sets one), so for that theme we ALSO drive the wght AXIS — preserving each tier's opsz / ROND / GRAD so the optical cut is unchanged. The element selectors make it global; the class selectors out-specify the type-scale tiers (§5) and the #pillars/#connect title rules (components.css). ========================================================================== */ h1, h2 { font-weight: 800; } h3 { font-weight: 700; } .t-display, .t-h1, .t-h2, .services__title, .social__title { font-weight: 800; } .t-h3 { font-weight: 700; } /* Variable Google Sans Flex: bump the wght axis to match (font-variation-settings "wght" wins over font-weight for variable fonts). opsz mirrors each tier. */ html[data-font="googlesans"] .t-display { font-variation-settings: "opsz" 144, "wght" 800, "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); } html[data-font="googlesans"] .t-h1 { font-variation-settings: "opsz" 72, "wght" 800, "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); } html[data-font="googlesans"] .t-h2 { font-variation-settings: "opsz" 40, "wght" 800, "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); } html[data-font="googlesans"] .services__title { font-variation-settings: "opsz" 110, "wght" 800; } html[data-font="googlesans"] .social__title { font-variation-settings: "opsz" 90, "wght" 800; } html[data-font="googlesans"] .t-h3 { font-variation-settings: "opsz" 28, "wght" 700, "ROND" var(--ROND-soft), "GRAD" var(--GRAD-base); } /* General Sans has NO 800 face → its h1/h2 render at the real 700 (documented). */ html[data-font="general"] .t-display, html[data-font="general"] .t-h1, html[data-font="general"] .t-h2, html[data-font="general"] .services__title, html[data-font="general"] .social__title { font-weight: 700; } /* THEME STUDIO v2 — the ten added families are all VARIABLE, so font-variation-settings "wght" beats font-weight. Without these the heading tiers would render at the type scale's axis value (720 / 600) instead of the 800 / 700 the design asks for (base.css §"h1, h2" above). Mirrors the googlesans block: restate the axis per tier, with font-weight declared alongside every axis value so a fallback face still lands on the right weight. opsz is carried by the four families that expose it (Bricolage Grotesque, Fraunces, Literata, Newsreader) and clamped per font by the UA; the other six ignore it. .services__title / .social__title are deliberately NOT listed — they stay on their components.css 600, matching the four static families (only Google Sans Flex overrides those to 800). */ html:is([data-font="bricolage"],[data-font="archivo"],[data-font="epilogue"],[data-font="schibsted"],[data-font="chivo"],[data-font="fraunces"],[data-font="literata"],[data-font="newsreader"],[data-font="bitter"]) .t-display { font-weight: 800; font-variation-settings: "opsz" 144, "wght" 800; } html:is([data-font="bricolage"],[data-font="archivo"],[data-font="epilogue"],[data-font="schibsted"],[data-font="chivo"],[data-font="fraunces"],[data-font="literata"],[data-font="newsreader"],[data-font="bitter"]) .t-h1 { font-weight: 800; font-variation-settings: "opsz" 72, "wght" 800; } html:is([data-font="bricolage"],[data-font="archivo"],[data-font="epilogue"],[data-font="schibsted"],[data-font="chivo"],[data-font="fraunces"],[data-font="literata"],[data-font="newsreader"],[data-font="bitter"]) .t-h2 { font-weight: 800; font-variation-settings: "opsz" 40, "wght" 800; } html:is([data-font="bricolage"],[data-font="archivo"],[data-font="epilogue"],[data-font="schibsted"],[data-font="chivo"],[data-font="fraunces"],[data-font="literata"],[data-font="newsreader"],[data-font="bitter"]) .t-h3 { font-weight: 700; font-variation-settings: "opsz" 28, "wght" 700; } /* Familjen Grotesk's wght axis maxes out at 700 — same wall as General Sans, so the same precedent: its heading tiers render the real 700. */ html:is([data-font="familjen"]) .t-display, html:is([data-font="familjen"]) .t-h1, html:is([data-font="familjen"]) .t-h2 { font-weight: 700; font-variation-settings: "wght" 700; } html:is([data-font="familjen"]) .t-h3 { font-weight: 700; font-variation-settings: "opsz" 28, "wght" 700; } /* ========================================================================== 7. TEXT-COLOR + WEIGHT HELPERS (no raw hex; just token aliases) ========================================================================== */ .text-ink { color: var(--text); } .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent); } .text-on-maroon { color: var(--text-on-maroon); } .fw-light { font-variation-settings: "wght" var(--wght-light); } .fw-regular { font-variation-settings: "wght" var(--wght-regular); } .fw-medium { font-variation-settings: "wght" var(--wght-medium); } .fw-semibold { font-variation-settings: "wght" var(--wght-semibold); } .fw-bold { font-variation-settings: "wght" var(--wght-bold); } /* ========================================================================== 8. SURFACE HELPERS (apply section rhythm without re-typing tokens) ========================================================================== */ .surface-paper { background: var(--bg); } .surface-1 { background: var(--bg-raised); } .surface-2 { background: var(--bg-tonal); } .surface-3 { background: var(--bg-tonal-deep); } /* ========================================================================== 9. SHAPE HELPERS — squircle + hairline gradient edge .squircle consistent border-radius (var(--r-card)) .edge 1px light→warm inner border via mask-composite Combine:
for noteworthy-style cards. ========================================================================== */ .squircle { border-radius: var(--r-card); } .squircle--sm { border-radius: var(--r-sm); } .squircle--md { border-radius: var(--r-md); } .squircle--pill { border-radius: var(--r-pill); } /* Hairline gradient edge: a 1px inner border drawn with a masked gradient. mask-composite: exclude punches out the interior, leaving only the ring. */ .edge { position: relative; isolation: isolate; } .edge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--hairline); background: var(--edge-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; z-index: 1; } /* ========================================================================== 10. EDGE-MASK HELPER (marquee fade at both ends) ========================================================================== */ .edge-mask-x { -webkit-mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent); } /* Vertical edge mask for tall ghost words. */ .edge-mask-y { -webkit-mask-image: linear-gradient( to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient( to bottom, transparent, #000 12%, #000 88%, transparent); } /* ========================================================================== 11. ACCESSIBILITY HELPERS ========================================================================== */ /* Visually hidden but available to AT. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Visible focus ring — never color-alone. Token-driven offset ring. */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } /* Reusable utility for custom controls. */ .focus-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Skip link. */ .skip-link { position: absolute; left: var(--space-4); top: calc(-1 * var(--space-10)); z-index: var(--z-top); padding: var(--space-3) var(--space-5); background: var(--accent); color: var(--text-on-maroon); border-radius: var(--r-md); box-shadow: var(--shadow-md); transition: top var(--dur-base) var(--ease-out-expo); } .skip-link:focus { top: var(--space-4); } /* ========================================================================== 12. MOTION BASE STATES — PROGRESSIVE ENHANCEMENT Initial hidden / transform states apply ONLY when . With JS disabled, content is fully visible & static. main.js adds .js. ========================================================================== */ /* [data-reveal] — soft OPACITY-clarify entrance. OPACITY ONLY: no translateY, no movement (that is what keeps it smooth). Faint initial state gated under .js (no-JS shows full); initReveal (GSAP) drives the fade — TEXT replays on every entry (both directions), MEDIA fades in once (never strobes). The .is-inview rules are the JS-fail fallback only (the watchdog adds the class so a failed boot still shows everything full). */ .js [data-reveal] { opacity: 0.16; will-change: opacity; } /* Stagger: the container stays visible; its children fade. */ .js [data-reveal="stagger"] { opacity: 1; } .js [data-reveal="stagger"] > * { opacity: 0.16; will-change: opacity; } /* JS-fail / no-GSAP fallback (watchdog adds .is-inview) → show full, no motion. */ .js [data-reveal].is-inview, .js [data-reveal="stagger"].is-inview, .js [data-reveal="stagger"].is-inview > * { opacity: 1; } /* ========================================================================== CLARIFY — opacity-only text resolve (faint → full). OPACITY ONLY: no colour, no transform, no blur — that is the deliberate choice that keeps it smooth and flicker-free. • Effect A: the hero heading + lead resolve left-to-right on load (and replay when scrolling back up to the hero). • Effect B: long prose clarifies word-by-word, scroll-scrubbed (reverses on scroll up). js-clarify is added to by the head script ONLY when JS runs and motion is allowed, so no-JS / JS-fail / reduced-motion always show full text. initClarify() splits each .clarify target into (inline; text preserved + selectable) and drives their opacity with GSAP. ========================================================================== */ /* Pre-split block faint so there is no flash of full text before the JS word split runs; initClarify then sets the block back to 1 and drives the words. */ html.js-clarify .clarify { opacity: 0.12; } html.js-clarify .clarify-w { will-change: opacity; } /* A clarify target that is also a [data-reveal="stagger"] child (the visit lead) must NOT be block-animated by the stagger — clarify owns its opacity. This keeps the section's OTHER staggered children animating exactly as before. */ html.js-clarify [data-reveal="stagger"] > .clarify, html.js-clarify [data-reveal="stagger"].is-inview > .clarify { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { /* Full, readable text — no faint, no animation, no scrub (initClarify also bails early, and the head script omits js-clarify under reduced motion). */ html.js-clarify .clarify, html.js-clarify .clarify-w { opacity: 1 !important; } } /* [data-tilt] — base transition so the JS-driven transform eases nicely. */ .js [data-tilt] { transform: perspective(900px) rotateX(0) rotateY(0); transition: transform var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); will-change: transform; } /* (The old staggered-reveal translateY rise on tilt tiles is gone — the mosaic entrance is now an opacity-only fade, so tilt owns the tile transform alone.) */ /* Direction-aware reflection layer for tilt tiles (replaces the old glare). The tile leans toward the pointer, so the highlight collects on the RAISED edge — the OPPOSITE side. initTilt sets --nx / --ny (~ -1..1, pointer offset from the tile centre) on the tile; we translate a soft warm-white radial by the NEGATED vector so the glint glides AGAINST the lean. Subtle + premium: sits above the image/edge (z2) but below the reveal scrim (z4) and link (z5), and never blocks the link (pointer-events:none). */ .js [data-tilt] .sheen, .js .sheen { position: absolute; inset: 0; border-radius: inherit; /* --nx / --ny are set by initTilt on the TILE and inherited here (don't declare them locally — that would shadow the inherited value). The var() fallbacks keep it centred before the first pointermove. */ background: radial-gradient( 58% 58% at 50% 50%, rgba(var(--paper-rgb), 0.85) 0%, rgba(var(--paper-rgb), 0) 62%); mix-blend-mode: screen; opacity: 0; transform: translate(calc(var(--nx, 0) * -24%), calc(var(--ny, 0) * -24%)); transition: opacity var(--dur-base) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-quart); pointer-events: none; z-index: 2; } .js [data-tilt]:hover .sheen { opacity: 0.16; } /* subtle, never a hard flash */ /* [data-parallax] — inner media drifts; JS sets translate. Base only. */ .js [data-parallax] { will-change: transform; } /* .arrow-link — label/arrow slide on hover (CSS only). */ .arrow-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: var(--wght-medium); font-variation-settings: "wght" var(--wght-medium); } .arrow-link .arrow-link__icon { display: inline-block; transition: transform var(--dur-hover) var(--ease-hover); } .arrow-link:hover .arrow-link__icon, .arrow-link:focus-visible .arrow-link__icon { transform: translateX(0.4em); } .arrow-link .arrow-link__label { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-hover) var(--ease-hover); } .arrow-link:hover .arrow-link__label, .arrow-link:focus-visible .arrow-link__label { background-size: 100% 1.5px; } /* [data-draw] svg path — self-drawing stroke base. JS animates dashoffset. */ .js [data-draw] path { stroke-dasharray: var(--draw-len, 1); stroke-dashoffset: var(--draw-len, 1); } .js [data-draw].is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-draw) var(--ease-out-expo); } /* header scrolled state hook. */ #site-header { transition: background var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart); } /* ========================================================================== 13. PREFERS-REDUCED-MOTION — full neutralizing path. Content visible & static; no scrubs / parallax / tilt / breathe / drift. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Force every PE motion target to its resting / visible state. */ .js [data-reveal], .js [data-reveal="stagger"] > *, .js [data-reveal].is-inview, .js [data-reveal="stagger"].is-inview > * { opacity: 1 !important; transform: none !important; } .js [data-tilt] { transform: none !important; } .js [data-tilt] .sheen, .js .sheen { display: none !important; } .js [data-parallax] { transform: none !important; } /* initParallax never runs in reduced motion, so cancel the JS drift headroom (height:116%; top:-8%) and centre the inner media — otherwise it sits permanently shifted up with its bottom 8% cropped. */ .js [data-parallax] .media__inner { height: 100% !important; top: 0 !important; } .js [data-draw] path { stroke-dashoffset: 0 !important; } .arrow-link__icon, .arrow-link__label { transition: none !important; } } /* ========================================================================== 14. NO FINE POINTER AT ALL — disable tilt + sheen (JS also guards). Was `@media (pointer: coarse)`, which describes only the PRIMARY pointer. A touchscreen laptop, a Chromebook or an iPad with a trackpad reports coarse while a mouse is in use, so this rule was overriding the tilt for visitors who were driving it with a cursor. These two declarations are what ACTUALLY disable the effect: without them the JS gate alone would leave the handler computing values that CSS then flattened. `not all and (any-pointer: fine)` = there is no fine pointer available, which is the real condition for "hover effects cannot be used". Still true on a phone, so the touch fallback is unchanged. ========================================================================== */ @media not all and (any-pointer: fine) { .js [data-tilt] { transform: none; } .js [data-tilt] .sheen { display: none; } } /* ========================================================================== 15. PRINT — flatten to readable warm-light document. ========================================================================== */ @media print { .js [data-reveal], .js [data-reveal="stagger"] > * { opacity: 1 !important; transform: none !important; } .marquee, .sheen { display: none !important; } }