/* ========================================================================== Bethvault, marketing site Dark, editorial-SaaS aesthetic: serif display type over a near-black grid, one confident accent, generous space. No build step, no framework. ========================================================================== */ :root { /* surfaces */ --bg: #050505; --bg-1: #0a0a0a; --bg-2: #101010; --bg-3: #161616; /* lines */ --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .14); --grid-line: rgba(255, 255, 255, .08); /* text */ --text: #e8e8e8; --text-2: #9a9a9a; --text-3: #6a6a6a; /* brand, carried over from the Bethvault app */ --accent: #3ECF8E; --accent-hi: #5BE0A5; --accent-dim: rgba(62, 207, 142, .12); --accent-line: rgba(62, 207, 142, .35); --on-accent: #04120c; --warn: #f0b429; /* The accent as TEXT. Identical to the fill in dark, but #3ECF8E only reaches 2:1 on white, so light mode darkens it; fills stay bright and keep taking dark text. */ --accent-ink: #3ECF8E; --warn-ink: #f0b429; /* surfaces built from washes of the text colour: white on dark, black on light, so hover fills and faint panels invert with the theme */ --wash-008: rgba(255,255,255,.008); --wash-012: rgba(255,255,255,.012); --wash-02: rgba(255,255,255,.02); --wash-025: rgba(255,255,255,.025); --wash-03: rgba(255,255,255,.03); --wash-04: rgba(255,255,255,.04); --wash-05: rgba(255,255,255,.05); --wash-06: rgba(255,255,255,.06); --wash-07: rgba(255,255,255,.07); --wash-08: rgba(255,255,255,.08); --wash-1: rgba(255,255,255,.1); --wash-11: rgba(255,255,255,.11); --wash-12: rgba(255,255,255,.12); --card-bg: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)); --nav-bg: rgba(10, 10, 10, .72); --nav-bg-solid: rgba(10, 10, 10, .9); --menu-bg: rgba(10, 10, 10, .97); --toast-bg: rgba(16, 16, 16, .94); --shadow-deep: rgba(0, 0, 0, .9); --sunk: rgba(0, 0, 0, .25); --scrim: rgba(0, 0, 0, .72); --glow: rgba(62, 207, 142, .16); --glow-2: rgba(62, 207, 142, .09); color-scheme: dark; /* type, Geist matches the fonts shipped inside the Bethvault app itself, so product and marketing site read as one brand. Fraunces carries the editorial display voice. */ --serif: "Fraunces", ui-serif, Georgia, serif; --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* metrics */ --maxw: 1160px; --r: 12px; --r-lg: 20px; --ease: cubic-bezier(.4, 0, .2, 1); } /* ========================================================================== Light theme Chosen by the visitor's system setting, or the toggle in the nav. The script writes data-theme before first paint, so there's no flash. Only tokens change here; the components never need to know which theme they're in. ========================================================================== */ :root[data-theme="light"] { --bg: #f7f7f5; --bg-1: #ffffff; --bg-2: #f2f2ef; --bg-3: #e9e9e5; --line: rgba(20, 24, 22, .09); --line-strong: rgba(20, 24, 22, .16); --grid-line: rgba(20, 24, 22, .055); --text: #111513; --text-2: #444a47; --text-3: #5d6360; --accent-hi: #33c283; --accent-dim: rgba(62, 207, 142, .15); --accent-line: rgba(18, 150, 95, .38); --accent-ink: #0b7a50; --warn-ink: #9a5f00; --wash-008: rgba(20,24,22,.012); --wash-012: rgba(20,24,22,.018); --wash-02: rgba(20,24,22,.022); --wash-025: rgba(20,24,22,.025); --wash-03: rgba(20,24,22,.03); --wash-04: rgba(20,24,22,.035); --wash-05: rgba(20,24,22,.04); --wash-06: rgba(20,24,22,.05); --wash-07: rgba(20,24,22,.055); --wash-08: rgba(20,24,22,.06); --wash-1: rgba(20,24,22,.08); --wash-11: rgba(20,24,22,.1); --wash-12: rgba(20,24,22,.1); --card-bg: linear-gradient(180deg, #ffffff, #fbfbf9); --nav-bg: rgba(255, 255, 255, .72); --nav-bg-solid: rgba(255, 255, 255, .92); --menu-bg: rgba(255, 255, 255, .98); --toast-bg: rgba(255, 255, 255, .96); --shadow-deep: rgba(24, 34, 29, .16); --sunk: rgba(20, 24, 22, .025); --scrim: rgba(20, 24, 22, .45); --glow: rgba(62, 207, 142, .2); --glow-2: rgba(62, 207, 142, .12); color-scheme: light; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; /* `clip` (not `hidden`) so decorative glows never create a horizontal scrollbar, while position: fixed/sticky keep working normally. */ overflow-x: clip; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- grid backdrop ---------- */ .grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 84px 84px; /* fade the grid out toward the bottom so it never fights the content */ -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%); opacity: .8; } /* ---------- layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; position: relative; z-index: 1; } .container-narrow { max-width: 780px; } .section { padding: 110px 0; position: relative; z-index: 1; } /* ---------- type ---------- Fraunces is variable (optical size + weight). Let the browser pick the optical size per rendered size, and keep display weight light so large headings stay elegant rather than heavy. */ h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.01em; } h1, h2, .price, .quote blockquote { font-optical-sizing: auto; font-variation-settings: "SOFT" 0, "WONK" 0; } h1 { font-family: var(--serif); font-size: clamp(2.75rem, 6.2vw, 4.35rem); line-height: 1.06; letter-spacing: -.02em; /* Wide enough that "Every photo your team shoots," holds one line on desktop; the accent clause below it wraps as its own line. */ max-width: 21ch; margin-inline: auto; text-wrap: balance; } h1 em { display: block; font-style: italic; color: var(--accent-ink); } h2 { font-family: var(--serif); font-size: clamp(2rem, 3.9vw, 3rem); line-height: 1.14; letter-spacing: -.02em; max-width: 20ch; } h2 em { font-style: italic; color: var(--accent-ink); } h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em; } .eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; } .section-sub { color: var(--text-2); font-size: 1.0625rem; max-width: 60ch; margin-top: 18px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: .875rem; font-weight: 500; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), color .18s var(--ease); } .btn svg { width: 17px; height: 17px; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 600; } .btn-primary:hover { background: var(--accent-hi); } .btn-outline { border-color: var(--line-strong); color: var(--text); } .btn-outline:hover { border-color: var(--text-3); background: var(--wash-04); } .btn-ghost { color: var(--text-2); } .btn-ghost:hover { color: var(--text); } .btn-lg { padding: 14px 26px; font-size: .95rem; border-radius: 12px; } .btn-block { width: 100%; } /* ---------- nav ---------- */ .nav-wrap { position: fixed; inset: 18px 0 auto; z-index: 100; display: flex; justify-content: center; padding-inline: 24px; pointer-events: none; } .nav { pointer-events: auto; width: 100%; max-width: var(--maxw); display: flex; align-items: center; gap: 28px; padding: 10px 12px 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--nav-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); transition: background .25s var(--ease), border-color .25s var(--ease); } .nav.scrolled { background: var(--nav-bg-solid); border-color: var(--line-strong); } .brand { display: inline-flex; align-items: center; gap: 9px; flex: none; } .brand-mark { width: 26px; height: 26px; border-radius: 7px; } .brand-name { font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; } .nav-links { display: flex; gap: 26px; margin-inline: auto; } .nav-links a { font-size: .875rem; color: var(--text-2); transition: color .18s var(--ease); } .nav-links a:hover { color: var(--text); } /* the in-menu Download entry only exists on mobile */ .nav-link-cta { display: none; } .nav-actions { display: flex; align-items: center; gap: 8px; flex: none; } .nav-toggle { display: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; padding: 0; place-items: center; } .nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--text); margin: 3px auto; transition: transform .2s var(--ease), opacity .2s var(--ease); } .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); } /* ---------- theme toggle ---------- Sun and moon share one button and cross over: the icon shown is the mode you'd switch to. */ .theme-toggle { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; padding: 0; overflow: hidden; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--line-strong); background: var(--wash-04); } .theme-toggle svg { grid-area: 1 / 1; width: 17px; height: 17px; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s var(--ease); } .theme-toggle .i-moon { opacity: 0; transform: rotate(-90deg) scale(.4); } :root[data-theme="light"] .theme-toggle .i-sun { opacity: 0; transform: rotate(90deg) scale(.4); } :root[data-theme="light"] .theme-toggle .i-moon { opacity: 1; transform: none; } /* The switch itself reveals the new theme in a circle growing out of the toggle (View Transitions). Browsers without it just swap instantly. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-new(root) { z-index: 2; } /* ---------- hero ---------- */ .hero { position: relative; padding: 168px 0 0; text-align: center; /* contain the oversized glow horizontally; vertical stays visible so the product mockup's shadow isn't cut off */ overflow-x: clip; } .hero-glow { position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: min(1100px, 130vw); height: 620px; pointer-events: none; background: radial-gradient(ellipse at center, var(--glow) 0%, transparent 62%), radial-gradient(ellipse 60% 50% at 50% 40%, var(--glow-2) 0%, transparent 70%); filter: blur(24px); } .hero-inner { display: flex; flex-direction: column; align-items: center; } .pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--wash-025); font-size: .8125rem; color: var(--text-2); margin-bottom: 30px; transition: border-color .2s var(--ease), color .2s var(--ease); } .pill:hover { border-color: var(--accent-line); color: var(--text); } .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .pill-arrow { width: 13px; height: 13px; opacity: .55; } .hero-sub { color: var(--text-2); font-size: clamp(1rem, 1.5vw, 1.115rem); max-width: 62ch; margin: 26px auto 0; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 34px; } .hero-note { font-size: .8125rem; color: var(--text-3); margin-top: 18px; } /* ---------- hero product mockup ---------- */ .hero-visual { margin: 74px auto 0; max-width: 1000px; padding-inline: 24px; perspective: 1800px; position: relative; z-index: 1; } .app-window { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-1); overflow: hidden; transform: rotateX(7deg) scale(.985); transform-origin: 50% 0; box-shadow: 0 40px 90px -30px var(--shadow-deep), 0 0 90px -40px rgba(62,207,142,.5); } .app-titlebar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); } .tl { width: 10px; height: 10px; border-radius: 50%; background: #2e2e2e; } .tl-r { background: #ff5f57; } .tl-y { background: #febc2e; } .tl-g { background: #28c840; } .app-addr { margin-left: auto; margin-right: auto; font-family: var(--mono); font-size: .7rem; color: var(--text-3); } .app-body { display: grid; grid-template-columns: 190px 1fr; min-height: 330px; text-align: left; } .app-side { border-right: 1px solid var(--line); padding: 16px 12px; background: var(--wash-012); } .side-brand { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; padding: 0 6px 14px; } .side-brand svg { width: 20px; height: 20px; border-radius: 6px; } .side-event { font-size: .62rem; letter-spacing: .12em; color: var(--text-3); padding: 0 6px; margin-bottom: 10px; } .side-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: .82rem; color: var(--text-2); margin-bottom: 2px; } .side-item.active { background: var(--wash-06); color: var(--text); } .si-ico { width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .5; } .side-status { display: flex; align-items: center; gap: 7px; margin-top: 22px; padding: 0 8px; font-size: .72rem; color: var(--text-3); } .dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-line); animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(62,207,142,.5); } 70% { box-shadow: 0 0 0 7px rgba(62,207,142,0); } 100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); } } .app-main { display: flex; flex-direction: column; } .app-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); } .crumb { font-size: .8rem; color: var(--text-2); } .crumb span { color: var(--text-3); margin-inline: 5px; } .tool-btns { display: flex; gap: 6px; } .tb { width: 24px; height: 22px; border-radius: 6px; border: 1px solid var(--line); } .tb-accent { background: var(--accent); border-color: var(--accent); } .app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; } .tile { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; } .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55) 100%); } .t1 { background: linear-gradient(135deg, #2b3a63, #4a6fa5); } .t2 { background: linear-gradient(135deg, #5a3550, #a8577f); } .t3 { background: linear-gradient(135deg, #1f4d40, #3d8a72); } .t4 { background: linear-gradient(135deg, #5c4326, #a8763f); } .t5 { background: linear-gradient(135deg, #2c3550, #56618f); } .t6 { background: linear-gradient(135deg, #4a2f2f, #8a5252); } .tile-tag { position: absolute; left: 8px; bottom: 7px; z-index: 1; font-size: .62rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); color: #fff; } .upload-toast { position: absolute; right: 16px; bottom: 16px; width: 265px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--toast-bg); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -14px var(--shadow-deep); text-align: left; } .ut-row { display: flex; align-items: center; gap: 8px; font-size: .76rem; } .ut-spin { width: 12px; height: 12px; flex: none; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .ut-name { font-family: var(--mono); font-size: .7rem; color: var(--text); } .ut-pct { margin-left: auto; color: var(--accent-ink); font-weight: 600; } .ut-bar { height: 3px; border-radius: 99px; background: var(--wash-1); margin: 9px 0 7px; overflow: hidden; } .ut-bar i { display: block; height: 100%; width: 78%; border-radius: 99px; background: var(--accent); transition: background .3s var(--ease); } .ut-meta { font-size: .66rem; color: var(--text-3); transition: color .3s var(--ease); } /* --- upload demo states (driven by js/main.js) --- */ /* Wi-Fi dropped: bar goes amber and the spinner keeps turning, but the filled portion stays exactly where it was, that's the whole point. */ .upload-toast.is-stalled .ut-bar i { background: var(--warn); } .upload-toast.is-stalled .ut-spin { border-top-color: var(--warn); } .upload-toast.is-stalled .ut-pct { color: var(--warn-ink); } .upload-toast.is-stalled .ut-meta { color: var(--warn-ink); } /* finished: spinner resolves into a check */ .upload-toast.is-done .ut-spin { animation: none; border-color: transparent; background: var(--accent); position: relative; } .upload-toast.is-done .ut-spin::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 6px; border: solid var(--on-accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .upload-toast.is-done .ut-meta { color: var(--accent-ink); } /* ---------- stat strip ---------- */ .strip { padding: 26px 0 6px; border-top: 1px solid var(--line); } .strip-label { text-align: center; font-size: .68rem; letter-spacing: .18em; font-weight: 600; color: var(--text-3); margin-bottom: 30px; } /* Stays four across at every width. The figures are the quickest read on the page, and stacking them turns a glanceable row into a list. Type scales with the viewport instead. */ .strip-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2.5vw, 24px); text-align: center; } .stat b { display: block; font-family: var(--serif); font-size: clamp(1.25rem, 5.2vw, 2.6rem); font-weight: 400; color: var(--text); line-height: 1.1; } .stat span { display: block; font-size: clamp(.62rem, 1.7vw, .8rem); line-height: 1.35; color: var(--text-3); text-wrap: balance; } /* ---------- 3-up cards ---------- */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; } .card { padding: 28px 26px 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg); transition: border-color .25s var(--ease), transform .25s var(--ease); } .card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .card-num { font-family: var(--mono); font-size: .7rem; color: var(--accent-ink); margin-bottom: 16px; } .card h3 { margin-bottom: 9px; } .card p { color: var(--text-2); font-size: .925rem; } /* ---------- bento ---------- */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; } .b-card { padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg); transition: border-color .25s var(--ease); display: flex; flex-direction: column; } .b-card:hover { border-color: var(--line-strong); } .b-lg { grid-column: span 2; grid-row: span 2; } .b-wide { grid-column: span 2; } .b-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--accent-ink); margin-bottom: 18px; } .b-icon svg { width: 19px; height: 19px; } .b-card h3 { margin-bottom: 9px; } .b-card p { color: var(--text-2); font-size: .925rem; } /* The feature cards' live demos (network, upload, feed, drives, search) are styled in motion.css alongside the animation that drives them. */ .b-visual { margin-top: auto; padding-top: 26px; } .b-list { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; } .b-list li { position: relative; padding-left: 18px; font-size: .84rem; color: var(--text-2); } .b-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; } .step { padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg); } .step-n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: .82rem; font-weight: 700; margin-bottom: 18px; } .step h3 { margin-bottom: 9px; } .step p { color: var(--text-2); font-size: .925rem; } /* Each card ends in one live element (the address, the browsers, the file count). Their paragraphs differ in length, so left to flow they sat at different heights; the foot is pinned to the card floor at a fixed band height, and each element is centred in it, so all three line up. */ .step { display: flex; flex-direction: column; } .step-foot { margin-top: auto; padding-top: 18px; min-height: calc(18px + 40px); display: flex; align-items: center; } /* two classes, so it beats the single-class margins these elements declare further down the file */ .step-foot > .step-code, .step-foot > .step-chips, .step-foot > .step-live { margin-top: 0; } .step-foot > .step-code { flex: 1; min-width: 0; } .step-code { margin-top: 18px; font-family: var(--mono); font-size: .72rem; color: var(--accent-ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; overflow-x: auto; white-space: nowrap; } .c-dim { color: var(--text-3); margin-right: 8px; } .step-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .step-chips span { font-size: .72rem; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; } .step-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .74rem; color: var(--accent-ink); background: var(--accent-dim); border: 1px solid var(--accent-line); border-radius: 999px; padding: 6px 13px; } /* ---------- split section ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split h2 { max-width: 16ch; } .check-list { margin: 26px 0 30px; display: grid; gap: 11px; } .check-list li { position: relative; padding-left: 28px; color: var(--text-2); font-size: .95rem; } .check-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--accent-line); } .check-list li::after { content: ""; position: absolute; left: 5.5px; top: .62em; width: 5px; height: 8px; border: solid var(--accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); overflow: hidden; box-shadow: 0 30px 70px -30px var(--shadow-deep); } .panel-head { padding: 13px 20px; font-size: .78rem; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--line); background: var(--wash-02); } .panel-body { padding: 18px 20px 22px; } .panel-body + .panel-head { border-top: 1px solid var(--line); } .tgl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: .875rem; color: var(--text); } .sw { width: 36px; height: 21px; flex: none; border-radius: 999px; background: var(--wash-11); border: 1px solid var(--line-strong); position: relative; transition: background .2s var(--ease); } .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--text-2); transition: transform .2s var(--ease), background .2s var(--ease); } .sw.on { background: var(--accent); border-color: var(--accent); } .sw.on::after { transform: translateX(15px); background: var(--on-accent); } .panel-note { font-size: .78rem; color: var(--text-3); margin-top: 10px; } .scope { display: flex; flex-direction: column; } .scope-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); font-size: .85rem; } .scope-row b { font-weight: 600; } .scope-active { border-color: var(--accent-line); background: var(--accent-dim); } .sc-ico { width: 15px; height: 13px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .55; flex: none; } .scope-line { width: 2px; height: 16px; background: var(--line-strong); margin-left: 27px; } .tag { margin-left: auto; font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .tag-mute { background: var(--wash-07); color: var(--text-3); } .tag-accent { background: var(--accent); color: var(--on-accent); } /* ---------- pricing: early-access / free ---------- */ .free-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 52px; border: 1px solid var(--accent-line); border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(180deg, rgba(62,207,142,.07), var(--wash-008)); box-shadow: 0 0 80px -34px rgba(62,207,142,.6); } .free-main { padding: 40px 38px 42px; } .free-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); border: 1px solid var(--accent-line); background: var(--accent-dim); border-radius: 999px; padding: 5px 13px; margin-bottom: 20px; } .price-free { font-size: clamp(3rem, 6vw, 4rem); line-height: 1; } .price-free span { display: block; margin-top: 8px; font-size: .9rem; } .free-note { color: var(--text-2); font-size: .925rem; margin: 20px 0 28px; max-width: 42ch; } .free-list { display: grid; align-content: center; gap: 13px; padding: 40px 38px; border-left: 1px solid var(--line); background: var(--sunk); } .free-list li { position: relative; padding-left: 26px; font-size: .925rem; color: var(--text-2); } .free-list li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 5px; height: 10px; border: solid var(--accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } /* ---------- pricing tiers (unused while pricing is masked) ---------- */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; align-items: start; } .tier { position: relative; padding: 30px 26px 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg); } .tier-pop { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(62,207,142,.07), var(--wash-008)); box-shadow: 0 0 60px -28px rgba(62,207,142,.55); } .tier-badge { position: absolute; top: -11px; left: 26px; font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 4px 11px; border-radius: 999px; } .tier h3 { font-size: .95rem; color: var(--text-2); font-weight: 500; } .price { font-family: var(--serif); font-size: 2.5rem; line-height: 1.2; margin: 8px 0 2px; } .price span { font-family: var(--sans); font-size: .82rem; color: var(--text-3); } .tier-sub { font-size: .84rem; color: var(--text-3); margin-bottom: 22px; } .tier ul { display: grid; gap: 10px; margin-bottom: 26px; } .tier li { position: relative; padding-left: 22px; font-size: .875rem; color: var(--text-2); } .tier li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 5px; height: 9px; border: solid var(--accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } /* ---------- quotes ---------- */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; } /* two-up variant: each card takes half the full container width, so dropping from three quotes to two leaves no dead space on the right */ .quotes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quote { padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg); margin: 0; } .quote blockquote { font-family: var(--serif); font-size: 1.22rem; line-height: 1.42; margin: 0 0 22px; } .quote figcaption { display: flex; flex-direction: column; gap: 2px; } .quote figcaption b { font-size: .875rem; font-weight: 600; } .quote figcaption span { font-size: .78rem; color: var(--text-3); } /* ---------- faq ---------- */ .faq { margin-top: 44px; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-size: 1.02rem; position: relative; transition: color .18s var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent-ink); } .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border: solid var(--text-3); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); transition: transform .22s var(--ease), border-color .22s var(--ease); } .faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); border-color: var(--accent); } .faq p { color: var(--text-2); padding-bottom: 24px; max-width: 68ch; font-size: .95rem; } /* ---------- cta band ---------- */ .cta-band { position: relative; padding: 110px 0 120px; border-top: 1px solid var(--line); overflow: hidden; text-align: center; } .cta-glow { position: absolute; bottom: -260px; left: 50%; transform: translateX(-50%); width: min(900px, 120vw); height: 520px; background: radial-gradient(ellipse at center, rgba(62,207,142,.2) 0%, transparent 66%); filter: blur(30px); pointer-events: none; } .cta-inner { display: flex; flex-direction: column; align-items: center; } .cta-band h2 { max-width: 18ch; } .cta-band h2 em { display: inline; } .cta-band > .container > p { color: var(--text-2); margin-top: 16px; max-width: 52ch; } /* ---------- how to install ---------- Two across, two down. Steps 1, 2 and 4 are short; step 3 carries the command and is given the full width beneath them, which also makes the one people get stuck on the most prominent thing in the section. */ .install-steps { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .istep { position: relative; min-width: 0; padding: 26px 26px 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--wash-03), var(--wash-008)); transition: border-color .25s var(--ease), transform .25s var(--ease); } .istep:hover { border-color: var(--line-strong); transform: translateY(-2px); } /* the last step would otherwise sit half-width with dead space beside it */ .install-steps .istep:last-child { grid-column: 1 / -1; } /* the quarantine step spans the row and is visually marked */ .istep-key { grid-column: 1 / -1; border-color: var(--accent-line); background: linear-gradient(180deg, rgba(62,207,142,.07), var(--wash-008)); box-shadow: 0 0 60px -34px rgba(62,207,142,.7); } .istep-n { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--wash-07); border: 1px solid var(--line-strong); color: var(--text-2); font-family: var(--mono); font-size: .78rem; font-weight: 500; margin-bottom: 16px; } .istep-key .istep-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; } /* same min-width:auto trap as .dl-steps, the content column holds a nowrap , which would otherwise widen the card instead of scrolling */ .istep > div { min-width: 0; } .istep h3 { margin-bottom: 7px; } .istep p { color: var(--text-2); font-size: .925rem; } .istep-note { margin-top: 12px; font-size: .82rem !important; color: var(--text-3) !important; } .mono-i { font-family: var(--mono); font-size: .88em; color: var(--text); } .copy-row { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; } .copy-row code { flex: 1; min-width: 0; font-family: var(--mono); font-size: .74rem; line-height: 1.55; color: var(--accent-ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; /* Wrap rather than scroll: this is a command people are asked to paste into Terminal, and a half-visible command reads as something to distrust. */ white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; } .copy-btn { flex: none; font-family: inherit; font-size: .78rem; font-weight: 500; color: var(--text); background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 14px; cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .copy-btn:hover { border-color: var(--text-3); background: var(--wash-04); } .copy-btn.copied { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-dim); } /* ---------- download modal ---------- */ .dl-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s var(--ease); overflow-y: auto; } .dl-overlay[hidden] { display: none; } .dl-overlay.open { opacity: 1; } .dl-modal { position: relative; width: 100%; max-width: 520px; padding: 30px 30px 26px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-1); box-shadow: 0 40px 90px -30px var(--shadow-deep); transform: translateY(10px) scale(.98); transition: transform .26s var(--spring); } .dl-overlay.open .dl-modal { transform: none; } .dl-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; transition: color .18s var(--ease), background .18s var(--ease); } .dl-close:hover { color: var(--text); background: var(--wash-06); } .dl-close svg { width: 17px; height: 17px; } .dl-head { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; padding-right: 30px; } .dl-head h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 3px; } .dl-head p { font-size: .82rem; color: var(--text-3); } .dl-spinner { width: 30px; height: 30px; flex: none; border: 2.5px solid var(--wash-12); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; } /* once the download has had time to begin, the spinner resolves to a tick */ .dl-overlay.done .dl-spinner { animation: none; border-color: transparent; background: var(--accent); position: relative; } .dl-overlay.done .dl-spinner::after { content: ""; position: absolute; left: 10px; top: 6px; width: 7px; height: 13px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .dl-fallback { font-size: .84rem; color: var(--text-2); } .dl-fallback a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } .dl-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; color: var(--text-3); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } .dl-divider::before, .dl-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .dl-steps { display: grid; gap: 14px; padding-left: 18px; } /* Grid items default to min-width:auto, so a nowrap inside refuses to shrink and pushes the row out past the modal. Let them shrink and scroll. */ .dl-steps li { font-size: .875rem; color: var(--text-2); min-width: 0; } .dl-steps li::marker { color: var(--accent-ink); font-weight: 600; } .dl-steps strong { color: var(--text); font-weight: 600; } .dl-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 26px; } .inline-link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--line); padding: 60px 0 30px; position: relative; z-index: 1; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 44px; } .footer-brand p { color: var(--text-3); font-size: .875rem; margin-top: 14px; max-width: 34ch; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col h4 { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; } .footer-col a { font-size: .875rem; color: var(--text-2); transition: color .18s var(--ease); } .footer-col a:hover { color: var(--accent-ink); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--text-3); } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease) var(--d, 0s), transform .6s var(--ease) var(--d, 0s); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1000px) { .bento, .cards-3, .steps, .tiers, .quotes { grid-template-columns: repeat(2, 1fr); } .b-lg, .b-wide { grid-column: span 2; grid-row: auto; } .split { grid-template-columns: 1fr; gap: 44px; } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } } @media (max-width: 860px) { /* stack the early-access card; the divider moves from side to top */ .free-card { grid-template-columns: 1fr; } .free-main { padding: 32px 26px 30px; } .free-list { border-left: 0; border-top: 1px solid var(--line); padding: 28px 26px; } } @media (max-width: 720px) { .section { padding: 78px 0; } .hero { padding-top: 140px; } .nav { padding: 9px 9px 9px 16px; } .nav-hide-sm { display: none; } .nav-toggle { display: grid; } .nav-links { position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--menu-bg); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; } .nav-links.open { opacity: 1; visibility: visible; transform: none; } .nav-links a { padding: 11px 12px; border-radius: 10px; } .nav-links a:hover { background: var(--wash-05); } .nav-link-cta { display: block; } .bento, .cards-3, .steps, .tiers, .quotes { grid-template-columns: 1fr; } .b-lg, .b-wide { grid-column: span 1; } .b-list { grid-template-columns: 1fr; } /* two across is far too cramped at phone widths */ .install-steps { grid-template-columns: 1fr; } .app-body { grid-template-columns: 1fr; } .app-side { display: none; } .app-grid { grid-template-columns: repeat(2, 1fr); } /* the toast spans the full width down here, so the last visible tag sits underneath it */ .app-grid .t5 .tile-tag { display: none; } .upload-toast { right: 12px; bottom: 12px; width: calc(100% - 24px); } .app-window { transform: none; } .footer-inner { grid-template-columns: 1fr; gap: 34px; } .footer-brand { grid-column: span 1; } /* Page CTAs stay full-width on mobile, they're the primary action. */ .hero-cta .btn { flex: 1 1 auto; } /* The nav collapses to just the wordmark and the menu toggle. With the buttons gone, push the toggle to the right edge itself. */ .nav-actions { margin-left: auto; } /* Download moves into the menu so the nav still offers it. */ .nav-link-cta { margin-top: 4px; text-align: center; background: var(--accent); color: var(--on-accent) !important; font-weight: 600; } .nav-link-cta:hover { background: var(--accent-hi) !important; } } @media (max-width: 540px) { /* Side by side the button is squeezed into a sliver next to a wrapped command; stacking gives both room. */ .copy-row { flex-direction: column; align-items: stretch; } .copy-btn { padding: 10px 14px; } .dl-modal { padding: 26px 22px 22px; } .dl-foot { flex-direction: column-reverse; } .dl-foot .btn { width: 100%; } } @media (max-width: 420px) { /* keep the four figures on one line even here; only the label wording wraps, which is what the balanced text-wrap above is for */ .strip-label { margin-bottom: 22px; } } /* ---------- motion / print ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } } /* ---------- admin login help (WhatsApp) ---------- Shown in the download modal and after the install steps. WhatsApp green is kept for the button only, so it reads as "this opens WhatsApp" without competing with the brand accent everywhere else. */ .login-help { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card-bg); } .login-help-ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #25d366; background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .3); } .login-help-ico svg { width: 19px; height: 19px; } .login-help-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .login-help-txt b { font-size: .95rem; font-weight: 600; color: var(--text); } .login-help-txt span { font-size: .85rem; color: var(--text-2); } .btn-wa { flex: none; background: #25d366; color: #062b16; font-weight: 600; } .btn-wa:hover { background: #3be07a; } .btn-wa svg { width: 16px; height: 16px; } /* inside the modal there's less room; the icon well goes */ .login-help-compact { margin: 18px 0 0; padding: 14px 14px 14px 16px; } .login-help-compact .login-help-ico { display: none; } @media (max-width: 540px) { .login-help { flex-wrap: wrap; } .login-help .btn-wa { width: 100%; } }