/* ===================================================================== Gazer Monitoring Theme — interactions.css (v2.19 design layer) Handcrafted micro-interaction + "expansive" layer. Loads AFTER main.css (later-wins overrides). Pairs with assets/js/interactions.js. Signature motif: the LIVE VIEWFINDER — lime corner-brackets that lock onto cards, a cursor-tracking spotlight, scan-in section reveals, a scroll telemetry bar, magnetic CTAs. Everything ties to the business (video monitoring) so it reads handcrafted, not templated. JS-driven states are gated behind the `.gz-fx` class that interactions.js adds to ; decorative motion is gated behind @media (prefers-reduced-motion: no-preference). Pure-CSS upgrades (display type, scale, focus ring, press) apply unconditionally. ===================================================================== */ /* Space Grotesk was the v2.19 display face; it was superseded by the makeover in makeover.css (v2.20) and its @font-face + woff2 files were removed. The --gz-font-display token below is itself overridden by makeover.css. */ :root { --gz-font-display: "Space Grotesk", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; --gz-curve-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* tactile overshoot */ --gz-curve-glide: cubic-bezier(0.22, 1, 0.36, 1); /* long premium ease-out */ } /* ===================================================================== 1. DISPLAY TYPOGRAPHY — the single biggest anti-"generic" lever. Headings move to Space Grotesk (a technical grotesk that matches the mono-label / monitoring character); body copy stays Inter. ===================================================================== */ h1, h2, h3, h4, .gz-card-title-sm, .gz-card-title, .gz-cta-band-copy h2, .gz-cta-final-copy h2 { font-family: var(--gz-font-display); font-feature-settings: "ss01" 1, "ss02" 1; /* technical alternates if present */ } /* Confident heading scale + tighter display tracking — h1 capped at 3.4rem (54px) and h2 at 2.5rem (40px) for a premium-display step, not poster scale */ h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.06; } h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.016em; line-height: 1.12; } h3 { font-size: clamp(1.12rem, 2.2vw, 1.35rem); font-weight: 600; letter-spacing: -0.008em; } h4 { font-weight: 600; letter-spacing: -0.006em; } /* Card titles take the display face but stay at 600 (the only display weight they need — keeps the 400 face off the page). */ .gz-card-title-sm, .gz-card-title { font-weight: 600; } /* Hero headline gets a touch more presence on large screens */ @media (min-width: 1024px) { .gz-hero--split .gz-hero-copy h1 { font-size: clamp(3rem, 4.4vw, 4.3rem); } } /* ===================================================================== 2. SCALE — v2.26 compact rhythm. Desktop section padding + hero-grid gap live in makeover.css (later-wins single source); only the hero band's own padding is set here. ===================================================================== */ @media (min-width: 1024px) { .gz-hero--split { padding-block: clamp(3.5rem, 5vw, 5rem); } } /* Section heads: comfortable measure without excess air */ .gz-section-head { margin-bottom: clamp(1.6rem, 2.5vw, 2.4rem); } .gz-section-head > p, .gz-section-head .gz-section-intro { max-width: 60ch; } .gz-hero--split .gz-hero-copy .gz-hero-lead { max-width: 44rem; } /* ===================================================================== 3. (v2.25) The lime section hairline and the fixed monitoring field grid were removed — the one-continuous design draws no lines between sections and paints no page-level background graphics; the page is one solid black plane with lime reserved for content accents. ===================================================================== */ /* ===================================================================== 4. FOCUS-VISIBLE VIEWFINDER RING — accessible + on-brand. ===================================================================== */ .gz-fx :focus-visible { outline: 2px solid var(--gz-lime); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(234, 255, 18, 0.16); } /* ===================================================================== 5. LINK / NAV UNDERLINE DRAW — lime underline grows from the left. Uses background-size (no ::after) to avoid colliding with carets/markup. ===================================================================== */ .gz-nav-item > a, .gz-footer-col a:not(.gz-btn), .gz-faq-answer a { background-image: linear-gradient(var(--gz-lime), var(--gz-lime)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size 260ms var(--gz-curve-glide), color var(--gz-transition); } .gz-nav-item > a:hover, .gz-nav-item.current-menu-item > a, .gz-nav-item.current_page_item > a, .gz-footer-col a:not(.gz-btn):hover, .gz-faq-answer a:hover { background-size: 100% 2px; } /* Footer link underline reads better a hair tighter to the text */ .gz-footer-col a:not(.gz-btn), .gz-faq-answer a { background-size: 0% 1px; } .gz-footer-col a:not(.gz-btn):hover, .gz-faq-answer a:hover { background-size: 100% 1px; } /* ===================================================================== 6. BUTTONS — tactile press + magnetic primary CTA. Retains main.css glow / arrow-loop / ghost fill-wipe (higher specificity). ===================================================================== */ .gz-btn { transition: color var(--gz-transition), border-color var(--gz-transition), background-color var(--gz-transition), box-shadow var(--gz-transition), transform 180ms var(--gz-curve-spring); } .gz-btn:active { transform: scale(0.96); } /* Magnetic pull — interactions.js sets --mgx/--mgy on the primary button. Compose translate (magnet) + scale (press) via vars so both coexist. */ .gz-fx .gz-btn--primary { transform: translate(var(--mgx, 0px), var(--mgy, 0px)); will-change: transform; } .gz-fx .gz-btn--primary:active { transform: translate(var(--mgx, 0px), var(--mgy, 0px)) scale(0.96); } /* ===================================================================== 7. SCROLL TELEMETRY BAR — thin lime scrubber tracking page depth. interactions.js injects .gz-scrollprog and sets --scrollp (0..1). ===================================================================== */ .gz-scrollprog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; /* above the sticky header (z 50) */ pointer-events: none; background: rgba(255, 255, 255, 0.04); /* neutral track — only the filled portion reads lime */ } .gz-scrollprog > span { display: block; height: 100%; width: 100%; transform: scaleX(var(--scrollp, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gz-lime-dark), var(--gz-lime)); box-shadow: 0 0 6px rgba(234, 255, 18, 0.4); } /* ===================================================================== 8. VIEWFINDER LOCK-ON + CURSOR SPOTLIGHT — the signature card motif. interactions.js appends to each card and tracks --mx/--my (cursor %). On hover/focus the four corner brackets snap inward (acquiring target) and a soft lime spotlight tracks the cursor — like a camera locking on. ===================================================================== */ .gz-card, .gz-risk-card, .gz-usecase-card, .gz-benefit-card { position: relative; } .gz-vf { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; overflow: hidden; opacity: 0; transition: opacity 260ms var(--gz-curve-glide); } /* cursor-tracking spotlight */ .gz-vf::before { content: ""; position: absolute; inset: 0; background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(234, 255, 18, 0.065), transparent 62%); opacity: 0; transition: opacity 280ms ease; } /* four corner brackets — start offset + invisible, snap in on lock-on */ .gz-vf i { position: absolute; width: 14px; height: 14px; border: 2px solid var(--gz-lime); opacity: 0; transition: opacity 240ms var(--gz-curve-glide), transform 360ms var(--gz-curve-spring); } .gz-vf i:nth-child(1) { top: 10px; left: 10px; border-right: 0; border-bottom: 0; transform: translate(6px, 6px); } .gz-vf i:nth-child(2) { top: 10px; right: 10px; border-left: 0; border-bottom: 0; transform: translate(-6px, 6px); } .gz-vf i:nth-child(3) { bottom: 10px; left: 10px; border-right: 0; border-top: 0; transform: translate(6px, -6px); } .gz-vf i:nth-child(4) { bottom: 10px; right: 10px; border-left: 0; border-top: 0; transform: translate(-6px, -6px); } .gz-card:hover .gz-vf, .gz-card:focus-within .gz-vf, .gz-risk-card:hover .gz-vf, .gz-risk-card:focus-within .gz-vf, .gz-usecase-card:hover .gz-vf, .gz-usecase-card:focus-within .gz-vf, .gz-benefit-card:hover .gz-vf, .gz-benefit-card:focus-within .gz-vf { opacity: 1; } .gz-card:hover .gz-vf::before, .gz-card:focus-within .gz-vf::before, .gz-risk-card:hover .gz-vf::before, .gz-usecase-card:hover .gz-vf::before, .gz-benefit-card:hover .gz-vf::before { opacity: 1; } .gz-card:hover .gz-vf i, .gz-card:focus-within .gz-vf i, .gz-risk-card:hover .gz-vf i, .gz-usecase-card:hover .gz-vf i, .gz-benefit-card:hover .gz-vf i { opacity: 0.9; transform: translate(0, 0); } /* Card icon chip reacts to the lock-on (lifts + glows) */ .gz-card-icon { transition: transform 320ms var(--gz-curve-spring), box-shadow 320ms ease, background-color var(--gz-transition); } .gz-card:hover .gz-card-icon, .gz-card:focus-within .gz-card-icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 18px rgba(234, 255, 18, 0.32); } /* ===================================================================== 9. SCAN-IN SECTION REVEAL — a lime line sweeps across each section head as it enters view (content "scanning into existence"). Additive: it does NOT hide content (the section's own .gz-reveal handles entrance), so no-JS / reduced-motion users lose nothing. interactions.js adds .gz-scanin, then .is-scanned on intersect. ===================================================================== */ .gz-scanin { position: relative; } @media (prefers-reduced-motion: no-preference) { .gz-fx .gz-scanin::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 0; width: 2px; background: linear-gradient(transparent, var(--gz-lime), transparent); box-shadow: 0 0 10px rgba(234, 255, 18, 0.32); opacity: 0; pointer-events: none; } .gz-fx .gz-scanin.is-scanned::after { animation: gz-scan-sweep 820ms var(--gz-curve-glide) 120ms forwards; } } @keyframes gz-scan-sweep { 0% { opacity: 0; left: 0; } 12% { opacity: 0.8; } 86% { opacity: 0.8; } 100% { opacity: 0; left: 100%; } } /* ===================================================================== 10. REDUCED-MOTION SAFETY The global *-reset in main.css already neutralises animations/transitions; these belt-and-braces rules make sure interactive states resolve cleanly. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .gz-vf, .gz-vf i, .gz-vf::before { transition-duration: 0.01ms; } .gz-vf i { transform: none; } .gz-scanin::after { display: none; } .gz-btn, .gz-fx .gz-btn--primary { transition-duration: 0.01ms; } }