fix(landing): align early intervention campaign header

2026-10-25 12:38:03 -07:00
1 parent ce17728e0b
commit 356282f61c
@@ -19,3 +19,69 @@ const tel = phone.replace(/[^0-9+]/g, '');
    </div>
  </div>
 </header>
+
+<style>
+  /* Keep the shared campaign header independent of each landing page's body CSS. */
+  .site-header {
+    background: white;
+    color: #243f7e;
+    font-family: Rubik, ui-sans-serif, system-ui, sans-serif;
+    font-size: 1rem;
+    font-weight: 400;
+    font-synthesis: none;
+    line-height: 1.65;
+  }
+  .container { width: min(calc(100% - 80px), 1200px); margin-inline: auto; }
+  .site-header__ribbon { background: #254080; color: white; font-size: .71rem; letter-spacing: .025em; padding: 8px 0; }
+  .site-header__ribbon .container { display: flex; justify-content: space-between; gap: 16px; }
+  .site-header__inner { min-height: 108px; display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-block: 14px; }
+  .brand { display: block; flex: 0 0 auto; }
+  .brand img { display: block; width: 174px; height: auto; max-width: 100%; }
+  .header-actions { display: flex; gap: 28px; align-items: center; }
+  a, a:hover, a:focus, a:active { color: #254080; text-decoration: none; text-underline-offset: .22em; }
+  a:focus-visible { outline: 3px solid #115bbd; outline-offset: 5px; }
+  .header-phone { display: inline-flex; gap: 10px; align-items: center; font-size: .88rem; }
+  .header-phone :global(svg) { width: 18px; flex-shrink: 0; }
+  .button {
+    display: inline-flex;
+    min-height: 46px;
+    max-width: 100%;
+    gap: 13px;
+    align-items: center;
+    justify-content: center;
+    padding: 14px 21px;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    background: #ffc15d;
+    color: #192f63;
+    text-align: center;
+    font-family: inherit;
+    font-weight: 700;
+    font-size: .81rem;
+    line-height: 1.5;
+    cursor: pointer;
+    transition: background .18s ease, box-shadow .18s ease;
+  }
+  .button:focus, .button:active { color: #192f63; }
+  .button:hover { color: #192f63; background: #ffce80; box-shadow: 0 4px 14px #243f7e12; }
+  @media (max-width: 1080px) {
+    .container { width: calc(100% - 56px); }
+  }
+  @media (max-width: 800px) {
+    .container { width: calc(100% - 40px); }
+    .site-header__ribbon .container { justify-content: center; }
+    .site-header__ribbon span:last-child { display: none; }
+    .site-header__inner { min-height: 90px; padding-block: 12px; }
+    .brand img { width: 140px; }
+    .header-actions { gap: 0; }
+    .header-actions .button { display: none; }
+    .header-phone { font-size: .74rem; gap: 7px; min-height: 44px; }
+  }
+  @media (max-width: 359px) {
+    .container { width: calc(100% - 32px); }
+    .brand img { width: 119px; }
+    .header-phone { font-size: .67rem; gap: 5px; }
+    .header-phone :global(svg) { width: 15px; }
+    .button { padding-inline: 15px; }
+  }
+</style>