/* ========================================================================== ServiceLine — Global Experience System (interaction foundation) -------------------------------------------------------------------------- Structural/functional styles for the cursor, scroll-progress bar, and page-transition overlay built in Phase 1. These are FOUNDATION styles — colors/timing come from tokens.css, but the actual material/motion language (concrete fracture, dust dissolve, the RAW->FINISHED visual system) is a separate, later phase. Progressive enhancement pattern used throughout this file: an inline script in meta.php adds a `js` class to before first paint. Anything that would break with JavaScript disabled defaults to invisible/inert and only activates under html.js — so a no-JS visitor always gets a plain, fully working page. ========================================================================== */ /* ---- Custom cursor --------------------------------------------------------- Small precision dot by default. Expands + shows a label only for elements marked data-cursor="LABEL" — see animations/interaction/cursor.js. Hidden without JS and on touch. */ .sl-cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); display: none; pointer-events: none; will-change: transform; } .js .sl-cursor { display: block; } @media (pointer: coarse) { .js .sl-cursor { display: none; /* CSS-level failsafe alongside the JS touch check in main.js */ } } .sl-cursor__dot { display: block; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background-color: var(--text-primary); transition: transform var(--duration-micro) var(--ease-precise), background-color var(--duration-micro) var(--ease-precise); } .sl-cursor__label { position: absolute; top: 12px; left: 0; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-obsidian); background-color: var(--accent); padding: var(--space-1) var(--space-2); opacity: 0; transition: opacity var(--duration-micro) var(--ease-precise); } .sl-cursor--active .sl-cursor__dot { transform: scale(3.5); background-color: var(--accent); } .sl-cursor--active .sl-cursor__label { opacity: 1; } /* ---- Scroll progress --------------------------------------------------------- Minimal single-color foundation bar only — NOT the final RAW -> FINISHED visual treatment described in the Visual Foundation. */ .sl-scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: var(--z-overlay); background-color: var(--accent); transform-origin: left center; transform: scaleX(0); pointer-events: none; } /* ---- Preloader — logo cube assembly ----------------------------------------- Above everything (including the transition overlay). Hidden without JS (a no-JS visitor must never sit behind a cover nothing removes); with JS it covers before first paint and preloader.js runs the assembly + lift. */ .sl-preloader { position: fixed; inset: 0; z-index: calc(var(--z-transition) + 20); display: none; align-items: center; justify-content: center; background-color: var(--color-obsidian); will-change: transform; } .js .sl-preloader { display: flex; } /* Act I — raw material ghost + scanning beam */ .sl-preloader__ghost { position: absolute; inset: 0; overflow: hidden; opacity: 0; /* JS breathes it in; stays black without JS timeline */ } .sl-preloader__ghost img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.4) brightness(0.5) blur(3px); transform: scale(1.08); } .sl-preloader__beam { position: absolute; top: 0; bottom: 0; left: 0; width: 22vw; opacity: 0; background: linear-gradient(90deg, transparent, rgba(241, 90, 41, 0.14) 45%, rgba(242, 240, 236, 0.1) 50%, rgba(241, 90, 41, 0.14) 55%, transparent); transform: translateX(-30vw); will-change: transform; } .sl-preloader__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .sl-preloader__tagline { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-body); font-size: 0.71875rem; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); } .sl-preloader__tagline i { width: 14px; height: 1px; background-color: var(--accent); display: inline-block; } .sl-preloader .logo-mark { width: clamp(110px, 16vw, 170px); height: auto; } .sl-preloader__word { font-family: var(--font-display); font-weight: 500; font-size: clamp(0.9375rem, 1.6vw, 1.25rem); letter-spacing: 0.34em; text-indent: 0.34em; /* optically recenter tracked-out caps */ color: var(--text-primary); } .sl-preloader__line { position: relative; width: clamp(120px, 18vw, 200px); height: 1px; background-color: rgba(255, 255, 255, 0.12); overflow: hidden; } .sl-preloader__line-fill { position: absolute; inset: 0; background-color: var(--accent); transform: scaleX(0); transform-origin: left center; } /* ---- Page transition overlay — "slab reveal" ------------------------------ A concrete slab rising to cover the outgoing page, then continuing up and off to reveal the incoming one — the same rising-structure motif as the opening sequence's wall. Real GSAP tweens (see animations/transitions/slab-reveal.js) own the animation; this CSS only sets safe positional defaults. No `transition:` property here on purpose — GSAP sets yPercent directly every frame, and a CSS transition racing a JS tween on the same property is exactly the kind of double-animation jank to avoid. Server-rendered in resources/layouts/main.php (not JS-injected) so it can cover the page before first paint with no flash of content. */ .sl-transition-overlay { position: fixed; inset: 0; z-index: var(--z-transition); pointer-events: none; } .sl-transition-overlay__layer { position: absolute; inset: 0; transform: translateY(101%); /* no-JS fallback: fully offscreen, never blocks anything */ will-change: transform; } .sl-transition-overlay__layer--main { background-color: var(--color-obsidian); } .sl-transition-overlay__layer--trail { background-color: var(--accent-dim); } .js .sl-transition-overlay__layer { transform: translateY(0%); /* JS present: start covering, ready for the entry reveal */ } .js .sl-transition-overlay--hidden .sl-transition-overlay__layer { transform: translateY(-101%); } .sl-transition-overlay__seam { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: var(--accent); box-shadow: 0 0 28px 3px rgba(196, 105, 43, 0.5); } .sl-transition-overlay__brand { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 2rem); letter-spacing: -0.01em; color: var(--text-primary); opacity: 0; }