/* * Twelve UI — site-wide design tokens, header, footer and mobile bottom bar. * * Tokens are prefixed `--tw-` so they never collide with the legacy variables * (`--background`, `--shadow`, …) that the rest of the storefront still uses. * * Theme: web.layouts.head decides light/dark on ; web.layouts.header * mirrors it onto and the theme switch updates both. Light values are * the defaults; the dark block overrides them. */ /* ── Tokens ─────────────────────────────────────────────────────────── */ body { --tw-font: 'IBM Plex Sans Arabic', system-ui, sans-serif; --tw-bg: #f4f4f6; --tw-surface: #ffffff; --tw-surface2: #f7f7f8; --tw-ink: #18181b; --tw-ink2: #77757d; --tw-line: #e9e8ec; --tw-brand: #f5395f; --tw-brand-2: #fa5d77; --tw-brand-rgb: 245, 57, 95; --tw-brand-soft: #fde7ec; --tw-good: #22c55e; --tw-chip: #f2f1f4; --tw-head: #ffffff; --tw-foot: #efeef2; --tw-foot-ink: #77757d; --tw-foot-strong: #18181b; --tw-foot-line: rgba(24, 24, 27, 0.12); --tw-foot-chip: rgba(24, 24, 27, 0.05); --tw-shadow: 0 2px 10px rgba(24, 24, 27, 0.06); --tw-pop-shadow: 0 22px 50px rgba(0, 0, 0, 0.18); --tw-tp: #e06e0a; --tw-max: 1280px; /* --tw-header-bar-h = fixed header only; --tw-announce-h = optional top bar; --tw-header-h = combined clearance used by page padding (home, cart, legal…). */ --tw-header-bar-h: 70px; --tw-announce-h: 0px; --tw-header-h: calc(var(--tw-header-bar-h) + var(--tw-announce-h)); --tw-mnav-h: 68px; } body.darkMode, html.darkMode body:not(.lightMode) { --tw-bg: #0e0e11; --tw-surface: #17171b; --tw-surface2: #1f1f24; --tw-ink: #f4f4f6; --tw-ink2: #9a98a0; --tw-line: #2a2a30; --tw-brand-soft: #341521; --tw-good: #2ee07c; --tw-chip: #26262c; --tw-head: #141418; --tw-foot: #0a0a0c; --tw-foot-ink: #8b8a92; --tw-foot-strong: #ffffff; --tw-foot-line: rgba(255, 255, 255, 0.08); --tw-foot-chip: rgba(255, 255, 255, 0.06); --tw-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); --tw-pop-shadow: 0 22px 50px rgba(0, 0, 0, 0.45); --tw-tp: #ffb640; } @media (max-width: 991.98px) { body { --tw-header-bar-h: 60px; } } /* The fixed bottom bar must never cover the end of a page. */ @media (max-width: 767.98px) { body { padding-bottom: calc(var(--tw-mnav-h) + env(safe-area-inset-bottom)); } } /* ── Shared pieces ──────────────────────────────────────────────────── */ .tw-header, .tw-footer, .tw-mnav { font-family: var(--tw-font); color: var(--tw-ink); } .tw-header *, .tw-footer *, .tw-mnav * { box-sizing: border-box; } .tw-header a, .tw-footer a, .tw-mnav a { text-decoration: none; } .tw-caret { font-size: 8px; line-height: 1; } .tw-mask-logo { display: block; -webkit-mask: url('../images/home-v2/logo-mark.png') center / contain no-repeat; mask: url('../images/home-v2/logo-mark.png') center / contain no-repeat; } @keyframes tw-dd-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes tw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes tw-spin { to { transform: rotate(360deg); } } /* ── Header ─────────────────────────────────────────────────────────── */ .tw-header { position: fixed; top: var(--tw-announce-h); inset-inline: 0; z-index: 1030; height: var(--tw-header-bar-h); background: var(--tw-head); background: color-mix(in srgb, var(--tw-head) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--tw-line); box-shadow: var(--tw-shadow); } /* Scroll progress line, driven by main.js. */ .tw-header #line { position: absolute; top: 0; inset-inline-start: 0; height: 3px; width: 0; background: var(--tw-brand); transition: width 0.1s linear; } .tw-header__in { max-width: var(--tw-max); height: 100%; margin: 0 auto; padding: 0 18px; display: flex; align-items: center; gap: 10px; } .tw-header__spacer { flex: 1; min-width: 0; } .tw-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; color: var(--tw-ink); } .tw-brand:hover { color: var(--tw-ink); } .tw-brand__mark { width: 38px; height: 38px; border-radius: 11px; background: var(--tw-brand); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(var(--tw-brand-rgb), 0.3); } .tw-brand__glyph { width: 26px; height: 22px; background: #fff; } .tw-brand__name { font-weight: 700; font-size: 20px; white-space: nowrap; } .tw-header__links { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .tw-link { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 11px; color: var(--tw-ink); white-space: nowrap; font-weight: 700; font-size: 13.5px; transition: background 0.2s; } .tw-link:hover { background: var(--tw-chip); color: var(--tw-ink); } .tw-link__tp { color: var(--tw-tp); flex-shrink: 0; } /* Mega menu */ .tw-mega { position: relative; } .tw-mega__btn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 11px; border: none; background: var(--tw-chip); color: var(--tw-ink); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all 0.2s; } .tw-mega.is-open .tw-mega__btn { background: var(--tw-brand); color: #fff; } /* Transparent top padding bridges the gap so hover survives the move. */ .tw-mega__panel { position: absolute; top: 100%; inset-inline-start: 0; padding-top: 8px; display: none; z-index: 60; } .tw-mega.is-open .tw-mega__panel { display: block; } @media (hover: hover) { .tw-mega:hover .tw-mega__panel { display: block; } } .tw-mega__box { width: 270px; max-height: min(70vh, 520px); overflow-y: auto; background: var(--tw-surface); border: 1px solid var(--tw-line); border-radius: 16px; box-shadow: var(--tw-pop-shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px; animation: tw-dd-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: top; } .tw-mega__head { font-size: 11px; font-weight: 700; color: var(--tw-ink2); padding: 8px 10px 4px; } .tw-mega__head:hover { color: var(--tw-brand); } .tw-mega__item { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 11px; color: var(--tw-ink); transition: background 0.15s; } .tw-mega__item:hover { background: var(--tw-chip); color: var(--tw-ink); } /* * Category tile (x-web.category-tile): gradient chip with the category icon as * a white glyph. Icons are coloured line glyphs of mixed proportions, so they * are contained, never cropped. A filter (not a mask) keeps cross-origin * Cloudflare Images working without CORS. */ .tw-cat-tile { display: grid; place-items: center; flex-shrink: 0; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); } .tw-cat-tile img { object-fit: contain; filter: brightness(0) invert(1); } .tw-cat-tile--md { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .tw-cat-tile--md img { width: 22px; height: 22px; } .tw-cat-tile--sm { width: 30px; height: 30px; border-radius: 9px; } .tw-cat-tile--sm img { width: 17px; height: 17px; } .tw-mega__label { flex: 1; font-size: 12.5px; font-weight: 700; } .tw-mega__chev { color: var(--tw-ink2); font-size: 12px; } /* Search (hooks: .searchBar, #search-input, .search-container, #search-results) */ .tw-search { position: relative; flex: 1 1 60px; min-width: 44px; max-width: 260px; } .tw-search__box { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--tw-surface2); border: 1px solid var(--tw-line); transition: border-color 0.2s; } .tw-search.open-search-container .tw-search__box { border-color: var(--tw-brand); } .tw-search__box svg { flex-shrink: 0; color: var(--tw-ink2); } .tw-search__box input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--tw-ink); } .tw-search__box input::placeholder { color: var(--tw-ink2); } .tw-spinner { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tw-line); border-top-color: var(--tw-brand); animation: tw-spin 0.7s linear infinite; } .tw-search .search-container { position: absolute; top: calc(100% + 8px); /* Exactly as wide as the search field above it. */ inset-inline: 0; max-height: 380px; overflow-y: auto; display: none; flex-direction: column; padding: 8px; background: var(--tw-surface); border: 1px solid var(--tw-line); border-radius: 16px; box-shadow: var(--tw-pop-shadow); z-index: 70; } .tw-search.open-search-container .search-container { display: flex; animation: tw-dd-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; } .tw-search .search-container.justify-content-center #search-results { align-items: center; text-align: center; padding: 12px; color: var(--tw-ink2); font-size: 12.5px; } .tw-search #search-results { display: flex; flex-direction: column; gap: 2px; } .tw-search #search-results img.mw-300 { max-width: 110px; margin-bottom: 8px; } .tw-search #search-results a.game { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 11px; color: var(--tw-ink); font-size: 12.5px; } .tw-search #search-results a.game img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .tw-search #search-results a.game:hover, .tw-search #search-results a.game.highlighted { background: var(--tw-chip); } .tw-search #search-results .highlight { display: none; } .tw-search #search-results a.btn-search { text-align: center; padding: 8px; color: var(--tw-brand); font-weight: 700; font-size: 12.5px; } /* Language + currency */ .tw-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--tw-ink2); } .tw-tools__lang { padding: 6px 8px; border-radius: 9px; color: var(--tw-ink2); white-space: nowrap; } .tw-tools__lang:hover { color: var(--tw-ink); } .tw-tools__sep { color: var(--tw-line); } .tw-cur { position: relative; } .tw-cur__btn { display: flex; align-items: center; gap: 5px; border: none; background: transparent; border-radius: 9px; color: var(--tw-ink2); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 6px 9px; } .tw-cur__btn:hover { color: var(--tw-ink); background: var(--tw-chip); } .tw-cur__btn img { width: 17px; height: 12px; border-radius: 3px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); } .tw-cur .langs { display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 200px; max-height: 320px; overflow-y: auto; padding: 6px; background: var(--tw-surface); border: 1px solid var(--tw-line); border-radius: 13px; box-shadow: var(--tw-pop-shadow); z-index: 70; } .tw-cur .langs.active { display: block; animation: tw-dd-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; } .tw-cur .change-currency-btn { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--tw-ink); } .tw-cur .change-currency-btn:hover { background: var(--tw-chip); color: var(--tw-ink); } .tw-cur .change-currency-btn img { width: 19px; height: 13px; border-radius: 3px; object-fit: cover; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); } .tw-cur__meta { flex: 1; min-width: 0; line-height: 1.3; } .tw-cur__meta b { display: block; font-size: 11.5px; } .tw-cur__meta small { display: block; font-size: 10px; color: var(--tw-ink2); font-weight: 500; } /* * Theme switch. Physical right offsets and emoji glyphs match the design * exactly: in light mode the knob (☀️) sits right and the moon hint shows * left; in dark mode the knob (🌙) slides left and the sun hint shows right. */ .tw-theme { position: relative; width: 60px; height: 30px; border-radius: 99px; border: 1px solid var(--tw-line); background: var(--tw-chip); cursor: pointer; flex-shrink: 0; padding: 0; font-family: inherit; line-height: 1; transition: background 0.3s; } .tw-theme__hint { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; transition: opacity 0.3s; } .tw-theme__hint--sun { right: 8px; opacity: 0; } .tw-theme__hint--moon { left: 8px; opacity: 0.75; } .tw-theme__knob { position: absolute; top: 2px; right: 3px; box-sizing: content-box; width: 24px; height: 24px; border-radius: 50%; background: var(--tw-surface2); border: 1px solid var(--tw-line); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); display: grid; place-items: center; font-size: 12px; transition: right 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .tw-theme__icon--dark { display: none; } body.darkMode .tw-theme__hint--sun, html.darkMode body:not(.lightMode) .tw-theme__hint--sun { opacity: 0.75; } body.darkMode .tw-theme__hint--moon, html.darkMode body:not(.lightMode) .tw-theme__hint--moon { opacity: 0; } body.darkMode .tw-theme__knob, html.darkMode body:not(.lightMode) .tw-theme__knob { right: 33px; } body.darkMode .tw-theme__icon--light, html.darkMode body:not(.lightMode) .tw-theme__icon--light { display: none; } body.darkMode .tw-theme__icon--dark, html.darkMode body:not(.lightMode) .tw-theme__icon--dark { display: block; } /* Icon buttons (cart, notifications, mobile triggers) */ .tw-icon-btn { position: relative; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--tw-ink); flex-shrink: 0; border: none; background: transparent; transition: background 0.2s; } .tw-icon-btn:hover { background: var(--tw-chip); color: var(--tw-ink); } /* Header cart/notifications icons stay a single plain color instead of the gradient nav-icon set. Only the stroke-only detail lines (e.g. the cart handle) carry their own [stroke] attribute — override just that, so fill="none" details don't turn into filled shapes. */ .tw-icon-btn svg { width: 20px; height: 20px; fill: currentColor; filter: none; } .tw-icon-btn svg [stroke] { stroke: currentColor; } .tw-icon-btn #header-cart-icon-countment { position: absolute; top: 1px; inset-inline-end: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--tw-brand); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; } .tw-dot { position: absolute; top: 8px; inset-inline-end: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--tw-brand); box-shadow: 0 0 0 2px var(--tw-head); } /* Login */ .tw-login { height: 40px; padding: 0 20px; border-radius: 11px; border: none; background: var(--tw-brand); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; white-space: nowrap; box-shadow: 0 4px 12px rgba(var(--tw-brand-rgb), 0.25); transition: background 0.2s; } .tw-login:hover { background: var(--tw-brand-2); } /* Profile (hooks: #mainProfile.active via .openProfile in main.js) */ .tw-profile { position: relative; flex-shrink: 0; } .tw-profile__btn { position: relative; display: block; width: 40px; height: 40px; padding: 0; border: 2px solid var(--tw-brand); border-radius: 50%; background: var(--tw-chip); cursor: pointer; } .tw-profile__avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .tw-profile__rank { position: absolute; bottom: -5px; inset-inline-start: -5px; width: 20px; height: 20px; object-fit: contain; } .tw-profile__menu { display: none; position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 300px; max-width: calc(100vw - 24px); padding: 0; background: var(--tw-surface); border: 1px solid var(--tw-line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(var(--tw-brand-rgb), 0.08); overflow: hidden; z-index: 70; } body.darkMode .tw-profile__menu, html.darkMode body:not(.lightMode) .tw-profile__menu { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--tw-brand-rgb), 0.08); } .tw-profile.active .tw-profile__menu { display: block; animation: tw-dd-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; } .tw-profile__who { display: flex; align-items: center; gap: 11px; padding: 16px 16px 13px; background: linear-gradient(120deg, rgba(var(--tw-brand-rgb), 0.12), transparent 65%); border-bottom: 1px solid var(--tw-line); } .tw-profile__who-avatar { position: relative; flex-shrink: 0; width: 46px; height: 46px; } .tw-profile__who-avatar img:not(.tw-profile__who-rank) { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.15); } .tw-profile__who-rank { position: absolute; bottom: -4px; inset-inline-end: -4px; width: 18px; height: 18px; object-fit: contain; } .tw-profile__name { font-size: 13.5px; font-weight: 800; } .tw-profile__rank-name { margin-top: 2px; font-size: 10.5px; font-weight: 800; background: linear-gradient(110deg, #71717a, #3f3f46); -webkit-background-clip: text; background-clip: text; color: transparent; } .tw-profile__rank-name::before { content: "⬥ "; } body.darkMode .tw-profile__rank-name, html.darkMode body:not(.lightMode) .tw-profile__rank-name { background: linear-gradient(110deg, #8b8b93, #c9c9cf); -webkit-background-clip: text; background-clip: text; } .tw-profile__wallet { display: flex; align-items: center; gap: 9px; margin: 12px 14px; padding: 11px 14px; border-radius: 13px; background: rgba(var(--tw-brand-rgb), 0.08); border: 1px solid rgba(var(--tw-brand-rgb), 0.3); color: var(--tw-ink); } .tw-profile__wallet:hover { background: rgba(var(--tw-brand-rgb), 0.14); color: var(--tw-ink); } .tw-profile__wallet-ic { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(110deg, var(--tw-brand), var(--tw-brand-2)); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .tw-profile__wallet-ic svg { width: 15px; height: 15px; color: #fff; } .tw-profile__wallet-label { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700; color: var(--tw-ink2); } .tw-profile__wallet-amt { font-size: 13.5px; font-weight: 800; color: var(--tw-brand); flex-shrink: 0; } .tw-profile__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 14px 12px; } .tw-profile__link { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 12px; color: var(--tw-ink); font-size: 11.5px; font-weight: 700; background: var(--tw-bg); border: 1px solid var(--tw-line); min-width: 0; transition: background 0.15s, border-color 0.15s; } .tw-profile__link:hover { background: color-mix(in srgb, var(--tw-ink) 5%, var(--tw-bg)); border-color: rgba(var(--tw-brand-rgb), 0.35); color: var(--tw-ink); } .tw-profile__link > span:not(.tw-profile__badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-profile__badge { margin-inline-start: auto; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--tw-brand); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; } .tw-profile__link svg, .tw-profile__link i { width: 15px; height: 15px; flex-shrink: 0; } .tw-profile__link i { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .tw-profile__link--danger, .tw-profile__link--danger:hover { grid-column: 1 / -1; justify-content: center; margin-top: 3px; color: #dc2626; background: transparent; border: 1px solid rgba(248, 113, 113, 0.25); font-weight: 800; } .tw-profile__link--danger:hover { background: rgba(248, 113, 113, 0.08); color: #dc2626; } body.darkMode .tw-profile__link--danger, body.darkMode .tw-profile__link--danger:hover, html.darkMode body:not(.lightMode) .tw-profile__link--danger, html.darkMode body:not(.lightMode) .tw-profile__link--danger:hover { color: #f87171; } /* Mobile-only header pieces */ .tw-only-mobile { display: none; } @media (max-width: 1180px) { .tw-search { max-width: 200px; } } @media (max-width: 991.98px) { .tw-header__in { padding: 0 12px; gap: 8px; } .tw-header__links, .tw-search { display: none; } .tw-brand__mark { width: 34px; height: 34px; border-radius: 10px; } .tw-brand__glyph { width: 23px; height: 19px; } .tw-brand__name { font-size: 18px; } .tw-only-mobile { display: grid; } } @media (max-width: 767.98px) { /* The bottom bar carries categories, search, cart and account. */ .tw-hide-sm, .tw-only-mobile { display: none; } .tw-theme { width: 52px; height: 27px; } .tw-theme__hint { font-size: 10px; } .tw-theme__hint--sun { right: 7px; } .tw-theme__hint--moon { left: 7px; } .tw-theme__knob { width: 21px; height: 21px; font-size: 10px; } body.darkMode .tw-theme__knob, html.darkMode body:not(.lightMode) .tw-theme__knob { right: 28px; } .tw-login { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 12px; } .tw-profile__btn { width: 34px; height: 34px; } } @media (max-width: 380px) { .tw-brand__name { display: none; } } /* ── Footer ─────────────────────────────────────────────────────────── */ .tw-footer { background: var(--tw-foot); color: var(--tw-foot-ink); margin-top: 40px; /* Neutralise the legacy element rule (footer { padding; position; top }). */ position: relative; top: auto; padding: 0; } .tw-footer__in { max-width: var(--tw-max); margin: 0 auto; padding: 40px 24px 24px; } .tw-foot__row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--tw-foot-line); } .tw-foot__row:first-child { padding-top: 0; } .tw-foot__label { font-size: 13.5px; font-weight: 700; color: var(--tw-foot-strong); margin-inline-end: 8px; } .tw-foot__pays { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } /* * Scoped to the section id: after a currency switch main.js rebuilds this block * with its own class names (payment-mehtods / footer-payment-catalog-block). */ #footer-payment-methods-section .payment-mehtods, #footer-payment-methods-section .footer-payment-catalog-block { display: flex !important; align-items: center; gap: 9px; flex-wrap: wrap; } /* main.js may inject its own "view all" link; the footer keeps a single "show more" control. */ #footer-payment-methods-section .footer-payment-catalog-cta { display: none !important; } #footer-payment-methods-title { font-size: 13.5px; font-weight: 700; color: var(--tw-foot-strong); margin-inline-end: 8px; } #footer-payment-methods-section img { height: 36px; width: auto; min-width: 56px; max-width: 96px; object-fit: contain; background: #fff; border-radius: 10px; padding: 6px 12px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } /* Nine icons show; the rest wait behind "show more" (also after main.js rebuilds the block). */ #footer-payment-methods-section:not(.is-open) img:nth-of-type(n + 10) { display: none; } .tw-foot__more[hidden] { display: none; } .tw-foot__more, #footer-payment-methods-section .footer-view-all-payments { border: 1px dashed var(--tw-foot-line); background: none; color: var(--tw-foot-strong); border-radius: 9px; padding: 7px 15px; font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } #footer-payment-methods-section .footer-view-all-payments { display: inline-flex; align-items: center; gap: 6px; } .tw-foot__more:hover, #footer-payment-methods-section .footer-view-all-payments:hover { border-color: var(--tw-brand); color: var(--tw-brand); } .tw-foot__social-title { font-size: 15px; font-weight: 700; color: var(--tw-foot-strong); margin-inline-end: auto; } .tw-foot__icons { display: flex; gap: 8px; } .tw-soc { width: 34px; height: 34px; border-radius: 50%; background: var(--tw-foot-chip); color: var(--tw-foot-strong); display: grid; place-items: center; font-size: 14px; transition: background 0.2s, color 0.2s; } .tw-soc:hover { background: var(--tw-brand); color: #fff; } .tw-foot__main { display: flex; gap: 30px; padding: 28px 0; flex-wrap: wrap; align-items: flex-start; } .tw-foot__brand { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; } .tw-foot__logo { display: flex; align-items: center; gap: 10px; color: var(--tw-foot-strong); font-size: 18px; font-weight: 700; } .tw-foot__logo .tw-mask-logo { width: 34px; height: 28px; background: var(--tw-foot-strong); transition: background-color 0.2s; } /* Brand colour on hover; without this the name picks up Bootstrap's blue a:hover. */ .tw-foot__logo:hover { color: var(--tw-brand); } .tw-foot__logo:hover .tw-mask-logo { background: var(--tw-brand); } .tw-foot__about { font-size: 12px; line-height: 1.9; margin: 0; } .tw-foot__chips { display: flex; gap: 8px; flex-wrap: wrap; } .tw-foot__chip { display: flex; align-items: center; gap: 6px; background: var(--tw-foot-chip); border: 1px solid var(--tw-foot-line); border-radius: 99px; padding: 5px 12px; font-size: 10.5px; font-weight: 700; } .tw-foot__live { width: 6px; height: 6px; border-radius: 50%; background: var(--tw-good); animation: tw-pulse 1.6s infinite; } .tw-foot__cols { flex: 1; min-width: 280px; display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 22px; } .tw-foot__col-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; font-weight: 700; color: var(--tw-foot-strong); } .tw-foot__col-title::before { content: ''; width: 14px; height: 3px; border-radius: 99px; background: var(--tw-brand); } .tw-foot__links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .tw-foot__links a { font-size: 12.5px; color: var(--tw-foot-ink); display: inline-block; transition: color 0.18s, transform 0.18s; } .tw-foot__links a:hover { color: var(--tw-foot-strong); transform: translateX(-4px); } [dir='ltr'] .tw-foot__links a:hover { transform: translateX(4px); } .tw-foot__app { width: 310px; flex-shrink: 0; position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: var(--tw-head); border: 1px solid var(--tw-foot-line); } .tw-foot__app::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--tw-foot-strong); opacity: 0.055; -webkit-mask: url('../images/home-v2/modal-pattern.png') 0 0 / 260px 260px repeat; mask: url('../images/home-v2/modal-pattern.png') 0 0 / 260px 260px repeat; } .tw-foot__app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; position: relative; } .tw-foot__app-title { font-size: 15px; font-weight: 700; color: var(--tw-foot-strong); } .tw-foot__app-sub { font-size: 11.5px; line-height: 1.6; } .tw-foot__stores { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; } .tw-store { display: flex; align-items: center; gap: 8px; width: 136px; padding: 7px 12px; border-radius: 11px; border: 1px solid var(--tw-foot-line); background: #fff; color: #111; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); transition: transform 0.2s, box-shadow 0.2s; } .tw-store:hover { color: #111; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); } .tw-store__icon { width: 26px; height: 26px; border-radius: 8px; background: #f2f1f4; display: grid; place-items: center; flex-shrink: 0; } .tw-store small { display: block; font-size: 8px; color: #77757d; } .tw-store b { display: block; font-size: 11.5px; font-weight: 800; } .tw-foot__app-mark { width: 96px; height: 79px; flex-shrink: 0; position: relative; background: var(--tw-foot-strong); opacity: 0.92; transform: rotate(-8deg); filter: drop-shadow(0 6px 14px rgba(var(--tw-brand-rgb), 0.25)); } .tw-foot__bottom { border-top: 1px solid var(--tw-foot-line); padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11.5px; } .tw-trust { display: flex; align-items: center; gap: 6px; color: var(--tw-foot-ink); white-space: nowrap; } .tw-footer a.tw-trust:hover { color: var(--tw-foot-strong); } .tw-trust__stars { color: #f7b733; letter-spacing: 1px; } .tw-trust__stars--one { display: none; } @media (max-width: 991.98px) { .tw-foot__brand, .tw-foot__app { width: 100%; } } @media (max-width: 767.98px) { /* Design mobile: a single star next to the rating. */ .tw-trust__stars--full { display: none; } .tw-trust__stars--one { display: inline; } .tw-footer__in { padding: 28px 16px 20px; } .tw-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; } .tw-foot__app-mark { width: 70px; height: 58px; } } /* ── Mobile bottom bar ──────────────────────────────────────────────── */ .tw-mnav { display: none; } @media (max-width: 767.98px) { .tw-mnav { position: fixed; bottom: 0; inset-inline: 0; z-index: 1030; display: flex; align-items: flex-end; padding: 9px 6px calc(9px + env(safe-area-inset-bottom)); background: var(--tw-head); background: color-mix(in srgb, var(--tw-head) 72%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); border-top: 1px solid var(--tw-line); } } .tw-mnav__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0; border: none; background: none; font-family: inherit; cursor: pointer; color: var(--tw-ink2); } .tw-mnav__item:hover { color: var(--tw-ink); } .tw-mnav__icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .tw-mnav__icon svg { width: 21px; height: 21px; } .tw-mnav__label { font-size: 9.5px; font-weight: 700; white-space: nowrap; } .tw-mnav__item.is-active { color: var(--tw-brand); } .tw-mnav__item.is-active .tw-mnav__icon { width: 40px; height: 40px; border-radius: 13px; background: var(--tw-brand); color: #fff; transform: translateY(-6px); box-shadow: 0 8px 18px rgba(var(--tw-brand-rgb), 0.35); } /* ── Mobile sheets (search, categories) ─────────────────────────────── */ /* Design mobile search: a top sheet over a blurred overlay. */ .tw-sheet { position: fixed; inset: 0; z-index: 1060; font-family: var(--tw-font); color: var(--tw-ink); } .tw-sheet[hidden] { display: none; } .tw-sheet * { box-sizing: border-box; } .tw-sheet a { text-decoration: none; } html.tw-sheet-lock, html.tw-sheet-lock body { overflow: hidden; } .tw-sheet__overlay { position: absolute; inset: 0; background: rgba(10, 10, 14, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: tw-auth-fade 0.2s ease both; } .tw-sheet__panel { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 430px; max-height: calc(100dvh - var(--tw-mnav-h) - 16px); margin: 0 auto; padding: 14px; overflow-y: auto; border-radius: 0 0 22px 22px; background: var(--tw-surface); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); animation: tw-sheet-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; } .tw-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tw-sheet__title { font-size: 16px; font-weight: 700; } .tw-sheet__close { flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: none; border-radius: 11px; background: var(--tw-chip); color: var(--tw-ink2); font-family: inherit; font-size: 13px; cursor: pointer; } .tw-msearch__row { display: flex; align-items: center; gap: 9px; } .tw-msearch__box { flex: 1; display: flex; align-items: center; gap: 9px; height: 42px; margin: 0; padding: 0 14px; border: 1.5px solid var(--tw-brand); border-radius: 999px; background: var(--tw-surface2); color: var(--tw-ink2); } .tw-msearch__box input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--tw-ink); font-family: inherit; font-size: 13px; -webkit-appearance: none; appearance: none; } .tw-msearch__box input::-webkit-search-cancel-button { display: none; } .tw-msearch__box input::placeholder { color: var(--tw-ink2); } /* Phones zoom into inputs under 16px on focus. */ @media (pointer: coarse) { .tw-msearch__box input { font-size: 16px; } } .tw-msearch__title { margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--tw-ink2); } .tw-msearch__chips { display: flex; flex-wrap: wrap; gap: 6px; } .tw-sheet a.tw-msearch__chip { padding: 6px 13px; border: 1px solid var(--tw-line); border-radius: 99px; background: var(--tw-chip); color: var(--tw-ink); font-size: 11px; font-weight: 600; } .tw-msearch__results { display: flex; flex-direction: column; gap: 2px; } .tw-msearch__results[hidden], .tw-msearch__section[hidden] { display: none; } .tw-sheet a.tw-msearch__result { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; color: var(--tw-ink); font-size: 13px; font-weight: 600; } .tw-sheet a.tw-msearch__result:hover { background: var(--tw-chip); } .tw-msearch__result img { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--tw-chip); } .tw-msearch__empty { margin: 0; padding: 14px 4px; font-size: 12px; text-align: center; color: var(--tw-ink2); } .tw-sheet a.tw-mcats__group { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding: 2px; color: var(--tw-ink); font-size: 13px; font-weight: 700; } .tw-mcats__all { font-size: 11px; font-weight: 600; color: var(--tw-brand); } .tw-mcats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tw-sheet a.tw-mcats__item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid var(--tw-line); border-radius: 13px; background: var(--tw-surface2); color: var(--tw-ink); font-size: 11.5px; font-weight: 700; } .tw-mcats__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes tw-sheet-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ── Auth modals (login, create account, verification) ─────────────── */ /* * Scoped to .tw-auth so the other .mainForm modals (coupon, event, wallet) * keep their own look. The legacy .mainForm rules still provide the * .active show/hide contract that auth.js and main.js rely on. */ .mainForm.tw-auth { display: none; position: fixed; inset: 0; width: auto; height: auto; z-index: 2222222; overflow-y: auto; padding: 24px 12px; background: rgba(10, 10, 14, 0.6); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); font-family: var(--tw-font); color: var(--tw-ink); } .mainForm.tw-auth.active { display: flex; align-items: center; justify-content: center; animation: tw-auth-fade 0.25s ease both; } .tw-auth *, .tw-auth *::before, .tw-auth *::after { box-sizing: border-box; } .tw-auth__card { position: relative; width: min(430px, 100%); margin: auto; overflow: hidden; border-radius: 26px; background: var(--tw-surface); border: 1px solid var(--tw-line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: tw-auth-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .tw-auth__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 26px 26px 22px; text-align: center; color: #fff; background: linear-gradient(135deg, #141417, #2b141c 55%, #61182c); } .tw-auth__head > * { position: relative; } .tw-auth__head > .tw-auth__pattern { position: absolute; inset: 0; pointer-events: none; background: rgba(255, 255, 255, 0.06); -webkit-mask: url('../images/home-v2/modal-pattern.png') 0 0 / 230px 230px repeat; mask: url('../images/home-v2/modal-pattern.png') 0 0 / 230px 230px repeat; } .tw-auth__head > .tw-auth__close { position: absolute; top: 14px; left: 14px; z-index: 1; width: 30px; height: 30px; padding: 0; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; transition: background 0.2s; } [dir='ltr'] .tw-auth__head > .tw-auth__close { left: auto; right: 14px; } .tw-auth__head > .tw-auth__close:hover { background: rgba(255, 255, 255, 0.22); } .tw-auth__logo { width: 58px; height: 48px; background: #fff; filter: drop-shadow(0 4px 12px rgba(var(--tw-brand-rgb), 0.4)); } .tw-auth__title { font-size: 19px; font-weight: 700; } .tw-auth__sub { font-size: 12px; color: rgba(255, 255, 255, 0.65); } .tw-auth__body { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px 26px 24px; } .tw-auth__label { margin: 0 0 -6px; font-size: 13px; font-weight: 700; color: var(--tw-ink); } .tw-auth__notice { padding: 9px 12px; border-radius: 12px; background: var(--tw-brand-soft); color: var(--tw-brand); font-size: 12px; font-weight: 700; text-align: center; } .tw-auth__error { font-size: 11.5px; font-weight: 600; color: var(--tw-brand); text-align: center; } /* Tabs */ .tw-auth__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tw-chip); } .tw-auth__tab { flex: 1; height: 34px; border: none; border-radius: 999px; background: transparent; color: var(--tw-ink2); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all 0.2s; } .tw-auth__tab:hover { color: var(--tw-ink); } .tw-auth__tab.is-active { background: var(--tw-surface); color: var(--tw-ink); box-shadow: var(--tw-shadow); pointer-events: none; } /* Fields */ .tw-auth__phone { display: flex; overflow: hidden; border: 1.5px solid var(--tw-line); border-radius: 14px; background: var(--tw-surface2); transition: border-color 0.2s; } .tw-auth__phone:focus-within { border-color: var(--tw-brand); } .tw-auth__cc { position: relative; display: flex; align-items: center; border-inline-end: 1px solid var(--tw-line); } /* * The select is always left-to-right (+966), so its padding and the arrow use * physical sides: arrow on the right in RTL pages, on the left in LTR pages. */ .tw-auth__cc::after { content: '▼'; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 9px; color: var(--tw-brand); pointer-events: none; } [dir='ltr'] .tw-auth__cc::after { right: auto; left: 12px; } .mainForm.tw-auth .tw-auth__cc select { -webkit-appearance: none; appearance: none; height: 100%; min-height: 48px; padding: 0 28px 0 14px; border: none; outline: none; background: transparent; color: var(--tw-ink); font-family: inherit; font-size: 13px; font-weight: 700; direction: ltr; cursor: pointer; } .mainForm.tw-auth .tw-auth__cc select option { background: var(--tw-surface); color: var(--tw-ink); } .mainForm.tw-auth .tw-auth__phone input { flex: 1; min-width: 0; padding: 14px; border: none; outline: none; background: transparent; color: var(--tw-ink); font-family: inherit; font-size: 14px; direction: ltr; text-align: right; } [dir='ltr'] .mainForm.tw-auth .tw-auth__cc select { padding: 0 14px 0 28px; } [dir='ltr'] .mainForm.tw-auth .tw-auth__phone input { text-align: left; } .mainForm.tw-auth .tw-auth__input { width: 100%; padding: 14px; border: 1.5px solid var(--tw-line); border-radius: 14px; outline: none; background: var(--tw-surface2); color: var(--tw-ink); font-family: inherit; font-size: 14px; transition: border-color 0.2s; } .mainForm.tw-auth .tw-auth__input:focus { border-color: var(--tw-brand); } .mainForm.tw-auth .tw-auth__input--ltr { direction: ltr; text-align: right; } [dir='ltr'] .mainForm.tw-auth .tw-auth__input--ltr { text-align: left; } .tw-auth input::placeholder { color: var(--tw-ink2); } .tw-auth .invalid-feedback { margin: -8px 2px 0; font-size: 11.5px; } /* Buttons */ .tw-auth__primary { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 48px; border: none; border-radius: 14px; background: linear-gradient(135deg, var(--tw-brand), var(--tw-brand-2)); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(var(--tw-brand-rgb), 0.3); transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; } .tw-auth__primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--tw-brand-rgb), 0.4); } .tw-auth__primary:disabled { opacity: 0.6; cursor: wait; transform: none; } .tw-auth__or { display: flex; align-items: center; gap: 12px; color: var(--tw-ink2); } .tw-auth__or::before, .tw-auth__or::after { content: ''; flex: 1; height: 1px; background: var(--tw-line); } .tw-auth__or span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--tw-line); border-radius: 50%; font-size: 11.5px; } .tw-auth__alts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tw-auth__alts--single { grid-template-columns: 1fr; } .tw-auth__alt { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 10px; border: 1px solid var(--tw-line); border-radius: 12px; background: var(--tw-surface2); color: var(--tw-ink); font-family: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform 0.2s, border-color 0.2s; } .tw-auth a.tw-auth__alt:hover, .tw-auth__alt:hover { color: var(--tw-ink); border-color: var(--tw-brand); transform: translateY(-2px); } .tw-auth__alt-icon { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; } .tw-auth__alt-icon--brand { background: var(--tw-brand-soft); color: var(--tw-brand); } .tw-auth__alt-icon--google { background: #fff; border: 1px solid var(--tw-line); } .tw-auth__alt-icon--facebook { background: #1877f2; color: #fff; } .tw-auth__alt-icon--x { background: var(--tw-ink); color: var(--tw-bg); } .tw-auth__terms { margin: 0; font-size: 10.5px; line-height: 1.7; text-align: center; color: var(--tw-ink2); } .tw-auth__terms a { color: var(--tw-brand); font-weight: 700; } /* Verification */ .tw-auth__body--center { text-align: center; } .tw-auth__otp-lead { margin: 0; font-size: 13px; color: var(--tw-ink2); } .tw-auth__otp-lead b { display: inline-block; color: var(--tw-ink); } .tw-auth__link { padding: 0; border: none; background: none; font-family: inherit; font-size: inherit; font-weight: 700; color: var(--tw-brand); cursor: pointer; } .tw-auth__link:disabled, .tw-auth__link.not-active { color: var(--tw-ink2); cursor: not-allowed; } .tw-auth__hint { margin: -6px 0 0; font-size: 11.5px; color: var(--tw-ink2); } .tw-otp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; } .tw-otp__boxes { display: flex; justify-content: center; gap: 8px; direction: ltr; } .tw-otp__box { display: grid; place-items: center; width: 46px; height: 54px; border: 2px solid var(--tw-line); border-radius: 14px; background: var(--tw-surface2); color: var(--tw-ink); font-size: 22px; font-weight: 700; transition: border-color 0.25s, color 0.25s; } .tw-otp__box.is-filled { border-color: var(--tw-brand); animation: tw-auth-otp-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .tw-otp__box.is-current { border-color: var(--tw-brand); animation: tw-auth-caret 1.5s ease-in-out infinite; } /* The real input covers the boxes: typing, paste and one-time-code autofill work natively. */ .mainForm.tw-auth .tw-otp__input { position: absolute; top: 0; left: 0; width: 100%; height: 54px; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: text; } .tw-auth__resend { margin: 0; font-size: 11.5px; color: var(--tw-ink2); } /* main.js still writes the raw countdown into #timer-text; the view shows it formatted. */ .tw-auth #timer-text { display: none; } .tw-auth__timer { margin: -8px 0 0; font-size: 11.5px; color: var(--tw-ink2); } .tw-auth__timer b { display: inline-block; min-width: 34px; color: var(--tw-brand); direction: ltr; } .tw-auth__timer[hidden] { display: none; } /* Success state (shown by auth.js, then the page reloads). */ .tw-auth__success { display: none; position: absolute; inset: 0; z-index: 2; background: var(--tw-surface); } .tw-auth__success-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 20px; text-align: center; } .tw-auth__success-check { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tw-good); color: #fff; font-size: 19px; animation: tw-auth-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .tw-auth__success-title { font-size: 15px; font-weight: 700; } .tw-auth__success-sub { font-size: 12px; color: var(--tw-ink2); } @keyframes tw-auth-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes tw-auth-pop { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes tw-auth-otp-in { 0% { transform: scale(0.6); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes tw-auth-caret { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--tw-brand-rgb), 0.3); } 50% { box-shadow: 0 0 0 5px rgba(var(--tw-brand-rgb), 0.1); } } /* * Legacy style.rtl.css has `@media (max-width: 600px) { .mainForm.sign-form button * { font-size: 15px; padding: 8px 50px } }`, which reaches every button in the * register and verification modals on phones. Undo it for the new markup only. */ @media (max-width: 600px) { .mainForm.tw-auth.sign-form .tw-auth__close { padding: 0; font-size: 13px; } .mainForm.tw-auth.sign-form .tw-auth__link { padding: 0; font-size: inherit; } .mainForm.tw-auth.sign-form .tw-auth__tab { padding: 0; font-size: 12.5px; } .mainForm.tw-auth.sign-form .tw-auth__alt { padding: 0 10px; font-size: 12px; } .mainForm.tw-auth.sign-form .tw-auth__primary { padding: 0; font-size: 14.5px; } } @media (max-width: 480px) { .tw-auth__head { padding: 22px 20px 18px; } .tw-auth__body { padding: 18px 18px 20px; } .tw-otp__box { width: 40px; height: 48px; font-size: 19px; } .mainForm.tw-auth .tw-otp__input { height: 48px; } .tw-auth__alt { font-size: 12px; } } /* ── Scrollbars ─────────────────────────────────────────────────────── */ /* * Thin, nearly invisible scrollbars on every page: a transparent 6px track and * a faint thumb that firms up on hover. Tokens live on because the page * scrollbar belongs to the root element; the theme switch updates too. * !important overrides the legacy 12px brand-red bars and element-specific * rules; elements that hide their scrollbar (display: none) stay hidden. */ html { --tw-scroll-thumb: rgba(24, 24, 27, 0.18); --tw-scroll-thumb-hover: rgba(24, 24, 27, 0.36); } html.darkMode { --tw-scroll-thumb: rgba(255, 255, 255, 0.16); --tw-scroll-thumb-hover: rgba(255, 255, 255, 0.32); } ::-webkit-scrollbar { width: 6px !important; height: 6px !important; min-height: 0 !important; background: transparent !important; } ::-webkit-scrollbar-track { background: transparent !important; border-radius: 99px !important; } ::-webkit-scrollbar-thumb { min-height: 24px !important; border-radius: 99px !important; background: var(--tw-scroll-thumb) !important; } ::-webkit-scrollbar-thumb:hover { background: var(--tw-scroll-thumb-hover) !important; } ::-webkit-scrollbar-corner { background: transparent !important; } /* Browsers without ::-webkit-scrollbar (Firefox): the standard thin equivalent. */ @supports not selector(::-webkit-scrollbar) { html, body * { scrollbar-width: thin; scrollbar-color: var(--tw-scroll-thumb) transparent; } } /* ── Pagination (shared: web.components.pagination) ─────────────────── */ .tw-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 6px; background: var(--tw-surface); border: 1px solid var(--tw-line); border-radius: 999px; } .tw-page { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 36px; height: 36px; padding: 0 12px; border-radius: 999px; background: transparent; color: var(--tw-ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s ease, color .15s ease; } a.tw-page:hover { background: var(--tw-chip); color: var(--tw-ink); } .tw-page.is-current { background: var(--tw-brand); color: #fff; } .tw-page.is-disabled, .tw-page--gap { color: var(--tw-ink2); opacity: .6; } @media (max-width: 480px) { .tw-page--nav span { display: none; } } #oh-results { transition: opacity .15s ease; } #oh-results.is-loading { opacity: .5; pointer-events: none; }