/* ============================================================================= MOBILE-ONLY STYLES - CONSOLIDATED & DEDUPLICATED ============================================================================= PURPOSE: This file contains ALL mobile-specific styles (≤768px) for the AWREAi landing page. Desktop and tablet are NEVER affected by this file. ARCHITECTURE: - ALL styles for viewports ≤768px consolidated here - NO base styles (outside media queries) - NO styles affecting desktop/tablet viewports (>768px) - SINGLE definition per selector per breakpoint (no duplicates) SECTIONS: 1. Global Mobile Overrides (768px) 2. Navigation 3. Hero Section 4. Problem Section 5. Technology Section 6. Speech Bubble / Pie Chart 7. Trust Section 8. Use Cases Section 9. Deciding CTA Section 10. Contact Section 11. Footer 12. Lead Gate & Auth Modals 13. User Nav 14. Neural Transition BREAKPOINTS (Progressive Enhancement): - 768px: Standard mobile (tablets & phones) - 640px: Large phones - 480px: Standard phones - 414px: iPhone standard/Pro - 375px: iPhone SE / small phones CONSOLIDATED: 2025-12-25 DEDUPLICATED: 2025-12-25 SOURCE: Fused from styles-enhanced.css, responsive.css, neural-transition.css ============================================================================= */ /* ============================================================================= 768px - STANDARD MOBILE (Tablets & Phones) ============================================================================= */ @media (max-width: 768px) { /* ------------------------------------------------------------------------- CSS CUSTOM PROPERTIES - Mobile values ------------------------------------------------------------------------- */ :root { --text-6xl: 2.5rem; --text-5xl: 2rem; --text-4xl: 1.75rem; --text-3xl: 1.5rem; --text-2xl: 1.25rem; --nav-height: 70px; } /* ------------------------------------------------------------------------- SAFE AREA INSETS — iPhone notch / Dynamic Island support Requires viewport-fit=cover in ------------------------------------------------------------------------- */ .nav { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .footer { padding-bottom: env(safe-area-inset-bottom); } /* Fixed/absolute elements at screen edges */ .lead-gate, .intro-modal { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* ------------------------------------------------------------------------- NAVIGATION - Mobile hamburger menu ------------------------------------------------------------------------- */ /* Scale down logo for mobile (desktop is 97px - way too big) */ .nav-logo { margin-top: -5px; } .logo-img { height: 48px !important; /* Much smaller for mobile */ } .page-home .logo-img { height: 52px !important; /* Slightly larger on home, but still mobile-appropriate */ } .logo-wordmark { font-size: 6px !important; letter-spacing: 0.12em; margin-top: -4px; } .page-home .logo-wordmark { font-size: 7px !important; margin-top: -5px; } .nav.scrolled .logo-img { height: 42px !important; } .nav.scrolled .logo-wordmark { font-size: 5px !important; } .nav-toggle { display: block; z-index: 1001; width: 44px; /* 2026-05-05 v3: enlarged 36→44 per Apple HIG tap-target minimum */ height: 44px; } .nav-menu { position: fixed; top: 0; right: -100%; left: auto !important; /* Reset desktop centering (left: 50%) */ transform: none !important; /* Reset desktop transform (translateX(-50%)) */ width: 80%; max-width: 300px; height: 100vh; background: #000000; flex-direction: column; align-items: flex-start; padding: calc(var(--nav-height) + var(--space-8)) var(--space-6) var(--space-8); gap: var(--space-4); box-shadow: var(--shadow-xl); transition: right var(--transition-base); z-index: 1000; } .nav-menu.active { right: 0; } .nav-link { font-size: var(--text-lg); width: 100%; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; } .nav-link::after { display: none; } .nav-cta { margin-top: var(--space-4); width: 100%; text-align: center; } /* ===== MOBILE BUTTON CLEANUP ===== */ /* Hide nav auth button on mobile - Login appears below Request Access in hero */ .nav-auth { display: none !important; } /* Hamburger animation when active */ .nav-toggle.active .hamburger { background: transparent; } .nav-toggle.active .hamburger::before { top: 0; transform: rotate(45deg); } .nav-toggle.active .hamburger::after { top: 0; transform: rotate(-45deg); } /* Mobile nav overlay */ .nav-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: var(--transition-base); z-index: 999; } .nav-overlay.active { opacity: 1; visibility: visible; } /* Nav dropdown — mobile column layout (fused from styles-enhanced.css:754-784) */ .nav-dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; min-width: 100%; background: rgba(0, 0, 0, 0.4); border: none; border-radius: 10px; margin-top: 0.35rem; padding: 0.25rem; box-shadow: none; display: none; align-items: stretch; gap: 0.1rem; } .nav-dropdown-menu::before { display: none; } .nav-dropdown.active .nav-dropdown-menu { display: flex; flex-direction: column; } .nav-dropdown-item { padding: 0.35rem 0.5rem; } /* ------------------------------------------------------------------------- HERO SECTION - Aggressive vertical spacing + centered layout AUTHORITATIVE: Merged from mobile-only + responsive.css ------------------------------------------------------------------------- */ .hero { padding-top: 110px !important; /* More breathing room below smaller mobile nav */ padding-bottom: 0 !important; margin-bottom: 0 !important; min-height: auto !important; height: auto !important; } .hero-content { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 1rem; gap: 0.5rem; } /* FUSED: line-height, gap, margin from original + font-size from responsive */ .hero-title { text-align: center; line-height: 1.1; gap: 0.2rem; margin-bottom: 1rem; font-size: var(--text-4xl); } .hero-title .title-line { justify-content: center; text-align: center; margin: 0; padding: 0; } /* Hide long subtitle for cleaner mobile - display:none overrides font-size */ .hero-subtitle { display: none; } /* FUSED: margin-top + flex-direction + tighter gap */ .hero-cta { margin-top: 1rem; flex-direction: column; gap: 0.5rem; } .hero-cta .btn { width: 100%; } .scroll-indicator { display: none; } /* Hide bokeh canvas on mobile — no side margins (fused from styles-enhanced.css:1606-1610) */ #bokeh-canvas { display: none; } /* Hide "Enter Site" skip button - only Request Access needed */ .intro-skip { display: none !important; } /* Intro Header - stack vertically on mobile */ .intro-header { flex-direction: column !important; align-items: center !important; gap: 1rem !important; padding-top: calc(2rem + 30px) !important; } /* Visitor Counter - horizontal layout: label left, number right */ .intro-logo.visitor-counter { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 200px !important; gap: 1rem !important; } .visitor-counter .counter-label { font-size: 0.55rem !important; } .visitor-counter .counter-value { font-size: 1.3rem !important; } /* Patent Pending badge - centered below visitor counter */ .intro-badge { margin-top: 0.5rem !important; } /* Headline section - move down on mobile */ .intro-main { margin-top: 110px !important; padding-top: 0 !important; } /* Button stack container - ensures same width */ .intro-buttons-stack { display: inline-flex; flex-direction: column; align-items: stretch; margin-top: 30px; } /* Request Access - full width of container */ .intro-buttons-stack .intro-cta { width: 100%; justify-content: center; } /* Mobile Login Button - exact same width via container. * 2026-05-05 v3: theme-aware colors via gate vars (was hardcoded cream → invisible on light theme). */ .intro-login-mobile { display: block !important; width: 100%; padding: 0.35rem 2rem; background: transparent; border: 1px solid rgba(var(--gate-text-primary-rgb), 0.3); border-top: none; border-radius: 0 0 6px 6px; color: rgba(var(--gate-text-primary-rgb), 0.6); font-family: 'Space Grotesk', -apple-system, sans-serif; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.1em; text-align: center; cursor: pointer; transition: all 0.3s ease; /* Reveal animation */ opacity: 0; transform: translateY(-10px); animation: loginReveal 0.5s ease-out 1.2s forwards; } @keyframes loginReveal { to { opacity: 1; transform: translateY(0); } } .intro-login-mobile:hover, .intro-login-mobile:active { background: rgba(var(--gate-text-primary-rgb), 0.06); color: rgba(var(--gate-text-primary-rgb), 0.9); } /* Intro headline — responsive sizing (fused from styles-enhanced.css:2324-2326) */ .intro-headline { font-size: clamp(1.8rem, 8vw, 2.8rem); } /* Intro footer separator — hidden on mobile (fused from styles-enhanced.css:2320-2322) */ .intro-footer .sep { display: none; } /* Intro Footer - center nav items, music credit below */ .intro-footer { flex-wrap: wrap !important; justify-content: center !important; gap: 0.5rem !important; margin-top: 50px !important; } /* Hide audio toggle on mobile to simplify footer */ .intro-audio-toggle { display: none !important; } /* Theme toggle stays visible on mobile (single platform-relevant footer control). * Tap target enlarged from 28px → 44px per Apple HIG / Material Design minimums. * (2026-05-05 v3 — companion to .intro-login-mobile theme-aware fix above.) */ .intro-theme-toggle { width: 44px !important; height: 44px !important; } .intro-theme-toggle .theme-icon { width: 18px; height: 18px; } /* Music credit on its own line below */ .music-credit { width: 100% !important; text-align: center !important; margin-top: 0.5rem !important; order: 10 !important; } /* ===== MOBILE MODAL FIX - COMPACT ===== */ .intro-modal { display: flex !important; align-items: center !important; justify-content: center !important; padding: 10px !important; } .intro-modal-content { position: relative !important; width: 100% !important; max-width: 100% !important; max-height: 90vh !important; overflow-y: auto !important; margin: 0 !important; padding: 40px 16px 20px !important; border-radius: 12px !important; box-sizing: border-box !important; transform: none !important; } .intro-modal-close { display: flex !important; visibility: visible !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 8px !important; right: 8px !important; width: 44px !important; /* 2026-05-05 v3: enlarged 36→44 per Apple HIG tap-target minimum */ height: 44px !important; font-size: 22px !important; line-height: 1 !important; background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 50% !important; color: #fff !important; cursor: pointer !important; z-index: 100 !important; opacity: 1 !important; } /* Compact contact info */ .contact-info-grid { display: none !important; } .contact-divider { display: none !important; } .modal-pre { font-size: 0.55rem !important; margin-bottom: 0.3rem !important; } .intro-modal-content h2 { font-size: 1.1rem !important; margin: 0 0 0.5rem !important; } .modal-text { font-size: 0.75rem !important; margin-bottom: 1rem !important; line-height: 1.4 !important; } .form-group { margin-bottom: 0.6rem !important; } .form-group label { font-size: 0.65rem !important; margin-bottom: 0.2rem !important; } .form-group input, .form-group select, .form-group textarea { font-size: 16px !important; padding: 0.5rem !important; } .form-group textarea { min-height: 60px !important; } .intro-modal-content .btn { padding: 0.6rem 1.2rem !important; font-size: 0.8rem !important; } /* ------------------------------------------------------------------------- AWREAi BRANDING - Center on own row ------------------------------------------------------------------------- */ .title-line-1 { flex-wrap: wrap; } .title-line-1 .verb-word { width: 100%; display: block; margin-top: 0.2rem; font-size: 0.7em; } .title-line-2 { font-size: 0.7em; margin-top: 0.2rem; } /* ------------------------------------------------------------------------- VERTICAL SPACING REDUCTION - Aggressive mobile layout ------------------------------------------------------------------------- */ #problem { padding-top: 10px !important; padding-bottom: 0.5rem !important; margin-top: 0 !important; margin-bottom: 0 !important; } #problem .section-header { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 1rem !important; } #problem .section-title { margin-top: 0 !important; margin-bottom: 10px !important; padding-top: 0 !important; } #problem .container { padding-top: 0 !important; } .hero-badge { margin-top: 0.5rem !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } .problem-conclusion { margin-top: 0.5rem !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #technology { padding-top: 30px !important; margin-top: 0 !important; } .technology .section-header { margin-bottom: 1rem !important; } .section { padding-top: 2rem; padding-bottom: 2rem; } .section-header { margin-bottom: 1.5rem; } .section-subtitle { font-size: var(--text-base); } /* ------------------------------------------------------------------------- PROBLEM SECTION - Single column grid ------------------------------------------------------------------------- */ .problem-grid { grid-template-columns: 1fr; gap: var(--space-6); } .problem-card { padding: 1rem; } .problem-card .led-display { transform: scale(0.6); transform-origin: center center; } /* ------------------------------------------------------------------------- COMPARISON SECTION ------------------------------------------------------------------------- */ .comparison-card { padding: var(--space-6); } /* ------------------------------------------------------------------------- TECH GRID - Single column ------------------------------------------------------------------------- */ .tech-grid { grid-template-columns: 1fr; gap: var(--space-5); } .tech-card { padding: var(--space-6); } /* CRITICAL: Reset desktop z-index that causes tech cards to overlap use-cases */ .section.technology .tech-card { z-index: 1; /* Reset from desktop's z-index: 15 */ } .section.technology .tech-grid { z-index: 1; /* Reset from desktop's z-index: 15 */ } .section.technology > .container { z-index: 1; /* Reset from desktop's z-index: 15 */ } /* ------------------------------------------------------------------------- ARCHITECTURE SECTION ------------------------------------------------------------------------- */ .arch-diagram { gap: var(--space-4); } .arch-node { padding: var(--space-4) var(--space-5); min-width: 150px; } .arch-label { font-size: var(--text-sm); } .arch-sublabel { font-size: var(--text-xs); } .arch-pipelines { flex-direction: column; gap: var(--space-4); } .arch-split, .arch-merge { display: none; } /* ------------------------------------------------------------------------- AUDIO GRID - Single column ------------------------------------------------------------------------- */ .audio-grid { grid-template-columns: 1fr; gap: var(--space-5); } .audio-card { padding: var(--space-6); } .audio-icon { width: 40px; height: 40px; } /* ------------------------------------------------------------------------- SPEECH BUBBLE / PIE CHART - Mobile sizing AUTHORITATIVE: Using clamp() values for responsiveness ------------------------------------------------------------------------- */ .speech-bubble-player { width: 85vw; height: 85vw; max-width: 520px; max-height: 520px; } /* FUSED: overflow + height */ .speech-bubble-svg { overflow: hidden; height: 100%; } .bubble-center { top: calc(50% + 42px); } .zone-text { font-size: clamp(10px, 2.5vw, 15px); letter-spacing: 0.1em; } /* AUTHORITATIVE: Using clamp() for responsive sizing */ .center-orb { width: clamp(50px, 12vw, 72px); height: clamp(50px, 12vw, 72px); } .center-pulse { width: clamp(70px, 16vw, 100px); height: clamp(70px, 16vw, 100px); } .orb-text { font-size: clamp(8px, 2vw, 12px); } .orb-icon { font-size: 14px; } /* Pie Chart Container */ .pie-container { gap: var(--space-6); } .pie-chart { width: 320px; height: 320px; } .pie-center { width: 80px; height: 80px; } .slice-text { font-size: 7px; letter-spacing: 0.1em; } .sub-slice-text { font-size: 10px; } .pie-description { min-height: 100px; } .desc-content h4 { font-size: var(--text-lg); } .desc-content p { font-size: var(--text-sm); } /* Hero Radial - Specific overrides */ .pie-chart-hero { width: 380px; height: 380px; } .pie-chart-hero .pie-center { width: 100px; height: 100px; } .pie-chart-hero .center-orb { width: 65px; height: 65px; } .pie-chart-hero .orb-icon { font-size: 18px; } .pie-chart-hero .slice-text { font-size: 9px; letter-spacing: 0.1em; } .pie-chart-hero .sub-slice-text { font-size: 12px; } /* Speech bubble player with hero class - larger sizing */ .pie-chart-hero.speech-bubble-player { width: 90vw !important; height: 90vw !important; max-width: 580px !important; max-height: 580px !important; } .pie-chart-hero.speech-bubble-player .bubble-center { top: calc(50% + 42px); } .pie-chart-hero.speech-bubble-player .center-orb { width: clamp(60px, 14vw, 80px); height: clamp(60px, 14vw, 80px); } .pie-chart-hero.speech-bubble-player .center-pulse { width: clamp(85px, 18vw, 110px); height: clamp(85px, 18vw, 110px); } .pie-chart-hero.speech-bubble-player .zone-text { font-size: clamp(11px, 3vw, 17px); } .hero-radial-close { top: calc(var(--nav-height) + var(--space-2)); right: var(--space-4); width: 44px; height: 44px; font-size: 24px; } .pie-description-hero .desc-content h4 { font-size: var(--text-xl); } .pie-description-hero .desc-content p { font-size: var(--text-base); } /* ------------------------------------------------------------------------- PATENT OVERLAY - Mobile ------------------------------------------------------------------------- */ .hero-patent-close { top: calc(var(--nav-height) + var(--space-2)); right: var(--space-4); width: 44px; height: 44px; font-size: 24px; } .patent-content { margin: var(--space-4); padding: var(--space-8); max-width: 100%; } .patent-header h3 { font-size: var(--text-2xl); } .patent-description { font-size: var(--text-sm); } .highlight-item { font-size: var(--text-xs); } /* ------------------------------------------------------------------------- USE CASES SECTION ------------------------------------------------------------------------- */ .use-cases-grid { grid-template-columns: 1fr; gap: var(--space-6); } .use-case-card { padding: var(--space-6); } .use-case-icon { width: 48px; height: 48px; } .use-case-prompt { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); } .use-case-response { font-size: var(--text-sm); padding-left: var(--space-3); } /* ------------------------------------------------------------------------- ABOUT SECTION ------------------------------------------------------------------------- */ .about-philosophy { padding: var(--space-6); } .about-patent { flex-direction: column; gap: var(--space-2); } /* ------------------------------------------------------------------------- DECIDING CTA SECTION ------------------------------------------------------------------------- */ .deciding-form-row { flex-direction: column; align-items: center; } .deciding-form .form-group { max-width: 100%; width: 100%; } .deciding-submit { width: 100%; justify-content: center; } /* ------------------------------------------------------------------------- CONTACT SECTION ------------------------------------------------------------------------- */ .contact-content { grid-template-columns: 1fr; gap: var(--space-8); } .contact .section-title { text-align: center; } .contact-description { text-align: center; } .contact-details { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: var(--space-6); text-align: center; } .contact-form { padding: var(--space-6); } /* ------------------------------------------------------------------------- FOOTER ------------------------------------------------------------------------- */ .footer { padding: var(--space-10) 0; } .footer-links { flex-wrap: wrap; justify-content: center; gap: var(--space-4); } /* Footer layout — mobile column + compact spacing (fused from styles-enhanced.css:5163-5187) */ .about-contact-cta { margin-bottom: -10px; } .about-contact-cta .container { translate: 0 -33px; } .footer-content { gap: var(--space-2); } .footer-brand { flex-direction: row !important; gap: var(--space-1); align-items: center; } .footer-logo-img { height: 22px; } /* User nav button & panel — REMOVED (2026-02-15) */ /* ------------------------------------------------------------------------- NEURAL TRANSITION - Mobile layout Needs to overlap tech cards for gradient blend effect ------------------------------------------------------------------------- */ .neural-transition { height: 250px; /* Taller to cover more area */ margin-top: -180px; /* Pull UP into tech section to overlay last cards */ margin-bottom: -40px; } .section.technology { padding-bottom: calc(var(--space-16) + 100px) !important; /* Extra padding for gradient overlay zone */ } /* Ensure tech cards stay BELOW the gradient overlay */ .section.technology .tech-card { z-index: 1; } .section.technology::after { height: 250px !important; /* Fade gradient at bottom of tech section */ z-index: 5 !important; } .section.use-cases { margin-top: -80px; /* Reduced from -150px to prevent overlap */ padding-top: 40px !important; z-index: 20; /* Ensure use-cases is ABOVE technology section (z-index: 1) */ background: linear-gradient( to bottom, transparent 0%, rgba(248, 246, 238, 0.3) 30px, rgba(248, 246, 238, 0.6) 60px, rgba(248, 246, 238, 0.9) 90px, #F8F6EE 120px, #F8F6EE 100% ) !important; } /* CRITICAL FIX: Reset desktop translateY that was burying content */ /* Using !important to override neural-transition.css desktop values */ .section.use-cases > .container { transform: translateY(0) !important; /* Reset desktop's -260px */ margin-bottom: 0 !important; /* Reset desktop's -260px margin compensation */ position: relative; z-index: 25; /* Above everything */ } .section.use-cases .section-header { transform: translateY(0) !important; /* Reset desktop's -25px */ margin-bottom: 24px !important; } .section.use-cases .use-cases-grid { margin-top: 0 !important; /* Reset any negative margin */ } } /* ============================================================================= 640px - LARGE PHONES ============================================================================= */ @media (max-width: 640px) { /* Trust grid - single column */ .trust-grid { grid-template-columns: 1fr; } } /* ============================================================================= 480px - STANDARD PHONES ============================================================================= */ @media (max-width: 480px) { /* ------------------------------------------------------------------------- CSS CUSTOM PROPERTIES - Small phone values ------------------------------------------------------------------------- */ :root { --text-6xl: 2rem; --text-5xl: 1.75rem; --text-4xl: 1.5rem; --text-3xl: 1.25rem; } /* ------------------------------------------------------------------------- GLOBAL OVERFLOW PREVENTION ------------------------------------------------------------------------- */ html, body { overflow-x: hidden !important; max-width: 100vw !important; position: relative; /* CRITICAL: Prevent rubber-band overscroll that causes white flash */ /* Was: contain (allows bounce). Changed to none (no bounce, no flash) */ overscroll-behavior-y: none; } .hero-section { overflow-x: hidden !important; max-width: 100vw; } .awreai-led-container svg { max-width: 100%; } /* ------------------------------------------------------------------------- CONTAINER - Tighter padding ------------------------------------------------------------------------- */ .container { padding: 0 var(--space-4); } /* ------------------------------------------------------------------------- HERO - Small phone sizing AUTHORITATIVE: Merged text-align + font-size ------------------------------------------------------------------------- */ .hero-title { text-align: center; font-size: var(--text-3xl); } .hero-subtitle { font-size: var(--text-sm); } .title-line-1 { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.25em; width: 100%; } .title-line-2 { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.25em; width: 100%; } .awreai-contour.led-active { letter-spacing: 0; margin-right: 6px; position: relative; top: 5px; } .awreai-led-container { letter-spacing: 0; } .badge { font-size: 10px; padding: var(--space-1) var(--space-3); } /* ------------------------------------------------------------------------- CARDS - Tighter padding ------------------------------------------------------------------------- */ .comparison-card, .tech-card, .audio-card, .use-case-card { padding: var(--space-5); } .comparison-list li { font-size: var(--text-sm); } /* ------------------------------------------------------------------------- ARCHITECTURE - Smaller nodes ------------------------------------------------------------------------- */ .arch-node { padding: var(--space-3) var(--space-4); min-width: 120px; } /* ------------------------------------------------------------------------- AUDIO - Smaller text ------------------------------------------------------------------------- */ .audio-title { font-size: var(--text-base); } .audio-description { font-size: var(--text-xs); } .audio-btn { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); } /* ------------------------------------------------------------------------- SPEECH BUBBLE / PIE CHART - Phone sizing AUTHORITATIVE: Using clamp() for responsiveness ------------------------------------------------------------------------- */ .speech-bubble-player { width: 88vw; height: 88vw; max-width: 400px; max-height: 400px; } .speech-bubble-svg { height: 100%; } .bubble-center { top: calc(50% + 31px); } .zone-text { font-size: clamp(9px, 2.8vw, 13px); letter-spacing: 0.08em; } /* AUTHORITATIVE: Using clamp() for responsive sizing */ .center-orb { width: clamp(44px, 13vw, 60px); height: clamp(44px, 13vw, 60px); } .center-pulse { width: clamp(60px, 17vw, 85px); height: clamp(60px, 17vw, 85px); } .orb-text { font-size: clamp(7px, 2.2vw, 10px); } .orb-icon { font-size: 12px; } /* Pie Chart - Small phones */ .pie-chart { width: 280px; height: 280px; } .pie-center { width: 65px; height: 65px; } .slice-text { font-size: 6px; letter-spacing: 0.08em; } .sub-slice-text { font-size: 9px; } .pie-description { min-height: 90px; } .desc-content h4 { font-size: var(--text-base); } .desc-content p { font-size: var(--text-xs); } /* Hero radial on phones */ .pie-chart-hero.speech-bubble-player { width: 92vw !important; height: 92vw !important; max-width: 420px !important; max-height: 420px !important; } .pie-chart-hero.speech-bubble-player .bubble-center { top: calc(50% + 31px); } .pie-chart-hero.speech-bubble-player .center-orb { width: clamp(50px, 14vw, 65px); height: clamp(50px, 14vw, 65px); } .pie-chart-hero.speech-bubble-player .zone-text { font-size: clamp(10px, 3.2vw, 14px); } /* ------------------------------------------------------------------------- ABOUT SECTION ------------------------------------------------------------------------- */ .about-description { font-size: var(--text-base); } .about-philosophy h3 { font-size: var(--text-lg); } .about-philosophy p { font-size: var(--text-sm); } /* ------------------------------------------------------------------------- CONTACT SECTION ------------------------------------------------------------------------- */ .contact-form { padding: var(--space-5); } .form-input { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); } /* ------------------------------------------------------------------------- FOOTER ------------------------------------------------------------------------- */ .footer-brand .logo-text { font-size: var(--text-xl); } .footer-links { gap: var(--space-3); } .footer-links a { font-size: var(--text-xs); } /* ------------------------------------------------------------------------- LEAD GATE MODAL ------------------------------------------------------------------------- */ .lead-gate-content { padding: var(--space-4); } .lead-gate-card { padding: var(--space-8); } .lead-gate-header h2 { font-size: var(--text-xl); } .lead-gate-logo { height: 48px; } /* ------------------------------------------------------------------------- VERIFICATION STATES ------------------------------------------------------------------------- */ .verification-pending h2, .verification-error h2 { font-size: var(--text-xl); } .pending-icon, .error-icon { width: 80px; height: 80px; } .pending-icon svg, .error-icon svg { width: 48px; height: 48px; } .email-display { font-size: var(--text-sm); padding: var(--space-3) var(--space-4); } /* ------------------------------------------------------------------------- DECIDING CTA SECTION ------------------------------------------------------------------------- */ .deciding-section { padding: var(--space-16) 0; } .deciding-header .section-title { font-size: var(--text-2xl); } .deciding-pending .pending-icon { width: 64px; height: 64px; } .deciding-pending h3 { font-size: var(--text-xl); } /* ------------------------------------------------------------------------- AUTH MODAL ------------------------------------------------------------------------- */ .auth-modal-content { padding: var(--space-8); margin: 0 var(--space-3); } .auth-form h2 { font-size: var(--text-xl); } .auth-pending .pending-icon { width: 80px; height: 80px; } /* ------------------------------------------------------------------------- NEURAL TRANSITION - Small phone layout Gradient starts AFTER tech card ends (no clipping) MUST start with EXACT tech section bottom color: --primary-dark = #1E2A1F ------------------------------------------------------------------------- */ .neural-transition { height: 160px !important; margin-top: 0 !important; /* Start at tech section end - NO card overlap */ margin-bottom: -130px !important; /* Pull use-cases up to reduce gap */ z-index: 5 !important; /* Gradient: EXACT tech bottom color → greens → cream */ background: linear-gradient( to bottom, #1E2A1F 0%, /* EXACT match: --primary-dark (tech section bottom) */ #243024 10%, /* Slightly lighter forest */ #2C3E2D 20%, /* --primary */ #3D5A3F 35%, /* --primary-light */ #5A7A5C 50%, /* Mid sage green */ #8AAA8C 65%, /* Light sage */ #B8D0B5 78%, /* Pale sage */ #DDE8DA 88%, /* Very light green-cream */ #F8F6EE 100% /* Cream destination (--bg-warm) */ ) !important; } .section.technology { padding-bottom: 8px !important; /* Minimal padding - card nearly touches gradient */ } /* CRITICAL: Last tech cards render ABOVE neural transition */ .section.technology .tech-card:nth-child(n+5) { z-index: 15 !important; position: relative; } .section.technology::after { display: none !important; } .section.use-cases { margin-top: -30px !important; padding-top: 16px !important; /* TRANSPARENT so neural gradient shows through, fades to cream */ background: linear-gradient( to bottom, transparent 0px, transparent 100px, rgba(248, 246, 238, 0.5) 120px, #F8F6EE 150px, #F8F6EE 100% ) !important; } .section.use-cases .section-header { background: transparent !important; position: relative; z-index: 25; } .section.use-cases .section-subtitle { color: #2D4A2E !important; opacity: 1 !important; } .section.use-cases .use-case-card:first-child { background: linear-gradient(rgb(255, 255, 255) 0%, rgb(250, 249, 245) 100%) !important; } } /* ============================================================================= 414px - iPHONE PRO/STANDARD ============================================================================= */ @media (max-width: 414px) { /* Speech bubble player - iPhone standard sizing */ .speech-bubble-player { width: 90vw; height: 90vw; max-width: 360px; max-height: 360px; } .bubble-center { top: calc(50% + 26px); } .zone-text { font-size: clamp(8px, 2.6vw, 11px); } .center-orb { width: clamp(40px, 12vw, 52px); height: clamp(40px, 12vw, 52px); } .center-pulse { width: clamp(55px, 16vw, 75px); height: clamp(55px, 16vw, 75px); } .orb-text { font-size: clamp(6px, 2vw, 9px); } /* Hero radial on iPhone standard */ .pie-chart-hero.speech-bubble-player { width: 94vw !important; height: 94vw !important; max-width: 380px !important; max-height: 380px !important; } .pie-chart-hero.speech-bubble-player .bubble-center { top: calc(50% + 26px); } .pie-chart-hero.speech-bubble-player .center-orb { width: clamp(46px, 13vw, 58px); height: clamp(46px, 13vw, 58px); } .pie-chart-hero.speech-bubble-player .zone-text { font-size: clamp(9px, 3vw, 12px); } } /* ============================================================================= 375px - iPHONE SE / SMALL PHONES ============================================================================= */ @media (max-width: 375px) { /* Title lines - tighter gaps */ .title-line-1, .title-line-2 { gap: 0.2em; } /* Speech bubble player - iPhone SE sizing */ .speech-bubble-player { width: 92vw; height: 92vw; max-width: 340px; max-height: 340px; } .bubble-center { top: calc(50% + 22px); } .zone-text { font-size: clamp(7px, 2.4vw, 10px); letter-spacing: 0.06em; } .center-orb { width: clamp(36px, 11vw, 46px); height: clamp(36px, 11vw, 46px); } .center-pulse { width: clamp(50px, 15vw, 65px); height: clamp(50px, 15vw, 65px); } .orb-text { font-size: clamp(5px, 1.8vw, 8px); } /* Hero radial on iPhone SE */ .pie-chart-hero.speech-bubble-player { width: 95vw !important; height: 95vw !important; max-width: 350px !important; max-height: 350px !important; } .pie-chart-hero.speech-bubble-player .bubble-center { top: calc(50% + 22px); } .pie-chart-hero.speech-bubble-player .center-orb { width: clamp(40px, 12vw, 50px); height: clamp(40px, 12vw, 50px); } .pie-chart-hero.speech-bubble-player .zone-text { font-size: clamp(8px, 2.6vw, 10px); } } /* ============================================================================= LANDSCAPE MOBILE - Phones in landscape orientation ============================================================================= */ @media (max-width: 896px) and (orientation: landscape) { .hero { min-height: auto; padding: var(--space-16) 0; } .hero-content { padding: var(--space-4); } .hero-title { font-size: var(--text-3xl); } .scroll-indicator { display: none; } } /* ============================================================================= MOBILE REDESIGN 2026-06-13 — VERTICAL COMPRESSION + LAYOUT FIXES (Phase 2) ----------------------------------------------------------------------------- MEASURED (headless iPhone, vh=664): the post-sign-in page was 7.1 screens. Height concentrated in technology (1.87 / 6 cards) + trust (1.49 / 4 cards) + problem (1.02). Phase 1's gentle card-padding trim barely moved it. This pass compresses card INTERNALS hard, puts the 4 trust cards in 2 columns, tightens every section's rhythm, and trims the sparse hero/deciding/problem zones. ≤768px ONLY → desktop is untouched by definition. The green neural-transition seam is preserved: .section.technology's padding-bottom out-specifies the global .section rule below, so the gradient overlap is unaffected. ============================================================================= */ @media (max-width: 768px) { /* ---- Global section rhythm (technology's transition padding out-specifies this) ---- */ .section { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; } .section-header { margin-bottom: 0.9rem !important; } .section-title { font-size: 1.4rem !important; } .section-subtitle { font-size: 0.85rem !important; } /* ---- Hero: trim the top gap below the nav ---- */ .hero { padding-top: 78px !important; } /* ---- Problem: tighter gaps, smaller red LEDs, smaller conclusion ---- */ #problem { padding-top: 1.3rem !important; } .problem-grid { gap: 0.4rem !important; } .problem-card { padding: 0.4rem !important; } .problem-card .led-display { transform: scale(0.5) !important; } .problem-conclusion { font-size: 1.35rem !important; line-height: 1.15 !important; margin: 0.6rem 0 0 !important; } /* ---- Technology (was 1.87 screens / 6 cards): compress internals hard ---- */ .tech-grid { gap: 0.5rem !important; } .tech-card { padding: 0.8rem 1rem !important; border-width: 1px !important; } .tech-icon { width: 28px !important; height: 28px !important; margin-bottom: 0.35rem !important; } .tech-icon svg { width: 100% !important; height: 100% !important; } .tech-title { font-size: 1rem !important; margin-bottom: 0.1rem !important; } .tech-description { font-size: 0.8rem !important; line-height: 1.3 !important; } /* ---- Use-cases: single column + compact ---- */ .section.use-cases .use-cases-grid { grid-template-columns: 1fr !important; gap: 0.6rem !important; } .section.use-cases .use-case-card { padding: 0.8rem !important; } .use-case-icon { width: 36px !important; height: 36px !important; } .use-case-title { font-size: 1rem !important; } /* ---- Trust (was 1.49 screens / 4 cards): 2-column grid + compact ---- */ .trust-grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; } .trust-card { padding: 0.8rem 0.55rem !important; } .trust-icon { width: 30px !important; height: 30px !important; margin-bottom: 0.25rem !important; } .trust-card h3 { font-size: 0.82rem !important; margin-bottom: 0.15rem !important; } .trust-card p { font-size: 0.7rem !important; line-height: 1.25 !important; } /* ---- Deciding CTA (was --space-16 = 64px padding) ---- */ .deciding-section { padding: 1.6rem 0 !important; } /* ---- FOOTER: desktop is a 3-column flex row that overlaps on mobile. Stack into one clean centered column. ---- */ .footer { padding: 1.4rem 0 calc(1.4rem + env(safe-area-inset-bottom)) !important; } .footer-content { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 1.1rem !important; } .footer-brand { flex-direction: column !important; gap: 0.4rem !important; } .footer-links { flex-wrap: wrap !important; justify-content: center !important; gap: 0.5rem 1.1rem !important; } .footer-legal { text-align: center !important; } } /* ============================================================================= MOBILE FRONT-PAGE REDESIGN 2026-06-13 — "POST-IT PERFORATED" (Phase 4) ----------------------------------------------------------------------------- From-scratch mobile identity (≤768px; desktop untouched). A bone-cream perforated "board" — a quantized grid of convex oval holes lit from the top-right (à la the Neural Genesis matrix), drifting slowly — carries the whole page. Content floats as smooth post-it note-cards with soft shadows; ink is forest/charcoal. The AWREAi neon is retired for a clean MOD wordmark debossed into the board. Scroll-driven reveals (native CSS animation-timeline → runs on the compositor, not JS) unpack each block as it enters view; tap states give tactile feedback. All motion @supports- + reduced-motion-guarded. Validated against a standalone render before shipping. ============================================================================= */ @media (max-width: 768px) { /* ---- FOUNDATION: the perforated bone-cream board (fixed, drifting) ---- */ html { background: #E7E2C9 !important; } body { background: #E7E2C9 !important; position: relative; } body::before { content: '' !important; position: fixed !important; inset: -40px !important; z-index: -1 !important; pointer-events: none !important; background-color: #E7E2C9; /* clean CIRCLE perforation — refined punch-card grid (not ovals) */ background-image: radial-gradient(circle 1.4px at 50% 42%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 100%), radial-gradient(circle 1.9px at 50% 58%, rgba(96, 84, 54, 0.16), rgba(96, 84, 54, 0) 100%); background-size: 16px 16px; } @media (prefers-reduced-motion: no-preference) { body::before { animation: wbBoardDrift 40s linear infinite; } @keyframes wbBoardDrift { from { transform: translate(0, 0); } to { transform: translate(19px, 19px); } } } /* ---- Sections transparent → the board shows through everywhere ---- */ .hero, .hero-background, .problem, .section, .section.technology, .section.use-cases, .section.trust, .deciding-section, .footer, .bottom-sections-wrapper { background: transparent !important; } .problem { margin-top: 0 !important; } .section.use-cases { margin-top: 0 !important; } /* dark-theme decor / canvases that fight the cream board */ .hero::before, .hero::after, .hero-background::before, .problem::before, .neural-transition, .section.technology::after, .wave-transition-overlay, .wave-canvas, .wave-bleed-overlay, #deciding-fireflies, #neural-canvas, #bokeh-canvas { display: none !important; } /* ---- TYPOGRAPHY → forest/charcoal ink on the cream board ---- */ .section-title, .problem-conclusion, .tech-title, .use-case-title, .trust-card h3, .deciding-content h2, .hero-content .title-line .word, .hero-content .verb-word { color: #2C3E2D !important; } .section-subtitle, .deciding-content p { color: rgba(44, 62, 45, 0.66) !important; } .problem-description { color: rgba(44, 62, 45, 0.78) !important; } .tech-description, .trust-card p { color: rgba(44, 62, 45, 0.72) !important; } .use-case-prompt { color: rgba(44, 62, 45, 0.82) !important; } .use-case-response { color: rgba(44, 62, 45, 0.6) !important; } .tech-icon, .trust-icon, .use-case-icon { color: #3D5A3F !important; } .footer-links a, .footer-tagline { color: rgba(44, 62, 45, 0.74) !important; } .footer-legal, .footer-legal a { color: rgba(44, 62, 45, 0.5) !important; } /* ---- AWREAi: retire the neon → clean MOD wordmark debossed in the board ---- */ .awreai-led-container { display: none !important; } .awreai-text-fallback { display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-family: 'Space Grotesk', -apple-system, sans-serif !important; font-weight: 700 !important; font-size: 2.9rem !important; letter-spacing: 0.01em !important; color: #2C3E2D !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important; /* soft emboss */ } /* ---- POST-IT NOTE-CARDS: warm cream, soft lift off the board ---- */ .tech-card, .section.use-cases .use-case-card, .section.use-cases .use-case-card:first-child, .trust-card { background: #F4F0DF !important; border: 1px solid rgba(120, 108, 74, 0.14) !important; border-radius: 14px !important; box-shadow: 0 6px 18px rgba(60, 52, 28, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } /* ---- ELEMENT RECOMPOSITION: buttons / badges / labels for the post-it world ---- */ .hero-cta .btn-secondary { color: #2C3E2D !important; border-color: rgba(44, 62, 45, 0.3) !important; background: rgba(255, 255, 255, 0.26) !important; } .hero-badge .badge { background: rgba(255, 255, 255, 0.4) !important; color: #2C3E2D !important; border: 1px solid rgba(44, 62, 45, 0.18) !important; } .hero-support-reveal { color: #6E5A3A !important; } .modal-pre, .patent-label { color: rgba(44, 62, 45, 0.55) !important; } /* ---- INTERACTIVITY: tactile press / selection states ---- */ .tech-card, .trust-card, .section.use-cases .use-case-card, .btn { transition: transform 0.18s ease, box-shadow 0.18s ease !important; } .tech-card:active, .trust-card:active, .section.use-cases .use-case-card:active { transform: translateY(1px) scale(0.992) !important; box-shadow: 0 3px 10px rgba(60, 52, 28, 0.18) !important; } .btn:active { transform: scale(0.97) !important; } /* ---- MOTION: scroll-driven reveal / unpack (native, compositor-run) ---- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .section-header, .problem-card, .tech-card, .use-case-card, .trust-card, .deciding-content { animation: wbReveal linear both; animation-timeline: view(); animation-range: entry 2% cover 20%; } @keyframes wbReveal { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: none; } } } } } /* ============================================================================= MOBILE LOGIN REVEAL 2026-06-13 — "SYNAPSE SETTLE" (Phase 5, Tier 1 · CSS) ----------------------------------------------------------------------------- Replaces the flat 400ms gate crossfade (mobile only) with a choreographed entrance: the gate overlay (the synaptic web) dissolves with a soft zoom-blur, then the hero UNPACKS in a staggered cascade — wordmark/tagline → buttons → pills — the same rise the scroll-reveals use, so the whole experience speaks one motion language. Safety: triggered purely by the `.fade-out` class the existing login flow already adds to the overlay (sibling of #hero-text-content). Base states stay visible, so a non-animating browser, reduced-motion, or an already-logged-in skip (no .fade-out) never hides the hero. Desktop's 400ms fade is untouched (this lives inside ≤768px). Tier 2 = the synaptic-node→perforation morph in intro-particles-mobile.js, shipped as a separate, carefully-read follow-up. ============================================================================= */ @media (max-width: 768px) { @media (prefers-reduced-motion: no-preference) { /* Gate overlay exit: zoom-blur dissolve (within the flow's 400ms window) */ .hero-intro-overlay.fade-out { transform: scale(1.04) !important; filter: blur(4px) !important; transition: opacity 0.4s ease-out, transform 0.4s ease-out, filter 0.4s ease-out, backdrop-filter 0.4s ease-out !important; } /* Hero unpacks in a staggered cascade once the gate begins to exit */ .hero-intro-overlay.fade-out ~ #hero-text-content .hero-title, .hero-intro-overlay.fade-out ~ #hero-text-content .hero-cta, .hero-intro-overlay.fade-out ~ #hero-text-content .hero-badge { animation: wbSynapseRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero-intro-overlay.fade-out ~ #hero-text-content .hero-title { animation-delay: 0.18s; } .hero-intro-overlay.fade-out ~ #hero-text-content .hero-cta { animation-delay: 0.42s; } .hero-intro-overlay.fade-out ~ #hero-text-content .hero-badge { animation-delay: 0.6s; } @keyframes wbSynapseRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } } } /* ============================================================================= MOBILE "LIGHT TABLE" 2026-06-13 — SPATIAL SWIPE DECKS + ELEVATED BEVELED TILES ----------------------------------------------------------------------------- Outside-the-vertical-scroll redesign (≤768px; desktop untouched). (1) Removes the broken black "inverted arc" corners on the deciding section. (2) Technology + Trust card sections become HORIZONTAL swipe decks (native CSS scroll-snap) — spatial navigation, not endless vertical stacking. (3) Cards become elevated, beveled tiles with an embossed icon-WELL (icon punched into the card) and a mono index number (CSS counter, no JS/HTML). (4) The CTA elevates as a floating card. A small mobile-deck.js adds the position dots + counter under each deck. ============================================================================= */ @media (max-width: 768px) { /* (1) Kill the failed black arc-corners */ .deciding-section::before, .deciding-section::after { display: none \!important; } /* (2) HORIZONTAL SWIPE DECKS */ .tech-grid, .trust-grid { display: flex \!important; grid-template-columns: none \!important; overflow-x: auto \!important; scroll-snap-type: x mandatory \!important; gap: 14px \!important; padding: 8px 4px 12px \!important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tech-grid::-webkit-scrollbar, .trust-grid::-webkit-scrollbar { display: none \!important; } .tech-card { flex: 0 0 78% \!important; scroll-snap-align: center \!important; min-height: 234px \!important; } .trust-card { flex: 0 0 62% \!important; scroll-snap-align: center \!important; min-height: 200px \!important; } /* (3) ELEVATED BEVELED TILES */ .tech-card, .section.use-cases .use-case-card, .trust-card { position: relative \!important; background: #F6F2E4 \!important; border: 1px solid rgba(120, 108, 74, 0.1) \!important; border-radius: 20px \!important; padding: 22px 20px 24px \!important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 10px 26px -8px rgba(46, 40, 20, 0.32), 0 2px 6px rgba(46, 40, 20, 0.14) \!important; } /* embossed icon-WELL — the icon punched into the card surface */ .tech-icon, .trust-icon, .use-case-icon { width: 48px \!important; height: 48px \!important; border-radius: 50% \!important; background: #E7E2C9 \!important; box-shadow: inset 2px 2px 5px rgba(96, 84, 54, 0.28), inset -2px -2px 5px rgba(255, 255, 255, 0.7) \!important; display: flex \!important; align-items: center \!important; justify-content: center \!important; margin: 0 0 16px 0 \!important; color: #2C3E2D \!important; } .tech-icon svg, .trust-icon svg, .use-case-icon svg { width: 22px \!important; height: 22px \!important; } /* mono index numbers via CSS counter (no JS, no HTML) */ .tech-grid { counter-reset: wbt \!important; } .trust-grid { counter-reset: wbr \!important; } .tech-card { counter-increment: wbt \!important; } .trust-card { counter-increment: wbr \!important; } .tech-card::before { content: counter(wbt, decimal-leading-zero) \!important; } .trust-card::before { content: counter(wbr, decimal-leading-zero) \!important; } .tech-card::before, .trust-card::before { position: absolute \!important; top: 15px \!important; right: 18px \!important; font-family: 'JetBrains Mono', monospace \!important; font-size: 11px \!important; font-weight: 600 \!important; color: #3D7A52 \!important; opacity: 0.72 \!important; letter-spacing: 0.05em \!important; } /* (4) the deck-bar injected by mobile-deck.js (dots + counter + swipe hint) */ .wb-deckbar { display: flex \!important; align-items: center \!important; justify-content: space-between \!important; padding: 4px 22px 2px \!important; margin-top: 2px \!important; } .wb-deckbar .wb-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #5A6B52; letter-spacing: 0.06em; } .wb-deckbar .wb-dots { display: flex; gap: 6px; } .wb-deckbar .wb-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(60, 52, 28, 0.22); transition: width 0.25s ease, background 0.25s ease; } .wb-deckbar .wb-dots i.on { background: #3D7A52; width: 18px; border-radius: 3px; } .wb-deckbar .wb-swipe { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #3D7A52; letter-spacing: 0.1em; opacity: 0.7; } /* (5) ELEVATE THE CTA as a floating tile */ .deciding-content { background: #F6F2E4 \!important; border: 1px solid rgba(120, 108, 74, 0.1) \!important; border-radius: 24px \!important; margin: 12px 18px \!important; padding: 30px 24px \!important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 14px 34px -10px rgba(46, 40, 20, 0.32) \!important; } }