/* ========================================================================== Lumora Studio — front-end stylesheet Dark cinematic. Palette: black, white, logo red. Generated from the approved prototype; safe to edit. ========================================================================== */ /* ============================================================ LUMORA STUDIO — DESIGN SYSTEM Direction: Dark Cinematic Premium ============================================================ */ :root{ /* Surfaces */ --bg: #08080A; --bg-2: #0D0D11; --surface: #121217; --surface-2: #1A1A21; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); /* Brand — sampled from the Lumora logo */ --brand: #F0301F; /* logo red */ --brand-2: #FF6E52; /* logo coral — text on black */ --brand-deep: #B00D04; /* darkest stop */ --brand-soft: rgba(240,48,31,.13); --brand-rgb: 240,48,31; --grad-brand: linear-gradient(135deg,#FF6E52 0%,#F0301F 48%,#C21008 100%); --grad-btn: linear-gradient(135deg,#E01A10 0%,#C81208 45%,#A80C03 100%); /* Text */ --text: #F6F6F8; --text-2: #B4B4C0; --text-3: #8A8A96; /* Type */ --f-head: 'Sora', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif; /* Fluid type scale */ --t-hero: clamp(2.3rem, 6.2vw, 5.1rem); --t-h2: clamp(1.8rem, 3.9vw, 3.1rem); --t-h3: clamp(1.15rem, 2vw, 1.5rem); --t-body: clamp(.94rem, 1.05vw, 1.06rem); --t-small: .82rem; /* Layout */ --wrap: 1280px; --gut: clamp(1.15rem, 4vw, 3rem); --sec-y: clamp(3.75rem, 8vw, 7.5rem); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --ease: cubic-bezier(.22,.61,.36,1); --shadow: 0 24px 60px -18px rgba(0,0,0,.85); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--f-body);font-size:var(--t-body);line-height:1.68; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.12;letter-spacing:-.022em;margin:0} ::selection{background:var(--brand);color:#000} :focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:4px} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .sec{padding-block:var(--sec-y);position:relative} /* ---- Shared bits ---- */ .eyebrow{ display:inline-flex;align-items:center;gap:.55rem; font-family:var(--f-head);font-size:.71rem;font-weight:600; letter-spacing:.19em;text-transform:uppercase;color:var(--brand-2); margin-bottom:1.05rem; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--grad-brand)} .h2{font-size:var(--t-h2)} .lead{color:var(--text-2);max-width:62ch;font-size:clamp(.96rem,1.15vw,1.1rem)} .accent{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:.92rem 1.7rem;border-radius:100px; font-family:var(--f-head);font-weight:600;font-size:.9rem;letter-spacing:.01em; transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease); white-space:nowrap; } .btn-brand{background:var(--grad-btn);color:#fff;box-shadow:0 10px 30px -10px rgba(var(--brand-rgb),.6)} .btn-brand:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(var(--brand-rgb),.75)} .btn-ghost{border:1px solid var(--line-2);color:var(--text);backdrop-filter:blur(8px)} .btn-ghost:hover{border-color:var(--brand);color:var(--brand-2);transform:translateY(-2px)} /* ============================================================ MOTION SYSTEM ============================================================ */ /* — scroll progress bar (sits on the header's bottom edge) — */ .progress{ position:absolute;left:0;bottom:-1px;height:2px;width:100%;z-index:5; background:var(--grad-brand);transform:scaleX(0);transform-origin:0 50%; will-change:transform; } /* — reveal variants — */ [data-rv]{ --rv-y:32px;--rv-x:0;--rv-s:1;--rv-d:0ms;--rv-t:.9s; opacity:0;transform:translate3d(var(--rv-x),var(--rv-y),0) scale(var(--rv-s)); transition:opacity var(--rv-t) var(--ease) var(--rv-d), transform var(--rv-t) var(--ease) var(--rv-d); } [data-rv].in{opacity:1;transform:none} [data-rv="left"] {--rv-x:-48px;--rv-y:0} [data-rv="right"] {--rv-x:48px;--rv-y:0} [data-rv="scale"] {--rv-s:.92;--rv-y:22px} [data-rv="wipe"]{ opacity:1;transform:none;clip-path:inset(0 0 101% 0); transition:clip-path 1.1s var(--ease) var(--rv-d); } [data-rv="wipe"].in{clip-path:inset(0 0 0 0)} /* — headline word reveal — */ .sw{ display:inline-block;overflow:hidden;vertical-align:top; padding-bottom:.16em;margin-bottom:-.16em; } .sw > i{ display:inline-block;font-style:inherit; transform:translateY(118%); transition:transform 1s var(--ease) var(--wd,0ms); } .split.in .sw > i{transform:none} /* — parallax layers — */ [data-px]{will-change:transform} /* — 3D tilt on cards — */ .cards,.vgrid{perspective:1600px} .card,.vcard{transform-style:preserve-3d} /* — button light sweep (background layer, no pseudo-element) — */ .btn-brand{ background-image: linear-gradient(100deg,transparent 34%,rgba(255,255,255,.32) 50%,transparent 66%), var(--grad-btn); background-size:220% 100%,100% 100%; background-position:160% 0,0 0; background-repeat:no-repeat; transition:transform .3s var(--ease),box-shadow .3s var(--ease), background-position .85s var(--ease); } .btn-brand:hover{background-position:-60% 0,0 0} /* — marquee reacts to scroll velocity — */ .marquee{ transform:translate3d(var(--mq-shift,0px),0,0) skewX(var(--mq-skew,0deg)); transition:transform .45s cubic-bezier(.2,.8,.3,1); } /* — hero scroll response — */ .hero-video,.hero-poster{ transform-origin:50% 40%; will-change:transform; } /* — section entry glow — */ .sec{--glow:0} .sec::before{ content:"";position:absolute;left:50%;top:0;width:min(900px,90%);height:1px; transform:translateX(-50%) scaleX(var(--glow));transform-origin:50% 50%; background:linear-gradient(90deg,transparent,rgba(var(--brand-rgb),.55),transparent); transition:transform 1.4s var(--ease);pointer-events:none; } .sec.in-view{--glow:1} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important} [data-rv]{opacity:1 !important;transform:none !important;clip-path:none !important} .sw > i{transform:none !important} .marquee{transform:none !important} html{scroll-behavior:auto} } /* ============================================================ TOP BAR — email / whatsapp / call ============================================================ */ .topbar{ background:transparent;border-bottom:0; font-size:.79rem;position:relative;z-index:2; } .topbar .wrap{display:flex;align-items:center;justify-content:flex-end;gap:1rem;min-height:44px} .tb-contact{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap} .tb-item{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-2);transition:color .25s} .tb-item:hover{color:var(--brand-2)} .tb-item svg{width:15px;height:15px;flex:none;color:var(--brand)} .tb-social{display:flex;gap:.35rem} .tb-social a{ width:29px;height:29px;display:grid;place-items:center;border-radius:50%; border:1px solid var(--line);color:var(--text-3);transition:all .25s var(--ease); } .tb-social a:hover{border-color:var(--brand);color:var(--brand-2);transform:translateY(-2px)} .tb-social svg{width:13px;height:13px} @media(max-width:900px){ .topbar .wrap{justify-content:center} .tb-social{display:none} .tb-contact{gap:1rem;justify-content:center} .tb-item span{display:none} .tb-item{ min-height:38px;padding:.4rem 1.05rem;border:1px solid var(--line);border-radius:100px; } .tb-item svg{width:17px;height:17px} .topbar .wrap{min-height:56px} .tb-item.tb-primary span{display:inline} } /* ============================================================ SITE HEAD — fixed overlay holding the top bar and header Transparent over the hero video, solid once the page scrolls. ============================================================ */ .site-head{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background .38s var(--ease), backdrop-filter .38s var(--ease), border-color .38s var(--ease); border-bottom:1px solid transparent; } /* Readability scrim: guarantees the menu stays legible over a bright frame, without darkening the video the way a solid bar would. */ .site-head::before{ /* Extends past the bar so the fade is gradual, while keeping real density across the whole header band. Measured against a blown-out frame this holds white text above 4.5:1. */ /* Fully transparent: no scrim at all. Legibility rests entirely on the glyph shadows below, which add contrast around the letters only. On a very bright frame the menu will read as softer than it does over dark footage — that is the trade for seeing the video edge to edge. */ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:none; opacity:1;transition:opacity .38s var(--ease); } .site-head.solid .topbar{border-bottom:1px solid var(--line)} body.inner .site-head .topbar{border-bottom:1px solid var(--line)} .site-head.solid{ background:rgba(8,8,10,.94); backdrop-filter:blur(18px) saturate(160%); border-bottom-color:var(--line); } .site-head.solid::before{opacity:0} /* Inner pages have no hero to overlay, so the bar is solid from the start and the page content is pushed clear of it. */ body.inner .site-head{ background:rgba(8,8,10,.94); backdrop-filter:blur(18px) saturate(160%); border-bottom-color:var(--line); } body.inner .site-head::before{opacity:0} /* Over video the muted greys lose contrast, so lift the nav and contact text to near-white while the bar is transparent. The scrim above does the heavy lifting; this keeps text legible even on a blown-out white frame. */ .site-head:not(.solid) .nav > li > a, .site-head:not(.solid) .tb-item{ color:#fff; } .site-head:not(.solid) .tb-item svg{color:var(--brand-2)} .site-head:not(.solid) .tb-social a{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.28)} .site-head:not(.solid) .nav > li > a:hover{background:rgba(255,255,255,.14)} .site-head:not(.solid) .burger{border-color:rgba(255,255,255,.4)} @media(max-width:1120px){ /* The drawer is a solid panel, so its links must use the normal palette. */ body.menu-open .site-head:not(.solid) .nav > li > a{color:var(--text-2)} } body.inner main, body.inner > .sec:first-of-type, body.inner section:first-of-type{padding-top:calc(var(--head-h, 126px) + 2rem)} /* ============================================================ HEADER ============================================================ */ .hdr{ position:relative;z-index:2; background:transparent;border-bottom:0; } .hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;min-height:82px} .logo{display:flex;align-items:center;gap:.7rem;flex:none} /* No frame around the logo — the mark stands on its own. */ .logo-box{ display:inline-flex;align-items:center;justify-content:center; border:0;background:none;padding:0; } .logo img{height:38px;width:auto;display:block} @media(max-width:520px){.logo img{height:46px}} .nav{display:flex;align-items:center;gap:.15rem} .nav > li > a{ display:block;padding:.6rem .68rem;border-radius:8px;white-space:nowrap; font-size:.83rem;font-weight:500;color:var(--text-2); transition:color .25s,background .25s;position:relative; } .nav > li > a.active::after{left:.68rem;right:.68rem} /* Final item reads as a bordered button rather than a plain link. */ .nav > li:last-child > a{ border:1px solid rgba(255,255,255,.55); padding:.62rem 1.15rem;margin-left:.6rem;border-radius:3px; } .nav > li:last-child > a:hover{background:rgba(255,255,255,.14);border-color:#fff} .site-head.solid .nav > li:last-child > a, body.inner .site-head .nav > li:last-child > a{border-color:var(--line-2)} @media(max-width:1120px){ .nav > li:last-child > a{border:0;margin-left:0;padding:.92rem .9rem} } .nav > li > a:hover,.nav > li > a.active{color:var(--text);background:rgba(255,255,255,.05)} .nav > li > a.active::after{ content:"";position:absolute;left:.82rem;right:.82rem;bottom:.3rem;height:2px; background:var(--grad-brand);border-radius:2px; } .has-sub{position:relative} .has-sub > a::after{content:"▾";margin-left:.35rem;font-size:.7rem;opacity:.6} .sub{ position:absolute;top:calc(100% + 8px);left:0;min-width:236px; background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md); padding:.5rem;box-shadow:var(--shadow); opacity:0;visibility:hidden;transform:translateY(8px); transition:all .28s var(--ease); } .has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none} .sub a{display:block;padding:.55rem .8rem;border-radius:8px;font-size:.85rem;color:var(--text-2)} .sub a:hover{background:var(--brand-soft);color:var(--brand-2)} .hdr-cta{display:flex;align-items:center;gap:.6rem;flex:none} .burger{ display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2); place-items:center; } .burger span{display:block;width:19px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:.3s var(--ease)} .burger span::before,.burger span::after{ content:"";position:absolute;left:0;width:19px;height:2px;background:var(--text);border-radius:2px;transition:.3s var(--ease); } .burger span::before{top:-6px}.burger span::after{top:6px} body.menu-open .burger span{background:transparent} body.menu-open .burger span::before{top:0;transform:rotate(45deg)} body.menu-open .burger span::after{top:0;transform:rotate(-45deg)} @media(max-width:1120px){ .nav{ position:fixed;inset:0 0 0 auto;width:min(90vw,370px); flex-direction:column;align-items:stretch;gap:.2rem; background:var(--bg-2);border-left:1px solid var(--line-2); padding:6.2rem 1.3rem 2.5rem;overflow-y:auto; transform:translateX(102%);transition:transform .42s var(--ease); z-index:99; } body.menu-open .nav{transform:none} .nav > li > a{padding:.92rem .9rem;font-size:1rem;border-bottom:1px solid var(--line)} .nav > li > a.active::after{display:none} .sub{ position:static;opacity:1;visibility:visible;transform:none; border:0;background:transparent;box-shadow:none;padding:.2rem 0 .5rem .9rem; display:none; } .has-sub.open .sub{display:block} .burger{display:grid} .hdr-cta .btn{display:none} .nav-scrim{ position:fixed;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:.35s;z-index:98; } body.menu-open .nav-scrim{opacity:1;visibility:visible} body.menu-open{overflow:hidden} } /* ============================================================ HERO — clean full-bleed video, no overlay copy ============================================================ */ .hero{ position:relative;width:100%; height:100svh; /* full page — the header floats over it */ min-height:520px;max-height:1100px; background:#000;overflow:hidden;isolation:isolate; } @media(max-width:900px){.hero{height:88svh;min-height:440px;max-height:820px}} /* 16:9 iframe scaled to cover the box without letterboxing */ .hero-video{position:absolute;inset:0;overflow:hidden;pointer-events:none} .hero-video iframe{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:100%;height:56.25vw; /* 16:9 relative to width */ min-height:100%;min-width:177.78vh; /* …or relative to height */ border:0; } /* Poster shown until the player is ready */ .hero-poster{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2; transition:opacity .9s var(--ease); } /* ============================================================ PAGE HERO — inner pages with a background video Reuses .hero, so site.js drives the player with no changes. ============================================================ */ /* Full viewport height, matching the home page. The header floats over it (see body.inner.has-hero below) rather than sitting above it — otherwise the hero would be viewport-height PLUS the header, and its bottom edge could never be on screen at the same time as its top. */ body.inner section.page-hero{ /* Selector matches the specificity of body.inner section:first-of-type and comes later, so it wins. That rule adds top padding to clear the fixed header, which here would sit inside the hero box and squash the video. */ padding-top:0;margin-top:0; height:100svh;min-height:520px;max-height:1100px; display:flex;align-items:flex-end; } @media(max-width:900px){ body.inner section.page-hero{height:88svh;min-height:440px;max-height:820px} } /* With a video hero there IS something to overlay, so the bar starts transparent and turns solid on scroll, exactly as on the home page. :not(.solid) matters — without it this would outrank .site-head.solid and the bar would stay transparent over the page content below the hero. */ body.inner.has-hero .site-head:not(.solid){ background:transparent;backdrop-filter:none;border-bottom-color:transparent; } body.inner.has-hero .site-head:not(.solid) .topbar{border-bottom-color:transparent} /* No scrim over the video — the footage shows edge to edge, at full strength. Legibility rests on the glyph shadows below instead, which add contrast around the letters only, the same trade the header already makes. On a very bright frame the text will read as softer than it would over dark footage. */ .page-hero .page-hero-body{ position:relative;z-index:3;width:100%; padding-block:clamp(1.8rem,5vw,4rem); } .page-hero .eyebrow{margin-bottom:.6rem;text-shadow:0 1px 10px rgba(0,0,0,.55)} .page-hero h1{ font-family:var(--f-head);font-weight:800;line-height:1.04; font-size:clamp(1.9rem,5vw,3.6rem);margin:0 0 .75rem;text-wrap:balance; text-shadow:0 2px 6px rgba(0,0,0,.42), 0 1px 22px rgba(0,0,0,.5); } .page-hero .lead{ max-width:60ch;margin:0;color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5), 0 1px 18px rgba(0,0,0,.45); } .hero.ready .hero-poster{opacity:0} /* No bottom fade — the video runs clean to the edge and cuts straight into the next section. The two controls that sit down there carry their own contrast instead, so nothing relies on a gradient behind them. */ /* Sound toggle — the only control on the hero */ .hero-sound{ position:absolute;left:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem); z-index:5;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.4); backdrop-filter:blur(10px);transition:all .28s var(--ease); } .hero-sound:hover{background:var(--brand);color:#000;border-color:transparent;transform:scale(1.07)} .hero-sound svg{width:19px;height:19px} .hero-sound .on{display:none} .hero-sound.unmuted .on{display:block} .hero-sound.unmuted .off{display:none} .scroll-hint{ position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:5; width:22px;height:36px;border:1px solid rgba(255,255,255,.45);border-radius:12px; /* Without the old bottom gradient this sits directly on the footage. */ background:rgba(0,0,0,.22);backdrop-filter:blur(4px); box-shadow:0 2px 10px rgba(0,0,0,.35); } .scroll-hint::after{ content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px; background:var(--brand);transform:translateX(-50%);animation:sd 1.9s infinite; } @keyframes sd{0%{opacity:0;top:7px}40%{opacity:1}80%{opacity:0;top:20px}100%{opacity:0}} @media(max-width:900px){.scroll-hint{display:none}} /* Screen-reader-only H1 — keeps the page SEO-valid with no visible copy */ .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; } /* ============================================================ GOOGLE REVIEWS — authentic Google widget styling ============================================================ */ .greviews{background:var(--bg-2);border-block:1px solid var(--line)} .gr-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:start} .gr-grid > *{min-width:0} @media(max-width:980px){.gr-grid{grid-template-columns:minmax(0,1fr)}} /* Summary card (white, like Google) */ .gr-summary{ background:#fff;color:#202124;border-radius:12px;padding:1.6rem 1.5rem; box-shadow:0 2px 10px rgba(0,0,0,.35);position:sticky;top:96px; font-family:'Inter',Roboto,Arial,sans-serif; } @media(max-width:980px){.gr-summary{position:static}} .g-logo{display:flex;align-items:center;gap:.5rem;margin-bottom:.15rem} .g-logo svg{width:22px;height:22px} .g-logo b{font-size:1.03rem;font-weight:500;color:#202124;letter-spacing:-.01em} .gr-sub{font-size:.78rem;color:#70757a;margin-bottom:1.15rem} .gr-score{display:flex;align-items:baseline;gap:.55rem} .gr-score b{font-size:2.6rem;font-weight:400;color:#202124;line-height:1;font-family:'Inter',Arial,sans-serif} .gr-stars{display:flex;gap:1px} .gr-stars svg{width:17px;height:17px;color:#FBBC04} .gr-count{font-size:.8rem;color:#70757a;margin-top:.45rem} .gr-count a{color:#1a73e8;text-decoration:none} .gr-count a:hover{text-decoration:underline} .gr-bars{margin:1.15rem 0 1.25rem;display:grid;gap:5px} .gr-bar{display:flex;align-items:center;gap:.55rem;font-size:.74rem;color:#70757a} .gr-bar i{font-style:normal;width:8px;text-align:right} .gr-bar u{flex:1;height:9px;border-radius:5px;background:#e8eaed;overflow:hidden;text-decoration:none} .gr-bar u b{display:block;height:100%;background:#FBBC04;border-radius:5px} .gr-write{ display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%; border:1px solid #dadce0;border-radius:100px;padding:.6rem 1rem; font-size:.86rem;font-weight:500;color:#1a73e8;background:#fff;transition:background .2s; } .gr-write:hover{background:#f1f3f4} .gr-write svg{width:16px;height:16px} /* Review cards rail */ .gr-rail{position:relative;min-width:0;max-width:100%} .gr-track{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,318px); gap:1rem; /* overflow-x:auto alone makes overflow-y compute to 'auto', which turns this rail into a vertical scroll container and swallows the page scroll when the cursor is over the review cards. Pinning overflow-y fixes that. */ overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain; /* Cards size themselves rather than stretching to the tallest, so one expanded card does not drag the whole row taller. */ align-items:start; padding-bottom:1.1rem;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent; } /* Snapping fights the autoplay animation, so it is only applied while the visitor is the one driving the rail. */ .gr-track.is-manual{scroll-snap-type:x mandatory} .gr-track.is-manual .gr-card{scroll-snap-align:start} .gr-track::-webkit-scrollbar{height:5px} .gr-track::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px} .gr-card{ position:relative;overflow:hidden; background:#fff;color:#202124;border-radius:12px;padding:1.15rem 1.2rem 1rem; display:flex;flex-direction:column; font-family:'Inter',Roboto,Arial,sans-serif; /* Every card is the same height however long the review is. Opening one releases it; see .is-open. */ height:var(--gr-card-h,330px); box-shadow:0 2px 10px rgba(0,0,0,.3); transition:transform .3s var(--ease),box-shadow .3s var(--ease),height .35s var(--ease); } .gr-card.is-open{height:auto} .gr-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.45)} /* Hover flash: a single sheen sweeping across the card. */ .gr-card::after{ content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(105deg, rgba(var(--brand-rgb),0) 38%, rgba(var(--brand-rgb),.16) 50%, rgba(var(--brand-rgb),0) 62%); transform:translateX(-130%);opacity:0; } .gr-card:hover::after{animation:gr-flash .72s var(--ease) 1} @keyframes gr-flash{ 0%{transform:translateX(-130%);opacity:0} 12%{opacity:1} 100%{transform:translateX(130%);opacity:0} } @media(prefers-reduced-motion:reduce){ .gr-card:hover::after{animation:none} .gr-card{transition:none} } .gr-head{display:flex;align-items:center;gap:.65rem;margin-bottom:.6rem} .gr-av{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none; color:#fff;font-weight:500;font-size:1rem; } .gr-who b{display:block;font-size:.87rem;font-weight:500;color:#202124;line-height:1.3} .gr-who span{font-size:.74rem;color:#70757a} .gr-card .gr-stars{margin-bottom:.5rem} .gr-card .gr-stars svg{width:15px;height:15px} /* Deliberately not flex:1 — a stretched -webkit-box reports a clientHeight taller than the clamped text, which would break the "is it clipped?" test that decides whether a card gets a More button. The footer is pushed down with margin-top:auto instead. */ .gr-text{ font-size:.845rem;line-height:1.55;color:#3c4043;margin:0;flex:0 1 auto; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8; overflow:hidden; } .gr-card.is-open .gr-text{display:block;-webkit-line-clamp:unset;overflow:visible} /* "More" / "Less" toggle — only rendered when the text is actually clipped. */ .gr-more{ align-self:flex-start;margin-top:.45rem;padding:0; font:500 .8rem/1 'Inter',Roboto,Arial,sans-serif; color:#1a73e8;background:none;border:0;cursor:pointer; } .gr-more:hover{text-decoration:underline} .gr-more:focus-visible{outline:2px solid #1a73e8;outline-offset:3px;border-radius:3px} .gr-foot{display:flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.85rem;font-size:.7rem;color:#9aa0a6} .gr-foot svg{width:14px;height:14px} .gr-nav{position:absolute;top:-52px;right:0;display:flex;gap:.4rem} .gr-nav button{ width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2); display:grid;place-items:center;color:var(--text-2);transition:all .25s; } .gr-nav button:hover{border-color:var(--brand);color:var(--brand-2)} .gr-nav svg{width:16px;height:16px} @media(max-width:600px){.gr-nav{display:none}} /* ============================================================ ABOUT ============================================================ */ .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} @media(max-width:920px){.about-grid{grid-template-columns:1fr;gap:2.4rem}} .about-copy p{color:var(--text-2);margin:0 0 1.05rem} .about-points{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.9rem 0 2.2rem} @media(max-width:480px){.about-points{grid-template-columns:1fr}} .pt{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--text-2)} .pt svg{width:19px;height:19px;color:var(--brand);flex:none;margin-top:.15rem} .about-media{position:relative} .about-media .m1{border-radius:var(--r-lg);width:100%;aspect-ratio:4/5;object-fit:cover} .about-media .m2{ position:absolute;right:-6%;bottom:-8%;width:52%;aspect-ratio:4/3;object-fit:cover; border-radius:var(--r-md);border:5px solid var(--bg); } .about-tag{ position:absolute;left:-4%;top:8%;background:var(--surface);border:1px solid var(--line-2); border-radius:var(--r-md);padding:.9rem 1.1rem;box-shadow:var(--shadow); } .about-tag b{display:block;font-family:var(--f-head);font-size:1.5rem;line-height:1} .about-tag span{font-size:.7rem;color:var(--text-3);letter-spacing:.09em;text-transform:uppercase} /* ============================================================ VIDEO SHOWCASE (YouTube) ============================================================ */ .showcase{background:var(--bg-2);border-block:1px solid var(--line)} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.6rem;margin-bottom:2.6rem;flex-wrap:wrap} .sec-head .lead{margin:.7rem 0 0} .vfilters{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.9rem} .vfilters button{ padding:.5rem 1.05rem;border-radius:100px;border:1px solid var(--line); font-size:.8rem;font-weight:500;color:var(--text-2);transition:all .25s var(--ease); } .vfilters button:hover{border-color:var(--line-2);color:var(--text)} .vfilters button.on{background:var(--grad-brand);color:#120D00;border-color:transparent;font-weight:600} .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:1.15rem} .vcard{ position:relative;border-radius:var(--r-md);overflow:hidden;cursor:pointer; background:var(--surface);border:1px solid var(--line); transition:transform .4s var(--ease),border-color .3s; } .vcard:hover{transform:translateY(-6px);border-color:var(--brand)} .vthumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)} .vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .vcard:hover .vthumb img{transform:scale(1.07)} .vthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78) 100%)} .vplay{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9); width:54px;height:54px;border-radius:50%;display:grid;place-items:center;z-index:2; background:rgba(255,0,0,.92);color:#fff;transition:transform .35s var(--ease); } .vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.06)} .vplay svg{width:20px;height:20px;margin-left:2px} .vdur{ position:absolute;right:.6rem;bottom:.6rem;z-index:2; background:rgba(0,0,0,.82);color:#fff;font-size:.7rem;font-weight:500; padding:.14rem .4rem;border-radius:4px; } .vmeta{padding:.95rem 1rem 1.05rem} .vmeta h3{font-size:.95rem;font-weight:600;margin-bottom:.28rem;line-height:1.35} .vmeta span{font-size:.75rem;color:var(--text-3);letter-spacing:.05em;text-transform:uppercase} /* Lightbox */ .lb{ position:fixed;inset:0;z-index:200;background:rgba(4,4,6,.94);backdrop-filter:blur(10px); display:grid;place-items:center;padding:1.2rem; opacity:0;visibility:hidden;transition:opacity .3s var(--ease); } .lb.on{opacity:1;visibility:visible} .lb-inner{width:min(1100px,100%);position:relative} .lb-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#000} .lb-frame iframe,.lb-frame img,.lb-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000} .lb-close{ position:absolute;top:-52px;right:0;width:42px;height:42px;border-radius:50%; border:1px solid var(--line-2);display:grid;place-items:center;color:#fff; } .lb-close:hover{background:var(--brand);color:#000;border-color:transparent} .lb-close svg{width:19px;height:19px} .lb-cap{margin-top:.9rem;font-size:.88rem;color:var(--text-2);text-align:center} /* Gallery arrows. Outside the frame on a wide screen so they never sit over the picture; inside it once there is no room beside it. */ .lb-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:46px;height:46px;border-radius:50%; display:grid;place-items:center;cursor:pointer; background:rgba(18,18,23,.72);border:1px solid var(--line-2);color:#fff; backdrop-filter:blur(8px); transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease); } .lb-nav:hover{background:var(--brand);color:#000;border-color:transparent} .lb-nav svg{width:20px;height:20px} .lb-prev{left:-64px} .lb-next{right:-64px} @media(max-width:1240px){ .lb-prev{left:10px} .lb-next{right:10px} } @media(max-width:520px){ .lb-nav{width:40px;height:40px} .lb-nav svg{width:18px;height:18px} } .lb-count{ margin-top:.3rem;font-size:.74rem;letter-spacing:.1em; color:var(--text-3);text-align:center; } /* .lb-nav sets display:grid, which would otherwise beat the hidden attribute. */ .lb-nav[hidden],.lb-count[hidden]{display:none} /* Shown instead of an iframe when a card has no usable YouTube link. */ .lb-msg{ display:grid;place-content:center;gap:.6rem;height:100%;min-height:240px; padding:2.5rem 2rem;text-align:center;background:#111114;border-radius:12px; } .lb-msg p{margin:0;color:var(--text-2);font-size:.92rem;line-height:1.6;max-width:44ch} .lb-msg p:first-child{color:#fff;font-size:1.05rem;font-weight:600} /* A card with no playable link should not pretend it is a play button. */ .vcard.is-unplayable .vplay{opacity:.45} /* ============================================================ SERVICE LIST BLOCKS (videography / photography types) ============================================================ */ .svc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem 1.6rem} @media(max-width:860px){.svc-cols{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.svc-cols{grid-template-columns:1fr}} .svc-item{ display:flex;align-items:center;gap:.75rem; padding:.82rem .95rem;border-radius:var(--r-sm); border:1px solid var(--line);background:var(--surface); font-size:.885rem;font-weight:500;color:var(--text-2); transition:all .28s var(--ease); } .svc-item:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--text);transform:translateX(4px)} .svc-item i{ width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center; background:var(--brand-soft);color:var(--brand-2);font-style:normal; } .svc-item i svg{width:12px;height:12px} /* ============================================================ PHOTOGRAPHY GALLERY ============================================================ */ .photo-sec{background:var(--bg-2);border-block:1px solid var(--line)} .pgrid{ display:grid;grid-template-columns:repeat(4,1fr); grid-auto-rows:150px;gap:4px;grid-auto-flow:dense; } @media(max-width:1000px){.pgrid{grid-template-columns:repeat(3,1fr);grid-auto-rows:135px}} @media(max-width:680px){.pgrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:125px}} .pcell{ /* Square corners and a 4px gutter: the mosaic reads as one sheet of photography rather than a row of separate rounded cards. */ /*
carries a browser default margin of 1em 40px. Never reset, it was adding 80px between every tile — the real cause of the wide gaps, not the grid gutter. */ margin:0; position:relative;border-radius:0;overflow:hidden;cursor:pointer; background:var(--surface-2); } .pcell.tall{grid-row:span 2} .pcell.wide{grid-column:span 2} .pcell.big{grid-column:span 2;grid-row:span 2} /* Two columns on the narrowest layout, so a "wide" or "big" tile would fill the whole row and lose the mosaic. Drop them to a single column there. */ @media(max-width:680px){.pcell.wide{grid-column:span 1}.pcell.big{grid-column:span 1;grid-row:span 2}} .pcell img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s} .pcell:hover img{transform:scale(1.08)} .pcell::after{ content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.8)); opacity:0;transition:opacity .35s; } .pcell:hover::after{opacity:1} .pcap{ position:absolute;left:.85rem;bottom:.75rem;z-index:2; font-size:.78rem;font-weight:500;color:#fff; opacity:0;transform:translateY(8px);transition:.35s var(--ease); } .pcell:hover .pcap{opacity:1;transform:none} .pzoom{ position:absolute;right:.7rem;top:.7rem;z-index:2;width:30px;height:30px;border-radius:50%; background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff; opacity:0;transform:scale(.8);transition:.3s var(--ease); } .pcell:hover .pzoom{opacity:1;transform:none} .pzoom svg{width:14px;height:14px} /* ============================================================ LIVE STREAMING ============================================================ */ .stream-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center} @media(max-width:920px){.stream-grid{grid-template-columns:1fr}} .stream-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3} .stream-media img{width:100%;height:100%;object-fit:cover} .live-dot{ position:absolute;left:1rem;top:1rem;z-index:2;display:inline-flex;align-items:center;gap:.45rem; background:rgba(0,0,0,.7);backdrop-filter:blur(8px);border-radius:100px; padding:.35rem .8rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;color:#fff; } .live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b30;animation:blink 1.4s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} .stream-feats{display:grid;gap:.9rem;margin:1.7rem 0 2.1rem} .sf{display:flex;gap:.9rem;align-items:flex-start} .sf i{ width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center; background:var(--brand-soft);color:var(--brand-2); } .sf i svg{width:18px;height:18px} .sf b{display:block;font-family:var(--f-head);font-size:.94rem;margin-bottom:.15rem} .sf span{font-size:.85rem;color:var(--text-3);line-height:1.55} /* ============================================================ CLIENTS ============================================================ */ .clients{overflow:hidden;background:var(--bg-2);border-block:1px solid var(--line)} .marquee{display:flex;gap:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .mq-row{display:flex;gap:0;flex:none;animation:mq 42s linear infinite} .clients:hover .mq-row{animation-play-state:paused} @keyframes mq{to{transform:translateX(-100%)}} .mq-row .cli{ flex:none;width:clamp(140px,16vw,190px);height:82px;display:grid;place-items:center; border-right:1px solid var(--line); font-family:var(--f-head);font-weight:700;font-size:.92rem;letter-spacing:.04em; color:var(--text-3);opacity:.7;transition:.3s var(--ease); } .mq-row .cli:hover{color:var(--brand-2);opacity:1} .mq-row.rev{animation-direction:reverse} /* ============================================================ SERVICE CATEGORY CARDS ============================================================ */ .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem} @media(max-width:1080px){.cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.cards{grid-template-columns:1fr}} .card{ position:relative;border-radius:var(--r-md);overflow:hidden; border:1px solid var(--line);background:var(--surface); display:flex;flex-direction:column; transition:transform .4s var(--ease),border-color .3s; } .card:hover{transform:translateY(-7px);border-color:var(--brand)} .card-img{position:relative;aspect-ratio:16/10;overflow:hidden} .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .card:hover .card-img img{transform:scale(1.09)} .card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(18,18,23,.95))} .card-icon{ position:absolute;left:1rem;bottom:1rem;z-index:2;width:38px;height:38px;border-radius:10px; background:var(--grad-brand);color:#fff;display:grid;place-items:center; } .card-icon svg{width:19px;height:19px} .card-body{padding:1.1rem 1.15rem 1.3rem;flex:1;display:flex;flex-direction:column} .card-body h3{font-size:1.06rem;margin-bottom:.75rem} .card-body ul{display:grid;gap:.4rem;margin-bottom:1.1rem;flex:1} .card-body li{ font-size:.82rem;color:var(--text-3);padding-left:1.05rem;position:relative;line-height:1.5; } .card-body li::before{ content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--brand); } .card-link{ display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-head); font-size:.82rem;font-weight:600;color:var(--brand-2); } .card-link svg{width:14px;height:14px;transition:transform .3s var(--ease)} .card:hover .card-link svg{transform:translateX(4px)} /* ============================================================ CTA BAND + QUOTE FORM ============================================================ */ .cta-band{ position:relative;overflow:hidden; background:linear-gradient(135deg,#15100A 0%,#0D0D11 55%,#0A0A0D 100%); border-block:1px solid var(--line); } .cta-band::before{ content:"";position:absolute;width:640px;height:640px;border-radius:50%; background:radial-gradient(circle,rgba(var(--brand-rgb),.16),transparent 68%); top:-45%;right:-8%;pointer-events:none; } .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;position:relative} @media(max-width:920px){.cta-grid{grid-template-columns:1fr}} .qform{ background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2.1rem);box-shadow:var(--shadow); } .qform h3{font-size:1.2rem;margin-bottom:.35rem} .qform p{font-size:.83rem;color:var(--text-3);margin:0 0 1.3rem} .frow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem} @media(max-width:480px){.frow{grid-template-columns:1fr}} .fld{display:block;margin-bottom:.8rem} .fld span{display:block;font-size:.75rem;font-weight:600;color:var(--text-3);margin-bottom:.35rem;letter-spacing:.03em} .fld input,.fld select,.fld textarea{ width:100%;padding:.72rem .9rem;border-radius:var(--r-sm); background:var(--bg-2);border:1px solid var(--line);color:var(--text); font-family:var(--f-body);font-size:.88rem;transition:border-color .25s,background .25s; } .fld textarea{resize:vertical;min-height:88px} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand);background:var(--surface-2)} .fld input::placeholder,.fld textarea::placeholder{color:var(--text-3)} .qform .btn{width:100%;margin-top:.4rem} .fnote{font-size:.72rem;color:var(--text-3);text-align:center;margin:.85rem 0 0} /* ============================================================ FAQ ============================================================ */ .faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start} @media(max-width:920px){.faq-grid{grid-template-columns:1fr}} .faq-list{display:grid;gap:.65rem} .faq{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;transition:border-color .3s} .faq.open{border-color:var(--brand)} .faq button{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.1rem 1.25rem;text-align:left; font-family:var(--f-head);font-size:.96rem;font-weight:600;line-height:1.4; } .faq-ic{ width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center; border:1px solid var(--line-2);color:var(--brand-2);transition:.35s var(--ease); } .faq.open .faq-ic{background:var(--grad-brand);color:#fff;border-color:transparent;transform:rotate(45deg)} .faq-ic svg{width:13px;height:13px} .faq-ans{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .faq-ans p{margin:0;padding:0 1.25rem 1.25rem;font-size:.88rem;color:var(--text-2);line-height:1.65} /* ============================================================ MAP ============================================================ */ .map-wrap{ position:relative;height:clamp(340px,46vh,520px); overflow:hidden; /* Full-bleed: break out of the centred .wrap column and span the viewport. html and body both carry overflow-x:hidden, so the few pixels of scrollbar difference are clipped rather than creating a horizontal scrollbar. Done with margins, NOT transform. This element carries data-rv="wipe", and the reveal system sets transform:none on [data-rv].in — specificity (0,2,0) against .map-wrap's (0,1,0), so it wins. A translateX(-50%) here therefore survived only until the map scrolled into view, at which point the centring half of the trick was cancelled and the map jumped a half-viewport right, leaving the left half of the row black. prefers-reduced-motion does the same thing with !important. Margins are untouched by either, so they hold. */ width:100vw;margin-inline:calc(50% - 50vw); border-radius:0;border-block:1px solid var(--line-2); } /* Shown in full colour — the old greyscale/invert filter made a Google map look broken rather than styled. */ .map-wrap iframe{width:100%;height:100%;border:0} .map-card{ /* Anchored to the content column, not the viewport edge, now that the map itself runs edge to edge. */ position:absolute;left:calc(50% - min(620px, 46vw));top:clamp(1rem,3vw,2rem); background:rgba(18,18,23,.94);backdrop-filter:blur(14px); border:1px solid var(--line-2);border-radius:var(--r-md); padding:1.2rem 1.35rem;max-width:290px;box-shadow:var(--shadow); } .map-card b{font-family:var(--f-head);font-size:1rem;display:block;margin-bottom:.5rem} .map-card p{font-size:.83rem;color:var(--text-2);margin:0 0 .9rem;line-height:1.6} .map-card .btn{padding:.6rem 1.1rem;font-size:.8rem} @media(max-width:600px){ /* The card un-pins and stacks above the map. Its parent now runs edge to edge, so it needs its own gutter or it sits flush against both sides. */ .map-card{position:static;max-width:none;border-radius:var(--r-md); margin:1rem 1rem .9rem} .map-wrap{height:300px}} /* ============================================================ FOOTER ============================================================ */ .ftr{background:var(--bg-2);border-top:1px solid var(--line);padding-top:clamp(3rem,6vw,4.6rem)} .ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(1.6rem,4vw,3rem)} @media(max-width:940px){.ftr-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.ftr-grid{grid-template-columns:1fr}} .ftr h4{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-bottom:1.1rem;font-weight:600} .ftr-links{display:grid;gap:.55rem} .ftr-links a{font-size:.85rem;color:var(--text-3);transition:color .25s,padding-left .25s} .ftr-links a:hover{color:var(--brand-2);padding-left:4px} .ftr-about p{font-size:.86rem;color:var(--text-3);margin:1rem 0 1.3rem;line-height:1.7;max-width:38ch} .ftr-contact{display:grid;gap:.75rem} .fc{display:flex;gap:.65rem;align-items:flex-start;font-size:.85rem;color:var(--text-3)} .fc svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:.22rem} .fc a:hover{color:var(--brand-2)} .ftr-bot{ margin-top:clamp(2.2rem,5vw,3.4rem);border-top:1px solid var(--line); padding-block:1.3rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-size:.78rem;color:var(--text-3); } .ftr-bot nav{display:flex;gap:1.2rem;flex-wrap:wrap} .ftr-bot a:hover{color:var(--brand-2)} /* ============================================================ FLOATING ACTIONS ============================================================ */ .float-cta{position:fixed;right:clamp(.9rem,2vw,1.5rem);bottom:clamp(.9rem,2vw,1.5rem);z-index:90;display:grid;gap:.6rem} .fab{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; color:#fff;box-shadow:0 10px 26px -8px rgba(0,0,0,.75); transition:transform .3s var(--ease); } .fab:hover{transform:scale(1.09)} .fab svg{width:24px;height:24px} .fab-wa{background:#25D366} .fab-top{background:var(--surface);border:1px solid var(--line-2);color:var(--text-2);opacity:0;visibility:hidden;transition:.3s} .fab-top.on{opacity:1;visibility:visible} .fab-top svg{width:19px;height:19px} /* Mobile sticky action bar */ .mbar{ position:fixed;left:0;right:0;bottom:0;z-index:95;display:none; grid-template-columns:1fr 1fr 1fr; background:rgba(13,13,17,.97);backdrop-filter:blur(16px); border-top:1px solid var(--line-2);padding-bottom:env(safe-area-inset-bottom); } .mbar a{ display:flex;flex-direction:column;align-items:center;gap:.22rem; padding:.62rem .3rem;font-size:.66rem;font-weight:600;color:var(--text-2); border-right:1px solid var(--line);letter-spacing:.03em; } .mbar a:last-child{border-right:0} .mbar a svg{width:18px;height:18px;color:var(--brand)} .mbar a.wa svg{color:#25D366} @media(max-width:768px){ .mbar{display:grid} body{padding-bottom:60px} .float-cta{bottom:74px} } /* ========================================================================== Empty media placeholder Shown wherever the client has not uploaded an image yet. Without this an renders as a browser broken-image icon, which reads as a fault rather than as "content pending". ========================================================================== */ .media-ph{ position:absolute;inset:0;display:grid;place-items:center;gap:.5rem; background: repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 10px, rgba(255,255,255,.045) 10px 20px), var(--surface-2); color:var(--text-3);text-align:center;padding:1rem; } .media-ph svg{width:26px;height:26px;opacity:.5} .media-ph span{font-size:.72rem;line-height:1.4;max-width:22ch} .pcell.is-empty{cursor:default} .pcell.is-empty:hover img{transform:none} .pcell.is-empty::after{display:none} /* ========================================================================== MOBILE REFINEMENTS ========================================================================== */ /* The drawer is position:fixed but lives inside .site-head, and an element with a backdrop-filter becomes the containing block for fixed descendants. Once the header turned solid on scroll — or on any inner page — the menu was being laid out inside the 126px-tall header instead of the viewport, so opening it appeared to do nothing. Dropping the blur only while the menu is open restores the viewport as the containing block; the solid background stays, so the header still looks the same. */ body.menu-open .site-head, body.menu-open .site-head.solid, body.menu-open.inner .site-head{backdrop-filter:none !important} @media(max-width:768px){ /* The sticky bottom bar already carries Call, WhatsApp and Get Quote, so the same three in the top bar are redundant on a phone. */ .topbar{display:none} /* Centred full-width menu panel rather than a narrow right-hand drawer. */ .nav{ inset:0;width:100%; align-items:center;justify-content:flex-start; text-align:center;padding:6.4rem 1.4rem 3rem;border-left:0; } /* Three layers inside .site-head, and they were in the wrong order: .hdr z-index 2 (and the drawer .nav, z-index 99, lives INSIDE it) .nav-scrim z-index 98 Because .hdr creates its own stacking context at 2, the scrim at 98 painted over the whole menu — every link sat under a 68%-black sheet while the logo and burger, lifted separately, stayed bright. Lift .hdr above the scrim, then lift the logo and burger above the panel within it. */ .hdr{z-index:100} .logo,.hdr-cta{position:relative;z-index:101} /* The panel is full-screen and opaque at this width, so there is no "outside" left to dim or to click on. */ body.menu-open .nav-scrim{display:none} .nav > li{width:100%;max-width:360px} .nav > li > a{text-align:center} .nav .sub{padding:.2rem 0 .5rem;text-align:center} .nav .sub a{display:block;padding:.5rem 0} /* Footer reads as one centred column on a phone. */ .ftr-grid{text-align:center} .ftr-about .logo{justify-content:center} .ftr-about p{margin-inline:auto} .ftr-about .tb-social{justify-content:center} .ftr-links{justify-items:center} .ftr-links a:hover{padding-left:0} .fc{justify-content:center;text-align:left} .ftr .btn-brand{display:inline-flex} .ftr-bot{justify-content:center;text-align:center} .ftr-bot nav{justify-content:center;width:100%} } /* Official WhatsApp mark: the SVG carries its own green bubble, so the round green background behind it is removed and the glyph fills the button. */ .fab-wa{background:none;box-shadow:0 10px 26px -8px rgba(0,0,0,.75)} .fab-wa svg{width:100%;height:100%} /* ========================================================================== MULTI-SELECT — "Service Needed" on the quote form A button plus a checkbox panel. A native