/* ============================================================ CRUVENO — Light Design System Drop at: /assets/cruveno.css Load in before page CSS. Replaces the old dark theme variables in index.html/about.html/etc. ============================================================ */ :root { /* Surfaces */ --bg: #ffffff; --bg-soft: #f7f8fa; /* section bands, card visual headers */ --bg-inset: #f1f2f5; /* toggles, chips */ --navy: #0e1f52; /* hero, footer, instrument panels */ --navy-deep: #0a1740; /* Ink — contrast-checked on white */ --ink: #101320; /* headings */ --ink-body: #454b59; /* body copy AA on white */ --ink-dim: #5c6270; /* meta, mono labels AA on white */ --ink-on-navy: #c3cde7; --ink-on-navy-dim:#9fb2e8; /* Brand + semantics */ --accent: #2547c4; /* equity line, links, kickers */ --accent-soft: #eaf0ff; --accent-border: #d3def8; --ok: #217a5b; /* guard active, green zone */ --ok-on-navy: #4fd1a0; --warn: #b87708; /* amber zone */ --danger: #c7373c; /* limits, violations */ --danger-deep: #8a1f23; /* max drawdown */ /* Lines */ --line: #e7e8ec; --line-strong: #e1e3e9; --line-faint: #edeef1; /* Type */ --font: Inter, system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Radii */ --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-xl: 18px; --r-pill: 99px; /* Motion — brand curve */ --ease: cubic-bezier(.23, 1, .32, 1); --ease-spring: cubic-bezier(.34, 1.3, .5, 1); } * { box-sizing: border-box; } /* `hidden` has to actually hide. The demo tab panels carry an inline `display:grid`, which outranks the UA's `[hidden] { display:none }` — the BRS panel rendered underneath the dashboard panel on every screen size. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: #152c6e; } h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.04em; } p { margin: 0; text-wrap: pretty; } ul { margin: 0; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; } /* ---- Type scale ---------------------------------------------------- */ .h1 { font: 700 clamp(44px, 5.4vw, 74px)/.98 var(--font); } .h2 { font: 700 clamp(34px, 4vw, 54px)/1.03 var(--font); } .h3 { font: 600 19px/1.3 var(--font); letter-spacing: -.018em; } .lede { font: 400 18.5px/1.6 var(--font); color: var(--ink-body); } .body { font: 400 16.5px/1.75 var(--font); color: var(--ink-body); } .dim { color: #5c6270; } /* second half of a headline */ .dim-navy { color: #8b9dd0; } /* same, on navy */ .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .meta { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); } /* ---- Bands --------------------------------------------------------- */ .band-navy { background: var(--navy); color: #fff; } .band-soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* Vertical only — several pages put .wrap and .section on the SAME element, and the `padding: 80px 0` shorthand silently zeroed .wrap's side gutters, pinning body copy to the screen edge. */ .section { padding-top: 80px; padding-bottom: 80px; } /* ---- Buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--font); padding: 17px 26px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn-primary { background: var(--navy); color: #fff; } .btn-on-navy { background: #fff; color: var(--navy); } .btn-secondary { background: #fff; color: var(--ink); border-color: #dde0e7; } .btn-ghost-navy{ background: transparent; color: #fff; border-color: rgba(255,255,255,.25); } .btn-sm { font-size: 13px; padding: 11px 18px; } /* ---- Cards --------------------------------------------------------- */ .card { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; } .card-pad { padding: 24px 26px; } /* Uniform visual band on feature cards — keeps all card headings aligned */ .card-visual { background: var(--bg-soft); border-bottom: 1px solid var(--line); height: 132px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* ---- Chips / pills ------------------------------------------------- */ .pill { font: 500 12.5px/1 var(--font); padding: 10px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink-body); } .pill-navy { color: var(--ink-on-navy); border-color: rgba(255,255,255,.18); } .pill-navy.is-on { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); } .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border-radius: var(--r-pill); background: var(--accent-soft); color: #152c6e; } /* ---- Segmented toggle (pricing, blog filters, demo tabs) ----------- */ .seg { display: flex; gap: 4px; background: var(--bg-inset); padding: 5px; border-radius: var(--r-pill); } .seg > button { font: 600 13px/1 var(--font); padding: 12px 20px; border: none; cursor: pointer; border-radius: var(--r-pill); background: transparent; color: var(--ink-body); } .seg > button[aria-selected="true"] { background: #fff; color: var(--ink); } /* ---- Forms --------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 7px; } .field > span { font: 500 12.5px/1 var(--font); color: #2a3040; } .input { border: 1px solid #dde0e7; border-radius: 9px; padding: 14px; font: 400 15px/1 var(--font); color: var(--ink); background: #fff; } .input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---- Data table (comparison matrix, feature tables) ---------------- */ .tbl { border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; } .tbl-head { background: var(--bg-soft); } .tbl-head span { padding: 14px 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); } .tbl-row { border-top: 1px solid var(--line-faint); font: 400 14.5px/1.4 var(--font); } .tbl-row span { padding: 16px 20px; } .col-ours { background: #f7faff; color: #152c6e; font-weight: 600; } .col-ours-head { background: var(--accent-soft); color: #152c6e; } /* Visually hidden but IN GRID FLOW — must not be position:absolute or the grid columns shift by one. */ .vh-inflow { height: 1px; overflow: hidden; clip-path: inset(50%); font-size: 1px; color: transparent; } /* ---- Sticky conversion bar ----------------------------------------- */ .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 28px rgba(16,19,32,.08); animation: barin .34s var(--ease); } .stickybar[hidden] { display: none; } .stickybar .wrap { padding: 14px 32px; min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: nowrap; } /* ---- Motion (mirrors the brand video) ------------------------------ */ @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fadein { to { opacity: 1; transform: none; } } @keyframes ring { 0% { r: 4; opacity: .55; } 100% { r: 11; opacity: 0; } } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } } @keyframes grow { from { transform: scaleY(.08); } to { transform: scaleY(1); } } @keyframes sweep { from { transform: rotate(-78deg); } to { transform: rotate(14deg); } } @keyframes slidein{ from { transform: translateX(-14px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes barin { from { transform: translateY(100%); } to { transform: none; } } .ln { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.2s var(--ease) .4s forwards; } .gh { stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 1.3s var(--ease) 2.5s forwards; } .mini { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.8s var(--ease) .2s forwards; } .fd { opacity: 0; transform: translateY(6px); animation: fadein .5s var(--ease) forwards; animation-delay: var(--d, 1s); } .ring { animation: ring 2s var(--ease) infinite; } .dot { animation: blink 2.4s linear infinite; } .bar { transform-origin: bottom; animation: grow .5s var(--ease) backwards; } /* fill-mode MUST be `both` — with `backwards` the needle snaps back at the end */ .needle { transform-origin: 132px 80px; animation: sweep 1.2s var(--ease-spring) .3s both; } .row { animation: slidein .45s var(--ease) backwards; } @media (prefers-reduced-motion: reduce) { .ln, .gh, .mini { animation: none; stroke-dashoffset: 0; } .fd { animation: none; opacity: 1; transform: none; } .ring, .dot, .bar, .needle, .row, .stickybar { animation: none; } } /* ---- Cookie banner -------------------------------------------------- */ /* Was a per-page block in the old dark pages; shared here so every page keeps it. Reads the same `cookieAccepted` key, so anyone who already dismissed it is not asked again. */ #cookieBanner { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 18px 48px rgba(16,19,32,.14); padding: 16px 18px; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; } #cookieBanner.is-on { display: flex; } #cookieBanner p { font: 400 13.5px/1.55 var(--font); color: var(--ink-body); flex: 1 1 320px; } #cookieBanner button { font: 600 13px/1 var(--font); padding: 12px 20px; cursor: pointer; border: none; border-radius: 9px; background: var(--navy); color: #fff; } /* ---- Mobile nav (burger + drawer) ----------------------------------- */ /* Built at runtime by cruveno.js §10 from the nav already on the page. Hidden above 900px, so the desktop header is byte-for-byte unchanged. */ .nav-burger { display: none; } @media (max-width: 900px) { .nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; padding: 0 9px; background: none; border: none; cursor: pointer; border-radius: 9px; /* Above the drawer overlay (z-index 90), so the burger stays visible as the X that closes it — otherwise the panel buries the only control. */ position: relative; z-index: 95; } .nav-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: #fff; transition: transform .26s var(--ease), opacity .18s linear; } /* Burger sits on navy on every shared page except a white-header page, which sets --burger-ink itself. */ .nav-burger span { background: var(--burger-ink, #fff); } .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.is-open span:nth-child(2) { opacity: 0; } .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* The desktop links and actions collapse into the drawer. */ .nav .nav-links, .nav > div > a.login, .nav > div > a.btn, .nav > a.btn { display: none; } .nav { height: 60px !important; } } .nav-drawer { position: fixed; inset: 0; z-index: 90; background: rgba(6, 13, 40, .55); backdrop-filter: blur(2px); opacity: 0; transition: opacity .26s var(--ease); display: flex; justify-content: flex-end; } .nav-drawer.is-on { opacity: 1; } .nav-drawer[hidden] { display: none; } .nav-drawer-panel { width: min(86vw, 340px); height: 100%; background: var(--navy); color: #fff; padding: calc(22px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); padding-right: calc(24px + env(safe-area-inset-right)); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -18px 0 54px rgba(3, 10, 38, .5); transform: translateX(100%); transition: transform .3s var(--ease); } .nav-drawer.is-on .nav-drawer-panel { transform: none; } .nav-drawer-links { display: flex; flex-direction: column; margin-top: 34px; } .nav-drawer-links a { display: flex; align-items: center; min-height: 52px; padding: 4px 2px; font: 600 17.5px/1.3 var(--font); letter-spacing: -.015em; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .10); } .nav-drawer-links a.is-on { color: var(--ok-on-navy); } .nav-drawer-actions { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; } .nav-drawer-actions a { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 10px; font: 600 15.5px/1 var(--font); text-align: center; } /* The plain "Log in" link becomes a real button in the drawer — a 14px text link is not a tap target. */ .nav-drawer-actions a.login { color: #fff; border: 1px solid rgba(255, 255, 255, .28); background: transparent; } .nav-drawer-actions a.btn { width: 100%; padding: 17px 20px; font-size: 15.5px; } /* Scroll lock. position:fixed on would jump the page to the top on close, so only overflow is locked — enough on iOS 16+ and every desktop browser, and it keeps the scroll position. */ html.nav-open, html.nav-open body { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .nav-drawer, .nav-drawer-panel, .nav-burger span { transition: none; } } /* ---- Responsive ----------------------------------------------------- */ @media (max-width: 1080px) { .grid-2, .grid-3 { grid-template-columns: 1fr !important; } } @media (max-width: 720px) { .wrap { padding: 0 20px; } .section { padding-top: 56px; padding-bottom: 56px; } /* Type scale — the desktop clamp floors at 44px, which is a 3-line headline on a 375px screen. */ .h1 { font-size: clamp(33px, 8.8vw, 44px); line-height: 1.04; letter-spacing: -.035em; } .h2 { font-size: clamp(27px, 7.4vw, 36px); line-height: 1.08; letter-spacing: -.03em; } .h3 { font-size: 17.5px; } .lede { font-size: 16.5px; line-height: 1.58; } .body { font-size: 15.5px; line-height: 1.7; } /* Tap targets. 14px text links sit at ~14px tall; 44px is the floor. */ .foot-col { gap: 0 !important; } .foot-col a { min-height: 44px; display: flex; align-items: center; } .foot-col > span { padding: 10px 0 4px; } /* The bar's two halves carry inline `flex:none`, so the stacking needs !important — otherwise the CTA half stays 409px wide and hangs off a 375px screen. */ .stickybar .wrap { flex-wrap: wrap; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); } .stickybar .wrap > * { flex: 1 1 100% !important; min-width: 0; } /* "CANCEL ANYTIME · PRICE LOCKED FOREVER" already sits under the hero CTA; on a phone it only steals the row the button needs. */ .stickybar .wrap > div:last-child > span { display: none; } .stickybar .btn { width: 100%; flex: 1 1 auto; } /* Sticky bar and cookie banner both pin to the bottom — lift the banner. */ .stickybar:not([hidden]) ~ #cookieBanner.is-on { bottom: 128px; } #cookieBanner { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 14px 16px; } #cookieBanner button { width: 100%; min-height: 46px; } /* The sticky bar is fixed and ~112px tall on a phone, and it is showing by the time the reader reaches the bottom — without clearance the copyright line sits underneath it. The flag is set by cruveno.js only on pages that actually have a bar, so legal pages keep their normal footer. */ html.has-stickybar footer { padding-bottom: calc(124px + env(safe-area-inset-bottom)); } /* Wide grid tables scroll as a unit instead of crushing their columns. */ .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl-scroll .tbl { min-width: 560px; } .tbl-head span, .tbl-row span { padding: 13px 14px; } .tbl-row { font-size: 13.5px; } /* Segmented controls scroll rather than overflow their pill. */ .seg { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } .seg > button { flex: 0 0 auto; padding: 13px 18px; } .card-pad { padding: 20px 18px; } } @media (max-width: 560px) { /* Primary CTAs go full-width; .btn-sm stays inline (it is used inside rows and cards where a full-width button would look broken). */ .btn:not(.btn-sm) { width: 100%; } /* …except where the button shares a row that is already handled. */ .seg .btn, .nav .btn { width: auto; } } /* iOS zooms the page on focus when an input is under 16px. */ @media (max-width: 900px) { .input, input, select, textarea { font-size: 16px; } } /* Long unbroken strings (emails, codes, URLs) must not push the page wide. */ @media (max-width: 720px) { body { overflow-wrap: break-word; } }