/* ============================================================ BARRINGTON INTERIORS — Bathrooms Built With Precision Dark, precise, craftsman. Serif display + clean grotesque. ============================================================ */ :root { --ink: #0a0a0b; --ink-2: #121214; --panel: #161618; --panel-2: #1c1c1f; --line: #2a2a2e; --red: #e01b22; --red-bright: #ff2a30; --red-deep: #9c0f14; --cream: #f4f1ec; --muted: #9a9aa0; --muted-2: #6f6f76; --serif: "Fraunces", Georgia, serif; --sans: "Hanken Grotesk", system-ui, sans-serif; --gut: clamp(20px, 4vw, 64px); --maxw: 1400px; /* motion tokens — "Measured Motion" */ --ease-out: cubic-bezier(.22, .61, .36, 1); /* entering */ --ease-in: cubic-bezier(.55, .06, .68, .19); /* exiting */ --dur-micro: .2s; /* hovers, focus, buttons */ --dur-enter: .72s; /* section reveals */ --rv-ease: var(--ease-out); --rv-dur: var(--dur-enter); --rv-step: 70ms; --intro: 0s; /* hero entrance offset; raised to ~1.05s only when JS runs the intro */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } /* clip horizontal overflow at the root (hidden = fallback for browsers without `clip`) */ /* keep anchor-link jumps landing just below the fixed header */ html { scroll-padding-top: 86px; } @media (max-width: 880px) { html { scroll-padding-top: 70px; } } body { background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; /* `clip` (not `hidden`) so never turns into a scroll container — that was the iOS trap blocking scroll-reveal */ } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .svg-defs { position: absolute; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: clamp(64px, 9vw, 130px); position: relative; } /* ---------- typography helpers ---------- */ .eyebrow { display: inline-block; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: .9rem; } .h-serif { font-family: var(--serif); font-weight: 600; line-height: 1.04; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.01em; } /* ---------- ghost sawblade (hero backdrop) ---------- */ .ghost-blade { width: 100%; height: 100%; display: block; object-fit: contain; filter: brightness(1.5); } /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(10,10,11,.72); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, padding .3s; } .site-header.scrolled { background: rgba(8,8,9,.94); border-bottom-color: var(--line); } /* while the overlay menu is open, drop the header's backdrop-filter so the fixed overlay anchors to the viewport (backdrop-filter establishes a containing block) */ body.menu-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; border-bottom-color: transparent; } .header-inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding-block: 13px; } .brand { display: inline-flex; align-items: center; } .logo { display: block; height: 58px; width: 110px; object-fit: cover; object-position: center; /* crop the logo's transparent padding */ filter: drop-shadow(0 3px 12px rgba(0,0,0,.5)); transition: transform .25s, filter .25s; } .brand:hover .logo { transform: translateY(-1px); filter: drop-shadow(0 5px 16px rgba(224,27,34,.35)); } /* ---- premium primary nav: sliding "cutting-edge" indicator + measured entrance ---- */ .main-nav { position: relative; display: flex; gap: clamp(14px, 1.8vw, 30px); margin-left: auto; } .main-nav a { position: relative; padding: 6px 2px; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); transition: color .25s var(--ease-out); } .main-nav a:hover, .main-nav a.active { color: var(--red); } .nav-cta { display: none; } /* book-an-appointment button: shown only inside the mobile overlay menu */ .nav-login { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-2); } /* discreet admin login */ .nav-login svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nav-login:hover { color: var(--red); } /* persistent login icon in the top bar — desktop uses the in-nav text link above, so this is shown only on mobile */ .header-login { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); color: var(--cream); transition: color .25s var(--ease-out), border-color .25s var(--ease-out); } .header-login svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .header-login:hover, .header-login:active { color: var(--red); border-color: var(--red); } /* the red "cutting edge" that glides to the active / hovered link */ .nav-indicator { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--red), var(--red-bright)); box-shadow: 0 0 12px rgba(224,27,34,.85); opacity: 0; pointer-events: none; transition: transform .42s var(--ease-out), width .42s var(--ease-out), opacity .3s; } .main-nav.nav-ready .nav-indicator { opacity: 1; } @media (min-width: 881px) { /* staggered rise as the loader lifts (desktop only) */ .js-reveal .main-nav a { opacity: 0; transform: translateY(-8px); animation: navIn .6s var(--ease-out) forwards; animation-delay: calc(var(--intro) + (var(--ni, 0) * 70ms)); } } @keyframes navIn { to { opacity: 1; transform: none; } } @keyframes navItemIn { to { opacity: 1; transform: none; filter: blur(0); } } /* header scroll-progress "measure" line */ .scroll-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; z-index: 1; background: linear-gradient(90deg, var(--red), var(--red-bright)); box-shadow: 0 0 10px rgba(224,27,34,.6); transform: scaleX(0); transform-origin: left center; opacity: 0; transition: opacity .3s; pointer-events: none; } .site-header.scrolled .scroll-progress { opacity: 1; } .header-cta { display: flex; align-items: center; gap: 22px; } .header-divider { width: 1px; height: 30px; background: var(--line); } .phone { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: .04em; transition: color .2s; } .phone:hover { color: var(--red); } .ico-phone { width: 17px; height: 17px; fill: var(--red); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; position: relative; z-index: 101; } .nav-toggle span { width: 26px; height: 2px; background: var(--cream); transition: transform .3s var(--ease-out), opacity .2s; transform-origin: center; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(120% 120% at 80% 0%, #1a1416 0%, var(--ink) 55%); } /* ---------- hero mirror glow (canvas): animates the round mirror's red backlight — a rotating bright hotspot + comet tail + sparks that react to the pointer and scroll. Screen-blended so it adds light onto the photo's existing glow. Sits above the photo, below the copy. ---------- */ .hero-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; /* the canvas only ADDS red light onto the bathroom photo below */ } /* ---------- hero interactive light (follows pointer/touch, idle-drifts; lights the whole hero) ---------- */ .hero-spot { position: absolute; inset: 0; z-index: 2; /* above the photo so the light sweeps the whole scene */ overflow: hidden; pointer-events: none; animation: spotOrbit 13s ease-in-out infinite alternate; /* gentle idle "life" (CSS, no JS loop) */ } @keyframes spotOrbit { from { transform: translate3d(-3%, -2%, 0); } to { transform: translate3d(3%, 2%, 0); } } .hero-spot::before { content: ""; position: absolute; top: 0; left: 0; width: 62vmax; height: 62vmax; margin: -31vmax 0 0 -31vmax; /* centred on origin */ border-radius: 50%; background: radial-gradient(circle, rgba(255,74,48,.22), rgba(224,27,34,.10) 32%, transparent 60%); mix-blend-mode: screen; will-change: transform; transform: translate3d(var(--spx, 32vw), var(--spy, 40vh), 0); } /* the follow-the-cursor spotlight is desktop-only — it misbehaves on touch */ @media (hover: none), (pointer: coarse) { .hero-spot { display: none; } } /* ---------- load reveal: branded preloader (logo + saw-blade progress bar) ---------- */ .js-reveal { --intro: 2.2s; } /* hold hero entrance until the loader finishes */ .intro { display: none; } .js-reveal .intro { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 9999; background: #060607; transition: opacity .7s ease; } .intro--open { opacity: 0; pointer-events: none; } /* fade out (no slide) so the hero zoom is the reveal */ .intro-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: min(86vw, 360px); animation: introLogo .8s var(--ease-out) both; } .intro-logo { width: clamp(210px, 64vw, 290px); aspect-ratio: 1.92; object-fit: cover; } .intro-bar { position: relative; width: 100%; height: 26px; margin-top: 18px; overflow: hidden; } .intro-bar-track, .intro-bar-blade { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url("images/loadingbar-new.webp") center / 100% auto no-repeat; } .intro-bar-track { filter: grayscale(1) brightness(.85); opacity: .5; } /* starts grey */ .intro-bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; overflow: hidden; } .intro-bar-blade { width: min(86vw, 360px); filter: drop-shadow(0 0 6px rgba(224,27,34,.55)); } /* white + red reveal */ .intro-pct { margin-top: 16px; color: var(--red); font-weight: 700; letter-spacing: .14em; font-size: .92rem; } .intro-tag { margin-top: 11px; color: var(--muted-2); font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; } .intro-glow { position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%); width: 72vw; height: 32vh; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(224,27,34,.32), transparent 64%); filter: blur(22px); } @keyframes introLogo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .hero-media { position: absolute; inset: 0 0 0 42%; z-index: 1; overflow: hidden; animation: heroReveal 2.2s cubic-bezier(.16, .84, .3, 1) both; /* slow cinematic zoom-settle */ animation-delay: calc(var(--intro) + .05s); } .hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); /* headroom for parallax + settle */ will-change: transform; } @keyframes heroReveal { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: none; } } .hero-media-fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 2%, transparent 42%), linear-gradient(0deg, var(--ink) 1%, transparent 22%), radial-gradient(60% 80% at 70% 45%, transparent, rgba(10,10,11,.35)); } .hero-blade { /* big gear — only ~a quarter shows in the bottom-left corner; rotates on scroll */ position: absolute; left: -38vh; bottom: -38vh; width: 76vh; height: 76vh; z-index: 0; opacity: .16; will-change: transform; } .hero-inner { position: relative; z-index: 3; width: 100%; } .hero-copy { max-width: 720px; margin-top: 9vh; } /* lower the headline cluster */ .hero-title { font-family: var(--serif); font-weight: 800; font-size: clamp(2.8rem, 7.4vw, 6.1rem); line-height: .95; letter-spacing: -.022em; position: relative; } /* each word slides in from the right with a slight stagger once the loader lifts */ .hero-title .hw { display: inline-block; opacity: 0; transform: translateX(80px); animation: wordIn .85s var(--ease-out) both; animation-delay: var(--intro); will-change: transform, opacity; } .hero-title .hw:nth-of-type(2) { animation-delay: calc(var(--intro) + .12s); } .hero-title .hw:nth-of-type(3) { animation-delay: calc(var(--intro) + .24s); } .hero-title .hw:nth-of-type(4) { animation-delay: calc(var(--intro) + .36s); } @keyframes wordIn { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } } .hero-swoosh { display: block; width: clamp(300px, 42vw, 480px); height: auto; margin: -1.6rem 0 0 -8px; pointer-events: none; /* tucked under the headline like an underline */ opacity: 0; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); animation: swooshDraw .9s var(--ease-out) forwards; animation-delay: calc(var(--intro) + 1.05s); /* draws the underline AFTER the words land */ } @keyframes swooshDraw { 0% { opacity: 1; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { opacity: 1; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } .hero-lede { margin-top: 1.8rem; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.7; animation: rise .9s .15s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--intro) + .15s); } .hero-actions { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 16px; animation: rise .9s .3s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--intro) + .3s); } @keyframes rise { from { opacity: 0; transform: translateY(26px); } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: .82rem; letter-spacing: .14em; padding: 17px 34px; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s, background .2s, color .2s, box-shadow .2s; } .btn:active { transform: translateY(1px); } .btn-solid { background: var(--red); color: #fff; box-shadow: 0 10px 30px -10px rgba(224,27,34,.7); } .btn-solid:hover { background: var(--red-bright); box-shadow: 0 14px 36px -8px rgba(255,42,48,.8); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--cream); border-color: var(--red); } .btn-ghost:hover { background: var(--red); color: #fff; transform: translateY(-2px); } .btn.full { width: 100%; } /* sheen sweep on solid buttons — sits above the fill, below the label */ .btn-solid { position: relative; overflow: hidden; z-index: 0; } .btn-solid::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-130%); transition: transform .65s var(--rv-ease); } .btn-solid:hover::after { transform: translateX(130%); } /* ---------- arrow link ---------- */ .link-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--red); font-weight: 700; font-size: .8rem; letter-spacing: .14em; } .link-arrow span { transition: transform .25s; } .link-arrow:hover span { transform: translateX(6px); } /* ============================================================ SAW-BLADE DIVIDER ============================================================ */ /* sits straddling the very top edge of the process section, nudged up slightly */ .blade-divider { position: absolute; top: 0; left: 0; right: 0; z-index: 6; transform: translateY(calc(-50% - 3px)); /* centred on the section seam, nudged up 3px */ display: flex; justify-content: center; align-items: center; padding: 0 var(--gut); pointer-events: none; } .blade-divider img { width: min(94%, 1240px); height: auto; display: block; filter: drop-shadow(0 0 16px rgba(224,27,34,.5)); animation: bladeGlow 4.5s ease-in-out infinite; /* gentle red-glow breathing for a premium feel */ } @keyframes bladeGlow { 0%, 100% { filter: drop-shadow(0 0 12px rgba(224,27,34,.42)); } 50% { filter: drop-shadow(0 0 22px rgba(224,27,34,.72)); } } /* draws itself out from the centre when it scrolls into view (.shown toggled by JS) */ .js-reveal .blade-divider img { -webkit-clip-path: inset(0 50% 0 50%); clip-path: inset(0 50% 0 50%); } .js-reveal .blade-divider.shown img { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-out), -webkit-clip-path 1s var(--ease-out); } /* ============================================================ PROCESS ============================================================ */ .process { background: linear-gradient(180deg, var(--ink-2), var(--ink) 86%); border-top: 1px solid var(--line); padding-block: clamp(54px, 7vw, 82px); } /* abstract red-glow backdrop that parallaxes on scroll (orbs translated by JS) */ .process-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .process-bg span { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; } .process-bg span:nth-child(1) { width: 48vw; height: 48vw; left: -10vw; top: 2%; background: radial-gradient(circle, rgba(224,27,34,.20), transparent 64%); } .process-bg span:nth-child(2) { width: 42vw; height: 42vw; right: -8vw; bottom: -8%; background: radial-gradient(circle, rgba(255,42,48,.13), transparent 64%); } /* faint draughtsman's grid behind the process for depth */ .process::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(244,241,236,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(244,241,236,.022) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(130% 78% at 50% 0%, #000, transparent 72%); mask-image: radial-gradient(130% 78% at 50% 0%, #000, transparent 72%); } .process > .container { position: relative; z-index: 1; } .process-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 40px; margin-bottom: clamp(22px, 3vw, 38px); } .process-head-title .h-serif { font-size: clamp(1.9rem, 3vw, 2.8rem); } .process-lead { color: var(--muted); max-width: 360px; margin-left: auto; } .process-head .link-arrow { white-space: nowrap; } /* ---- process: compact premium image cards (4-up) with a red timeline + parallax glow bg ---- */ .process-steps { counter-reset: step; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.4vw, 22px); } .step { position: relative; } /* fine red timeline line + a dot per card across the row (desktop) */ .process-steps::before { content: ""; position: absolute; left: 7%; right: 7%; top: -2px; height: 1px; z-index: 0; background: linear-gradient(90deg, transparent, rgba(224,27,34,.55), transparent); } .step::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px rgba(224,27,34,.9); } .step-card { position: relative; display: block; aspect-ratio: 5 / 7; min-height: 320px; border-radius: 16px; overflow: hidden; isolation: isolate; border: 1px solid rgba(244,241,236,.10); background: var(--ink); box-shadow: 0 24px 46px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07); transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s; } .step-photo { /* the project photo fills the whole card */ position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: transform .6s var(--ease-out); } .step:nth-child(1) .step-photo { background-image: url('images/process-1.webp'); } .step:nth-child(2) .step-photo { background-image: url('images/process-2.webp'); } .step:nth-child(3) .step-photo { background-image: url('images/process-3.webp'); } .step:nth-child(4) .step-photo { background-image: url('images/process-4.webp'); } .step-card::before { /* dark gradient so the copy stays readable */ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,11,.2) 0%, rgba(10,10,11,.5) 46%, rgba(10,10,11,.93) 100%); } .step-card::after { /* big faint step number, top-right */ content: counter(step, decimal-leading-zero); counter-increment: step; position: absolute; top: 10px; right: 16px; z-index: 2; font-family: var(--serif); font-weight: 700; font-size: 2.6rem; line-height: 1; color: rgba(244,241,236,.16); } .step-badge { /* red icon badge, top-left */ position: absolute; top: 16px; left: 16px; z-index: 2; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(140deg, var(--red), var(--red-deep)); border: 1px solid rgba(255,120,120,.35); box-shadow: 0 0 18px -2px rgba(224,27,34,.7), inset 0 1px 0 rgba(255,255,255,.35); } .step-badge svg { width: 21px; height: 21px; color: #fff; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .step-inner { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 18px 20px; } .step-inner::before { /* red accent above the title */ content: ""; display: block; width: 28px; height: 2px; margin-bottom: 11px; border-radius: 2px; background: linear-gradient(90deg, var(--red), var(--red-bright)); box-shadow: 0 0 10px rgba(224,27,34,.7); } .step h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem, 1.4vw, 1.4rem); line-height: 1.1; margin-bottom: 6px; } .step p { color: rgba(244,241,236,.74); font-size: clamp(.82rem, .95vw, .92rem); line-height: 1.5; } @media (hover: hover) and (pointer: fine) { .step-card:hover { transform: translateY(-7px); border-color: rgba(224,27,34,.55); box-shadow: 0 36px 64px -30px rgba(0,0,0,.9), 0 0 42px -10px rgba(224,27,34,.5), inset 0 1px 0 rgba(255,255,255,.09); } .step-card:hover .step-photo { transform: scale(1.06); } } /* staggered reveal across the row */ .js-reveal #process .step:nth-child(2) { transition-delay: .07s; } .js-reveal #process .step:nth-child(3) { transition-delay: .14s; } .js-reveal #process .step:nth-child(4) { transition-delay: .21s; } @media (max-width: 900px) { .process-steps { grid-template-columns: 1fr 1fr; } .process-steps::before, .step::before { display: none; } } @media (max-width: 540px) { .process-steps { grid-template-columns: 1fr; } .step-card { aspect-ratio: 16 / 10; min-height: 210px; } } /* ============================================================ PORTFOLIO (home teaser — rounded bento) ============================================================ */ /* tightened so the whole section fits one screen (no in-section scroll / no extra pager stop) */ .portfolio.section { padding-block: clamp(34px, 4.5vw, 80px); } .portfolio-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 1.5rem; } .portfolio-head .h-serif { font-size: clamp(1.8rem, 3vw, 2.6rem); } .portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, clamp(140px, 17.5vw, 230px)); gap: clamp(12px, 1.4vw, 18px); } .portfolio-grid .work:nth-child(1) { grid-area: 1 / 1 / 3 / 3; } /* feature 2×2 */ .portfolio-grid .work:nth-child(2) { grid-area: 1 / 3 / 2 / 4; } .portfolio-grid .work:nth-child(3) { grid-area: 1 / 4 / 2 / 5; } .portfolio-grid .work:nth-child(4) { grid-area: 2 / 3 / 3 / 5; } /* wide */ /* shared card (teaser + gallery) */ .work { position: relative; display: block; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); isolation: isolate; } .work img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--rv-ease), filter .45s ease; filter: grayscale(.08) brightness(.88) contrast(1.03); } .work::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 38%, rgba(8,8,9,.85)); } .work-cat { position: absolute; top: 13px; left: 13px; z-index: 3; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(224,27,34,.92); padding: 6px 11px; border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(224,27,34,.7); } /* job-type (charcoal) + category (red) chips — either is optional */ .work-tags { position: absolute; top: 13px; left: 13px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 26px); } .work-tag { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: 6px 11px; border-radius: 999px; line-height: 1; } .work-tag.cat { background: rgba(224,27,34,.92); box-shadow: 0 6px 18px -8px rgba(224,27,34,.7); } .work-tag.job { background: rgba(16,16,18,.85); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .gallery-item, .portfolio-grid .work { cursor: zoom-in; } /* ===== glass lightbox (enlarged project, opens in-page) ===== */ .pf-lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(14px, 3vw, 34px); background: rgba(6,6,7,.58); -webkit-backdrop-filter: blur(16px) saturate(1.05); backdrop-filter: blur(16px) saturate(1.05); } .pf-lightbox.open { display: flex; animation: lbFade .25s ease both; } .pf-lightbox.closing { animation: lbFade .2s ease reverse both; } .lb-panel { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; width: min(980px, 100%); max-height: min(88vh, 720px); overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(20,20,23,.82); /* sits on the already-frosted overlay — no second backdrop-filter (keeps it light) */ box-shadow: 0 40px 120px -30px rgba(0,0,0,.85); animation: lbPop .34s var(--ease-out) both; } .lb-media { background: #000; min-height: 0; } .lb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .lb-info { padding: clamp(20px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 14px; overflow: auto; } .lb-tags { display: flex; gap: 6px; flex-wrap: wrap; padding-right: 44px; } /* clear the close button */ .lb-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; } .lb-meta { display: flex; flex-direction: column; gap: 0; } .lb-row { display: flex; gap: 12px; align-items: baseline; border-top: 1px solid rgba(255,255,255,.09); padding: 10px 0; } .lb-k { flex: 0 0 92px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .lb-v { color: var(--cream); font-size: .92rem; } .lb-desc { color: var(--muted); line-height: 1.62; font-size: .92rem; margin: 0; } .lb-cta { margin-top: auto; align-self: flex-start; } .lb-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); background: rgba(10,10,12,.5); color: #fff; font-size: 1.5rem; line-height: 1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: color .2s, border-color .2s, transform .2s; } .lb-close:hover { color: var(--red); border-color: var(--red); transform: rotate(90deg); } @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } } @keyframes lbPop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } @media (max-width: 760px) { .lb-panel { grid-template-columns: 1fr; max-height: 90vh; } .lb-media { max-height: 42vh; } } @media (prefers-reduced-motion: reduce) { .pf-lightbox.open, .pf-lightbox.closing, .lb-panel { animation: none; } } .work-cap { position: absolute; left: 18px; right: 18px; bottom: 15px; z-index: 2; display: flex; flex-direction: column; gap: 2px; } .work-cap strong { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; line-height: 1.12; } .work-cap em { font-style: normal; color: var(--muted); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; } .work.feature .work-cap strong { font-size: clamp(1.3rem, 1.9vw, 1.85rem); } /* desktop hover */ @media (hover: hover) and (pointer: fine) { .work img { filter: grayscale(.1) brightness(.86) contrast(1.04); } .work-cap { transform: translateY(10px); opacity: 0; transition: transform .45s var(--rv-ease), opacity .45s ease; } .work:hover img { transform: scale(1.06); filter: grayscale(0) brightness(1.03) contrast(1.04); } .work:hover .work-cap { transform: none; opacity: 1; } /* title reveals on hover; category chip stays visible */ .work::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 2px solid transparent; border-radius: inherit; transition: border-color .35s ease; } .work:hover::before { border-color: var(--red); } } /* touch-safe: captions always visible, gentle tap feedback */ @media (hover: none), (pointer: coarse) { .work-cap, .work-cat, .work-tags { opacity: 1; } .work:active img { transform: scale(1.03); } /* light up the work image as it scrolls through the centre (.in-center added by JS) */ .work.in-center img { transform: scale(1.05); filter: grayscale(0) brightness(1.02) contrast(1.04); } } .portfolio-cta { margin-top: clamp(18px, 2.4vw, 30px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .portfolio-cta p { color: var(--muted); font-size: .92rem; } /* ---- responsive bento ---- */ @media (max-width: 900px) { .portfolio-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: clamp(150px, 38vw, 230px); } .portfolio-grid .work:nth-child(1) { grid-area: auto; grid-column: span 2; grid-row: span 2; } .portfolio-grid .work:nth-child(2), .portfolio-grid .work:nth-child(3) { grid-area: auto; } .portfolio-grid .work:nth-child(4) { grid-area: auto; grid-column: span 2; } } @media (max-width: 540px) { .portfolio-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(210px, 64vw, 300px); } .portfolio-grid .work:nth-child(n) { grid-area: auto; grid-column: auto; grid-row: auto; } } /* ============================================================ PORTFOLIO PAGE (portfolio.html gallery) ============================================================ */ .page-hero { padding: clamp(132px, 17vh, 210px) 0 clamp(36px, 5vw, 60px); text-align: center; background: radial-gradient(120% 120% at 50% 0%, #1a1416 0%, var(--ink) 60%); } .page-hero .h-serif { font-size: clamp(2.4rem, 5vw, 4rem); margin-top: .4rem; } .page-hero > .container > p { color: var(--muted); max-width: 580px; margin: 1.1rem auto 0; } .gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 clamp(28px, 4vw, 46px); } .filter-btn { font-family: var(--sans); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 11px 20px; border-radius: 999px; cursor: pointer; transition: color .25s, background .25s, border-color .25s, transform .15s, box-shadow .25s; } .filter-btn:hover { color: var(--cream); border-color: #3a3a40; } .filter-btn.active { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 10px 26px -10px rgba(224,27,34,.7); } .filter-btn:active { transform: translateY(1px); } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); align-items: start; padding-bottom: clamp(40px, 6vw, 80px); } .gallery-section { padding-top: clamp(20px, 3vw, 34px); } .gallery-item { aspect-ratio: 3 / 4; } /* reuses .work styling */ .gallery-item.hide { display: none; } .gallery-empty { text-align: center; color: var(--muted); padding: 50px 0; font-size: 1.05rem; } .portfolio-end { text-align: center; border-top: 1px solid var(--line); background: var(--ink-2); } .portfolio-end-inner { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .portfolio-end h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); } .portfolio-end p { color: var(--muted); } @media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .gallery-grid { grid-template-columns: 1fr; } } /* ============================================================ SERVICES ============================================================ */ .services { background: var(--ink-2); border-block: 1px solid var(--line); } .section-head.centered { text-align: center; max-width: 640px; margin: 0 auto 3rem; } .section-head.centered p { color: var(--muted); margin-top: 1rem; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); } .service { background: var(--panel); border: 1px solid var(--line); padding: 34px 30px; position: relative; transition: transform .25s, border-color .25s, background .25s; } .service::before { content: ""; position: absolute; left: 30px; top: 30px; width: 30px; height: 3px; background: var(--red); transition: width .3s; } .service.in-center { transform: translateY(-5px); border-color: #3a3a40; background: var(--panel-2); } .service.in-center::before { width: 52px; } @media (hover: hover) and (pointer: fine) { .service:hover { transform: translateY(-5px); border-color: #3a3a40; background: var(--panel-2); } .service:hover::before { width: 52px; } } .service h3 { font-family: var(--serif); font-size: 1.32rem; font-weight: 600; margin: 26px 0 12px; } .service p { color: var(--muted); font-size: .95rem; } /* ============================================================ ABOUT ============================================================ */ .about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; } .about-media { position: relative; } .about-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 72% center; border: 1px solid var(--line); filter: brightness(1.02) contrast(1.04); } .about-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(10,10,11,.5)); } .about-badge { position: absolute; right: -16px; bottom: -16px; z-index: 2; background: var(--red); color: #fff; padding: 16px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; box-shadow: 0 20px 50px -16px rgba(224,27,34,.7); } .badge-num { font-family: var(--serif); font-size: 2.6rem; font-weight: 700; line-height: 1; } .badge-num.badge-year { font-size: 2.5rem; letter-spacing: -.01em; } .badge-label { font-size: .72rem; line-height: 1.25; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .92; } /* "Established" state reads label-over-year ("Established 2025"); the live year-count keeps number-over-label */ .about-badge:has(.badge-year) .badge-label { order: -1; margin-bottom: 2px; } .about-copy .h-serif { margin-bottom: 1.3rem; } .about-copy > p { color: var(--muted); margin-bottom: 1.6rem; } .about-list { list-style: none; display: grid; gap: 12px; margin-bottom: 2rem; } .about-list li { position: relative; padding-left: 30px; color: var(--cream); } .about-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 9px; border-left: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red); transform: rotate(-45deg); } /* ============================================================ REVIEWS ============================================================ */ .reviews { background: var(--ink-2); border-block: 1px solid var(--line); } .reviews-state { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(18px, 2.4vw, 34px); align-items: stretch; } /* empty state */ .reviews-empty { background: linear-gradient(180deg, var(--panel), var(--ink-2)); border: 1px solid var(--line); border-radius: 18px; padding: clamp(30px, 4vw, 50px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .reviews-empty-stars { color: #34343a; font-size: 1.5rem; letter-spacing: .2em; } .reviews-empty h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 14px 0 12px; } .reviews-empty p { color: var(--muted); margin-bottom: 26px; max-width: 430px; } /* leave-a-review form */ .review-form-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(26px, 3vw, 40px); } .review-form-card h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 6px; } .review-form-intro { color: var(--muted); font-size: .9rem; margin-bottom: 22px; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .star-input { display: flex; gap: 4px; padding-top: 2px; } .star-input .star { background: none; border: 0; cursor: pointer; padding: 2px; font-size: 1.55rem; line-height: 1; color: #34343a; transition: color .15s, transform .15s; } .star-input .star:hover { transform: scale(1.18); } .star-input .star.on { color: var(--red); } .review-msg { margin-top: 14px; padding: 12px 14px; border-radius: 9px; font-weight: 600; font-size: .9rem; text-align: center; } .review-msg.ok { background: rgba(224,27,34,.12); color: #ff5a5f; } .review-msg.err { background: rgba(255,255,255,.05); color: var(--muted); } @media (max-width: 860px) { .reviews-state { grid-template-columns: 1fr; } } /* ============================================================ CONTACT ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); } .contact-copy .h-serif { margin-bottom: 1.2rem; } .contact-copy > p { color: var(--muted); margin-bottom: 2rem; max-width: 460px; } .contact-list { list-style: none; display: grid; gap: 18px; } .contact-list li { display: grid; grid-template-columns: 70px 1fr; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .contact-list li span:first-child { color: var(--red); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; } .contact-list a:hover { color: var(--red); } .contact-form { background: var(--panel); border: 1px solid var(--line); padding: clamp(26px, 3vw, 40px); } .field { display: flex; flex-direction: column; margin-bottom: 18px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field label { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 600; } .field input, .field textarea { background: var(--ink); border: 1px solid var(--line); color: var(--cream); padding: 14px 16px; font-family: var(--sans); font-size: .98rem; resize: vertical; transition: border-color .2s, box-shadow .2s; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(224,27,34,.18); } .field input::placeholder, .field textarea::placeholder { color: var(--muted-2); } .form-note { margin-top: 16px; padding: 12px 14px; border-radius: 9px; font-weight: 600; font-size: .92rem; text-align: center; } .form-note.ok { background: rgba(224,27,34,.12); color: #ff5a5f; } .form-note.err { background: rgba(255,255,255,.05); color: var(--muted); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--ink); border-top: 1px solid var(--line); padding-top: clamp(52px, 7vw, 84px); } .footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(34px, 4vw, 50px); } .brand-footer .logo { height: 76px; width: 142px; } .footer-tagline { color: var(--muted); margin: 16px 0 20px; max-width: 330px; font-size: .92rem; line-height: 1.6; } .footer-social { display: flex; gap: 12px; } .footer-social a { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: color .25s, background .25s, border-color .25s, transform .25s; } .footer-social a:hover { color: #fff; background: var(--red); border-color: var(--red); transform: translateY(-2px); } .footer-social svg { width: 19px; height: 19px; fill: currentColor; } .footer-col h4 { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); font-weight: 700; margin-bottom: 16px; position: relative; padding-bottom: 11px; } .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--red); } .footer-col > a, .footer-contact-row { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .92rem; padding: 7px 0; transition: color .2s, padding-left .2s; } .footer-col > a:hover { color: var(--red); padding-left: 5px; } .footer-contact-row svg { width: 17px; height: 17px; flex: none; color: var(--red); fill: var(--red); } a.footer-contact-row:hover { color: var(--cream); } .footer-cta { margin-top: 18px; padding: 14px 26px; } .footer-divider { display: flex; justify-content: center; padding: 0 var(--gut); } .footer-divider img { width: min(100%, 880px); height: auto; opacity: .75; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 26px; padding-bottom: 30px; } .footer-bottom p { color: var(--muted-2); font-size: .82rem; } .footer-built { color: var(--red); opacity: .85; letter-spacing: .03em; } @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 34px 28px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ============================================================ SCROLL-REVEAL ENGINE Only active when JS is present (.js-reveal on ), so the site degrades gracefully to fully-visible content without JS. ============================================================ */ .js-reveal [data-reveal] { opacity: 0; transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease), clip-path var(--rv-dur) var(--rv-ease); transition-delay: calc(var(--reveal-i, 0) * var(--rv-step)); will-change: opacity, transform; } .js-reveal [data-reveal="fade-up"] { transform: translateY(36px); } .js-reveal [data-reveal="fade-left"] { transform: translateX(-40px); } .js-reveal [data-reveal="zoom"] { transform: scale(.95); } .js-reveal [data-reveal="clip"] { clip-path: inset(0 0 100% 0); transform: scale(1.04); } .js-reveal [data-reveal].is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); will-change: auto; } /* ============================================================ MEASURED MOTION — signature, on-brand motion details (precision / craftsman: things are drawn, cut and measured in) ============================================================ */ /* eyebrow gets a short red line "cut" in when its block reveals */ .eyebrow { position: relative; } .js-reveal .eyebrow::after { content: ""; display: inline-block; vertical-align: middle; width: 30px; height: 2px; margin: 0 0 3px 12px; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform .55s var(--ease-out) .15s; } .js-reveal [data-reveal].is-visible .eyebrow::after { transform: scaleX(1); } /* section headings: each word rises out of a mask when its block reveals (echoes the hero title) */ .js-reveal h2.h-serif .rw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; } .js-reveal h2.h-serif .rw > i { display: inline-block; font-style: inherit; transform: translateY(120%); transition: transform .8s var(--ease-out); transition-delay: calc(var(--wd, 0) * 55ms); } .js-reveal [data-reveal].is-visible h2.h-serif .rw > i { transform: translateY(0); } /* review stars light up one at a time as the block reveals */ .js-reveal .reviews-empty-stars .rv-star { display: inline-block; opacity: 0; transform: scale(.4); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); transition-delay: calc(var(--sd, 0) * 120ms); } .js-reveal [data-reveal].is-visible .reviews-empty-stars .rv-star { opacity: 1; transform: none; } /* portfolio works: rise as they clip in (hover zoom/caption unchanged) */ .js-reveal .work[data-reveal="clip"] { transform: translateY(26px); } .js-reveal .work[data-reveal="clip"].is-visible { transform: none; } /* about heading: focus-in (blur -> sharp) as the block reveals */ .js-reveal .about-copy h2.h-serif { filter: blur(11px); transition: filter .9s var(--ease-out); } .js-reveal .about-copy[data-reveal].is-visible h2.h-serif { filter: blur(0); } /* about image: slow ken-burns zoom-out as it clips in */ .js-reveal .about-media { overflow: hidden; } .js-reveal .about-media img { transform: scale(1.14); transition: transform 1.5s var(--ease-out); } .js-reveal .about-media[data-reveal].is-visible img { transform: scale(1); } /* process: glowing badges fade in as each card reveals (transform left free for hover / in-centre) */ .js-reveal .step-badge { opacity: 0; } .js-reveal .step.is-visible .step-badge { opacity: 1; transition: opacity .45s var(--ease-out) .1s; } /* process cards: slide in from alternating sides + fade, REVERSIBLE on scroll (JS toggles .is-visible as each card enters / leaves the viewport). Left card leads, right trails, so a row's two cards never arrive at the same time. */ .js-reveal .step { opacity: 0; transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out); will-change: opacity, transform; } .js-reveal .step:nth-child(odd) { transform: translateX(-60px); } .js-reveal .step:nth-child(even) { transform: translateX(60px); } .js-reveal .step.is-visible { opacity: 1; transform: none; } /* (no time-delay stagger — the left/right cards are staggered by scroll position: 50% vs 75%) */ /* PROCESS cards fan out of a stack as the section comes on screen (JS-driven on desktop). Override the generic slide reveal so the cards are always visible; JS owns their transform. */ .js-reveal #process .step { opacity: 1; } .js-reveal #process .step:nth-child(odd), .js-reveal #process .step:nth-child(even) { transform: none; } .js-reveal #process .step-badge { opacity: 1; } #process .process-steps.stack-on .step { will-change: transform; } /* about checklist ticks in one item at a time after the copy reveals */ .js-reveal .about-list li { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .js-reveal .about-copy.is-visible .about-list li { opacity: 1; transform: none; } .js-reveal .about-copy.is-visible .about-list li:nth-child(1) { transition-delay: .15s; } .js-reveal .about-copy.is-visible .about-list li:nth-child(2) { transition-delay: .27s; } .js-reveal .about-copy.is-visible .about-list li:nth-child(3) { transition-delay: .39s; } .js-reveal .about-copy.is-visible .about-list li:nth-child(4) { transition-delay: .51s; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .hero-media { inset: 0 0 0 50%; } } /* (process is mobile-first vertical; horizontal layout handled at min-width:880 above) */ @media (max-width: 880px) { .main-nav, .header-cta { display: none; } .header-login { display: inline-flex; margin-left: auto; } /* always-visible login icon in the top bar */ .nav-toggle { display: flex; margin-left: 8px; } /* sits right next to the login icon */ .main-nav.open a:not(.nav-cta).nav-login { display: none; } /* login lives in the top bar on mobile, not the overlay list */ .nav-indicator { display: none; } /* full-screen translucent + blurred overlay menu (see-through to the page behind) */ .main-nav.open { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; position: fixed; inset: 0; z-index: 90; background: rgba(8,8,9,.5); -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05); padding: clamp(104px, 15vh, 150px) var(--gut) clamp(22px, 5vh, 40px); overflow-y: auto; /* premium reveal: a blurred "iris" opens out from the menu button */ opacity: 0; -webkit-clip-path: circle(0% at calc(100% - 41px) 51px); clip-path: circle(0% at calc(100% - 41px) 51px); transition: clip-path .58s var(--ease-out), -webkit-clip-path .58s var(--ease-out), opacity .42s ease; will-change: clip-path, opacity; /* the overlay owns all touch gestures (drag = scrub the menu), so the page can't scroll behind it */ touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; } .main-nav.open.in { opacity: 1; -webkit-clip-path: circle(160% at calc(100% - 41px) 51px); clip-path: circle(160% at calc(100% - 41px) 51px); } .main-nav.open a:not(.nav-cta) { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--serif); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: clamp(1.9rem, 8.5vw, 2.9rem); line-height: 1.12; color: var(--cream); padding: clamp(11px, 2vh, 19px) 2px; border-bottom: 1px solid rgba(244,241,236,.1); opacity: 0; transform: translateY(22px); filter: blur(6px); } .main-nav.open a:not(.nav-cta)::after { content: "\2192"; flex: none; /* thin arrow on the right */ font-family: var(--sans); font-weight: 400; font-size: 1.2rem; color: var(--red); opacity: .8; transition: transform .25s var(--ease-out); } .main-nav.open a:not(.nav-cta):active::after { transform: translateX(5px); } /* active link: red with a glowing underline */ .main-nav.open a.active { color: var(--red); } .main-nav.open a.active::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); box-shadow: 0 0 16px 1px rgba(224,27,34,.85), 0 0 5px rgba(224,27,34,.95); } /* scrub-to-select: the row the finger is on lights up like the active item, with a red wash */ .main-nav.open a.scrub-on { color: var(--red); } .main-nav.open a:not(.nav-cta).scrub-on { background: linear-gradient(90deg, rgba(224,27,34,.16), rgba(224,27,34,.04) 55%, transparent 78%); } .main-nav.open a:not(.nav-cta).scrub-on::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); box-shadow: 0 0 16px 1px rgba(224,27,34,.85), 0 0 5px rgba(224,27,34,.95); } .main-nav.open a:not(.nav-cta).scrub-on::after { transform: translateX(6px); opacity: 1; } .main-nav.open .nav-cta.scrub-on { background: rgba(224,27,34,.2); border-color: var(--red); } /* while scrubbing, mute the persistent active marker so only the finger target reads as "selected" */ .main-nav.open.scrubbing a.active:not(.scrub-on) { color: var(--cream); } .main-nav.open.scrubbing a.active:not(.scrub-on)::before { opacity: 0; } /* staggered reveal of the links */ .main-nav.open.in a:not(.nav-cta) { animation: navItemIn .6s var(--ease-out) forwards; } .main-nav.open.in a:nth-child(1) { animation-delay: .14s; } .main-nav.open.in a:nth-child(2) { animation-delay: .21s; } .main-nav.open.in a:nth-child(3) { animation-delay: .28s; } .main-nav.open.in a:nth-child(4) { animation-delay: .35s; } .main-nav.open.in a:nth-child(5) { animation-delay: .42s; } .main-nav.open.in a:nth-child(6) { animation-delay: .49s; } .main-nav.open.in a:nth-child(7) { animation-delay: .56s; } .main-nav.open.in a:nth-child(8) { animation-delay: .63s; } .main-nav.open.in a:nth-child(9) { animation-delay: .70s; } /* book-an-appointment CTA pinned at the bottom */ .main-nav.open .nav-cta { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 18px 22px; border: 1.5px solid rgba(224,27,34,.55); border-radius: 4px; background: rgba(224,27,34,.06); color: var(--cream); font-weight: 700; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; opacity: 0; transform: translateY(22px); filter: blur(6px); transition: background .25s, border-color .25s; } .main-nav.open .nav-cta span { flex: 1; } .main-nav.open .nav-cta svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .main-nav.open .nav-cta:active { background: rgba(224,27,34,.16); border-color: var(--red); } .main-nav.open.in .nav-cta { animation: navItemIn .55s var(--ease-out) .4s forwards; } .hero { display: flex; align-items: center; min-height: auto; padding-top: 116px; padding-bottom: 60px; } .hero-inner { padding-top: 0; } .hero-copy { margin-top: 0; max-width: 74%; } /* full-bleed bathroom image with a left-to-right scrim so the copy stays readable and blends in (no seam) */ .hero-media { position: absolute; inset: 0; width: auto; height: 100%; margin: 0; } .hero-media img { object-position: center 38%; } .hero-media-fade { background: linear-gradient(90deg, var(--ink) 6%, rgba(10,10,11,.66) 46%, rgba(10,10,11,.25) 72%, transparent 96%), linear-gradient(0deg, var(--ink) 3%, transparent 30%); } .hero-blade { width: 80vw; height: 80vw; top: 6%; left: -10%; opacity: .04; } .about-grid, .contact-grid { grid-template-columns: 1fr; } .reviews-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .portfolio-head { flex-direction: column; align-items: flex-start; } } /* ============================================================ MOBILE / TABLET OPTIMISATION primary audience — tighter rhythm, touch feedback, lighter paint ============================================================ */ @media (max-width: 1024px) { /* tablet: bring reviews to two-up so they're not three tall stacks */ .reviews-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 880px) { .section { padding-block: clamp(48px, 9vw, 78px); } .process { padding-top: clamp(46px, 11vw, 76px); } .step-card { padding: 24px 22px 26px; } .service { padding: 28px 24px; } .review { padding: 28px 24px; } .reviews-grid { grid-template-columns: 1fr; } .hero-blade { opacity: .08; } /* lighter blur = smoother scrolling on mobile GPUs */ .site-header { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } /* roomier tap target for the menu button */ .nav-toggle { padding: 10px; } } @media (max-width: 560px) { .hero-actions { gap: 12px; } .hero-actions .btn { flex: 1 1 100%; } /* full-width, easy-to-tap CTAs */ .about-copy .btn, .portfolio-cta .btn { width: 100%; } .h-serif { font-size: clamp(1.9rem, 8vw, 2.4rem); } .eyebrow { font-size: .68rem; } } /* touch devices: press feedback replaces hover (no hover on touch) */ @media (hover: none), (pointer: coarse) { .btn:active, .filter-btn:active { transform: translateY(1px); } .work:active { transform: scale(.992); } .link-arrow:active span { transform: translateX(5px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .intro { display: none !important; } /* skip the preloader entirely */ .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .hero-media, .hero-title, .hero-title .hw, .hero-lede, .hero-actions, .hero-swoosh, .hero-copy { opacity: 1 !important; transform: none !important; -webkit-clip-path: none !important; clip-path: none !important; } .hero-media img, .blade-divider img { transform: none !important; -webkit-clip-path: none !important; clip-path: none !important; } /* measured-motion details resolve to their final state */ .js-reveal .step, .js-reveal .step-badge { transform: none !important; opacity: 1 !important; } .js-reveal .main-nav a, .main-nav.open a { opacity: 1 !important; transform: none !important; filter: none !important; } .main-nav.open { opacity: 1 !important; -webkit-clip-path: none !important; clip-path: none !important; } .js-reveal .eyebrow::after { transform: scaleX(1) !important; } .js-reveal .about-list li { opacity: 1 !important; transform: none !important; } .js-reveal h2.h-serif .rw > i { transform: none !important; } .js-reveal .reviews-empty-stars .rv-star { opacity: 1 !important; transform: none !important; } .js-reveal .about-copy h2.h-serif { filter: none !important; } .js-reveal .about-media img { transform: none !important; } }