/** * Parity with Energy Navigator main app: src/components/Header.tsx * — Primary row: orange top bar (#F5A623), white/slate-800 header, navy bottom border * — Logo: circle mark + light wordmark / dark wordmark (system dark OR html.dark) * — Optional second row: muted strip + orange CTAs (Energy Calcs / Compliance / D1) * * Include navigator-header-theme.js so html.dark follows the same localStorage as the * React app (vite-ui-theme). Pair with Montserrat — see examples for Google Fonts link. */ :root { --en-navy: #0d315c; --en-navy-border: rgba(13, 49, 92, 0.35); --en-navy-border-soft: rgba(13, 49, 92, 0.2); --en-accent-bar: #f5a623; --en-header-bg: #ffffff; --en-header-bg-dark: #1e293b; --en-muted-strip: rgba(241, 245, 249, 0.85); --en-muted-strip-dark: rgba(15, 23, 42, 0.92); /* hsl(32 100% 50%) — matches --primary in src/index.css */ --en-primary: hsl(32, 100%, 50%); --en-primary-fg: hsl(210, 40%, 98%); --en-ring: hsl(32, 100%, 50%); --en-radius: 0.375rem; } .en-header-root { position: sticky; top: 0; z-index: 40; } /* Main header row — matches
*/ .en-header-main { background: var(--en-header-bg); border-bottom: 1px solid var(--en-navy-border); border-top: 5px solid var(--en-accent-bar); } @media (prefers-color-scheme: dark) { .en-header-main { background: var(--en-header-bg-dark); border-bottom-color: rgba(148, 163, 184, 0.35); } } /* Same as Tailwind dark: — when navigator-header-theme.js sets class on */ html.dark .en-header-main { background: var(--en-header-bg-dark); border-bottom-color: rgba(148, 163, 184, 0.35); } /* container mx-auto px-4 py-3 flex justify-between items-center */ .en-header-inner { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } /* Lockup: flex items-center gap-3 shrink-0 (Link in Header) */ .en-lockup { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; text-decoration: none; color: inherit; } .en-lockup:hover { opacity: 0.94; } /* Circle mark — h-[52px] sm:h-[60px] md:h-[70px] */ .en-mark { width: 52px; height: 52px; flex-shrink: 0; object-fit: contain; } @media (min-width: 640px) { .en-mark { width: 60px; height: 60px; } } @media (min-width: 768px) { .en-mark { width: 70px; height: 70px; } } /* Wordmarks — same heights as Header */ .en-wordmark { height: 36px; width: auto; max-width: min(52vw, 420px); object-fit: contain; object-position: left; } @media (min-width: 640px) { .en-wordmark { height: 44px; } } @media (min-width: 768px) { .en-wordmark { height: 52px; } } @media (min-width: 1024px) { .en-wordmark { height: 58px; } } .en-wordmark--light { display: block; } .en-wordmark--dark { display: none; } @media (prefers-color-scheme: dark) { .en-wordmark--light { display: none; } .en-wordmark--dark { display: block; } } html.dark .en-wordmark--light { display: none; } html.dark .en-wordmark--dark { display: block; } /* Right side of primary row (nav slot) — flex items-center gap-4 */ .en-header-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; } /* Main app parity: Dashboard, Projects, Resources, FAQ, Account (and admin links when applicable) */ .en-platform-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem 0.35rem; max-width: min(100%, 72vw); } @media (min-width: 768px) { .en-platform-nav { max-width: none; gap: 0.15rem 0.5rem; } } .en-platform-nav .en-toolbar-link { white-space: nowrap; } .en-toolbar-link { font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.75rem; border-radius: var(--en-radius); color: #64748b; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .en-toolbar-link:hover { background: hsl(210, 40%, 94.1%); color: hsl(213, 75%, 21%); } @media (prefers-color-scheme: dark) { .en-toolbar-link { color: #94a3b8; } .en-toolbar-link:hover { background: rgba(51, 65, 85, 0.5); color: #f8fafc; } } html.dark .en-toolbar-link { color: #94a3b8; } html.dark .en-toolbar-link:hover { background: rgba(51, 65, 85, 0.5); color: #f8fafc; } /* Matches Header.tsx active nav: bg-primary/10 text-primary */ .en-toolbar-link[aria-current='page'], .en-toolbar-link.is-active { background: rgba(245, 166, 35, 0.12); color: hsl(32, 100%, 45%); } html.dark .en-toolbar-link[aria-current='page'], html.dark .en-toolbar-link.is-active { background: rgba(245, 166, 35, 0.15); color: hsl(32, 100%, 52%); } /* Vertical rule between nav groups — Header.tsx h-4 w-px bg-slate-300 dark:bg-slate-600 */ .en-toolbar-sep { display: none; width: 1px; height: 1rem; flex-shrink: 0; background: rgb(203, 213, 225); align-self: center; } @media (min-width: 768px) { .en-toolbar-sep { display: block; } } html.dark .en-toolbar-sep { background: rgb(71, 85, 105); } /* Quick actions strip — matches Header.tsx: border-[rgba(13,49,92,0.2)] bg-muted/50 dark:bg-slate-900/90 dark:border-slate-700 */ .en-quick-row { border-bottom: 1px solid rgba(13, 49, 92, 0.2); background: hsl(210 40% 96.1% / 0.5); } @media (prefers-color-scheme: dark) { .en-quick-row { background: rgba(15, 23, 42, 0.9); border-bottom-color: rgb(51, 65, 85); } } html.dark .en-quick-row { background: rgba(15, 23, 42, 0.9); border-bottom-color: rgb(51, 65, 85); } .en-quick-inner { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0.5rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } @media (min-width: 768px) { .en-quick-inner { gap: 0.75rem; } } /* ctaPrimaryClasses — Start Compliance / Start Energy Model */ .en-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--en-radius); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer; text-decoration: none; background: var(--en-primary); color: var(--en-primary-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: filter 0.15s ease, box-shadow 0.15s ease; } .en-btn-primary:hover { filter: brightness(0.95); } @media (prefers-color-scheme: dark) { .en-btn-primary:hover { filter: brightness(1.08); } } html.dark .en-btn-primary:hover { filter: brightness(1.08); } .en-btn-primary:focus-visible { outline: 2px solid var(--en-ring); outline-offset: 2px; } /* * Legacy class name — same solid orange as .en-btn-primary (Header quick row uses * one style for Start Energy Model, Start Compliance, and Energy Model Review). */ .en-btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--en-radius); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; text-decoration: none; border: none; background: var(--en-primary); color: var(--en-primary-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: filter 0.15s ease, box-shadow 0.15s ease; } .en-btn-outline:hover { filter: brightness(0.95); } @media (prefers-color-scheme: dark) { .en-btn-outline:hover { filter: brightness(1.08); } } html.dark .en-btn-outline:hover { filter: brightness(1.08); } .en-btn-outline:focus-visible { outline: 2px solid var(--en-ring); outline-offset: 2px; } /* * App footer — parity with src/components/Footer.tsx (D1 / sidecars: include sub-logo on the right). * “Need Help” sits left of the sub-logo with ~1 cm gap so the phone block is not covered by the house mark. */ .en-app-footer { margin-top: auto; background-color: var(--en-navy); border-top: 3px solid #f5a623; } .en-app-footer-inner { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 1.5rem 1rem; } .en-app-footer-row { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1rem; } @media (min-width: 640px) { .en-app-footer-row { flex-direction: row; } } .en-app-footer-copy { order: 2; width: 100%; text-align: center; font-size: 0.875rem; line-height: 1.25rem; color: rgba(255, 255, 255, 0.7); } @media (min-width: 640px) { .en-app-footer-copy { order: 0; position: absolute; left: 50%; width: auto; transform: translateX(-50%); } } /* Right cluster: Need Help, then gap, then sub-logo */ .en-app-footer-right { order: 1; display: flex; align-items: center; flex-shrink: 0; gap: 1cm; } @media (min-width: 640px) { .en-app-footer-right { order: 0; } } .en-app-footer-help { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: var(--en-radius); text-decoration: none; color: #fff; border: none; background: transparent; cursor: pointer; font: inherit; transition: background-color 0.15s ease; } .en-app-footer-help:hover { background: rgba(255, 255, 255, 0.1); } .en-app-footer-help-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: rgba(255, 255, 255, 0.7); } .en-app-footer-help-lines { text-align: right; } .en-app-footer-help-kicker { font-size: 10.5px; line-height: 15px; color: rgba(255, 255, 255, 0.7); margin: 0; } .en-app-footer-help-phone { font-size: 0.875rem; font-weight: 600; color: #fff; margin: 0; } .en-app-footer-sublogo { height: 48px; width: auto; max-width: min(200px, 28vw); object-fit: contain; flex-shrink: 0; opacity: 0.95; }