or . */ width: 100vw; left: 50%; transform: translateX(-50%); height: calc(100vh - var(--nav-height)); min-height: 500px; margin-top: var(--nav-height); overflow: hidden; z-index: 2; background: #000; cursor: pointer; } .story-slides { position: relative; width: 100%; height: 100%; } .story-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); transition: opacity 0.8s ease, transform 6s ease-out; z-index: 1; overflow: hidden; } /* Video background inside slides */ .story-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } /* Hide video element when src is empty */ .story-video:not([src]), .story-video source:not([src]) { display: none; } .story-slide.active { opacity: 1; transform: scale(1); z-index: 2; } .story-slide.exiting { opacity: 0; transform: scale(0.97); transition: opacity 0.6s ease, transform 0.6s ease; z-index: 3; } .story-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.75) 100% ); z-index: 1; } .story-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 4rem 4rem; z-index: 2; max-width: 700px; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease 0.3s, transform 0.6s var(--ease-out-expo) 0.3s; } .story-slide.active .story-content { opacity: 1; transform: translateY(0); } .story-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent-5); background: var(--bg-primary); border: 1px solid rgba(42, 235, 235, 0.25); padding: 0.3rem 0.9rem; border-radius: 100px; margin-bottom: 1.25rem; } .story-content h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 1rem; letter-spacing: -0.02em; } .story-content p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.8); line-height: 1.7; max-width: 500px; } /* Story top bar — indicators + play/pause */ .story-top-bar { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); width: min(400px, calc(100% - 4rem)); display: flex; align-items: center; gap: 12px; z-index: 10; } .story-indicators { flex: 1; display: flex; gap: 6px; } .story-playpause { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: rgba(255, 255, 255, 0.7); transition: color 0.3s ease, transform 0.2s ease; padding: 0; position: relative; } .story-playpause:hover { color: #fff; transform: scale(1.15); } .story-playpause svg { width: 18px; height: 18px; position: absolute; transition: opacity 0.25s ease, transform 0.25s ease; } .story-playpause .icon-pause { opacity: 1; transform: scale(1); } .story-playpause .icon-play { opacity: 0; transform: scale(0.7); } .story-playpause.is-paused .icon-pause { opacity: 0; transform: scale(0.7); } .story-playpause.is-paused .icon-play { opacity: 1; transform: scale(1); } .story-indicator { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 4px; overflow: hidden; cursor: pointer; transition: background 0.3s ease; } .story-indicator:hover { background: rgba(255, 255, 255, 0.4); } .story-indicator-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #3ab4e9, #2aebeb); border-radius: 4px; transition: none; } .story-indicator.completed .story-indicator-fill { width: 100%; } .story-indicator.active .story-indicator-fill { transition: none; } /* Hover pause visual cue */ .story-slideshow.paused .story-content { opacity: 1; } /* Mobile adjustments */ @media (max-width: 768px) { .story-slideshow { /* Sit flush right below the fixed nav — no gap, no overlap */ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); margin-top: var(--nav-height); /* = 64px on mobile, exactly nav height */ height: min(calc(50vw + 160px), calc(100vh - var(--nav-height))); min-height: 320px; } .story-content { padding: 1.5rem 1.5rem 2rem; } .story-content h2 { font-size: clamp(1.5rem, 6vw, 2.5rem); } .story-content p { font-size: 0.95rem; } /* Progress bar + play/pause nudged down a few pixels — text stays put */ .story-top-bar { bottom: 0.35rem; width: min(320px, calc(100% - 2rem)); gap: 8px; } } /* ─── IT Command Center Slide Animation ─── */ .it-anim-scene { position: absolute; inset: 0; z-index: 1; overflow: hidden; /* dark base so letterboxed area (bottom) blends with the page */ background: radial-gradient(ellipse at 50% 30%, rgba(58, 180, 233, 0.05) 0%, transparent 60%), linear-gradient(180deg, #050a14 0%, #02060d 100%); } .it-anim-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transform: scale(1.02); transform-origin: center top; transition: opacity 1.2s ease 0.4s, transform 1.5s ease 0.4s; } /* Bottom scrim painted over the SVG so the text area stays readable even when scene elements extend into the lower half. */ .it-anim-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, transparent 0%, transparent 45%, rgba(2, 6, 13, 0.55) 70%, rgba(2, 6, 13, 0.92) 100% ); z-index: 2; } .story-slide.active .it-anim-svg { opacity: 1; transform: scale(1); } /* LED blink */ @keyframes itLedBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } .it-led { animation: itLedBlink 1.5s ease-in-out infinite; } .it-led-1 { animation-delay: 0s; } .it-led-2 { animation-delay: 0.3s; } .it-led-3 { animation-delay: 0.6s; } .it-led-4 { animation-delay: 0.15s; } .it-led-5 { animation-delay: 0.45s; } .it-led-6 { animation-delay: 0.7s; } .it-led-7 { animation-delay: 0.1s; } .it-led-8 { animation-delay: 0.5s; } .it-led-9 { animation-delay: 0.8s; } /* Drive activity bars */ @keyframes itDriveActivity { 0% { width: 0; } 15% { width: 55px; } 30% { width: 20px; } 50% { width: 65px; } 65% { width: 30px; } 80% { width: 50px; } 100% { width: 0; } } .it-drive { animation: itDriveActivity 3s ease-in-out infinite; } .it-drive-1 { animation-delay: 0s; } .it-drive-2 { animation-delay: 0.5s; } .it-drive-3 { animation-delay: 1s; } .it-drive-4 { animation-delay: 0.3s; } .it-drive-5 { animation-delay: 0.8s; } /* Hub core pulse */ @keyframes itHubPulse { 0%, 100% { r: 12; opacity: 0.8; } 50% { r: 15; opacity: 1; } } .it-hub-core { animation: itHubPulse 2s ease-in-out infinite; } /* Hub ring rotation */ @keyframes itHubSpin { to { transform: rotate(360deg); } } .it-hub-ring { transform-origin: 520px 380px; animation: itHubSpin 12s linear infinite; } /* Connection dash flow */ @keyframes itDashFlow { to { stroke-dashoffset: -40; } } .it-conn { animation: itDashFlow 2s linear infinite; } .it-conn-2 { animation-duration: 2.4s; } .it-conn-3 { animation-duration: 1.8s; } .it-conn-4 { animation-duration: 2.6s; } .it-conn-5 { animation-duration: 3s; } /* Chart line drawing */ @keyframes itChartDraw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } } .it-chart { stroke-dasharray: 300; stroke-dashoffset: 300; animation: itChartDraw 3s ease-out forwards; } .story-slide.active .it-chart { animation: itChartDraw 3s ease-out 0.8s forwards; } /* Dashboard bars grow */ @keyframes itBarGrow { 0% { height: 0; y: 340; } 100% { height: var(--h); y: calc(340 - var(--h)); } } .it-bar { animation: itBarGrow 0.6s ease-out forwards; } .it-bar-1 { --h: 18; animation-delay: 1.2s; height: 0; } .it-bar-2 { --h: 28; animation-delay: 1.35s; height: 0; } .it-bar-3 { --h: 14; animation-delay: 1.5s; height: 0; } .it-bar-4 { --h: 32; animation-delay: 1.65s; height: 0; } .it-bar-5 { --h: 22; animation-delay: 1.8s; height: 0; } .it-bar-6 { --h: 36; animation-delay: 1.95s; height: 0; } .it-bar-7 { --h: 20; animation-delay: 2.1s; height: 0; } .it-bar-8 { --h: 26; animation-delay: 2.25s; height: 0; } /* Status dot pulse */ @keyframes itStatusPulse { 0%, 100% { opacity: 1; r: 3; } 50% { opacity: 0.5; r: 4; } } .it-status-dot { animation: itStatusPulse 2s ease-in-out infinite; } .it-status-2 { animation-delay: 1s; } /* Cloud arrows bounce */ @keyframes itCloudUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes itCloudDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } .it-cloud-up { animation: itCloudUp 2s ease-in-out infinite; } .it-cloud-down { animation: itCloudDown 2s ease-in-out infinite 0.5s; } /* Shield check draw */ @keyframes itShieldCheck { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } } .it-shield-check { stroke-dasharray: 60; stroke-dashoffset: 60; } .story-slide.active .it-shield-check { animation: itShieldCheck 1s ease-out 1.5s forwards; } /* Floating particles */ @keyframes itFloat { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; } 50% { transform: translateY(-15px) scale(1.3); opacity: 0.7; } } .it-particle { animation: itFloat 4s ease-in-out infinite; } .it-p2 { animation-delay: 0.7s; animation-duration: 5s; } .it-p3 { animation-delay: 1.4s; animation-duration: 3.5s; } .it-p4 { animation-delay: 0.3s; animation-duration: 4.5s; } .it-p5 { animation-delay: 2s; animation-duration: 5.5s; } .it-p6 { animation-delay: 1s; animation-duration: 4s; } .it-p7 { animation-delay: 1.7s; animation-duration: 3.8s; } /* Server fade-in stagger */ .it-server-1 { opacity: 0; animation: itFadeUp 0.8s ease-out 0.3s forwards; } .it-server-2 { opacity: 0; animation: itFadeUp 0.8s ease-out 0.5s forwards; } .it-hub { opacity: 0; animation: itFadeUp 0.8s ease-out 0.7s forwards; } .it-dashboard { opacity: 0; animation: itFadeUp 0.8s ease-out 0.9s forwards; } .it-cloud { opacity: 0; animation: itFadeUp 0.8s ease-out 1.1s forwards; } .it-shield { opacity: 0; animation: itFadeUp 0.8s ease-out 1.3s forwards; } @keyframes itFadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* Only animate when slide is active */ .story-slide:not(.active) .it-anim-svg * { animation-play-state: paused; } @media (max-width: 768px) { /* SVG already fills via width/height 100% + slice; nothing to override */ } /* ═══════════════════════════════════════════════════════════ SLIDE SCENE ANIMATIONS (Slides 1–9) Shared aesthetic with IT Command Center: dark gradient bg, --accent-3/--accent-4 palette, fade-up entrance, looping accents. ═══════════════════════════════════════════════════════════ */ /* Shared scene fade-up */ @keyframes sceneFadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes scenePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.15); } } @keyframes sceneBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } @keyframes sceneFloat { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; } 50% { transform: translateY(-15px) scale(1.3); opacity: 0.7; } } @keyframes sceneDashFlow { to { stroke-dashoffset: -40; } } /* ─── 1. Infrastructure & Hardware ─── */ .scene-infra .if-led { animation: sceneBlink 1.5s ease-in-out infinite; } .scene-infra .if-led-a { animation-delay: 0s; } .scene-infra .if-led-b { animation-delay: .2s; } .scene-infra .if-led-c { animation-delay: .4s; } .scene-infra .if-led-d { animation-delay: .6s; } .scene-infra .if-led-e { animation-delay: .1s; } .scene-infra .if-led-f { animation-delay: .35s; } .scene-infra .if-led-g { animation-delay: .55s; } .scene-infra .if-led-h { animation-delay: .75s; } .scene-infra .if-led-i { animation-delay: .15s; } .scene-infra .if-led-j { animation-delay: .45s; } .scene-infra .if-led-k { animation-delay: .65s; } .scene-infra .if-led-l { animation-delay: .85s; } .scene-infra .if-led-m { animation-delay: .25s; } .scene-infra .if-led-n { animation-delay: .5s; } .scene-infra .if-led-o { animation-delay: .7s; } .scene-infra .if-led-p { animation-delay: .9s; } .scene-infra .if-led-q { animation-delay: .3s; } .scene-infra .if-led-r { animation-delay: 0s; } .scene-infra .if-led-s { animation-delay: .25s; } .scene-infra .if-led-t { animation-delay: .5s; } .scene-infra .if-led-u { animation-delay: .75s; } .scene-infra .if-led-v { animation-delay: .1s; } .scene-infra .if-led-w { animation-delay: .4s; } .scene-infra .if-led-x { animation-delay: .65s; } .scene-infra .if-led-y { animation-delay: .9s; } .scene-infra .if-disk { animation: sceneBlink 2s ease-in-out infinite; } .scene-infra .if-disk-2 { animation-delay: .2s; } .scene-infra .if-disk-3 { animation-delay: .4s; } .scene-infra .if-disk-4 { animation-delay: .6s; } .scene-infra .if-disk-5 { animation-delay: .8s; } .scene-infra .if-disk-6 { animation-delay: 1s; } .scene-infra .if-disk-7 { animation-delay: 1.2s; } .scene-infra .if-disk-8 { animation-delay: 1.4s; } .scene-infra .if-cable { animation: sceneDashFlow 2s linear infinite; } .scene-infra .if-rack-1, .scene-infra .if-rack-2, .scene-infra .if-rack-3, .scene-infra .if-storage, .scene-infra .if-iot { opacity: 0; } .story-slide.active .scene-infra .if-rack-1 { animation: sceneFadeUp .8s ease-out .3s forwards; } .story-slide.active .scene-infra .if-rack-2 { animation: sceneFadeUp .8s ease-out .45s forwards; } .story-slide.active .scene-infra .if-rack-3 { animation: sceneFadeUp .8s ease-out .6s forwards; } .story-slide.active .scene-infra .if-storage { animation: sceneFadeUp .8s ease-out .8s forwards; } .story-slide.active .scene-infra .if-iot { animation: sceneFadeUp .8s ease-out 1s forwards; } .scene-infra .if-particle { animation: sceneFloat 4s ease-in-out infinite; } .scene-infra .if-p2 { animation-delay: .7s; animation-duration: 5s; } .scene-infra .if-p3 { animation-delay: 1.4s; animation-duration: 3.5s; } .scene-infra .if-p4 { animation-delay: .3s; animation-duration: 4.5s; } .scene-infra .if-p5 { animation-delay: 1s; animation-duration: 5.5s; } /* ─── 2. Software & Applications ─── */ @keyframes swLineGrow { 0% { width: 0; } 100% { width: var(--w, 200px); } } @keyframes swCaretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .scene-software .sw-line { width: 0; } .story-slide.active .scene-software .sw-line { animation: swLineGrow 1.2s ease-out forwards; } .story-slide.active .scene-software .sw-line-1 { --w: 280px; animation-delay: .4s; } .story-slide.active .scene-software .sw-line-2 { --w: 220px; animation-delay: .55s; } .story-slide.active .scene-software .sw-line-3 { --w: 320px; animation-delay: .7s; } .story-slide.active .scene-software .sw-line-4 { --w: 260px; animation-delay: .85s; } .story-slide.active .scene-software .sw-line-5 { --w: 300px; animation-delay: 1s; } .story-slide.active .scene-software .sw-line-6 { --w: 240px; animation-delay: 1.15s; } .story-slide.active .scene-software .sw-line-7 { --w: 290px; animation-delay: 1.3s; } .story-slide.active .scene-software .sw-line-8 { --w: 200px; animation-delay: 1.45s; } .story-slide.active .scene-software .sw-line-9 { --w: 270px; animation-delay: 1.6s; } .story-slide.active .scene-software .sw-line-10 { --w: 250px; animation-delay: 1.75s; } .scene-software .sw-caret { animation: swCaretBlink 1s steps(1) infinite; } .scene-software .sw-tile { opacity: 0; transform-box: fill-box; transform-origin: center; } .story-slide.active .scene-software .sw-tile { animation: sceneFadeUp .6s ease-out forwards; } .story-slide.active .scene-software .sw-tile-1 { animation-delay: .5s; } .story-slide.active .scene-software .sw-tile-2 { animation-delay: .6s; } .story-slide.active .scene-software .sw-tile-3 { animation-delay: .7s; } .story-slide.active .scene-software .sw-tile-4 { animation-delay: .8s; } .story-slide.active .scene-software .sw-tile-5 { animation-delay: .9s; } .story-slide.active .scene-software .sw-tile-6 { animation-delay: 1s; } .story-slide.active .scene-software .sw-tile-7 { animation-delay: 1.1s; } .story-slide.active .scene-software .sw-tile-8 { animation-delay: 1.2s; } .story-slide.active .scene-software .sw-tile-9 { animation-delay: 1.3s; } .scene-software .sw-particle { animation: sceneFloat 4.5s ease-in-out infinite; } .scene-software .sw-p2 { animation-delay: .9s; } .scene-software .sw-p3 { animation-delay: 1.6s; } .scene-software .sw-p4 { animation-delay: 2.2s; } /* ─── 3. Cloud & DevOps ─── */ @keyframes cdGearSpin { to { transform: rotate(360deg); } } @keyframes cdGearSpinRev { to { transform: rotate(-360deg); } } @keyframes cdPacketRun { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(800px); opacity: 0; } } .scene-cloud .cd-cloud { opacity: 0; } .story-slide.active .scene-cloud .cd-cloud { animation: sceneFadeUp 1s ease-out .3s forwards; } .scene-cloud .cd-stage { opacity: 0; transform-box: fill-box; transform-origin: center; } .story-slide.active .scene-cloud .cd-stage-1 { animation: sceneFadeUp .6s ease-out .5s forwards; } .story-slide.active .scene-cloud .cd-stage-2 { animation: sceneFadeUp .6s ease-out .65s forwards; } .story-slide.active .scene-cloud .cd-stage-3 { animation: sceneFadeUp .6s ease-out .8s forwards; } .story-slide.active .scene-cloud .cd-stage-4 { animation: sceneFadeUp .6s ease-out .95s forwards; } .story-slide.active .scene-cloud .cd-stage-5 { animation: sceneFadeUp .6s ease-out 1.1s forwards; } .story-slide.active .scene-cloud .cd-stage-6 { animation: sceneFadeUp .6s ease-out 1.25s forwards; } .scene-cloud .cd-pipeline line { animation: sceneDashFlow 2s linear infinite; } .scene-cloud .cd-conns line { animation: sceneDashFlow 2.5s linear infinite; } .scene-cloud .cd-packet-1 { animation: cdPacketRun 4s ease-in-out infinite; } .scene-cloud .cd-packet-2 { animation: cdPacketRun 4s ease-in-out infinite 2s; } .scene-cloud .cd-gear-1 { transform-origin: 180px 510px; animation: cdGearSpin 10s linear infinite; } .scene-cloud .cd-gear-2 { transform-origin: 1020px 510px; animation: cdGearSpinRev 8s linear infinite; } .scene-cloud .cd-particle { animation: sceneFloat 4s ease-in-out infinite; } .scene-cloud .cd-p2 { animation-delay: .8s; } .scene-cloud .cd-p3 { animation-delay: 1.6s; } .scene-cloud .cd-p4 { animation-delay: 2.4s; } .scene-cloud .cd-p5 { animation-delay: 3.2s; } /* ─── 4. Cybersecurity ─── */ @keyframes cyRadarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cyShieldDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes cyThreatNeutralize { 0% { opacity: 0.7; transform: scale(1); } 60% { opacity: 0.7; transform: scale(1); } 80% { opacity: 0.3; transform: scale(0.6); } 100% { opacity: 0; transform: scale(0); } } .scene-security .cy-sweep { transform-origin: 0 0; animation: cyRadarSweep 6s linear infinite; } .scene-security .cy-shield { opacity: 0; } .story-slide.active .scene-security .cy-shield { animation: sceneFadeUp 1s ease-out .3s forwards; } .scene-security .cy-shield-check { stroke-dasharray: 100; stroke-dashoffset: 100; } .story-slide.active .scene-security .cy-shield-check { animation: cyShieldDraw 1s ease-out 1.2s forwards; } .scene-security .cy-threat { transform-box: fill-box; transform-origin: center; } .story-slide.active .scene-security .cy-threat-1 { animation: cyThreatNeutralize 4s ease-in-out 1.6s infinite; } .story-slide.active .scene-security .cy-threat-2 { animation: cyThreatNeutralize 4s ease-in-out 2.2s infinite; } .story-slide.active .scene-security .cy-threat-3 { animation: cyThreatNeutralize 4s ease-in-out 2.8s infinite; } .story-slide.active .scene-security .cy-threat-4 { animation: cyThreatNeutralize 4s ease-in-out 3.4s infinite; } .scene-security .cy-firewall rect { animation: sceneBlink 2s ease-in-out infinite; } .scene-security .cy-firewall rect:nth-child(2) { animation-delay: .2s; } .scene-security .cy-firewall rect:nth-child(3) { animation-delay: .4s; } .scene-security .cy-firewall rect:nth-child(4) { animation-delay: .6s; } .scene-security .cy-firewall rect:nth-child(5) { animation-delay: .8s; } .scene-security .cy-firewall rect:nth-child(6) { animation-delay: 1s; } .scene-security .cy-firewall rect:nth-child(7) { animation-delay: 1.2s; } .scene-security .cy-firewall rect:nth-child(8) { animation-delay: 1.4s; } .scene-security .cy-particle { animation: sceneFloat 4s ease-in-out infinite; } .scene-security .cy-p2 { animation-delay: .8s; } .scene-security .cy-p3 { animation-delay: 1.6s; } .scene-security .cy-p4 { animation-delay: 2.4s; } .scene-security .cy-p5 { animation-delay: 3.2s; } /* ─── 5. Network & Connectivity ─── */ @keyframes nwHubPulse { 0%, 100% { r: 10; opacity: 1; } 50% { r: 13; opacity: 0.7; } } .scene-network .nw-globe { opacity: 0; } .story-slide.active .scene-network .nw-globe { animation: sceneFadeUp 1.2s ease-out .3s forwards; } .scene-network .nw-hub-core { animation: nwHubPulse 2s ease-in-out infinite; } .scene-network .nw-conn { animation: sceneDashFlow 2s linear infinite; } .scene-network .nw-conn:nth-child(2n) { animation-duration: 2.6s; } .scene-network .nw-node { animation: scenePulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .scene-network .nw-node-2 { animation-delay: .25s; } .scene-network .nw-node-3 { animation-delay: .5s; } .scene-network .nw-node-4 { animation-delay: .75s; } .scene-network .nw-node-5 { animation-delay: 1s; } .scene-network .nw-node-6 { animation-delay: 1.25s; } .scene-network .nw-node-7 { animation-delay: 1.5s; } .scene-network .nw-node-8 { animation-delay: 1.75s; } .scene-network .nw-node-9 { animation-delay: 2s; } .scene-network .nw-wifi path:nth-child(1) { animation: sceneBlink 1.6s ease-in-out infinite; } .scene-network .nw-wifi path:nth-child(2) { animation: sceneBlink 1.6s ease-in-out .2s infinite; } .scene-network .nw-wifi path:nth-child(3) { animation: sceneBlink 1.6s ease-in-out .4s infinite; } /* ─── 6. Data, AI & Advanced Tech ─── */ @keyframes daSynPulse { 0%, 100% { opacity: 0.2; stroke-width: 1; } 50% { opacity: 1; stroke-width: 1.8; } } @keyframes daBarGrow6 { from { height: 0; y: 290; } to { height: var(--h); y: calc(290 - var(--h)); } } @keyframes daDonutFill { to { stroke-dashoffset: 25; } } @keyframes daBitFall { 0% { transform: translateY(0); opacity: 0.6; } 100% { transform: translateY(40px); opacity: 0; } } @keyframes daTrendDraw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } } .scene-data .da-neuron { animation: scenePulse 2.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .scene-data .da-n-2 { animation-delay: .15s; } .scene-data .da-n-3 { animation-delay: .3s; } .scene-data .da-n-4 { animation-delay: .45s; } .scene-data .da-n-5 { animation-delay: .6s; } .scene-data .da-n-6 { animation-delay: .75s; } .scene-data .da-n-7 { animation-delay: .9s; } .scene-data .da-n-8 { animation-delay: 1.05s; } .scene-data .da-n-9 { animation-delay: 1.2s; } .scene-data .da-n-10 { animation-delay: 1.35s; } .scene-data .da-n-11 { animation-delay: 1.5s; } .scene-data .da-n-12 { animation-delay: 1.65s; } .scene-data .da-n-13 { animation-delay: 1.8s; } .scene-data .da-n-14 { animation-delay: 1.95s; } .scene-data .da-n-15 { animation-delay: 2.1s; } .scene-data .da-syn { animation: daSynPulse 2.4s ease-in-out infinite; } .scene-data .da-syn-2 { animation-delay: .3s; } .scene-data .da-syn-3 { animation-delay: .6s; } .scene-data .da-syn-4 { animation-delay: .15s; } .scene-data .da-syn-5 { animation-delay: .45s; } .scene-data .da-syn-6 { animation-delay: .75s; } .scene-data .da-bar { height: 0; } .story-slide.active .scene-data .da-bar { animation: daBarGrow6 .7s ease-out forwards; } .story-slide.active .scene-data .da-bar-1 { --h: 26; animation-delay: 1.2s; } .story-slide.active .scene-data .da-bar-2 { --h: 38; animation-delay: 1.32s; } .story-slide.active .scene-data .da-bar-3 { --h: 22; animation-delay: 1.44s; } .story-slide.active .scene-data .da-bar-4 { --h: 44; animation-delay: 1.56s; } .story-slide.active .scene-data .da-bar-5 { --h: 30; animation-delay: 1.68s; } .story-slide.active .scene-data .da-bar-6 { --h: 50; animation-delay: 1.8s; } .story-slide.active .scene-data .da-bar-7 { --h: 36; animation-delay: 1.92s; } .story-slide.active .scene-data .da-bar-8 { --h: 42; animation-delay: 2.04s; } .scene-data .da-trend { stroke-dasharray: 300; stroke-dashoffset: 300; } .story-slide.active .scene-data .da-trend { animation: daTrendDraw 2s ease-out 1s forwards; } .story-slide.active .scene-data .da-donut { animation: daDonutFill 1.6s ease-out 1.4s forwards; } .scene-data .da-bit { transform-box: fill-box; } .scene-data .da-bit-1 { animation: daBitFall 3s ease-in infinite; } .scene-data .da-bit-2 { animation: daBitFall 3s ease-in .8s infinite; } .scene-data .da-bit-3 { animation: daBitFall 3s ease-in .4s infinite; } .scene-data .da-bit-4 { animation: daBitFall 3s ease-in 1.2s infinite; } .scene-data .da-bit-5 { animation: daBitFall 3s ease-in .6s infinite; } .scene-data .da-bit-6 { animation: daBitFall 3s ease-in 1.4s infinite; } /* ─── 7. IT Operations & Managed Services ─── */ @keyframes opGaugeFill1 { to { stroke-dashoffset: 4; } } @keyframes opGaugeFill2 { to { stroke-dashoffset: 200; } } @keyframes opGaugeFill3 { to { stroke-dashoffset: 80; } } @keyframes opLineDraw { from { stroke-dashoffset: 350; } to { stroke-dashoffset: 0; } } @keyframes opTickerWave { 0%, 100% { height: 8px; y: 422; } 50% { height: var(--h, 30px); y: calc(430px - var(--h, 30px)); } } .scene-ops .op-monitor { opacity: 0; } .story-slide.active .scene-ops .op-monitor { animation: sceneFadeUp 1s ease-out .3s forwards; } .story-slide.active .scene-ops .op-gauge-fill { animation: opGaugeFill1 2s ease-out .9s forwards; } .story-slide.active .scene-ops .op-gauge-fill-2 { animation: opGaugeFill2 2s ease-out 1.1s forwards; } .story-slide.active .scene-ops .op-gauge-fill-3 { animation: opGaugeFill3 2s ease-out 1.3s forwards; } .scene-ops .op-line { stroke-dasharray: 350; stroke-dashoffset: 350; } .story-slide.active .scene-ops .op-line { animation: opLineDraw 2.4s ease-out 1.4s forwards; } .scene-ops .op-status { animation: scenePulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .scene-ops .op-status-2 { animation-delay: .5s; } .scene-ops .op-status-3 { animation-delay: 1s; } .scene-ops .op-status-4 { animation-delay: 1.5s; } .scene-ops .op-tick { animation: opTickerWave 1.4s ease-in-out infinite; } .scene-ops .op-tick-1 { --h: 22px; animation-delay: 0s; } .scene-ops .op-tick-2 { --h: 30px; animation-delay: .08s; } .scene-ops .op-tick-3 { --h: 18px; animation-delay: .16s; } .scene-ops .op-tick-4 { --h: 36px; animation-delay: .24s; } .scene-ops .op-tick-5 { --h: 26px; animation-delay: .32s; } .scene-ops .op-tick-6 { --h: 32px; animation-delay: .4s; } .scene-ops .op-tick-7 { --h: 20px; animation-delay: .48s; } .scene-ops .op-tick-8 { --h: 38px; animation-delay: .56s; } .scene-ops .op-tick-9 { --h: 24px; animation-delay: .64s; } .scene-ops .op-tick-10 { --h: 28px; animation-delay: .72s; } .scene-ops .op-tick-11 { --h: 16px; animation-delay: .8s; } .scene-ops .op-tick-12 { --h: 34px; animation-delay: .88s; } .scene-ops .op-tick-13 { --h: 26px; animation-delay: 0s; } .scene-ops .op-tick-14 { --h: 18px; animation-delay: .1s; } .scene-ops .op-tick-15 { --h: 32px; animation-delay: .2s; } .scene-ops .op-tick-16 { --h: 22px; animation-delay: .3s; } .scene-ops .op-tick-17 { --h: 36px; animation-delay: .4s; } .scene-ops .op-tick-18 { --h: 20px; animation-delay: .5s; } /* ─── 8. Digital Solutions & Platforms ─── */ @keyframes dgCursorMove { 0% { transform: translate(0, 0); } 25% { transform: translate(-150px, -120px); } 50% { transform: translate(80px, -50px); } 75% { transform: translate(140px, 0); } 100% { transform: translate(0, 0); } } .scene-digital .dg-desktop, .scene-digital .dg-tablet, .scene-digital .dg-phone { opacity: 0; } .story-slide.active .scene-digital .dg-desktop { animation: sceneFadeUp .8s ease-out .3s forwards; } .story-slide.active .scene-digital .dg-tablet { animation: sceneFadeUp .8s ease-out .55s forwards; } .story-slide.active .scene-digital .dg-phone { animation: sceneFadeUp .8s ease-out .8s forwards; } .scene-digital .dg-block { transform-box: fill-box; transform-origin: center; } .scene-digital .dg-block-5 { animation: scenePulse 2.4s ease-in-out infinite; } .scene-digital .dg-cursor { transform-box: fill-box; transform-origin: center; animation: dgCursorMove 6s ease-in-out infinite; } .scene-digital .dg-flow path { animation: sceneDashFlow 2s linear infinite; } .scene-digital .dg-particle { animation: sceneFloat 4s ease-in-out infinite; } .scene-digital .dg-p2 { animation-delay: .8s; } .scene-digital .dg-p3 { animation-delay: 1.6s; } .scene-digital .dg-p4 { animation-delay: 2.4s; } /* ─── 9. Consulting, Training & Governance ─── */ @keyframes ctTickDraw { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } } @keyframes ctSpeak { 0%, 100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } .scene-consulting .ct-table, .scene-consulting .ct-checklist, .scene-consulting .ct-cap { opacity: 0; } .story-slide.active .scene-consulting .ct-table { animation: sceneFadeUp 1s ease-out .3s forwards; } .story-slide.active .scene-consulting .ct-checklist { animation: sceneFadeUp .8s ease-out .8s forwards; } .story-slide.active .scene-consulting .ct-cap { animation: sceneFadeUp .8s ease-out 1s forwards; } .scene-consulting .ct-person { opacity: 0; transform-box: fill-box; transform-origin: center; } .story-slide.active .scene-consulting .ct-person-1 { animation: sceneFadeUp .6s ease-out .5s forwards; } .story-slide.active .scene-consulting .ct-person-2 { animation: sceneFadeUp .6s ease-out .65s forwards; } .story-slide.active .scene-consulting .ct-person-3 { animation: sceneFadeUp .6s ease-out .8s forwards; } .story-slide.active .scene-consulting .ct-person-4 { animation: sceneFadeUp .6s ease-out .95s forwards; } .story-slide.active .scene-consulting .ct-person-5 { animation: sceneFadeUp .6s ease-out 1.1s forwards; } .scene-consulting .ct-speak { transform-box: fill-box; transform-origin: 0 -10px; animation: ctSpeak 1.6s ease-in-out infinite; } .scene-consulting .ct-tick { stroke-dasharray: 20; stroke-dashoffset: 20; } .story-slide.active .scene-consulting .ct-tick-1 { animation: ctTickDraw .5s ease-out 1.3s forwards; } .story-slide.active .scene-consulting .ct-tick-2 { animation: ctTickDraw .5s ease-out 1.5s forwards; } .story-slide.active .scene-consulting .ct-tick-3 { animation: ctTickDraw .5s ease-out 1.7s forwards; } .story-slide.active .scene-consulting .ct-tick-4 { animation: ctTickDraw .5s ease-out 1.9s forwards; } .story-slide.active .scene-consulting .ct-tick-5 { animation: ctTickDraw .5s ease-out 2.1s forwards; } .story-slide.active .scene-consulting .ct-tick-6 { animation: ctTickDraw .5s ease-out 2.3s forwards; } .story-slide.active .scene-consulting .ct-tick-7 { animation: ctTickDraw .5s ease-out 2.5s forwards; } .scene-consulting .ct-particle { animation: sceneFloat 4s ease-in-out infinite; } .scene-consulting .ct-p2 { animation-delay: .8s; } .scene-consulting .ct-p3 { animation-delay: 1.6s; } .scene-consulting .ct-p4 { animation-delay: 2.4s; } .scene-consulting .ct-p5 { animation-delay: 3.2s; } /* Pause non-active scene animations to save CPU (matches IT Command pattern) */ .story-slide:not(.active) .scene-infra *, .story-slide:not(.active) .scene-software *, .story-slide:not(.active) .scene-cloud *, .story-slide:not(.active) .scene-security *, .story-slide:not(.active) .scene-network *, .story-slide:not(.active) .scene-data *, .story-slide:not(.active) .scene-ops *, .story-slide:not(.active) .scene-digital *, .story-slide:not(.active) .scene-consulting * { animation-play-state: paused; } /* ─── Hero Section ─── */ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: var(--nav-height); } .hero > .container { width: 100%; } .hero-content { position: relative; z-index: 2; max-width: 100%; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem 0.4rem 0.5rem; background: transparent; border: none; border-radius: 100px; font-size: 0.85rem; color: var(--accent-4); margin-bottom: 2rem; backdrop-filter: none; } .hero-badge .dot { width: 8px; height: 8px; background: var(--accent-5); border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(42, 235, 235, 0.4); } 50% { opacity: 0.8; box-shadow: 0 0 0 8px rgba(42, 235, 235, 0); } } .hero h1 { margin-bottom: 1.5rem; line-height: 1.14; } .hero h1 .line { display: block; overflow: visible; } .hero h1 .line span { display: inline-block; transform: translateY(120%); opacity: 0; overflow: visible; /* prevent animation container from clipping gradient text */ } .hero-description { font-size: 1.2rem; margin-bottom: 2.5rem; max-width: 650px; opacity: 0; transform: translateY(20px); } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; transform: translateY(20px); } /* ─── Hero Stats ─── */ /* Higher specificity (.hero .hero-stats) guarantees these rules beat style.css's .hero-stats { display:flex } */ .hero .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: 100%; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--glass-border); opacity: 0; transform: translateY(20px); } .hero .hero-stat { position: relative; padding: 1.4rem 1.4rem 1.25rem 1.75rem; border: 1px solid rgba(58, 180, 233, 0.22); background: linear-gradient(135deg, rgba(10, 18, 40, 0.72) 0%, rgba(5, 10, 21, 0.88) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 0.35s var(--ease-out-expo), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; overflow: hidden; } /* Left vertical accent bar */ .hero .hero-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--accent-3), var(--accent-5)); } /* Ambient corner glow */ .hero .hero-stat::after { content: ''; position: absolute; top: -15px; right: -15px; width: 90px; height: 90px; background: radial-gradient(circle, rgba(42, 235, 235, 0.14), transparent 70%); pointer-events: none; } .hero .hero-stat:hover { transform: translateY(-5px); border-color: rgba(58, 180, 233, 0.5); box-shadow: 0 20px 40px rgba(5, 10, 21, 0.5), 0 0 30px rgba(58, 180, 233, 0.15); background: linear-gradient(135deg, rgba(14, 26, 56, 0.85) 0%, rgba(8, 14, 32, 0.95) 100%); } /* ─── Trusted By Section ─── */ /* Tighten the vertical gap above key home-page section labels. The default .section padding-top of var(--section-padding) (120px desktop / 80px tablet / 60px mobile) creates too much air between the previous section's content and the small uppercase "section-label" intro ("Ecosystem Tiers", "Find Your Ecosystem Tier", "METHODOLOGY", "TRUSTED BY INDUSTRY LEADERS"). Pull them up. */ #tiers-overview, #tier-finder, #implementation, #trusted-by { padding-top: calc(var(--section-padding) * 0.45); } #tier-finder.tq-section { padding-top: calc(var(--section-padding) * 0.45); } .trusted-header { margin-bottom: 2.25rem; } .trusted-section { padding-top: 80px; padding-bottom: 100px; overflow: hidden; position: relative; } .trusted-header { text-align: center; margin-bottom: 3.5rem; } /* Floating particles behind marquee */ .trusted-marquee::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 30%, rgba(58, 180, 233, 0.4) 50%, transparent 100%), radial-gradient(1px 1px at 30% 70%, rgba(42, 235, 235, 0.3) 50%, transparent 100%), radial-gradient(1.5px 1.5px at 55% 20%, rgba(58, 180, 233, 0.35) 50%, transparent 100%), radial-gradient(1px 1px at 75% 60%, rgba(42, 235, 235, 0.3) 50%, transparent 100%), radial-gradient(1px 1px at 90% 40%, rgba(58, 180, 233, 0.25) 50%, transparent 100%); pointer-events: none; animation: particle-drift 12s ease-in-out infinite alternate; z-index: -1; } @keyframes particle-drift { 0% { transform: translateY(0) translateX(0); opacity: 0.4; } 50% { transform: translateY(-8px) translateX(5px); opacity: 0.7; } 100% { transform: translateY(3px) translateX(-3px); opacity: 0.4; } } /* ── Logo Marquee — conveyor belt, two-row infinite scroll ── */ .trusted-marquee { margin-bottom: 4rem; display: flex; flex-direction: column; gap: 0; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } /* Ambient glow behind the marquee */ .trusted-marquee::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 120%; background: radial-gradient(ellipse, rgba(58, 180, 233, 0.06) 0%, transparent 70%); pointer-events: none; animation: marquee-glow 6s ease-in-out infinite; z-index: -1; } @keyframes marquee-glow { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } } .trusted-marquee-row { overflow: hidden; padding: 0.5rem 0; } .trusted-marquee-track { display: flex; gap: 1rem; width: max-content; animation: marquee-scroll 40s linear infinite; } .trusted-marquee-row.reverse .trusted-marquee-track { animation-direction: reverse; } /* Conveyor belt surface between rows */ .trusted-marquee-row + .trusted-marquee-row { border-top: 1px solid var(--glass-border); } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .trusted-logo { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.5rem 1.75rem 0.5rem 0.5rem; border: 1px solid var(--glass-border); border-radius: 100px; background: var(--glass-bg); font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.02em; white-space: nowrap; transition: border-color 0.4s, color 0.4s, box-shadow 0.4s, background 0.4s, transform 0.4s var(--ease-out-expo); cursor: default; flex-shrink: 0; position: relative; overflow: hidden; } /* Shimmer sweep across capsules — staggered per capsule */ .trusted-logo::after { content: ''; position: absolute; top: -50%; left: -100%; width: 50%; height: 200%; background: linear-gradient(105deg, transparent 30%, rgba(58, 180, 233, 0.12) 48%, rgba(42, 235, 235, 0.08) 52%, transparent 70%); animation: capsule-shimmer 5s ease-in-out infinite; pointer-events: none; } .trusted-logo:nth-child(2)::after { animation-delay: 0.8s; } .trusted-logo:nth-child(3)::after { animation-delay: 1.6s; } .trusted-logo:nth-child(4)::after { animation-delay: 0.4s; } .trusted-logo:nth-child(5)::after { animation-delay: 1.2s; } .trusted-logo:nth-child(6)::after { animation-delay: 2s; } @keyframes capsule-shimmer { 0%, 100% { left: -100%; opacity: 0; } 5% { opacity: 1; } 35% { left: 200%; opacity: 1; } 40%, 100% { left: 200%; opacity: 0; } } .trusted-logo:hover { border-color: var(--accent-3); color: var(--text-primary); box-shadow: 0 0 20px rgba(58, 180, 233, 0.12); transform: translateY(-3px) scale(1.03); } .trusted-logo:hover .trusted-logo-img, .trusted-logo:hover .trusted-logo-placeholder { transform: scale(1.15) rotate(8deg); } .trusted-logo-img { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; flex-shrink: 0; transition: transform 0.4s var(--ease-out-expo); } .trusted-logo-img[alt="Peak Essence"], .trusted-logo-img[alt="Ather"] { background: #e3e9ef; } .trusted-logo-placeholder { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-gradient); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 800; color: #fff; flex-shrink: 0; transition: transform 0.4s var(--ease-out-expo); } [dir="rtl"] .trusted-logo { padding: 0.5rem 0.5rem 0.5rem 1.75rem; } /* Pause marquee on hover for readability */ .trusted-marquee:hover .trusted-marquee-track { animation-play-state: paused; } [dir="rtl"] .trusted-marquee-track { animation-name: marquee-scroll-rtl; } @keyframes marquee-scroll-rtl { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } } /* ── Voices / Testimonials — Spotlight Stage ── */ .trusted-voices { max-width: 800px; margin: 0 auto; } .voices-label { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-3); margin-bottom: 1.5rem; } .voices-label svg { width: 18px; height: 18px; } .voices-stage { position: relative; min-height: 200px; } /* Stage wrap holds prev/next nav around the stage */ .voices-stage-wrap { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; } .voices-stage-wrap .voices-stage { min-width: 0; } /* ── Cool arrow nav buttons ── */ .voices-nav { position: relative; flex-shrink: 0; width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, rgba(58,180,233,0.10), rgba(42,235,235,0.05)); border: 1.5px solid rgba(174, 244, 255, 0.35); color: #aef4ff; cursor: pointer; padding: 0; overflow: hidden; transition: transform 0.4s var(--ease-out-expo), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; box-shadow: 0 6px 24px rgba(58,180,233,0.12); z-index: 2; } .voices-nav svg { width: 24px; height: 24px; position: relative; z-index: 2; } .voices-nav-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at center, rgba(126,240,255,0.45), transparent 65%); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; } .voices-nav-trail { opacity: 0; stroke-dasharray: 12; stroke-dashoffset: 12; transition: opacity 0.35s ease, stroke-dashoffset 0.45s var(--ease-out-expo); } .voices-nav-arrow { transition: transform 0.45s var(--ease-out-expo); } .voices-nav:hover { border-color: rgba(174, 244, 255, 0.95); background: linear-gradient(135deg, rgba(58,180,233,0.22), rgba(42,235,235,0.16)); box-shadow: 0 10px 32px rgba(58,180,233,0.4), 0 0 0 4px rgba(58,180,233,0.10); transform: translateY(-2px) scale(1.05); color: #ffffff; } .voices-nav:hover .voices-nav-glow { opacity: 1; } .voices-nav:hover .voices-nav-trail { opacity: 1; stroke-dashoffset: 0; } .voices-nav-prev:hover .voices-nav-arrow { transform: translateX(-3px); } .voices-nav-next:hover .voices-nav-arrow { transform: translateX(3px); } .voices-nav:active { transform: translateY(0) scale(0.96); } .voices-nav:focus-visible { outline: none; border-color: var(--accent-4); box-shadow: 0 0 0 3px rgba(58, 180, 233, 0.4); } @media (max-width: 720px) { .voices-stage-wrap { grid-template-columns: 1fr; } .voices-nav { display: none; } } .voice-slide { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4rem; opacity: 0; transform: translateY(24px) scale(0.97); filter: blur(6px); pointer-events: none; transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo), filter 0.7s var(--ease-out-expo); } .voice-slide.active { position: relative; opacity: 1; transform: translateY(0) scale(1); filter: blur(0); pointer-events: auto; } .voice-content { position: relative; } .voice-quote-mark { position: absolute; top: -14px; left: -8px; width: 56px; height: 56px; color: var(--accent-3); opacity: 0.12; z-index: 0; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease; filter: drop-shadow(0 0 8px rgba(58, 180, 233, 0.3)); } .voice-slide:not(.active) .voice-quote-mark { transform: scale(0.3) rotate(-20deg); opacity: 0; } .voice-slide.active .voice-quote-mark { transform: scale(1) rotate(0deg); opacity: 0.12; animation: quote-breathe 4s ease-in-out infinite; } @keyframes quote-breathe { 0%, 100% { opacity: 0.12; transform: scale(1); filter: drop-shadow(0 0 8px rgba(58, 180, 233, 0.3)); } 50% { opacity: 0.18; transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(58, 180, 233, 0.5)); } } [dir="rtl"] .voice-quote-mark { left: auto; right: -8px; transform: scaleX(-1); } .voice-text { font-size: 1.35rem; line-height: 1.8; color: var(--text-primary); font-weight: 400; padding-left: 3rem; position: relative; } /* Glowing accent bar — positioned to clear the quote mark */ .voice-text::before { content: ''; position: absolute; left: 0.8rem; top: 2.8rem; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--accent-3), var(--accent-4, #2aebeb), transparent); border-radius: 2px; opacity: 0; transition: opacity 0.6s ease 0.3s, height 0.8s ease 0.3s; box-shadow: 0 0 8px rgba(58, 180, 233, 0.4); } .voice-slide.active .voice-text::before { opacity: 1; animation: accent-glow 3s ease-in-out infinite; } @keyframes accent-glow { 0%, 100% { box-shadow: 0 0 8px rgba(58, 180, 233, 0.3); } 50% { box-shadow: 0 0 18px rgba(58, 180, 233, 0.6); } } [dir="rtl"] .voice-text::before { left: auto; right: 0.8rem; } [dir="rtl"] .voice-text { padding-left: 0; padding-right: 3rem; } .voice-author { display: flex; align-items: center; gap: 1rem; padding-left: 3rem; } [dir="rtl"] .voice-author { padding-left: 0; padding-right: 3rem; } .voice-company-logo { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; position: relative; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease; } .voice-slide.active .voice-company-logo { animation: logo-enter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; } @keyframes logo-enter { from { transform: scale(0.6) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } .voice-company-logo:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(58, 180, 233, 0.3); border-color: var(--accent-3); } .voice-company-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .voice-company-logo img[alt="Peak Essence"], .voice-company-logo img[alt="Ather"] { background: #e3e9ef; } .voice-company-logo span { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .voice-meta { display: flex; flex-direction: column; gap: 0.15rem; } .voice-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .voice-role { font-size: 0.85rem; color: var(--text-muted); } /* Author info slides in */ .voice-slide.active .voice-meta { animation: meta-slide 0.6s var(--ease-out-expo) 0.35s both; } @keyframes meta-slide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } [dir="rtl"] .voice-slide.active .voice-meta { animation-name: meta-slide-rtl; } @keyframes meta-slide-rtl { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } /* Controls — dot indicators */ .voices-dots { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.2rem; padding-left: 3rem; } [dir="rtl"] .voices-dots { padding-left: 0; padding-right: 3rem; } .voices-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(180, 220, 240, 0.32); border: 1.5px solid rgba(174, 244, 255, 0.55); padding: 0; cursor: pointer; transition: all 0.4s var(--ease-out-expo); position: relative; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); } .voices-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--accent-3); opacity: 0; transform: scale(0.6); transition: all 0.4s var(--ease-out-expo); } .voices-dot.active { background: var(--accent-3); border-color: rgba(174, 244, 255, 0.95); transform: scale(1.35); box-shadow: 0 0 14px rgba(58, 180, 233, 0.65); } .voices-dot.active::after { opacity: 0.5; transform: scale(1); animation: dot-ring 2.5s ease-in-out infinite; } @keyframes dot-ring { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.5); opacity: 0; } } .voices-dot:hover:not(.active) { background: rgba(174, 244, 255, 0.7); border-color: rgba(174, 244, 255, 0.95); transform: scale(1.2); } /* Clickable voices stage */ .trusted-voices { cursor: pointer; } .trusted-voices:hover .voices-dot.active { animation-play-state: paused; } /* ── Responsive ── */ @media (max-width: 1024px) { /* Keep logo text same size as desktop */ .trusted-header { margin-bottom: 1.25rem; } .trusted-marquee { margin-bottom: 1.5rem; } .trusted-marquee-row { padding: 0.3rem 0; } .voice-slide { gap: 1.5rem; } .voices-stage { min-height: 200px; } } @media (max-width: 768px) { .voice-text { font-size: 1.1rem; padding-left: 2rem; } [dir="rtl"] .voice-text { padding-right: 2rem; } .voice-author { padding-left: 2rem; } [dir="rtl"] .voice-author { padding-right: 2rem; } .voice-quote-mark { width: 36px; height: 36px; } .voices-stage { min-height: 180px; } .voice-slide { gap: 1rem; } .trusted-marquee-track { animation-duration: 28s; } .voices-dots { padding-left: 2rem; } [dir="rtl"] .voices-dots { padding-right: 2rem; } .trusted-header { margin-bottom: 0.85rem; } .trusted-marquee { margin-bottom: 1rem; } .trusted-marquee-row { padding: 0.25rem 0; } } @media (max-width: 480px) { .trusted-logo { padding: 0.45rem 1.15rem; } .trusted-marquee-track { gap: 0.75rem; animation-duration: 22s; } .voice-text { font-size: 1rem; padding-left: 0; } [dir="rtl"] .voice-text { padding-right: 0; } .voice-author { padding-left: 0; } [dir="rtl"] .voice-author { padding-right: 0; } .voice-quote-mark { display: none; } .voices-stage { min-height: 200px; } .voice-slide { gap: 0.75rem; } .voices-dots { padding-left: 0; } [dir="rtl"] .voices-dots { padding-right: 0; } .voice-company-logo { width: 40px; height: 40px; } } .hero .hero-stat .number { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.025em; background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding-right: 0.05em; /* prevent right-edge clip on last char */ } .hero .hero-stat .label { font-size: 0.7rem; font-family: var(--font-mono); color: rgba(184, 197, 214, 0.72); margin-top: 0.65rem; text-transform: uppercase; letter-spacing: 0.13em; line-height: 1.4; } @media (max-width: 1024px) { .hero .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; } } @media (max-width: 560px) { .hero .hero-stats { grid-template-columns: 1fr; } } [data-theme="light"] .hero .hero-stat { background: rgba(255, 255, 255, 0.82); border-color: rgba(46, 157, 212, 0.3); box-shadow: 0 4px 16px rgba(46, 157, 212, 0.08); } [data-theme="light"] .hero .hero-stat:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(46, 157, 212, 0.55); box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 0 24px rgba(46, 157, 212, 0.18); } /* ─── Marquee ─── */ .marquee-section { overflow: hidden; padding: 2rem 0; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%); } .marquee-track { display: flex; gap: 4rem; animation: marquee 55s linear infinite; width: max-content; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .marquee-item { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; color: var(--accent-4); text-transform: uppercase; letter-spacing: 0.15em; white-space: nowrap; opacity: 0.7; display: flex; align-items: center; gap: 1rem; } .marquee-item .sep { width: 8px; height: 8px; background: var(--accent-5); border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ═══════════════════════════════════════════ TIER FINDER — Inline Quiz ═══════════════════════════════════════════ */ .tq-section { padding: 6rem 0 5rem; position: relative; } /* Ambient glow blob behind the quiz */ .tq-section::before { content: ''; position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: 65%; height: 55%; background: radial-gradient(ellipse, rgba(58,180,233,0.05) 0%, rgba(42,235,235,0.02) 40%, transparent 70%); pointer-events: none; filter: blur(80px); z-index: 0; } .tq-intro { max-width: 560px; margin-top: 1rem; color: var(--text-2); line-height: 1.65; } .tq-shell { margin-top: 3.5rem; position: relative; z-index: 1; } /* ── Progress bar ── */ .tq-progress { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.75rem; } .tq-progress-track { flex: 1; height: 3px; background: rgba(58,180,233,0.1); border-radius: 3px; overflow: hidden; } .tq-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #3ab4e9, #2aebeb); border-radius: 3px; box-shadow: 0 0 10px rgba(58,180,233,0.55); transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1); } .tq-progress-label { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-3); white-space: nowrap; letter-spacing: 0.08em; } /* ── Stage ── */ .tq-stage { position: relative; } /* ── 3-column card grid ── */ .tq-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; min-height: 380px; align-items: stretch; perspective: 1400px; } /* ── Question card ── */ .tq-card { background: linear-gradient(135deg, rgba(10,18,42,0.82) 0%, rgba(5,10,24,0.92) 100%), repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(58,180,233,0.018) 23px, rgba(58,180,233,0.018) 24px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 1.6rem 1.5rem 1.5rem; position: relative; overflow: hidden; cursor: default; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .tq-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(58,180,233,0.45), transparent); opacity: 0; transition: opacity 0.3s; } .tq-card::after { content: ''; position: absolute; top: -60px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(58,180,233,0.07), transparent 70%); pointer-events: none; } .tq-card--answered { border-color: rgba(58,180,233,0.32); box-shadow: 0 0 28px rgba(58,180,233,0.07), inset 0 1px 0 rgba(58,180,233,0.1); } .tq-card--answered::before { opacity: 1; } .tq-card--highlighted { border-color: rgba(58,180,233,0.65) !important; box-shadow: 0 8px 40px rgba(58,180,233,0.18), 0 0 0 1px rgba(58,180,233,0.15), inset 0 1px 0 rgba(58,180,233,0.2) !important; transform: translateY(-6px); } .tq-card--highlighted::before { opacity: 1; } /* Answered checkmark badge (top-right corner) */ .tq-card-answered-badge { position: absolute; top: 1rem; right: 1rem; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #3ab4e9, #2aebeb); display: none; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(58,180,233,0.5); animation: tqBadgeIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; } .tq-card--answered .tq-card-answered-badge { display: flex; } .tq-card-answered-badge svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; } @keyframes tqBadgeIn { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } /* Question number */ .tq-card-num { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; margin-bottom: 0.6rem; } /* Question text */ .tq-card-q { font-size: 0.96rem; font-weight: 600; color: var(--text-1); line-height: 1.46; margin-bottom: 1.2rem; padding-right: 2rem; } /* Options — max 5 visible, scroll for more */ .tq-card-opts { display: flex; flex-direction: column; gap: 0.38rem; max-height: 14.5rem; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(58,180,233,0.35) transparent; } .tq-card-opts::-webkit-scrollbar { width: 4px; } .tq-card-opts::-webkit-scrollbar-track { background: transparent; } .tq-card-opts::-webkit-scrollbar-thumb { background: rgba(58,180,233,0.3); border-radius: 2px; } .tq-card-opts::-webkit-scrollbar-thumb:hover { background: rgba(58,180,233,0.55); } .tq-opt { font-size: 0.79rem; color: var(--text-2); background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 0.48rem 0.8rem; cursor: pointer; text-align: left; transition: background 0.16s, border-color 0.16s, color 0.16s; display: flex; align-items: center; gap: 0.55rem; width: 100%; } .tq-opt:hover { background: rgba(58,180,233,0.08); border-color: rgba(58,180,233,0.28); color: var(--text-1); } .tq-opt--selected { background: linear-gradient(135deg, rgba(58,180,233,0.14), rgba(42,235,235,0.08)); border-color: rgba(58,180,233,0.5); color: #3ab4e9; font-weight: 500; } /* Radio circle */ .tq-opt-check { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(58,180,233,0.3); flex-shrink: 0; transition: all 0.18s; position: relative; background: transparent; } .tq-opt--selected .tq-opt-check { background: linear-gradient(135deg, #3ab4e9, #2aebeb); border-color: transparent; box-shadow: none; } .tq-opt--selected .tq-opt-check::after { content: ''; position: absolute; top: 0.5px; left: 2px; width: 2px; height: 4px; border: 1.5px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); } .tq-opt-text { line-height: 1.35; } /* ── Navigation bar ── */ .tq-nav-bar { display: flex; align-items: center; justify-content: center; gap: 1.75rem; margin-top: 2.25rem; } /* Prev / Next arrows */ .tq-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(58,180,233,0.04); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; flex-shrink: 0; } .tq-arrow:hover:not(:disabled) { background: rgba(58,180,233,0.12); border-color: rgba(58,180,233,0.45); color: var(--accent); transform: scale(1.1); box-shadow: 0 0 20px rgba(58,180,233,0.2); } .tq-arrow:disabled { opacity: 0.2; cursor: not-allowed; } /* ── Progress dots ── */ .tq-dots { display: flex; align-items: center; gap: 0.65rem; } .tq-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(58,180,233,0.25); background: transparent; cursor: pointer; padding: 0; transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1); position: relative; } /* Larger ring for questions in view */ .tq-dot--in-group { width: 11px; height: 11px; border-color: rgba(58,180,233,0.55); background: rgba(58,180,233,0.06); box-shadow: 0 0 0 3px rgba(58,180,233,0.1); } /* Filled when answered */ .tq-dot--answered { background: linear-gradient(135deg, #3ab4e9, #2aebeb); border-color: transparent; box-shadow: 0 0 10px rgba(58,180,233,0.55); width: 12px; height: 12px; } .tq-dot--answered.tq-dot--in-group { width: 14px; height: 14px; box-shadow: 0 0 18px rgba(58,180,233,0.8); } /* Hover / card-triggered highlight */ .tq-dot--highlighted { transform: scale(1.65) !important; box-shadow: 0 0 20px rgba(58,180,233,0.9) !important; z-index: 2; } /* Checkmark inside answered dot */ .tq-dot--answered::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-48%, -55%) rotate(45deg); width: 3px; height: 5px; border: 1.5px solid rgba(255,255,255,0.85); border-top: none; border-left: none; } /* ── Group label ── */ .tq-group-label { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3); letter-spacing: 0.12em; text-align: center; margin-top: 0.9rem; text-transform: uppercase; } /* ══ Card transition animations ══ */ .tq-cards.tq-exit-left .tq-card { animation: tqExitLeft 0.31s cubic-bezier(0.4,0,1,0.6) forwards; } .tq-cards.tq-exit-right .tq-card { animation: tqExitRight 0.31s cubic-bezier(0.4,0,1,0.6) forwards; } .tq-cards.tq-enter-right .tq-card { animation: tqEnterRight 0.46s cubic-bezier(0,0.9,0.2,1) forwards; opacity: 0; } .tq-cards.tq-enter-left .tq-card { animation: tqEnterLeft 0.46s cubic-bezier(0,0.9,0.2,1) forwards; opacity: 0; } /* Stagger: exit faster, enter progressive */ .tq-cards.tq-exit-left .tq-card:nth-child(1), .tq-cards.tq-exit-right .tq-card:nth-child(1) { animation-delay: 0ms; } .tq-cards.tq-exit-left .tq-card:nth-child(2), .tq-cards.tq-exit-right .tq-card:nth-child(2) { animation-delay: 35ms; } .tq-cards.tq-exit-left .tq-card:nth-child(3), .tq-cards.tq-exit-right .tq-card:nth-child(3) { animation-delay: 70ms; } .tq-cards.tq-enter-right .tq-card:nth-child(1), .tq-cards.tq-enter-left .tq-card:nth-child(1) { animation-delay: 0ms; } .tq-cards.tq-enter-right .tq-card:nth-child(2), .tq-cards.tq-enter-left .tq-card:nth-child(2) { animation-delay: 65ms; } .tq-cards.tq-enter-right .tq-card:nth-child(3), .tq-cards.tq-enter-left .tq-card:nth-child(3) { animation-delay: 130ms; } @keyframes tqExitLeft { from { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; filter: blur(0); } to { transform: translateX(-100px) rotateY(20deg) scale(0.78); opacity: 0; filter: blur(7px); } } @keyframes tqExitRight { from { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; filter: blur(0); } to { transform: translateX(100px) rotateY(-20deg) scale(0.78); opacity: 0; filter: blur(7px); } } @keyframes tqEnterRight { from { transform: translateX(100px) rotateY(-20deg) scale(0.78); opacity: 0; filter: blur(7px); } to { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; filter: blur(0); } } @keyframes tqEnterLeft { from { transform: translateX(-100px) rotateY(20deg) scale(0.78); opacity: 0; filter: blur(7px); } to { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; filter: blur(0); } } /* ── Cards scatter on quiz completion ── */ .tq-cards.tq-completing .tq-card:nth-child(1) { animation: tqScatter1 0.52s cubic-bezier(0.55,0,1,0.6) 0ms forwards; } .tq-cards.tq-completing .tq-card:nth-child(2) { animation: tqScatter2 0.52s cubic-bezier(0.55,0,1,0.6) 50ms forwards; } .tq-cards.tq-completing .tq-card:nth-child(3) { animation: tqScatter3 0.52s cubic-bezier(0.55,0,1,0.6) 100ms forwards; } @keyframes tqScatter1 { 0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 1; filter: blur(0); } 100% { transform: translateX(-90px) translateY(-55px) rotate(-11deg) scale(0.6); opacity: 0; filter: blur(10px); } } @keyframes tqScatter2 { 0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 1; filter: blur(0); } 100% { transform: translateX(0) translateY(-75px) rotate(4deg) scale(0.55); opacity: 0; filter: blur(10px); } } @keyframes tqScatter3 { 0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 1; filter: blur(0); } 100% { transform: translateX(90px) translateY(-55px) rotate(11deg) scale(0.6); opacity: 0; filter: blur(10px); } } /* ── Shockwave ring on quiz completion ── */ .tq-quiz-flash { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.1); width: 180px; height: 180px; border-radius: 50%; border: 1.5px solid var(--tq-flash-color, #3ab4e9); box-shadow: 0 0 28px var(--tq-flash-color, #3ab4e9), inset 0 0 20px rgba(58,180,233,0.1); pointer-events: none; z-index: 50; animation: tqFlashRing 0.95s ease-out forwards; } @keyframes tqFlashRing { 0% { transform: translate(-50%,-50%) scale(0.1); opacity: 1; } 35% { opacity: 0.9; } 100% { transform: translate(-50%,-50%) scale(6); opacity: 0; } } /* ── Result ── */ .tq-result { display: none; perspective: 1200px; } .tq-result--visible { display: block; animation: tqResultReveal 0.8s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes tqResultReveal { 0% { opacity: 0; transform: translateY(52px) scale(0.68); filter: blur(10px); } 55% { filter: blur(0); } 80% { transform: translateY(-5px) scale(1.018); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* Staggered child entry inside result card */ .tq-result--visible .tq-result-label, .tq-result--visible .tq-result-name, .tq-result--visible .tq-result-desc, .tq-result--visible .tq-score-grid, .tq-result--visible .tq-result-alt, .tq-result--visible .tq-result-actions { animation: tqFadeRiseIn 0.48s ease both; } .tq-result--visible .tq-result-label { animation-delay: 0.32s; } .tq-result--visible .tq-result-name { animation-delay: 0.44s; } .tq-result--visible .tq-result-desc { animation-delay: 0.60s; } .tq-result--visible .tq-score-grid { animation-delay: 0.70s; } .tq-result--visible .tq-result-alt { animation-delay: 0.84s; } .tq-result--visible .tq-result-actions { animation-delay: 0.93s; } @keyframes tqFadeRiseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .tq-result-card { background: linear-gradient(160deg, rgba(10,18,48,0.92) 0%, rgba(3,7,20,0.97) 100%); border: 1px solid rgba(58,180,233,0.18); border-radius: 22px; padding: 2.25rem 2rem 2rem; text-align: center; max-width: 700px; margin: 0 auto; position: relative; overflow: hidden; } /* Inner grid texture on result card */ .tq-result-card::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 35px, rgba(58,180,233,0.02) 35px, rgba(58,180,233,0.02) 36px), repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(58,180,233,0.02) 35px, rgba(58,180,233,0.02) 36px); pointer-events: none; border-radius: inherit; } .tq-result-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 500px; height: 350px; border-radius: 50%; filter: blur(80px); opacity: 0.18; pointer-events: none; } /* ── Result header: text left, badge right ── */ .tq-result-header { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.25rem; position: relative; z-index: 1; } .tq-result-header-text { flex: 1; min-width: 0; text-align: left; } /* ── Orbital badge ── */ .tq-result-badge { flex-shrink: 0; position: relative; width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; animation: tqBadgePop 0.75s cubic-bezier(0.34,1.56,0.64,1) 0.1s both; } /* Outer dashed orbit ring */ .tq-badge-orbit { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,0.1); animation: tqOrbitSpin 12s linear infinite; } /* Orbit travelling dot */ .tq-badge-orbit::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--tq-badge-color, #3ab4e9); box-shadow: 0 0 16px var(--tq-badge-color, #3ab4e9), 0 0 36px var(--tq-badge-color, #3ab4e9); } /* Second counter-orbit (opposite speed) */ .tq-badge-orbit::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); box-shadow: 0 0 8px rgba(255,255,255,0.3); } /* Pulsing middle ring */ .tq-badge-ring { position: absolute; inset: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.07); animation: tqBadgePulse 3s ease-in-out infinite; } /* Core filled circle */ .tq-badge-core { position: absolute; inset: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 10px rgba(0,0,0,0.4); } /* T7 — T and number same size, monospace, bold */ .tq-badge-code { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,0.4); } @keyframes tqOrbitSpin { to { transform: rotate(360deg); } } @keyframes tqBadgePulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.04); } } @keyframes tqBadgePop { from { transform: scale(0.12) rotate(-35deg); opacity: 0; } 55% { transform: scale(1.1) rotate(5deg); opacity: 1; } to { transform: scale(1) rotate(0deg); opacity: 1; } } .tq-result-label { font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; opacity: 0.8; position: relative; z-index: 1; text-align: left; } /* Override staggered generic anim with a bespoke left-wipe + spacing settle */ .tq-result--visible .tq-result-label { animation: tqLabelReveal 0.75s cubic-bezier(0.22,1,0.36,1) 0.32s both !important; } @keyframes tqLabelReveal { 0% { opacity: 0; letter-spacing: 0.55em; clip-path: inset(0 100% 0 0); } 55% { clip-path: inset(0 0% 0 0); opacity: 1; } 100% { opacity: 0.8; letter-spacing: 0.22em; clip-path: inset(0 0% 0 0); } } .tq-result-name { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.1; margin-bottom: 0.6rem; position: relative; z-index: 1; text-align: left; } /* Chips row */ .tq-result-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-bottom: 1.1rem; position: relative; z-index: 1; } .tq-chip { font-size: 0.68rem; font-family: var(--font-mono); padding: 0.22rem 0.65rem; border-radius: 6px; background: color-mix(in srgb, var(--tq-chip-color, #3ab4e9) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tq-chip-color, #3ab4e9) 28%, transparent); color: color-mix(in srgb, var(--tq-chip-color, #3ab4e9) 70%, var(--text-2)); letter-spacing: 0.02em; animation: tqChipIn 0.4s ease both; display: flex; gap: 0.3em; } .tq-chip-label { opacity: 0.55; text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.07em; } .tq-chip:nth-child(1) { animation-delay: 0.5s; } .tq-chip:nth-child(2) { animation-delay: 0.6s; } .tq-chip:nth-child(3) { animation-delay: 0.7s; } .tq-chip:nth-child(4) { animation-delay: 0.8s; } .tq-chip:nth-child(5) { animation-delay: 0.9s; } @keyframes tqChipIn { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .tq-result-desc { font-size: 0.87rem; color: var(--text-2); line-height: 1.6; max-width: 520px; margin: 0 auto 1.1rem; position: relative; z-index: 1; } /* Score bars */ .tq-score-grid { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.1rem; width: 100%; position: relative; z-index: 1; } .tq-score-row { display: grid; grid-template-columns: 1rem auto 1fr auto; align-items: center; gap: 0 0.65rem; min-width: 0; } .tq-score-star { font-size: 0.65rem; text-align: center; line-height: 1; color: var(--tq-star-color, #3ab4e9); white-space: nowrap; } .tq-score-name { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; color: var(--text-3); text-align: left; white-space: nowrap; } .tq-score-track { height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; min-width: 0; } .tq-score-fill { height: 100%; border-radius: 3px; animation: tqScoreGrow 1s cubic-bezier(0.4,0,0.2,1) both; } @keyframes tqScoreGrow { from { width: 0%; } } .tq-score-pct { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-3); text-align: right; white-space: nowrap; } .tq-result-alt { font-size: 0.8rem; color: var(--text-3); margin-bottom: 1.25rem; position: relative; z-index: 1; } .tq-result-alt a { font-weight: 700; text-decoration: none; color: var(--tq-alt-color, var(--accent)); border-bottom: 1px dashed color-mix(in srgb, var(--tq-alt-color, var(--accent)) 50%, transparent); transition: border-color 0.2s, opacity 0.2s; } .tq-result-alt a:hover { opacity: 0.8; border-bottom-style: solid; } .tq-result-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } /* Light theme */ [data-theme="light"] .tq-card { background: rgba(255,255,255,0.82); border-color: rgba(0,0,0,0.09); background-image: none; } [data-theme="light"] .tq-card--highlighted { box-shadow: 0 8px 40px rgba(58,180,233,0.15), 0 0 0 1px rgba(58,180,233,0.22) !important; } [data-theme="light"] .tq-opt { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.08); color: var(--text-2); } [data-theme="light"] .tq-opt:hover { background: rgba(58,180,233,0.07); border-color: rgba(58,180,233,0.3); color: var(--text-1); } [data-theme="light"] .tq-result-card { background: rgba(255,255,255,0.94); border-color: rgba(58,180,233,0.2); } [data-theme="light"] .tq-result-card::after { opacity: 0.4; } [data-theme="light"] .tq-chip { color: color-mix(in srgb, var(--tq-chip-color, #3ab4e9) 80%, var(--text-2)); } [data-theme="light"] .tq-score-track { background: rgba(0,0,0,0.07); } /* Responsive */ @media (max-width: 1024px) { .tq-cards { grid-template-columns: 1fr !important; justify-content: center; min-height: auto; } } @media (max-width: 900px) { .tq-cards .tq-card:nth-child(3) { grid-column: auto; } } @media (max-width: 580px) { .tq-result-card { padding: 2.5rem 1.25rem; } .tq-nav-bar { gap: 1rem; } } /* ───────────────────────────────────────────────────────────── Tiers Overview header — title + "Not Sure?" quiz CTA ───────────────────────────────────────────────────────────── */ .tiers-overview-head { margin-bottom: 2.25rem; } .tiers-overview-head-text { min-width: 0; } .tiers-overview-head-text h2 { margin: 0; } .tiers-overview-head-text p { margin-bottom: 0; } .tiers-overview-title-row { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; } .tiers-quiz-cta { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.4rem; border-radius: 20px; /* Match the tier-card background/border below so the CTA reads as part of the same surface family rather than a separate accent button. */ background: var(--bg-card); border: 1px solid var(--glass-border); color: var(--text); text-decoration: none; font-family: inherit; cursor: pointer; overflow: hidden; transition: transform 0.3s var(--ease-out-expo), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .tiers-quiz-cta::before { /* Same gradient top-edge as .tier-card::before */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-med); } .tiers-quiz-cta:hover::before { transform: scaleX(1); } .tiers-quiz-cta:hover { transform: translateY(-3px); border-color: var(--glass-border-hover); background: var(--bg-card); box-shadow: 0 14px 38px rgba(58,180,233,0.18); } .tiers-quiz-cta-spark { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 55%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .tiers-quiz-cta:hover .tiers-quiz-cta-spark { opacity: 1; } .tiers-quiz-cta-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: start; } .tiers-quiz-cta-label strong { font-size: 0.95rem; font-weight: 700; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.01em; } .tiers-quiz-cta-label span { font-size: 0.75rem; color: var(--text-2); margin-top: 0.15rem; font-family: var(--font-mono); letter-spacing: 0.04em; } .tiers-quiz-cta svg { color: var(--accent-4); flex-shrink: 0; animation: tqcaArrow 2.4s ease-in-out infinite; } @keyframes tqcaArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @media (max-width: 720px) { .tiers-overview-title-row { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .tiers-quiz-cta { width: 100%; justify-content: center; } .tiers-quiz-cta-label { align-items: center; text-align: center; } } /* ───────────────────────────────────────────────────────────── Tier card — make the entire card feel like a clickable preview that opens a modal (no nav). Cursor stays a pointer; we strip the underline-styled "Learn More" link's link semantics. ───────────────────────────────────────────────────────────── */ .tier-card { cursor: pointer; } .tier-card .card-link { pointer-events: none; /* the whole card handles click now */ } /* ───────────────────────────────────────────────────────────── Tier Detail Modal — fullscreen overlay ───────────────────────────────────────────────────────────── */ .tier-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: stretch; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; /* Close: snap away instantly — no washed-out ghost during close */ transition: opacity 0s linear, visibility 0s linear; } .tier-modal.open { opacity: 1; visibility: visible; pointer-events: auto; /* Open: nice fade-in */ transition: opacity 0.3s ease, visibility 0s linear; } .tier-modal-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(2,6,13,0.85) 0%, rgba(0,0,0,0.96) 70%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .tier-modal-shell { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, rgba(10,18,40,0.95) 0%, rgba(2,6,13,0.98) 100%); transform: scale(0.96); transition: transform 0.45s var(--ease-out-expo); } .tier-modal.open .tier-modal-shell { transform: scale(1); } .tier-modal-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 5; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .tier-modal-close:hover { background: rgba(42, 235, 235, 0.18); border-color: rgba(58, 180, 233, 0.6); color: #2aebeb; transform: rotate(90deg) scale(1.05); } .tier-modal-body { flex: 1; overflow-y: auto; padding: 4rem clamp(1.25rem, 5vw, 5rem) 3rem; } /* Modal content layout */ .tm-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: center; padding: 1rem 0 2rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 2.25rem; } .tm-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-5); margin-bottom: 0.85rem; } .tm-number { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3); letter-spacing: 0.12em; } .tm-title { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 0.85rem; line-height: 1.05; color: #fff; letter-spacing: -0.02em; } .tm-tagline { font-size: 1.1rem; color: var(--text-2); margin: 0 0 1.4rem; max-width: 620px; } .tm-meta { display: flex; gap: 1rem 2rem; flex-wrap: wrap; align-items: center; } .tm-meta-item { display: flex; flex-direction: column; } .tm-meta-item span:first-child { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-family: var(--font-mono); } .tm-meta-item span:last-child { font-size: 1rem; color: var(--text); font-weight: 600; } .tm-cost-row { display: inline-flex; align-items: center; gap: 0.35rem; } .tm-cost-row .cost-bar { width: 10px; height: 16px; border-radius: 3px; background: rgba(255,255,255,0.08); } .tm-cost-row .cost-bar.active { background: var(--brand-gradient); } .tm-hero-icon { width: 140px; height: 140px; border-radius: 28px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(58,180,233,0.14), rgba(42,235,235,0.08)); border: 1px solid rgba(58,180,233,0.3); color: var(--accent-4); flex-shrink: 0; } .tm-hero-icon svg { width: 64px; height: 64px; } .tm-section { margin-bottom: 2.5rem; } .tm-section-title { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-5); font-family: var(--font-mono); margin: 0 0 1rem; } .tm-description { font-size: 1.05rem; line-height: 1.75; color: var(--text-2); max-width: 820px; margin: 0; } .tm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .tm-pros, .tm-cons { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 1.5rem 1.6rem; } .tm-pros { border-left: 3px solid #10b981; } .tm-cons { border-left: 3px solid #f59e0b; } .tm-list { list-style: none; padding: 0; margin: 0; } .tm-list li { position: relative; padding: 0.45rem 0 0.45rem 1.6rem; color: var(--text-2); font-size: 0.94rem; line-height: 1.6; } .tm-pros li::before { content: "✓"; position: absolute; left: 0; top: 0.45rem; color: #10b981; font-weight: 700; } .tm-cons li::before { content: "!"; position: absolute; left: 0; top: 0.45rem; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(245,158,11,0.18); color: #f59e0b; font-weight: 700; font-size: 0.78rem; } .tm-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; } .tm-spec { padding: 0.85rem 1rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; } .tm-spec strong { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); font-family: var(--font-mono); margin-bottom: 0.3rem; font-weight: 600; } .tm-spec span { color: var(--text); font-size: 0.95rem; font-weight: 600; } .tm-hardware-table { width: 100%; border-collapse: collapse; } .tm-hardware-table th, .tm-hardware-table td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.92rem; color: var(--text-2); } .tm-hardware-table th { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); font-family: var(--font-mono); font-weight: 600; } .tm-hardware-table td:last-child { text-align: right; color: var(--text-3); } .tm-tag-optional { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 100px; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(245,158,11,0.12); color: #f59e0b; margin-left: 0.5rem; } .tm-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); } @media (max-width: 820px) { .tm-hero { grid-template-columns: 1fr; gap: 1.5rem; } .tm-hero-icon { width: 100px; height: 100px; border-radius: 22px; } .tm-hero-icon svg { width: 48px; height: 48px; } .tm-grid { grid-template-columns: 1fr; } .tier-modal-body { padding: 3.5rem 1rem 2rem; } } /* Lock body scroll while modal is open */ body.tier-modal-open { overflow: hidden; } /* ═══════════════════════════════════════════════════════════════ PACKAGE CARDS & MODAL — premium presentation for #web-packages All accents use the Enkaura brand cyan (--accent-3 = #3ab4e9). ═══════════════════════════════════════════════════════════════ */ /* Card — accent glow on hover */ .pkg-card { --pkg-accent: var(--accent-3); position: relative; } .pkg-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--pkg-accent) 22%, transparent), transparent 60%); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; z-index: 0; } .pkg-card:hover::before { opacity: 1; } .pkg-card > * { position: relative; z-index: 1; } .pkg-card .tier-card-icon { background: color-mix(in srgb, var(--pkg-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pkg-accent) 40%, transparent); color: var(--pkg-accent); } .pkg-card .tier-card-number { color: color-mix(in srgb, var(--pkg-accent) 75%, white); } .pkg-card:hover { border-color: color-mix(in srgb, var(--pkg-accent) 55%, transparent); } /* ── Package Modal ── */ .pkg-modal { --pkg-accent: var(--accent-3); position: relative; isolation: isolate; } /* Animated background */ .pkg-modal-bg { position: absolute; inset: -2rem -2rem auto -2rem; height: 420px; pointer-events: none; z-index: -1; overflow: hidden; border-radius: 24px; } .pkg-modal-bg-orb { position: absolute; top: -180px; right: -120px; width: 520px; height: 520px; background: radial-gradient(circle, color-mix(in srgb, var(--pkg-accent) 38%, transparent) 0%, transparent 65%); filter: blur(40px); animation: pkg-orb-float 12s ease-in-out infinite alternate; } .pkg-modal-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--pkg-accent) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pkg-accent) 10%, transparent) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%); opacity: 0.55; } @keyframes pkg-orb-float { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-40px, 30px) scale(1.1); } } /* Hero */ .pkg-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: center; padding: 1rem 0 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid color-mix(in srgb, var(--pkg-accent) 14%, rgba(255,255,255,0.06)); } .pkg-hero-tag { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.9rem; border-radius: 100px; background: color-mix(in srgb, var(--pkg-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pkg-accent) 35%, transparent); color: color-mix(in srgb, var(--pkg-accent) 85%, white); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.2rem; } .pkg-hero-num { font-weight: 700; color: var(--pkg-accent); } .pkg-hero-dot { opacity: 0.5; } .pkg-hero-title { font-size: clamp(2.1rem, 5vw, 3.5rem); margin: 0 0 0.6rem; line-height: 1.05; color: #fff; letter-spacing: -0.02em; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.85rem; } .pkg-hero-subtitle { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pkg-accent); padding: 0.3rem 0.7rem; border-radius: 6px; background: color-mix(in srgb, var(--pkg-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pkg-accent) 30%, transparent); } .pkg-hero-tagline { font-size: 1.1rem; color: var(--text-2); margin: 0 0 1.6rem; max-width: 620px; line-height: 1.55; } .pkg-hero-meta { display: flex; flex-wrap: wrap; gap: 0.7rem; } .pkg-meta-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1rem; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--text); font-size: 0.92rem; font-weight: 500; } .pkg-meta-pill svg { width: 16px; height: 16px; color: var(--pkg-accent); flex-shrink: 0; } /* Hero icon */ .pkg-hero-icon { position: relative; width: 160px; height: 160px; border-radius: 32px; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--pkg-accent) 22%, transparent), color-mix(in srgb, var(--pkg-accent) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--pkg-accent) 40%, transparent); color: var(--pkg-accent); flex-shrink: 0; overflow: hidden; } .pkg-hero-icon-glow { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--pkg-accent) 50%, transparent), transparent 65%); animation: pkg-icon-glow 4s ease-in-out infinite alternate; } .pkg-hero-icon svg { width: 80px; height: 80px; position: relative; z-index: 1; filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--pkg-accent) 50%, transparent)); } @keyframes pkg-icon-glow { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.15); } } /* Best For callout */ .pkg-best-for { position: relative; padding: 1.4rem 1.6rem; margin-bottom: 2.5rem; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--pkg-accent) 8%, rgba(255,255,255,0.02)), color-mix(in srgb, var(--pkg-accent) 3%, rgba(255,255,255,0.01))); border: 1px solid color-mix(in srgb, var(--pkg-accent) 25%, rgba(255,255,255,0.05)); border-left: 4px solid var(--pkg-accent); } .pkg-best-for-label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pkg-accent); font-weight: 700; margin-bottom: 0.5rem; } .pkg-best-for-label svg { width: 14px; height: 14px; } .pkg-best-for-text { margin: 0; font-size: 1.05rem; color: var(--text); line-height: 1.55; font-weight: 500; } /* Section header */ .pkg-section { margin-bottom: 2.5rem; } .pkg-section-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; } .pkg-section-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pkg-accent) 40%, transparent), transparent); } .pkg-section-title { margin: 0; font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pkg-accent); font-family: var(--font-mono); font-weight: 700; white-space: nowrap; } /* Feature grid (What You Get) */ .pkg-feature-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.85rem; } .pkg-feature { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.1rem; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .pkg-feature:hover { background: color-mix(in srgb, var(--pkg-accent) 6%, rgba(255,255,255,0.04)); border-color: color-mix(in srgb, var(--pkg-accent) 35%, rgba(255,255,255,0.1)); transform: translateY(-2px); } .pkg-feature-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pkg-accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--pkg-accent) 50%, transparent); color: var(--pkg-accent); margin-top: 0.05rem; } .pkg-feature-check svg { width: 14px; height: 14px; } .pkg-feature-text { flex: 1; color: var(--text); font-size: 0.95rem; line-height: 1.5; } /* Why Choose This — featured callout */ .pkg-why { position: relative; padding: 2rem 2rem 2rem 4.5rem; margin-bottom: 2.5rem; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--pkg-accent) 12%, rgba(255,255,255,0.02)), color-mix(in srgb, var(--pkg-accent) 4%, rgba(255,255,255,0.01))); border: 1px solid color-mix(in srgb, var(--pkg-accent) 30%, rgba(255,255,255,0.06)); overflow: hidden; } .pkg-why::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--pkg-accent) 18%, transparent), transparent 60%); pointer-events: none; } .pkg-why-quote { position: absolute; top: 0.4rem; left: 1.4rem; font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: var(--pkg-accent); opacity: 0.45; pointer-events: none; font-weight: 700; } .pkg-why-body { position: relative; } .pkg-why-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pkg-accent); font-weight: 700; margin-bottom: 0.6rem; } .pkg-why-text { margin: 0; font-size: 1.15rem; color: #fff; line-height: 1.6; font-weight: 500; } /* CTA row */ .pkg-cta { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); } /* Mobile */ @media (max-width: 820px) { .pkg-hero { grid-template-columns: 1fr; gap: 1.5rem; } .pkg-hero-icon { width: 110px; height: 110px; border-radius: 24px; } .pkg-hero-icon svg { width: 56px; height: 56px; } .pkg-hero-title { font-size: clamp(1.75rem, 7vw, 2.25rem); } .pkg-hero-subtitle { font-size: 0.7rem; padding: 0.25rem 0.55rem; } .pkg-feature-grid { grid-template-columns: 1fr; } .pkg-why { padding: 1.5rem 1.4rem 1.5rem 1.4rem; } .pkg-why-quote { display: none; } .pkg-modal-bg { inset: -1rem -1rem auto -1rem; height: 280px; } } /* ── Tighter mobile polish for the package modal (≤768px) ── Fixes "text hidden / messy layout" on phones: keeps everything left-aligned, prevents the title row from wrapping awkwardly, shrinks oversized paddings, and ensures every block is readable. */ /* Block html-level scroll (iOS) whenever the modal is open. Uses :has() which is supported on all modern mobile browsers. */ html:has(body.tier-modal-open) { overflow: hidden; } @media (max-width: 768px) { /* Override rtl-mobile.css which sets width:94%/max-height:90vh on .tier-modal */ .tier-modal { width: 100% !important; max-height: none !important; height: 100% !important; padding: 0 !important; overflow: visible !important; inset: 0 !important; position: fixed !important; } /* Shell: true full-screen, single scroll inside, no scale animation */ .tier-modal-shell { position: relative; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; overflow: hidden; transform: none !important; } /* Only the body scrolls */ .tier-modal-body { padding: 3.25rem 0.9rem 1.75rem; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; height: 100%; } /* Lock body scroll */ body.tier-modal-open { overflow: hidden; overscroll-behavior: none; } /* Close button */ .tier-modal-close { top: 0.65rem; right: 0.65rem; width: 38px; height: 38px; } .pkg-modal { isolation: isolate; } .pkg-modal-bg { inset: -0.5rem -0.5rem auto -0.5rem; height: 220px; border-radius: 18px; } .pkg-modal-bg-orb { width: 360px; height: 360px; top: -140px; right: -90px; } .pkg-hero { padding: 0.5rem 0 1.5rem; margin-bottom: 1.5rem; gap: 1.25rem; text-align: left; justify-items: start; } .pkg-hero-icon { width: 84px; height: 84px; border-radius: 20px; } .pkg-hero-icon svg { width: 42px; height: 42px; } .pkg-hero-tag { margin-bottom: 0.85rem; font-size: 0.65rem; padding: 0.3rem 0.7rem; } .pkg-hero-title { font-size: clamp(1.55rem, 6.5vw, 2rem); flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.5rem; word-break: break-word; } .pkg-hero-subtitle { font-size: 0.62rem; padding: 0.22rem 0.55rem; letter-spacing: 0.15em; align-self: flex-start; } .pkg-hero-tagline { font-size: 0.95rem; line-height: 1.5; } .pkg-hero-meta { gap: 0.55rem; flex-wrap: wrap; margin-top: 1rem; } .pkg-meta-pill { padding: 0.45rem 0.8rem; font-size: 0.78rem; } .pkg-best-for { padding: 1.1rem 1.15rem; margin-bottom: 1.75rem; border-radius: 14px; } .pkg-best-for-text { font-size: 0.95rem; } .pkg-section { margin-bottom: 1.75rem; } .pkg-section-head { gap: 0.7rem; margin-bottom: 1.1rem; } .pkg-section-title { font-size: 0.72rem; letter-spacing: 0.18em; } .pkg-feature { padding: 0.8rem 0.9rem; gap: 0.7rem; } .pkg-feature-text { font-size: 0.9rem; } /* Never allow mobile package modal content to stay faded out */ .pkg-feature, .pkg-hero-text > *, .pkg-hero-icon, .pkg-best-for, .pkg-why { opacity: 1 !important; transform: none !important; } .pkg-why { padding: 1.25rem 1.15rem; margin-bottom: 1.75rem; border-radius: 16px; } .pkg-why-text { font-size: 1rem; line-height: 1.55; } .pkg-cta { padding-top: 1.25rem; } .pkg-cta .btn { width: 100%; justify-content: center; } } /* ───────────────────────────────────────────────────────────── Methodology timeline — detail panel renders as a SEPARATE card directly beneath the clicked card, INSIDE its column wrapper. Only that column reflows (cards beneath move down); sibling columns stay anchored in place. ───────────────────────────────────────────────────────────── */ #implementation .timeline-detail { background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 0; overflow: hidden; } #implementation .timeline-item.expanded { background: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent-3) 4%, var(--bg-card)) 100%); border-color: var(--accent-3); box-shadow: 0 8px 32px rgba(58, 180, 233, 0.12); } #implementation .timeline-detail-inner { background: var(--bg-card); border: 1px solid var(--accent-3); border-radius: 16px; box-shadow: 0 8px 32px rgba(58, 180, 233, 0.12); padding: 1rem 1.25rem 1.25rem; } @media (max-width: 900px) { #implementation .timeline-detail-inner { padding: 0.65rem 0.85rem 0.85rem; } } @media (max-width: 560px) { #implementation .timeline-detail-inner { padding: 0.5rem 0.65rem 0.7rem; } } /* ════════════════════════════════════════════════════════════════ FINAL HOMEPAGE DOT SIZE OVERRIDES Keep navigation circles small in both "What Leaders Say" and quiz. ════════════════════════════════════════════════════════════════ */ /* ── Quiz arrow buttons: shrink from 46px → 32px ── */ body[data-page="home"] .tq-arrow { width: 32px !important; height: 32px !important; } body[data-page="home"] .tq-arrow svg { width: 15px !important; height: 15px !important; } /* ── Voices nav buttons: shrink from 54px → 36px ── */ body[data-page="home"] .voices-nav { width: 36px !important; height: 36px !important; } body[data-page="home"] .voices-nav svg { width: 16px !important; height: 16px !important; } body[data-page="home"] .voices-dots { gap: 0.45rem !important; padding-left: 0 !important; padding-right: 0 !important; } body[data-page="home"] .voices-dot { width: 15px !important; height: 15px !important; min-width: 0 !important; min-height: 0 !important; border-width: 1px !important; box-shadow: none !important; } body[data-page="home"] .voices-dot.active { width: 15px !important; height: 15px !important; transform: scale(1.2) !important; box-shadow: none !important; } body[data-page="home"] .voices-dot::after, body[data-page="home"] .voices-dot.active::after { display: none !important; } body[data-page="home"] .tq-dots { gap: 0.35rem !important; } body[data-page="home"] .tq-dot { width: 15px !important; height: 15px !important; min-width: 0 !important; min-height: 0 !important; border-width: 1px !important; box-shadow: none !important; } body[data-page="home"] .tq-dot--in-group { width: 15px !important; height: 15px !important; box-shadow: none !important; } body[data-page="home"] .tq-dot--answered { width: 15px !important; height: 15px !important; box-shadow: none !important; } body[data-page="home"] .tq-dot--answered.tq-dot--in-group { width: 15px !important; height: 15px !important; box-shadow: none !important; } body[data-page="home"] .tq-dot--highlighted { transform: scale(1.25) !important; box-shadow: none !important; } body[data-page="home"] .tq-dot--answered::after { display: none !important; }