); a thing of no category keeps the neutral tile. A logo keeps its own colours on a neutral tile (BRANDS.md). Never a paragraph, a heading or a section's fill. ==== */ .mega-ico, .card-link .tile-ico, .get .tile-ico, .topic-icon { background: var(--cat-bg, var(--muted)); color: var(--cat-ink, var(--a-ink-2)); box-shadow: inset 0 0 0 1px var(--cat-edge, var(--border)); } /* the cards' and the benefits' icons stand on a 36 px tile (20 px icon), like the menu's 34 px one */ .card-link, .get { grid-template-columns: 36px minmax(0, 1fr); } .card-link .tile-ico, .get .tile-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; } /* a help topic: the same tile, 34 px, its 20 px icon (it was a 28 px icon in the mint, which is for the main action only) */ .topic-icon { display: grid; place-items: center; align-self: start; width: 34px; height: 34px; padding: 0; border-radius: 10px; } .topic-icon .ico { width: 20px; height: 20px; } /* what is not there yet stays quiet, whatever its group: the menu, the cards and the phone's menu sheet (review COL-5) */ .mega-item.is-soon .mega-ico, .card-link.is-soon .tile-ico, .acc-body .is-soon .mega-ico { background: var(--muted); color: var(--a-ink-3); box-shadow: inset 0 0 0 1px var(--border); } /* a step's icon takes its page's category; a step's number is neutral (the mint is not a decoration) */ .step h3 .icon { color: var(--cat-ink, var(--a-ink)); } .how-n, .step-n { background: var(--muted); color: var(--a-ink); box-shadow: inset 0 0 0 1px var(--border); } /* a channel's mark stands on the neutral tile everywhere (the home's map and the same cells on the alert-channels feature page): a logo in its own colour, a name without a logo with its own neutral glyph (decision 7, BRANDS.md), so the logos are the colour */ /* a logo in its own colour wherever it is clearly seen on its tile (2:1 or more), else its one-colour ink (BRANDS.md "Which version shows where"): on the night Discord's blurple, Telegram's blue and Zapier's orange read; Slack's aubergine, GitHub's near-black and Opsgenie's navy do not */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) use.logo-brand:is([href$="#discord"], [href$="#telegram"], [href$="#zapier"]) { display: inline; } :root:not([data-theme="light"]) use.logo-ink:is([href$="#discord-ink"], [href$="#telegram-ink"], [href$="#zapier-ink"]) { display: none; } } :root[data-theme="dark"] use.logo-brand:is([href$="#discord"], [href$="#telegram"], [href$="#zapier"]) { display: inline; } :root[data-theme="dark"] use.logo-ink:is([href$="#discord-ink"], [href$="#telegram-ink"], [href$="#zapier-ink"]) { display: none; } /* the hero's "New" tag is an announcement, not the main action: neutral, so the hero holds one lamp (Start free) and one lit phrase */ .hero-pill .pill-tag { background: var(--muted); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); } /* ==== premium direction, 2026-11-11 (the owner: "a little colour everywhere", "not framed well"; decisions 2, 3 and 8 of design-direction.md; audit J40, J41, J42): the site's part. The shared pieces are shared/css/v2/accents.css and glow.css. ==== */ /* ---- the network never runs through text (decision 8; J41, J42). The canvas is fixed behind every page (shared/css/network-bg.css: z-index -1 in the root). A block of text that stands on the bare ground gets a layer of its own between the canvas and its words: - below a page's first screen the layer is the ground's own colour with a soft edge, so the lines stop short of the words; - in a first screen (the home's hero, an inner page's head) the ground carries the glow and the grid, so there the layer blurs what is behind it instead of covering it; - the bar's blur is always there, so no line or dot crosses a label; over the home's first screen only its tint and its rule wait for the scroll; the footer stands on the ground's colour. These layers are the headed blocks' soft plates. The rule itself does not depend on this list: the network keeps clear of every run of text in

that has no surface behind it (shared/js/network-bg.js `clear`, which site.js passes), so a block that is not named here is clear too. Nothing here moves, and print draws none of it. ---- */ .landing .bar::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } :is(.sec-head, .sec-more, .chan-title, .chan-note, .ps-fine, .ps-note, .ps-more, .faq-side, .faq-list, .benefits, .hub-group > h2, .hero .lede, .page-head .lede, .page-head h1) { position: relative; } :is(.sec-head, .sec-more, .chan-title, .chan-note, .ps-fine, .ps-note, .ps-more, .faq-side, .faq-list, .benefits, .hub-group > h2)::before { content: ""; position: absolute; inset: -10px -18px; z-index: -1; border-radius: 22px; background: var(--background); box-shadow: 0 0 16px 10px var(--background); pointer-events: none; } :is(.hero .lede, .page-head .lede, .page-head h1)::before { content: ""; position: absolute; inset: -12px -20px; z-index: -1; border-radius: 26px; pointer-events: none; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); -webkit-mask-image: radial-gradient(ellipse closest-side, #000 72%, transparent); mask-image: radial-gradient(ellipse closest-side, #000 72%, transparent); } .foot { background: var(--background); } @media print { .landing .bar::after, :is(.sec-head, .sec-more, .chan-title, .chan-note, .ps-fine, .ps-note, .ps-more, .faq-side, .faq-list, .benefits, .hub-group > h2, .hero .lede, .page-head .lede, .page-head h1)::before { display: none; } } /* ---- accents: a card takes the accent of its subject (decision 2: emerald the brand and "up", indigo response time and performance, cyan the network, fuchsia security and change, amber attention; rose and red stay "down"). Where a card's accent comes from, nearest first: its own icon (the map below: an icon names a subject; pulse_saas/api/web_catalog.ICON_ACCENT is the same map and tests/test_site_colour_2026_11_11.py keeps the two equal), `data-accent` on it or on a parent (a feature page's

, the home's "Alerts go to"), else the emerald. One system per card: where a card has an accent its icon tile no longer reads its group's category (theme-a.css `.cat-*`, which the menu and the help topics keep). What reads the accent: the card's light (glow.css, by itself), its icon tile, a bare icon, a text link and the focus ring. An accent is never the only signal: the icon and the words say the same thing. ---- */ :is(.card-link, .get, .benefit, .step, .spec, .bento-cell, .link-tile, .how-steps li):has(use:is([href$="#i-pulse"], [href$="#i-heartbeat"], [href$="#i-status-pages"], [href$="#i-regions"], [href$="#i-clients"], [href$="#i-branding"], [href$="#i-beam"], [href$="#i-portfolio"])) { --acc: var(--acc-emerald); --acc-rgb: var(--acc-emerald-rgb); } :is(.card-link, .get, .benefit, .step, .spec, .bento-cell, .link-tile, .how-steps li):has(use:is([href$="#i-gauge"], [href$="#i-reports"], [href$="#i-server"], [href$="#i-chart"], [href$="#i-chart-column"], [href$="#i-timer"])) { --acc: var(--acc-indigo); --acc-rgb: var(--acc-indigo-rgb); } :is(.card-link, .get, .benefit, .step, .spec, .bento-cell, .link-tile, .how-steps li):has(use:is([href$="#i-dns"], [href$="#i-domain"], [href$="#i-certificate"], [href$="#i-api"], [href$="#i-api-keys"], [href$="#i-mcp"], [href$="#i-globe"], [href$="#i-code"], [href$="#i-link"])) { --acc: var(--acc-cyan); --acc-rgb: var(--acc-cyan-rgb); } :is(.card-link, .get, .benefit, .step, .spec, .bento-cell, .link-tile, .how-steps li):has(use:is([href$="#i-site-security"], [href$="#i-security"], [href$="#i-lock"], [href$="#i-why"], [href$="#i-history"], [href$="#i-sparkle"], [href$="#i-noindex"], [href$="#i-shield-check"])) { --acc: var(--acc-fuchsia); --acc-rgb: var(--acc-fuchsia-rgb); } :is(.card-link, .get, .benefit, .step, .spec, .bento-cell, .link-tile, .how-steps li):has(use:is([href$="#i-alerts"], [href$="#i-incident"], [href$="#i-maintenance"], [href$="#i-warning"], [href$="#i-siren"], [href$="#i-bell-ring"], [href$="#i-mail"], [href$="#i-chat"], [href$="#i-webhook"], [href$="#i-push"])) { --acc: var(--acc-amber); --acc-rgb: var(--acc-amber-rgb); } :is(.card-link:not(.is-soon), .get) .tile-ico { background: rgba(var(--acc-rgb, var(--acc-emerald-rgb)), 0.12); color: var(--acc, var(--acc-emerald)); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb, var(--acc-emerald-rgb)), 0.28); } .step h3 .icon, .benefit > .icon, .spec-mark .icon { color: var(--acc, var(--acc-emerald)); } .btn-link { color: var(--acc, var(--primary-ink)); } :where(main) :focus-visible:not(.btn) { outline-color: var(--acc, var(--ring)); } /* ---- the glow card on the site's older cards (decision 3). site.js marks them `.glow-fx`: the shared light on a card that keeps its own face and edge. Here they get the rest of the product's card: the faint grid that shows only near the pointer (the same four layers as `.glow::after` in glow.css; the disc that hides the grid away from the pointer is the card's own face, --glow-fx-face), and, when nothing may move, the accent on the edge instead of the light. A card whose face is a picture, glass or nothing keeps the light without the grid. ---- */ .glow-fx:not(.step, .fp-visual, .proof-card)::after { background: radial-gradient(380px circle at var(--glow-x) var(--glow-y), rgba(var(--acc-rgb, var(--acc-emerald-rgb)), var(--glow-spot)), transparent 65%), radial-gradient(220px circle at var(--glow-x) var(--glow-y), transparent, var(--glow-fx-face, var(--card)) 75%), linear-gradient(var(--glow-grid) 1px, transparent 1px), linear-gradient(90deg, var(--glow-grid) 1px, transparent 1px); background-size: auto, auto, 26px 26px, 26px 26px; } :is(.guide-card, .side-card, .card-link.is-soon, .vs-two > *).glow-fx { --glow-fx-face: var(--a-surface-2); } /* a comparison's two cards stand the competitor's first and ours second (web_content._two_cards and the pages written by hand). The emerald is the brand, so only our card lights in it; the competitor's lights in a quiet neutral, never our colour on their name */ .vs-two > :first-child { --acc-rgb: 113, 113, 122; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vs-two > :first-child { --acc-rgb: 150, 150, 158; } } :root[data-theme="dark"] .vs-two > :first-child { --acc-rgb: 150, 150, 158; } /* a step's card: the shared edge and, inside, its own softer spotlight (280 px, over its picture), placed like every card's light by --glow-x / --glow-y on the card under the pointer: one pointer system for the page (decision 3; it was a second listener that wrote the pointer's place on every frame). A step's ::after was the timeline's connector, so its box is set again here. */ .steps .step.glow-fx::after, .steps .step.glow-fx:not(:last-child)::after { display: block; inset: 0; width: auto; height: auto; z-index: -1; border-radius: inherit; background: radial-gradient(280px circle at var(--glow-x) var(--glow-y), rgba(var(--acc-rgb, var(--acc-emerald-rgb)), 0.14), transparent 70%); } @media (prefers-reduced-motion: reduce) { .glow-fx::before { display: block; opacity: 1; background: rgba(var(--acc-rgb, var(--acc-emerald-rgb)), var(--glow-still)); } } :root[data-motion="off"] .glow-fx::before { display: block; opacity: 1; background: rgba(var(--acc-rgb, var(--acc-emerald-rgb)), var(--glow-still)); } @media (forced-colors: active) { .glow-fx::before { display: none; } } @media print { .glow-fx::before { display: none; } } /* ---- the hero's announcement on a phone (J41: at 375 px it wrapped to two lines in a pill that ran from gutter to gutter). A smaller tag and tighter gaps under 481 px; under 372 px (360 px is the commonest Android width) also 12 px words and a tighter tag. The words are the page's own and are longer than a phone's line: measured in a browser on 2026-11-12 the one line is 483 px wide (435 px with the 12 px words, 475 px with the tighter tag), so with its two 16 px gutters it needs a 515 px screen. Under that a nowrap line ran past the pill and was cut at the screen's edge (360 and 375 px); there the words stand on two balanced lines in a rounded block, inside the gutters. ---- */ @media (max-width: 480px) { .hero-pill { gap: 8px; max-width: 100%; padding-right: 12px; } .hero-pill .pill-tag { height: 22px; padding: 0 8px; } .hero-pill > span:last-child { white-space: nowrap; } } @media (max-width: 371px) { .hero-pill { gap: 6px; padding-right: 10px; font-size: var(--a-t-2xs); } .hero-pill .pill-tag { padding: 0 6px; } } @media (max-width: 514px) { .hero-pill { border-radius: 18px; text-align: left; } .hero-pill > span:last-child { white-space: normal; text-wrap: balance; } } /* ==== THE BASE CONTROLS LAYER on the site (premium direction 2026-11-11, decision 12; saas/DESIGN.md "The base controls layer"). The site's own controls follow the SAME 21st.dev models as the app's (shared/css/v2/controls.css holds the list; licences and how each was read: saas/docs/design/21st-provenance.md; tests/test_base_controls_2026_11_11.py). Only the states and the look the model adds are here: each control keeps its size and place from the rules above. Controls the site does not have (radio, toggle, tooltip, toast, pagination, skeleton, progress, stepper) have no rule: the `.toast` and `.steps` above are pictures of the product, not controls. button .btn .btn-lamp .btn-ghost .btn-line .btn-sm .btn-lg originui "Button" text field .input .textarea, .help-form input and textarea originui "Input" select .select, .help-form select originui "Select (Native)" checkbox .check-row input coss.com "Checkbox" tabs .tabs .tab .tab-ink, .seg .seg-opt .seg-ink coss.com "Tabs" (the pill list) table .table-wrap table, .prose table, .help-prose table coss.com "Table" badge and chip .pill, .chip-row > * serafimcloud "Status Badge" dropdown menu .mega .mega-item, .menu-sheet coss.com "Menu" breadcrumb .crumbs coss.com "Breadcrumb" avatar .avatar originui "Avatar" Only transform and opacity move; a hover look only where a pointer hovers; the focus ring stays the site's one ring. ==== */ /* button: the model's fade when disabled (flat, the cursor says no), sat in when pressed; busy is not disabled */ .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .btn.is-busy, .btn[aria-busy="true"] { opacity: 1; cursor: progress; } .btn:is(.btn-lamp, .btn-ghost, .btn-line):active:not(:disabled):not([aria-disabled="true"]) { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); } @media (forced-colors: active) { .btn { border-color: ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; } } /* text field and select: the small lift, a firmer edge under the pointer, the edge in the ring's colour with the soft 3 px halo on focus, the fade when disabled, the red edge (and its halo on focus) when invalid */ .input, .select, .textarea, .help-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } @media (hover: hover) { :is(.input, .select, .textarea):hover:not(:disabled):not(:focus-visible) { border-color: color-mix(in srgb, var(--field-edge) 55%, var(--foreground)); } } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--ring); outline: 2px solid var(--ring); outline-offset: -1px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent); } :is(.input, .select, .textarea):disabled, .help-form :is(input, select, textarea):disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--fail); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } :is(.input, .select, .textarea)[aria-invalid="true"]:focus-visible { border-color: var(--fail); outline-color: var(--fail); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fail) 20%, transparent); } :is(.input, .select, .textarea)[aria-busy="true"] { cursor: progress; } .select, .help-form select { cursor: pointer; } /* checkbox: the model's box (a 4 px corner, the field's edge, the small lift), the emerald with its tick when checked */ .check-row input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; width: 20px; height: 20px; border: 1px solid var(--field-edge); border-radius: 5px; background: var(--field-bg); color: var(--primary-foreground); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; } .check-row input[type="checkbox"]::before { content: ""; width: 11px; height: 6px; margin-top: -2px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform var(--motion-fast) var(--motion-ease-out); } .check-row input[type="checkbox"]:checked { border-color: var(--primary-strong); background: var(--primary); box-shadow: none; } .check-row input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); } @media (hover: hover) { .check-row input[type="checkbox"]:hover:not(:disabled):not(:checked) { border-color: color-mix(in srgb, var(--field-edge) 55%, var(--foreground)); } } .check-row input[type="checkbox"]:active:not(:disabled) { transform: scale(0.92); } .check-row input[type="checkbox"]:disabled { opacity: 0.64; cursor: not-allowed; box-shadow: none; } .check-row input[type="checkbox"][aria-invalid="true"] { border-color: var(--fail); } @media (forced-colors: active) { .check-row input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; } .check-row input[type="checkbox"]::before { display: none; } } /* tabs: the model's pill list: the quiet words take the full ink under the pointer, a press dips, the 0.64 fade (the ring on focus is the site's own) */ @media (hover: hover) { :is(.tab:not([aria-selected="true"]), .seg-opt:not([aria-checked="true"])):hover:not(:disabled) { color: var(--foreground); } } :is(.tab, .seg-opt):active:not(:disabled) { transform: scale(0.97); } :is(.tab, .seg-opt):is(:disabled, [aria-disabled="true"]) { opacity: 0.64; cursor: not-allowed; } /* table: the model's row under the pointer (72 % of the quiet fill); the head and the hairlines are already its own */ @media (hover: hover) { :is(.table-wrap, .prose, .help-prose) tbody tr:hover > * { background: color-mix(in srgb, var(--muted) 72%, transparent); } } /* badge and chip: the model's hairline edge on the neutral ones (a filled state pill keeps its fill) */ .chip-row > *:not(.chip-team) { box-shadow: inset 0 0 0 1px var(--border); } /* dropdown menu: the model's highlighted item on the keyboard too, a press, the fade of an item that is not there yet */ a.mega-item:focus-visible { background: var(--hover); } a.mega-item:active { background: var(--hover); } .mega-item.is-soon { cursor: default; } /* breadcrumb: a step under the keyboard's focus takes the full ink, as under the pointer (the ring is the site's own) */ .crumbs a:focus-visible { color: var(--foreground); } /* avatar: the model's quiet fill behind a picture that has not arrived */ .avatar:not(.avatar-initials) { background: var(--muted); }