/* Email Template Examples base: fonts, reset, type, components, logo, header, footer, cookie banner.
Look: "Royal Original" brand book v1.0 (docs/brand/Royal-Original-Brand-Book.pdf). White space, one royal blue,
light DM Sans headings, colorful email templates do the work. No gradients, glow, blur, textures or stamps.
Tokens live in styles/tokens.css (loaded first, generated from docs/brand/tokens.json). Use them in every page:
--color-* page surface surface-tint surface-raised text text-muted border control-border primary primary-hover
primary-active on-primary accent link focus success(-bg) warning(-bg) error(-bg) info(-bg)
disabled-bg disabled-text overlay
--font-display / --font-body (DM Sans) / --font-mono (IBM Plex Mono, code only)
--font-size-{role} --font-weight-{role} --line-height-{role} --letter-spacing-{role}
roles: display h1 h2 h3 h4 lead body small caption label code
--space-0..10 (0 4 8 12 16 24 32 48 64 96 128) --radius-pill control card tooltip dropdown toast modal panel canvas
--shadow-card raised modal --motion-duration-fast base exit story, --motion-ease
--page-gutter --grid-columns --grid-gap --section-padding --gallery-columns --blog-columns --panel-padding
--header-height --page-max, and here: --page-inline (gutter that also caps content at 1600px) */
/* ---------------------------------------------------------------------
* Fonts: self-hosted, OFL, Latin subset (licenses: fonts/OFL-*.txt).
* DM Sans is one variable file (weights 300-600, optical size axis kept).
* ------------------------------------------------------------------ */
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-Variable.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* Fallbacks sized to the real fonts (measured from the font files against Arial / Consolas), so the swap moves almost nothing (CLS).
Light 300 headings are narrower than regular text, so they get their own size-adjust. */
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 300; size-adjust: 90.7%; ascent-override: 109.4%; descent-override: 34.2%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400 700; size-adjust: 103.2%; ascent-override: 96.1%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Mono Fallback'; src: local('Consolas'); size-adjust: 109.1%; ascent-override: 93.9%; descent-override: 25.2%; line-gap-override: 0%; }
:root {
/* Side padding that keeps content inside the 1600px page max (book p08). Use it as padding-inline on full-width bands. */
--page-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
/* Reading measures (book p07) */
--measure-hero: 18ch;
--measure-heading: 22ch;
--measure-body: 70ch;
/* Blue bands always pair #1D4ED8 with #FFFFFF (book p04), in both themes. */
--band-blue: #1D4ED8;
--on-band-blue: #FFFFFF;
/* Danger button: error fill + white text (book p13, light theme). */
--danger-bg: var(--color-error);
--danger-text: #FFFFFF;
/* Checkbox tick, colored like on-primary */
--check-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------------
* Reset + type (book p07)
* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
font-family: var(--font-body);
font-size: var(--font-size-body);
font-weight: var(--font-weight-body);
line-height: var(--line-height-body);
color: var(--color-text);
background: var(--color-page);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
/* Email previews keep their own colors and light scheme (their own light/dark toggle is separate). */
iframe { color-scheme: light; }
a { color: var(--color-link); text-decoration-line: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (hover: hover) { a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; } }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
b, strong { font-weight: 600; }
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-h1); }
h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2); }
h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
p { text-wrap: pretty; }
small { font-size: var(--font-size-small); line-height: var(--line-height-small); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--font-size-code); line-height: var(--line-height-code); font-weight: 400; }
ul[class], ol[class] { list-style: none; padding: 0; }
::selection { background: var(--color-primary); color: var(--color-on-primary); }
/* Type helpers. Display is for the homepage and major campaign headlines only. */
.t-display { font-size: var(--font-size-display); font-weight: var(--font-weight-display); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); }
.t-h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-h1); }
.t-h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2); }
.t-h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
.t-h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.t-lead { font-size: var(--font-size-lead); font-weight: var(--font-weight-lead); line-height: var(--line-height-lead); }
.t-small { font-size: var(--font-size-small); line-height: var(--line-height-small); }
.t-muted { color: var(--color-text-muted); }
/* Measures (book p07): 18ch centered hero heading, 22ch other headings, 55-75ch body. */
.measure-hero { max-width: var(--measure-hero); }
.measure-heading { max-width: var(--measure-heading); }
.measure-body { max-width: var(--measure-body); }
/* Full-width band with content kept inside the page max. */
.page-wrap { padding-inline: var(--page-inline); }
/* ---------------------------------------------------------------------
* Focus (book p06, p12): 3px ring, 3px offset, surface halo in the gap so it shows on blue too.
* ------------------------------------------------------------------ */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--color-surface); }
/* On royal-blue bands: a white ring on the blue. */
.band--blue :focus-visible { outline-color: var(--on-band-blue); box-shadow: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
position: absolute; left: 12px; top: -80px; z-index: 100;
display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-control);
font-weight: var(--font-weight-label); text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--color-on-primary); }
/* Icons: Lucide outline, 24px box, 1.75 stroke (set on the svg). Inherit the text color. */
.icon { width: 24px; height: 24px; flex: none; }
/* Royal-blue band: always #1D4ED8 with white text (book p04). */
.band--blue { background: var(--band-blue); color: var(--on-band-blue); }
.band--blue a:not(.btn) { color: var(--on-band-blue); }
/* Old accent word (Fraunces italic in v2): now plain DM Sans in primary blue. */
.accent { font-family: var(--font-display); font-style: normal; color: var(--color-primary); }
/* Small blue label above headings (concept p22). Book: labels stay 16px, no all-caps paragraphs. */
.eyebrow {
display: inline-block;
font-family: var(--font-body); font-size: var(--font-size-label); font-weight: var(--font-weight-label);
line-height: var(--line-height-label); letter-spacing: var(--letter-spacing-label);
text-transform: uppercase; color: var(--color-primary);
}
/* ---------------------------------------------------------------------
* Buttons (book p13). Sizes: --sm 44px / default 48px / --lg 56px. Label type, 8px icon gap, 8px radius.
* Old modifiers keep working: --ghost = secondary, --stamp = primary, --lg = large.
* Color changes at once; only transform moves (press scale .98).
* ------------------------------------------------------------------ */
.btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: 48px; padding: 0 20px;
font-family: var(--font-body); font-size: var(--font-size-label); font-weight: var(--font-weight-label);
line-height: var(--line-height-label); letter-spacing: var(--letter-spacing-label);
text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
color: var(--color-primary); background: var(--color-surface);
border: 1px solid var(--color-primary); border-radius: var(--radius-control);
transition: transform var(--motion-duration-fast) var(--motion-ease);
-webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 20px; height: 20px; }
.btn:active { transform: scale(.98); }
.btn--primary, .btn--stamp { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.btn--primary:active, .btn--stamp:active { background: var(--color-primary-active); border-color: var(--color-primary-active); }
.btn--secondary, .btn--ghost { color: var(--color-primary); background: var(--color-surface); border-color: var(--color-primary); }
.btn--secondary:active, .btn--ghost:active { background: var(--color-info-bg); }
.btn--quiet, .btn--text { color: var(--color-link); background: transparent; border-color: transparent; }
.btn--quiet:active, .btn--text:active { color: var(--color-primary-active); }
.btn--danger { color: var(--danger-text); background: var(--danger-bg); border-color: var(--color-error); }
.btn--danger:active { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-error); }
@media (hover: hover) {
.btn:hover { color: var(--color-primary); background: var(--color-surface-tint); }
.btn--primary:hover, .btn--stamp:hover { color: var(--color-on-primary); background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn--quiet:hover, .btn--text:hover { color: var(--color-link); background: transparent; text-decoration: underline; text-underline-offset: .2em; }
.btn--danger:hover { color: var(--danger-text); background: var(--danger-bg); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-error); }
}
/* Buttons on royal-blue bands (.band--blue): white fill with blue text, or white outline. */
.btn--on-blue { color: var(--band-blue); background: var(--on-band-blue); border-color: var(--on-band-blue); }
.btn--on-blue-outline { color: var(--on-band-blue); background: transparent; border-color: var(--on-band-blue); }
@media (hover: hover) {
.btn--on-blue:hover { color: var(--color-primary-hover); background: var(--color-surface-tint); border-color: var(--color-surface-tint); }
.btn--on-blue-outline:hover { color: var(--on-band-blue); background: var(--color-primary-hover); }
}
.btn--on-blue:active { background: var(--color-info-bg); }
.btn--on-blue-outline:active { background: var(--color-primary-active); }
.btn--sm { min-height: 44px; padding: 0 16px; }
.btn--lg { min-height: 56px; padding: 0 24px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: 44px; min-height: 44px; padding: 0; }
.btn--icon.btn--lg { width: 56px; }
/* Disabled and loading suppress hover and press (book p12). Loading keeps the variant colors and width. */
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
color: var(--color-disabled-text); background: var(--color-disabled-bg); border-color: var(--color-disabled-bg);
cursor: not-allowed; transform: none; box-shadow: none; text-decoration: none;
}
.btn[aria-busy="true"], .btn.is-loading { cursor: progress; pointer-events: none; transform: none; }
/* 16px spinner for loading states: put before the verb. */
.spinner {
display: inline-block; width: 16px; height: 16px; flex: none;
border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
animation: ete-spin .8s linear infinite;
}
@keyframes ete-spin { to { transform: rotate(360deg); } }
/* ---------------------------------------------------------------------
* Form fields (book p14): 48px, 12px padding, 8px radius, control-border. Label above, helper below.
* Markup:
* ------------------------------------------------------------------ */
.field { display: grid; gap: var(--space-2); align-content: start; }
.field > label, .field__label { font-size: var(--font-size-label); font-weight: var(--font-weight-label); line-height: var(--line-height-label); color: var(--color-text); }
.input, .select, .textarea,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .field select, .field textarea {
display: block; width: 100%; min-height: 48px; padding: 0 12px;
font-size: var(--font-size-body); line-height: 1.4; color: var(--color-text);
background: var(--color-surface); border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
-webkit-appearance: none; appearance: none;
}
.textarea, .field textarea { min-height: 144px; padding: 12px; resize: vertical; line-height: var(--line-height-body); }
.select, .field select {
padding-right: 44px; cursor: pointer;
/* The same chevron as every other menu (Lucide chevron-down). */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-position: right 12px center; background-size: 20px 20px; background-repeat: no-repeat;
}
::placeholder { color: var(--color-text-muted); opacity: 1; }
/* Keyboard users: the sticky header never covers the focused field. */
input, select, textarea, button, summary { scroll-margin-top: calc(var(--header-height) + 16px); }
.admin-bar input, .admin-bar select, .admin-bar textarea, .admin-bar button { scroll-margin-top: calc(var(--header-height) + 48px); }
@media (hover: hover) {
.input:hover, .select:hover, .textarea:hover,
.field input:not([type="checkbox"]):not([type="radio"]):hover, .field select:hover, .field textarea:hover { border-color: var(--color-text); }
}
/* Invalid: 2px error border (the inset shadow adds the second pixel, so the field does not move). */
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"], .field [aria-invalid="true"] {
border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error);
}
.input[aria-invalid="true"]:focus-visible, .field [aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--color-error), 0 0 0 3px var(--color-surface); }
.input:disabled, .select:disabled, .textarea:disabled, .field :disabled { color: var(--color-disabled-text); background-color: var(--color-disabled-bg); border-color: var(--color-disabled-bg); cursor: not-allowed; }
.field__hint { font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-text-muted); }
/* Error: ink + icon + text, never color alone (book p12). */
.field__error { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-error); }
.field__error:not(:empty)::before {
content: ''; width: 20px; height: 20px; flex: none; margin-top: 1px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field__error[hidden] { display: none; }
/* Checkbox: 20px square inside a 44px label target, 2px control-border, checked = primary fill. */
.check { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; cursor: pointer; }
.check input[type="checkbox"], input.checkbox {
-webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
background: var(--color-surface) center / 14px no-repeat; border: 2px solid var(--color-control-border); border-radius: 4px;
}
.check input[type="checkbox"]:checked, input.checkbox:checked { background-color: var(--color-primary); background-image: var(--check-tick); border-color: var(--color-primary); }
.check input[type="checkbox"]:disabled, input.checkbox:disabled { background-color: var(--color-disabled-bg); border-color: var(--color-disabled-bg); cursor: not-allowed; }
/* Toggle: 44px target, 40x24 track, 20px thumb. Show the text Off / On next to it.
Markup: */
.toggle { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 40px; height: 24px; margin: 0; cursor: pointer; }
.toggle__track { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--color-control-border); }
.toggle__track::after {
content: ''; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
background: var(--color-surface); transition: transform var(--motion-duration-fast) var(--motion-ease);
}
.toggle input:checked + .toggle__track { background: var(--color-primary); }
.toggle input:checked + .toggle__track::after { transform: translateX(16px); }
.toggle input:focus-visible + .toggle__track { outline: 3px solid var(--color-focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--color-surface); }
.toggle input:disabled + .toggle__track { background: var(--color-disabled-bg); }
/* ---------------------------------------------------------------------
* Chips, badges, tabs (book p09, p13, p15)
* ------------------------------------------------------------------ */
/* Tag (read-only): pill, no border. */
.chip {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 4px 12px; border-radius: var(--radius-pill);
font-size: var(--font-size-small); line-height: var(--line-height-label); font-weight: 400;
color: var(--color-text); background: var(--color-surface-tint);
}
/* Filter chip (interactive): 44px, 1px control-border; selected = primary fill. */
a.chip, button.chip, .chip--filter {
min-height: 44px; padding: 0 16px; text-decoration: none; cursor: pointer;
background: var(--color-surface); border: 1px solid var(--color-control-border);
transition: transform var(--motion-duration-fast) var(--motion-ease);
}
a.chip:active, button.chip:active { transform: scale(.98); }
@media (hover: hover) { a.chip:hover, button.chip:hover { color: var(--color-text); border-color: var(--color-text); } }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current], .chip.is-active,
.chip[aria-pressed="true"]:hover, .chip[aria-current]:hover, .chip.is-active:hover { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
/* Badge (read-only): 16px text, 4px / 8px padding. Draft muted, Shared info, Coming soon warning. */
.badge {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: 4px 8px; border-radius: var(--radius-pill);
font-size: var(--font-size-small); font-weight: var(--font-weight-label); line-height: var(--line-height-label);
color: var(--color-text-muted); background: var(--color-disabled-bg);
}
.badge--draft { color: var(--color-text-muted); background: var(--color-disabled-bg); }
.badge--shared, .badge--info { color: var(--color-info); background: var(--color-info-bg); }
.badge--soon, .badge--warning { color: var(--color-warning); background: var(--color-warning-bg); }
.badge--success { color: var(--color-success); background: var(--color-success-bg); }
.badge--error { color: var(--color-error); background: var(--color-error-bg); }
.badge--primary { color: var(--color-on-primary); background: var(--color-primary); }
/* Tabs: 48px, 2px primary underline on the selected tab. Markup: role="tablist" > role="tab" aria-selected. */
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; }
.tab {
display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 16px;
font-size: var(--font-size-label); font-weight: var(--font-weight-label); color: var(--color-text-muted);
background: none; border: 0; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
box-shadow: inset 0 -2px 0 transparent;
}
@media (hover: hover) { .tab:hover { color: var(--color-text); } }
.tab[aria-selected="true"], .tab.is-active, .tab[aria-current] { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }
.tab:focus-visible { outline-offset: -3px; box-shadow: inset 0 -2px 0 var(--color-primary); }
/* Accordion (book p15): 56px trigger, full row, 18px title, 16px body with 16px bottom space. No height animation.
Markup: ..
..