/* === ULTRA-PREMIUM REFINED AESTHETIC === */ :root { /* Deep, almost void-like backgrounds to make colors pop */ --bg-dark: #030409; --bg-darker: #010205; /* Enhanced brand colors - richer, more luminous */ --accent-blue: #00d4ff; --accent-purple: #a63cff; --accent-glow: rgba(0, 212, 255, 0.15); /* Glassmorphism panels */ --bg-panel: rgba(12, 16, 30, 0.4); --bg-panel-hover: rgba(20, 26, 45, 0.6); --border-color: rgba(255, 255, 255, 0.06); --border-highlight: rgba(255, 255, 255, 0.15); /* Typography */ --text-main: #ffffff; --text-muted: #8b9bb4; --font-heading: 'Bricolage Grotesque', sans-serif; --font-body: 'DM Sans', sans-serif; /* Easing */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* The ambient glow orbs (.glow-orb, .hero-bg-glow, .cta-banner-glow) are absolutely positioned to bleed toward the edges. body{overflow-x:hidden} alone did not contain them — the element is the scroll container, so at the 834px (iPad-portrait) width a glow's right edge pushed the document to 979px and every full-width element (nav included) inherited the overflow. Clip at the root. `clip` (not `hidden`) doesn't create a scroll container, so it can't break a future position:sticky; the fixed navbar is unaffected. */ html { overflow-x: clip; } body { font-family: var(--font-body); background-color: var(--bg-dark); color: var(--text-main); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; background-image: radial-gradient(ellipse at 15% 10%, rgba(166, 60, 255, 0.06), transparent 40%), radial-gradient(ellipse at 85% 20%, rgba(0, 212, 255, 0.05), transparent 35%), radial-gradient(ellipse at 50% 60%, rgba(166, 60, 255, 0.03), transparent 40%), radial-gradient(ellipse at 20% 90%, rgba(0, 212, 255, 0.03), transparent 30%); } /* === NAVBAR === */ .navbar { position: fixed; top: 0; width: 100%; background: linear-gradient(to bottom, rgba(3, 4, 9, 0.95) 0%, rgba(3, 4, 9, 0) 100%); z-index: 100; } .nav-container { max-width: 1400px; margin: 0 auto; padding: 0 3rem; height: 80px; display: flex; align-items: center; justify-content: space-between; } .nav-left, .nav-center, .nav-right { display: flex; align-items: center; } .nav-left { flex: 1; gap: 1rem; } .nav-center { flex: 2; justify-content: center; } .nav-right { flex: 1; justify-content: flex-end; gap: 2rem; } .nav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .nav-logo { height: 32px; filter: drop-shadow(0 0 10px var(--accent-glow)); } .nav-brand-text { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: #ffffff; letter-spacing: -0.5px; } .nav-links { display: flex; align-items: center; gap: 1.5rem; } .nav-item { position: relative; display: flex; align-items: center; height: 80px; } .nav-link { color: #ffffff; text-decoration: none; font-weight: 500; font-size: 16px; letter-spacing: 0.3px; text-transform: none; transition: background-color 0.2s ease, opacity 0.2s ease; display: flex; align-items: center; gap: 0.5rem; padding: 8px 16px; border-radius: 999px; } .nav-link:hover, .nav-item:hover .nav-link { background-color: rgba(255, 255, 255, 0.08); color: #ffffff; opacity: 1; } .dropdown-menu { position: absolute; top: calc(100% - 16px); left: 0; transform: translateY(8px) scale(0.98); transform-origin: top left; background: rgba(12, 16, 30, 0.95); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--border-color); border-top: 1px solid var(--border-highlight); border-radius: 12px; padding: 0; min-width: 300px; opacity: 0; visibility: hidden; transition: all 0.3s var(--ease-out-expo); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px inset rgba(255, 255, 255, 0.05); z-index: 200; overflow: hidden; display: flex; flex-direction: column; } .nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .dropdown-hero-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; background: rgba(255, 255, 255, 0.04); text-decoration: none; transition: background 0.2s ease; } .dropdown-hero-item:hover { background: rgba(255, 255, 255, 0.08); } .dropdown-divider { height: 1px; background: var(--border-color); margin: 0.5rem 0; } .dropdown-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; padding: 0.75rem 1.5rem 0.25rem; } .dropdown-item { display: flex; align-items: center; gap: 1rem; padding: 0.65rem 1.5rem; text-decoration: none; transition: background 0.2s ease; position: relative; } .dropdown-item:hover { background: rgba(255, 255, 255, 0.05); } .dropdown-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .dropdown-icon svg { color: var(--accent-blue); display: block; transition: filter 0.3s ease; } .dropdown-hero-item .dropdown-icon { width: 32px; height: 32px; } .dropdown-hero-item .dropdown-icon svg { filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4)); } .dropdown-title { color: var(--text-main); font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; flex: 1; } .dropdown-desc { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.15rem; display: block; } .dropdown-chevron { color: var(--text-muted); opacity: 0.6; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 100px; font-family: var(--font-heading); font-weight: 600; text-decoration: none; transition: all 0.4s var(--ease-out-expo); position: relative; overflow: hidden; white-space: nowrap; z-index: 1; } .btn-sm { padding: 0.5rem 1.25rem; font-size: 16px; } .btn-primary { background: transparent; color: var(--text-main); border: 1px solid rgba(255, 255, 255, 0.1); } .btn-primary::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); z-index: -1; opacity: 0.8; transition: opacity 0.4s ease; } .btn-primary:hover::before { opacity: 1; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(166, 60, 255, 0.3); border-color: rgba(255, 255, 255, 0.3); } .icon-btn { background: transparent; border: none; color: var(--text-main); cursor: pointer; padding: 0.5rem; border-radius: 50%; transition: background 0.3s ease; } .icon-btn:hover { background: rgba(255, 255, 255, 0.05); } /* === HERO SECTION === */ .background-elements { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; } .glow-orb { position: absolute; border-radius: 50%; opacity: 0.15; animation: float 15s infinite alternate ease-in-out; will-change: transform; contain: layout style; } .orb-1 { top: -15%; left: -5%; width: 50vw; height: 50vw; background: radial-gradient(circle, var(--accent-blue) 0%, rgba(0, 212, 255, 0) 70%); } .orb-2 { bottom: -20%; right: -10%; width: 45vw; height: 45vw; background: radial-gradient(circle, var(--accent-purple) 0%, rgba(166, 60, 255, 0) 70%); animation-delay: -7s; } @keyframes float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 50px) scale(1.1); } } .container { max-width: 1000px; margin: 0 auto; padding: 6.5rem 2rem 3rem; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10; } .hero-section { width: 100%; max-width: 100%; margin: 0 auto; padding: 6rem 2rem 5rem; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10; overflow: hidden; height: 100vh; min-height: 600px; } .hero-section::before { content: ""; position: absolute; top: -10vw; left: -10vw; right: -10vw; bottom: -10vw; background-image: radial-gradient(circle at center, transparent 30%, var(--bg-dark) 90%), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.05%29%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2280%22%20cy%3D%220%22%20r%3D%221.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.05%29%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%220%22%20r%3D%221.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.05%29%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%220%22%20cy%3D%2280%22%20r%3D%221.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.05%29%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%221.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.05%29%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2280%22%20r%3D%221.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.05%29%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%220%22%20cy%3D%22160%22%20r%3D%221.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.05%29%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2280%22%20cy%3D%22160%22%20r%3D%221.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.05%29%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%22160%22%20r%3D%221.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.05%29%22/%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%280%2C212%2C255%2C0.4%29%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%2822%2C%2022%29%20scale%281.5%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.1%2013.4A10.1%2010.1%200%200%200%2013.4%202.1M5%204.9l14%2014.2m2.9-8.5a10.1%2010.1%200%200%200-11.3%2011.3%22/%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%28102%2C%2022%29%20scale%281.5%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M21%203c-.8-.8-3-1.2-5.8-.9s-6%201.6-8.8%204.4s-4%206-4.4%208.8s.1%205%20.9%205.8s3%201.2%205.8.9s6-1.6%208.8-4.4s4-6%204.4-8.8s-.1-5-.9-5.8M6.4%2017.6L9%2015%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M8.7%2021.9c-.8-3.3-3.4-5.8-6.7-6.7m6.1-1.3l2%202M11%2011l2%202m.9-4.9l2%202m-.6-8c.8%203.3%203.4%205.8%206.6%206.6M15%209l2.6-2.6%22/%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%2822%2C%20102%29%20scale%281.5%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M11.9%206.7s-3%201.3-5%203.6c0%200%200%203.6%201.9%205.9c0%200%203.1.7%206.2%200c0%200%201.9-2.3%201.9-5.9c0%20.1-2-2.3-5-3.6m0%200V2m5%208.4s3-1.4%204.5-1.6M15%2016.3s1.9%202.7%202.9%203.7m-9.1-3.7S6.9%2019%206%2020%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.6%208.7C4%209%207%2010.4%207%2010.4%22/%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%28102%2C%20102%29%20scale%281.5%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2%2012c5.5%200%2010-4.5%2010-10%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M22%2012c-5.5%200-10%204.5-10%2010M8%2011.5l-1.5-2m5%201.5l-2-1.5m5%2011l-2-1.5m5-1.5l-1.5-2%22/%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E"); background-repeat: repeat; background-position: center; opacity: 0.08; transform: rotate(-15deg); z-index: 1; pointer-events: none; } /* Cursor-reactive icon glow — static SVG mask (cached) + GPU-composited glow movement */ .hero-bg-glow { position: absolute; top: -10vw; left: -10vw; right: -10vw; bottom: -10vw; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2822%2C%2022%29%20scale%281.5%29%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2.1%2013.4A10.1%2010.1%200%200%200%2013.4%202.1M5%204.9l14%2014.2m2.9-8.5a10.1%2010.1%200%200%200-11.3%2011.3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28102%2C%2022%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M21%203c-.8-.8-3-1.2-5.8-.9s-6%201.6-8.8%204.4s-4%206-4.4%208.8s.1%205%20.9%205.8s3%201.2%205.8.9s6-1.6%208.8-4.4s4-6%204.4-8.8s-.1-5-.9-5.8M6.4%2017.6L9%2015%22%2F%3E%3Cpath%20d%3D%22M8.7%2021.9c-.8-3.3-3.4-5.8-6.7-6.7m6.1-1.3l2%202M11%2011l2%202m.9-4.9l2%202m-.6-8c.8%203.3%203.4%205.8%206.6%206.6M15%209l2.6-2.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2822%2C%20102%29%20scale%281.5%29%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M11.9%206.7s-3%201.3-5%203.6c0%200%200%203.6%201.9%205.9c0%200%203.1.7%206.2%200c0%200%201.9-2.3%201.9-5.9c0%20.1-2-2.3-5-3.6m0%200V2m5%208.4s3-1.4%204.5-1.6M15%2016.3s1.9%202.7%202.9%203.7m-9.1-3.7S6.9%2019%206%2020%22%2F%3E%3Cpath%20d%3D%22M2.6%208.7C4%209%207%2010.4%207%2010.4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28102%2C%20102%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M2%2012c5.5%200%2010-4.5%2010-10%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M22%2012c-5.5%200-10%204.5-10%2010M8%2011.5l-1.5-2m5%201.5l-2-1.5m5%2011l-2-1.5m5-1.5l-1.5-2%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2822%2C%2022%29%20scale%281.5%29%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2.1%2013.4A10.1%2010.1%200%200%200%2013.4%202.1M5%204.9l14%2014.2m2.9-8.5a10.1%2010.1%200%200%200-11.3%2011.3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28102%2C%2022%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M21%203c-.8-.8-3-1.2-5.8-.9s-6%201.6-8.8%204.4s-4%206-4.4%208.8s.1%205%20.9%205.8s3%201.2%205.8.9s6-1.6%208.8-4.4s4-6%204.4-8.8s-.1-5-.9-5.8M6.4%2017.6L9%2015%22%2F%3E%3Cpath%20d%3D%22M8.7%2021.9c-.8-3.3-3.4-5.8-6.7-6.7m6.1-1.3l2%202M11%2011l2%202m.9-4.9l2%202m-.6-8c.8%203.3%203.4%205.8%206.6%206.6M15%209l2.6-2.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2822%2C%20102%29%20scale%281.5%29%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M11.9%206.7s-3%201.3-5%203.6c0%200%200%203.6%201.9%205.9c0%200%203.1.7%206.2%200c0%200%201.9-2.3%201.9-5.9c0%20.1-2-2.3-5-3.6m0%200V2m5%208.4s3-1.4%204.5-1.6M15%2016.3s1.9%202.7%202.9%203.7m-9.1-3.7S6.9%2019%206%2020%22%2F%3E%3Cpath%20d%3D%22M2.6%208.7C4%209%207%2010.4%207%2010.4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28102%2C%20102%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M2%2012c5.5%200%2010-4.5%2010-10%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M22%2012c-5.5%200-10%204.5-10%2010M8%2011.5l-1.5-2m5%201.5l-2-1.5m5%2011l-2-1.5m5-1.5l-1.5-2%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: center; mask-position: center; transform: rotate(-15deg); z-index: 2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .hero-glow-light { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 212, 255, 0.65) 0%, rgba(166, 60, 255, 0.3) 40%, transparent 70%); will-change: transform; pointer-events: none; } .hero-glow-trail { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(166, 60, 255, 0.5) 0%, rgba(0, 212, 255, 0.25) 40%, transparent 70%); will-change: transform; pointer-events: none; opacity: 0.7; } .hero-section:hover .hero-bg-glow { opacity: 1; } .hero-section:has(.btn-hero:hover) .hero-bg-glow { opacity: 0; } .hero-content { max-width: 800px; width: 100%; text-align: center; position: relative; z-index: 3; padding: 2rem 2rem 1rem; flex: 1; display: flex; flex-direction: column; justify-content: center; } /* Staggered load animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } .hero-section .fade-in-up { opacity: 0; animation: fadeInUp 1.2s var(--ease-out-expo) forwards; animation-play-state: paused; } .hero-section.visible .fade-in-up { animation-play-state: running; } .hero-section .delay-1 { animation-delay: 0.1s; } .hero-section .delay-2 { animation-delay: 0.25s; } .hero-section .delay-3 { animation-delay: 0.4s; } .hero-section .delay-4 { animation-delay: 0.55s; } /* The Glass Card */ .glass-card { background: linear-gradient(180deg, rgba(15, 20, 35, 0.6) 0%, rgba(10, 12, 20, 0.8) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-color); border-top: 1px solid var(--border-highlight); border-radius: 32px; padding: 3.5rem 3rem; text-align: center; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02); opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo); } .glass-card.visible { opacity: 1; transform: translateY(0) scale(1); } .logo-container { margin-bottom: 2rem; } .glass-card .logo { max-width: 80px; filter: drop-shadow(0 0 30px var(--accent-blue)); } .title { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.25rem; letter-spacing: -1.5px; } .gradient-text { background: linear-gradient(to right, var(--accent-blue), var(--accent-purple), var(--accent-blue)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradient-shift 5s linear infinite; will-change: background-position; } @keyframes gradient-shift { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } .description { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 2.5rem; max-width: 700px; margin-inline: auto; font-weight: 400; line-height: 1.7; } .cta-container { display: inline-flex; flex-direction: column; align-items: center; width: max-content; max-width: 100%; } .cta-subtext { margin-top: 1rem; font-size: 0.9rem; color: var(--text-muted); opacity: 0.7; letter-spacing: 0.3px; text-align: center; } /* === SHOWCASE SECTION === */ .showcase-section { padding: 4rem 2rem; position: relative; z-index: 10; background: radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.03), transparent 60%); } .showcase-container { max-width: 1400px; margin: 0 auto; text-align: center; } .section-title { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -1px; } .section-description { font-size: 1.25rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 3rem; } .mockup-wrapper { position: relative; max-width: 100%; perspective: 1000px; } .showcase-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; max-width: 1200px; margin: 0 auto; align-items: center; } .dashboard-mockup { border-radius: 20px; background: #000; border: 1px solid var(--border-highlight); padding: 0.5rem; box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; transform: rotateX(5deg) scale(0.95); transition: transform 1s var(--ease-out-expo); position: relative; } .mockup-wrapper:hover .dashboard-mockup { transform: rotateX(0deg) scale(1); } .mockup-img { width: 100%; border-radius: 14px; display: block; opacity: 0.9; } .dashboard-mockup--css { aspect-ratio: 16 / 10; min-height: 280px; } .dashboard-mockup--css .ui-mockup--dashboard { height: 100%; min-height: 260px; border-radius: 14px; font-size: 0.62rem; } .mockup-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(circle, var(--accent-purple) 0%, transparent 60%); filter: blur(100px); opacity: 0.2; z-index: -1; } .floating-badge { position: absolute; background: rgba(10, 12, 20, 0.8); backdrop-filter: blur(12px); border: 1px solid var(--border-highlight); padding: 1rem 1.5rem; border-radius: 100px; font-family: var(--font-heading); font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); animation: float-badge 6s infinite ease-in-out alternate; will-change: transform; } @keyframes float-badge { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } .badge-1 { top: -30px; right: -40px; } .badge-2 { bottom: 10%; left: -50px; animation-delay: -3s; } /* === FEATURES SECTION === */ .features-section { padding: 4rem 2rem; background: radial-gradient(ellipse at 30% 50%, rgba(166, 60, 255, 0.03), transparent 50%); } .features-container { max-width: 1200px; margin: 0 auto; } .features-tabs-container { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; margin-top: 2rem; scroll-margin-top: 100px; } .features-tabs-menu { display: flex; flex-direction: column; gap: 1rem; height: 100%; } .feature-tab { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: flex-start; background: transparent; border: 1px solid transparent; text-align: left; padding: 1.5rem 2rem; border-radius: 24px; cursor: pointer; transition: flex 0.4s var(--ease-out-expo), background 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo); color: var(--text-muted); position: relative; overflow: hidden; } .feature-tab:hover { flex: 1.5 1 0%; background: rgba(255, 255, 255, 0.02); } .feature-tab.active { flex: 2 1 0%; background: var(--bg-panel); border-color: var(--border-color); color: var(--text-main); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .feature-tab.active::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--accent-blue), var(--accent-purple)); } .feature-icon { font-size: 2rem; margin-bottom: 1rem; filter: grayscale(1) opacity(0.5); transition: all 0.3s; } .feature-tab.active .feature-icon { filter: grayscale(0) opacity(1); } .feature-tab h3 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 0.5rem; } .feature-tab p { font-size: 1rem; line-height: 1.6; opacity: 0; transition: opacity 0.3s; height: 0; } .feature-tab.active p { opacity: 1; height: auto; margin-top: 1rem; margin-bottom: 1.5rem; /* space for the absolute button */ } .feature-learn-more { position: absolute; bottom: 1.5rem; left: 2rem; display: flex; color: var(--accent-blue); text-decoration: none; font-weight: 600; font-size: 0.95rem; align-items: center; gap: 0.5rem; opacity: 0; pointer-events: none; /* prevent clicks when hidden */ transition: opacity 0.4s var(--ease-out-expo), color 0.3s; background: transparent; border-radius: 4px; z-index: 5; } .feature-tab.active .feature-learn-more, .feature-tab:hover .feature-learn-more { opacity: 1; pointer-events: auto; } .feature-learn-more:hover { color: var(--accent-purple); } .feature-learn-more span { transition: transform 0.3s ease; } .feature-learn-more:hover span { transform: translateX(4px); } .features-tabs-content { position: relative; } .feature-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all 0.6s var(--ease-out-expo); transform: scale(0.95); } .feature-panel.active { opacity: 1; visibility: visible; transform: scale(1); position: relative; } .gif-placeholder { background: linear-gradient(135deg, rgba(20, 25, 40, 0.8), rgba(10, 12, 20, 0.8)); border: 1px solid var(--border-color); border-radius: 24px; height: 100%; min-height: 500px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); color: var(--text-muted); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); } .video-container { background: linear-gradient(135deg, rgba(20, 25, 40, 0.8), rgba(10, 12, 20, 0.8)); border: 1px solid var(--border-color); border-radius: 24px; height: 100%; min-height: 500px; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); overflow: hidden; } .feature-video { width: 100%; height: 100%; min-height: 500px; object-fit: cover; border-radius: 23px; display: block; } /* === SIDEBAR === */ .sidebar { position: fixed; top: 0; left: -400px; width: 400px; height: 100vh; background: rgba(5, 7, 12, 0.95); backdrop-filter: blur(40px); border-right: 1px solid var(--border-color); z-index: 300; transition: left 0.5s var(--ease-out-expo); display: flex; flex-direction: column; } .sidebar.open { left: 0; box-shadow: 30px 0 60px rgba(0, 0, 0, 0.5); } .sidebar-header { height: 80px; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); } .sidebar-header h3 { font-family: var(--font-heading); font-size: 1.2rem; } .sidebar-content { padding: 2rem; overflow-y: auto; } .nav-group h4 { font-size: 0.8rem; color: var(--accent-blue); letter-spacing: 1px; margin-bottom: 1.5rem; text-transform: uppercase; } .nav-group ul { list-style: none; } .nav-group li { margin-bottom: 1rem; } .nav-group a { color: var(--text-muted); text-decoration: none; font-size: 1.1rem; transition: color 0.3s; } .nav-group a:hover { color: var(--text-main); } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 250; opacity: 0; visibility: hidden; transition: all 0.4s ease; } .overlay.open { opacity: 1; visibility: visible; } /* === CTA BANNER === */ .cta-banner-section { padding: 4rem 2rem 2rem; position: relative; z-index: 10; } .cta-banner-container { max-width: 900px; margin: 0 auto; } .cta-banner-card { position: relative; background: linear-gradient(180deg, rgba(15, 20, 35, 0.6) 0%, rgba(10, 12, 20, 0.8) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-color); border-top: 1px solid var(--border-highlight); border-radius: 32px; padding: 4rem 3rem; text-align: center; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02); overflow: hidden; } .cta-banner-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.08) 0%, rgba(166, 60, 255, 0.05) 40%, transparent 70%); pointer-events: none; z-index: 0; } .cta-banner-title { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 1rem; position: relative; z-index: 1; } .cta-banner-desc { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 2rem; max-width: 500px; margin-inline: auto; position: relative; z-index: 1; } .cta-banner-card .btn { position: relative; z-index: 1; } .cta-banner-card .cta-subtext { position: relative; z-index: 1; } /* === FOOTER === */ .site-footer { background: rgba(3, 4, 9, 0.95); border-top: 1px solid var(--border-color); padding: 3rem 2rem 1rem; margin-top: 2rem; } .footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 2fr; gap: 4rem; margin-bottom: 2rem; } .footer-brand .nav-brand-text { font-size: 1.5rem; margin-bottom: 1.5rem; display: inline-block; } .footer-brand p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 2rem; max-width: 350px; } .social-icons { display: flex; gap: 1rem; } .social-icons a { color: var(--text-main); text-decoration: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; border: 1px solid var(--border-color); } .social-icons a:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.2); } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .link-column h4 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-main); margin-bottom: 1.5rem; letter-spacing: 0.5px; } .link-column a { display: block; color: var(--text-muted); text-decoration: none; margin-bottom: 1rem; font-size: 0.95rem; transition: color 0.3s ease; } .link-column a:hover { color: var(--accent-blue); } .footer-bottom { border-top: 1px solid var(--border-color); padding-top: 2rem; text-align: center; } .bottom-container { max-width: 1200px; margin: 0 auto; } .footer-bottom p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem; } .disclaimer-text { font-size: 0.8rem !important; opacity: 0.7; max-width: 800px; margin: 1rem auto 0; line-height: 1.6; } /* Mobile Visibility */ @media (min-width: 1025px) { .mobile-only { display: none !important; } } @media (max-width: 1024px) { .desktop-only { display: none !important; } .nav-container { padding: 0 1.5rem; } .nav-right { gap: 1rem; } .btn-sm { padding: 0.6rem 1.2rem; font-size: 0.85rem; } .features-tabs-container { grid-template-columns: 1fr; gap: 2rem; } .features-tabs-content { order: -1; } .video-container { min-height: auto; height: auto; padding: 0; /* ensure no weird padding */ display: block; /* remove flex center so it just wraps the video */ } .feature-video { min-height: auto; height: auto; width: 100%; object-fit: cover; /* cover is fine when height is auto, it just fills the width */ display: block; } .container { padding-top: 7.5rem; } .hero-section:not(.has-preview) { padding-top: 7.5rem; padding-bottom: 3rem; height: auto; min-height: auto; } .trust-metric { min-width: 90px; } .hero-content { padding: 2rem 1rem; } .title { font-size: 3rem; } .glass-card { padding: 3rem 2rem; } .footer-container { grid-template-columns: 1fr; gap: 3rem; } .footer-links { grid-template-columns: repeat(2, 1fr); } /* Mobile Feature Tabs (Horizontal Layout) */ .features-tabs-menu { flex-direction: row; gap: 0.5rem; padding-bottom: 1rem; height: auto; } .feature-tab { flex: 1 1 0 !important; /* Forces equal 1/3 distribution */ min-width: 0; /* Prevents overflow */ padding: 1rem 0.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 16px; } .feature-tab h3 { font-size: 0.9rem; margin: 0; } .feature-icon { margin-bottom: 0.5rem; font-size: 1.5rem; } /* Hide paragraph and button on mobile */ .feature-tab p { display: none !important; } .feature-learn-more { display: none !important; } .feature-tab.active { border-color: var(--accent-blue); box-shadow: 0 5px 15px rgba(0, 212, 255, 0.1); } .feature-tab.active::before { display: none; } } @media (max-width: 640px) { .footer-links { grid-template-columns: 1fr; gap: 2rem; } .feature-tab { padding: 0.75rem 0.25rem; } .feature-tab h3 { font-size: 0.8rem; } } /* === BENTO BOX GRID === */ .bento-section { padding: 1.5rem 2rem 2.5rem; position: relative; z-index: 10; } .bento-container { max-width: 1400px; margin: 0 auto; } .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .bento-item { background: linear-gradient(180deg, rgba(15, 20, 35, 0.6) 0%, rgba(10, 12, 20, 0.8) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-color); border-top: 1px solid var(--border-highlight); border-radius: 24px; padding: 2.25rem; display: flex; flex-direction: column; justify-content: flex-start; gap: 1.5rem; transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo); overflow: hidden; position: relative; } .bento-item:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05); } /* Removed bento-item span classes (replaced by repeat(3, 1fr)) */ .bento-text { z-index: 2; } .bento-text h3 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 0.75rem; color: var(--text-main); letter-spacing: -0.5px; } .bento-text p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; } .bento-image-wrapper { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.05); width: 100%; height: auto; aspect-ratio: 16 / 10; min-height: 200px; max-height: 280px; margin-top: auto; container-type: inline-size; container-name: card-mockup; } /* Removed large/medium custom flex dimensions */ .bento-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } /* FAQ Section */ .faq-section { padding: 4rem 0; position: relative; z-index: 10; background: radial-gradient(ellipse at 70% 30%, rgba(0, 212, 255, 0.02), transparent 50%); } .faq-container { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; } .faq-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; } .faq-item { background: rgba(15, 20, 35, 0.4); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; } .faq-item:hover { border-color: var(--border-highlight); background: rgba(15, 20, 35, 0.7); } .faq-question { width: 100%; text-align: left; padding: 1.5rem; background: transparent; border: none; color: var(--text-main); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .faq-icon { transition: transform 0.3s ease; } .faq-item.active .faq-icon { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out-expo), padding 0.4s var(--ease-out-expo); padding: 0 1.5rem; } .faq-item.active .faq-answer { padding-bottom: 1.5rem; } .faq-answer p { color: var(--text-muted); line-height: 1.6; margin: 0; } .bento-item:hover .bento-image { transform: scale(1.03); } /* Feature Page Specific Hero */ .feature-hero { padding-top: 7.5rem; padding-bottom: 2rem; } @media (max-width: 1024px) { .bento-grid { grid-template-columns: 1fr; } } /* === EDUCATIONAL SECTION === */ .education-section { padding: 4rem 0; position: relative; border-top: 1px solid var(--border-color); background: linear-gradient(to bottom, rgba(5, 5, 12, 0) 0%, rgba(10, 10, 25, 0.4) 100%); } .education-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .education-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } .education-col { display: flex; flex-direction: column; gap: 1.5rem; } .education-header { display: flex; align-items: center; gap: 1rem; } .education-header h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--text-main); margin: 0; } .education-header .emoji { font-size: 2rem; display: flex; align-items: center; justify-content: center; } .education-header .emoji svg { width: 28px; height: 28px; } .education-intro { font-size: 1.1rem; line-height: 1.6; color: var(--text-muted); } .rules-list, .steps-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1rem; } .rule-item h4 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.5rem; position: relative; padding-left: 1.5rem; } .rule-item h4::before { content: "✓"; position: absolute; left: 0; color: var(--accent-blue); font-weight: 800; } .rule-item p { color: var(--text-muted); line-height: 1.5; margin: 0; } .step-item { display: flex; gap: 1.5rem; } .step-number { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(0, 82, 212, 0.15)); border: 1px solid rgba(0, 212, 255, 0.2); color: #00d4ff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; } .step-item h4 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.5rem; } .step-item p { color: var(--text-muted); line-height: 1.5; margin: 0; } .sharp-tip-card { margin-top: 2.5rem; padding: 2rem; border-radius: 24px; background: linear-gradient(135deg, rgba(0, 212, 255, 0.03), rgba(0, 82, 212, 0.08)); border: 1px solid rgba(0, 212, 255, 0.15); display: flex; gap: 1.5rem; align-items: center; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); } .tip-icon { font-size: 2rem; display: flex; align-items: center; justify-content: center; } .tip-icon svg { width: 28px; height: 28px; color: #ffb800; } .tip-content { color: var(--text-main); line-height: 1.6; font-size: 1.1rem; } /* Mobile responsive styling */ @media (max-width: 992px) { .education-grid { grid-template-columns: 1fr; gap: 3.5rem; } .sharp-tip-card { flex-direction: column; text-align: center; gap: 1rem; padding: 1.5rem; } } /* === DETAIL CARDS GRID === */ .details-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; border-top: 1px dashed var(--border-color); padding-top: 2.5rem; } .details-card { background: rgba(15, 20, 35, 0.3); border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; transition: transform 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo); } .details-card:hover { transform: translateY(-3px); border-color: rgba(0, 212, 255, 0.2); } .details-card .card-icon { font-size: 1.5rem; display: flex; align-items: center; } .details-card .card-icon svg { width: 24px; height: 24px; } /* Page-specific SVG Coloring */ .page-sharp .card-icon svg, .page-best .card-icon svg, .page-sharp .emoji svg, .page-best .emoji svg { color: var(--accent-blue); } .page-analytics .card-icon svg, .page-analytics .emoji svg { color: var(--accent-purple); } .details-card h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin: 0; } .details-card p { font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); margin: 0; } @media (max-width: 1024px) { .details-card-grid { grid-template-columns: repeat(2, 1fr); padding-top: 2rem; margin-top: 2rem; } } @media (max-width: 600px) { .details-card-grid { grid-template-columns: 1fr; } } /* === PREMIUM SEARCH BAR & MODAL === */ .navbar-search-pill { display: flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 0.4rem 0.75rem; color: var(--text-muted); cursor: pointer; transition: all 0.3s ease; font-family: var(--font-body); font-size: 0.85rem; height: 36px; outline: none; width: 160px; } .navbar-search-pill:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: var(--text-main); } .navbar-search-pill .search-placeholder { font-size: 0.85rem; } .navbar-search-pill .search-shortcut { font-size: 0.75rem; background: rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 0.1rem 0.35rem; font-family: inherit; font-weight: 600; margin-left: auto; } /* Modal Overlay */ .search-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(3, 4, 9, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 9999; display: flex; justify-content: center; align-items: flex-start; padding-top: 10vh; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .search-modal-overlay.open { opacity: 1; visibility: visible; } /* Modal Card */ .search-modal-card { width: 100%; max-width: 600px; background: rgba(12, 16, 30, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px inset rgba(255, 255, 255, 0.05); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; transform: translateY(-20px); transition: transform 0.3s var(--ease-out-expo); } .search-modal-overlay.open .search-modal-card { transform: translateY(0); } /* Modal Header */ .search-modal-header { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--text-muted); } .search-modal-header input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-main); font-family: var(--font-body); font-size: 1.1rem; } .search-modal-header input::placeholder { color: rgba(255, 255, 255, 0.3); } .search-modal-header .close-btn { background: transparent; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s; } .search-modal-header .close-btn:hover { color: var(--text-main); } /* Results Content */ .search-modal-results { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } .search-group { display: flex; flex-direction: column; gap: 0.5rem; } .search-group-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--accent-blue); letter-spacing: 1px; margin-bottom: 0.25rem; padding-left: 0.5rem; } .search-result-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-radius: 12px; text-decoration: none; background: rgba(255, 255, 255, 0.02); border: 1px solid transparent; transition: all 0.2s ease; cursor: pointer; } .search-result-item:hover, .search-result-item.selected { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); transform: translateX(4px); outline: none; } .search-result-item .result-icon { font-size: 1.25rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.04); border-radius: 8px; transition: all 0.2s ease; } .search-result-item:hover .result-icon, .search-result-item.selected .result-icon { background: rgba(0, 212, 255, 0.15); color: var(--accent-blue); } .result-details { display: flex; flex-direction: column; gap: 0.15rem; } .result-title { color: var(--text-main); font-weight: 600; font-size: 0.95rem; } .result-desc { color: var(--text-muted); font-size: 0.8rem; } .no-results { text-align: center; color: var(--text-muted); padding: 2rem 0; font-size: 0.95rem; } /* Modal Footer */ .search-modal-footer { display: flex; justify-content: flex-end; gap: 1.5rem; padding: 0.85rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05); background: rgba(3, 4, 9, 0.4); font-size: 0.75rem; color: var(--text-muted); } .search-modal-footer kbd { background: rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 0.1rem 0.3rem; font-family: inherit; font-weight: 600; margin: 0 0.15rem; } /* Responsive Mobile Sizing */ @media (max-width: 768px) { .showcase-split-grid { grid-template-columns: 1fr; gap: 3rem; } .showcase-section { padding: 3rem 1rem; } .section-title { font-size: clamp(1.75rem, 7vw, 2.5rem); } .section-description { font-size: 1rem; margin-bottom: 2rem; padding-inline: 0.25rem; } .mockup-wrapper { display: flex; flex-direction: column; align-items: center; } .dashboard-mockup { transform: none; width: 100%; } .mockup-wrapper:hover .dashboard-mockup { transform: none; } .floating-badge { position: relative; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: -1; margin: 0 auto 1rem; width: fit-content; max-width: calc(100% - 1rem); padding: 0.65rem 1rem; font-size: 0.85rem; animation: none; } .mockup-wrapper:hover .badge-1, .mockup-wrapper:hover .badge-2 { transform: none; } .cta-banner-card { padding: 3rem 1.5rem; border-radius: 24px; } .cta-banner-title { font-size: 1.8rem; } .cta-banner-desc { font-size: 1rem; } .navbar-search-pill { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; background: transparent; border: none; } .navbar-search-pill:hover { background: rgba(255, 255, 255, 0.05); } .navbar-search-pill .search-placeholder, .navbar-search-pill .search-shortcut { display: none; } .search-modal-card { max-width: 90%; max-height: 80vh; } } @media (max-width: 480px) { .nav-container { padding: 0 1rem; } .btn-sm { padding: 0.5rem 0.85rem; font-size: 0.78rem; } } /* === GLOSSARY CARD TARGET HIGHLIGHT === */ .details-card:target { border-color: var(--accent-blue) !important; box-shadow: 0 0 25px var(--accent-glow), inset 0 0 0 1px rgba(0, 212, 255, 0.3) !important; transform: translateY(-5px); background: rgba(15, 20, 35, 0.5) !important; } @media (min-width: 1025px) { .glossary-3-col { grid-template-columns: repeat(3, 1fr) !important; } } /* === HERO CTA BUTTON CLASS === */ .btn-hero { padding: 1.2rem 3rem !important; font-size: 1.1rem !important; } /* === PLATFORM STRIP (metrics + league coverage) === */ .platform-strip { grid-area: metrics; width: 100%; max-width: 100%; margin-inline: auto; position: relative; z-index: 2; flex-shrink: 0; align-self: stretch; } .platform-strip-inner { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0.85rem; width: 100%; max-width: 100%; margin-inline: auto; padding: 0.95rem clamp(0.85rem, 2.5vw, 1.35rem); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; background: linear-gradient(135deg, rgba(15, 20, 35, 0.55) 0%, rgba(8, 10, 18, 0.75) 100%); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04); text-align: center; box-sizing: border-box; } .platform-metrics { display: flex; align-items: center; justify-content: center; gap: clamp(0.85rem, 3vw, 1.75rem); flex-wrap: wrap; width: 100%; } .platform-metric { display: flex; align-items: center; justify-content: center; gap: 0.65rem; min-width: 0; flex: 0 1 auto; } .platform-metric-icon { display: flex; align-items: center; justify-content: center; width: clamp(34px, 8vw, 38px); height: clamp(34px, 8vw, 38px); border-radius: 11px; background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.18); color: var(--accent-blue); flex-shrink: 0; } .platform-metric-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0; text-align: left; } .platform-metric-value { font-family: var(--font-heading); font-size: clamp(1rem, 2.5vw, 1.15rem); font-weight: 800; line-height: 1.1; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .platform-metric-label { font-size: clamp(0.62rem, 1.8vw, 0.68rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .platform-strip-divider { width: min(240px, 72%); height: 1px; min-height: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); flex-shrink: 0; } .platform-coverage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; min-width: 0; width: 100%; } .platform-coverage-header { display: flex; align-items: center; justify-content: center; gap: 0.45rem; } .platform-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.65); flex-shrink: 0; animation: platformLivePulse 2.4s ease-in-out infinite; } @keyframes platformLivePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.88); } } .platform-coverage-label { font-size: clamp(0.62rem, 1.8vw, 0.68rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .platform-leagues { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem clamp(0.35rem, 1.5vw, 0.5rem); width: fit-content; max-width: 100%; margin-inline: auto; } .platform-league { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.35rem clamp(0.5rem, 2vw, 0.65rem); border-radius: 999px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); font-family: var(--font-heading); font-size: clamp(0.68rem, 2vw, 0.78rem); font-weight: 600; color: rgba(255, 255, 255, 0.72); white-space: nowrap; transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease; } .platform-league-icon { flex-shrink: 0; opacity: 0.85; } .platform-league--featured { color: var(--accent-blue); background: rgba(0, 212, 255, 0.08); border-color: rgba(0, 212, 255, 0.22); } .platform-league--featured .platform-league-icon { color: var(--accent-blue); opacity: 1; } .platform-league:hover { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); } /* Legacy aliases kept for other pages if referenced */ .trust-metrics-bar { display: flex; justify-content: space-around; width: 100%; max-width: 1000px; margin-top: 0; padding: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01) 50%, transparent); flex-wrap: wrap; gap: 1.5rem; position: relative; z-index: 2; flex-shrink: 0; } .trust-metric { text-align: center; flex: 1; min-width: 120px; } .metric-num { display: block; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; line-height: 1.2; margin-bottom: 0.25rem; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .metric-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } /* === SHOWCASE BADGE ANIMATIONS === */ .floating-badge svg { color: var(--accent-blue); display: inline-block; vertical-align: middle; } .mockup-wrapper:hover .badge-1 { transform: translateY(-25px) scale(1.05); box-shadow: 0 30px 60px rgba(0, 212, 255, 0.25); } .mockup-wrapper:hover .badge-2 { transform: translateY(-15px) scale(1.05); box-shadow: 0 30px 60px rgba(166, 60, 255, 0.25); } /* === GENERAL COMPONENT CLEANUPS === */ .features-tabs-menu .feature-icon svg { color: var(--text-muted); width: 28px; height: 28px; transition: color 0.3s ease; } .feature-tab.active .feature-icon svg { color: var(--accent-blue); } .showcase-disclaimer { font-size: 0.75rem; color: var(--text-muted); opacity: 0.65; text-align: center; margin-top: 2rem; max-width: 600px; margin-inline: auto; line-height: 1.6; } /* === DOCUMENT PAGE WRAPPERS === */ .doc-container { padding-top: 150px; padding-bottom: 100px; max-width: 800px; margin: 0 auto; text-align: left; width: 100%; } .doc-container.wide { max-width: 1200px; } .doc-card { padding: 4rem; text-align: left; width: 100%; } /* Tablet & Mobile Responsiveness for Document Pages */ @media (max-width: 991px) { .doc-container { padding-top: 120px; padding-bottom: 80px; padding-left: 1.5rem; padding-right: 1.5rem; } .doc-card { padding: 3rem 2rem; border-radius: 24px; } } @media (max-width: 768px) { .doc-container { padding-top: 100px; padding-bottom: 60px; padding-left: 1rem; padding-right: 1rem; } .doc-card { padding: 2rem 1.25rem; border-radius: 16px; } } /* Scroll arrow uses dedicated footer zone on preview hero (see .hero-section.has-preview) */ .hero-scroll-down-wrapper { position: absolute; bottom: 2.5rem; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; z-index: 12; pointer-events: none; } .hero-scroll-down { pointer-events: auto; color: var(--text-muted); opacity: 0.45; transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; animation: heroBob 2.5s ease-in-out infinite; will-change: transform; } .hero-scroll-down:hover { color: var(--accent-blue); opacity: 1; transform: scale(1.1); } .hero-scroll-down svg { width: 32px; height: 32px; stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.25)); } @keyframes heroBob { 0% { transform: translateY(0); } 50% { transform: translateY(10px); } 100% { transform: translateY(0); } } /* Primary CTA reflect sheen sweep animation — scoped to hero CTAs only to reduce compositor layers */ .btn-hero { position: relative; overflow: hidden; } .btn-hero::after { content: ""; position: absolute; top: -50%; left: 0; width: 30%; height: 200%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.15) 70%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-150%) rotate(30deg); animation: shineSweep 4s ease-in-out infinite; pointer-events: none; will-change: transform; } @keyframes shineSweep { 0% { transform: translateX(-150%) rotate(30deg); } 15% { transform: translateX(350%) rotate(30deg); } 100% { transform: translateX(350%) rotate(30deg); } } /* === REDUCED MOTION SAFEGUARD & PERFORMANCE TESTING SWITCH === */ @media (prefers-reduced-motion: reduce) { .glow-orb, .hero-section::before, .btn-hero::after, .hero-scroll-down, .gradient-text, .platform-live-dot { animation: none !important; transition: none !important; } .hero-section::before { transform: rotate(-15deg) !important; } .hero-bg-glow { display: none !important; } .gradient-text { background-position: 0% center !important; } } /* Override rules when test toggle forces reduced motion mode */ body.reduce-motion-active .glow-orb, body.reduce-motion-active .hero-section::before, body.reduce-motion-active .btn-hero::after, body.reduce-motion-active .hero-scroll-down, body.reduce-motion-active .gradient-text { animation: none !important; transition: none !important; } body.reduce-motion-active .hero-section::before { transform: rotate(-15deg) !important; } body.reduce-motion-active .hero-bg-glow { display: none !important; } body.reduce-motion-active .gradient-text { background-position: 0% center !important; } /* Floating Switch UI styling */ .test-motion-toggle-wrapper { position: fixed; bottom: 24px; right: 24px; z-index: 10000; } .motion-toggle-btn { background: rgba(13, 13, 18, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50px; color: var(--text-main); padding: 0.6rem 1.2rem; font-size: 0.75rem; font-weight: 600; font-family: var(--font-body); cursor: pointer; display: flex; align-items: center; gap: 0.4rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .motion-toggle-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(0, 212, 255, 0.3); transform: translateY(-2px); } .motion-toggle-btn.active-low { border-color: rgba(166, 60, 255, 0.4); background: rgba(166, 60, 255, 0.1); color: #d8b4fe; } /* Feature pages background orbs brightness enhancement */ .page-sharp .glow-orb, .page-analytics .glow-orb, .page-best .glow-orb { opacity: 0.28; } /* === ADVANCED ANALYST TOOLKIT SECTION === */ .toolkit-section { padding: 6rem 2rem 4rem; position: relative; z-index: 10; background: radial-gradient(ellipse at 50% 100%, rgba(166, 60, 255, 0.04), transparent 60%); } .toolkit-container { max-width: 1200px; margin: 0 auto; } .toolkit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; margin-top: 3.5rem; } .toolkit-item { background: linear-gradient(180deg, rgba(15, 20, 35, 0.6) 0%, rgba(10, 12, 20, 0.8) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-color); border-top: 1px solid var(--border-highlight); border-radius: 32px; padding: 3rem 2.5rem 0; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo); overflow: hidden; position: relative; } .toolkit-item:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .toolkit-text { z-index: 2; } .toolkit-badge { display: inline-flex; padding: 4px 12px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; background: rgba(0, 212, 255, 0.1); color: var(--accent-blue); border: 1px solid rgba(0, 212, 255, 0.2); margin-bottom: 1rem; } .toolkit-item:nth-child(even) .toolkit-badge { background: rgba(166, 60, 255, 0.1); color: var(--accent-purple); border: 1px solid rgba(166, 60, 255, 0.2); } .toolkit-text h3 { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-main); letter-spacing: -0.5px; } .toolkit-text p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; } .toolkit-image-wrapper { position: relative; border-radius: 20px 20px 0 0; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); border: 1px solid rgba(255, 255, 255, 0.05); border-bottom: none; width: 90%; max-width: 520px; margin: 0 auto; height: auto; aspect-ratio: 16 / 8.5; min-height: 160px; max-height: 215px; z-index: 1; transition: transform 0.4s var(--ease-out-expo); container-type: inline-size; container-name: card-mockup; } .toolkit-item:hover .toolkit-image-wrapper { transform: translateY(-5px) scale(1.02); } .toolkit-image { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 991px) { .toolkit-grid { grid-template-columns: 1fr; gap: 2rem; } .toolkit-item { padding: 2.5rem 2rem 0; } .toolkit-image-wrapper { min-height: 160px; max-height: 200px; width: 95%; } } /* === UI MOCKUPS (app-faithful Dark Cinema components) === */ .ui-mockup { width: 100%; height: 100%; min-width: 0; min-height: 0; background: linear-gradient(180deg, #0c1018 0%, #070a10 100%); padding: 0.75rem 0.85rem; font-size: clamp(0.52rem, 1.6cqi, 0.68rem); line-height: 1.4; overflow: hidden; display: flex; flex-direction: column; gap: 0.45rem; box-sizing: border-box; } .ui-mockup-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ui-mockup-title { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; color: var(--text-main); letter-spacing: -0.02em; } .ui-mockup-badge { font-size: 0.5rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-blue); border: 1px solid rgba(0, 212, 255, 0.25); background: rgba(0, 212, 255, 0.08); padding: 0.15rem 0.4rem; border-radius: 999px; white-space: nowrap; } .ui-mockup-table { display: flex; flex-direction: column; gap: 0.25rem; flex: 0 1 auto; min-width: 0; } .ui-mockup-row { display: grid; grid-template-columns: 1.2fr 0.8fr 0.7fr 0.6fr; gap: 0.35rem; align-items: center; padding: 0.35rem 0.4rem; border-radius: 8px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); } .ui-mockup-row.header { background: transparent; border: none; color: var(--text-muted); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0.4rem; } .ui-mockup-row.highlight { border-color: rgba(0, 212, 255, 0.2); background: rgba(0, 212, 255, 0.06); } .ui-mockup-cell { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-mockup-cell.strong { color: var(--text-main); font-weight: 600; } .ui-mockup-cell.positive { color: #34d399; font-weight: 600; } .ui-mockup-cell.mid, .ui-mockup-cell--mid { color: #fbbf24; font-weight: 600; } .ui-mockup-cell.negative { color: #f87171; } .ui-mockup-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; } .ui-mockup-metrics--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-mockup-metrics--5 .ui-mockup-metric:last-child { grid-column: span 2; } .ui-mockup-metric { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 0.35rem 0.4rem; min-width: 0; } .ui-mockup-metric-sub { font-size: 0.42rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); opacity: 0.75; margin-top: 0.12rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-mockup-panel { flex: none; display: flex; flex-direction: column; gap: 0.25rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 0.35rem 0.45rem; min-height: 0; min-width: 0; } .ui-mockup-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; min-width: 0; } .ui-mockup-panel-header .ui-mockup-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; } .ui-mockup-table--confidence .ui-mockup-row { grid-template-columns: 0.75fr 1fr 0.65fr 1.15fr; padding: 0.22rem 0.3rem; } .ui-mockup-table--confidence .ui-mockup-row--perf { grid-template-areas: "conf record win visual" "bar bar bar bar"; } .ui-mockup-table--confidence .ui-mockup-row--perf .ui-mockup-cell:nth-child(1) { grid-area: conf; } .ui-mockup-table--confidence .ui-mockup-row--perf .ui-mockup-cell:nth-child(2) { grid-area: record; } .ui-mockup-table--confidence .ui-mockup-row--perf .ui-mockup-cell:nth-child(3) { grid-area: win; } .ui-mockup-table--confidence .ui-mockup-row--perf .ui-mockup-cell--bar { grid-area: visual; } .ui-mockup-cell--bar { display: flex; align-items: center; min-width: 0; overflow: visible; } .ui-mockup-row-bar { grid-area: bar; display: none; padding: 0 0.1rem 0.15rem; } .ui-mockup-bar-track { display: block; width: 100%; height: clamp(6px, 1.6cqi, 8px); border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.04); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } .ui-mockup-bar-track--inline { height: clamp(5px, 2cqi, 7px); } .ui-mockup-bar-wrap { height: clamp(6px, 1.6cqi, 8px); width: 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 999px; overflow: hidden; margin-top: 0.2rem; flex-shrink: 0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } .ui-mockup-bar { display: block; height: 100%; width: var(--bar-fill, 0%); min-width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); box-shadow: 0 0 10px rgba(52, 211, 153, 0.25); transition: width 0.4s ease; } .ui-mockup-bar.green, .ui-mockup-bar--high { background: linear-gradient(90deg, #34d399 0%, #10b981 100%); box-shadow: 0 0 12px rgba(52, 211, 153, 0.35); } .ui-mockup-bar--mid { background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 0 10px rgba(251, 191, 36, 0.28); } .ui-mockup-bar--low { background: linear-gradient(90deg, #f87171 0%, #ef4444 100%); box-shadow: 0 0 10px rgba(248, 113, 113, 0.28); } .ui-mockup-metric-label { font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.15rem; } .ui-mockup-metric-value { font-family: var(--font-heading); font-size: clamp(0.65rem, 2.8cqi, 0.85rem); font-weight: 700; color: var(--text-main); line-height: 1.15; } .ui-mockup-metric-value.green { color: #34d399; } .ui-mockup-metric-value.purple { color: #c084fc; } .ui-mockup-metric-value.amber { color: #fbbf24; } .ui-mockup-metric-value.red { color: #f87171; } .ui-mockup-chart { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; min-height: 0; } .ui-mockup-heat { border-radius: 3px; background: rgba(255, 255, 255, 0.04); } .ui-mockup-heat.hot { background: rgba(52, 211, 153, 0.55); } .ui-mockup-heat.warm { background: rgba(52, 211, 153, 0.25); } .ui-mockup-heat.cool { background: rgba(248, 113, 113, 0.25); } .ui-mockup-heat.cold { background: rgba(248, 113, 113, 0.5); } .ui-mockup-chat { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; } .ui-mockup-bubble { max-width: 85%; padding: 0.35rem 0.5rem; border-radius: 10px; font-size: 0.58rem; color: var(--text-muted); } .ui-mockup-bubble.user { align-self: flex-end; background: rgba(0, 212, 255, 0.12); border: 1px solid rgba(0, 212, 255, 0.2); color: var(--text-main); } .ui-mockup-bubble.ai { align-self: flex-start; background: rgba(166, 60, 255, 0.1); border: 1px solid rgba(166, 60, 255, 0.2); } .ui-mockup-split { display: grid; grid-template-columns: 1fr 0.85fr; gap: 0.4rem; flex: 1; min-height: 0; } .ui-mockup-sidebar { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; } .ui-mockup-sidebar-item { font-size: 0.52rem; padding: 0.25rem 0.35rem; border-radius: 6px; color: var(--text-muted); border-left: 2px solid transparent; } .ui-mockup-sidebar-item.active { color: var(--accent-blue); background: rgba(0, 212, 255, 0.08); border-left-color: var(--accent-blue); } .ui-mockup-alert { display: flex; align-items: flex-start; gap: 0.35rem; padding: 0.35rem 0.4rem; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); } .ui-mockup-alert-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-blue); margin-top: 0.2rem; flex-shrink: 0; box-shadow: 0 0 8px var(--accent-blue); } .ui-mockup-radar { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; } .ui-mockup-radar svg { width: 100%; max-height: 100%; opacity: 0.9; } .bento-image-wrapper .ui-mockup, .toolkit-image-wrapper .ui-mockup { border-radius: 0; } .bento-item:hover .ui-mockup, .toolkit-item:hover .ui-mockup { transform: scale(1.02); transition: transform 0.5s ease; } /* Hero split + preview panel */ .hero-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "copy" "preview" "metrics"; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(1rem, 2vh, 1.75rem); max-width: 1400px; width: 100%; align-items: center; position: relative; z-index: 3; flex: 1; min-height: 0; padding: 0 2rem; margin: 0 auto; box-sizing: border-box; } .hero-section.has-preview .hero-content { grid-area: copy; } .hero-section.has-preview .hero-preview-panel { grid-area: preview; position: relative; width: 100%; max-width: min(100%, 36rem); margin-inline: auto; min-width: 0; min-height: 0; max-height: 100%; opacity: 1; visibility: visible; display: flex; flex-direction: column; align-self: center; justify-self: stretch; } .hero-section.has-preview .hero-preview-panel.fade-in-up { opacity: 1; animation: fadeInUp 1.2s var(--ease-out-expo) forwards; animation-delay: 0.35s; animation-play-state: running; } .hero-section.has-preview .platform-strip { grid-area: metrics; max-width: 100%; width: fit-content; margin-top: 0; margin-inline: auto; align-self: center; } .hero-section.has-preview { --hero-scroll-zone: clamp(2.25rem, 6vh, 4.25rem); --hero-nav-offset: 5.5rem; height: 100dvh; min-height: 100dvh; max-height: 100dvh; padding: var(--hero-nav-offset) 0 0; overflow: hidden; box-sizing: border-box; align-items: stretch; } .hero-section.has-preview::before, .hero-section.has-preview > .hero-bg-glow { top: 0; right: 0; bottom: 0; left: 0; } .hero-section.has-preview > .hero-scroll-down-wrapper { position: relative; bottom: auto; left: auto; width: 100%; flex: 0 0 var(--hero-scroll-zone); display: flex; align-items: center; justify-content: center; z-index: 12; pointer-events: none; } .hero-section.has-preview .hero-content { max-width: none; text-align: center; padding: 0; flex: initial; align-self: center; } .hero-section.has-preview .title { font-size: clamp(2.25rem, 4vw, 3.25rem); } .hero-preview-frame { background: linear-gradient(180deg, rgba(15, 20, 35, 0.75) 0%, rgba(8, 10, 18, 0.9) 100%); backdrop-filter: blur(20px); border: 1px solid var(--border-highlight); border-radius: 20px; padding: 1rem; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 212, 255, 0.08); transition: box-shadow 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo); container-type: inline-size; container-name: hero-mockup; width: 100%; box-sizing: border-box; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .hero-preview-panel:hover .hero-preview-frame { box-shadow: 0 48px 96px rgba(0, 0, 0, 0.6), 0 0 80px rgba(0, 212, 255, 0.12); transform: translateY(-2px); } .hero-preview-frame .ui-mockup { height: 280px; border-radius: 12px; font-size: 0.7rem; } .hero-preview-frame .ui-mockup--dashboard { height: 100%; padding: 0.5rem 0.6rem; gap: 0.35rem; font-size: 0.62rem; } .hero-preview-frame .ui-mockup--hero-full { height: auto; min-height: 0; max-height: 100%; flex: 1; font-size: clamp(0.5rem, 1.55cqi, 0.6rem); gap: 0.35rem; overflow: hidden; } .hero-preview-disclaimer { font-size: 0.68rem; color: var(--text-muted); opacity: 0.6; text-align: center; margin-top: 0.75rem; line-height: 1.5; max-width: 100%; flex-shrink: 0; } .ui-mockup-split-dashboard { display: grid; grid-template-columns: 1fr; gap: 0.35rem; min-height: 0; min-width: 0; flex: none; } .ui-mockup-donut-panel, .ui-mockup-activity { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 0.35rem 0.45rem; min-height: 0; min-width: 0; overflow: hidden; } .ui-mockup-donut-panel { container-type: inline-size; container-name: donut-panel; display: flex; flex-direction: column; min-height: 0; } .ui-mockup-donut-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.2rem; flex: 1; min-height: 0; } .ui-mockup-donut { width: clamp(3.25rem, 42cqi, 4.5rem); height: clamp(3.25rem, 42cqi, 4.5rem); aspect-ratio: 1; border-radius: 50%; flex-shrink: 0; background: conic-gradient(#34d399 0 62.8%, #f87171 62.8% 95.2%, #fbbf24 95.2% 100%); display: flex; align-items: center; justify-content: center; position: relative; } .ui-mockup-donut::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: #0c1018; } .ui-mockup-donut-label { position: relative; z-index: 1; font-family: var(--font-heading); font-size: clamp(0.52rem, 16cqi, 0.82rem); font-weight: 700; color: var(--text-main); line-height: 1; } .ui-mockup-donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: clamp(0.4rem, 2vw, 0.75rem); font-size: clamp(0.46rem, 11cqi, 0.62rem); color: var(--text-muted); width: 100%; } .ui-mockup-donut-legend li { display: flex; align-items: center; gap: clamp(0.22rem, 3cqi, 0.35rem); white-space: nowrap; } .ui-mockup-donut-legend strong { color: var(--text-main); font-weight: 600; } .ui-mockup-legend-dot { width: clamp(5px, 4.5cqi, 7px); height: clamp(5px, 4.5cqi, 7px); border-radius: 50%; flex-shrink: 0; } .ui-mockup-legend-dot.green { background: #34d399; } .ui-mockup-legend-dot.red { background: #f87171; } .ui-mockup-legend-dot.amber { background: #fbbf24; } .ui-mockup-activity-header { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; margin-bottom: 0.25rem; } .ui-mockup-link { font-size: 0.45rem; color: var(--accent-blue); font-weight: 600; } .ui-mockup-activity-list { display: flex; flex-direction: column; gap: 0.15rem; } .ui-mockup-activity-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.3rem; align-items: center; padding: 0.18rem 0.25rem; border-radius: 6px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.03); min-width: 0; } .ui-mockup-sport-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(0, 212, 255, 0.08); color: var(--accent-blue); flex-shrink: 0; } .ui-mockup-activity-meta { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .ui-mockup-activity-meta .ui-mockup-cell { font-size: 0.48rem; } .ui-mockup-status { font-size: 0.42rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.12rem 0.35rem; border-radius: 999px; white-space: nowrap; } .ui-mockup-status.won { color: #34d399; background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.25); } .ui-mockup-status.lost { color: #f87171; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.25); } .ui-mockup-status.pending { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.25); } /* === NEW LANDING SECTIONS (Vantage-inspired) === */ .compare-section, .how-section, .value-strip { padding: 4rem 1.5rem; position: relative; z-index: 10; } /* Anchor target for the navbar Pricing link. Centers the strip in the viewport on arrival (50vh minus roughly half the section's height), with a 100px floor so it never lands under the fixed navbar on short screens. */ #pricing { scroll-margin-top: max(100px, calc(50vh - 300px)); } .compare-container, .how-container, .value-strip-container { max-width: 1100px; margin: 0 auto; text-align: center; } .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; text-align: left; } .compare-card { border-radius: 20px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.06); } .compare-card--before { background: linear-gradient(135deg, rgba(248, 113, 113, 0.06) 0%, rgba(15, 20, 35, 0.4) 100%); border-color: rgba(248, 113, 113, 0.15); } .compare-card--after { background: linear-gradient(135deg, rgba(52, 211, 153, 0.08) 0%, rgba(15, 20, 35, 0.4) 100%); border-color: rgba(52, 211, 153, 0.2); } .compare-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem; } .compare-card--before .compare-label { color: #f87171; } .compare-card--after .compare-label { color: #34d399; } .compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .compare-list li { display: flex; align-items: flex-start; gap: 0.65rem; color: var(--text-muted); line-height: 1.5; font-size: 0.95rem; } .compare-list svg { flex-shrink: 0; margin-top: 0.15rem; } .compare-card--before .compare-list svg { color: #f87171; } .compare-card--after .compare-list svg { color: #34d399; } .how-section { background: radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.04), transparent 55%); } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; text-align: left; } .how-card { background: linear-gradient(180deg, rgba(15, 20, 35, 0.6) 0%, rgba(10, 12, 20, 0.85) 100%); border: 1px solid var(--border-color); border-top: 1px solid var(--border-highlight); border-radius: 20px; padding: 1.75rem; } .how-step { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.2); margin-bottom: 0.75rem; } .how-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.2); display: flex; align-items: center; justify-content: center; color: var(--accent-blue); margin-bottom: 1rem; } .how-card h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-main); } .how-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin: 0; } .value-strip { background: radial-gradient(ellipse at 50% 100%, rgba(166, 60, 255, 0.05), transparent 60%); padding-bottom: 5rem; } .value-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-top: 2rem; max-width: 700px; margin-inline: auto; } .value-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 20px; padding: 2rem 1.5rem; text-align: center; } .value-card--highlight { background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(166, 60, 255, 0.08) 100%); border-color: rgba(0, 212, 255, 0.25); box-shadow: 0 20px 50px rgba(0, 212, 255, 0.08); } .value-card-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.5rem; } .value-card--highlight .value-card-label { color: var(--accent-blue); } .value-card-price { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 800; color: var(--text-main); line-height: 1.1; } .value-card-price.muted { color: rgba(255, 255, 255, 0.45); } .value-card-sub { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.35rem; } .value-vs { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); background: rgba(255, 255, 255, 0.05); border-radius: 999px; padding: 0.4rem 0.85rem; } .value-strip-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 1.5rem; opacity: 0.75; } /* === UI MOCKUP CONTAINER QUERIES === */ @container hero-mockup (min-width: 380px) and (max-width: 449px) { .ui-mockup-metrics--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ui-mockup-metrics--5 .ui-mockup-metric:last-child { grid-column: span 1; } } @container hero-mockup (min-width: 380px) { .ui-mockup-metrics--5 .ui-mockup-metric:last-child { grid-column: span 1; } .ui-mockup-split-dashboard { grid-template-columns: 1fr 1.05fr; align-items: stretch; min-height: clamp(5rem, 22cqi, 7rem); } } @container donut-panel (min-width: 160px) { .ui-mockup-donut { width: clamp(3.25rem, 46cqi, 5.5rem); height: clamp(3.25rem, 46cqi, 5.5rem); } } @container donut-panel (min-width: 220px) { .ui-mockup-donut-wrap { gap: 0.45rem; } .ui-mockup-donut { width: 68px; height: 68px; } .ui-mockup-donut-label { font-size: clamp(0.58rem, 14cqi, 0.88rem); } } @container hero-mockup (max-width: 379px) { .ui-mockup-donut-panel { min-height: clamp(5rem, 38cqi, 6.5rem); } } @container hero-mockup (min-width: 450px) { .ui-mockup-metrics--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @container hero-mockup (max-width: 359px) { .ui-mockup-table--confidence .ui-mockup-row { grid-template-columns: 0.65fr 0.85fr; } .ui-mockup-table--confidence .ui-mockup-row .ui-mockup-cell:nth-child(3), .ui-mockup-table--confidence .ui-mockup-row .ui-mockup-cell--bar, .ui-mockup-table--confidence .ui-mockup-row.header .ui-mockup-cell:nth-child(4) { display: none; } .ui-mockup-table--confidence .ui-mockup-row--perf { grid-template-areas: "conf record" "bar bar"; } .ui-mockup-table--confidence .ui-mockup-row-bar { display: block; } } .ui-mockup--hero-full .ui-mockup-activity-item:nth-child(n+5) { display: none; } @container card-mockup (max-width: 340px) { .ui-mockup-split { grid-template-columns: 1fr; } .ui-mockup-row { grid-template-columns: 1fr 0.75fr; } .ui-mockup-row .ui-mockup-cell:nth-child(n+3) { display: none; } } .hero-preview-glow { position: absolute; inset: -20%; background: radial-gradient(circle, rgba(0, 212, 255, 0.12) 0%, transparent 60%); pointer-events: none; z-index: -1; } @media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "copy preview" "metrics metrics"; gap: clamp(1.25rem, 2.5vh, 2rem) 3rem; align-items: center; } .hero-section.has-preview .hero-content { text-align: left; align-self: center; } .hero-preview-panel { max-width: none; margin-inline: 0; max-height: min(58vh, 560px); } .platform-strip-inner { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); padding: 0.95rem 1.75rem; text-align: left; } .platform-metrics { flex: 0 0 auto; width: auto; justify-content: flex-start; } .platform-strip-divider { width: 1px; height: auto; align-self: stretch; min-height: 44px; flex-shrink: 0; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12), transparent); } .platform-coverage { flex: 0 1 auto; width: auto; min-width: 0; align-items: flex-start; } .platform-coverage-header { justify-content: flex-start; } .platform-leagues { justify-content: flex-start; } } @media (min-width: 769px) and (max-width: 959px) { .hero-section.has-preview { height: auto; min-height: auto; max-height: none; overflow: visible; padding-bottom: 3rem; } .hero-section.has-preview > .hero-scroll-down-wrapper { display: none; } .hero-section.has-preview .hero-preview-panel { display: flex; max-width: min(100%, 34rem); margin-inline: auto; width: 100%; margin-bottom: 1rem; } .hero-section.has-preview .cta-container { margin-inline: auto; } .hero-grid { grid-template-areas: "copy" "preview" "metrics"; grid-template-rows: auto auto auto; padding: 0 1.5rem; gap: 2rem; } } @media (max-width: 768px) { html, body { overflow-x: clip; } .hero-section.has-preview { height: auto; min-height: auto; max-height: none; overflow: visible; padding-bottom: 3rem; } .hero-section.has-preview > .hero-scroll-down-wrapper { display: none; } .hero-grid { grid-template-areas: "copy" "preview" "metrics"; grid-template-rows: auto auto auto; padding: 0 1rem; gap: 1.75rem; } .hero-section.has-preview .hero-preview-panel { display: flex; max-width: min(100%, 32rem); margin-inline: auto; width: 100%; margin-bottom: 1rem; } .hero-section.has-preview .hero-content { padding: 0.5rem 0; } .hero-section.has-preview .cta-container { margin-inline: auto; } .description { font-size: 1rem; margin-bottom: 1.75rem; } .btn-hero { padding: 1rem 1.25rem !important; font-size: 0.95rem !important; width: 100%; max-width: 320px; box-sizing: border-box; } .cta-container { width: 100%; max-width: 320px; } .compare-grid { grid-template-columns: 1fr; } .how-grid { grid-template-columns: 1fr; } .value-compare { grid-template-columns: 1fr; gap: 0.75rem; } .value-vs { justify-self: center; } .compare-section, .how-section, .value-strip { padding: 3rem 1rem; } .ui-mockup-panel-header { flex-direction: column; align-items: flex-start; gap: 0.3rem; } .ui-mockup-panel-header .ui-mockup-badge { font-size: 0.42rem; max-width: 100%; white-space: normal; text-align: left; } } @media (max-width: 719px) { .platform-metrics { justify-content: center; } } @media (max-width: 480px) { .hero-preview-frame { padding: 0.55rem; } .cta-subtext { font-size: 0.82rem; } } /* ============================================================ TOUCH TARGET SIZING (WCAG 2.2 AA, 2.4.11 Target Size Minimum) ============================================================ An audit across 9 pages x 6 widths x 2 engines found 437 targets under the 24x24 minimum on touch viewports. They were all the same few shapes: footer navigation links resolving to 23px tall (a 0.95rem line box with margin but no padding — margin separates, it does not enlarge the target), the search field at 22px, and the modal close button at 15px wide. Scoped to `hover: none` on purpose. These are pointer-precision problems; a mouse hits a 23px link fine, and padding them unconditionally would loosen a desktop footer that is deliberately tight. Appended at the end of the file so it wins on source order — the base rules for these selectors appear earlier (.link-column a at ~1152), and equal specificity means last one wins. NOT included: links inside running prose (the `https://www.betessi.com` text links on the legal pages, ~21px). WCAG 2.2 exempts targets in a sentence, and padding an inline link would break the line spacing around it. */ @media (hover: none) { /* The sidebar links were the bulk of the finding, and the cause is the display type rather than the spacing: they are `display: inline`, so their box is sized by the font (~23px) and the generous 29.92px line-height does nothing for the tap target. Padding alone would not have fixed it — going to block is what lets the link fill its
  • and take the padding. */ .sidebar-content .nav-group ul li a { display: block; padding-block: 5px; } .link-column a { /* 0.95rem text is ~21-23px of line box; 4px top and bottom clears 24 with margin left alone so the visual rhythm of the column does not shift. */ padding-block: 4px; } .footer-bottom a, .bottom-container a { display: inline-block; padding-block: 4px; } .social-icons a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .search-modal-header input { min-height: 44px; } .search-modal-header .close-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } }