/* ========================================================================== ALT PLACAS — base.css Design tokens, global ground, fixed layers (background / grid / noise), preloader and typography primitives. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS Palette is drawn from the company's own job-site material language: plaster bone, graphite ink, galvanised steel, the green of the crew's helmets and of the laser level lines visible in the site photography. -------------------------------------------------------------------------- */ :root { /* -- light ground -------------------------------------------------------- */ --bone: #F1EDE6; --bone-2: #E8E3DA; --bone-3: #DFD9CE; --line: #D6CFC2; --line-soft: #E2DCD1; /* -- dark ground --------------------------------------------------------- */ --ink: #14120F; --ink-2: #1C1915; --ink-3: #29251F; --line-dark: rgba(241, 237, 230, 0.12); --line-dark-2: rgba(241, 237, 230, 0.06); /* -- type ---------------------------------------------------------------- */ --tx: #14120F; --tx-soft: #55504A; --tx-mute: #8A8378; --tx-inv: #F1EDE6; --tx-inv-soft: #A79F92; --tx-inv-mute: #6F6961; /* -- brand --------------------------------------------------------------- */ --green: #2F5D50; /* institutional — buttons, primary accents */ --green-deep: #1E3D34; /* pressed / hover */ --green-tint: #E4EDE8; --laser: #4ADE80; /* precision accent — hairlines, ticks, markers */ --laser-dim: #34C56B; --steel: #9AA3A6; /* galvanised profile grey */ /* -- motion -------------------------------------------------------------- */ --ease: cubic-bezier(0.23, 1, 0.32, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.7s; /* -- structure ----------------------------------------------------------- */ --shell: 1380px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --nav-h: 72px; /* Preserved verbatim from the reference nav treatment. `liquid-glass()` is a non-standard function and is intentionally kept here as source fidelity; the effective rendering is applied through --fx-supported below. */ --fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25); --fx-supported: blur(14px) saturate(1.25); } /* -------------------------------------------------------------------------- 2. RESET / GROUND -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; /* Lenis owns scrolling */ } body { margin: 0; overflow-x: hidden; background: var(--bone); color: var(--tx); font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.no-scroll { overflow: hidden; height: 100vh; } /* Lenis requirements — inlined so the scroll container behaves without an extra network request. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } /* The reference fades the whole in. Applied here to the content layer instead: the preloader is itself a child of , and a body-level opacity would hide the very thing that is supposed to be covering the page. */ .js-on .site-layer { opacity: 0; } .js-on body.is-ready .site-layer { opacity: 1; } ::selection { background: var(--ink); color: var(--bone); } img, video, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--laser); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10001; background: var(--ink); color: var(--bone); padding: 0.85rem 1.4rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; } .skip-link:focus { left: 1rem; top: 1rem; } /* -------------------------------------------------------------------------- 3. TYPOGRAPHY PRIMITIVES -------------------------------------------------------------------------- */ .font-display { font-family: 'Syncopate', 'Plus Jakarta Sans', sans-serif; } .font-head { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; } .font-serif { font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; } .font-body { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; } /* Eyebrow / kicker label — the recurring "technical tag" of the whole page. */ .eyebrow { font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: clamp(0.56rem, 0.74vw, 0.68rem); letter-spacing: 0.34em; text-transform: uppercase; color: var(--tx-mute); display: inline-flex; align-items: center; gap: 0.85rem; } .eyebrow::before { content: ''; width: 2.25rem; height: 2px; background: var(--laser); flex: none; } .eyebrow.is-inv { color: var(--tx-inv-mute); } .eyebrow.no-rule::before { display: none; } /* Section index number — "01 / 08" style */ .sec-index { font-family: 'Syncopate', sans-serif; font-weight: 400; font-size: 0.62rem; letter-spacing: 0.28em; color: var(--tx-mute); } /* Display headline. Tight, structural, slightly condensed tracking. */ .h-display { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 300; line-height: 0.94; letter-spacing: -0.035em; text-wrap: balance; } .h-display strong { font-weight: 700; letter-spacing: -0.04em; } .h-display em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; } .lede { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.65; color: var(--tx-soft); font-weight: 300; } .lede.is-inv { color: var(--tx-inv-soft); } /* Small print / meta */ .meta { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-mute); font-weight: 500; } /* -------------------------------------------------------------------------- 4. LAYOUT SHELL -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .section.is-dark { border-bottom-color: var(--line-dark); } /* Hairline rule used between blocks */ .rule { height: 1px; background: var(--line); border: 0; margin: 0; } .rule.is-dark { background: var(--line-dark); } /* -------------------------------------------------------------------------- 5. FIXED BACKGROUND LAYER A soft plaster-grain wash that fades out at 80% viewport height, exactly as the reference: the page content scrolls over a background that never moves. -------------------------------------------------------------------------- */ .bg-layer { position: fixed; inset: 0 0 auto 0; top: 0; width: 100%; height: 100vh; height: 100svh; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent); mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent); } .bg-layer__wash { position: absolute; inset: 0; background: radial-gradient(120% 80% at 12% 0%, rgba(74, 222, 128, 0.055) 0%, transparent 55%), radial-gradient(90% 70% at 92% 12%, rgba(47, 93, 80, 0.075) 0%, transparent 60%), radial-gradient(140% 90% at 50% 100%, rgba(20, 18, 15, 0.05) 0%, transparent 62%); } .bg-layer__plaster { position: absolute; inset: 0; opacity: 0.5; background-image: repeating-linear-gradient(115deg, rgba(20,18,15,0.018) 0 1px, transparent 1px 7px), repeating-linear-gradient( 0deg, rgba(20,18,15,0.014) 0 1px, transparent 1px 5px); } /* -------------------------------------------------------------------------- 6. FIXED VERTICAL GRID LINES Structural rhythm borrowed from the reference: a fixed measuring grid the whole page is built against. Reads as a set-out drawing. -------------------------------------------------------------------------- */ .grid-lines { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); opacity: 0.15; } .grid-lines .grid-line { border-right: 1px solid var(--ink); height: 100%; } .grid-lines .grid-line:last-child { border-right: 0; } @media (min-width: 1024px) { .grid-lines { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 767px) { .grid-lines { grid-template-columns: repeat(2, 1fr); opacity: 0.1; } } /* -------------------------------------------------------------------------- 7. NOISE OVERLAY feTurbulence fractal noise as a data-URI filter — never a raster texture. -------------------------------------------------------------------------- */ .noise-overlay { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 8. PRELOADER Black plate, wordmark, and a bottom progress bar that must complete before the site is revealed. -------------------------------------------------------------------------- */ .loader { position: fixed; inset: 0; z-index: 10000; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; } .loader__mark { display: flex; align-items: center; gap: 0.9rem; } .loader__mark svg { width: 26px; height: 26px; } .loader__word { font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: clamp(1.1rem, 4.2vw, 2rem); letter-spacing: 0.42em; color: var(--bone); text-indent: 0.42em; } .loader__sub { font-family: 'Geist', sans-serif; font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--tx-inv-mute); } .loader__track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(241, 237, 230, 0.1); } .loader__bar { height: 100%; width: 0%; background: var(--laser); transform-origin: left center; } .loader__pct { position: absolute; right: var(--gutter); bottom: 1.75rem; font-family: 'Syncopate', sans-serif; font-size: 0.62rem; letter-spacing: 0.2em; color: var(--tx-inv-mute); } /* -------------------------------------------------------------------------- 9. WRAPPER + FOOTER REVEAL The wrapper carries a 100vh bottom margin so the fixed footer beneath it is uncovered as the page scrolls away. Do not remove — the reveal depends on it. -------------------------------------------------------------------------- */ .wrapper { position: relative; z-index: 10; background: var(--bone); margin-bottom: 100vh; } .footer-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); } @media (max-width: 767px) { /* Short viewports cannot hold the full-height footer comfortably. */ .wrapper { margin-bottom: 0; } .footer-sticky { position: relative; height: auto; z-index: 10; } } /* -------------------------------------------------------------------------- 10. UTILITY -------------------------------------------------------------------------- */ .u-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .u-gray-12 { filter: grayscale(12%); } .u-gray-18 { filter: grayscale(18%); } .u-gray-40 { filter: grayscale(40%); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }