/*
* Font faces are declared in fonts.css, imported here.
* This keeps font declarations separate from design system rules
* and makes it easy to switch between self-hosted and Google Fonts.
*
* If you prefer to link fonts.css separately in HTML , remove
* this @import and add:
* before signalarc.css
*/
@import url('./fonts.css');
/* ═══════════════════════════════════════════════════════════════════════
SIGNALARC DESIGN SYSTEM v2.0
Typography
Headings : Roboto Slab (300–700)
Body/UI : Lato (300–900)
Code : JetBrains Mono (400–500)
Scale : Major Third ×1.25 from 19px root. Min rendered size: 14px.
Palette : Warm ink on antique cream, single deep teal accent.
Theme : Light only — color-scheme: light declared on .
Accessibility
- WCAG AA colour contrast throughout
- Minimum text size: 14px (~0.74rem at 19px root)
- Focus indicators: 3px solid teal outline
- Reduced-motion: all animations disabled when prefers-reduced-motion
- All interactive elements: minimum 44×44px touch target
═══════════════════════════════════════════════════════════════════════ */
/* ── Design tokens ──────────────────────────────────────────────────── */
:root {
/* Colour */
--ink: #1a1815; /* primary text */
--ink-2: #38342e; /* secondary text, card body */
--ink-3: #5e5850; /* muted — captions, placeholders */
--ink-4: #9a9186; /* very muted — fine print */
--paper: #f7f3ed; /* page background */
--paper-2: #edeae3; /* tinted sections, table rows, callouts */
--paper-3: #e4e0d8; /* borders, striping */
--white: #ffffff; /* card surfaces */
--teal: #1a6e6e; /* primary accent */
--teal-dark: #115454; /* hover / active */
--teal-tint: #e0f2f2; /* teal background wash */
--teal-mid: #3aa8a8; /* lighter teal for accents */
--slate: #2e4c65; /* secondary — badges, diagrams */
--slate-tint: #e0eaf3; /* slate background wash */
--green: #2d6a2d; /* success / tip states */
--green-tint: #e4f2e4;
--rule: #d0c9bb; /* default border */
--rule-heavy: #a09486; /* stronger border */
--shadow: rgba(26, 24, 21, 0.09);
/* Type scale — Major Third (×1.25) from 19px */
--root: 19px;
--t-sm: 0.74rem; /* ~14px — minimum. labels, captions, code */
--t-base: 1rem; /* 19px — body text */
--t-md: 1.15rem; /* ~22px — lead paragraphs */
--t-lg: 1.25rem; /* ~24px — card titles */
--t-xl: 1.563rem; /* ~30px — h3, section headings */
--t-2xl: 1.953rem; /* ~37px — h2 */
--t-3xl: 2.441rem; /* ~46px — inner page h1 */
--t-4xl: 3.052rem; /* ~58px — hero h1 min */
--t-5xl: 3.815rem; /* ~72px — hero h1 max */
/* Spacing — 8px grid expressed in rem at 19px root */
--s1: 0.25rem; /* ~5px */
--s2: 0.5rem; /* ~10px */
--s3: 0.75rem; /* ~14px */
--s4: 1rem; /* ~19px */
--s5: 1.25rem; /* ~24px */
--s6: 1.5rem; /* ~29px */
--s8: 2rem; /* ~38px */
--s10: 2.5rem; /* ~48px */
--s12: 3rem; /* ~57px */
--s16: 4rem; /* ~76px */
--s20: 5rem; /* ~95px */
--s24: 6rem; /* ~114px */
--s32: 8rem; /* ~152px */
/* Layout */
--max-w: 84rem;
--measure: 40rem; /* optimal line length ~65 chars at 19px */
--wide: 54rem; /* wider measure for lead paragraphs */
/* Font stacks */
--display: 'Roboto Slab', 'Rockwell', Georgia, serif;
--body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
--mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo,
Consolas, 'Courier New', monospace;
/* Motion */
--ease: cubic-bezier(0.25, 0, 0.25, 1);
--ease-out: cubic-bezier(0, 0, 0.3, 1);
--fast: 140ms;
--mid: 260ms;
--slow: 420ms;
}
/* ── Reset ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: var(--root);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
color-scheme: light; /* forces light regardless of OS setting */
scroll-behavior: smooth;
hanging-punctuation: first last;
}
body {
font-family: var(--body);
font-size: var(--t-base);
line-height: 1.78;
color: var(--ink);
background-color: var(--paper);
min-height: 100dvh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ── Accessibility utilities ────────────────────────────────────────── */
/* Skip link — must be first focusable element in every page */
.skip-link {
position: absolute;
top: -300%;
left: var(--s4);
z-index: 9999;
background: var(--teal);
color: #fff;
font-family: var(--body);
font-size: var(--t-sm);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: var(--s3) var(--s6);
text-decoration: none;
border-radius: 0 0 4px 4px;
transition: top var(--fast);
}
.skip-link:focus {
top: 0;
}
/* Visually hidden — accessible to screen readers */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Global focus indicator */
:focus-visible {
outline: 3px solid var(--teal);
outline-offset: 3px;
border-radius: 2px;
}
/* Ensure sufficient touch targets (44×44px minimum) */
button,
[role="button"],
input,
select,
textarea,
a {
min-height: 44px;
/* height is not forced — this ensures padding compensates where needed */
}
/* Inline links don't need enforced height */
p a,
li a,
td a,
th a,
blockquote a,
figcaption a {
min-height: unset;
}
/* ── Typography ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--display);
color: var(--ink);
text-wrap: balance;
line-height: 1.15;
}
h1 {
font-size: clamp(var(--t-3xl), 5vw, var(--t-5xl));
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.06;
}
h2 {
font-size: var(--t-3xl);
font-weight: 600;
letter-spacing: -0.02em;
margin-top: var(--s16);
margin-bottom: var(--s6);
}
h3 {
font-size: var(--t-2xl);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.25;
margin-top: var(--s12);
margin-bottom: var(--s4);
}
h4 {
font-size: var(--t-xl);
font-weight: 500;
line-height: 1.3;
margin-top: var(--s10);
margin-bottom: var(--s3);
}
h5 {
font-size: var(--t-lg);
font-weight: 700;
margin-top: var(--s8);
margin-bottom: var(--s2);
}
h6 {
font-size: var(--t-base);
font-weight: 700;
margin-top: var(--s6);
margin-bottom: var(--s2);
}
p {
max-width: var(--measure);
line-height: 1.78;
text-wrap: pretty;
}
p + p {
margin-top: var(--s4);
}
/* Lead paragraph — used immediately after major headings */
.lead {
font-size: var(--t-md);
line-height: 1.65;
color: var(--ink-2);
max-width: var(--wide);
}
/* Links */
a {
color: var(--teal);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
text-decoration-color: color-mix(in srgb, var(--teal) 30%, transparent);
transition: color var(--fast), text-decoration-color var(--fast);
}
a:hover {
color: var(--teal-dark);
text-decoration-color: var(--teal-dark);
}
/* External links get a visual indicator */
a[target="_blank"]::after {
content: " ↗";
font-size: 0.8em;
vertical-align: super;
speak: never; /* decorative — screen readers get aria-label */
aria-hidden: "true";
}
/* Inline elements */
strong { font-weight: 700; }
em { font-style: italic; }
small { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55; }
mark { background: var(--teal-tint); color: var(--ink); padding: 0 0.2em; }
del { color: var(--ink-3); }
ins { color: var(--green); text-decoration-color: var(--green); }
abbr[title] {
font-variant-caps: all-small-caps;
letter-spacing: 0.05em;
text-decoration: underline dotted;
text-decoration-color: var(--rule-heavy);
cursor: help;
}
/* Horizontal rule */
hr {
border: none;
border-top: 1px solid var(--rule);
margin-block: var(--s12);
}
/* Blockquote */
blockquote {
position: relative;
font-family: var(--display);
font-size: var(--t-xl);
font-weight: 300;
line-height: 1.45;
color: var(--ink);
padding: var(--s10) var(--s12) var(--s10) var(--s16);
margin-block: var(--s16);
border-left: 3px solid var(--teal);
letter-spacing: -0.01em;
}
blockquote::before {
content: '\201C';
position: absolute;
left: var(--s4);
top: 0.05em;
font-size: 8rem;
line-height: 1;
color: var(--teal);
opacity: 0.12;
pointer-events: none;
aria-hidden: "true";
}
blockquote p {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
max-width: 36rem;
margin-top: 0;
}
blockquote p + p {
margin-top: var(--s4);
}
blockquote cite {
display: block;
margin-top: var(--s6);
font-family: var(--body);
font-size: var(--t-sm);
font-style: normal;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
blockquote cite::before {
content: '— ';
}
/* Lists */
ul, ol {
padding-left: var(--s6);
max-width: var(--measure);
}
li {
margin-bottom: var(--s2);
line-height: 1.72;
}
/* Styled content lists */
.content-list {
list-style: none;
padding-left: var(--s6);
}
.content-list > li {
position: relative;
}
.content-list > li::before {
content: '–';
position: absolute;
left: calc(-1 * var(--s5));
color: var(--teal);
font-family: var(--display);
line-height: 1.72;
}
/* Definition list */
dl { max-width: var(--measure); }
dt {
font-family: var(--body);
font-size: var(--t-sm);
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-2);
margin-top: var(--s6);
}
dd {
margin-left: var(--s5);
color: var(--ink-2);
border-left: 2px solid var(--rule);
padding-left: var(--s5);
margin-top: var(--s1);
}
/* ── Code ───────────────────────────────────────────────────────────── */
code, kbd, samp, var {
font-family: var(--mono);
font-size: 0.87em;
font-variant-ligatures: normal;
}
/* Inline code */
:not(pre) > code {
background: var(--teal-tint);
color: var(--teal-dark);
padding: 0.14em 0.48em 0.10em;
border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent);
font-size: 0.85em;
white-space: nowrap;
}
/* Keyboard input */
kbd {
background: var(--paper-2);
border: 1px solid var(--rule-heavy);
border-bottom-width: 2px;
padding: 0.12em 0.6em;
font-size: var(--t-sm);
color: var(--ink-2);
box-shadow: 0 1px 0 var(--rule-heavy);
}
/* Code block container */
.code-block {
position: relative;
margin-block: var(--s10);
}
pre {
background: #f2f0eb;
color: #2a2724;
padding: var(--s10);
overflow-x: auto;
line-height: 1.45;
tab-size: 2;
border: 1px solid var(--rule);
border-left: 4px solid var(--teal);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}
pre code {
font-family: var(--mono);
font-size: var(--t-sm);
color: inherit;
background: none;
border: none;
padding: 0;
white-space: pre;
line-height: 1.45;
}
/* Language label via data attribute */
pre[data-lang]::before {
content: attr(data-lang);
display: block;
font-family: var(--body);
font-size: var(--t-sm);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: var(--s6);
padding-bottom: var(--s4);
border-bottom: 1px solid var(--rule);
}
/* Copy button */
.copy-btn {
position: absolute;
top: var(--s4);
right: var(--s5);
min-height: 44px; /* accessible touch target */
padding: var(--s2) var(--s5);
background: var(--paper-2);
border: 1px solid var(--rule);
color: var(--ink-3);
font-family: var(--body);
font-size: var(--t-sm);
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
cursor: pointer;
transition: all var(--fast);
}
.copy-btn:hover {
background: var(--paper-3);
color: var(--ink);
border-color: var(--rule-heavy);
}
.copy-btn[data-copied="true"] {
color: var(--green);
border-color: var(--green);
}
/* Syntax tokens — light theme */
.tok-comment { color: #6e6660; font-style: italic; }
.tok-keyword { color: #1a6e6e; }
.tok-string { color: #2d6a2d; }
.tok-number { color: #7a4e00; }
.tok-function { color: #1a3e7a; }
.tok-type { color: #5a2e7a; }
.tok-operator { color: #4a4440; }
.tok-punct { color: #8a8278; }
.tok-element { color: #1a6e6e; }
.tok-attrib { color: #1a3e7a; }
.tok-value { color: #2d6a2d; }
.tok-ns { color: #5a2e7a; }
.tok-pi { color: #6e6660; font-style: italic; }
/* ── Layout ─────────────────────────────────────────────────────────── */
.container {
width: min(var(--max-w), 100% - 3rem);
margin-inline: auto;
}
/* Sections */
.section {
padding-block: var(--s24);
}
.section + .section {
border-top: 1px solid var(--rule);
}
.section--tint {
background: var(--paper-2);
}
/* Two-column editorial grid: main text + sticky marginalia */
.editorial {
display: grid;
grid-template-columns: minmax(0, 46rem) 17rem;
gap: var(--s20);
align-items: start;
}
@media (max-width: 68rem) {
.editorial {
grid-template-columns: 1fr;
}
}
/* Section title block */
.section-title {
margin-bottom: var(--s16);
}
.section-title h2 {
margin-top: 0;
margin-bottom: var(--s6);
}
/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--paper) 96%, transparent);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid var(--rule);
}
/* Teal head-rule — the primary brand stripe */
.site-header::before {
content: '';
display: block;
height: 3px;
background: linear-gradient(
90deg,
transparent 0%,
var(--teal) 10%,
var(--teal) 90%,
transparent 100%
);
}
.header-inner {
display: flex;
align-items: center;
padding-block: var(--s5);
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: var(--s3);
text-decoration: none;
flex-shrink: 0;
min-height: 44px;
}
.logo__mark {
width: 2.4rem;
height: 2.4rem;
flex-shrink: 0;
}
.logo__name {
font-family: var(--display);
font-size: var(--t-xl);
font-weight: 400;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1;
}
.logo__name em {
color: var(--teal);
font-style: normal;
}
.logo:hover .logo__name {
color: var(--ink);
text-decoration: none;
}
/* Suppress the external link indicator on the logo */
.logo::after {
display: none;
}
/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
padding-block: var(--s32);
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--rule);
}
/* Subtle radial washes — purely atmospheric, not informational */
.hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
aria-hidden: "true";
background:
radial-gradient(ellipse 55% 80% at 68% 38%,
color-mix(in srgb, var(--teal) 6%, transparent) 0%, transparent 72%),
radial-gradient(ellipse 40% 60% at 5% 70%,
color-mix(in srgb, var(--slate) 4%, transparent) 0%, transparent 72%);
}
.hero__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s20);
align-items: end;
position: relative;
z-index: 1;
}
@media (max-width: 56rem) {
.hero__inner { grid-template-columns: 1fr; }
.hero__visual { order: -1; }
}
.hero h1 { margin-bottom: var(--s8); }
.hero h1 em { font-style: italic; color: var(--teal); }
.hero .lead { margin-bottom: var(--s12); }
.hero__actions {
display: flex;
align-items: center;
gap: var(--s6);
flex-wrap: wrap;
}
/* ── Eyebrow label ──────────────────────────────────────────────────── */
/*
The .eyebrow class styles a paragraph that precedes a heading.
It is a element — not a heading — and must not replace headings.
It provides visual context and the teal rule decoration.
*/
.eyebrow {
font-family: var(--body);
font-size: var(--t-sm);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal);
display: flex;
align-items: center;
gap: var(--s4);
margin-bottom: var(--s6);
}
.eyebrow::before {
content: '';
width: 2.5rem;
height: 2px;
background: var(--teal);
flex-shrink: 0;
}
/* ── Page header (inner pages) ──────────────────────────────────────── */
.page-header {
padding-block: var(--s20) var(--s16);
border-bottom: 1px solid var(--rule);
position: relative;
}
.page-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 5rem;
height: 3px;
background: var(--teal);
}
.page-header h1 {
margin-bottom: var(--s6);
margin-top: 0;
}
/* ── Breadcrumb ─────────────────────────────────────────────────────── */
/*
Use: