# Guardian Health ## Posts - [Hello world!](https://myguardian.health/hello-world/): Welcome to WordPress. This is your first post. Edit or delete it, then start writing! ## Pages - [Index](https://myguardian.health/index/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [About Us](https://myguardian.health/about-us/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [What We Do](https://myguardian.health/what-we-do-2/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [What We Do](https://myguardian.health/what-we-do/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [Get Started](https://myguardian.health/get-started/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [Referral Partners](https://myguardian.health/referral-partners/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [Contact](https://myguardian.health/contact/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [Service Area](https://myguardian.health/service-area/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [Skilled Nursing](https://myguardian.health/skilled-nursing/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [Wound, Catheter, and IV Care](https://myguardian.health/wound-catheter-and-iv-care/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [Post Hospital Recovery](https://myguardian.health/post-hospital-recovery/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [Post Operative Recovery](https://myguardian.health/post-operative-recovery/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [New Diagnosis Management](https://myguardian.health/new-diagnosis-management/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [Teaching and Training](https://myguardian.health/teaching-and-training/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [Careers](https://myguardian.health/careers/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). - [HomePage](https://myguardian.health/): /* Guardian Health — shared styles */ :root { --navy: #134b70; --navy-700: #0e3a58; --navy-900: #082238; --sky: #3fafe4; --sky-600: #2a96cb; --sky-50: #eaf6fc; --cream: #faf7f2; --paper: #ffffff; --ink: #18283a; --muted: #5b6b7d; --line: #e6ebf1; --mint: #e6f4f1; --warm: #fff4e6; --warm-ink: #8a5a14; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 38, 60, 0.06), 0 1px 1px rgba(15, 38, 60, 0.04); --shadow-md: 0 8px 24px -8px rgba(15, 38, 60, 0.18), 0 2px 6px rgba(15, 38, 60, 0.06); --shadow-lg: 0 24px 60px -24px rgba(8, 34, 56, 0.30), 0 4px 12px rgba(15, 38, 60, 0.06); --maxw: 1200px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.55; font-size: 17px; text-wrap: pretty; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--sky-600); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--navy-900); font-weight: 700; letter-spacing: -0.015em; margin: 0; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.18rem; } p { margin: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--sky-600); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sky-600); display: inline-block; } .serif { font-family: "Source Serif 4", "Georgia", serif; font-weight: 400; font-style: italic; } /* ---------- TOP BAR ---------- */ .topbar { background: var(--navy-900); color: #cfe3f1; font-size: 13px; padding: 8px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .topbar a { color: #ffffff; font-weight: 500; } .topbar-left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar-left span { display: inline-flex; gap: 8px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fd3a3; box-shadow: 0 0 0 4px rgba(95, 211, 163, 0.18); } /* ---------- HEADER ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: auto; } .brand-tag { font-size: 11px; color: var(--muted); line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; max-width: 140px; } .navlinks { display: flex; gap: 26px; align-items: center; } .navlinks a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; } .navlinks a:hover, .navlinks a.active { color: var(--navy); } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--sky); transition: right .25s ease; } .navlinks a:hover::after, .navlinks a.active::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-decoration: none; line-height: 1; font-family: inherit; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn-secondary:hover { border-color: var(--sky); color: var(--navy-700); } .btn-ghost { background: transparent; color: var(--navy); } .btn-ghost:hover { color: var(--sky-600); } .btn-accent { background: var(--sky); color: var(--navy-900); } .btn-accent:hover { background: #66bfeb; color: var(--navy-900); transform: translateY(-1px); } .btn-on-dark { background: var(--sky); color: var(--navy-900); } .btn-on-dark:hover { background: #66bfeb; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn-outline-light:hover { border-color: #fff; } .icon { width: 16px; height: 16px; } .menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; } .menu-btn svg { width: 22px; height: 22px; color: var(--navy); display: block; } /* ---------- DRAWER ---------- */ .drawer { display: none; position: fixed; top: 0; right: 0; height: 100dvh; width: 86%; max-width: 360px; background: #fff; z-index: 100; box-shadow: var(--shadow-lg); padding: 24px; transform: translateX(100%); transition: transform .25s ease; flex-direction: column; gap: 12px; } .drawer.open { transform: translateX(0); } .drawer-mask { display: none; position: fixed; inset: 0; background: rgba(8, 34, 56, 0.5); z-index: 90; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .drawer a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); } .drawer .btn { margin-top: 10px; justify-content: center; } /* ---------- HERO ---------- */ .hero { position: relative; padding: 64px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 0%, rgba(63, 175, 228, 0.16), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(19, 75, 112, 0.06), transparent 60%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 .accent { color: var(--sky-600); } .hero h1 .serif { color: var(--navy); font-style: italic; font-weight: 400; } .hero .lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 580px; } .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hero-meta { margin-top: 32px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); } .hero-meta b { color: var(--navy-900); } .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); } .hero-visual { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sky-50); } /* Make the dropped/seeded photo fill the entire hero block */ .hero-visual image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-visual image-slot::part(image) { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 30% !important; } .placeholder { position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(19, 75, 112, 0.07) 0 12px, rgba(19, 75, 112, 0.02) 12px 24px ), linear-gradient(180deg, #cfe6f4 0%, #eaf6fc 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 0.03em; text-align: center; padding: 24px; } .placeholder .tag { background: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(19, 75, 112, 0.18); max-width: 88%; } .hero-badge { position: absolute; left: -22px; bottom: 36px; background: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: var(--shadow-md); display: flex; gap: 12px; align-items: center; max-width: 300px; } .hero-badge .avi { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .hero-badge .copy { font-size: 13px; line-height: 1.35; color: var(--ink); } .hero-badge .copy b { color: var(--navy-900); } .hero-badge-2 { position: absolute; right: -16px; top: 28px; background: var(--navy); color: #cfe3f1; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.3; max-width: 220px; } .hero-badge-2 b { color: #fff; display: block; font-size: 15px; margin-bottom: 2px; } /* Smaller hero variant (interior pages) */ .hero.compact { padding: 56px 0 40px; } .hero.compact .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero.compact .lede { font-size: 1.1rem; } .hero.compact .hero-ctas { margin-top: 24px; } /* ---------- HERO CAROUSEL ---------- */ .hero-carousel { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); } .hc-track { position: relative; } /* Per-slide theme defaults (overridden by .theme-* classes) */ .hc-slide { --s-bg: var(--sky-50); --s-accent: var(--sky-600); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .7s ease, visibility .7s ease; } .hc-slide.active { opacity: 1; visibility: visible; position: relative; } .hc-track .hc-slide:not(.active) { pointer-events: none; } /* Slide colour themes — each flip changes the tint + accent */ .hc-slide.theme-sky { --s-bg: #eaf6fc; --s-accent: #2a96cb; } .hc-slide.theme-cream { --s-bg: #fbf5ec; --s-accent: #0e8b8f; } .hc-slide.theme-mint { --s-bg: #e7f3ee; --s-accent: #1f7a64; } .hc-slide.theme-sand { --s-bg: #fdf3e7; --s-accent: #b9762a; } .hc-text { background: var(--s-bg); color: var(--muted); display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px, 5vw, 88px); position: relative; z-index: 2; } .hc-text .hc-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--s-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hc-text .hc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--s-accent); display: inline-block; } .hc-text h2 { color: var(--navy-900); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; } .hc-text h2 .serif { color: var(--s-accent); font-style: italic; font-weight: 400; } .hc-text p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 46ch; } .hc-text .hc-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .hc-text .hc-stat { margin-top: 28px; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(19,38,60,0.12); padding-top: 22px; } .hc-text .hc-stat .big { font-family: "Source Serif 4", serif; font-weight: 500; font-size: 2.4rem; color: var(--s-accent); line-height: 1; } .hc-text .hc-stat .lbl { font-size: 14px; color: var(--muted); max-width: 22ch; } /* themed CTA inside hero text panel */ .hc-text .btn-hero { background: var(--s-accent); color: #fff; box-shadow: var(--shadow-sm); } .hc-text .btn-hero:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .hc-text .btn-hero-ghost { background: rgba(255,255,255,0.6); color: var(--navy-900); border-color: rgba(19,38,60,0.14); } .hc-text .btn-hero-ghost:hover { background: #fff; border-color: var(--s-accent); color: var(--navy-900); } .hc-photo { position: relative; min-height: 320px; background: var(--s-bg); } .hc-photo image-slot, .hc-photo .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } /* Force a clean cover crop on the hero photo slots (bypasses the slot's reframe geometry, which needs a saved crop to position correctly). ## Optional - [Agent (MCP protocol)](websites-agents.hostinger.com/myguardian.health/mcp) [comment]: # (Generated by Hostinger Tools Plugin)