/* ============================================================ Delta Flow - landing (redesign). Dark theme is the default; [data-theme="light"] on switches tokens. ============================================================ */ :root { --bg: oklch(17% 0.012 260); --bg-alt: oklch(20.5% 0.014 260); --card: oklch(22.5% 0.016 260); --border: oklch(32% 0.02 260); --text: oklch(96% 0.004 90); --muted: oklch(72% 0.01 260); --nav-bg: oklch(15% 0.012 260 / 0.85); --accent: oklch(70% 0.17 45); --accent-soft: oklch(70% 0.17 45 / 0.14); --accent-border: oklch(70% 0.17 45 / 0.35); --accent-btn-text: oklch(18% 0.02 45); --navy: oklch(24% 0.05 255); --navy-text: oklch(96% 0.01 90); --navy-text-2: oklch(80% 0.02 90); --teal: oklch(60% 0.1 200); --dot: oklch(30% 0.02 260); --toggle-track: oklch(30% 0.02 260); --shot-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.65); --card-hover-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.5); --fab-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --hero-glow-opacity: 0.28; --dot-opacity: 0.5; --font-head: "Commissioner", "Segoe UI", system-ui, sans-serif; --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } :root[data-theme="light"] { --bg: oklch(98.5% 0.004 90); --bg-alt: oklch(95.5% 0.006 95); --card: #ffffff; --border: oklch(90% 0.012 90); --text: oklch(24% 0.035 255); --muted: oklch(46% 0.03 255); --nav-bg: oklch(98.5% 0.004 90 / 0.85); --accent-soft: oklch(70% 0.17 45 / 0.1); --accent-border: oklch(70% 0.17 45 / 0.3); --accent-btn-text: #ffffff; --teal: oklch(55% 0.12 200); --dot: oklch(92% 0.01 90); --toggle-track: oklch(88% 0.015 90); --shot-shadow: 0 30px 70px -20px rgba(20, 30, 60, 0.18); --card-hover-shadow: 0 16px 32px -12px rgba(20, 30, 60, 0.14); --fab-shadow: 0 10px 30px rgba(20, 30, 60, 0.25); --hero-glow-opacity: 0.22; --dot-opacity: 0.7; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html { overflow-x: hidden; overflow-x: clip; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background 0.25s ease, color 0.25s ease; overflow-x: hidden; overflow-x: clip; } ::selection { background: oklch(70% 0.17 45 / 0.3); } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } @keyframes df-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes df-fab-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ── Scroll reveal ─────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Nav ───────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); background: var(--nav-bg); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1240px; margin: 0 auto; padding: 3px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: flex; align-items: center; gap: 12px; } .logo-mark { height: 68px; width: auto; flex-shrink: 0; display: block; margin: -5px 0; } .logo-light { display: none; } :root[data-theme="light"] .logo-dark { display: none; } :root[data-theme="light"] .logo-light { display: block; } .logo-text { font-family: var(--font-body); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; } .nav-center { display: flex; align-items: center; gap: 28px; } .nav-center a { font-size: 14px; font-weight: 500; color: var(--muted); } .nav-center a:hover { color: var(--text); } .nav-right { display: flex; align-items: center; gap: 12px; } /* Language dropdown (globe icon only) */ .lang-dd { position: relative; } .lang-dd summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); padding: 6px; border-radius: 8px; transition: color 0.2s ease; } .lang-dd summary::-webkit-details-marker { display: none; } .lang-dd summary:hover { color: var(--text); } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.4); z-index: 40; } .lang-menu a { display: block; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; color: var(--muted); } .lang-menu a:hover { background: var(--bg-alt); color: var(--text); } .lang-menu a.active { color: var(--accent); font-weight: 700; } /* Theme toggle - small icon button, same style as the language globe */ .theme-toggle { display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px; background: none; border: none; color: var(--muted); cursor: pointer; transition: color 0.2s ease; flex-shrink: 0; } .theme-toggle:hover { color: var(--text); } .theme-toggle .tt-moon { display: block; } .theme-toggle .tt-sun { display: none; } :root[data-theme="light"] .theme-toggle .tt-moon { display: none; } :root[data-theme="light"] .theme-toggle .tt-sun { display: block; } .btn { font-family: var(--font-body); font-weight: 700; border-radius: 10px; text-decoration: none; display: inline-block; cursor: pointer; transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .btn-primary { color: var(--accent-btn-text); background: var(--accent); box-shadow: 0 8px 24px var(--accent-soft); } .btn-primary:hover { filter: brightness(1.05); } .btn-secondary { color: var(--text); background: transparent; border: 1.5px solid var(--border); } .btn-secondary:hover { border-color: var(--accent-border); } .cta-small { font-size: 14px; padding: 10px 18px; border-radius: 8px; white-space: nowrap; } /* ── Sections ──────────────────────────────────────────────── */ .section { background: var(--bg); } .section-alt { background: var(--bg-alt); } .section-inner { max-width: 1240px; margin: 0 auto; padding: 88px 32px; } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; margin-bottom: 14px; color: var(--accent); } h2.title { font-family: var(--font-head); font-size: 36px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--text); max-width: 640px; } .lead { font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 640px; margin: 0; } /* ── Hero ──────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; background: var(--bg); } .hero-pattern { position: absolute; inset: 0; background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 22px 22px; opacity: var(--dot-opacity); mask-image: linear-gradient(to bottom, black, transparent 80%); -webkit-mask-image: linear-gradient(to bottom, black, transparent 80%); pointer-events: none; } .hero-inner { max-width: 1240px; margin: 0 auto; padding: 96px 32px 72px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-eyebrow { text-align: center; } h1.hero-title { font-family: var(--font-head); font-size: 64px; line-height: 1.08; font-weight: 700; letter-spacing: -0.018em; margin: 0 0 24px; color: var(--text); max-width: 1060px; animation: df-fade-up 0.6s ease both; } .hero-sub { font-size: 20px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 760px; animation: df-fade-up 0.6s ease 0.05s both; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 36px 0 28px; justify-content: center; } .hero-cta .btn { font-size: 15.5px; padding: 15px 26px; } .hero-badges { display: flex; flex-wrap: wrap; gap: 18px 22px; margin-bottom: 64px; justify-content: center; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--muted); } .hero-badge .chk { color: var(--accent); font-weight: 700; font-size: 15px; } /* Hero screenshot (browser frame) */ .shot-wrap { position: relative; width: 100%; } .shot-glow { position: absolute; top: -60px; right: -40px; width: 420px; height: 420px; max-width: 90%; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: var(--hero-glow-opacity); filter: blur(20px); pointer-events: none; z-index: 0; } .shot-frame { position: relative; z-index: 1; border-radius: 16px; border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shot-shadow); } .shot-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--border); } .shot-dots { display: flex; gap: 6px; } .shot-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--border); display: inline-block; } .shot-url { font-size: 12px; color: var(--muted); font-family: var(--font-mono); } .shot-live { font-size: 11.5px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); } .shot-body { background: var(--card); line-height: 0; } .shot-body img { width: 100%; height: auto; } .shot-img-dark { display: block; } .shot-img-light { display: none; } :root[data-theme="light"] .shot-img-dark { display: none; } :root[data-theme="light"] .shot-img-light { display: block; } /* Hero stats */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin-top: 56px; } .stat-cell { padding: 8px 20px; text-align: center; } .stat-cell + .stat-cell { border-left: 1px solid var(--border); } .stat-value { font-family: var(--font-head); font-size: 34px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em; } .stat-label { font-size: 13.5px; color: var(--muted); } /* ── Comparison table ──────────────────────────────────────── */ .table-wrap { margin-top: 40px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow-x: auto; } .table-inner { min-width: 640px; } .table-row { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; } .th { padding: 16px 20px; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--muted); border-bottom: 1px solid var(--border); } .th-accent { color: var(--accent); text-align: center; } .td-label { padding: 16px 20px; font-size: 14.5px; color: var(--text); font-weight: 600; border-bottom: 1px solid var(--border); display: flex; align-items: center; } .td-typical { padding: 16px 20px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--border); text-align: center; display: flex; align-items: center; justify-content: center; } .td-delta { padding: 16px 20px; font-size: 14px; color: var(--text); font-weight: 600; background: var(--accent-soft); border-bottom: 1px solid var(--border); display: flex; align-items: center; } .table-inner .table-row:last-child .td-label, .table-inner .table-row:last-child .td-typical, .table-inner .table-row:last-child .td-delta { border-bottom: none; } /* ── Cards grid (openness / features) ──────────────────────── */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 44px; } .cards-6 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 26px; } .card-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .card-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--text); position: relative; } .card-desc { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; position: relative; } .feature-card { position: relative; overflow: hidden; } .feature-card .card-desc { max-width: 88%; } .feature-ghost { position: absolute; top: -14px; right: 8px; font-family: var(--font-head); font-size: 76px; font-weight: 700; color: oklch(70% 0.17 45 / 0.13); pointer-events: none; line-height: 1; } :root[data-theme="light"] .feature-ghost { color: oklch(70% 0.17 45 / 0.12); } .feature-card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .feature-card:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: var(--card-hover-shadow); } /* ── Deployment steps ──────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 0; margin-top: 48px; } .step { border-left: 2px solid var(--border); padding: 0 24px; } .step-num { font-family: var(--font-head); font-size: 34px; font-weight: 700; color: var(--accent); margin-bottom: 10px; } .step-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--text); } .step-desc { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; } .tech-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; } .tech-badge { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--border); padding: 6px 12px; border-radius: 99px; font-family: var(--font-mono); } /* ── Local (navy) ──────────────────────────────────────────── */ .section-navy { background: var(--navy); color: var(--navy-text); } .section-navy .eyebrow { color: var(--accent); } .section-navy h2.title { color: var(--navy-text); } .local-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin-top: 44px; } .local-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-border); margin-bottom: 16px; display: flex; align-items: center; justify-content: center; color: var(--accent); } .local-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--navy-text); } .local-desc { font-size: 14px; line-height: 1.55; color: var(--navy-text-2); margin: 0; } /* ── Pricing ───────────────────────────────────────────────── */ .price-card { margin-top: 40px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 48px; display: flex; align-items: stretch; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .price-left { flex: 1; min-width: 280px; } .price-from { font-size: 14px; color: var(--muted); font-weight: 600; } .price-value { font-family: var(--font-head); font-size: 48px; font-weight: 700; color: var(--text); margin: 4px 0; } .price-currency { font-size: 22px; font-weight: 700; color: var(--muted); } .price-per { font-size: 14px; color: var(--muted); margin-bottom: 16px; } .price-note { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 420px; margin: 0; } .price-card .btn { font-size: 15.5px; padding: 16px 24px; white-space: nowrap; align-self: center; } /* ── FAQ ───────────────────────────────────────────────────── */ .faq-inner { max-width: 840px; margin: 0 auto; padding: 88px 32px; } .faq-list { margin-top: 32px; } .faq-item { border-bottom: 1px solid var(--border); padding: 6px 0; } .faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; cursor: pointer; font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 20px; color: var(--accent); flex-shrink: 0; } .faq-item[open] summary::after { content: "–"; } .faq-answer { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 4px 18px; max-width: 720px; } /* ── Final CTA (navy) ──────────────────────────────────────── */ .final-cta { background: var(--navy); color: var(--navy-text); position: relative; overflow: hidden; } .final-cta-glow { position: absolute; top: -140px; left: 50%; margin-left: -320px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0%, transparent 65%); opacity: 0.13; filter: blur(48px); pointer-events: none; } .final-cta-inner { max-width: 820px; margin: 0 auto; padding: 96px 24px; text-align: center; position: relative; } .final-cta h2 { font-family: var(--font-head); font-size: 40px; font-weight: 700; letter-spacing: -0.018em; margin: 0 0 16px; color: var(--navy-text); } .final-cta p { font-size: 16px; color: var(--navy-text-2); margin: 0; } .final-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; } .final-cta-row .btn { font-size: 15.5px; padding: 15px 26px; } .btn-ghost-navy { font-family: var(--font-head); font-weight: 700; color: var(--navy-text); background: transparent; border: 1.5px solid oklch(96% 0.01 90 / 0.3); border-radius: 10px; } .btn-ghost-navy:hover { border-color: oklch(96% 0.01 90 / 0.6); } /* ── Footer ────────────────────────────────────────────────── */ .footer { background: var(--bg-alt); border-top: 1px solid var(--border); } .footer-inner { max-width: 1240px; margin: 0 auto; padding: 48px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; } .footer-brand { max-width: 320px; } .footer-brand .logo { margin-bottom: 12px; } .footer-text { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; } .footer-head { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .footer-col a { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; } .footer-col a:hover { color: var(--text); } .footer-col a.footer-mail { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text); } .footer-bottom { text-align: center; padding: 18px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); } .footer-legacy { color: inherit; opacity: 0.65; text-decoration: none; } .footer-legacy:hover { opacity: 1; text-decoration: underline; } /* ── Sticky FAB ────────────────────────────────────────────── */ .fab { position: fixed; bottom: 20px; right: 20px; z-index: 30; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--accent-btn-text); background: var(--accent); padding: 13px 20px; border-radius: 99px; box-shadow: var(--fab-shadow); animation: df-fab-in 0.3s ease both; display: none; } .fab.show { display: inline-block; } /* ── Responsive ────────────────────────────────────────────── */ /* Laptops (13-16", ~1280-1536 CSS px): tighter hero, smaller type */ @media (max-width: 1536px) { h1.hero-title { font-size: 52px; max-width: 900px; } .hero-sub { font-size: 18px; } .hero-inner { padding: 72px 32px 60px; } .shot-wrap { max-width: 1000px; } .section-inner, .faq-inner { padding: 76px 32px; } h2.title { font-size: 32px; } .stats-grid { margin-top: 48px; } .stat-value { font-size: 30px; } .final-cta-inner { padding: 84px 24px; } .final-cta h2 { font-size: 34px; } } /* Tablets and small laptops */ @media (max-width: 1100px) { .nav-center { gap: 20px; } h1.hero-title { font-size: 44px; } .hero-inner { padding: 60px 24px 52px; } .section-inner, .faq-inner { padding: 64px 24px; } .price-card { padding: 36px; gap: 32px; } } /* Phones and phablets */ @media (max-width: 768px) { .nav-center { display: none; } .nav-inner { padding: 6px 14px; gap: 10px; } .logo { gap: 8px; } .logo-mark { height: 42px; margin: 0; } .logo-text { font-size: 15px; } .nav-right { gap: 6px; } .lang-dd summary, .theme-toggle { padding: 5px; } .cta-small { font-size: 12.5px; padding: 8px 12px; } .section-inner, .faq-inner { padding: 56px 18px; } .hero-inner { padding: 48px 18px 44px; } h1.hero-title { font-size: 34px; line-height: 1.14; } .hero-sub { font-size: 16px; } .hero-cta { width: 100%; margin: 30px 0 24px; } .hero-cta .btn { flex: 1 1 auto; text-align: center; font-size: 15px; padding: 14px 18px; } .hero-badges { gap: 10px 16px; margin-bottom: 44px; } .hero-badge { font-size: 13.5px; } h2.title { font-size: 26px; } .lead { font-size: 15.5px; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; margin-top: 40px; } .stat-cell { padding: 4px 8px; } .stat-cell + .stat-cell { border-left: none; } .stat-value { font-size: 26px; } .shot-bar { padding: 8px 12px; } .shot-url { max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cards { gap: 14px; margin-top: 32px; } .card { padding: 22px 20px; } .feature-ghost { font-size: 56px; top: -8px; } .steps { margin-top: 36px; gap: 24px 0; } .step { padding: 0 18px; } .step-num { font-size: 28px; } .tech-badges { margin-top: 30px; } .local-grid { gap: 22px; margin-top: 36px; } .price-card { padding: 28px 20px; gap: 24px; flex-direction: column; } .price-value { font-size: 38px; } .price-card .btn { align-self: stretch; text-align: center; white-space: normal; } .faq-item summary { font-size: 15px; } .final-cta-inner { padding: 68px 20px; } .final-cta h2 { font-size: 27px; } .final-cta-row { margin-top: 26px; } .final-cta-row .btn { flex: 1 1 100%; text-align: center; } .footer-inner { padding: 40px 20px; gap: 28px; } .fab { font-size: 13px; padding: 11px 16px; bottom: 14px; right: 14px; } } /* Small phones: drop the logo wordmark so the header always fits */ @media (max-width: 480px) { .logo-text { display: none; } h1.hero-title { font-size: 30px; } .hero-cta .btn { flex-basis: 100%; } }