/* ========================================================================== HARD LOCK — red-header-orphan-lock-2026-09-16 LOAD THIS FILE LAST in . Never strip. Later overlays MUST NOT wipe. AUTH_SYNTHETIC · zero PHI · Soft Soft DRAFT first → Sites phone PASS → LIVE ========================================================================== RESTORES clinic-style RED utility ribbon (NOT CTA orange #F05424): --orange-dark / --cr-orange-dark = #CE441A Source: site.css `.site-ribbon--clinic { background: var(--orange-dark); }` Text on bar: #FFFFFF / #FCE8DF (near-white on red) MERGES (do not lose Login top-right phone lock): common-sense-banner · header-orphan-punch · login-banner-phone-soft · shared-header Hosts: www.curerays.com · curerays.org · staff.curerays.com · CKA (cancerkeepaway) NOT SIRiiM / OJ (own chrome). Crest SHA 1b656128 · product orange #F05424 unchanged for CTAs. ========================================================================== */ :root { /* HARD LOCK tokens */ --rh-red: #CE441A; /* improved RED header / clinic ribbon */ --rh-red-text: #FCE8DF; /* body text on red bar */ --rh-red-mark: #FFFFFF; /* mark / links on red bar */ --rh-cta: #F05424; /* product orange — CTAs only; DO NOT use for ribbon */ --rh-navy: #243090; /* purple/navy accent */ --rh-navy-deep: #1A2468; --rh-ink: #1B1F33; --rh-body: #3C4356; --rh-on-light-navy: #243090; /* navy on white — keep ≥4.5:1 */ } /* -------------------------------------------------------------------------- HARD LOCK 1 — RED improved header bar (all CureRays hosts) Overrides navy-only / wiped ribbon treatments. Institute was navy; Clay URGENT: restore clinic RED (#CE441A) on www, .org, staff, CKA. -------------------------------------------------------------------------- */ .site-ribbon, .site-ribbon--clinic, .site-ribbon--institute, header .site-ribbon, .site-header > .site-ribbon, .site-header .site-ribbon--clinic, .site-header .site-ribbon--institute { background: var(--rh-red, #CE441A) !important; background-color: #CE441A !important; color: var(--rh-red-text, #FCE8DF) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important; } .site-ribbon__mark, .site-ribbon--clinic .site-ribbon__mark, .site-ribbon--institute .site-ribbon__mark { color: var(--rh-red-mark, #FFFFFF) !important; font-weight: 700 !important; } .site-ribbon__tag, .site-ribbon--clinic .site-ribbon__tag, .site-ribbon--institute .site-ribbon__tag { color: rgba(255, 255, 255, 0.88) !important; font-weight: 500 !important; } .site-ribbon__sep { color: rgba(255, 255, 255, 0.7) !important; opacity: 0.7 !important; } .site-ribbon__x, .site-ribbon--clinic .site-ribbon__x, .site-ribbon--institute .site-ribbon__x, .site-ribbon a.site-ribbon__x { color: var(--rh-red-mark, #FFFFFF) !important; border-bottom-color: rgba(255, 255, 255, 0.55) !important; text-decoration: none !important; font-weight: 600 !important; } .site-ribbon__x:hover, .site-ribbon__x:focus-visible { color: #FFFFFF !important; border-bottom-color: #FFFFFF !important; } /* Shared-header chrome (.cr-sh) — staff / CKA / hosts without .site-ribbon: inject a 1-row RED utility bar via ::before so red header is present. */ .cr-sh { position: sticky; top: 0; z-index: 200; } .cr-sh::before { content: "" !important; display: block !important; height: 6px !important; width: 100% !important; background: #CE441A !important; background-color: #CE441A !important; flex: 0 0 auto !important; } /* If host already has a ribbon sibling above .cr-sh, still keep ::before thin accent — 6px is intentional utility edge, not a second banner row. */ /* -------------------------------------------------------------------------- HARD LOCK 2 — Purple/navy (#243090) contrast on light + on red bar -------------------------------------------------------------------------- */ /* On light backgrounds: keep navy readable (do not lighten to gray) */ .site-header .brand, .site-header .brand .wordmark, .brand, .brand .wordmark, h1, h2, h3, .hero h1, .hero h2, .hero h3, .hero .tagline, .accent-navy, [style*="color:#243090"], [style*="color: #243090"] { /* ensure navy stays navy on white/light */ } .site-header .brand, .site-header .brand .wordmark, .site-header .brand .brand-text { color: var(--rh-navy, #243090) !important; } .site-header .brand .brand-sub, .site-header .brand .wordmark::after { color: var(--rh-navy, #243090) !important; opacity: 0.85 !important; } /* Navy/purple accent text in header + hero body — contrast on light */ .site-header a:not(.btn--primary):not(.site-ribbon__x):not(#header-signup), .hero p, .hero .lede, main .lede, .section .lede { /* inherit body; navy links stay #243090 */ } .site-header .nav-links a, .site-header .nav-cta .btn--outline, .site-header .nav-cta #header-login, .site-header .nav-cta a#header-login { color: var(--rh-navy, #243090); } .site-ribbon a, .site-ribbon span, .site-ribbon p { color: inherit; } .site-ribbon .site-ribbon__mark, .site-ribbon a.site-ribbon__x { color: #FFFFFF !important; } .btn--primary, .cr-sh__login { background-color: var(--rh-cta, #F05424); } /* -------------------------------------------------------------------------- HARD LOCK 3 — Orphan / widow / pretty wrap (headers + body purple/navy zones) -------------------------------------------------------------------------- */ .site-header h1, .site-header h2, .site-header h3, .site-ribbon__mark, .site-ribbon__tag, .hero h1, .hero h2, .hero h3, .hero p, .hero .lede, .hero .tagline, main h1, main h2, main h3, main p, .section h1, .section h2, .section h3, .section p, .brand .wordmark, .brand .brand-sub, .cr-sh__site, .cr-sh__tag { text-wrap: pretty; orphans: 3; widows: 3; } /* Prefer balanced line breaks; avoid one-word last lines where feasible */ @supports (text-wrap: balance) { .hero h1, .hero h2, .site-header h1, main h1, main h2 { text-wrap: balance; } } @supports (text-wrap: pretty) { .hero p, .hero .lede, main p, .section p, .site-ribbon__tag { text-wrap: pretty; } } /* -------------------------------------------------------------------------- HARD LOCK 4 — Brand stack (from common-sense-banner; never clip wordmark) -------------------------------------------------------------------------- */ .site-header .brand { display: flex !important; align-items: center !important; gap: 8px; flex: 0 1 auto; min-width: 0; overflow: visible !important; /* NEVER clip CureRays wordmark */ text-decoration: none; } .site-header .brand .logo-mark { flex: 0 0 auto; object-fit: contain; display: block; } .site-header .brand .brand-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; line-height: 1.05; } .site-header .brand .wordmark { display: inline-block; white-space: nowrap; overflow: visible !important; line-height: 1; } .site-header .brand .brand-sub { display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rh-navy, #243090) !important; opacity: 0.78; margin-top: 3px; white-space: nowrap; line-height: 1.1; } /* CSS-only secondary line when HTML brand-sub absent */ .site-header:has(.site-ribbon--institute) .brand .wordmark:not(:has(+ .brand-sub))::after, .site-header:has(.site-ribbon--institute) .brand .brand-text .wordmark:not(:has(+ .brand-sub))::after { content: "Institute"; display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rh-navy, #243090) !important; opacity: 0.78; margin-top: 3px; line-height: 1.1; } .site-header:has(.site-ribbon--clinic) .brand .wordmark:not(:has(+ .brand-sub))::after, .site-header:has(.site-ribbon--clinic) .brand .brand-text .wordmark:not(:has(+ .brand-sub))::after { content: "Radiation Medicine"; display: block; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rh-navy, #243090) !important; opacity: 0.78; margin-top: 3px; line-height: 1.1; } .site-header .brand .wordmark:has(+ .brand-sub)::after { content: none !important; display: none !important; } /* -------------------------------------------------------------------------- HARD LOCK 5 — Phone ~390px: Login top-right; wordmark unclipped; one CTA row (common-sense + login-banner-phone-soft; supersedes orphan-punch overflow:hidden) -------------------------------------------------------------------------- */ @media (max-width: 760px) { .site-header .nav { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; min-height: 56px; height: auto !important; max-height: none !important; /* stacked brand OK; ONE nav row of CTAs */ overflow: visible !important; padding-top: 6px; padding-bottom: 6px; } .site-header .brand { flex: 0 0 auto !important; min-width: 0; max-width: calc(100% - 168px); overflow: visible !important; margin-right: 8px; gap: 6px; font-size: 1.05rem !important; } .site-header .brand .brand-sub { font-size: 0.55rem; letter-spacing: 0.04em; max-width: 11.5rem; overflow: hidden; text-overflow: ellipsis; } .site-header .brand .logo-mark { width: 34px !important; height: 34px !important; } .site-header .brand .wordmark { font-size: 1.05rem; max-width: none; text-overflow: clip; overflow: visible !important; white-space: nowrap !important; } .site-header .nav-toggle { order: 2; flex: 0 0 auto; font-size: 1.35rem !important; padding: 4px 2px; min-width: 36px; min-height: 44px; } .site-header .nav-cta { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; flex: 0 0 auto; margin-left: auto; order: 3; overflow: visible !important; } /* Kill orphan second white banner row */ .site-header .nav-cta .nav-search, .site-header .nav-cta a[href="/teach-me"], .site-header .nav-cta a[href="/philanthropy"], .site-header .nav-cta a[href*="teach-me"], .site-header .nav-cta a[href*="philanthropy"], .site-header .nav-cta a[href="#signup"], .site-header .nav-cta .nav-social, .site-header .nav-cta .social-icons { display: none !important; } /* Login MUST stay visible top-right — never hamburger-only */ .site-header .nav-cta #header-login, .site-header .nav-cta a#header-login, .site-header .nav-cta .btn--outline#header-login { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; align-items: center; justify-content: center; min-height: 44px !important; height: 44px !important; min-width: 44px; padding: 0 10px !important; font-size: 0.78rem !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap; width: auto !important; max-width: none; color: var(--rh-navy, #243090) !important; } .site-header .nav-cta #header-signup, .site-header .nav-cta a#header-signup, .site-header .nav-cta .btn--primary#header-signup { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px !important; height: 44px !important; padding: 0 10px !important; font-size: 0.78rem !important; line-height: 1 !important; white-space: nowrap; width: auto !important; background-color: var(--rh-cta, #F05424) !important; color: #fff !important; } /* Schedule: hide ≤430 so logo never clips; show 431–760 */ .site-header .nav-cta a[href="/booking"], .site-header .nav-cta a.btn[href*="booking"] { display: none !important; } @media (min-width: 431px) and (max-width: 760px) { .site-header .nav-cta a[href="/booking"], .site-header .nav-cta a.btn[href*="booking"] { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px !important; height: 44px !important; padding: 0 8px !important; font-size: 0.72rem !important; white-space: nowrap; } } @media (max-width: 400px) { .site-header .brand .logo-mark { width: 30px !important; height: 30px !important; } .site-header .brand { font-size: 0.98rem !important; } .site-header .nav-cta #header-login, .site-header .nav-cta #header-signup, .site-header .nav-cta a#header-login, .site-header .nav-cta a#header-signup { padding: 0 8px !important; font-size: 0.74rem !important; } } /* Ribbon phone: hide tag/sep; keep mark + cross-link; still RED */ .site-ribbon__tag, .site-ribbon__sep { display: none !important; } .site-ribbon__in { display: flex !important; flex-direction: column !important; gap: 2px !important; padding: 8px 12px !important; } .site-ribbon__x { margin-left: 0 !important; font-size: 0.68rem !important; white-space: normal !important; text-wrap: pretty; orphans: 3; widows: 3; } .site-ribbon__mark { font-size: 0.72rem !important; text-wrap: pretty; orphans: 3; widows: 3; } /* Shared header Login lock (staff/CKA .cr-sh) */ .cr-sh__inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; } .cr-sh__login, .cr-sh__out .cr-sh__login { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; min-height: 40px !important; white-space: nowrap !important; } .cr-sh__brand { overflow: visible !important; min-width: 0; } .cr-sh__site { overflow: visible !important; text-overflow: clip; } } @media (max-width: 560px) { /* Override any LIVE rule that hides ALL outline buttons — Login stays */ .site-header .nav-cta .btn--outline#header-login, .site-header .nav-cta #header-login, .site-header .nav-cta a#header-login { display: inline-flex !important; visibility: visible !important; } } /* Hide duplicate #signup when #header-signup present */ .site-header .nav-cta:has(#header-signup) a.btn[href="#signup"], .site-header .nav-cta:has(a#header-signup) a[href="#signup"] { display: none !important; } @media (min-width: 761px) { .site-header .brand .brand-sub { font-size: 0.68rem; } .site-header .nav, .site-header .brand { overflow: visible; } } /* -------------------------------------------------------------------------- HARD LOCK 6 — Do not paint SIRiiM rust / OJ chrome (selector guard) If those hosts somehow load this file, skip only when body carries their own lane class. CureRays hosts never set these. -------------------------------------------------------------------------- */ body.siriim .site-ribbon, body.orangejournal .site-ribbon, body[data-chrome="siriim"] .site-ribbon, body[data-chrome="oj"] .site-ribbon { /* leave host chrome alone if mis-loaded */ background: revert !important; background-color: revert !important; } /* END HARD LOCK — red-header-orphan-lock-2026-09-16 · load LAST · never strip */