/** * Lovia "Refined Editorial" — Header + Footer (Agent C) * Scope: .lovia-lang-hint, #header (Blocksy builder), #offcanvas (mobile panel), * footer.elementor-location-footer. Uses --lov-* tokens (loaded before this sheet). */ /* ============================================================ 0. EN language hint (injected at top of ) ============================================================ */ .lovia-lang-hint { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 5px 44px 5px 16px; background: var(--lov-cream); border-bottom: 1px solid var(--lov-hairline); font-family: var(--lov-sans); font-size: 11.5px; line-height: 1.5; letter-spacing: 0.01em; color: #5f5749; text-align: center; } .lovia-lang-hint button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--lov-muted); font-size: 15px; line-height: 1; cursor: pointer; transition: color .2s ease, background-color .2s ease; } .lovia-lang-hint button:hover { color: var(--lov-gold-deep); background: var(--lov-gold-soft); } /* ============================================================ 1. Header shell ============================================================ */ #header.ct-header { --lov-row-transition: background-color .25s ease, box-shadow .25s ease; } /* ---------- 1a. Utility bar (top row) ---------- */ #header [data-row="top"] { background: var(--lov-cream); border-bottom: 1px solid var(--lov-hairline); transition: var(--lov-row-transition); } /* left: Despre Noi / Brand Lovia */ #header-menu-2 .menu { gap: 4px; } #header-menu-2 .ct-menu-link { font-family: var(--lov-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lov-muted); padding: 4px 8px; border-radius: 4px; transition: color .2s ease; } #header-menu-2 .ct-menu-link:hover { color: var(--lov-gold-deep); } /* right: phone + email (Elementor icon list) */ #header [data-row="top"] .elementor-icon-list-items { gap: 18px; } #header [data-row="top"] .elementor-icon-list-item a { transition: color .2s ease; } #header [data-row="top"] .elementor-icon-list-icon { color: var(--lov-gold) !important; font-size: 12px; } #header [data-row="top"] .elementor-icon-list-text { font-family: var(--lov-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--lov-ink) !important; transition: color .2s ease; } #header [data-row="top"] .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--lov-gold-deep) !important; } /* right: social icons — small muted circles */ #header [data-row="top"] .elementor-social-icons-wrapper { gap: 6px; } #header [data-row="top"] .elementor-social-icon { width: 24px !important; height: 24px !important; font-size: 11px !important; background-color: transparent !important; border: 1px solid var(--lov-hairline); color: var(--lov-muted) !important; transition: all .22s ease; } #header [data-row="top"] .elementor-social-icon svg { width: 11px; height: 11px; fill: currentColor !important; } #header [data-row="top"] .elementor-social-icon:hover { background-color: var(--lov-gold) !important; border-color: var(--lov-gold); color: #fff !important; transform: translateY(-1px); } /* ---------- 1b. Main row (logo / search / account / cart) ---------- */ #header [data-row="middle"] { background: var(--lov-surface); transition: var(--lov-row-transition); } #header .site-logo-container img { transition: opacity .2s ease; } #header .site-logo-container:hover img { opacity: .85; } /* search */ #header .ct-search-box .ct-search-form-inner { border: 1px solid var(--lov-hairline); border-radius: var(--lov-radius-ctl); background: var(--lov-ivory); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } #header .ct-search-box .ct-search-form-inner:focus-within, #header .ct-search-box .ct-search-form-inner:focus { border-color: var(--lov-gold); background: var(--lov-surface); box-shadow: 0 0 0 3px rgba(168, 133, 59, 0.12); } #header .ct-search-box input.ct-search-input, #header .ct-search-box input[type="search"] { font-family: var(--lov-sans); font-size: 13px; color: var(--lov-ink); } #header .ct-search-box input::placeholder { color: var(--lov-muted); } #header .ct-search-box button { color: var(--lov-muted); transition: color .2s ease; } #header .ct-search-box button:hover { color: var(--lov-gold-deep); } /* account + cart */ #header .ct-header-account .ct-account-item, #header .ct-header-cart .ct-cart-item { display: inline-flex; align-items: center; gap: 8px; color: var(--lov-ink); transition: color .2s ease; } #header .ct-header-account .ct-label, #header .ct-header-cart .ct-label { font-family: var(--lov-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lov-muted); transition: color .2s ease; } #header .ct-header-cart .ct-amount { font-family: var(--lov-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--lov-ink); } #header .ct-header-account .ct-icon, #header .ct-header-cart .ct-icon-container svg { transition: color .2s ease; } #header .ct-header-account .ct-account-item:hover, #header .ct-header-cart .ct-cart-item:hover { color: var(--lov-gold-deep); } #header .ct-header-account .ct-account-item:hover .ct-label, #header .ct-header-cart .ct-cart-item:hover .ct-label, #header .ct-header-cart .ct-cart-item:hover .ct-amount { color: var(--lov-gold-deep); } /* cart count badge — gold */ #header .ct-dynamic-count-cart { background: var(--lov-gold); color: #fff; font-family: var(--lov-sans); font-weight: 600; } /* ---------- 1c. Nav row (bottom) ---------- */ #header [data-row="bottom"] { background: var(--lov-surface); border-top: 1px solid var(--lov-hairline); border-bottom: 1px solid var(--lov-hairline); } #header-menu-1 > .menu, #header-menu-1 .menu { align-items: center; } #header-menu-1 .menu > li > .ct-menu-link { position: relative; font-family: var(--lov-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--lov-ink); padding: 6px 2px; margin: 0 14px; transition: color .2s ease; } #header-menu-1 .menu > li > .ct-menu-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--lov-gold); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.22,.61,.36,1); } #header-menu-1 .menu > li:hover > .ct-menu-link, #header-menu-1 .menu > li > .ct-menu-link:hover { color: var(--lov-gold-deep); } #header-menu-1 .menu > li:hover > .ct-menu-link::after, #header-menu-1 .menu > li > .ct-menu-link:hover::after { transform: scaleX(1); } #header-menu-1 .menu > li.current-menu-item > .ct-menu-link, #header-menu-1 .menu > li.current_page_item > .ct-menu-link, #header-menu-1 .menu > li.current-menu-ancestor > .ct-menu-link { color: var(--lov-gold-deep); } #header-menu-1 .menu > li.current-menu-item > .ct-menu-link::after, #header-menu-1 .menu > li.current_page_item > .ct-menu-link::after, #header-menu-1 .menu > li.current-menu-ancestor > .ct-menu-link::after { transform: scaleX(1); } #header-menu-1 .ct-toggle-dropdown-desktop svg, #header-menu-1 .menu > li > .ct-menu-link svg { color: var(--lov-muted); transition: color .2s ease; } #header-menu-1 .menu > li:hover .ct-toggle-dropdown-desktop svg { color: var(--lov-gold-deep); } /* dropdowns */ #header-menu-1 .sub-menu { background: var(--lov-surface); border: 1px solid var(--lov-hairline); border-radius: 12px; box-shadow: var(--lov-shadow-soft); padding: 8px; } #header-menu-1 .sub-menu .ct-menu-link { font-family: var(--lov-sans); font-size: 13px; font-weight: 400; letter-spacing: 0.01em; color: var(--lov-ink); padding: 9px 14px; border-radius: 8px; transition: color .18s ease, background-color .18s ease, padding-left .18s ease; } #header-menu-1 .sub-menu .menu-item:hover > .ct-menu-link, #header-menu-1 .sub-menu .ct-menu-link:hover { color: var(--lov-gold-deep); background: var(--lov-ivory); padding-left: 18px; } #header-menu-1 .sub-menu .current-menu-item > .ct-menu-link { color: var(--lov-gold-deep); font-weight: 500; } /* ---------- 1d. Sticky state ---------- */ #header .ct-sticky-container [data-sticky] { transition: box-shadow .3s ease, background-color .3s ease; } #header .ct-sticky-container [data-sticky*="yes"] { background: var(--lov-surface); box-shadow: 0 6px 24px rgba(46, 42, 36, 0.10); border-bottom: 1px solid var(--lov-hairline); } /* ---------- 1e. Mobile header ---------- */ #header [data-device="mobile"] [data-row="middle"] { background: var(--lov-surface); border-bottom: 1px solid var(--lov-hairline); } #header .ct-header-trigger { color: var(--lov-ink); transition: color .2s ease; } #header .ct-header-trigger:hover { color: var(--lov-gold-deep); } /* ============================================================ 2. Off-canvas panel (mobile menu) ============================================================ */ #offcanvas.ct-panel { background: var(--lov-ivory) !important; } #offcanvas .ct-panel-inner { background: var(--lov-ivory); } #offcanvas .ct-panel-actions { padding: 14px 18px; } #offcanvas .ct-toggle-close { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--lov-hairline); border-radius: 50%; background: var(--lov-surface); color: var(--lov-ink); transition: all .2s ease; } #offcanvas .ct-toggle-close:hover { color: var(--lov-gold-deep); border-color: var(--lov-gold); } #offcanvas .ct-panel-content-inner { padding: 8px 26px 40px; } #offcanvas .site-logo-container { display: inline-block; padding: 6px 0 18px; } /* search inside panel */ #offcanvas .ct-search-box { margin-bottom: 22px; } #offcanvas .ct-search-box .ct-search-form-inner { border: 1px solid var(--lov-hairline); border-radius: var(--lov-radius-ctl); background: var(--lov-surface); } #offcanvas .ct-search-box .ct-search-form-inner:focus-within { border-color: var(--lov-gold); box-shadow: 0 0 0 3px rgba(168, 133, 59, 0.12); } /* mobile nav */ #offcanvas .mobile-menu ul, #offcanvas .mobile-menu .sub-menu { list-style: none; margin: 0; padding: 0; } #offcanvas .mobile-menu > ul > li { border-bottom: 1px solid var(--lov-hairline); } #offcanvas .mobile-menu > ul > li:last-child { border-bottom: 0; } #offcanvas .mobile-menu .ct-sub-menu-parent { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #offcanvas .mobile-menu .ct-menu-link { display: block; font-family: var(--lov-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--lov-ink); padding: 15px 2px; transition: color .2s ease, padding-left .2s ease; } #offcanvas .mobile-menu .ct-menu-link:hover { color: var(--lov-gold-deep); padding-left: 8px; } #offcanvas .mobile-menu .ct-toggle-dropdown-mobile { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--lov-gold); cursor: pointer; transition: transform .25s ease, color .2s ease; } #offcanvas .mobile-menu .ct-toggle-dropdown-mobile.active, #offcanvas .mobile-menu .menu-item.dropdown-active > .ct-sub-menu-parent .ct-toggle-dropdown-mobile { transform: rotate(180deg); } /* open parent state — gold accent */ #offcanvas .mobile-menu .menu-item.dropdown-active > .ct-sub-menu-parent .ct-menu-link, #offcanvas .mobile-menu .menu-item.active > .ct-sub-menu-parent .ct-menu-link { color: var(--lov-gold-deep); } /* submenus */ #offcanvas .mobile-menu .sub-menu { border-left: 2px solid var(--lov-gold-soft); margin: 0 0 10px 4px; padding-left: 16px !important; } #offcanvas .mobile-menu .sub-menu .ct-menu-link { font-size: 13.5px; font-weight: 400; color: var(--lov-muted); padding: 11px 2px; } #offcanvas .mobile-menu .sub-menu .ct-menu-link:hover { color: var(--lov-gold-deep); } #offcanvas .mobile-menu .sub-menu .sub-menu { margin-bottom: 4px; } #offcanvas .mobile-menu .current-menu-item > .ct-menu-link, #offcanvas .mobile-menu .current-menu-item > .ct-sub-menu-parent .ct-menu-link { color: var(--lov-gold-deep); } /* ============================================================ 3. Footer (Elementor location footer) ============================================================ */ footer.elementor-location-footer { border-top: 1px solid var(--lov-hairline); } /* column headings — small caps sans */ footer.elementor-location-footer .e-con.e-child .elementor-widget-heading .elementor-heading-title { font-family: var(--lov-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lov-gold-deep); } /* footer text + links */ footer.elementor-location-footer .elementor-icon-list-text, footer.elementor-location-footer .elementor-image-box-description { font-family: var(--lov-sans); } footer.elementor-location-footer .e-con.e-child .elementor-icon-list-items .elementor-icon-list-item { transition: transform .2s ease; } footer.elementor-location-footer .e-con.e-child .elementor-icon-list-items .elementor-icon-list-text { font-size: 13.5px; line-height: 1.65; color: var(--lov-muted); transition: color .2s ease; } footer.elementor-location-footer .e-con.e-child .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--lov-gold-deep); } /* contact column icons */ footer.elementor-location-footer .e-con.e-child .elementor-icon-list-icon { color: var(--lov-gold); } /* first column tagline */ footer.elementor-location-footer .elementor-image-box-description { font-size: 13px; line-height: 1.7; color: var(--lov-muted); } /* "Despre noi / Brand Lovia" inline links under tagline */ footer.elementor-location-footer .e-con.e-child .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-text { font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } /* payment badge rows — aligned, tidy */ footer.elementor-location-footer .elementor-widget-image img { transition: opacity .2s ease; } footer.elementor-location-footer .elementor-widget-image:hover img { opacity: .85; } /* bottom bar */ footer.elementor-location-footer .elementor-element-41646632 { border-top: 1px solid var(--lov-hairline); } footer.elementor-location-footer .elementor-element-41646632 .elementor-heading-title { font-family: var(--lov-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: var(--lov-muted); } footer.elementor-location-footer .elementor-element-41646632 .elementor-icon-list-text { font-size: 12px; color: var(--lov-muted); transition: color .2s ease; } footer.elementor-location-footer .elementor-element-41646632 .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--lov-gold-deep); } /* ============================================================ 4. Small screens ============================================================ */ @media (max-width: 999.98px) { .lovia-lang-hint { font-size: 10.5px; padding: 5px 40px 5px 12px; line-height: 1.45; text-align: left; } #offcanvas .ct-panel-content-inner { padding: 4px 22px 36px; } }