/* ============================================ LANDING.CSS — LawLinq Landing Page Maizzle-inspired clean design ============================================ */ /* ============ FONT IMPORT ============ */ /* Inter Variable loaded via Typekit in */ /* ============ CSS VARIABLES ============ */ :root { /* ── Font Families ── */ --font-body: 'inter-variable', 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --font-display: 'inter-variable', 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* ── Font Settings (OpenType) ── */ --font-settings: "cv01", "ss03"; /* Font weights, text sizes, line heights, letter spacings inherited from global/colours.css */ /* ── Title sizes, line heights, letter spacings ── */ /* Inherited from global/colours.css */ /* ── LawLinq Colors ── */ --color-primary: var(--bs-primary); --color-primary-hover: var(--bs-primary-active); --color-primary-light: rgba(var(--bs-primary-rgb), 0.08); --color-primary-soft: #fef7ed; /* Light mode: dark-on-light equivalents of Linear's text hierarchy */ --color-ink: #1a1c1e; /* headings — near black */ --color-ink-light: #3c3f44; /* body text */ --color-ink-muted: #6b7076; /* subtitles, secondary */ --color-ink-faint: #9a9ea6; /* captions, placeholders */ --color-paper: #ffffff; --color-paper-cool: var(--slate-50); --color-paper-dark: #0d1117; --color-surface-dark: var(--slate-800); --color-surface-darker: #1a2332; --color-border: var(--slate-200); --color-border-light: var(--slate-100); /* ── Spacing ── */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; /* Radius, shadows inherited from global/colours.css */ /* ── Transitions ── */ --transition-fast: 0.1s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Easing Curves (Linear's set) ── */ --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); } /* ============ DARK MODE ============ */ [data-bs-theme=dark] { /* Linear's exact dark-mode text colours */ --color-ink: #f7f8f8; /* primary — near white */ --color-ink-light: #d0d6e0; /* secondary — body text */ --color-ink-muted: #8a8f98; /* tertiary — subtitles */ --color-ink-faint: #62666d; /* quaternary — dim */ /* Backgrounds — Linear-inspired near-black */ --color-paper: #08090a; --color-paper-cool: #0b0c0d; --color-paper-dark: #020202; --color-primary-soft: var(--bs-primary-light); /* Borders */ --color-border: rgba(255, 255, 255, 0.08); --color-border-light: rgba(255, 255, 255, 0.05); /* Surfaces */ --color-surface-dark: #1e293b; --color-surface-darker: #1a2332; --color-card: #141416; /* Shadow overrides inherited from global/colours.css */ } /* Dark mode — navbar: transparent at top, Raycast glass pill on scroll */ [data-bs-theme=dark] .navbar-inner { background: transparent; border-color: transparent; box-shadow: none; transition: height 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease; } [data-bs-theme=dark] .navbar.scrolled .navbar-inner { background: linear-gradient(137deg, rgba(17, 18, 20, 0.75) 4.87%, rgba(12, 13, 15, 0.9) 75.88%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1); } /* Dark mode — nav link hover */ [data-bs-theme=dark] .nav-link:hover { background: rgba(255, 255, 255, 0.05); } /* Dark mode — invert waves so they're visible on dark bg */ [data-bs-theme=dark] .hero-topo-bg { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px); filter: none; opacity: 0.6; } /* Dark mode — grid lines for sections */ [data-bs-theme=dark] .feature-highlight-section.bg-paper::before, [data-bs-theme=dark] .all-features-section::before, [data-bs-theme=dark] .founder-section::before, [data-bs-theme=dark] .faq-section::before, [data-bs-theme=dark] .footer::before { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px); filter: none; opacity: 0.4; } /* Dark mode — invert logo scroller so dark logos become light */ [data-bs-theme=dark] .logo-item { filter: invert(1) grayscale(100%); opacity: 0.35; } [data-bs-theme=dark] .logo-item:hover { filter: invert(1) grayscale(0%); opacity: 0.6; } /* Dark mode — minimal hero glow (Raycast-style: near invisible) */ [data-bs-theme=dark] .hero-glow { background: radial-gradient(ellipse at 30% 40%, rgba(var(--bs-primary-rgb), 0.02) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(251, 191, 36, 0.01) 0%, transparent 45%); opacity: 0.7; } /* Dark mode — hero badge: outlined pill instead of solid */ [data-bs-theme=dark] .hero-badge { background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); } /* Dark mode — feature stats card */ [data-bs-theme=dark] .feature-stats { border-color: rgba(255, 255, 255, 0.08); box-shadow: none; background: transparent; } /* Dark mode — logo swap */ [data-bs-theme=dark] .navbar-logo img, [data-bs-theme=dark] .footer-brand > img { content: url('/static/images/lawlinQ-logo-dark.png'); } /* Dark mode — btn-secondary: outlined style */ [data-bs-theme=dark] .btn-secondary { background: transparent; color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.12); } [data-bs-theme=dark] .btn-secondary:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; } /* Dark mode — theme toggle */ .theme-toggle-wrapper { position: relative; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; color: var(--color-ink-muted); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); font-size: 1rem; } .theme-toggle:hover { color: var(--color-primary); background: rgba(0, 0, 0, 0.04); } [data-bs-theme=dark] .theme-toggle:hover { background: rgba(255, 255, 255, 0.06); } /* Show correct icon — sun-bright in light, moon in dark */ .theme-toggle .theme-light-show { display: inline; } .theme-toggle .theme-dark-show { display: none; } [data-bs-theme=dark] .theme-toggle .theme-light-show { display: none; } [data-bs-theme=dark] .theme-toggle .theme-dark-show { display: inline; } /* Theme dropdown menu */ .theme-toggle-menu { display: none; position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 140px; background: var(--color-paper); border: 1px solid var(--color-border); border-radius: 0.75rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 0.375rem; z-index: 101; } .theme-toggle-wrapper.open .theme-toggle-menu { display: block; } .theme-toggle-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-ink-muted); text-decoration: none; transition: background 0.15s, color 0.15s; } .theme-toggle-option:hover { background: rgba(0, 0, 0, 0.04); color: var(--color-ink); } [data-bs-theme=dark] .theme-toggle-option:hover { background: rgba(255, 255, 255, 0.06); } .theme-toggle-option.active { color: var(--color-primary); font-weight: 600; } .theme-toggle-option i { width: 1rem; text-align: center; font-size: 0.875rem; } /* ============ BASE STYLES ============ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: var(--text-regular); line-height: var(--text-regular-lh); letter-spacing: var(--text-regular-ls); font-weight: var(--fw-normal); color: var(--color-ink-light); background: var(--color-paper); font-optical-sizing: auto; font-feature-settings: var(--font-settings); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-ink); font-feature-settings: var(--font-settings); } /* Title scale — maps to Linear's title-3 through title-8 */ h1 { font-size: var(--title-8); line-height: var(--title-8-lh); letter-spacing: var(--title-8-ls); } h2 { font-size: var(--title-5); line-height: var(--title-5-lh); letter-spacing: var(--title-5-ls); } h3 { font-size: var(--title-3); line-height: var(--title-3-lh); letter-spacing: var(--title-3-ls); } h4 { font-size: var(--title-2); line-height: var(--title-2-lh); letter-spacing: var(--title-2-ls); } h5, h6 { font-size: var(--title-1); line-height: var(--title-1-lh); letter-spacing: var(--title-1-ls); } p { color: var(--color-ink-muted); font-size: var(--text-regular); font-weight: var(--fw-normal); line-height: var(--text-regular-lh); letter-spacing: var(--text-regular-ls); font-feature-settings: var(--font-settings); } a { text-decoration: none; color: inherit; transition: color var(--transition-fast); } img { max-width: 100%; height: auto; display: block; } /* ============ CONTAINER ============ */ .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-xl); } /* ============ BUTTONS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; line-height: 1.5; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-primary { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #ffffff; } .btn-secondary { background: var(--color-paper); color: var(--color-ink-muted); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-paper-cool); color: var(--color-ink); border-color: var(--color-ink-muted); } .btn-lg { padding: 0.625rem 1.25rem; font-size: 0.9375rem; } .btn-sm { padding: 0.3125rem 0.75rem; font-size: 0.8125rem; } /* ============ NAVBAR ============ */ .navbar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; justify-content: center; width: 100%; padding: 1rem 1rem 0; overscroll-behavior: contain; transition: padding var(--transition-base); } .navbar.scrolled { padding: 0.625rem 1rem 0; } /* When mobile menu is open, container becomes full-screen scrollable */ .navbar.menu-opened { min-height: 100vh; max-height: 100vh; padding-bottom: 1.5rem; overflow-y: scroll; } .navbar-container { width: 100%; max-width: 1400px; } .navbar-inner { display: grid; grid-template-rows: auto auto; grid-template-columns: 1fr; width: 100%; overflow: visible; padding: 1rem 1.5rem; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid transparent; border-radius: var(--radius-lg); box-shadow: none; transition: height 0.3s ease, box-shadow var(--transition-base), background var(--transition-base), backdrop-filter var(--transition-base), border-color var(--transition-base); transform: translateZ(0); will-change: height; } .navbar-top { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; } .navbar.scrolled .navbar-inner { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-color: rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.6); } /* When menu is open, always show the glass background */ .navbar-inner.menu-opened { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6); } .navbar.scrolled .nav-link { color: var(--color-ink); } .navbar.scrolled .nav-link:hover { color: var(--color-primary); } .navbar-brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; } .navbar-logo img { display: block; height: 36px; width: auto; } .navbar-brand-text { font-size: 1.25rem; font-weight: 700; color: var(--color-ink); letter-spacing: -0.02em; } .navbar-nav { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .nav-links { display: flex; align-items: center; list-style: none; gap: 0.25rem; margin: 0; padding: 0; } .nav-link { display: inline-flex; align-items: center; padding: 0.5rem 1rem; color: var(--color-ink-muted); font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); } .nav-link:hover { color: var(--color-ink); background: rgba(0, 0, 0, 0.04); } .nav-actions { display: flex; align-items: center; gap: 1rem; } .nav-actions .btn-primary { padding: 0.4rem 1.125rem; font-size: 0.8125rem; border-radius: var(--radius-sm); } .nav-signin { color: var(--color-ink-muted); font-size: 0.9rem; padding: 0.3rem 1rem; transition: color var(--transition-fast); display: flex; align-items: center; justify-content: center; border:1px solid var(--color-ink-faint); border-radius: var(--radius-sm); } .nav-signin:hover { color: var(--color-ink); border:1px solid var(--color-ink); } /* ============ MOBILE NAV ACTIONS ============ */ .mobile-nav-actions { display: none; align-items: center; gap: 0.75rem; } /* ============ MOBILE THEME TOGGLE ============ */ .mobile-theme-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; padding: 0; cursor: pointer; color: var(--color-ink-muted); font-size: 1rem; transition: color var(--transition-fast); } .mobile-theme-toggle:hover { color: var(--color-primary); } .mobile-theme-toggle .theme-light-show { display: inline; } .mobile-theme-toggle .theme-dark-show { display: none; } [data-bs-theme=dark] .mobile-theme-toggle .theme-light-show { display: none; } [data-bs-theme=dark] .mobile-theme-toggle .theme-dark-show { display: inline; } /* ============ HAMBURGER TOGGLE ============ */ .menu-toggle { display: none; position: relative; width: 24px; height: 16px; background: none; border: none; padding: 0; cursor: pointer; transition: transform 0.5s ease; will-change: transform; } .menu-toggle span { position: absolute; left: 50%; width: 100%; height: 1.5px; background: var(--color-ink); border-radius: 2px; transition: transform 0.5s ease, opacity 0.25s ease; transform: translate(-50%, -50%); } .menu-toggle span:first-child { top: 10%; } .menu-toggle span:nth-child(2) { top: 50%; } .menu-toggle span:nth-child(3) { top: 90%; } /* Hamburger → ✕ morph when menu is open */ .navbar-inner.menu-opened .menu-toggle { transform: rotate(180deg); } .navbar-inner.menu-opened .menu-toggle span:first-child { top: 50%; transform: translate(-50%) rotate(-45deg); } .navbar-inner.menu-opened .menu-toggle span:nth-child(2) { top: 50%; opacity: 0; transform: translate(-50%); } .navbar-inner.menu-opened .menu-toggle span:nth-child(3) { top: 50%; transform: translate(-50%) rotate(45deg); } /* ============ MOBILE NAV CONTENT (inside pill) ============ */ .mobile-nav-content { display: none; } .mobile-nav-links { list-style: none; padding: 0; margin: 0; } .mobile-nav-links li { margin-bottom: 0; } .mobile-nav-links a { display: block; font-size: 1rem; font-weight: 500; color: var(--color-ink-light); padding: 0.75rem 0.5rem; border-radius: var(--radius-sm); text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast); } .mobile-nav-links a:hover { color: var(--color-ink); background: rgba(0, 0, 0, 0.04); } .mobile-menu-divider { height: 1px; background: var(--color-border-light); margin: var(--space-md) 0; } .mobile-signin-link { display: block; font-size: 1rem; font-weight: 500; color: var(--color-ink-muted); padding: 0.75rem 0.5rem; border-radius: var(--radius-sm); text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast); margin-bottom: var(--space-md); } .mobile-signin-link:hover { color: var(--color-ink); background: rgba(0, 0, 0, 0.04); } .mobile-cta-btn { width: 100%; justify-content: center; } /* ============ SHARED MARKETING HERO ============ */ /* Base hero used by features, pricing, demo, privacy, changelog pages */ .features-hero, .pricing-hero, .demo-hero, .privacy-hero, .changelog-hero, .about-hero { padding: 160px 0 80px; background: linear-gradient(180deg, var(--color-paper-cool) 0%, var(--color-paper) 100%); text-align: center; } /* Privacy + changelog use less bottom padding */ .privacy-hero, .changelog-hero, .about-hero { padding-bottom: 20px; } .features-hero-content, .pricing-hero-content, .demo-hero-content, .privacy-hero-content, .changelog-hero-content, .about-hero-content { max-width: 640px; margin: 0 auto; } /* Wider content for features + pricing */ .features-hero-content, .pricing-hero-content { max-width: 720px; } .features-hero-title, .pricing-hero-title, .demo-hero-title, .privacy-hero-title, .changelog-hero-title, .about-hero-title { font-size: var(--title-6); line-height: var(--title-6-lh); letter-spacing: var(--title-6-ls); color: var(--color-ink); margin-bottom: var(--space-md); } /* Larger titles for features + pricing */ .features-hero-title, .pricing-hero-title { font-size: var(--title-7); line-height: var(--title-7-lh); letter-spacing: var(--title-7-ls); margin-bottom: var(--space-lg); } .features-hero-subtitle, .pricing-hero-subtitle, .demo-hero-subtitle, .privacy-hero-subtitle, .changelog-hero-subtitle, .about-hero-subtitle { font-size: var(--title-3); font-weight: var(--fw-normal); color: var(--color-ink-muted); line-height: var(--title-3-lh); letter-spacing: var(--title-3-ls); font-feature-settings: var(--font-settings); } /* ============ HERO ============ */ .hero { position: relative; padding: 14rem 0 0; background: #f4f5f7; overflow: hidden; } [data-bs-theme=dark] .hero { background: #08090a; } .hero-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, #f4f5f7 50%, #d0d3d9 100%); opacity: 0; animation: hero-fade 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; animation-delay: 2.3s; } [data-bs-theme=dark] .hero-gradient { background: linear-gradient(180deg, #08090a 50%, #2D2F31 100%); } .hero-topo-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--color-border) 1px, transparent 1px), linear-gradient(to bottom, var(--color-border) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 20%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 20%, transparent 100%); opacity: 0; animation: hero-fade 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; animation-delay: 2.3s; } .hero-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: overlay; filter: url(#hero-noise); animation: hero-fade 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; animation-delay: 2.3s; } .hero-glow { display: none; } .hero-content { position: relative; z-index: 1; max-width: 100%; margin: 0; padding-bottom: 2rem; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; background: var(--color-surface-dark); color: #ffffff; font-size: 0.8125rem; font-weight: 500; border-radius: var(--radius-full); margin-top: 2rem; margin-bottom: 2.5rem; } .hero-badge i { font-size: 0.75rem; } .hero-title { color: var(--color-ink); margin-bottom: 1.5rem; font-size: clamp(2rem, 5.5vw, 4rem); font-weight: var(--fw-semibold); line-height: 1.15; letter-spacing: var(--title-8-ls); font-feature-settings: var(--font-settings); } .highlight { color: var(--color-primary); } /* ── Hero entrance animation (Linear-style fade + unblur + slide) ── */ @keyframes hero-entrance { from { opacity: 0; filter: blur(10px); transform: translateY(20%); } to { opacity: 1; filter: blur(0px); transform: translateY(0%); } } .hero-word { display: inline-block; opacity: 0; animation: hero-entrance 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } .hero-subtitle { opacity: 0; animation: hero-entrance 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } } .hero-mockup-wrapper { opacity: 0; animation: hero-fade 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } .hero-word:nth-child(1) { animation-delay: 0.5s; } .hero-word:nth-child(3) { animation-delay: 1.5s; } .hero-word:nth-child(5) { animation-delay: 2.5s; } .hero-subtitle { animation-delay: 2.8s; } .hero-mockup-wrapper { animation-delay: 2.8s; } /* Mockup wrapper */ .hero-mockup-wrapper { position: relative; z-index: 1; padding: 0 20px 100px; margin-top: 16px; } @media (max-width: 1024px) { .hero-mockup-wrapper { padding-bottom: 48px; } } @media (max-width: 768px) { .hero-mockup-wrapper { padding-bottom: 32px; } } /* ── Outline-fill SVG text animation ── */ .highlight-svg { display: inline-block; vertical-align: baseline; overflow: visible; } .highlight-char { fill: transparent; stroke-opacity: 0.25; stroke-dasharray: var(--dash-len); stroke-dashoffset: var(--dash-len); transition: none; } .highlight-char.tracing { stroke-opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(0.33, 0, 0.2, 1), stroke-opacity 1s ease-out; } .highlight-char.filled { fill: var(--color-primary); stroke-opacity: 0; transition: fill 0.6s ease, stroke-opacity 0.4s ease; } .hero-subtitle { font-size: var(--title-2); font-weight: var(--fw-normal); color: var(--color-ink-muted); margin: 0; line-height: var(--title-3-lh); letter-spacing: var(--title-3-ls); font-feature-settings: var(--font-settings); padding-bottom: 20px; } /* ============ FEATURE STATS (inline row) ============ */ .feature-stats { position: relative; display: inline-flex; align-items: center; gap: 1.25rem; margin-top: 1rem; padding: 0.625rem 1.25rem; border: 0.8px dashed var(--slate-300); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* ── Scanning highlight that orbits the border ── */ .feature-stats::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid transparent; background: conic-gradient( from var(--scan-angle, 0deg) at 50% 50%, transparent 0deg, transparent 330deg, var(--bs-primary) 360deg ) border-box; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; animation: scan-orbit 3s linear infinite; pointer-events: none; } @keyframes scan-orbit { to { --scan-angle: 360deg; } } @property --scan-angle { syntax: ''; inherits: false; initial-value: 0deg; } .hero-stat-card { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } /* ── Odometer counter ── */ .odometer { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--color-ink-light); line-height: 1; letter-spacing: -0.03em; min-width: 60px; justify-content: center; gap: 0; } .odometer-digit { display: inline-block; height: 1.15em; overflow: hidden; position: relative; } .odometer-digit-strip { display: flex; flex-direction: column; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .odometer-digit-strip span { display: block; height: 1.15em; line-height: 1.15em; text-align: center; min-width: 0.65em; } .odometer-separator { display: inline-block; width: 0.3em; text-align: center; height: 1.15em; line-height: 1.15em; } /* Stagger delay applied inline via JS (--odo-delay custom property) */ .odometer-digit .odometer-digit-strip { transition-delay: var(--odo-delay, 0ms); } .hero-stat-label { font-size: 0.6875rem; font-weight: 500; color: var(--color-ink-muted); letter-spacing: 0.01em; } .hero-stat-divider { width: 1px; height: 28px; background: var(--color-border); } .hero-actions { margin-top: 0; display: flex; align-items: center; gap: 1rem; } .hero-or { color: var(--color-ink-muted); font-size: 0.875rem; } /* ============ LOGOS SECTION ============ */ .logos-section { position: relative; z-index: 1; padding: var(--space-2xl) 0 0; background: transparent; overflow: hidden; margin-top:4rem; margin-bottom:2rem; } .logos-label { text-align: center; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-muted); margin-bottom: var(--space-xl); } .logos-wrapper { position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto; } .logos-wrapper::before, .logos-wrapper::after { content: ''; position: absolute; top: 0; width: 40px; height: 100%; z-index: 2; pointer-events: none; } .logos-wrapper::before { left: 0; background: linear-gradient(to right, var(--color-paper-cool), transparent); } .logos-wrapper::after { right: 0; background: linear-gradient(to left, var(--color-paper-cool), transparent); } .logos-track { display: flex; animation: scrollLogos 20s linear infinite; } .logos-group { display: flex; align-items: center; gap: 4rem; flex-shrink: 0; padding: 0 2rem; } .logo-item { height: 30px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(100%); opacity: 0.4; transition: opacity var(--transition-base), filter var(--transition-base); } .logo-item:hover { filter: grayscale(0%); opacity: 0.7; } @keyframes scrollLogos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ============ DARK DEMO WINDOW ============ */ .demo-window { position: relative; background: #0d1117; border-radius: var(--radius-lg); overflow: visible; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .demo-window-header { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .demo-window .demo-dot { width: 10px; height: 10px; border-radius: 50%; } .demo-window .demo-dot.red { background: #ff5f57; } .demo-window .demo-dot.yellow { background: #febc2e; } .demo-window .demo-dot.green { background: #28c840; } .demo-window-title { margin-left: auto; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); } .demo-window-content { padding: 14px; position: relative; overflow: hidden; background: #0d1117; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* Scan line */ .scan-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); animation: scanDown 3s ease-in-out infinite; z-index: 2; } @keyframes scanDown { 0%, 100% { top: 0; opacity: 1; } 50% { top: 100%; opacity: 0.5; } } /* List items inside dark demo */ .demo-list-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-sm); margin-bottom: 6px; opacity: 0; transform: translateY(8px); } .demo-list-item.visible { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .demo-list-item.match { background: rgba(5, 150, 105, 0.1); border-color: rgba(5, 150, 105, 0.3); } .demo-item-name { font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); flex: 1; font-family: var(--font-body); } .demo-item-court { font-size: 0.75rem; color: rgba(255, 255, 255, 0.35); font-family: var(--font-body); } .demo-item-time { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.3); font-family: var(--font-body); } .demo-match-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: var(--emerald-600); color: white; font-size: 0.6875rem; font-weight: 600; border-radius: 100px; opacity: 0; transform: scale(0.8); } .demo-match-badge.visible { opacity: 1; transform: scale(1); transition: opacity 0.3s ease-out, transform 0.3s ease-out; } /* Scan stats */ .demo-scan-stats { display: flex; gap: 24px; padding-top: 12px; margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .demo-scan-stat-number { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: white; } .demo-scan-stat-label { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.45); } /* Notification popup */ .demo-notification-popup { position: absolute; bottom: -16px; right: -16px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--color-paper); border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); opacity: 0; transform: translateY(16px) scale(0.95); z-index: 3; } .demo-notification-popup.visible { opacity: 1; transform: translateY(0) scale(1); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .demo-popup-icon { width: 36px; height: 36px; background: var(--color-primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.875rem; flex-shrink: 0; } .demo-popup-title { font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); line-height: 1.3; } .demo-popup-text { font-size: 0.75rem; color: var(--color-ink-muted); } /* ============ macOS DESKTOP MOCKUP ============ */ .hero-desktop-mockup { position: relative; z-index: 1; padding: 0 0 var(--space-xl); } .desktop-frame { max-width: 820px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06); } /* macOS menu bar */ .macos-menubar { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; height: 24px; background: rgba(30, 30, 35, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 0.6875rem; color: rgba(255, 255, 255, 0.85); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font-body); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .menubar-left { display: flex; align-items: center; gap: 14px; } .menubar-left i { font-size: 0.8125rem; opacity: 0.9; } .menubar-app { font-weight: 600; } .menubar-left span:not(.menubar-app) { opacity: 0.7; } .menubar-right { display: flex; align-items: center; gap: 10px; opacity: 0.7; font-size: 0.625rem; } .menubar-right i { font-size: 0.625rem; } /* macOS desktop area */ .macos-desktop { position: relative; background: #0c0c10; padding: 24px 32px 32px; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Ambient glow on desktop wallpaper */ .macos-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 35% 50%, rgba(var(--bs-primary-rgb), 0.15) 0%, transparent 50%), radial-gradient(ellipse at 65% 40%, rgba(220, 80, 40, 0.10) 0%, transparent 45%), radial-gradient(ellipse at 50% 80%, rgba(var(--bs-primary-rgb), 0.06) 0%, transparent 50%); pointer-events: none; } /* App window floating inside desktop */ .macos-window { position: relative; width: 92%; max-width: 720px; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .macos-window-titlebar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(40, 40, 48, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .macos-window-titlebar .dot { width: 10px; height: 10px; border-radius: 50%; } .macos-window-titlebar .dot.red { background: #ff5f57; } .macos-window-titlebar .dot.yellow { background: #febc2e; } .macos-window-titlebar .dot.green { background: #28c840; } .macos-window-title { flex: 1; text-align: center; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.5); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font-body); padding-right: 30px; /* offset for traffic lights */ } .macos-window-content { overflow: hidden; max-height: 320px; } .macos-window-content img { display: block; width: 100%; height: auto; animation: screenshotScroll 18s ease-in-out infinite; animation-play-state: paused; } .macos-window-content.scrolling img { animation-play-state: running; } @keyframes screenshotScroll { 0%, 8% { transform: translateY(0); } 42%, 58% { transform: translateY(-55%); } 92%, 100% { transform: translateY(0); } } /* Legacy browser frame (kept for compatibility) */ .browser-frame { background: #1a1a2e; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25); } .browser-frame-header { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .browser-frame-header .dot { width: 10px; height: 10px; border-radius: 50%; } .browser-frame-header .dot.red { background: #ff5f57; } .browser-frame-header .dot.yellow { background: #febc2e; } .browser-frame-header .dot.green { background: #28c840; } .browser-frame-url { margin-left: 12px; padding: 4px 12px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.4); flex: 1; max-width: 300px; } .browser-frame img { display: block; width: 100%; height: auto; } /* ============ PRODUCT SCREENSHOT SECTION ============ */ /* Legacy screenshot section (replaced by macOS desktop mockup in hero) */ .screenshot-section { display: none; } .macos-window { transition: transform 0.15s ease-out; } /* ============ TOPO BG FOR WHITE SECTIONS ============ */ .feature-highlight-section.bg-paper, .all-features-section, .founder-section, .faq-section, .footer { position: relative; overflow: hidden; } .feature-highlight-section.bg-paper::before, .all-features-section::before, .founder-section::before, .faq-section::before, .footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--color-border) 1px, transparent 1px), linear-gradient(to bottom, var(--color-border) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 20%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 20%, transparent 100%); opacity: 0.5; } .feature-highlight-section.bg-paper > .container, .all-features-section > .container, .founder-section > .container, .faq-section > .container, .footer > .container { position: relative; z-index: 1; } /* ============ SECTION COMMON ============ */ .section { padding: var(--space-4xl) 0; } .section-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-3xl); } /* Split header variant — title left, subtitle right */ .section-header-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; text-align: left; max-width: none; margin: 0 0 var(--space-3xl); } .section-title { margin-bottom: var(--space-md); font-weight: var(--fw-semibold); font-size: var(--title-5); line-height: var(--title-5-lh); letter-spacing: var(--title-5-ls); color: var(--color-ink); font-feature-settings: var(--font-settings); } .section-subtitle { font-size: var(--title-3); font-weight: var(--fw-normal); color: var(--color-ink-muted); line-height: var(--title-3-lh); letter-spacing: var(--title-3-ls); font-feature-settings: var(--font-settings); } /* ============ TAGLINE SECTION ============ */ .tagline-section { padding: 8rem 0 8rem; background: var(--color-paper-cool); } .tagline-block { text-align: center; max-width: 900px; margin: 0 auto var(--space-3xl); } .tagline-block .section-title { font-size: var(--title-5); line-height: var(--title-5-lh); letter-spacing: var(--title-5-ls); } .tagline-muted { color: var(--color-ink-muted); } .tagline-inner { text-align: center; max-width: 640px; margin: 0 auto; } .tagline-inner .section-subtitle { font-size: var(--title-3); } /* ============ FEATURES SECTION ============ */ .features-section { padding: 6rem 0 8rem; background: var(--color-paper); } /* ── Feature Highlight Sections ── */ .feature-highlight-section { padding: 6rem 0 5rem; } .feature-highlight-section.bg-paper { background: var(--color-paper); } .feature-highlight-section.bg-paper-cool { background: var(--color-paper-cool); } /* ── Section topbar — shared label / tag header with dashed rule ── */ .section-topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.5rem; margin-bottom: 4rem; border-bottom: 1.5px dashed var(--color-border); } .section-topbar-label { font-size: var(--text-mini); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-primary); font-feature-settings: var(--font-settings); font-variant-numeric: lining-nums tabular-nums slashed-zero; } .section-topbar-tag { font-size: var(--text-mini); font-weight: var(--fw-normal); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-faint); font-feature-settings: var(--font-settings); } /* ── Feature Section: Linear-style split header ── */ .hero-feature { margin-bottom: 0; } /* Split header: title left, description right */ .hero-feature-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-bottom: var(--space-3xl); } .hero-feature-title { font-size: var(--title-5); line-height: var(--title-6-lh); letter-spacing: var(--title-6-ls); font-weight: var(--fw-semibold); color: var(--color-ink); } .hero-feature-right { display: flex; flex-direction: column; gap: var(--space-lg); padding-top: 0.5rem; } .hero-feature-header > .hero-feature-text { padding-top: 0; } .hero-feature-text { font-size: var(--title-3); font-weight: var(--fw-medium); color: var(--color-ink-muted); line-height: var(--title-3-lh); letter-spacing: var(--title-3-ls); } .hero-feature-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--text-regular); font-weight: var(--fw-normal); color: var(--color-ink-muted); font-feature-settings: var(--font-settings); transition: color var(--transition-base); margin-bottom: 0.75rem; } .hero-feature-link:hover { color: var(--color-ink); } .hero-feature-link .feature-num { color: var(--color-ink-faint); font-variant-numeric: lining-nums tabular-nums slashed-zero; } /* Full-width visual below the header */ .hero-feature-visual { position: relative; } /* ============ BENTO GRID — Shared by Court Matching & Town Agencies ============ */ /* Attio-style gap-color border trick: 1px gap + bg colour = cell dividers */ .bento-grid { display: grid; grid-template-columns: 48px 1fr 1.6fr 1fr 48px; grid-template-areas: "lhatch desc flow sidebar rhatch"; gap: 1px; background: var(--color-border); padding: 1px; overflow: hidden; } .bento-hatch-l { grid-area: lhatch; } .bento-desc { grid-area: desc; } .bento-flow { grid-area: flow; } .bento-sidebar { grid-area: sidebar; } .bento-hatch-r { grid-area: rhatch; } /* xl: no change needed — sidebar fills the full right column */ /* ── Diagonal hatch side columns ── */ .bento-hatch-l, .bento-hatch-r { background-image: repeating-linear-gradient( -45deg, transparent, transparent 5px, rgba(0, 0, 0, 0.04) 5px, rgba(0, 0, 0, 0.04) 6px ); background-color: var(--color-paper); margin-block: -1px; border-top: 1px dashed var(--color-border); border-bottom: 1px dashed var(--color-border); } .bg-paper-cool .bento-hatch-l, .bg-paper-cool .bento-hatch-r { background-color: var(--color-paper-cool); } [data-bs-theme=dark] .bento-hatch-l, [data-bs-theme=dark] .bento-hatch-r { background-color: var(--color-paper); background-image: repeating-linear-gradient( -45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.06) 5px, rgba(255, 255, 255, 0.06) 6px ); } /* Each cell gets its own background to "fill" over the gap colour. Use background-color (not shorthand) so .bento-flow can layer background-image. */ .bento-cell { background-color: var(--color-paper); min-width: 0; } [data-bs-theme=dark] .bento-cell { background-color: var(--color-paper); } /* Section on paper-cool bg needs cells to match */ .bg-paper-cool .bento-cell { background-color: var(--color-paper-cool); } [data-bs-theme=dark] .bg-paper-cool .bento-cell { background-color: var(--color-paper-cool); } /* ── Left description cell ── */ .bento-desc { padding: 2rem 1.5rem; display: flex; flex-direction: column; justify-content: flex-start; } /* ── Center flow cell: dot-grid background ── */ .bento-flow { position: relative; background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px); background-size: 10px 10px; background-color: var(--color-paper); padding-inline: 1.5rem; padding-block: 2rem; min-height: 620px; display: flex; align-items: flex-start; justify-content: center; } .bg-paper-cool .bento-flow { background-color: var(--color-paper-cool); } [data-bs-theme=dark] .bento-flow { background-color: var(--color-paper); background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px); } /* Inner wrapper: scale(0.85) base, scale(1) at md. Offset like Attio's top-[22px] left-[10px] */ .bento-flow-inner { transform: scale(0.85); transform-origin: top center; position: relative; top: 22px; left: 10px; } @media (min-width: 768px) { .bento-flow-inner { transform: scale(1); left: 0; } } /* ── Right sidebar cell ── */ .bento-sidebar { padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* When stats header is present, pack top-down instead of centering */ .bento-sidebar:has(.bento-stats-sidebar) { justify-content: flex-start; } /* ── Stats as solid header bar at top of sidebar ── */ .bento-stats-sidebar { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin: 0; padding: 0.625rem 0.75rem; border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; box-shadow: none; background: transparent; flex-shrink: 0; align-self: stretch; } .bento-stats-sidebar .odometer { font-size: 0.875rem; min-width: auto; } .bento-stats-sidebar .hero-stat-label { font-size: 0.5625rem; } .bento-stats-sidebar .hero-stat-divider { height: 20px; } .bento-stats-sidebar::before { display: none; } /* ── Stats in bento desc (mobile only) ── */ .bento-stats-mobile { display: none; } @media (max-width: 1024px) { .bento-stats-mobile { display: inline-flex; margin-top: 1.25rem; align-self: center; } } /* Smaller text in match card to prevent overflow */ .wf-step[data-step="2"] .fm-client-name { font-size: var(--text-mini); } .wf-step[data-step="2"] .fm-time { font-size: var(--text-micro); } /* ── Mobile: single column, desc stacks above flow ── */ @media (max-width: 1024px) { .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "desc" "flow"; } .bento-hatch-l, .bento-hatch-r, .bento-sidebar { display: none; } } /* Old grid (unused, kept for other pages) */ .fm-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; } .fm-grid-reverse { grid-template-columns: 1fr 1.4fr; } .fm-card { background: var(--color-card, #141416); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } /* Light mode card overrides */ .fm-card { background: var(--color-paper); border-color: var(--color-border); } [data-bs-theme=dark] .fm-card { background: #111215; border-color: rgba(255, 255, 255, 0.06); } /* ── Court list card ── */ .fm-court-block { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); } [data-bs-theme=dark] .fm-court-block { border-bottom-color: rgba(255, 255, 255, 0.06); } .fm-court-block:last-child { border-bottom: none; } .fm-court-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .fm-court-name { font-size: var(--text-regular); font-weight: var(--fw-semibold); color: var(--color-ink); font-feature-settings: var(--font-settings); } .fm-court-meta { font-size: var(--text-micro); color: var(--color-ink-faint); margin-top: 0.25rem; font-feature-settings: var(--font-settings); } .fm-matters-badge { font-size: var(--text-micro); font-weight: var(--fw-medium); color: var(--color-ink-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.25rem 0.625rem; white-space: nowrap; font-feature-settings: var(--font-settings); } .fm-match-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.525rem 0; } .fm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .fm-dot-matched { background: #27a644; } .fm-client-name { font-size: var(--text-mini); font-weight: var(--fw-medium); color: var(--color-ink); flex: 1; font-feature-settings: var(--font-settings); } .fm-time { font-size: var(--text-mini); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; font-feature-settings: var(--font-settings); } /* ── Notification card ── */ .fm-notif-header { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); font-size: var(--text-mini); font-weight: var(--fw-medium); color: var(--color-ink); font-feature-settings: var(--font-settings); } [data-bs-theme=dark] .fm-notif-header { border-bottom-color: rgba(255, 255, 255, 0.06); } .fm-notif-header i { color: var(--color-ink-muted); font-size: 0.875rem; } .fm-notif-count { background: var(--color-primary); color: #fff; font-size: 0.6875rem; font-weight: var(--fw-semibold); min-width: 18px; height: 18px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; margin-left: auto; } .fm-notif-item { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); } [data-bs-theme=dark] .fm-notif-item { border-bottom-color: rgba(255, 255, 255, 0.04); } .fm-notif-item:last-child { border-bottom: none; } .fm-notif-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 0.375rem; } .fm-notif-title { font-size: var(--text-mini); font-weight: var(--fw-medium); color: var(--color-ink); font-feature-settings: var(--font-settings); } .fm-notif-detail { font-size: var(--text-micro); color: var(--color-ink-muted); margin-top: 0.125rem; font-feature-settings: var(--font-settings); } .fm-notif-time { font-size: var(--text-micro); color: var(--color-ink-faint); margin-top: 0.25rem; font-feature-settings: var(--font-settings); } /* ============ FEATURE MOCKUP — Town Agency Flow ============ */ /* ── 3-column layout ── */ /* ── (ta-flow-layout / ta-flow-desc removed — now using .bento-grid) ── */ .ta-flow-desc-title { font-size: var(--title-2); font-weight: var(--fw-medium); color: var(--color-ink); margin-bottom: 0.75rem; font-feature-settings: var(--font-settings); } .ta-flow-desc-text { font-size: var(--text-regular); color: var(--color-ink-muted); line-height: var(--text-regular-lh); margin-bottom: 1.5rem; font-feature-settings: var(--font-settings); } /* ── (old ta-flow-step styles removed — now using .wf-flow) ── */ /* ── Labels ── */ .ta-flow-label { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-mini); font-weight: var(--fw-medium); color: var(--color-ink-muted); margin-bottom: 0.5rem; font-feature-settings: var(--font-settings); } .ta-flow-label i { font-size: 0.75rem; color: var(--color-ink-faint); } /* ── Badges (Attio-style: absolute top-right above card) ── */ .ta-flow-badge { position: absolute; top: -24px; right: 0; font-size: 11px; font-weight: var(--fw-medium); padding: 1px 6px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; font-feature-settings: var(--font-settings); opacity: 0; transform: scale(0.8) translateY(4px); transition: opacity 0.35s var(--ease-out-quart), transform 0.35s var(--ease-out-quart); z-index: 5; } /* Badges pop in after each card's border finishes drawing */ .wf-flow.is-visible .wf-step[data-step="1"] .ta-flow-badge { opacity: 1; transform: scale(1) translateY(0); transition-delay: 0.9s; } .wf-flow.is-visible .wf-step[data-step="2"] .ta-flow-badge { opacity: 1; transform: scale(1) translateY(0); transition-delay: 1.4s; } .wf-flow.is-visible .wf-step[data-step="3"] .ta-flow-badge { opacity: 1; transform: scale(1) translateY(0); transition-delay: 1.9s; } .ta-flow-badge-pending { color: #f7941d; background: #fef3e2; border: 0.8px solid #fdd9a0; } .ta-flow-badge-accepted { color: #34c759; background: #e8f9ed; border: 0.8px solid #a8e6bd; } .ta-flow-badge-complete { color: #34c759; background: #e8f9ed; border: 0.8px solid #a8e6bd; } [data-bs-theme=dark] .ta-flow-badge-pending { background: #3d2a0a; border-color: #6b4a14; } [data-bs-theme=dark] .ta-flow-badge-accepted, [data-bs-theme=dark] .ta-flow-badge-complete { background: #0e2f16; border-color: #1a5c2a; } /* ── Cards ── */ .ta-flow-card { background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; } [data-bs-theme=dark] .ta-flow-card { background: #111215; border-color: rgba(255, 255, 255, 0.06); } .ta-flow-card-title { font-size: var(--text-regular); font-weight: var(--fw-medium); color: var(--color-ink); display: flex; align-items: center; gap: 0.5rem; font-feature-settings: var(--font-settings); border-bottom: 1px solid var(--color-border); padding-bottom: 0.2rem; } .ta-flow-card-title i { color: var(--color-ink); font-size: 0.75rem; } .ta-flow-card-detail { font-size: var(--text-mini); color: var(--color-ink-muted); margin-top: 0.25rem; font-feature-settings: var(--font-settings); } .ta-flow-card-meta { font-size: var(--text-micro); color: var(--color-ink-faint); margin-top: 0.375rem; font-feature-settings: var(--font-settings); } /* ── Agent row inside card ── */ .ta-flow-card-agent { display: flex; align-items: center; gap: 0.75rem; } .ta-flow-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--bs-primary-rgb), 0.15); color: var(--color-primary); font-size: var(--text-micro); font-weight: var(--fw-semibold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ============ WORKFLOW FLOW — Shared (both sections) ============ */ /* Fixed-pixel grid: 20 cols × 20px = 400px. Cards in odd rows, connectors in even rows. Responsiveness via transform: scale() on .bento-flow-inner — no recalculation needed. */ .wf-flow { display: grid; grid-template-columns: repeat(20, 20px); grid-template-rows: auto 85px auto 85px auto; width: 400px; position: relative; } /* ── Card grid placements (16 cols = 320px per card) ── */ .wf-step[data-step="1"] { grid-row: 1; grid-column: 1 / span 16; } .wf-step[data-step="2"] { grid-row: 3; grid-column: 5 / -1; } .wf-step[data-step="3"] { grid-row: 5; grid-column: 1 / span 16; } /* ── Cards ── */ .wf-step { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-out-quart), transform 0.5s var(--ease-out-quart); } .wf-flow.is-visible .wf-step[data-step="1"] { opacity: 1; transform: none; transition-delay: 0s; } .wf-flow.is-visible .wf-step[data-step="2"] { opacity: 1; transform: none; transition-delay: 0.5s; } .wf-flow.is-visible .wf-step[data-step="3"] { opacity: 1; transform: none; transition-delay: 1s; } /* Label row removed — label and badge are now absolute on the card */ /* Attio-style label: absolute, sits above card SVG border */ .wf-label { position: absolute; bottom: 100%; left: 0; display: inline-flex; align-items: center; gap: 4px; border-radius: 10px 10px 0 0; border: 0.8px solid var(--color-border); border-bottom: none; background: #f8fafc; padding: 3px 8px 4px 7px; font-size: 0.6875rem; font-weight: var(--fw-medium); color: var(--color-ink-muted); white-space: nowrap; z-index: 4; font-feature-settings: var(--font-settings); } [data-bs-theme=dark] .wf-label { background: #1a1c1e; border-color: rgba(247, 148, 29, 0.25); color: rgba(255, 255, 255, 0.5); } .wf-label i { font-size: 0.6875rem; color: var(--color-ink-faint); } /* Attio-style card: no CSS border, SVG draws the border */ .wf-card { background: transparent; border: none; border-radius: 0; padding: 0; position: relative; filter: drop-shadow(rgba(24,39,75,0.04) 0px 4px 4px) drop-shadow(rgba(24,39,75,0.02) 0px 2px 4px); z-index: 3; margin-top: 1.5rem; } [data-bs-theme=dark] .wf-card { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); } /* SVG border layer inside card */ .wf-card-border { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* Card content sits over the SVG */ .wf-card-content { position: relative; padding: 12px 16px; z-index: 2; } /* Animated orange border overlay on cards */ .card-orange-border { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s ease-in-out; } .wf-flow.is-visible .wf-step[data-step="1"] .card-orange-border { stroke-dashoffset: 0; transition-delay: 0.1s; } .wf-flow.is-visible .wf-step[data-step="2"] .card-orange-border { stroke-dashoffset: 0; transition-delay: 0.6s; } .wf-flow.is-visible .wf-step[data-step="3"] .card-orange-border { stroke-dashoffset: 0; transition-delay: 1.1s; } /* Port circle inside SVG — starts grey, transitions to orange */ .wf-port-circle { transition: stroke 0.3s ease 0.075s; } .wf-flow.is-visible .wf-port-circle { stroke: var(--color-primary); } /* ── Port dots: hidden reference elements for connector JS positioning ── */ .wf-port { position: absolute; width: 10px; height: 10px; border-radius: 50%; z-index: 4; pointer-events: none; opacity: 0; } .wf-port-bottom { bottom: -5px; left: 50%; transform: translateX(-50%); } .wf-port-top { top: -29px; left: 50%; transform: translateX(-50%); } /* ── SVG Connectors (grid-placed, pre-calculated paths — no JS positioning) ── */ .wf-connector { grid-column: 1 / -1; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 0.4s var(--ease-out-quart); } .wf-connector[data-conn="1"] { grid-row: 2; } .wf-connector[data-conn="2"] { grid-row: 4; } .wf-flow.is-visible .wf-connector[data-conn="1"] { opacity: 1; transition-delay: 0.3s; } .wf-flow.is-visible .wf-connector[data-conn="2"] { opacity: 1; transition-delay: 0.8s; } .wf-connector svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Base line (grey) */ .wf-line-base { fill: none; stroke: var(--color-border); stroke-width: 1; } [data-bs-theme=dark] .wf-line-base { stroke: rgba(247, 148, 29, 0.25); } /* Accent line (primary, animates in via pathLength="1") */ .wf-line-accent { fill: none; stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s ease-in-out; } .wf-flow.is-visible .wf-connector[data-conn="1"] .wf-line-accent { stroke-dashoffset: 0; transition-delay: 0.5s; } .wf-flow.is-visible .wf-connector[data-conn="2"] .wf-line-accent { stroke-dashoffset: 0; transition-delay: 1.0s; } /* Connector arrowhead lines */ .wf-arrow-base { fill: none; stroke: var(--color-border); stroke-width: 1; stroke-linecap: round; } .wf-arrow-accent { fill: none; stroke: var(--color-primary); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s ease-in-out; } [data-bs-theme=dark] .wf-arrow-base { stroke: rgba(247, 148, 29, 0.25); } .wf-flow.is-visible .wf-connector[data-conn="1"] .wf-arrow-accent { stroke-dashoffset: 0; transition-delay: 0.5s; } .wf-flow.is-visible .wf-connector[data-conn="2"] .wf-arrow-accent { stroke-dashoffset: 0; transition-delay: 1.0s; } /* ── Mobile: keep zigzag stagger (scale handles sizing via .bento-flow-inner) ── */ /* ── Right sidebar: court list with fade ── */ .ta-flow-sidebar { position: relative; padding-top: 2rem; overflow: hidden; } .ta-flow-sidebar::before, .ta-flow-sidebar::after { content: ''; position: absolute; left: 0; right: 0; height: 4rem; z-index: 1; pointer-events: none; } .ta-flow-sidebar::before { top: 0; background: linear-gradient(to bottom, var(--sidebar-fade-bg, var(--color-paper-cool)), transparent); } .ta-flow-sidebar::after { bottom: 0; background: linear-gradient(to top, var(--sidebar-fade-bg, var(--color-paper-cool)), transparent); } /* Sidebar inside bento: mask fade top/bottom, no pseudo fades needed */ .bento-sidebar .ta-flow-sidebar { -webkit-mask-image: linear-gradient(to bottom, transparent, black 3rem, black calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, transparent, black 3rem, black calc(100% - 3rem), transparent); overflow: hidden; padding-top: 0; } /* When stats header is present, sidebar list fills remaining space */ .bento-sidebar:has(.bento-stats-sidebar) .ta-flow-sidebar { flex: 1; min-height: 0; } .bento-sidebar .ta-flow-sidebar::before, .bento-sidebar .ta-flow-sidebar::after { display: none; } /* ─── Sidebar list ─────────────────────────────────── */ .ta-flow-sidebar-inner { display: flex; flex-direction: column; gap: 6px; } /* ─── Every item: white card pill ──────────────────── */ .ta-flow-sidebar-item { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--color-paper); border: 0.8px solid rgba(46, 50, 56, 0.07); border-radius: 12px; font-size: var(--text-mini); font-weight: var(--fw-medium); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-feature-settings: var(--font-settings); box-shadow: rgba(28, 40, 64, 0.08) 0px 10.85px 21.7px -4.34px, rgba(28, 40, 64, 0.08) 0px 6.51px 6.51px -6.51px, rgba(28, 40, 64, 0.12) 0px 4.34px 4.34px -4.34px; transition: opacity 0.3s ease, transform 0.3s ease; } [data-bs-theme=dark] .ta-flow-sidebar-item { background: var(--color-card); border-color: rgba(255, 255, 255, 0.06); box-shadow: rgba(0, 0, 0, 0.2) 0px 10.85px 21.7px -4.34px, rgba(0, 0, 0, 0.15) 0px 6.51px 6.51px -6.51px, rgba(0, 0, 0, 0.25) 0px 4.34px 4.34px -4.34px; } /* ─── Icon badge: coloured square ──────────────────── */ .ta-flow-sidebar-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; border-radius: 8px; flex-shrink: 0; } .ta-flow-sidebar-icon i { font-size: 11px; line-height: 1; } .ta-flow-sidebar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* ─── Icon colour palette (grayscale) ──────────────── */ .ta-flow-sidebar-icon { background: var(--color-paper-cool); border: 1px solid var(--color-border); color: var(--color-ink-muted); } [data-bs-theme=dark] .ta-flow-sidebar-icon { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } /* ─── Depth states ─────────────────────────────────── */ .ta-flow-sidebar-item.ta-flow-sidebar-active { opacity: 1; transform: scale(1); } .ta-flow-sidebar-item.ta-flow-sidebar-active .ta-flow-sidebar-icon { background: rgba(247, 148, 29, 0.1); border-color: rgba(247, 148, 29, 0.25); color: var(--color-primary); } .ta-flow-sidebar-item.ta-flow-sidebar-near { opacity: 0.75; transform: scale(0.95); } .ta-flow-sidebar-item.ta-flow-sidebar-dim { opacity: 0.5; transform: scale(0.88); } .ta-flow-sidebar-item.ta-flow-sidebar-far { opacity: 0.25; transform: scale(0.8); } /* ── (old ta-flow-layout responsive rules removed — now in .bento-grid) ── */ /* ── Old TA styles (kept for compatibility) ── */ .ta-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); } [data-bs-theme=dark] .ta-header { border-bottom-color: rgba(255, 255, 255, 0.06); } .ta-header-title { font-size: var(--text-regular); font-weight: var(--fw-medium); color: var(--color-ink); font-feature-settings: var(--font-settings); } .ta-header-count { font-size: var(--text-micro); color: var(--color-ink-faint); font-feature-settings: var(--font-settings); } .ta-request { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); } [data-bs-theme=dark] .ta-request { border-bottom-color: rgba(255, 255, 255, 0.06); } .ta-request:last-child { border-bottom: none; } .ta-request-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .ta-status { font-size: var(--text-micro); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-feature-settings: var(--font-settings); } .ta-status-pending { color: var(--color-primary); background: rgba(var(--bs-primary-rgb), 0.1); } .ta-status-accepted { color: #27a644; background: rgba(39, 166, 68, 0.1); } .ta-status-complete { color: var(--color-ink-muted); background: rgba(138, 143, 152, 0.1); } .ta-request-date { font-size: var(--text-micro); color: var(--color-ink-faint); font-feature-settings: var(--font-settings); } .ta-request-court { font-size: var(--text-regular); font-weight: var(--fw-medium); color: var(--color-ink); font-feature-settings: var(--font-settings); } .ta-request-meta { font-size: var(--text-micro); color: var(--color-ink-muted); margin-top: 0.25rem; font-feature-settings: var(--font-settings); } .ta-request-agent { font-size: var(--text-micro); color: var(--color-ink-muted); margin-top: 0.5rem; display: flex; align-items: center; gap: 0.375rem; font-feature-settings: var(--font-settings); } .ta-request-outcome { font-size: var(--text-micro); color: var(--color-ink-faint); margin-top: 0.375rem; font-style: italic; font-feature-settings: var(--font-settings); } /* ── Agent detail card ── */ .ta-agent-header { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 1.25rem; border-bottom: 1px solid var(--color-border); } [data-bs-theme=dark] .ta-agent-header { border-bottom-color: rgba(255, 255, 255, 0.06); } .ta-agent-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--bs-primary-rgb), 0.15); color: var(--color-primary); font-size: var(--text-micro); font-weight: var(--fw-semibold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ta-agent-name { font-size: var(--text-regular); font-weight: var(--fw-medium); color: var(--color-ink); font-feature-settings: var(--font-settings); } .ta-agent-firm { font-size: var(--text-micro); color: var(--color-ink-muted); font-feature-settings: var(--font-settings); } .ta-agent-stats { display: flex; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); gap: 1.5rem; } [data-bs-theme=dark] .ta-agent-stats { border-bottom-color: rgba(255, 255, 255, 0.06); } .ta-agent-stat { display: flex; flex-direction: column; gap: 0.125rem; } .ta-agent-stat-num { font-size: var(--text-regular); font-weight: var(--fw-semibold); color: var(--color-ink); font-variant-numeric: tabular-nums; font-feature-settings: var(--font-settings); } .ta-agent-stat-label { font-size: var(--text-micro); color: var(--color-ink-faint); font-feature-settings: var(--font-settings); } .ta-agent-courts { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); } [data-bs-theme=dark] .ta-agent-courts { border-bottom-color: rgba(255, 255, 255, 0.06); } .ta-agent-courts-label { font-size: var(--text-micro); font-weight: var(--fw-medium); color: var(--color-ink-muted); margin-bottom: 0.5rem; font-feature-settings: var(--font-settings); } .ta-agent-court-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; } .ta-court-tag { font-size: var(--text-micro); color: var(--color-ink-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.2rem 0.5rem; font-feature-settings: var(--font-settings); } .ta-agent-actions { display: flex; gap: 0.5rem; padding: 1rem 1.25rem; } .ta-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: var(--text-mini); font-weight: var(--fw-medium); border: 1px solid transparent; cursor: default; font-feature-settings: var(--font-settings); } .ta-btn-primary { background: var(--color-primary); color: #fff; } .ta-btn-secondary { background: transparent; color: var(--color-ink-muted); border-color: var(--color-border); } [data-bs-theme=dark] .ta-btn-secondary { border-color: rgba(255, 255, 255, 0.08); } @media (max-width: 768px) { .fm-grid { grid-template-columns: 1fr; } } /* Demo card — light minimal style */ .feature-demo-card { background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .demo-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border-light); } .demo-dot { width: 8px; height: 8px; border-radius: 50%; } .demo-dot.red { background: var(--red-500); } .demo-dot.yellow { background: var(--amber-500); } .demo-dot.green { background: var(--green-500); } .demo-title { margin-left: auto; font-size: 0.75rem; color: var(--color-ink-muted); } .demo-content { padding: 0.875rem; display: flex; flex-direction: column; gap: 0.625rem; } .demo-notification { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; background: var(--color-paper-cool); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); } .demo-notif-icon { width: 32px; height: 32px; background: var(--color-paper-cool); border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-ink-muted); font-size: 0.8125rem; flex-shrink: 0; } .demo-notif-icon.icon-muted { background: var(--color-paper-cool); color: var(--color-ink-muted); } .demo-notif-content { flex: 1; min-width: 0; } .demo-notif-title { font-weight: 600; font-size: 0.8125rem; color: var(--color-ink); margin-bottom: 3px; } .demo-notif-details { display: flex; flex-wrap: wrap; gap: 0.625rem; } .demo-notif-details span { font-size: 0.6875rem; color: var(--color-ink-muted); display: flex; align-items: center; gap: 0.25rem; } .demo-notif-badge { padding: 0.125rem 0.5rem; background: var(--color-primary-light); color: var(--color-primary); font-size: 0.6875rem; font-weight: 600; border-radius: var(--radius-full); white-space: nowrap; align-self: flex-start; } /* ============ ALL FEATURES GRID SECTION ============ */ .all-features-section { padding: 4rem 0 5rem; background: var(--color-paper); } .features-grid-wrapper { position: relative; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .feature-card { display: block; padding: 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper); text-decoration: none; transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .feature-card:hover { border-color: var(--color-primary); box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb), 0.10); transform: translateY(-4px); } .feature-card-title { font-size: 1.125rem; font-weight: 700; color: var(--color-ink); margin-bottom: 0.75rem; } .feature-card-text { font-size: 0.9375rem; color: var(--color-ink-muted); line-height: 1.6; } /* ============ WHAT SECTION ============ */ .what-section { padding: 4rem 0 5rem; background: var(--color-paper-cool); } /* ── Left/right split layout ── */ .what-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } @media (max-width: 768px) { .what-layout { grid-template-columns: 1fr; } .puzzle-visual { order: -1; justify-self: center; } } /* ── Puzzle piece animation ── */ .puzzle-visual { max-width: 380px; flex-shrink: 0; justify-self: center; align-self: center; } .puzzle-svg { width: 100%; height: auto; } /* Puzzle SVG colors */ .puzzle-svg { width: 100%; height: auto; --puzzle-stroke-color: #94a3b8; --puzzle-fill-tinted: #f1f5f9; --puzzle-fill-shaded: #e2e8f0; --puzzle-stroke-accent: #f7941d; --puzzle-fill-accent: rgba(247, 148, 29, 0.06); } [data-bs-theme=dark] .puzzle-svg { --puzzle-stroke-color: rgba(255, 255, 255, 0.15); --puzzle-fill-tinted: #26282d; --puzzle-fill-shaded: #1a1c1e; --puzzle-fill-accent: rgba(247, 148, 29, 0.1); } /* Each piece draws its strokes in, staggered by --piece-delay */ .puzzle-piece path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease-in-out; transition-delay: var(--piece-delay, 0s); } .puzzle-visual.is-visible .puzzle-piece path { stroke-dashoffset: 0; } /* Single-path pieces (the back shadow) */ path.puzzle-piece { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease-in-out; transition-delay: var(--piece-delay, 0s); } .puzzle-visual.is-visible path.puzzle-piece { stroke-dashoffset: 0; } /* Accent piece: slide into place, then draw stroke, then fill */ @keyframes puzzle-lock { from { opacity: 0; transform: translate(-12px, -18px); } 60% { opacity: 1; transform: translate(0, 0); } 70% { transform: translate(1px, 1.5px); } 100% { opacity: 1; transform: translate(0, 0); } } .puzzle-piece-accent { opacity: 0; } .puzzle-visual.is-visible .puzzle-piece-accent { animation: puzzle-lock 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; animation-delay: var(--piece-delay, 0s); } .puzzle-piece-accent path { fill-opacity: 0; transition: stroke-dashoffset 1s ease-in-out var(--piece-delay, 0s), fill-opacity 0.8s ease; } .puzzle-visual.is-visible .puzzle-piece-accent path { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset 1s ease-in-out calc(var(--piece-delay, 0s) + 0.5s), fill-opacity 0.8s ease calc(var(--piece-delay, 0s) + 1.5s); } /* Top bar — uses shared .section-topbar */ /* Statement block */ .what-statement { max-width: 640px; text-align: left; } .what-statement-text { font-size: 1.75rem; font-weight: var(--fw-semibold); color: var(--color-ink-muted); line-height: 1.5; margin-bottom: 2.5rem; font-feature-settings: var(--font-settings); } .what-statement-text strong { color: var(--color-ink); font-weight: var(--fw-semibold); } .what-statement-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--color-ink-muted); background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast); font-feature-settings: var(--font-settings); } .what-statement-cta:hover { background: var(--color-paper-cool); color: var(--color-ink); border-color: var(--color-ink-muted); } .what-statement-cta i { font-size: 0.75rem; } /* ============ HOW IT WORKS ============ */ .how-section { padding: 6rem 0 8rem; background: var(--color-paper); } .steps-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .steps-container.steps-3 { grid-template-columns: repeat(3, 1fr); position: relative; } /* Connector lines between step cards */ .step-connector { display: none; } @media (min-width: 769px) { .step-connector { display: block; position: absolute; top: calc(1.5rem + 20px); height: 2px; background: repeating-linear-gradient( 90deg, var(--color-primary) 0px, var(--color-primary) 6px, transparent 6px, transparent 12px ); opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); z-index: 0; } .step-connector.visible { opacity: 0.5; transform: scaleX(1); } .step-connector-1 { left: calc(33.333% / 2 + 20px); right: calc(100% - 33.333% - 33.333% / 2 + 20px); } .step-connector-2 { left: calc(33.333% + 33.333% / 2 + 20px); right: calc(33.333% / 2 + 20px); } } .step-card { text-align: center; padding: 1.5rem; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); transition: transform var(--transition-base), box-shadow var(--transition-base); } .step-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); } .step-number { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); border: none; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; margin: 0 auto 1rem; box-shadow: 0 2px 10px rgba(var(--bs-primary-rgb), 0.3); } .step-title { font-size: 1.3rem; font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-xs); } .step-text { font-size: 0.9375rem; color: var(--color-ink-muted); line-height: 1.6; max-width: 280px; margin: 0 auto; } /* ============ FOUNDER QUOTE ============ */ .founder-section { padding: 4rem 0 5rem; background: var(--color-paper); } /* Top bar — uses shared .section-topbar */ /* Two-column layout: photo left, quote right */ .founder-layout { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; align-items: center; margin-bottom: 4rem; } /* Founder portrait */ .founder-photo { display: flex; justify-content: center; } .founder-img { width: 120px; height: auto; object-fit: contain; } .founder-img-dark { width: 140px; display: none; } [data-bs-theme=dark] .founder-img-light { display: none; } [data-bs-theme=dark] .founder-img-dark { display: block; filter: brightness(0.8); } /* Quote content */ .founder-firm { font-size: var(--text-mini); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-muted); margin-bottom: 1.5rem; font-feature-settings: var(--font-settings); } .founder-quote { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 400; font-style: italic; color: var(--color-ink); line-height: 1.55; margin: 0 0 1.5rem 0; padding: 0; border: none; } .founder-attribution { font-size: 0.9375rem; color: var(--color-ink-muted); font-feature-settings: var(--font-settings); } .founder-attribution strong { color: var(--color-ink); font-weight: var(--fw-semibold); } @media (max-width: 768px) { .founder-layout { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .founder-img { width: 140px; } .founder-quote { font-size: 1.25rem; } } /* ============ PRICING ============ */ .pricing-section { padding: 4rem 0 5rem; background: var(--color-paper-cool); } /* Pricing toggle */ .pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 2.5rem; } .pricing-toggle-label { font-size: 0.9375rem; font-weight: 500; color: var(--color-ink-muted); cursor: pointer; transition: color var(--transition-fast); } .pricing-toggle-label.active { color: var(--color-ink); font-weight: 600; } .pricing-toggle-switch { width: 48px; height: 26px; background: var(--color-border); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast); border: none; padding: 0; } .pricing-toggle-switch.active { background: var(--color-primary); } .pricing-toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .pricing-toggle-switch.active::after { transform: translateX(22px); } .pricing-save-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; background: #ecfdf5; color: var(--emerald-600); font-size: 0.6875rem; font-weight: 600; border-radius: var(--radius-full); letter-spacing: 0.02em; } /* ── Pricing layout: 3 columns on desktop ── */ .pricing-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; align-items: center; } @media (max-width: 768px) { .pricing-layout { grid-template-columns: 1fr; text-align: center; } } .pricing-left { text-align: center; } .pricing-centre { align-self: center; text-align: center; } /* ── Piggy bank animation ── */ .piggy-visual { max-width: 140px; margin: 1.5rem auto 0; } .piggy-svg { width: 100%; height: auto; --piggy-stroke: var(--color-primary); } /* Stroke-draw animation per piece */ .piggy-piece line, .piggy-piece[pathLength], line.piggy-piece, path.piggy-piece { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease-in-out; transition-delay: var(--piece-delay, 0s); } .piggy-visual.is-visible .piggy-piece[pathLength], .piggy-visual.is-visible line.piggy-piece, .piggy-visual.is-visible path.piggy-piece { stroke-dashoffset: 0; } /* Eye dot fades in */ circle.piggy-piece { opacity: 0; transition: opacity 0.3s ease; transition-delay: var(--piece-delay, 0s); } .piggy-visual.is-visible circle.piggy-piece { opacity: 1; } .pricing-statements { margin-bottom: 2rem; } .pricing-statements p { font-size: var(--title-3); font-weight: var(--fw-normal); color: var(--color-ink-muted); margin: 0; line-height: 1.8; font-feature-settings: var(--font-settings); } .pricing-note-simple { font-size: 0.8125rem; color: var(--color-ink-faint); margin-top: 1rem; } .pricing-price { position: relative; } .pricing-price .price-value { display: inline; transition: opacity 0.3s ease; } .pricing-card { max-width: 680px; margin: 0 auto; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-lg); padding: 3rem; text-align: center; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: box-shadow var(--transition-base); } .pricing-card:hover { box-shadow: 0 8px 40px rgba(var(--bs-primary-rgb), 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .pricing-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; background: var(--color-primary-light); color: var(--color-primary); font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-lg); } .pricing-header { margin-bottom: var(--space-xl); } .pricing-name { font-size: 1.25rem; font-weight: 700; color: var(--color-ink); margin-bottom: 0.5rem; } .pricing-price { font-size: var(--title-6); font-weight: var(--fw-medium); color: var(--color-ink); line-height: 1; margin-bottom: 0.5rem; font-feature-settings: var(--font-settings); } .pricing-price span { font-size: 0.875rem; font-weight: 400; color: var(--slate-400); } .pricing-value { font-size: 0.9375rem; color: var(--color-ink-muted); } .pricing-roi { display: flex; justify-content: center; align-items: center; gap: var(--space-xl); padding: var(--space-lg) 0; margin-bottom: var(--space-xl); border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); } .roi-item { display: flex; flex-direction: column; align-items: center; } .roi-number { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); line-height: 1; } .roi-label { font-size: 0.75rem; color: var(--color-ink-muted); margin-top: 0.25rem; } .roi-divider { width: 1px; height: 32px; background: var(--color-border); } .pricing-includes { font-size: 0.9375rem; color: var(--color-ink-muted); text-align: center; margin-bottom: var(--space-xl); font-feature-settings: var(--font-settings); } .pricing-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; margin-bottom: var(--space-xl); } .pricing-features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; text-align: left; } .pricing-features li, .pricing-feature { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; color: var(--color-ink-light); } .pricing-features li i, .pricing-feature i { color: var(--color-primary); font-size: 0.875rem; flex-shrink: 0; } .pricing-note { font-size: 0.8125rem; color: var(--color-ink-muted); margin-top: var(--space-md); } .pricing-note i { color: var(--color-primary); margin-right: 0.25rem; } .pricing-guarantee { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--space-md); background: var(--color-paper-cool); border-radius: var(--radius-sm); margin-top: var(--space-lg); font-size: 0.8125rem; color: var(--color-ink-muted); } .pricing-guarantee i { color: var(--color-primary); } /* ============ FAQ ============ */ .faq-section { padding: 4rem 0 5rem; background: var(--color-paper); } .faq-container { max-width: 720px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--color-border); } .faq-item:first-child { border-top: 1px solid var(--color-border); } .faq-question { width: 100%; background: none; border: none; display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--color-ink); cursor: pointer; text-align: left; gap: 1rem; transition: color var(--transition-fast); } .faq-question:hover { color: var(--color-primary); } .faq-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition-base), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .faq-item.active .faq-icon { background: var(--color-primary-light); transform: rotate(45deg); } .faq-question i { font-size: 0.75rem; color: var(--color-ink-muted); transition: color var(--transition-base); flex-shrink: 0; } .faq-item.active .faq-question i { color: var(--color-primary); } .faq-answer { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; opacity: 0; } .faq-answer > div { overflow: hidden; } .faq-item.active .faq-answer { grid-template-rows: 1fr; opacity: 1; } .faq-answer-content { padding-bottom: 1rem; font-size: 0.9375rem; color: var(--color-ink-muted); line-height: 1.7; } @media (max-width: 768px) { .faq-question { padding: 1.25rem 0; } .faq-answer-content { padding-bottom: 1.25rem; } } /* ============ CTA SECTION ============ */ .cta-section { padding: 4rem 0 5rem; background: var(--color-paper); } .cta-inner { text-align: center; max-width: 820px; margin: 0 auto; } .cta-title { margin-bottom: var(--space-md); color: var(--color-ink); font-size: var(--title-7); line-height: var(--title-7-lh); letter-spacing: var(--title-7-ls); } .cta-text { font-size: var(--title-3); font-weight: var(--fw-normal); color: var(--color-ink-muted); line-height: var(--title-3-lh); letter-spacing: var(--title-3-ls); margin-bottom: var(--space-2xl); font-feature-settings: var(--font-settings); } .cta-section .btn-primary { font-size: 1rem; padding: 0.75rem 2rem; } /* ============ FOOTER ============ */ .footer { background: var(--color-paper); border-top: 1px solid var(--color-border); padding: var(--space-3xl) 0 var(--space-xl); } .footer-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-bottom: var(--space-3xl); } .footer-brand { grid-column: span 2; display: flex; flex-direction: column; align-items: start; gap: var(--space-md); } .footer-brand > img { height: 38px; width: auto; object-fit: contain; } .footer-brand > p { font-size: 0.875rem; color: var(--color-ink-muted); line-height: 1.6; max-width: 280px; } .footer-heading { font-size: var(--text-mini); font-weight: var(--fw-medium); color: var(--color-ink); margin-bottom: 1.25rem; font-feature-settings: var(--font-settings); } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .footer-links a { color: var(--color-ink-muted); font-size: var(--text-mini); font-weight: var(--fw-normal); font-feature-settings: var(--font-settings); transition: color var(--transition-fast); } .footer-links a:hover { color: var(--color-primary); } .footer-bottom { display: flex; align-items: center; padding-top: var(--space-2xl); } .footer-copyright { font-size: var(--text-mini); color: var(--color-ink-muted); font-feature-settings: var(--font-settings); } .footer-copyright i { color: var(--red-500); } .footer-bottom-links { display: flex; align-items: center; gap: 1.5rem; } .footer-bottom-links a { font-size: var(--text-mini); font-weight: var(--fw-normal); color: var(--color-ink-muted); font-feature-settings: var(--font-settings); transition: color var(--transition-fast); opacity: 0.6; } .footer-bottom-links a:hover { color: var(--color-primary); } .footer-social { display: flex; align-items: center; gap: 1rem; } .footer-social a { color: var(--color-ink-muted); font-size: 1rem; transition: color var(--transition-fast); } .footer-social a:hover { color: var(--color-primary); } /* ============ BENTO CAROUSEL + GRID ============ */ /* Carousel wrapper */ /* Feature tabs — Attio-style auto-advancing tab switcher */ .feature-tabs { margin-bottom: 1.25rem; border: 0.8px solid var(--color-border-light); border-radius: var(--radius-md); overflow: hidden; } .feature-tabs-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border-light); overflow: hidden; } .feature-tab-col { position: relative; overflow: hidden; background: var(--color-paper); } .feature-tab-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 56px; border: none; border-bottom: 1px solid var(--color-border-light); padding: 0 1rem; font-size: 0.9375rem; font-weight: 500; cursor: pointer; color: var(--color-ink-muted); background: var(--color-paper); transition: color 150ms ease-out, background 150ms ease-out; } .feature-tab-btn i { font-size: 0.875rem; } .feature-tab-btn:hover { color: var(--color-ink); } .feature-tab-btn.active { color: var(--color-ink); background: rgba(248, 250, 252, 0.8); } /* Progress bar track + fill */ .feature-tab-progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--color-border-light); } .feature-tab-progress-fill { height: 100%; width: 0%; background: var(--color-ink); will-change: width; } /* Preview panel — card with fade mask */ .feature-tabs-preview { margin-top: 0; } .feature-tabs-preview-mask { mask-image: linear-gradient(to bottom, black, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black, black 70%, transparent 100%); padding: 4px; } .feature-tabs-preview-card { width: 100%; overflow: hidden; border-top: 1px solid var(--color-border-light); background: var(--color-paper); height: 380px; box-shadow: 0 2px 6px rgba(28, 40, 64, 0.06), 0 6px 20px -2px rgba(28, 40, 64, 0.08); position: relative; } /* Tab panels — only active is visible */ .feature-tab-panel { display: none; width: 100%; height: 100%; padding: 1.5rem; } .feature-tab-panel.active { display: flex; align-items: flex-start; justify-content: center; padding-top: 2rem; } /* GOAT panel — child needs full height for centered→top transition */ .feature-tab-panel[data-panel="0"].active { align-items: stretch; justify-content: stretch; } /* Charges panel — center during upload, top when table shows */ .feature-tab-panel[data-panel="1"].active { align-items: center; justify-content: center; flex-direction: column; padding-top: 0; } .feature-tab-panel[data-panel="1"].active.charges-table-visible { align-items: flex-start; justify-content: flex-start; padding-top: 2rem; } /* Doc gen panel — center content horizontally */ .feature-tab-panel[data-panel="2"].active { align-items: center; justify-content: center; } /* Small cards grid */ .feature-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .bento-card { display: flex; flex-direction: column; padding: 1.75rem; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-md); text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .bento-card:hover { border-color: rgba(var(--bs-primary-rgb), 0.4); box-shadow: 0 8px 32px rgba(var(--bs-primary-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9); transform: translateY(-4px); } .bento-card-icon { width: 44px; height: 44px; background: rgba(var(--bs-primary-rgb), 0.1); border: 1px solid rgba(var(--bs-primary-rgb), 0.15); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 1.125rem; margin-bottom: 1rem; } /* Colored icon variants removed — all icons use primary orange */ .bento-card-title { font-size: 1.125rem; font-weight: 700; color: var(--color-ink); margin-bottom: 0.5rem; } .bento-card-text { font-size: 0.9375rem; color: var(--color-ink-muted); line-height: 1.6; } /* Large bento cards — visual demo area */ .bento-visual { margin-top: 1.25rem; padding: 1rem; background: rgba(248, 250, 252, 0.6); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-sm); } /* Doc generation visual */ .bento-doc-flow { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: 0.75rem 0; position: relative; } /* Doc generation — sequenced animation steps */ .bento-step { opacity: 0; transform: translateY(10px) scale(0.9); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .bento-step.visible { opacity: 1; transform: translateY(0) scale(1); } /* QP9 upload card */ .bento-doc { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.25rem 1.5rem; background: var(--color-paper); border: 1.5px dashed var(--color-border); border-radius: var(--radius-sm); color: var(--color-ink-muted); font-size: 0.75rem; font-weight: 600; position: relative; min-width: 120px; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .bento-doc-icon-wrap { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(var(--bs-primary-rgb), 0.08); border-radius: 10px; } .bento-doc-icon-wrap i { font-size: 1.25rem; color: var(--color-ink-muted); transition: color 0.3s ease; } .bento-doc-label { font-size: 0.8125rem; font-weight: 700; color: var(--color-ink); } .bento-doc-meta { font-size: 0.625rem; font-weight: 400; color: var(--color-ink-muted); opacity: 0.7; } /* Upload progress bar */ .upload-progress { width: 100%; height: 3px; background: var(--color-border-light); border-radius: 2px; margin-top: 0.125rem; overflow: hidden; } .upload-progress-bar { width: 0; height: 100%; background: var(--color-primary); border-radius: 2px; transition: width 0.7s ease-in-out; } .bento-doc.uploading .upload-progress-bar { width: 100%; } .bento-doc.uploading { border-color: rgba(var(--bs-primary-rgb), 0.3); border-style: solid; } .bento-doc.uploaded { border-color: var(--color-primary); border-style: solid; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.08); } .bento-doc.uploaded .bento-doc-icon-wrap { background: rgba(var(--bs-primary-rgb), 0.12); } .bento-doc.uploaded .bento-doc-icon-wrap i { color: var(--color-primary); } /* Middle section — spinner + arrow */ .bento-doc-mid { display: flex; align-items: center; justify-content: center; min-width: 50px; position: relative; } /* Processing spinner */ .bento-processing { display: flex; align-items: center; justify-content: center; } .bento-processing.done { opacity: 0 !important; position: absolute; pointer-events: none; transition: opacity 0.3s ease; } .processing-spinner { width: 26px; height: 26px; border: 2.5px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: docSpin 0.8s linear infinite; } @keyframes docSpin { to { transform: rotate(360deg); } } .bento-arrow { color: var(--color-primary); font-size: 1.125rem; } .bento-arrow.visible { animation: arrowBounce 1.5s ease-in-out infinite; } @keyframes arrowBounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } /* Output document stack */ .bento-doc-stack { display: flex; flex-direction: column; gap: 6px; } .bento-doc-out { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; background: var(--color-paper); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); min-width: 180px; } .bento-doc-out-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); border-radius: 8px; flex-shrink: 0; } .bento-doc-out-icon i { font-size: 0.875rem; color: var(--color-primary); } .bento-doc-out-info { display: flex; flex-direction: column; gap: 1px; } .bento-doc-out-name { font-size: 0.75rem; font-weight: 600; color: var(--color-ink); } .bento-doc-out-status { font-size: 0.625rem; color: var(--green-600); font-weight: 500; } .bento-doc-out-status i { font-size: 0.5625rem; margin-right: 2px; } /* GOAT visual — drawer-style search + results */ .bento-goat-result { padding: 0.625rem; background: var(--color-paper); border-radius: var(--radius-sm); width: 100%; } /* Centered state — search bar vertically centered via spacer */ .bento-goat-result.goat-centered { display: flex; flex-direction: column; justify-content: center; height: 100%; } .bento-goat-result.goat-centered .bento-goat-search { max-width: 360px; width: 100%; margin-inline: auto; transition: margin 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* Expanded state — search bar at top, results visible */ .bento-goat-result:not(.goat-centered) .bento-goat-search { transition: margin 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* Results wrapper — hidden until search bar slides up */ .bento-goat-results-wrap { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease 0.1s; } .bento-goat-result:not(.goat-centered) .bento-goat-results-wrap { max-height: 600px; opacity: 1; } .bento-goat-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 0.625rem; font-size: 0.75rem; color: var(--color-ink-muted); } .bento-goat-search i { font-size: 0.75rem; color: var(--color-ink-muted); flex-shrink: 0; } .bento-goat-search .goat-typed-text { font-weight: 500; color: var(--color-ink); border-right: 2px solid var(--color-primary); padding-right: 2px; min-height: 1.1em; } .bento-goat-search .goat-typed-text.done { border-right-color: transparent; } @keyframes goatCursorBlink { 0%, 100% { border-right-color: var(--color-primary); } 50% { border-right-color: transparent; } } .bento-goat-search .goat-typed-text { animation: goatCursorBlink 0.8s step-end infinite; } .bento-goat-search .goat-typed-text.done { animation: none; border-right-color: transparent; } /* Selected charge card */ .goat-selected-charge { display: flex; flex-direction: column; gap: 2px; padding: 0.625rem 0.75rem; background: rgba(var(--bs-primary-rgb), 0.06); border: 1px solid rgba(var(--bs-primary-rgb), 0.15); border-radius: var(--radius-sm); margin-bottom: 0.5rem; } .goat-selected-label { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary); } .goat-selected-name { font-size: 0.8125rem; font-weight: 700; color: var(--color-ink); } .goat-selected-ref { font-size: 0.625rem; color: var(--color-ink-muted); } /* Section labels */ .goat-section-label { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); margin-bottom: 0.25rem; margin-top: 0.5rem; } /* Detail cards */ .goat-detail-card { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5rem 0.625rem; background: rgba(248, 250, 252, 0.8); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); margin-bottom: 0.375rem; } .goat-detail-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(var(--bs-primary-rgb), 0.08); border-radius: 7px; flex-shrink: 0; } .goat-detail-icon i { font-size: 0.6875rem; color: var(--color-primary); } .goat-detail-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .goat-detail-label { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-muted); } .goat-detail-value { font-size: 0.6875rem; color: var(--color-ink); line-height: 1.4; } /* Penalty card highlight */ .goat-penalty-card { background: rgba(var(--bs-primary-rgb), 0.05); border-color: rgba(var(--bs-primary-rgb), 0.12); } .goat-penalty-value { color: var(--color-primary) !important; font-weight: 700; font-size: 0.75rem; } /* Animation */ .bento-goat-anim { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; } .bento-goat-anim.visible { opacity: 1; transform: translateY(0); } /* Charges upload flow */ .charges-upload-flow { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem 0; } .charges-upload-flow .bento-doc-mid { flex-direction: column; min-width: auto; } .charges-upload-flow .bento-arrow { animation: arrowBounceDown 1.5s ease-in-out infinite; } @keyframes arrowBounceDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* Charges table visual */ .bento-charges-table { font-size: 0.6875rem; color: var(--color-ink); background: var(--color-paper); border-radius: var(--radius-sm); overflow: hidden; width: 100%; } .bento-charges-header { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border-light); } .bento-charges-breadcrumb { font-size: 0.625rem; color: var(--color-ink-muted); } .bento-charges-breadcrumb i { margin-right: 0.25rem; font-size: 0.5625rem; } .bento-charges-breadcrumb strong { color: var(--color-ink); } .bento-charges-tabs { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border-light); } .bento-charges-tab-title { font-weight: 700; font-size: 0.75rem; color: var(--color-ink); margin-right: 0.25rem; } .bento-charges-count { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font-size: 0.5625rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 2px; } .bento-charges-tab { font-size: 0.625rem; color: var(--color-ink-muted); cursor: default; padding: 0.125rem 0; } .bento-charges-tab.active { color: var(--color-primary); font-weight: 600; border-bottom: 2px solid var(--color-primary); } .bento-charges-colheader { display: grid; grid-template-columns: 1fr 130px 64px 120px 88px; gap: 0.5rem; padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--color-border-light); font-size: 0.5625rem; font-weight: 600; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; } .bento-charges-row { display: grid; grid-template-columns: 1fr 130px 64px 120px 88px; gap: 0.5rem; align-items: center; padding: 0.4375rem 0.75rem; border-bottom: 1px solid var(--color-border-light); font-size: 0.6875rem; } .bento-charges-row:last-child { border-bottom: none; } .bento-charges-col-charge { display: flex; align-items: center; gap: 0.375rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bento-charges-col-penalty, .bento-charges-col-s651, .bento-charges-col-rc, .bento-charges-col-status { text-align: center; white-space: nowrap; } .bento-charges-col-penalty { text-align: right; } .bento-charges-matched { color: var(--color-primary); font-size: 0.625rem; flex-shrink: 0; } .bento-charges-yes { color: var(--green-600); font-weight: 600; } .bento-charges-no { color: var(--red-600); font-weight: 600; } .bento-charges-na { color: var(--color-ink-muted); } .bento-charges-dash { color: var(--color-ink-muted); } .bento-charges-status-matched { color: var(--green-600); font-weight: 600; font-size: 0.625rem; } /* Charges row animation */ .bento-charges-anim { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; } .bento-charges-anim.visible { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { /* Charges table — hide S651/RC columns on mobile */ .bento-charges-colheader, .bento-charges-row { grid-template-columns: 1fr 60px 52px; font-size: 0.5625rem; } .bento-charges-col-s651, .bento-charges-col-rc { display: none; } .bento-charges-col-charge { font-size: 0.5625rem; } .bento-charges-tabs { gap: 0.375rem; } .bento-charges-tab-title { font-size: 0.6875rem; } .bento-charges-breadcrumb { font-size: 0.5625rem; } } /* Small cards — 4 across (defaults are fine, no overrides needed) */ @media (min-width: 1025px) { .feature-card-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (max-width: 768px) { .feature-card-grid { grid-template-columns: 1fr; } .bento-doc-flow { flex-direction: column; gap: 0.75rem; } .bento-doc { min-width: 0; width: 100%; max-width: 200px; } .bento-doc-mid { min-width: 0; } .bento-processing { display: none; } .bento-arrow { transform: rotate(90deg); animation: none; } .bento-arrow.visible { animation: none; } .bento-doc-out { min-width: 0; } /* Feature tabs — mobile */ .feature-tabs-nav { grid-template-columns: repeat(3, 1fr); } .feature-tab-btn { height: 48px; font-size: 0.8125rem; gap: 0.375rem; } .feature-tab-btn i { display: none; } .feature-tabs-preview-card { height: 300px; } .feature-tab-panel { padding: 1rem; } /* GOAT detail cards on mobile */ .goat-detail-value { font-size: 0.625rem; } .goat-selected-name { font-size: 0.75rem; } .goat-detail-icon { width: 24px; height: 24px; } .goat-detail-icon i { font-size: 0.5625rem; } } /* ============ FEATURES SECTION — Grayscale palette ============ */ /* Doc generation — icon wrap, upload states */ .all-features-section .bento-doc-icon-wrap { background: rgba(0, 0, 0, 0.05); } .all-features-section .bento-doc.uploading { border-color: var(--color-ink-muted); } .all-features-section .bento-doc.uploaded { border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); } .all-features-section .bento-doc.uploaded .bento-doc-icon-wrap { background: rgba(0, 0, 0, 0.08); } .all-features-section .bento-doc.uploaded .bento-doc-icon-wrap i { color: var(--color-ink); } .all-features-section .upload-progress-bar { background: var(--color-ink); } /* Doc generation — spinner, arrow */ .all-features-section .processing-spinner { border-top-color: var(--color-ink); } .all-features-section .bento-arrow { color: var(--color-ink-muted); } /* Doc generation — output cards */ .all-features-section .bento-doc-out-icon { background: rgba(0, 0, 0, 0.05); } .all-features-section .bento-doc-out-icon i { color: var(--color-ink-muted); } .all-features-section .bento-doc-out-status { color: var(--color-ink-muted); } /* GOAT — selected charge card */ .all-features-section .goat-selected-charge { background: rgba(0, 0, 0, 0.03); border-color: var(--color-border); } .all-features-section .goat-selected-label { color: var(--color-ink-muted); } /* GOAT — detail icons */ .all-features-section .goat-detail-icon { background: rgba(0, 0, 0, 0.05); } .all-features-section .goat-detail-icon i { color: var(--color-ink-muted); } /* GOAT — penalty highlight */ .all-features-section .goat-penalty-card { background: rgba(0, 0, 0, 0.03); border-color: var(--color-border); } .all-features-section .goat-penalty-value { color: var(--color-ink) !important; } /* Charges upload flow — grayscale */ .all-features-section .charges-upload-flow .bento-doc-icon-wrap { background: rgba(0, 0, 0, 0.05); } .all-features-section .charges-upload-flow .bento-doc.uploading { border-color: var(--color-ink-muted); } .all-features-section .charges-upload-flow .bento-doc.uploaded { border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); } .all-features-section .charges-upload-flow .bento-doc.uploaded .bento-doc-icon-wrap { background: rgba(0, 0, 0, 0.08); } .all-features-section .charges-upload-flow .bento-doc.uploaded .bento-doc-icon-wrap i { color: var(--color-ink); } .all-features-section .charges-upload-flow .upload-progress-bar { background: var(--color-ink); } .all-features-section .charges-upload-flow .processing-spinner { border-top-color: var(--color-ink); } .all-features-section .charges-upload-flow .bento-arrow { color: var(--color-ink-muted); } /* Charges — status colors to grayscale */ .all-features-section .bento-charges-matched { color: var(--color-ink-muted); } .all-features-section .bento-charges-yes { color: var(--color-ink); } .all-features-section .bento-charges-no { color: var(--color-ink-muted); } .all-features-section .bento-charges-status-matched { color: var(--color-ink); } .all-features-section .bento-charges-tab.active { color: var(--color-ink); border-bottom-color: var(--color-ink); } /* Bento small cards — grayscale icons */ .all-features-section .bento-card-icon { background: rgba(0, 0, 0, 0.05); border-color: var(--color-border); color: var(--color-ink-muted); } .all-features-section .bento-card:hover { border-color: var(--color-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); } /* ============ INLINE CTA ============ */ .inline-cta { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: var(--space-3xl); } .inline-cta-note { font-size: 0.8125rem; color: var(--color-ink-muted); } /* ============ FEATURES GRID MORE ============ */ .features-grid-more { text-align: center; margin-top: var(--space-xl); } /* ============ ANIMATIONS ============ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.6s ease-out forwards; } .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal.visible { opacity: 1; transform: translateY(0); } /* Staggered reveal delays */ .reveal-delay-1 { transition-delay: 0.2s; } .reveal-delay-2 { transition-delay: 0.5s; } .reveal-delay-3 { transition-delay: 0.8s; } .reveal-delay-4 { transition-delay: 1.1s; } /* ============ RESPONSIVE — 1024px ============ */ @media (max-width: 1024px) { .features-row { gap: 2rem; } .feature-split { gap: 2.5rem; } .hero-feature-header, .section-header-split { grid-template-columns: 1fr; gap: 2rem; } .features-grid { grid-template-columns: repeat(2, 1fr); } .steps-container, .steps-container.steps-3 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } /* ============ RESPONSIVE — 768px ============ */ @media (max-width: 768px) { :root { --title-5: 2rem; /* 40→32 */ --title-6: 2.25rem; /* 48→36 */ --title-7: 2.5rem; /* 56→40 */ --title-8: 3rem; /* 64→48 */ --title-9: 3.5rem; /* 72→56 */ } .hero { padding: 8rem 0 3rem; } .hero-content { text-align: center; } .hero-subtitle { font-size: 1.0625rem; margin: 0 auto; } .hero-stats { padding: 1rem 1.5rem; gap: 1.25rem; } .feature-stats { gap: 1rem; padding: 0.5rem 1rem; } .odometer { font-size: 0.9375rem; min-width: 50px; } .hero-stat-label { font-size: 0.625rem; } .hero-stat-divider { height: 22px; } .hero-actions .btn { width: 100%; max-width: 280px; } .macos-menubar .menubar-left span:not(.menubar-app) { display: none; } .macos-desktop { padding: 16px 16px 20px; } .macos-window-content { max-height: 240px; } .demo-notification-popup { display: none; } .demo-item-court, .demo-item-time { display: none; } .inline-cta { flex-direction: column; gap: 0.5rem; } .section { padding: var(--space-3xl) 0; } .section-topbar { margin-bottom: 1.5rem; } .section-header { margin-bottom: var(--space-2xl); } .hero-feature { margin-bottom: 4rem; } .hero-feature-header { grid-template-columns: 1fr; gap: 1.5rem; } .hero-feature-title { font-size: var(--title-5); line-height: var(--title-5-lh); letter-spacing: var(--title-5-ls); } .features-grid { grid-template-columns: 1fr; } .feature-split { grid-template-columns: 1fr; gap: 2rem; } .feature-split-visual { order: -1; } .feature-split-text .section-title, .feature-split-text .section-subtitle { text-align: center; } .feature-split-text { text-align: center; } .what-statement-text { font-size: 1.375rem; } .steps-container, .steps-container.steps-3 { grid-template-columns: 1fr; gap: 1.5rem; } .pricing-card { padding: 2rem; } .pricing-features-grid { grid-template-columns: 1fr; } .pricing-roi { flex-direction: column; gap: var(--space-md); } .roi-divider { width: 32px; height: 1px; } .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } .footer-bottom-links { display: none; } /* Navbar mobile — Raycast pill expansion */ .navbar-nav { display: none; } .nav-actions { display: none; } .mobile-nav-actions { display: flex; } .mobile-theme-toggle { display: flex; } .menu-toggle { display: block; } .mobile-nav-content { display: flex; flex-direction: column; padding-top: var(--space-lg); } .navbar-inner { height: 68px; overflow: hidden; } .browser-frame { border-radius: var(--radius-md); } } /* ============ RESPONSIVE — 480px ============ */ @media (max-width: 480px) { :root { --title-5: 1.75rem; /* 40→28 */ --title-6: 2rem; /* 48→32 */ --title-7: 2.25rem; /* 56→36 */ --title-8: 2.5rem; /* 64→40 */ --title-9: 3rem; /* 72→48 */ --title-3: 1.25rem; /* 24→20 */ } .hero { padding: 7rem 0 2.5rem; } .container { padding: 0 var(--space-md); } .step-card { padding: 1.5rem 1rem; } .pricing-card { padding: 1.5rem; } .pricing-price { font-size: 2.5rem; } .macos-menubar { display: none; } .macos-desktop { padding: 12px; border-radius: var(--radius-lg); } .macos-window-content { max-height: 180px; } .macos-window { width: 100%; } } /* ============ DEMO VARIANT CLASSES ============ */ /* Demo list item border-left variants */ .demo-list-item.border-primary { border-left: 3px solid var(--color-primary); } .demo-list-item.border-green { border-left: 3px solid var(--emerald-600); } .demo-list-item.border-muted { border-left: 3px solid rgba(255, 255, 255, 0.2); } /* Demo item name icon variants */ .demo-item-name .demo-icon-primary { color: var(--color-primary); margin-right: 6px; font-size: 0.75rem; } .demo-item-name .demo-icon-green { color: var(--emerald-600); margin-right: 6px; font-size: 0.75rem; } .demo-item-name .demo-icon-muted { color: rgba(255, 255, 255, 0.4); margin-right: 6px; font-size: 0.75rem; } /* Demo match badge variants */ .demo-match-badge.badge-primary { background: var(--color-primary); } .demo-match-badge.badge-green { background: var(--emerald-600); } /* Demo scan stat number color variants */ .demo-scan-stat-number.color-primary { color: var(--color-primary); } .demo-scan-stat-number.color-green { color: var(--emerald-600); } /* ============ SCROLL TO TOP ============ */ .scroll-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 999; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-size: 0.875rem; border: none; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, box-shadow 0.2s ease; box-shadow: 0 2px 12px rgba(var(--bs-primary-rgb), 0.3); } .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-to-top:hover { box-shadow: 0 4px 20px rgba(var(--bs-primary-rgb), 0.45); transform: translateY(-2px); } /* ============ LANDING DARK MODE OVERRIDES ============ */ /* Dark code windows — slightly lighter than fully dark */ [data-bs-theme=dark] .demo-window { background: #16161a; } [data-bs-theme=dark] .demo-window-content { background: #16161a; } /* Hero screenshot / browser frame */ [data-bs-theme=dark] .hero-screenshot img, [data-bs-theme=dark] .browser-frame img { filter: brightness(0.85); } /* Bento cards — border-based elevation */ [data-bs-theme=dark] .bento-card { background: var(--color-card); border-color: rgba(255, 255, 255, 0.06); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } [data-bs-theme=dark] .bento-card:hover { border-color: rgba(255, 255, 255, 0.12); box-shadow: none; } /* Feature tabs — dark mode */ [data-bs-theme=dark] .feature-tabs-nav { background: rgba(255, 255, 255, 0.06); } [data-bs-theme=dark] .feature-tab-col { background: var(--color-card); } [data-bs-theme=dark] .feature-tab-btn { background: var(--color-card); color: rgba(255, 255, 255, 0.5); } [data-bs-theme=dark] .feature-tab-btn.active { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); } [data-bs-theme=dark] .feature-tab-progress { background: rgba(255, 255, 255, 0.06); } [data-bs-theme=dark] .feature-tab-progress-fill { background: rgba(255, 255, 255, 0.85); } [data-bs-theme=dark] .feature-tabs { border-color: rgba(255, 255, 255, 0.08); } [data-bs-theme=dark] .feature-tabs-preview-card { background: var(--color-card); border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 8px 32px rgba(0, 0, 0, 0.3); } /* Glass cards — border-based elevation (Raycast-style) */ [data-bs-theme=dark] .step-card, [data-bs-theme=dark] .pricing-card { background: var(--color-card); border-color: rgba(255, 255, 255, 0.06); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } [data-bs-theme=dark] .step-card:hover, [data-bs-theme=dark] .pricing-card:hover { border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } /* Feature cards */ [data-bs-theme=dark] .feature-card { background: var(--color-card); border-color: rgba(255, 255, 255, 0.06); box-shadow: none; } /* FAQ section */ [data-bs-theme=dark] .faq-item { border-color: var(--slate-200); } /* Section borders for clean separation */ [data-bs-theme=dark] .features-section, [data-bs-theme=dark] .what-section, [data-bs-theme=dark] .how-section, [data-bs-theme=dark] .founder-section, [data-bs-theme=dark] .pricing-section, [data-bs-theme=dark] .faq-section { border-top: 1px solid rgba(255, 255, 255, 0.04); } /* Footer dark mode */ [data-bs-theme=dark] .footer { border-top-color: rgba(255, 255, 255, 0.06); } [data-bs-theme=dark] .footer-heading { color: #ffffff; } [data-bs-theme=dark] .footer-links a { color: #f7f8f8; } /* Inner visual elements with hardcoded light bg */ [data-bs-theme=dark] .goat-detail-card { background: rgba(255, 255, 255, 0.06); } /* Menu toggle bars */ [data-bs-theme=dark] .menu-toggle span { background: rgba(255, 255, 255, 0.7); } /* Mobile pill — dark glass when expanded */ [data-bs-theme=dark] .navbar-inner.menu-opened { background: linear-gradient(137deg, rgba(17, 18, 20, 0.92) 4.87%, rgba(12, 13, 15, 0.97) 75.88%); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), inset 0 1px 1px 0 rgba(255, 255, 255, 0.1); } [data-bs-theme=dark] .mobile-nav-links a { color: rgba(255, 255, 255, 0.7); } [data-bs-theme=dark] .mobile-nav-links a:hover { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.06); } [data-bs-theme=dark] .mobile-menu-divider { background: rgba(255, 255, 255, 0.08); } [data-bs-theme=dark] .mobile-signin-link { color: rgba(255, 255, 255, 0.5); } [data-bs-theme=dark] .mobile-signin-link:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.06); }