/* ============================================================ AQUABATOR — Colors & Type foundations Marine / sustainable-aquaculture platform (Black Sea Basin) Palette: deep ocean blue · azure · aqua-teal green · foam white Type: Spectral (serif display) + Hanken Grotesk (humanist sans) ============================================================ */ /* Fonts loaded via Google Fonts in each HTML : Spectral: https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&display=swap Hanken Grotesk: https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap IBM Plex Mono: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap */ :root { /* ---- Brand color scales ---- */ /* Deep ocean (primary dark / backgrounds) */ --ocean-950: #04161F; --ocean-900: #07263B; --ocean-800: #0B3A57; --ocean-700: #0E4C70; /* Marine blue (primary action) */ --blue-700: #0B6FA4; --blue-600: #0E7CB0; --blue-500: #1391CE; --blue-400: #36A9E0; --blue-300: #7FCBEE; --blue-100: #D6EEF9; --blue-50: #EDF7FC; /* Aqua-teal green (secondary accent / eco) */ --teal-700: #0E8478; --teal-600: #12A091; --teal-500: #18B7A4; --teal-400: #44CDBC; --teal-200: #A6E9E0; --teal-100: #D6F4EF; /* Fresh green (success / sustainability tag) */ --green-600: #2E9E5B; --green-500: #3DB36B; --green-100: #DDF3E5; /* Foam / neutral (warm-cool greys) */ --white: #FFFFFF; --foam-50: #F4F9FB; --foam-100: #EAF1F5; --foam-200: #DCE6EC; --foam-300: #C3D2DB; --slate-500: #6B8294; --slate-600: #4F6675; --slate-700: #3A4F5C; /* Signal */ --amber-500: #E8A317; --coral-500: #E2674A; /* ---- Semantic tokens ---- */ --bg: var(--white); --bg-soft: var(--foam-50); --bg-muted: var(--foam-100); --bg-ocean: var(--ocean-900); --bg-ocean-deep: var(--ocean-950); --fg: var(--ocean-900); /* primary text on light */ --fg-2: var(--slate-700); /* secondary text */ --fg-3: var(--slate-500); /* muted / captions */ --fg-on-dark: #EAF4F9; /* text on ocean bg */ --fg-on-dark-2: #9FC2D4; /* muted on ocean */ --primary: var(--blue-600); --primary-hover: var(--blue-700); --accent: var(--teal-600); --accent-hover: var(--teal-700); --eco: var(--green-600); --border: var(--foam-200); --border-strong: var(--foam-300); --border-on-dark: rgba(255,255,255,0.14); --ring: rgba(19,145,206,0.40); /* ---- Gradients (legit marine depth, used sparingly) ---- */ --grad-deep: linear-gradient(170deg, #0B3A57 0%, #07263B 55%, #04161F 100%); /* @kind color */ --grad-tide: linear-gradient(135deg, #0E7CB0 0%, #12A091 100%); /* @kind color */ --grad-foam: linear-gradient(180deg, #F4F9FB 0%, #EAF1F5 100%); /* @kind color */ /* ---- Typography ---- */ --font-serif: "Spectral", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid type scale (desktop) */ --text-xs: 0.78rem; /* 12.5px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 3rem; /* 48px */ --text-4xl: clamp(2.6rem, 5vw, 4.25rem); /* hero */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-body: 1.6; --tracking-tight: -0.02em; --tracking-wide: 0.08em; --tracking-caps: 0.14em; /* ---- Spacing scale (8pt base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---- Radii ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ---- Shadows (soft, water-light) ---- */ --shadow-sm: 0 1px 2px rgba(7,38,59,0.06), 0 1px 3px rgba(7,38,59,0.08); --shadow-md: 0 4px 12px rgba(7,38,59,0.08), 0 2px 4px rgba(7,38,59,0.06); --shadow-lg: 0 18px 40px -12px rgba(7,38,59,0.22), 0 6px 14px rgba(7,38,59,0.08); --shadow-ocean: 0 24px 60px -18px rgba(14,76,112,0.55); /* ---- Layout ---- */ --maxw: 1200px; --maxw-narrow: 760px; --nav-h: 76px; } /* ============================================================ Semantic element styles — apply via utility classes ============================================================ */ .aq-display { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } .aq-h1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } .aq-h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg); } .aq-h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--fg); } .aq-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-md); line-height: var(--leading-body); color: var(--fg-2); } .aq-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg-2); } .aq-small { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; color: var(--fg-3); } .aq-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); } .aq-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0; color: var(--fg-2); }