/*
CoastalCleans Design Tokens
Philosophy: Coastal Conservation Badge — vintage conservation poster meets modern nonprofit landing page.
Source palette: logo (#1A4FA8 royal blue, #F5F1E8 cream, black whale silhouette).
Tone: Warm, trustworthy, community-driven. Not corporate. Not childish.
Typography: Google Fonts — Lato (display + body)
Import in HTML :
*/
/* ─── Light Mode (default) ─── */
:root {
/* ── Brand Palette (raw) ── */
--raw-blue-900: #0F2A5E;
--raw-blue-800: #143872;
--raw-blue-700: #1A4FA8; /* logo royal blue */
--raw-blue-600: #2563C4;
--raw-blue-400: #5E96E8;
--raw-cream-100: #FDFAF4;
--raw-cream-200: #F5F1E8; /* logo cream */
--raw-cream-300: #EDE8D8;
--raw-cream-400: #DDD8C8;
--raw-cream-500: #C8C0A8;
--raw-navy-950: #0A1520;
--raw-navy-900: #0D1B2E;
--raw-navy-800: #132338;
--raw-navy-700: #1A2D42;
--raw-navy-600: #2A3F55;
--raw-navy-500: #1E3245;
--raw-slate-600: #4A5F72;
--raw-slate-400: #8A9BAD;
--raw-slate-300: #A8B8C8;
--raw-slate-200: #6A7E8E;
--raw-teal-400: #89C7AF; /* light teal */
--raw-teal-500: #6BB399; /* CTA teal */
--raw-teal-600: #529E85; /* medium dark teal */
--raw-teal-700: #3D8B6D; /* dark teal */
--raw-green-600: #2D8A5E; /* ocean green */
--raw-amber-500: #D4A017; /* sandy amber */
--raw-red-600: #C93636;
/* ── Semantic: Backgrounds ── */
--color-bg-primary: var(--raw-cream-200); /* #F5F1E8 — warm cream canvas */
--color-bg-secondary: var(--raw-cream-100); /* #FDFAF4 — card/panel surface */
--color-bg-tertiary: var(--raw-cream-300); /* #EDE8D8 — input wells, subtle backgrounds */
--color-bg-inverse: var(--raw-blue-900); /* #0F2A5E — deep navy inverse */
--color-bg-nav: var(--raw-cream-100); /* Sticky nav background */
--color-bg-footer: var(--raw-blue-900); /* Footer dark navy */
/* ── Semantic: Text ── */
--color-text-primary: #1C2B3A; /* Near-black navy — main body */
--color-text-secondary: var(--raw-slate-600); /* #4A5F72 — subdued text */
--color-text-tertiary: var(--raw-slate-400); /* #8A9BAD — placeholder, disabled */
--color-text-inverse: var(--raw-cream-200); /* Cream on dark backgrounds */
--color-text-link: var(--raw-blue-700); /* #1A4FA8 — brand blue links */
--color-text-link-hover: var(--raw-blue-600);
/* ── Semantic: Borders ── */
--color-border-primary: var(--raw-cream-500); /* #C8C0A8 — warm tan default border */
--color-border-secondary: var(--raw-cream-400); /* #DDD8C8 — subtle divider */
--color-border-focus: var(--raw-blue-700); /* #1A4FA8 — focus ring */
/* ── Semantic: Accents ── */
--color-accent-primary: var(--raw-teal-500); /* #6BB399 — CTA teal (Donate button) */
--color-accent-primary-hover: var(--raw-teal-700); /* #3D8B6D */
--color-accent-primary-active: var(--raw-teal-600); /* #529E85 */
--color-accent-primary-text: #FFFFFF;
--color-accent-secondary: var(--raw-blue-700); /* #1A4FA8 — secondary actions */
--color-accent-secondary-hover: var(--raw-blue-600);
--color-accent-secondary-text: #FFFFFF;
/* ── Semantic: Status ── */
--color-status-success: var(--raw-green-600); /* #2D8A5E */
--color-status-warning: var(--raw-amber-500); /* #D4A017 */
--color-status-error: var(--raw-red-600); /* #C93636 */
--color-status-info: var(--raw-blue-700); /* #1A4FA8 */
/* ── Semantic: Surface ── */
--color-surface-overlay: rgba(10, 21, 32, 0.55); /* Modal/drawer backdrop */
/* ─────────────────────────────────────────── */
/* ── Spacing (4px base) ── */
--space-0: 0;
--space-1: 2px; /* 0.5× */
--space-2: 4px; /* 1× */
--space-3: 8px; /* 2× */
--space-4: 12px; /* 3× */
--space-5: 16px; /* 4× */
--space-6: 24px; /* 6× */
--space-7: 32px; /* 8× */
--space-8: 48px; /* 12× */
--space-9: 64px; /* 16× */
--space-10: 80px; /* 20× */
--space-11: 96px; /* 24× */
--space-12: 128px; /* 32× */
/* ─────────────────────────────────────────── */
/* ── Typography ── */
--font-family-display: 'Lato', 'Segoe UI', sans-serif;
--font-family-body: 'Lato', 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-md: 1.125rem; /* 18px */
--font-size-lg: 1.25rem; /* 20px */
--font-size-xl: 1.5rem; /* 24px */
--font-size-2xl: 1.875rem; /* 30px */
--font-size-3xl: 2.25rem; /* 36px */
--font-size-4xl: 3rem; /* 48px — hero display */
--font-size-5xl: 3.75rem; /* 60px — hero display large */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2; /* Headings */
--line-height-snug: 1.35; /* Subheadings */
--line-height-normal: 1.55; /* Body */
--line-height-relaxed: 1.75; /* Long-form body */
--letter-spacing-tight: -0.02em; /* Large display */
--letter-spacing-normal: 0em;
--letter-spacing-wide: 0.05em; /* Labels, all-caps */
--letter-spacing-wider: 0.12em; /* Badge text, nav caps */
/* ─────────────────────────────────────────── */
/* ── Layout ── */
--max-width-content: 68ch; /* Comfortable reading column */
--max-width-wide: 960px; /* Wide content (team grid, etc.) */
--max-width-page: 1280px; /* Full-page container */
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 16px;
--border-radius-xl: 24px;
--border-radius-full: 9999px; /* Pill / circular */
--shadow-sm: 0 1px 3px rgba(28, 43, 58, 0.10), 0 1px 2px rgba(28, 43, 58, 0.06);
--shadow-md: 0 4px 12px rgba(28, 43, 58, 0.12), 0 2px 4px rgba(28, 43, 58, 0.07);
--shadow-lg: 0 12px 32px rgba(28, 43, 58, 0.14), 0 4px 8px rgba(28, 43, 58, 0.08);
--shadow-focus: 0 0 0 3px rgba(26, 79, 168, 0.35); /* Brand blue focus ring */
--shadow-card: 0 2px 8px rgba(28, 43, 58, 0.08), 0 1px 3px rgba(28, 43, 58, 0.05);
/* ─────────────────────────────────────────── */
/* ── Motion ── */
--duration-instant: 50ms;
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
--duration-slower: 600ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Sticker float bounce */
/* ─────────────────────────────────────────── */
/* ── Responsive Breakpoints ── */
--breakpoint-sm: 375px; /* Mobile */
--breakpoint-md: 768px; /* Tablet / nav collapse */
--breakpoint-lg: 1024px; /* Small desktop */
--breakpoint-xl: 1280px; /* Desktop */
--breakpoint-2xl: 1536px; /* Wide desktop */
/* ─────────────────────────────────────────── */
/* ── Component-level tokens ── */
/* Nav */
--nav-height: 64px;
--nav-bg: var(--color-bg-nav);
--nav-shadow: 0 1px 0 var(--color-border-secondary);
--nav-link-color: var(--color-text-primary);
--nav-link-color-hover: var(--color-text-link);
--nav-link-color-active: var(--raw-blue-700);
/* CTA pill — Donate button */
--cta-bg: var(--color-accent-primary);
--cta-bg-hover: var(--color-accent-primary-hover);
--cta-text: var(--color-accent-primary-text);
--cta-padding: var(--space-3) var(--space-6);
--cta-radius: var(--border-radius-full);
--cta-font-size: var(--font-size-sm);
--cta-font-weight: var(--font-weight-bold);
--cta-letter-spacing: var(--letter-spacing-wide);
/* Cards */
--card-bg: var(--color-bg-secondary);
--card-radius: var(--border-radius-lg);
--card-shadow: var(--shadow-card);
--card-border: 1px solid var(--color-border-secondary);
--card-padding: var(--space-7);
/* Form inputs */
--input-bg: var(--color-bg-tertiary);
--input-border: 1px solid var(--color-border-primary);
--input-border-focus: 1px solid var(--color-border-focus);
--input-shadow-focus: var(--shadow-focus);
--input-radius: var(--border-radius-md);
--input-padding: var(--space-3) var(--space-5);
--input-font-size: var(--font-size-base);
/* Hero */
--hero-bg: var(--raw-blue-700);
--hero-text: var(--color-text-inverse);
/* Wave divider */
--wave-fill: var(--color-bg-primary);
/* Section */
--section-padding-y: var(--space-11);
--section-padding-x: var(--space-6);
}
/* ─────────────────────────────────────────── */
/* ── Dark Mode ── */
[data-theme="dark"] {
/* Backgrounds — deep ocean navy, not just dark grey */
--color-bg-primary: var(--raw-navy-900); /* #0D1B2E */
--color-bg-secondary: var(--raw-navy-800); /* #132338 */
--color-bg-tertiary: var(--raw-navy-700); /* #1A2D42 */
--color-bg-inverse: var(--raw-cream-200);
--color-bg-nav: var(--raw-navy-950); /* #0A1520 */
--color-bg-footer: var(--raw-navy-950);
/* Text — warm off-white, not pure white (reduces harshness) */
--color-text-primary: #E8E2D4;
--color-text-secondary: #C4D0DC; /* boosted from slate-300 for readability */
--color-text-tertiary: var(--raw-slate-300); /* #A8B8C8 */
--color-text-inverse: #E8E2D4; /* stays light — all usages are on dark backgrounds */
--color-text-link: var(--raw-blue-400); /* #5E96E8 — lighter for dark bg */
--color-text-link-hover: #7AACF0;
/* Borders */
--color-border-primary: var(--raw-navy-600); /* #2A3F55 */
--color-border-secondary: var(--raw-navy-500); /* #1E3245 */
--color-border-focus: var(--raw-blue-400);
/* Accents — teal holds well in dark mode */
--color-accent-primary: var(--raw-teal-500); /* #6BB399 */
--color-accent-primary-hover: var(--raw-teal-400); /* Lighten on dark */
--color-accent-primary-active: var(--raw-teal-700);
--color-accent-secondary: var(--raw-blue-400);
--color-accent-secondary-hover: #7AACF0;
/* Shadows — deeper, more transparent on dark */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30);
--shadow-focus: 0 0 0 3px rgba(94, 150, 232, 0.40);
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
/* Surface */
--color-surface-overlay: rgba(0, 0, 0, 0.65);
/* Nav */
--nav-shadow: 0 1px 0 var(--color-border-secondary);
--nav-link-color: #E8E2D4;
--nav-link-color-hover: var(--raw-blue-400);
--nav-link-color-active: var(--raw-blue-400);
/* Cards */
--card-bg: var(--color-bg-secondary);
--card-border: 1px solid var(--color-border-primary);
/* Inputs */
--input-bg: var(--color-bg-tertiary);
--input-border: 1px solid var(--color-border-primary);
/* Hero */
--hero-bg: var(--raw-navy-950);
--wave-fill: var(--color-bg-primary);
}
/* System preference dark mode — respects manual [data-theme="light"] override */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-bg-primary: var(--raw-navy-900);
--color-bg-secondary: var(--raw-navy-800);
--color-bg-tertiary: var(--raw-navy-700);
--color-bg-inverse: var(--raw-cream-200);
--color-bg-nav: var(--raw-navy-950);
--color-bg-footer: var(--raw-navy-950);
--color-text-primary: #E8E2D4;
--color-text-secondary: #C4D0DC;
--color-text-tertiary: var(--raw-slate-300);
--color-text-inverse: #E8E2D4;
--color-text-link: var(--raw-blue-400);
--color-text-link-hover: #7AACF0;
--color-border-primary: var(--raw-navy-600);
--color-border-secondary: var(--raw-navy-500);
--color-border-focus: var(--raw-blue-400);
--color-accent-primary: var(--raw-teal-500);
--color-accent-primary-hover: var(--raw-teal-400);
--color-accent-primary-active: var(--raw-teal-700);
--color-accent-secondary: var(--raw-blue-400);
--color-accent-secondary-hover: #7AACF0;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30);
--shadow-focus: 0 0 0 3px rgba(94, 150, 232, 0.40);
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
--color-surface-overlay: rgba(0, 0, 0, 0.65);
--nav-shadow: 0 1px 0 var(--color-border-secondary);
--nav-link-color: #E8E2D4;
--nav-link-color-hover: var(--raw-blue-400);
--nav-link-color-active: var(--raw-blue-400);
--card-bg: var(--color-bg-secondary);
--card-border: 1px solid var(--color-border-primary);
--input-bg: var(--color-bg-tertiary);
--input-border: 1px solid var(--color-border-primary);
--hero-bg: var(--raw-navy-950);
--wave-fill: var(--color-bg-primary);
}
}
/* ─────────────────────────────────────────── */
/* ── Base resets that consume tokens ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
font-family: var(--font-family-body);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
transition:
background-color var(--duration-normal) var(--easing-default),
color var(--duration-normal) var(--easing-default);
}
a {
color: var(--color-text-link);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
a:hover {
color: var(--color-text-link-hover);
}
:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--border-radius-sm);
}
/* Skip-to-content (WCAG AA) */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-5);
background: var(--color-accent-primary);
color: var(--color-accent-primary-text);
padding: var(--space-3) var(--space-6);
border-radius: var(--border-radius-md);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-sm);
z-index: 9999;
}
.skip-link:focus {
top: var(--space-3);
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}