/* ============================================================ ARAF STUDIO — LIQUID GLASS LAYER Loaded AFTER each page's own stylesheet. Only touches visual properties (background / blur / shadow / radius) so existing layout, spacing and JS behaviour stay untouched. ============================================================ */ :root{ --lg-blur: 20px; --lg-edge: rgba(255,255,255,.4); --lg-edge-dim: rgba(255,255,255,.1); --lg-sheen: rgba(255,255,255,.16); } /* --------------------------------------------------------------- 1. GLASS PANELS — nav bar, drawers, popups, lightbox --------------------------------------------------------------- */ nav{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%), rgba(2,4,15,.5) !important; backdrop-filter: blur(var(--lg-blur)) saturate(180%) !important; -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%) !important; box-shadow: inset 0 1px 0 var(--lg-edge-dim), 0 8px 32px rgba(0,0,0,.3); } .cookie-popup, .ham-drawer, #lightbox, .lightbox-ov{ background: linear-gradient(160deg, rgba(14,18,36,.55), rgba(6,9,20,.7)) !important; backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; box-shadow: inset 0 1px 0 var(--lg-edge-dim), 0 24px 70px rgba(0,0,0,.5); } /* --------------------------------------------------------------- 2. GLASS CARDS — subtle frosted surface, non-destructive --------------------------------------------------------------- */ .sc, .contact-card, .blog-card, .tilt-card{ background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 60%), rgba(8,13,31,.55) !important; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); } /* --------------------------------------------------------------- 3. LIQUID GLASS BUTTONS --------------------------------------------------------------- */ .btn, .btn-g, .btn-p, .btn-o, .btn-prev, .nav-back, .nav-pill, .nav-pill-alt, .sort-btn, .ham-btn, .ham-close, .lb-btn, .lb-close, .f-back-top, .btn-apply, .cookie-accept, .cookie-decline, .lightbox-close, .lightbox-nav, .b-back, .bd-back-btn, .p-lnk{ position: relative; isolation: isolate; overflow: hidden; border-radius: 999px !important; border: 1px solid var(--lg-edge-dim) !important; background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 55%, rgba(255,255,255,.07)) !important; backdrop-filter: blur(16px) saturate(180%) brightness(1.05) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05) !important; box-shadow: inset 0 1px 0 var(--lg-edge), inset 0 -1px 8px rgba(0,0,0,.28), 0 4px 18px rgba(0,0,0,.28); transition: transform .25s cubic-bezier(.22,.9,.3,1.35), box-shadow .3s ease, background .3s ease; } /* moving specular highlight, positioned by JS via --lg-mx/--lg-my */ .btn::after, .btn-g::after, .btn-p::after, .btn-o::after, .btn-prev::after, .nav-back::after, .nav-pill::after, .nav-pill-alt::after, .sort-btn::after, .ham-btn::after, .ham-close::after, .lb-btn::after, .lb-close::after, .f-back-top::after, .btn-apply::after, .cookie-accept::after, .cookie-decline::after, .lightbox-close::after, .lightbox-nav::after, .b-back::after, .bd-back-btn::after, .p-lnk::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(140px 90px at var(--lg-mx,50%) var(--lg-my,0%), var(--lg-sheen), transparent 70%); opacity:0; transition: opacity .35s ease; } .btn:hover::after, .btn-g:hover::after, .btn-p:hover::after, .btn-o:hover::after, .btn-prev:hover::after, .nav-back:hover::after, .nav-pill:hover::after, .nav-pill-alt:hover::after, .sort-btn:hover::after, .ham-btn:hover::after, .ham-close:hover::after, .lb-btn:hover::after, .lb-close:hover::after, .f-back-top:hover::after, .btn-apply:hover::after, .cookie-accept:hover::after, .cookie-decline:hover::after, .lightbox-close:hover::after, .lightbox-nav:hover::after, .b-back:hover::after, .bd-back-btn:hover::after, .p-lnk:hover::after{ opacity:1; } .btn:hover, .btn-g:hover, .btn-p:hover, .btn-o:hover, .btn-prev:hover, .nav-back:hover, .nav-pill:hover, .nav-pill-alt:hover, .sort-btn:hover, .ham-btn:hover, .ham-close:hover, .lb-btn:hover, .lb-close:hover, .f-back-top:hover, .btn-apply:hover, .cookie-accept:hover, .cookie-decline:hover, .lightbox-close:hover, .lightbox-nav:hover, .b-back:hover, .bd-back-btn:hover, .p-lnk:hover{ transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--lg-edge), inset 0 -1px 8px rgba(0,0,0,.22), 0 12px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.07); } .btn:active, .btn-g:active, .btn-p:active, .btn-o:active, .btn-prev:active, .nav-back:active, .nav-pill:active, .nav-pill-alt:active, .sort-btn:active, .ham-btn:active, .ham-close:active, .lb-btn:active, .lb-close:active, .f-back-top:active, .btn-apply:active, .cookie-accept:active, .cookie-decline:active, .lightbox-close:active, .lightbox-nav:active, .b-back:active, .bd-back-btn:active, .p-lnk:active{ transform: translateY(0) scale(.95); transition-duration: .12s; } /* keep each button's original accent color as a tinted glass, layered under the sheen */ .btn-p, .btn-apply, .cookie-accept{ background: linear-gradient(155deg, rgba(255,255,255,.28), rgba(255,255,255,.02) 55%), linear-gradient(135deg, var(--blue,#3b82f6), var(--neon2,#0099ff)) !important; } .sort-btn.active{ background: linear-gradient(155deg, rgba(255,255,255,.28), rgba(255,255,255,.03) 55%), rgba(0,212,255,.18) !important; } /* icon-only circular glass controls (hamburger / lightbox nav / close) get a touch more roundness handled above via 999px already; tighten padding-sensitive ones */ .ham-btn, .ham-close, .lightbox-close, .lightbox-nav{ aspect-ratio: 1 / 1; } @media (prefers-reduced-motion: reduce){ .btn, .btn-g, .btn-p, .btn-o, .btn-prev, .nav-back, .nav-pill, .nav-pill-alt, .sort-btn, .ham-btn, .ham-close, .lb-btn, .lb-close, .f-back-top, .btn-apply, .cookie-accept, .cookie-decline, .lightbox-close, .lightbox-nav, .b-back, .bd-back-btn, .p-lnk{ transition: none; } }