/* ============================================================================ notify-sim.io - marketing site. The palette, type roles and device frames are the console's design tokens (console/app/globals.css, from docs/design-brief.html). A separate identity for the site would be a second brand to keep in sync, and the product's own look - technical, dense, mono-voiced, with device-true screens - is the pitch. Layout spine: a 1px "wire" rail runs beside every section eyebrow, echoing the path a message takes through the sandbox. Hairlines separate sections; nothing is centered except the two moments that earn it. ========================================================================== */ /* ------------------------------------------------------------------ tokens */ :root { --bg: #f7f8fb; --panel: #ffffff; --panel-2: #eff2f8; --border: #dde3ee; --ink: #17203a; --muted: #5c6780; --faint: #8a94ad; --brand: #17a673; --brand-ink: #0e7a54; --brand-soft: #e2f5ec; --sms: #3d6fe8; --wa: #1fa463; --email: #c77414; --push: #7c5cd6; --sms-soft: #e8eefc; --wa-soft: #e3f4ea; --email-soft: #f9efe0; --push-soft: #f0eafa; --ok: #17a673; --bad: #cc4b3d; --bad-soft: #fbe9e6; --warn: #c77414; --warn-soft: #f9efe0; --screen: #0e1526; --screen-ink: #e8ecf6; --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace; --sans: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; --shadow: 0 1px 2px rgba(23, 32, 58, 0.06), 0 8px 24px rgba(23, 32, 58, 0.07); --shadow-lg: 0 10px 40px rgba(15, 23, 42, 0.16); --wide: 1460px; --gutter: clamp(20px, 4vw, 56px); --radius: 16px; --head-h: 62px; } @media (prefers-color-scheme: dark) { :root { --bg: #0d1220; --panel: #151c30; --panel-2: #1b2338; --border: #28324d; --ink: #e6eaf4; --muted: #a3adc7; --faint: #6d7893; --brand: #2cc38f; --brand-ink: #5adfae; --brand-soft: #143528; --sms: #7aa0f4; --wa: #4cc78c; --email: #e09a4a; --push: #a98ef0; --sms-soft: #1a2540; --wa-soft: #14301f; --email-soft: #33260f; --push-soft: #251b3d; --ok: #2cc38f; --bad: #e06a5c; --bad-soft: #3a1d18; --warn: #e09a4a; --warn-soft: #33260f; --screen: #060a14; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 44px rgba(0, 0, 0, 0.5); } } /* The toggle stamps data-theme on and must beat the media query both ways. */ :root[data-theme="dark"] { --bg: #0d1220; --panel: #151c30; --panel-2: #1b2338; --border: #28324d; --ink: #e6eaf4; --muted: #a3adc7; --faint: #6d7893; --brand: #2cc38f; --brand-ink: #5adfae; --brand-soft: #143528; --sms: #7aa0f4; --wa: #4cc78c; --email: #e09a4a; --push: #a98ef0; --sms-soft: #1a2540; --wa-soft: #14301f; --email-soft: #33260f; --push-soft: #251b3d; --ok: #2cc38f; --bad: #e06a5c; --bad-soft: #3a1d18; --warn: #e09a4a; --warn-soft: #33260f; --screen: #060a14; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 44px rgba(0, 0, 0, 0.5); } :root[data-theme="light"] { --bg: #f7f8fb; --panel: #ffffff; --panel-2: #eff2f8; --border: #dde3ee; --ink: #17203a; --muted: #5c6780; --faint: #8a94ad; --brand: #17a673; --brand-ink: #0e7a54; --brand-soft: #e2f5ec; --sms: #3d6fe8; --wa: #1fa463; --email: #c77414; --push: #7c5cd6; --sms-soft: #e8eefc; --wa-soft: #e3f4ea; --email-soft: #f9efe0; --push-soft: #f0eafa; --ok: #17a673; --bad: #cc4b3d; --bad-soft: #fbe9e6; --warn: #c77414; --warn-soft: #f9efe0; --screen: #0e1526; --shadow: 0 1px 2px rgba(23, 32, 58, 0.06), 0 8px 24px rgba(23, 32, 58, 0.07); --shadow-lg: 0 10px 40px rgba(15, 23, 42, 0.16); } /* ------------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The header is sticky, so an anchor jump must stop short of it or the heading it points at ends up behind the navigation. */ scroll-padding-top: calc(var(--head-h) + 16px); } :target { scroll-margin-top: calc(var(--head-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; } a { color: var(--brand-ink); text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--brand); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -0.02em; line-height: 1.12; font-weight: 800; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } code, pre, .mono { font-family: var(--mono); font-variant-ligatures: none; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 60; background: var(--panel); border: 1px solid var(--border); padding: 8px 12px; border-radius: 8px; } /* ------------------------------------------------------------------ layout */ .wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: clamp(64px, 6vw, 96px) 0; border-top: 1px solid var(--border); } /* The provider strip reads as a continuation of the hero, not a new section, so it loses both the rule and most of the leading space. */ .section--flush { border-top: 0; padding-top: 20px; } .section__head { display: grid; gap: 14px; max-width: 860px; margin-bottom: clamp(28px, 3vw, 44px); } .section__lead { color: var(--muted); font-size: 17px; max-width: 70ch; } /* The wire: a hairline that runs beside each eyebrow, like the path a captured message follows. Structural, not ornamental - it marks where a section begins. */ .eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand)); flex: none; } h2.h2 { font-size: clamp(27px, 3.4vw, 38px); } h3.h3 { font-size: 19px; letter-spacing: -0.015em; } .grid { display: grid; gap: 18px; } @media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 980px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } } /* ------------------------------------------------------------------- cards */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .card__title { display: flex; align-items: center; gap: 9px; font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; } .card p { color: var(--muted); font-size: 14.5px; margin-top: 8px; } .card--quiet { box-shadow: none; background: color-mix(in srgb, var(--panel) 60%, var(--bg)); } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; gap: 8px; padding: 11px 18px; border-radius: 11px; border: 1px solid transparent; font: inherit; font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--brand); color: #fff; } .btn--primary:hover { background: color-mix(in srgb, var(--brand) 86%, #000); } .btn--ghost { background: var(--panel); border-color: var(--border); color: var(--ink); } .btn--ghost:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); } .btn--sm { padding: 8px 13px; font-size: 13.5px; } /* ------------------------------------------------------------------- chips */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; } .chip--ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--brand-soft); color: var(--brand-ink); } .chip--bad { border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: var(--bad-soft); color: var(--bad); } .chip--warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); color: var(--warn); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Channel identity is data, not decoration: the same four hues encode channel here, in the console and in the inbox. */ .ci { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 800; } .ci--sms { background: var(--sms); } .ci--wa { background: var(--wa); } .ci--email { background: var(--email); } .ci--push { background: var(--push); } /* -------------------------------------------------------------------- code */ .code { background: var(--screen); color: var(--screen-ink); border: 1px solid color-mix(in srgb, var(--screen) 80%, var(--border)); border-radius: 13px; padding: 15px 16px; overflow-x: auto; font-family: var(--mono); font-size: 12.9px; line-height: 1.66; tab-size: 2; } .code pre { margin: 0; } .code .k { color: #7aa0f4; } .code .s { color: #7ddba8; } .code .c { color: #7f8aa6; } .code .n { color: #e0b072; } .code__bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--screen) 70%, var(--border)); font-family: var(--mono); font-size: 11.5px; color: #93a0bd; } .code--framed { padding: 0; } .code--framed pre { padding: 14px 16px; overflow-x: auto; } /* ------------------------------------------------------------------ header */ .site-head { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--border); } .site-head__in { display: flex; align-items: center; gap: 18px; height: var(--head-h); } .brand { display: inline-flex; align-items: center; white-space: nowrap; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: -0.025em; color: var(--ink); text-decoration: none; } .brand__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); flex: none; } .brand__pill { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 6px; padding: 2px 6px; } .nav { display: none; align-items: center; gap: 4px; margin-left: auto; } .nav a { white-space: nowrap; padding: 7px 10px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; } .nav a:hover { color: var(--ink); background: var(--panel-2); } .head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* The header has to fit a 360px phone. Under 700px the secondary action moves into the nav sheet, where there is room for it, and only the primary CTA stays visible; under 480px the wordmark drops its pill. Otherwise "Start free" runs off-screen. */ @media (max-width: 700px) { .head-actions .btn--ghost { display: none; } } @media (max-width: 480px) { .brand__pill { display: none; } .brand { font-size: 17px; } } .nav__signin { display: none; } .nav[data-open="true"] .nav__signin { display: block; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 12px; font-weight: 700; color: var(--brand-ink); } /* Below 900px the same links become a sheet under the header rather than a second navigation to maintain. */ .nav[data-open="true"] { display: grid; position: absolute; top: var(--head-h); left: 0; right: 0; margin: 0; padding: 10px var(--gutter) 16px; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .nav[data-open="true"] a { padding: 10px 8px; font-size: 15px; } @media (min-width: 1120px) { .nav, .nav[data-open="true"] { display: flex; position: static; padding: 0; background: none; border: 0; box-shadow: none; } /* Same specificity as the rule that shows it in the sheet, declared later: the desktop header already has its own Sign in button. */ .nav[data-open="true"] .nav__signin { display: none; } .head-actions { margin-left: 0; } .icon-btn[data-nav-toggle] { display: none; } } .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; padding: 0; } .icon-btn:hover { color: var(--ink); } .icon-btn svg { width: 16px; height: 16px; } /* ------------------------------------------------------- interior page hero */ /* Every page opens with the same band: where you are, what the page is for, and the one action it leads to. Shorter than the home hero, which is a pitch. */ .page-hero { padding: clamp(38px, 5vw, 62px) 0 clamp(30px, 4vw, 46px); border-bottom: 1px solid var(--border); background: radial-gradient(90% 130% at 88% -10%, var(--brand-soft), transparent 62%), var(--bg); } .page-hero h1 { font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -0.032em; max-width: 26ch; } .page-hero .lead { margin-top: 16px; font-size: clamp(16px, 1.4vw, 18.5px); color: var(--muted); max-width: 66ch; } .page-hero .hero__cta { margin-top: 22px; } /* Next-page pager: a marketing site people read in order, not a maze. */ .pager { display: grid; gap: 12px; margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid var(--border); } @media (min-width: 700px) { .pager { grid-template-columns: repeat(2, 1fr); } } .pager a { border: 1px solid var(--border); border-radius: 13px; background: var(--panel); padding: 15px 17px; text-decoration: none; color: var(--ink); display: grid; gap: 3px; } .pager a:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); } .pager span { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); } .pager b { font-size: 16px; letter-spacing: -0.015em; } .pager .fwd { text-align: right; } /* A tile that is also a link - used on the home page to open each deep-dive. */ a.card { text-decoration: none; color: var(--ink); display: block; transition: border-color 0.12s ease, transform 0.12s ease; } a.card:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); transform: translateY(-2px); } a.card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--brand-ink); } /* -------------------------------------------------------------------- hero */ .hero { padding: 54px 0 64px; } .hero__in { display: grid; gap: 40px; align-items: center; } @media (min-width: 1000px) { /* Fill the first screen: everything above the fold is the pitch, and the capture panel is the pitch. Bounded so a very tall window does not stretch it. */ .hero { display: grid; align-items: center; min-height: min(calc(100svh - var(--head-h)), 900px); padding: 40px 0; } .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(40px, 5vw, 84px); } } .hero h1 { font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -0.035em; max-width: 17ch; } .hero h1 em { font-style: normal; color: var(--brand-ink); } .hero__sub { margin-top: 20px; font-size: clamp(16.5px, 1.35vw, 19px); color: var(--muted); max-width: 52ch; } .hero__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .hero__note { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--faint); } .hero__swap { margin-top: 30px; border-left: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); padding-left: 15px; display: grid; gap: 4px; font-family: var(--mono); font-size: clamp(11px, 2.9vw, 12.6px); overflow-x: auto; } .hero__swap > div { white-space: nowrap; } .hero__swap .was { color: var(--faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 60%, transparent); } .hero__swap .now { color: var(--ink); font-weight: 700; } /* The capture panel: a request going in on the left, the device-true render it produces on the right. The pulse travels the same path a message does. */ .capture { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; } .capture__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 11.5px; color: var(--faint); } .capture__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--brand-ink); font-weight: 700; } .capture__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: pulse 2.1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 55% { opacity: 0.75; box-shadow: 0 0 0 5px transparent; } } .capture__body { display: grid; gap: 0; } @media (min-width: 560px) { .capture__body { grid-template-columns: minmax(0, 1fr) 218px; } } /* The payload has to be readable without a scrollbar at the width this panel gets, so the hero's copy of the code block runs slightly tighter than the body's. */ .capture .code { font-size: 12.2px; line-height: 1.62; } .capture .phone { width: 186px; } .capture__req { padding: 16px; border-bottom: 1px solid var(--border); min-width: 0; } @media (min-width: 560px) { .capture__req { border-bottom: 0; border-right: 1px solid var(--border); } } .capture__label { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; } .capture__out { padding: 16px; background: var(--panel-2); display: grid; place-items: center; } .wire { height: 2px; background: var(--border); position: relative; overflow: hidden; } .wire::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 34%; background: linear-gradient(90deg, transparent, var(--brand), transparent); animation: travel 3.4s linear infinite; } @keyframes travel { from { transform: translateX(-100%); } to { transform: translateX(340%); } } @media (prefers-reduced-motion: reduce) { .wire::after, .capture__live i { animation: none; } html { scroll-behavior: auto; } } /* ------------------------------------------------------- device previews */ .phone { width: 210px; border-radius: 34px; padding: 8px; background: linear-gradient(170deg, #2b3450, #131a2c); box-shadow: var(--shadow-lg); } .phone__screen { position: relative; border-radius: 27px; overflow: hidden; background: #fff; /* A real handset, not a square: 9:19.5 is the modern full-screen ratio, and tying height to width means the frame stays a phone at every size it is used. */ aspect-ratio: 9 / 19.5; display: flex; flex-direction: column; } /* The pill at the top, and the home indicator at the bottom - the two details that make a rectangle read as a screen. */ .phone__notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 58px; height: 17px; border-radius: 10px; background: #131a2c; z-index: 3; } .phone__screen::after { content: ""; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 34%; height: 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.28); z-index: 3; pointer-events: none; } /* On the dark screens (push lock screen) the indicator has to invert. */ .phone__screen--dark::after { background: rgba(255, 255, 255, 0.5); } .status { display: flex; align-items: center; justify-content: space-between; padding: 5px 11px 3px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #1c2438; } .status--dark { color: #fff; } /* WhatsApp */ .wa-nav { background: #075e54; color: #fff; padding: 6px 11px 7px; display: flex; align-items: center; gap: 7px; } .wa-nav b { font-size: 11.5px; } .wa-nav span { font-size: 9px; opacity: 0.8; } .wa-avatar { width: 19px; height: 19px; border-radius: 50%; background: #cfd8d3; flex: none; } .wa-body { flex: 1; justify-content: flex-end; padding-bottom: 18px; background: #e6ddd4; background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px); background-size: 13px 13px; padding: 9px 8px; display: flex; flex-direction: column; gap: 6px; } .wa-bubble { max-width: 88%; background: #fff; border-radius: 8px; padding: 6px 8px 4px; font-size: 10.4px; line-height: 1.42; color: #1c2438; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); } .wa-bubble--out { align-self: flex-end; background: #dcf8c6; } .wa-meta { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 8px; color: #6b7a70; margin-top: 2px; } .wa-tick { color: #34b7f1; font-size: 9px; letter-spacing: -2px; } .wa-tpl { font-family: var(--mono); font-size: 7.6px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0e7a54; margin-bottom: 3px; } /* iMessage-style SMS */ .sms-nav { background: #f2f2f7; border-bottom: 1px solid #dcdce2; padding: 6px 11px 7px; text-align: center; color: #1c2438; } .sms-nav b { font-size: 11px; } .sms-body { flex: 1; background: #fff; padding: 12px 9px 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; } .sms-bubble { align-self: flex-start; max-width: 90%; background: #e9e9eb; color: #10131c; border-radius: 15px; padding: 7px 10px; font-size: 10.4px; line-height: 1.44; } .sms-stamp { align-self: center; font-size: 8.4px; color: #8a94ad; font-family: var(--mono); } /* Push lock screen */ .lock { flex: 1; background: linear-gradient(165deg, #253055, #101728 60%, #1b2340); padding: 10px; display: flex; flex-direction: column; align-items: center; } .lock__clock { color: #fff; font-size: 40px; font-weight: 300; letter-spacing: -0.02em; margin-top: 34px; line-height: 1; } .lock__date { color: rgba(255, 255, 255, 0.72); font-size: 10px; margin-bottom: 26px; } .notif { width: 100%; background: rgba(255, 255, 255, 0.17); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(7px); border-radius: 11px; padding: 7px 9px; color: #fff; } .notif b { font-size: 10px; display: block; } .notif p { font-size: 9.6px; color: rgba(255, 255, 255, 0.85); margin-top: 1px; line-height: 1.36; } .notif__app { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 7.6px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 3px; } /* Email reading pane */ .mail { flex: 1; background: #fff; display: flex; flex-direction: column; } /* A mobile mail app's top bar: back chevron and the account line. Traffic lights belong to a desktop window, and inside a phone they looked borrowed. */ .mail__chrome { display: flex; align-items: center; gap: 7px; padding: 9px 10px 8px; background: #f2f2f7; border-bottom: 1px solid #dcdce2; font-family: var(--mono); font-size: 8.4px; color: #5c6780; } .mail__chrome::before { content: "\2039"; font-family: var(--sans); font-size: 15px; line-height: 1; color: #3d6fe8; } .mail__body { flex: 1; } .mail__head { padding: 8px 10px 6px; border-bottom: 1px solid #eceef4; } .mail__subject { font-size: 10.6px; font-weight: 800; color: #10131c; } .mail__from { font-size: 8.8px; color: #5c6780; margin-top: 2px; } .mail__body { padding: 9px 10px; font-size: 9.6px; line-height: 1.5; color: #2a3348; } .mail__btn { display: inline-block; margin-top: 7px; background: #17a673; color: #fff; border-radius: 6px; padding: 4px 9px; font-size: 8.6px; font-weight: 700; } .mail__att { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 9px; border-top: 1px solid #eceef4; font-family: var(--mono); font-size: 8px; color: #5c6780; } .mail__att i { width: 14px; height: 16px; border-radius: 2px; background: #e4e7ef; border: 1px solid #d3d8e4; flex: none; } /* ------------------------------------------------------------ channel grid */ .chan { display: grid; gap: 18px; } @media (min-width: 720px) { .chan { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .chan { grid-template-columns: repeat(4, 1fr); } } .chan__card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .chan__card .phone { align-self: center; width: 100%; max-width: 208px; } .chan__meta { font-size: 13.6px; color: var(--muted); } .chan__prov { font-family: var(--mono); font-size: 11.2px; color: var(--faint); line-height: 1.55; } /* ------------------------------------------------------------------- steps */ .steps { display: grid; gap: 18px; counter-reset: step; } @media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { position: relative; padding-left: 46px; } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); color: var(--brand-ink); font-family: var(--mono); font-size: 13px; font-weight: 800; } .step h3 { font-size: 16.5px; font-weight: 800; } .step p { color: var(--muted); font-size: 14.5px; margin-top: 6px; } /* --------------------------------------------------------------- loop rail */ .loop { display: grid; gap: 12px; } @media (min-width: 900px) { .loop { grid-template-columns: repeat(4, 1fr); align-items: stretch; } } .loop__node { border: 1px solid var(--border); border-radius: 13px; background: var(--panel); padding: 14px; position: relative; } .loop__node h4 { font-size: 14px; display: flex; align-items: center; gap: 7px; } .loop__node p { color: var(--muted); font-size: 13.2px; margin-top: 6px; } .loop__node .mono { font-size: 11.4px; color: var(--faint); display: block; margin-top: 8px; word-break: break-word; } @media (min-width: 900px) { .loop__node:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -12px; width: 12px; height: 1px; background: color-mix(in srgb, var(--brand) 55%, var(--border)); } } /* -------------------------------------------------------------- compliance */ .dlt { display: grid; gap: 14px; } .dlt__row { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 13px 15px; display: grid; gap: 7px; } .dlt__row .body { font-family: var(--mono); font-size: 12.4px; line-height: 1.55; color: var(--ink); word-break: break-word; } .dlt__row .body mark { background: color-mix(in srgb, var(--bad) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; } .dlt__row .body ins { background: color-mix(in srgb, var(--ok) 20%, transparent); text-decoration: none; border-radius: 3px; padding: 0 2px; } /* ------------------------------------------------------------------- table */ .tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } td.num { font-variant-numeric: tabular-nums; font-family: var(--mono); } /* ----------------------------------------------------------------- pricing */ .plans { display: grid; gap: 16px; } @media (min-width: 700px) { .plans { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .plans { grid-template-columns: repeat(4, 1fr); } } .plan { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 20px; display: flex; flex-direction: column; gap: 13px; box-shadow: var(--shadow); } .plan--pick { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: var(--shadow), 0 0 0 3px var(--brand-soft); } .plan__name { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 800; } .plan__tag { font-family: var(--mono); font-size: 9.6px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-ink); background: var(--brand-soft); border-radius: 5px; padding: 2px 6px; } .plan__price { font-size: 31px; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1; } .plan__price small { font-size: 13px; font-weight: 600; color: var(--faint); letter-spacing: 0; } .plan ul { display: grid; gap: 7px; font-size: 13.8px; color: var(--muted); } .plan li { position: relative; padding-left: 15px; } .plan li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 70%, transparent); } .plan .btn { margin-top: auto; width: 100%; } .note { border: 1px dashed var(--border); border-radius: 13px; padding: 14px 16px; color: var(--muted); font-size: 14px; background: color-mix(in srgb, var(--panel) 55%, var(--bg)); } /* A dotted list for prose bullets. Deliberately not .plan's list: reusing that one made each a flex column of its own and the text stepped away from it. */ .bullets { display: grid; gap: 9px; margin-top: 14px; font-size: 14.6px; color: var(--muted); } .bullets li { position: relative; padding-left: 15px; } .bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 70%, transparent); } .bullets b { color: var(--ink); } /* --------------------------------------------------------------------- faq */ details.faq { border-bottom: 1px solid var(--border); padding: 15px 0; } details.faq summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; display: flex; gap: 12px; align-items: flex-start; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--faint); font-weight: 700; flex: none; } details.faq[open] summary::after { content: "\2212"; color: var(--brand); } details.faq p { color: var(--muted); font-size: 14.8px; margin-top: 9px; max-width: 74ch; } /* ---------------------------------------------------------------- big call */ .cta { border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: 22px; background: radial-gradient(120% 140% at 100% 0%, var(--brand-soft), transparent 60%), var(--panel); padding: 40px 28px; text-align: center; display: grid; gap: 16px; justify-items: center; box-shadow: var(--shadow); } .cta h2 { font-size: clamp(25px, 3.2vw, 34px); } .cta p { color: var(--muted); max-width: 56ch; } /* ------------------------------------------------------------------ footer */ .site-foot { border-top: 1px solid var(--border); padding: 40px 0 52px; color: var(--muted); font-size: 14px; } .foot-grid { display: grid; gap: 26px; } @media (min-width: 780px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .foot-grid h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-bottom: 11px; } .foot-grid ul { display: grid; gap: 8px; } .foot-grid a { color: var(--muted); text-decoration: none; } .foot-grid a:hover { color: var(--ink); text-decoration: underline; } .foot-legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 13px; color: var(--faint); } /* ------------------------------------------------------------------- forms */ .nsform { display: grid; gap: 14px; margin-top: 18px; max-width: 640px; } .nsform__row { display: grid; gap: 14px; } @media (min-width: 620px) { .nsform__row { grid-template-columns: 1fr 1fr; } } .nsform label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); } .nsform input, .nsform select, .nsform textarea { margin-top: 6px; } .nsform .opt { font-weight: 500; color: var(--faint); } .nsform input, .nsform select, .nsform textarea { font: inherit; font-size: 14.5px; font-weight: 400; color: var(--ink); background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; width: 100%; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .nsform textarea { resize: vertical; min-height: 110px; line-height: 1.55; } .nsform input:focus, .nsform select:focus, .nsform textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .nsform input[aria-invalid="true"], .nsform textarea[aria-invalid="true"] { border-color: var(--bad); } /* Off-screen rather than display:none - a bot reading the DOM fills it, a screen reader is told to ignore it, and a keyboard user never lands on it. */ .nsform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .nsform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .nsform__note { font-size: 13.5px; color: var(--muted); } .nsform__note[data-state="ok"] { color: var(--brand-ink); font-weight: 700; } .nsform__note[data-state="bad"] { color: var(--bad); font-weight: 700; } .nsform[data-busy="true"] { opacity: 0.65; pointer-events: none; } /* ------------------------------------------------------------ legal pages */ .doc { padding: 46px 0 70px; } /* The frame is .wrap for every page. What keeps a document readable is the measure of its text, set on the elements below, not a narrower page - which only made the document pages sit at a different width from the rest of the site. This element carries both classes, so restate the frame: a bare `max-width: none` here beats .wrap's cap on specificity ties and left document pages full-bleed, which is the very thing the line above says it is avoiding. */ .doc__in { max-width: var(--wide); } /* Document pages get the same shape as the console's docs page: a sticky section list beside the prose, built by site.js from the h2 ids, so the wide frame carries navigation instead of empty margin. Without JS the page is simply one column. */ @media (min-width: 1080px) { .doc__layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; align-items: start; } .doc__toc { position: sticky; top: calc(var(--head-h) + 24px); margin-bottom: 0; } } .doc__toc { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 15px 17px; margin-bottom: 26px; } nav.doc__toc h2 { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; max-width: none; } .doc__toc ul { display: grid; gap: 8px; } .doc__toc a { font-size: 13.5px; color: var(--muted); text-decoration: none; } .doc__toc a:hover { color: var(--ink); text-decoration: underline; } .doc h1, .doc h2, .doc h3, .doc p, .doc dl, .doc ul.bul, .doc .toc, .doc .note, .doc__lead, .doc__meta { max-width: 74ch; } .doc .nsform { max-width: 74ch; } .doc h1 { font-size: clamp(29px, 4vw, 40px); } .doc__meta { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: 12px; } /* Inside a card it is a caption, not a data readout. */ .card .doc__meta, .nsform .doc__meta { font-family: var(--sans); font-size: 13px; line-height: 1.55; } /* The sentence under a document title: prose, not small print. */ .doc__lead { margin-top: 14px; font-size: 17.5px; color: var(--muted); max-width: 68ch; } .doc h2 { font-size: 20px; margin-top: 34px; } .doc h3 { font-size: 16.5px; margin-top: 24px; } .doc p, .doc li { color: var(--muted); font-size: 15.6px; margin-top: 12px; max-width: 72ch; } .doc ul.bul { display: grid; gap: 8px; margin-top: 12px; } .doc ul.bul li { position: relative; padding-left: 16px; margin-top: 0; } .doc ul.bul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 70%, transparent); } .doc dl { margin: 14px 0 0; display: grid; gap: 10px; } .doc dt { font-weight: 700; font-size: 14.6px; } .doc dd { margin: 2px 0 0; color: var(--muted); font-size: 15px; } .doc .toc { margin-top: 22px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); padding: 15px 17px; } .doc .toc ul { display: grid; gap: 7px; margin-top: 9px; } .doc .toc a { font-size: 14px; }