/* ============================================================ CEE global chrome — flat, modern, blended header. Loaded site-wide by the CEE Web Styling plugin so every page (home + all subpages) shares the same flat look. ============================================================ */ /* ============================================================ CEE global chrome — modern header that blends into the page. At the top the navbar takes the hero's tint so it melts into the gradient; once you scroll it becomes frosted glass. The 'cee-scrolled' class is toggled on by cee-header.js. ============================================================ */ :root { --cee-nav-tint: #eef4fa; } /* ---- Header at the top of the page: tinted to match the hero ---- */ .navbar, .navbar-default, #main-navbar, .main-navigation, .navbar.navbar-default, .navbar.navbar-default.header-fixed, .hestia-top-bar, .header-top { background: var(--cee-nav-tint) !important; background-color: var(--cee-nav-tint) !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease !important; } /* ---- Once scrolled: frosted glass so links stay readable over content ---- */ html.cee-scrolled .navbar, html.cee-scrolled .navbar-default, html.cee-scrolled #main-navbar, html.cee-scrolled .navbar.navbar-default, html.cee-scrolled .navbar.navbar-default.header-fixed, html.cee-scrolled .hestia-top-bar, html.cee-scrolled .header-top { background: rgba(255,255,255,.80) !important; background-color: rgba(255,255,255,.80) !important; -webkit-backdrop-filter: saturate(150%) blur(14px) !important; backdrop-filter: saturate(150%) blur(14px) !important; box-shadow: 0 8px 30px -14px rgba(29,48,67,.30) !important; } html.cee-scrolled .navbar { padding-top: 2px !important; padding-bottom: 2px !important; } /* ---- Brand / site title ---- */ .navbar .navbar-brand, .navbar-brand, .navbar .navbar-brand:hover, .navbar .navbar-brand:focus { color: #1d3043 !important; font-weight: 800 !important; text-shadow: none !important; } /* ---- Menu links with an animated underline ---- */ .navbar .navbar-nav > li > a, .navbar .nav > li > a { color: #1d3043 !important; font-weight: 700 !important; letter-spacing: .02em !important; text-shadow: none !important; background: transparent !important; position: relative !important; } .navbar .navbar-nav > li > a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #6ca5d5, #3d6f9e); transition: width .25s ease; } .navbar .navbar-nav > li > a:hover::after, .navbar .navbar-nav > li.active > a::after, .navbar .navbar-nav > li.current-menu-item > a::after { width: calc(100% - 26px); } .navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > li.active > a, .navbar .navbar-nav > li.current-menu-item > a, .navbar .navbar-nav > li:hover > a { color: #3d6f9e !important; } /* ---- Carets, search, cart icons ---- */ .navbar .caret, .navbar .nav-search, .navbar .top-bar-nav i, .navbar .menu-item i, .navbar a > i { color: #3d6f9e !important; } /* ---- Dropdowns, modernized ---- */ .navbar .dropdown-menu { background: #fff !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 20px 48px -18px rgba(29,48,67,.38) !important; padding: 8px !important; margin-top: 8px !important; } .navbar .dropdown-menu > li > a { color: #1d3043 !important; border-radius: 9px !important; font-weight: 700 !important; padding: 9px 14px !important; } .navbar .dropdown-menu > li > a:hover, .navbar .dropdown-menu > li > a:focus { background: #eef4fa !important; color: #3d6f9e !important; } /* ---- Remove the colored/gray page-title banner → flat title that blends into the page background (applies to all subpages). ---- */ .header-half-background, .page-header.header-small, .page-header, .title-in-header, .page-header.header-small.header-half-background { background-image: none !important; background-color: transparent !important; min-height: 0 !important; height: auto !important; padding-top: 30px !important; padding-bottom: 0 !important; box-shadow: none !important; } /* Any dark/gray overlay Hestia layers on the header */ .header-half-background .header-filter, .page-header .header-filter, .header-filter, .header-filter::before, .header-filter::after, .page-header::before, .page-header::after { background: transparent !important; background-image: none !important; display: none !important; } .header-half-background::before, .page-header::before { display: none !important; } .hestia-title, .page-header .hestia-title, .header-half-background .hestia-title, .page-header h1 { color: #1d3043 !important; text-shadow: none !important; } /* ---- Tidy the seam so flat titles sit comfortably below the nav ---- */ .page-header + .main, .header-half-background + .main, .header-half-background ~ .main { margin-top: 0 !important; } /* ============================================================ Admin quick-link (bottom-left), admins only. Output in the footer by the plugin; hidden from everyone else. ============================================================ */ .cee-admin-fab { position: fixed; left: 18px; bottom: 18px; z-index: 99990; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 13px; border-radius: 999px; background: linear-gradient(135deg, #3d6f9e, #1d3043) !important; color: #fff !important; font-family: 'Nunito Sans', system-ui, sans-serif !important; font-size: 13.5px !important; font-weight: 800 !important; text-decoration: none !important; box-shadow: 0 12px 30px -10px rgba(29,48,67,.65) !important; border: 1px solid rgba(255,255,255,.14) !important; transition: transform .15s ease, box-shadow .15s ease; } .cee-admin-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(29,48,67,.7) !important; color:#fff !important; } .cee-admin-fab-gear { font-size: 16px; line-height: 1; } .cee-admin-fab-label { letter-spacing: .02em; } .admin-bar .cee-admin-fab { bottom: 18px; } @media (max-width: 600px) { .cee-admin-fab-label { display: none; } .cee-admin-fab { padding: 11px 13px; } } /* ============================================================ CEE custom header (.cee-hdr) — two rows: small brand top-left with the account button on the right, links spread out below. Blends into the page tint; frosts on scroll. No search. ============================================================ */ .cee-hdr { position: sticky; top: 0; z-index: 9999; background: var(--cee-nav-tint, #eef4fa); transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease; font-family: 'Nunito Sans', system-ui, sans-serif; } .admin-bar .cee-hdr { top: 32px; } @media (max-width: 782px) { .admin-bar .cee-hdr { top: 46px; } } html.cee-scrolled .cee-hdr { background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); box-shadow: 0 10px 34px -16px rgba(29,48,67,.32); } .cee-hdr-in { max-width: 1240px; margin: 0 auto; padding: 10px 28px 8px; display: flex; flex-direction: column; align-items: center; gap: 0; } html.cee-scrolled .cee-hdr-in { padding-top: 8px; padding-bottom: 8px; } /* ---- Top row: logo centered with the icon actions right beside it ---- */ .cee-hdr-top { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; gap: 20px; } .cee-hdr-right { display: flex; align-items: center; gap: 10px; } .cee-hdr-nav-actions { display: flex; align-items: center; gap: 8px; } .cee-hdr-brand { font-size: 15px; font-weight: 800; letter-spacing: .01em; color: #1d3043 !important; text-decoration: none !important; white-space: nowrap; display: inline-flex; align-items: center; } .cee-hdr-brand-logo img, .cee-hdr-brand .custom-logo { width: auto; max-width: 340px; max-height: 184px; display: block; mix-blend-mode: multiply; /* drops the logo's white into the tint */ transition: max-height .25s ease, max-width .25s ease; } html.cee-scrolled .cee-hdr-brand-logo img, html.cee-scrolled .cee-hdr-brand .custom-logo { max-height: 64px; max-width: 170px; } .cee-hdr-nav-foot { display: none; } /* ---- Bottom row: just the centered links ---- */ .cee-hdr-nav { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; margin-top: -8px; } .cee-hdr-iconlink { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #6d8499; text-decoration: none !important; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } .cee-hdr-iconlink svg { width: 19px; height: 19px; } .cee-hdr-iconlabel { display: none; } .cee-hdr-account { background: linear-gradient(135deg, #6ca5d5, #3d6f9e); color: #fff; box-shadow: 0 10px 22px -12px rgba(61,111,158,.75); } .cee-hdr-account:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(61,111,158,.8); color: #fff; } .cee-hdr-logout-ic:hover, .cee-hdr-cart:hover { color: #3d6f9e; background: #eef4fa; } /* one caret only: kill any caret element the theme injects into our menu */ .cee-hdr-menu .caret, .cee-hdr-menu b.caret, .cee-hdr-menu .sub-arrow, .cee-hdr-menu .dropdown-toggle::after { display: none !important; } .cee-hdr-menu { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 34px; list-style: none; margin: 0; padding: 0; gap: 6px; } .cee-hdr-menu li { position: relative; } .cee-hdr-menu > li > a { display: block; padding: 9px 6px; color: #1d3043; font-size: 14px; font-weight: 700; text-decoration: none; position: relative; transition: color .2s ease; } .cee-hdr-menu > li > a::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #6ca5d5, #3d6f9e); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .cee-hdr-menu > li:hover > a, .cee-hdr-menu > li.current-menu-item > a { color: #3d6f9e; } .cee-hdr-menu > li:hover > a::after, .cee-hdr-menu > li.current-menu-item > a::after { transform: scaleX(1); } .cee-hdr-menu li.menu-item-has-children > a { padding-right: 20px; } .cee-hdr-menu li.menu-item-has-children > a::before { content: ""; position: absolute; right: 6px; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .6; } /* dropdown panels */ .cee-hdr-menu .sub-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; background: #fff; border-radius: 14px; box-shadow: 0 24px 54px -22px rgba(29,48,67,.4); padding: 8px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 10; } .cee-hdr-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: none; } .cee-hdr-menu .sub-menu a { display: block; padding: 10px 14px; color: #1d3043; font-size: 14px; font-weight: 700; text-decoration: none; border-radius: 9px; white-space: nowrap; } .cee-hdr-menu .sub-menu a:hover { background: #eef4fa; color: #3d6f9e; } /* burger (mobile only) */ .cee-hdr-burger { display: none; width: 42px; height: 42px; background: transparent; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 0; } .cee-hdr-burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: #1d3043; margin: 0 auto; transition: transform .25s ease, opacity .2s ease; } .cee-hdr.cee-open .cee-hdr-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .cee-hdr.cee-open .cee-hdr-burger span:nth-child(2) { opacity: 0; } .cee-hdr.cee-open .cee-hdr-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- Mobile ---- */ @media (max-width: 900px) { .cee-hdr-in { align-items: stretch; } .cee-hdr-top { justify-content: space-between; } .cee-hdr-brand-logo img, .cee-hdr-brand .custom-logo { max-height: 44px; max-width: 150px; } .cee-hdr-top { justify-content: space-between; } .cee-hdr-burger { display: flex; } .cee-hdr-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: #fff; box-shadow: -20px 0 60px -20px rgba(29,48,67,.45); padding: 86px 22px 30px; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); overflow-y: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; margin-top: 0; } .cee-hdr.cee-open .cee-hdr-nav { transform: none; } .cee-hdr-menu { flex-direction: column; align-items: stretch; gap: 2px; width: auto; } .cee-hdr-menu > li > a { padding: 12px; font-size: 16px; } .cee-hdr-menu > li > a::after { display: none; } .cee-hdr-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 6px 14px; min-width: 0; max-height: 0; overflow: hidden; transition: max-height .25s ease; } .cee-hdr-menu li.cee-sub-open > .sub-menu { max-height: 600px; } } @media (prefers-reduced-motion: reduce) { .cee-hdr, .cee-hdr *, .cee-hdr-nav { transition: none !important; } } /* ============================================================ Flat brand background on every WooCommerce page (#eff4fa) ============================================================ */ body.woocommerce, body.woocommerce-page, body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.tax-product_cat, body.single-product, body.post-type-archive-product { background: #eff4fa !important; } /* Hestia wraps content in .main.main-raised (a #f0f0f0 card). Dissolve it on every WooCommerce page so the #eff4fa body shows through, edge to edge. */ body.woocommerce .main, body.woocommerce .main-raised, body.woocommerce-page .main, body.woocommerce-page .main-raised { background: transparent !important; box-shadow: none !important; } /* ------------------------------------------------------------ Loading indicators — brand #eff4fa accent. Covers WooCommerce block overlays + Bookings/availability loaders. ------------------------------------------------------------ */ .woocommerce .blockUI.blockOverlay, .blockUI.blockOverlay, .woocommerce-checkout .blockUI.blockOverlay, .wc-bookings-booking-form .blockUI.blockOverlay { background: #eff4fa !important; opacity: .78 !important; } .woocommerce .loader, .wc-bookings-booking-form-button.loading, .cee-loading, .is-loading, .booking-loading { background-color: #eff4fa !important; } /* spinner ring: #eff4fa track with a brand-blue arc so it stays visible */ .woocommerce .loader::before, .blockOverlay + .loader::before { border-color: #eff4fa !important; border-top-color: #6ca5d5 !important; }