/* ===================================================================== TM BŪVE — v4 "THE CYBORG" · SHARED DESIGN SYSTEM A fusion: v3's confident bold orange energy + v2's editorial craft, human copy, and trust psychology — forged into one ORIGINAL system. POSITIONING: confident & capable. Lead with the work and the outcome — a home built right, that lasts. Owner-run, real photos, fixed price agreed up front. Assured tone, never apologetic about size. ── THE OWNED SIGNATURE (this site's only template — nobody else's) ── 1. THE CUT — a single angled "built corner" language (--cut). One axis, always the SAME corner (top-left rising). It marks STRUCTURE only: bands, the hero frame, cards, the CTA, chips. Raw gallery photos stay square so the cut keeps its meaning ("constructed", not "decoration"). 2. THE TICK — a short orange "registration mark" (a measured line with a square orange end-cap) that opens every section head. It is the drawing-mark that ties nav → hero → every section together. 3. JOB NUMERALS — 01/02/03 in tabular display figures with a hairline orange underscore. They read as job numbers on a site drawing. Orange is RATIONED — ~2–3 touchpoints per viewport. The orange FACTS band and the orange CTA are the two loud moments; everywhere else orange is a tick, a numeral, a hover. FONTS: Sora (display, confident geometric) + Hanken Grotesk (body — humanist, strong latin-ext, macrons ā/ē/ū hold at small sizes). link (place once, shared by all 4 pages): ===================================================================== */ /* --------------------------------------------------------------------- 0 · SELF-HOSTED FONTS — @fontsource woff2, latin + latin-ext (LV macrons ā/ē/ī/ū need latin-ext). Files in assets/vendor/fonts/. No Google CDN. --------------------------------------------------------------------- */ @font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/vendor/fonts/sora-latin-ext-500-normal.woff2") format("woff2"); 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: "Sora"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/vendor/fonts/sora-latin-500-normal.woff2") format("woff2"); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/vendor/fonts/sora-latin-ext-600-normal.woff2") format("woff2"); 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: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/vendor/fonts/sora-latin-600-normal.woff2") format("woff2"); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/vendor/fonts/sora-latin-ext-700-normal.woff2") format("woff2"); 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: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/vendor/fonts/sora-latin-700-normal.woff2") format("woff2"); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/vendor/fonts/sora-latin-ext-800-normal.woff2") format("woff2"); 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: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/vendor/fonts/sora-latin-800-normal.woff2") format("woff2"); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/vendor/fonts/hanken-grotesk-latin-ext-400-normal.woff2") format("woff2"); 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: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/vendor/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/vendor/fonts/hanken-grotesk-latin-ext-500-normal.woff2") format("woff2"); 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: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/vendor/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/vendor/fonts/hanken-grotesk-latin-ext-600-normal.woff2") format("woff2"); 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: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/vendor/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/vendor/fonts/hanken-grotesk-latin-ext-700-normal.woff2") format("woff2"); 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: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/vendor/fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2"); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------- 1 · TOKENS --------------------------------------------------------------------- */ :root { /* --- Palette (OKLCH · warm paper + deep ink + confident iron-orange) --- Orange L tuned so white-on-orange AND orange-on-paper both clear AA. white on --c-orange .................. 4.52:1 ✓ (band text, CTA text) --c-orange-ink on paper (small text) . 5.9:1 ✓ (links, ticks-as-text) Large display orange on dark clears AA-large (≥3.0). */ --c-paper: oklch(98.4% 0.006 76); /* warm off-white — page base */ --c-paper-2: oklch(96.2% 0.009 74); /* recessed warm panel */ --c-surface: oklch(99.4% 0.004 80); /* raised card surface */ --c-grey: oklch(94.6% 0.008 70); /* the calm grey band */ --c-grey-2: oklch(91.8% 0.010 68); /* grey band, deeper */ --c-ink: oklch(20.5% 0.016 56); /* near-black warm ink */ --c-ink-2: oklch(26.5% 0.016 56); /* dark elevated */ --c-ink-deep: oklch(15.5% 0.020 54); /* deepest floor — CTA / nav ink */ --c-ink-soft: oklch(35.0% 0.016 58); /* secondary text */ --c-muted: oklch(46.0% 0.018 62); /* captions / meta (AA ~6:1) */ --c-line: oklch(20.5% 0.016 56 / 0.13); --c-line-2: oklch(20.5% 0.016 56 / 0.22); /* card borders, stronger */ /* THE accent — TM logo royal-blue (hue 258). Names kept as --c-orange* so the recolor is a single source-of-truth edit; values are now blue. White rides ON the blue fills; --c-orange-ink carries accent TEXT on light. */ --c-orange: oklch(0.50 0.13 258); /* brand royal-blue — fills, buttons, accents */ --c-orange-ink: oklch(0.45 0.12 258); /* deep blue — accent TEXT on light (AA on paper) */ --c-orange-deep: oklch(0.42 0.12 258); /* pressed / hover */ --c-orange-tint: oklch(0.50 0.13 258 / 0.16); --c-orange-glow: oklch(0.55 0.12 258 / 0.14); --c-band: oklch(0.27 0.05 258); /* deep-navy — facts/CTA bands + footer */ --c-accent-bright: oklch(0.72 0.12 252); /* vivid blue — accent text on navy/dark surfaces */ /* on-dark + on-orange text tokens */ --c-on-dark: oklch(96.4% 0.006 80); --c-on-dark-soft: oklch(96.4% 0.006 80 / 0.70); --c-on-dark-faint: oklch(96.4% 0.006 80 / 0.42); --c-on-dark-line: oklch(96.4% 0.006 80 / 0.16); --c-on-orange: oklch(0.98 0.006 250); /* white — text/icons ON blue & navy fills */ --c-on-orange-soft: oklch(0.98 0.006 250 / 0.82); /* --- Tinted shadows (warm, never neutral grey) --- */ --sh-sm: 0 1px 2px oklch(20% 0.016 56 / 0.06); --sh-md: 0 12px 28px -16px oklch(36% 0.10 44 / 0.34); --sh-lg: 0 34px 64px -30px oklch(34% 0.12 42 / 0.40); --sh-pop: 0 24px 46px -22px oklch(50% 0.17 42 / 0.40); /* --- Type families --- */ --f-display: "Sora", "Segoe UI", system-ui, sans-serif; --f-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; /* --- Fluid type scale (ratio ≈ 1.30, high contrast, few sizes) --- */ --t-display: clamp(2.6rem, 1.5rem + 4.7vw, 5.4rem); /* hero h1 — top end pushed for display/body contrast */ --t-h2: clamp(2.05rem, 1.4rem + 2.9vw, 3.5rem); /* section title */ --t-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem); /* card title */ --t-lead: clamp(1.15rem, 1.04rem + 0.55vw, 1.4rem);/* intro para */ --t-body: 1rem; /* 16px base */ --t-sm: 0.9rem; /* 14.4px */ --t-xs: 0.78rem; /* 12.5px label */ --t-stat: clamp(2.4rem, 1.7rem + 2.6vw, 3.4rem); /* big number */ --t-ghost: clamp(5rem, 16vw, 16rem); /* giant faded word */ /* --- 4pt space scale --- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.75rem; --s-8: 3.5rem; --s-9: 5rem; --s-10: 7rem; --s-11: 9.5rem; /* --- THE CUT — one chamfer system, always the SAME rising top-left edge. --cut : cards, chips, frames, buttons (small built corner) --cut-lg : bands, full-bleed media (large built corner) Anything clipped sets border-radius:0 so corners are never both rounded AND cut. */ --cut: 16px; --cut-lg: 52px; --radius: 3px; --radius-clip: 0; /* rising top-left corner (cards / frames / chips / buttons) */ --clip-card: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); /* rising top-left corner on a BAND scale */ --clip-band: polygon(var(--cut-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-lg)); --maxw: 1280px; --gutter: clamp(1.25rem, 4vw, 2.75rem); --ease: cubic-bezier(.16, 1, .3, 1); /* expo-out, no bounce */ --ease-2: cubic-bezier(.22, .61, .36, 1); --cookie-h: 0px; /* consumed by body padding on mobile */ } /* --------------------------------------------------------------------- 2 · RESET --------------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { font-family: var(--f-body); font-size: var(--t-body); line-height: 1.62; color: var(--c-ink); background: var(--c-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } input, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.0; letter-spacing: -0.025em; } h3 { font-weight: 700; } /* Sora has no italic axis — kill faux-oblique on emphasized display words (Latvian macrons ā/ē/ū slant wrong). Colour carries the emphasis. */ h1 em, h2 em, h3 em, .accent { font-style: normal; } ::selection { background: var(--c-orange); color: var(--c-on-orange); } :focus-visible { outline: 2.5px solid var(--c-orange-ink); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: var(--s-2); z-index: 100; background: var(--c-ink-deep); color: var(--c-on-dark); padding: var(--s-3) var(--s-4); border-radius: var(--radius); font-size: var(--t-sm); font-weight: 600; } .skip-link:focus { left: var(--s-4); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* --------------------------------------------------------------------- 3 · LAYOUT PRIMITIVES + SIGNATURE TICK / SECTION HEAD --------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem); } .section--tight { padding-block: var(--s-8); } .section--airy { padding-block: var(--s-11); } .section--grey { background: var(--c-grey); } .section--flush-top { padding-top: 0; } /* --- THE TICK — orange registration mark, opens every eyebrow --------- A measured ink line with a square orange end-cap. This is the repeating drawing-mark signature, NOT a scatter of orange dots. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); } .eyebrow::before { content: ""; width: 30px; height: 2px; flex-shrink: 0; background: linear-gradient(90deg, var(--c-muted) 0 58%, var(--c-orange-ink) 58% 100%); } /* on dark / orange surfaces the whole tick goes bright */ .on-dark .eyebrow, .eyebrow--light { color: var(--c-on-dark-soft); } .on-dark .eyebrow::before, .eyebrow--light::before { background: linear-gradient(90deg, var(--c-on-dark-faint) 0 58%, var(--c-accent-bright) 58% 100%); } .section-title { font-size: var(--t-h2); margin-top: var(--s-3); max-width: 22ch; text-wrap: balance; } .section-title .accent, .accent { color: var(--c-orange-ink); } .on-dark .accent, .accent--bright { color: var(--c-accent-bright); } /* section head: title left, optional link/meta right (asymmetric) */ .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-5); margin-bottom: var(--s-8); } .section-head__lead { max-width: 56ch; margin-top: var(--s-4); font-size: var(--t-lead); color: var(--c-ink-soft); line-height: 1.55; } /* --------------------------------------------------------------------- 4 · STICKY NAV (+ mobile menu) --------------------------------------------------------------------- */ .site-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-4) var(--gutter); background: oklch(98.4% 0.006 76 / 0.80); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); border-bottom: 1px solid var(--c-line); transition: box-shadow .4s var(--ease), background .4s var(--ease); } .site-nav.is-scrolled { background: oklch(98.4% 0.006 76 / 0.94); box-shadow: var(--sh-md); } .site-nav__logo { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--c-ink); } .site-nav__logo b, .site-nav__logo .dot { color: var(--c-orange-ink); font-weight: 800; } /* TM Būve logo mark — square logo cropped to the houses (drops the baked-in wordmark so it pairs cleanly with the text wordmark beside it) */ .brand-mark { flex: none; width: 46px; height: 37px; object-fit: cover; object-position: center top; } .footer__brand .brand-mark { width: 56px; height: 45px; } .site-nav__links { display: flex; gap: var(--s-6); align-items: center; } .site-nav__links a { position: relative; font-size: var(--t-sm); font-weight: 600; color: var(--c-ink-soft); transition: color .25s var(--ease); } .site-nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--c-orange-ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--c-ink); } .site-nav__links a:hover::after, .site-nav__links a[aria-current="page"]::after { transform: scaleX(1); } .site-nav__toggle { display: none; } /* --------------------------------------------------------------------- 5 · BUTTONS (tactile :active, the built corner, tinted shadow) --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--f-body); font-weight: 700; font-size: var(--t-sm); padding: 0.95em 1.6em; min-height: 48px; /* tap target floor */ border-radius: var(--radius-clip); clip-path: var(--clip-card); /* the built corner reads on every CTA */ white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease), transform .12s var(--ease), box-shadow .3s var(--ease); } .btn svg { width: 1.1em; height: 1.1em; stroke-width: 2.2; } .btn:active { transform: translateY(2px) scale(.995); } /* primary = confident orange (the bold lead — this is v3's energy) */ .btn--primary { background: var(--c-orange); color: var(--c-on-orange); box-shadow: var(--sh-pop); } .btn--primary:hover { background: var(--c-orange-deep); box-shadow: var(--sh-lg); } .btn--primary:active { box-shadow: var(--sh-sm); } /* dark = deep ink secondary */ .btn--dark { background: var(--c-ink-deep); color: var(--c-on-dark); box-shadow: var(--sh-md); } .btn--dark:hover { background: var(--c-orange); color: var(--c-on-orange); box-shadow: var(--sh-pop); } /* ghost = outline, square (outline + clip fight) */ .btn--ghost { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.6px var(--c-line-2); clip-path: none; } .btn--ghost:hover { box-shadow: inset 0 0 0 1.6px var(--c-ink); } /* ghost on dark surfaces (hero) */ .on-dark .btn--ghost { color: var(--c-on-dark); box-shadow: inset 0 0 0 1.6px var(--c-on-dark-line); } .on-dark .btn--ghost:hover { box-shadow: inset 0 0 0 1.6px var(--c-on-dark); background: oklch(96% 0.006 80 / 0.06); } /* hero secondary: the faint --c-on-dark-line outline disappeared on the deep ink hero. Frosted fill + a clearly-visible border so it reads as a real button beside the orange primary, then fills solid on hover. */ .hero .btn--ghost { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.6px var(--c-line-2); } .hero .btn--ghost:hover { background: var(--c-ink); color: var(--c-on-dark); box-shadow: inset 0 0 0 1.6px var(--c-ink); } /* text link with underline wipe */ .link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--t-sm); color: var(--c-ink); background-image: linear-gradient(var(--c-orange-ink), var(--c-orange-ink)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 3px; transition: background-size .3s var(--ease), color .25s var(--ease); } .link-arrow:hover { color: var(--c-orange-ink); background-size: 0% 2px; } .link-arrow svg { width: 1em; height: 1em; stroke-width: 2.2; transition: transform .3s var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } /* --------------------------------------------------------------------- 6 · HERO — confident, dark, layered. ORIGINAL composition: · giant faded background word (energy from the template, not a clone) · stacked confident headline + orange outcome word · offset photo FRAME with the built corner + a soft orange glow corner · a floating "fixed price" assurance chip (replaces fake stat badges) No excavator cutout, no fabricated stats. --------------------------------------------------------------------- */ .hero { position: relative; background: var(--c-paper); color: var(--c-ink); overflow: hidden; } /* one soft orange light source, top-right (depth, not a gradient slab) */ .hero::before { content: ""; position: absolute; top: -16%; right: -10%; width: clamp(360px, 46vw, 680px); aspect-ratio: 1; background: radial-gradient(circle, var(--c-orange-glow), transparent 64%); pointer-events: none; z-index: 0; } /* the giant faded word, bottom-left — sized + inset to sit FULLY in-frame */ .hero__ghost { position: absolute; left: clamp(0.5rem, 2vw, 1.5rem); bottom: 0.04em; z-index: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 13vw, 12rem); line-height: 0.8; letter-spacing: -0.05em; color: oklch(0.50 0.13 258 / 0.07); white-space: nowrap; pointer-events: none; user-select: none; } .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 4.5rem); min-height: clamp(440px, 60vh, 560px); } .hero__eyebrow { margin-bottom: var(--s-5); } .hero__title { font-size: var(--t-display); line-height: 0.94; letter-spacing: -0.035em; } .hero__title .accent { color: var(--c-orange-ink); } /* word/line wrapper used by JS clip-reveal */ .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: block; } .hero__sub { margin-top: var(--s-6); max-width: 46ch; font-size: var(--t-lead); line-height: 1.55; color: var(--c-ink-soft); } .hero__cta { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-4); } .hero__reassurance { margin-top: var(--s-4); font-size: var(--t-sm); font-weight: 500; color: var(--c-muted); } /* media block — offset frame + assurance chip */ .hero__media { position: relative; align-self: stretch; min-height: clamp(380px, 50vw, 540px); } .hero__frame { position: absolute; inset: 0 0 0 auto; width: 100%; height: 100%; border-radius: var(--radius-clip); overflow: hidden; clip-path: var(--clip-band); box-shadow: var(--sh-lg); } .hero__frame img, .hero__frame video { width: 100%; height: 100%; object-fit: cover; } .hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, oklch(15% 0.02 54 / 0.36), transparent 56%); } /* the floating assurance chip — fixed price, real promise (not a fake stat) */ .hero__chip { position: absolute; right: clamp(0.75rem, 2vw, 1.25rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 2; max-width: 260px; background: var(--c-surface); color: var(--c-ink); padding: var(--s-5) var(--s-5); border-radius: var(--radius-clip); clip-path: var(--clip-card); box-shadow: var(--sh-lg); } .hero__chip .ic { width: 44px; height: 44px; border-radius: var(--radius-clip); clip-path: var(--clip-card); background: var(--c-orange); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-3); } .hero__chip .ic svg { width: 22px; height: 22px; stroke: var(--c-on-orange); fill: none; stroke-width: 2.4; } .hero__chip b { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; display: block; } .hero__chip span { display: block; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-muted); line-height: 1.45; } /* compact hero for inner pages (about / services / contact) — same shell, lighter chrome, single column text-forward */ .hero--inner .wrap { grid-template-columns: 1fr; min-height: 0; padding-block: clamp(3rem, 6vw, 4.5rem); } .hero--inner .hero__title { max-width: 18ch; } .hero--inner .hero__sub { max-width: 56ch; } /* --------------------------------------------------------------------- 7 · TRUST TICKER MARQUEE (facts, not keywords) — quiet dark strip --------------------------------------------------------------------- */ .marquee { background: var(--c-paper-2); color: var(--c-ink); padding-block: var(--s-4); overflow: hidden; white-space: nowrap; user-select: none; border-block: 1px solid var(--c-line); } .marquee__track { display: inline-flex; align-items: center; font-family: var(--f-display); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: 0.02em; text-transform: uppercase; will-change: transform; } .marquee__item { display: inline-flex; align-items: center; gap: var(--s-5); padding-inline: var(--s-5); color: inherit; } .marquee__item .sep { color: var(--c-orange); font-size: 1.1em; line-height: 0; } /* the ticker words double as quick-jump links (pause-on-hover lets you click) */ a.marquee__item { cursor: pointer; transition: color .2s var(--ease); } a.marquee__item:hover, a.marquee__item:focus-visible { color: var(--c-orange); } /* hash-scroll targets clear the sticky nav so the heading isn't tucked under it */ #pakalpojumi, #darbi, #kapec, #fakti, #jaunbuve, #renovacija, #jumti, #pamati, #apdare { scroll-margin-top: 88px; } /* --------------------------------------------------------------------- 8 · FACTS BAND (the loud orange trust strip — v3's energy, honest facts) --------------------------------------------------------------------- */ .facts { background: var(--c-band); color: var(--c-on-orange); clip-path: var(--clip-band); } .facts .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); padding-block: clamp(1.75rem, 3vw, 2.4rem); } .fact { display: flex; align-items: center; gap: var(--s-4); } .fact svg { width: 34px; height: 34px; stroke: var(--c-on-orange); fill: none; stroke-width: 1.7; flex-shrink: 0; } .fact b { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; display: block; line-height: 1.1; } .fact span { font-size: var(--t-sm); color: var(--c-on-orange-soft); line-height: 1.35; } /* divider between facts (desktop) */ .fact + .fact { border-left: 1px solid oklch(96% 0.006 80 / 0.18); padding-left: var(--s-5); } /* light divider on navy */ /* --------------------------------------------------------------------- 9 · LINE-ICON SERVICE GRID (.svcs) — hairline cells, dark-on-hover, job numerals, one permanently-active orange "start" cell --------------------------------------------------------------------- */ .svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line-2); border: 1px solid var(--c-line-2); border-radius: var(--radius-clip); clip-path: var(--clip-card); overflow: hidden; } .svc { position: relative; background: var(--c-surface); color: var(--c-ink); padding: clamp(1.75rem, 3vw, 2.6rem) clamp(1.5rem, 2.4vw, 2.1rem); transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); } .svc__no { position: absolute; top: var(--s-5); right: var(--s-5); font-family: var(--f-display); font-weight: 800; font-size: var(--t-sm); letter-spacing: 0.04em; color: var(--c-orange-ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; padding-bottom: 2px; border-bottom: 1.5px solid var(--c-orange-tint); } .svc__ic { width: 50px; height: 50px; color: var(--c-orange-ink); margin-bottom: var(--s-5); } .svc__ic svg { width: 50px; height: 50px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .svc h3 { font-size: var(--t-h3); font-weight: 700; margin-bottom: var(--s-2); } .svc p { color: var(--c-ink-soft); font-size: var(--t-sm); line-height: 1.55; } .svc:hover { background: var(--c-ink); color: var(--c-on-dark); transform: translateY(-3px); z-index: 2; box-shadow: var(--sh-pop); } .svc:hover p { color: var(--c-on-dark-soft); } .svc:hover .svc__ic { color: var(--c-orange); } .svc:hover .svc__no { color: var(--c-on-dark-faint); border-bottom-color: var(--c-on-dark-line); } /* the one orange "let's start" cell that closes the grid */ .svc--cta { background: var(--c-orange); color: var(--c-on-orange); } .svc--cta .svc__ic, .svc--cta:hover .svc__ic { color: var(--c-on-orange); } .svc--cta h3 { color: var(--c-on-orange); } .svc--cta p { color: var(--c-on-orange-soft); } .svc--cta .svc__no { color: var(--c-on-orange-soft); border-bottom-color: oklch(99% 0.01 80 / 0.4); } .svc--cta:hover { background: var(--c-orange-deep); color: var(--c-on-orange); } .svc--cta:hover p { color: var(--c-on-orange-soft); } /* --------------------------------------------------------------------- 10 · WHY BAND — dark, giant faded background WORD + numbered reason rows (fuses v3's ghost word with v2's editorial numbered rows) --------------------------------------------------------------------- */ .why { position: relative; overflow: hidden; background: var(--c-paper-2); color: var(--c-ink); clip-path: var(--clip-band); } .why__ghost { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--f-display); font-weight: 800; /* sized so the full "TM BŪVE" sits inside the band, not clipped both sides */ font-size: clamp(2.6rem, 10.5vw, 9.5rem); line-height: 0.8; letter-spacing: -0.05em; color: oklch(0.50 0.13 258 / 0.08); white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; } .why .wrap { position: relative; z-index: 1; padding-block: var(--s-10); } .why .section-head { margin-bottom: var(--s-8); } .reasons { display: grid; gap: 0; } .reason { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: baseline; padding: var(--s-7) 0; border-top: 1px solid var(--c-line); } .reason:last-child { border-bottom: 1px solid var(--c-line); } .reason__num { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); line-height: 0.8; color: oklch(0.50 0.13 258 / 0.22); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .reason__text h3 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 700; margin-bottom: var(--s-3); max-width: 24ch; color: var(--c-ink); } .reason__text p { font-size: var(--t-lead); color: var(--c-ink-soft); line-height: 1.5; max-width: 56ch; } /* light variant (some pages run the reasons on paper, not dark) */ .why--light { background: transparent; color: var(--c-ink); clip-path: none; } .why--light .why__ghost { color: oklch(20% 0.016 56 / 0.05); } .why--light .reason { border-top-color: var(--c-line); } .why--light .reason:last-child { border-bottom-color: var(--c-line); } .why--light .reason__num { color: var(--c-line-2); } .why--light .reason__text h3 { color: var(--c-ink); } .why--light .reason__text p { color: var(--c-ink-soft); } /* --------------------------------------------------------------------- 11 · PROCESS TIMELINE (vertical numbered rail — on-site detail, sequence) --------------------------------------------------------------------- */ .timeline { display: grid; gap: 0; } .timeline__step { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.75rem); padding: var(--s-6) 0; border-top: 1px solid var(--c-line); } .timeline__step:last-child { border-bottom: 1px solid var(--c-line); } .timeline__num { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem); line-height: 0.85; color: var(--c-orange-ink); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; min-width: 2.4ch; } .timeline__body { align-self: center; } .timeline__body h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 700; margin-bottom: var(--s-2); } .timeline__body p { font-size: var(--t-body); color: var(--c-ink-soft); line-height: 1.6; max-width: 60ch; } /* --------------------------------------------------------------------- 12 · WHO-WE-ARE TWO-PHOTO SPLIT (trust first) — dark panel, layered photos --------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; background: var(--c-paper-2); color: var(--c-ink); border-radius: var(--radius-clip); overflow: hidden; clip-path: var(--clip-band); } .split--reverse { grid-template-columns: 1fr 1.05fr; } .split--reverse .split__photos { order: 2; } .split__photos { position: relative; min-height: clamp(380px, 46vw, 540px); } .split__photos img { position: absolute; object-fit: cover; } .split__photos .photo-a { width: 66%; height: 72%; top: 0; left: 0; } .split__photos .photo-b { width: 52%; height: 56%; right: 20px; bottom: 20px; border: 6px solid var(--c-paper-2); box-shadow: var(--sh-md); } .split__body { padding: clamp(2rem, 4vw, 3.4rem); align-self: center; } .split__body .eyebrow { color: var(--c-muted); } .split__body .eyebrow::before { background: linear-gradient(90deg, var(--c-muted) 0 58%, var(--c-orange-ink) 58% 100%); } .split__body h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); font-weight: 800; line-height: 1.04; margin: var(--s-3) 0 var(--s-4); } .split__body p { color: var(--c-ink-soft); font-size: var(--t-body); line-height: 1.7; margin-bottom: var(--s-4); } .split__body p:last-of-type { margin-bottom: 0; } /* confident lead line: states the standard, in the owner's voice */ .split__body .split__lead { color: var(--c-ink); font-size: var(--t-lead); line-height: 1.55; border-left: 2.5px solid var(--c-orange-ink); padding-left: var(--s-4); margin-bottom: var(--s-5); } /* honest stat row under the split body */ .split__stats { display: flex; flex-wrap: wrap; gap: var(--s-7); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); } .stat__num { font-family: var(--f-display); font-weight: 800; font-size: var(--t-stat); line-height: 1; color: var(--c-ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .stat__num .unit { color: var(--c-orange-ink); } .stat__num--word { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: -0.02em; } .stat__label { font-size: var(--t-sm); color: var(--c-ink-soft); line-height: 1.45; margin-top: var(--s-1); max-width: 26ch; } /* --------------------------------------------------------------------- 13 · ASYMMETRIC PROJECT GRID (hover zoom) — raw photos stay SQUARE (the cut is reserved for structure, so photos read as photos) --------------------------------------------------------------------- */ .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(200px, 20vw, 260px); grid-auto-flow: dense; gap: var(--s-4); } .project-card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c-paper-2); } .project-card--wide { grid-column: span 2; } .project-card--tall { grid-row: span 2; } .project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .project-card:hover img { transform: scale(1.06); } .project-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, oklch(15% 0.02 54 / 0.86)); display: flex; align-items: flex-end; padding: var(--s-5); opacity: 0.92; transition: opacity .4s var(--ease); } .project-card:hover .project-card__overlay { opacity: 1; } .project-card__overlay b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--c-on-dark); transform: translateY(6px); transition: transform .4s var(--ease); } .project-card:hover .project-card__overlay b { transform: translateY(0); } .project-card__overlay span { display: block; color: var(--c-accent-bright); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--s-1); } /* --------------------------------------------------------------------- 14 · CTA BAND (the loud orange ask) — built corner, confident close --------------------------------------------------------------------- */ .cta-band { background: var(--c-band); color: var(--c-on-orange); padding-block: var(--s-9); clip-path: var(--clip-band); overflow: hidden; position: relative; } .cta-band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-6); } .cta-band h2 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); font-weight: 800; line-height: 1.02; max-width: 18ch; } .cta-band .cta-band__sub { color: var(--c-on-orange-soft); margin-top: var(--s-3); font-size: var(--t-body); line-height: 1.6; max-width: 40ch; } /* on orange, the primary button flips to deep ink for max contrast */ .cta-band .btn--primary { background: var(--c-on-dark); color: var(--c-band); box-shadow: var(--sh-lg); } .cta-band .btn--primary:hover { background: var(--c-orange); color: var(--c-on-orange); } /* dark CTA variant (when the page wants a quiet close, not a loud one) */ .cta-band--dark { background: var(--c-band); color: var(--c-on-dark); } .cta-band--dark h2 .accent { color: var(--c-accent-bright); } .cta-band--dark .cta-band__sub { color: var(--c-on-dark-soft); } .cta-band--dark .btn--primary { background: var(--c-on-dark); color: var(--c-band); } .cta-band--dark .btn--primary:hover { background: var(--c-orange); color: var(--c-on-orange); } /* --------------------------------------------------------------------- 15 · FORM --------------------------------------------------------------------- */ .form { display: grid; gap: var(--s-4); max-width: 560px; } .form__row { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; } .field { display: grid; gap: var(--s-2); } .field label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } .field input, .field textarea { width: 100%; padding: 0.9em 1em; min-height: 48px; background: var(--c-surface); border: 1px solid var(--c-line-2); border-radius: var(--radius); font-size: var(--t-body); color: var(--c-ink); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: var(--c-muted); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--c-orange-ink); box-shadow: 0 0 0 3px var(--c-orange-tint); } .field textarea { resize: vertical; min-height: 140px; } .form .btn { justify-self: start; margin-top: var(--s-2); } /* --- contact page: phone-led card + secondary form (kontakti.html) ---- Desktop = two columns (call card | form). On ≤880px it collapses to a single column with the call card ordered first (rules in §18). */ .contact-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(1.5rem, 3.5vw, 3.25rem); align-items: start; } .contact-form { align-self: start; } .contact-form .eyebrow, .contact-info .eyebrow { margin-bottom: var(--s-4); } .contact-form__intro { font-size: var(--t-body); color: var(--c-ink-soft); line-height: 1.6; margin-bottom: var(--s-5); max-width: 48ch; } .contact-form .form { max-width: none; } /* the call card — orange-cornered surface, the loud primary path */ .contact-info { background: var(--c-surface); color: var(--c-ink); padding: clamp(1.75rem, 3vw, 2.6rem); border: 1px solid var(--c-line-2); border-radius: var(--radius-clip); clip-path: var(--clip-card); box-shadow: var(--sh-md); } .contact-info__phone { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem); line-height: 1; letter-spacing: -0.03em; color: var(--c-ink); margin: var(--s-2) 0 var(--s-4); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; transition: color .25s var(--ease); } .contact-info__phone:hover { color: var(--c-orange-ink); } .contact-info__re { font-size: var(--t-sm); color: var(--c-ink-soft); line-height: 1.6; margin-bottom: var(--s-5); max-width: 42ch; } .contact-info .btn { width: 100%; } .contact-info__list { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); display: grid; gap: var(--s-4); } .contact-info__list li { display: flex; align-items: flex-start; gap: var(--s-4); } .contact-info__list svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; stroke: var(--c-orange-ink); fill: none; } .contact-info__list span { display: flex; flex-direction: column; font-size: var(--t-sm); color: var(--c-ink-soft); line-height: 1.4; } .contact-info__list b { font-family: var(--f-body); font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 2px; } .contact-info__list a { color: var(--c-ink); font-weight: 600; transition: color .25s var(--ease); } .contact-info__list a:hover { color: var(--c-orange-ink); } /* --------------------------------------------------------------------- 16 · FOOTER --------------------------------------------------------------------- */ .footer { background: var(--c-band); color: var(--c-on-dark-soft); padding-block: var(--s-8) var(--s-6); } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-7); padding-bottom: var(--s-6); border-bottom: 1px solid var(--c-on-dark-line); } .footer__brand .site-nav__logo { font-size: 1.6rem; color: var(--c-on-dark); } .footer__brand .site-nav__logo b { color: var(--c-accent-bright); } /* bright blue reads on the navy footer */ .footer__brand p { color: var(--c-on-dark-soft); font-size: var(--t-sm); margin-top: var(--s-3); max-width: 34ch; } .footer__col h4 { font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-on-dark-faint); margin-bottom: var(--s-3); } .footer__col a, .footer__col p { display: block; font-size: var(--t-sm); color: var(--c-on-dark-soft); margin-bottom: var(--s-2); transition: color .25s var(--ease); } .footer__col a:hover { color: var(--c-accent-bright); } .footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-5); font-size: var(--t-xs); color: var(--c-on-dark-faint); } .footer__bar b { color: var(--c-on-dark); font-weight: 600; } .footer__legal { display: inline-flex; flex-wrap: wrap; gap: var(--s-4); } .footer__legal a { color: var(--c-on-dark-soft); transition: color .25s var(--ease); } .footer__legal a:hover { color: var(--c-accent-bright); } /* cookie banner (EU pack) — slim built-corner bar */ .cookie-banner { position: fixed; left: var(--s-4); right: auto; bottom: var(--s-4); z-index: 60; max-width: 440px; margin-inline: 0; background: var(--c-ink); color: var(--c-on-dark); padding: var(--s-3) var(--s-4); border-radius: var(--radius-clip); clip-path: var(--clip-card); box-shadow: var(--sh-lg); display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-4); font-size: var(--t-sm); } .cookie-banner p { color: var(--c-on-dark-soft); flex: 1 1 auto; } .cookie-banner p a { color: var(--c-accent-bright); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .cookie-banner p a:hover { color: var(--c-on-dark); } .cookie-banner .btn { flex-shrink: 0; } /* --------------------------------------------------------------------- 17 · REVEAL (JS sets initial; CSS fallback when JS/motion off) --------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(30px); } .no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* ===================================================================== 18 · RESPONSIVE — MOBILE MIRRORS DESKTOP PROPORTIONALLY Gallery + grid segments (facts, services, why, projects) stay MULTI-COLUMN, scaled down. Only text-heavy side-by-sides stack. ===================================================================== */ /* --- TABLET / SMALL DESKTOP ------------------------------------------ */ @media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } /* hero text + media stack here (text-heavy side-by-side) */ .hero .wrap { grid-template-columns: 1fr; min-height: 0; gap: var(--s-7); } .hero__media { min-height: clamp(340px, 60vw, 460px); } } /* --- contact split collapses; tap-to-call card first ----------------- Stacks at 980 (not 880): below that the two columns get cramped enough that the form ran off the right edge on tablets. */ @media (max-width: 980px) { .contact-split { display: flex; flex-direction: column; } .contact-info { order: -1; } } /* ===================================================================== --- PHONE (≤620px) — proportional mirror, NOT a single stacked column ===================================================================== */ @media (max-width: 620px) { :root { --cookie-h: 84px; --gutter: 1.1rem; } body { padding-bottom: var(--cookie-h); } /* ---- MOBILE NAV: working menu, icon phone pill, hamburger→X -------- */ .site-nav { flex-wrap: wrap; } .site-nav__links { display: none; } .site-nav.is-open .site-nav__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); flex-basis: 100%; order: 3; padding-top: var(--s-4); margin-top: var(--s-4); border-top: 1px solid var(--c-line); background: var(--c-paper); } .site-nav.is-open { background: var(--c-paper); backdrop-filter: none; -webkit-backdrop-filter: none; } .site-nav.is-open .site-nav__links a { font-size: var(--t-lead); font-weight: 600; padding: var(--s-2) 0; width: 100%; } .site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 46px; height: 46px; border-radius: var(--radius); box-shadow: inset 0 0 0 1.6px var(--c-line-2); } .site-nav__toggle svg { width: 22px; height: 22px; stroke: var(--c-ink); stroke-width: 2; fill: none; } .site-nav.is-open .site-nav__toggle svg { opacity: 0; } .site-nav.is-open .site-nav__toggle::before, .site-nav.is-open .site-nav__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: var(--c-ink); border-radius: 2px; } .site-nav.is-open .site-nav__toggle::before { transform: translate(-50%, -50%) rotate(45deg); } .site-nav.is-open .site-nav__toggle::after { transform: translate(-50%, -50%) rotate(-45deg); } /* shrink the nav phone pill to icon-only so logo+pill+burger fit */ .site-nav > .btn--primary, .site-nav > .btn--dark { padding: 0.7em 0.9em; gap: 0; font-size: 0; } .site-nav > .btn--primary svg, .site-nav > .btn--dark svg { width: 20px; height: 20px; font-size: 1rem; } /* ---- HERO: stacks (text-heavy), media keeps its layered chip ------- */ .hero__ghost { font-size: clamp(3rem, 22vw, 6rem); } .hero .wrap { gap: var(--s-6); padding-block: var(--s-7) var(--s-7); } .hero__title { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 0.96; } .hero__sub { font-size: var(--t-body); } .hero__media { min-height: 300px; margin-top: var(--s-2); } .hero__chip { right: 0.6rem; bottom: 0.6rem; max-width: 188px; padding: var(--s-4); } .hero__chip .ic { width: 38px; height: 38px; margin-bottom: var(--s-2); } .hero__chip b { font-size: 0.98rem; } .hero__chip span { font-size: var(--t-xs); } .hero__cta .btn { flex: 1 1 auto; } /* ---- section rhythm: scale padding, keep tempo -------------------- */ .section { padding-block: var(--s-8); } .section--airy { padding-block: var(--s-9); } .section-head { margin-bottom: var(--s-6); } .section-title { max-width: none; } /* ---- FACTS: stay a 3-up row, stacked icon (proportional) ---------- */ .facts .wrap { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); padding-block: var(--s-5); } .fact { flex-direction: column; text-align: center; gap: var(--s-2); } .fact + .fact { border-left: none; padding-left: 0; } .fact svg { width: 26px; height: 26px; } .fact b { font-size: 0.84rem; } .fact span { font-size: 0.72rem; line-height: 1.3; } /* ---- SERVICES: stay a 2-up grid (proportional) -------------------- */ .svcs { grid-template-columns: 1fr 1fr; } .svc { padding: var(--s-5) var(--s-4); } .svc h3 { font-size: 1.1rem; } .svc p { font-size: var(--t-xs); line-height: 1.45; } .svc__ic { width: 38px; height: 38px; margin-bottom: var(--s-3); } .svc__ic svg { width: 38px; height: 38px; } .svc__no { top: var(--s-3); right: var(--s-3); } /* ---- WHY: reasons stay readable, stack the num above text --------- */ .why .wrap { padding-block: var(--s-8); } .why__ghost { font-size: clamp(2rem, 15vw, 4.5rem); } .reason { grid-template-columns: 1fr; gap: var(--s-2); padding-block: var(--s-6); } .reason__num { font-size: clamp(2.6rem, 16vw, 3.6rem); } /* ---- WHY as a CARD GRID variant (when a page uses .why--grid) ----- */ .why--grid .reasons { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); } .why--grid .reason { display: block; border: none; padding-block: 0; } .why--grid .reason__num { font-size: 2.2rem; display: block; margin-bottom: var(--s-2); } /* ---- TIMELINE: stack num above text ------------------------------- */ .timeline__step { grid-template-columns: 1fr; gap: var(--s-3); } /* ---- SPLIT: stacks (text-heavy), one strong photo ----------------- */ .split, .split--reverse { grid-template-columns: 1fr; clip-path: none; } .split--reverse .split__photos { order: 0; } .split__photos { display: block; min-height: 0; aspect-ratio: 16 / 10; } .split__photos .photo-a { position: static; width: 100%; height: 100%; } .split__photos .photo-b { display: none; } .split__body { padding: var(--s-6) var(--s-5); } .split__stats { gap: var(--s-5); } /* ---- PROJECT GALLERY: stay 2-up, lead tile spans both ------------- */ .project-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(140px, 38vw, 190px); } .project-card--wide { grid-column: span 2; grid-row: auto; } .project-card--tall { grid-column: auto; grid-row: auto; } .project-card__overlay { opacity: 0.94; padding: var(--s-4); } .project-card__overlay b { font-size: 0.95rem; } .project-card__overlay span { font-size: 0.66rem; } /* ---- FORM / FOOTER ------------------------------------------------ */ .form__row { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); } .footer__brand { grid-column: 1 / -1; } .footer__col a { padding-block: var(--s-1); } /* ---- CTA band stacks; full-width primary ------------------------- */ .cta-band { clip-path: none; padding-block: var(--s-8); } .cta-band .wrap { flex-direction: column; align-items: flex-start; } .cta-band .btn { width: 100%; } /* clip-bands lose the big cut on phone (looks like a defect at small w) */ .facts, .why, .svcs { clip-path: none; } .svcs { border-radius: var(--radius); } /* ---- cookie bar: slim single line -------------------------------- */ .cookie-banner { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); padding: var(--s-3) var(--s-4); font-size: var(--t-xs); gap: var(--s-3); } .cookie-banner .btn { padding: 0.6em 1.1em; min-height: 42px; } } /* ===================================================================== --- SMALL PHONE (≤400px) — tighten, never collapse the grids ===================================================================== */ @media (max-width: 400px) { :root { --gutter: 0.95rem; } .site-nav__logo { font-size: 1.2rem; } .hero__title { font-size: clamp(2.3rem, 12vw, 2.9rem); } .section-title { font-size: clamp(1.7rem, 9vw, 2.1rem); } /* facts stay 3-up even here (proportional requirement) */ .fact b { font-size: 0.76rem; } .fact span { font-size: 0.66rem; } .footer__bar { flex-direction: column; gap: var(--s-2); } } /* ===================================================================== 19 · PREMIUM ELEVATION LAYER — texture, ambient canvas, the expand stage, documentary timeline photos, CTA ghost. Extends the v4 system (same tokens, same cut, same tick) — nothing above this line changed except the --t-display top end. ===================================================================== */ /* --- film grain — global, fixed, 2.5% (SVG feTurbulence data-URI) ----- */ body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 240px 240px; } /* --- ambient WebGL canvas (dark bands only; JS-injected) -------------- */ /* the solid --c-band background underneath stays as the no-WebGL fallback */ .facts { position: relative; } .facts .wrap, .cta-band .wrap { position: relative; z-index: 1; } .ambient-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } /* --- blueprint hairline grid — ONE light section (the process strip: blueprint = planning). Barely visible, fades out top + bottom. ---- */ .section--blueprint { background-image: repeating-linear-gradient(0deg, oklch(20.5% 0.016 56 / 0.055) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, oklch(20.5% 0.016 56 / 0.055) 0 1px, transparent 1px 56px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); } /* --- CTA-band ghost word — outline stroke (no fill) over the navy ----- */ .cta-band__ghost { position: absolute; right: -0.04em; bottom: -0.08em; z-index: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 13vw, 12rem); line-height: 0.8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px oklch(96% 0.006 80 / 0.10); white-space: nowrap; pointer-events: none; user-select: none; } /* --- documentary timeline photos (process strip) ---------------------- Framed like structure (the cut), not like gallery photos — they sit inside a numbered job card, same language as the hero frame. */ .timeline__photo { grid-column: 1 / -1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-clip); clip-path: var(--clip-card); margin-bottom: var(--s-4); } .timeline__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .timeline__step:hover .timeline__photo img { transform: scale(1.04); } /* --- showcase tiles: slower, calmer zoom (premium = restraint) -------- */ .project-card img { transition: transform 1.4s var(--ease); } .project-card:hover img { transform: scale(1.04); } /* --- THE EXPAND STAGE — framed photo grows to own the viewport -------- Default CSS = static full-bleed (no-JS / reduced-motion fallback). Desktop JS (app.js) scales the pre-sized media from 0.46 → 1 under a pinned, scrubbed ScrollTrigger — transform-only, stays on the GPU. */ .expand { position: relative; overflow: clip; } .expand__stage { position: relative; display: grid; place-items: center; min-height: 100vh; } .expand__label { position: absolute; top: 13vh; left: 0; right: 0; z-index: 2; text-align: center; font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); pointer-events: none; } .expand__media { position: relative; width: 100%; height: 100vh; margin: 0; overflow: hidden; will-change: transform; } .expand__media img { width: 100%; height: 100%; object-fit: cover; } /* closing line — white on a dark scrim (AA over any photo) */ .expand__close { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--s-4); padding: clamp(1.5rem, 5vw, 4rem); background: linear-gradient(180deg, transparent 42%, oklch(15% 0.02 54 / 0.74)); color: var(--c-on-dark); } .expand__close p { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; text-wrap: balance; } .expand__close .expand__link { color: var(--c-on-dark); background-image: linear-gradient(var(--c-accent-bright), var(--c-accent-bright)); } .expand__close .expand__link:hover { color: var(--c-accent-bright); } /* static desktop fallback: the label would sit ON the full-bleed photo — hide it there; the scrim caption carries the words instead */ @media (min-width: 901px) and (prefers-reduced-motion: reduce) { .expand__label { display: none; } } .no-js .expand__label { display: none; } /* mobile: no pin, no scrub — a clean full-width image with the caption */ @media (max-width: 900px) { .expand__stage { display: block; min-height: 0; padding-top: var(--s-7); } .expand__label { position: static; margin-bottom: var(--s-5); } .expand__media { height: clamp(300px, 72vw, 480px); } .expand__close { padding: var(--s-5); } }