/* * Cardiology — Minimal theme · Treatlly * * Two layers: * 1. Theme-PRIMARY utilities (`.bg-theme-primary`, `.text-theme-primary-foreground`, * `.btn-theme-primary`, etc.) — driven by the tenant's brand colour via the * `--launch-*` CSS variables that `layout.liquid` sets on . * 2. Theme-LOCAL design tokens (`.bg-paper`, `.bg-bone`, `.text-ink`, * `.border-rule`, `.bg-systolic`, `.font-display`, `.eyebrow`, `.tnum`, * plus the ECG-strip animation classes) — fixed to this theme's journal/ * monograph palette (white paper, oxford navy, single systolic red). * * Identity device: the ECG strip. Defined as a shared SVG * and `` inlined once in layout.liquid; consumed by * sections via ``. The `theme-cardio-sweep` block animates. */ /* Tailwind is loaded by layout.liquid via asset_url; the hard-coded /assets/tailwind.css @import 404s in production (non-fingerprinted), so removed. */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #FFFFFF; color: #0C1320; } /* ── 1. Tenant brand colour utilities (consume --launch-* from ) ── */ .text-theme-primary { color: var(--launch-primary); } .text-theme-primary-foreground { color: var(--launch-primary-foreground); } .text-theme-primary-soft { color: var(--launch-primary-soft); } .text-theme-secondary { color: var(--launch-secondary); } .text-theme-secondary-foreground { color: var(--launch-secondary-foreground); } .bg-theme-primary { background-color: var(--launch-primary); } .bg-theme-primary-soft { background-color: var(--launch-primary-soft); } .bg-theme-primary-dark { background-color: var(--launch-primary-dark); } .bg-theme-secondary { background-color: var(--launch-secondary); } .border-theme-primary { border-color: var(--launch-primary); } .border-theme-primary-outline { border-color: var(--launch-primary-outline); } .border-theme-secondary { border-color: var(--launch-secondary); } .hover-text-theme-primary:hover { color: var(--launch-primary); } .hover-border-theme-primary:hover { border-color: var(--launch-primary); } .hover-bg-theme-primary-dark:hover { background-color: var(--launch-primary-dark); } .btn-theme-primary { background-color: var(--launch-primary); color: var(--launch-primary-foreground); transition: all 0.2s ease; } .btn-theme-primary:hover { background-color: var(--launch-primary-dark); } .shadow-theme-primary { box-shadow: 0 20px 45px var(--launch-primary-shadow); } /* ── 2. Theme-local cardiology tokens (paper/bone/rule/ink + single systolic red) ── */ .bg-paper { background-color: #FFFFFF; } .bg-paper\/30 { background-color: rgba(255, 255, 255, 0.30); } .bg-paper\/40 { background-color: rgba(255, 255, 255, 0.40); } .bg-paper\/85 { background-color: rgba(255, 255, 255, 0.85); } .bg-paper\/95 { background-color: rgba(255, 255, 255, 0.95); } .text-paper { color: #FFFFFF; } .border-paper { border-color: #FFFFFF; } .border-paper\/15 { border-color: rgba(255, 255, 255, 0.15); } .hover\:bg-paper\/90:hover { background-color: rgba(255, 255, 255, 0.90); } .hover\:text-paper:hover { color: #FFFFFF; } .bg-bone { background-color: #F4F6FA; } .bg-bone\/40 { background-color: rgba(244, 246, 250, 0.40); } .bg-bone\/50 { background-color: rgba(244, 246, 250, 0.50); } .bg-bone\/60 { background-color: rgba(244, 246, 250, 0.60); } .text-bone { color: #F4F6FA; } .border-rule { border-color: #DDE3EB; } .bg-rule { background-color: #DDE3EB; } .divide-rule > * + * { border-color: #DDE3EB; } .bg-ink { background-color: #0C1320; } .text-ink { color: #0C1320; } .border-ink { border-color: #0C1320; } .hover\:bg-ink:hover { background-color: #0C1320; } .hover\:text-ink:hover { color: #0C1320; } .text-ink-2 { color: #3D4756; } .hover\:text-ink-2:hover { color: #3D4756; } .bg-ink-3 { background-color: #8590A0; } .text-ink-3 { color: #8590A0; } /* Single red accent — used twice only: 24/7 phone-line dot + emergency CTA */ .bg-systolic { background-color: #C8102E; } .text-systolic { color: #C8102E; } .border-systolic { border-color: #C8102E; } /* Typography helpers — paired with theme-local tokens above */ .font-display { font-family: "Libre Baskerville", Georgia, serif; letter-spacing: -0.01em; } .tnum { font-variant-numeric: tabular-nums; } .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; } /* Citation superscript — link to references footer */ .cite { font-variant-numeric: tabular-nums; font-size: 0.6em; vertical-align: super; line-height: 0; color: var(--launch-primary); margin-left: 1px; text-decoration: none; } .cite:hover { text-decoration: underline; } /* ── 3. ECG identity strip (consumes shared from layout) ── */ .theme-cardio-ecg { display: block; width: 100%; height: 56px; color: #0C1320; /* default — sections override via inline style for primary/red */ } .theme-cardio-ecg-sm { height: 28px; } .theme-cardio-ecg path.baseline { stroke: currentColor; stroke-width: 1; fill: none; opacity: 0.55; } .theme-cardio-ecg path.qrs { stroke: currentColor; stroke-width: 1.25; fill: none; } /* Animated ECG sweep (uses ecgSweep symbol with strip + pulse paths) */ .theme-cardio-sweep { position: relative; height: 32px; width: 100%; max-width: 520px; overflow: hidden; } .theme-cardio-sweep svg { position: absolute; top: 0; left: 0; height: 100%; width: 200%; } .theme-cardio-sweep .strip { stroke: var(--launch-primary, #0E2A4E); stroke-width: 1.25; fill: none; animation: cardio-scroll 9s linear infinite; } .theme-cardio-sweep .pulse { stroke: #C8102E; stroke-width: 1.5; fill: none; animation: cardio-scroll 9s linear infinite, cardio-fade 9s linear infinite; } @keyframes cardio-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes cardio-fade { 0%, 80% { opacity: 0.95; } 100% { opacity: 0; } } /* Divider band — used between sections for editorial pacing */ .theme-cardio-divider { position: relative; height: 64px; background: #FFFFFF; border-top: 1px solid #DDE3EB; border-bottom: 1px solid #DDE3EB; overflow: hidden; } /* Smooth section-anchor scrolling — keeps the sticky header out of the way */ html { scroll-behavior: smooth; }