/* ============================================================================
ASTRAMIR — BACKGROUND FIELDS
Requires astramir.tokens.css. Retheme automatically with [data-mode].
Every field here is a real optical phenomenon drawn from the bench, not a
texture. Nothing is a photograph, a mesh gradient, a noise overlay or a
particle field: this brand's ground is an instrument, and an instrument does
not have a mood layer.
THE CONTRAST BUDGET, which is the rule that makes these safe to hand out.
Astramir sells to entities bound by WCAG. A background that lightens the
ground under body copy is a contrast defect, not a style choice, so every
field is capped rather than eyeballed:
· pattern ink never exceeds 8% of --color-ink on Operate
· pattern ink never exceeds 6% of --color-ink on Publish
· the aperture glow never exceeds 10% of --p-aperture
· worst case, --color-ink-2 body copy stays above 7:1 on any pixel of any
field, against a 4.5:1 legal floor
Consequence: you may set body copy directly on any field in this file and it
will still pass. That is the whole point of capping them. If a field ever
looks too faint on a projector, raise the ROOM's brightness, not the alpha.
USE
…
Fields are listed here in implementation order. The canonical order the
company uses, quietest first, lives in this folder's index.html, which is
the document people actually read; numbering them in both places is how the
two drift apart.
`.bg` establishes the ground and the stacking context. The modifier draws the
field. One modifier per element: fields are never stacked, because two
superimposed patterns stop reading as an instrument and start reading as a
texture pack.
========================================================================= */
.bg {
position: relative;
background-color: var(--color-ground);
isolation: isolate;
}
/* Pattern inks, capped. Do not raise these numbers in a consuming project;
raise them here, once, after re-measuring. */
.bg {
--bg-line: color-mix(in oklab, var(--color-ink) 8%, transparent);
--bg-line-2: color-mix(in oklab, var(--color-ink) 5%, transparent);
--bg-line-3: color-mix(in oklab, var(--color-ink) 3%, transparent);
--bg-glow: color-mix(in oklab, var(--p-aperture) 10%, transparent);
}
[data-mode="publish"] .bg {
--bg-line: color-mix(in oklab, var(--color-ink) 6%, transparent);
--bg-line-2: color-mix(in oklab, var(--color-ink) 4%, transparent);
--bg-line-3: color-mix(in oklab, var(--color-ink) 2.5%, transparent);
--bg-glow: color-mix(in oklab, var(--p-azure) 7%, transparent);
}
/* Mask stops. NOT colours.
A mask-image reads the ALPHA channel only; the compositor discards the rest.
`#000` here means "opaque, keep this pixel" and carries no colour decision,
which is why these are not palette tokens: a palette token would imply a
choice that does not exist, and one carrying its own alpha would silently
punch holes in every masked field.
They are named and hoisted so the two literals live in one reviewable place
instead of at four use sites, and so nobody later "fixes" them into tokens. */
.bg {
--mask-opaque: #000;
--mask-half: rgb(0 0 0 / 0.35);
}
/* ---------------------------------------------------------------------------
VOID — the default, and the most-used field in the system.
Nothing. Flat ground. Listed as a named field on purpose: without it, every
surface acquires a texture because a texture was available.
------------------------------------------------------------------------ */
.bg-void { background-image: none; }
/* ---------------------------------------------------------------------------
GRATING — the workhorse.
Fine parallel rules with a density falloff, the diffraction grating from the
bench at page scale. Safe under dense content; use at any size.
------------------------------------------------------------------------ */
.bg-grating::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: repeating-linear-gradient(90deg,
var(--bg-line) 0 1px, transparent 1px 14px);
-webkit-mask-image: linear-gradient(105deg, var(--mask-opaque) 0%, var(--mask-half) 55%, transparent 100%);
mask-image: linear-gradient(105deg, var(--mask-opaque) 0%, var(--mask-half) 55%, transparent 100%);
}
/* ---------------------------------------------------------------------------
SPECTRUM — the signature field.
An absorption spectrum: fine lines at irregular spacing. Three superimposed
series at coprime periods, which is how a real spectrum arises — several
elements' line series overlaid — so the irregularity is physical rather than
random. Reserve for title cards, covers and openings.
------------------------------------------------------------------------ */
.bg-spectrum::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image:
repeating-linear-gradient(90deg, var(--bg-line) 0 1px, transparent 1px 37px),
repeating-linear-gradient(90deg, var(--bg-line-2) 0 1px, transparent 1px 61px),
repeating-linear-gradient(90deg, var(--bg-line-3) 0 2px, transparent 2px 143px),
repeating-linear-gradient(90deg, var(--bg-line-3) 0 1px, transparent 1px 233px);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--mask-opaque) 18%, var(--mask-opaque) 82%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, var(--mask-opaque) 18%, var(--mask-opaque) 82%, transparent 100%);
}
/* ---------------------------------------------------------------------------
FRINGE — interference.
Concentric fringes from an origin off the canvas. Quiet, directional, good
for section breaks and anything that should feel like a transition.
------------------------------------------------------------------------ */
.bg-fringe::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: repeating-radial-gradient(circle at 8% 118%,
var(--bg-line-2) 0 1px, transparent 1px 44px);
-webkit-mask-image: radial-gradient(circle at 8% 118%, var(--mask-opaque) 0%, transparent 92%);
mask-image: radial-gradient(circle at 8% 118%, var(--mask-opaque) 0%, transparent 92%);
}
/* ---------------------------------------------------------------------------
APERTURE — one resolved point of light.
A single soft field, off-centre. The quietest option that is not void.
Title cards, closing slides, empty states.
------------------------------------------------------------------------ */
.bg-aperture {
background-image: radial-gradient(ellipse 55% 65% at 74% 26%,
var(--bg-glow) 0%, transparent 68%);
}
/* ---------------------------------------------------------------------------
AIRY — resolving power, drawn.
The diffraction pattern of a point source through a circular aperture: a
bright central disc ringed by concentric fringes. This is the physical
definition of how well an instrument resolves one point of light, which is
the closest thing this brand has to a thesis in a single image.
The ring RADII are physically correct. Airy zeros fall at 1.220, 2.233,
3.238 and 4.241 (in units of lambda/D), so with the first zero placed at
8.6% the rest land at 15.7%, 22.8% and 29.9% by ratio, and the bright rings
peak at the midpoints between them.
The ring INTENSITIES are exaggerated. A true Airy disc holds about 84% of
the energy, leaving successive rings at roughly 1.7%, 0.4% and 0.2% — which
at our alpha cap would render as nothing at all. They are lifted here so the
structure reads, and this is the one place the system knowingly departs from
the physics. It is a background, not a measurement.
Use where radar would have been used, and never use radar: a sweeping scope
reads as scanning for targets, which is the opposite of what this company
does and a gift to anyone arguing against it in a public meeting.
------------------------------------------------------------------------ */
.bg-airy {
background-image: radial-gradient(circle at 70% 32%,
var(--bg-glow) 0%,
var(--bg-glow) 5.5%,
var(--bg-line-2) 7.2%,
transparent 8.6%, /* first zero · 1.220 */
var(--bg-line-2) 12.2%, /* first ring · midpoint */
transparent 15.7%, /* second zero · 2.233 */
var(--bg-line-3) 19.3%, /* second ring */
transparent 22.8%, /* third zero · 3.238 */
var(--bg-line-3) 26.4%, /* third ring */
transparent 29.9%, /* fourth zero · 4.241 */
transparent 100%);
}
/* ---------------------------------------------------------------------------
SHEET — the Publish counterpart.
A plotting grid. Pair with `.bg-registration` for corner marks on covers and
printed documents. This is the field for a council briefing.
------------------------------------------------------------------------ */
.bg-sheet {
background-image:
repeating-linear-gradient(90deg, var(--bg-line-3) 0 1px, transparent 1px 32px),
repeating-linear-gradient(0deg, var(--bg-line-3) 0 1px, transparent 1px 32px);
}
/* Corner registration marks. Explicit children rather than pseudo-elements,
because four corners need four boxes and a container only has two. */
.bg-registration { position: absolute; inset: 20px; pointer-events: none; }
.bg-registration i {
position: absolute; inline-size: 14px; block-size: 14px;
border-color: var(--bg-line); border-style: solid; border-width: 0;
}
.bg-registration i:nth-child(1) { inset-block-start: 0; inset-inline-start: 0; border-block-start-width: 1px; border-inline-start-width: 1px; }
.bg-registration i:nth-child(2) { inset-block-start: 0; inset-inline-end: 0; border-block-start-width: 1px; border-inline-end-width: 1px; }
.bg-registration i:nth-child(3) { inset-block-end: 0; inset-inline-start: 0; border-block-end-width: 1px; border-inline-start-width: 1px; }
.bg-registration i:nth-child(4) { inset-block-end: 0; inset-inline-end: 0; border-block-end-width: 1px; border-inline-end-width: 1px; }
/* ---------------------------------------------------------------------------
CHANNELS and FAN — the two figurative fields.
These carry drawn geometry rather than a repeat, so they ship as SVG rather
than as a gradient. Their strokes read the same tokens, so they retheme with
everything else. Markup for both is in this folder's index.html; copy the