/* ========================================================================== GAJU ARTS — Theme: "Neon Fabrication" Derived from client logo: black base, amber LED glow, saffron accent. Loaded ASYNC. Above-the-fold styles are inlined in each HTML . ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root{ --black:#0A0A0B; --ink:#0B0C0D; --surface:#131416; --surface-2:#1A1B1D; --line:#28292C; --line-2:#37393D; --amber:#FFC20E; --amber-dim:#C9950A; --saffron:#FF6A00; --white:#fff; --grey:#A7ABB0; --grey-2:#71767C; --steel:linear-gradient(100deg,#5C6167 0%,#C9CFD6 18%,#8E959C 34%,#EDF1F5 52%,#7E858C 68%,#C4CAD1 84%,#585D63 100%); --glow-sm:0 0 12px rgba(255,194,14,.28); --glow:0 0 30px rgba(255,194,14,.22); --glow-lg:0 0 90px rgba(255,194,14,.18); --font-display:'Chakra Petch','Arial Narrow',sans-serif; --font-body:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --wrap:1240px; --pad:20px; --r:14px; --r-sm:8px; --sect:clamp(56px,8vw,104px); /* Spring-style easing — no linear/ease-in-out on interactive motion */ --ease:cubic-bezier(.32,.72,0,1); --ease-snap:cubic-bezier(.2,.9,.25,1.15); } /* ---------- 2. Reset ----------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%} body{ background:var(--black);color:var(--white); font-family:var(--font-body);font-size:17px;line-height:1.65; overflow-x:hidden; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul{list-style:none} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--amber);color:#000} h1,h2,h3,h4,.display{ font-family:var(--font-display);font-weight:700;line-height:1.3; letter-spacing:-.01em;text-transform:uppercase; } h2{font-size:clamp(28px,4.6vw,50px)} h3{font-size:clamp(19px,2.2vw,25px)} p{color:var(--grey)} /* ---------- 3. Layout helpers -------------------------------------------- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .sect{padding-block:var(--sect);position:relative} .sect--alt{background: radial-gradient(900px 400px at 50% 0%,rgba(255,194,14,.05),transparent 70%), var(--ink); border-block:1px solid var(--line); } .grid{display:grid;gap:22px} .center{text-align:center} .mt-1{margin-top:10px}.mt-2{margin-top:22px}.mt-3{margin-top:38px} /* Section eyebrow label */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-display);font-size:12.5px;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--amber); margin-bottom:14px; } .eyebrow::before{ content:"";width:26px;height:2px;background:var(--amber); box-shadow:var(--glow-sm); } .lead{max-width:62ch;font-size:clamp(15.5px,1.5vw,18px)} .head-block{max-width:760px} .head-block.center{margin-inline:auto} .head-block h2{line-height:1.35} /* ---------- 4. Buttons --------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:50px;padding:0 26px;border:1px solid transparent;border-radius:var(--r-sm); font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.05em; text-transform:uppercase;cursor:pointer;will-change:transform; transform:translate3d(var(--mx,0),var(--my,0),0); transition:transform .5s var(--ease),box-shadow .4s var(--ease),background .25s var(--ease),color .25s var(--ease); } .btn:active{transform:translate3d(var(--mx,0),var(--my,0),0) scale(.97)} .btn--primary{background:var(--amber);color:#000;box-shadow:0 0 0 rgba(255,194,14,0)} .btn--primary:hover{box-shadow:var(--glow);transform:translate3d(var(--mx,0),var(--my,0),0) translateY(-2px)} .btn--ghost{border-color:var(--line-2);color:var(--white);background:rgba(255,255,255,.02)} .btn--ghost:hover{border-color:var(--amber);color:var(--amber);box-shadow:var(--glow-sm)} .btn--wa{background:#1FAF54;color:#fff} .btn--wa:hover{box-shadow:0 0 26px rgba(31,175,84,.35);transform:translate3d(var(--mx,0),var(--my,0),0) translateY(-2px)} .btn--block{width:100%} .btn__ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.12);transition:transform .45s var(--ease)} .btn--ghost .btn__ic,.btn--wa .btn__ic{background:rgba(255,255,255,.12)} .btn:hover .btn__ic{transform:translateX(3px)} /* ---------- 5. Header ---------------------------------------------------- */ .topbar{ background:var(--surface);border-bottom:1px solid var(--line); font-size:13.5px;color:var(--grey); } .topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px} .topbar b{color:var(--amber);font-weight:600} .topbar__right{display:none;gap:20px} @media(min-width:900px){.topbar__right{display:flex}} .hdr{ position:sticky;top:12px;z-index:80; margin-inline:10px; background:rgba(14,15,16,.72);backdrop-filter:blur(18px) saturate(140%); border:1px solid var(--line);border-radius:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:box-shadow .5s var(--ease),background .5s var(--ease),top .4s var(--ease); } @media(min-width:1240px){.hdr{margin-inline:auto;max-width:calc(var(--wrap) + 20px)}} .hdr.is-stuck{box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);background:rgba(10,11,12,.86)} .hdr__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px;padding-inline:22px;padding-block:6px} .hdr .wrap{padding-inline:0;max-width:none} .brand{display:flex;align-items:center;gap:13px} .brand__mark{width:68px;height:68px;flex:none;object-fit:contain;border-radius:50%;transition:transform .5s var(--ease);will-change:transform} .brand:hover .brand__mark{transform:rotate(-8deg) scale(1.05)} .brand__txt{line-height:1} .brand__name{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.04em} .brand__name span{color:var(--amber)} .brand__tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)} .nav{display:none;align-items:center;gap:6px} @media(min-width:1000px){.nav{display:flex}} .nav a{ position:relative;padding:9px 14px;border-radius:6px; font-family:var(--font-display);font-size:14.5px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--grey); transition:color .3s var(--ease); } .nav a:hover,.nav a[aria-current="page"]{color:var(--white)} .nav a::after{ content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px; background:var(--amber);transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease); } .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);box-shadow:var(--glow-sm)} .hdr__cta{display:none} @media(min-width:640px){.hdr__cta{display:inline-flex}} .burger{ display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;flex:none; background:transparent;border:1px solid var(--line-2);border-radius:8px;cursor:pointer; } @media(min-width:1000px){.burger{display:none}} .burger span{display:block;width:20px;height:2px;background:var(--white);transition:.25s} .burger span+span{margin-top:5px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .drawer{ position:fixed;inset:108px 0 0;z-index:79;background:var(--ink); padding:26px var(--pad);transform:translateX(100%);transition:transform .45s var(--ease); overflow-y:auto; } .drawer.is-open{transform:none} .drawer a{ display:block;padding:16px 4px;border-bottom:1px solid var(--line); font-family:var(--font-display);font-size:21px;font-weight:600;text-transform:uppercase; } .drawer a:hover{color:var(--amber)} @media(min-width:1000px){.drawer{display:none}} /* ---------- 6. Hero ------------------------------------------------------ */ .hero{position:relative;overflow:hidden;padding-block:clamp(44px,6vw,78px) clamp(50px,7vw,90px)} .hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none} .hero__glow{ position:absolute;top:-16%;left:50%;translate:-50% 0; width:min(1100px,120vw);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(255,194,14,.16),rgba(255,106,0,.05) 42%,transparent 66%); filter:blur(14px); } .hero__in{position:relative;z-index:1;display:grid;gap:40px;align-items:center} @media(min-width:980px){.hero__in{grid-template-columns:1.02fr .98fr;gap:46px}} .hero h1{font-size:clamp(35px,6.4vw,68px)} .hero h1.hero__title--home{line-height:1.20} @media(min-width:980px){.hero h1.hero__title--home{font-size:clamp(36px,4vw,42px)}} .hero h1 em{font-style:normal;color:var(--amber);text-shadow:0 0 30px rgba(255,194,14,.5)} .hero__sub{margin-top:18px;max-width:52ch;font-size:clamp(16px,1.7vw,19px)} .hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .chip{ padding:7px 13px;border:1px solid var(--line-2);border-radius:999px; font-size:13px;color:var(--grey);background:rgba(255,255,255,.02); } .chip b{color:var(--amber);font-weight:600} .hero__art{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1} .hero__art--tall{aspect-ratio:4/5} .hero__art--tall img{width:100%;height:100%;object-fit:cover} /* ---------- 7. Marquee --------------------------------------------------- */ .marquee{ border-block:1px solid var(--line);background:var(--surface); overflow:hidden;padding-block:14px; } .marquee__track{ display:flex;gap:46px;width:max-content; animation:slide 34s linear infinite; } .marquee:hover .marquee__track{animation-play-state:paused} .marquee__track span{ display:inline-flex;align-items:center;gap:12px;white-space:nowrap; font-family:var(--font-display);font-size:15px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2); } .marquee__track span::before{content:"";width:7px;height:7px;background:var(--saffron);border-radius:50%} @keyframes slide{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marquee__track{animation:none}} /* ---------- 8. Stats ----------------------------------------------------- */ .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)} @media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{background:var(--ink);padding:30px 18px;text-align:center} .stat__n{ font-family:var(--font-display);font-size:clamp(32px,4.6vw,50px);font-weight:700; color:var(--amber);line-height:1;text-shadow:0 0 26px rgba(255,194,14,.32); } .stat__l{margin-top:8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2)} /* ---------- 9. Cards ----------------------------------------------------- */ .cards{grid-template-columns:1fr} @media(min-width:680px){.cards{grid-template-columns:repeat(2,1fr)}} @media(min-width:1040px){.cards{grid-template-columns:repeat(3,1fr)}} .card{ position:relative;display:flex;flex-direction:column;padding:5px; background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:calc(var(--r) + 5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); overflow:hidden;transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease); } .card:hover{border-color:var(--amber-dim);transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.55),var(--glow-sm)} .card__media{position:relative;aspect-ratio:16/10;background:#0B0C0D;overflow:hidden;border-radius:var(--r);box-shadow:inset 0 1px 1px rgba(255,255,255,.07)} .card__media svg,.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .card:hover .card__media img{transform:scale(1.05)} .card__body{background:var(--surface)} .card__no{ position:absolute;top:12px;left:12px;z-index:2; width:32px;height:32px;display:grid;place-items:center;border-radius:6px; background:rgba(0,0,0,.6);border:1px solid var(--line-2); font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--amber); } .card__body{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1} .card__body p{font-size:15px;margin-top:9px} .card__list{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px} .card__list li{ font-size:12px;letter-spacing:.04em;padding:4px 9px;border-radius:5px; background:var(--surface-2);border:1px solid var(--line);color:var(--grey); } .card__link{ margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px; font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.07em; text-transform:uppercase;color:var(--amber); } .card__link svg{transition:transform .4s var(--ease)} .card:hover .card__link svg{transform:translateX(5px)} /* ---------- 10. Spotlight ------------------------------------------------ */ .spot{display:grid;gap:34px;align-items:center} @media(min-width:980px){.spot{grid-template-columns:1fr 1fr;gap:56px}} .spot__art{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0A0B0C;aspect-ratio:1/1} .ticks{margin-top:24px;display:grid;gap:13px} .ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--grey)} .ticks svg{flex:none;margin-top:3px} .ticks b{color:var(--white);font-weight:600} /* ---------- 11. Materials ------------------------------------------------ */ .mats{grid-template-columns:1fr} @media(min-width:560px){.mats{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.mats{grid-template-columns:repeat(4,1fr)}} .mat{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)} .mat__swatch{height:96px;position:relative} .mat__swatch--ss{background:var(--steel)} .mat__swatch--ss316{background:linear-gradient(100deg,#4A4F55,#B9C0C7 22%,#7B8288 46%,#DDE3E9 62%,#6E747A 88%)} .mat__swatch--acp{background:linear-gradient(135deg,#1B1D20,#2E3236 45%,#141618)} .mat__swatch--acr{background:linear-gradient(135deg,rgba(255,194,14,.85),rgba(255,106,0,.55))} .mat__b{padding:16px 18px 20px} .mat__b h3{font-size:17px} .mat__b p{font-size:14px;margin-top:6px} /* ---------- 12. Why / features ------------------------------------------- */ .feats{grid-template-columns:1fr} @media(min-width:620px){.feats{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.feats{grid-template-columns:repeat(3,1fr)}} .feat{ padding:26px 22px;border:1px solid var(--line);border-radius:var(--r); background:linear-gradient(180deg,var(--surface),rgba(17,18,19,.4)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .4s var(--ease); } .feat:hover{border-color:var(--amber-dim);transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.4)} .feat__ico{ width:46px;height:46px;display:grid;place-items:center;border-radius:10px; background:rgba(255,194,14,.08);border:1px solid rgba(255,194,14,.22);margin-bottom:15px; transition:transform .5s var(--ease); } .feat:hover .feat__ico{transform:scale(1.08) rotate(-4deg)} .feat h3{font-size:18px} .feat p{font-size:14.5px;margin-top:8px} /* ---------- 13. Process -------------------------------------------------- */ .steps{counter-reset:s;grid-template-columns:1fr;gap:0} @media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}} .step{position:relative;padding:30px 22px;border:1px solid var(--line);background:var(--surface)} @media(min-width:900px){.step+.step{border-left:0}} @media(max-width:899px){.step+.step{border-top:0}} .step__n{ font-family:var(--font-display);font-size:52px;font-weight:700;line-height:1; color:#FFC20E;-webkit-text-stroke:0; } .step h3{font-size:18px;margin-top:12px} .step p{font-size:14.5px;margin-top:8px} /* ---------- 14. Gallery -------------------------------------------------- */ .gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(min-width:820px){.gal{grid-template-columns:repeat(4,1fr)}} .gal__i{ position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line); background:#0A0B0C;aspect-ratio:1; } .gal__i--wide{grid-column:span 2;aspect-ratio:1} .gal__i svg,.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .gal__i:hover svg,.gal__i:hover img{transform:scale(1.06)} .gal__cap{ position:absolute;left:0;right:0;bottom:0;padding:20px 14px 12px; background:linear-gradient(transparent,rgba(0,0,0,.88)); font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey); } /* ---------- 15. Industries ----------------------------------------------- */ .inds{display:flex;flex-wrap:wrap;gap:12px} .ind{ flex:1 1 210px;display:flex;align-items:center;gap:13px; padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--surface);transition:.25s; } .ind:hover{border-color:var(--amber-dim);background:var(--surface-2)} .ind span{font-family:var(--font-display);font-size:15.5px;font-weight:600;letter-spacing:.04em} /* ---------- 16. Compare table -------------------------------------------- */ .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)} table{width:100%;border-collapse:collapse;min-width:620px;font-size:15px} th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)} thead th{ background:var(--surface-2);font-family:var(--font-display);font-size:14px; letter-spacing:.08em;text-transform:uppercase;color:var(--amber); } tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:rgba(255,194,14,.03)} td:first-child{color:var(--white);font-weight:600} td{color:var(--grey)} /* ---------- 17. Estimator ------------------------------------------------ */ .est{ display:grid;gap:26px;padding:clamp(22px,3.5vw,38px); border:1px solid var(--line);border-radius:var(--r); background:radial-gradient(700px 260px at 12% 0%,rgba(255,194,14,.07),transparent 65%),var(--surface); } @media(min-width:940px){.est{grid-template-columns:1.15fr .85fr;gap:40px}} .field{margin-bottom:16px} .field label{ display:block;margin-bottom:7px;font-size:12.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--grey-2); } .field select,.field input{ width:100%;min-height:48px;padding:0 14px;border-radius:var(--r-sm); background:var(--ink);border:1px solid var(--line-2);color:var(--white); } .field select:focus,.field input:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)} .field--row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .est__out{ display:flex;flex-direction:column;justify-content:center; padding:26px 22px;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--ink); } .est__price{ font-family:var(--font-display);font-size:clamp(30px,4.4vw,44px);font-weight:700; color:var(--amber);line-height:1.1;text-shadow:0 0 24px rgba(255,194,14,.3); } .est__note{font-size:13px;color:var(--grey-2);margin-top:10px} /* ---------- 18. Testimonials --------------------------------------------- */ .quotes{grid-template-columns:1fr} @media(min-width:820px){.quotes{grid-template-columns:repeat(3,1fr)}} .quote{ padding:26px 22px;border:1px solid var(--line);border-radius:var(--r); background:var(--surface);display:flex;flex-direction:column; } .quote__stars{color:var(--amber);letter-spacing:3px;font-size:15px} .quote p{margin-top:14px;color:var(--white);font-size:15.5px;flex:1} .quote__who{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center} .quote__av{ width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--surface-2);border:1px solid var(--line-2); font-family:var(--font-display);font-weight:700;color:var(--amber); } .quote__n{font-weight:600;font-size:15px} .quote__r{font-size:13px;color:var(--grey-2)} /* ---------- 19. Areas ---------------------------------------------------- */ .areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px} .areas li{ padding:8px 15px;border-radius:999px;border:1px solid var(--line-2); background:var(--surface);font-size:14px;color:var(--grey); } .areas li:hover{border-color:var(--amber);color:var(--amber)} /* ---------- 20. FAQ ------------------------------------------------------ */ .faq{max-width:900px;margin-inline:auto} .faq details{ border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface); margin-bottom:10px;overflow:hidden; } .faq details[open]{border-color:var(--amber-dim)} .faq summary{ cursor:pointer;list-style:none;padding:18px 54px 18px 20px;position:relative; font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:.02em; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";position:absolute;right:20px;top:50%;translate:0 -50%; font-size:24px;color:var(--amber);transition:transform .4s var(--ease); } .faq details[open] summary::after{content:"−"} .faq p{padding:0 20px 20px;font-size:15.5px} /* ---------- 21. CTA band ------------------------------------------------- */ .cta{ position:relative;overflow:hidden;border-radius:var(--r); padding:clamp(34px,5vw,58px) clamp(22px,4vw,48px); background:linear-gradient(120deg,#141210,#0A0A0A 55%); border:1px solid rgba(255,194,14,.28); box-shadow:inset 0 0 90px rgba(255,194,14,.06); } .cta::after{ content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle,rgba(255,194,14,.2),transparent 68%);pointer-events:none; } .cta__in{position:relative;z-index:1;display:grid;gap:24px;align-items:center} @media(min-width:900px){.cta__in{grid-template-columns:1.35fr .65fr}} .cta h2{font-size:clamp(26px,3.6vw,42px)} .cta__acts{display:flex;flex-wrap:wrap;gap:12px} /* ---------- 22. Footer --------------------------------------------------- */ .ftr{border-top:1px solid var(--line);background:var(--ink);padding-top:56px} .ftr__grid{display:grid;gap:32px} @media(min-width:760px){.ftr__grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr}} .ftr h4{font-size:15px;letter-spacing:.12em;color:var(--white);margin-bottom:16px} .ftr a:not(.brand){color:var(--grey);font-size:15px;transition:color .2s} .ftr a:not(.brand):hover{color:var(--amber)} .ftr .brand{color:inherit} .ftr li{margin-bottom:10px} .ftr p{font-size:14.5px} .socials{display:flex;gap:10px;margin-top:18px} .socials a{ width:40px;height:40px;display:grid;place-items:center;border-radius:9px; border:1px solid var(--line-2);background:var(--surface); } .socials a:hover{border-color:var(--amber);box-shadow:var(--glow-sm)} .ftr__bar{ margin-top:44px;padding-block:20px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center; font-size:13.5px;color:var(--grey-2); } .ftr__dev{text-align:center} .ftr__dev a{color:var(--amber);font-weight:600;transition:color .2s;text-decoration:none} .ftr__dev a:hover{text-decoration:underline} @media(max-width:768px){ .ftr__bar{flex-direction:column;text-align:center;justify-content:center;gap:8px} } /* ---------- 23. Floating contact icons ---------------------------------- */ @keyframes wa-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.45),0 8px 24px rgba(37,211,102,.25),0 8px 24px rgba(0,0,0,.4)} 60%{box-shadow:0 0 0 10px rgba(37,211,102,0),0 8px 24px rgba(37,211,102,.25),0 8px 24px rgba(0,0,0,.4)} } .callbar__btn--wa, .callbar__btn--call{ position:fixed; bottom:24px; z-index:9999; width:62px;height:62px; display:flex;align-items:center;justify-content:center; border-radius:50%; border:2px solid transparent; pointer-events:auto; text-decoration:none; transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s cubic-bezier(.32,.72,0,1); } .callbar__btn--wa{ left:20px; background:#25D366; color:#fff; border-color:rgba(255,255,255,.25); box-shadow:0 8px 24px rgba(37,211,102,.35),0 8px 24px rgba(0,0,0,.4); animation:wa-pulse 2.4s ease-in-out infinite; } .callbar__btn--call{ right:20px; background:#FFC20E; color:#000; border-color:rgba(255,255,255,.25); box-shadow:0 8px 24px rgba(255,194,14,.3),0 8px 24px rgba(0,0,0,.4); } .callbar__btn--wa svg, .callbar__btn--call svg{ width:28px;height:28px;flex:none; } .callbar__btn--wa:hover{ transform:translateY(-4px) scale(1.08); box-shadow:0 14px 32px rgba(37,211,102,.5),0 8px 24px rgba(0,0,0,.5); animation:none; } .callbar__btn--call:hover{ transform:translateY(-4px) scale(1.08); box-shadow:0 14px 32px rgba(255,194,14,.5),0 8px 24px rgba(0,0,0,.5); } @media(max-width:999px){ body{padding-bottom:80px} .callbar__btn--wa,.callbar__btn--call{bottom:16px;width:56px;height:56px} .callbar__btn--wa svg,.callbar__btn--call svg{width:24px;height:24px} } /* ---------- 24. Scroll reveal -------------------------------------------- */ .rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)} .rv.in{opacity:1;transform:none;filter:blur(0)} .grid > .rv:nth-child(1){transition-delay:0s} .grid > .rv:nth-child(2){transition-delay:.06s} .grid > .rv:nth-child(3){transition-delay:.12s} .grid > .rv:nth-child(4){transition-delay:.18s} .grid > .rv:nth-child(5){transition-delay:.24s} .grid > .rv:nth-child(6){transition-delay:.3s} @media(prefers-reduced-motion:reduce){.rv,.grid>.rv{opacity:1;transform:none;filter:none;transition:none}} /* ---------- 24b. Ambient drifting blobs (GPU-safe transform-only loops) -- */ .blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(50px);opacity:.5;will-change:transform} .blob--a{width:420px;height:420px;background:radial-gradient(circle,rgba(255,194,14,.22),transparent 70%);animation:driftA 22s var(--ease) infinite} .blob--b{width:340px;height:340px;background:radial-gradient(circle,rgba(255,106,0,.16),transparent 70%);animation:driftB 26s var(--ease) infinite} @keyframes driftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(40px,-30px,0) scale(1.12)}} @keyframes driftB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-36px,26px,0) scale(1.08)}} @media(prefers-reduced-motion:reduce){.blob{animation:none}} /* ---------- 24c. Breathing status dot ------------------------------------ */ .status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3DDC7F;margin-right:7px;flex:none;animation:breathe 2.2s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}} @media(prefers-reduced-motion:reduce){.status-dot{animation:none}} /* ---------- 25. A11y ----------------------------------------------------- */ :focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber);color:#000;padding:12px 20px} .skip:focus{left:8px;top:8px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}