/* * ═══════════════════════════════════════════════════════════════════════ * element_webpage_home_fx.css — Homepage Visual Effects * Daralbeida.com · DAB-VIS-CSS-EL-HP-FX-001 · v1.0 · May 2026 * * Loaded LAST by index.php so it can safely override animation * declarations in element_webpage_home_cards.css: * * * JS partner: js/homepage_fx.js (loaded with defer) * * EFFECTS IN THIS FILE * ──────────────────── * 1. Scroll progress bar — 2px gold line grows across viewport top * 2. Custom cursor — gold circle over hero + header zones * 3. Scroll-aware header — transparent → frosted dark on scroll * 4. Gold shimmer — light-catch sweep on header wordmark * 5. Hero grain overlay — film-grain texture on the hero photo * 6. Scroll-triggered — pillar entrance via IntersectionObserver * pillar entrance (replaces CSS animation in cards CSS) * * TOKENS USED * ─────────── * --gold #B8832A (darx_tokens.css) * --ivory (darx_tokens.css) * * SECTIONS * ──────── * 0. Tuning panel ← edit here for all FX adjustments * 1. Scroll progress bar * 3. Scroll-aware header * 4. Gold shimmer * 5. Hero grain overlay * 6. Scroll-triggered pillar entrance * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ 0. TUNING PANEL ← edit here only ═══════════════════════════════════════════════════════════════════════ */ :root { /* ─── Scroll progress bar ─────────────────────────────────────────── */ --fx-progress-h: 2px; --fx-progress-color: var(--gold); /* ─── Scroll-aware header ─────────────────────────────────────────── */ --fx-header-trigger: 60px; /* scroll distance before transition */ --fx-header-bg: var(--brand-dark); --fx-header-blur: 14px; --fx-header-border: rgba(184, 131, 42, 0.18); /* ─── Gold shimmer ────────────────────────────────────────────────── */ --fx-shimmer-duration: 5s; /* full sweep duration */ --fx-shimmer-delay: 2.5s; /* delay before first sweep */ --fx-shimmer-pause: 8s; /* total cycle (sweep + pause) */ /* ─── Hero grain ──────────────────────────────────────────────────── */ --fx-grain-opacity: 0.025; /* increase for more visible grain */ --fx-grain-size: 90px; /* tile size — smaller = finer grain */ /* ─── Pillar entrance ─────────────────────────────────────────────── */ --fx-pillar-duration: 0.85s; --fx-pillar-distance: 22px; /* translateY start distance */ --fx-pillar-stagger-2: 0.16s; --fx-pillar-stagger-3: 0.32s; } /* ═══════════════════════════════════════════════════════════════════════ 1. SCROLL PROGRESS BAR 2px gold line at the top of the viewport. Width is set by JS (homepage_fx.js §1). Gradient fades at both ends to avoid a hard cutoff. ═══════════════════════════════════════════════════════════════════════ */ .scroll-progress { position: fixed; top: 0; left: 0; height: var(--fx-progress-h); width: 0%; background: linear-gradient( to right, transparent 0%, var(--fx-progress-color) 8%, var(--fx-progress-color) 92%, transparent 100% ); z-index: 9998; pointer-events: none; will-change: width; } /* ═══════════════════════════════════════════════════════════════════════ 3. SCROLL-AWARE HEADER Transparent while at the top of the page. JS adds .scrolled when window.scrollY > --fx-header-trigger. Transition makes the change smooth. ═══════════════════════════════════════════════════════════════════════ */ .site-header { transition: backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease, box-shadow 0.45s ease; /* Note: background intentionally excluded — CSS cannot transition between transparent and linear-gradient(). Background snaps instantly; backdrop-filter and shadow fade in. */ } .site-header.scrolled { background: linear-gradient( to bottom, var(--fx-header-bg) 0%, var(--fx-header-bg) 65%, transparent 100% ); backdrop-filter: blur(var(--fx-header-blur)); -webkit-backdrop-filter: blur(var(--fx-header-blur)); box-shadow: 0 1px 0 var(--fx-header-border); } /* ═══════════════════════════════════════════════════════════════════════ 4. GOLD SHIMMER — header wordmark A light-catch sweep passes across DARALBEIDA™ every few seconds. Uses background-clip: text to paint the gradient onto the letters. Animation is paused between sweeps via animation-duration timing. ═══════════════════════════════════════════════════════════════════════ */ @keyframes gold-shimmer { 0% { background-position: -250% center; } 38% { background-position: 250% center; } 100% { background-position: 250% center; } /* hold at end = pause effect */ } .header-wordmark { background: linear-gradient( 108deg, var(--gold) 30%, rgba(255, 228, 140, 0.9) 46%, rgba(255, 250, 200, 1.0) 50%, rgba(255, 228, 140, 0.9) 54%, var(--gold) 70% ); background-size: 260% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gold-shimmer var(--fx-shimmer-pause) ease-in-out var(--fx-shimmer-delay) infinite; will-change: background-position; /* own layer — carousel repaints no longer stutter the shimmer */ } .header-subbrand, .footer-tagline { background: linear-gradient( 108deg, var(--gold) 30%, rgba(255, 228, 140, 0.9) 46%, rgba(255, 250, 200, 1.0) 50%, rgba(255, 228, 140, 0.9) 54%, var(--gold) 70% ); background-size: 260% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gold-shimmer var(--fx-shimmer-pause) ease-in-out var(--fx-shimmer-delay) infinite; will-change: background-position; /* own layer — carousel repaints no longer stutter the shimmer */ } /* ═══════════════════════════════════════════════════════════════════════ 5. HERO GRAIN OVERLAY A repeating SVG fractalNoise tile creates a fine film-grain texture over the hero photo. Subtle at --fx-grain-opacity: 0.045. The .hero-grain div is injected by element_webpage_home_hero.php. z-index: 2 sits between ::after (z:1) and .overlay (z:3). ═══════════════════════════════════════════════════════════════════════ */ .hero-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--fx-grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: var(--fx-grain-size); } /* ═══════════════════════════════════════════════════════════════════════ 6. SCROLL-TRIGGERED PILLAR ENTRANCE Overrides the CSS @keyframes animations in element_webpage_home_cards.css. Elements start invisible and translate up. JS (homepage_fx.js §6) adds .in-view via IntersectionObserver when they enter the viewport. Stagger is handled by transition-delay on nth-child selectors. NO-JS SAFETY: if JS fails to load, elements remain visible because the JS adds .fx-hidden BEFORE observation — without JS nothing hides. ═══════════════════════════════════════════════════════════════════════ */ /* Cancel the old CSS animations from element_webpage_home_cards.css */ .section-eyebrow, .grid .card { animation: none; } /* Initial hidden state — only applied when JS adds .fx-hidden */ .section-eyebrow.fx-hidden, .grid .card.fx-hidden { opacity: 0; transform: translateY(var(--fx-pillar-distance)); transition: opacity var(--fx-pillar-duration) ease, transform var(--fx-pillar-duration) ease; } /* Revealed state */ .section-eyebrow.in-view, .grid .card.in-view { opacity: 1; transform: translateY(0); } /* Stagger: each pillar enters slightly after the previous */ .grid .card:nth-child(2).fx-hidden { transition-delay: var(--fx-pillar-stagger-2); } .grid .card:nth-child(3).fx-hidden { transition-delay: var(--fx-pillar-stagger-3); } /* card-contact excluded — transform:none !important in cards CSS */ /* Reduced motion: show everything, skip transitions */ @media (prefers-reduced-motion: reduce) { .section-eyebrow.fx-hidden, .grid .card.fx-hidden { opacity: 1; transform: none; transition: none; } } /* Offset the footer tagline's shimmer so it doesn't pulse in lockstep with the header subbrand (they share the keyframe + timer otherwise). */ .footer-tagline { animation-delay: 6s; } /* ═══════════════════════════════════════════════════════════════════════ BIG TOOLTIP ("alt label" shown on hover/focus of any [data-tip] element) A single #bigTip node is created + positioned by JS (homepage_fx.js) at the body level, so it is never clipped by overflow:hidden containers (e.g. the carousel slider). data-tip may contain "\n" for multi-line labels. ═══════════════════════════════════════════════════════════════════════ */ #bigTip { position: fixed; z-index: 99999; max-width: 460px; padding: 16px 22px; background: rgba(12, 8, 4, 0.97); color: var(--ivory, #F6F1E7); border: 1px solid rgba(184, 131, 42, 0.60); border-radius: 0; /* SQUARE corners */ box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55); font-family: var(--f-display, Georgia, serif); font-size: var(--ui-fs-display); /* extra large */ line-height: 1.4; letter-spacing: 0.02em; text-align: center; white-space: pre-line; /* render "\n" in data-tip as line breaks */ pointer-events: none; /* never blocks the cursor */ opacity: 0; visibility: hidden; transition: opacity 0.15s ease; } #bigTip.show { opacity: 1; visibility: visible; } /* ═══════════════════════════════════════════════════════════════════════ SHOW / HIDE KEYCARDS homepage_fx.js toggles body.kc-hidden (wordmark = toggle; click anywhere = show). When hidden, the carousel disappears; the subbrand stays visible at all times now (it no longer swaps in/out with the cards). ═══════════════════════════════════════════════════════════════════════ */ .header-subbrand { display: block; } /* always visible (was hidden until cards toggled off) */ /* Carousel fades in/out SLOWLY when toggled — opacity (not display) so it can transition. The page loads with body.kc-hidden, so the cards start hidden and fade in on the first click. */ .kc-section { transition: opacity 1.5s ease; } body.kc-hidden .kc-section { opacity: 0; pointer-events: none; } /* Welcome message — centred on the hero. Visibility is driven from JS by the .is-visible class (homepage_fx.js): it fades in 2s after load and hides when the mouse stops moving. pointer-events:none so a click passes through and toggles the cards in. */ .welcome-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(94%, 760px); padding: 48px 24px; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; } .welcome-message.is-visible { opacity: 1; } /* Hide the mouse pointer together with the welcome message when the pointer goes idle (homepage_fx.js toggles body.cursor-hidden). !important overrides the per-element cursors (e.g. pointer on cards/links). Moving the mouse removes the class, so the cursor returns instantly. */ body.cursor-hidden, body.cursor-hidden * { cursor: none !important; } /* Soft radial scrim — lifts the text off the busy photo without a hard box */ .welcome-message::before { content: ''; position: absolute; inset: -8% -6%; z-index: -1; background: radial-gradient(ellipse at center, rgba(8, 5, 3, 0.66) 0%, rgba(8, 5, 3, 0.46) 38%, rgba(8, 5, 3, 0) 74%); filter: blur(10px); } /* Entrance — each piece fades + rises, staggered for a refined reveal */ @keyframes welcome-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .welcome-flourish { display: block; font-size: var(--ui-fs-value); letter-spacing: 0.5em; color: rgba(184, 131, 42, 0.95); text-shadow: 0 0 14px rgba(184, 131, 42, 0.55); margin-bottom: 22px; } .welcome-title { display: block; font-family: 'Cinzel Decorative', var(--f-display); font-size: var(--ui-fs-display); font-weight: 900; letter-spacing: 4px; line-height: 1.05; /* Metallic gold with a slow light-catch shimmer (reuses §4 keyframe) */ background: linear-gradient(100deg, #C9971E 26%, #F6E4A8 47%, #FFFDF4 50%, #F6E4A8 53%, #C9971E 74%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #E8C572; /* fallback if background-clip unsupported */ filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 36px rgba(184, 131, 42, 0.35)); } /* Gold divider — hairline with a centre diamond */ .welcome-rule { display: block; position: relative; width: 200px; height: 1px; margin: 30px auto 28px; background: linear-gradient(to right, transparent, rgba(184, 131, 42, 0.85), transparent); } /* Staggered entrance — replays each time the message is revealed (.is-visible) so re-appearing after a mouse-idle hide still gets the refined rise. */ .welcome-message.is-visible .welcome-flourish { animation: welcome-rise 0.9s ease 0.15s both; } .welcome-message.is-visible .welcome-title { animation: welcome-rise 1s ease 0.30s both, gold-shimmer 8s ease-in-out 1.4s infinite; } .welcome-message.is-visible .welcome-rule { animation: welcome-rise 0.9s ease 0.50s both; } .welcome-message.is-visible .welcome-sub { animation: welcome-rise 1s ease 0.65s both; } .welcome-rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--gold); box-shadow: 0 0 10px rgba(184, 131, 42, 0.6); transform: translate(-50%, -50%) rotate(45deg); } .welcome-sub { display: block; font-family: var(--f-display); font-style: italic; font-size: var(--ui-fs-display); font-weight: 400; letter-spacing: 0.05em; line-height: 1.6; color: rgba(246, 241, 231, 0.94); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85); }