/* ---------- Design tokens ---------- */ :root { --bg: #333333; --chrome: #171717; --purple: #8a3b97; --white: #ffffff; --muted: #ffffff; --pad: clamp(16px, 3.65vw, 70px); --maxw: 1920px; /* Height of the header bar; the search dropdown docks below it. */ --nav-h: 89px; } /* ---------- Base ---------- */ body { background: var(--bg); color: var(--white); font-family: 'Prompt', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; transition: opacity .15s; } a:hover { color: inherit; opacity: .8; } [type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover { background: var(--purple); opacity: .8; } img { max-width: 100%; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } /* ---------- Nav (ported from nexen-home-html/site.css) ---------- */ /* Sticky has to sit on the outermost header element: in the Elementor Theme Builder the bar is wrapped in containers only 89px tall, and a sticky child can never travel past its own parent, so sticking .nav alone did nothing. header.elementor-location-header is a direct child of . */ header.elementor-location-header { position: sticky; top: 0; z-index: 100; } /* Logged-in admins get the WP toolbar, which is fixed over the top of the viewport — drop the sticky header below it. Core publishes its own height as --wp-admin--admin-bar--height on (32px, 46px under 782px), so read that rather than hard-coding the breakpoint. Both selectors are needed: the Elementor header wraps .nav, but the theme's own header.php renders .nav as the outermost sticky element. */ body.admin-bar header.elementor-location-header, body.admin-bar>header.nav { top: var(--wp-admin--admin-bar--height, 32px); } /* Under 600px core stops fixing the toolbar, so it scrolls away and the header belongs back at the top. */ @media screen and (max-width: 600px) { body.admin-bar header.elementor-location-header, body.admin-bar>header.nav { top: 0; } } .nav { position: sticky; top: 0; z-index: 100; background: var(--chrome); height: 89px; display: flex; align-items: center; } .nav-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 76px); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-logo img { height: 58px; width: auto; } .nav-menu { display: flex; align-items: stretch; height: 89px; gap: clamp(18px, 2.3vw, 45px); list-style: none; margin: 0; padding: 0; } .nav-menu>li { list-style: none; display: flex; align-items: center; position: relative; } .nav-menu li { list-style: none; } .nav-menu a { font-size: clamp(14px, 1.05vw, 20px); font-weight: 500; white-space: nowrap; transition: color .15s, opacity .15s; } .nav-menu a:hover { opacity: .6; } .nav-menu a.active, .nav-menu .current-menu-item>a, .nav-menu .current-menu-ancestor>a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; } /* ---------- Desktop nav underline ---------- text-decoration cannot be animated, so above the mobile breakpoint the bar becomes a pseudo-element sitting exactly where the decoration was (top:100%, 2px — the same row of pixels the old text-underline-offset:7px produced). It wipes in from the left on hover and, on the way out, keeps travelling to the right rather than retracting, so moving along the row reads as the highlight being handed from one item to the next instead of undone and redrawn. Below 821px the menu is a stacked panel of full-width rows, where a bar spanning the whole row would not read as an underline at all — there the native text-decoration stays. */ @media (min-width: 821px) { .nav-menu>li:not(.nexen-nav-cta)>a { position: relative; transition: color .15s, opacity .15s, transform .2s cubic-bezier(.22, .61, .36, 1); } .nav-menu>li:not(.nexen-nav-cta)>a::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: right center; /* background is in the list for the current page's bar, which is already drawn in white: hovering it has nothing to wipe, so the purple has to arrive as a fade rather than a flip. */ transition: transform .32s cubic-bezier(.22, .61, .36, 1), background .32s ease, box-shadow .32s ease; } /* Dimming the label was the whole of the old hover state. With the bar doing the work the item can stay at full strength and lift instead. Hung off the

, not the , so an item with a dropdown keeps its underline lit for as long as that dropdown is open — the pointer is inside the

the whole time it is down in the submenu. */ .nav-menu>li:not(.nexen-nav-cta):hover>a, .nav-menu>li:not(.nexen-nav-cta)>a:focus-visible { opacity: 1; transform: translateY(-1px); } .nav-menu>li:not(.nexen-nav-cta):hover>a::after, .nav-menu>li:not(.nexen-nav-cta)>a:focus-visible::after { transform: scaleX(1); transform-origin: left center; background: var(--purple); box-shadow: 0 0 12px rgba(162, 71, 177, .9); } /* The current page keeps its underline — drawn now rather than decorated, so it lines up with the hover bar to the pixel. */ .nav-menu>li>a.active, .nav-menu>li.current-menu-item>a, .nav-menu>li.current-menu-ancestor>a { text-decoration: none; } .nav-menu>li:not(.nexen-nav-cta)>a.active::after, .nav-menu>li.current-menu-item:not(.nexen-nav-cta)>a::after, .nav-menu>li.current-menu-ancestor:not(.nexen-nav-cta)>a::after { transform: scaleX(1); } } /* Selectors mirror the ones above rather than being shortened: they have to match that specificity to win, and being later in the file is not enough. */ @media (prefers-reduced-motion: reduce) { .nav-menu>li:not(.nexen-nav-cta)>a, .nav-menu>li:not(.nexen-nav-cta)>a::after { transition: none; } .nav-menu>li:not(.nexen-nav-cta):hover>a, .nav-menu>li:not(.nexen-nav-cta)>a:focus-visible { transform: none; } } /* Warranty-registration CTA — the one nav item that gets a filled pill so it reads as an action, not a page. Tagged automatically (see nexen_nav_cta_class) or by adding the nexen-nav-cta class to the item in Appearance > Menus. */ .nav-menu .nexen-nav-cta>a { padding: 10px 22px; border-radius: 999px; background: var(--purple); color: #fff; font-weight: 700; text-decoration: none; transition: background .15s, box-shadow .15s, opacity .15s; } .nav-menu .nexen-nav-cta>a:hover { opacity: 1; background: #a247b1; box-shadow: 0 0 0 3px rgba(138, 59, 151, .3); } /* Never let the "current page" underline override the pill. */ .nav-menu .nexen-nav-cta.current-menu-item>a, .nav-menu .nexen-nav-cta.current-menu-ancestor>a { text-decoration: none; color: #fff; } /* Dropdown submenus (primary nav) — revealed on hover/focus below the parent. */ .nav-menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 120; min-width: 230px; margin: 0; padding: 10px 0; list-style: none; background: var(--chrome); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .nav-menu>li:hover>.sub-menu, .nav-menu>li:focus-within>.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-menu .sub-menu li { list-style: none; display: block; } .nav-menu .sub-menu a { display: block; padding: 10px 22px; font-size: clamp(13px, .95vw, 16px); font-weight: 400; line-height: 1.35; white-space: normal; color: var(--white); transition: background .15s; } .nav-menu .sub-menu a:hover { background: rgba(255, 255, 255, .08); } .nav-right { display: flex; align-items: center; gap: 16px; } .nav-lang { display: flex; align-items: center; gap: 7px; } .nav-lang a { display: flex; align-items: center; gap: 7px; } .nav-lang span { font-weight: 900; font-size: 20px; } .nav-divider { width: 1px; height: 21px; background: rgba(255, 255, 255, .55); } .icn { width: 22px; height: 22px; display: block; } /* Mobile menu toggle (hamburger) — hidden on desktop, shown ≤820px. */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 9px; background: none; border: none; cursor: pointer; } .nav-burger span { display: block; width: 100%; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; } /* ---------- Footer (ported from nexen-home-html/index.html) ---------- */ .footer { background: var(--chrome); padding: 41px 0 40px; border-top: 1px solid rgba(255, 255, 255, .08); } .footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; } .follow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .follow .lbl { font-size: 20px; font-weight: 500; } .socials { display: flex; align-items: center; gap: 15px; } .socials a { display: inline-flex; } .socials svg { width: 24px; height: 24px; fill: #fff; } .footer-mail { font-size: clamp(15px, 1.1vw, 18px); font-weight: 300; } .footer-info { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .footer-info p { font-size: 14px; font-weight: 300; line-height: 1.9; } .footer-info .addr { text-align: right; } .footer-rule { border: none; border-top: 1px solid rgba(255, 255, 255, .28); margin: 22px 0 16px; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-bottom .terms { font-size: 14px; font-weight: 300; } .footer-bottom img { height: 30px; width: auto; opacity: .9; } /* ---------- Responsive ---------- */ @media (max-width:820px) { /* The burger sits between the logo and .nav-right in the markup, which space-between then parks in the middle of the bar. Send it to the end so it follows the search icon, and let the logo absorb the free space. */ .nav-burger { display: flex; order: 5; } .nav-logo { margin-right: auto; } /* burger -> X when open */ .nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-burger span:nth-child(2) { opacity: 0; } .nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* menu becomes a full-width dropdown panel, revealed when .nav-open */ .nav-menu { display: none; position: absolute; top: 89px; left: 0; right: 0; z-index: 120; flex-direction: column; align-items: stretch; height: auto; gap: 0; margin: 0; padding: 8px 0; background: var(--chrome); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); max-height: calc(100vh - 89px); overflow-y: auto; } .nav-open .nav-menu { display: flex; } .nav-menu>li { display: block; position: static; } .nav-menu a { display: block; padding: 14px 26px; } /* In the stacked panel the pill becomes an inset button so it still reads as the standout action without breaking the full-width rows. */ .nav-menu .nexen-nav-cta>a { margin: 10px 26px; padding: 13px 22px; border-radius: 10px; text-align: center; } /* submenu: static accordion, expanded when its parent is .open */ .nav-menu .sub-menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; min-width: 0; margin: 0; padding: 0; background: rgba(255, 255, 255, .04); border: none; border-radius: 0; box-shadow: none; } .nav-menu .menu-item-has-children.open>.sub-menu { display: block; } .nav-menu .sub-menu a { padding: 12px 42px; } .footer-info .addr { text-align: left; } } /* ---------- Header search dropdown ---------- Docked directly under the sticky header and fixed, so it stays put with the header while the page scrolls. The panel slides down out from under the header, which sits above it (z-index 100). search-modal.js measures the header's real bottom edge into --nexen-header-bottom, because no static offset works: under 600px core unfixes the admin toolbar, so it sits in flow pushing the header down at the top of the page and slides away as you scroll. --nav-h is the no-toolbar fallback for the frame before the first measurement. */ .nexen-search-modal { position: fixed; top: var(--nexen-header-bottom, var(--nav-h)); left: 0; right: 0; bottom: 0; z-index: 90; overflow: hidden; pointer-events: none; } .nexen-search-modal[hidden] { display: none; } .nexen-search-modal.is-open { pointer-events: auto; } .nexen-search-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .22s ease; } .nexen-search-modal.is-open .nexen-search-modal__backdrop { opacity: 1; } /* Full-bleed bar; the inner keeps its contents on the site grid. */ .nexen-search-modal__panel { position: relative; background: var(--chrome); border-bottom: 1px solid rgba(138, 59, 151, .45); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); transform: translateY(-100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); } .nexen-search-modal.is-open .nexen-search-modal__panel { transform: none; } .nexen-search-modal__inner { display: flex; align-items: center; gap: 14px; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(14px, 1.6vw, 22px) var(--pad); } .nexen-search-modal__form { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; background: rgba(23, 23, 23, .75); border: .5px solid var(--purple); border-radius: 12px; padding: 0 16px; height: 58px; } .nexen-search-modal__icn { width: 22px; height: 22px; flex: 0 0 22px; color: var(--purple); } .nexen-search-modal__form input { flex: 1 1 auto; min-width: 0; height: 100%; background: transparent; border: none; outline: none; color: #fff; font-family: inherit; font-size: clamp(15px, 1.1vw, 18px); font-weight: 300; } .nexen-search-modal__form input::placeholder { color: rgba(255, 255, 255, .45); } /* Chrome's default clear button is invisible on a dark field. */ .nexen-search-modal__form input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; } .nexen-search-modal__form button { flex: 0 0 auto; padding: 11px 26px; border: none; border-radius: 10px; background: var(--purple); color: #fff; font-family: inherit; font-size: clamp(14px, 1vw, 16px); font-weight: 500; cursor: pointer; } .nexen-search-modal__close { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; } .nexen-search-modal__close svg { width: 16px; height: 16px; } .nexen-search-modal__close:hover { background: var(--purple); opacity: 1; } @media (max-width:600px) { .nexen-search-modal__inner { gap: 10px; } .nexen-search-modal__form { height: 50px; padding: 0 12px; gap: 8px; } /* No room for the word alongside the field on a phone; the icon carries it. */ .nexen-search-modal__form button { display: none; } } /* ---------- Shared section title ---------- */ .section-title { font-size: clamp(30px, 3vw, 52px); font-weight: 600; letter-spacing: .5px; } /* ---------- Product card tire-type logo ---------- Shown in place of the product name on every product listing (home Recommend Product, category archive, search results). The fixed height keeps all the descriptions on one baseline whatever each logo's aspect ratio is. */ .card-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 84px; margin: 18px 0 14px; /* The logo files are 2:1 canvases whose wordmark fills only ~22% of the height — fitting the whole canvas in the box left the mark far smaller than the product names it stands in for. Scale to the card width instead and clip the empty canvas above and below it. */ overflow: hidden; } .card-logo img { width: 86%; height: auto; /* Ceiling for an unexpectedly tall canvas (a square logo, say): past 2x the box the image goes back to being height-bound rather than deeply cropped. */ max-height: 200%; object-fit: contain; } /* ---------- Product card hover actions (Learn More / Shopee / Lazada / TikTok) ---------- */ .prod-card, .rec-card, .tile { position: relative; } /* whole-card click target (product permalink), under the action buttons */ .card-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* 2x2 button grid, revealed over the card bottom on hover/focus */ .card-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 15px; padding: clamp(16px, 1.6vw, 28px); background: rgba(23, 23, 23, .55); border-radius: 0 0 10px 10px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .prod-card:hover .card-actions, .prod-card:focus-within .card-actions, .rec-card:hover .card-actions, .rec-card:focus-within .card-actions, .tile:hover .card-actions, .tile:focus-within .card-actions { opacity: 1; visibility: visible; transform: none; } .card-btn { display: flex; align-items: center; justify-content: center; aspect-ratio: 166 / 50; border-radius: 8px; font-size: clamp(13px, 1vw, 16px); font-weight: 500; line-height: 1.1; text-align: center; color: #fff; overflow: hidden; transition: filter .15s ease; } .card-btn:hover { opacity: 1; filter: brightness(1.06); } .card-learn { background: var(--purple); padding: 0 10px; } .card-learn:hover { color: #fff; } /* only "Learn More" (no marketplace links) is redundant — the whole card already links to the product — so never show that overlay (desktop hover + touch). */ .card-actions--solo { display: none; } /* marketplace buttons render the brand badge image (assets/img/shop/) */ .card-img { padding: 0; background: transparent; } .card-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; } /* Touch devices have no hover: show the buttons in the card flow (below the content) instead of a hover overlay. They stay above the whole-card .card-cover link (z-index), so tapping a button follows that link and tapping the rest of the card opens the product. */ @media (hover: none) { .card-actions { position: relative; z-index: 3; opacity: 1; visibility: visible; transform: none; margin-top: 16px; padding: 0; background: transparent; border-radius: 0; } }