/* ============================================================================ Geobreeze Travel: shared funnel system Brand tokens, reset, page-open + scroll reveal animations, countdown, shared button/focus styles. Linked by every funnel page. ========================================================================== */ :root{ /* Brand palette (from the Paper design system) */ --cream:#EAE0D3; --cream-soft:#F7F2E9; --cream-2:#FBF7F0; --sky:#3C6775; --sky-deep:#2F5360; --gold:#E6D29D; --gold-ink:#B08D3C; --jet:#121111; --jet-foot:#0C0B0B; --oxblood:#B3433E; --body:#3A3733; --ink-2:#2A2723; --muted:#6E6962; --line:#E5E4E4; --card:#F7F5F2; --font:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif; --display:"Jost",system-ui,-apple-system,Segoe UI,sans-serif; --hand:"Caveat",ui-rounded,system-ui,cursive; --maxw:1440px; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:var(--font); color:var(--body); background:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} /* Every full-width section centers its inner column and never overflows */ .geo-band{width:100%;display:flex;flex-direction:column;align-items:center;} /* Shared button affordance: lift + slight brightness on hover, real focus ring */ .geo-cta{transition:transform .16s var(--ease),filter .2s var(--ease),box-shadow .2s var(--ease);} .geo-cta:hover{transform:translateY(-2px);filter:brightness(1.04);} .geo-cta:active{transform:translateY(0);} a:focus-visible,button:focus-visible,.geo-cta:focus-visible{outline:3px solid var(--sky);outline-offset:3px;} /* ---------------------------------------------------------------------------- PAGE-OPEN + SCROLL REVEAL The hidden state ONLY applies when is present. app.js adds it when motion is allowed (prefers-reduced-motion not set, or forced with ?motion=on). So: JS off -> visible; reduced-motion -> visible; everyone else -> elements rise + fade in, cascading per section. data-reveal -> the element that rises/fades in data-reveal-now -> reveals on load (hero), cascaded data-reveal-group -> ALL its [data-reveal] descendants cascade together when the group scrolls into view -------------------------------------------------------------------------- */ html.geo-animate [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; } html.geo-animate [data-reveal].is-in{opacity:1;transform:none;} /* gentle whole-page fade so the first paint feels intentional */ html.geo-animate body{animation:geoPageIn .55s var(--ease) both;} @keyframes geoPageIn{from{opacity:0;}to{opacity:1;}} /* motion-sensitive visitors still get the gentle staggered FADE, no movement */ @media (prefers-reduced-motion: reduce){ html.geo-animate [data-reveal]{transform:none;transition:opacity .55s var(--ease);transition-delay:var(--reveal-delay,0ms);} html.geo-animate body{animation:none;} } /* ---------------------------------------------------------------------------- COUNTDOWN (honest, anchored to a real deadline; never resets on refresh) container: [data-countdown] with either data-deadline="ISO" or data-persist-hours="48" data-persist-key="geo_slo" units: [data-cd="days|hours|minutes|seconds"] (text gets the value) optional: [data-countdown-live] element shown when the deadline passes -------------------------------------------------------------------------- */ [data-countdown][data-expired] [data-cd]{opacity:.55;} .geo-cd-live{display:none;} [data-countdown][data-expired] .geo-cd-live{display:flex;}