/* /styles/responsive/header-responsive.css ChoiceSpin — Header responsive (clean controlled breakpoints) ------------------------------------------------------------- > 1150px : full desktop header (unchanged) <= 1150px : icon-only header controls <= 850px : hide all right-side controls + show hamburger <= 850px : hamburger opens full-screen left drawer */ /* ========================================================= 1) ICON-ONLY MODE (<=1150px) — JS adds .sc-hdr-icons-only ========================================================= */ /* ========================================================= PREBOOT (prevents header flicker before JS initializes) - Uses html root classes set in ========================================================= */ html.sc-hdr-preboot .site-header, html.sc-hdr-preboot .site-header * { transition: none !important; animation: none !important; } .site-header.sc-hdr-icons-only .header-filebtn > span, .site-header.sc-hdr-icons-only .mywheels__btn > span, .site-header.sc-hdr-icons-only .langdd__btn > span, html.sc-hdr-pre-icons .site-header .header-filebtn > span, html.sc-hdr-pre-icons .site-header .mywheels__btn > span, html.sc-hdr-pre-icons .site-header .langdd__btn > span { display: none; } /* Keep buttons compact once labels are hidden (only in icon mode) */ .site-header.sc-hdr-icons-only .header-filebtn, .site-header.sc-hdr-icons-only .mywheels__btn, .site-header.sc-hdr-icons-only .langdd__btn, html.sc-hdr-pre-icons .site-header .header-filebtn, html.sc-hdr-pre-icons .site-header .mywheels__btn, html.sc-hdr-pre-icons .site-header .langdd__btn { padding-left: 10px; padding-right: 10px; gap: 0; min-width: auto; } /* Optional alignment polish */ .site-header.sc-hdr-icons-only .mywheels__chev, .site-header.sc-hdr-icons-only .langdd__chev, html.sc-hdr-pre-icons .site-header .mywheels__chev, html.sc-hdr-pre-icons .site-header .langdd__chev { margin-left: 0; } /* ========================================================= 2) HAMBURGER BUTTON (<=850px) — JS injects button ========================================================= */ /* Hidden by default */ .sc-hdr-menu-btn { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; /* visually: ONLY hamburger lines */ border: 0; background: transparent; border-radius: 0; box-shadow: none; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .sc-hdr-menu-btn:hover, .sc-hdr-menu-btn:active, .sc-hdr-menu-btn:focus { background: transparent; box-shadow: none; } .sc-hdr-menu-btn:focus-visible { outline: 2px solid rgba(99, 102, 241, 0.65); outline-offset: 3px; border-radius: 8px; } /* 3-line hamburger */ .sc-hdr-menu-btn__bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; height: 14px; } .sc-hdr-menu-btn__bars span { display: block; width: 20px; height: 2px; border-radius: 999px; background: currentColor; } /* When mobile-header mode is active (<=850px) */ .site-header.sc-hdr-mobile-menu .header__right, html.sc-hdr-pre-mobile .site-header .header__right { display: flex; align-items: center; justify-content: flex-end; gap: 0; } /* Hide all right-side header controls... */ .site-header.sc-hdr-mobile-menu .header__right > *, html.sc-hdr-pre-mobile .site-header .header__right > * { display: none !important; } /* ...except hamburger */ .site-header.sc-hdr-mobile-menu .header__right > .sc-hdr-menu-btn, html.sc-hdr-pre-mobile .site-header .header__right > .sc-hdr-menu-btn { display: inline-flex !important; flex: 0 0 auto; } /* Tiny-screen polish */ @media (max-width: 850px) { .site-header.sc-hdr-mobile-menu .header__inner { min-width: 0; } .site-header.sc-hdr-mobile-menu .header__left { min-width: 0; } .site-header.sc-hdr-mobile-menu .logo { min-width: 0; } .site-header.sc-hdr-mobile-menu .logo-text { min-width: 0; white-space: nowrap; } } @media (max-width: 170px) { .site-header.sc-hdr-mobile-menu .logo-text { display: none; } } /* ========================================================= 2.1) Mobile -> Desktop My Wheels proxy (from drawer click) - Drawer closes - Show real My Wheels control + keep hamburger visible ========================================================= */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .header__right > * { display: none !important; } /* ✅ Show My Wheels (left side) */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .header__right > #myWheelsWrap { display: inline-flex !important; flex: 0 0 auto; order: 1; } /* ✅ Keep hamburger visible (right side) */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .header__right > .sc-hdr-menu-btn { display: inline-flex !important; flex: 0 0 auto; order: 2; } /* layout while proxy is active */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .header__right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* keep My Wheels compact in this proxy mode */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open #myWheelsBtn { padding-left: 10px; padding-right: 10px; gap: 0; min-width: auto; } /* if icon-only mode is also active, keep My Wheels label hidden */ .site-header.sc-hdr-mobile-menu.sc-hdr-icons-only.sc-hdr-mobile-mywheels-proxy-open #myWheelsBtn > span:not(.header-filebtn__ico):not(.mywheels__chev) { display: none !important; } /* ========================================================= 3) FULL-SCREEN MOBILE DRAWER (slides in from left) ========================================================= */ /* lock scroll while menu is open */ html.sc-hdr-menu-open, body.sc-hdr-menu-open { overflow: hidden !important; } /* wrapper covers entire screen */ .sc-hdr-drawer-wrap { position: fixed; inset: 0; z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; } /* full-screen panel */ .sc-hdr-drawer { position: absolute; inset: 0; width: 100vw; height: 100dvh; overflow: auto; -webkit-overflow-scrolling: touch; /* EXACT dark base */ background: #1D1D1D; color: #f9fafb; /* ✅ Start off-screen on the RIGHT */ transform: translate3d(100%, 0, 0); transform-origin: right center; /* ✅ Light / mobile-friendly animation */ transition: transform 0.20s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* light theme */ html[data-theme="light"] .sc-hdr-drawer { background: #ffffff; color: #0f172a; } /* open state */ .sc-hdr-drawer-wrap.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .sc-hdr-drawer-wrap.is-open .sc-hdr-drawer { transform: translate3d(0, 0, 0); } /* top bar inside drawer */ .sc-hdr-drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0; z-index: 2; background: #1D1D1D; } html[data-theme="light"] .sc-hdr-drawer__top { background: #ffffff; border-bottom-color: rgba(15,23,42,0.08); } .sc-hdr-drawer__brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .sc-hdr-drawer__brand img { width: 28px; height: 28px; border-radius: 8px; display: block; flex: 0 0 auto; } .sc-hdr-drawer__brand-text { font-size: 0.98rem; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* close button (icon-only) */ .sc-hdr-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .sc-hdr-drawer__close:hover, .sc-hdr-drawer__close:active { background: transparent; } .sc-hdr-drawer__close:focus-visible { outline: 2px solid rgba(99, 102, 241, 0.65); outline-offset: 3px; border-radius: 8px; } .sc-hdr-drawer__close svg { width: 22px; height: 22px; display: block; } /* list wrapper */ .sc-hdr-drawer__body { padding: 10px 12px 18px; } /* vertical list (one per line) */ .sc-hdr-drawer__list { display: flex; flex-direction: column; gap: 6px; } /* ========================================================= 3.1) Drawer expandable groups (My Wheels / Language) ========================================================= */ .sc-hdr-drawer__group { display: flex; flex-direction: column; gap: 6px; } .sc-hdr-drawer__item--expandable { justify-content: space-between; } .sc-hdr-drawer__item-main { min-width: 0; display: inline-flex; align-items: center; gap: 12px; flex: 1 1 auto; } .sc-hdr-drawer__chev { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; opacity: 0.8; } .sc-hdr-drawer__chev svg { width: 18px; height: 18px; display: block; } .sc-hdr-drawer__group.is-expanded > .sc-hdr-drawer__item .sc-hdr-drawer__chev { transform: rotate(180deg); opacity: 1; } .sc-hdr-drawer__submenu { display: none; flex-direction: column; gap: 6px; padding: 0 0 0 12px; } .sc-hdr-drawer__group.is-expanded > .sc-hdr-drawer__submenu { display: flex; } .sc-hdr-drawer__subitem { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: inherit; text-decoration: none; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; } html[data-theme="light"] .sc-hdr-drawer__subitem { border-color: rgba(15,23,42,0.08); background: rgba(15,23,42,0.02); } .sc-hdr-drawer__subitem:hover, .sc-hdr-drawer__subitem:active { text-decoration: none; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); } html[data-theme="light"] .sc-hdr-drawer__subitem:hover, html[data-theme="light"] .sc-hdr-drawer__subitem:active { background: rgba(15,23,42,0.035); border-color: rgba(15,23,42,0.12); } .sc-hdr-drawer__subitem[aria-current="page"] { border-color: rgba(99, 102, 241, 0.35); background: rgba(99, 102, 241, 0.10); } .sc-hdr-drawer__subtxt { min-width: 0; font-size: 0.92rem; font-weight: 500; line-height: 1.2; color: inherit; } /* row item (button or link) */ .sc-hdr-drawer__item { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); color: inherit; text-decoration: none; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; } html[data-theme="light"] .sc-hdr-drawer__item { border-color: rgba(15,23,42,0.08); background: rgba(15,23,42,0.025); } .sc-hdr-drawer__item:hover, .sc-hdr-drawer__item:active { text-decoration: none; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); } html[data-theme="light"] .sc-hdr-drawer__item:hover, html[data-theme="light"] .sc-hdr-drawer__item:active { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.12); } .sc-hdr-drawer__item:focus-visible { outline: 2px solid rgba(99, 102, 241, 0.65); outline-offset: 2px; } /* icon container */ .sc-hdr-drawer__ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; } .sc-hdr-drawer__ico svg { width: 22px; height: 22px; display: block; } .sc-hdr-drawer__ico .theme-fallback { width: 22px; height: 22px; display: block; } /* label */ .sc-hdr-drawer__txt { min-width: 0; font-size: 0.98rem; font-weight: 600; line-height: 1.2; color: inherit; } /* helper note row (if needed later) */ .sc-hdr-drawer__muted { margin: 6px 2px 0; padding: 8px 10px; font-size: 0.82rem; color: rgba(255,255,255,0.55); } html[data-theme="light"] .sc-hdr-drawer__muted { color: rgba(15,23,42,0.55); } /* ========================================================= PHONE-ONLY REDESIGN: My Wheels dropdown (<430px) - turns into a compact floating panel under the header - desktop/tablet unchanged ========================================================= */ @media (max-width: 429.98px){ /* keep wrapper normal; menu becomes its own floating panel */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open #myWheelsWrap{ position: static !important; } .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__menu, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels-menu{ position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 58px) !important; left: 8px !important; right: 8px !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 10px !important; border-radius: 14px !important; box-sizing: border-box !important; max-height: min(72dvh, 420px) !important; overflow: hidden !important; z-index: 10020 !important; } /* remove the hover bridge on phone layout */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__menu::before, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels-menu::before{ display: none !important; } /* scroll area */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__list, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mw-list{ max-height: calc(min(72dvh, 420px) - 20px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 4px !important; scrollbar-gutter: stable !important; } /* rows */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__item, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mw-item{ display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; padding: 10px !important; border-radius: 12px !important; min-width: 0 !important; } /* thumbs */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__thumb, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mw-thumb{ width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; border-radius: 10px !important; } /* text containers */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__right, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__info, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mw-meta{ min-width: 0 !important; max-width: 100% !important; } /* title */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__name, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mw-name{ font-size: 0.82rem !important; line-height: 1.15 !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } /* meta */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__meta, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mw-sub{ font-size: 0.70rem !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } /* old button-based layout support */ .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__actions{ display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 6px !important; white-space: normal !important; overflow: visible !important; } .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__act, .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__mini{ height: 24px !important; padding: 0 8px !important; font-size: 0.72rem !important; border-radius: 8px !important; } .site-header.sc-hdr-mobile-menu.sc-hdr-mobile-mywheels-proxy-open .mywheels__act--icon{ width: 28px !important; padding: 0 !important; } }