:root { /* Legacy tokens (used widely across the existing site). */ --green:#22c55e; --green2:#16a34a; --panel:rgba(10,10,12,.88); --border:rgb(39 39 42); --muted:rgb(161 161 170); /* Apex palette — mirrors apex_ballistics_app/lib/main.dart's _appAccent / _appSurface / _appDeep / _appPanel / _appLine / _appText / _appMuted exactly. New homepage + future redesign work pulls from these so the marketing site matches the app's look pixel-for-pixel where it counts. */ --apex-accent:#83E35D; --apex-surface:#07110C; --apex-deep:#040906; --apex-panel:#0D1811; --apex-line:#22352A; --apex-panel-line:rgba(116,143,126,.34); --apex-text:#F2F7F2; --apex-muted:#9FB1A3; } * { box-sizing:border-box; } body { background:#000; color:#fff; } .field-label { font-size:.82rem; color:var(--muted); margin-bottom:.45rem; display:block; } .field-input,.field-select,.field-textarea { width:100%; background:#050505; border:1px solid var(--border); color:#fff; border-radius:.95rem; padding:.72rem .85rem; } .field-textarea { min-height:96px; resize:vertical; } .panel { background:var(--panel); border:1px solid var(--border); border-radius:1.5rem; box-shadow:0 20px 60px rgba(0,0,0,.28); } .btn-primary { background:linear-gradient(180deg,#34d399,#16a34a); color:#03130a; border-radius:.9rem; padding:.72rem 1rem; font-weight:700; } .btn-secondary { border:1px solid rgb(63 63 70); color:#f4f4f5; border-radius:.9rem; padding:.72rem 1rem; } .btn-danger { border:1px solid rgb(127 29 29); color:#fca5a5; border-radius:.9rem; padding:.72rem 1rem; } .badge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(34,197,94,.14); color:#86efac; border:1px solid rgba(34,197,94,.35); border-radius:999px; padding:.32rem .8rem; font-size:.76rem; } .page.hidden { display:none; } /* Suppress the static home-page section on non-home routes (active-session, workflow-system, ballistic-solver, my-account and their mobile equivalents). Every HTML file ships #page-home WITHOUT the .hidden class because index.html / mobile.html actually want it visible by default — but on the other shells, that meant the marketing home content was rendered for a beat before script2.js's first render() ran and toggled to the right page, so users saw a "home flash" on every navigation. The selector keys off the body's data-initial-page attribute, so the bare HTML hides home for everything except the home shell itself. */ body:not([data-initial-page="home"]) #page-home { display:none !important; } .stat-card { background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:1rem; padding:1rem; } .subtle-grid { background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 28px 28px; } .summary-item { border:1px solid var(--border); background:rgba(0,0,0,.35); border-radius:1rem; padding:.95rem 1rem; } .summary-title { color:#a1a1aa; font-size:.77rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.35rem; } .summary-value { color:#fff; font-size:.97rem; line-height:1.4; } .table-scroll { overflow-x:auto; } /* Single source of truth for every shot table on the site (firearm-overview edit + summary, logbook edit + summary). Seven columns: Rnd, Grp, Vel, Dist, Slope, Wind, Dir. The fr-units flex to whatever container width is available; no min-width here lets the firearm-overview-session-pane (narrow right column) and the logbook page (full width) render the same markup without competing min-widths. Per-context font / padding adjustments live with the consumer (see `.firearm-overview-session-pane` block below). */ .shot-grid-head,.shot-grid-row { display:grid; grid-template-columns: .55fr 1.0fr .9fr .9fr .85fr .85fr 1.05fr; gap:.6rem; min-width:0; } .mobile-shot-card { border:1px solid var(--border); background:rgba(0,0,0,.35); border-radius:1rem; padding:1rem; } .report-wrap { font-family: Arial, sans-serif; color:#111; padding:24px; } .report-title { font-size:28px; font-weight:800; margin-bottom:6px; } .report-sub { color:#444; margin-bottom:18px; } .report-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0 20px; } .report-card { border:1px solid #ddd; border-radius:12px; padding:12px; } .report-label { font-size:12px; text-transform:uppercase; color:#666; margin-bottom:6px; letter-spacing:.08em; } .report-value { font-size:14px; color:#111; } .report-table { width:100%; border-collapse:collapse; margin-top:16px; } .report-table th,.report-table td { border:1px solid #ddd; padding:8px; font-size:12px; text-align:left; } .hero-illustration svg { width:100%; height:auto; display:block; } .nav-link.active { background:linear-gradient(180deg,#34d399,#16a34a); color:#03130a; } @media (max-width: 1024px) { .desktop-nav { display:none; } } @media (max-width: 768px) { .report-grid { grid-template-columns:1fr; } } @media (max-width: 768px) { body { font-size: 15px; } .panel { border-radius: 1rem; } .field-input,.field-select,.field-textarea { font-size: 16px; padding: .82rem .88rem; } .btn-primary,.btn-secondary,.btn-danger { min-height: 44px; } .summary-item, .stat-card { padding: .85rem; border-radius: .9rem; } header .max-w-7xl { padding-left: .75rem; padding-right: .75rem; } .hero-illustration { border-radius: 1rem; overflow: hidden; } .badge { font-size: .72rem; padding: .28rem .65rem; } } .btn-danger-text { color:#7f1d1d; font-weight:700; } .btn-danger-text:hover { color:#ef4444; } .confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:80; } .confirm-card { max-width:28rem; width:100%; background:rgba(10,10,12,.96); border:1px solid rgb(63 63 70); border-radius:1rem; padding:1.25rem; box-shadow:0 20px 60px rgba(0,0,0,.4); } body{font-family:Arial,sans-serif;background:#fff;} .report-wrap{font-family:Arial,sans-serif;color:#111;padding:24px;} .report-title{font-size:28px;font-weight:800;margin-bottom:6px;} .report-sub{color:#444;margin-bottom:18px;} .report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 20px;} .report-card{border:1px solid #ddd;border-radius:12px;padding:12px;} .report-label{font-size:12px;text-transform:uppercase;color:#666;margin-bottom:6px;letter-spacing:.08em;} .report-value{font-size:14px;color:#111;} table{width:100%;border-collapse:collapse;margin-top:16px;} th,td{border:1px solid #ddd;padding:8px;font-size:12px;text-align:left;} @media print {.noprint{display:none;}} @media (max-width: 768px) { body { font-size: 15px; } .panel { border-radius: 1rem; } .field-input,.field-select,.field-textarea { font-size: 16px; padding: .82rem .88rem; } .btn-primary,.btn-secondary,.btn-danger { min-height: 44px; } .summary-item, .stat-card { padding: .85rem; border-radius: .9rem; } header .max-w-7xl { padding-left: .75rem; padding-right: .75rem; } .hero-illustration { border-radius: 1rem; overflow: hidden; } .badge { font-size: .72rem; padding: .28rem .65rem; } } .btn-danger-text { color:#7f1d1d; font-weight:700; } .btn-danger-text:hover { color:#ef4444; } .confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:80; } .confirm-card { max-width:28rem; width:100%; background:rgba(10,10,12,.96); border:1px solid rgb(63 63 70); border-radius:1rem; padding:1.25rem; box-shadow:0 20px 60px rgba(0,0,0,.4); } body{font-family:Arial,sans-serif;background:#fff;} .report-wrap{font-family:Arial,sans-serif;color:#111;padding:24px;} .report-title{font-size:28px;font-weight:800;margin-bottom:6px;} .report-sub{color:#444;margin-bottom:18px;} table{width:100%;border-collapse:collapse;margin-top:16px;} th,td{border:1px solid #ddd;padding:8px;font-size:12px;text-align:left;} @media print {.noprint{display:none;}} @media (max-width: 768px) { body { font-size: 15px; } .panel { border-radius: 1rem; } .field-input,.field-select,.field-textarea { font-size: 16px; padding: .82rem .88rem; } .btn-primary,.btn-secondary,.btn-danger { min-height: 44px; } .summary-item, .stat-card { padding: .85rem; border-radius: .9rem; } header .max-w-7xl { padding-left: .75rem; padding-right: .75rem; } .hero-illustration { border-radius: 1rem; overflow: hidden; } .badge { font-size: .72rem; padding: .28rem .65rem; } } .btn-danger-text { color:#7f1d1d; font-weight:700; } .btn-danger-text:hover { color:#ef4444; } .confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:80; } .confirm-card { max-width:28rem; width:100%; background:rgba(10,10,12,.96); border:1px solid rgb(63 63 70); border-radius:1rem; padding:1.25rem; box-shadow:0 20px 60px rgba(0,0,0,.4); } /* --- Premium SaaS landing page + solver polish --- */ .premium-shell { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } .hero-premium { position: relative; overflow: hidden; border: 1px solid rgba(63,63,70,.95); border-radius: 1.75rem; min-height: 74vh; box-shadow: 0 30px 80px rgba(0,0,0,.45); background: linear-gradient(180deg, rgba(3,7,4,.18), rgba(0,0,0,.82)), radial-gradient(circle at 18% 12%, rgba(34,197,94,.2), transparent 32%), url('../assets/images/firing-line.png') center/cover no-repeat; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; } .hero-premium::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.22) 48%, rgba(0,0,0,.05)); pointer-events: none; } .hero-copy, .hero-product-card { position: relative; z-index: 2; } .hero-copy { padding: 3rem; max-width: 42rem; } .hero-kicker { display:inline-flex; align-items:center; gap:.5rem; padding:0; border-radius:0; border:none; background:transparent; color:#bbf7d0; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; } .hero-title { font-size: clamp(2.8rem, 6vw, 5rem); line-height: .95; font-weight: 800; margin-top: 1rem; } .hero-title span { color: #4ade80; display:block; } .hero-sub { margin-top: 1rem; font-size: 1.08rem; line-height: 1.8; color: #d4d4d8; max-width: 36rem; } .hero-actions { display:flex; flex-wrap: wrap; gap:.9rem; margin-top: 1.35rem; } .hero-metrics { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.85rem; margin-top: 1.6rem; max-width: 40rem; } .metric-chip { border:1px solid rgba(63,63,70,.95); background:rgba(10,10,12,.62); border-radius:1rem; padding:.9rem 1rem; } .metric-chip .value { font-size:1.15rem; font-weight:700; color:#fff; } .metric-chip .label { font-size:.78rem; color:#a1a1aa; margin-top:.22rem; text-transform:uppercase; letter-spacing:.08em; } .hero-product-card { margin: 2rem 2rem 2rem auto; width: min(100%, 460px); border:1px solid rgba(63,63,70,.92); background: rgba(9,9,11,.8); backdrop-filter: blur(10px); border-radius: 1.4rem; padding: 1.2rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .product-row { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:.9rem 0; border-bottom:1px solid rgba(39,39,42,.85); } .product-row:last-child { border-bottom:0; } .product-title { font-weight:700; } .product-copy { color:#a1a1aa; font-size:.92rem; margin-top:.22rem; line-height:1.6; } .price-pill { display:inline-flex; align-items:center; justify-content:center; min-width:78px; border-radius:0; padding:0; background:transparent; color:#d9fbe8; border:none; font-weight:700; } .landing-section { margin-top: 1.25rem; } .landing-card { border:1px solid rgba(39,39,42,.92); background:rgba(10,10,12,.84); border-radius:1.5rem; box-shadow:0 20px 60px rgba(0,0,0,.24); } .feature-grid-premium { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; } .feature-card-premium { padding:1.25rem; } .feature-card-premium h3 { font-size:1.08rem; font-weight:700; margin-top:.7rem; } .feature-card-premium p { margin-top:.5rem; color:#a1a1aa; line-height:1.8; font-size:.95rem; } .solver-shell { display:grid; grid-template-columns: 360px minmax(0,1fr); gap:1rem; align-items:start; } .solver-panel, .solver-result-panel { border:1px solid rgba(39,39,42,.92); background:rgba(10,10,12,.88); border-radius:1.5rem; box-shadow:0 20px 60px rgba(0,0,0,.28); } .solver-panel { padding:1rem; position:sticky; top:5.75rem; } .solver-result-panel { padding:1.1rem; } .solver-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:1rem; } .solver-mode-pill { display:inline-flex; align-items:center; gap:.35rem; padding:0; border-radius:0; border:none; background:transparent; color:#bbf7d0; font-size:.78rem; } .solver-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; } .solver-kpi { border:1px solid rgba(39,39,42,.92); background:rgba(0,0,0,.38); border-radius:1rem; padding:1rem; } .solver-kpi .kpi-label { font-size:.75rem; color:#a1a1aa; text-transform:uppercase; letter-spacing:.08em; } .solver-kpi .kpi-value { font-size:1.45rem; font-weight:800; margin-top:.25rem; } .solver-emphasis { border:1px solid rgba(34,197,94,.32); background:linear-gradient(180deg, rgba(34,197,94,.14), rgba(0,0,0,.32)); border-radius:1.25rem; padding:1rem; } .solver-emphasis .primary { font-size:2.35rem; font-weight:800; line-height:1; } .solver-emphasis .secondary { font-size:1rem; color:#d4d4d8; margin-top:.35rem; } .solver-grid-table { overflow-x:auto; border:1px solid rgba(39,39,42,.92); border-radius:1rem; } .solver-grid-table table { width:100%; border-collapse:collapse; min-width:860px; } .solver-grid-table th, .solver-grid-table td { padding:.8rem .9rem; border-bottom:1px solid rgba(39,39,42,.92); text-align:left; } .solver-grid-table th { font-size:.78rem; color:#a1a1aa; text-transform:uppercase; letter-spacing:.08em; background:rgba(0,0,0,.32); } .solver-grid-table tr:last-child td { border-bottom:0; } @media (max-width: 1100px) { .hero-premium { grid-template-columns: 1fr; min-height: 78vh; } .hero-product-card { margin: 0 1.25rem 1.5rem; width:auto; } .hero-copy { padding: 2rem 1.25rem 1rem; } .feature-grid-premium { grid-template-columns: 1fr; } .solver-shell { grid-template-columns: 1fr; } .solver-panel { position:static; } .solver-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 640px) { .hero-metrics { grid-template-columns: 1fr; } .solver-kpi-grid { grid-template-columns: 1fr; } .hero-title { font-size: 2.5rem; } } /* --- Brand integration pass --- */ .brand-lockup { display:flex; align-items:center; gap:.9rem; border:1px solid rgba(39,39,42,.9); background:linear-gradient(180deg, rgba(10,10,12,.82), rgba(10,10,12,.64)); border-radius:1.15rem; padding:.48rem .8rem .48rem .48rem; box-shadow:0 14px 40px rgba(0,0,0,.22); } .brand-mark-wrap { width:3rem; height:3rem; border-radius:1rem; background:radial-gradient(circle at 30% 25%, rgba(34,197,94,.22), rgba(0,0,0,.18) 68%); border:1px solid rgba(34,197,94,.25); display:flex; align-items:center; justify-content:center; overflow:hidden; } .brand-mark { width:2.2rem; height:2.2rem; object-fit:contain; filter: drop-shadow(0 8px 18px rgba(34,197,94,.18)); } .brand-copy { line-height:1.05; } .brand-name { font-weight:800; letter-spacing:.02em; font-size:1rem; color:#fff; } .brand-tag { margin-top:.18rem; font-size:.72rem; color:#a1a1aa; } .hero-brand-row { margin-bottom:.9rem; } .hero-brand-chip { display:inline-flex; align-items:center; gap:.8rem; padding:.65rem .85rem; border-radius:1rem; border:1px solid rgba(39,39,42,.92); background:rgba(10,10,12,.54); backdrop-filter:blur(10px); box-shadow:0 16px 36px rgba(0,0,0,.22); } .hero-brand-logo { width:2.5rem; height:2.5rem; object-fit:contain; } .hero-brand-chip-title { font-weight:800; font-size:.95rem; color:#fff; } .hero-brand-chip-sub { font-size:.76rem; color:#a1a1aa; margin-top:.15rem; } .hero-premium { position:relative; } .hero-watermark { position:absolute; right:2.5rem; bottom:2rem; width:min(28vw, 220px); opacity:.1; filter:drop-shadow(0 18px 36px rgba(0,0,0,.38)); z-index:1; pointer-events:none; } .product-brand-inline { display:flex; align-items:center; gap:.65rem; } .product-brand-inline-logo { width:2rem; height:2rem; object-fit:contain; opacity:.95; } .site-footer { margin-top:2rem; border-top:1px solid rgba(39,39,42,.92); background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.7)); } .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.4rem 1rem 2rem; } .footer-brand { display:flex; align-items:center; gap:1rem; max-width:42rem; } .footer-logo { width:3rem; height:3rem; object-fit:contain; flex:0 0 auto; } .footer-title { font-size:1rem; font-weight:800; color:#fff; } .footer-copy { color:#a1a1aa; font-size:.92rem; line-height:1.7; margin-top:.2rem; } .footer-links { display:flex; flex-wrap:wrap; gap:.7rem; } @media (max-width: 900px) { .brand-tag { display:none; } .footer-inner { flex-direction:column; align-items:flex-start; } } @media (max-width: 640px) { .brand-lockup { padding:.42rem .62rem .42rem .42rem; } .brand-mark-wrap { width:2.6rem; height:2.6rem; border-radius:.85rem; } .brand-mark { width:1.9rem; height:1.9rem; } .hero-brand-chip { width:100%; } .hero-watermark { width:130px; right:1rem; bottom:1rem; opacity:.12; } } /* --- Fix 2: stronger logo + real photo + dedicated products page --- */ .brand-lockup-strong { padding:.58rem .95rem .58rem .58rem; gap:1rem; border:1px solid rgba(34,197,94,.22); background:linear-gradient(180deg, rgba(10,10,12,.9), rgba(10,10,12,.72)); } .brand-mark-wrap-strong { width:3.4rem; height:3.4rem; border-radius:1.05rem; border:1px solid rgba(34,197,94,.3); box-shadow:0 14px 36px rgba(0,0,0,.28); } .brand-mark-strong { width:2.5rem; height:2.5rem; } .brand-name-strong { font-size:1.08rem; } .brand-tag-strong { font-size:.76rem; color:#c4c4cc; display:block !important; } .hero-photo-card { position:relative; min-height:540px; border-radius:1.5rem; overflow:hidden; border:1px solid rgba(39,39,42,.92); box-shadow:0 24px 70px rgba(0,0,0,.34); background:#050505; } .hero-photo-img { width:100%; height:100%; object-fit:cover; display:block; min-height:540px; } .hero-photo-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.56)); } .hero-photo-brand { position:absolute; left:1.1rem; bottom:1.1rem; display:flex; align-items:center; gap:.9rem; padding:.8rem .95rem; border-radius:1rem; border:1px solid rgba(39,39,42,.92); background:rgba(10,10,12,.72); backdrop-filter:blur(10px); box-shadow:0 18px 42px rgba(0,0,0,.3); } .hero-photo-logo { width:3rem; height:3rem; object-fit:contain; } .hero-photo-title { font-size:1rem; font-weight:800; color:#fff; } .hero-photo-sub { font-size:.8rem; color:#d4d4d8; margin-top:.15rem; } .products-grid-premium { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; } .product-card-premium { border:1px solid rgba(39,39,42,.92); background:rgba(10,10,12,.86); border-radius:1.5rem; padding:1.25rem; box-shadow:0 20px 60px rgba(0,0,0,.24); } .product-card-premium.featured { border-color:rgba(34,197,94,.35); box-shadow:0 22px 64px rgba(0,0,0,.3); } .product-card-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1rem; } .product-card-logo { width:2.3rem; height:2.3rem; object-fit:contain; } .product-card-premium h3 { font-size:1.25rem; font-weight:800; margin-bottom:.6rem; } .product-card-premium p { color:#a1a1aa; line-height:1.8; } .product-card-premium ul { margin-top:1rem; color:#e4e4e7; padding-left:1rem; } .product-card-premium li { margin:.45rem 0; } @media (max-width: 1100px) { .products-grid-premium { grid-template-columns:1fr; } } @media (max-width: 768px) { .hero-photo-card, .hero-photo-img { min-height:420px; } .brand-tag-strong { display:none !important; } } /* --- Background-only adjustments --- */ html, body { background: #151b18; } body { color: #f4f4f5; } .panel, .stat-card, .summary-item, .mobile-shot-card, .landing-card, .product-panel, .hero-photo-card, .brand-lockup { background-color: rgba(18, 22, 20, 0.88); } .fixed.inset-0.pointer-events-none { background: radial-gradient(circle at top, rgba(74, 222, 128, 0.16), transparent 28%), linear-gradient(180deg, rgba(21, 27, 24, 1), rgba(12, 15, 14, 1)) !important; } /* --- Banner micro-interactions --- */ .desktop-nav .nav-link { overflow: hidden; } .desktop-nav .nav-link::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(74,222,128,.18), transparent 60%); opacity: 0; transition: opacity .22s ease, transform .22s ease; transform: scale(.92); pointer-events: none; } .desktop-nav .nav-link:hover { box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(74,222,128,.12) inset, 0 0 26px rgba(74,222,128,.14); } .desktop-nav .nav-link:hover::before { opacity: 1; transform: scale(1); } .brand-lockup-solo, .brand-lockup { transition: transform .18s ease, filter .18s ease, opacity .18s ease; will-change: transform; } .brand-lockup-solo:hover, .brand-lockup:hover { transform: translateY(-1px) scale(1.015); filter: drop-shadow(0 8px 18px rgba(74,222,128,.12)); } .hero-premium { will-change: background-position; } /* --- Homepage rebuild only --- */ .homepage-only { position: relative; z-index: 1; } .home-hero-shell { display: grid; grid-template-columns: 1.02fr .98fr; gap: 1.3rem; align-items: stretch; } .home-hero-copy, .home-photo-card, .home-feature-card, .home-story-card { border: 1px solid rgba(58,64,60,.95); background: linear-gradient(180deg, rgba(18,22,20,.9), rgba(10,10,12,.92)); box-shadow: 0 18px 46px rgba(0,0,0,.24), 0 0 0 1px rgba(34,197,94,.04) inset; border-radius: 1.4rem; } .home-hero-copy { padding: 1.8rem; display: flex; flex-direction: column; justify-content: center; } .home-kicker { display: inline-flex; align-items: center; padding: 0; border-radius: 0; border: 0; background: transparent; color: #bbf7d0; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; } .home-title { margin-top: .7rem; font-size: clamp(2.75rem, 5.9vw, 4.7rem); line-height: .98; font-weight: 800; } .home-title span { color: #4ade80; text-shadow: 0 0 26px rgba(74,222,128,.1); } .home-sub { margin-top: 1.05rem; color: #d4d4d8; line-height: 1.8; font-size: 1rem; max-width: 38rem; } .home-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.35rem; } .home-proof-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 1.75rem; padding-top: 0; border-top: 0; } .home-proof-chip { border: none; background: transparent; border-radius: 0; padding: 0; display: flex; flex-direction: column; } .home-proof-value { font-size: 1rem; font-weight: 800; color: #fff; } .home-proof-label { margin-top: .22rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; color: #a1a1aa; } .home-hero-media { display: flex; align-items: stretch; } .home-photo-card { width: 100%; padding: 1.1rem; } .home-photo-top, .home-photo-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .home-photo-caption { font-size: .76rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: .08em; } .home-photo-heading { margin-top: .25rem; font-size: 1rem; font-weight: 700; } .home-photo-logo { width: 32px; height: 32px; object-fit: contain; } .home-photo-frame { margin-top: 1rem; margin-bottom: .95rem; } .home-photo-image { width: 100%; display: block; border-radius: 1rem; border: 1px solid rgba(58,64,60,.92); } .home-feature-band { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 1.15rem; } .home-feature-card { padding: 1.15rem 1.15rem 1.2rem; } .home-feature-title { font-size: 1rem; font-weight: 800; color: #ecfff3; margin-bottom: .45rem; } .home-feature-card p { color: #a1a1aa; line-height: 1.75; font-size: .94rem; } .home-story-grid { display: grid; grid-template-columns: 1.15fr .95fr .9fr; gap: 1rem; margin-top: 1.15rem; } .home-story-card { padding: 1.35rem; } .home-section-label { color: #9ccfaf; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .85rem; } .home-story-list { display: grid; gap: .95rem; } .home-story-item { padding-top: .9rem; border-top: 1px solid rgba(88, 104, 96, 0.22); } .home-story-item:first-child { padding-top: 0; border-top: 0; } .home-story-item-title { color: #f5f7f6; font-size: .96rem; font-weight: 700; margin-bottom: .35rem; } .home-story-item p, .home-story-card-demo p { color: #aeb5b0; line-height: 1.75; font-size: .94rem; } .home-story-card-demo { display: flex; flex-direction: column; justify-content: space-between; } .home-bullet-list { margin: 0; padding-left: 1.1rem; color: #d4d4d8; } .home-bullet-list li + li { margin-top: .65rem; } @media (max-width: 1050px) { .home-hero-shell, .home-feature-band, .home-story-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .home-proof-row { grid-template-columns: 1fr; } } /* --- CTA micro labels --- */ .cta-block { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .cta-micro { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9ca3af; opacity: 0.8; padding-left: 2px; } /* --- Fix: keep competition firing line photo inside its card --- */ .home-hero-media { display: flex; align-items: stretch; } .home-photo-card { width: 100%; display: flex; flex-direction: column; overflow: hidden; } .home-photo-top, .home-photo-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .home-photo-frame { margin-top: .85rem; margin-bottom: .85rem; display: block; width: 100%; } .home-photo-image { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 1rem; } /* --- 2026 rebuild overrides: stable public website layer --- */ :root { --bg-deep: #0b100e; --bg-surface: rgba(18, 24, 21, 0.88); --bg-surface-strong: rgba(14, 18, 16, 0.96); --line-soft: rgba(113, 137, 121, 0.28); --line-accent: rgba(74, 222, 128, 0.32); --text-main: #f4f7f5; --text-muted: #aab5ae; --text-soft: #7f8b84; --accent: #72f1a1; --accent-strong: #33c16c; --shadow-deep: 0 28px 80px rgba(0, 0, 0, 0.34); } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(circle at top, rgba(75, 211, 119, 0.12), transparent 26%), linear-gradient(180deg, #121714 0%, var(--bg-deep) 100%); color: var(--text-main); font-family: "Manrope", sans-serif; } h1, h2, h3, .banner-title { font-family: "Barlow Condensed", sans-serif; letter-spacing: 0.02em; } button { cursor: pointer; } .btn-primary, .btn-secondary, .btn-danger, .nav-link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 46px; padding: 0.82rem 1.1rem; /* Bar-style buttons matching the Flutter app's SessionActionButton and _PreviewChoiceButton (top + bottom horizontal lines, no left/right border, no background fill, no rounded corners). The per-variant rules below set border-top + border-bottom colors; here we just zero out the rounded/full-border baseline. */ border-radius: 0; border: 0; background: transparent; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease; } .btn-primary::before, .btn-secondary::before, .btn-danger::before, .nav-link::before { /* Pre-bar style: a radial wash filled the button on hover. Now that the rest state is just two horizontal lines, a wash inside looks like an unintended background fill — disabled. */ content: none; } .btn-primary { /* Primary action — same muted bars + white text as secondary at rest. Green is reserved for hover/focus across the whole system, so primary doesn't visually differ from secondary until you interact with it. */ background: transparent; color: var(--text-main); border-top: 1px solid rgba(143, 156, 149, 0.40); border-bottom: 1px solid rgba(143, 156, 149, 0.40); border-left: 0; border-right: 0; box-shadow: none; } .btn-secondary { /* Default action — muted bars + white text. */ background: transparent; color: var(--text-main); border-top: 1px solid rgba(143, 156, 149, 0.40); border-bottom: 1px solid rgba(143, 156, 149, 0.40); border-left: 0; border-right: 0; } .nav-link { /* Nav links: bottom bar only, no top bar (per the user's spec). The bar is transparent until .nav-link.active turns it accent. */ background: transparent; color: var(--text-main); border-top: 0; border-bottom: 1px solid transparent; border-left: 0; border-right: 0; } .btn-danger { background: transparent; color: #fecaca; border-top: 1px solid rgba(248, 113, 113, 0.55); border-bottom: 1px solid rgba(248, 113, 113, 0.55); border-left: 0; border-right: 0; } .btn-primary:hover, .btn-secondary:hover, /* Bar-style hover/focus: brighten the bars themselves rather than adding insets, halos, or background fills (which would re-create the filled-button look the user explicitly rejected). Green is the system-wide "interact" cue — applied consistently across primary, secondary, danger, and nav. Rest state is always muted. */ .btn-primary:hover, .btn-primary:focus-visible, .btn-secondary:hover, .btn-secondary:focus-visible, .nav-link:hover, .nav-link:focus-visible { border-top-color: var(--apex-accent, #83E35D); border-bottom-color: var(--apex-accent, #83E35D); color: var(--apex-accent, #83E35D); background: transparent; box-shadow: none; outline: none; } .btn-danger:hover, .btn-danger:focus-visible { border-top-color: rgba(248, 113, 113, 0.95); border-bottom-color: rgba(248, 113, 113, 0.95); color: #ffe4e6; background: transparent; box-shadow: none; outline: none; } .btn-primary:active, .btn-secondary:active, .btn-danger:active, .nav-link:active { /* Brief inward press feedback — translate only, no shadow halo. */ transform: translateY(1px); box-shadow: none; } .btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .nav-link:disabled { opacity: 0.48; cursor: not-allowed; transform: none; box-shadow: none; } .btn-primary:disabled::before, .btn-secondary:disabled::before, .btn-danger:disabled::before, .nav-link:disabled::before { opacity: 0; } .nav-link.active { /* Active tab: bottom bar lights up to the accent green, text turns pure white. No background fill — the underline is the indicator. */ background: transparent; border-bottom-color: var(--apex-accent, #83E35D); color: #eafff0; } .badge { background: rgba(114, 241, 161, 0.08); color: #bbf7d0; border: 1px solid rgba(114, 241, 161, 0.24); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .badge:not(button) { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } .panel, .home-hero-copy, .home-photo-card, .home-feature-card, .home-story-card, .product-card-premium, .product-story-panel { border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(20, 25, 23, 0.9), rgba(10, 13, 12, 0.94)); box-shadow: var(--shadow-deep); } .site-header { position: sticky !important; top: 0 !important; z-index: 60 !important; padding: 0 !important; margin: 0 !important; overflow: visible; border-bottom: 1px solid rgba(171, 255, 193, 0.08); background: linear-gradient(180deg, rgba(9, 15, 12, 1), rgba(10, 16, 13, 1)) !important; backdrop-filter: blur(16px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); isolation: isolate; padding-bottom: 0 !important; } .site-header::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: 0; background: linear-gradient(180deg, rgba(9, 15, 12, 1), rgba(10, 16, 13, 1)) !important; pointer-events: none; z-index: 0; } .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -28px; height: 28px; background: linear-gradient( 180deg, rgba(10, 16, 13, 0.98) 0%, rgba(10, 16, 13, 0.72) 55%, rgba(10, 16, 13, 0) 100% ); pointer-events: none; z-index: 0; } .site-header-shell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding-top: 0.65rem; padding-bottom: 0.65rem; } .site-header-logo { display: flex; align-items: center; justify-content: flex-start; } .site-header-brand-link { display: flex; align-items: center; justify-content: flex-start; align-self: center; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .site-header-mark-wrap { display: flex; align-items: center; justify-content: center; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .site-header-mark { display: block; height: 104px !important; width: auto !important; max-height: none !important; filter: none !important; transition: filter .2s ease, transform .2s ease; } .site-header-brand-link:hover .site-header-mark { filter: drop-shadow(0 10px 22px rgba(74, 222, 128, 0.26)) !important; } .site-header-text { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; gap: 0.22rem; } .site-header-title { font-size: clamp(2rem, 2.6vw, 3rem) !important; font-weight: 800 !important; letter-spacing: 0.06em !important; line-height: 0.92; text-transform: uppercase; color: #eafff3 !important; background: linear-gradient(90deg, #d1fae5, #4ade80); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 12px rgba(74,222,128,0.15); } .site-header-subtitle { margin-top: 0.12rem !important; padding-left: 0 !important; color: #9fb0a6 !important; font-size: 0.82rem !important; letter-spacing: 0.18em !important; line-height: 1.2; text-transform: uppercase; } .site-header-subtitle::before { content: ""; display: block; width: 72px; height: 2px; margin-bottom: 8px; border-radius: 999px; background: linear-gradient(90deg, #4ade80, transparent); box-shadow: 0 0 12px rgba(74,222,128,0.4); } .site-header-main { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; gap: 0.5rem; } .site-header-nav { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.45rem !important; white-space: nowrap; } .site-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; align-self: start; margin-top: 0; gap: .55rem; } .site-header-shell, .site-header-logo, .site-header-main, .site-header-actions, .site-header-text, .site-header-nav, .site-header-brand-link, .site-header-nav .nav-link { position: relative; z-index: 2; } .site-header-actions .badge, .site-header-actions .btn-primary, .site-header-actions .btn-secondary { min-height: 34px !important; padding: 0.42rem 0.8rem !important; font-size: 0.76rem !important; letter-spacing: 0.04em; } .site-header .btn-primary, .site-header .btn-secondary { min-height: 40px; } main { position: relative; z-index: 1; padding-top: 0 !important; } .homepage-only { padding-top: 0 !important; } .home-hero-shell { gap: 1.25rem; align-items: stretch; } .home-hero-copy { padding: clamp(1.5rem, 2vw, 2.25rem); } .home-kicker { width: fit-content; max-width: 100%; } .home-title { max-width: 11ch; } .home-sub { color: #d4ddd7; max-width: 38rem; } .product-story-panel, .demo-credentials { border: 1px solid rgba(119, 142, 126, 0.24); background: rgba(255, 255, 255, 0.03); } .home-photo-card { padding: 1.1rem; } .home-photo-frame { overflow: hidden; border-radius: 1rem; } .home-photo-image { min-height: 100%; transition: transform 0.4s ease; } .home-photo-card:hover .home-photo-image { transform: scale(1.015); } .home-feature-title, .product-card-premium h3, .product-story-panel h3 { color: #ecfff3; } .products-grid-premium { align-items: stretch; } .product-card-premium { display: flex; flex-direction: column; padding: 1.4rem; } .product-card-premium p, .product-story-panel p, .footer-copy { color: var(--text-muted); line-height: 1.8; } .product-card-premium ul { margin-bottom: 0; color: #dfe7e1; } .product-card-premium .btn-primary, .product-card-premium .btn-secondary { margin-top: auto !important; } .product-card-price { margin-top: 0.85rem; color: #ecfff3; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; } .product-logbook-photo { border: 1px solid rgba(88, 104, 96, 0.26); border-radius: 1rem; overflow: hidden; background: rgba(0, 0, 0, 0.2); } .product-logbook-photo-image { display: block; width: 100%; height: auto; } .product-story-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .product-story-panel { border-radius: 1.5rem; padding: 1.4rem; } .product-story-panel h3 { font-size: 2rem; margin-bottom: 0.75rem; } .demo-credentials { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1rem; border-radius: 1rem; padding: 1rem; color: #f0fdf4; } .field-input, .field-select, .field-textarea { background: rgba(255, 255, 255, 0.045); border-color: rgba(89, 122, 102, 0.95); font-family: "Manrope", sans-serif; } select option, .field-select option { background: #101712; color: #f4fff4; } .site-footer { margin-top: 0; padding-top: 1rem; background: linear-gradient(180deg, rgba(8, 11, 10, 0), rgba(8, 11, 10, 0.92)); } .footer-inner { padding-top: 1rem; } @media (max-width: 1050px) { .site-header-shell { grid-template-columns: 1fr; align-items: start; } .site-header-main, .site-header-actions { align-items: flex-start; } .site-header-actions { justify-content: flex-start; align-self: flex-start; } .site-header-mark { height: 72px !important; width: auto !important; } .home-hero-shell, .home-feature-band, .home-story-grid, .product-story-strip, .products-grid-premium { grid-template-columns: 1fr; } } @media (max-width: 700px) { main, .homepage-only { padding-top: 1.25rem !important; } .site-header-mark-wrap { width: 56px !important; height: 56px !important; } .site-header-mark { height: 56px !important; width: auto !important; } .site-header-title { font-size: 1.3rem !important; } .site-header-subtitle { font-size: 0.65rem !important; letter-spacing: 0.14em !important; } .home-title { font-size: clamp(2.3rem, 11vw, 3.3rem); } .home-proof-row { grid-template-columns: 1fr; } .product-story-panel h3 { font-size: 1.7rem; } } .account-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .account-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); gap: 1rem; } .account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .account-form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-checkbox { display: flex; align-items: center; gap: 0.7rem; color: var(--text-muted); font-size: 0.95rem; } .account-checkbox input { width: 18px; height: 18px; } /* Beta opt-in row (Account Settings). The desktop web has no beta features yet, so the row renders greyed/disabled with "No current beta features"; the .is-on + enabled states are styled for when a web beta feature ships and the toggle becomes interactive. */ .beta-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .beta-row__label { font-size: 0.98rem; color: var(--text, #f4f4f5); } .beta-row--empty .beta-row__label { color: var(--text-muted, #9fb1a3); } /* "Beta Feedback" button on the opt-in line (visible while beta is on). Compact .btn-secondary variant; margin-left:auto pins it (and the switch after it) to the row's right edge. */ .beta-row__feedback { margin-left: auto; padding: 0.3rem 0.75rem; font-size: 0.8rem; } .beta-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); transition: background 0.15s ease; cursor: pointer; /* Rendered as a