/* ============================================================ FoundationRX — Design System Tokens (canonical source) ------------------------------------------------------------ Extracted 2026-06-30 from the locked homepage mockup (mockups/homepage/index.html) and formalized with a full typography scale (size / line-height / letter-spacing / weight). SINGLE SOURCE OF TRUTH for the FRX site build. Enqueue this in the Beaver Builder theme child (or paste into BB Global CSS) so every page/Themer layout/saved row reads the same tokens — prevents drift across the 19 pages + 185 location pages. Companion doc: brand/design-system.md Colors are locked to the logo: cobalt wordmark + medical-red "RX". ============================================================ */ :root { /* ---- BRAND COLORS (locked to logo) ---- */ --color-primary: #2455B8; /* cobalt blue — logo wordmark; dominant brand color */ --color-primary-700: #1B3E89; /* hover / pressed */ --color-primary-50: #EAF0FB; /* tint surface / ghost-button hover */ --color-on-primary: #FFFFFF; --color-accent: #E63031; /* medical red — the "RX" letters; use SPARINGLY (accent only) */ --color-accent-700: #B72325; /* hover / pressed */ --color-accent-50: #FCE9E9; /* tint surface / flag callouts (OPAQUE — light bg only) */ --color-accent-tint: rgba(230, 48, 49, .20); /* translucent medical red — red icon tiles / flag chips; reads right on light AND dark (matches the flagship service card) */ /* ---- BRAND PRIMARIES @ 85% ALPHA (for gradient / overlay transparency) ---- */ --color-primary-85: rgba(36, 85, 184, .85); /* #2455B8 @ 85% */ --color-primary-700-85: rgba(27, 62, 137, .85); /* #1B3E89 @ 85% */ --color-accent-85: rgba(230, 48, 49, .85); /* #E63031 @ 85% */ /* ---- NEUTRALS ---- */ --color-fg: #1A2331; /* charcoal — headings + primary body */ --color-fg-muted: #4A5566; /* body paragraph text */ --color-fg-subtle: #6B7585; /* captions / meta / muted labels */ --color-bg: #FFFFFF; /* page background */ --color-bg-alt: #F6F8FB; /* off-white alternating section surface */ --color-bg-deep: #0E1A2B; /* dark hero / footer */ --color-border: #E3E7EE; /* hairline borders */ --color-border-strong: #C9D1DD; /* stronger dividers / ghost-button border */ --color-success: #1E7F4F; /* positive states (on LIGHT bg) */ --color-danger: #B42B2B; /* error states */ /* ---- SUCCESS / LIVE (bright mint — for DARK sections: live dots, "under 2 min", status pills) ---- */ --color-success-bright: #4ADE80; /* the green dot / on-dark success text */ --color-success-ring: rgba(74,222,128,.25); /* halo ring around the live dot */ --color-success-tint: rgba(74,222,128,.12); /* pill background on dark */ /* ---- RATING ---- */ --color-star: #F5A623; /* review star glyphs */ /* ---- ON-DARK TEXT (over --color-bg-deep / hero / method rows) ---- */ --on-dark: #FFFFFF; --on-dark-strong: rgba(255,255,255,.92); /* near-white body on dark */ --on-dark-muted: rgba(255,255,255,.82); /* muted body on dark */ --on-dark-subtle: rgba(255,255,255,.70); /* labels / meta on dark */ --on-dark-eyebrow: #A7C3F4; /* light-cobalt eyebrow on dark */ /* ---- GLASS (frosted surfaces + borders on dark) ---- */ --glass-surface: rgba(255,255,255,.06); /* faint glass panel */ --glass-surface-2: rgba(255,255,255,.10); /* glass chip / badge */ --glass-border: rgba(255,255,255,.22); /* glass hairline */ --glass-border-strong: rgba(255,255,255,.40); /* stronger glass edge */ /* ---- GRADIENTS ---- */ --grad-hero: linear-gradient(180deg, #0E1A2B 0%, #1B3E89 100%); /* dark→cobalt hero base */ --grad-primary: linear-gradient(135deg, #1B3E89 0%, #2455B8 100%); /* primary button / after-panel */ --grad-panel: linear-gradient(135deg, var(--color-primary-50) 0%, #fff 100%); /* light feature/payment panel */ /* deep-navy section base with dual atmospheric glows (the Diagnostic Method look): red glow NE + cobalt glow SW over --color-bg-deep. One layered background. */ --grad-glow-deep: radial-gradient(700px 350px at 90% 0%, rgba(230,48,49,.14), transparent 60%), radial-gradient(700px 350px at 0% 100%, rgba(36,85,184,.50), transparent 60%), var(--color-bg-deep); /* ---- PHOTO OVERLAYS (scrims layered OVER a background image) ---- */ --overlay-photo-dark: linear-gradient(135deg, rgba(14,26,43,.90) 0%, rgba(20,42,84,.72) 48%, rgba(27,62,137,.56) 100%); /* hero photo scrim */ --overlay-photo-cobalt: linear-gradient(135deg, rgba(27,62,137,.95) 0%, rgba(36,85,184,.84) 52%, rgba(36,85,184,.58) 100%);/* flagship blue service card */ --overlay-fade-bottom: linear-gradient(180deg, rgba(14,26,43,0) 60%, rgba(14,26,43,.35) 100%); /* bottom fade on images */ /* ---- ATMOSPHERIC GLOWS (accent radial washes on dark sections; size/position set inline per section) ---- */ --glow-red: rgba(230,48,49,.16); /* red radial-gradient stop */ --glow-cobalt: rgba(36,85,184,.50); /* cobalt radial-gradient stop */ /* ---- TYPOGRAPHY: FAMILIES ---- */ --f-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* headings, eyebrows, buttons, labels */ --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* body, paragraphs, form text */ /* ---- TYPOGRAPHY: SIZE SCALE (reconciled 2026-07-01) ---- One ladder, named by prominence and decoupled from HTML tags. Pick a step by how prominent the text should be, not the tag it sits on. rem resolves on the 16px root. Lead / Section / Hero use clamp() for fluid desktop-to-mobile scale. */ --text-micro: 0.72rem; /* 11.5px fine print, micro-caps */ --text-meta: 0.78rem; /* 12.5px eyebrows, meta, small labels */ --text-small: 0.85rem; /* 13.6px captions, badges, table text */ --text-body-sm: 0.95rem; /* 15.2px card body, secondary paragraphs */ --text-body: 1.0625rem; /* 17px default paragraph; card titles too (weight sets those apart) */ --text-lead: clamp(1.05rem, 1.4vw, 1.2rem); /* 16.8-19.2px intros, hero subhead, lead paragraphs */ --text-subhead: 1.25rem; /* 20px subsection headings, service-card titles */ --text-title: 1.4rem; /* 22.4px panel / step headings */ --text-headline: 1.6rem; /* 25.6px prominent figures (hero phone number) */ --text-display: 1.8rem; /* 28.8px flagship service-card heading */ --text-section: clamp(1.7rem, 3.2vw, 2.4rem); /* 27.2-38.4px section headings */ --text-statistic: 3.2rem; /* 51.2px large stat counters */ --text-hero: clamp(2.1rem, 4.6vw, 3.6rem); /* 33.6-57.6px page / hero title */ /* ---- TYPOGRAPHY: LINE HEIGHT ---- */ --lh-none: 1; /* stat numbers / single-line figures */ --lh-tight: 1.15; /* all headings (h1–h4) */ --lh-snug: 1.3; /* tight multi-line labels / compact card titles */ --lh-base: 1.5; /* leads / sub-heads */ --lh-relaxed: 1.65; /* body paragraphs (default) */ /* ---- TYPOGRAPHY: LETTER SPACING ---- */ --ls-tightest: -0.04em; /* large stat numbers */ --ls-tighter: -0.022em; /* H1 */ --ls-tight: -0.01em; /* H2 / H3 / H4 */ --ls-normal: 0; /* body */ --ls-wide: 0.08em; /* uppercase utility labels (themer stubs, small caps) */ --ls-wider: 0.14em; /* eyebrow / kicker */ --ls-widest: 0.16em; /* spaced micro-caps (≈2px at 12–13px) */ /* ---- TYPOGRAPHY: WEIGHT ---- Loaded faces: Inter 400/500/600/700 · Manrope 600/700/800 */ --fw-regular: 400; /* body */ --fw-medium: 500; /* emphasized body / utility labels */ --fw-semibold: 600; /* H3, H4, eyebrows, buttons */ --fw-bold: 700; /* H2, heading base */ --fw-extrabold: 800; /* H1, large stats */ /* ---- SHADOWS (cobalt-tinted) ---- */ --shadow-sm: 0 1px 2px rgba(36,85,184,.06), 0 1px 1px rgba(36,85,184,.04); --shadow-md: 0 4px 16px rgba(36,85,184,.08), 0 1px 2px rgba(36,85,184,.05); --shadow-lg: 0 16px 40px rgba(36,85,184,.14), 0 2px 6px rgba(36,85,184,.06); --shadow-accent: 0 8px 22px rgba(230,48,49,.28); /* red accent button glow */ /* ---- RADII ---- */ --r-sm: 6px; --r-md: 10px; /* buttons, inputs */ --r-lg: 16px; /* cards */ --r-xl: 24px; /* feature panels */ --r-full: 999px; /* pills */ /* ---- SPACING SCALE ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* mobile section padding */ --space-8: 64px; --space-9: 96px; /* desktop section padding */ /* ---- LAYOUT ---- */ --container: 1200px; /* default content width */ --container-wide: 1280px; /* ---- MOTION ---- */ --ease: cubic-bezier(.2,.7,.2,1); --t-fast: 150ms; /* hovers, color transitions */ --t-med: 220ms; /* larger UI transitions */ } /* ============================================================ BASE TYPE — role → token mapping (matches the homepage mockup) Optional: include if you want the tokens applied as defaults. The BB build can instead reference the vars per-element. ============================================================ */ body { font-family: var(--f-body); font-size: var(--text-body); /* 17px */ line-height: var(--lh-relaxed); /* 1.65 */ font-weight: var(--fw-regular); color: var(--color-fg); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--f-display); color: var(--color-fg); line-height: var(--lh-tight); /* 1.15 */ letter-spacing: var(--ls-tight); /* -0.01em */ font-weight: var(--fw-bold); /* 700 */ margin: 0 0 var(--space-4); } h1 { font-size: var(--text-hero); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tighter); } h2 { font-size: var(--text-section); } h3 { font-size: var(--text-subhead); font-weight: var(--fw-semibold); } h4 { font-size: var(--text-body); font-weight: var(--fw-semibold); } p { margin: 0 0 var(--space-4); color: var(--color-fg-muted); } .lead { font-size: var(--text-lead); line-height: var(--lh-base); color: var(--color-fg-muted); } .eyebrow { display: inline-block; font-family: var(--f-display); font-size: var(--text-meta); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); } /* ============================================================ GRADIENT & OVERLAY UTILITIES — drop-on classes for Beaver Builder ------------------------------------------------------------ WHY: BB's Background → "Overlay" is a COLOR picker. It cannot hold a CSS variable or a gradient token — it silently truncates a pasted `var(--overlay-photo-dark)` to `var(--`. So gradient scrims AND gradient fills must be applied as a CSS class, not in that field. WORKS ON: rows (.fl-row), columns (.fl-col) AND modules/boxes (.fl-module). Apply via Advanced → CSS Class on the element. TWO FAMILIES: • frx-overlay-* — a gradient SCRIM laid over a PHOTO background (photo shows through; gradient sits above; content stays on top). Set the element Background to your Photo, its Photo "Overlay" to NONE, then add ONE: frx-overlay-dark (hero photo scrim — dark→cobalt) frx-overlay-cobalt (flagship blue card scrim) frx-overlay-fade (bottom fade only) • frx-grad-* — a SOLID gradient FILL (no photo needed). Add ONE: frx-grad-hero (dark→cobalt hero base) frx-grad-primary (cobalt primary panel) frx-grad-panel (light tint→white feature panel) ============================================================ */ /* ---- frx-overlay-* : positioned wrapper for the scrim ---- Rows scrim their .fl-row-content-wrap, columns their .fl-col-content. Modules/boxes scrim the .fl-module ELEMENT itself — a "Box"/container module holds child modules directly (no > .fl-module-content), and its photo + padding + radius live on the module node, so that is what we cover. */ .fl-row.frx-overlay-dark > .fl-row-content-wrap, .fl-row.frx-overlay-cobalt > .fl-row-content-wrap, .fl-row.frx-overlay-fade > .fl-row-content-wrap, .fl-col.frx-overlay-dark > .fl-col-content, .fl-col.frx-overlay-cobalt > .fl-col-content, .fl-col.frx-overlay-fade > .fl-col-content, .fl-module.frx-overlay-dark, .fl-module.frx-overlay-cobalt, .fl-module.frx-overlay-fade { position: relative; } /* the scrim itself (border-radius: inherit clips it to a rounded box) */ .fl-row.frx-overlay-dark > .fl-row-content-wrap::before, .fl-row.frx-overlay-cobalt > .fl-row-content-wrap::before, .fl-row.frx-overlay-fade > .fl-row-content-wrap::before, .fl-col.frx-overlay-dark > .fl-col-content::before, .fl-col.frx-overlay-cobalt > .fl-col-content::before, .fl-col.frx-overlay-fade > .fl-col-content::before, .fl-module.frx-overlay-dark::before, .fl-module.frx-overlay-cobalt::before, .fl-module.frx-overlay-fade::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; } /* Box/container modules use ::before as a clearfix (display:table), which would collapse the abs-positioned scrim to 0×0 and ignore inset. The .fl-builder-content prefix out-specifies BB's clearfix (no !important needed) so the scrim fills the box. */ .fl-builder-content .fl-module.frx-overlay-dark::before, .fl-builder-content .fl-module.frx-overlay-cobalt::before, .fl-builder-content .fl-module.frx-overlay-fade::before { display: block; } /* per-variant scrim gradient */ .fl-row.frx-overlay-dark > .fl-row-content-wrap::before, .fl-col.frx-overlay-dark > .fl-col-content::before, .fl-module.frx-overlay-dark::before { background: var(--overlay-photo-dark); } .fl-row.frx-overlay-cobalt > .fl-row-content-wrap::before, .fl-col.frx-overlay-cobalt > .fl-col-content::before, .fl-module.frx-overlay-cobalt::before { background: var(--overlay-photo-cobalt); } .fl-row.frx-overlay-fade > .fl-row-content-wrap::before, .fl-col.frx-overlay-fade > .fl-col-content::before, .fl-module.frx-overlay-fade::before { background: var(--overlay-fade-bottom); } /* keep content above the scrim */ .fl-row.frx-overlay-dark > .fl-row-content-wrap > .fl-row-content, .fl-row.frx-overlay-cobalt > .fl-row-content-wrap > .fl-row-content, .fl-row.frx-overlay-fade > .fl-row-content-wrap > .fl-row-content { position: relative; z-index: 1; } .fl-col.frx-overlay-dark > .fl-col-content > *, .fl-col.frx-overlay-cobalt > .fl-col-content > *, .fl-col.frx-overlay-fade > .fl-col-content > *, .fl-module.frx-overlay-dark > *, .fl-module.frx-overlay-cobalt > *, .fl-module.frx-overlay-fade > * { position: relative; z-index: 1; } /* ---- frx-grad-* : solid gradient fill (no photo) ---- */ .fl-row.frx-grad-hero > .fl-row-content-wrap, .fl-col.frx-grad-hero > .fl-col-content, .fl-module.frx-grad-hero { background-image: var(--grad-hero) !important; } .fl-row.frx-grad-primary > .fl-row-content-wrap, .fl-col.frx-grad-primary > .fl-col-content, .fl-module.frx-grad-primary { background-image: var(--grad-primary) !important; } .fl-row.frx-grad-panel > .fl-row-content-wrap, .fl-col.frx-grad-panel > .fl-col-content, .fl-module.frx-grad-panel { background-image: var(--grad-panel) !important; } /* deep-navy + dual-glow (Diagnostic Method look). Pair with .on-dark / .section-dark for light text. */ .fl-row.frx-grad-glow > .fl-row-content-wrap, .fl-col.frx-grad-glow > .fl-col-content, .fl-module.frx-grad-glow { background: var(--grad-glow-deep) !important; }