/* ============================================================
Patient Defense Network — site styles (v3)
Tokens mirror the brand guide. Sharp by default; the shield's
lower curves are the only curved element in the system.
Lift via subtle shadows; depth via navy gradients on dark
backgrounds — never glossy.
NOTE: Web fonts (Barlow Condensed, Lato, Space Mono) are loaded
from Google Fonts via in each page's
, alongside preconnects to fonts.googleapis.com and
fonts.gstatic.com. Loading them outside of CSS keeps the font
request from blocking the rest of styles.css from parsing.
============================================================ */
:root {
/* color tokens — v3 spec */
--navy: #0E1B2C;
--navy-grad-top: #172A40;
--navy-grad-bot: #0A1422;
--red: #D81E27;
--red-deep: #A11118;
--paper: #F7F6F3;
--white: #FFFFFF;
--slate: #3C5063;
--mist: #E5E9ED;
/* component tokens */
--lift: 0 6px 18px rgba(14, 27, 44, .10);
--lift-deep: 0 10px 28px rgba(14, 27, 44, .18);
--rule: 6px;
--ekg-ambient: .12; /* opacity of EKG behind hero copy */
--shield-opacity: .14; /* opacity of hero shield watermark */
--maxw: 1180px;
--grad-navy: linear-gradient(180deg, var(--navy-grad-top) 0%, var(--navy-grad-bot) 100%);
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--navy);
font-family: 'Lato', Arial, sans-serif;
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red-deep); }
h1, h2, h3, h4 {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 800;
letter-spacing: .01em;
line-height: 1;
margin: 0;
color: var(--navy);
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--navy); color: #fff; padding: 10px 14px;
font-family: 'Lato'; font-weight: 700; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }
/* ---------- focus rings (v3 a11y) ---------- */
:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 3px;
}
.hero :focus-visible,
.map-intro :focus-visible,
.footer :focus-visible,
.page-hero :focus-visible {
outline-color: var(--white);
}
/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
Nav (all pages)
============================================================ */
.nav {
background: var(--white);
border-bottom: 1px solid var(--mist);
position: sticky; top: 0; z-index: 50;
}
.nav-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 18px 32px;
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
}
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { height: 52px; width: auto; }
.nav-links {
display: flex; align-items: center; gap: 36px;
list-style: none; margin: 0; padding: 0;
}
.nav-links a {
color: var(--navy);
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 22px;
padding: 6px 2px;
border-bottom: 3px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--red); color: var(--navy); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--red); }
.nav-toggle {
display: none;
background: transparent; border: 1px solid var(--mist);
width: 44px; height: 44px; cursor: pointer;
align-items: center; justify-content: center;
padding: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
display: block; background: var(--navy);
width: 22px; height: 2px; position: relative;
}
.nav-toggle span::before { content: ""; position: absolute; top: -7px; left: 0; width: 22px; height: 2px; }
.nav-toggle span::after { content: ""; position: absolute; top: 7px; left: 0; width: 22px; height: 2px; }
/* Hamburger kicks in at ≤900px so "About Us" and the "SHARE YOUR STORY"
CTA button don't wrap onto two lines in the 720-900px tablet range. */
@media (max-width: 900px) {
.nav-inner { padding: 14px 24px; }
.nav-logo img { height: 44px; }
/* The toggle uses `margin-left: auto` to push past the (now-empty)