/* ═══════════════════════════════════════════════════ APOSSLE — Shared Base Styles Loaded on every page via functions.php ═══════════════════════════════════════════════════ */ /* ─── TOKENS ─── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --ink:#0C0C0C;--white:#FFFFFF;--red:#C8252A; --off:#F5F4F0;--edge:#DEDCD5;--dim:#6A6A6A; --fh:'Space Grotesk',sans-serif; --fi:'Cormorant Garamond',serif; --fb:'Inter',sans-serif; --nav:76px /* 16px top offset + 60px pill height */ } /* ─── RESET ─── */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden} body{font-family:var(--fb);background:var(--white);color:var(--ink);margin:0;padding:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} img{max-width:100%;height:auto;display:block} p{margin:0} ul,ol{list-style:none} h1,h2,h3,h4,h5,h6{font-family:var(--fh);font-weight:700;text-transform:none;color:inherit;margin:0;line-height:1} h1 em,h2 em,h3 em{font-family:var(--fi);font-style:italic;font-weight:700;color:var(--red)} a,a:link,a:visited,a:hover,a:focus{color:inherit;text-decoration:none;outline:0} button{border:none;background:none;font-family:inherit;cursor:pointer;padding:0;touch-action:manipulation} a{touch-action:manipulation} /* ─── KILL ASTRA ─── */ /* NOTE: never put .ast-header-break-point here — Astra adds it to on mobile */ #masthead,#ast-fixed-header,.ast-above-header-wrap, #masthead.ast-header-break-point,header.ast-header-break-point{display:none!important} .entry-content,.ast-container,.site-content,#content,#primary,#secondary,.ast-article-post{ display:block!important;padding:0!important;margin:0!important; max-width:none!important;background:none!important;color:var(--ink)!important; font-family:var(--fb)!important;float:none!important } /* Force page always visible — prevent any Astra loading overlay */ html,body{opacity:1!important;visibility:visible!important} .ap-wrap,.ap-home{display:block!important;visibility:visible!important;opacity:1!important;position:relative;width:100%} /* Kill Astra preloader / overlay elements */ .ast-loader-overlay,.ast-preloader-wrap,.ast-site-loading, #ast-scroll-top,.ast-mobile-popup-wrapper{display:none!important} body.admin-bar .apnav{top:48px} @media(max-width:782px){body.admin-bar .apnav{top:58px}} @media(max-width:782px){body.admin-bar .nm{top:122px}} /* ─── NAV ─── */ .apnav{ position:fixed;top:16px;left:24px;right:24px;z-index:500; height:60px;padding:0 8px 0 20px; display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch; background:#0C0C0C; border-radius:100px; box-shadow:0 8px 48px rgba(0,0,0,.28); transition:box-shadow .3s } .apnav.up{box-shadow:0 12px 64px rgba(0,0,0,.4)} /* Col 1 — logo, vertically centred via flex */ .nl{ font-family:var(--fh);font-size:20px;font-weight:700; color:var(--white)!important;letter-spacing:-.5px; text-decoration:none!important; display:flex;align-items:center;justify-content:flex-start; padding-left:4px } .nl .dot{color:var(--red)!important} .apnav img{height:32px!important;width:auto!important;object-fit:contain;flex-shrink:0;display:block} /* Logo text fallback (shown when image fails) */ .nl-fb{font-family:var(--fh);font-size:19px;font-weight:700;color:var(--white)!important;letter-spacing:-.5px;display:none;align-items:center;line-height:1} .nl-fb .nl-br{color:var(--red)!important} /* Col 2 — centred links */ .nm{display:flex;gap:20px;align-items:center;justify-content:center;list-style:none;padding:0;margin:0} .nm li{display:flex;align-items:center;list-style:none} .nm-mob-cta{display:none!important} .nm a{font-size:14px;font-weight:500;color:rgba(255,255,255,.5)!important;transition:color .2s;text-decoration:none!important;white-space:nowrap;display:flex;align-items:center;height:100%} .nm a:hover{color:var(--white)!important} /* Col 3 — CTA + hamburger, vertically centred via flex */ .nav-r{display:flex;align-items:center;justify-content:flex-end;gap:6px} .nc,.nc:link,.nc:visited,.nc:hover,.nc:focus{ background:var(--white)!important;color:var(--ink)!important; font-family:var(--fh);font-size:13px;font-weight:700; height:38px;padding:0 22px;border-radius:100px;letter-spacing:.2px; text-decoration:none!important;border:none!important; display:inline-flex;align-items:center;justify-content:center; white-space:nowrap;flex-shrink:0;position:relative;overflow:hidden } .nc::before{content:'';position:absolute;inset:0;background:var(--red);border-radius:100px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)} .nc:hover::before{transform:scaleX(1)} .nc span{position:relative;z-index:1;color:var(--ink)!important} .nc:hover span{color:var(--white)!important} .nc::after{display:none!important} .hbg{display:none;flex-direction:column;gap:5px;width:36px;height:36px;background:rgba(255,255,255,.1);border-radius:50%;cursor:pointer;flex-shrink:0;align-items:center;justify-content:center;padding:0} .hbg span{display:block;height:1.5px;width:16px;background:var(--white);transition:all .3s;border-radius:2px} .hbg.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .hbg.on span:nth-child(2){opacity:0} .hbg.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* ─── SHARED BUTTONS ─── */ .btn-r,.btn-r:link,.btn-r:visited{ display:inline-flex;align-items:center;gap:8px; background:var(--red);color:var(--white)!important; font-family:var(--fh);font-size:14px;font-weight:600; padding:13px 28px;border-radius:2px;letter-spacing:.2px; text-decoration:none!important;overflow:hidden;position:relative } .btn-r::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.18);transform:scaleX(0);transform-origin:left;transition:transform .3s} .btn-r:hover::before{transform:scaleX(1)} .btn-r span{position:relative;z-index:1} .btn-o,.btn-o:link,.btn-o:visited{ display:inline-flex;align-items:center;gap:8px; border:1.5px solid var(--edge);color:var(--ink)!important; font-family:var(--fh);font-size:14px;font-weight:600; padding:12px 24px;border-radius:2px;letter-spacing:.2px; text-decoration:none!important;transition:border-color .2s,background .2s } .btn-o:hover{border-color:var(--ink);background:var(--ink);color:var(--white)!important} /* ─── FOOTER ─── */ .ft{background:var(--white);padding:96px 64px 56px;border-top:1px solid var(--edge)} .ft-main{ display:grid;grid-template-columns:1fr 1fr;gap:80px; align-items:end;padding-bottom:64px; border-bottom:1px solid var(--edge);margin-bottom:48px } .ft-pretitle{ font-family:var(--fh);font-size:11px;font-weight:700; color:var(--dim)!important;letter-spacing:3px;text-transform:uppercase; margin-bottom:20px;display:block } .ft-big,.ft-big:link,.ft-big:visited{ font-family:var(--fh);font-size:clamp(52px,8.5vw,108px);font-weight:700; color:var(--ink)!important;letter-spacing:-4px;line-height:.92; text-decoration:none!important;display:inline-block; border-bottom:3px solid var(--ink);padding-bottom:4px; transition:color .3s,border-color .3s,letter-spacing .4s } .ft-big:hover{color:var(--red)!important;border-color:var(--red);letter-spacing:-2px} .ft-info{display:flex;flex-direction:column;gap:28px;padding-bottom:8px} .ft-info-block{} .ft-info-label{ font-size:11px;font-weight:700;color:var(--dim)!important; letter-spacing:2.5px;text-transform:uppercase;display:block;margin-bottom:6px } .ft-info-val{font-size:16px;color:var(--ink)!important;display:block;line-height:1.6} .ft-info-val a,.ft-info-val a:link,.ft-info-val a:visited{ color:var(--ink)!important; border-bottom:1px solid var(--edge); transition:border-color .2s; text-decoration:none!important } .ft-info-val a:hover{border-color:var(--ink)} .ft-bot{ display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:16px } .ft-copy{font-size:13px;color:var(--dim)!important} .ft-pills{display:flex;gap:8px;flex-wrap:wrap} .ft-pill,.ft-pill:link,.ft-pill:visited{ display:inline-flex;align-items:center; border:1.5px solid var(--edge);color:var(--ink)!important; font-family:var(--fh);font-size:11px;font-weight:700; letter-spacing:1px;text-transform:uppercase; padding:8px 16px;border-radius:100px; transition:background .2s,border-color .2s,color .2s; text-decoration:none!important } .ft-pill:hover{background:var(--ink);border-color:var(--ink);color:var(--white)!important} /* ─── CURSOR (DESKTOP ONLY) ─── */ body.ap-c{cursor:none} #cdt{ width:8px;height:8px;background:var(--red);border-radius:50%; position:fixed;top:-4px;left:-4px; pointer-events:none;z-index:9999;will-change:transform } #crg{ width:34px;height:34px;border:1px solid rgba(200,37,42,.3);border-radius:50%; position:fixed;top:-17px;left:-17px; pointer-events:none;z-index:9998;will-change:transform } /* ─── SHARED LABEL STYLE ─── */ .ap-label{ display:inline-flex;align-items:center;gap:10px; font-family:var(--fh);font-size:11px;font-weight:700; color:var(--dim)!important;letter-spacing:3px;text-transform:uppercase; margin-bottom:40px } .ap-label::before{content:'';display:block;width:28px;height:1.5px;background:var(--red)} /* ─── SCROLL REVEAL (Phase 2 — ready) ─── */ .reveal{ opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1) } .reveal.visible{ opacity:1; transform:translateY(0) } /* Stagger children inside a container */ .reveal-stagger>.reveal:nth-child(2){transition-delay:.08s} .reveal-stagger>.reveal:nth-child(3){transition-delay:.16s} .reveal-stagger>.reveal:nth-child(4){transition-delay:.24s} .reveal-stagger>.reveal:nth-child(5){transition-delay:.32s} .reveal-stagger>.reveal:nth-child(6){transition-delay:.40s} /* Respect prefers-reduced-motion */ @media(prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;transition:none!important} } /* ═══════════════════════════════════════════════════ RESPONSIVE — 1200px ═══════════════════════════════════════════════════ */ @media(max-width:1200px){ .apnav{left:16px;right:16px} .ft{padding-left:40px;padding-right:40px} .ft-main{gap:48px} } /* ═══════════════════════════════════════════════════ RESPONSIVE — 900px ═══════════════════════════════════════════════════ */ @media(max-width:900px){ .ft-main{grid-template-columns:1fr;gap:48px;align-items:start} .ft-big{font-size:clamp(52px,10vw,80px)} } /* ═══════════════════════════════════════════════════ RESPONSIVE — 768px (MOBILE) ═══════════════════════════════════════════════════ */ @media(max-width:768px){ :root{--nav:74px} /* ── Floating pill nav on mobile ── */ .apnav{ top:12px;left:12px;right:12px;height:52px; padding:0 8px 0 20px;border-radius:100px; box-shadow:0 4px 24px rgba(0,0,0,.3) } .hbg{display:flex!important} /* Hide desktop CTA on mobile, show hamburger */ .nav-r .nc{display:none!important} /* Show mobile-only CTA inside dropdown */ .nm-mob-cta{display:flex!important} /* dropdown menu panel below pill */ .nm{ position:fixed; top:76px; /* 12px offset + 52px height + 12px gap */ left:12px;right:12px;bottom:auto; display:flex!important;flex-direction:column; background:#111; border-radius:20px; padding:8px; gap:0; transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .25s; z-index:490; overflow:hidden; width:auto } .nm.mo{transform:translateY(0)!important;opacity:1!important;pointer-events:all} .nm a{ display:block;padding:14px 16px;font-size:16px!important; color:rgba(255,255,255,.65)!important; border-bottom:1px solid rgba(255,255,255,.07); width:100%;border-radius:12px } .nm a:last-child{border:none} .nm a:hover{background:rgba(255,255,255,.06);color:var(--white)!important} /* CTA pill button inside mobile menu */ .nm-mob-cta .nc,.nm-mob-cta .nc:link,.nm-mob-cta .nc:visited{ margin:8px!important;width:calc(100% - 16px)!important; justify-content:center;padding:13px 20px!important; border-radius:12px!important;font-size:15px!important; background:var(--white)!important;display:inline-flex!important } .nm-mob-cta .nc span{color:var(--ink)!important} .nm-mob-cta .nc:hover span{color:var(--white)!important} /* ── Footer ── */ .ft{padding:64px 20px 48px} .ft-main{grid-template-columns:1fr;gap:40px;align-items:start} .ft-big{font-size:clamp(44px,13vw,72px);letter-spacing:-2px} .ft-bot{flex-direction:column;align-items:flex-start;gap:20px} .ft-pills{gap:8px} /* ── Cursor off ── */ body.ap-c{cursor:auto} #cdt,#crg{display:none!important} }