/* ════════════════════════════════════════════════════════ ZARELVA MOTION SYSTEM v1.0 Premium motion for zarelva.com — static, dependency-free Companion: zarelva-motion.js ════════════════════════════════════════════════════════ */ :root { --z-ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out — primary */ --z-ease-med: cubic-bezier(0.25, 1, 0.5, 1); /* quart-out — cards */ --z-dur: 0.80s; } /* ─────────────────────────────────────────────────────── SCROLL REVEAL — initial hidden states Guard: only active when JS has added z-motion-ready to . Without JS, elements are always visible. ─────────────────────────────────────────────────────── */ html.z-motion-ready .reveal { opacity: 0; transform: translateY(24px); will-change: opacity, transform; } html.z-motion-ready .reveal-left { opacity: 0; transform: translateX(-26px); will-change: opacity, transform; } html.z-motion-ready .reveal-right { opacity: 0; transform: translateX(26px); will-change: opacity, transform; } html.z-motion-ready .reveal-scale { opacity: 0; transform: scale(0.93); will-change: opacity, transform; } html.z-motion-ready .z-line { transform: scaleX(0); transform-origin: left center; } html.z-motion-ready .reveal.in-view { animation: zFadeUp var(--z-dur) var(--z-ease) forwards; } html.z-motion-ready .reveal-left.in-view { animation: zFadeLeft var(--z-dur) var(--z-ease) forwards; } html.z-motion-ready .reveal-right.in-view { animation: zFadeRight var(--z-dur) var(--z-ease) forwards; } html.z-motion-ready .reveal-scale.in-view { animation: zScaleIn var(--z-dur) var(--z-ease) forwards; } html.z-motion-ready .z-line.in-view { animation: zLineGrow 0.75s var(--z-ease) 0.15s forwards; } /* ─────────────────────────────────────────────────────── HERO ENTRANCE — plays immediately on page load Pure CSS, no IntersectionObserver needed ─────────────────────────────────────────────────────── */ .hero-enter { opacity: 0; animation: zHeroIn 0.88s var(--z-ease) both; } .z-d1 { animation-delay: 0.04s; } .z-d2 { animation-delay: 0.16s; } .z-d3 { animation-delay: 0.28s; } .z-d4 { animation-delay: 0.40s; } .z-d5 { animation-delay: 0.53s; } .z-d6 { animation-delay: 0.66s; } .z-d7 { animation-delay: 0.79s; } /* ─────────────────────────────────────────────────────── KEYFRAMES ─────────────────────────────────────────────────────── */ @keyframes zFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes zFadeLeft { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } } @keyframes zFadeRight { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } } @keyframes zScaleIn { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } } @keyframes zHeroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes zLineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ─────────────────────────────────────────────────────── NAV — scroll state + smooth transition ─────────────────────────────────────────────────────── */ nav { transition: background 0.32s ease, box-shadow 0.32s ease !important; } nav.z-scrolled { background: rgba(5, 6, 8, 0.98) !important; box-shadow: 0 1px 0 rgba(200, 169, 110, 0.12), 0 8px 36px rgba(0, 0, 0, 0.55) !important; } /* Mobile nav — smooth slide */ .nav-links, #nav-links { transition: opacity 0.26s var(--z-ease-med), transform 0.30s var(--z-ease) !important; } /* ── Nav link hover underline ── */ .nav-links a, #nav-links a { position: relative; } .nav-links a::after, #nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--accent, #c8a96e); transition: width 0.22s ease; } .nav-links a:hover::after, #nav-links a:hover::after { width: 100%; } /* ─────────────────────────────────────────────────────── DROPDOWN NAV — grouped menu (Product / Services / Use Cases / Resources) + Ask Zara action. Works with the canonical
  • markup. Desktop (≥769px): popover panel. Mobile (≤768px): accordion. 768px matches the existing per-page mobile breakpoint used for hiding .nav-links. ─────────────────────────────────────────────────────── */ .nav-group { position: relative; } .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: none; font: inherit; color: var(--muted, #7a8090); font-size: 0.875rem; font-weight: 500; cursor: pointer; padding: 0; } .nav-dropdown-toggle:hover, .nav-group.open .nav-dropdown-toggle { color: var(--text, #e8e8e8); } .nav-caret { font-size: 0.6rem; display: inline-block; transition: transform 0.22s ease; } .nav-group.open .nav-caret { transform: rotate(180deg); } .nav-dropdown-panel { display: flex; flex-direction: column; gap: 0.3rem; } @media (min-width: 769px) { .nav-dropdown-panel { position: absolute; top: calc(100% + 18px); left: 50%; min-width: 290px; background: var(--card, #16191f); border: 1px solid var(--border, #1e2229); border-radius: 10px; padding: 0.7rem; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -8px); transition: opacity 0.18s ease, transform 0.18s var(--z-ease-med, ease), visibility 0.18s; z-index: 200; } .nav-group.open .nav-dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } /* !important: several pages style .nav-links a with uppercase/letter-spacing for the top-level bar — that reads poorly on multi-word dropdown items, so the panel always renders in normal case regardless of page styling. */ .nav-dropdown-panel a { display: block !important; padding: 0.55rem 0.75rem !important; border-radius: 6px; font-size: 0.85rem !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--muted, #7a8090) !important; white-space: normal; } .nav-item-desc { display: block; font-size: 0.7rem !important; font-weight: 400 !important; color: #5b6072 !important; margin-top: 0.15rem; line-height: 1.3; white-space: normal; } .nav-dropdown-panel a:hover { background: rgba(255, 255, 255, 0.045); color: var(--text, #e8e8e8) !important; } .nav-dropdown-panel a:hover .nav-item-desc { color: #7a8090 !important; } .nav-dropdown-panel a::after { display: none; } .nav-dropdown-feature { margin-top: 0.35rem; padding-top: 0.7rem !important; border-top: 1px solid var(--border, #1e2229); color: var(--accent, #c8a96e) !important; font-weight: 600; } } @media (max-width: 768px) { .nav-group { width: 100%; } .nav-dropdown-toggle { width: 100%; justify-content: space-between; font-size: 0.95rem; padding: 0.3rem 0; } .nav-dropdown-panel { max-height: 0; overflow: hidden; margin-left: 0.15rem; padding-left: 0.9rem; border-left: 1px solid var(--border, #1e2229); transition: max-height 0.28s var(--z-ease-med, ease); } .nav-group.open .nav-dropdown-panel { max-height: 560px; padding-top: 0.5rem; padding-bottom: 0.35rem; } .nav-dropdown-panel a { display: block !important; padding: 0.45rem 0 !important; font-size: 0.86rem !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--muted, #7a8090) !important; } .nav-item-desc { display: block; font-size: 0.72rem !important; font-weight: 400 !important; color: #5b6072 !important; margin-top: 0.1rem; line-height: 1.3; } .nav-dropdown-feature { color: var(--accent, #c8a96e) !important; font-weight: 600; } } /* ── Nav actions — Ask Zara + Book a Call, kept apart with real gap ── */ .nav-actions { display: flex; align-items: center; gap: 0.85rem; } .nav-ask-zara { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--border, #1e2229); color: var(--muted, #7a8090); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.5rem 0.95rem; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .nav-ask-zara:hover { border-color: var(--accent, #c8a96e); color: var(--accent, #c8a96e); transform: translateY(-1px); } @media (max-width: 768px) { .nav-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 0.6rem; margin-top: 0.4rem; } .nav-ask-zara { justify-content: center; } } /* ─────────────────────────────────────────────────────── BUTTON MICRO-INTERACTIONS ─────────────────────────────────────────────────────── */ .btn-primary, .nav-cta, .sticky-btn, .pricing-cta.gold, .btn-red, .btn-gold { transition: opacity 0.22s ease, box-shadow 0.24s ease, transform 0.20s var(--z-ease-med) !important; } .btn-primary:hover, .nav-cta:hover, .sticky-btn:hover, .pricing-cta.gold:hover, .btn-red:hover, .btn-gold:hover { transform: translateY(-2px) !important; } .btn-primary:active, .nav-cta:active, .sticky-btn:active { transform: translateY(0) scale(0.97) !important; transition-duration: 0.08s !important; } .btn-outline, .btn-ghost, .btn-secondary, .pricing-cta.outline, .btn-outline-gold { transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease, box-shadow 0.24s ease, transform 0.20s var(--z-ease-med) !important; } .btn-outline:hover, .btn-ghost:hover, .btn-secondary:hover, .pricing-cta.outline:hover { transform: translateY(-2px) !important; } .btn-outline:active, .btn-ghost:active { transform: translateY(0) scale(0.97) !important; transition-duration: 0.08s !important; } /* ─────────────────────────────────────────────────────── CARD HOVER — consistent smooth transitions ─────────────────────────────────────────────────────── */ .why-card, .service-card, .framework-card, .insight-card, .article-card, .step, .signal-card, .compliance-item, .pricing-card, .who-card, .case-card, .deliverable-box, .who-card { transition: border-color 0.24s ease, transform 0.28s var(--z-ease-med), box-shadow 0.28s ease, background 0.24s ease !important; } /* ─────────────────────────────────────────────────────── STICKY CTA — smooth slide in/out ─────────────────────────────────────────────────────── */ #sticky-cta { transition: transform 0.38s var(--z-ease) !important; } /* ─────────────────────────────────────────────────────── HERO AMBIENT ELEMENTS — refined continuous drift ─────────────────────────────────────────────────────── */ .hero-bg, .hero-bg-layer.hero-orbs { animation: zOrbDrift 26s ease-in-out infinite alternate !important; } @keyframes zOrbDrift { 0% { transform: translate(0px, 0px) scale(1); } 40% { transform: translate(14px, -18px) scale(1.025); } 100% { transform: translate(-10px, 12px) scale(0.985); } } /* ─────────────────────────────────────────────────────── UTILITY — accent line divider ─────────────────────────────────────────────────────── */ .z-line { display: block; height: 1px; width: 40px; background: var(--accent, #c8a96e); margin-bottom: 0.75rem; transform-origin: left center; } /* ─────────────────────────────────────────────────────── PREFERS REDUCED MOTION — full accessibility override ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html.z-motion-ready .reveal, html.z-motion-ready .reveal-left, html.z-motion-ready .reveal-right, html.z-motion-ready .reveal-scale, html.z-motion-ready .z-line { opacity: 1 !important; transform: none !important; animation: none !important; } .hero-enter { opacity: 1 !important; animation: none !important; } nav, .nav-links, #nav-links, #sticky-cta, .btn-primary, .btn-outline, .btn-ghost, .btn-secondary, .nav-cta, .nav-dropdown-panel, .nav-caret, .nav-ask-zara, .why-card, .service-card, .framework-card, .insight-card, .article-card, .step, .pricing-card, .who-card, .case-card { transition: none !important; animation: none !important; } .hero-bg, .hero-bg-layer.hero-orbs { animation: none !important; } } /* ════════════════════════════════════════════════════════ ZARELVA MOTION SYSTEM v2.0 — ADDITIONS Reveal variants · Nav intelligence · Spotlight cards · CTA sheen · Scroll progress · Counters · Scan lines All auto-wired by zarelva-motion.js v2.0 — no HTML edits. ════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────── 2.1 REVEAL VARIANTS — clip wipe + blur-up Assigned automatically by JS for section variety. ─────────────────────────────────────────────────────── */ /* Base hidden state uses opacity only — a full clip-path here would zero out the IntersectionObserver ratio and the reveal would never fire. The clip wipe lives inside the keyframe instead. */ html.z-motion-ready .reveal-clip { opacity: 0; transform: translateY(10px); will-change: opacity, clip-path, transform; } html.z-motion-ready .reveal-clip.in-view { animation: zClipUp 0.9s var(--z-ease) forwards; } @keyframes zClipUp { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(10px); } to { opacity: 1; clip-path: inset(0 0 -8% 0); transform: translateY(0); } } html.z-motion-ready .reveal-blur { opacity: 0; transform: translateY(18px); filter: blur(7px); will-change: opacity, transform, filter; } html.z-motion-ready .reveal-blur.in-view { animation: zBlurUp 0.85s var(--z-ease) forwards; } @keyframes zBlurUp { from { opacity: 0; transform: translateY(18px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* ─────────────────────────────────────────────────────── 2.2 SECTION-TAG SCAN LINE Thin gold rule draws itself under every section tag once the tag enters the viewport. Suggests a scanner pass — quiet, on-brand. ─────────────────────────────────────────────────────── */ .section-tag { position: relative; } .section-tag::after { content: ''; display: block; height: 1px; width: 34px; margin-top: 0.55rem; background: linear-gradient(90deg, var(--accent, #c8a96e), rgba(200,169,110,0)); transform: scaleX(0); transform-origin: left center; } html.z-motion-ready .section-tag.z-scan::after { transition: transform 0.7s var(--z-ease) 0.25s; } html.z-motion-ready .section-tag.z-scan.in-view::after { transform: scaleX(1); } /* Centered headers keep the rule centered */ .section-header[style*="text-align:center"] .section-tag::after, .section-header[style*="text-align: center"] .section-tag::after { margin-left: auto; margin-right: auto; transform-origin: center; } /* ─────────────────────────────────────────────────────── 2.3 NAV INTELLIGENCE — blur depth + active section ─────────────────────────────────────────────────────── */ nav.z-scrolled { backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } /* Active section link — persistent thin underline + gold text */ .nav-links a.z-active, #nav-links a.z-active { color: var(--accent, #c8a96e) !important; } .nav-links a.z-active::after, #nav-links a.z-active::after { width: 100%; } /* ─────────────────────────────────────────────────────── 2.4 SCROLL PROGRESS SIGNAL 2px gold line across the viewport top. Injected by JS. ─────────────────────────────────────────────────────── */ #z-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, #c8a96e, #e0c088); transform-origin: left center; transform: scaleX(0); z-index: 9999; pointer-events: none; opacity: 0.85; } /* ─────────────────────────────────────────────────────── 2.5 CTA SHEEN — one restrained light sweep on hover ─────────────────────────────────────────────────────── */ .btn-primary, .nav-cta, .btn-gold, .pricing-cta.gold { position: relative; overflow: hidden; } .btn-primary::before, .nav-cta::before, .btn-gold::before, .pricing-cta.gold::before { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); transition: none; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .btn-primary:hover::before, .nav-cta:hover::before, .btn-gold:hover::before, .pricing-cta.gold:hover::before { animation: zSheen 0.75s var(--z-ease-med) 1; } } @keyframes zSheen { from { left: -70%; } to { left: 130%; } } /* ─────────────────────────────────────────────────────── 2.6 CARD SPOTLIGHT — pointer-tracked radial highlight The "detection" metaphor: a faint gold sensor glow that follows the cursor across a card. Desktop only. JS sets --zmx / --zmy and adds .z-spot to eligible cards. ─────────────────────────────────────────────────────── */ @media (hover: hover) and (pointer: fine) { .z-spot { position: relative; } .z-spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 340px circle at var(--zmx, 50%) var(--zmy, 50%), rgba(200, 169, 110, 0.10), rgba(200, 169, 110, 0.035) 40%, transparent 65% ); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .z-spot:hover::after { opacity: 1; } } /* ─────────────────────────────────────────────────────── 2.7 STAT COUNT-UP — settle tick After a counter finishes, the number gives one soft accent pulse. Class added by JS. ─────────────────────────────────────────────────────── */ .stat-num.z-counted { animation: zStatSettle 0.5s var(--z-ease-med) 1; } @keyframes zStatSettle { 0% { text-shadow: 0 0 0 rgba(200,169,110,0); } 45% { text-shadow: 0 0 18px rgba(200,169,110,0.45); } 100% { text-shadow: 0 0 0 rgba(200,169,110,0); } } /* ─────────────────────────────────────────────────────── 2.8 HERO PARALLAX LAYERS — GPU hint Transforms are driven by JS (scroll-linked). ─────────────────────────────────────────────────────── */ .hero-float, .hero-pattern { will-change: transform; } /* ─────────────────────────────────────────────────────── 2.9 FOCUS-VISIBLE — keyboard users get the same polish ─────────────────────────────────────────────────────── */ .btn-primary:focus-visible, .btn-outline:focus-visible, .nav-cta:focus-visible, .nav-links a:focus-visible, #nav-links a:focus-visible, .nav-dropdown-toggle:focus-visible, .nav-ask-zara:focus-visible { outline: 2px solid var(--accent, #c8a96e); outline-offset: 3px; border-radius: 4px; } /* ─────────────────────────────────────────────────────── 2.10 REDUCED MOTION — v2 overrides ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html.z-motion-ready .reveal-clip, html.z-motion-ready .reveal-blur { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; animation: none !important; } .section-tag::after { transform: scaleX(1) !important; transition: none !important; } #z-progress { display: none !important; } .btn-primary::before, .nav-cta::before, .btn-gold::before, .pricing-cta.gold::before { display: none !important; } .z-spot::after { display: none !important; } .stat-num.z-counted { animation: none !important; } .hero-float, .hero-pattern { will-change: auto; transform: none !important; } } /* ════════════════════════════════════════════════════════ ZARELVA MOTION SYSTEM v3.0 — HOMEPAGE CHOREOGRAPHY Nav entrance · Process activation · Stage tracing · Bullet stagger · Engine metrics · Dossier hover · Cascade ════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────── 3.1 NAV ENTRANCE — one confident settle on load ─────────────────────────────────────────────────────── */ html.z-motion-ready nav { animation: zNavIn 0.6s var(--z-ease) both; } html.z-motion-ready .nav-links li { opacity: 0; animation: zNavLink 0.5s var(--z-ease) forwards; } html.z-motion-ready .nav-links li:nth-child(1) { animation-delay: 0.16s; } html.z-motion-ready .nav-links li:nth-child(2) { animation-delay: 0.20s; } html.z-motion-ready .nav-links li:nth-child(3) { animation-delay: 0.24s; } html.z-motion-ready .nav-links li:nth-child(4) { animation-delay: 0.28s; } html.z-motion-ready .nav-links li:nth-child(5) { animation-delay: 0.32s; } html.z-motion-ready .nav-links li:nth-child(6) { animation-delay: 0.36s; } html.z-motion-ready .nav-links li:nth-child(7) { animation-delay: 0.40s; } html.z-motion-ready .nav-links li:nth-child(8) { animation-delay: 0.44s; } html.z-motion-ready .nav-links li:nth-child(9) { animation-delay: 0.48s; } html.z-motion-ready .nav-links li:nth-child(10) { animation-delay: 0.52s; } html.z-motion-ready .nav-cta { opacity: 0; animation: zNavLink 0.5s var(--z-ease) 0.55s forwards; } @keyframes zNavIn { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes zNavLink { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Mobile: nav list is a toggled panel — skip per-link entrance so opening the menu is never fighting a load animation */ @media (max-width: 768px) { html.z-motion-ready .nav-links li { opacity: 1; animation: none; } } /* ─────────────────────────────────────────────────────── 3.2 PROCESS ACTIVATION — How We Work Connector draws left→right, then each step comes online in sequence: badge activates, content rises. ─────────────────────────────────────────────────────── */ html.z-motion-ready .z-connector { transform: scaleX(0); transform-origin: left center; } html.z-motion-ready .z-steps.in-view .z-connector { transition: transform 1.15s var(--z-ease) 0.1s; transform: scaleX(1); } html.z-motion-ready .z-step { opacity: 0; transform: translateY(14px); } html.z-motion-ready .z-steps.in-view .z-step { animation: zFadeUp 0.6s var(--z-ease) forwards; } html.z-motion-ready .z-steps.in-view .z-step:nth-child(2) { animation-delay: 0.20s; } html.z-motion-ready .z-steps.in-view .z-step:nth-child(3) { animation-delay: 0.60s; } html.z-motion-ready .z-steps.in-view .z-step:nth-child(4) { animation-delay: 1.00s; } /* Badges start dormant, then switch on with a small settle */ html.z-motion-ready .z-step-badge { filter: grayscale(1) brightness(0.75); } html.z-motion-ready .z-steps.in-view .z-step-badge { animation: zBadgeOn 0.55s var(--z-ease-med) forwards; } html.z-motion-ready .z-steps.in-view .z-step:nth-child(2) .z-step-badge { animation-delay: 0.45s; } html.z-motion-ready .z-steps.in-view .z-step:nth-child(3) .z-step-badge { animation-delay: 0.85s; } html.z-motion-ready .z-steps.in-view .z-step:nth-child(4) .z-step-badge { animation-delay: 1.25s; } @keyframes zBadgeOn { 0% { filter: grayscale(1) brightness(0.75); transform: scale(1); } 55% { filter: grayscale(0) brightness(1.08); transform: scale(1.07); } 100% { filter: grayscale(0) brightness(1); transform: scale(1); } } /* ─────────────────────────────────────────────────────── 3.3 STAGE TRACING — How Fraud Actually Works Directional left→right entrance, then a slow focus cycle driven by JS while the section is on screen. ─────────────────────────────────────────────────────── */ .z-stages .z-stage:nth-child(1) { --stage-c: 224, 82, 82; } .z-stages .z-stage:nth-child(2) { --stage-c: 232, 149, 58; } .z-stages .z-stage:nth-child(3) { --stage-c: 200, 169, 110; } html.z-motion-ready .z-stage { opacity: 0; transform: translateX(-14px); } html.z-motion-ready .z-stages.in-view .z-stage { animation: zStageIn 0.6s var(--z-ease) forwards; } html.z-motion-ready .z-stages.in-view .z-stage:nth-child(2) { animation-delay: 0.22s; } html.z-motion-ready .z-stages.in-view .z-stage:nth-child(3) { animation-delay: 0.44s; } @keyframes zStageIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } } /* Focus state — the stage currently under the lens */ .z-stage { position: relative; transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--z-ease-med); } .z-stage.z-focus { border-color: rgba(var(--stage-c), 0.55) !important; background: #10141f !important; box-shadow: 0 6px 26px rgba(var(--stage-c), 0.10); transform: translateY(-3px); } /* Trace line: fills along the bottom for the focused stage */ .z-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(var(--stage-c), 0.65); transform: scaleX(0); transform-origin: left center; border-radius: 0 0 8px 8px; } .z-stage.z-focus::after { animation: zTrace var(--z-stage-cycle, 3.6s) linear forwards; } @keyframes zTrace { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ─────────────────────────────────────────────────────── 3.4 BULLET STAGGER — offer card line items ─────────────────────────────────────────────────────── */ html.z-motion-ready .z-bullets li { opacity: 0; transform: translateY(8px); } html.z-motion-ready .z-bullets.in-view li { animation: zFadeUp 0.45s var(--z-ease) forwards; } html.z-motion-ready .z-bullets.in-view li:nth-child(1) { animation-delay: 0.05s; } html.z-motion-ready .z-bullets.in-view li:nth-child(2) { animation-delay: 0.11s; } html.z-motion-ready .z-bullets.in-view li:nth-child(3) { animation-delay: 0.17s; } html.z-motion-ready .z-bullets.in-view li:nth-child(4) { animation-delay: 0.23s; } html.z-motion-ready .z-bullets.in-view li:nth-child(5) { animation-delay: 0.29s; } html.z-motion-ready .z-bullets.in-view li:nth-child(6) { animation-delay: 0.35s; } html.z-motion-ready .z-bullets.in-view li:nth-child(7) { animation-delay: 0.41s; } html.z-motion-ready .z-bullets.in-view li:nth-child(8) { animation-delay: 0.47s; } /* ─────────────────────────────────────────────────────── 3.5 ENGINE METRICS — one-time alert pulse Numbers are counted by JS; CRITICAL pulses twice, once. ─────────────────────────────────────────────────────── */ .z-engine-alert.z-alerted { animation: zAlertPulse 1.6s ease-out 1; } @keyframes zAlertPulse { 0%, 100% { text-shadow: 0 0 0 rgba(224, 82, 82, 0); } 18% { text-shadow: 0 0 22px rgba(224, 82, 82, 0.75); } 36% { text-shadow: 0 0 4px rgba(224, 82, 82, 0.15); } 54% { text-shadow: 0 0 18px rgba(224, 82, 82, 0.55); } } /* ─────────────────────────────────────────────────────── 3.6 DOSSIER HOVER — frameworks, insights, articles A file-tab gold edge that draws down the left side. ─────────────────────────────────────────────────────── */ .framework-card, .insight-card, .article-card { position: relative; } .framework-card::before, .insight-card::before, .article-card::before { content: ''; position: absolute; left: 0; top: 10%; width: 2px; height: 80%; background: var(--accent, #c8a96e); transform: scaleY(0); transform-origin: top center; transition: transform 0.2s var(--z-ease-med); border-radius: 2px; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .framework-card:hover::before, .insight-card:hover::before, .article-card:hover::before { transform: scaleY(1); } } /* ─────────────────────────────────────────────────────── 3.7 CASCADE — contact card children settle in order Delays applied by JS; this is the hidden/reveal state. ─────────────────────────────────────────────────────── */ html.z-motion-ready .z-cascade > * { opacity: 0; transform: translateY(12px); } html.z-motion-ready .z-cascade.in-view > * { animation: zFadeUp 0.55s var(--z-ease) forwards; } /* Contact alt-link polish — slide underline, quick color */ .contact-alt a { position: relative; transition: color 0.18s ease; } .contact-alt a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--accent, #c8a96e); transition: width 0.2s ease; } .contact-alt a:hover { color: var(--accent, #c8a96e); } .contact-alt a:hover::after { width: 100%; } /* ─────────────────────────────────────────────────────── 3.8 FOOTER — calm, movement-free resolve ─────────────────────────────────────────────────────── */ html.z-motion-ready .z-fade { opacity: 0; transition: opacity 0.9s ease; } html.z-motion-ready .z-fade.in-view { opacity: 1; } /* ─────────────────────────────────────────────────────── 3.9 REDUCED MOTION — v3 overrides ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html.z-motion-ready nav, html.z-motion-ready .nav-links li, html.z-motion-ready .nav-cta { opacity: 1 !important; animation: none !important; } html.z-motion-ready .z-connector { transform: scaleX(1) !important; transition: none !important; } html.z-motion-ready .z-step, html.z-motion-ready .z-stage, html.z-motion-ready .z-bullets li, html.z-motion-ready .z-cascade > * { opacity: 1 !important; transform: none !important; animation: none !important; } html.z-motion-ready .z-step-badge { filter: none !important; animation: none !important; } .z-stage.z-focus { transform: none !important; box-shadow: none !important; } .z-stage::after { display: none !important; } .z-engine-alert.z-alerted { animation: none !important; } .framework-card::before, .insight-card::before, .article-card::before { display: none !important; } html.z-motion-ready .z-fade { opacity: 1 !important; transition: none !important; } } /* ════════════════════════════════════════════════════════ ZARELVA MOTION/UI v3.1 — NAV OVERFLOW FIX (sitewide) The nav carries 11 links + CTA; without compression the CTA clips off-viewport and long labels wrap to 3 lines. ─────────────────────────────────────────────────────── */ /* Never let labels wrap into stacks; never clip the CTA */ nav .nav-links, nav #nav-links { flex-wrap: nowrap !important; } nav .nav-links a, nav #nav-links a { white-space: nowrap !important; } nav .nav-cta { flex-shrink: 0 !important; white-space: nowrap !important; } nav .nav-inner, nav .nav-container, nav .container { min-width: 0; } /* Progressive compression as the viewport narrows */ @media (max-width: 1680px) { nav .nav-links, nav #nav-links { gap: 1.15rem !important; } nav .nav-links a, nav #nav-links a { font-size: 0.72rem !important; letter-spacing: 0.06em !important; } } @media (max-width: 1440px) { nav .nav-links, nav #nav-links { gap: 0.85rem !important; } nav .nav-links a, nav #nav-links a { font-size: 0.68rem !important; letter-spacing: 0.04em !important; } nav .nav-cta { padding-left: 1rem !important; padding-right: 1rem !important; font-size: 0.7rem !important; } } /* Below 1200px the full link row cannot fit honestly — switch to the drawer earlier than the page's own 768px breakpoint. Mirrors each page's existing panel pattern. */ @media (max-width: 1200px) and (min-width: 769px) { nav .nav-toggle { display: inline-flex !important; background: none; border: none; color: var(--text, #e8e8e8); font-size: 1.4rem; cursor: pointer; } nav .nav-links, nav #nav-links { position: absolute !important; top: var(--nav-height, 68px); left: 0; right: 0; background: rgba(7, 7, 9, 0.98) !important; border-bottom: 1px solid var(--border, #1e2229); padding: 0.9rem 1.5rem 1.2rem !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.9rem !important; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; flex-wrap: nowrap !important; } nav .nav-links.open, nav #nav-links.open { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; } nav .nav-links a, nav #nav-links a { font-size: 0.85rem !important; } }