/* ========================================================================== MAIN MENU — floating pill "dock" with icons and a sliding highlight. Loaded after style.css; it only overrides the menu. To roll back, remove this file's from the pages (the matching script in js/app.js, initNav, then does nothing visible). ========================================================================== */ /* one icon per link, drawn from the link's translation key (so it follows any text edits) */ .main-nav__link::before { content: ""; flex: none; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--nav-icon) center / contain no-repeat; mask: var(--nav-icon) center / contain no-repeat; opacity: 0.8; transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1); } .main-nav__link[data-i18n="nav_home"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); } .main-nav__link[data-i18n="nav_shop"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2Zm-6-2c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2Zm6 16H6V8h2v2c0 .55.45 1 1 1s1-.45 1-1V8h4v2c0 .55.45 1 1 1s1-.45 1-1V8h2v12Z'/%3E%3C/svg%3E"); } .main-nav__link[data-i18n="nav_categories"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm0 10h8v8H3v-8zM13 3h8v8h-8V3zm0 10h8v8h-8v-8z'/%3E%3C/svg%3E"); } .main-nav__link[data-i18n="nav_offers"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E"); } .main-nav__link[data-i18n="nav_contact"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E"); } /* ---------- Desktop: the dock ---------- */ @media (min-width: 861px) { .main-nav { position: relative; gap: 2px; padding: 5px; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(135deg, #ffffff, #f4f9fc) padding-box, linear-gradient(135deg, var(--color-border), #bfe6ef 60%, #ffe2b0) border-box; box-shadow: 0 4px 14px rgba(12, 35, 64, 0.08), inset 0 1px 0 #fff; } .main-nav__link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--color-text-muted); background: none; transition: color 0.2s ease; } .main-nav__link:hover, .main-nav__link:focus-visible { color: var(--color-primary); background: none; } .main-nav__link:hover::before, .main-nav__link:focus-visible::before { transform: translateY(-2px) scale(1.15); } .main-nav__link[aria-current="page"] { color: var(--color-primary); } .main-nav__link[aria-current="page"]::before { opacity: 1; } .main-nav__link:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: -2px; } /* the sliding highlight (positioned by initNav in js/app.js) */ .main-nav__glider { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; z-index: 0; border-radius: 999px; background: linear-gradient(135deg, #ffd166 0%, #ffa41c 62%, #ff7a2f 135%); box-shadow: 0 4px 12px rgba(255, 164, 28, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); opacity: 0; pointer-events: none; transition: left 0.32s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.32s cubic-bezier(0.3, 1.25, 0.5, 1), background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .main-nav__glider.is-ready { opacity: 1; } /* following the mouse over a link that is not the current page */ .main-nav__glider.is-hover { background: linear-gradient(135deg, #e6f7fb, #cfeef6); box-shadow: inset 0 0 0 1px rgba(0, 105, 113, 0.18); } } /* ---------- Phones / tablets: the dropdown menu, same icons ---------- */ @media (max-width: 860px) { .main-nav__glider { display: none; } .main-nav { top: 100%; /* directly under the whole header (the top strip made 64px land inside it) */ border-radius: 0 0 22px 22px; padding: 10px 14px 16px; gap: 6px; box-shadow: 0 18px 30px rgba(12, 35, 64, 0.18); } .main-nav__link { gap: 12px; padding: 12px 14px; border-bottom: 0; border-radius: 16px; font-weight: 800; color: var(--color-primary); background: var(--color-surface-ice); } /* phone icons: a navy circle (::before) with the glyph laid on top of it (::after) */ .main-nav__link::before { width: 36px; height: 36px; border-radius: 50%; opacity: 1; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); -webkit-mask: none; mask: none; } .main-nav__link { position: relative; } .main-nav__link::after { content: ""; position: absolute; inset-inline-start: 14px; top: 50%; width: 36px; height: 36px; margin-top: -18px; background: #fff; -webkit-mask: var(--nav-icon) center / 18px 18px no-repeat; mask: var(--nav-icon) center / 18px 18px no-repeat; pointer-events: none; } .main-nav__link[aria-current="page"] { background: linear-gradient(135deg, #ffe39a, #ffc247); box-shadow: 0 4px 12px rgba(255, 164, 28, 0.35); } .main-nav__link[aria-current="page"]::before { background: linear-gradient(135deg, #ff7a2f, #ff5a36); } } @media (prefers-reduced-motion: reduce) { .main-nav__glider, .main-nav__link, .main-nav__link::before { transition: none; } }