/* ========================================================================= ALS ========================================================================= Rules that run through the whole sheet: 1. Nothing is rounded, with one exception: the floating nav pill. The radius is zeroed on `*` in the reset and the pill puts it back for itself, so a radius anywhere else is a mistake, not a variation. 2. Marketing pages move one screen at a time on a desktop. CSS scroll snapping, not JavaScript, so it works before any script has loaded. It is opt-in per page with `class="snap"` on , because a legal page that moves a screen at a time is a legal page nobody finishes. 3. Legal and support pages opt out of that. They open on a full-viewport hero, then run as `.split` sections: the heading of each one held in a sticky column beside its detail, alternating sides down the page, so a reader hunting for a single clause can travel the headings and stop once. `.doc` is the older single-column treatment, kept for anything that is genuinely one continuous argument. 4. The palette is the app's, to the hex. ========================================================================= */ :root { --canvas: #ffffff; --surface: #f4f4f5; --line: #e4e4e7; --hairline: #f1f1f3; --ink: #09090b; --muted: #71717a; --faint: #a1a1aa; --primary: #007ffa; --night: #05100f; --nav-h: 56px; --nav-top: 18px; --gutter: clamp(20px, 5vw, 80px); --shell: 1240px; } *, *::before, *::after { box-sizing: border-box; border-radius: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :where(a, button, summary, input, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .shell { width: 100%; max-width: var(--shell); margin: 0 auto; } /* --- Skip link ---------------------------------------------------------- */ .skip { position: absolute; left: var(--gutter); top: -60px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--canvas); font-size: 14px; font-weight: 500; text-decoration: none; transition: top 0.15s ease; } .skip:focus { top: 12px; } /* --- The floating nav --------------------------------------------------- * * The one rounded thing on the site, and the one thing not attached to the * page. It floats over dark heroes and white sections alike, which is why it * is frosted rather than filled: a solid white bar would cut a hero image in * half, a solid dark one would vanish into it. */ .nav { position: fixed; top: var(--nav-top); left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 42px); height: var(--nav-h); padding: 0 clamp(22px, 4vw, 38px); border-radius: 999px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 8px 32px rgba(9, 9, 11, 0.14); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); } /* Without blur support this would be dark text on near-transparent white over a dark photograph. Fall back to something opaque enough to read. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav { background: rgba(255, 255, 255, 0.94); } } .nav__link { font-size: 14.5px; font-weight: 500; color: #3f3f46; text-decoration: none; white-space: nowrap; transition: color 0.15s ease; } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); } /* --- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn--primary { background: var(--primary); color: #ffffff; } .btn--primary:hover { background: #0069cf; } .btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--outline:hover { background: var(--ink); color: var(--canvas); } .btn--ghost { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.34); } .btn--ghost:hover { background: #ffffff; color: var(--ink); } .btn__arrow { transition: transform 0.15s ease; } .btn:hover .btn__arrow { transform: translateX(3px); } /* --- Store badges ------------------------------------------------------- * * The official artwork from Google and Apple, not a redrawing of it. Both * brand guidelines require their own badge and forbid rebuilding the logo, so * this is the one place on the site where the artwork is somebody else's and * cannot be altered. * * That makes it the second exception to "nothing is rounded". The corners are * baked into the bitmaps and may not be squared off, so there is no radius in * this stylesheet doing it, and nothing to remove. * * The two files are normalised to a common height of 160px and land within a * pixel of each other in width (539 and 538), because Apple ships its badge * inset in a large opaque square and Google ships its own edge to edge. They * are cropped to the button itself and the corners outside the rounded * rectangle are transparent, so both sit on the night ground without a black * card behind them. Regenerate both together if either is replaced, or they * will stop matching. */ .stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .stores--center { justify-content: center; } .badge { display: inline-flex; line-height: 0; text-decoration: none; transition: opacity 0.15s ease; } .badge img { height: clamp(44px, 4.2vw, 54px); width: auto; } .badge:hover { opacity: 0.84; } /* Apple's badge reads "Download on the App Store", which is not true yet, so it is dimmed, is not a link, and carries a line underneath saying so. The alt text says it too, because opacity is not information. */ .badge--soon { opacity: 0.38; pointer-events: none; } /* Full basis so it drops onto its own line, then it inherits the alignment of whatever section it is in: left in a hero, centred in a closer. */ .stores__note { flex-basis: 100%; margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); } /* --- Sections ----------------------------------------------------------- */ .section { padding: 96px var(--gutter) 80px; border-bottom: 1px solid var(--line); } .section--dark { background: var(--ink); color: #ffffff; border-bottom-color: var(--ink); } .section--surface { background: var(--surface); } .section__title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); } .section__lede { margin-top: 18px; max-width: 52ch; color: var(--muted); font-size: clamp(15px, 1.4vw, 17px); } .section--dark .section__lede { color: var(--faint); } /* * One screen at a time, on a desktop only. * * `scroll-snap-stop: always` is what makes it one at a time. Without it a * hard flick sails past two sections and lands on the third. It stays off * below 1024px: a phone has too little height for a full section to fit, and * mandatory snapping on a section taller than the viewport traps the reader * halfway down it. */ @media (min-width: 1024px) { html.snap { scroll-snap-type: y mandatory; } html.snap .section, html.snap .hero { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; } html.snap .section { padding-block: 104px 80px; } } /* --- Hero --------------------------------------------------------------- * * The landing image is the section, not a panel inside it. The scrim over it * is not decoration: white text on a photograph is unreadable the moment the * photograph changes, and this holds the contrast whatever image is dropped * in. */ .hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 148px var(--gutter) 104px; background-color: var(--night); color: #ffffff; text-align: left; overflow: hidden; } /* Inner pages get a shorter hero. It introduces the page rather than being the page, and a full screen of it would delay the thing you came for. * * It also drops the landing photograph. Repeating one image on every page * turns it into wallpaper, and a title set over flat ink is the quieter, * more legible thing anyway. */ .hero--page { min-height: 62vh; min-height: 62svh; padding: 168px var(--gutter) clamp(150px, 24vh, 250px); } .hero--page .hero__title { max-width: 22ch; } .hero--short { min-height: 0; padding: 164px var(--gutter) 92px; } /* --- The two-colour hero ----------------------------------------------- * * Every hero that is not the landing photograph is exactly two colours: the * night ground, and white. No gradient, no tint, no third value. What moves * is the boundary between them. * * The white mass is two wave tiles drawn as inline SVG data URIs on the * hero's own ::before and ::after, so it costs nothing in markup and there is * nothing to repeat across seven pages. They are both solid white, which is * the whole trick: two identical-coloured shapes sliding past each other at * different speeds and in opposite directions read as one mass whose * silhouette keeps changing, rather than as two waves. * * Each tile is 720px wide and the element is 720px wider than the hero, so a * translate of exactly one tile loops seamlessly at any viewport width. The * transform is the only thing animated, so it stays on the compositor. */ .hero--page, .hero--doc { background-color: var(--night); background-image: none; } .hero--page::before, .hero--page::after, .hero--doc::before, .hero--doc::after { content: ""; position: absolute; z-index: 0; inset: auto auto 0 0; width: calc(100% + 720px); background-repeat: repeat-x; background-position: left bottom; background-size: 720px 100%; will-change: transform; } /* The taller, slower one, and the one that sets the overall height of the mass. Drifts left. */ .hero--page::before, .hero--doc::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 300' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 100C90 160 270 160 360 100C450 40 630 40 720 100L720 300L0 300Z'/%3E%3C/svg%3E"); animation: swell-a 34s linear infinite; } /* The quicker one, drifting the other way, at twice the frequency and a little more amplitude. The frequencies have to differ: two waves of the same period just look like one thicker wave, and the taller of them hides the other at every point. At double frequency this one's crests rise above the first's and its troughs fall below them, so the union of the two is a silhouette that genuinely changes rather than a shape that slides. */ .hero--page::after, .hero--doc::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 300' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 105C45 180 135 180 180 105C225 30 315 30 360 105C405 180 495 180 540 105C585 30 675 30 720 105L720 300L0 300Z'/%3E%3C/svg%3E"); animation: swell-b 23s linear infinite; } .hero--doc::before, .hero--doc::after { height: clamp(150px, 30vh, 300px); } .hero--page::before, .hero--page::after { height: clamp(110px, 20vh, 200px); } @keyframes swell-a { to { transform: translateX(-720px); } } @keyframes swell-b { from { transform: translateX(-720px); } to { transform: translateX(0); } } /* The sitewide reduced-motion block already flattens every duration, but say it outright here: the hero should be a still two-colour composition, not a frozen frame of a fast one. */ @media (prefers-reduced-motion: reduce) { .hero--page::before, .hero--page::after, .hero--doc::before, .hero--doc::after { animation: none !important; } } .hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--shell); margin: 0 auto; } /* Capped in characters rather than pixels, so the line breaks in the same place whatever the clamp has done to the type size. */ .hero__title { font-size: clamp(2.5rem, 6vw, 4.4rem); letter-spacing: -0.03em; max-width: 24ch; } .hero--page .hero__title, .hero--short .hero__title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); } .hero__lede { margin: 24px 0 0; max-width: 56ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.62; color: rgba(255, 255, 255, 0.78); } .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 40px; } /* The store pair is centred where it closes a page. In a hero it lines up with the title above it instead. */ .hero .stores--center { justify-content: flex-start; } /* --- Card grid ---------------------------------------------------------- * * The cards share their borders rather than each drawing its own: a 1px grid * gap over a line-coloured background means no doubled 2px seams where two * cards meet, which is what makes a square grid look sloppy. */ .grid { display: grid; gap: 1px; margin-top: 48px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 720px) { .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--canvas); padding: 30px 28px 34px; } .card__no { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--primary); } .card__title { margin-top: 16px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .card__body { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--muted); } /* --- Steps -------------------------------------------------------------- */ .steps { margin-top: 48px; border-top: 1px solid var(--line); } .step { display: grid; gap: 6px 32px; padding: 30px 0; border-bottom: 1px solid var(--line); } @media (min-width: 760px) { .step { grid-template-columns: 64px 1fr 1.25fr; align-items: start; } } .step__no { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--primary); padding-top: 4px; } .step__title { font-size: clamp(17px, 2vw, 20px); font-weight: 600; letter-spacing: -0.015em; } .step__body { color: var(--muted); font-size: 14.5px; line-height: 1.7; } /* --- FAQ ---------------------------------------------------------------- * *
, not a JavaScript accordion. They open with the script blocked, * they are keyboard operable for free, and in most browsers Ctrl+F finds text * inside a closed one, which is what someone hunting for "refund" is doing. * The script adds only the one behaviour CSS cannot: closing the others. */ .faq { margin-top: 40px; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 4px; font-size: clamp(15px, 1.5vw, 16.5px); font-weight: 600; letter-spacing: -0.01em; cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__sign { flex: none; position: relative; width: 18px; height: 18px; color: var(--primary); } .faq__sign::before, .faq__sign::after { content: ""; position: absolute; background: currentColor; transition: transform 0.18s ease, opacity 0.18s ease; } .faq__sign::before { top: 8px; left: 0; width: 18px; height: 2px; } .faq__sign::after { top: 0; left: 8px; width: 2px; height: 18px; } .faq__item[open] .faq__sign::after { transform: rotate(90deg); opacity: 0; } .faq__a { padding: 0 4px 26px; max-width: 70ch; color: var(--muted); font-size: 14.5px; line-height: 1.72; } .faq__a a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .faq__group + .faq__group { margin-top: 60px; } .faq__groupname { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* --- Pricing ------------------------------------------------------------ * * The plans do not sit in the shared 1px grid. They are the thing being sold, * so each is its own object with its own border, and the recommended one is * lifted rather than merely tinted: at three abreast, colour alone reads as * decoration and does not tell anyone which to pick. */ .plans { display: grid; gap: 20px; margin-top: 52px; align-items: start; } @media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .plan { position: relative; display: flex; flex-direction: column; background: var(--canvas); border: 1px solid var(--line); padding: 38px 32px 34px; } .plan--featured { background: var(--ink); border-color: var(--ink); color: #ffffff; box-shadow: 0 24px 60px rgba(9, 9, 11, 0.18); } @media (min-width: 900px) { .plan--featured { margin-top: -18px; padding-block: 52px 40px; } } .plan__flag { position: absolute; top: 0; right: 0; padding: 8px 14px; background: var(--primary); color: #ffffff; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .plan__name { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; } .plan__tagline { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--muted); } @media (min-width: 900px) { .plan__tagline { min-height: 3em; } } .plan--featured .plan__tagline { color: var(--faint); } .plan__price { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; } .plan--featured .plan__price { border-top-color: rgba(255, 255, 255, 0.16); } .plan__currency { font-size: 15px; font-weight: 600; color: var(--muted); } .plan--featured .plan__currency { color: var(--faint); } .plan__amount { font-size: clamp(38px, 4vw, 46px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .plan__period { font-size: 13.5px; color: var(--muted); } .plan--featured .plan__period { color: var(--faint); } .plan__each { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--primary); } .plan__features { margin-top: 28px; display: grid; font-size: 14px; line-height: 1.55; } .plan__features li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); color: var(--muted); } .plan--featured .plan__features li { color: rgba(255, 255, 255, 0.74); border-bottom-color: rgba(255, 255, 255, 0.1); } .plan__features li:last-child { border-bottom: 0; } .plan__features svg { margin-top: 3px; color: var(--primary); } .plan__foot { margin-top: auto; padding-top: 32px; } .plan__foot .btn { width: 100%; justify-content: center; } .pricing__note { margin-top: 32px; font-size: 13px; color: var(--faint); max-width: 66ch; } .pricing__note a { color: var(--primary); } /* --- Comparison table --------------------------------------------------- */ .compare { margin-top: 44px; overflow-x: auto; border: 1px solid var(--line); } .compare table { min-width: 680px; } .compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; } .compare .is-best { color: var(--ink); font-weight: 600; } /* --- Closing section ---------------------------------------------------- */ .closer { text-align: center; width: 100%; } .closer__title { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; margin: 0 auto; } .closer__lede { margin: 20px auto 0; max-width: 50ch; color: var(--faint); font-size: clamp(15px, 1.4vw, 17px); } .closer__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 38px; } /* * The last section on a snapped page carries the footer inside it rather than * after it. With mandatory snapping, anything following the final snap point * is a place the scroll keeps sliding off. */ .section--end { flex-direction: column; justify-content: center; } .section--end .footer { width: 100%; background: transparent; padding: 0; margin-top: clamp(56px, 8vh, 96px); } /* --- Footer ------------------------------------------------------------- */ .footer { background: var(--ink); color: #ffffff; padding: 64px var(--gutter) 56px; } .footer__inner { max-width: var(--shell); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; } .footer__brand { max-width: 34ch; } .footer__mark { font-size: 19px; font-weight: 700; letter-spacing: 0.02em; } .footer__mark sup { color: var(--primary); font-size: 0.62em; top: -0.5em; } .footer__blurb { margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--faint); } .footer__cols { display: flex; flex-wrap: wrap; gap: 40px 64px; } .footer__head { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin-bottom: 14px; } .footer__list { display: grid; gap: 10px; } .footer__list a { font-size: 14px; color: var(--faint); text-decoration: none; transition: color 0.15s ease; } .footer__list a:hover { color: #ffffff; } .footer__legal { max-width: var(--shell); margin: 48px auto 0; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12.5px; color: rgba(255, 255, 255, 0.42); } /* --- Documents: privacy, terms, account deletion ------------------------ * * One column, one left edge, one measure. These are read rather than * scanned, so they get none of the marketing pages' furniture: no snap, no * eyebrows, no grid. A rule above each heading is the only wayfinding a * twenty-screen document needs. */ .doc { max-width: 840px; margin: 0 auto; padding: 148px var(--gutter) 112px; } .doc__back { display: inline-block; margin-bottom: 40px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color 0.15s ease; } .doc__back:hover { color: var(--ink); } .doc__title { font-size: clamp(2.1rem, 4.4vw, 3rem); letter-spacing: -0.03em; } .doc__updated { margin-top: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.7; color: var(--faint); } .doc__lede { margin-top: 32px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7; color: var(--muted); } /* The rule sits above the heading, not under it, so the space belongs to the section starting rather than the one that just ended. */ .doc h2 { margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--line); font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; letter-spacing: -0.018em; } .doc h3 { margin-top: 34px; font-size: 15.5px; font-weight: 600; } .doc h2 + p, .doc h3 + p { margin-top: 14px; } .doc p { margin-top: 16px; line-height: 1.75; color: var(--muted); } .doc strong { color: var(--ink); font-weight: 600; } .doc a:not(.doc__back):not(.btn) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .doc code { font-size: 0.92em; background: var(--surface); padding: 2px 6px; color: var(--ink); } .doc__list, .list { margin-top: 18px; display: grid; gap: 11px; } .doc__list li, .list li { position: relative; padding-left: 22px; line-height: 1.72; color: var(--muted); } .doc__list li::before, .list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; background: var(--faint); } /* The numbers are drawn by the counter rather than the list marker, so they take the accent colour. They are positioned, not placed in a grid column: a grid list item makes a separate cell of every inline run inside it, which throws a mid-sentence onto its own row. */ .doc__steps, .steps-list { margin-top: 20px; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; } .doc__steps li, .steps-list li { counter-increment: step; position: relative; padding-left: 34px; line-height: 1.72; color: var(--muted); } .doc__steps li::before, .steps-list li::before { content: counter(step); position: absolute; left: 0; top: 3px; font-size: 12.5px; font-weight: 600; color: var(--primary); } .callout { margin-top: 26px; padding: 26px 28px; border: 1px solid var(--line); background: var(--surface); } .callout p:first-child { margin-top: 0; } /* --- Tables ------------------------------------------------------------- */ .table-wrap { margin-top: 22px; overflow-x: auto; border: 1px solid var(--line); } table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; } th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6; } th { font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--surface); } td { color: var(--muted); } td:first-child { color: var(--ink); font-weight: 500; } tr:last-child td { border-bottom: 0; } /* --- Contact routes (support page) -------------------------------------- */ .routes { display: grid; gap: 1px; margin-top: 44px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 760px) { .routes { grid-template-columns: repeat(3, 1fr); } } .route { background: var(--canvas); padding: 30px 28px 32px; } .route__head { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); } .route__title { margin-top: 14px; font-size: 17px; font-weight: 600; } .route__body { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--muted); } .route__link { display: inline-block; margin-top: 18px; font-size: 14.5px; font-weight: 500; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } /* --- Document hero ------------------------------------------------------ * * Legal and support pages get a hero that fills the viewport, the same as a * marketing page, and then hand over to the split sections below. The page * opens with one idea rather than a wall: a title, a line saying what the * document is for, when it was last touched, and a cue that there is more * below the fold. * * These pages do NOT get scroll snapping (no `class="snap"` on ). The * hero is a full screen you scroll past once; the detail underneath scrolls * freely, because a document that moves one screen at a time is a document * nobody finishes. */ /* The title clears the white mass by sitting in the upper part of the screen, the way it does in a two-tone poster. The bottom padding is the swell's own height plus room to breathe, so the two never touch however tall the type clamps to. */ .hero--doc { min-height: 100vh; min-height: 100svh; padding: 152px var(--gutter) clamp(190px, 34vh, 360px); align-items: center; } .hero--doc .hero__title { font-size: clamp(2.4rem, 5.4vw, 4rem); max-width: 18ch; } /* --- Split sections ----------------------------------------------------- * * The body of every document page: one idea per section, its heading held in * one column and its detail in the other, alternating sides down the page. * * Why two columns rather than one long measure. A legal page read top to * bottom in a single column gives you no sense of where you are or how much * is left. Here the left column is a standing summary of the section you are * in and the right is the binding detail, so somebody skimming for one clause * travels down the headings and stops once. * * The sides alternate because a page of identical rows reads as one object; * flipping each section makes the boundary between two of them visible * without drawing a rule. `order` does the flipping, so the DOM keeps * heading-then-detail on every section and a screen reader or a phone gets * them in that order regardless of which side they render on. */ .split { padding: clamp(64px, 8vw, 104px) var(--gutter); background: var(--canvas); } .split--alt { background: var(--surface); } .split--dark { background: var(--ink); color: #ffffff; } .split__inner { max-width: 1140px; margin: 0 auto; display: grid; gap: clamp(30px, 4vw, 56px); align-items: start; } @media (min-width: 900px) { .split__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .split--alt .split__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .split--alt .split__head { order: 2; } .split--alt .split__body { order: 1; } /* The heading column is shorter than its detail nearly every time, so it rides down with you rather than leaving half a screen of white opposite a long list. Offset by the floating nav so the two never collide. */ .split__head { position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 32px); } } .split__eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; } .split__title { font-size: clamp(1.6rem, 2.7vw, 2.25rem); font-weight: 700; letter-spacing: -0.028em; line-height: 1.14; } .split__tagline { margin-top: 16px; max-width: 44ch; color: var(--muted); font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.68; } .split__note { margin-top: 22px; font-size: 13.5px; line-height: 1.7; color: var(--faint); } .split a:not(.btn):not(.badge) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } /* Body blocks ----------------------------------------------------------- * * Four shapes, and no more. Each is bounded by hairlines so the detail column * reads as a table of statements rather than loose prose, which is what stops * a reader losing their place halfway down a long one. */ .rows { border-top: 1px solid var(--line); } .rows > li { padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.68; } .rows > li strong { font-weight: 600; } .split--alt .rows, .split--alt .rows > li, .split--alt .keyrows, .split--alt .keyrows > li, .split--alt .numsteps, .split--alt .numsteps > li, .split--alt .prose, .split--alt .table-wrap, .split--alt .callout { border-color: #dcdce0; } /* Label on the left, sentence on the right. The label is the thing being defined, so it takes the accent. */ .keyrows { border-top: 1px solid var(--line); } .keyrows > li { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; } @media (min-width: 620px) { .keyrows > li { grid-template-columns: 168px minmax(0, 1fr); gap: 24px; align-items: start; } } .keyrows__key { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); padding-top: 3px; } .keyrows__text { font-size: 14.5px; line-height: 1.68; color: var(--muted); } .keyrows__text strong { color: var(--ink); font-weight: 600; } /* A block of connected paragraphs, for the places a list would be a lie: a worked example, or a chain of reasoning that has to be read in order. */ .prose { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; } .prose p { margin-top: 15px; font-size: 15px; line-height: 1.72; color: var(--muted); } .prose p:first-child { margin-top: 0; } .prose strong { color: var(--ink); font-weight: 600; } /* Ordered, and it matters: these are steps somebody follows in sequence. */ .numsteps { border-top: 1px solid var(--line); } .numsteps > li { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px 22px; } @media (min-width: 620px) { .numsteps > li { grid-template-columns: 46px minmax(0, 1fr); align-items: start; } .numsteps__no { grid-row: span 2; } } .numsteps__no { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--primary); padding-top: 4px; } .numsteps__title { font-size: 16.5px; font-weight: 600; letter-spacing: -0.012em; } .numsteps__text { font-size: 14.5px; line-height: 1.68; color: var(--muted); } /* Tables, callouts and FAQ lists already exist for the old document layout. Inside a split column they only need their leading margin dropped, the grid gap supplies it. */ .split__body > :first-child, .split__body > .faq { margin-top: 0; } .split--alt .callout { background: var(--canvas); } .split--alt .table-wrap th { background: var(--canvas); } /* --- The closing section on a document page ----------------------------- * * One column, centred, and dark: the page has ended, and the only thing left * to say is who to write to. It carries the footer inside it the way the * marketing pages do, so the dark band is one block rather than two. */ .split--dark .split__inner { grid-template-columns: minmax(0, 1fr); max-width: 780px; text-align: center; } /* Centred, so the measure caps have to be centred with it. Without the auto margins a 54ch tagline sits hard against the left of a 780px column and reads as a mistake rather than a choice. */ .split--dark .split__tagline, .split--dark .split__note { margin-left: auto; margin-right: auto; } .split--dark .split__head { position: static; } .split--dark .split__eyebrow { color: rgba(255, 255, 255, 0.5); } .split--dark .split__tagline { max-width: 54ch; color: var(--faint); } .split--dark a:not(.btn):not(.badge) { color: #ffffff; } .contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 44px; margin-top: 34px; font-size: 14.5px; color: var(--faint); } .contacts strong { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin-bottom: 7px; } .split--dark .stores { justify-content: center; margin-top: 34px; } /* The version stamp at the foot of a legal page. It used to sit under the title, where it competed with it; down here it is the last thing you read, which is where a "last updated" line actually belongs. It stays on the page because a policy with no effective date is not much of a policy, and the package name is what a Play reviewer checks this page for. */ .split__note--stamp { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); max-width: 60ch; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); } .split--dark .split__note--stamp strong { color: rgba(255, 255, 255, 0.8); font-weight: 600; } .split--dark .split__note--stamp code { font-size: 0.94em; padding: 2px 6px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); } /* --- The home hero ------------------------------------------------------ * * Same two colours as every other hero, a different mechanism. The document * pages carry a wave that drifts along the bottom edge; the landing page * carries a single sculptural mass anchored off the bottom-right corner that * turns rather than travels. * * It is the same union trick underneath: two solid white organic forms, one * turning clockwise, one anticlockwise, at different sizes and speeds. Their * union is one mass whose profile never repeats, and because both are the * same white there is no seam to give the two shapes away. * * The forms are not circles, and that is the whole point. Rotating a circle * shows nothing. These are radial harmonics, so every degree of rotation * presents a different edge. */ .hero--home { background-color: var(--night); background-image: none; padding-bottom: clamp(104px, 18vh, 220px); } /* No photograph underneath, so no scrim over it. */ .hero--home::before, .hero--home::after { content: ""; position: absolute; z-index: 0; inset: auto 0 0 auto; width: var(--z); height: var(--z); background-repeat: no-repeat; background-position: center; background-size: contain; will-change: transform; } .hero--home::before { --z: 118vh; right: -62vh; bottom: -45vh; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%23ffffff' d='M461.6 250C452.2 279.8 425.5 304.2 407.5 325.8C389.5 347.5 373.2 363.7 353.6 379.9C333.9 396.1 313.5 415 289.5 423C265.5 431 235.1 432.7 209.4 427.9C183.7 423 158.8 409 135.2 394C111.6 378.9 86.4 361.6 68 337.6C49.6 313.7 27.1 280.3 24.9 250C22.7 219.7 35.3 178.4 55.1 156.1C74.8 133.8 116 123 143.3 116.2C170.7 109.4 195.6 119.1 219.3 115.4C243 111.7 258.3 99.5 285.6 94.1C312.9 88.7 353.3 74.3 383.1 83.1C412.8 91.9 450.9 119.1 464 146.9C477.1 174.7 471 220.2 461.6 250Z'/%3E%3C/svg%3E"); animation: turn-a 120s linear infinite; } .hero--home::after { --z: 90vh; right: -29vh; bottom: -49vh; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%23ffffff' d='M424.2 250C412.4 272.6 371 283.8 355.5 300.8C340 317.8 342.6 333 331.3 351.9C319.9 370.8 308.8 396.8 287.4 414C266.1 431.2 233 452.8 203.2 455.1C173.3 457.4 124.3 450.5 108.2 427.8C92.2 405.1 103.4 348.5 107 318.9C110.6 289.2 128.2 272.2 129.8 250C131.3 227.8 112.8 206.4 116.3 185.6C119.8 164.9 135.1 144.1 150.7 125.5C166.3 106.9 186.3 83.9 209.9 74.1C233.4 64.3 267.1 60.2 291.8 66.9C316.5 73.7 335.7 98 358.2 114.4C380.6 130.7 415.6 142.4 426.6 165C437.6 187.6 436.1 227.4 424.2 250Z'/%3E%3C/svg%3E"); animation: turn-b 88s linear infinite; } /* The headline is held to 15ch here rather than the 24ch every other hero uses. It has to clear the mass on the right, and a short headline stacked against a big form is the composition anyway. */ .hero--home .hero__title { max-width: 15ch; } /* Below 900px the mass drops to the bottom-right corner and the hero takes the bottom padding to clear it, the same arrangement the document pages use. Sized on the width, but capped against the height so a short phone does not get a form taller than its own hero. */ @media (max-width: 899px) { .hero--home { padding-bottom: 34vh; } .hero--home::before { --z: min(110vw, 52vh); right: -25vw; bottom: -45vw; } .hero--home::after { --z: min(85vw, 45vh); right: -10vw; bottom: -40vw; } } @keyframes turn-a { to { transform: rotate(360deg); } } @keyframes turn-b { to { transform: rotate(-360deg); } } @media (prefers-reduced-motion: reduce) { .hero--home::before, .hero--home::after { animation: none !important; } } /* --- The display face --------------------------------------------------- * * Jost, matched to the wordmark in `assets/als.png`: a light geometric sans * with a single-storey circular `a`, a bare `l` and an open `s`. The logo is * Century Gothic lineage and Jost is Futura lineage, so it is a touch * narrower than the drawn mark, but it is the closest cut with a Light weight * on Google Fonts, and a matching Light is what the wordmark needs. * * It is a DISPLAY face here, not the body face. Headings and the wordmark * take it; running text, tables and the legal pages stay on Plus Jakarta * Sans, which is the app's typeface and is drawn for small sizes. A light * geometric set at 14px over twenty screens of policy is a page nobody * finishes, and a site whose body text disagrees with the app looks like a * second product. */ :root { --display: "Jost", "Century Gothic", "Futura", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } h1, h2, h3, h4, .hero__title, .section__title, .split__title, .closer__title, .doc__title, .numsteps__title, .plan__name, .plan__amount { font-family: var(--display); font-weight: 500; letter-spacing: -0.012em; } /* Jost runs lighter and wider than Plus Jakarta Sans at the same nominal weight, so the big display sizes drop to 400 and lose most of the negative tracking that was there to tighten a much tighter typeface. */ .hero__title, .section__title, .closer__title, .doc__title, .plan__amount { font-weight: 400; letter-spacing: -0.015em; } .split__title { font-weight: 400; letter-spacing: -0.012em; } /* --- The wordmark ------------------------------------------------------- * * Always lowercase, and never spelled with capitals anywhere on the site: * the logo is `als`, the way `ebay` and `adidas` are set. The one thing that * can undo that is an uppercasing micro-label, so the wordmark is kept out of * `.split__eyebrow`, `.footer__head`, `.keyrows__key`, `th` and the rest of * the `text-transform: uppercase` set. If you write it into one of those, the * CSS will shout it back as ALS. */ .footer__mark { font-family: var(--display); font-size: 24px; font-weight: 300; letter-spacing: 0.06em; text-transform: lowercase; } .footer__mark sup { font-weight: 400; }