/* PG Detailing — mobile-first demo. Palette carried over from pg-detailing-site. */ :root{ --bg:#04070b; --bg-2:#080d14; --panel:rgba(255,255,255,.035); --panel-2:rgba(255,255,255,.06); --text:#eef5fc; --dim:#93a6bb; --faint:#5b6c81; --cyan:#22d3ee; --blue:#0ea5e9; --deep:#0369a1; --chrome:#cbd5e1; --green:#34d399; --gold:#fbbf24; --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.17); --fd:'Space Grotesk','Manrope',sans-serif; --fb:'Inter','Manrope',sans-serif; --e:cubic-bezier(.22,1,.36,1); --eo:cubic-bezier(.34,1.56,.64,1); } *{box-sizing:border-box} /* overflow-x on as well as — body alone does not stop the drag on real phones */ /* overscroll-behavior must live on (the root scroller), NOT on body — on body it blocks wheel/keyboard scroll chaining and freezes desktop scrolling */ html{overflow-x:hidden;max-width:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;overscroll-behavior-y:none} body{ margin:0;background:var(--bg);color:var(--text);font-family:var(--fb); font-size:16px;line-height:1.6;overflow-x:hidden;max-width:100%; -webkit-font-smoothing:antialiased; /* momentum scrolling on iOS Safari */ -webkit-overflow-scrolling:touch; } body.locked{overflow:hidden} h1,h2,h3,h4{font-family:var(--fd);margin:0;letter-spacing:-.02em;line-height:1.15} p{margin:0} a{color:inherit;text-decoration:none} img,video{max-width:100%;display:block} .wrap{width:100%;max-width:560px;margin:0 auto;padding:0 20px} /* ---------- entrance ---------- */ @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}} .rise{opacity:0;animation:rise .72s var(--e) forwards} .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--e),transform .7s var(--e)} .reveal.in{opacity:1;transform:none} /* ---------- top bar ---------- */ .top{ position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px; padding:calc(7px + env(safe-area-inset-top)) 20px 7px; background:rgba(4,7,11,.78);backdrop-filter:blur(16px); border-bottom:1px solid var(--line); /* own compositor layer, so the blur isn't repainted every scroll frame */ transform:translateZ(0);will-change:transform; } .top .logo{display:flex;align-items:center;gap:10px;flex:1;min-width:0} /* logo.png is a true cutout (outer black plate flood-filled to alpha), so it needs no blend hack. It carries its own wordmark, hence the generous height. */ .brandimg{height:62px;width:auto} .brandfb{display:none;align-items:center;gap:10px;min-width:0} .logo.nologo .brandimg{display:none} .logo.nologo .brandfb{display:flex} .mark{width:36px;height:36px;flex:0 0 36px} .top .nm{font-family:var(--fd);font-weight:700;font-size:15.5px;letter-spacing:-.01em; display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .top .sub{font-size:10.5px;color:var(--faint);letter-spacing:.09em;text-transform:uppercase;display:block} .top .ig{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center; border:1px solid var(--line-2);background:var(--panel);color:var(--cyan);transition:.22s var(--e)} .top .ig:active{transform:scale(.93)} .icon{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none; stroke-linecap:round;stroke-linejoin:round} /* ---------- hero ---------- */ .hero{position:relative;min-height:82svh;display:flex;align-items:flex-end;overflow:hidden} .hero-stage{position:absolute;inset:0;z-index:0;background:var(--bg)} .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .3s linear} .hero-slide.active{opacity:1} /* deliberately heavy scrim: the source is phone photos/clips, the text has to win. */ .hero .scrim{position:absolute;inset:0;z-index:1; background: linear-gradient(180deg,rgba(4,7,11,.72) 0%,rgba(4,7,11,.5) 26%,rgba(4,7,11,.72) 62%,var(--bg) 99%), radial-gradient(120% 70% at 50% 12%,rgba(3,105,161,.28),transparent 66%); } /* .pulse fades this to fully opaque and back — the slide swap happens while it's solid black, so there's never a crossfade/double-exposure moment underneath. */ .hero .scrim::after{content:'';position:absolute;inset:0;background:var(--bg);opacity:0; transition:opacity .46s ease} .hero .scrim.pulse::after{opacity:1} @media(min-width:880px){ /* portrait phone clips get cropped hard by cover on a wide short hero — contain keeps the whole subject (e.g. the steering wheel) in frame, dark bars either side */ .hero-slide{object-fit:contain} } /* padding-block only — a `padding` shorthand here would wipe out .wrap's side padding */ .hero .inner{position:relative;z-index:2;width:100%;padding-block:40px 34px} .hero h1{font-size:clamp(34px,10.5vw,46px);font-weight:700;margin:0 0 12px} .hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),var(--blue) 55%,var(--chrome)); -webkit-background-clip:text;background-clip:text;color:transparent} .hero p{color:#c3d3e3;font-size:15.5px;max-width:34ch} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 20px;border-radius:14px;border:0;cursor:pointer; font:600 15px var(--fb);letter-spacing:-.01em; transition:transform .2s var(--eo),filter .25s var(--e);min-height:52px} .btn:active{transform:scale(.965)} .btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round} .btn-wa{background:linear-gradient(150deg,#3ddc97,#16a34a);color:#04140c; box-shadow:0 10px 30px -12px rgba(52,211,153,.7)} .btn-pri{background:linear-gradient(150deg,var(--cyan),var(--deep));color:#04070b; box-shadow:0 10px 30px -12px rgba(34,211,238,.7)} .btn-gho{background:var(--panel-2);color:var(--text);border:1px solid var(--line-2)} .btn-full{display:flex;width:100%} .btn-row{display:flex;flex-direction:column;gap:10px;margin-top:24px} /* ---------- sections ---------- */ .sec{padding:44px 0} .sec-alt{background:var(--bg-2);border-block:1px solid var(--line)} .shead{margin-bottom:22px} .shead .k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);font-weight:600} .shead h2{font-size:27px;font-weight:700;margin:9px 0 8px} .shead p{color:var(--dim);font-size:14.5px} /* ---------- service cards ---------- */ .cards{display:flex;flex-direction:column;gap:11px} .card{display:flex;gap:14px;padding:17px;border-radius:16px; border:1px solid var(--line);background:var(--panel);transition:.28s var(--e)} .card:active{border-color:var(--line-2)} .card .ic{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(150deg,rgba(34,211,238,.15),rgba(3,105,161,.15)); border:1px solid rgba(34,211,238,.24);color:var(--cyan)} .card .ic svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none; stroke-linecap:round;stroke-linejoin:round} .card h3{font-size:16.5px;font-weight:600;margin-bottom:4px} .card p{color:var(--dim);font-size:13.5px;line-height:1.55} /* priority badges — George's 🆘 / ⭐️ / (IMPORTANT) markers, rendered on-brand instead of as emojis (see the no-emoji standing rule) */ .tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px; font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px} .tag svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.2;fill:none; stroke-linecap:round;stroke-linejoin:round} .tag-sig{background:linear-gradient(150deg,var(--cyan),var(--deep));color:#04070b; box-shadow:0 6px 18px -8px rgba(34,211,238,.8)} .tag-top{border:1px solid rgba(34,211,238,.42);background:rgba(34,211,238,.09);color:var(--cyan)} .tag-key{border:1px solid rgba(251,191,36,.42);background:rgba(251,191,36,.09);color:var(--gold)} .card.flag{border-color:rgba(34,211,238,.34); background:linear-gradient(150deg,rgba(34,211,238,.07),rgba(3,105,161,.05))} .card .get{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px} .chip{font-size:11px;padding:4px 9px;border-radius:99px;background:var(--panel-2); border:1px solid var(--line);color:#b6c7d8} .card .ask{margin-top:12px;display:inline-flex;align-items:center;gap:6px; color:var(--cyan);font-size:13px;font-weight:600} .card .ask svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round} /* ---------- video cards ---------- */ .vgrid{display:flex;flex-direction:column;gap:14px} .vcard{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line); background:#000;aspect-ratio:9/13} .vcard video{width:100%;height:100%;object-fit:cover} .vcard .vlabel{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 16px 15px; background:linear-gradient(transparent,rgba(4,7,11,.92));pointer-events:none} .vcard .vlabel h3{font-size:16px;font-weight:600} .vcard .vlabel p{font-size:12.5px;color:var(--dim);margin-top:2px} .vplay{position:absolute;inset:0;z-index:3;display:grid;place-items:center; background:rgba(4,7,11,.34);border:0;cursor:pointer;transition:.3s var(--e)} .vplay span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center; background:rgba(4,7,11,.5);backdrop-filter:blur(8px);border:1.4px solid rgba(255,255,255,.34);color:#fff} .vplay svg{width:22px;height:22px;fill:currentColor;stroke:none;margin-left:3px} .vcard.playing .vplay{opacity:0;pointer-events:none} /* ---------- soon / placeholder ---------- */ .soon{border:1px dashed var(--line-2);border-radius:18px;padding:26px 20px;text-align:center; background:repeating-linear-gradient(-45deg,transparent,transparent 9px,rgba(255,255,255,.017) 9px,rgba(255,255,255,.017) 18px)} .soon .ic{width:46px;height:46px;margin:0 auto 13px;border-radius:13px;display:grid;place-items:center; border:1px solid rgba(251,191,36,.3);background:rgba(251,191,36,.09);color:var(--gold)} .soon .ic svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .soon h3{font-size:17px;font-weight:600;margin-bottom:7px} .soon p{color:var(--dim);font-size:13.5px;max-width:30ch;margin:0 auto} /* ---------- steps ---------- */ .steps{display:flex;flex-direction:column;gap:0} .step{display:flex;gap:15px;padding:0 0 22px;position:relative} .step:last-child{padding-bottom:0} .step::before{content:'';position:absolute;left:16px;top:36px;bottom:0;width:1px; background:linear-gradient(var(--line-2),transparent)} .step:last-child::before{display:none} .step .n{width:33px;height:33px;flex:0 0 33px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(34,211,238,.34);background:rgba(34,211,238,.08); color:var(--cyan);font:600 13px var(--fd);position:relative;z-index:1} .step h3{font-size:15.5px;font-weight:600;margin-bottom:3px} .step p{color:var(--dim);font-size:13.5px} /* ---------- contact rows ---------- */ .rows{display:flex;flex-direction:column;gap:10px} .row{display:flex;align-items:center;gap:14px;padding:16px;border-radius:15px; border:1px solid var(--line);background:var(--panel);transition:.22s var(--e)} .row:active{transform:scale(.985);border-color:var(--line-2)} .row .ic{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center; border:1px solid var(--line-2);background:var(--panel-2)} .row .ic svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .row.wa .ic{color:var(--green);background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.28)} .row.ig .ic{color:#e1306c;background:rgba(225,48,108,.1);border-color:rgba(225,48,108,.28)} .row.tel .ic{color:var(--chrome)} .row.pin .ic{color:var(--gold);background:rgba(251,191,36,.09);border-color:rgba(251,191,36,.26)} .row .t{flex:1;min-width:0} .row .t b{display:block;font-size:15px;font-weight:600} .row .t span{display:block;font-size:13px;color:var(--dim)} .row .go{color:var(--faint)} .row .go svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} /* ---------- floating action buttons ---------- */ .fabs{position:fixed;right:16px;z-index:50;display:flex;flex-direction:column;gap:11px; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateZ(0);will-change:transform,opacity} .fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(255,255,255,.13);opacity:0;transform:scale(.4); animation:pop .55s var(--eo) forwards; transition:transform .2s var(--eo),opacity .3s var(--e)} .fab:active{transform:scale(.9)} .fab svg{width:26px;height:26px} /* the IG mark is a squircle — it needs more optical room inside a round button */ .fab-ig svg{width:24px;height:24px} /* the footer carries its own social links, so the floating pair steps aside there */ .fabs{transition:opacity .3s var(--e),transform .35s var(--e)} .fabs.hide{opacity:0;transform:translateY(14px) scale(.9);pointer-events:none} .fab-wa{background:linear-gradient(150deg,#3ddc97,#15a34a);color:#04140c; box-shadow:0 12px 28px -10px rgba(52,211,153,.75);animation-delay:.5s} /* dark badge like the rest of the site's icons, with the Instagram pink on the glyph itself */ .fab-ig{background:var(--panel-2);border-color:var(--line-2); color:#e1306c;box-shadow:0 12px 28px -10px rgba(0,0,0,.5);animation-delay:.62s} .fab-wa svg{fill:currentColor;stroke:none} /* ---------- menu (real pages, not anchors) ---------- */ .burger{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center; border:1px solid var(--line-2);background:var(--panel);color:var(--text);cursor:pointer; transition:transform .2s var(--eo),background .2s var(--e)} .burger:active{transform:scale(.93)} .burger svg{width:21px;height:21px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round} .menu{position:fixed;inset:0;z-index:70;visibility:hidden} .menu.on{visibility:visible} .menu .veil{position:absolute;inset:0;background:rgba(2,4,7,.74);backdrop-filter:blur(7px); opacity:0;transition:opacity .32s var(--e)} .menu.on .veil{opacity:1} /* full-screen overlay — fades/scales in over the page rather than sliding a drawer */ .menu .sheet{position:absolute;inset:0;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch; padding:calc(18px + env(safe-area-inset-top)) 26px calc(28px + env(safe-area-inset-bottom)); display:flex;flex-direction:column; opacity:0;transform:scale(.97);transition:opacity .38s var(--e),transform .4s var(--e);will-change:transform,opacity; background-image:radial-gradient(60% 40% at 15% 0%,rgba(34,211,238,.09),transparent 70%)} .menu.on .sheet{opacity:1;transform:none} .menu .mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px} .menu .mlogo{height:52px;width:auto;flex:0 1 auto;min-width:0} .menu .x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--line-2);background:var(--panel);color:var(--text);cursor:pointer; transition:transform .2s var(--eo),border-color .2s var(--e)} .menu .x:active{transform:scale(.9)} .menu .x svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round} /* big stacked link list, fading/rising in one at a time */ .menu nav{display:flex;flex-direction:column;margin:30px 0 32px} .menu nav a{padding:13px 0;font-family:var(--fd);font-weight:700;letter-spacing:-.01em; font-size:clamp(28px,9vw,34px);color:var(--text); opacity:0;transform:translateY(16px); transition:opacity .4s var(--e),transform .4s var(--e),color .2s var(--e)} .menu.on nav a{opacity:1;transform:none} .menu.on nav a:nth-child(1){transition-delay:.1s} .menu.on nav a:nth-child(2){transition-delay:.15s} .menu.on nav a:nth-child(3){transition-delay:.2s} .menu.on nav a:nth-child(4){transition-delay:.25s} .menu.on nav a:nth-child(5){transition-delay:.3s} .menu nav a:active{color:var(--cyan)} .menu nav a[aria-current="page"]{color:var(--cyan)} .menu .mfoot{margin-top:auto;display:flex;flex-direction:column;gap:10px} .menu .mfoot .btn{font-size:15px;padding:15px 16px;min-height:52px} .menu .msocial{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)} .menu .msocial a{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--line-2);background:var(--panel);color:var(--dim);transition:transform .2s var(--eo)} .menu .msocial a:active{transform:scale(.9)} .menu .msocial a svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .menu .msocial .m-ig{color:#e1306c} .menu .msocial .mphone{margin-left:2px;font-size:14px;font-weight:600;color:var(--dim)} .menu .mfoot p{margin-top:2px;font-size:12px;color:var(--faint)} /* ---------- footer ---------- */ footer{padding:30px 0 34px;text-align:center;border-top:1px solid var(--line);background:var(--bg-2)} footer .fm{width:38px;height:38px;margin:0 auto 12px} footer .flogolink{display:inline-block;transition:transform .2s var(--eo)} footer .flogolink:active{transform:scale(.94)} footer .flogo{height:92px;width:auto;margin:0 auto 12px} footer .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;margin:4px 0 20px} footer .fnav a{padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--dim); transition:.2s var(--e)} footer .fnav a:active{background:var(--panel-2);color:var(--text)} footer .fnav a[aria-current="page"]{color:var(--cyan)} footer .fsocial{display:flex;justify-content:center;gap:11px;margin-bottom:20px} footer .fsocial a{width:46px;height:46px;border-radius:14px;display:grid;place-items:center; border:1px solid var(--line);background:var(--panel);color:var(--dim); transition:transform .2s var(--eo),color .2s var(--e),border-color .2s var(--e)} footer .fsocial a:active{transform:scale(.92)} footer .fsocial svg{width:21px;height:21px} footer .fsocial .s-ig{color:#e1306c} footer .fsocial .s-wa{color:#04140c;border-color:transparent;background:linear-gradient(150deg,#3ddc97,#16a34a)} footer .fsocial .s-wa svg{fill:currentColor;stroke:none} footer .fsocial .s-tel{color:var(--chrome)} footer .fsocial .s-tel svg{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} footer .frule{height:1px;background:var(--line);margin:0 auto 18px;max-width:200px} footer.nologo .flogo{display:none} footer:not(.nologo) .fm{display:none} footer p{font-size:12.5px;color:var(--faint);line-height:1.7} footer a{color:var(--dim)} /* ---------- desktop nav (hidden on mobile, replaces the burger on wide screens) ---------- */ .dnav{display:none} /* ---------- hover states — pointer devices only, so touch keeps the :active feel ---------- */ @media(hover:hover){ .card:hover{border-color:var(--line-2);transform:translateY(-2px)} .row:hover{border-color:var(--line-2);transform:translateY(-2px)} .btn:hover{filter:brightness(1.08)} .btn-gho:hover{background:rgba(255,255,255,.09)} .fab:hover{transform:scale(1.07)} .top .ig:hover{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.08)} footer .fnav a:hover{background:var(--panel-2);color:var(--text)} footer .fsocial a:hover{transform:translateY(-2px)} .vplay:hover span{transform:scale(1.06)} } /* ---------- desktop layout ---------- */ @media(min-width:880px){ .wrap{max-width:1080px;padding:0 36px} /* top bar: real nav links, no burger */ .top{padding-left:max(20px,calc(50vw - 540px + 36px));padding-right:max(20px,calc(50vw - 540px + 36px));gap:18px} .burger{display:none} .dnav{display:flex;align-items:center;gap:4px;margin-left:auto} .dnav a{padding:9px 15px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--dim);transition:.2s var(--e)} .dnav a:hover{color:var(--text);background:var(--panel-2)} .dnav a[aria-current="page"]{color:var(--cyan);background:rgba(34,211,238,.08)} .dnav .dnav-wa{margin-left:10px;display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:12px;color:#04140c;font-weight:600;font-size:14px; background:linear-gradient(150deg,#3ddc97,#16a34a); box-shadow:0 8px 22px -10px rgba(52,211,153,.7)} .dnav .dnav-wa:hover{color:#04140c;background:linear-gradient(150deg,#3ddc97,#16a34a);filter:brightness(1.08)} .dnav .dnav-wa svg{width:17px;height:17px;fill:currentColor} /* hero: bigger type, side-by-side buttons, capped height */ .hero{min-height:min(78svh,720px)} .hero .inner{padding-block:64px 72px} .hero h1{font-size:clamp(46px,5vw,68px)} .hero p{font-size:18px;max-width:52ch} .btn-row{flex-direction:row;flex-wrap:wrap;gap:12px} .btn-full{display:inline-flex;width:auto;padding-inline:26px} /* sections: more air, bigger headings */ .sec{padding:76px 0} .shead{margin-bottom:34px;max-width:640px} .shead h2{font-size:38px} .shead p{font-size:16px} /* service cards: responsive grid instead of one long column */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px} .card{align-content:start} /* video cards: three portrait clips side by side */ .vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} /* steps: one row of three, connector line off */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .step{padding:0} .step::before{display:none} /* contact rows: two-up */ .rows{display:grid;grid-template-columns:1fr 1fr;gap:12px} .soon{padding:44px 32px} .soon p{max-width:44ch} footer{padding:44px 0 48px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} .rise,.reveal,.fab{opacity:1;transform:none} }