/* ================================================================ IMPACTIA — styles.css 100% aligned to brand book v1.0 (tokens.json) Tokens generated from impactia-brand/tokens.css — DO NOT drift. ================================================================ */ /* ---------- TOKENS (from impactia-brand/tokens.json) ---------- */ :root { /* Ink scale — Midnight Navy is dominant (60%) */ --ink: #0B192C; --ink-2: #122947; --ink-3: #1E3A5F; /* Paper scale — neutrals (25%) */ --paper: #F7F8FA; --paper-2: #EEF1F5; --line: #D5DBE3; /* Service accents (each page picks ONE) */ --solar: #F5B301; /* Amber — Solar PV */ --solar-2: #FFD24C; --ev: #2EC4B6; /* Teal — E-Mobility */ --ev-2: #5FD8CC; --eng: #4F8AF7; /* Blue — Engineering */ --eng-2: #8FB3FB; /* Text */ --slate: #5A6B82; --slate-2: #8A97A9; --white: #FFFFFF; /* Brand gradient — RESERVED FOR SYMBOL ONLY (per brand book) */ --brand-gradient: linear-gradient(135deg, #F5B301 0%, #2EC4B6 55%, #4F8AF7 100%); /* Type system */ --sans: "Helvetica Neue", "Inter", "Arial", system-ui, sans-serif; --mono: "SFMono-Regular", "Menlo", "Consolas", monospace; /* Default accent (overridable per-page via .accent-* class on ) */ --accent: var(--solar); --accent-2: var(--solar-2); } /* Per-page accent overrides — set */ html.accent-solar { --accent: var(--solar); --accent-2: var(--solar-2); } html.accent-ev { --accent: var(--ev); --accent-2: var(--ev-2); } html.accent-eng { --accent: var(--eng); --accent-2: var(--eng-2); } /* Home uses neutral — no accent dominance, all three appear */ html.accent-home { --accent: var(--solar); --accent-2: var(--solar-2); } /* --- BILINGUAL SYSTEM --- */ [data-lang] { display: none !important; } html[data-active-lang="en"] [data-lang="en"] { display: inline !important; } html[data-active-lang="es"] [data-lang="es"] { display: inline !important; } /* --- GLOBAL RESET --- box-sizing border-box is the universally accepted standard since 2014. Without it, padding adds to width — causing 100%-width children with padding to overflow their parents. This was the root cause of the 1px h-scroll. */ *, *::before, *::after { box-sizing: border-box; } /* --- BASE --- */ html { background-color: var(--ink); scroll-behavior: smooth; /* NOTE: do NOT add overflow-x:hidden here — it breaks position:sticky. Horizontal scroll prevention is handled below on body + the mobile menu. */ } body { font-family: var(--sans); background-color: var(--ink); margin: 0; padding: 0; width: 100%; min-height: 100%; overflow-x: clip; color: var(--ink); } /* overflow-x:clip on body — same effect as hidden but doesn't break sticky on children */ /* --- TYPOGRAPHY — Bold 700 + tight tracking (per brand book §04) --- */ .display { font-weight: 700; letter-spacing: -0.025em; } .display-xl { font-size: clamp(48px, 8.5vw, 110px); line-height: 0.98; } .display-lg { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.02; } .display-md { font-size: clamp(30px, 4vw, 50px); line-height: 1.05; } .display-sm { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.1; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } /* --- LOGO (.) — Solar Amber accent (per brand book §02) --- */ .brand-dot { color: var(--solar); } /* --- STICKY NAV (Apple-style: transparent → frosted on scroll) --- */ .nav-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(11,25,44,0.18); backdrop-filter: saturate(160%) blur(24px); -webkit-backdrop-filter: saturate(160%) blur(24px); border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1); } /* Hovering over dark hero — white text */ .nav-sticky .nav-link, .nav-sticky .wordmark, .nav-sticky .logo-link, .nav-sticky #mobileMenuBtn { color: var(--white); } .nav-sticky #mobileMenuBtn i { color: var(--white); } /* Smooth color transition on the inline SVG wordmark — uses currentColor */ .nav-sticky .logo-link svg text { fill: currentColor; transition: fill 0.4s cubic-bezier(0.16,1,0.3,1); } .nav-sticky .lang-switch { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); } .nav-sticky .lang-switch button { color: rgba(255,255,255,0.85); } .nav-sticky .lang-switch button.active { background: var(--accent); color: var(--ink); } .nav-sticky .nav-link:hover { background: rgba(255,255,255,0.08); } .nav-sticky .nav-link.active { color: var(--accent); } .nav-sticky #mobileMenuBtn:hover { background: rgba(255,255,255,0.1); } .nav-sticky .btn-nav-cta { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: var(--white); } .nav-sticky .btn-nav-cta:hover { background: rgba(255,255,255,0.2); } /* Scrolled state — frosted paper */ .nav-sticky.scrolled { background: rgba(247,248,250,0.82); border-bottom: 1px solid var(--line); box-shadow: 0 1px 24px rgba(11,25,44,0.06); } .nav-sticky.scrolled .nav-link, .nav-sticky.scrolled .wordmark, .nav-sticky.scrolled .logo-link, .nav-sticky.scrolled #mobileMenuBtn { color: var(--ink); } .nav-sticky.scrolled #mobileMenuBtn i { color: var(--ink); } .nav-sticky.scrolled .lang-switch { background: rgba(11,25,44,0.06); border-color: rgba(11,25,44,0.08); } .nav-sticky.scrolled .lang-switch button { color: var(--ink); } .nav-sticky.scrolled .lang-switch button.active { background: var(--ink); color: var(--white); } .nav-sticky.scrolled .nav-link:hover { background: rgba(11,25,44,0.06); } .nav-sticky.scrolled .nav-link.active { color: var(--accent); } .nav-sticky.scrolled #mobileMenuBtn:hover { background: rgba(11,25,44,0.06); } .nav-sticky.scrolled .btn-nav-cta { background: var(--ink); border-color: var(--ink); color: var(--white); } .nav-sticky.scrolled .btn-nav-cta:hover { background: var(--ink-2); } /* Subtle compaction on scroll */ .nav-sticky .nav-inner { transition: height 0.4s cubic-bezier(0.16,1,0.3,1); height: 76px; } .nav-sticky.scrolled .nav-inner { height: 60px; } .logo-img { height: 40px; width: auto; display: block; transition: height 0.4s cubic-bezier(0.16,1,0.3,1); } @media (min-width: 768px) { .logo-img { height: 48px; } } .nav-sticky.scrolled .logo-img { height: 36px !important; } /* Wordmark fallback when SVG fails */ .wordmark { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .wordmark-dark { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--white); } /* --- LANGUAGE SWITCH --- */ .lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(11,25,44,0.06); border: 1px solid rgba(11,25,44,0.08); align-items: center; } .lang-switch button { background: transparent; border: 0; color: var(--ink); font-weight: 600; font-size: 11px; padding: 9px 14px; border-radius: 999px; cursor: pointer; letter-spacing: 0.04em; transition: all 0.25s; line-height: 1; /* Touch target accessibility — min 44x44 spec from WCAG 2.5.5 */ min-height: 32px; min-width: 32px; } .lang-switch button.active { background: var(--ink); color: var(--white); } /* --- NAV LINKS --- */ .nav-link { color: var(--ink); font-weight: 500; font-size: 14px; padding: 8px 14px; border-radius: 8px; transition: all 0.2s; text-decoration: none; letter-spacing: -0.01em; } .nav-link:hover { background: rgba(11,25,44,0.06); } .nav-link.active { color: var(--accent); font-weight: 600; } /* --- MOBILE MENU --- */ .mobile-menu { position: fixed; top: 0; bottom: 0; right: 0; /* When closed: occupies zero space, hidden from scroll calculation entirely. Cleanest fix for the iOS Safari horizontal-scroll-from-transformed-fixed issue. */ width: 0; overflow: hidden; /* contain: layout prevents children from contributing to parent scroll calculations. This is what finally eliminates the 1px overflow in mobile Solar/EV pages. */ contain: layout paint; background: rgba(11,25,44,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 100; visibility: hidden; transition: width 0.4s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.4s; } .mobile-menu.open { width: 100%; visibility: visible; transition: width 0.4s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0s; } .mobile-menu > * { /* Inner content keeps intended width even while parent animates */ width: 100vw; max-width: 100%; } .mobile-menu a { color: var(--white); font-size: 28px; font-weight: 700; letter-spacing: -0.025em; padding: 16px 0; display: block; transition: color 0.2s; text-decoration: none; } .mobile-menu a:hover, .mobile-menu a.active { color: var(--accent); } /* --- REVEAL ANIMATIONS --- */ /* Default: visible. JS adds .reveal-init to opt INTO the hidden state. */ .reveal { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); } /* When JS is ready, this class is added to body and re-hides .reveal elements */ .reveal-ready .reveal:not(.in-view) { opacity: 0; transform: translateY(24px); } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ================================================================ APPLE-STYLE SCROLL EFFECTS ================================================================ */ /* --- SCROLL PROGRESS BAR --- */ #scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left center; z-index: 100; pointer-events: none; transition: transform 0.08s linear; box-shadow: 0 0 8px rgba(245, 179, 1, 0.4); } html.accent-ev #scroll-progress { background: var(--ev); box-shadow: 0 0 8px rgba(46, 196, 182, 0.4); } html.accent-eng #scroll-progress { background: var(--eng); box-shadow: 0 0 8px rgba(79, 138, 247, 0.4); } html.accent-solar #scroll-progress { background: var(--solar); box-shadow: 0 0 8px rgba(245, 179, 1, 0.4); } html.accent-home #scroll-progress { background: linear-gradient(90deg, var(--solar), var(--ev), var(--eng)); box-shadow: 0 0 8px rgba(255,255,255,0.2); } /* --- HERO PARALLAX SUPPORT --- */ /* The hero zoom animation is replaced by JS-driven parallax when scrolling */ .hero-zoom { will-change: transform; transform: scale(1.08); /* baseline state */ } @media (prefers-reduced-motion: reduce) { .hero-zoom { animation: none; transform: scale(1); } } /* Hero content gets a will-change for smoother fade */ section .relative.z-10 { will-change: opacity, transform; } /* --- MAGNETIC CARDS (TILT) --- */ .card-feature, .card-base { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease; transform-style: preserve-3d; will-change: transform; } .card-feature:hover, .card-base:hover { box-shadow: 0 32px 80px rgba(11,25,44,0.16), 0 12px 24px rgba(11,25,44,0.08); border-color: rgba(11,25,44,0.12); } /* --- TEXT MASK REVEAL (curtain effect for headlines) --- */ .text-reveal-mask { display: inline-block; overflow: hidden; vertical-align: bottom; position: relative; } .text-reveal-mask > * { display: inline-block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .text-reveal-mask.text-reveal-in > * { transform: translateY(0); } /* --- COUNTER ANIMATION SUPPORT --- */ .big-stat { font-variant-numeric: tabular-nums; /* numbers don't jitter as digits change */ will-change: contents; } /* --- ENHANCED SPOTLIGHT (already exists but tune for buttery feel) --- */ .spotlight-group:hover .spotlight-item { opacity: 0.45; transform: scale(0.97); filter: blur(0.5px); } .spotlight-group .spotlight-item:hover { opacity: 1 !important; transform: scale(1.03) !important; filter: blur(0) !important; z-index: 2; } .spotlight-item { transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease, box-shadow 0.5s ease; } /* --- DISABLE EFFECTS ON REDUCED MOTION --- */ @media (prefers-reduced-motion: reduce) { #scroll-progress { display: none; } .text-reveal-mask > * { transform: translateY(0) !important; transition: none !important; } .card-feature, .card-base { transition: none !important; } .card-feature:hover, .card-base:hover { transform: none !important; } .spotlight-item { transition: none !important; } .spotlight-group:hover .spotlight-item { opacity: 1 !important; transform: none !important; filter: none !important; } } /* --- HARDWARE ACCELERATION HINTS for the scroll-heavy elements --- */ .hero-zoom, .reveal, .big-stat, #scroll-progress { backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* --- ACCESSIBILITY: Tighten contrast on slate-2 captions --- #8A97A9 hits ~2.97:1 on white. Per WCAG 2.1 SC 1.4.11 (non-text contrast) and SC 1.4.3, the visual fix is bolder weight + larger size so text reads more clearly. Color stays on-brand. */ .metric-label { font-weight: 600; /* bumped from 400/500 for AA-compliant readability at small sizes */ } /* --- TRUSTED BRANDS GRID --- Monochrome grayscale wordmarks that brighten on hover. Each cell hosts an SVG using currentColor — controlled here. */ .brand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: center; justify-items: center; } @media (min-width: 640px) { .brand-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } @media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; } } /* On very wide screens we want 5 per row for the 10-vehicle EV grid */ @media (min-width: 1280px) { .brand-grid { gap: 2rem; } } .brand-cell { /* Box: subtle paper background, soft border, generous padding */ width: 100%; min-height: 88px; padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; display: flex; align-items: center; justify-content: center; /* Grayscale baseline — desaturated, low contrast */ color: var(--slate-2); filter: grayscale(100%) opacity(0.7); transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease; cursor: default; } /* Hover: lift, restore color, slight scale */ .brand-cell:hover { color: var(--ink); filter: grayscale(0%) opacity(1); transform: translateY(-4px); border-color: rgba(11, 25, 44, 0.18); background: var(--white); box-shadow: 0 12px 32px rgba(11, 25, 44, 0.08), 0 4px 8px rgba(11, 25, 44, 0.04); } /* The SVG wordmark inside — uses CSS mask so the color comes from .brand-cell. The tag is loaded for accessibility (alt text) but the visual rendering is done via mask-image on the parent. */ .brand-cell { position: relative; } .brand-cell img { /* Hidden visually but kept for screen readers */ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .brand-cell::before { content: ""; display: block; width: 100%; max-width: 180px; height: 44px; background: currentColor; -webkit-mask-image: var(--brand-svg); mask-image: var(--brand-svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } @media (max-width: 640px) { .brand-cell::before { height: 32px; max-width: 130px; } } /* Reduced-motion: keep hover transitions but disable transform */ @media (prefers-reduced-motion: reduce) { .brand-cell { transition: filter 0.2s, color 0.2s; } .brand-cell:hover { transform: none; } } /* --- HOW WE WORK — Vertical timeline --- Replaces the previous sticky-scene approach with a scrollable vertical timeline. Each step has a numbered node + connecting line + content. Stagger reveal animates each step as it enters the viewport. */ .timeline { position: relative; display: flex; flex-direction: column; gap: 3rem; max-width: 880px; margin: 0 auto; padding: 1rem 0 0.5rem; } .timeline-step { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; align-items: start; position: relative; } /* Marker column — number circle + connecting line */ .timeline-marker { position: relative; display: flex; flex-direction: column; align-items: center; align-self: stretch; } .timeline-node { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; flex-shrink: 0; position: relative; z-index: 2; /* Subtle ring for depth */ box-shadow: 0 0 0 6px rgba(255,255,255,0.04), 0 12px 32px rgba(0,0,0,0.3); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease; } .timeline-step:hover .timeline-node { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(255,255,255,0.06), 0 16px 40px rgba(0,0,0,0.4); } /* Connecting line between nodes — extends below each marker except the last */ .timeline-line { flex: 1; width: 2px; margin-top: 0.5rem; min-height: 80px; opacity: 0.5; border-radius: 1px; } /* Content column — eyebrow + headline + body + meta */ .timeline-content { padding-top: 0.5rem; /* align with node center */ padding-bottom: 1rem; } .timeline-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; font-weight: 600; text-transform: uppercase; margin: 0 0 0.75rem; line-height: 1; } .timeline-title { font-family: var(--sans); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 1rem; } .timeline-body { color: var(--slate-2); font-size: 17px; line-height: 1.65; letter-spacing: -0.005em; margin: 0 0 1.5rem; max-width: 36rem; } .timeline-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--slate-2); } .timeline-meta span { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .timeline-meta i { font-size: 13px; opacity: 0.8; } /* Color the icon per step accent */ .timeline-step[data-accent="solar"] .timeline-meta i { color: var(--solar); } .timeline-step[data-accent="ev"] .timeline-meta i { color: var(--ev); } .timeline-step[data-accent="eng"] .timeline-meta i { color: var(--eng); } /* Mobile: tighter spacing, smaller nodes, content stacks closer */ @media (max-width: 640px) { .timeline { gap: 2rem; padding: 0; } .timeline-step { grid-template-columns: 56px 1fr; gap: 1.25rem; } .timeline-node { width: 48px; height: 48px; font-size: 17px; } .timeline-line { min-height: 60px; } .timeline-title { font-size: 24px; } .timeline-body { font-size: 15px; } .timeline-meta { font-size: 11px; gap: 0.5rem 1rem; } } /* Reveal stagger — each step animates from below */ .how-we-work .reveal { transition-duration: 0.7s; } /* --- HERO ZOOM --- */ @keyframes heroZoom { 0% { transform: scale(1); } 100% { transform: scale(1.08); } } .hero-zoom { animation: heroZoom 30s infinite alternate ease-in-out; } /* --- SPOTLIGHT HOVER (Apple-style) --- */ .spotlight-group:hover .spotlight-item { opacity: 0.55; transform: scale(0.98); } .spotlight-group .spotlight-item:hover { opacity: 1 !important; transform: scale(1.02) !important; } .spotlight-item { transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease; } /* --- APPLE-STYLE SHADOWS --- */ .shadow-apple-sm { box-shadow: 0 4px 16px rgba(11,25,44,0.06), 0 1px 3px rgba(11,25,44,0.04); } .shadow-apple-md { box-shadow: 0 12px 32px rgba(11,25,44,0.08), 0 4px 8px rgba(11,25,44,0.04); } .shadow-apple-lg { box-shadow: 0 24px 56px rgba(11,25,44,0.12), 0 8px 16px rgba(11,25,44,0.06); } .shadow-apple-xl { box-shadow: 0 32px 80px rgba(11,25,44,0.16), 0 12px 24px rgba(11,25,44,0.08); } /* --- BUTTONS — flat, no gradients (per brand book) --- */ .btn-primary { background: var(--accent); color: var(--ink); padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border: none; } .btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); } .btn-ghost { background: rgba(255,255,255,0.08); color: var(--white); padding: 14px 28px; border-radius: 999px; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.16); transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .btn-ghost:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.28); } .btn-nav-cta { padding: 12px 20px; border-radius: 999px; font-weight: 500; font-size: 13px; letter-spacing: -0.01em; line-height: 1; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; min-height: 38px; /* touch target accessibility */ } .btn-nav-cta > * { line-height: 1; } .btn-nav-cta i { display: inline-block; line-height: 1; vertical-align: middle; } .btn-dark { background: var(--ink); color: var(--white); padding: 14px 28px; border-radius: 999px; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .btn-dark:hover { background: var(--ink-2); transform: translateY(-1px); } /* --- SERVICE PILLS (per brand book §05) --- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .pill-solar { background: var(--solar); color: var(--ink); } .pill-ev { background: var(--ev); color: var(--ink); } .pill-eng { background: var(--eng); color: var(--ink); } .pill-ghost { background: rgba(255,255,255,0.1); color: var(--white); border: 1px solid rgba(255,255,255,0.16); } /* --- WHATSAPP FLOAT --- */ .wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 60; width: 60px; height: 60px; background: #25D366; color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 12px 32px rgba(37,211,102,0.4); transition: all 0.3s cubic-bezier(0.16,1,0.3,1); text-decoration: none; } .wa-float:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 16px 40px rgba(37,211,102,0.55); } /* --- SPACING --- */ .section-padding { padding: 120px 24px; } @media (max-width: 768px) { .section-padding { padding: 80px 20px; } } /* --- CARDS --- */ .card-base { background: var(--white); border-radius: 24px; padding: 32px; border: 1px solid var(--line); transition: all 0.45s cubic-bezier(0.16,1,0.3,1); position: relative; } .card-feature { background: var(--white); border-radius: 28px; overflow: hidden; border: 1px solid var(--line); transition: all 0.45s cubic-bezier(0.16,1,0.3,1); } .card-img { aspect-ratio: 4/3; overflow: hidden; background: var(--ink); } .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); } .card-feature:hover .card-img img { transform: scale(1.05); } /* --- BIG STATS — solid accent, NO gradient (per brand book) --- */ .big-stat { font-size: clamp(56px, 9vw, 120px); font-weight: 700; line-height: 1; letter-spacing: -0.025em; color: var(--accent); } /* --- METRIC LABEL --- */ .metric-label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-2); } /* --- MISC --- */ .stack-pill { background: var(--white); border: 1px solid var(--line); padding: 10px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; transition: all .25s; letter-spacing: -0.01em; } .stack-pill:hover { border-color: var(--accent); transform: translateY(-1px); } .stack-pill i { color: var(--accent); } .step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; letter-spacing: -0.01em; font-family: var(--mono); } /* --- ACCESSIBILITY --- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; top: -100px; left: 0; background: var(--accent); color: var(--ink); padding: 12px 24px; z-index: 999; text-decoration: none; font-weight: 600; } .skip-link:focus { top: 0; } /* --- HERO HELPERS --- */ .hero-vignette { background: radial-gradient(ellipse at center, transparent 0%, rgba(11,25,44,0.45) 70%, rgba(11,25,44,0.92) 100%); } /* --- FAQ details fix --- */ details summary { list-style: none; cursor: pointer; } details summary::-webkit-details-marker { display: none; } details[open] summary i.fa-plus { transform: rotate(45deg); transition: transform 0.3s; } /* ================================================================ NATIVE UTILITY CLASSES (Tailwind-independent fallbacks) These ensure the site WORKS even if Tailwind CDN fails to load. ================================================================ */ /* Layout primitives */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .inset-0 { inset: 0; } .z-10 { z-index: 10; } .z-30 { z-index: 30; } .z-50 { z-index: 50; } .overflow-hidden { overflow: hidden; } /* Display */ .block { display: block; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } /* Flex */ .flex-col { flex-direction: column; } .flex-shrink-0 { flex-shrink: 0; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-12 { gap: 3rem; } /* Grid (key layouts) */ .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Container */ .w-full { width: 100%; } .h-full { height: 100%; } .h-20 { height: 5rem; } .mx-auto { margin-left: auto; margin-right: auto; } /* Max widths */ .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-7xl { max-width: 80rem; } .\[max-w-1440px\], .max-w-\[1440px\] { max-width: 1440px; } .max-w-\[1280px\] { max-width: 1280px; } .max-w-\[1200px\] { max-width: 1200px; } .max-w-\[1080px\] { max-width: 1080px; } /* Padding */ .p-0 { padding: 0; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .p-10 { padding: 2.5rem; } .p-16 { padding: 4rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .py-28 { padding-top: 7rem; padding-bottom: 7rem; } .py-32 { padding-top: 8rem; padding-bottom: 8rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .pt-16 { padding-top: 4rem; } .pt-20 { padding-top: 5rem; } .pt-24 { padding-top: 6rem; } .pb-8 { padding-bottom: 2rem; } .pb-12 { padding-bottom: 3rem; } /* Margin */ .mb-3 { margin-bottom: 0.75rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .mb-20 { margin-bottom: 5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; } .mt-auto { margin-top: auto; } /* Top/Right (mobile menu close button) */ .top-6 { top: 1.5rem; } .right-6 { right: 1.5rem; } /* Width/Height (mobile menu close button) */ .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; } /* Text */ .text-center { text-align: center; } .text-white { color: var(--white); } .text-sm { font-size: 0.875rem; line-height: 1.5; } .text-base { font-size: 1rem; line-height: 1.5; } .text-lg { font-size: 1.125rem; line-height: 1.55; } .text-xl { font-size: 1.25rem; line-height: 1.5; } .text-2xl { font-size: 1.5rem; line-height: 1.4; } .text-xs { font-size: 0.75rem; line-height: 1.5; } .font-light { font-weight: 300; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* Border radius */ .rounded-full { border-radius: 9999px; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } /* Responsive — mobile first */ @media (min-width: 640px) { .sm\:flex-row { flex-direction: row; } } @media (min-width: 768px) { .md\:flex-row { flex-direction: row; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:inline-flex { display: inline-flex; } .md\:justify-between { justify-content: space-between; } .md\:items-center { align-items: center; } } @media (min-width: 1024px) { .lg\:flex { display: flex; } .lg\:hidden { display: none; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:py-28 { padding-top: 7rem; padding-bottom: 7rem; } .lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem; } .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } .lg\:gap-16 { gap: 4rem; } .lg\:min-h-screen { min-height: 100vh; } } /* ================================================================ ISSUE FIXES (from senior consultant audit) ================================================================ */ /* FIX: Scroll padding so anchors don't hide under sticky nav (Audit #8) */ html { scroll-padding-top: 96px; } /* FIX: :active and :focus-visible improved (Audit #11) */ .btn-primary:active, .btn-ghost:active, .btn-dark:active, .btn-nav-cta:active { transform: translateY(0) scale(0.98); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* FIX: Repeated inline styles → utility classes (Audit #3) */ .text-ink { color: var(--ink); } .text-slate { color: var(--slate); } .text-slate-2 { color: var(--slate-2); } .text-white-soft { color: rgba(255,255,255,0.92); } .bg-ink { background: var(--ink); } .bg-ink-2 { background: var(--ink-2); } .bg-paper { background: var(--paper); } .bg-white { background: var(--white); } .fg-accent { color: var(--accent); } .fg-solar { color: var(--solar); } .fg-ev { color: var(--ev); } .fg-eng { color: var(--eng); } .body-13 { font-size: 13px; line-height: 1.6; } .body-14 { font-size: 14px; line-height: 1.6; letter-spacing: -0.005em; } .body-17 { font-size: 17px; line-height: 1.6; letter-spacing: -0.01em; } .body-18 { font-size: 18px; line-height: 1.6; letter-spacing: -0.01em; } /* FIX: Big stat overflow prevention for multi-char stats (Audit #14) */ .big-stat { font-size: clamp(48px, 7vw, 96px); word-break: keep-all; white-space: nowrap; } .big-stat.big-stat--wide { font-size: clamp(38px, 5.5vw, 72px); } /* FIX: Nav initial state — slightly more opaque so it never blends into white (Audit #9) */ .nav-sticky { background: rgba(11,25,44,0.28); } /* FIX: FOUC — placeholder skeleton while nav loads (Audit #7) */ #nav-placeholder:empty { display: block; height: 76px; background: rgba(11,25,44,0.28); backdrop-filter: blur(20px); position: fixed; top: 0; left: 0; right: 0; z-index: 50; } #footer-placeholder:empty { display: block; height: 200px; background: var(--ink); } /* FIX: Mobile nav menu visible state when fetch is slow */ .mobile-menu a { border-bottom: 1px solid rgba(255,255,255,0.06); } .mobile-menu a:last-child { border-bottom: none; } /* Image safety: prevent layout shift on hero images */ .hero-img-wrap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Card image fixed aspect (prevents CLS) */ .card-img { aspect-ratio: 4/3; display: block; } .card-img img { display: block; width: 100%; height: 100%; } /* Spotlight items keep readable focus ring on keyboard */ .spotlight-item:focus-visible { transform: scale(1.02); } /* FIX: Better tap target for icon-only buttons on mobile */ button[aria-label], a[aria-label] { min-width: 44px; min-height: 44px; } /* FIX: Smooth opening animation for FAQ details (Audit #17) */ details summary i.fa-plus { transition: transform 0.3s ease; } details[open] summary i.fa-plus { transform: rotate(45deg); } /* FIX: WhatsApp icon should never be green inside accent-bg buttons (Audit #19) */ .btn-primary .fa-whatsapp { color: var(--ink); } .btn-dark .fa-whatsapp { color: var(--white); } /* FIX: Animate-bounce fallback (Tailwind class) */ @keyframes ip-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .animate-bounce { animation: ip-bounce 2s infinite; } /* Print-friendly */ @media print { .nav-sticky, .wa-float, #mobileMenu { display: none !important; } body { background: white !important; color: black !important; } } /* Reduced motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-zoom { animation: none; } .reveal { opacity: 1; transform: none; } }