/* ============================================================= LEDGERA MARKETING — ledgera.css ============================================================= */ /* ── 0. LOCAL FONTS ───────────────────────────────────────── */ /* Material Symbols Sharp loaded via Google CDN in */ /* Inter 18pt — display-optimised, used for all headings */ @font-face { font-family: 'Inter 18pt'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter18pt-SemiBold.woff2') format('woff2'), url('../fonts/Inter18pt-SemiBold.woff') format('woff'); } @font-face { font-family: 'Inter 18pt'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Inter18pt-Bold.woff2') format('woff2'), url('../fonts/Inter18pt-Bold.woff') format('woff'); } @font-face { font-family: 'Inter 18pt'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Inter18pt-ExtraBold.woff2') format('woff2'), url('../fonts/Inter18pt-ExtraBold.woff') format('woff'); } /* ── 1. DESIGN TOKENS ─────────────────────────────────────── */ :root { --brand-navy: #0A183D; --brand-slate: #223C5B; --brand-green: #51BA56; --brand-teal: #3CB286; --brand-gold: #EAB64C; --brand-gray: #848B8B; --brand-white: #FFFFFF; --bg-page: #F6F8FB; --bg-surface: #FFFFFF; --bg-alt: #EEF4F2; --bg-dark: #0A183D; --text-strong: #0A183D; --text-body: #31435A; --text-muted: #6E7A86; --text-on-dark: #F8FAFC; --text-teal: #1D7A53; /* darkened teal for WCAG AA on white (5.4:1) */ --border-soft: #D9E1E7; --border-strong: #AEB8C2; --action-primary: #0A183D; --action-primary-hover: #122554; --action-secondary: #3CB286; --action-secondary-hover:#2F9C74; --action-accent: #EAB64C; --action-accent-hover: #D8A53E; --hero-gradient: linear-gradient(135deg, #0A183D 0%, #223C5B 45%, #3CB286 100%); --soft-gradient: linear-gradient(135deg, #F6F8FB 0%, #EEF4F2 100%); --shadow-soft: 0 24px 60px rgba(10, 24, 61, 0.08); --shadow-strong: 0 36px 80px rgba(10, 24, 61, 0.20); --radius-lg: 28px; --radius-md: 20px; --radius-sm: 14px; --container: 1140px; } /* ── 2. RESET / BASE ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(circle at top left, rgba(234, 182, 76, 0.16), transparent 22%), radial-gradient(circle at top right, rgba( 60, 178, 134, 0.14), transparent 20%), var(--bg-page); color: var(--text-body); font-family: 'Inter', sans-serif; line-height: 1.65; } img { max-width: 100%; display: block; } a { color: var(--brand-teal); text-decoration: none; } a:hover { color: var(--brand-gold); } h1, h2, h3, h4 { margin: 0 0 0.75rem; color: var(--text-strong); font-family: 'Inter 18pt', 'Inter', sans-serif; font-weight: 700; line-height: 1.12; } h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; } h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; } h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; } h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.4; } p { margin: 0 0 1rem; } ul { margin: 0; padding: 0; } /* ── 3. ACCESSIBILITY ────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Skip link */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 200; padding: 0.75rem 1.5rem; background: var(--brand-navy); color: var(--text-on-dark); font-size: 0.9rem; font-weight: 600; border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: top 0.15s ease; text-decoration: none; } .skip-link:focus { top: 0; outline: none; color: var(--brand-gold); } /* Global focus-visible */ a:focus-visible, button:focus-visible, .button:focus-visible, .nav-link:focus-visible, .nav-trigger:focus-visible, .mega-link:focus-visible, .drop-link:focus-visible, .site-nav__link:focus-visible, .utility-link:focus-visible, .faq-trigger:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 3px; border-radius: 4px; } /* ── 4. LAYOUT ────────────────────────────────────────────── */ .container { width: min(calc(100% - 3rem), var(--container)); margin: 0 auto; } .site-main { overflow: hidden; } .section { padding: 5.5rem 0; } .section--alt { background: var(--bg-alt); } .section-heading, .section-narrow { margin-bottom: 2.5rem; } .section-narrow { max-width: 760px; } .lead-text { font-size: 1.125rem; } /* ── 5. EYEBROW ───────────────────────────────────────────── */ .eyebrow { display: inline-block; margin-bottom: 1rem; color: var(--text-teal); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-left: 3px solid currentColor; padding-left: 0.65rem; } .eyebrow--light { color: var(--text-on-dark); } .eyebrow--gold { color: var(--brand-gold); } /* ── 6. BUTTONS ───────────────────────────────────────────── */ .button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.6rem 1.25rem; border: 1px solid transparent; border-radius: 9px; font-size: 0.9rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; cursor: pointer; } .button:hover { transform: translateY(-1px); } /* Small variant — used in header */ .button--sm { min-height: 2.125rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; border-radius: 7px; } .button--primary { background: var(--action-primary); color: var(--brand-white); } .button--primary:hover { background: var(--action-primary-hover); color: var(--brand-white); } .button--secondary { background: var(--action-secondary); color: var(--brand-white); } .button--secondary:hover{ background: var(--action-secondary-hover); color: var(--brand-white); } .button--gold { background: var(--action-accent); color: var(--brand-navy); } .button--gold:hover { background: var(--action-accent-hover); color: var(--brand-navy); } .button--ghost-light { border-color: rgba(248, 250, 252, 0.28); color: var(--text-on-dark); background: rgba(255, 255, 255, 0.06); } .button--ghost-light:hover { border-color: rgba(248, 250, 252, 0.58); color: var(--text-on-dark); } /* ── 7. SITE HEADER ───────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 200; /* backdrop-filter moved to ::before so position:fixed children (mobile drawer, overlay) are contained by the viewport, not the header */ background: transparent; border-bottom: 1px solid rgba(174, 184, 194, 0.2); transition: box-shadow 0.2s; } .site-header::before { content: ''; position: absolute; inset: 0; background: rgba(246, 248, 251, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: -1; } .site-header.is-scrolled { box-shadow: 0 4px 24px rgba(10, 24, 61, 0.08); } .topbar { display: flex; align-items: center; min-height: 3.625rem; } .brand-mark { flex-shrink: 0; margin-right: 2rem; } .brand-mark img { width: 140px; height: auto; } .brand-mark__light { display: none; } /* Primary navigation */ .site-nav { display: flex; align-items: center; flex: 1; } .nav-item { position: relative; } .nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.7rem; border: 0; background: transparent; color: var(--text-strong); font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 500; cursor: pointer; border-radius: 7px; transition: color 0.15s, background 0.15s; white-space: nowrap; text-decoration: none; line-height: 1.2; } .nav-link:hover, .nav-trigger:hover { color: var(--brand-teal); background: rgba(60, 178, 134, 0.07); } .nav-link.is-active, .nav-trigger.is-active { color: var(--brand-teal); font-weight: 600; } /* Chevron */ .nav-chevron { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; transition: transform 0.2s; } .nav-item:hover .nav-chevron, .nav-item.is-open .nav-chevron { transform: rotate(180deg); opacity: 0.8; } /* ── Mega menu panel ── */ .mega-menu { display: none; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 16px; box-shadow: 0 20px 60px rgba(10, 24, 61, 0.14), 0 0 0 1px rgba(10, 24, 61, 0.05); padding: 0.5rem; min-width: 340px; z-index: 300; animation: menuFade 0.18s cubic-bezier(0.16, 1, 0.3, 1); } /* Invisible hover bridge so the menu doesn't vanish when crossing the gap */ .mega-menu::after { content: ''; position: absolute; top: -16px; left: -12px; right: -12px; height: 16px; } /* Single-column rows layout (replaces 2col) */ .mega-menu--rows { grid-template-columns: 1fr; gap: 0.2rem; } .nav-item:hover > .mega-menu, .nav-item.is-open > .mega-menu { display: grid; } /* Section label inside mega menu */ .mega-section-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding: 0.6rem 1rem 0.35rem; opacity: 0.7; } /* Arrow pointer */ .mega-menu::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; background: var(--bg-surface); border-top: 1px solid var(--border-soft); border-left: 1px solid var(--border-soft); transform: translateX(-50%) rotate(45deg); } /* Mega link item */ .mega-link { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1rem; border-radius: 12px; text-decoration: none; transition: background 0.15s; color: inherit; } .mega-link:hover { background: var(--bg-alt); color: inherit; } .mega-link:hover .mega-icon { transform: scale(1.05); } .mega-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease; } .mega-icon svg { width: 18px; height: 18px; } .mega-icon--teal { background: rgba(60, 178, 134, 0.12); color: var(--brand-teal); } .mega-icon--navy { background: rgba(10, 24, 61, 0.08); color: var(--brand-navy); } .mega-icon--gold { background: rgba(234, 182, 76, 0.15); color: #9a6e12; } .mega-body { display: flex; flex-direction: column; min-width: 0; } .mega-label { font-size: 0.9rem; font-weight: 600; color: var(--text-strong); margin-bottom: 0.18rem; display: block; line-height: 1.3; white-space: nowrap; } .mega-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; white-space: nowrap; } /* Mega menu footer strip */ .mega-footer { margin-top: 0.2rem; padding: 0.625rem 1rem; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: flex-end; } .mega-footer a { font-size: 0.775rem; font-weight: 600; color: var(--brand-teal); text-decoration: none; display: flex; align-items: center; gap: 0.3rem; transition: gap 0.18s; } .mega-footer a:hover { gap: 0.5rem; color: var(--brand-teal); } /* ── Login / simple dropdown ── */ .drop-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: 0 8px 32px rgba(10, 24, 61, 0.12); padding: 0.375rem; min-width: 196px; z-index: 300; animation: dropFade 0.16s ease; } .nav-item:hover > .drop-menu, .nav-item.is-open > .drop-menu { display: block; } .drop-label { padding: 0.35rem 0.75rem 0.15rem; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); display: block; } .drop-divider { height: 1px; background: var(--border-soft); margin: 0.3rem 0.375rem; } .drop-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.575rem 0.75rem; border-radius: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--text-strong); text-decoration: none; transition: background 0.15s; white-space: nowrap; } .drop-link:hover { background: var(--bg-alt); color: var(--text-strong); } /* Header actions (right side) */ .topbar__nav { display: flex; align-items: center; flex: 1; } .topbar__actions { display: flex; align-items: center; gap: 0.375rem; margin-left: 1rem; flex-shrink: 0; } /* Mobile backdrop — hidden everywhere by default */ .nav-overlay { display: none; } /* Hamburger */ .menu-toggle { display: none; padding: 0.45rem; border: 0; background: transparent; cursor: pointer; border-radius: 8px; margin-left: auto; } .menu-toggle span { display: block; width: 1.375rem; height: 2px; margin: 0.28rem 0; background: var(--brand-navy); transition: transform 0.2s ease, opacity 0.2s ease; } @keyframes menuFade { from { opacity: 0; transform: translateX(-50%) translateY(-5px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes dropFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ── 8. HOME HERO ─────────────────────────────────────────── */ .hero { position: relative; padding: 6rem 0 8rem; background: var(--hero-gradient); color: var(--text-on-dark); overflow: hidden; } .hero::after { content: ''; position: absolute; inset: auto 0 -4rem; height: 8rem; background: linear-gradient(180deg, rgba(10, 24, 61, 0) 0%, var(--bg-page) 85%); pointer-events: none; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 1.2fr); gap: 3rem; align-items: center; } .hero-copy h1, .hero-copy p, .hero-copy li { color: var(--text-on-dark); } .hero-copy p { max-width: 580px; font-size: 1.1rem; } .hero-actions, .section-actions, .conversion-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; } .hero-points { margin-top: 1.75rem; display: grid; gap: 0.9rem; list-style: none; } .hero-points li { position: relative; padding-left: 1.5rem; } .hero-points li::before, .check-list li::before { content: ''; position: absolute; left: 0; top: 0.68rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--brand-gold); } /* ── 9. DEVICE MOCKUPS ────────────────────────────────────── */ /* --- Laptop frame --- */ .device-laptop { display: flex; flex-direction: column; filter: drop-shadow(0 48px 80px rgba(10, 24, 61, 0.55)); } .device-laptop__lid { background: linear-gradient(160deg, #272b35 0%, #1c1f27 100%); border-radius: 14px 14px 0 0; padding: 10px 10px 0; border: 2px solid #30343f; border-bottom: 0; } .device-laptop__camera-bar { display: flex; justify-content: center; align-items: center; padding-bottom: 7px; } .device-laptop__camera { width: 7px; height: 7px; border-radius: 50%; background: #3a3e4d; box-shadow: 0 0 0 1px rgba(255,255,255,0.04); } .device-laptop__screen { background: #0a0c10; border-radius: 4px 4px 0 0; overflow: hidden; aspect-ratio: 16 / 10; } .device-laptop__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; } .device-laptop__hinge { height: 5px; background: linear-gradient(90deg, #181b22, #2c3040 40%, #2c3040 60%, #181b22); border-left: 2px solid #30343f; border-right: 2px solid #30343f; } .device-laptop__base { background: linear-gradient(180deg, #252933 0%, #1a1d26 100%); height: 26px; border-radius: 0 0 4px 4px; border: 2px solid #30343f; border-top: 0; position: relative; } .device-laptop__base::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 22%; height: 6px; background: #13151c; border-radius: 0 0 4px 4px; } .device-laptop__foot { height: 7px; background: linear-gradient(90deg, #12141a, #1e2230 20%, #1e2230 80%, #12141a); border-radius: 0 0 6px 6px; width: 108%; margin-left: -4%; box-shadow: 0 10px 40px rgba(0,0,0,0.65), 0 2px 0 #0a0b10; } /* --- Tablet frame --- */ .device-tablet { background: linear-gradient(145deg, #1f232d, #161820); border-radius: 18px; padding: 14px 10px; box-shadow: 0 40px 100px rgba(10, 24, 61, 0.55), 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 2px rgba(255,255,255,0.03); display: flex; flex-direction: column; gap: 0; } .device-tablet__camera { width: 8px; height: 8px; border-radius: 50%; background: #2c3040; margin: 0 auto 8px; box-shadow: 0 0 0 1px rgba(255,255,255,0.04); } .device-tablet__screen { background: #fff; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; } .device-tablet__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .device-tablet__home { width: 36px; height: 5px; border-radius: 3px; background: #2c3040; margin: 8px auto 0; } /* --- Multi-device scene --- */ .device-scene { display: flex; align-items: flex-end; justify-content: center; position: relative; padding: 2rem 0 0; overflow: visible; /* Subtle ground shadow beneath the scene */ filter: drop-shadow(0 60px 80px rgba(10, 24, 61, 0.18)); } .device-scene__phone { position: relative; z-index: 3; flex-shrink: 0; margin-right: -3.5%; align-self: flex-end; } /* Override fixed width for scene context */ .device-scene__phone .device-phone { width: 150px; border-radius: 36px; padding: 11px 8px 14px; transform: perspective(900px) rotateY(8deg) rotateX(2deg); } .device-scene__phone .device-phone__island { width: 52px; height: 16px; } .device-scene__phone .device-phone__screen { border-radius: 22px; /* Force portrait crop until proper mobile screenshot is supplied */ aspect-ratio: 9 / 19; overflow: hidden; } .device-scene__phone .device-phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .device-scene__laptop { position: relative; z-index: 1; flex: 1; max-width: 56%; transform: perspective(2400px) rotateX(4deg) rotateY(0deg); transform-origin: center bottom; } .device-scene__tablet { position: relative; z-index: 2; flex-shrink: 0; width: 26%; margin-left: -4%; transform: perspective(1400px) rotateX(3deg) rotateY(-8deg) translateY(-1.5rem); transform-origin: center bottom; } /* Tilted browser for inner page showcases */ .device-browser--tilted { transform: perspective(2000px) rotateX(4deg) rotateY(-2deg); transform-origin: center bottom; transition: transform 0.6s ease; } .device-browser--tilted:hover { transform: perspective(2000px) rotateX(2deg) rotateY(-1deg); } /* --- Browser frame --- */ .device-browser { position: relative; background: #1d2025; border-radius: 10px; box-shadow: 0 50px 120px rgba(10, 24, 61, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: hidden; } .device-browser--hero { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg); transform-origin: left center; transition: transform 0.6s ease; } .device-browser--hero:hover { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); } .device-browser--showcase { border-radius: var(--radius-sm); max-height: 520px; overflow: hidden; } .device-browser--showcase .device-browser__screen { max-height: 480px; object-fit: cover; object-position: top; } .device-browser__chrome { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.85rem; background: #13171c; border-bottom: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; } .device-browser__dots { display: flex; gap: 0.35rem; flex-shrink: 0; } .device-browser__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; } .device-browser__dot:nth-child(1) { background: #ff5f57; } .device-browser__dot:nth-child(2) { background: #febc2e; } .device-browser__dot:nth-child(3) { background: #28c840; } .device-browser__url { flex: 1; background: rgba(255, 255, 255, 0.07); border-radius: 4px; padding: 0.2rem 0.65rem; font-size: 0.68rem; color: rgba(255, 255, 255, 0.46); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em; } .device-browser__url::before { content: '🔒 '; font-size: 0.6rem; opacity: 0.75; } .device-browser__screen { display: block; width: 100%; height: auto; } /* --- Phone frame --- */ .device-phone { background: linear-gradient(145deg, #252830, #1a1c22); border-radius: 44px; padding: 14px 10px 18px; box-shadow: 0 40px 100px rgba(10, 24, 61, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 0 0 2px rgba(255, 255, 255, 0.03); position: relative; width: 220px; flex-shrink: 0; } .device-phone__island { width: 70px; height: 20px; background: #0a0b0d; border-radius: 10px; margin: 0 auto 10px; } .device-phone__screen { border-radius: 28px; overflow: hidden; background: #fff; } .device-phone__screen img { display: block; width: 100%; height: auto; } /* Hero multi-device layout */ .hero-devices { position: relative; padding-bottom: 2rem; } .device-phone--float { position: absolute; bottom: -1rem; right: -0.5rem; z-index: 2; filter: drop-shadow(0 30px 60px rgba(10,24,61,0.55)); } /* ── 9b. SCREEN SHOWCASE ──────────────────────────────────── */ .screen-showcase { display: flex; flex-direction: column; gap: 1rem; } .screen-showcase__secondary img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: 0 8px 40px rgba(10, 24, 61, 0.14), 0 0 0 1px rgba(10, 24, 61, 0.06); } .screen-showcase__label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.5rem; } .screen-showcase__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 640px) { .screen-showcase__row { grid-template-columns: 1fr; } } /* ── 10. INNER HERO (inner pages) ─────────────────────────── */ .inner-hero { padding: 4.5rem 0 3rem; background: var(--soft-gradient); } .inner-hero__content { max-width: 760px; } /* ── 11. TRUST BAR ─────────────────────────────────────────── */ .trust-bar { background: var(--bg-surface); border-bottom: 1px solid var(--border-soft); padding: 0.875rem 0; } .trust-bar__items { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; } .trust-bar__item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.825rem; font-weight: 500; color: var(--text-muted); padding: 0.35rem 2rem; border-right: 1px solid var(--border-soft); } .trust-bar__item:last-child { border-right: 0; } .trust-bar__item .material-symbols-sharp { font-size: 17px; color: var(--brand-teal); flex-shrink: 0; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* Keep old trust-strip classes for backward compat */ .trust-strip { padding: 0 0 2.5rem; } .trust-strip__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } .metric-chip { display: inline-flex; align-items: center; padding: 0.45rem 0.7rem; border-radius: 999px; background: rgba(234, 182, 76, 0.18); color: var(--brand-navy); font-size: 0.78rem; font-weight: 700; } /* ── 12. PHOTO CONTEXT BAND ───────────────────────────────── */ .photo-context { position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: center; } .photo-context__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .photo-context__overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(10, 24, 61, 0.88) 0%, rgba(10, 24, 61, 0.60) 55%, rgba(60, 178, 134, 0.35) 100% ); } .photo-context__content { position: relative; z-index: 1; padding: 5rem 0; max-width: 680px; } .photo-context__content h2, .photo-context__content p { color: var(--text-on-dark); } .photo-context__content .lead-text { opacity: 0.88; } /* ── 13. CARDS & FEATURE GRIDS ───────────────────────────── */ .trust-strip__items > div, .feature-card, .proof-grid article, .steps-grid article, .control-grid article, .workflow-grid article, .story-grid article { padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border-soft); background: var(--bg-surface); } .split-panel, .conversion-band__panel { border: 1px solid rgba(174, 184, 194, 0.18); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(10, 24, 61, 0.07); } .workflow-panel { border: 1px solid rgba(174, 184, 194, 0.18); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(10, 24, 61, 0.07); padding: 2.5rem; } .workflow-panel .section-heading { margin-bottom: 1.5rem; } .feature-card--tall { min-height: 100%; padding: 2.25rem 2.25rem 2.5rem; } .feature-card--tall h2 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -0.018em; margin-bottom: 0.75rem; } .feature-card--tall .eyebrow { margin-bottom: 0.6rem; } .feature-card--tall p { font-size: 0.9rem; line-height: 1.65; } .feature-card--tall .icon-list { margin-top: 1.25rem; gap: 0.7rem; } .feature-card--tall .icon-list li { font-size: 0.875rem; color: var(--text-body); display: flex; align-items: flex-start; gap: 0.5rem; } .feature-card--tall .icon-list li .material-symbols-sharp { font-size: 17px; color: var(--brand-teal); flex-shrink: 0; margin-top: 0.1rem; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .feature-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; } .feature-stack article { padding: 1.5rem; border-left: 3px solid rgba(60, 178, 134, 0.22); background: rgba(255, 255, 255, 0.72); } .card-grid, .control-grid, .proof-grid, .steps-grid, .story-grid, .footer-grid { display: grid; gap: 1.5rem; } .card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card-grid--three, .control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid--two, .split-grid, .report-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof-grid strong { display: block; margin-top: 0.35rem; color: var(--brand-navy); font-size: 1.02rem; } /* ── 14. CHECKLISTS ───────────────────────────────────────── */ .check-list { margin-top: 1rem; list-style: none; display: grid; gap: 0.8rem; } .check-list li { position: relative; padding-left: 1.4rem; } /* ── 15. SPLIT PANELS ─────────────────────────────────────── */ .split-grid { gap: 2rem; } .split-panel { padding: 2rem; } .split-panel--dark { background: var(--brand-navy); border-color: rgba(248, 250, 252, 0.12); } .split-panel--dark h2, .split-panel--dark p, .split-panel--dark li { color: var(--text-on-dark); } /* Device inside split panel */ .split-device { margin-top: 1.5rem; border-radius: var(--radius-sm); overflow: hidden; } .split-device .device-browser { border-radius: 8px; box-shadow: 0 20px 50px rgba(10,24,61,0.35); } .split-device .device-phone { margin: 0 auto; width: 180px; } /* ── 16. TEXT LINKS ───────────────────────────────────────── */ .text-link { display: inline-flex; margin-top: 1rem; font-weight: 700; } .text-link--light { color: var(--text-on-dark); } /* ── 17. REPORT GRID ──────────────────────────────────────── */ .report-grid { display: flex; flex-wrap: wrap; gap: 0.85rem; } .report-grid span { display: inline-flex; padding: 0.75rem 1rem; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border-soft); color: var(--brand-navy); font-weight: 600; } /* report layout on reports page */ .report-layout { gap: 2.5rem; align-items: start; } /* ── 18. STEPS & WORKFLOW GRIDS ───────────────────────────── */ .proof-grid, .steps-grid, .story-grid, .workflow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 3rem; align-items: start; } .steps-grid article span:first-child { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 50%; background: rgba(234, 182, 76, 0.16); color: var(--brand-navy); font-weight: 700; } .workflow-grid { gap: 1.75rem; } .workflow-grid article { margin-bottom: 1.2rem; } .workflow-grid article p { margin-bottom: 0; } /* ── 19. MEMBER DEVICE SCENE (members page) ───────────────── */ .member-device-scene { display: grid; grid-template-columns: 1fr auto; gap: 4rem; align-items: center; } .member-device-copy h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); } /* ── 20. CONVERSION BAND ──────────────────────────────────── */ .conversion-band { padding: 5rem 0; background: var(--bg-alt); } .conversion-band__panel { display: flex; justify-content: space-between; gap: 2rem; padding: 2.5rem 2.75rem; border-radius: var(--radius-md); background: radial-gradient(circle at top right, rgba(234, 182, 76, 0.18), transparent 20%), linear-gradient(135deg, #08142f 0%, #10285a 55%, #184970 100%); } .conversion-band__panel h2, .conversion-band__panel p { color: var(--text-on-dark); } .conversion-band__panel p { color: rgba(248, 250, 252, 0.78); font-size: 0.95rem; } .conversion-band__actions { flex-direction: column; align-items: stretch; justify-content: center; gap: 0.5rem; min-width: 220px; flex-shrink: 0; } .conversion-band__actions .button--gold { justify-content: center; text-align: center; white-space: nowrap; } .conversion-band__text-link { text-align: center; color: rgba(248, 250, 252, 0.55); font-size: 0.82rem; font-weight: 500; padding: 0.3rem; text-decoration: none; transition: color 0.15s; display: block; } .conversion-band__text-link:hover { color: var(--brand-gold); } .conversion-band__note { text-align: center; font-size: 0.74rem; color: rgba(248, 250, 252, 0.32); display: block; } /* ── 21. FAQ ACCORDION ────────────────────────────────────── */ .faq-list { display: grid; gap: 0.75rem; } .faq-item { border-radius: var(--radius-md); border: 1px solid var(--border-soft); background: var(--bg-surface); overflow: hidden; } .faq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; color: var(--text-strong); line-height: 1.45; transition: background-color 0.15s ease; } .faq-trigger:hover { background: rgba(60, 178, 134, 0.04); } .faq-trigger[aria-expanded="true"] { background: rgba(60, 178, 134, 0.05); } .faq-body { max-height: 0; overflow: hidden; opacity: 0; padding: 0 1.5rem; border-top: 1px solid transparent; transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, padding 0.38s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease; } .faq-body.is-open { max-height: 800px; opacity: 1; padding: 1.25rem 1.5rem 1.5rem; border-top-color: var(--border-soft); } .faq-body p:last-child { margin-bottom: 0; } .faq-body a { color: var(--text-teal); font-weight: 500; } /* ── 22. PHOTO HERO (home full-bleed) ────────────────────── */ .hero--photo { position: relative; min-height: 92vh; display: flex; align-items: flex-end; padding: 0; background: var(--bg-dark); overflow: hidden; } .hero-photo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: 0.72; } .hero-photo-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(10, 24, 61, 0.08) 0%, rgba(10, 24, 61, 0.55) 50%, rgba(10, 24, 61, 0.88) 100% ); } .hero-photo-content { position: relative; z-index: 1; padding: 5rem 0 6rem; max-width: 780px; } .hero-photo-content h1 { color: #fff; font-size: clamp(3rem, 6.5vw, 5.2rem); line-height: 1.04; margin-bottom: 1.25rem; } .hero-photo-content p { color: rgba(248, 250, 252, 0.82); font-size: 1.175rem; line-height: 1.6; margin-bottom: 2rem; max-width: 580px; } /* ── 22b. PILLARS STRIP ───────────────────────────────────── */ .pillars-strip { background: var(--bg-surface); border-bottom: 1px solid var(--border-soft); } .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .pillar { padding: 2rem 2.5rem; border-right: 1px solid var(--border-soft); } .pillar:last-child { border-right: 0; } .pillar strong { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; margin-bottom: 0.4rem; } .pillar p { font-size: 0.875rem; color: var(--text-muted); margin: 0; line-height: 1.55; } /* ── 22c. PHOTO FEATURE (alternating 50/50) ───────────────── */ .photo-feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; overflow: hidden; } .photo-feature__img { overflow: hidden; } .photo-feature__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s ease; } .photo-feature__img:hover img { transform: scale(1.03); } .photo-feature__copy { display: flex; flex-direction: column; justify-content: center; padding: 4.5rem 5rem; background: var(--bg-surface); } .photo-feature--alt .photo-feature__copy { background: var(--bg-alt); } .photo-feature__copy h2 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); margin-bottom: 1rem; letter-spacing: -0.025em; } .photo-feature__copy p { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 1.75rem; max-width: 440px; line-height: 1.65; } .photo-feature__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--text-teal); text-decoration: none; transition: gap 0.2s; } .photo-feature__link:hover { gap: 0.65rem; color: var(--text-teal); } /* arrow provided by Material Symbol span in HTML */ /* Flip: image right, text left */ .photo-feature--flip .photo-feature__img { order: 2; } .photo-feature--flip .photo-feature__copy { order: 1; } /* Screen variant: show top of landscape screenshot */ .photo-feature__img--screen img { object-position: top center; } /* ── 22d. PHOTO MOSAIC ────────────────────────────────────── */ .photo-mosaic { display: grid; grid-template-columns: repeat(5, 1fr); height: 300px; overflow: hidden; } .photo-mosaic__item { overflow: hidden; cursor: default; } .photo-mosaic__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s ease; } .photo-mosaic__item:hover img { transform: scale(1.07); } /* ── 22e. INNER HERO — PHOTO VARIANT ─────────────────────── */ .inner-hero--photo { position: relative; overflow: hidden; background: var(--bg-dark); padding: 0; } .inner-hero--photo .inner-hero__content { position: relative; z-index: 1; padding: 5rem 0 4rem; } .inner-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.55; } .inner-hero__overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(10, 24, 61, 0.82) 0%, rgba(10, 24, 61, 0.55) 60%, rgba(60, 178, 134, 0.25) 100% ); } .inner-hero--photo h1, .inner-hero--photo p, .inner-hero--photo .eyebrow { color: var(--text-on-dark); } .inner-hero--photo .eyebrow { color: rgba(234, 182, 76, 0.9); } .inner-hero--photo .button--secondary { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.28); } .inner-hero--photo .button--secondary:hover { background: rgba(255,255,255,0.22); } /* ── 22f. SIMPLIFIED CARDS ────────────────────────────────── */ .feature-card { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: none; /* hover shadow handled in animation section */ } /* ── 23. FOOTER ───────────────────────────────────────────── */ .site-footer { padding: 4.5rem 0 2rem; background: var(--bg-dark); } .footer-logo { width: 160px; margin-bottom: 1.25rem; } .footer-tagline { font-size: 0.78rem; color: rgba(248, 250, 252, 0.4); margin: 0.5rem 0 0; letter-spacing: 0.01em; } /* All text on dark */ .footer-heading, .footer-copy, .footer-links a, .footer-contact__item, .footer-bottom p { color: var(--text-on-dark); } .footer-copy { font-size: 0.875rem; line-height: 1.65; color: rgba(248, 250, 252, 0.72); margin: 0; } .footer-heading { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(248, 250, 252, 0.42); margin: 0 0 1.1rem; } /* Nav links */ .footer-links { display: grid; gap: 0.6rem; } .footer-links a { font-size: 0.875rem; color: rgba(248, 250, 252, 0.78); text-decoration: none; transition: color 0.15s; } .footer-links a:hover { color: var(--brand-gold); } /* Contact items */ .footer-contact { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.875rem; } .footer-contact__item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(248, 250, 252, 0.78); text-decoration: none; transition: color 0.15s; } .footer-contact__item .material-symbols-sharp { font-size: 17px; color: var(--brand-teal); flex-shrink: 0; opacity: 0.8; } .footer-contact__item:hover { color: var(--brand-gold); } .footer-contact__item--subtle { font-size: 0.8rem; color: rgba(248, 250, 252, 0.38); margin-top: 0.25rem; } .footer-contact__item--subtle:hover { color: rgba(248, 250, 252, 0.65); } /* Legal links in footer-bottom */ .footer-legal-link { color: rgba(248, 250, 252, 0.42); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; } .footer-legal-link:hover { color: rgba(248, 250, 252, 0.7); } /* Bottom bar */ .footer-bottom { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(248, 250, 252, 0.1); } .footer-bottom p { font-size: 0.82rem; color: rgba(248, 250, 252, 0.4); margin: 0; } /* ── 24. MATERIAL SYMBOLS ─────────────────────────────────── */ .material-symbols-sharp { font-family: 'Material Symbols Sharp', sans-serif; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; user-select: none; -webkit-font-smoothing: antialiased; } /* Icon in pillar strip */ .pillar-icon { font-size: 32px; color: var(--brand-teal); margin-bottom: 0.875rem; display: block; animation: iconFloat 4s ease-in-out infinite; } .pillar:nth-child(2) .pillar-icon { animation-delay: 0.8s; } .pillar:nth-child(3) .pillar-icon { animation-delay: 1.6s; } /* Icon in feature card */ .feature-card__icon { font-size: 30px; color: var(--brand-teal); margin-bottom: 1.25rem; display: block; } .feature-card--tall .feature-card__icon { margin-bottom: 0.875rem; } /* Icon in mega menu — override SVG */ .mega-icon .material-symbols-sharp { font-size: 22px; transition: transform 0.2s; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .mega-link:hover .mega-icon .material-symbols-sharp { transform: scale(1.12); } /* Photo-feature link arrow */ .photo-feature__link .material-symbols-sharp { font-size: 18px; transition: transform 0.22s ease; vertical-align: middle; } .photo-feature__link:hover .material-symbols-sharp { transform: translateX(5px); } /* FAQ toggle icon */ .faq-toggle-icon { font-size: 22px; flex-shrink: 0; color: var(--brand-teal); border: 2px solid var(--brand-teal); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transition: transform 0.22s ease, background 0.15s, color 0.15s; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20; } .faq-trigger[aria-expanded="true"] .faq-toggle-icon { background: var(--brand-teal); color: #fff; transform: rotate(45deg); } /* Check list with icon */ .check-list .material-symbols-sharp { font-size: 16px; color: var(--brand-teal); margin-right: 0.4rem; flex-shrink: 0; vertical-align: middle; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* Override the bullet dot when icons are used */ .check-list.icon-list li { padding-left: 0; display: flex; align-items: flex-start; gap: 0.375rem; } .check-list.icon-list li::before { display: none; } /* Drop link icon */ .drop-link .material-symbols-sharp { font-size: 16px; opacity: 0.65; flex-shrink: 0; } /* Button icon */ .button .material-symbols-sharp { font-size: 17px; margin-left: 0.3rem; } /* ── 24b. ANIMATIONS ───────────────────────────────────────── */ /* Floating icon */ @keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Scroll reveal — JS adds .is-visible */ .js-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.52s ease, transform 0.52s ease; will-change: opacity, transform; } .js-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Card hover lift (replaces heavy shadow) */ .feature-card { transition: border-color 0.18s, transform 0.2s ease, box-shadow 0.2s ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(10, 24, 61, 0.07); border-color: var(--border-strong); } /* Pillar hover */ .pillar { transition: background 0.18s; } .pillar:hover { background: rgba(60, 178, 134, 0.04); } /* CTA gold button — subtle shimmer sweep */ @keyframes shimmerSweep { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .button--gold { background-image: linear-gradient( 90deg, var(--action-accent) 35%, #f5cf78 50%, var(--action-accent) 65% ); background-size: 220% auto; animation: shimmerSweep 5s linear infinite; } .button--gold:hover { animation-duration: 1.2s; } /* Mega icon scale */ .mega-icon { transition: transform 0.2s ease, background 0.15s; } .mega-link:hover .mega-icon { transform: scale(1.08); } /* Story-grid, workflow, control articles — subtle reveal ready */ .story-grid article, .workflow-grid article, .control-grid article, .steps-grid article { transition: border-color 0.18s, box-shadow 0.18s; } .story-grid article:hover, .workflow-grid article:hover, .control-grid article:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(10, 24, 61, 0.06); } /* ── 25. SECTION ACTIONS ──────────────────────────────────── */ .section-actions { margin-top: 2rem; } /* ── 25. RESPONSIVE ───────────────────────────────────────── */ @media (max-width: 1080px) { .topbar { flex-wrap: wrap; padding: 0.5rem 0; } .topbar__nav { flex-direction: row; } .hero-grid, .card-grid--four, .feature-stack, .trust-strip__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; } .device-browser--hero { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); } .device-phone--float { width: 180px; right: 0; bottom: 0; } /* Photo feature copy — tighter horizontal padding at mid-size viewports */ .photo-feature__copy { padding: 2.5rem 3rem; } /* Hero height — cap on tablet so it doesn't consume the full viewport */ .hero--photo { min-height: 50vh; } } @media (max-width: 820px) { /* Reduce base font — scales all rem values proportionally */ html { font-size: 15px; } /* Hamburger visible */ .menu-toggle { display: block; } /* Backdrop overlay */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(10, 24, 61, 0.5); z-index: 249; } .nav-overlay.is-open { display: block; animation: overlayFadeIn 0.22s ease forwards; } /* Right-side slide drawer */ .topbar__nav { display: flex; flex-direction: column; align-items: stretch; flex: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); background: var(--bg-surface); border-left: 1px solid var(--border-soft); box-shadow: -8px 0 40px rgba(10, 24, 61, 0.16); transform: translateX(110%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); z-index: 250; padding: 5rem 1.25rem 2rem; overflow-y: auto; gap: 0; } .topbar__nav.is-open { transform: translateX(0); } .site-nav { flex-direction: column; align-items: stretch; flex: 0; gap: 0; } .nav-item { border-bottom: 1px solid var(--border-soft); } .nav-item:last-child { border-bottom: 0; } .nav-link, .nav-trigger { width: 100%; justify-content: space-between; padding: 1rem 0.25rem; border-radius: 0; font-size: 1rem; min-height: 52px; display: flex; align-items: center; } .nav-chevron { width: 16px; height: 16px; opacity: 0.4; } /* Mobile mega menu — inline, not floating */ .mega-menu { display: none; position: static; transform: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 0.5rem 0.5rem; min-width: 0; background: transparent; animation: none; } .mega-menu::before { display: none; } .mega-menu--2col { grid-template-columns: 1fr; gap: 0; } .nav-item:hover > .mega-menu { display: none; } .nav-item.is-open > .mega-menu { display: grid; } .mega-link { padding: 0.625rem 0.5rem; border-radius: 8px; } .mega-icon { width: 30px; height: 30px; border-radius: 7px; } .mega-icon svg { width: 14px; height: 14px; } .mega-label { font-size: 0.9rem; } .mega-desc { font-size: 0.78rem; } /* Mobile drop menu — inline */ .drop-menu { display: none; position: static; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 0.5rem 0.5rem; min-width: 0; background: transparent; animation: none; } .nav-item:hover > .drop-menu { display: none; } .nav-item.is-open > .drop-menu { display: block; } .drop-link { padding: 0.625rem 0.5rem; font-size: 0.9375rem; border-radius: 8px; } /* CTA buttons at drawer bottom */ .topbar__actions { margin-left: 0; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--border-soft); flex-direction: column; align-items: stretch; gap: 0.625rem; } .topbar__actions .button { text-align: center; width: 100%; } .topbar__actions .button--sm { min-height: 52px; font-size: 1rem; border-radius: 12px; } /* Hamburger → X when drawer is open */ .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Section padding */ .hero, .inner-hero, .section { padding: 3.5rem 0; } /* Hero layout collapses to 1-col */ .hero-grid, .trust-strip__items { grid-template-columns: 1fr; } /* 3-col grids → 2-col on narrow tablet (≤820px) */ .card-grid--three, .control-grid, .workflow-grid, .proof-grid, .steps-grid, .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Trust bar — compact but always 3 columns */ .trust-bar__item { padding: 0.35rem 0.75rem; font-size: 0.78rem; } /* Device mockups */ .device-browser--hero { transform: none; border-radius: 8px; } .device-browser--hero .device-browser__screen { max-height: 260px; object-fit: cover; object-position: top; } .hero-grid { gap: 2rem; } .hero-devices { padding-bottom: 0; } .device-phone--float { display: none; } .split-device .device-browser { max-height: 220px; overflow: hidden; } .split-device .device-browser .device-browser__screen { max-height: 180px; object-fit: cover; object-position: top; } .member-device-scene { grid-template-columns: 1fr; gap: 2rem; justify-items: center; } .device-scene__tablet { display: none; } .device-scene__laptop { max-width: 72%; } .device-scene__phone .device-phone { width: 130px; } /* Photo sections */ .photo-context { min-height: 320px; } .photo-context__content { padding: 3.5rem 0; } .photo-context__content h2 { font-size: clamp(1.5rem, 4vw, 2rem); } .hero--photo { min-height: 50vh; } .hero-photo-content { padding: 3rem 0 4rem; } .photo-feature { grid-template-columns: 1fr; min-height: auto; } .photo-feature__img { min-height: 280px; order: 0 !important; } .photo-feature__copy { order: 1 !important; padding: 2.5rem 1.5rem; } .photo-feature__copy h2 { font-size: clamp(1.5rem, 4vw, 2rem); } .photo-mosaic { grid-template-columns: repeat(3, 1fr); height: 220px; } .photo-mosaic__item:nth-child(4), .photo-mosaic__item:nth-child(5) { display: none; } .inner-hero--photo .inner-hero__content { padding: 3.5rem 0 3rem; } } @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 640px) { /* Card and content grids — collapse to single column on mobile */ .card-grid--two, .card-grid--four, .split-grid, .report-layout, .feature-stack, .proof-grid, .steps-grid, .story-grid, .card-grid--three, .control-grid, .workflow-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } /* Pillars strip */ .pillars-grid { grid-template-columns: 1fr; } .pillar { border-right: 0; border-bottom: 1px solid var(--border-soft); padding: 1.5rem 1.25rem; } .pillar:last-child { border-bottom: 0; } /* CTA band and footer bottom */ .conversion-band__panel, .footer-bottom { flex-direction: column; align-items: flex-start; } .conversion-band__actions { justify-content: flex-start; min-width: 0; } } @media (max-width: 560px) { html { font-size: 14px; } /* Hero — allow a bit more height on small phones */ .hero--photo { min-height: 75vh; } .button, .section-actions .button, .conversion-band__actions .button { width: 100%; } .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .hero-actions .button { width: 100%; } .photo-mosaic { grid-template-columns: repeat(2, 1fr); height: 180px; } .photo-mosaic__item:nth-child(3) { display: none; } .photo-feature__copy { padding: 2rem 1.25rem; } /* Device scene — phone only on small mobile */ .device-scene__phone { display: none; } .device-scene__laptop { max-width: 92%; transform: none; } .brand-mark img { width: 144px; } .trust-strip { padding-bottom: 1rem; } /* Tighter section padding on very small screens */ .hero, .inner-hero, .section { padding: 3rem 0; } /* Showcase browsers: show just the top UI chrome + first card row */ .device-browser--showcase { max-height: 300px; } .device-browser--showcase .device-browser__screen { max-height: 258px; object-fit: cover; object-position: top; } /* Phone frames */ .device-phone { width: 180px; border-radius: 36px; padding: 11px 8px 14px; } .device-phone__island { width: 56px; height: 17px; } .device-phone__screen { border-radius: 22px; } .member-device-scene .device-phone { width: 170px; } } /* ── 26. TESTIMONIAL ──────────────────────────────────────── */ .testimonial-section { background: var(--bg-alt); } .testimonial { max-width: 740px; margin: 0 auto; text-align: center; padding: 3rem 3.5rem; background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-soft); box-shadow: 0 4px 20px rgba(10, 24, 61, 0.05); position: relative; } .testimonial__icon { font-size: 48px; color: var(--brand-teal); opacity: 0.25; display: block; margin: 0 auto 1.25rem; } .testimonial__quote { font-size: 1.2rem; line-height: 1.65; color: var(--text-strong); font-weight: 500; font-style: italic; margin-bottom: 1.5rem; } .testimonial__cite { font-size: 0.875rem; color: var(--text-muted); font-style: normal; } .testimonial__cite strong { color: var(--text-strong); } @media (max-width: 640px) { .testimonial { padding: 2rem 1.5rem; } .testimonial__quote { font-size: 1.05rem; } } /* ── 27. PRICING PAGE ─────────────────────────────────────── */ .pricing-early-badge { display: flex; align-items: flex-start; gap: 0.75rem; background: rgba(234, 182, 76, 0.1); border: 1px solid rgba(234, 182, 76, 0.3); border-radius: var(--radius-sm); padding: 1rem 1.125rem; margin-bottom: 1.75rem; text-align: left; } .pricing-early-badge .material-symbols-sharp { color: var(--brand-gold); flex-shrink: 0; margin-top: 0.05rem; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .pricing-early-badge strong { display: block; font-size: 0.84rem; font-weight: 700; color: var(--text-strong); margin-bottom: 0.2rem; } .pricing-early-badge span { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; } .pricing-hero-note { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(60, 178, 134, 0.12); color: var(--text-teal); border: 1px solid rgba(60, 178, 134, 0.25); border-radius: 100px; padding: 0.3rem 1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.25rem; } .pricing-card { max-width: 520px; margin: 0 auto; background: var(--bg-surface); border: 2px solid var(--brand-teal); border-radius: var(--radius-lg); padding: 3rem 3.5rem; text-align: center; box-shadow: 0 8px 40px rgba(60, 178, 134, 0.12); } .pricing-card__price { font-size: 4rem; font-weight: 800; color: var(--text-strong); letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.25rem; } .pricing-card__sub { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 2rem; } .pricing-features { list-style: none; padding: 0; margin: 0 0 2.5rem; text-align: left; display: flex; flex-direction: column; gap: 0.75rem; } .pricing-features li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.95rem; color: var(--text-body); } .pricing-features li .material-symbols-sharp { font-size: 20px; color: var(--brand-teal); flex-shrink: 0; margin-top: 0.1rem; } /* ── 27b. PRICING GRID ────────────────────────────────────── */ .pricing-grid { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 1.5rem; align-items: stretch; max-width: 1080px; margin: 0 auto; } .pricing-plan { background: var(--bg-surface); border: 1.5px solid var(--border-soft); border-radius: var(--radius-lg); padding: 2rem 1.75rem 2.25rem; display: flex; flex-direction: column; } .pricing-plan--featured { border-color: var(--brand-teal); border-width: 2.5px; box-shadow: 0 12px 48px rgba(60, 178, 134, 0.14); padding: 2.25rem 2rem 2.5rem; } .pricing-plan__badge { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--brand-teal); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.3rem 0.85rem; border-radius: 100px; margin-bottom: 1.1rem; width: fit-content; } .pricing-plan__badge .material-symbols-sharp { font-size: 14px; } .pricing-plan__name { font-size: 1.2rem; font-weight: 800; color: var(--text-strong); margin-bottom: 0.35rem; } .pricing-plan__desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; line-height: 1.5; } .pricing-plan__members { display: flex; align-items: center; gap: 0.375rem; font-size: 0.95rem; color: var(--text-body); margin-bottom: 1.1rem; } .pricing-plan__members .material-symbols-sharp { font-size: 20px; color: var(--brand-teal); flex-shrink: 0; } .pricing-plan__price { display: flex; align-items: baseline; gap: 0.2rem; margin-bottom: 0.3rem; } .pricing-plan__amount { font-size: 2.25rem; font-weight: 800; color: var(--text-strong); letter-spacing: -0.04em; line-height: 1; } .pricing-plan--featured .pricing-plan__amount { font-size: 2.75rem; } .pricing-plan__period { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; } .pricing-plan__savings { font-size: 0.78rem; color: var(--text-teal, var(--brand-teal)); font-weight: 600; margin-bottom: 0.2rem; } .pricing-plan__extra { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.2rem; } .pricing-plan__trial { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; margin-bottom: 1.5rem; } .pricing-plan__sub { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem; } .pricing-features--compact { flex: 1; margin-bottom: 1.75rem; gap: 0.55rem; } .pricing-features--compact li { font-size: 0.875rem; } .pricing-note { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 2rem; max-width: 680px; margin-left: auto; margin-right: auto; } @media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; } .pricing-plan--featured { order: -1; } } /* ── 28. ABOUT PAGE ───────────────────────────────────────── */ .about-story { max-width: 720px; margin: 0 auto; } .about-story p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.25rem; } .contact-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 2rem 2.5rem; display: flex; flex-direction: column; gap: 1rem; } .contact-item { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; color: var(--text-body); } .contact-item .material-symbols-sharp { font-size: 22px; color: var(--brand-teal); flex-shrink: 0; } .contact-item a { color: var(--text-teal); font-weight: 600; } .contact-item a:hover { color: var(--brand-gold); } /* ── 29. LEGAL PAGES (Privacy / Terms) ───────────────────── */ .legal-body { max-width: 760px; margin: 0 auto; } .legal-body h2 { font-size: 1.3rem; margin-top: 2.5rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-soft); } .legal-body h3 { font-size: 1.05rem; margin-top: 1.5rem; } .legal-body p, .legal-body li { font-size: 0.975rem; line-height: 1.75; color: var(--text-body); } .legal-body ul { padding-left: 1.5rem; margin-bottom: 1rem; } .legal-body ul li { margin-bottom: 0.35rem; } .legal-meta { display: inline-block; background: var(--bg-alt); border-radius: var(--radius-sm); padding: 0.5rem 1rem; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 2rem; } /* ── 30. TESTIMONIAL GRID (3-up) ──────────────────────────── */ .testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: none; } .testimonial--compact { max-width: none; margin: 0; text-align: left; padding: 2rem 2rem 1.75rem; } .testimonial--compact .testimonial__icon { margin: 0 0 1rem; font-size: 36px; } .testimonial--compact .testimonial__quote { font-size: 1rem; line-height: 1.68; margin-bottom: 1.25rem; } .testimonial--compact .testimonial__cite { border-top: 1px solid var(--border-soft); padding-top: 0.875rem; font-size: 0.84rem; } @media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; max-width: 580px; margin: 0 auto; } .testimonial--compact { text-align: left; } } @media (max-width: 640px) { .testimonial--compact { padding: 1.5rem 1.25rem; } } /* ── 31. PAGE PRELOADER ───────────────────────────────────── */ #page-preloader { position: fixed; inset: 0; z-index: 9999; background: var(--bg-page); display: flex; align-items: center; justify-content: center; transition: opacity 0.45s ease, visibility 0.45s ease; } #page-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .preloader__inner { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; } .preloader__ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--border-soft); border-top-color: var(--brand-teal); animation: preloaderSpin 0.9s linear infinite; } .preloader__icon { width: 48px; height: 48px; border-radius: 12px; display: block; } @keyframes preloaderSpin { to { transform: rotate(360deg); } }