/* Employee Health Programs — page styles. All rules scoped under .ehp Site tokens are read with live-value fallbacks so the file also works standalone. */ .ehp { --ehp-ink: var(--bs-heading-color-hex, #1e2d3b); --ehp-body: #212124; --ehp-muted: #495356; --ehp-blue: var(--bs-primary-hex, #0072bc); --ehp-blue-hover: #0086dd; --ehp-sky: #80b7e3; --ehp-sky-soft: #d8ecf9; --ehp-tint: var(--bs-light-hex, #f2f8fc); --ehp-line: var(--bs-secondary-border-hex, #e7e7e7); --ehp-line-soft: #dce3e8; --ehp-green: #4f9c2e; --ehp-green-light: #9fd086; --ehp-yellow: #ffd240; --ehp-r: var(--bs-border-radius, 10px); font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif; color: var(--ehp-body); background: var(--ehp-tint); -webkit-font-smoothing: antialiased; } .ehp *, .ehp *::before, .ehp *::after { box-sizing: border-box; } .ehp a, .ehp button { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .ehp-wrap { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .ehp-wrap--narrow { max-width: 908px; } /* Type */ .ehp-h1 { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 18px; max-width: 21ch; text-wrap: balance; } .ehp-h2 { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 12px; text-wrap: balance; } .ehp-two .ehp-h2 { max-width: 22ch; margin-bottom: 16px; } .ehp-h3 { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.22; margin: 0 0 10px; } .ehp-kicker { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ehp-blue); margin: 0 0 10px; } .ehp-kicker--accent { color: var(--ehp-sky); } .ehp-lede { font-size: 18px; line-height: 1.6; color: var(--ehp-muted); margin: 0 0 14px; max-width: 58ch; } .ehp-lede:last-child { margin-bottom: 0; } .ehp-head { max-width: 62ch; margin-bottom: 34px; } /* Buttons */ .ehp-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ehp-blue); color: #fff; text-decoration: none; font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 17px; padding: 15px 26px; border-radius: 8px; border: 0; cursor: pointer; } .ehp-btn:hover { background: var(--ehp-blue-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,114,188,.35); } .ehp-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.34); } .ehp-btn--ghost:hover { background: rgba(255,255,255,.10); border-color: var(--ehp-sky); box-shadow: none; } .ehp-btn--sm { font-size: 16px; padding: 13px 22px; } .ehp-btn--sm:hover { transform: none; box-shadow: none; } .ehp-btn--lg { font-size: 18px; padding: 17px 30px; } /* Sections */ .ehp-sec { padding: 68px 0; border-bottom: 1px solid var(--ehp-line); } .ehp-sec--white { background: #fff; } .ehp-sec--tint { background: var(--ehp-tint); } .ehp-sec--dark { background: var(--ehp-ink); color: #fff; border-bottom: 0; } .ehp-sec--dark .ehp-lede { color: var(--ehp-sky-soft); max-width: 52ch; } .ehp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px; align-items: start; } .ehp-two--center { align-items: center; gap: 40px; } /* Hero */ .ehp-hero { position: relative; background: var(--ehp-ink); color: #fff; overflow: hidden; } .ehp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; animation: ehpDrift 26s ease-in-out infinite alternate; } .ehp-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #1e2d3b 22%, rgba(30,45,59,.82) 72%, rgba(30,45,59,.55) 100%); } .ehp-hero__inner { position: relative; padding-top: 64px; padding-bottom: 60px; } .ehp-hero__lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--ehp-tint); max-width: 64ch; margin: 0 0 28px; } .ehp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } @keyframes ehpDrift { from { transform: scale(1.06); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } } /* Value band */ .ehp-band { background: var(--ehp-blue); color: #fff; } .ehp-band__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding-top: 24px; padding-bottom: 24px; } .ehp-band__item { display: flex; gap: 12px; align-items: flex-start; } .ehp-band__n { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: var(--ehp-sky); } .ehp-band__item b { display: block; font-weight: 700; font-size: 16px; } .ehp-band__item span:not(.ehp-band__n) { display: block; font-size: 15px; line-height: 1.4; color: var(--ehp-sky-soft); } /* Cards */ .ehp-card { background: #fff; border: 1px solid var(--ehp-line); border-radius: var(--ehp-r); padding: 26px; } .ehp-card > p { font-size: 16px; line-height: 1.55; color: var(--ehp-muted); margin: 0; } .ehp-card--tint { background: var(--ehp-tint); padding: 28px; } .ehp-card--tint .ehp-h3 { margin-bottom: 16px; } .ehp-card--lift { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .ehp-card--lift:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(30,45,59,.10); border-color: #cfe2f1; } .ehp-card--top { border-top: 4px solid; } .ehp-card--top-blue { border-top-color: var(--ehp-blue); border-color: #cfe2f1; border-top-color: var(--ehp-blue); } .ehp-card--top-grey { border-top-color: var(--ehp-muted); } .ehp-card--top .ehp-h3 { margin-bottom: 12px; } .ehp-grid { display: grid; gap: 18px; } .ehp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .ehp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Dot list */ .ehp-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .ehp-dots li { position: relative; padding-left: 20px; } .ehp-dots li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ehp-blue); } .ehp-dots b { display: block; font-weight: 700; font-size: 17px; } .ehp-dots span { display: block; font-size: 16px; line-height: 1.45; color: var(--ehp-muted); } /* Tick list */ .ehp-ticks { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .ehp-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: var(--ehp-ink); } .ehp-ticks li::before { content: "\2713"; flex: none; color: var(--ehp-green); font-weight: 700; } .ehp-ticks--lg { gap: 9px; } .ehp-ticks--lg li { font-size: 16.5px; line-height: 1.5; } .ehp-ticks--dash li { color: var(--ehp-muted); } .ehp-ticks--dash li::before { content: "\2014"; color: #8e9598; } /* Program cards */ .ehp-program { display: flex; flex-direction: column; gap: 12px; } .ehp-program .ehp-h3 { font-size: 21px; margin: 0; } .ehp-program__cadence { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ehp-blue); margin: 0; } .ehp-program__link { margin-top: auto; padding-top: 8px; font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 16px; color: var(--ehp-blue); text-decoration: none; } .ehp-program__link:hover { color: var(--ehp-ink); } /* Roles — tabs */ .ehp-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .ehp-tab { font: inherit; font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 15.5px; line-height: 1.2; white-space: nowrap; padding: 11px 18px; border-radius: 999px; cursor: pointer; border: 1px solid #cfe2f1; background: #fff; color: var(--ehp-ink); } .ehp-tab:hover { border-color: var(--ehp-blue); color: var(--ehp-blue); } .ehp-tab[aria-selected="true"] { border-color: var(--ehp-ink); background: var(--ehp-ink); color: #fff; } .ehp-role { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); background: var(--ehp-tint); border: 1px solid var(--ehp-line); border-radius: var(--ehp-r); overflow: hidden; } .ehp-role__intro { padding: 32px 30px; border-left: 4px solid var(--ehp-blue); } .ehp-role__title { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; margin: 0 0 6px; } .ehp-role__who { font-size: 16px; line-height: 1.5; color: var(--ehp-muted); margin: 0 0 18px; } .ehp-role__note { font-size: 17px; line-height: 1.6; color: var(--ehp-muted); margin: 0 0 22px; max-width: 46ch; } .ehp-role__table { background: #fff; padding: 26px 30px; } .ehp-role__hd { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8e9598; padding-bottom: 10px; border-bottom: 1px solid var(--ehp-line-soft); } .ehp-role__row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; border-bottom: 1px solid #eef2f5; padding: 13px 0; } .ehp-role__row span:first-child { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ehp-ink); } .ehp-role__row span:last-child { flex: none; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ehp-blue); } /* Steps + watermark */ .ehp-sec--mark { position: relative; overflow: hidden; } .ehp-sec--mark .ehp-wrap { position: relative; } .ehp-mark { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: min(56vw, 620px); opacity: .05; pointer-events: none; } .ehp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; max-width: 860px; } .ehp-step { display: flex; gap: 20px; } .ehp-step__mark { position: relative; flex: none; width: 44px; } .ehp-step__n { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ehp-ink); color: #fff; font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 19px; } .ehp-step__mark::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: -32px; width: 2px; background: var(--ehp-line-soft); } .ehp-step--last .ehp-step__mark::after { display: none; } .ehp-step__when { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ehp-blue); margin: 0 0 4px; } .ehp-step__body .ehp-h3 { font-size: 22px; margin-bottom: 8px; } .ehp-step__body p:last-child { font-size: 17px; line-height: 1.6; color: var(--ehp-muted); margin: 0; max-width: 62ch; } /* Day to day */ .ehp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .ehp-checks li { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--ehp-r); padding: 16px 18px; } .ehp-checks li::before { content: "\2713"; flex: none; font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--ehp-green-light); } .ehp-checks b { display: block; font-weight: 700; font-size: 17px; line-height: 1.4; margin-bottom: 3px; } .ehp-checks span { display: block; font-size: 16px; line-height: 1.5; color: var(--ehp-sky-soft); } .ehp-sec--dark .ehp-lede + .ehp-poster { margin-top: 26px; } .ehp-poster { position: relative; display: block; width: 100%; max-width: 520px; aspect-ratio: 16 / 10; border: 0; padding: 0; border-radius: var(--ehp-r); overflow: hidden; cursor: pointer; background: #000; box-shadow: 0 18px 40px rgba(0,0,0,.35); } .ehp-poster:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(0,0,0,.45); } .ehp-poster__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; } .ehp-poster__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,45,59,0) 40%, rgba(30,45,59,.85) 100%); } .ehp-poster__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: var(--ehp-yellow); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .ehp-poster__play span { width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--ehp-ink); margin-left: 5px; } .ehp-poster__cap { position: absolute; left: 20px; right: 20px; bottom: 18px; text-align: left; color: #fff; } .ehp-poster__cap b { display: block; font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 19px; line-height: 1.25; } .ehp-poster__cap span { display: block; font-size: 14.5px; color: var(--ehp-sky-soft); margin-top: 2px; } /* Video modal */ .ehp-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(30,45,59,.92); display: flex; align-items: center; justify-content: center; padding: 24px; } .ehp-modal[hidden] { display: none; } .ehp-modal__frame { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: var(--ehp-r); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); } .ehp-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ehp-modal__close { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; background: var(--ehp-yellow); color: #212124; border: 0; font-size: 24px; line-height: 1; cursor: pointer; font-weight: 700; } .ehp-modal__close:hover { background: #f5c51e; } /* Is it for you — checklist */ .ehp-fit { margin-bottom: 22px; } .ehp-fit__item { display: flex; gap: 16px; align-items: flex-start; text-align: left; font: inherit; cursor: pointer; width: 100%; border-radius: var(--ehp-r); padding: 24px; border: 1px solid var(--ehp-line); background: var(--ehp-tint); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease; } .ehp-fit__item:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(30,45,59,.10); } .ehp-fit__item[aria-checked="true"] { border-color: var(--ehp-blue); background: #fff; box-shadow: 0 0 0 3px rgba(0,114,188,.15); } .ehp-fit__box { flex: none; width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; border: 2px solid #b9c6d0; background: #fff; color: transparent; transition: background-color .2s, color .2s, border-color .2s; } .ehp-fit__item[aria-checked="true"] .ehp-fit__box { border-color: var(--ehp-blue); background: var(--ehp-blue); color: #fff; } .ehp-fit__item > span:last-child { display: block; } .ehp-fit__item b { display: block; font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 19px; line-height: 1.25; margin-bottom: 8px; color: var(--ehp-ink); } .ehp-fit__item > span:last-child > span { display: block; font-size: 16px; line-height: 1.55; color: var(--ehp-muted); } .ehp-verdict { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; border-radius: var(--ehp-r); padding: 26px 28px; color: #fff; background: var(--ehp-muted); transition: background-color .3s; } .ehp-verdict[data-count="1"], .ehp-verdict[data-count="2"], .ehp-verdict[data-count="3"] { background: var(--ehp-ink); } .ehp-verdict[data-count="4"], .ehp-verdict[data-count="5"], .ehp-verdict[data-count="6"] { background: var(--ehp-blue); } .ehp-verdict p { margin: 0; } .ehp-verdict__kicker { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ehp-sky); margin-bottom: 6px !important; } .ehp-verdict__title { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; margin-bottom: 6px !important; } .ehp-verdict__body { font-size: 16.5px; line-height: 1.55; color: var(--ehp-sky-soft); max-width: 60ch; } .ehp-verdict .ehp-btn { flex: none; } /* FAQ */ .ehp-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; } .ehp-faq__item { border: 1px solid var(--ehp-line); border-radius: var(--ehp-r); overflow: hidden; background: #fff; } .ehp-faq__q { width: 100%; display: flex; gap: 16px; align-items: center; justify-content: space-between; background: none; border: 0; padding: 20px 22px; cursor: pointer; text-align: left; font: inherit; font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--ehp-ink); } .ehp-faq__q:hover { background: var(--ehp-tint); } .ehp-faq__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ehp-tint); color: var(--ehp-ink); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; transition: transform .18s ease, background-color .18s ease, color .18s ease; } .ehp-faq__q[aria-expanded="true"] .ehp-faq__icon { transform: rotate(45deg); background: var(--ehp-blue); color: #fff; } .ehp-faq__a { animation: ehpPanelIn .28s cubic-bezier(.2,.7,.3,1) both; } .ehp-faq__a p { padding: 0 22px 22px; font-size: 17px; line-height: 1.6; color: var(--ehp-muted); margin: 0; } @keyframes ehpPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* CTA band */ .ehp-cta { padding: 64px 0; } .ehp-cta__col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .ehp-cta__phone { font-size: 16px; line-height: 1.6; color: var(--ehp-sky-soft); margin: 0; } .ehp-cta__phone a { color: var(--ehp-sky); font-weight: 700; text-decoration: none; } .ehp-cta__phone a:hover { color: #fff; } .ehp-cta__note { font-size: 15.5px; line-height: 1.55; color: #9fb3c2; max-width: 44ch; border-top: 1px solid rgba(255,255,255,.16); padding-top: 14px; margin: 0; } /* Motion — hero copy */ .ehp-anim { animation: ehpHeroIn .7s cubic-bezier(.2,.7,.3,1) both; } .ehp-anim--1 { animation-duration: .6s; } .ehp-anim--2 { animation-delay: .08s; } .ehp-anim--3 { animation-delay: .16s; } .ehp-anim--4 { animation-delay: .24s; } @keyframes ehpHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* Motion — scroll reveal. Only applied once JS sets .js-ehp-reveal on , so it fails open. */ .js-ehp-reveal .ehp [data-reveal] > * { opacity: 0; transform: translateY(22px); } .js-ehp-reveal .ehp [data-reveal].is-in > * { opacity: 1; transform: none; transition: opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1); } .js-ehp-reveal .ehp [data-reveal].is-in > *:nth-child(2) { transition-delay: .07s; } .js-ehp-reveal .ehp [data-reveal].is-in > *:nth-child(3) { transition-delay: .14s; } .js-ehp-reveal .ehp [data-reveal].is-in > *:nth-child(4) { transition-delay: .21s; } .js-ehp-reveal .ehp [data-reveal].is-in > *:nth-child(5) { transition-delay: .28s; } .js-ehp-reveal .ehp [data-reveal].is-in > *:nth-child(n+6) { transition-delay: .35s; } @media (max-width: 640px) { .ehp-sec { padding: 48px 0; } .ehp-hero__inner { padding-top: 48px; padding-bottom: 44px; } .ehp-two { gap: 32px; } .ehp-role__intro, .ehp-role__table { padding: 24px 20px; } } @media print { .ehp-hero__bg, .ehp-mark, .ehp-poster, .ehp-modal { display: none !important; } .ehp-hero, .ehp-sec--dark, .ehp-verdict { background: #fff !important; color: #000 !important; } .ehp [data-reveal] > *, .ehp-anim { opacity: 1 !important; transform: none !important; animation: none !important; } .ehp-faq__a[hidden], .ehp-role[hidden] { display: block !important; } } @media (prefers-reduced-motion: reduce) { .ehp *, .ehp *::before, .ehp *::after { animation: none !important; transition: none !important; } .js-ehp-reveal .ehp [data-reveal] > * { opacity: 1; transform: none; } } /* ============================================================================ ICA build corrections — appended, nothing above this line is edited. Everything here fixes a collision with the live theme or supports a state the design export could not have (empty video, 7 cards, no-JS tabs). Branch claude/employee-health. See docs/pages/employee-health-programs.md. ========================================================================== */ /* 1. NAVY, NOT INK-BLACK. The export maps --ehp-ink to --bs-heading-color-hex, which on this theme is #212124 (body text), so the hero and both dark bands would render near-black instead of navy. Navy is --bs-tertiary-hex. This is a known trap on this install, not a preference. */ .ehp { --ehp-ink: var(--bs-tertiary-hex, #1e2d3b); } /* 2. DARK-BAND HEADINGS. The theme sets h1/h2 colour directly and a direct rule beats the design's inherited colour — home-page headings rendered at 1.14:1 and were invisible. Restate scoped to the dark sections. */ .ehp-hero .ehp-h1, .ehp-sec--dark .ehp-h2, .ehp-sec--dark .ehp-h3 { color: #fff; } .ehp-band__item b { color: #fff; } /* 3. SEVEN PROGRAM CARDS, NOT EIGHT. Vaccination clinics was dropped, so the 3-up grid leaves one card alone on the last row. Let it span instead of sitting in a third of the width. Only fires when the last card is also first-in-row, so an eighth card restores the plain grid automatically. */ .ehp-program:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } /* 4. TWO-CARD GRID for the privacy section (the export reused the 3-up grid for two cards, which left them narrow and unbalanced). */ .ehp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* 5. VIDEO POSTER — hidden until there is a video. hero-pop-video ships empty and is filled in the manager when the employee-health video is made; the poster must not render a play button pointing at nothing in the meantime. Markup renders unconditionally because wrapping it in a :notempty branch would put its pageLabel calls inside a modifier, where they never run. */ .ehp-poster[data-video-id=""] { display: none; } .ehp-poster { display: block; cursor: pointer; } /* 6. GLIGHTBOX sizing. $footer lazy-loads GLightbox for any .glightbox element. data-width/data-height do not size a video slide — the instance's videosWidth wins — so size it here. */ .glightbox-container .gslide-video { max-width: min(1100px, 92vw) !important; } /* 7. ROLE TABS FAIL OPEN. Panels carry hidden so the tab script has something to manage, but with JS off (or if the script errors) every panel must still be readable rather than five dead buttons. .ehp-js is added by employee-health.js; until it lands, show everything and drop the tablist. */ .ehp:not(.ehp-js) .ehp-role[hidden] { display: block; } .ehp:not(.ehp-js) .ehp-tabs { display: none; } .ehp:not(.ehp-js) .ehp-role + .ehp-role { margin-top: 28px; border-top: 1px solid var(--ehp-line); padding-top: 28px; } /* 8. VERDICT BAR is inert without JS — hide it rather than show empty lines. The six cards above it still read as a qualification list, which is the section's actual argument. */ .ehp:not(.ehp-js) .ehp-verdict { display: none; } /* 9. WATERMARK. Reuses the site's existing ica-mark-white.svg rather than shipping a second copy of the logo; it is white, and section 6 is light-tinted, so invert it here. */ .ehp-mark { filter: invert(1); opacity: .05; } /* 10. TAB PANELS MUST ACTUALLY HIDE. The export sets .ehp-role{display:grid}, and an author display rule beats the UA's [hidden]{display:none}. The result is that the script's p.hidden = true has no visual effect: all six panels render at once and the tablist is decorative. Caught by rendering the built page, not visible in the export preview. Scoped to .ehp-js so the no-JS path in rule 7 still shows every panel. */ .ehp-js .ehp-role[hidden] { display: none; } /* reveal: the export already ships a complete staggered reveal (children of [data-reveal], with print and reduced-motion bypasses) and it already fails open on .js-ehp-reveal. Nothing is added here on purpose — a second reveal system on the container would double-fade. */ /* 11. SEQUENCE NUMBERS. The export hardcoded "01".."04" in the value band and "1".."5" in the steps. Those are presentation, not content: typed into a TV they drift out of order the moment an editor reorders or deletes a row. The markup emits an empty span and the number comes from a counter, so the sequence is always correct by construction. */ .ehp-band__grid { counter-reset: ehp-band; } .ehp-band__item { counter-increment: ehp-band; } .ehp-band__n::before { content: counter(ehp-band, decimal-leading-zero); } .ehp-steps { counter-reset: ehp-step; } .ehp-step { counter-increment: ehp-step; } .ehp-step__n::before { content: counter(ehp-step); } /* 12. BLUE-BAND CONTRAST. The export's BRIEF states dark bands use #d8ecf9 on #1e2d3b, which is correct for the navy sections. The same token was also used on the value band, whose background is the lighter --ehp-blue (#0072bc) — there it measures 4.18:1 on 15px text, under AA, and the decorative numerals land at 2.37:1. Measured on the built page against the live theme tokens, not guessed. Navy bands are untouched: those measure 14.06:1 after correction 2. */ .ehp-band__item span:not(.ehp-band__n) { color: #fff; } .ehp-band__n { color: var(--ehp-sky-soft); } /* 13. ROLE TABLE HEADERS. "Exam or test" / "Cycle" ship at 12.5px in --ehp-muted-on-tint, measuring 3.04:1 — fine for large text, under AA at that size. These are the column headers on the compliance tables, so they need to be legible. Darkened to the body ink; size and letter-spacing are the design's, unchanged. */ .ehp-role__hd span { color: var(--ehp-body); } /* 14. VERDICT KICKER. 12.5px in --ehp-sky, and the verdict bar changes background with the tally: --ehp-muted at 0, --ehp-ink at 1-3, --ehp-blue at 4+. Sky measures 3.69:1 on the grey and 2.37:1 on the blue — under AA at that size on two of the three states, and this sits inside the aria-live region that announces the tally. White is the only value that clears AA on all three (5.4 / 7.0 / 14.1). The kicker still reads as a kicker through its size, weight and tracking. Not touched: .ehp-fit__box measures 1:1 on purpose — it is the checkbox tick, color:transparent and aria-hidden until the card is checked. That is the design working, not a contrast defect. */ .ehp-verdict__kicker { color: #fff; } /* 15. FAQ MARKER — consequences of using
instead of the export's