/* ==========================================================================
Tokens
One surface, no light variant. Every value is the landing page's own,
measured off the deployed preview. Surfaces are FLAT FILLS separated by
luminance — never by a hairline, never by a shadow.
========================================================================== */
:root {
/* Three roles, and nothing outside them.
WHITE is the major surface — the sheet the page is read on.
PURPLE #4f46c8 is the brand, spent on the hero, the footer and the chips.
BLACK/GREY are the accents — the chrome strip, the cards, the ink, the
closing band, the buttons.
Every value is still the landing's: #4f46c8 is the footer's last stop,
#1c1c1c is body, #121212 is --color-dark, #444444 is --color-text. */
/* Discord's construction, on our hue. Their body is #E0E3FF and their cards
are not a second colour at all — they are rgba(0,0,0,.10) composited over
that body, which is why the pair always agrees.
Same here: the sheet is a 96.5%-light tint of the brand (#E3E0FF, hue
244.2deg, taken off #4f46c8 rather than off their periwinkle),
and the card and its hover are that sheet stepped down 9% and 15% toward
black. Change the sheet and the cards follow it. */
/* White ground, grey cards carrying the landing's own amount of tint and no
more. The fills this went through before were derived off a lavender sheet
and came out 15-24 points bluer than they were red — greys that visibly
lean. R=G=B was the overcorrection: a dead-neutral grey sitting next to the
violet chips and the violet heading gets pushed yellow by simultaneous
contrast, which is what read as dingy. The landing's own card grey #242428
is not neutral either — it is OKLCH C=0.0074 at hue 286. These are that
same chroma and hue lifted to light lightness, so they carry exactly the
tint the landing already carries: 6 points, against the 15-24 that leaned. */
--sheet: #ffffff;
--card: #ededf3;
--card-hi: #e3e3e9;
--ink: #121212;
--body: #444444;
/* Neutral, not #4A4A54 — that was 10 points bluer than it was red, the same
purple lean as the old card fills. R=G=B here, so the only thing on the
page carrying a tint is the sheet. */
--muted: #4a4a4a;
--btn: #121212;
--btn-ink: #ffffff;
--btn-hi: #2e2e2e;
--plus: #7d64f5;
--card-w: var(--card);
--card-w-hi: var(--card-hi);
--ink-on-w: var(--ink);
--body-on-w: var(--body);
--muted-on-w: var(--muted);
--chrome: #1c1c1c; /* header strip, hero gutters, closing band */
/* One purple, and it is the footer's terminal stop. #3d22c4 (the landing's
safety panel) was a second, near-identical purple doing the same job on the
chips — two brand purples on one page is just an inconsistency. */
/* The sky's own colour. #7D64F5 is the first stop of the hero ramp — the
bloom in the top-left corner — so both em lines are now literally the
purple the page is painted with rather than two tuned approximations of it.
It clears large-text AA on both grounds: 4.36:1 against the sky behind the
hero line (#141325, sampled from the render) and 4.19:1 on the white sheet.
Both lines are 34px+ at weight 800, where the AA threshold is 3:1. */
--brand: #7d64f5;
--accent: #c4bdff;
/* --brand, stepped down until it clears 4.5:1 on the white sheet AND on the
grey card. Body-size links need the higher threshold the hero purple does
not have to meet. */
--brand-ink: #6e52e2;
--rail: 65rem;
--rail-wide: 1680px;
--rhythm: clamp(4rem, 7vw, 7rem);
--r-sm: 24px;
--r-md: 32px;
--r-lg: 44px;
}
@media (min-width: 1024px) {
:root {
--r-md: 36.8px;
--r-lg: 56px;
}
}
* {
box-sizing: border-box;
}
/* The UA sheet gives [hidden] display:none, but any author `display` beats it —
.arts is a grid and .kb-tile-prop is a block, so both stayed visible under
the routed view's hidden attribute until this landed. */
[hidden] {
display: none !important;
}
body {
margin: 0;
/* #1c1c1c, as the landing's body is: it paints the header strip and the
hero's gutters. The sky (#121312) belongs to .sheet. */
background: var(--chrome);
color: var(--body);
font-family: Heebo, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
overflow-x: hidden;
}
/* No -webkit-font-smoothing. The landing sets none anywhere in apps/web, so it
renders with the platform default; forcing `antialiased` drops the extra
coverage subpixel rendering gives, which thins white type on a dark ground.
Metrics are unaffected — every nav link measured the same width either way —
so the only symptom was the weight looking a step light. */
/* M PLUS Rounded 1c 800 — the face every landing heading is set in.
theme.json's Signika is stale; astro.config.mjs binds --font-secondary. */
h1,
h2,
h3,
h4 {
margin: 0;
/* 900, not 800. The landing's own big headings measure at 900 — the safety
title, the FAQ heading, the closing CTA — so this is both chunkier and the
more faithful value. Tracking tightens with the weight so the words set as
solid blocks rather than as spaced letters. */
font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Segoe UI', Arial, sans-serif;
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.03em;
text-wrap: balance;
}
a {
color: inherit;
text-decoration: none;
}
:where(a, button, input, summary):focus-visible {
outline: 3px solid #7d64f5;
outline-offset: 3px;
border-radius: 8px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Two rails, as on the landing: .container is 1680 and carries the header and
the footer; the panels inside the page are capped at 80rem. */
.container,
.container-wide {
width: 100%;
margin-inline: auto;
padding-inline: 1rem;
}
.container {
max-width: var(--rail);
}
.container-wide {
max-width: var(--rail-wide);
}
@media (min-width: 640px) {
.container,
.container-wide {
padding-inline: 1.5rem;
}
}
@media (min-width: 1024px) {
.container,
.container-wide {
padding-inline: 2rem;
}
}
/* --------------------------------------------------------------- header --- */
/* 26/18 around a 52px bar, which is how the landing's 96 is built — not a 96px
bar with the padding inside it.
The bar sits on the page ground, not over the band: on the landing the header
is a 96px strip of body #1c1c1c and the hero starts underneath it as an inset
card. Sticky rather than static, as the landing's is. */
.hdr {
position: sticky;
top: 0;
z-index: 30;
padding: 12px 0;
background-color: transparent;
/* Promote the bar to its own compositing layer. Safe here because nothing
inside it is position:fixed — a transform would otherwise make this the
containing block for any fixed descendant, which is the same trap the
landing's comment flags for putting the filter on the header itself. */
transform: translateZ(0);
}
@media (min-width: 1024px) {
.hdr {
padding: 26px 0 18px;
}
}
/* The glass is a pseudo-element, not the header itself — and it has to stay
that way. A filter on an element makes it the containing block for every
fixed descendant, so backdrop-filter on .hdr would break anything fixed
inside it the moment the bar scrolls.
backdrop-filter is in the transition alongside the colour, not just the
colour: switching the filter on instantly while the overlay is still fading
in leaves 200ms of saturate(180%) with nothing damping it, which reads as a
blue flicker on the first pixel of scroll. */
.hdr::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
/* Transparent at rest, as the landing's is — the #1c1c1c behind the bar is
body showing through, not a fill on the header. */
background-color: transparent;
/* The blur is ALWAYS on and never animates — only the tint fades. Animating
a filter meant the compositor rebuilt the blur every frame of the 0.2s
while the page was also moving, which is what tore as the bar crossed the
search field. Constant filter, so there is nothing to rebuild.
It costs nothing at rest: the bar sits over flat #1c1c1c up there, and
blurring a flat colour returns the same flat colour. */
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
transition: background-color 0.2s ease;
}
/* The landing's dark-theme value, verbatim. */
.hdr.is-scrolled::before {
background-color: rgba(28, 28, 28, 0.3);
}
/* .navbar is `flex flex-wrap items-center justify-between` with NO gap and no
auto margins anywhere. That distinction is the whole ball game: with a 24px
gap and `margin-inline: auto` on the menu, three auto margins competed for
the free space and the row landed 90px left of the real one. space-between
splits the free space into exactly two gaps, which is what puts the menu
where it belongs.
z-index 1 so the row sits above the glass behind it. */
.nav {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
min-height: 40px;
}
@media (min-width: 1024px) {
.nav {
min-height: 52px;
}
}
.brand {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
}
.brand img {
display: block;
width: 34px;
height: 34px;
}
.brand span {
font-family: 'Dela Gothic One', Impact, sans-serif;
font-size: 24px;
line-height: 1;
color: #fff;
}
@media (min-width: 1024px) {
.brand span {
font-size: 28px;
}
.brand img {
width: 36px;
height: 36px;
}
}
.nav-menu {
display: none;
align-items: center;
column-gap: 32px;
}
@media (min-width: 1080px) {
.nav-menu {
display: flex;
}
}
/* line-height 1.2, not the body's 1.6: 18px of Poppins plus 8px of padding a
side comes to 38 on the landing, and the inherited 1.6 made it 45. */
.nav-menu a {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.75rem;
color: #fff;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 18px;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition:
color 0.2s ease,
background-color 0.2s ease;
}
/* The current page gets the pill. Everything else gets an underline that grows
from the centre — hover does NOT tint the background, which is what I had it
doing. */
.nav-menu a[aria-current] {
background-color: rgba(255, 255, 255, 0.12);
}
.nav-menu a::after {
content: '';
position: absolute;
bottom: 0.35rem;
left: 50%;
height: 2px;
width: 0;
border-radius: 9999px;
background: currentColor;
transform: translateX(-50%);
transition: width 0.3s ease-out;
}
.nav-menu a[aria-current]::after {
display: none;
}
/* ---------------------------------------------- mobile nav (the landing's) -- */
/* Lifted from the landing's navigation.scss: a full-screen card in from the
right over a scrim, driven by a checkbox so it opens with no JavaScript. The
panel is sized in vw/dvh rather than with `inset`, because the header carries
a backdrop-filter once you scroll and a filtered ancestor becomes the
containing block for anything fixed inside it -- `bottom: 0` would resolve to
the bottom of the bar. */
#nav-toggle {
display: none;
}
.nav-burger {
display: none;
}
.nav-scrim {
display: none;
}
.nav-burger svg {
display: block;
width: 22px;
height: 22px;
}
/* Scoped to .nav-burger: a bare .burger-close loses to `.nav-burger svg` above,
and both icons stack in the button. */
.nav-burger .burger-close {
display: none;
}
@media (max-width: 1079.98px) {
.nav-burger {
order: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-left: 4px;
color: #fff;
cursor: pointer;
}
.mode-toggle {
order: 2;
}
.brand {
order: 0;
}
.nav-scrim {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 40;
width: 100vw;
height: 100dvh;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
cursor: pointer;
transition:
opacity 0.25s ease,
visibility 0.25s;
}
.nav-menu {
display: block;
position: fixed;
top: 0;
right: 0;
z-index: 41;
width: 100vw;
height: 100dvh;
padding: 6rem 1.5rem 2rem;
overflow-y: auto;
overscroll-behavior: contain;
text-align: left;
background: rgba(12, 12, 16, 0.92);
backdrop-filter: blur(22px) saturate(120%);
-webkit-backdrop-filter: blur(22px) saturate(120%);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
#nav-toggle:checked ~ .nav-scrim {
opacity: 1;
visibility: visible;
}
#nav-toggle:checked ~ .nav-menu {
transform: translateX(0);
}
/* The bar rides over the card: the button that opened the menu is the one
that closes it, so it and the logo stay above the panel. */
.nav-burger,
.brand,
.mode-toggle {
position: relative;
z-index: 42;
}
#nav-toggle:checked ~ .nav-burger .burger-open {
display: none;
}
#nav-toggle:checked ~ .nav-burger .burger-close {
display: block;
}
/* Bigger rows than the bar's links: this is the whole screen now. */
.nav-menu a {
display: block;
width: auto;
padding: 1.1rem 0.25rem;
border-radius: 0.65rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 1.4rem;
}
.nav-menu a::after {
display: none;
}
}
/* The page behind a fixed panel still scrolls under it otherwise. Outside the
media query on purpose: the class is only set while the card is open, and if
the viewport crosses 1080 with it stale the card is gone but the lock is not. */
html.nav-open {
overflow: hidden;
}
/* Guarded: on a touch screen the hover state latches on tap and stays until
you touch something else, which sweeps the underline out and leaves it. */
@media (hover: hover) {
.nav-menu a:hover {
color: #fff;
}
.nav-menu a:not([aria-current]):hover::after {
width: calc(100% - 1.5rem);
}
}
/* .chat-mode-toggle — h-[3.25rem] (52px), items-stretch, rounded-full,
overflow-hidden, dark:bg-white. Buttons are w-[4.25rem] (68px) with
dark:text-dark and dark:hover:bg-black/10 — a black wash, not a lavender
tint. The divider is w-px with my-3, so on a 52px pill it stands 28px. */
.mode-toggle {
display: inline-flex;
align-items: stretch;
flex-shrink: 0;
height: 3.25rem;
border-radius: 999px;
background: #fff;
overflow: hidden;
}
.mode-toggle a {
display: flex;
align-items: center;
justify-content: center;
width: 4.25rem;
color: #121212;
text-decoration: none;
transition: background-color 0.2s ease;
}
.mode-toggle a:hover {
background: rgba(0, 0, 0, 0.1);
}
.mode-toggle svg {
width: 26px;
height: 26px;
}
.mode-toggle i {
width: 1px;
flex-shrink: 0;
margin-block: 0.75rem;
background: rgba(0, 0, 0, 0.2);
}
/* .chat-mode-toggle--sm on a phone: 40 tall to match the menu button beside
it, 44px halves, divider my-2. Same control, not a second one. */
@media (max-width: 1023.98px) {
.mode-toggle {
height: 2.5rem;
}
.mode-toggle a {
width: 2.75rem;
}
.mode-toggle i {
margin-block: 0.5rem;
}
/* The phone lockup renders the icons at 20, not 26 */
.mode-toggle svg {
width: 20px;
height: 20px;
}
}
/* ----------------------------------------------------------------- band --- */
/* An inset card, not a full-bleed strip. Measured off the landing at 1440:
the hero sits at x=12 / right=1428 with `margin: 12px 12px 0` and
`border-radius: 36px 36px 0 0` — top corners only, because it runs flush
into the section below and there is no gutter down there for a bottom radius
to sit against. The 12px is --hero-inset (0.75rem); the 36px is
--hero-radius (2.25rem), which the landing only sets above 1024.
overflow:hidden here where the landing has visible — its artwork reaches
into the gutters on purpose, and this band has none, so clipping is what
keeps the blooms and the stars inside the rounded corners. */
.band {
position: relative;
isolation: isolate;
overflow: hidden;
/* Azar's hero is a 400px stage: one line of type, one search field, and
decorative marks pushed out to the edges. Ours is the same shape in the
landing's vocabulary — sparks and stars instead of their line-art. */
display: flex;
flex-direction: column;
justify-content: center;
min-height: 400px;
padding: clamp(3rem, 6vw, 4.5rem) 0;
/* The landing hero's ramp, stop for stop — the eased radial out of the
top-left corner. The stop positions are (i/n)^2.9, not even, so the bright
end is compressed into the first few percent and the last third of the
radius is spent arriving at the dark; an even ramp reaches the bottom too
deliberately and you can see where it decided to stop.
It is an opaque ramp rather than a translucent purple over a dark base for
a measured reason on the landing: source-over blending drags every mid-tone
toward the colour underneath and strips the chroma on the way down —
saturation fell 43% to 17% across the falloff. Opaque holds 75% to 42%. */
/* 182%, not the landing's 92%, and that is what makes it match rather than
merely share stops. Their radius resolves against a 792px hero: 0.92 x 792
= 729px. Ours is 400 tall, so 92% would be 368 — the entire falloff
crammed into half the distance, which is why it read as a black band with
a violet corner instead of a purple hero. 729/400 = 182% puts the ramp at
the same PHYSICAL size, so this is the landing's top 400px exactly.
Horizontal stays 110%: the hero is the same width. */
background: radial-gradient(
110% 182% at 0% 0%,
#7d64f5 0%,
#6a51e4 0.2%,
#5741cb 1.8%,
#4433a6 5.8%,
#33277c 13.4%,
#241c56 25.6%,
#191637 43.4%,
#141327 67.9%,
/* #1c1c1c, not the landing's #121312. Their final stop is --hero-base,
which IS the surface the hero flows into: page-sky is #121312, so the
ramp resolves into it and the corner has no edge. Ours flows into the
frame, which is #1c1c1c — copying their literal value left the hero's
dark corner 10 points darker than the gutter beside it, a faint light
seam tracing the bottom of the card. Porting the rule rather than the
number is what removes it. */ #1c1c1c 100%
);
text-align: center;
}
/* The 12px gutters beside the band are body showing through on the landing.
Body is white here, so a wrapper carries the chrome colour instead —
otherwise the dark surround that wraps the purple card disappears. It ends
at the band's bottom, where the white sheet takes over. */
/* One chrome frame around the whole column, not just the hero. The 12px
gutters carry on down the sides of the white sheet, so the page reads as a
purple-and-white card set into a black surround rather than as a hero with
a body under it.
flow-root, not a bare block: the band's 12px top margin would otherwise
collapse straight out through the frame and open a white line between the
header and the card. */
.frame {
display: flow-root;
background: var(--chrome);
}
/* Full bleed on a phone: main.scss drops --hero-inset to 0 below 1024, so
there is no gutter for a radius to sit against either. */
@media (min-width: 1024px) {
.band {
margin: 12px 12px 0;
border-radius: 36px 36px 0 0;
}
}
.stars {
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.75;
pointer-events: none;
}
/* The one box-shadow on the page, and it is not a shadow — it is the halo from
StarField.astro, without which a sub-pixel dot renders as a hard square. */
.stars span {
position: absolute;
border-radius: 999px;
box-shadow: 0 0 calc(var(--s) * 2) calc(var(--s) * 0.2) var(--c);
}
/* HeroMarks: two shapes, not eleven — a four-point spark and a tighter star,
near enough to read as one family. Positions are percentages of the hero, all
pushed clear of the centred column. */
.hero-marks {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.hero-marks svg {
position: absolute;
width: var(--sz);
height: var(--sz);
color: var(--c);
opacity: var(--o);
transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
.hero-marks .twinkle {
animation: mark-twinkle 4.5s ease-in-out infinite;
animation-delay: var(--d, 0s);
}
@keyframes mark-twinkle {
0%,
100% {
opacity: var(--o);
}
50% {
opacity: calc(var(--o) * 0.35);
}
}
/* width: fit-content, so the box shrinks to its widest child — which is the
headline. The search then takes width:100% and lands on exactly the
headline's measure, at every viewport, without a magic number tracking a
clamped font-size. Once the headline is wider than the rail, fit-content
resolves to the available width instead, the headline wraps, and the search
simply goes full width with it. */
.band-inner {
position: relative;
z-index: 1;
width: fit-content;
max-width: 100%;
margin-inline: auto;
}
.band h1 {
color: #fff;
font-size: clamp(2.5rem, 6vw, 3.75rem);
}
/* The landing's two-tone heading, which ships as
`Any questions? We got answers.` —
the question in white, the answer in the light accent. Same device here:
the second half is the reassurance, so it gets the colour. */
.band h1 em {
font-style: normal;
color: var(--accent);
}
.search {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
margin: clamp(1.5rem, 3vw, 2rem) 0 0;
padding: 5px 5px 5px 1.4rem;
min-height: 62px;
border-radius: 16px;
background: #fff;
}
.search > svg {
width: 21px;
height: 21px;
color: #8a8a8a;
flex-shrink: 0;
}
.search input {
flex: 1;
min-width: 0;
border: 0;
background: none;
color: #121212;
font-family: inherit;
font-size: 1rem;
outline: none;
}
.search input::placeholder {
color: #8a8a8a;
}
.search button {
flex-shrink: 0;
height: 52px;
padding-inline: 1.9rem;
border: 0;
border-radius: 12px;
background: #121212;
color: #fff;
font-family: Heebo, sans-serif;
font-size: 17.6px;
font-weight: 800;
cursor: pointer;
transition: background-color 0.16s ease;
}
.search button:hover {
background: #2e2e2e;
}
@media (max-width: 559.98px) {
.search button {
display: none;
}
.search {
padding-right: 1.4rem;
}
}
/* ---------------------------------------------------------------- sheet --- */
/* .page-sky: one dark sheet carrying every section, with the blooms and the
star field behind them. flow-root contains the first section's top margin —
without it that margin collapses out and drags the sheet down past the join
with the hero. */
/* The white column, inset in the frame and closed off at the bottom — the
hero rounds the top, this rounds the foot, and the closing band below is
where the frame opens out again. overflow:hidden so the radius clips. */
.sheet {
position: relative;
z-index: 1;
display: flow-root;
overflow: hidden;
background: var(--sheet);
padding-bottom: var(--rhythm);
}
@media (min-width: 1024px) {
.sheet {
margin-inline: 12px;
border-radius: 0 0 36px 36px;
}
}
/* Sections ride above the shading */
.sheet > .container {
position: relative;
z-index: 1;
}
.section {
padding-top: var(--rhythm);
}
/* The categories block sits directly under the status strip with no heading
between them, so it does not need a full rhythm step — that gap was sized to
separate two titled sections, and with the title gone it read as a hole. */
.section--tight {
padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
/* --------------------------------------------------------------- status --- */
.status {
display: flex;
align-items: center;
gap: 0.85rem;
margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
padding: 0.85rem 1.5rem 0.85rem 0.85rem;
border-radius: 999px;
/* var(--card) — the same fill the category tiles and the FAQ rows use, so
the strip is another card in the system rather than a special case. The
landing's own #242428 was numerically right and perceptually wrong here:
on their #121312 sky it is a card lifting off a darker ground, but on a
white sheet the whole dark family collapses into "black". */
background: var(--card);
}
/* Azar leads this strip with a pill label — a yellow "Notices" chip — which is
also what the live help centre already does with its purple "Status" chip.
Both agreed, so it comes back. */
.status-pill {
flex-shrink: 0;
padding: 0.35rem 0.85rem;
/* 999px, the same stadium as the strip it sits in — an 8px chip inside a
fully rounded bar was two different corner languages in one component. */
border-radius: 999px;
/* Green, matching the dot beside it — and the same construction as Azar's
yellow "Notices" chip: a saturated fill with dark text, not a tinted
background with coloured text. */
background: #009e60;
color: #04180d;
font-family: Poppins, sans-serif;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* One solid dot. It used to carry a 5px translucent ring drawn as a spread
box-shadow — a soft halo is the one thing this palette does not do. */
.status-dot {
width: 14px;
height: 14px;
flex-shrink: 0;
border-radius: 999px;
background: #009e60;
}
.status-txt {
flex: 1;
min-width: 0;
color: var(--ink);
font-size: 0.98rem;
font-weight: 600;
}
/* Solid, not an opacity: the page has no translucent fills left. */
.status a {
color: var(--muted);
font-size: 0.92rem;
font-weight: 600;
white-space: nowrap;
}
.status a:hover {
color: var(--ink);
}
/* ------------------------------------------------------------ categories -- */
/* The live grid is `display:flex; gap:18px` over five
, so three sit on the
first row and the remaining two grow to fill the second. Kept exactly. */
/* Six tracks, each card spanning two, so every card is the same width. The
flex row this replaces broke 3 + 2 and let the bottom pair grow to 479 against
the top row's 313 — a 53% difference, and the main reason five cards did not
read as one set. Items 4 and 5 start at tracks 2 and 4, which centres the
bottom pair under the gaps above it. */
.kb-tiles {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.kb-tile {
min-width: 0;
grid-column: span 2;
}
.kb-tile:nth-child(4):nth-last-child(2) {
grid-column: 2 / span 2;
}
.kb-tile:nth-child(5):nth-last-child(1) {
grid-column: 4 / span 2;
}
@media (max-width: 59.999rem) {
.kb-tiles {
grid-template-columns: repeat(2, 1fr);
}
.kb-tile,
.kb-tile:nth-child(4):nth-last-child(2),
.kb-tile:nth-child(5):nth-last-child(1) {
grid-column: span 1;
}
}
@media (max-width: 33.999rem) {
.kb-tiles {
grid-template-columns: 1fr;
}
}
/* Column, centred, icon over title — the .kb-tile-link box at 190px tall.
Flat fill, no border, no shadow: the luminance step to the sheet does the
separating, the way #242428 does against #121312 on the landing. On white
that inverts: a grey card stepping down from the sheet. */
/* Art at the top, copy pinned to the foot, left aligned — the reference's
shape. Centred icon-over-title was the Azar arrangement, and it reads fine
with a title alone; a description line centred under it does not, and the
description is most of what stops these looking bland.
A fixed gap, NOT space-between. The grid runs 3 + 2, so the bottom row's
cards are half as wide again and their descriptions fall to one line —
space-between then stretched that single line away from its icon and left a
hole through the middle of the two biggest cards. A fixed gap keeps the icon
and its copy at the same distance in every card whatever the row. */
.kb-tile-link {
display: flex;
flex-direction: column;
justify-content: flex-start;
/* Centred. With the description gone there are only two things in the card,
and a centred title under a left-aligned prop reads as a mistake — so the
prop centres with it rather than the title moving on its own. */
align-items: center;
text-align: center;
gap: 0;
/* No floor. The cards are all one width now, so height follows content and
the rows stay level on their own; a 300px minimum only reintroduced the
empty band under the copy. */
height: 100%;
min-height: 0;
/* 16px, not the page's --r-md. At 36.8 the tiles read as pillows; the corner
is the single biggest difference between these and the dense layout, and a
small radius is what makes a card look like a panel rather than a blob. */
padding: 32px 30px 30px;
border-radius: 16px;
background: var(--card-w);
transition:
background-color 0.18s ease,
transform 0.18s ease;
}
/* With no shadow to grow, hover is a flat fill step plus the lift. */
/* No lift. The card darkens a step and the title underlines — that is the
whole hover. A 4px translate makes five cards jump under the cursor as you
sweep the grid, which is motion for its own sake on something you are only
scanning.
Guarded on (hover: hover) like the nav's is: on a touch screen the state
latches on tap and stays until you touch something else, which would leave
a card darkened and its title underlined after you had already left it. */
@media (hover: hover) {
.kb-tile-link:hover {
background: var(--card-w-hi);
}
.kb-tile-link:hover .kb-tile-title {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
}
/* The prop itself, at the 80px the plate used to occupy, so the card's rhythm
is unchanged. No plate behind it: a coloured square under a full-colour 3D
render is two containers for one object, and it was the plate — not the
glyph — that made these read as generated. */
/* A fixed-height band, the device Discord's help centre uses: their card
reserves a 288x156 image container and sizes the art into it. Height is
fixed and width is free, so props with different aspect ratios all sit on
one baseline and every title in a row starts at the same y. An 80px square
could not do that — it letterboxed each prop differently. */
.kb-tile-prop {
display: block;
flex-shrink: 0;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
/* The image for each section, keyed by its id. The size lives on the same
selectors, so a section with no rule here collapses to nothing rather than
leaving a blank box above its title. ADDING OR REMOVING A SECTION MEANS
EDITING BOTH LISTS BELOW. */
[data-sec='50153260438036'],
[data-sec='50153293082900'],
[data-sec='50153307665428'],
[data-sec='50153292457748'],
[data-sec='50153257306516'] {
width: 120px;
height: 120px;
}
.kb-tile-prop[data-sec] {
margin: 0 auto 22px;
}
[data-sec='50153260438036'] {
background-image: url(/hc/theming_assets/01M1PMVZBXBZ3TXN1QQTZN5WAK);
}
[data-sec='50153293082900'] {
background-image: url(/hc/theming_assets/01M1PMVZD2DY9BN0NXGN9T36DP);
}
[data-sec='50153307665428'] {
background-image: url(/hc/theming_assets/01M1PMVZDCM1PRZPSWTJP5GPD6);
}
[data-sec='50153292457748'] {
background-image: url(/hc/theming_assets/01M1PMVZDDYH7W6T71EVHQ52V6);
}
[data-sec='50153257306516'] {
background-image: url(/hc/theming_assets/01M1PMVZ8P9VZW6506M53NJV35);
}
.kb-tile-title {
display: block;
/* Poppins 800 at the nav's own tracking and leading — the bar's face, not
the heading face. M PLUS Rounded 1c stays on the section headings, so the
page now runs the display face for headings and Poppins for the things you
click, which is the split the landing already makes. */
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 1.45rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--ink-on-w);
text-wrap: balance;
}
/* --------------------------------------------------------------- support -- */
/* .home-support-intro is a full-width panel on the live page — a purple
gradient banner carrying the heading and its line. Kept as a panel; the fill
becomes the landing's flat #3d22c4, one colour, no ramp. */
/* Not a panel. The closing band is the frame itself opening out: same
#1c1c1c as the gutters, edge to edge, no radius and no inset. The border
coming down the sides of the white runs straight into it.
Black rather than purple for the same reason Azar's is — the hero spends
the brand colour and the footer spends it again, so a third purple block
between them would leave the page nowhere to rest. */
.closing {
background: var(--chrome);
padding-block: clamp(3rem, 6.5vw, 5.5rem);
text-align: center;
}
.support-intro {
padding: 0;
border-radius: 0;
background: none;
text-align: center;
}
.support-intro h2 {
color: #fff;
font-size: clamp(2.1rem, 5vw, 3.5rem);
}
.support-intro p {
margin: 0.75rem 0 0;
color: rgba(255, 255, 255, 0.72);
font-size: 1.08rem;
}
/* One block, not two cards. Azar closes with a single centred call — heading,
one line, one button — and that shape is right for a help centre: the page
has already offered five ways to self-serve, so the last thing on it should
be one clear way out. We keep both destinations, side by side, which is the
landing's safety panel exactly (white primary + ghost). */
.support-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-top: 1.75rem;
}
.support-actions .btn {
margin-top: 0;
}
.btn--onbrand {
background: #ffffff;
color: #111111;
}
.btn--onbrand:hover {
background: #e2e2e2;
}
.btn--ghost {
background: #3a3a3a;
color: #ffffff;
}
.btn--ghost:hover {
background: #4a4a4a;
}
.support-cards {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
margin-top: 18px;
}
@media (min-width: 860px) {
.support-cards {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
/* Centred, icon over title over copy over button — the .home-support-card box */
.support-card {
display: flex;
flex-direction: column;
align-items: center;
padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2rem);
border-radius: var(--r-lg);
background: var(--card);
text-align: center;
}
.support-card-icon {
display: grid;
place-items: center;
width: 72px;
height: 72px;
margin-bottom: 1.25rem;
border-radius: 24px;
background: var(--chip);
color: #fff;
}
.support-card-icon svg {
width: 36px;
height: 36px;
}
.support-card h3 {
color: var(--ink);
font-size: 1.5rem;
}
.support-card p {
margin: 0.7rem 0 0;
color: var(--muted);
font-size: 1.02rem;
}
/* Stadium, weight 800 — .safety-section__btn, run a size up. Solid fill, no
shadow, and the hover is a flat colour step rather than an opacity fade:
fading a solid button lets the surface behind it through, so it stops
reading as one flat object at the moment it is being pressed. */
/* Flat: a solid fill and a squared-off radius. The stadium was the softest
shape on the page and the ghost was a translucent overlay, which is not a
fill at all — it is the surface behind it showing through. Both gone. Every
button is now one opaque colour in a 14px box, and every state is another
opaque colour. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
margin-top: 1.5rem;
min-height: 58px;
padding-inline: 2rem;
border: 0;
border-radius: 14px;
font-family: Heebo, sans-serif;
font-size: 17.6px;
font-weight: 800;
cursor: pointer;
transition: background-color 0.16s ease;
}
.btn svg {
width: 21px;
height: 21px;
}
.btn--primary {
background: var(--btn);
color: var(--btn-ink);
}
.btn--primary:hover {
background: var(--btn-hi);
}
/* ------------------------------------------------------------------- faq -- */
/* Centred, matching the landing's own FAQ: .faq-section__intro is text-align
center over its list, and this is the same pattern — a header above a full-
width block, not a header beside a copy column. Shared by the categories and
the FAQ; the categories heading used to be screen-reader only, which left the
whole top half of the content area with no branded type in it at all. */
.sec-head {
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
text-align: center;
}
/* Balanced, like .faq-section__title, so a line that does wrap splits evenly
under the centre axis rather than dropping one word alone. No max-width —
the landing does not cap its section title either. */
.sec-head h2 {
text-wrap: balance;
color: var(--ink);
font-size: clamp(2.1rem, 4.5vw, 3.25rem);
}
/* The landing's two-tone: statement in ink, the answering half in the brand. */
.faq-list {
display: grid;
gap: 14px;
}
/* The landing's .faq-item is a #121312 well with a 1px #3a3a3a outline — a
step DOWN from its sky. There is no down from white, so these join the card
system instead: the same grey fill as the tiles, no border, no shadow. */
.faq-item {
border-radius: 24px;
background: var(--card);
transition: background-color 0.18s ease;
}
.faq-item:hover,
.faq-item[open] {
background: var(--card-hi);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding: 20.8px 24px;
cursor: pointer;
list-style: none;
color: var(--ink-on-w);
font-size: 1.06rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
/* The live affordance is a "+", so it stays a plus that turns into a minus,
rather than becoming the landing's chevron. */
.faq-plus {
position: relative;
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--brand);
}
.faq-plus::before,
.faq-plus::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
background: currentColor;
border-radius: 2px;
transform: translate(-50%, -50%);
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.faq-plus::before {
width: 16px;
height: 3px;
}
.faq-plus::after {
width: 3px;
height: 16px;
}
.faq-item[open] .faq-plus::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
.faq-answer {
padding: 0 24px 22px;
color: var(--body-on-w);
font-size: 1rem;
line-height: 1.62;
}
.faq-answer p {
margin: 0 0 0.85rem;
}
.faq-answer p:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------- connect -- */
.connect {
text-align: center;
}
.connect h3 {
color: var(--ink);
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
}
.connect-socials {
display: flex;
justify-content: center;
gap: 14px;
margin-top: 1.5rem;
}
.connect-socials a {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 20px;
background: var(--card);
color: var(--ink);
transition:
background-color 0.16s ease,
transform 0.16s ease,
color 0.16s ease;
}
.connect-socials a:hover {
background: var(--brand);
color: #fff;
transform: translateY(-3px);
}
.connect-socials svg {
width: 24px;
height: 24px;
}
/* ---------------------------------------------------------------- footer --- */
.foot {
position: relative;
overflow: hidden;
padding-top: clamp(3rem, 6vw, 5.5rem);
background: linear-gradient(180deg, #2a1f6e 0%, #3b2ea0 48%, #4f46c8 100%);
color: rgba(243, 240, 255, 0.78);
}
.foot-top {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.25rem, 5vw, 4rem);
padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
.foot-top {
grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
}
}
.foot-brand {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
}
.foot-social {
display: flex;
gap: 0.55rem;
}
.foot-social a {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.13);
color: #fff;
transition: background-color 0.16s ease;
}
.foot-social a:hover {
background: rgba(255, 255, 255, 0.26);
}
.foot-social svg {
width: 19px;
height: 19px;
}
.foot-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem 1.5rem;
}
@media (min-width: 700px) {
.foot-nav {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.foot-col h4 {
margin-bottom: 0.9rem;
color: #fff;
font-size: 1rem;
font-weight: 800;
}
.foot-col ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.55rem;
}
.foot-col a {
color: rgba(243, 240, 255, 0.74);
font-size: 0.96rem;
transition: color 0.16s ease;
}
.foot-col a:hover {
color: #fff;
}
.foot-bot {
padding: 1.25rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(243, 240, 255, 0.62);
font-size: 0.88rem;
}
/* The landing's signature close. Sized in cqw so it fills its own rail. */
.foot-wordmark-wrap {
container-type: inline-size;
overflow: hidden;
}
.foot-wordmark {
display: block;
margin: 0;
color: rgba(196, 189, 255, 0.42);
font-family: 'Dela Gothic One', Impact, sans-serif;
font-size: 21.6cqw;
letter-spacing: -0.045em;
line-height: 0.78;
text-align: center;
white-space: nowrap;
user-select: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
.connect-socials a:hover {
transform: none;
}
}
/* ------------------------------------------------- section + article page -- */
/* The reference layout, in this page's vocabulary: the topic name and a row of
topic tabs in the band, the tabs sitting ON the seam so the active one is a
piece of the white sheet reaching up into the purple, and the sibling
articles in a rail down the left of the sheet. */
/* Short, and bottom-aligned rather than centred — the tabs have to land exactly
on the band's bottom edge for the active one to read as continuous with the
sheet. 300 rather than 400: on an inner page the band is a label, not a
stage. The ramp's vertical radius scales with the height (729/300 = 243%) so
the falloff keeps the same PHYSICAL size it has on the home hero rather than
being crammed into three quarters of the distance. */
.band--sub {
min-height: 300px;
justify-content: flex-end;
padding: clamp(2rem, 4vw, 3rem) 0 0;
text-align: center;
background: radial-gradient(
110% 243% at 0% 0%,
#7d64f5 0%,
#6a51e4 0.2%,
#5741cb 1.8%,
#4433a6 5.8%,
#33277c 13.4%,
#241c56 25.6%,
#191637 43.4%,
#141327 67.9%,
#1c1c1c 100%
);
}
.band-body {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
/* No search and no tabs, so nothing has to sit on the bottom edge and the title
can centre in a shorter band. */
/* .band--sub carries no bottom padding because its tab row sits on that edge.
With no tabs there is nothing to hold the title off the bottom, which only
shows on a phone, where the 220px minimum drops away. */
.band--bare {
min-height: 220px;
justify-content: center;
padding-bottom: clamp(2rem, 4vw, 3rem);
}
.band--bare .band-body {
padding-bottom: 0;
}
.band-copy {
width: 100%;
min-width: 0;
}
.band--sub h1,
.band-title {
color: #fff;
font-size: clamp(2rem, 4.5vw, 3rem);
font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Segoe UI', Arial, sans-serif;
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.03em;
text-wrap: balance;
}
.sec-count {
margin: 0.6rem 0 0;
color: rgba(255, 255, 255, 0.66);
font-size: 1rem;
}
/* Search stays on the inner pages. It is the fastest route to an answer, and
with the breadcrumb gone it is the only thing here that can reach an article
in another topic in one move. */
.band--sub .search {
max-width: 30rem;
margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
}
/* Tabs, flush to the bottom of the band. The active one is filled with --sheet
and rounded on its top corners only, so it runs into the white below it with
no seam — the whole point of the device. No border and no shadow: it is one
flat shape continuous with another flat shape. */
.tabs {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
display: none;
}
/* Below the two-column breakpoint the row bleeds to the viewport edges and
carries its own inline padding instead of sitting inside the container's.
That is the standard phone tab-strip shape, and it is also the only version
that scrolls correctly: with the padding on the wrapper, the row could not
scroll far enough to bring the last topic fully into view. */
@media (max-width: 59.999rem) {
.tabs-wrap {
max-width: none;
padding-inline: 0;
}
.tabs {
padding-inline: 1rem;
}
/* No floor on a phone. The 300 is there to hold the prop, and the prop is
hidden down here — bottom-aligned content under a floor it does not fill
just opens a void above the title. */
.band--sub {
min-height: 0;
}
}
.tab {
flex-shrink: 0;
padding: 13px 18px;
border-radius: 14px 14px 0 0;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 0.98rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
transition:
background-color 0.16s ease,
color 0.16s ease;
}
@media (hover: hover) {
.tab:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
}
/* The active tab. Paired in CSS rather than in the template -- see the note
in templates/partials/topic_tabs.hbs. ADDING OR REMOVING A SECTION MEANS
EDITING THIS LIST. */
.tabs[data-cur='50153260438036'] .tab[data-tab='50153260438036'],
.tabs[data-cur='50153293082900'] .tab[data-tab='50153293082900'],
.tabs[data-cur='50153307665428'] .tab[data-tab='50153307665428'],
.tabs[data-cur='50153292457748'] .tab[data-tab='50153292457748'],
.tabs[data-cur='50153257306516'] .tab[data-tab='50153257306516'],
.tab[aria-current] {
background: var(--sheet);
color: var(--ink-on-w);
}
/* Rail left, article right. Source order stays main-then-aside so the phone
gets the article first and the sibling list under it; the columns are placed
explicitly rather than reordered, which keeps tab order matching the page. */
.sec-layout {
display: grid;
gap: 2.25rem;
}
@media (min-width: 60rem) {
.sec-layout {
grid-template-columns: 15rem minmax(0, 1fr);
gap: 3rem;
align-items: start;
}
.sec-main {
grid-column: 2;
grid-row: 1;
}
.sec-aside {
grid-column: 1;
grid-row: 1;
}
}
/* A section page has no rail — its main content IS the list of articles, and a
rail repeating that list beside it would be the same links twice. */
.sec-layout--norail {
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
.sec-layout--norail .sec-main {
grid-column: 1;
}
}
/* A reading page wants more air above the first line than a list of rows does.
The section page keeps the tight step because its first element is a card
with its own padding; prose has none. */
.sec-layout--article {
padding-top: clamp(2.5rem, 4.5vw, 3.5rem);
}
/* Rows, not a bulleted list and not cards in a grid. Article titles are full
sentences of wildly different lengths — "Is Chitchat free?" against
"Chitchat's Commitment to Protecting Minors" — and a grid of those is a
ragged mess. A row gives every title the same start and the same width, and
it is the same flat grey box the tiles and the FAQ already use. */
.arts {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.art-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding: 20px 24px;
border-radius: 16px;
background: var(--card-w);
color: var(--ink-on-w);
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 1.06rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.35;
transition: background-color 0.18s ease;
}
@media (hover: hover) {
.art-link:hover {
background: var(--card-w-hi);
}
.art-link:hover .art-title {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
}
.art-arrow {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--brand);
}
.sec-aside {
position: sticky;
top: 5.5rem;
}
.aside-h {
margin: 0 0 0.85rem;
padding-inline: 14px;
font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-on-w);
}
/* The rail's heading is the way back up to the section, so the sibling list is
not floating under a label that goes nowhere. */
.aside-h a {
color: inherit;
}
.aside-h a:hover {
color: var(--ink-on-w);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Topic groups in the article rail. The label is a heading you can also click
to collapse, which is why it is a button styled as a heading rather than an
h2 with a control next to it — one target, and the whole row is hit area. */
.aside-groups {
display: grid;
gap: 1.75rem;
}
/* The topic sits on a filled bar and the articles under it sit on nothing, so the
two levels separate by surface, not by type alone. The bar is why the current
article below had to move off the same grey -- two identical fills in one rail
read as the same kind of thing. */
.aside-group-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
margin: 0 0 0.5rem;
padding: 10px 14px;
border: 0;
border-radius: 12px;
background: var(--card-w);
cursor: pointer;
text-align: left;
font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Segoe UI', Arial, sans-serif;
font-size: 1.02rem;
font-weight: 900;
letter-spacing: -0.01em;
color: var(--ink-on-w);
transition: background-color 0.16s ease;
}
.aside-group-btn:hover {
background: #e2e2ec;
}
.aside-chev {
flex-shrink: 0;
width: 15px;
height: 15px;
color: var(--muted-on-w);
transition: transform 0.18s ease;
}
/* Collapsed points right, open points down — the chevron is drawn pointing down,
so it is the closed state that turns. */
.aside-group-btn[aria-expanded='false'] .aside-chev {
transform: rotate(-90deg);
}
.aside-group-btn[aria-expanded='false'] + .aside-list {
display: none;
}
.aside-list {
display: grid;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.aside-list a {
display: block;
padding: 11px 14px;
border-radius: 12px;
color: var(--body-on-w);
font-size: 0.98rem;
font-weight: 600;
line-height: 1.4;
transition:
background-color 0.16s ease,
color 0.16s ease;
}
.aside-list a:hover {
background: var(--card-w);
color: var(--ink-on-w);
}
/* The current article is filled rather than coloured: the page has one accent
and it is already spent on the links inside the prose. A fill is also the
only marker that works on a card system with no hairlines in it. */
.aside-list a[aria-current] {
background: #dadae6;
color: var(--ink-on-w);
font-weight: 800;
}
/* On a phone the rail goes above the article and every topic starts shut (that
part is in script.js), so it reads as a short stack of bars you can open --
Azar's mobile shape. Left after the article it was a long list of links below
the thing you had already finished reading, which is where nobody looks. */
@media (max-width: 59.999rem) {
.sec-aside {
position: static;
order: -1;
margin-bottom: 0.5rem;
}
.aside-groups {
gap: 0.5rem;
}
.aside-group-btn {
margin-bottom: 0;
}
.aside-group-btn[aria-expanded='true'] {
margin-bottom: 0.5rem;
}
}
/* A topic page is a waypoint: script.js sends you straight to its first article.
The list underneath is what a crawler and a browser without JavaScript get, so
it is hidden here rather than removed -- otherwise it paints for a moment
before the hop and reads as a flash of the wrong page. It is revealed again by
the