/* ========================================================================== GLOBAL STYLES — Amereth York, Dental Hygiene Student Agent 05 (global build). Single source of truth for base + utility styles. Every page imports this file FIRST, before any page-specific CSS. Values below are derived 1:1 from state/design_system.json. Do not introduce colors, fonts, spacing, radii, or shadows that are not defined here. FONTS: pages must load these in before this stylesheet, e.g.: (JetBrains Mono is declared as a mono fallback but is not required to load.) ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS (:root custom properties) -------------------------------------------------------------------------- */ :root { /* Color — brand */ --color-primary: #0E9488; --color-primary-dark: #0B7268; --color-primary-light: #E6F7F5; --color-accent: #EC6E9C; --color-accent-dark: #C24D78; /* AA-safe pink for icons/text on light tiles */ --color-accent-light: #FCE7EF; /* soft pink wash for tiles + sections */ --color-navy-tile: #E7ECF3; /* soft navy/slate wash for icon tiles */ /* Color — surfaces */ --color-background: #F7FAFB; --color-surface: #FFFFFF; /* Color — text */ --color-text-primary: #12243B; --color-text-secondary: #475569; --color-text-muted: #64748B; /* Color — lines + state */ --color-border: #E2E8F0; --color-success: #15803D; --color-error: #DC2626; --color-warning: #B45309; /* Typography — families */ --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Typography — type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.75rem; /* Typography — weights */ --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; /* Typography — line heights */ --leading-tight: 1.15; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(18, 36, 59, 0.06); --shadow-md: 0 4px 12px rgba(18, 36, 59, 0.08); --shadow-lg: 0 12px 28px rgba(18, 36, 59, 0.10); --shadow-xl: 0 24px 48px rgba(18, 36, 59, 0.12); /* Layout */ --max-content-width: 1200px; --section-pad-y: 96px; --section-pad-x: 24px; --nav-height: 72px; /* Motion */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1); /* Component tokens (mirrors design_system.components) */ --input-border: 1px solid #CBD5E1; --input-placeholder: #94A3B8; --footer-bg: #12243B; --footer-text: #CBD5E1; --footer-link: #7DD3CB; } /* Breakpoints (reference — CSS custom props can't be used in media queries): mobile 375px · tablet 768px · desktop 1024px · wide 1280px */ /* -------------------------------------------------------------------------- 2. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; /* 16px base — keeps rem scale honest */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Offset in-page anchor jumps so the sticky nav never covers a heading */ scroll-padding-top: calc(var(--nav-height) + var(--space-4)); } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; /* hard guarantee: no horizontal scroll at any breakpoint */ } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: var(--color-primary-dark); text-decoration: none; transition: color var(--duration-fast) var(--easing-default); } a:hover { color: var(--color-primary); } ul, ol { list-style: none; } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- 3. BASE TYPOGRAPHY -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-text-primary); letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } p { line-height: var(--leading-relaxed); color: var(--color-text-secondary); } /* Fluid headline scaling for small phones — prevents overflow on the hero */ @media (max-width: 768px) { h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-2xl); } } @media (max-width: 375px) { h1 { font-size: var(--text-3xl); } } /* -------------------------------------------------------------------------- 4. LAYOUT UTILITIES -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--max-content-width); margin-inline: auto; padding-inline: var(--section-pad-x); } /* Standard vertical rhythm for a page section */ .section { padding-block: var(--section-pad-y); } @media (max-width: 768px) { :root { --section-pad-y: 64px; } } /* A narrower measure for long-form reading blocks */ .container--narrow { max-width: 720px; } /* Visually hidden but available to screen readers (labels, skip links) */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Skip-to-content link for keyboard users; pages place this first in */ .skip-link { position: absolute; left: var(--space-4); top: -100%; z-index: 1000; padding: var(--space-3) var(--space-5); background: var(--color-primary); color: #fff; font-weight: var(--weight-bold); border-radius: var(--radius-md); transition: top var(--duration-fast) var(--easing-default); } .skip-link:focus { top: var(--space-4); color: #fff; } /* -------------------------------------------------------------------------- 5. TYPOGRAPHY UTILITIES (type scale + helpers) -------------------------------------------------------------------------- */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-4xl); } .text-5xl { font-size: var(--text-5xl); } .font-heading { font-family: var(--font-heading); } .font-body { font-family: var(--font-body); } .weight-normal { font-weight: var(--weight-normal); } .weight-medium { font-weight: var(--weight-medium); } .weight-bold { font-weight: var(--weight-bold); } .text-center { text-align: center; } .text-balance { text-wrap: balance; } /* Small uppercase label used above section headings ("eyebrow") */ .eyebrow { display: inline-block; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary-dark); } /* -------------------------------------------------------------------------- 6. COLOR UTILITIES -------------------------------------------------------------------------- */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-brand { color: var(--color-primary-dark); } /* dark teal — AA-safe on light bg */ .text-accent { color: var(--color-accent); } .bg-surface { background-color: var(--color-surface); } .bg-background { background-color: var(--color-background); } .bg-primary-light { background-color: var(--color-primary-light); } .bg-primary { background-color: var(--color-primary); color: #fff; } /* -------------------------------------------------------------------------- 7. COMPONENT PRIMITIVES Shared classes used by the component files (button/card/input/badge/divider) and by every page. See components/*.html for usage + modifier docs. -------------------------------------------------------------------------- */ /* --- Button -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-base); /* >=16px bold per design system guidance */ font-weight: var(--weight-bold); line-height: 1; text-align: center; border-radius: var(--radius-full); border: 1.5px solid transparent; padding: 14px 28px; transition: background-color var(--duration-base) var(--easing-default), border-color var(--duration-base) var(--easing-default), color var(--duration-base) var(--easing-default), transform var(--duration-fast) var(--easing-default), box-shadow var(--duration-base) var(--easing-default); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* Primary — filled teal, white label */ .btn--primary { background-color: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { background-color: var(--color-primary-dark); color: #fff; box-shadow: var(--shadow-md); } /* Secondary — outlined teal, dark-teal label */ .btn--secondary { background-color: transparent; color: var(--color-primary-dark); border-color: var(--color-primary); padding: 12.5px 26px; /* matches design_system button_secondary padding */ font-weight: var(--weight-medium); } .btn--secondary:hover { background-color: var(--color-primary-light); color: var(--color-primary-dark); } /* Ghost — minimal, for low-emphasis actions on light backgrounds */ .btn--ghost { background-color: transparent; color: var(--color-primary-dark); } .btn--ghost:hover { background-color: var(--color-primary-light); color: var(--color-primary-dark); } /* On a teal band, an inverted button (white fill) reads best */ .btn--inverse { background-color: #fff; color: var(--color-primary-dark); } .btn--inverse:hover { background-color: var(--color-primary-light); color: var(--color-primary-dark); } /* Size + width modifiers */ .btn--lg { font-size: var(--text-lg); padding: 17px 34px; } .btn--sm { font-size: var(--text-sm); padding: 10px 18px; } .btn--block { display: flex; width: 100%; } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } /* --- Card ---------------------------------------------------------------- */ .card { background-color: var(--color-surface); border: 1px solid #EEF2F6; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-md); } /* Hover lift — opt in with .card--interactive on cards that should react */ .card--interactive { transition: transform var(--duration-base) var(--easing-default), box-shadow var(--duration-base) var(--easing-default); } .card--interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* Highlighted card — soft teal wash + brand border (e.g. "Veterans FREE") */ .card--highlight { background-color: var(--color-primary-light); border-color: var(--color-primary); } /* --- Input --------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field__label { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-primary); } .field__required { color: var(--color-error); margin-left: 2px; } .input, .textarea, .select { width: 100%; background-color: var(--color-surface); border: var(--input-border); border-radius: var(--radius-md); padding: 12px 14px; color: var(--color-text-primary); transition: border-color var(--duration-fast) var(--easing-default), box-shadow var(--duration-fast) var(--easing-default); } .input::placeholder, .textarea::placeholder { color: var(--input-placeholder); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .textarea { min-height: 120px; resize: vertical; } /* Native select with a custom caret */ .select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; } /* Invalid state — set aria-invalid="true" on the control */ .input[aria-invalid='true'], .textarea[aria-invalid='true'], .select[aria-invalid='true'] { border-color: var(--color-error); } .input[aria-invalid='true']:focus, .textarea[aria-invalid='true']:focus, .select[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); } /* Inline validation message — pair with aria-describedby on the control */ .field__error { font-size: var(--text-sm); color: var(--color-error); } .field__hint { font-size: var(--text-sm); color: var(--color-text-muted); } /* Choice rows (radio / checkbox) */ .choice { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; } .choice input[type='radio'], .choice input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; } /* --- Badge --------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1; letter-spacing: 0.02em; padding: 6px 12px; border-radius: var(--radius-full); background-color: var(--color-primary-light); color: var(--color-primary-dark); } /* Solid teal badge — e.g. "FREE" goodwill flag (never red, per design system) */ .badge--primary { background-color: var(--color-primary); color: #fff; } /* Accent badge — small-area pink highlight only */ .badge--accent { background-color: #FCE7EF; color: #B03A66; } .badge--success { background-color: #DCFCE7; color: var(--color-success); } /* --- Divider ------------------------------------------------------------- */ .divider { border: 0; height: 1px; background-color: var(--color-border); margin-block: var(--space-12); } /* Soft, centered short divider for inside cards/sections */ .divider--soft { background: linear-gradient( 90deg, transparent, var(--color-border), transparent ); margin-block: var(--space-8); } /* -------------------------------------------------------------------------- 8. MOTION PRIMITIVES (reveal-on-scroll, hover-safe) Page agents add [data-reveal] to elements and observe them with JS. Default state is hidden-but-shifted; .is-visible plays the transition. -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--easing-default), transform var(--duration-slow) var(--easing-default); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } /* Respect users who ask for reduced motion: show everything, no movement */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .btn:hover, .card--interactive:hover { transform: none; } }