/* * Cardiosense — FDA Announcement Banner Animations * * Modern micro-animations to draw the eye to the FDA approval banner. * All GPU-friendly (transform, opacity, filter) — no layout reflow. * * Pieces: * .cs-announcement — outer wrapper (layout + base styling) * .cs-announcement__heart — Cardiosense brand-mark heart (lub-dub beat) * .cs-announcement__text — headline (shimmer sweep every 6s) * .cs-announcement__cta — "Read the press release" link * .cs-announcement__arrow — arrow inside the CTA (nudges + hover slide) * * Respects prefers-reduced-motion: animations disabled entirely for * users who've opted out of motion at the OS level. */ /* ──────────────────────────────────────────────────────────────────────── * Skip-to-main-content link (WCAG 2.4.1 — Bypass Blocks, Level A) * * Visually hidden until focused by keyboard. Injected as the first child * of in header.php so it's the very first Tab stop on every page. * ──────────────────────────────────────────────────────────────────────── */ /* Visually hidden utility — content stays in the a11y tree, invisible on screen. Defined here (site-wide CSS) so all components can use it without per-file duplication. */ .cs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cs-skip-link { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; top: auto; left: auto; } .cs-skip-link:focus-visible { position: absolute !important; top: 0.5rem; left: 1rem; width: auto; height: auto; padding: 0.75rem 1.5rem; margin: 0; overflow: visible; clip: auto; white-space: nowrap; z-index: 100000; background: #0e244f; color: #f8fafc; font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 0 0 0.375rem 0.375rem; outline: 2px solid #b90f18; outline-offset: 2px; } /* ──────────────────────────────────────────────────────────────────────── * Site nav — hand-written rules that don't depend on Tailwind tree-shaking * or any parent stylesheet. Belt-and-suspenders on top of the utility * classes in template-parts/site-header.php so the nav layout is * guaranteed regardless of which CSS loads first or what parents try * to override. * ──────────────────────────────────────────────────────────────────────── */ .cs-site-nav { display: flex !important; flex-flow: row nowrap !important; align-items: center !important; justify-content: space-between !important; } /* The desktop menu is pushed to the right of the available space. Hides below the md breakpoint (768px) — mobile uses the hamburger. */ .cs-site-nav__menu { margin-left: auto; } @media (max-width: 767.98px) { .cs-site-nav__menu { display: none !important; } } /* The menu's inner

from wp_nav_menu must be flex so items lay out horizontally rather than as block list items. */ .cs-site-nav__menu ul { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; } /* ──────────────────────────────────────────────────────────────────────── * Wrapper * ──────────────────────────────────────────────────────────────────────── */ .cs-announcement { display: flex; align-items: center; justify-content: center; gap: 1rem; /* Larger top-of-page presence — was 0.875rem 1.5rem. Bumped vertical padding so the banner is the dominant element above the fold on first visit. */ padding: 1.25rem 2rem; background-color: #F8FAFC; /* 3px accent border in brand red replaces the prior 1px slate line — makes the banner visually "important" without screaming. */ border-bottom: 3px solid rgb(185 15 24 / 0.18); /* Breathing room between the banner and the sticky nav so the Cardiosense logo doesn't run directly into the banner's bottom border. Margin (not padding) keeps the gradient cleanly bounded. */ margin-bottom: 1rem; font-family: Manrope, system-ui, -apple-system, sans-serif; /* 14px up from 12px — readable at desktop scrolling speed. */ font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; position: relative; overflow: hidden; /* contains the shimmer sweep */ /* Transition padding + opacity so the collapse animation is smooth. */ transition: padding 320ms cubic-bezier(0.4, 0, 0.2, 1), border-color 320ms ease, background 320ms ease; } .cs-announcement > * { flex-shrink: 0; } /* …except the message text. The blanket flex-shrink:0 above keeps the * heart icon, CTA, and dismiss pill from squishing — but applied to the * text span it forced the text to its max-content width (the whole FDA * sentence on ONE line), which the banner's overflow:hidden then clipped * on both edges. Letting the text shrink (and min-width:0, which overrides * the flex default of min-width:auto) lets it wrap normally. */ .cs-announcement__text { flex-shrink: 1; min-width: 0; } /* ──────────────────────────────────────────────────────────────────────── * Cardiosense heart — lub-dub heartbeat at ~60 BPM * * One full cycle = 1 second (resting human heart rate of 60 BPM). * * Real cardiac S1/S2 timing: * 0-100ms S1 (lub) — bigger pulse, mitral/tricuspid valves closing * 100-300ms systole — heart recoils to baseline * 300-400ms S2 (dub) — smaller pulse, semilunar valves closing * 400-500ms early diastole * 500-1000ms diastolic rest (long pause before next cycle) * * The heart-shaped icon scales up briefly on each beat and a soft red * drop-shadow blooms in sync, giving the impression of light radiating * outward from a pulsing organ. * * Animation pauses on hover (visitor wants to examine, not be wiggled at). * ──────────────────────────────────────────────────────────────────────── */ .cs-announcement__heart { display: inline-flex; /* Bumped from 22px → 28px so the brand mark is the focal point even before the text registers. Mobile breakpoint scales back to 22px. */ width: 28px; height: 28px; color: #b90f18; transform-origin: center; animation: cs-heartbeat 1s ease-in-out infinite; /* When the banner collapses to a pill, the heart stays put — it's the visual anchor people use to recognise the banner pre-expansion. */ transition: width 320ms ease, height 320ms ease; } .cs-announcement__heart svg, .cs-announcement__heart img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 0 rgb(185 15 24 / 0)); animation: cs-heartbeat-glow 1s ease-in-out infinite; } @keyframes cs-heartbeat { /* Baseline rest */ 0% { transform: scale(1); } /* S1 (lub) — sharp pulse */ 8% { transform: scale(1.18); } 16% { transform: scale(0.95); } 24% { transform: scale(1.04); } /* Brief recoil */ 32% { transform: scale(1); } /* S2 (dub) — smaller pulse following quickly */ 40% { transform: scale(1.12); } 48% { transform: scale(0.97); } /* Long diastolic rest */ 56%, 100% { transform: scale(1); } } @keyframes cs-heartbeat-glow { 0%, 56%, 100% { filter: drop-shadow(0 0 0 rgb(185 15 24 / 0)); } 8% { filter: drop-shadow(0 0 6px rgb(185 15 24 / 0.55)); } 40% { filter: drop-shadow(0 0 4px rgb(185 15 24 / 0.35)); } } /* Pause heartbeat on hover so visitors can read without motion. */ .cs-announcement:hover .cs-announcement__heart, .cs-announcement:hover .cs-announcement__heart svg, .cs-announcement:hover .cs-announcement__heart img { animation-play-state: paused; } /* ──────────────────────────────────────────────────────────────────────── * Headline text — shimmer sweep * * A gradient passes through the text every 6 seconds. The trick is * background-clip: text so the gradient paints ONLY inside glyph * outlines. Animating background-position is GPU-cheap. * * The fallback color is applied in plain `color` so browsers without * background-clip support get readable text. * ──────────────────────────────────────────────────────────────────────── */ .cs-announcement__text { color: #0e244f; background-image: linear-gradient( 100deg, #0e244f 0%, #0e244f 40%, #b90f18 50%, #0e244f 60%, #0e244f 100% ); background-size: 250% 100%; background-position: 200% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cs-shimmer 6s ease-in-out infinite; animation-delay: 1.2s; } @keyframes cs-shimmer { 0% { background-position: 200% 0; } 60%, 100% { background-position: -100% 0; } } /* ──────────────────────────────────────────────────────────────────────── * CTA link with animated arrow * ──────────────────────────────────────────────────────────────────────── */ .cs-announcement__cta { color: #b90f18; text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; transition: color 150ms ease; } .cs-announcement__cta:hover, .cs-announcement__cta:focus-visible { color: #8a0c12; text-decoration: underline; text-underline-offset: 3px; } .cs-announcement__arrow { display: inline-block; font-weight: 400; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); animation: cs-arrow-nudge 3s ease-in-out infinite; } @keyframes cs-arrow-nudge { 0%, 80%, 100% { transform: translateX(0); } 88% { transform: translateX(4px); } } .cs-announcement__cta:hover .cs-announcement__arrow, .cs-announcement__cta:focus-visible .cs-announcement__arrow { transform: translateX(6px); animation: none; } /* ──────────────────────────────────────────────────────────────────────── * Reduced-motion respect * ──────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .cs-announcement__heart, .cs-announcement__heart svg, .cs-announcement__text, .cs-announcement__arrow { animation: none !important; } .cs-announcement__heart svg, .cs-announcement__heart img { filter: none; } .cs-announcement__text { background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: #0e244f; color: #0e244f; } } /* ──────────────────────────────────────────────────────────────────────── * Responsive * ──────────────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .cs-announcement { flex-wrap: wrap; text-align: center; font-size: 12px; padding: 0.75rem 1rem; } .cs-announcement__heart { width: 18px; height: 18px; } /* Give the message its own full-width row so it wraps cleanly with the heart above and the CTA / dismiss pill below, rather than competing for horizontal space on a single flex line. */ .cs-announcement__text { flex-basis: 100%; } } /* ──────────────────────────────────────────────────────────────────────── * Dismiss button (the small "×" on the right side) * * Sits to the right of the CTA link. Tappable, keyboard-accessible. * Visually subordinate — slate gray, not red — so it doesn't compete * with the primary CTA for attention. * ──────────────────────────────────────────────────────────────────────── */ /* Pill "Close" button — subordinate to the primary CTA but clearly interactive. Inherits the banner's uppercase/letter-spacing context and uses a border rather than a fill so it doesn't fight the red CTA. */ .cs-announcement__dismiss { margin-left: 0.5rem; padding: 0.25rem 0.875rem; border-radius: 9999px; border: 1.5px solid #94a3b8; /* slate-400 — meets 3:1 non-text contrast */ /* Explicit background (not transparent) so automated contrast tools can resolve the foreground/background pair without tracing through a stacking context that may be mid-animation (opacity or transform). */ background-color: #F8FAFC; color: #334155; /* slate-700 — 12.6:1 on #F8FAFC — passes WCAG AA + AAA */ font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; } .cs-announcement__dismiss:hover { border-color: #94a3b8; /* slate-400 */ background-color: #eef0f3; /* subtle tint over #F8FAFC — explicit, not alpha-blended */ color: #334155; /* slate-700 — darkens on hover */ } .cs-announcement__dismiss:focus-visible { border-color: #0e244f; background: rgb(15 23 42 / 0.04); color: #0e244f; outline: 2px solid #0e244f; outline-offset: 2px; } /* ──────────────────────────────────────────────────────────────────────── * Collapsed (re-openable pill) state * * Activated by JS setting data-state="collapsed" on the banner root. * The banner shrinks to a thin pill showing only the pulsing heart and * a "View announcement" label. Clicking anywhere on the pill re-expands. * * We hide content via display:none rather than opacity so the layout * fully collapses (no awkward whitespace on the right). The transition * is applied to padding + height so the collapse feels deliberate. * ──────────────────────────────────────────────────────────────────────── */ .cs-announcement[data-state="collapsed"] { padding: 0.5rem 1rem; cursor: pointer; border-bottom-color: rgb(185 15 24 / 0.10); background-color: #F8FAFC; } .cs-announcement[data-state="collapsed"] .cs-announcement__heart { width: 20px; height: 20px; } .cs-announcement[data-state="collapsed"] .cs-announcement__text, .cs-announcement[data-state="collapsed"] .cs-announcement__cta, .cs-announcement[data-state="collapsed"] .cs-announcement__dismiss { display: none; } .cs-announcement[data-state="collapsed"] .cs-announcement__reopen-label { display: inline; color: #0e244f; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: #0e244f; } /* Hide the re-open label whenever the banner is NOT collapsed (default / expanded state). */ .cs-announcement__reopen-label { display: none; } .cs-announcement[data-state="collapsed"]:hover { background-color: #ffdad6; border-bottom-color: rgb(185 15 24 / 0.30); } /* ──────────────────────────────────────────────────────────────────────── * Above-the-fold first-impression boost * * For the FIRST time a visitor sees the banner (data-first-view="true"), * the banner gets a one-shot slide-in from above + a brief glow flash. * JS removes the attribute after the animation finishes so subsequent * page loads don't re-trigger. * ──────────────────────────────────────────────────────────────────────── */ .cs-announcement[data-first-view="true"] { animation: cs-announcement-enter 600ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes cs-announcement-enter { /* translateY-only: no opacity fade. The dismiss button must be opaque at all animation frames so automated contrast checks (axe, Lighthouse) can resolve the background without tracing a transparent stacking context. */ 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .cs-announcement[data-first-view="true"] { animation: none; } } /* Touch targets on mobile: WCAG 2.5.5 requires 44 × 44 px. The dismiss pill and the CTA link both need a minimum height bump. */ @media (max-width: 480px) { .cs-announcement__dismiss { min-height: 44px; padding: 0.625rem 0.875rem; } /* CTA link — inline-flex lets min-height apply without disrupting the surrounding flow of the banner's flex row. */ .cs-announcement__cta { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0.375rem; padding-bottom: 0.375rem; } }