/* ============================================================ StarTech Prestige — Shared Design System (WordPress) ONE cached file for the whole site. Load once in . Pro-cartoon · futuristic · easy on the eyes · fast. Palette: black / charcoal / silver / electric-blue ONLY. ============================================================ */ /* ---------- Tokens ---------- */ :root{ /* Backgrounds — deep navy-black, not pure #000 (easier on eyes) */ --bg: #0D0D0D; --bg-2: #141414; --bg-3: #1A1A1A; --card: #1A1A1A; --card-2: #242424; --line: #2E2E2E; /* Silver / text */ --ink: #FFFFFF; --ink-soft: #C0C0C0; --ink-mute: #8A8A8A; /* Electric blue accent ramp */ --blue: #00AEEF; --blue-2: #33C5F5; --blue-3: #5CD2FF; --blue-deep: #0077A8; /* Effects */ --grad-blue: linear-gradient(135deg,#33C5F5,#00AEEF 55%,#0077A8); --grad-soft: linear-gradient(160deg,#242424,#1A1A1A); --glow: 0 0 40px rgba(0,174,239,.35); --shadow: 0 18px 40px rgba(0,0,0,.45); --shadow-lg: 0 30px 70px rgba(0,0,0,.55); /* Shape — sharper, more technical */ --r-sm:6px; --r:10px; --r-lg:14px; --pill:8px; --pill-soft:999px; /* Motion — smooth & precise (no cartoon bounce) */ --spring: cubic-bezier(.2,.7,.25,1); --ease: cubic-bezier(.4,0,.2,1); /* Fonts */ --fh:'Barlow Condensed',system-ui,sans-serif; /* headings/nav */ --fb:'Nunito',system-ui,sans-serif; /* body */ --mono:ui-monospace,'Cascadia Code','Segoe UI Mono',Consolas,monospace; /* tech labels */ --wrap:1200px; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body.stp{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--fb);font-weight:400;line-height:1.7; overflow-x:hidden;-webkit-font-smoothing:antialiased; } /* div.stp wrapper (WordPress content block) — self-sufficient regardless of theme */ .stp{background:var(--bg);color:var(--ink);font-family:var(--fb);font-weight:400; line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased} .stp img{max-width:100%;height:auto;display:block} .stp a{color:inherit;text-decoration:none} .stp h1,.stp h2,.stp h3,.stp h4{font-family:var(--fh);font-weight:900;line-height:1.04;margin:0;letter-spacing:-.01em} .stp p{margin:0 0 1rem} .stp ::selection{background:var(--blue);color:#fff} /* Visible keyboard focus (WCAG 2.4.7) */ .stp a:focus-visible,.stp button:focus-visible,.stp input:focus-visible,.stp select:focus-visible{ outline:3px solid var(--blue-3);outline-offset:2px;border-radius:6px} .stp .skip-link{position:absolute;left:-999px;top:0;z-index:1001;background:var(--blue);color:#fff; padding:12px 18px;border-radius:0 0 10px 0;font-family:var(--fh);font-weight:800} .stp .skip-link:focus{left:0} /* ---------- Layout ---------- */ .stp .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;width:100%} .stp .sec{position:relative;padding:88px 0} .stp .sec--alt{background:var(--bg-2)} .stp .center{text-align:center} .stp .eyebrow{ display:inline-flex;align-items:center;font-family:var(--mono);font-weight:600; letter-spacing:.22em;text-transform:uppercase;font-size:.72rem; color:var(--blue-3);padding:7px 14px;border:1px solid rgba(0,174,239,.28); border-radius:var(--pill);background:rgba(0,174,239,.06);margin-bottom:18px; box-shadow:0 0 18px rgba(0,174,239,.1),inset 0 0 18px rgba(0,174,239,.05); } .stp h1{font-size:clamp(2.6rem,7vw,5rem)} .stp .sec h2{font-size:clamp(2rem,4.6vw,3.2rem)} .stp .sec h2 + .lead{max-width:680px;margin:14px auto 0;color:var(--ink-soft);font-size:1.08rem} .stp .grad-text{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- Buttons (chunky, pillowy, spring) ---------- */ .stp .btn{ display:inline-flex;align-items:center;gap:.55em;cursor:pointer;border:none; font-family:var(--fh);font-weight:800;letter-spacing:.1em;text-transform:uppercase; border-radius:var(--pill);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s; white-space:nowrap;position:relative; } .stp .btn-primary{ background:var(--grad-blue);color:#fff;padding:16px 32px;font-size:1rem; box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 8px 26px rgba(0,174,239,.45),0 0 26px rgba(0,174,239,.25); } .stp .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.24) inset,0 12px 34px rgba(0,174,239,.6),0 0 40px rgba(0,174,239,.45)} .stp .btn-ghost{ background:rgba(0,174,239,.04);color:var(--ink);padding:14px 28px;font-size:.96rem; box-shadow:0 0 0 1px var(--line) inset; } .stp .btn-ghost:hover{transform:translateY(-2px);color:#fff;box-shadow:0 0 0 1px var(--blue-2) inset,0 0 24px rgba(0,174,239,.3)} .stp .btn-sm{padding:11px 22px;font-size:.86rem} .stp .btn-lg{padding:20px 42px;font-size:1.15rem} /* ---------- Cards (glass, cartoon-chunky) ---------- */ .stp .card{ background:linear-gradient(160deg,rgba(36,36,36,.55),rgba(26,26,26,.65)); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(192,192,192,.16);border-radius:var(--r-lg); padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } .stp .card:hover{transform:translateY(-5px);border-color:rgba(0,174,239,.5);box-shadow:var(--shadow-lg),0 0 30px rgba(0,174,239,.2)} .stp .card h3{font-size:1.5rem;margin-bottom:10px} .stp .card p{color:var(--ink-soft);font-size:.98rem;margin:0} .stp .grid{display:grid;gap:24px} .stp .g-2{grid-template-columns:repeat(2,1fr)} .stp .g-3{grid-template-columns:repeat(3,1fr)} .stp .g-4{grid-template-columns:repeat(4,1fr)} /* chunky icon chip */ .stp .chip{ width:58px;height:58px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(160deg,rgba(0,174,239,.18),rgba(0,174,239,.04)); border:1px solid rgba(0,174,239,.35);box-shadow:0 0 22px rgba(0,174,239,.22),inset 0 0 16px rgba(0,174,239,.1); margin-bottom:18px;position:relative; } .stp .chip::after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--blue-3);box-shadow:0 0 8px var(--blue-3)} .stp .chip svg{width:28px;height:28px;stroke:var(--blue-3);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* ---------- Navbar ---------- */ .stp .nav{position:sticky;top:0;z-index:900;background:rgba(13,13,13,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .stp .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px} .stp .brand{font-family:var(--fh);font-weight:900;font-size:1.45rem;letter-spacing:.02em;display:flex;align-items:center;gap:9px} .stp .brand b{color:var(--blue-2)} .stp .nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0} .stp .nav-links a{font-family:var(--fh);font-weight:700;font-size:1.02rem;color:var(--ink-soft);letter-spacing:.02em;transition:color .2s} .stp .nav-links a:hover{color:var(--blue-2)} .stp .burger{display:none;background:none;border:none;cursor:pointer;width:40px;height:40px} .stp .burger span{display:block;height:3px;width:24px;background:var(--ink);margin:5px auto;border-radius:3px;transition:.3s} .stp .mob{display:none;flex-direction:column;gap:6px;padding:16px 22px;background:var(--bg-2);border-bottom:1px solid var(--line)} .stp .mob.open{display:flex} .stp .mob a{font-family:var(--fh);font-weight:700;padding:12px 0;border-bottom:1px solid var(--line);font-size:1.1rem} /* ---------- Hero ---------- */ .stp .hero{position:relative;padding:90px 0 80px;overflow:hidden} .stp .hero::before{content:"";position:absolute;inset:0;z-index:0; background:radial-gradient(60% 80% at 78% 18%,rgba(0,174,239,.22),transparent 60%), radial-gradient(50% 60% at 10% 90%,rgba(0,174,239,.12),transparent 60%)} .stp .hero .wrap{position:relative;z-index:2} .stp .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center} .stp .hero p.lead{font-size:1.18rem;color:var(--ink-soft);max-width:560px;margin:20px 0 30px} .stp .hero-cta{display:flex;gap:14px;flex-wrap:wrap} .stp .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} .stp .badge{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--pill);padding:9px 16px;font-weight:800;font-size:.9rem} .stp .badge b{color:var(--blue-2)} .stp .badge svg:not(.racv-badge){width:20px;height:20px;flex:0 0 auto;stroke:var(--blue-2)!important;fill:none!important;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* ---------- Cinematic full-bleed hero (priority pages) ---------- */ .stp .hero-cine{position:relative;min-height:clamp(440px,68vh,640px);display:flex;align-items:center;overflow:hidden;isolation:isolate} .stp .hero-cine .bg{position:absolute;inset:0;z-index:-2} .stp .hero-cine .bg img{width:100%;height:100%;object-fit:cover} .stp .hero-cine::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,rgba(13,13,13,.94) 0%,rgba(13,13,13,.78) 42%,rgba(13,13,13,.30) 100%), radial-gradient(70% 90% at 85% 20%,rgba(0,174,239,.28),transparent 60%)} .stp .hero-cine .inner{max-width:760px} .stp .hero-cine h1{font-size:clamp(2.6rem,6.4vw,4.6rem)} .stp .hero-cine .lead{font-size:1.18rem;color:#EDEDED;max-width:560px;margin:18px 0 28px} /* Readability: scrim + text shadow so headings stay legible over any photo */ .stp .hero-cine h1,.stp .hero-cine .lead,.stp .hero-cine .eyebrow{text-shadow:0 2px 18px rgba(4,6,12,.85),0 1px 3px rgba(4,6,12,.9)} .stp .hero-cine .inner{background:radial-gradient(120% 130% at 0 50%,rgba(13,13,13,.7),transparent 70%);padding:8px 0} .stp .hero-cine .scrolldown{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);color:var(--ink-mute); font-family:var(--fh);font-weight:700;letter-spacing:.1em;font-size:.78rem;text-transform:uppercase;animation:bob 2.2s ease-in-out infinite} /* ---------- Stats ---------- */ .stp .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .stp .stat{text-align:center;background:var(--grad-soft);border:1.5px solid var(--line);border-radius:var(--r);padding:26px 14px} .stp .stat .n{font-family:var(--fh);font-weight:900;font-size:2.7rem;background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .stp .stat .l{color:var(--ink-mute);font-weight:700;font-size:.9rem;margin-top:6px} /* ---------- FAQ ---------- */ .stp .faq{max-width:820px;margin:0 auto} .stp .fi{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden} .stp .fq{width:100%;text-align:left;background:none;border:none;cursor:pointer;color:var(--ink); font-family:var(--fh);font-weight:800;font-size:1.18rem;padding:22px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center} .stp .fq i{flex:0 0 auto;transition:transform .3s var(--spring);color:var(--blue-2);font-style:normal;font-size:1.5rem} .stp .fi.open .fq i{transform:rotate(45deg)} .stp .fa{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)} .stp .fa p{padding:0 24px 22px;color:var(--ink-soft);margin:0} /* ---------- Footer ---------- */ .stp footer{background:var(--bg-2);border-top:1px solid var(--line);padding:64px 0 30px} .stp .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px} .stp footer h4{font-size:1.1rem;color:var(--ink);margin-bottom:16px;letter-spacing:.04em;text-transform:uppercase} .stp footer a,.stp footer li{color:var(--ink-mute);font-size:.95rem;line-height:2.1;list-style:none} .stp footer a:hover{color:var(--blue-2)} .stp footer ul{margin:0;padding:0} .stp .foot-bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:24px;text-align:center;color:var(--ink-mute);font-size:.85rem} /* ---------- Floating book pill ---------- */ .stp .float-book{position:fixed;right:20px;bottom:20px;z-index:950;opacity:0;transform:translateY(20px) scale(.9); transition:opacity .4s var(--ease),transform .4s var(--spring);pointer-events:none} .stp .float-book.show{opacity:1;transform:none;pointer-events:auto;animation:bob 2.6s ease-in-out infinite} @keyframes bob{50%{transform:translateY(-7px)}} .stp .progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-blue);z-index:999;transition:width .1s linear} /* ---------- Scroll reveal ---------- */ .stp .r{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--spring)} .stp .r.on{opacity:1;transform:none} .stp .r.d1{transition-delay:.08s}.stp .r.d2{transition-delay:.16s}.stp .r.d3{transition-delay:.24s}.stp .r.d4{transition-delay:.32s} /* ---------- Photo frames & media ---------- */ .stp .media{border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--shadow-lg);position:relative} .stp .media img{width:100%;height:100%;object-fit:cover;display:block} .stp .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(13,13,13,.55));pointer-events:none} .stp .hero-photo{position:relative} .stp .hero-photo .tag{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(13,13,13,.78);backdrop-filter:blur(8px); border:1.5px solid var(--line);border-radius:var(--pill);padding:9px 16px;font-family:var(--fh);font-weight:800;font-size:.92rem;display:flex;gap:8px;align-items:center} .stp .hero-photo .tag b{color:var(--blue-2)} .stp .hero-photo .tag svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--blue-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .stp .hero-photo .tag{white-space:nowrap;max-width:calc(100% - 32px)} @media(max-width:420px){.stp .hero-photo .tag{font-size:.8rem;white-space:normal}} /* image-top service card */ .stp .svc{display:flex;flex-direction:column;padding:0;overflow:hidden} .stp .svc .ph{aspect-ratio:4/3;overflow:hidden;position:relative} .stp .svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .stp .svc:hover .ph img{transform:scale(1.06)} .stp .svc .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(13,13,13,.7))} .stp .svc .bd{padding:24px 26px 28px} .stp .svc .bd h3{font-size:1.45rem;margin-bottom:8px} .stp .svc .bd p{color:var(--ink-soft);font-size:.97rem;margin:0} .stp .svc .more{display:inline-block;margin-top:14px;color:var(--blue-2);font-family:var(--fh);font-weight:800} /* gallery strip */ .stp .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .stp .gallery .media{aspect-ratio:4/3} .stp .gallery .media img{transition:transform .5s var(--ease)} .stp .gallery .media:hover img{transform:scale(1.07)} @media(max-width:880px){.stp .gallery{grid-template-columns:repeat(2,1fr)}} /* ---------- Decorative blobs / float ---------- */ @keyframes float{50%{transform:translateY(-14px)}} .stp .floaty{animation:float 5s ease-in-out infinite} .stp .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;pointer-events:none} /* ---------- Responsive ---------- */ @media(max-width:980px){ .stp .nav-links{display:none} .stp .burger{display:block} .stp .hero-grid{grid-template-columns:1fr;gap:30px} .stp .g-4{grid-template-columns:repeat(2,1fr)} .stp .stats{grid-template-columns:repeat(2,1fr)} .stp .foot-grid{grid-template-columns:1fr 1fr} } /* Prevent grid tracks from blowing out past the viewport (min-content overflow fix) */ .stp .grid > *,.stp .hero-grid > *,.stp .stats > *,.stp .steps > *{min-width:0} .stp .media img{max-width:100%} @media(max-width:640px){ .stp .sec{padding:54px 0} .stp .g-2,.stp .g-3{grid-template-columns:1fr} .stp .foot-grid{grid-template-columns:1fr} .stp .hero-cta{flex-direction:column;align-items:stretch} .stp .hero-cta .btn{justify-content:center;width:100%} /* let long button labels wrap instead of overflowing */ .stp .btn{white-space:normal;text-align:center;letter-spacing:.05em} .stp .btn-lg{padding:16px 22px;font-size:1.02rem} .stp .wrap{padding:0 18px} .stp h1{font-size:clamp(2.2rem,9vw,3rem)} .stp .sec h2{font-size:clamp(1.7rem,6.5vw,2.4rem)} .stp .hero{padding:64px 0 56px} .stp .hero-cine{min-height:auto;padding:72px 0 56px} .stp .hero-cine::after{background:linear-gradient(180deg,rgba(13,13,13,.82),rgba(13,13,13,.95))} .stp .hero-cine .inner{background:none} .stp .brands-track span{font-size:1.35rem} .stp .stat .n{font-size:2.1rem} .stp .fq{font-size:1.05rem;padding:18px} .stp .area-chip{font-size:.74rem;padding:8px 12px} } @media(max-width:400px){ .stp .stats{grid-template-columns:1fr 1fr;gap:12px} .stp .wrap{padding:0 14px} } /* ---------- Inline quote / booking form ---------- */ .stp .qform{background:var(--grad-soft);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-lg)} .stp .qform h3{font-size:1.7rem;margin-bottom:6px} .stp .qform .sub{color:var(--ink-soft);margin-bottom:18px;font-size:.96rem} .stp .qrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .stp .qform label{display:block;font-family:var(--fh);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:5px} .stp .qform input,.stp .qform select{width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--ink);font-family:var(--fb);font-size:1rem;transition:border-color .2s,box-shadow .2s} .stp .qform input:focus,.stp .qform select:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(0,174,239,.18)} .stp .qform .btn{width:100%;justify-content:center;margin-top:6px} .stp .qform .fineprint{color:var(--ink-mute);font-size:.8rem;text-align:center;margin:12px 0 0} @media(max-width:560px){.stp .qrow{grid-template-columns:1fr}} /* ---------- Process steps ---------- */ .stp .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step} .stp .step{position:relative;background:var(--grad-soft);border:1.5px solid var(--line);border-radius:var(--r);padding:28px 22px 24px} .stp .step::before{counter-increment:step;content:counter(step);position:absolute;top:-18px;left:22px;width:42px;height:42px;border-radius:50%; background:var(--grad-blue);color:#fff;font-family:var(--fh);font-weight:900;font-size:1.3rem;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,174,239,.45)} .stp .step h4{font-size:1.2rem;margin:10px 0 6px;text-transform:none;letter-spacing:0;color:var(--ink)} .stp .step p{color:var(--ink-soft);font-size:.92rem;margin:0} @media(max-width:880px){.stp .steps{grid-template-columns:1fr 1fr}} @media(max-width:480px){.stp .steps{grid-template-columns:1fr}} /* ---------- Tabs ---------- */ .stp .tabs{max-width:880px;margin:0 auto} .stp .tabnav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px} .stp .tabnav button{font-family:var(--fh);font-weight:800;letter-spacing:.04em;background:var(--card);border:1.5px solid var(--line);color:var(--ink-soft); padding:11px 20px;border-radius:var(--pill);cursor:pointer;transition:.2s} .stp .tabnav button[aria-selected="true"]{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(0,174,239,.4)} .stp .tabpanel{display:none}.stp .tabpanel.on{display:block;animation:fadein .4s var(--ease)} @keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------- Credentials strip ---------- */ .stp .creds{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .stp .cred{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:14px 20px} .stp .cred svg{width:26px;height:26px;stroke:var(--blue-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .stp .cred b{font-family:var(--fh);font-weight:800;display:block;font-size:1.02rem} .stp .cred span{color:var(--ink-mute);font-size:.84rem} /* ---------- Sticky mobile action bar ---------- */ .stp .actionbar{position:fixed;left:0;right:0;bottom:0;z-index:960;display:none; grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1.5px solid var(--line); transform:translateY(100%);transition:transform .35s var(--spring)} .stp .actionbar.show{transform:none} .stp .actionbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;font-family:var(--fh);font-weight:800; letter-spacing:.04em;text-transform:uppercase;font-size:.96rem;background:var(--bg-2);color:var(--ink)} .stp .actionbar a.book{background:var(--grad-blue);color:#fff} .stp .actionbar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} @media(max-width:760px){.stp .actionbar{display:grid}.stp .float-book{display:none!important}} /* ---------- Animated counter pop ---------- */ .stp .stat .n{transition:transform .3s var(--spring)} .stp .stat:hover .n{transform:scale(1.08)} /* ============================================================ POLISH LAYER — atmosphere & high-impact detail (additive) ============================================================ */ /* Dark custom scrollbar */ .stp{scrollbar-color:var(--blue-deep) var(--bg-2);scrollbar-width:thin} .stp ::-webkit-scrollbar{width:12px;height:12px} .stp ::-webkit-scrollbar-track{background:var(--bg-2)} .stp ::-webkit-scrollbar-thumb{background:linear-gradient(var(--blue),var(--blue-deep));border-radius:99px;border:3px solid var(--bg-2)} /* Fine film grain over the whole page for depth (very subtle) */ .stp::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* Dot-grid texture on alternate (charcoal) sections */ .stp .sec--alt{background-color:var(--bg-2); background-image:radial-gradient(rgba(0,174,239,.06) 1px,transparent 1px);background-size:22px 22px} /* hairline blue glow at the top edge of alt sections */ .stp .sec--alt{box-shadow:inset 0 1px 0 rgba(0,174,239,.12)} /* Hero aurora — slow drifting glow behind hero content */ .stp .hero::before{animation:aurora 18s ease-in-out infinite alternate} @keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.08)}100%{transform:translate3d(2%,-2%,0) scale(1.04)}} /* Card: top accent bar that ignites on hover + soft inner sheen */ .stp .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:var(--grad-blue);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);opacity:.9} .stp .card:hover::before{transform:scaleX(1)} /* Primary button: light sweep on hover */ .stp .btn-primary{position:relative;overflow:hidden} .stp .btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:none} .stp .btn-primary:hover::after{left:140%;transition:left .7s var(--ease)} /* Eyebrow gets a tiny pulsing status dot (workshop "live" feel) */ .stp .eyebrow::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--blue-3);margin-right:9px;vertical-align:middle;box-shadow:0 0 0 0 rgba(0,174,239,.6);animation:ping 2.4s ease-out infinite} @keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,174,239,.55)}70%{box-shadow:0 0 0 8px rgba(0,174,239,0)}100%{box-shadow:0 0 0 0 rgba(0,174,239,0)}} /* Section heading: short blue underline accent under centered H2s */ .stp .center > h2::after{content:"";display:block;width:60px;height:4px;border-radius:99px;margin:16px auto 0;background:var(--grad-blue)} /* Stat cards: subtle top glow + monospace-y number tracking already set */ .stp .stat{position:relative;overflow:hidden} .stp .stat::after{content:"";position:absolute;inset:-40% 0 auto 0;height:80%; background:radial-gradient(60% 100% at 50% 0,rgba(0,174,239,.16),transparent 70%);pointer-events:none} /* Keep decorative grain above bg but below content */ .stp .nav,.stp section,.stp footer{position:relative;z-index:2} /* ============================================================ FUTURISTIC LAYER — grid, marquee, tilt, HUD ============================================================ */ /* Perspective tech-grid floor in the hero */ .stp .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(0,174,239,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(0,174,239,.10) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(120% 80% at 50% 0,#000 0,transparent 72%); mask-image:radial-gradient(120% 80% at 50% 0,#000 0,transparent 72%);opacity:.5} /* Section heading underline already added; make stats monospace + techy */ .stp .stat .n{font-family:var(--fh)} .stp .stat .l{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem} /* Interactive brand marquee */ .stp .brands{position:relative;overflow:hidden;border-block:1px solid var(--line);padding:26px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .stp .brands-track{display:flex;gap:54px;width:max-content;animation:marquee 28s linear infinite} .stp .brands:hover .brands-track{animation-play-state:paused} .stp .brands-track span{font-family:var(--fh);font-weight:900;font-size:1.7rem;letter-spacing:.04em; color:var(--ink-soft);opacity:.55;transition:opacity .25s,color .25s;white-space:nowrap;cursor:default} .stp .brands-track span:hover{opacity:1;color:var(--blue-2);text-shadow:0 0 22px rgba(0,174,239,.5)} .stp .brands-track span b{color:var(--blue-3)} @keyframes marquee{to{transform:translateX(-50%)}} /* Card tilt (JS adds --rx/--ry); subtle, premium. High specificity to beat :hover */ .stp .card.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,-5px))} .stp .card.tilt{transform-style:preserve-3d;transition:transform .12s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)} .stp .card.tilt.reset{transition:transform .5s var(--spring),box-shadow .3s var(--ease)} /* HUD corner ticks on media frames */ .stp .media{--c:rgba(0,174,239,.55)} .stp .media::before{content:"";position:absolute;top:8px;left:8px;width:18px;height:18px;z-index:3; border-top:2px solid var(--c);border-left:2px solid var(--c);opacity:.8} .stp .hero-photo .tag{border-radius:var(--r);background:rgba(13,13,13,.82)} /* Scanline shimmer on hero photo */ .stp .hero-photo.media::after{background:linear-gradient(180deg,transparent 55%,rgba(13,13,13,.5))} /* ============================================================ OTTO — robot Mercedes tour guide (inline, non-modal) ============================================================ */ .stp-guide{position:fixed;left:16px;bottom:16px;z-index:940;display:flex;align-items:flex-end;gap:10px} .stp-guide .bot{width:46px;height:46px;border-radius:12px;flex:0 0 auto;cursor:pointer;opacity:.82; background:linear-gradient(160deg,#1A1A1A,#0D0D0D);border:1px solid rgba(0,174,239,.45); box-shadow:0 8px 20px rgba(0,0,0,.45),0 0 18px rgba(0,174,239,.22),inset 0 0 14px rgba(0,174,239,.1); display:grid;place-items:center;padding:0;animation:botFloat 4s ease-in-out infinite;transition:transform .25s var(--ease),box-shadow .25s,opacity .25s} .stp-guide .bot:hover,.stp-guide.open .bot{opacity:1;transform:translateY(-3px) scale(1.06);box-shadow:0 12px 28px rgba(0,0,0,.5),0 0 32px rgba(0,174,239,.45)} .stp-guide .bot svg{width:32px;height:32px} @keyframes botFloat{50%{transform:translateY(-7px)}} .stp-guide .bot .ant{animation:botBlink 1.8s ease-in-out infinite} @keyframes botBlink{0%,100%{opacity:1}50%{opacity:.35}} /* attention nudge before Leon auto-introduces */ .stp-guide .bot.leon-attn{opacity:1;animation:leonAttn .5s ease-in-out 3;box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 30px rgba(0,174,239,.6)} @keyframes leonAttn{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-5px) rotate(-7deg)}75%{transform:translateY(-5px) rotate(7deg)}} /* speech bubble — anchored to the bot, NOT a centred modal */ .stp-guide .bubble{max-width:300px;background:linear-gradient(160deg,rgba(26,26,26,.97),rgba(13,13,13,.97)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(0,174,239,.35);border-radius:14px;border-bottom-left-radius:4px; padding:16px 18px;box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 30px rgba(0,174,239,.18); opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom left;pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--spring)} .stp-guide.open .bubble{opacity:1;transform:none;pointer-events:auto} .stp-guide .bubble .who{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-3);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center} .stp-guide .bubble .who .step{opacity:.7} .stp-guide .bubble p{margin:0 0 12px;color:var(--ink);font-size:.95rem;line-height:1.5} .stp-guide .bubble .acts{display:flex;gap:8px;flex-wrap:wrap} .stp-guide .bubble button,.stp-guide .bubble .acts a{font-family:var(--fh);font-weight:800;letter-spacing:.06em;text-transform:uppercase; font-size:.78rem;padding:9px 15px;border-radius:8px;cursor:pointer;border:none;transition:.2s; text-decoration:none;display:inline-flex;align-items:center;gap:.3em} .stp-guide .bubble .go{background:var(--grad-blue);color:#fff;box-shadow:0 0 18px rgba(0,174,239,.4)} .stp-guide .bubble .go:hover{box-shadow:0 0 26px rgba(0,174,239,.6)} .stp-guide .bubble .sec-btn{background:rgba(255,255,255,.06);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line)} .stp-guide .bubble .sec-btn:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--blue-2)} .stp-guide .bubble .x{position:absolute;top:8px;right:10px;background:none;box-shadow:none;color:var(--ink-mute);font-size:1.1rem;padding:2px 6px} /* element being explained — inline glow ring (no overlay, page stays usable) */ .stp .guide-spot{position:relative;z-index:965;outline:2px solid var(--blue-3) !important;outline-offset:4px; border-radius:10px;box-shadow:0 0 0 4px rgba(0,174,239,.18),0 0 32px rgba(0,174,239,.5) !important; animation:spotPulse 1.4s ease-in-out infinite} @keyframes spotPulse{50%{box-shadow:0 0 0 7px rgba(0,174,239,.12),0 0 44px rgba(0,174,239,.65) !important}} @media(max-width:760px){.stp-guide{left:12px;bottom:64px}.stp-guide .bubble{max-width:min(74vw,290px)}} @media(max-width:520px){.stp-guide .bot{width:40px;height:40px;border-radius:11px}.stp-guide .bot svg{width:28px;height:28px}} /* ---------- Service-area chips (internal links, all suburbs) ---------- */ .stp .area-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:0 auto} .stp .area-chip{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft); padding:9px 16px;border-radius:8px;background:rgba(192,192,192,.06);box-shadow:inset 0 0 0 1px var(--line); transition:.2s;white-space:nowrap} .stp .area-chip:hover{color:#fff;background:rgba(0,174,239,.12);box-shadow:inset 0 0 0 1px var(--blue-2),0 0 18px rgba(0,174,239,.25);transform:translateY(-2px)} /* ---------- Declutter: Leon is the only floating helper ---------- Avenue injects its own floating launcher (#embedButton) + quick-action bubbles (#quickActions). Hide them — booking still opens via Leon and the .open-avenue buttons (Avenue's modal is a separate element). */ iframe#embedButton,iframe#quickActions{display:none!important} /* retire our redundant floating Book pill (nav + Leon + action bar cover it) */ .stp .float-book{display:none!important} /* ---------- Accreditations bar (footer, every page) ---------- */ .stp .accred{border-top:1px solid var(--line);margin-top:38px;padding-top:28px;text-align:center} .stp .accred-h{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-3);display:block;margin-bottom:18px} .stp .accred-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .stp .accred-item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line); border-radius:10px;padding:11px 16px;font-family:var(--fh);font-weight:700;font-size:.9rem;color:var(--ink-soft);line-height:1.1} .stp .accred-item img{height:26px;width:auto;flex:0 0 auto;border-radius:4px} .stp .accred-item span{max-width:150px;text-align:left} @media(max-width:520px){.stp .accred-item{width:100%;justify-content:flex-start}.stp .accred-item span{max-width:none}} /* ---------- Accreditation logo badges (HTML text — always renders) ---------- */ .stp .logo-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--fh);font-weight:900; letter-spacing:1.5px;font-size:.8rem;line-height:1;color:#fff;padding:6px 11px;border-radius:6px; border:1px solid rgba(255,255,255,.2);white-space:nowrap;vertical-align:middle;flex:0 0 auto} .stp .racv-badge{background:#0046b8;border-color:#5b9bff} .stp .vacc-badge{background:#11264f;border-color:#5b9bff} .stp .arctick-badge{background:#0c1322;border-color:#3ccf7d;letter-spacing:.5px} .stp .arctick-badge .tick{width:14px;height:14px;stroke:#3ccf7d;flex:0 0 auto} .stp img.logo-badge{padding:0;border:0;height:30px;width:auto} .stp .cred .logo-badge{font-size:.86rem;padding:7px 12px} .stp .accred-item .logo-badge,.stp .eeat-body .logo-badge{font-size:.82rem} /* ---------- Before / After slider ---------- */ .stp .ba{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/10;border-radius:var(--r-lg); overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);--p:50%} .stp .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none} .stp .ba .after{clip-path:inset(0 0 0 var(--p))} .stp .ba .range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize} .stp .ba .handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:var(--blue);box-shadow:0 0 18px var(--blue);pointer-events:none} .stp .ba .handle::after{content:"\\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center; font-size:1rem;box-shadow:0 0 22px rgba(0,174,239,.6)} .stp .ba .lbl{position:absolute;bottom:12px;padding:5px 12px;border-radius:6px;background:rgba(13,13,13,.82); font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-3);pointer-events:none} .stp .ba .lbl.b{left:12px}.stp .ba .lbl.a{right:12px} /* ---------- E-E-A-T author box ---------- */ .stp .eeat{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center; background:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)} .stp .eeat-photo{aspect-ratio:4/3;border-radius:var(--r)} .stp .eeat-body .badges{flex-wrap:wrap;gap:8px} @media(max-width:640px){.stp .eeat{grid-template-columns:1fr}} /* ---------- Visible breadcrumbs ---------- */ .stp .crumbs{background:var(--bg-2);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.76rem;letter-spacing:.03em} .stp .crumbs .wrap{padding-top:11px;padding-bottom:11px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .stp .crumbs a{color:var(--ink-mute);transition:color .2s} .stp .crumbs a:hover{color:var(--blue-2)} .stp .crumbs .sep{color:var(--line)} .stp .crumbs span[aria-current]{color:var(--blue-3)} /* ---------- Footer map ---------- */ .stp .foot-map{border-top:1px solid var(--line);margin-top:34px;padding-top:26px} .stp .foot-map-head{font-family:var(--fh);font-weight:700;font-size:.98rem;color:var(--ink-soft);margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .stp .foot-map-head svg{width:18px;height:18px;stroke:var(--blue-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .stp .foot-map-head b{color:var(--ink)} .stp .foot-map-head a{color:var(--blue-2)} .stp .foot-map-frame{height:300px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)} @media(max-width:640px){.stp .foot-map-frame{height:220px}} /* ---------- Accessibility: respect reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ .stp *,.stp *::before,.stp *::after{animation:none!important;transition:none!important} .stp .r{opacity:1;transform:none} html{scroll-behavior:auto} }