/* ============================================================================
* az-rooms.css — the home page (/), and nothing else.
*
* HOW IT LOADS
* src/app/page.tsx renders the itself (React 19 hoists it into
* ); the root layout never does. Every navigation on the site is a full
* document load — the pages use plain , not next/link — so the sheet cannot
* survive into another route either. The five pages verified byte-identical
* against azeria.ai keep exactly the stylesheet set they had.
*
* The draft box — the hero's card and the line docked to the bottom of the
* screen — is NOT here: it is one component (DraftBox.tsx) that also renders
* on /examples, so it has its own sheet, az-draftbox.css, loaded by both.
*
* CONTRACT
* 1. Additive only. This file loads after site.dist.css and never restates an
* existing .az-* rule. Every selector is either a class introduced here
* (.az-orb*, .az-flow__label, .az-rooms__*) or an existing class qualified
* by one of this file's own modifiers (--split, --boxed, --bare, --reverse).
* None of those names appears in site.dist.css or in any vendor sheet.
* 2. No colour literals. Every colour is a var(--…) resolved from the
* [data-az-theme] token blocks in AzeriaAuthServer/wwwroot/css/site.scss.
* 3. House breakpoints only: 860px, where .az-uc-split stacks, and 640px, where
* .az-callout stacks.
*
* CONTENTS
* 1. Split hero .az-hero--split
* 2. Boxed flow .az-flow--boxed, .az-flow__label
* 3. Bare flow .az-flow--bare
* 4. Reversed callout .az-callout--reverse
* 5. AI orbs .az-orbs, .az-orb, .az-orb__mark
* 6. Page scale and rhythm .az-rooms__h2, .az-rooms__sec
* ========================================================================== */
/* ---------------------------------------------------------------------------
* 1. SPLIT HERO
* The house .az-hero is a centred 920px column. Here it carries an
* .az-uc-split — copy left, draft box right — so the centring has to go.
* ------------------------------------------------------------------------ */
.az-hero.az-hero--split {
text-align: left;
/* Keeps the two columns and the card inside them from ever opening a
horizontal scrollbar on the page. */
overflow: hidden;
}
/* .az-h1 sits at display-mega, sized for the full-width centred hero. In a
~540px grid column that breaks the headline over five lines, so it steps down
one rung of the same ladder and sets in three, as the layout intends. */
.az-hero.az-hero--split .az-h1 {
font-size: var(--t-display-lg);
}
/* The eyebrow is a long line and it wraps on a phone. Left to itself it
breaks after "AND", leaving "MEMORY" hanging alone on the second line;
balance splits it into two even lines instead. Inert where it already fits on
one, so it needs no breakpoint of its own. */
.az-hero.az-hero--split .az-eyebrow {
text-wrap: balance;
}
/* The lead is a left-column paragraph here, not a centred hero line. */
.az-hero.az-hero--split .az-lead {
margin-left: 0;
margin-right: 0;
}
/* ---------------------------------------------------------------------------
* 2. BOXED FLOW — one bordered card, cells divided by vertical rules
* .az-flow is a centred row of loose step columns joined by "→" glyphs.
* --boxed makes it a single card whose cells are separated by rules instead.
* ------------------------------------------------------------------------ */
.az-flow.az-flow--boxed {
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 0;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.az-flow.az-flow--boxed > * {
flex: 1 1 0;
min-width: 0;
max-width: none;
padding: var(--s-lg) var(--s-lg);
border-left: 1px solid var(--hairline);
}
.az-flow.az-flow--boxed > *:first-child {
border-left: 0;
}
/* --- 2a. Label cell: kicker + title, no number --------------------------- */
/* A caption rather than a step, so it takes ~0.6 of a step's width — which is
what leaves the three steps the room their copy needs. */
.az-flow.az-flow--boxed > .az-flow__label {
flex: 0.62 1 0;
}
.az-flow__label {
display: flex;
flex-direction: column;
justify-content: center;
}
.az-flow__label .az-shead__kicker {
margin-bottom: var(--s-sm);
}
.az-flow__label .az-h3 {
margin: 0;
}
/* --- 2b. Step cells ------------------------------------------------------ */
/* Number beside the title, not above it: the disc takes a column of its own so
the body copy aligns to the title rather than to the disc. */
.az-flow.az-flow--boxed > .az-flow__step {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--s-sm);
row-gap: var(--s-xxs);
align-content: start;
}
.az-flow.az-flow--boxed > .az-flow__step .az-flow__num {
grid-column: 1;
grid-row: 1;
margin-top: var(--s-xxs);
}
.az-flow.az-flow--boxed > .az-flow__step h3 {
grid-column: 2;
grid-row: 1;
margin: 0;
}
.az-flow.az-flow--boxed > .az-flow__step p {
grid-column: 2;
grid-row: 2;
}
/* .az-flow__num is a green-ink mono label everywhere else on the site. Inside
the card it becomes a filled disc, which is what the accent step labels in
the layout call for. */
.az-flow--boxed .az-flow__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: var(--pill);
background: var(--primary);
color: var(--on-primary);
font-size: var(--t-caption);
letter-spacing: 0;
}
/* The base 1.22rem/0.94rem pair is set for wide standalone step columns. In a
card cell the copy needs to hold together on one or two lines. */
.az-flow--boxed .az-flow__step h3 {
font-size: var(--t-body);
}
.az-flow--boxed .az-flow__step p {
font-size: var(--t-body-sm);
}
/* At the .az-uc-split breakpoint the cells stack, and the dividing rules turn
from vertical to horizontal. */
@media (max-width: 860px) {
.az-flow.az-flow--boxed {
display: block;
}
.az-flow.az-flow--boxed > * {
border-left: 0;
border-top: 1px solid var(--hairline);
}
.az-flow.az-flow--boxed > *:first-child {
border-top: 0;
}
}
/* ---------------------------------------------------------------------------
* 3. BARE FLOW — steps with no connector glyph
* .az-flow__step:not(:last-child)::after injects a "→" between steps. Both
* flows on this page read as a list rather than a pipeline, so it goes.
* ------------------------------------------------------------------------ */
.az-flow--bare .az-flow__step:not(:last-child)::after {
content: none;
}
/* The base .az-flow__step h3 is display:flex so it can seat an icon beside
the title. These steps carry no icon, and flex turns each wrapped line into a
separate flex item — a two-line title then renders with the 0.5rem item gap
opened up between its lines. Back to normal inline flow, scoped to this
file's two modifiers so the icon-bearing flows on the ported pages keep the
base behaviour. The inherited heading line-height resolves to roughly 2.15
against the step's font size and leaves a visible gap between those two
lines, so it is tightened to a normal heading measure at the same time. */
.az-flow--bare .az-flow__step h3,
.az-flow--boxed .az-flow__step h3 {
display: block;
line-height: 1.25;
}
/* ---------------------------------------------------------------------------
* 4. REVERSED CALLOUT — body first, media second
* ------------------------------------------------------------------------ */
.az-callout.az-callout--reverse {
grid-template-columns: 1fr auto;
}
/* .az-callout p is margin:0, so a second paragraph needs its own separation. */
.az-callout--reverse p + p {
margin-top: var(--s-base);
}
.az-callout--reverse strong {
color: var(--ink);
font-weight: var(--weight-strong);
}
/* Same 640px breakpoint as the base .az-callout. */
@media (max-width: 640px) {
.az-callout.az-callout--reverse {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------------------
* 5. ORBS — the row of circular AI badges
* ------------------------------------------------------------------------ */
.az-orbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-xs);
}
.az-orb {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 58px;
height: 58px;
border-radius: var(--pill);
background: var(--surface-tint);
border: 1px solid var(--hairline);
font-family: var(--f-body);
font-size: var(--t-caption);
font-weight: var(--weight-strong);
color: var(--ink-secondary);
}
/* The brand marks are monochrome SVGs (simple-icons, CC0) in public/img/logos/.
They are painted as a CSS mask filled with currentColor rather than dropped in
as an ![]()
: the source files carry no fill, so an ![]()
would render them
black and they would disappear on the dark theme's ground. As a mask they
inherit .az-orb's colour and stay legible in both themes.
--az-orb-mark is set per orb as an inline style in src/app/page.tsx. */
.az-orb__mark {
display: block;
width: 22px;
height: 22px;
background-color: currentColor;
-webkit-mask: var(--az-orb-mark) center / contain no-repeat;
mask: var(--az-orb-mark) center / contain no-repeat;
}
/* ---------------------------------------------------------------------------
* 6. PAGE SCALE AND RHYTHM
* The house scale is built for long pages whose sections each open with a full
* .az-shead (kicker + h2 + lead) over a dense body. This page is short and
* card-led, so both the section heading and the vertical rhythm are re-scaled
* for it — through page-scoped classes, leaving the house scale untouched
* everywhere else.
* ------------------------------------------------------------------------ */
/* .az-h2 is display-md. "How a room works" stands alone above four small step
columns and dwarfed them there; title-lg brings it close to the step titles
while keeping the display face and tracking. */
.az-h2.az-rooms__h2 {
font-size: var(--t-title-lg);
margin-bottom: var(--s-xl);
}
/* --sec-y is 96px. A section's worth of air on both sides floated these cards
far looser than the layout's ~40px, so they take the xl step instead. */
.az-section.az-rooms__sec {
padding-top: var(--s-xl);
padding-bottom: var(--s-xl);
}
.az-hero.az-rooms__sec {
padding-top: var(--sec-y);
padding-bottom: var(--s-xl);
}