/* ==========================================================================
Apps 4 That — UI Component Layer (a4t-ui.css)
--------------------------------------------------------------------------
The one file most apps link. Imports tokens, sets a base, and ships the
reusable component classes used across every Apps 4 That app.
USAGE (static app):
1. Copy tokens.css + a4t-ui.css into your app's /assets.
2.
3. Inter from Google Fonts (see README).
4. Override the accent: (or per app)
5. Dark-UI apps add class="theme-dark" to .
USAGE (Next.js):
import "../design-system/a4t-ui.css"; // in app/layout.js
(or copy both files into the project and import the copy.)
Mobile-first. Accessible. prefers-reduced-motion respected at the bottom.
========================================================================== */
@import "./tokens.css";
/* --------------------------------------------------------------------------
1. RESET / BASE
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-normal);
font-weight: var(--fw-regular);
color: var(--text);
background:
radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--c-coral) 12%, transparent), transparent 22rem),
radial-gradient(circle at 92% 7%, color-mix(in srgb, var(--c-teal) 12%, transparent), transparent 24rem),
radial-gradient(circle at 72% 82%, color-mix(in srgb, var(--c-mustard) 12%, transparent), transparent 22rem),
var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis-weight: none;
text-rendering: optimizeLegibility;
min-height: 100dvh;
}
img, picture, svg, video, canvas {
display: block;
max-width: 100%;
height: auto;
}
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--text-link); text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-strong); }
::selection { background: var(--selection-bg); }
:where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-display);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
letter-spacing: var(--ls-tight);
color: var(--text);
text-wrap: balance;
}
p { text-wrap: pretty; }
:where(ul, ol) { padding-left: 1.25em; }
hr {
border: 0;
border-top: 1px solid var(--surface-line);
margin: var(--space-6) 0;
}
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
/* Global visible focus — every interactive element gets a clear ring. */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* --------------------------------------------------------------------------
2. TYPE UTILITIES (map the fluid scale to classes)
-------------------------------------------------------------------------- */
.display { font-size: var(--fs-display); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.h1, .text-h1 { font-size: var(--fs-h1); }
.h2, .text-h2 { font-size: var(--fs-h2); }
.h3, .text-h3 { font-size: var(--fs-h3); }
.lede {
font-size: var(--fs-lede);
line-height: var(--lh-relaxed);
color: var(--text-muted);
font-weight: var(--fw-regular);
text-wrap: pretty;
}
.body { font-size: var(--fs-body); }
.caption { font-size: var(--fs-caption); color: var(--text-faint); line-height: var(--lh-snug); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.text-balance{ text-wrap: balance; }
/* Eyebrow + section label — small uppercase accent kicker above a heading. */
.a4t-eyebrow,
.section-label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
letter-spacing: 0;
text-transform: uppercase;
color: var(--accent);
line-height: 1;
}
.a4t-eyebrow::before {
content: "";
width: 1.7rem;
height: 0.75rem;
border-radius: 0;
background:
radial-gradient(circle at 0.35rem 50%, var(--c-coral) 0 0.25rem, transparent 0.28rem),
radial-gradient(circle at 0.85rem 50%, var(--c-mustard) 0 0.25rem, transparent 0.28rem),
radial-gradient(circle at 1.35rem 50%, var(--c-teal) 0 0.25rem, transparent 0.28rem);
}
/* --------------------------------------------------------------------------
3. LAYOUT — container + simple stack/section helpers
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: clamp(var(--space-7), 5vw, var(--space-9)); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.grid {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
/* --------------------------------------------------------------------------
4. SKIP LINK (accessibility — first focusable element)
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
left: var(--space-3);
top: var(--space-3);
z-index: var(--z-toast);
transform: translateY(-150%);
background: var(--accent);
color: var(--accent-contrast);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
font-weight: var(--fw-semibold);
box-shadow: var(--shadow-md);
transition: transform var(--t-base);
}
.skip-link:focus { transform: translateY(0); }
/* --------------------------------------------------------------------------
5. HEADER + FOOTER
-------------------------------------------------------------------------- */
.a4t-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--surface-line);
}
.a4t-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: 3.5rem;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.a4t-brand {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: var(--fw-bold);
letter-spacing: -0.01em;
color: var(--text);
text-decoration: none;
}
.a4t-brand:hover { color: var(--text); }
.a4t-nav { display: flex; align-items: center; gap: var(--space-1); }
.a4t-nav a {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--text-muted);
text-decoration: none;
font-weight: var(--fw-medium);
min-height: var(--tap-min);
display: inline-flex;
align-items: center;
transition: background var(--t-fast), color var(--t-fast);
}
.a4t-nav a:hover { background: var(--bg-sunken); color: var(--text); }
.a4t-nav a[aria-current="page"] { color: var(--accent); }
.a4t-footer {
border-top: 1px solid var(--surface-line);
background: var(--bg-elevated);
color: var(--text-muted);
padding-block: var(--space-6);
margin-top: var(--space-8);
}
.a4t-footer__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
@media (min-width: 40rem) {
.a4t-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.a4t-footer__legal { /* legal-links area */
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
align-items: center;
font-size: var(--fs-caption);
}
.a4t-footer__legal a {
color: var(--text-muted);
text-decoration: none;
min-height: var(--tap-min);
display: inline-flex;
align-items: center;
}
.a4t-footer__legal a:hover { color: var(--accent); text-decoration: underline; }
.a4t-footer__legal .sep { color: var(--text-faint); }
.a4t-footer__disclaimer { /* persistent footer disclaimer note */
font-size: var(--fs-caption);
color: var(--text-faint);
max-width: 60ch;
line-height: var(--lh-snug);
}
/* --------------------------------------------------------------------------
6. BUTTONS (>=44px, focus-visible, primary / accent / ghost)
-------------------------------------------------------------------------- */
.btn {
--_bg: var(--c-midnight);
--_fg: var(--c-white);
--_bd: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--tap-min);
min-width: var(--tap-min);
padding: 0.7rem 1.25rem;
font-weight: var(--fw-semibold);
font-size: var(--fs-body);
line-height: 1.1;
color: var(--_fg);
background: var(--_bg);
border: 2px solid var(--_bd);
border-radius: var(--radius-md);
cursor: pointer;
text-decoration: none;
user-select: none;
white-space: nowrap;
transition: transform var(--t-fast), box-shadow var(--t-base),
background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus), var(--shadow-sm); }
.btn[disabled], .btn[aria-disabled="true"] {
opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}
/* Primary = brand ink */
.btn--primary { --_bg: var(--c-midnight); --_fg: var(--c-white); }
.btn--primary:hover { --_bg: color-mix(in srgb, var(--c-midnight) 88%, #000 12%); }
.theme-dark .btn--primary { --_bg: var(--c-white); --_fg: var(--c-navy-dark); }
/* Accent = the per-app lead color */
.btn--accent { --_bg: var(--accent); --_fg: var(--accent-contrast); }
.btn--accent:hover { --_bg: var(--accent-strong); box-shadow: var(--shadow-accent); }
/* Ghost = outlined / transparent */
.btn--ghost {
--_bg: transparent; --_fg: var(--text); --_bd: var(--surface-line-strong);
}
.btn--ghost:hover { --_bg: var(--bg-sunken); --_bd: var(--accent); --_fg: var(--text); box-shadow: none; }
/* Quiet text button */
.btn--link {
--_bg: transparent; --_fg: var(--accent); --_bd: transparent;
padding-inline: var(--space-2); border-radius: var(--radius-sm);
}
.btn--link:hover { --_bg: var(--accent-soft); box-shadow: none; transform: none; }
/* Sizes + full width */
.btn--sm { min-height: 2.25rem; padding: 0.4rem 0.85rem; font-size: var(--fs-caption); }
.btn--lg { min-height: 3.25rem; padding: 0.95rem 1.75rem; font-size: var(--fs-lede); }
.btn--block { display: flex; width: 100%; }
/* --------------------------------------------------------------------------
7. CARD
-------------------------------------------------------------------------- */
.a4t-card {
position: relative;
background: var(--bg-elevated);
border: 1px solid var(--surface-line);
border-radius: var(--radius-card);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--space-3);
overflow: hidden;
}
.a4t-card--interactive {
text-decoration: none;
color: inherit;
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.a4t-card--interactive:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-line));
}
.a4t-card--accent { /* accent top-edge */
border-top: 3px solid var(--accent);
}
.a4t-card__title { font-size: var(--fs-h3); }
.a4t-card__body { color: var(--text-muted); }
/* --------------------------------------------------------------------------
8. FORMS — inputs / fields / select / textarea
-------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
font-weight: var(--fw-semibold);
font-size: var(--fs-caption);
color: var(--text);
}
.field__hint { font-size: var(--fs-caption); color: var(--text-faint); }
.field__error { font-size: var(--fs-caption); color: var(--c-danger); font-weight: var(--fw-medium); }
.input, .select, .textarea {
width: 100%;
min-height: var(--tap-min);
padding: 0.7rem 0.9rem;
font-size: var(--fs-body);
color: var(--text);
background: var(--bg-elevated);
border: 1.5px solid var(--surface-line-strong);
border-radius: var(--radius-md);
transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
appearance: none;
}
.textarea { min-height: 6rem; resize: vertical; line-height: var(--lh-normal); }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: var(--ring-focus);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
border-color: var(--c-danger);
}
.input:disabled, .select:disabled, .textarea:disabled {
background: var(--bg-sunken); color: var(--text-faint); cursor: not-allowed;
}
/* Select gets a caret */
.select {
padding-right: 2.5rem;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677693' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1.1rem;
}
/* Checkbox / radio rows */
.check {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: var(--tap-min);
cursor: pointer;
}
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); cursor: pointer; }
/* --------------------------------------------------------------------------
9. CHIP (filters, tags, selectable pills)
-------------------------------------------------------------------------- */
.a4t-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 2rem;
padding: 0.3rem 0.85rem;
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
color: var(--text-muted);
background: var(--bg-sunken);
border: 1.5px solid transparent;
border-radius: var(--radius-pill);
cursor: pointer;
user-select: none;
transition: all var(--t-fast);
}
.a4t-chip:hover { border-color: var(--surface-line-strong); color: var(--text); }
.a4t-chip[aria-pressed="true"],
.a4t-chip--active {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-strong);
}
.theme-dark .a4t-chip[aria-pressed="true"],
.theme-dark .a4t-chip--active { color: var(--text); }
.a4t-chip--static { cursor: default; }
/* --------------------------------------------------------------------------
10. NOTE (sticky note motif — delight, used sparingly)
-------------------------------------------------------------------------- */
.a4t-note {
position: relative;
background: var(--c-mustard);
color: var(--c-ink-900);
padding: var(--space-4) var(--space-4) var(--space-5);
border-radius: var(--radius-xs);
box-shadow: var(--shadow-md);
rotate: -1.5deg;
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
max-width: 22rem;
}
.a4t-workshop-rule {
height: 1rem;
margin-block: var(--space-6);
background:
radial-gradient(circle at 0.5rem 0.5rem, var(--c-coral) 0 0.18rem, transparent 0.22rem),
radial-gradient(circle at 1.75rem 0.5rem, var(--c-mustard) 0 0.18rem, transparent 0.22rem),
radial-gradient(circle at 3rem 0.5rem, var(--c-teal) 0 0.18rem, transparent 0.22rem);
background-size: 3.75rem 1rem;
}
.a4t-note::after { /* folded corner */
content: "";
position: absolute;
right: 0; bottom: 0;
width: 1.5rem; height: 1.5rem;
background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.12) 50%);
border-bottom-right-radius: var(--radius-xs);
}
.a4t-note--coral { background: color-mix(in srgb, var(--c-coral) 88%, #fff); }
.a4t-note--teal { background: color-mix(in srgb, var(--c-teal) 80%, #fff); }
.a4t-note--alt { rotate: 1.5deg; }
/* --------------------------------------------------------------------------
11. PROGRESS BAR
-------------------------------------------------------------------------- */
.a4t-progress {
--_value: 0%;
width: 100%;
height: 0.6rem;
background: var(--bg-sunken);
border-radius: var(--radius-pill);
overflow: hidden;
}
.a4t-progress__bar {
height: 100%;
width: var(--_value);
background: var(--accent);
border-radius: inherit;
transition: width var(--t-slow);
}
.a4t-progress--striped .a4t-progress__bar {
background-image: linear-gradient(45deg,
color-mix(in srgb, #fff 22%, transparent) 25%, transparent 25%,
transparent 50%, color-mix(in srgb, #fff 22%, transparent) 50%,
color-mix(in srgb, #fff 22%, transparent) 75%, transparent 75%);
background-size: 1rem 1rem;
}
/* Native