/* ═══════════════════════════════════════════════════════════ EVEREST SIGNS — theme-additions.css Loaded after main.css. Four jobs: 1. Keep the navigation inside the viewport at every width 2. Style the project gallery and lightbox 3. Route the hard-coded colours through Customizer tokens 4. Forms, spec tables and the smaller fixes Tokens referenced here are written into :root by inc/customizer-css.php, with the fallbacks below matching the original design, so the stylesheet still stands up on its own if the Customizer has never been touched. ═══════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── 1. NAVIGATION — containment & responsive behaviour ─────────────────────────────────────────────────────────── */ /* The header must never clip its own dropdowns. */ .es-header { overflow: visible; } .es-header .es-container { overflow: visible; } .es-nav { overflow: visible; } /* The original .es-mega was min-width:900px centred on its trigger, which pushed past the viewport edge on anything under ~1400px and was then cut off by the overflow-x:hidden on . Clamp it to the viewport instead. */ .es-mega { min-width: 0; width: max-content; max-width: min(var(--es-container-max, 1320px), calc(100vw - 2rem)); left: 50%; transform: translateX(-50%) translateY(10px); max-height: calc(100vh - var(--es-header-h, 140px)); overflow-y: auto; overscroll-behavior: contain; background: var(--es-mega-bg, #fff); color: var(--es-mega-text, #1a1a2e); } .es-nav__item:hover > .es-mega, .es-nav__item:focus-within > .es-mega { transform: translateX(-50%) translateY(0); } /* Mega panels are grids of four fixed-ish columns; let them reflow. */ .es-mega__inner { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.5rem; } @media (min-width: 1300px) { .es-mega__inner { grid-template-columns: 220px 1fr 1fr 220px; } } .es-mega__action-bar { flex-wrap: wrap; } /* Plain dropdowns: flip to the right edge when the trigger sits near the end of the bar, so the last two menus don't open off-screen. */ .es-dropdown { max-width: calc(100vw - 2rem); } .es-nav__item:nth-last-child(-n+2) .es-dropdown { left: auto; right: 0; } /* The desktop bar carries seven menu items, a logo, and two call-to-action buttons. That needs real width — the previous 1200px cutoff, and the "tight" 1200–1399px squeeze that tried to shrink padding to fit, both left too little room and are what caused Resources/Request Quote to sit on top of each other (see the note below on why). The mobile/burger menu now covers everything under 1500px, where there's reliably enough space. 1500–1679px gets slightly tighter padding as a comfort margin; 1680px+ is full spacing. */ @media (max-width: 1499px) { .es-nav__menu { display: none; } .es-nav__burger { display: flex; } .es-nav__actions { display: none; } } @media (min-width: 1500px) { .es-nav__menu { display: flex; } .es-nav__burger { display: none; } .es-nav__actions { display: flex; } } @media (min-width: 1500px) and (max-width: 1679px) { .es-nav__link { padding-left: 0.65rem; padding-right: 0.65rem; font-size: 0.85rem; } .es-nav__actions .es-btn { padding: 0.55rem 0.85rem; font-size: 0.8rem; } } /* What actually caused the overlap: .es-nav__menu is a flex ITEM inside .es-nav, and its own children (.es-nav__item) don't shrink or wrap. Giving the menu itself `min-width: 0` let the menu's outer box shrink to fit the row — but its non-shrinking children then overflowed THAT shrunk box, and because .es-header/.es-nav/.es-container all have to stay overflow:visible for the mega-menu dropdowns to show below the bar, that overflow was fully visible rather than clipped — spilling the last couple of menu items (Resources, About) directly on top of the Request Quote button next to them. The breakpoints above are now wide enough that this never has to happen, so the menu keeps ordinary flex sizing instead of the shrink hack. Items still never wrap onto a second line within the bar. */ .es-nav__item { flex: 0 0 auto; } /* Header colours, now editable. */ .es-topbar { background: var(--es-topbar-bg, #080f1e); color: var(--es-topbar-text, #c7d0dd); } .es-topbar a { color: var(--es-topbar-text, #c7d0dd); } .es-header { background: var(--es-header-bg, #fff); } .es-nav__link { color: var(--es-header-text, #0d1f3c); } .es-nav__link:hover, .es-nav__item:hover > .es-nav__link { color: var(--es-header-hover, #1565c0); } /* Top bar wraps rather than pushing the phone number off-screen. */ .es-topbar__inner { flex-wrap: wrap; row-gap: 0.35rem; } @media (max-width: 767px) { .es-topbar__left { display: none; } .es-topbar__right { width: 100%; justify-content: space-between; } .es-topbar__dealer { display: none; } } /* Logo — sized from the Customizer, and never taller than the bar. */ .es-nav__logo img, .es-logo-img { display: block; width: auto; max-width: var(--es-logo-w, 180px); max-height: 48px; /* the nav row is 70px tall; this leaves clear margin above and below so the logo is never pressed against the row's edges */ height: auto; object-fit: contain; } @media (max-width: 991px) { .es-nav__logo img, .es-logo-img { max-width: var(--es-logo-w-mob, 130px); max-height: 38px; } } .es-nav__logo { flex: 0 0 auto; min-width: 0; } .es-nav__logo a { display: flex; align-items: center; } /* The mobile/desktop logo variants (only both present when a distinct mobile logo was actually uploaded in the Customizer — see header.php) — this show/hide never existed before, which combined with header.php previously echoing both unconditionally is why the logo rendered twice. */ .es-logo-img--mobile { display: none; } .es-logo-img--desktop { display: block; } @media (max-width: 767px) { .es-logo-img--mobile { display: block; } .es-logo-img--desktop { display: none; } } /* Mobile menu must scroll and sit above everything. */ .es-mobile-menu { overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 100dvh; z-index: 9998; } .es-mobile-overlay { z-index: 9997; } /* Footer colours, now editable. */ .es-footer { background: var(--es-footer-bg, #0d1f3c); color: var(--es-footer-text, #aab6c8); } .es-footer h3, .es-footer h4, .es-footer strong { color: var(--es-footer-heading, #fff); } /* Buttons routed through tokens. */ .es-btn--quote { background: var(--es-btn-primary-bg, #f59e0b); color: var(--es-btn-primary-text, #0d1f3c); } .es-btn--service, .es-btn--secondary { background: var(--es-btn-secondary-bg, #1565c0); color: var(--es-btn-secondary-text, #fff); } a { color: inherit; } .es-content a { color: var(--es-link, #1565c0); } .es-content a:hover { color: var(--es-link-hover, #0d47a1); } /* Typography tokens. */ body { font-size: var(--es-base-size, 16px); line-height: var(--es-line, 1.65); } h1, h2, h3, h4, h5, h6 { color: var(--es-heading, #0d1f3c); } .es-section { padding-block: var(--es-section-py, 5rem); } /* ─────────────────────────────────────────────────────────── 2. PROJECT GALLERY ─────────────────────────────────────────────────────────── */ .es-project-gallery { margin: 0 0 2.5rem; } .es-project-gallery__main { position: relative; margin: 0 0 0.75rem; border-radius: var(--es-radius-lg, 14px); overflow: hidden; background: var(--es-light-gray, #f0f2f5); } /* The main image is a button so it is reachable by keyboard. */ .es-gallery-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; line-height: 0; } .es-gallery-main-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: opacity 0.25s ease, transform 0.4s ease; } .es-gallery-main-img.is-loading { opacity: 0.45; } .es-gallery-zoom:hover .es-gallery-main-img { transform: scale(1.02); } .es-gallery-zoom__hint { position: absolute; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .es-gallery-zoom:hover .es-gallery-zoom__hint, .es-gallery-zoom:focus-visible .es-gallery-zoom__hint { opacity: 1; transform: translateY(0); } .es-gallery-main-caption { padding: 0.6rem 0.2rem 0; font-size: 0.875rem; color: var(--es-text-light, #4a5568); } .es-project-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.6rem; } @media (max-width: 480px) { .es-project-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } } .es-gallery-thumb { padding: 0; border: 2px solid transparent; border-radius: var(--es-radius, 8px); overflow: hidden; background: none; cursor: pointer; line-height: 0; transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease; opacity: 0.68; } .es-gallery-thumb img { width: 100%; height: 72px; object-fit: cover; display: block; } .es-gallery-thumb:hover { opacity: 1; transform: translateY(-2px); } .es-gallery-thumb.is-active { opacity: 1; border-color: var(--es-signs-blue, #1565c0); } .es-gallery-thumb:focus-visible { outline: 3px solid var(--es-amber, #f59e0b); outline-offset: 2px; opacity: 1; } /* ─────────────────────────────────────────────────────────── 3. LIGHTBOX ─────────────────────────────────────────────────────────── */ body.es-no-scroll { overflow: hidden; } .es-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.22s ease; } .es-lightbox[hidden] { display: none; } .es-lightbox.is-open { opacity: 1; } .es-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.92); cursor: zoom-out; } .es-lightbox__stage { position: relative; margin: 0; max-width: min(1400px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; z-index: 1; } .es-lightbox__img { max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: var(--es-radius, 8px); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); background: #111; } .es-lightbox__caption { color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; text-align: center; max-width: 60ch; line-height: 1.5; } .es-lightbox__btn, .es-lightbox__close { position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.2rem; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .es-lightbox__btn:hover, .es-lightbox__close:hover { background: rgba(255, 255, 255, 0.26); } .es-lightbox__btn:focus-visible, .es-lightbox__close:focus-visible { outline: 3px solid var(--es-amber, #f59e0b); outline-offset: 3px; } .es-lightbox__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); } .es-lightbox__next { right: 1.25rem; top: 50%; transform: translateY(-50%); } .es-lightbox__close { top: 1.25rem; right: 1.25rem; } .es-lightbox__counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .es-lightbox__btn { width: 44px; height: 44px; } .es-lightbox__prev { left: 0.5rem; } .es-lightbox__next { right: 0.5rem; } .es-lightbox__close { top: 0.5rem; right: 0.5rem; } .es-lightbox__img { max-height: 68vh; } .es-lightbox__caption { font-size: 0.82rem; padding-inline: 1rem; } } @media (prefers-reduced-motion: reduce) { .es-lightbox, .es-gallery-main-img, .es-gallery-thumb, .es-gallery-zoom__hint { transition: none; } .es-gallery-zoom:hover .es-gallery-main-img { transform: none; } } /* ─────────────────────────────────────────────────────────── 4. PROJECT PAGE CONTENT ─────────────────────────────────────────────────────────── */ .es-lead { font-size: 1.12rem; line-height: 1.6; color: var(--es-text, #1a1a2e); } .es-spec-table table { width: 100%; border-collapse: collapse; } .es-spec-table th, .es-spec-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--es-border, #e2e6ea); text-align: left; vertical-align: top; font-size: 0.94rem; } .es-spec-table th { width: 34%; font-weight: 600; color: var(--es-text-light, #4a5568); background: var(--es-off-white, #f8f9fa); } @media (max-width: 560px) { .es-spec-table th, .es-spec-table td { display: block; width: 100%; } .es-spec-table th { border-bottom: 0; padding-bottom: 0.2rem; } } .es-service-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.35rem 1.25rem; list-style: none; padding: 0; } .es-service-list li { position: relative; padding-left: 1.4rem; font-size: 0.94rem; } .es-service-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: var(--es-led-green, #1b6b35); font-size: 0.8rem; top: 0.25rem; } .es-testimonial__project { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.75rem; font-size: 0.84rem; font-weight: 600; color: var(--es-signs-blue, #1565c0); } .es-testimonial__project:hover { text-decoration: underline; } .es-empty { padding: 1.5rem; border: 1px dashed var(--es-border, #e2e6ea); border-radius: var(--es-radius, 8px); color: var(--es-text-light, #4a5568); text-align: center; } .es-projects-grid--auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } /* ─────────────────────────────────────────────────────────── 5. FORMS ─────────────────────────────────────────────────────────── */ .es-form { max-width: 760px; } .es-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 600px) { .es-form__row { grid-template-columns: 1fr; } } .es-form__field { margin-bottom: 1rem; } .es-form__field label, .es-form__checks legend { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.88rem; color: var(--es-text, #1a1a2e); } .es-form input[type="text"], .es-form input[type="email"], .es-form input[type="tel"], .es-form select, .es-form textarea { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--es-border, #e2e6ea); border-radius: var(--es-radius, 8px); font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--es-text, #1a1a2e); } .es-form input:focus, .es-form select:focus, .es-form textarea:focus { outline: 2px solid var(--es-signs-blue, #1565c0); outline-offset: 1px; border-color: transparent; } .es-form__checks { border: 1px solid var(--es-border, #e2e6ea); border-radius: var(--es-radius, 8px); padding: 1rem; } .es-form__check-group { margin-bottom: 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; } .es-form__check-group strong { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--es-text-light, #4a5568); margin-bottom: 0.2rem; } .es-form__check-group label { font-weight: 400; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; margin: 0; } .es-form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* main.js's showMsg() toggles this element's display and swaps these two modifier classes — .es-form__response never existed in the JS, so nothing here rendered until these were added. */ .es-form__message { display: none; margin: 0; padding: 0.7rem 1rem; border-radius: var(--es-radius, 8px); font-size: 0.88rem; line-height: 1.5; } .es-form__message--error { display: block; background: rgba(198, 40, 40, 0.08); color: var(--es-action-red, #c62828); border: 1px solid rgba(198, 40, 40, 0.25); } .es-form__message--success { display: block; background: rgba(27, 107, 53, 0.08); color: var(--es-led-green, #1b6b35); border: 1px solid rgba(27, 107, 53, 0.25); } /* Applied by the generic validator to any required field left empty. */ .es-input--error { border-color: var(--es-action-red, #c62828) !important; outline: 2px solid rgba(198, 40, 40, 0.18); outline-offset: 1px; } /* ─────────────────────────────────────────────────────────── 6. GENERAL RESPONSIVE SAFETY ─────────────────────────────────────────────────────────── */ /* Nothing may force a horizontal scrollbar. */ img, video, iframe, table, pre { max-width: 100%; } .es-content table { display: block; overflow-x: auto; } /* Focus is always visible, everywhere. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--es-amber, #f59e0b); outline-offset: 2px; } /* Long client names and sign type lists must not blow out a card. */ .es-project-card__title, .es-project-card__meta span { overflow-wrap: anywhere; }