/* ==========================================================================
TEA – The Ethical Agency
Web Dev Style Guide / Design System
tea-styles.css · v1.0
--------------------------------------------------------------------------
HOW TO USE
1. Link this file in the of any page:
2. Use the design tokens (CSS variables) below instead of hard-coded
values. Re-theme the whole system by editing the tokens in :root.
3. Apply component classes (.btn, .card, .tabs, etc.) to markup.
Everything is namespaced/predictable and safe to copy per-component.
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS (edit these to re-theme everything)
========================================================================== */
:root {
/* --- TEA BRAND --------------------------------------------------------
Blue = LEAD colour · Green = ACCENT · gradient runs blue -> green.
Exact brand hexes are kept for fills/gradients; the *-strong / *-deep
shades are AA-safe versions used for small text & links. */
--tea-blue: #4C8497; /* LEAD brand colour (exact) */
--tea-green: #54B071; /* ACCENT brand colour (exact) */
/* organic "mesh" gradient: layered blue/green/teal blobs over a base blend */
--tea-gradient:
radial-gradient(70% 110% at 8% 12%, var(--tea-blue) 0%, rgba(76,132,151,0) 55%),
radial-gradient(75% 110% at 95% 92%, var(--tea-green) 0%, rgba(84,176,113,0) 55%),
radial-gradient(55% 80% at 80% 6%, #46a08f 0%, rgba(70,160,143,0) 50%),
radial-gradient(60% 90% at 20% 98%, #3f7f86 0%, rgba(63,127,134,0) 50%),
linear-gradient(120deg, var(--tea-blue) 0%, #3f8f86 48%, var(--tea-green) 100%);
/* Primary / interactive accent = lead blue */
--tea-accent: #4C8497; /* brand blue */
--tea-accent-hover: #38606e;
--tea-accent-active: #2c4c57;
--tea-accent-soft: #eaf1f4; /* light blue tint */
--tea-accent-contrast:#ffffff; /* text on accent */
--tea-accent-strong: #3b6675; /* AA-safe blue for text links (6.3:1) */
/* Green accent shades */
--tea-green-hover: #499a63;
--tea-green-deep: #39774c; /* AA-safe green for white-text fills (5.4:1) */
--tea-green-soft: #e9f4ed; /* light green tint */
/* --- Neutrals --- */
--tea-ink: #14181c; /* primary text */
--tea-ink-2: #3d4651; /* secondary text */
--tea-ink-3: #646e79; /* muted text (AA on white & grey panels) */
--tea-line: #e2e6ea; /* borders / dividers */
--tea-line-2: #eef1f4; /* subtle lines */
--tea-surface: #ffffff; /* cards / panels */
--tea-surface-2: #f6f8f9; /* page background blocks */
--tea-bg: #fbfcfd; /* page background */
/* --- Status colours --- */
--tea-success: #39774c; --tea-success-soft:#e9f4ed;
--tea-warning: #8f5a0e; --tea-warning-soft:#fbf2e1;
--tea-danger: #c2362f; --tea-danger-soft: #fbe9e8;
--tea-info: #2563a8; --tea-info-soft: #e7eff7;
/* --- Typography --- */
--tea-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; /* body */
--tea-font-heading: "Spline Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* headings */
--tea-font-mono: "SFMono-Regular", ui-monospace, "Cascadia Code",
Menlo, Consolas, monospace;
--tea-text-xs: 0.75rem; /* 12px */
--tea-text-sm: 0.875rem; /* 14px */
--tea-text-base: 1rem; /* 16px */
--tea-text-lg: 1.125rem; /* 18px */
--tea-text-xl: 1.375rem; /* 22px */
--tea-text-2xl: 1.75rem; /* 28px */
--tea-text-3xl: 2.25rem; /* 36px */
--tea-text-4xl: 3rem; /* 48px */
--tea-leading-tight: 1.12; /* headings – edit this one value to retune all heading leading */
--tea-leading-snug: 1.35;
--tea-leading-base: 1.5;
--tea-weight-regular: 400;
--tea-weight-medium: 500;
--tea-weight-semibold:600;
--tea-weight-bold: 700;
/* --- Spacing scale (4px base) --- */
--tea-space-1: 0.25rem; /* 4 */
--tea-space-2: 0.5rem; /* 8 */
--tea-space-3: 0.75rem; /* 12 */
--tea-space-4: 1rem; /* 16 */
--tea-space-5: 1.5rem; /* 24 */
--tea-space-6: 2rem; /* 32 */
--tea-space-7: 3rem; /* 48 */
--tea-space-8: 4rem; /* 64 */
/* --- Radii (scale: small · medium · pill) --- */
--tea-radius-sm: 6px; /* inputs, chips, code */
--tea-radius-md: 10px; /* buttons, alerts, menus */
--tea-radius-pill: 999px; /* pills, toggles, avatars */
--tea-radius-card: 20px; /* fixed radius for cards & large surfaces */
/* --- Elevation / shadow ---
ONE universal drop shadow for every card & floating surface (sits
between the old md and lg). xs/sm are hairline lifts kept ONLY for
small controls (buttons, inputs, switch). All larger tokens alias
the single shadow so the whole UI shares one drop shadow. */
--tea-shadow: 0 8px 22px rgba(20,24,28,0.085), 0 2px 6px rgba(20,24,28,0.043);
--tea-shadow-xs: 0 1px 2px rgba(20,24,28,0.06);
--tea-shadow-sm: 0 1px 3px rgba(20,24,28,0.08), 0 1px 2px rgba(20,24,28,0.06);
--tea-shadow-md: var(--tea-shadow);
--tea-shadow-lg: var(--tea-shadow);
--tea-shadow-xl: var(--tea-shadow);
--tea-shadow-card: var(--tea-shadow);
--tea-shadow-card-hover: var(--tea-shadow);
/* --- Motion --- */
--tea-ease: cubic-bezier(0.4, 0, 0.2, 1);
--tea-dur: 0.18s;
/* --- Focus ring (accessibility) --- */
--tea-focus: 0 0 0 3px rgba(76,132,151,0.40);
/* --- Layout --- */
--tea-container: 1120px;
}
/* ==========================================================================
2. BASE / RESET
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body.tea {
margin: 0;
font-family: var(--tea-font-sans);
font-size: var(--tea-text-base);
line-height: var(--tea-leading-base);
color: var(--tea-ink);
background: var(--tea-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ==========================================================================
3. TYPOGRAPHY
========================================================================== */
/* Headings: Spline Sans, Semibold (600) */
.tea-h1, .tea-h2, .tea-h3, .tea-h4, .tea-h5, .tea-h6,
.card__title, .event-card__title, .modal__title, .navbar__brand, .footer__brand, .stat__value {
font-family: var(--tea-font-heading);
}
.tea-h1 { font-size: var(--tea-text-4xl); line-height: var(--tea-leading-tight); font-weight: var(--tea-weight-semibold); letter-spacing:-0.02em; margin:0 0 var(--tea-space-4); }
.tea-h2 { font-size: var(--tea-text-3xl); line-height: var(--tea-leading-tight); font-weight: var(--tea-weight-semibold); letter-spacing:-0.01em; margin:0 0 var(--tea-space-4); }
.tea-h3 { font-size: var(--tea-text-2xl); line-height: var(--tea-leading-tight); font-weight: var(--tea-weight-semibold); margin:0 0 var(--tea-space-3); }
.tea-h4 { font-size: var(--tea-text-xl); line-height: var(--tea-leading-tight); font-weight: var(--tea-weight-semibold); margin:0 0 var(--tea-space-3); }
.tea-h5 { font-size: var(--tea-text-lg); line-height: var(--tea-leading-tight); font-weight: var(--tea-weight-semibold); margin:0 0 var(--tea-space-2); }
.tea-h6 { font-size: var(--tea-text-base);line-height: var(--tea-leading-snug); font-weight: var(--tea-weight-semibold); text-transform:uppercase; letter-spacing:0.06em; margin:0 0 var(--tea-space-2); }
.tea-body { font-size: var(--tea-text-base); color: var(--tea-ink-2); }
.tea-lead { font-size: var(--tea-text-lg); color: var(--tea-ink-2); line-height: var(--tea-leading-base); }
.tea-small { font-size: var(--tea-text-sm); color: var(--tea-ink-3); }
.tea-caption { font-size: var(--tea-text-xs); color: var(--tea-ink-3); text-transform:uppercase; letter-spacing:0.06em; }
.tea-link {
color: var(--tea-accent-strong);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--tea-dur) var(--tea-ease);
}
.tea-link:hover { border-bottom-color: var(--tea-accent-strong); }
.tea-link:focus-visible { outline: none; box-shadow: var(--tea-focus); border-radius: 2px; }
/* Designed pull-quote – soft brand panel, big green quote mark, blue text */
.pullquote { position: relative; margin: var(--tea-space-6) 0;
padding: var(--tea-space-6) var(--tea-space-6) var(--tea-space-6) var(--tea-space-8);
background: var(--tea-accent-soft); border-radius: var(--tea-radius-card); }
.pullquote::before { content: "\201C"; position: absolute; left: var(--tea-space-4); top: var(--tea-space-2);
font-family: Georgia, "Times New Roman", serif; font-size: 4rem; line-height: 1; color: var(--tea-green); }
.pullquote p { margin: 0; font-size: var(--tea-text-xl); line-height: var(--tea-leading-snug);
color: var(--tea-accent-strong); font-weight: var(--tea-weight-medium); font-style: italic; }
.pullquote cite { display: block; margin-top: var(--tea-space-3); font-size: var(--tea-text-sm);
font-style: normal; color: var(--tea-ink-3); }
/* Centred feature quote – short rules top & bottom, uppercase attribution */
.quote-feature { text-align: center; max-width: 720px; margin: var(--tea-space-6) auto; padding: 0 var(--tea-space-4); }
.quote-feature__rule { width: 56px; height: 2px; background: var(--tea-green); border: 0; margin: 0 auto; }
.quote-feature__rule:last-child { margin-top: var(--tea-space-5); }
.quote-feature__text { font-family: var(--tea-font-heading); font-size: var(--tea-text-3xl); line-height: 1.3;
font-weight: var(--tea-weight-medium); letter-spacing: -0.01em; color: var(--tea-ink);
margin: var(--tea-space-5) auto var(--tea-space-4); }
.quote-feature__cite { display: block; font-size: var(--tea-text-xs); letter-spacing: 0.12em;
text-transform: uppercase; color: var(--tea-accent-strong); font-weight: var(--tea-weight-semibold); font-style: normal; }
.quote-feature--italic .quote-feature__text { font-style: italic; }
@media (max-width: 560px) { .quote-feature__text { font-size: var(--tea-text-2xl); } }
/* Framed quote – open corner brackets + quote marks, centred italic */
.quote-framed { position: relative; max-width: 720px; margin: var(--tea-space-6) auto;
padding: var(--tea-space-8); text-align: center; }
/* near-complete 1px frame with small, consistent openings for the marks */
.quote-framed::before, .quote-framed::after { content: ""; position: absolute; width: 82%; height: 80%; pointer-events: none; }
.quote-framed::before { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid;
border-image: linear-gradient(135deg, var(--tea-blue), var(--tea-green)) 1; }
.quote-framed::after { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid;
border-image: linear-gradient(135deg, var(--tea-blue), var(--tea-green)) 1; }
.quote-framed__mark { position: absolute; font-family: Georgia, "Times New Roman", serif; font-size: 5.5rem;
line-height: 1; color: var(--tea-accent-strong); font-weight: 700; }
/* marks seated into the block corners; close mark is the open mark rotated 180° for a perfect mirror */
.quote-framed__mark--open { top: -0.7rem; left: -0.1rem; }
.quote-framed__mark--close { bottom: -0.7rem; right: -0.1rem; transform: rotate(180deg); }
/* typography matched to the centred feature quote: heading font, large, italic, ink */
.quote-framed__text { font-family: var(--tea-font-heading); font-size: var(--tea-text-3xl); line-height: 1.3;
letter-spacing: -0.01em; font-weight: var(--tea-weight-medium); font-style: italic;
color: var(--tea-ink); margin: 0 auto var(--tea-space-4); max-width: 84%; }
.quote-framed__cite { font-size: var(--tea-text-xs); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--tea-accent-strong); font-weight: var(--tea-weight-semibold); font-style: normal; }
@media (max-width: 560px) { .quote-framed__text { font-size: var(--tea-text-2xl); } }
code.tea-code {
font-family: var(--tea-font-mono);
font-size: 0.85em;
background: var(--tea-surface-2);
border: 1px solid var(--tea-line);
padding: 0.1em 0.4em;
border-radius: var(--tea-radius-sm);
color: var(--tea-ink);
}
/* ==========================================================================
4. BUTTONS + STATES
========================================================================== */
.btn {
--_bg: var(--tea-accent-strong); /* AA-safe blue for white button text */
--_fg: var(--tea-accent-contrast);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--tea-space-2);
font-family: inherit;
font-size: var(--tea-text-sm);
font-weight: var(--tea-weight-semibold);
line-height: 1;
padding: 0.72em 1.2em;
border: 1px solid transparent;
border-radius: var(--tea-radius-md);
background: var(--_bg);
color: var(--_fg);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background var(--tea-dur) var(--tea-ease),
box-shadow var(--tea-dur) var(--tea-ease),
transform var(--tea-dur) var(--tea-ease),
border-color var(--tea-dur) var(--tea-ease);
}
/* Blue buttons swap to GREEN on hover (obvious brand-colour change) + consistent lift */
.btn:hover { background: var(--tea-green-deep); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,24,28,0.16); }
.btn:active { background: #2f6340; transform: translateY(0); box-shadow: var(--tea-shadow-xs); }
.btn:focus-visible { outline: none; box-shadow: var(--tea-focus); }
.btn:disabled, .btn[aria-disabled="true"] {
opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; background: var(--tea-accent-strong);
}
/* Variants */
.btn--secondary {
background: var(--tea-surface);
color: var(--tea-ink);
border-color: var(--tea-line);
box-shadow: var(--tea-shadow-xs);
}
.btn--secondary:hover { background: var(--tea-surface-2); }
.btn--secondary:active { background: var(--tea-line-2); }
.btn--danger { background: var(--tea-danger); }
.btn--danger:hover { background: #a82a24; }
.btn--subtle {
background: var(--tea-surface-2); color: var(--tea-ink-2); border-color: var(--tea-line);
}
.btn--subtle:hover { background: var(--tea-line-2); }
/* Green accent button – swaps to BLUE on hover (mirror of the primary) */
.btn--accent { background: var(--tea-green-deep); }
.btn--accent:hover { background: var(--tea-accent-strong); } /* green -> blue */
.btn--accent:active { background: #2c4c57; }
/* Gradient button (blue -> green) – reverses direction on hover */
.btn--gradient { background: var(--tea-gradient); }
.btn--gradient:hover { filter: brightness(0.95); }
/* Brand gradient fill utility (banners, hero panels, media) */
.tea-gradient { background: var(--tea-gradient); color: #fff; }
/* Airy pale mesh background utility (hero/section backgrounds, dark text) */
.tea-bg-mesh { background:
radial-gradient(45% 55% at 24% 14%, rgba(84,176,113,0.32) 0%, transparent 70%),
radial-gradient(52% 60% at 86% 30%, rgba(76,132,151,0.30) 0%, transparent 72%),
radial-gradient(55% 62% at 28% 92%, rgba(143,125,200,0.24) 0%, transparent 72%),
#f6fafb; }
/* Sizes */
.btn--sm { font-size: var(--tea-text-xs); padding: 0.55em 0.9em; border-radius: var(--tea-radius-sm); }
.btn--lg { font-size: var(--tea-text-base); padding: 0.85em 1.6em; }
.btn--block { display: flex; width: 100%; }
.btn--pill { border-radius: var(--tea-radius-pill); }
/* ==========================================================================
5. CARDS + ELEVATION
========================================================================== */
.card {
background: var(--tea-surface);
border: 1px solid var(--tea-line); /* universal 1px grey outline */
border-radius: var(--tea-radius-card); /* soft, generous corners */
box-shadow: var(--tea-shadow-card); /* universal card shadow */
overflow: hidden;
transition: box-shadow var(--tea-dur) var(--tea-ease),
transform var(--tea-dur) var(--tea-ease);
}
.card__media { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--tea-surface-2); position: relative; }
.card__body { padding: var(--tea-space-5); font-size: var(--tea-text-base); }
.card__title { font-size: var(--tea-text-lg); font-weight: var(--tea-weight-semibold); color: var(--tea-ink); margin: 0 0 var(--tea-space-2); }
.card__text { color: var(--tea-ink-2); margin: 0 0 var(--tea-space-4); font-size: var(--tea-text-base); }
.card__footer{ padding: var(--tea-space-4) var(--tea-space-5); border-top: 1px solid var(--tea-line-2); display:flex; gap:var(--tea-space-2); align-items:center; }
.card--interactive { cursor: pointer; }
.card--interactive:hover { box-shadow: var(--tea-shadow-card-hover); transform: translateY(-2px); }
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--tea-shadow-card-hover); }
/* Full-bleed media: image spans the full card width, no inset (house preference) */
.card__media--bleed { width: 100%; display: block; }
/* Image placeholder – neutral grey block + image icon. Use until a real
image is supplied. (The brand gradient is reserved for real banners.) */
.card__media--placeholder { background: var(--tea-surface-2); display: flex;
align-items: center; justify-content: center; }
.card__media--placeholder svg { width: 2.75rem; height: 2.75rem;
stroke: var(--tea-ink-3); fill: none; opacity: 0.55; }
/* Elevation utility scale */
.shadow-xs { box-shadow: var(--tea-shadow-xs); }
.shadow-sm { box-shadow: var(--tea-shadow-sm); }
.shadow-md { box-shadow: var(--tea-shadow-md); }
.shadow-lg { box-shadow: var(--tea-shadow-lg); }
.shadow-xl { box-shadow: var(--tea-shadow-xl); }
/* ==========================================================================
6. BADGES / TAGS / CHIPS
========================================================================== */
.badge {
display: inline-flex; align-items: center; gap: var(--tea-space-1);
font-size: var(--tea-text-xs); font-weight: var(--tea-weight-semibold);
line-height: 1; padding: 0.4em 0.7em;
border-radius: var(--tea-radius-pill);
background: var(--tea-surface-2); color: var(--tea-ink-2);
border: 1px solid var(--tea-line);
}
.badge--accent { background: var(--tea-accent-soft); color: var(--tea-accent-strong); border-color: transparent; }
.badge--success { background: var(--tea-success-soft); color: var(--tea-success); border-color: transparent; }
.badge--warning { background: var(--tea-warning-soft); color: var(--tea-warning); border-color: transparent; }
.badge--danger { background: var(--tea-danger-soft); color: var(--tea-danger); border-color: transparent; }
.badge--info { background: var(--tea-info-soft); color: var(--tea-info); border-color: transparent; }
.badge--dot::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }
/* ==========================================================================
7. ALERTS
========================================================================== */
.alert {
display: flex; gap: var(--tea-space-3); align-items: flex-start;
padding: var(--tea-space-4);
border-radius: var(--tea-radius-md);
border: 1px solid var(--tea-line);
background: var(--tea-surface-2);
font-size: var(--tea-text-base);
color: var(--tea-ink-2);
}
.alert__title { font-weight: var(--tea-weight-semibold); color: var(--tea-ink); margin: 0 0 2px; }
/* Keyline = a darker tint of each alert's own background (no shadow) */
.alert--success { background: var(--tea-success-soft); border-color: #bfe0cd; }
.alert--warning { background: var(--tea-warning-soft); border-color: #ecdcb4; }
.alert--danger { background: var(--tea-danger-soft); border-color: #f1c9c6; }
.alert--info { background: var(--tea-info-soft); border-color: #c3d6ea; }
/* ==========================================================================
8. TABS
========================================================================== */
.tabs { border-bottom: 1px solid var(--tea-line); display: flex; gap: var(--tea-space-2); }
.tabs__tab {
appearance: none; background: none; border: none; cursor: pointer;
font-family: inherit; font-size: var(--tea-text-sm); font-weight: var(--tea-weight-medium);
color: var(--tea-ink-3);
padding: var(--tea-space-3) var(--tea-space-2);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--tea-dur) var(--tea-ease), border-color var(--tea-dur) var(--tea-ease);
}
.tabs__tab:hover { color: var(--tea-ink); }
.tabs__tab[aria-selected="true"], .tabs__tab.is-active {
color: var(--tea-accent); border-bottom-color: var(--tea-accent); font-weight: var(--tea-weight-semibold);
}
.tabs__tab:focus-visible { outline: none; box-shadow: var(--tea-focus); border-radius: var(--tea-radius-sm); }
.tabs__panel { padding: var(--tea-space-5) 0; color: var(--tea-ink-2); font-size: var(--tea-text-base); }
/* Pill tabs variant (segmented control) – clearly defined track */
.tabs--pills { border-bottom: none; gap: var(--tea-space-1);
background: #e9edf1; /* visible track against page bg */
border: 1px solid var(--tea-line); /* defining outline */
padding: var(--tea-space-1); border-radius: var(--tea-radius-pill); display: inline-flex; }
.tabs--pills .tabs__tab { border: none; margin: 0; border-radius: var(--tea-radius-pill);
padding: var(--tea-space-2) var(--tea-space-4); color: var(--tea-ink-3); }
.tabs--pills .tabs__tab:hover { color: var(--tea-ink); }
.tabs--pills .tabs__tab[aria-selected="true"], .tabs--pills .tabs__tab.is-active {
background: var(--tea-surface); color: var(--tea-accent-strong);
box-shadow: var(--tea-shadow-sm); font-weight: var(--tea-weight-semibold);
}
/* Connected / bleed tabs – coloured bar; the active tab shares the panel's
surface so the colour bleeds down into the content (browser-tab style). */
.tabs--bleed { display: flex; align-items: flex-end; gap: 0;
background: #2c4c57; /* deep brand-blue bar */
padding: var(--tea-space-2) var(--tea-space-2) 0;
border-radius: var(--tea-radius-md) var(--tea-radius-md) 0 0; }
.tabs--bleed .tabs__tab { position: relative; border: none; margin: 0;
border-radius: var(--tea-radius-md) var(--tea-radius-md) 0 0;
padding: var(--tea-space-3) var(--tea-space-5);
color: rgba(255,255,255,0.82); font-weight: var(--tea-weight-medium); }
.tabs--bleed .tabs__tab:hover { color: #fff; }
/* thin divider between adjacent inactive tabs */
.tabs--bleed .tabs__tab:not([aria-selected="true"]) + .tabs__tab:not([aria-selected="true"])::before {
content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: rgba(255,255,255,0.28); }
.tabs--bleed .tabs__tab[aria-selected="true"], .tabs--bleed .tabs__tab.is-active {
background: var(--tea-surface); color: var(--tea-ink); font-weight: var(--tea-weight-semibold); }
/* content panel connected to the active tab */
.tabs__panel--bleed { background: var(--tea-surface); border: 1px solid var(--tea-line);
border-top: none; border-radius: 0 0 var(--tea-radius-md) var(--tea-radius-md);
padding: var(--tea-space-5); color: var(--tea-ink-2); font-size: var(--tea-text-base); }
/* ==========================================================================
9. NAVIGATION + DROPDOWN MENU
========================================================================== */
.navbar {
display: flex; align-items: center; justify-content: space-between;
padding: var(--tea-space-3) var(--tea-space-5);
background: var(--tea-surface);
border: 1px solid var(--tea-line);
border-radius: var(--tea-radius-card);
box-shadow: var(--tea-shadow);
}
.navbar__brand { font-weight: var(--tea-weight-bold); font-size: var(--tea-text-lg); color: var(--tea-ink); text-decoration:none; letter-spacing:-0.01em; }
/* small "back to style guide" reference link for template headers */
.navbar__ref { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tea-text-xs);
font-weight: var(--tea-weight-semibold); color: var(--tea-ink-3); text-decoration: none; white-space: nowrap;
padding: 5px 10px; border-radius: var(--tea-radius-pill); border: 1px solid var(--tea-line); background: var(--tea-surface); }
.navbar__ref:hover { color: var(--tea-accent-strong); border-color: var(--tea-accent); background: var(--tea-accent-soft); }
.navbar__ref:focus-visible { outline: none; box-shadow: var(--tea-focus); }
.navbar__ref svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.navbar__lead { display: flex; align-items: center; gap: var(--tea-space-4); }
.navbar__nav { display: flex; gap: var(--tea-space-1); align-items: center; list-style: none; margin: 0; padding: 0; }
.navbar__link {
color: var(--tea-ink-2); text-decoration: none; font-size: var(--tea-text-sm); font-weight: var(--tea-weight-medium);
padding: var(--tea-space-2) var(--tea-space-3); border-radius: var(--tea-radius-sm);
transition: background var(--tea-dur) var(--tea-ease), color var(--tea-dur) var(--tea-ease);
}
.navbar__link:hover { background: #e9edf1; color: var(--tea-ink); }
.navbar__link.is-active { color: var(--tea-accent-strong); background: var(--tea-accent-soft); font-weight: var(--tea-weight-semibold); }
/* Dropdown */
.menu { position: relative; display: inline-block; }
.menu__panel {
position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
background: var(--tea-surface);
border: 1px solid var(--tea-line);
border-radius: var(--tea-radius-md);
box-shadow: var(--tea-shadow-lg);
padding: var(--tea-space-2);
z-index: 50;
}
.menu__item {
display: flex; align-items: center; gap: var(--tea-space-2);
padding: var(--tea-space-2) var(--tea-space-3);
border-radius: var(--tea-radius-sm);
color: var(--tea-ink-2); text-decoration: none; font-size: var(--tea-text-sm);
cursor: pointer;
}
.menu__item:hover { background: var(--tea-accent-soft); color: var(--tea-accent-strong); font-weight: var(--tea-weight-medium); }
.menu__divider { height: 1px; background: var(--tea-line-2); margin: var(--tea-space-2) 0; border:0; }
/* ==========================================================================
10. FAQ / ACCORDION
========================================================================== */
.faq { border: 1px solid var(--tea-line); border-radius: var(--tea-radius-card); overflow: hidden; background: var(--tea-surface); box-shadow: var(--tea-shadow); }
.faq__item { border-bottom: 1px solid var(--tea-line-2); }
.faq__item:last-child { border-bottom: none; }
.faq__item > summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: var(--tea-space-3);
padding: var(--tea-space-4) var(--tea-space-5);
font-weight: var(--tea-weight-semibold); color: var(--tea-ink);
font-size: var(--tea-text-base);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
content: "+"; font-size: var(--tea-text-xl); color: var(--tea-ink-3); line-height: 1;
transition: transform var(--tea-dur) var(--tea-ease);
}
.faq__item[open] > summary::after { content: "\2212"; color: var(--tea-accent); }
.faq__item > summary:focus-visible { outline: none; box-shadow: var(--tea-focus); }
.faq__answer { padding: 0 var(--tea-space-5) var(--tea-space-4); color: var(--tea-ink-2); font-size: var(--tea-text-base); line-height: var(--tea-leading-base); }
/* ==========================================================================
11. FORMS
========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--tea-space-2); margin-bottom: var(--tea-space-4); }
.field-label { font-size: var(--tea-text-sm); font-weight: var(--tea-weight-semibold); color: var(--tea-ink); }
.hint { font-size: var(--tea-text-xs); color: var(--tea-ink-3); }
.input, .select, .textarea {
font-family: inherit; font-size: var(--tea-text-sm); color: var(--tea-ink);
background: var(--tea-surface);
border: 1px solid #c7ced5; /* clearly-defined field edge */
border-radius: var(--tea-radius-md);
padding: 0.7em 0.85em;
width: 100%;
transition: border-color var(--tea-dur) var(--tea-ease), box-shadow var(--tea-dur) var(--tea-ease);
}
.input::placeholder, .textarea::placeholder { color: var(--tea-ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--tea-ink-3); }
.input:focus, .select:focus, .textarea:focus {
outline: none; border-color: var(--tea-accent); box-shadow: var(--tea-focus);
}
.input:disabled, .select:disabled, .textarea:disabled {
background: var(--tea-surface-2); color: var(--tea-ink-3); cursor: not-allowed;
}
.textarea { min-height: 96px; resize: vertical; }
.select { -webkit-appearance: none; -moz-appearance: none; appearance: none;
/* chevron + a vertical keyline divider (1px, --tea-line) to its left */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23646e79' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
linear-gradient(var(--tea-line), var(--tea-line));
background-repeat: no-repeat, no-repeat;
background-position: right 0.9em center, right 2.55em center;
background-size: 16px 16px, 1px 58%;
padding-right: 3.1em;
}
/* Validation states */
.input.is-invalid, .textarea.is-invalid, .select.is-invalid { border-color: var(--tea-danger); }
.input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(194,54,47,0.25); }
.input.is-valid { border-color: var(--tea-success); }
.error-text { font-size: var(--tea-text-xs); color: var(--tea-danger); }
/* Checkbox & radio */
.check { display: inline-flex; align-items: center; gap: var(--tea-space-2); font-size: var(--tea-text-sm); color: var(--tea-ink-2); cursor: pointer; line-height: 1; }
.check input { width: 1.1em; height: 1.1em; margin: 0; flex: none; vertical-align: middle; accent-color: var(--tea-accent); cursor: pointer; }
/* Toggle switch */
.switch { position: relative; display: inline-flex; align-items:center; gap: var(--tea-space-2); cursor: pointer; font-size: var(--tea-text-sm); color: var(--tea-ink-2); }
.switch input { position: absolute; opacity: 0; }
.switch__track { width: 40px; height: 22px; border-radius: var(--tea-radius-pill); background: var(--tea-line); transition: background var(--tea-dur) var(--tea-ease); position: relative; flex: none; }
.switch__track::after { content:""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--tea-shadow-sm); transition: transform var(--tea-dur) var(--tea-ease); }
.switch input:checked + .switch__track { background: var(--tea-accent); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--tea-focus); }
/* ==========================================================================
12. TABLE
========================================================================== */
.table { width: 100%; border-collapse: collapse; font-size: var(--tea-text-sm); background: var(--tea-surface); }
.table th, .table td { text-align: left; padding: var(--tea-space-3) var(--tea-space-4); border-bottom: 1px solid var(--tea-line-2); }
/* Vertical column separators */
.table thead th:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.28); } /* white lines on blue header */
.table tbody td:not(:last-child) { border-right: 1px solid var(--tea-line-2); } /* grey lines on white body */
.table thead th { font-weight: var(--tea-weight-semibold); color: #ffffff; text-transform: uppercase; font-size: var(--tea-text-xs); letter-spacing: 0.04em; background: var(--tea-accent-strong); }
.table tbody tr:hover { background: var(--tea-surface-2); }
.table--bordered { border: 1px solid var(--tea-line); border-radius: var(--tea-radius-md); overflow: hidden; box-shadow: var(--tea-shadow); }
/* ==========================================================================
13. BREADCRUMBS + PAGINATION
========================================================================== */
.breadcrumbs { display: flex; align-items: center; gap: var(--tea-space-2); font-size: var(--tea-text-sm); color: var(--tea-ink-3); list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: var(--tea-space-2); }
.breadcrumbs a { color: var(--tea-ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--tea-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs li:not(:last-child)::after { content: "\203A"; color: var(--tea-ink-3); font-size: 1.25em; line-height: 1; }
.breadcrumbs [aria-current="page"] { color: var(--tea-ink); font-weight: var(--tea-weight-semibold);
background: var(--tea-accent-soft); padding: 2px 10px; border-radius: var(--tea-radius-pill); }
.pagination { display: inline-flex; gap: var(--tea-space-1); align-items: center; }
.pagination a, .pagination span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px; padding: 0 var(--tea-space-2);
border: 1px solid var(--tea-line); border-radius: var(--tea-radius-sm);
color: var(--tea-accent-strong); text-decoration: none; font-size: var(--tea-text-sm); font-weight: var(--tea-weight-medium);
background: var(--tea-surface);
}
.pagination a:hover { background: var(--tea-accent-soft); border-color: var(--tea-accent); color: var(--tea-accent-strong); }
.pagination .is-active { background: var(--tea-accent-strong); color: #fff; border-color: var(--tea-accent-strong); font-weight: var(--tea-weight-semibold); }
.pagination .is-disabled { opacity: 0.45; pointer-events: none; }
.pagination .pag-arrow svg { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none; }
/* ==========================================================================
14. TOOLTIP
========================================================================== */
.tooltip { position: relative; display: inline-flex; border-bottom: 1px dashed var(--tea-ink-3); cursor: help; }
.tooltip:hover { z-index: 60; }
.tooltip::after {
content: attr(data-tip);
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
background: var(--tea-ink); color: #fff; font-size: var(--tea-text-xs); white-space: nowrap;
padding: var(--tea-space-2) var(--tea-space-3); border-radius: var(--tea-radius-sm);
opacity: 0; pointer-events: none; z-index: 60;
transition: opacity var(--tea-dur) var(--tea-ease), transform var(--tea-dur) var(--tea-ease);
box-shadow: var(--tea-shadow-md);
}
.tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ==========================================================================
15. MODAL / DIALOG
========================================================================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,24,28,0.45); display: flex; align-items: center; justify-content: center; padding: var(--tea-space-5); z-index: 100; }
.modal {
background: var(--tea-surface); border-radius: var(--tea-radius-card);
box-shadow: var(--tea-shadow-xl); max-width: 480px; width: 100%; overflow: hidden;
}
.modal__header { padding: var(--tea-space-5) var(--tea-space-5) var(--tea-space-3); display:flex; align-items:flex-start; justify-content:space-between; gap: var(--tea-space-3); }
.modal__title { font-size: var(--tea-text-xl); font-weight: var(--tea-weight-semibold); margin: 0; }
.modal__close { background: none; border: none; cursor: pointer; color: var(--tea-ink-3); font-size: var(--tea-text-xl); line-height: 1; }
.modal__body { padding: 0 var(--tea-space-5) var(--tea-space-4); color: var(--tea-ink-2); font-size: var(--tea-text-base); }
.modal__footer { padding: var(--tea-space-4) var(--tea-space-5); border-top: 1px solid var(--tea-line-2); display: flex; justify-content: flex-end; gap: var(--tea-space-2); }
/* Popup – centred marketing dialog: icon, title, body, CTA (sits in .modal-overlay) */
.popup { position: relative; background: var(--tea-surface); border: 1px solid var(--tea-line);
border-radius: var(--tea-radius-card); box-shadow: var(--tea-shadow-xl); max-width: 440px; width: 100%;
padding: var(--tea-space-7) var(--tea-space-6) var(--tea-space-6); text-align: center; }
.popup__close { position: absolute; top: var(--tea-space-3); right: var(--tea-space-4); background: none; border: none;
cursor: pointer; color: var(--tea-ink-3); font-size: var(--tea-text-xl); line-height: 1; }
.popup__close:hover { color: var(--tea-ink); }
.popup__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--tea-accent-soft); color: var(--tea-accent-strong);
display: inline-flex; align-items: center; justify-content: center; margin: 0 auto var(--tea-space-4); }
.popup__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; }
.popup__title { font-family: var(--tea-font-heading); font-size: var(--tea-text-xl); line-height: var(--tea-leading-tight);
font-weight: var(--tea-weight-semibold); color: var(--tea-ink); margin: 0 0 var(--tea-space-2); }
.popup__body { color: var(--tea-ink-2); font-size: var(--tea-text-base); margin: 0 0 var(--tea-space-5); }
/* ==========================================================================
16. PROGRESS + SPINNER
========================================================================== */
.progress { width: 100%; height: 8px; background: var(--tea-line-2); border-radius: var(--tea-radius-pill); overflow: hidden; }
.progress__bar { height: 100%; background: var(--tea-accent); border-radius: inherit; transition: width var(--tea-dur) var(--tea-ease); }
.spinner {
width: 28px; height: 28px; border-radius: 50%;
border: 3px solid var(--tea-line); border-top-color: var(--tea-accent);
animation: tea-spin 0.7s linear infinite;
}
@keyframes tea-spin { to { transform: rotate(360deg); } }
/* ==========================================================================
17. AVATARS
========================================================================== */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--tea-accent-soft); color: var(--tea-accent);
display: inline-flex; align-items: center; justify-content: center; font-weight: var(--tea-weight-semibold); font-size: var(--tea-text-sm); }
.avatar--sm { width: 28px; height: 28px; font-size: var(--tea-text-xs); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--tea-text-lg); }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { border: 2px solid var(--tea-surface); margin-left: -10px; }
.avatar-group .avatar:first-child { margin-left: 0; }
/* ==========================================================================
18. FOOTER
========================================================================== */
.footer {
background: var(--tea-ink); color: #c4ccd4;
padding: var(--tea-space-7) var(--tea-space-5) var(--tea-space-5);
border-radius: var(--tea-radius-card);
border: 1px solid var(--tea-line);
box-shadow: var(--tea-shadow);
}
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--tea-space-6); max-width: var(--tea-container); margin: 0 auto; }
.footer__brand { font-size: var(--tea-text-lg); font-weight: var(--tea-weight-bold); color: #fff; margin-bottom: var(--tea-space-2); }
.footer__tagline { font-size: var(--tea-text-sm); color: #9aa4ae; max-width: 28ch; }
.footer__col h6 { color: #fff; font-size: var(--tea-text-xs); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--tea-space-3); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tea-space-2); }
.footer__col a { color: #c4ccd4; text-decoration: none; font-size: var(--tea-text-sm); }
.footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { max-width: var(--tea-container); margin: var(--tea-space-6) auto 0; padding-top: var(--tea-space-4); border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--tea-space-3); font-size: var(--tea-text-xs); color: #9aa4ae; }
.footer__bottom a { color: #c4ccd4; text-decoration: none; }
.footer__bottom a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* --- Full-width header & footer bands (content aligns to container inside) --- */
.site-header { background: var(--tea-surface); border-bottom: 1px solid var(--tea-line);
box-shadow: var(--tea-shadow-xs); position: sticky; top: 0; z-index: 40; }
.navbar--full { border: none; border-radius: 0; box-shadow: none; background: transparent;
max-width: var(--tea-container); margin: 0 auto; }
.footer--full { border: none; border-radius: 0; box-shadow: none; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
/* ==========================================================================
19. LAYOUT HELPERS
========================================================================== */
.tea-container { max-width: var(--tea-container); margin: 0 auto; padding: 0 var(--tea-space-5); }
.tea-stack > * + * { margin-top: var(--tea-space-4); }
.tea-row { display: flex; gap: var(--tea-space-3); flex-wrap: wrap; align-items: center; }
.tea-grid { display: grid; gap: var(--tea-space-5); }
.tea-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tea-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .tea-grid--3, .tea-grid--2 { grid-template-columns: 1fr; } }
.tea-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .tea-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tea-grid--4 { grid-template-columns: 1fr; } }
/* ==========================================================================
20. ICONS + ICON LINKS
--------------------------------------------------------------------------
Use inline