/* ===================================================== VIDENT SITE, GLOBAL CSS File target: css/global.css (Site Assets Manager plugin) Loads on EVERY page. Only truly sitewide, reusable pieces live here: design tokens, buttons, the reveal-on-scroll utility, the custom cursor, the scroll-progress bar, the skip link and the marquee ticker. Everything specific to one page's layout (hero, sections, cards, grids) belongs in that page's own file under css/pages/. ===================================================== */ /* ---------- Design tokens ---------- Prefixed vd- to avoid colliding with another plugin or theme custom property of the same short name (rule: avoid generic global selectors/names). Matches the naming convention already used on the Dutch homepage build. */ :root { --vd-base:#34495e; --vd-base-2:#425f78; --vd-base-3:#223544; --vd-ink:#1f2f3b; --vd-muted:#6e7f8d; --vd-soft:#f5f7f6; --vd-paper:#ffffff; --vd-mist:#edf3f5; --vd-cream:#f7f3ec; --vd-line:rgba(52,73,94,.12); --vd-line-2:rgba(255,255,255,.28); --vd-gold:#c7a46a; --vd-gold-2:#e5d3ad; --vd-sage:#9fb4aa; --vd-shadow:0 30px 80px rgba(52,73,94,.12); --vd-radius-xl:34px; --vd-radius-lg:26px; --vd-radius-md:18px; --vd-ease:cubic-bezier(.16,1,.3,1); } /* ---------- Native smooth scroll ---------- Replaces the Lenis smooth-scroll library. Handles the "#appointment" / "#rendez-vous" anchor buttons with zero JS and zero extra bytes. Respects reduced-motion. */ html { scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } } /* ---------- Base element resets used by every page ---------- */ img { max-width:100%; display:block; } a, button { font-family:inherit; } ::selection { background:var(--vd-base); color:#fff; } a:focus-visible, button:focus-visible { outline:2px solid var(--vd-gold); outline-offset:3px; } /* ---------- Accessibility: skip link ---------- */ .skip-link{ position:absolute; left:-9999px; top:0; background:var(--vd-base); color:#fff; padding:14px 20px; z-index:10000; border-radius:0 0 12px 0; font-weight:700; font-size:14px; } .skip-link:focus{ left:0; } /* ---------- Scroll progress bar ---------- */ .scroll-progress{ position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--vd-base),var(--vd-gold)); width:0; z-index:9997; pointer-events:none; } /* ---------- Custom cursor ---------- Hidden by default (native cursor always works). JS adds .vd-cursor-on to only after confirming a fine pointer is present and the script has actually run, so a page never loses its cursor if JavaScript fails to load (progressive enhancement, not a JS dependency). */ .cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .2s var(--vd-ease); } body.vd-cursor-on .cursor-dot, body.vd-cursor-on .cursor-ring{ opacity:1; } body.vd-cursor-on, body.vd-cursor-on a, body.vd-cursor-on button{ cursor:none; } .cursor-dot{ width:7px; height:7px; background:var(--vd-gold); } .cursor-ring{ width:42px; height:42px; border:1.5px solid rgba(52,73,94,.45); transition:width .35s var(--vd-ease), height .35s var(--vd-ease), border-color .35s var(--vd-ease), opacity .35s var(--vd-ease); } .cursor-ring.is-hover{ width:64px; height:64px; border-color:rgba(199,164,106,.5); opacity:.65; } @media (max-width:760px){ .cursor-dot, .cursor-ring{ display:none; } } /* ---------- Buttons ---------- */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; border:none; border-radius:999px; padding:18px 30px; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; transition:transform .35s var(--vd-ease), box-shadow .35s var(--vd-ease), background .35s var(--vd-ease), color .35s var(--vd-ease); } .btn-primary{ background:var(--vd-base); color:#fff; box-shadow:0 18px 42px rgba(52,73,94,.2); } .btn-primary:hover{ background:var(--vd-base-3); box-shadow:0 24px 60px rgba(52,73,94,.28); } .btn-soft{ background:#fff; color:var(--vd-base); border:1px solid var(--vd-line); } .btn-gold{ background:var(--vd-gold); color:#fff; box-shadow:0 18px 42px rgba(199,164,106,.22); } .btn svg{ width:16px; height:16px; } /* ---------- Reveal-on-scroll utility ---------- IMPORTANT (fixes a real bug in the original build): the original CSS shipped ".reveal{opacity:0}" as the page's default state, with GSAP as the ONLY thing that ever set it back to opacity:1. If that JS failed to load, the entire page stayed invisible, a hard JavaScript dependency on primary content (violates "content must not depend on JavaScript"). Fix: content is opacity:1 / visible by default. The hidden "about to animate" state only applies once global.js has confirmed IntersectionObserver is supported and added .vd-anim-ready to . No JS = fully visible, fully crawlable page. JS present = the same fade-up reveal as before, now done with a plain CSS transition instead of a 50-90KB animation library. */ .reveal, .image-reveal{ opacity:1; transform:none; clip-path:none; } body.vd-anim-ready .reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--vd-ease), transform .9s var(--vd-ease); will-change:transform,opacity; } body.vd-anim-ready .reveal.is-visible{ opacity:1; transform:none; } body.vd-anim-ready .image-reveal{ clip-path:inset(14% 14% 14% 14% round 34px); transform:scale(1.04); transition:clip-path 1.25s var(--vd-ease), transform 1.25s var(--vd-ease); } body.vd-anim-ready .image-reveal.is-visible{ clip-path:inset(0 0 0 0 round 34px); transform:scale(1); } /* Hero title line-by-line stagger, CSS-only, no JS required */ .text-line{ display:block; overflow:hidden; } .text-line span{ display:inline-block; transform:translateY(0); } body.vd-anim-ready .text-line span{ transform:translateY(110%); animation:vd-line-in 1.15s var(--vd-ease) both; } body.vd-anim-ready .text-line:nth-child(1) span{ animation-delay:.15s; } body.vd-anim-ready .text-line:nth-child(2) span{ animation-delay:.27s; } body.vd-anim-ready .text-line:nth-child(3) span{ animation-delay:.39s; } @keyframes vd-line-in{ to{ transform:translateY(0); } } @media (prefers-reduced-motion:reduce){ body.vd-anim-ready .reveal, body.vd-anim-ready .image-reveal, body.vd-anim-ready .text-line span{ transition:none !important; animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; } } /* ---------- Marquee ticker (reusable component) ---------- */ .marquee{ background:var(--vd-base); color:#fff; overflow:hidden; padding:17px 0; } .marquee-track{ display:flex; width:max-content; animation:vd-marquee 30s linear infinite; } .marquee-item{ display:flex; align-items:center; gap:24px; padding:0 36px; white-space:nowrap; font-size:12px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.86); } .marquee-dot{ width:5px; height:5px; border-radius:50%; background:var(--vd-gold); } @keyframes vd-marquee{ to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .marquee-track{ animation-duration:90s; } } /* ---------- Accessible accordion (used by any .faq-item block) ---------- */ .faq-icon{ transition:transform .35s var(--vd-ease), background .35s var(--vd-ease), color .35s var(--vd-ease); } .faq-item.active .faq-icon{ transform:rotate(45deg); } .faq-a{ overflow:hidden; transition:max-height .45s var(--vd-ease); }