/* ============================================================================ Marketing pages. Builds on /app/theme.css: same variables, same 4px radius, same blue accent, so the landing page and the product look like one thing. Nothing here redefines a theme variable. NOTE: this file is served with `Cache-Control: max-age=14400`, so the four pages link it as `site.css?v=N`. BUMP THAT N when you change anything here. Without it a returning visitor pairs fresh HTML with a four-hour-old stylesheet - which is how the promo bar first shipped as a wall of unstyled repeated text for anyone who had loaded the site that afternoon. ========================================================================== */ /* ---- nav ---- */ .nav { position: sticky; top: 0; z-index: 40; /* The vw term carries a negative intercept so the row tightens faster than the screen narrows: a plain 2.9vw still left the CTA 9px over the edge on a 320px phone. It still lands on exactly 14px by 480px. */ display: flex; align-items: center; gap: clamp(5px, calc(4.4vw - 7px), 14px); padding: 12px clamp(10px, 4.6vw, 22px); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* The logo PNG is a wordmark (845x257) and already says "United Breakers", so no text sits beside it. Height only; width follows the ratio. */ .nav .logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; } .nav .logo img { height: clamp(22px, 7.1vw, 34px); width: auto; display: block; } .nav .sp { flex: 1; } .nav a.link { color: var(--muted); text-decoration: none; font-size: clamp(12px, 2.9vw, 14px); font-weight: 500; white-space: nowrap; } .nav a.link:hover { color: var(--text); } .nav .btn { padding: 9px clamp(9px, 3.3vw, 16px); font-size: clamp(12px, 2.9vw, 14px); white-space: nowrap; } /* Below 720px the nav drops its secondary links. Pricing is NOT one of them: the landing page is 6,300px tall on a phone, so hiding it meant the only way to reach the plans was to scroll past everything. */ @media (max-width: 720px) { .nav a.link.hide-sm { display: none; } } /* The nav row is sized in vw, not stepped at a breakpoint, because the CTA does not fit a phone at full size and pushes the whole DOCUMENT wider than the viewport — the page then scrolls sideways and opens zoomed out. It was first fixed with a `@media (max-width: 400px)` block that tightened padding, gap, logo and button, which worked at 390 and created a cliff either side of it: 401-430px lost the tightening without gaining enough width to pay for it, so a Pixel (412) and a Pro Max (430) overflowed while an iPhone 13 (390) did not, and 320-360 was still too narrow even tightened. Every value below reaches its old desktop number by ~480px, so nothing above a phone moves. Landing is the page this bites, because it is the one that keeps "Pricing" visible below 720px (see the rule above) and so carries one more item than the others. Wrapping to two rows was rejected: a phone loses more to a two-line sticky header than to a few pixels of padding. */ /* ---- shared ---- */ .btn { display: inline-block; text-decoration: none; text-align: center; font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer; padding: 12px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); transition: filter .12s ease; } .btn:hover { filter: brightness(1.14); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.big { padding: 14px 26px; font-size: 16px; } .section { max-width: 1120px; margin: 0 auto; padding: 68px 22px; } .section.tight { padding-top: 34px; } .section h2 { font-size: clamp(24px, 3.2vw, 34px); margin: 0 0 10px; letter-spacing: -.4px; } .section .lede { color: var(--muted); font-size: 16px; margin: 0 0 32px; max-width: 62ch; } /* Long-form body copy inside a .section. Deliberately the same treatment as `.legal p` below rather than a new one: that is the established prose style in this stylesheet and it has already been contrast-checked in light mode (qa/light.js covers /privacy and /terms), so this block inherits that result instead of introducing an unchecked colour. */ .prose { max-width: 68ch; margin-top: 22px; } .prose p { color: var(--text); font-size: 15px; line-height: 1.68; margin: 0 0 16px; } .prose p:last-child { margin-bottom: 0; } .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 10px; } .divider { height: 1px; background: var(--border); max-width: 1120px; margin: 0 auto; } /* The one .section that is centred: heading and eyebrow over a centred column, but the paragraphs themselves stay left-aligned. Centring four paragraphs of body copy costs more in readability than the symmetry is worth, and .prose is shared with /pricing and /help, so this is scoped to the section rather than changed on the class. */ #what-is-a-break-overlay { text-align: center; } #what-is-a-break-overlay .prose { margin-left: auto; margin-right: auto; text-align: left; } /* ---- hero ---- */ .hero { max-width: 1120px; margin: 0 auto; padding: 66px 22px 30px; text-align: center; } .hero h1 { font-size: clamp(32px, 5.6vw, 56px); line-height: 1.05; letter-spacing: -1.4px; margin: 0 0 18px; font-weight: 800; } .hero h1 .acc { color: var(--accent-2); } .hero p.sub { font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 60ch; margin: 0 auto 26px; line-height: 1.55; } .hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero .reassure { margin-top: 14px; font-size: 13px; color: var(--muted); } /* ---- demo callout on the landing page ---- The board demo used to be embedded here as an iframe. It is gone: there is one demo now, the full one, and it is opened deliberately rather than competing with the hero for attention (and loading clips for people who scroll past). */ .demo-wrap { max-width: 1120px; margin: 0 auto; padding: 6px 22px 12px; } .demo-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 34px 34px; text-decoration: none; color: var(--text); transition: border-color .15s ease, transform .15s ease; } .demo-card:hover { border-color: var(--accent); transform: translateY(-2px); } .demo-card h2 { font-size: clamp(22px, 2.8vw, 30px); margin: 0 0 10px; letter-spacing: -.4px; } .demo-card p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 20px; } .demo-card .eyebrow { margin-bottom: 8px; } .demo-card-note { font-size: 13px; color: var(--muted); margin: 12px 0 0 !important; } /* The reveal loop: the first place on the site that shows anyone the product. Two videos, identical frame for frame, stacked - the theme only decides which one is opaque. See ui.js for why they also have to be kept in step. The box is var(--bg), NOT the card's var(--panel), and that is load bearing: the clips were captured against the page background, so the thin margin around the board is #141414 / #f4f4f6. On var(--panel) it would show as a rectangle (#1c1c1e dark, and glaringly on #ffffff light). Against var(--bg) it vanishes and the whole thing reads as an inset screen. The swap is instant rather than a crossfade: everything else on the page repaints instantly on a theme change, and a fading video box lags behind it. */ .demo-card-art { display: flex; justify-content: center; } .reveal-loop { position: relative; width: 100%; aspect-ratio: 1024 / 456; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .reveal-loop .rl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .rl-light { opacity: 0; } :root[data-theme="light"] .rl-light { opacity: 1; } :root[data-theme="light"] .rl-dark { opacity: 0; } /* Below 780px the card is one column and the reveal moves to the top of it. It leads rather than trails because it is the first thing on the site that shows what the product actually does - below the text it sat under a CTA most people tap before ever reaching it. Source order stays text-then-art, so the reading order is unchanged and only the visual order flips. The 560px cap is about source resolution, not layout: the files are 1024px wide, and without a cap the video renders at 750px right at this breakpoint - the largest it appears anywhere on the site, and soft on a 2x tablet. Capped, the worst case is ~1.8x the rendered width. */ @media (max-width: 780px) { .demo-card { grid-template-columns: 1fr; text-align: center; padding: 26px 22px; gap: 20px; } .demo-card-art { order: -1; } .reveal-loop { max-width: 560px; margin: 0 auto; } } /* On a phone it goes further and becomes a media card: the reveal is the card's header image, flush to its edges, copy underneath. Full bleed is not decoration here - the wrap and card paddings were eating 80px of a 320px screen, a quarter of the display, and the board is 32 logos across. Pulling the art out to the card edges takes it from 238px wide to 290px. The card clips the corners (overflow: hidden), so the video does not need a radius of its own to sit inside the rounded card. */ @media (max-width: 560px) { .demo-wrap { padding: 6px 14px 12px; } .demo-card { padding: 0 18px 22px; gap: 18px; overflow: hidden; } .demo-card-art { margin: 0 -18px; } .reveal-loop { max-width: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; } } /* ---- how it works ---- */ .steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .step { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .step .n { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 13px; } .step h3 { margin: 0 0 7px; font-size: 17px; } .step p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; } /* ---- feature cards ---- */ .features { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); } .feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .feature h3 { margin: 0 0 7px; font-size: 17px; display: flex; align-items: center; gap: 9px; } .feature h3 .pill { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); border: 1px solid var(--accent-2); border-radius: 999px; padding: 2px 8px; } .feature p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; } /* ---- pricing ---- */ .toggle-wrap { display: flex; justify-content: center; margin-bottom: 28px; } .toggle { display: inline-flex; gap: 3px; padding: 3px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); } .toggle button { border: 0; background: transparent; color: var(--muted); padding: 8px 18px; font-size: 14px; font-weight: 600; border-radius: 3px; } .toggle button.on { background: var(--accent); color: #fff; } .toggle .save { font-size: 11px; opacity: .9; margin-left: 5px; } /* `align-items: stretch` (the default) is load-bearing, not incidental: the tiers have different feature-row counts, so with `start` each card sized to its own content and `.plan .btn { margin-top: auto }` below had no slack — Complete's "Get started" floated a row higher than the other two. */ .plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); align-items: stretch; } .plan { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 15px; position: relative; } .plan.featured { border-color: var(--accent); } .plan .badge { position: absolute; top: -10px; left: 24px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; } .plan h3 { margin: 0; font-size: 19px; } .plan .blurb { margin: -8px 0 0; color: var(--muted); font-size: 14px; } .plan .price { display: flex; align-items: baseline; gap: 6px; } .plan .price .amt { font-size: 36px; font-weight: 800; letter-spacing: -1.2px; } .plan .price .per { color: var(--muted); font-size: 14px; } .plan .annual-note { font-size: 13px; color: #10b981; margin: -10px 0 0; min-height: 18px; } /* Same story as .note.good in theme.css: this green is a dark-panel colour and drops to ~2.2:1 on the light theme's card. */ [data-theme="light"] .plan .annual-note { color: #047857; } .plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .plan li { font-size: 14.5px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; } .plan li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-2); } .plan li.off { color: var(--muted); } .plan li.off svg { color: var(--muted); opacity: .6; } .plan .btn { margin-top: auto; } /* Sits between the plan table and the fine print. The plans ask people to pick between features they have not seen; this is the one link that fixes that. */ .demo-nudge { text-align: center; font-size: 14.5px; margin: 26px auto 0; max-width: 60ch; color: var(--text); } .demo-nudge a { color: var(--accent-2); font-weight: 600; } .price-note { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 14px; } /* ---- faq ---- */ .faq { display: flex; flex-direction: column; gap: 10px; max-width: 800px; } .faq details { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 18px; } .faq summary { cursor: pointer; padding: 15px 0; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; align-items: center; gap: 10px; } /* Each question is an

inside its so the FAQ has a real heading structure. `font: inherit` is what keeps it pixel-identical: it takes the 600/15.5px from `.faq summary` above and drops the h3 UA margins. summary is display:flex, so the h3 simply replaces the anonymous text flex item and the `margin-left:auto` on ::after still pushes the +/- marker to the right edge. */ .faq summary h3 { margin: 0; font: inherit; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; margin-left: auto; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; } .faq details[open] summary::after { content: '\2212'; } .faq details p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; line-height: 1.6; } /* ---- final cta ---- */ .final { text-align: center; } .final h2 { margin-bottom: 12px; } .final .lede { margin: 0 auto 26px; } /* ---- footer ---- */ .foot { border-top: 1px solid var(--border); margin-top: 30px; padding: 30px 22px 40px; } .foot .inner { max-width: 1120px; margin: 0 auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); } .foot .inner .sp { flex: 1; } .foot a { color: var(--muted); text-decoration: none; } .foot a:hover { color: var(--text); text-decoration: underline; } /* ---- legal pages ---- */ .legal { max-width: 780px; margin: 0 auto; padding: 46px 22px 80px; } .legal h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.6px; } .legal .updated { color: var(--muted); font-size: 13.5px; margin: 0 0 32px; } .legal h2 { font-size: 19px; margin: 34px 0 10px; } .legal p, .legal li { color: var(--text); font-size: 15px; line-height: 1.68; } .legal ul { padding-left: 22px; } .legal li { margin-bottom: 7px; } .legal .callout { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 15px 18px; margin: 22px 0; } .legal .callout p { margin: 0; font-size: 14.5px; } /* ---- promo bar ---- A 28px ticker above the nav - deliberately half the nav's 58px, so it reads as a thin strip rather than a second header. It scrolls away with the page; the nav underneath is the sticky element and stays. Background is var(--bg) and the text var(--accent-2), so the bar follows the light/dark toggle like everything else instead of pinning one fixed blue. The spans ALTERNATE between the offer and the remaining-signups count, so the track reads A B A B ... with a dot between every one of them. It holds twelve spans (six A/B pairs) and translates by -50%, i.e. by six, so span 7 lands where span 1 started. Two constraints fix that number. The shift must be an EVEN number of spans or an A would land on a B and the seam would be obvious even though both are the same width apart. And the loop only holds while HALF the track is wider than the viewport, which six spans clear with room for an ultrawide monitor. The separator dot is on EVERY span including the last: the trailing gap is what makes each span's total width uniform, so it is load bearing rather than a stray margin. */ .promo-bar { height: 28px; background: var(--bg); color: var(--accent-2); border-bottom: 1px solid var(--border); overflow: hidden; /* The nav below is translucent with a backdrop blur; without its own stacking position this bar would be painted through it while scrolling past. */ position: relative; z-index: 41; } .promo-bar .track { height: 100%; display: flex; align-items: center; width: max-content; animation: promo-scroll 90s linear infinite; } .promo-bar span { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .07em; white-space: nowrap; } /* The dot carries the 280px gap in its own margins so it sits centred between two copies rather than tight against the end of one. It is decoration, not part of the sentence - the one span a screen reader can see must not have a bullet read after it, hence ::after rather than a character in the markup. */ .promo-bar span::after { content: ''; margin: 0 140px; } @keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Motion off: one centred copy rather than a track frozen mid-word. */ @media (prefers-reduced-motion: reduce) { .promo-bar .track { animation: none; width: 100%; justify-content: center; } .promo-bar span:not(:first-child) { display: none; } .promo-bar span::after { content: none; } } /* ---- help page ---- Reuses .legal's column and type. The additions are all for the step list: a numbered walkthrough where each step can carry a screenshot, and the numbers have to stay attached to their step when a step wraps to two lines. */ .legal .step-list { list-style: none; counter-reset: hs; padding: 0; margin: 22px 0 0; } .legal .step-list > li { counter-increment: hs; position: relative; padding: 0 0 26px 46px; margin-bottom: 26px; border-bottom: 1px solid var(--border); } .legal .step-list > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .legal .step-list > li::before { content: counter(hs); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; line-height: 30px; text-align: center; } .legal .step-list h3 { font-size: 16.5px; margin: 3px 0 8px; } .legal .step-list p { margin: 0 0 10px; } .legal .step-list p:last-child { margin-bottom: 0; } /* Screenshot slot. Keeps its box before the image lands so the page does not reflow when the real captures replace the placeholders. */ .legal .shot { display: block; width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); margin: 12px 0 4px; } .legal .shot-cap { font-size: 13px; color: var(--muted); margin: 0 0 4px; } /* Setup walkthrough. The explicit margin also kills the browser default 40px inline padding a bare
carries. The width/height on the