/** * ZIO Theme — Shared Styles * Nav, flyover menu, footer, typography variables, base resets * Extracted from self-contained templates for header.php / footer.php */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --red:#C41E2A;--reds:#D4343F; --black:#1A1A1A;--charcoal:#2A2A2A; --white:#FFFFFF;--cream:#FAF9F7;--warm:#F2F0ED; --med:#B8B4AF;--text:#3A3A3A;--textl:#7A7672;--border:#E8E6E3; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Outfit',-apple-system,sans-serif; } /* scroll-behavior MUST be `auto`, never `smooth`. ScrollTrigger sets the scroll position to 0 while it measures during refresh(). With `smooth` the browser ANIMATES that instead of jumping, so ScrollTrigger measures at whatever position the animation happens to be at — producing negative start values and pins whose range sits above the top of the page. Documented by GSAP: https://gsap.com/resources/st-mistakes/ */ html{scroll-behavior:auto;overflow-x:hidden} /* overflow-x MUST be `clip`, never `hidden`. `hidden` makes its own scroll container (overflow-y computes to auto), which breaks GSAP ScrollTrigger pinning and kills position:sticky outright — the pinned element scrolls away and you see the empty wrapper. `clip` clips horizontal overflow identically WITHOUT creating a scroll container. */ body{font-family:var(--sans);background:var(--white);color:var(--text);line-height:1.6;overflow-x:clip} ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--cream)}::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px} /* ── NAV ── */ nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:24px 48px;display:flex;align-items:center;justify-content:space-between;transition:all .5s cubic-bezier(.22,1,.36,1)} nav.scrolled{padding:14px 48px;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.06)} .nav-logo img{height:36px;transition:all .4s}nav.scrolled .nav-logo img{height:28px} .nav-right{display:flex;align-items:center;gap:24px} .nav-cta-inline{padding:10px 28px;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;text-decoration:none;border:1px solid rgba(255,255,255,.4);color:var(--white);transition:all .4s} nav.scrolled .nav-cta-inline{border-color:var(--black);color:var(--black)}nav.scrolled .nav-cta-inline:hover{background:var(--red);border-color:var(--red);color:var(--white)} .nav-cta-inline:hover{background:var(--red);border-color:var(--red);color:var(--white)} /* Hamburger */ .ham{width:32px;height:24px;position:relative;cursor:pointer;z-index:1002} .ham span{display:block;position:absolute;width:100%;height:1.5px;background:var(--white);transition:all .4s cubic-bezier(.22,1,.36,1);left:0} nav.scrolled .ham span{background:var(--black)} .ham span:nth-child(1){top:4px}.ham span:nth-child(2){top:11px}.ham span:nth-child(3){top:18px} .ham.open span{background:var(--white)!important} .ham.open span:nth-child(1){top:11px;transform:rotate(45deg)}.ham.open span:nth-child(2){opacity:0}.ham.open span:nth-child(3){top:11px;transform:rotate(-45deg)} /* Flyover Menu */ .flyover{position:fixed;top:0;right:-100%;width:420px;height:100vh;background:var(--black);z-index:1001;transition:right .6s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;justify-content:center;padding:80px 60px} .flyover.open{right:0} .fly-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .4s;z-index:1000} .fly-ov.open{opacity:1;pointer-events:all} .flyover a{display:block;font-family:var(--serif);font-size:36px;font-weight:300;color:var(--white);text-decoration:none;padding:12px 0;transition:all .3s;border-bottom:1px solid rgba(255,255,255,.06)} .flyover a em{font-style:italic;font-weight:400} .flyover a:hover{color:var(--red);padding-left:12px} .fly-contact{margin-top:48px;font-size:14px;color:rgba(255,255,255,.4);line-height:1.8} .fly-contact a{font-size:14px;font-family:var(--sans);padding:0;border:none;color:rgba(255,255,255,.5)} /* ── SHARED TYPOGRAPHY ── */ .ey{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:16px} .st{font-family:var(--serif);font-size:clamp(36px,4vw,56px);font-weight:300;line-height:1.15;color:var(--black)} .st em{font-style:italic;font-weight:400} /* ── FOOTER ── */ footer{background:var(--black);color:var(--white);padding:72px 60px 32px} .footer-inner{max-width:1400px;margin:0 auto} .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px} .footer-brand img{height:30px;margin-bottom:14px} .footer-brand p{font-size:13px;font-weight:300;color:rgba(255,255,255,.4);line-height:1.7;max-width:240px} .fc h4{font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-bottom:18px;font-weight:500} .fc a{display:block;color:rgba(255,255,255,.4);text-decoration:none;font-size:13px;font-weight:300;margin-bottom:10px;transition:color .3s}.fc a:hover{color:var(--red)} .footer-bottom{padding-top:32px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:300;color:rgba(255,255,255,.25)} .footer-social{display:flex;gap:16px} .footer-social a{color:rgba(255,255,255,.25);text-decoration:none;font-size:10px;letter-spacing:2px;text-transform:uppercase;transition:color .3s}.footer-social a:hover{color:var(--red)} /* ── RESPONSIVE — shared components ── */ @media(max-width:1024px){ .footer-top{grid-template-columns:1fr 1fr} } @media(max-width:768px){ nav{padding:16px 20px}nav.scrolled{padding:12px 20px} .nav-cta-inline{display:none} footer{padding:40px 20px 20px}.footer-top{grid-template-columns:1fr;gap:24px} .footer-bottom{flex-direction:column;gap:10px;text-align:center} }