/* Modern CSS Reset - Based on Andy Bell's Modern CSS Reset */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin and padding */
* {
margin: 0;
padding: 0;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* Make images easier to work with */
img,
picture,
svg {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* OSE Design System - CSS Custom Properties */
:root {
/* ========================================
COLOR SYSTEM
======================================== */
/* Background colors */
--color-bg: #FFF8F0;           /* Warm off-white, FT-inspired */
--color-bg-alt: #FAF7F2;       /* Alternative warm background */
--color-card-bg: #FFFFFF;      /* White cards on off-white */
/* Text colors */
--color-text: #2D2D2D;         /* Dark charcoal, not pure black */
--color-text-muted: #6B6B6B;   /* Secondary text */
--color-text-light: #8F8F8F;   /* Tertiary text */
--color-text-inverse: #FFFFFF; /* Light text on dark backgrounds */
/* Brand colors */
--color-primary: #C41E0E;      /* Deep red from the seal */
--color-primary-dark: #A01808; /* Darker red for hover states */
--color-primary-light: #E63B2E;/* Lighter red accent */
/* Airmail stripe colors */
--color-airmail-red: #E63B2E;
--color-airmail-blue: #1E4D8C;
--color-airmail-white: #FFFFFF;
/* UI colors */
--color-border: #E5E0D8;       /* Warm gray borders */
--color-border-dark: #D4CFC7;  /* Darker border variant */
--color-border-light: #F0EDE8; /* Lighter border variant */
/* Semantic colors */
--color-success: #2D7D46;
--color-warning: #F59E0B;
--color-error: #DC2626;
--color-info: #1E4D8C;
/* Shadow colors */
--color-shadow: rgba(11, 13, 18, 0.08);
--color-shadow-lg: rgba(11, 13, 18, 0.16);
/* Panel section colors (for decorated content sections) */
--color-panel-item-bg: #ffffff;
--color-panel-item-border: rgba(11, 13, 18, 0.08);
--color-panel-gradient-1: rgba(249, 179, 75, 0.22);
--color-panel-gradient-2: rgba(243, 112, 33, 0.2);
--color-panel-bg-start: #fffaf0;
--color-panel-bg-mid: #fdf2e2;
--color-panel-bg-end: #f6f8ff;
--color-panel-grid: rgba(11, 13, 18, 0.05);
--color-panel-ink: #0b0d12;
--color-panel-muted: #4d5566;
--color-panel-accent: #f9b34b;
--color-panel-accent-deep: #f37021;
--color-panel-highlight-bg: #0b0d12;
--color-panel-highlight-text: #ffffff;
/* ========================================
TYPOGRAPHY
======================================== */
/* Font families - base stacks */
--font-serif: Georgia, "Times New Roman", serif;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
/* Font families - semantic (override in themes) */
--font-heading: var(--font-serif);
--font-body: var(--font-sans);
--font-ui: var(--font-sans);
/* Font sizes */
--font-size-xs: 0.75rem;     /* 12px */
--font-size-sm: 0.875rem;    /* 14px */
--font-size-base: 1rem;      /* 16px */
--font-size-lg: 1.125rem;    /* 18px */
--font-size-xl: 1.25rem;     /* 20px */
--font-size-2xl: 1.5rem;     /* 24px */
--font-size-3xl: 1.875rem;   /* 30px */
--font-size-4xl: 2.25rem;    /* 36px */
--font-size-5xl: 3rem;       /* 48px */
--font-size-6xl: 3.75rem;    /* 60px */
/* Line heights */
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-base: 1.5;
--line-height-relaxed: 1.6;
--line-height-loose: 2;
/* Font weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Reading measure */
--measure: 65ch;
--measure-narrow: 45ch;
--measure-wide: 80ch;
/* ========================================
SPACING SCALE (8px base unit)
======================================== */
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
--space-20: 5rem;     /* 80px */
--space-24: 6rem;     /* 96px */
/* ========================================
LAYOUT
======================================== */
/* Container widths */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
/* Gutter spacing */
--gutter: var(--space-4);
--gutter-lg: var(--space-6);
/* Border radius */
--radius-sm: 0.25rem;   /* 4px */
--radius-base: 0.5rem;  /* 8px */
--radius-lg: 1rem;      /* 16px */
--radius-xl: 1.5rem;    /* 24px */
--radius-2xl: 2rem;     /* 32px */
--radius-full: 9999px;
/* ========================================
EFFECTS
======================================== */
/* Shadows */
--shadow-sm: 0 1px 2px 0 var(--color-shadow);
--shadow-base: 0 1px 3px 0 var(--color-shadow), 0 1px 2px -1px var(--color-shadow);
--shadow-md: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -2px var(--color-shadow);
--shadow-lg: 0 10px 15px -3px var(--color-shadow-lg), 0 4px 6px -4px var(--color-shadow-lg);
--shadow-xl: 0 20px 25px -5px var(--color-shadow-lg), 0 8px 10px -6px var(--color-shadow-lg);
--shadow-2xl: 0 25px 50px -12px var(--color-shadow-lg);
/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
/* ========================================
Z-INDEX SCALE
======================================== */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
/* Typography System */
/* Base typography */
body {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Headings - Use semantic font-heading variable (themed) */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text);
margin-bottom: var(--space-4);
}
h1 {
font-size: var(--font-size-4xl);
letter-spacing: -0.025em;
}
h2 {
font-size: var(--font-size-3xl);
letter-spacing: -0.02em;
}
h3 {
font-size: var(--font-size-2xl);
letter-spacing: -0.015em;
}
h4 {
font-size: var(--font-size-xl);
}
h5 {
font-size: var(--font-size-lg);
}
h6 {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
}
/* Responsive heading scaling */
@media (min-width: 768px) {
h1 {
font-size: var(--font-size-5xl);
}
h2 {
font-size: var(--font-size-4xl);
}
h3 {
font-size: var(--font-size-3xl);
}
}
@media (min-width: 1024px) {
h1 {
font-size: var(--font-size-6xl);
}
}
/* Paragraphs */
p {
margin-bottom: var(--space-4);
max-width: var(--measure);
}
p:last-child {
margin-bottom: 0;
}
/* Lead text */
.lead {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-text);
}
@media (min-width: 768px) {
.lead {
font-size: var(--font-size-xl);
}
}
/* Small text */
small,
.text-sm {
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
.text-xs {
font-size: var(--font-size-xs);
}
/* Text colors */
.text-muted {
color: var(--color-text-muted);
}
.text-light {
color: var(--color-text-light);
}
.text-primary {
color: var(--color-primary);
}
/* Font weights */
.font-normal {
font-weight: var(--font-weight-normal);
}
.font-medium {
font-weight: var(--font-weight-medium);
}
.font-semibold {
font-weight: var(--font-weight-semibold);
}
.font-bold {
font-weight: var(--font-weight-bold);
}
/* Links */
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
a:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Lists */
ul,
ol {
margin-bottom: var(--space-4);
padding-left: var(--space-6);
}
li {
margin-bottom: var(--space-2);
}
li:last-child {
margin-bottom: 0;
}
/* Blockquote */
blockquote {
border-left: 4px solid var(--color-primary);
padding-left: var(--space-4);
margin: var(--space-6) 0;
font-style: italic;
color: var(--color-text-muted);
}
/* Code */
code,
kbd,
pre,
samp {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}
code {
background-color: var(--color-bg-alt);
padding: 0.125rem 0.25rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
pre {
background-color: var(--color-bg-alt);
padding: var(--space-4);
border-radius: var(--radius-base);
border: 1px solid var(--color-border);
overflow-x: auto;
margin-bottom: var(--space-4);
}
pre code {
background: none;
padding: 0;
border: none;
}
/* Horizontal rule */
hr {
border: 0;
border-top: 1px solid var(--color-border);
margin: var(--space-8) 0;
}
/* Strong and emphasis */
strong,
b {
font-weight: var(--font-weight-bold);
}
em,
i {
font-style: italic;
}
/* Eyebrow text (small caps above headings) */
.eyebrow {
font-family: var(--font-ui);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-primary);
margin-bottom: var(--space-2);
}
/* Display text (extra large) */
.display {
font-family: var(--font-heading);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: -0.03em;
}
@media (min-width: 768px) {
.display {
font-size: var(--font-size-6xl);
}
}
/* Text alignment */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
/* Truncate text with ellipsis */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Layout Containers */
/* Base container */
.container {
width: 100%;
max-width: var(--container-xl);
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media (min-width: 768px) {
.container {
padding-left: var(--gutter-lg);
padding-right: var(--gutter-lg);
}
}
/* Container sizes */
.container-sm {
max-width: var(--container-sm);
}
.container-md {
max-width: var(--container-md);
}
.container-lg {
max-width: var(--container-lg);
}
.container-xl {
max-width: var(--container-xl);
}
.container-2xl {
max-width: var(--container-2xl);
}
/* Full-width container (fluid) */
.container-fluid {
width: 100%;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media (min-width: 768px) {
.container-fluid {
padding-left: var(--gutter-lg);
padding-right: var(--gutter-lg);
}
}
/* Narrow content container (for prose) */
.container-prose {
max-width: var(--measure);
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
/* Main content area */
main,
.main {
flex: 1;
padding-top: var(--space-6);
padding-bottom: var(--space-12);
}
@media (min-width: 768px) {
main,
.main {
padding-top: var(--space-8);
padding-bottom: var(--space-16);
}
}
/* Section spacing */
.section {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
@media (min-width: 768px) {
.section {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
}
.section--sm {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.section--lg {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 768px) {
.section--lg {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
/* Page wrapper for sticky footer */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Hero section layout */
.hero {
padding: var(--space-12) var(--gutter);
background-color: var(--color-bg);
}
@media (min-width: 768px) {
.hero {
padding: var(--space-16) var(--gutter-lg);
}
}
@media (min-width: 1024px) {
.hero {
padding: var(--space-20) var(--gutter-lg);
}
}
.hero-content {
max-width: var(--container-xl);
margin: 0 auto;
}
/* Two-column layout */
.split-layout {
display: grid;
gap: var(--space-8);
}
@media (min-width: 768px) {
.split-layout {
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: start;
}
}
/* Sidebar layout */
.sidebar-layout {
display: grid;
gap: var(--space-8);
}
@media (min-width: 768px) {
.sidebar-layout {
grid-template-columns: 280px 1fr;
gap: var(--space-8);
}
}
@media (min-width: 1024px) {
.sidebar-layout {
grid-template-columns: 320px 1fr;
gap: var(--space-12);
}
}
.sidebar {
position: sticky;
top: var(--space-8);
}
/* Centered content layout */
.centered-layout {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: var(--space-8) var(--gutter);
}
/* Grid System and Flexbox Utilities */
/* Basic grid */
.grid {
display: grid;
gap: var(--space-6);
}
/* Grid columns */
.grid-cols-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
/* Auto-fit grid (responsive) */
.grid-auto {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-auto-sm {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.grid-auto-lg {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* Responsive grid columns */
@media (min-width: 640px) {
.sm/:grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.sm/:grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.md/:grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.md/:grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.md/:grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.lg/:grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.lg/:grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Grid gap variants */
.gap-0 {
gap: 0;
}
.gap-2 {
gap: var(--space-2);
}
.gap-4 {
gap: var(--space-4);
}
.gap-6 {
gap: var(--space-6);
}
.gap-8 {
gap: var(--space-8);
}
.gap-12 {
gap: var(--space-12);
}
/* Flexbox utilities */
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
/* Flex alignment */
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
/* Flex grow/shrink */
.flex-1 {
flex: 1 1 0%;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-none {
flex: none;
}
.grow {
flex-grow: 1;
}
.grow-0 {
flex-grow: 0;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
/* Common flex layouts */
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-stack {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.flex-row-stack {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
/* Stack patterns */
.stack {
display: flex;
flex-direction: column;
}
.stack > * + * {
margin-top: var(--space-4);
}
.stack--sm > * + * {
margin-top: var(--space-2);
}
.stack--lg > * + * {
margin-top: var(--space-8);
}
/* Cluster pattern (horizontal flow with wrapping) */
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.cluster--sm {
gap: var(--space-2);
}
.cluster--lg {
gap: var(--space-6);
}
/* Grid item alignment */
.col-span-2 {
grid-column: span 2;
}
.col-span-3 {
grid-column: span 3;
}
.col-span-full {
grid-column: 1 / -1;
}
.row-span-2 {
grid-row: span 2;
}
/* Auto margin utilities */
.ml-auto {
margin-left: auto;
}
.mr-auto {
margin-right: auto;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mt-auto {
margin-top: auto;
}
.mb-auto {
margin-bottom: auto;
}
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
/* Airmail Stripe - Par Avion inspired decorative element */
.airmail-stripe {
--stripe-width: 10px;
height: 10px;
background: repeating-linear-gradient(
135deg,
var(--color-airmail-red) 0,
var(--color-airmail-red) var(--stripe-width),
var(--color-airmail-white) var(--stripe-width),
var(--color-airmail-white) calc(var(--stripe-width) * 2),
var(--color-airmail-blue) calc(var(--stripe-width) * 2),
var(--color-airmail-blue) calc(var(--stripe-width) * 3),
var(--color-airmail-white) calc(var(--stripe-width) * 3),
var(--color-airmail-white) calc(var(--stripe-width) * 4)
);
width: 100%;
flex-shrink: 0;
}
/* Subtle variant - thinner and more subtle */
.airmail-stripe--subtle {
--stripe-width: 6px;
height: 6px;
opacity: 0.85;
}
/* Footer variant - can be used above footer */
.airmail-stripe--footer {
--stripe-width: 4px;
height: 4px;
opacity: 0.6;
}
/* Button Components */
/* Base button styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-ui);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 2px solid transparent;
border-radius: var(--radius-full);
transition: all var(--transition-fast);
min-height: 44px; /* Touch-friendly tap target */
}
.btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.btn:disabled,
.btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Primary button - solid dark */
.btn-primary,
.btn-solid {
background-color: var(--color-text);
color: var(--color-card-bg);
border-color: var(--color-text);
}
.btn-primary:hover,
.btn-solid:hover {
background-color: #1a1a1a;
border-color: #1a1a1a;
color: var(--color-card-bg);
text-decoration: none;
}
.btn-primary:active,
.btn-solid:active {
background-color: #000;
border-color: #000;
}
/* Secondary button - brand red */
.btn-secondary,
.btn-accent {
background-color: var(--color-primary);
color: var(--color-card-bg);
border-color: var(--color-primary);
}
.btn-secondary:hover,
.btn-accent:hover {
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-card-bg);
text-decoration: none;
}
/* Outline button */
.btn-outline {
background-color: transparent;
color: var(--color-text);
border-color: var(--color-border-dark);
}
.btn-outline:hover {
background-color: var(--color-bg-alt);
border-color: var(--color-text);
color: var(--color-text);
text-decoration: none;
}
/* Ghost button - minimal styling */
.btn-ghost {
background-color: transparent;
color: var(--color-text);
border-color: transparent;
}
.btn-ghost:hover {
background-color: var(--color-bg-alt);
color: var(--color-text);
text-decoration: none;
}
/* Link-style button */
.btn-link {
background: transparent;
color: var(--color-primary);
border: none;
padding: 0;
min-height: auto;
border-radius: 0;
}
.btn-link:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
/* Size variants */
.btn-sm {
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
min-height: 36px;
}
.btn-lg {
padding: var(--space-4) var(--space-8);
font-size: var(--font-size-lg);
min-height: 52px;
}
/* Full width button */
.btn-block {
width: 100%;
}
/* Icon-only button */
.btn-icon {
padding: var(--space-3);
min-width: 44px;
}
.btn-icon svg {
width: 20px;
height: 20px;
}
/* Button group */
.btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.btn-group--vertical {
flex-direction: column;
}
/* Hero-specific button - larger for prominent CTAs */
.btn-hero {
background-color: var(--color-text);
color: var(--color-card-bg);
border-color: var(--color-text);
padding: var(--space-4) var(--space-8);
font-size: var(--font-size-lg);
}
.btn-hero:hover {
background-color: #1a1a1a;
border-color: #1a1a1a;
color: var(--color-card-bg);
text-decoration: none;
}
/* Card Components */
/* Base card */
.card {
background-color: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-base);
}
/* Card with hover effect */
.card--interactive {
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card--interactive:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
/* Card sizes */
.card--sm {
padding: var(--space-4);
border-radius: var(--radius-base);
}
.card--lg {
padding: var(--space-8);
border-radius: var(--radius-xl);
}
/* Card header */
.card-header {
margin-bottom: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border-light);
}
.card-header h2,
.card-header h3,
.card-header h4 {
margin-bottom: 0;
}
/* Card body */
.card-body {
flex: 1;
}
/* Card footer */
.card-footer {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-light);
}
/* Panel card - for featured content */
.panel-card {
background-color: var(--color-card-bg);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
}
.panel-card h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-3);
}
.panel-card p {
color: var(--color-text-muted);
margin-bottom: 0;
}
/* Step card - for process steps */
.step-card {
background-color: var(--color-card-bg);
border-radius: var(--radius-lg);
padding: var(--space-6);
border: 1px solid var(--color-border);
transition: box-shadow var(--transition-base);
}
.step-card:hover {
box-shadow: var(--shadow-md);
}
.step-card span {
display: block;
font-family: var(--font-ui);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-primary);
margin-bottom: var(--space-2);
}
.step-card h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-3);
}
.step-card p {
color: var(--color-text-muted);
margin-bottom: 0;
}
/* Promise card - for feature highlights */
.promise-card {
background-color: var(--color-card-bg);
border-radius: var(--radius-lg);
padding: var(--space-6);
border: 1px solid var(--color-border);
}
.promise-card h3 {
font-size: var(--font-size-lg);
margin-bottom: var(--space-2);
}
.promise-card p {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin-bottom: 0;
}
/* Status card - for message/payment status */
.status-card {
background-color: var(--color-card-bg);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-xl);
border: 1px solid var(--color-border);
max-width: 640px;
}
.status-card h1 {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
.status-card h1 {
font-size: var(--font-size-4xl);
}
}
/* Payment card - for checkout */
.payment-card {
background-color: var(--color-card-bg);
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-xl);
border: 1px solid var(--color-border);
}
.payment-card h2 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-4);
}
.payment-amount {
font-family: var(--font-heading);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.payment-status {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin-bottom: var(--space-4);
}
/* Callout card - for CTAs */
.callout {
background-color: var(--color-card-bg);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
text-align: center;
}
.callout h2 {
margin-bottom: var(--space-4);
}
.callout p {
color: var(--color-text-muted);
margin-bottom: var(--space-6);
max-width: var(--measure);
margin-left: auto;
margin-right: auto;
}
/* Grid layouts for cards */
.card-grid {
display: grid;
gap: var(--space-6);
}
.card-grid--2 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card-grid--3 {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card-grid--4 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Email preview modal theming */
.email-preview-modal .modal-content {
background-color: var(--color-card-bg);
color: var(--color-text);
border-color: var(--color-border);
}
.email-preview-modal .modal-header,
.email-preview-modal .modal-footer {
border-color: var(--color-border);
}
.email-preview-headers {
background-color: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
}
.email-preview-headers th {
color: var(--color-text-muted);
font-weight: var(--font-weight-medium);
}
.email-preview-headers td {
color: var(--color-text);
}
.email-preview-tabs {
border-bottom: 1px solid var(--color-border);
background-color: var(--color-card-bg);
}
.email-preview-tabs .nav-tabs {
border-bottom: 0;
}
.email-preview-tabs .nav-link {
color: var(--color-text-muted);
}
.email-preview-tabs .nav-link:hover,
.email-preview-tabs .nav-link:focus {
color: var(--color-text);
}
.email-preview-tabs .nav-link.active {
color: var(--color-text);
background-color: var(--color-card-bg);
border-color: var(--color-border) var(--color-border) transparent;
}
.email-preview-iframe {
width: 100%;
height: 500px;
border: none;
background-color: var(--color-card-bg);
}
.email-preview-text {
background-color: var(--color-card-bg);
color: var(--color-text);
white-space: pre-wrap;
max-height: 500px;
overflow-y: auto;
}
.email-preview-attachments {
background-color: var(--color-card-bg);
color: var(--color-text);
}
/* Form Components */
/* Form group */
.form-group {
margin-bottom: var(--space-4);
}
/* Labels */
label,
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
margin-bottom: var(--space-2);
}
/* Required indicator */
.required::after {
content: " *";
color: var(--color-error);
}
/* Base input styles */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
display: block;
width: 100%;
padding: var(--space-3) var(--space-4);
font-family: var(--font-ui);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--color-text);
background-color: var(--color-card-bg);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-base);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 44px; /* Touch-friendly */
}
.form-control:hover,
input:hover,
textarea:hover,
select:hover {
border-color: var(--color-text-muted);
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(196, 30, 14, 0.15);
}
/* Placeholder styling */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
color: var(--color-text-light);
}
/* Textarea specific */
textarea {
resize: vertical;
min-height: 120px;
}
/* Select specific */
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B6B6B' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
padding-right: var(--space-10);
}
/* Checkbox and radio */
input[type="checkbox"],
input[type="radio"] {
width: 20px;
height: 20px;
min-height: auto;
margin: 0;
vertical-align: middle;
accent-color: var(--color-primary);
cursor: pointer;
}
.form-check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.form-check label {
margin-bottom: 0;
font-weight: var(--font-weight-normal);
cursor: pointer;
}
/* Input sizes */
.form-control--sm {
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
min-height: 36px;
}
.form-control--lg {
padding: var(--space-4) var(--space-5);
font-size: var(--font-size-lg);
min-height: 52px;
}
/* Disabled state */
.form-control:disabled,
input:disabled,
textarea:disabled,
select:disabled {
background-color: var(--color-bg-alt);
color: var(--color-text-light);
cursor: not-allowed;
opacity: 0.7;
}
/* Validation states */
.form-control.is-valid,
input.is-valid,
textarea.is-valid,
select.is-valid {
border-color: var(--color-success);
}
.form-control.is-valid:focus,
input.is-valid:focus {
box-shadow: 0 0 0 3px rgba(45, 125, 70, 0.15);
}
.form-control.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
border-color: var(--color-error);
}
.form-control.is-invalid:focus,
input.is-invalid:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
/* Validation messages */
.valid-feedback {
display: none;
color: var(--color-success);
font-size: var(--font-size-sm);
margin-top: var(--space-2);
}
.invalid-feedback {
display: none;
color: var(--color-error);
font-size: var(--font-size-sm);
margin-top: var(--space-2);
}
.is-valid ~ .valid-feedback,
.is-invalid ~ .invalid-feedback {
display: block;
}
/* Help text */
.form-text {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-top: var(--space-2);
}
/* Input group */
.input-group {
display: flex;
align-items: stretch;
}
.input-group > .form-control,
.input-group > input {
flex: 1;
border-radius: 0;
}
.input-group > .form-control:first-child,
.input-group > input:first-child {
border-radius: var(--radius-base) 0 0 var(--radius-base);
}
.input-group > .form-control:last-child,
.input-group > input:last-child {
border-radius: 0 var(--radius-base) var(--radius-base) 0;
}
.input-group > .btn {
border-radius: 0 var(--radius-base) var(--radius-base) 0;
}
/* Form inline layout */
.form-inline {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
align-items: flex-end;
}
.form-inline .form-group {
margin-bottom: 0;
}
/* Visually hidden but accessible */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Navigation Component */
/* Main header */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-card-bg);
}
/* Navbar */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
background-color: var(--color-card-bg);
border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
.navbar {
padding: var(--space-4) var(--space-6);
}
}
/* Navbar container */
.navbar-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: var(--container-xl);
margin: 0 auto;
}
/* Brand/logo */
.navbar-brand {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: var(--color-text);
font-family: var(--font-heading);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
}
.navbar-brand:hover {
text-decoration: none;
color: var(--color-text);
}
.navbar-brand img {
height: 50px;
width: auto;
position: relative;
z-index: 10;
margin-top: -25px;
margin-bottom: -25px;
}
/* Nav links container */
.navbar-nav {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
gap: var(--space-2);
}
@media (min-width: 576px) {
.navbar-nav {
flex-direction: row;
align-items: center;
}
}
/* Individual nav items */
.nav-item {
margin: 0;
}
/* Nav links */
.nav-link {
display: block;
padding: var(--space-2) var(--space-4);
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-base);
transition: color var(--transition-fast), background-color var(--transition-fast);
}
.nav-link:hover {
color: var(--color-text);
background-color: var(--color-bg-alt);
text-decoration: none;
}
.nav-link.active {
color: var(--color-text);
font-weight: var(--font-weight-semibold);
}
/* Bootstrap navbar-light overrides to keep theme tokens */
.navbar.navbar-light .navbar-brand {
color: var(--color-text);
}
.navbar.navbar-light .navbar-brand:hover {
color: var(--color-text);
}
.navbar.navbar-light .navbar-nav .nav-link {
color: var(--color-text-muted);
}
.navbar.navbar-light .navbar-nav .nav-link:hover,
.navbar.navbar-light .navbar-nav .nav-link:focus {
color: var(--color-text);
background-color: var(--color-bg-alt);
}
.navbar.navbar-light .navbar-nav .nav-link.active {
color: var(--color-text);
font-weight: var(--font-weight-semibold);
}
.navbar.navbar-light .navbar-toggler {
border-color: var(--color-border);
}
.navbar.navbar-light .dropdown-menu {
background-color: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
box-shadow: var(--shadow-lg);
padding: var(--space-2) 0;
}
/* Dropdown */
.nav-dropdown {
position: relative;
}
.nav-dropdown-toggle {
display: flex;
align-items: center;
gap: var(--space-1);
}
.nav-dropdown-toggle::after {
content: "";
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform var(--transition-fast);
}
.nav-dropdown:hover .nav-dropdown-toggle::after {
transform: rotate(180deg);
}
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
background-color: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
box-shadow: var(--shadow-lg);
padding: var(--space-2) 0;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
list-style: none;
margin: 0;
z-index: var(--z-dropdown);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
display: block;
padding: var(--space-2) var(--space-4);
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--font-size-sm);
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.dropdown-item:hover {
background-color: var(--color-bg-alt);
color: var(--color-text);
text-decoration: none;
}
.dropdown-item.active {
color: var(--color-primary);
font-weight: var(--font-weight-medium);
}
/* Right-aligned nav section */
.navbar-actions {
display: none;
align-items: center;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 768px) {
.navbar-actions {
display: flex;
}
}
/* Mobile menu toggle */
.navbar-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
border-radius: var(--radius-base);
transition: background-color var(--transition-fast);
}
.navbar-toggle:hover {
background-color: var(--color-bg-alt);
}
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.navbar-toggle-icon {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-text);
position: relative;
transition: background-color var(--transition-fast);
}
.navbar-toggle-icon::before,
.navbar-toggle-icon::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: var(--color-text);
transition: transform var(--transition-fast);
}
.navbar-toggle-icon::before {
top: -7px;
}
.navbar-toggle-icon::after {
bottom: -7px;
}
/* Mobile menu open state */
.navbar-toggle[aria-expanded="true"] .navbar-toggle-icon {
background-color: transparent;
}
.navbar-toggle[aria-expanded="true"] .navbar-toggle-icon::before {
transform: rotate(45deg) translate(5px, 5px);
}
.navbar-toggle[aria-expanded="true"] .navbar-toggle-icon::after {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Mobile menu panel */
.navbar-collapse {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--color-card-bg);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
padding: var(--space-4);
}
.navbar-collapse.show {
display: block;
}
@media (min-width: 768px) {
.navbar-collapse {
display: contents;
position: static;
background: none;
border: none;
box-shadow: none;
padding: 0;
}
}
.navbar-collapse .navbar-nav {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
@media (min-width: 768px) {
.navbar-collapse .navbar-nav {
flex-direction: row;
}
}
.navbar-collapse .navbar-actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
.navbar-collapse .navbar-actions {
flex-direction: row;
margin-top: 0;
padding-top: 0;
border-top: none;
}
}
/* Bootstrap compatibility - keep Bootstrap navbar working */
.navbar.navbar-expand-sm .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
@media (max-width: 575.98px) {
.navbar.navbar-expand-sm .navbar-collapse {
display: none !important;
}
.navbar.navbar-expand-sm .navbar-collapse.show {
display: block !important;
}
}
/* Panel Components - Themed decorative content sections */
/* Base panel container with gradient background */
.ose-panel {
font-family: var(--font-body);
color: var(--color-panel-ink);
margin: 1.5rem -0.75rem 2rem;
padding: 3.2rem clamp(1.25rem, 2vw, 2rem) 3rem;
background:
radial-gradient(1000px 520px at 10% -10%, var(--color-panel-gradient-1), transparent 60%),
radial-gradient(900px 520px at 90% 10%, var(--color-panel-gradient-2), transparent 60%),
linear-gradient(120deg, var(--color-panel-bg-start) 0%, var(--color-panel-bg-mid) 45%, var(--color-panel-bg-end) 100%);
border-radius: 28px;
position: relative;
overflow: hidden;
}
/* Subtle grid overlay */
.ose-panel::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(var(--color-panel-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--color-panel-grid) 1px, transparent 1px);
background-size: 46px 46px;
opacity: 0.25;
pointer-events: none;
}
/* Panel header section */
.ose-panel-header {
position: relative;
z-index: 1;
display: grid;
gap: 0.6rem;
margin-bottom: 2rem;
}
/* Panel title - display font */
.ose-panel-title {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 3.8vw, 3.2rem);
color: var(--color-panel-ink);
}
/* Panel subtitle */
.ose-panel-subtitle {
color: var(--color-panel-muted);
max-width: 52rem;
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}
/* Panel content grid */
.ose-panel-grid {
display: grid;
gap: 1rem;
position: relative;
z-index: 1;
}
/* Multi-column panel grid */
.ose-panel-grid--cols {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
/* Panel item card */
.ose-panel-item {
background: var(--color-panel-item-bg);
border-radius: 16px;
padding: 1.2rem 1.4rem;
border: 1px solid var(--color-panel-item-border);
box-shadow: 0 18px 40px var(--color-shadow);
}
/* Larger panel item */
.ose-panel-item--lg {
border-radius: 20px;
padding: 1.8rem;
}
/* Panel item headings */
.ose-panel-item h2,
.ose-panel-item h3 {
color: var(--color-panel-ink);
}
.ose-panel-item h2 {
font-size: 1.1rem;
margin-bottom: 0.8rem;
}
/* Panel item text */
.ose-panel-item p,
.ose-panel-item li,
.ose-panel-item .form-text {
color: var(--color-panel-muted);
margin-bottom: 0;
}
.ose-panel-item ul {
margin-bottom: 0;
padding-left: 1.2rem;
}
/* Panel item buttons */
.ose-panel-item .btn-primary {
border-radius: 999px;
background: var(--color-panel-ink);
border: none;
}
.ose-panel-item .btn-primary:hover,
.ose-panel-item .btn-primary:focus {
background: var(--color-text);
filter: brightness(1.2);
}
.ose-panel-item .btn-outline-secondary {
border-radius: 999px;
}
/* FAQ-style expandable item */
details.ose-panel-item summary {
font-weight: 600;
font-size: 1.05rem;
cursor: pointer;
list-style: none;
}
details.ose-panel-item summary::-webkit-details-marker {
display: none;
}
details.ose-panel-item summary::after {
content: "+";
float: right;
color: var(--color-panel-accent-deep);
font-weight: 700;
}
details.ose-panel-item[open] summary::after {
content: "–";
}
details.ose-panel-item p {
margin: 0.75rem 0 0;
}
/* Highlighted/dark panel item */
.ose-panel-highlight {
margin-top: 2rem;
background: var(--color-panel-highlight-bg);
color: var(--color-panel-highlight-text);
border-radius: 18px;
padding: 1.6rem;
box-shadow: 0 18px 40px var(--color-shadow);
position: relative;
z-index: 1;
}
.ose-panel-highlight h2 {
color: var(--color-panel-highlight-text);
}
.ose-panel-highlight p {
color: var(--color-panel-highlight-text);
opacity: 0.9;
}
.ose-panel-highlight a {
color: var(--color-panel-accent);
font-weight: 600;
}
/* Danger variant for profile card */
.ose-panel-item--danger {
border-color: rgba(216, 81, 64, 0.35);
}
.ose-panel-item--danger .btn-outline-danger {
border-radius: 999px;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.ose-panel {
margin: 1rem 0 2rem;
border-radius: 20px;
}
}
/* Profile page specific negative margin variant */
.ose-panel--profile {
margin: -1rem -0.75rem 2rem;
padding: 3rem clamp(1.25rem, 2vw, 2rem) 3rem;
}
@media (max-width: 768px) {
.ose-panel--profile {
margin: -0.5rem 0 2rem;
border-radius: 20px;
}
}
/* Footer Component */
.site-footer {
margin-top: auto;
padding: var(--space-6) var(--space-4);
background-color: var(--color-card-bg);
border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
.site-footer {
padding: var(--space-8) var(--space-6);
}
}
.footer-container {
max-width: var(--container-xl);
margin: 0 auto;
}
/* Footer content layout */
.footer-content {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
@media (min-width: 768px) {
.footer-content {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
}
/* Footer branding */
.footer-brand {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-text);
text-decoration: none;
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
}
.footer-brand:hover {
text-decoration: none;
color: var(--color-text);
}
.footer-brand img {
height: 32px;
width: auto;
}
/* Footer navigation */
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-6);
list-style: none;
margin: 0;
padding: 0;
}
.footer-nav a {
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--font-size-sm);
transition: color var(--transition-fast);
}
.footer-nav a:hover {
color: var(--color-text);
text-decoration: underline;
}
/* Footer bottom row */
.footer-bottom {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
.footer-bottom {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
/* Copyright text */
.footer-copyright {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin: 0;
}
.footer-copyright a {
color: var(--color-text-muted);
text-decoration: none;
}
.footer-copyright a:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* Theme switcher in footer */
.theme-switcher {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.theme-switcher label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
margin-bottom: 0;
}
.theme-switcher select {
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-xs);
min-height: auto;
border-radius: var(--radius-sm);
background-color: var(--color-bg-alt);
border-color: var(--color-border);
}
/* Simple footer (single-row) - for compatibility with existing layout */
.footer {
padding: var(--space-4);
background-color: var(--color-card-bg);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.footer a {
color: var(--color-text-muted);
text-decoration: none;
}
.footer a:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* Footer links separator */
.footer-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.footer-links a + a::before {
content: "·";
margin-right: var(--space-2);
color: var(--color-border-dark);
}
/* Table Sorting Styles */
.table {
--bs-table-bg: var(--color-card-bg);
--bs-table-color: var(--color-text);
--bs-table-border-color: var(--color-border);
--ose-table-stripe-bg: var(--color-bg-alt);
--ose-table-hover-bg: var(--color-border);
--ose-table-stripe-bg: color-mix(in srgb, var(--color-card-bg) 92%, var(--color-text) 8%);
--ose-table-hover-bg: color-mix(in srgb, var(--color-card-bg) 88%, var(--color-text) 12%);
--bs-table-striped-bg: var(--ose-table-stripe-bg);
--bs-table-striped-color: var(--color-text);
--bs-table-hover-bg: var(--ose-table-hover-bg);
--bs-table-hover-color: var(--color-text);
color: var(--color-text);
background-color: var(--color-card-bg);
}
.table thead th {
background-color: var(--color-bg-alt);
color: var(--color-text-muted);
border-color: var(--color-border);
}
.table tbody td,
.table tbody th {
border-color: var(--color-border);
}
.table > :not(caption) > * > * {
background-color: var(--color-card-bg);
color: var(--color-text);
border-color: var(--color-border);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: var(--ose-table-stripe-bg);
}
.table tbody tr:hover > * {
background-color: var(--ose-table-hover-bg);
}
.table thead th[role="columnheader"] {
cursor: pointer;
user-select: none;
position: relative;
padding-right: 1.5rem;
}
.table thead th[role="columnheader"]:hover {
background-color: var(--ose-table-hover-bg);
}
.table thead th[role="columnheader"]:focus {
outline: 2px solid var(--bs-primary);
outline-offset: -2px;
}
.table thead th[role="columnheader"]::after {
content: "⇅";
position: absolute;
right: 0.5rem;
opacity: 0.3;
font-size: 0.8em;
}
.table thead th[aria-sort="ascending"]::after {
content: "↑";
opacity: 1;
}
.table thead th[aria-sort="descending"]::after {
content: "↓";
opacity: 1;
}
/* Ensure checkboxes and action columns don't get sort indicators */
.table thead th[data-sort-method="none"] {
cursor: default;
padding-right: 0.5rem;
}
.table thead th[data-sort-method="none"]::after {
display: none;
}
.table thead th[data-sort-method="none"]:hover {
background-color: transparent;
}
/* Home Page Styles */
/* Hero section with gradient background */
.page-hero {
position: relative;
overflow: hidden;
padding: var(--space-12) var(--gutter);
margin: var(--space-6) calc(-1 * var(--gutter)) var(--space-8);
border-radius: var(--radius-2xl);
background:
radial-gradient(1200px 600px at 15% -10%, rgba(196, 30, 14, 0.15), transparent 60%),
radial-gradient(900px 520px at 85% 5%, rgba(196, 30, 14, 0.1), transparent 60%),
linear-gradient(120deg, var(--color-bg) 0%, var(--color-bg-alt) 55%, #f8f6ff 100%);
}
@media (min-width: 768px) {
.page-hero {
padding: var(--space-16) var(--gutter-lg);
margin: var(--space-8) calc(-1 * var(--gutter-lg)) var(--space-12);
}
}
/* Subtle grid overlay */
.page-hero::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(45, 45, 45, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(45, 45, 45, 0.05) 1px, transparent 1px);
background-size: 48px 48px;
opacity: 0.2;
pointer-events: none;
}
/* Hero content grid */
.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: center;
}
@media (min-width: 768px) {
.hero-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
}
}
/* Hero copy section */
.hero-copy {
max-width: 560px;
}
/* Hero eyebrow */
.hero-eyebrow {
font-family: var(--font-ui);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-3);
}
/* Hero title */
.hero-title {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: var(--font-weight-bold);
letter-spacing: -0.02em;
line-height: var(--line-height-tight);
color: var(--color-text);
margin-bottom: var(--space-4);
}
/* Hero lead paragraph */
.hero-lead {
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
line-height: var(--line-height-relaxed);
color: var(--color-text-muted);
max-width: 52rem;
margin-bottom: var(--space-6);
}
/* Hero action buttons */
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
margin-bottom: var(--space-4);
}
/* Hero note */
.hero-note {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: 0;
}
/* Hero panel (right side) */
.hero-panel {
background: var(--color-card-bg);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
padding: var(--space-6);
display: grid;
gap: var(--space-6);
border: 1px solid var(--color-border);
}
/* Panel cards with accent border */
.hero-panel .panel-card {
border-left: 4px solid var(--color-primary);
padding-left: var(--space-4);
box-shadow: none;
border-radius: 0;
background: transparent;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
.hero-panel .panel-card h3 {
font-family: var(--font-ui);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.hero-panel .panel-card p {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: 0;
}
/* Hero flow indicators */
.hero-flow {
display: grid;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-light);
}
.hero-flow span {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
.hero-flow .dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--color-primary);
flex-shrink: 0;
}
/* CTA callout box */
.cta-callout {
margin-top: var(--space-6);
padding: var(--space-4) var(--space-5);
background: rgba(255, 255, 255, 0.75);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
}
.cta-callout strong {
display: block;
margin-bottom: var(--space-2);
}
/* Section styles */
.page-section {
padding: var(--space-12) 0;
}
.page-section + .page-section {
border-top: 1px solid var(--color-border-light);
}
/* Section title */
.section-title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-8);
}
/* Step grid for "How it works" */
.step-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-6);
}
/* Inline section (two-column with card) */
.inline-section {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: center;
}
@media (min-width: 768px) {
.inline-section {
grid-template-columns: 1fr 1fr;
}
}
/* Dark status card */
.status-form {
background: var(--color-text);
color: var(--color-card-bg);
border-radius: var(--radius-xl);
padding: var(--space-6);
display: grid;
gap: var(--space-4);
box-shadow: var(--shadow-xl);
}
.status-form strong {
font-size: var(--font-size-lg);
}
.status-form input {
border-radius: var(--radius-base);
border: none;
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-base);
}
.status-form .btn {
border-radius: var(--radius-base);
background: var(--color-primary);
border: none;
color: var(--color-card-bg);
font-weight: var(--font-weight-semibold);
}
.status-form .btn:hover {
background: var(--color-primary-dark);
}
.status-form small {
font-size: var(--font-size-xs);
opacity: 0.8;
}
/* Animation classes */
.rise-in {
animation: rise 0.8s ease forwards;
opacity: 0;
transform: translateY(12px);
}
.rise-in.delay-1 {
animation-delay: 0.15s;
}
.rise-in.delay-2 {
animation-delay: 0.3s;
}
@keyframes rise {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.rise-in {
animation: none;
opacity: 1;
transform: none;
}
}
/* Mobile adjustments */
@media (max-width: 767.98px) {
.page-hero {
margin-left: 0;
margin-right: 0;
border-radius: var(--radius-xl);
}
}
/* Message Status / Payment Pages */
/* Status section */
.status-section {
padding: var(--space-6) 0 var(--space-8);
}
@media (min-width: 768px) {
.status-section {
padding: var(--space-8) 0 var(--space-12);
}
}
/* Payment page grid */
.payment-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: start;
}
@media (min-width: 768px) {
.payment-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
}
}
/* Payment page title */
.payment-title {
font-family: var(--font-heading);
font-size: clamp(2rem, 3.5vw, 2.75rem);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-bottom: var(--space-4);
}
/* Payment page lead */
.payment-lead {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
/* Info list with dots */
.info-list {
list-style: none;
padding: 0;
margin: var(--space-4) 0 0;
display: grid;
gap: var(--space-3);
}
.info-list li {
display: grid;
grid-template-columns: 18px 1fr;
gap: var(--space-3);
align-items: start;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin-bottom: 0;
}
.info-dot {
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background: var(--color-primary);
margin-top: 0.35rem;
flex-shrink: 0;
}
/* Payment card */
.payment-card {
background: var(--color-card-bg);
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-xl);
border: 1px solid var(--color-border);
}
.payment-card h2 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-4);
}
/* Payment amount display */
.payment-amount {
font-family: var(--font-heading);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
/* Payment status text */
.payment-status {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin-bottom: var(--space-4);
}
/* Payment card button */
.payment-card .btn {
width: 100%;
border-radius: var(--radius-full);
background: var(--color-text);
color: var(--color-card-bg);
font-weight: var(--font-weight-semibold);
border: none;
padding: var(--space-4) var(--space-6);
margin-top: var(--space-4);
}
.payment-card .btn:hover,
.payment-card .btn:focus {
background: #1a1a1a;
color: var(--color-card-bg);
}
/* Note text in card */
.payment-card .note {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-top: var(--space-4);
}
/* Status result card (for completed/pending states) */
.status-card {
position: relative;
z-index: 1;
background: var(--color-card-bg);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-xl);
border: 1px solid var(--color-border);
max-width: 640px;
}
.status-card h1 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-4);
}
.status-card p {
color: var(--color-text-muted);
font-size: var(--font-size-lg);
}
/* Refresh notice */
.status-refresh {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-top: var(--space-4);
}
/* Promise cards grid */
.promise-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-6);
margin-top: var(--space-8);
}
.promise {
background: var(--color-card-bg);
border-radius: var(--radius-lg);
padding: var(--space-5);
border: 1px solid var(--color-border);
}
.promise h3 {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.promise p {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: 0;
}
/* Senders page status check form */
.status-check-card {
background: var(--color-card-bg);
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
}
.status-check-card h2 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-4);
}
/* Status result states */
.status-result {
padding: var(--space-4);
border-radius: var(--radius-base);
margin-top: var(--space-4);
}
.status-result strong {
display: block;
margin-bottom: var(--space-2);
}
.status-success {
background-color: rgba(45, 125, 70, 0.1);
border: 1px solid var(--color-success);
color: var(--color-success);
}
.status-error {
background-color: rgba(220, 38, 38, 0.1);
border: 1px solid var(--color-error);
color: var(--color-error);
}
.status-info {
background-color: rgba(30, 77, 140, 0.1);
border: 1px solid var(--color-info);
color: var(--color-info);
}
/* Mobile adjustments */
@media (max-width: 767.98px) {
.status-hero {
margin-left: 0;
margin-right: 0;
border-radius: var(--radius-xl);
}
}
/* Auth Pages - Login, Register, Password Reset */
/* Auth page layout */
.auth-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: var(--space-8) var(--gutter);
}
/* Auth card container */
.auth-card {
width: 100%;
max-width: 420px;
background: var(--color-card-bg);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
}
@media (min-width: 768px) {
.auth-card {
padding: var(--space-10);
}
}
/* Auth header */
.auth-header {
text-align: center;
margin-bottom: var(--space-8);
}
.auth-header img {
width: 64px;
height: 64px;
margin: 0 auto var(--space-4);
}
.auth-header h1 {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-2);
}
.auth-header p {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin-bottom: 0;
}
/* Auth form */
.auth-form .form-group {
margin-bottom: var(--space-5);
}
.auth-form .btn {
width: 100%;
margin-top: var(--space-4);
}
/* Divider with text */
.auth-divider {
display: flex;
align-items: center;
gap: var(--space-4);
margin: var(--space-6) 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
}
/* Auth footer links */
.auth-footer {
text-align: center;
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border-light);
}
.auth-footer p {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.auth-footer a {
font-weight: var(--font-weight-medium);
}
/* Remember me checkbox */
.auth-remember {
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--font-size-sm);
}
.auth-remember .form-check {
margin-bottom: 0;
}
/* Error/validation summary */
.auth-errors {
background-color: rgba(220, 38, 38, 0.1);
border: 1px solid var(--color-error);
border-radius: var(--radius-base);
padding: var(--space-4);
margin-bottom: var(--space-6);
}
.auth-errors ul {
margin: 0;
padding-left: var(--space-5);
color: var(--color-error);
font-size: var(--font-size-sm);
}
.auth-errors li {
margin-bottom: var(--space-1);
}
/* Success message */
.auth-success {
background-color: rgba(45, 125, 70, 0.1);
border: 1px solid var(--color-success);
border-radius: var(--radius-base);
padding: var(--space-4);
margin-bottom: var(--space-6);
color: var(--color-success);
font-size: var(--font-size-sm);
}
/* External login buttons */
.external-logins {
display: grid;
gap: var(--space-3);
}
.btn-external {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-bg-alt);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-base);
color: var(--color-text);
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast);
}
.btn-external:hover {
background: var(--color-card-bg);
border-color: var(--color-text-muted);
text-decoration: none;
}
.btn-external svg,
.btn-external img {
width: 20px;
height: 20px;
}
/* Password strength indicator */
.password-strength {
margin-top: var(--space-2);
}
.password-strength-bar {
height: 4px;
background: var(--color-border);
border-radius: var(--radius-full);
overflow: hidden;
}
.password-strength-fill {
height: 100%;
transition: width var(--transition-base), background-color var(--transition-base);
}
.password-strength-fill.weak {
width: 33%;
background: var(--color-error);
}
.password-strength-fill.medium {
width: 66%;
background: var(--color-warning);
}
.password-strength-fill.strong {
width: 100%;
background: var(--color-success);
}
.password-strength-text {
font-size: var(--font-size-xs);
margin-top: var(--space-1);
color: var(--color-text-muted);
}
/* Two-column auth layout (optional) */
@media (min-width: 1024px) {
.auth-layout-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.auth-layout-split .auth-content {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-8);
}
.auth-layout-split .auth-sidebar {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-12);
background: var(--color-bg);
}
}
/* Dashboard Pages - Authenticated User Interface */
/* Dashboard header */
.dashboard-header {
margin-bottom: var(--space-8);
}
.dashboard-header h1 {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-2);
}
.dashboard-header p {
color: var(--color-text-muted);
margin-bottom: 0;
}
/* Dashboard sections */
.dashboard-section {
margin-bottom: var(--space-8);
}
.dashboard-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.dashboard-section-header h2 {
font-size: var(--font-size-xl);
margin-bottom: 0;
}
/* Message list */
.message-list {
display: grid;
gap: var(--space-3);
}
/* Message item */
.message-item {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-4);
align-items: center;
padding: var(--space-4);
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
transition: box-shadow var(--transition-fast);
}
.message-item:hover {
box-shadow: var(--shadow-md);
}
.message-item-content {
min-width: 0;
}
.message-item-sender {
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.message-item-subject {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.message-item-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2);
}
.message-item-date {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.message-item-actions {
display: flex;
gap: var(--space-2);
}
/* Message status badges */
.status-badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
}
.status-badge--pending {
background: rgba(245, 158, 11, 0.15);
color: #b45309;
}
.status-badge--delivered {
background: rgba(45, 125, 70, 0.15);
color: var(--color-success);
}
.status-badge--quarantined {
background: rgba(220, 38, 38, 0.15);
color: var(--color-error);
}
.status-badge--expired {
background: rgba(107, 107, 107, 0.15);
color: var(--color-text-muted);
}
/* Empty state */
.empty-state {
text-align: center;
padding: var(--space-12) var(--space-4);
color: var(--color-text-muted);
}
.empty-state-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--space-4);
opacity: 0.4;
}
.empty-state h3 {
font-size: var(--font-size-lg);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.empty-state p {
max-width: 320px;
margin: 0 auto var(--space-6);
}
/* Address book */
.address-list {
display: grid;
gap: var(--space-2);
}
.address-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
}
.address-item-email {
font-weight: var(--font-weight-medium);
}
.address-item-status {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
/* Protected addresses */
.protected-address-card {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-4);
}
.protected-address-card h3 {
font-size: var(--font-size-lg);
margin-bottom: var(--space-2);
}
.protected-address-card code {
background: var(--color-bg-alt);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
border: 1px solid var(--color-border);
display: inline-block;
}
.protected-address-card-actions {
margin-top: var(--space-4);
display: flex;
gap: var(--space-3);
}
/* Dashboard table */
.dashboard-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.dashboard-table th,
.dashboard-table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.dashboard-table th {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--color-bg-alt);
}
.dashboard-table tr:hover td {
background: var(--color-bg-alt);
}
.dashboard-table td:first-child,
.dashboard-table th:first-child {
padding-left: var(--space-5);
}
.dashboard-table td:last-child,
.dashboard-table th:last-child {
padding-right: var(--space-5);
}
/* Pagination */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border-light);
}
.pagination-item {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--space-3);
border-radius: var(--radius-base);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-muted);
text-decoration: none;
transition: all var(--transition-fast);
}
.pagination-item:hover {
background: var(--color-bg-alt);
color: var(--color-text);
text-decoration: none;
}
.pagination-item.active {
background: var(--color-text);
color: var(--color-card-bg);
}
.pagination-item.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Dashboard stats cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.stat-card {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.stat-card-label {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.stat-card-value {
font-family: var(--font-heading);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-text);
}
.stat-card-change {
font-size: var(--font-size-sm);
margin-top: var(--space-2);
}
.stat-card-change.positive {
color: var(--color-success);
}
.stat-card-change.negative {
color: var(--color-error);
}
/* Dashboard alert banner */
.dashboard-alert {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-base);
margin-bottom: var(--space-6);
}
.dashboard-alert--warning {
background: rgba(245, 158, 11, 0.1);
border: 1px solid var(--color-warning);
color: #92400e;
}
.dashboard-alert--info {
background: rgba(30, 77, 140, 0.1);
border: 1px solid var(--color-info);
color: var(--color-info);
}
.dashboard-alert a {
font-weight: var(--font-weight-semibold);
}
/* Warm Theme (Default) - FT-inspired warm beige */
/* Serif headings + Sans body - classic editorial feel */
[data-theme="warm"],
:root {
/* Typography */
--font-heading: var(--font-serif);
--font-body: var(--font-sans);
--font-ui: var(--font-sans);
/* Background colors */
--color-bg: #FFF8F0;
--color-bg-alt: #FAF7F2;
--color-card-bg: #FFFFFF;
/* Text colors */
--color-text: #2D2D2D;
--color-text-muted: #6B6B6B;
--color-text-light: #8F8F8F;
--color-text-inverse: #FFFFFF;
/* Brand colors */
--color-primary: #C41E0E;
--color-primary-dark: #A01808;
--color-primary-light: #E63B2E;
/* Airmail colors */
--color-airmail-red: #E63B2E;
--color-airmail-blue: #1E4D8C;
--color-airmail-white: #FFFFFF;
/* UI colors */
--color-border: #E5E0D8;
--color-border-dark: #D4CFC7;
--color-border-light: #F0EDE8;
/* Shadow colors */
--color-shadow: rgba(11, 13, 18, 0.08);
--color-shadow-lg: rgba(11, 13, 18, 0.16);
}
/* Cream Theme - Lighter, more neutral cream */
/* Serif headings + Sans body - subtle warmth */
[data-theme="cream"] {
/* Typography */
--font-heading: var(--font-serif);
--font-body: var(--font-sans);
--font-ui: var(--font-sans);
/* Background colors - lighter cream */
--color-bg: #FFFEF9;
--color-bg-alt: #FBF9F5;
--color-card-bg: #FFFFFF;
/* Text colors - slightly softer */
--color-text: #333333;
--color-text-muted: #737373;
--color-text-light: #999999;
--color-text-inverse: #FFFFFF;
/* Brand colors - same red identity */
--color-primary: #C41E0E;
--color-primary-dark: #A01808;
--color-primary-light: #E63B2E;
/* Airmail colors */
--color-airmail-red: #E63B2E;
--color-airmail-blue: #1E4D8C;
--color-airmail-white: #FFFFFF;
/* UI colors - warmer borders */
--color-border: #E8E4DC;
--color-border-dark: #D8D4CC;
--color-border-light: #F5F2ED;
/* Shadow colors */
--color-shadow: rgba(50, 40, 30, 0.06);
--color-shadow-lg: rgba(50, 40, 30, 0.12);
}
/* Cool Theme - Light gray, more corporate/neutral */
/* Serif headings + Sans body - professional feel */
[data-theme="cool"] {
/* Typography */
--font-heading: var(--font-serif);
--font-body: var(--font-sans);
--font-ui: var(--font-sans);
/* Background colors - cool gray */
--color-bg: #F8F9FA;
--color-bg-alt: #F1F3F5;
--color-card-bg: #FFFFFF;
/* Text colors - pure grayscale */
--color-text: #212529;
--color-text-muted: #6C757D;
--color-text-light: #ADB5BD;
--color-text-inverse: #FFFFFF;
/* Brand colors - same red identity */
--color-primary: #C41E0E;
--color-primary-dark: #A01808;
--color-primary-light: #E63B2E;
/* Airmail colors */
--color-airmail-red: #E63B2E;
--color-airmail-blue: #1E4D8C;
--color-airmail-white: #FFFFFF;
/* UI colors - cool gray borders */
--color-border: #DEE2E6;
--color-border-dark: #CED4DA;
--color-border-light: #E9ECEF;
/* Shadow colors */
--color-shadow: rgba(0, 0, 0, 0.06);
--color-shadow-lg: rgba(0, 0, 0, 0.1);
}
/* Modern Theme - Clean tech startup look */
/* All sans-serif - contemporary and minimal */
[data-theme="modern"] {
/* Typography - all sans */
--font-heading: var(--font-sans);
--font-body: var(--font-sans);
--font-ui: var(--font-sans);
/* Background colors - cool gray */
--color-bg: #F8F9FA;
--color-bg-alt: #F1F3F5;
--color-card-bg: #FFFFFF;
/* Text colors - crisp grayscale */
--color-text: #1A1A1A;
--color-text-muted: #6C757D;
--color-text-light: #ADB5BD;
--color-text-inverse: #FFFFFF;
/* Brand colors */
--color-primary: #C41E0E;
--color-primary-dark: #A01808;
--color-primary-light: #E63B2E;
/* Airmail colors */
--color-airmail-red: #E63B2E;
--color-airmail-blue: #1E4D8C;
--color-airmail-white: #FFFFFF;
/* UI colors - subtle borders */
--color-border: #E5E7EB;
--color-border-dark: #D1D5DB;
--color-border-light: #F3F4F6;
/* Shadow colors - subtle */
--color-shadow: rgba(0, 0, 0, 0.04);
--color-shadow-lg: rgba(0, 0, 0, 0.08);
}
/* Editorial Theme - Long-form reading optimized */
/* All serif - newspaper/magazine aesthetic */
[data-theme="editorial"] {
/* Typography - all serif for immersive reading */
--font-heading: var(--font-serif);
--font-body: var(--font-serif);
--font-ui: var(--font-sans);
/* Background colors - warm paper */
--color-bg: #FDF9F3;
--color-bg-alt: #F8F4EE;
--color-card-bg: #FFFEFA;
/* Text colors - high contrast for reading */
--color-text: #1C1917;
--color-text-muted: #57534E;
--color-text-light: #A8A29E;
--color-text-inverse: #FFFFFF;
/* Brand colors */
--color-primary: #C41E0E;
--color-primary-dark: #A01808;
--color-primary-light: #E63B2E;
/* Airmail colors */
--color-airmail-red: #E63B2E;
--color-airmail-blue: #1E4D8C;
--color-airmail-white: #FFFFFF;
/* UI colors - warm sepia borders */
--color-border: #E7E0D6;
--color-border-dark: #D6CFC5;
--color-border-light: #F5F0E8;
/* Shadow colors - warm */
--color-shadow: rgba(28, 25, 23, 0.06);
--color-shadow-lg: rgba(28, 25, 23, 0.12);
}
/* Minimal Theme - Sparse Apple-like aesthetic */
/* Light sans-serif - clean and airy */
[data-theme="minimal"] {
/* Typography - light sans for sparse feel */
--font-heading: var(--font-sans);
--font-body: var(--font-sans);
--font-ui: var(--font-sans);
/* Override font weights for lighter feel */
--font-weight-normal: 300;
--font-weight-medium: 400;
--font-weight-semibold: 500;
--font-weight-bold: 600;
/* Background colors - pure white */
--color-bg: #FFFFFF;
--color-bg-alt: #FAFAFA;
--color-card-bg: #FFFFFF;
/* Text colors - soft gray */
--color-text: #333333;
--color-text-muted: #86868B;
--color-text-light: #AEAEB2;
--color-text-inverse: #FFFFFF;
/* Brand colors */
--color-primary: #C41E0E;
--color-primary-dark: #A01808;
--color-primary-light: #E63B2E;
/* Airmail colors */
--color-airmail-red: #E63B2E;
--color-airmail-blue: #1E4D8C;
--color-airmail-white: #FFFFFF;
/* UI colors - barely-there borders */
--color-border: #E5E5EA;
--color-border-dark: #D1D1D6;
--color-border-light: #F2F2F7;
/* Shadow colors - very subtle */
--color-shadow: rgba(0, 0, 0, 0.03);
--color-shadow-lg: rgba(0, 0, 0, 0.06);
}
/* Ink Theme - Classical high-contrast print */
/* Bold serif - traditional letterpress aesthetic */
[data-theme="ink"] {
/* Typography - bold serif for impact */
--font-heading: var(--font-serif);
--font-body: var(--font-serif);
--font-ui: var(--font-serif);
/* Background colors - stark white */
--color-bg: #FFFFFF;
--color-bg-alt: #FAFAFA;
--color-card-bg: #FFFFFF;
/* Text colors - true black for contrast */
--color-text: #000000;
--color-text-muted: #4A4A4A;
--color-text-light: #757575;
--color-text-inverse: #FFFFFF;
/* Brand colors - deeper red */
--color-primary: #B31B0D;
--color-primary-dark: #8B1509;
--color-primary-light: #D42A1B;
/* Airmail colors */
--color-airmail-red: #D42A1B;
--color-airmail-blue: #1A4070;
--color-airmail-white: #FFFFFF;
/* UI colors - strong borders */
--color-border: #CCCCCC;
--color-border-dark: #999999;
--color-border-light: #E6E6E6;
/* Shadow colors - crisp */
--color-shadow: rgba(0, 0, 0, 0.08);
--color-shadow-lg: rgba(0, 0, 0, 0.15);
}
/* Terminal Theme - Technical/hacker aesthetic */
/* Monospace throughout - retro computing feel */
[data-theme="terminal"] {
/* Typography - all mono */
--font-heading: var(--font-mono);
--font-body: var(--font-mono);
--font-ui: var(--font-mono);
/* Background colors - dark with green tint */
--color-bg: #0D1117;
--color-bg-alt: #161B22;
--color-card-bg: #21262D;
/* Text colors - terminal green/gray */
--color-text: #E6EDF3;
--color-text-muted: #D8DEE4;
--color-text-light: #D0D7DE;
--color-text-inverse: #E6EDF3;
/* Brand colors - terminal green accent */
--color-primary: #3FB950;
--color-primary-dark: #2EA043;
--color-primary-light: #56D364;
/* Airmail colors - adapted for dark */
--color-airmail-red: #F85149;
--color-airmail-blue: #58A6FF;
--color-airmail-white: #C9D1D9;
/* UI colors - subtle borders */
--color-border: #30363D;
--color-border-dark: #484F58;
--color-border-light: #21262D;
/* Shadow colors */
--color-shadow: rgba(0, 0, 0, 0.3);
--color-shadow-lg: rgba(0, 0, 0, 0.5);
/* Semantic colors for dark mode */
--color-success: #3FB950;
--color-warning: #D29922;
--color-error: #F85149;
--color-info: #58A6FF;
/* Bootstrap overrides */
--bs-secondary-color: #D8DEE4;
}
/* Override Bootstrap .text-muted for terminal theme */
[data-theme="terminal"] .text-muted {
color: var(--color-text-muted) !important;
}
/* Panel section colors for terminal theme */
[data-theme="terminal"] {
--color-panel-item-bg: #21262D;
--color-panel-item-border: rgba(255, 255, 255, 0.08);
--color-panel-gradient-1: rgba(63, 185, 80, 0.12);
--color-panel-gradient-2: rgba(88, 166, 255, 0.1);
--color-panel-bg-start: #0D1117;
--color-panel-bg-mid: #161B22;
--color-panel-bg-end: #0D1117;
--color-panel-grid: rgba(255, 255, 255, 0.02);
--color-panel-ink: #E6EDF3;
--color-panel-muted: #D0D7DE;
--color-panel-accent: #3FB950;
--color-panel-accent-deep: #58A6FF;
--color-panel-highlight-bg: #30363D;
--color-panel-highlight-text: #E6EDF3;
}
/* Midnight Theme - Elegant dark mode */
/* Sans-serif - modern dark UI */
[data-theme="midnight"] {
/* Typography - clean sans for modern dark UI */
--font-heading: var(--font-sans);
--font-body: var(--font-sans);
--font-ui: var(--font-sans);
/* Background colors - slate blue dark */
--color-bg: #0F172A;
--color-bg-alt: #1E293B;
--color-card-bg: #1E293B;
/* Text colors - soft white */
--color-text: #F8FAFC;
--color-text-muted: #E2E8F0;
--color-text-light: #D8E0E8;
--color-text-inverse: #F8FAFC;
/* Brand colors - brighter for dark bg */
--color-primary: #EF4444;
--color-primary-dark: #DC2626;
--color-primary-light: #F87171;
/* Airmail colors - adapted for dark */
--color-airmail-red: #F87171;
--color-airmail-blue: #60A5FA;
--color-airmail-white: #F1F5F9;
/* UI colors - slate borders */
--color-border: #334155;
--color-border-dark: #475569;
--color-border-light: #1E293B;
/* Shadow colors */
--color-shadow: rgba(0, 0, 0, 0.4);
--color-shadow-lg: rgba(0, 0, 0, 0.6);
/* Semantic colors for dark mode */
--color-success: #22C55E;
--color-warning: #F59E0B;
--color-error: #EF4444;
--color-info: #3B82F6;
/* Bootstrap overrides */
--bs-secondary-color: #E2E8F0;
}
/* Override Bootstrap .text-muted for midnight theme */
[data-theme="midnight"] .text-muted {
color: var(--color-text-muted) !important;
}
/* Panel section colors for dark theme */
[data-theme="midnight"] {
--color-panel-item-bg: #1E293B;
--color-panel-item-border: rgba(255, 255, 255, 0.1);
--color-panel-gradient-1: rgba(239, 68, 68, 0.15);
--color-panel-gradient-2: rgba(249, 115, 22, 0.12);
--color-panel-bg-start: #0F172A;
--color-panel-bg-mid: #1E293B;
--color-panel-bg-end: #0F172A;
--color-panel-grid: rgba(255, 255, 255, 0.03);
--color-panel-ink: #F8FAFC;
--color-panel-muted: #CBD5E1;
--color-panel-accent: #FBBF24;
--color-panel-accent-deep: #F97316;
--color-panel-highlight-bg: #334155;
--color-panel-highlight-text: #F8FAFC;
}
/* Utility Classes */
/* ========================================
SPACING UTILITIES
======================================== */
/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.ml-0 { margin-left: 0; }
.ml-2 { margin-left: var(--space-2); }
.ml-4 { margin-left: var(--space-4); }
.mr-0 { margin-right: 0; }
.mr-2 { margin-right: var(--space-2); }
.mr-4 { margin-right: var(--space-4); }
/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.pt-0 { padding-top: 0; }
.pt-2 { padding-top: var(--space-2); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }
.pb-0 { padding-bottom: 0; }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }
.pl-0 { padding-left: 0; }
.pl-4 { padding-left: var(--space-4); }
.pr-0 { padding-right: 0; }
.pr-4 { padding-right: var(--space-4); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
/* ========================================
DISPLAY UTILITIES
======================================== */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
/* Responsive display */
@media (min-width: 576px) {
.d-sm-none { display: none; }
.d-sm-block { display: block; }
.d-sm-flex { display: flex; }
}
@media (min-width: 768px) {
.d-md-none { display: none; }
.d-md-block { display: block; }
.d-md-flex { display: flex; }
}
@media (min-width: 1024px) {
.d-lg-none { display: none; }
.d-lg-block { display: block; }
.d-lg-flex { display: flex; }
}
/* ========================================
VISIBILITY UTILITIES
======================================== */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ========================================
WIDTH & HEIGHT UTILITIES
======================================== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-xl { max-width: var(--container-xl); }
.max-w-prose { max-width: var(--measure); }
.h-full { height: 100%; }
.h-auto { height: auto; }
.min-h-screen { min-height: 100vh; }
/* ========================================
BORDER UTILITIES
======================================== */
.border { border: 1px solid var(--color-border); }
.border-0 { border: 0; }
.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.rounded { border-radius: var(--radius-base); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-none { border-radius: 0; }
/* ========================================
BACKGROUND UTILITIES
======================================== */
.bg-white { background-color: var(--color-card-bg); }
.bg-alt { background-color: var(--color-bg-alt); }
.bg-transparent { background-color: transparent; }
/* ========================================
SHADOW UTILITIES
======================================== */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
/* ========================================
OVERFLOW UTILITIES
======================================== */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
/* ========================================
POSITION UTILITIES
======================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.inset-0 { inset: 0; }
/* ========================================
Z-INDEX UTILITIES
======================================== */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
/* ========================================
CURSOR UTILITIES
======================================== */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
/* ========================================
OPACITY UTILITIES
======================================== */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
/* ========================================
TRANSITION UTILITIES
======================================== */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }
.transition-none { transition: none; }
/* ========================================
POINTER EVENTS
======================================== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
/* ========================================
SELECTION
======================================== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
/* ========================================
PRINT UTILITIES
======================================== */
@media print {
.print-hidden { display: none !important; }
.print-only { display: block !important; }
}
/* OSE Design System - Global Styles
* ==================================
* These global styles are included at the end of the bundled CSS.
*/
/* Apply theme background to body */
html {
scroll-behavior: smooth;
}
body {
background-color: var(--color-bg);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Ensure main content grows */
main {
flex: 1;
}
/* Smooth transitions when changing themes */
body,
.card,
.btn,
.navbar,
.site-header,
.site-footer,
.footer {
transition:
background-color var(--transition-slow),
border-color var(--transition-slow),
color var(--transition-slow);
}
/* Focus styles for keyboard navigation */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
/* Selection color */
::selection {
background-color: rgba(196, 30, 14, 0.2);
color: var(--color-text);
}
/* Scrollbar styling (optional - for webkit browsers) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-alt);
}
::-webkit-scrollbar-thumb {
background: var(--color-border-dark);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}