/* ==========================================================================
RESERVED CITIZEN BANK — Brand stylesheet v1.0
--------------------------------------------------------------------------
HOW TO CUSTOMIZE
1. Edit the variables in section 1 (TOKENS). Everything below reads from them.
2. Do not hard-code hex values elsewhere. Add a token instead.
3. Load the fonts in your BEFORE this file:
CONTENTS
1. Tokens 5. Layout 9. Alerts and badges
2. Dark mode 6. Header and nav 10. Logo
3. Reset 7. Buttons 11. Utilities
4. Typography 8. Forms and cards 12. Motion and print
========================================================================== */
/* ==========================================================================
1. TOKENS — RESERVED CITIZEN BANK BRAND PALETTE
Fonts: Cormorant Garamond (display, wordmark) + Inter (UI/body)
========================================================================== */
:root {
/* Core brand */
--rcb-ink: #162b4b; /* primary deep navy */
--rcb-ink-soft: #213a60; /* raised surface on dark */
--rcb-paper: #F4EFE6; /* warm off-white */
--rcb-paper-deep: #E8E1D3; /* raised surface / borders on light */
--rcb-brass: #B08D57; /* accent on dark (4.9:1 on ink) */
--rcb-brass-deep: #ab854b; /* accent / links on light (5.6:1 on paper) */
/* Functional */
--rcb-positive: #274775;
--rcb-negative: #A23B2A;
/* Semantic tokens — light theme (default) */
--bg: var(--rcb-paper);
--surface: #FFFFFF;
--border: var(--rcb-paper-deep);
--text: var(--rcb-ink);
--text-muted: #46576f;
--accent: var(--rcb-brass-deep);
--on-accent: var(--rcb-paper);
--button-bg: var(--rcb-ink);
--button-text: var(--rcb-paper);
/* Typography */
--font-display: "Cormorant Garamond", Georgia, serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Semantic roles — components use THESE */
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-surface-soft: var(--rcb-paper-deep);
--color-text: var(--text);
--color-text-muted: var(--text-muted);
--color-border: var(--border);
--color-link: var(--rcb-brass-deep);
--color-link-hover: var(--rcb-ink);
--color-focus: var(--rcb-brass-deep);
--color-primary: var(--button-bg);
--color-on-primary: var(--button-text);
--color-accent: var(--accent);
--color-on-accent: var(--on-accent);
/* Component CSS variable aliases */
--bg-primary: var(--bg);
--bg-secondary: var(--surface);
--bg-tertiary: var(--rcb-paper-deep);
--text-primary: var(--text);
--text-secondary: var(--text-muted);
--text-tertiary: #647794;
--accent-primary: var(--button-bg);
--accent-secondary: var(--accent);
--success: var(--rcb-positive);
--warning: #926012;
--error: var(--rcb-negative);
--card-bg: var(--surface);
--card-bg-rgb: 255, 255, 255;
--shadow: 0 12px 32px rgba(22, 43, 75, 0.08);
/* Legacy component token aliases */
--hb-midnight: var(--rcb-ink, #162b4b);
--hb-white: #FFFFFF;
--hb-amber: var(--rcb-brass-deep, #ab854b);
--hb-tide: var(--rcb-brass-deep, #ab854b);
--hb-cloud: var(--rcb-paper, #F4EFE6);
--hb-mist: var(--rcb-paper-deep, #E8E1D3);
--hb-line: var(--border, #E8E1D3);
--hb-slate: var(--text-muted, #46576f);
--hb-success: var(--rcb-positive, #274775);
--hb-success-bg: rgba(39, 71, 117, 0.12);
--hb-warning: #926012;
--hb-warning-bg: rgba(176, 141, 87, 0.15);
--hb-danger: var(--rcb-negative, #A23B2A);
--hb-danger-bg: rgba(162, 59, 42, 0.12);
/* Investment plan accents — light theme.
Components use these, never a raw hex, so each theme gets its own shade. */
--plan-starter: #274775; /* deep navy */
--plan-premium: #8A6A2F; /* deep brass */
--plan-elite: #9B3A32; /* burgundy */
--text-xs: 0.8125rem; /* 13px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.625rem; /* 26px */
--text-2xl: 2.25rem; /* 36px */
--text-3xl: clamp(2.5rem, 5vw + 1rem, 4.5rem); /* hero */
--leading-tight: 1.15;
--leading-snug: 1.35;
--leading-body: 1.6;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4.5rem;
--space-9: 6rem;
/* Shape and depth */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-pill: 8px; /* soft edge */
--shadow-sm: 0 1px 3px rgba(22, 43, 75, 0.05);
--shadow-md: 0 8px 24px rgba(22, 43, 75, 0.08);
/* Layout */
--container: 1240px;
--gutter: clamp(1rem, 4vw, 3rem);
--header-h: 72px;
--tap-target: 44px;
/* Motion */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--dur: 160ms;
}
/* ==========================================================================
2. DARK THEME
Follows visitor preference or
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: var(--rcb-ink);
--surface: var(--rcb-ink-soft);
--border: #2b4872;
--text: var(--rcb-paper);
--text-muted: #b3c3d8;
--accent: var(--rcb-brass);
--on-accent: var(--rcb-ink);
--button-bg: var(--rcb-paper);
--button-text: var(--rcb-ink);
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-surface-soft: #1b3254;
--color-text: var(--text);
--color-text-muted: var(--text-muted);
--color-border: var(--border);
--color-link: var(--rcb-brass);
--color-link-hover: #D4AF77;
--color-focus: var(--rcb-brass);
--color-primary: var(--button-bg);
--color-on-primary: var(--button-text);
--color-accent: var(--accent);
--color-on-accent: var(--on-accent);
--bg-primary: var(--bg);
--bg-secondary: var(--surface);
--bg-tertiary: #1b3254;
--text-primary: var(--text);
--text-secondary: var(--text-muted);
--text-tertiary: #8ca2c0;
--accent-primary: var(--rcb-brass);
--accent-secondary: var(--rcb-brass);
--success: #4d8cd6;
--warning: #E5A93C;
--error: #E05D4D;
--card-bg: var(--surface);
--card-bg-rgb: 33, 58, 96;
--shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
/* Legacy component token aliases - dark */
--hb-midnight: var(--rcb-ink, #162b4b);
--hb-white: var(--rcb-paper, #F4EFE6);
--hb-amber: var(--rcb-brass, #B08D57);
--hb-tide: var(--rcb-brass, #B08D57);
--hb-cloud: var(--rcb-ink, #162b4b);
--hb-mist: var(--rcb-ink-soft, #213a60);
--hb-line: var(--border, #2b4872);
--hb-slate: var(--text-muted, #b3c3d8);
--hb-success: #7da4dc;
--hb-success-bg: rgba(125, 164, 220, 0.22);
--hb-warning: var(--rcb-brass, #B08D57);
--hb-warning-bg: rgba(176, 141, 87, 0.22);
--hb-danger: var(--rcb-negative, #A23B2A);
--hb-danger-bg: rgba(162, 59, 42, 0.22);
/* Investment plan accents — dark theme (lighter, high-contrast on ink) */
--plan-starter: #6b9ee0;
--plan-premium: #E0C089;
--plan-elite: #F0917F;
}
}
:root[data-theme="dark"] {
--bg: var(--rcb-ink);
--surface: var(--rcb-ink-soft);
--border: #2b4872;
--text: var(--rcb-paper);
--text-muted: #b3c3d8;
--accent: var(--rcb-brass);
--on-accent: var(--rcb-ink);
--button-bg: var(--rcb-paper);
--button-text: var(--rcb-ink);
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-surface-soft: #1b3254;
--color-text: var(--text);
--color-text-muted: var(--text-muted);
--color-border: var(--border);
--color-link: var(--rcb-brass);
--color-link-hover: #D4AF77;
--color-focus: var(--rcb-brass);
--color-primary: var(--button-bg);
--color-on-primary: var(--button-text);
--color-accent: var(--accent);
--color-on-accent: var(--on-accent);
--bg-primary: var(--bg);
--bg-secondary: var(--surface);
--bg-tertiary: #1b3254;
--text-primary: var(--text);
--text-secondary: var(--text-muted);
--text-tertiary: #8ca2c0;
--accent-primary: var(--rcb-brass);
--accent-secondary: var(--rcb-brass);
--success: #4d8cd6;
--warning: #E5A93C;
--error: #E05D4D;
--card-bg: var(--surface);
--card-bg-rgb: 33, 58, 96;
--shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
/* Legacy component token aliases - dark */
--hb-midnight: var(--rcb-ink, #162b4b);
--hb-white: var(--rcb-paper, #F4EFE6);
--hb-amber: var(--rcb-brass, #B08D57);
--hb-tide: var(--rcb-brass, #B08D57);
--hb-cloud: var(--rcb-ink, #162b4b);
--hb-mist: var(--rcb-ink-soft, #213a60);
--hb-line: var(--border, #2b4872);
--hb-slate: var(--text-muted, #b3c3d8);
--hb-success: #7da4dc;
--hb-success-bg: rgba(125, 164, 220, 0.22);
--hb-warning: var(--rcb-brass, #B08D57);
--hb-warning-bg: rgba(176, 141, 87, 0.22);
--hb-danger: var(--rcb-negative, #A23B2A);
--hb-danger-bg: rgba(162, 59, 42, 0.22);
/* Investment plan accents — dark theme (lighter, high-contrast on ink) */
--plan-starter: #6b9ee0;
--plan-premium: #E0C089;
--plan-elite: #F0917F;
}
/* ==========================================================================
3. RESET
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
min-height: 100vh;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-base);
font-variant-numeric: tabular-nums;
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:target { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
/* ==========================================================================
4. TYPOGRAPHY
========================================================================== */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.01em;
line-height: var(--leading-tight);
color: var(--color-text);
text-wrap: balance;
}
h4, h5, h6 {
font-family: var(--font-body);
font-weight: 500;
letter-spacing: -0.01em;
line-height: var(--leading-snug);
color: var(--color-text);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; line-height: var(--leading-snug); }
h4 { font-size: var(--text-lg); font-weight: 500; line-height: var(--leading-snug); }
p { text-wrap: pretty; }
p + p { margin-top: var(--space-4); }
.lead { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-text-muted); max-width: 60ch; }
.small { font-size: var(--text-sm); }
.muted { color: var(--color-text-muted); }
.eyebrow, .sub-heading {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-muted);
}
a { color: var(--color-link); text-underline-offset: 0.18em; }
a:hover { color: var(--color-link-hover); }
/* Numbers: always use tabular figures for columns to align */
.amount, .stat-value, .balance-amount, .tx-amount, .card-number, .tabular-nums {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
border-radius: 4px;
}
/* ==========================================================================
5. LAYOUT
========================================================================== */
.container {
width: 100%;
max-width: calc(var(--container) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.section--soft { background: var(--color-surface-soft); }
/* Dark brand band: the "horizon at night" look used on the OG image */
.section--midnight {
background: var(--hb-midnight);
color: #F2F6FC;
}
.section--midnight h1,
.section--midnight h2,
.section--midnight h3 { color: var(--hb-white); }
.section--midnight .muted,
.section--midnight .lead { color: #C9D7EE; }
.section--midnight a { color: var(--hb-amber); }
.section--midnight .accent-text { color: var(--hb-amber); }
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.grid {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
/* ==========================================================================
6. HEADER AND NAV
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 50;
height: var(--header-h);
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
.nav { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.nav a {
display: inline-flex;
align-items: center;
min-height: var(--tap-target);
font-weight: 500;
color: var(--color-text);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color var(--dur) var(--ease);
}
.nav a:hover { border-bottom-color: var(--hb-amber); }
.nav a[aria-current="page"] { border-bottom-color: var(--color-accent); }
@media (max-width: 720px) {
.nav { gap: var(--space-3); font-size: var(--text-sm); }
}
/* ==========================================================================
7. BUTTONS
Variants: .btn (primary) | .btn--accent | .btn--ghost | .btn--link
Sizes: .btn--sm | .btn--lg Modifier: .btn--block
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--tap-target);
padding: 0 var(--space-5);
border: 2px solid var(--color-primary);
border-radius: var(--radius-sm, 8px);
background: var(--color-primary);
color: var(--color-on-primary);
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn--accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { color: var(--color-on-accent); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--ghost:hover { color: var(--color-text); border-color: var(--color-text); box-shadow: none; }
.btn--link {
background: none; border: 0; padding: 0; min-height: var(--tap-target);
color: var(--color-link); text-decoration: underline; text-underline-offset: 0.18em;
}
.btn--link:hover { transform: none; box-shadow: none; color: var(--color-link-hover); }
.btn--sm { padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: 56px; padding: 0 var(--space-6); font-size: var(--text-lg); }
.btn--block { display: flex; width: 100%; }
/* ==========================================================================
8. FORMS AND CARDS
========================================================================== */
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 700; }
.field .hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field .error-text { font-size: var(--text-xs); color: var(--hb-danger); font-weight: 500; }
.input, .select, .textarea {
width: 100%;
min-height: var(--tap-target);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 7rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); opacity: 0.8; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
outline: none;
border-color: var(--color-focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 28%, transparent);
}
.input[aria-invalid="true"] { border-color: var(--hb-danger); }
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
}
.card--soft { background: var(--color-surface-soft); border-color: transparent; box-shadow: none; }
.card--interactive { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Account / balance card */
.balance {
background: var(--hb-midnight);
color: #F2F6FC;
border-radius: var(--radius-lg);
padding: var(--space-5);
position: relative;
overflow: hidden;
}
.balance .eyebrow { color: #A9BAD6; }
.balance .amount { display: block; margin-top: var(--space-2); font-size: var(--text-2xl); color: var(--hb-white); }
.balance::after { /* the rising sun, as a quiet decoration */
content: "";
position: absolute;
right: -40px; bottom: -80px;
width: 200px; height: 200px;
border-radius: 50%;
background: var(--hb-amber);
opacity: 0.9;
}
/* Transaction list */
.tx-list { list-style: none; padding: 0; }
.tx-list > li {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-border);
}
.tx-list > li:last-child { border-bottom: 0; }
.tx--in .amount { color: var(--hb-success); }
.tx--out .amount { color: var(--color-text); }
/* ==========================================================================
9. ALERTS AND BADGES
========================================================================== */
.alert {
padding: var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
background: var(--color-surface-soft);
color: var(--color-text);
}
.alert--success { background: var(--hb-success-bg); color: var(--hb-success); }
.alert--warning { background: var(--hb-warning-bg); color: var(--hb-warning); }
.alert--danger { background: var(--hb-danger-bg); color: var(--hb-danger); }
.badge {
display: inline-flex;
align-items: center;
padding: 2px var(--space-3);
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.02em;
background: var(--color-surface-soft);
color: var(--color-text);
}
.badge--success { background: var(--hb-success-bg); color: var(--hb-success); }
.badge--warning { background: var(--hb-warning-bg); color: var(--hb-warning); }
.badge--danger { background: var(--hb-danger-bg); color: var(--hb-danger); }
.badge--prototype { /* the pill used on the OG image */
background: transparent;
border: 1.5px solid currentColor;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 500;
}
/* ==========================================================================
10. LOGO
========================================================================== */
.logo {
--logo-height: 72px;
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--text);
text-decoration: none;
}
.logo:hover { color: var(--text); }
.logo__img {
height: var(--logo-height);
width: auto;
max-width: 480px;
object-fit: contain;
display: inline-block;
vertical-align: middle;
}
.logo__img--light { display: inline-block; }
.logo__img--dark { display: none; }
:root[data-theme="dark"] .logo__img--light { display: none !important; }
:root[data-theme="dark"] .logo__img--dark { display: inline-block !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .logo__img--light { display: none; }
:root:not([data-theme="light"]) .logo__img--dark { display: inline-block; }
}
.logo--reverse .logo__img--light { display: none !important; }
.logo--reverse .logo__img--dark { display: inline-block !important; }
.logo__word {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text);
line-height: 1;
}
.logo--sm { --logo-height: 52px; }
.logo--lg { --logo-height: 92px; }
.logo--stacked { flex-direction: column; text-align: center; gap: 8px; }
/* Enhanced Footer Logo Presence */
.footer .logo,
.footer-brand-col .logo {
--logo-height: 84px;
margin-bottom: 12px;
}
.footer .logo__img,
.footer-brand-col .logo__img {
height: var(--logo-height);
max-width: 520px;
}
.logo--reverse,
.logo--reverse:hover { color: var(--rcb-paper); }
/* Parent / Mother Company Branding (Rothschild & Co) */
.parent-brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
opacity: 0.95;
transition: opacity 0.2s ease;
}
.parent-brand:hover {
opacity: 1;
}
.parent-brand--stacked {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.parent-brand__label {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
font-weight: 600;
white-space: nowrap;
}
.parent-brand__img {
height: 28px;
width: auto;
max-width: 220px;
object-fit: contain;
vertical-align: middle;
}
.parent-brand--stacked .parent-brand__img {
height: 38px;
max-width: 260px;
}
.parent-brand__img--light { display: inline-block; }
.parent-brand__img--dark { display: none; }
:root[data-theme="dark"] .parent-brand__img--light { display: none !important; }
:root[data-theme="dark"] .parent-brand__img--dark { display: inline-block !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .parent-brand__img--light { display: none; }
:root:not([data-theme="light"]) .parent-brand__img--dark { display: inline-block; }
}
/* ==========================================================================
11. UTILITIES & COMPONENT HELPERS
========================================================================== */
.sr-only {
position: absolute; 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: var(--space-4); top: -100px; z-index: 100;
padding: var(--space-3) var(--space-4);
background: var(--hb-midnight); color: var(--hb-white);
border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-4); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.accent-text { color: var(--hb-amber); } /* only on Midnight backgrounds */
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }
.hide-mobile { display: initial; }
@media (max-width: 720px) { .hide-mobile { display: none; } }
/* Status color helpers for existing site components */
.status-active, .status-approved, .tx-completed {
color: var(--hb-success);
background-color: var(--hb-success-bg);
}
.status-pending, .tx-pending {
color: var(--hb-warning);
background-color: var(--hb-warning-bg);
}
.status-blocked, .status-rejected, .tx-failed {
color: var(--hb-danger);
background-color: var(--hb-danger-bg);
}
/* ==========================================================================
12. MOTION AND PRINT
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media print {
.site-header, .nav, .btn { display: none !important; }
body { background: #fff; color: #000; }
a { color: #000; text-decoration: underline; }
}