/* ========================================================================= KYOTO STORE — design system Dark crimson / near-black PvP aesthetic (after KyotoStats) ========================================================================= */ /* ----- Fonts ----- */ /* Fonts are loaded via a non-render-blocking in layout.html (mirrors the other Kyoto sites). Raleway / Roboto / Roboto Mono. */ /* ----- Tokens ----- */ :root { /* surfaces */ --bg: #08080b; --bg-2: #0f0f14; --panel: #141419; --panel-2: #1b1b22; --card: #141419; --card-hover: #1b1b22; --line: rgba(255, 255, 255, 0.06); --line-strong: rgba(255, 255, 255, 0.10); /* brand red */ --red: #cf2c2c; --red-bright: #ef4444; --red-deep: #8b0a1e; --red-soft: rgba(207, 44, 44, 0.14); --red-glow: rgba(207, 44, 44, 0.38); /* support */ --gold: #f59e0b; --green: #22c55e; --ink: #f3f4f6; --muted: #9ca3af; --muted-2: #6b7280; --dim: #4b5563; /* type */ /* Raleway is much wider than the old Bebas Neue — display sizes run ~20% smaller and letter-spacing tighter than the pre-migration values. */ --display: 'Raleway', sans-serif; --sans: 'Roboto', system-ui, sans-serif; --mono: 'Roboto Mono', ui-monospace, monospace; /* metrics */ --maxw: 1240px; --radius: 10px; --radius-sm: 6px; --nav-h: 64px; } /* ----- Reset ----- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img { display: block; max-width: 100%; } ul { margin: 0; padding: 0; list-style: none; } input, select { font-family: inherit; } /* ambient page glow + texture */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(900px 560px at 30% -8%, rgba(226,59,70,0.16), transparent 60%), radial-gradient(1100px 700px at 92% 4%, rgba(120,20,28,0.10), transparent 55%); pointer-events: none; z-index: 0; } /* ----- Layout helpers ----- */ .wrap { width: min(100% - 48px, var(--maxw)); margin-inline: auto; } .page { position: relative; z-index: 1; } .section { padding-block: 64px; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .text-red { color: var(--red); } .mono { font-family: var(--mono); } /* ========================================================================= NAVBAR ========================================================================= */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(10,6,8,0.78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav__inner { height: 100%; display: flex; align-items: center; gap: 28px; } .brand { display: flex; align-items: center; gap: 10px; } .brand__mark { width: 26px; height: 26px; color: var(--red); flex: none; } .brand__name { display: inline-flex; align-items: center; } .brand-kyoto { font-family: var(--display); font-weight: 900; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--ink); } .brand-pvp { font-family: var(--display); font-weight: 900; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--red); text-shadow: 0 0 12px var(--red-glow); } .brand-badge { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 8px; margin-left: 8px; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__link { position: relative; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--muted); border-radius: 7px; white-space: nowrap; transition: color .15s, background .15s; } .nav__link:hover { color: var(--ink); } .nav__link.is-active { color: var(--ink); } .nav__link.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--red); border-radius: 2px; } .nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; min-width: 210px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--muted-2); } .search svg { width: 16px; height: 16px; flex: none; } .search input { border: none; background: none; outline: none; color: var(--ink); font-size: 13px; width: 100%; min-width: 0; } .search input::placeholder { color: var(--muted-2); } .search kbd { font-family: var(--mono); font-size: 11px; color: var(--muted-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px; } .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); transition: color .15s, border-color .15s, background .15s; } .icon-btn:hover { color: var(--ink); border-color: var(--line-strong); } .icon-btn svg { width: 17px; height: 17px; } .pill-select { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); } .pill-select svg { width: 14px; height: 14px; } .basket-btn { position: relative; } .basket-btn__count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--red); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 700; border-radius: 9px; display: grid; place-items: center; border: 2px solid var(--bg); } .avatar { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-strong); image-rendering: pixelated; background: var(--panel-2); padding: 0; display: grid; place-items: center; } /* account menu (logged-in avatar dropdown) */ .account { position: relative; } .account__menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 224px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; z-index: 80; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; box-shadow: 0 20px 44px -22px rgba(0,0,0,0.8); } .account:hover .account__menu, .account:focus-within .account__menu { opacity: 1; visibility: visible; transform: translateY(0); } .account__head { display: flex; align-items: center; gap: 11px; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .account__face { width: 38px; height: 38px; border-radius: 8px; image-rendering: pixelated; } .account__label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); } .account__name { color: var(--ink); font-size: 14px; } .account__item { display: block; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--muted); } .account__item:hover { background: var(--bg-2); color: var(--red); } .nav__burger { display: none; } /* ========================================================================= TICKER ========================================================================= */ .ticker { position: relative; z-index: 1; background: linear-gradient(90deg, #120a0b, #160c0d 50%, #120a0b); border-block: 1px solid var(--line); overflow: hidden; height: 40px; display: flex; align-items: center; } .ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; } .ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .ticker::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } .ticker__track { display: flex; align-items: center; gap: 0; white-space: nowrap; animation: ticker 42s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__item { display: inline-flex; align-items: center; gap: 9px; padding: 0 26px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); } .ticker__item b { color: var(--ink); font-weight: 700; } .ticker__item .text-red { font-weight: 700; } .ticker__item .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); opacity: .7; } .ticker__cart { width: 13px; height: 13px; color: var(--red); } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================= BUTTONS ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 26px; font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--radius-sm); white-space: nowrap; transition: transform .12s, box-shadow .18s, background .18s, border-color .18s; } .btn svg { width: 16px; height: 16px; } .btn--primary { background: linear-gradient(180deg, var(--red-bright), var(--red-deep)); color: #fff; box-shadow: 0 6px 22px -8px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.18); } .btn--primary:hover { box-shadow: 0 10px 30px -8px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.22); transform: translateY(-1px); } .btn--ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); } .btn--ghost:hover { background: var(--panel-2); border-color: var(--red); color: #fff; } .btn--block { width: 100%; } .btn--sm { height: 38px; padding: 0 16px; font-size: 11px; } .btn--lg { height: 52px; padding: 0 32px; font-size: 14px; } /* ========================================================================= BADGES / CHIPS ========================================================================= */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--red-soft); background: var(--red-soft); color: var(--red); } .badge .live { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 var(--red-glow); animation: live 1.8s infinite; } @keyframes live { 0% { box-shadow: 0 0 0 0 var(--red-glow); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); } .chip--green { color: var(--green); border-color: rgba(76,196,106,0.25); background: rgba(76,196,106,0.08); } .chip--gold { color: var(--gold); border-color: rgba(245,177,61,0.25); background: rgba(245,177,61,0.08); } .tag-sale { position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; background: var(--red); color: #fff; padding: 4px 9px; border-radius: 6px; box-shadow: 0 4px 14px -4px var(--red-glow); } /* ========================================================================= SECTION HEADINGS (GLOBAL-RANKINGS style) ========================================================================= */ .shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; } .shead__title { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3.2vw, 37px); line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } .shead__title b { color: var(--red); font-weight: 800; } .shead__sub { color: var(--muted); font-size: 14px; margin-top: 8px; } .shead__link { color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center; } .shead__link:hover { color: var(--red); } .shead__link svg { width: 14px; height: 14px; } /* ========================================================================= HERO ========================================================================= */ .hero { position: relative; padding-block: 70px 84px; } .hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; } .hero__headline { font-family: var(--display); font-weight: 900; font-size: clamp(42px, 5.8vw, 83px); line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; margin: 22px 0 0; } .hero__headline .w-white { color: var(--ink); } .hero__headline .w-red { color: var(--red); } .hero__headline .w-out { color: transparent; -webkit-text-stroke: 2px var(--red); text-stroke: 2px var(--red); } .hero__kicker { margin: 26px 0 0; font-family: var(--mono); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); font-size: 14px; } .hero__lead { margin: 14px 0 0; color: var(--muted); font-size: 16px; max-width: 44ch; } .stats { display: flex; gap: 46px; margin-top: 36px; } .stat__num { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--red); } .stat__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 8px; } .hero__cta { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; } /* hero side panel */ .side-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .side-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); } .side-head h3 { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .side-list { display: flex; flex-direction: column; gap: 12px; } /* recent-purchase / result card */ .rcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; transition: border-color .15s, background .15s; } .rcard:hover { border-color: var(--line-strong); background: var(--card-hover); } .rcard__top { display: flex; align-items: center; justify-content: space-between; } .rcard__cat { font-size: 13px; font-weight: 700; color: var(--ink); } .rcard__meta { display: flex; align-items: center; gap: 9px; } .rcard__time { font-family: var(--mono); font-size: 11px; color: var(--muted-2); } .rcard__body { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } .rcard__player { display: flex; align-items: center; gap: 11px; } .rcard__player .avatar { width: 30px; height: 30px; border-radius: 6px; } .rcard__name { font-size: 14px; font-weight: 700; } .rcard__note { font-size: 12px; color: var(--muted); } .rcard__note .text-red { font-weight: 700; } .rcard__gain { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--green); } /* scroll cue */ .scrollcue { text-align: center; padding: 14px 0 40px; } .scrollcue span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-2); } .scrollcue svg { width: 22px; height: 22px; color: var(--red); margin-top: 6px; animation: bob 2s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ========================================================================= PACKAGE CARD (style 2: icon left, full-width red CTA) ========================================================================= */ .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pkg-grid--4 { grid-template-columns: repeat(4, 1fr); } .pkg { position: relative; background: linear-gradient(180deg, var(--card), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 18px; transition: border-color .16s, transform .16s, box-shadow .16s; overflow: hidden; } .pkg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 60% at 50% -10%, var(--red-soft), transparent 60%); opacity: 0; transition: opacity .2s; pointer-events: none; } .pkg:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 18px 40px -22px var(--red-glow); } .pkg:hover::after { opacity: 1; } .pkg.is-featured { border-color: var(--red-soft); } .pkg__head { display: flex; align-items: center; gap: 14px; } .pkg__icon { width: 56px; height: 56px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line-strong); image-rendering: pixelated; overflow: hidden; } .pkg__icon img { width: 100%; height: 100%; object-fit: cover; } .pkg__title { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; } .pkg__sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .pkg__desc { color: var(--muted); font-size: 13.5px; line-height: 1.5; min-height: 42px; } .pkg__perks { display: flex; flex-direction: column; gap: 7px; } .pkg__perk { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); } .pkg__perk svg { width: 14px; height: 14px; color: var(--red); flex: none; } .pkg__foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; } .pkg__price { display: flex; align-items: baseline; gap: 8px; } .pkg__price .amt { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--ink); line-height: 1; } .pkg__price .cyc { font-family: var(--mono); font-size: 12px; color: var(--muted); } .pkg__price .was { font-family: var(--mono); font-size: 13px; color: var(--muted-2); text-decoration: line-through; } .pkg__price.is-red .amt { color: var(--red); } /* ========================================================================= CATEGORY PAGE ========================================================================= */ .cat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: start; } .catnav { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 4px; } .catnav__h { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); padding: 0 12px 10px; } .catnav__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 14px; border: 1px solid transparent; transition: .14s; } .catnav__item:hover { color: var(--ink); background: var(--panel); } .catnav__item.is-active { color: #fff; background: var(--panel-2); border-color: var(--line); } .catnav__item.is-active .catnav__ic { color: var(--red); } .catnav__item span.left { display: flex; align-items: center; gap: 10px; } .catnav__ic { width: 16px; height: 16px; color: var(--muted-2); } .catnav__count { font-family: var(--mono); font-size: 11px; color: var(--muted-2); } .cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; } .select { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .select svg { width: 14px; height: 14px; color: var(--muted); } /* ========================================================================= PACKAGE DETAIL ========================================================================= */ .pdp { display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: start; } .pdp__media { position: relative; aspect-ratio: 16/9; max-height: 400px; border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, var(--red-soft), transparent 60%), var(--panel); display: grid; place-items: center; overflow: hidden; } .pdp__media img { width: 56%; image-rendering: pixelated; filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)); } .pdp__title { font-family: var(--display); font-weight: 900; font-size: clamp(27px,3.5vw,45px); line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; } .pdp__crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted-2); text-transform: uppercase; margin-bottom: 14px; display: flex; gap: 8px; } .pdp__crumbs a:hover { color: var(--red); } .prose { color: var(--muted); font-size: 15px; line-height: 1.7; } .prose h3 { color: var(--ink); font-size: 18px; margin: 26px 0 10px; } .prose ul { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; } .prose ul li { display: flex; gap: 10px; align-items: flex-start; } .prose ul li svg { width: 16px; height: 16px; color: var(--red); flex: none; margin-top: 3px; } .buybox { position: sticky; top: calc(var(--nav-h) + 20px); background: linear-gradient(180deg,var(--card),var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .buybox__price { display: flex; align-items: baseline; gap: 10px; } .buybox__price .amt { font-family: var(--display); font-weight: 800; font-size: 37px; line-height: 1; color: var(--red); } .buybox__price .cyc { font-family: var(--mono); font-size: 13px; color: var(--muted); } .field { margin-top: 20px; } .field__label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; display: block; } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; } .qty button { width: 40px; height: 42px; font-size: 18px; color: var(--muted); display: grid; place-items: center; } .qty button:hover { color: var(--red); background: var(--panel); } .qty input { width: 52px; height: 42px; text-align: center; background: var(--panel); border: none; border-inline: 1px solid var(--line-strong); color: var(--ink); font-family: var(--mono); font-weight: 700; outline: none; } .optgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .opt { padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; transition: .14s; } .opt:hover { border-color: var(--red); } .opt.is-sel { border-color: var(--red); background: var(--red-soft); } .opt__name { font-weight: 700; font-size: 14px; } .opt__price { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 2px; } .buybox__meta { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); } .buybox__metarow { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); } .buybox__metarow b { color: var(--ink); font-family: var(--mono); } /* ========================================================================= BASKET ========================================================================= */ .basket-layout { display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: start; } .lineitems { display: flex; flex-direction: column; gap: 12px; } .lineitem { display: grid; grid-template-columns: 60px 1fr auto; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; } .lineitem__icon { width: 60px; height: 60px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-strong); overflow: hidden; image-rendering: pixelated; } .lineitem__name { font-weight: 800; font-size: 16px; } .lineitem__sub { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .lineitem__right { display: flex; align-items: center; gap: 22px; } .lineitem__price { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--ink); } .lineitem__remove { color: var(--muted-2); width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; border: 1px solid transparent; } .lineitem__remove:hover { color: var(--red); border-color: var(--line); background: var(--panel); } .lineitem__remove svg { width: 16px; height: 16px; } .summary { position: sticky; top: calc(var(--nav-h) + 20px); background: linear-gradient(180deg,var(--card),var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .summary h3 { margin: 0 0 18px; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: 0.02em; text-transform: uppercase; } .summary__row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; color: var(--muted); font-size: 14px; } .summary__row b { color: var(--ink); font-family: var(--mono); } .summary__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--line); } .summary__total .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .summary__total .amt { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--red); line-height: 1; } .coupon { display: flex; gap: 8px; margin: 18px 0; } .coupon input { flex: 1; height: 42px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); outline: none; font-size: 13px; } .coupon input::placeholder { color: var(--muted-2); } .empty { text-align: center; padding: 70px 20px; } .empty svg { width: 54px; height: 54px; color: var(--dim); margin-bottom: 18px; } .empty h3 { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 8px; } .empty p { color: var(--muted); margin: 0 0 22px; } /* ========================================================================= CHECKOUT ========================================================================= */ .checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: start; } .cform { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .cform + .cform { margin-top: 18px; } .cform__h { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; } .cform__num { width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--mono); font-weight: 700; font-size: 13px; display: grid; place-items: center; flex: none; } .cform__h h3 { margin: 0; font-size: 17px; font-weight: 800; } .input { width: 100%; height: 46px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); outline: none; font-size: 14px; transition: border-color .15s; } .input:focus { border-color: var(--red); } .input::placeholder { color: var(--muted-2); } .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .paymethods { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: 10px; } .paymethod { height: 56px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); cursor: pointer; transition: .14s; color: var(--muted); } .paymethod:hover, .paymethod.is-sel { border-color: var(--red); color: #fff; background: var(--panel-2); } .paymethod span { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; } .secure-note { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12.5px; margin-top: 18px; } .secure-note svg { width: 15px; height: 15px; color: var(--green); } /* ========================================================================= FOOTER ========================================================================= */ .footer { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 40px; padding-block: 50px 30px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .footer__about { max-width: 30ch; } .footer__about p { color: var(--muted); font-size: 13.5px; margin: 14px 0 0; } .footer__col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; } .footer__col a { display: block; color: var(--muted); font-size: 14px; padding: 5px 0; } .footer__col a:hover { color: var(--red); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; } .footer__bottom p { color: var(--muted-2); font-size: 12.5px; margin: 0; } .footer__pays { display: flex; gap: 8px; } .footer__pay { height: 28px; padding: 0 10px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--muted-2); letter-spacing: .04em; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1080px) { .hero__grid { grid-template-columns: 1fr; gap: 44px; } .pkg-grid, .pkg-grid--4 { grid-template-columns: repeat(2, 1fr); } .pdp, .basket-layout, .checkout-layout { grid-template-columns: 1fr; } .buybox, .summary { position: static; } .cat-layout { grid-template-columns: 1fr; } .catnav { position: static; flex-direction: row; flex-wrap: wrap; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .search { display: none; } .stats { gap: 30px; } } @media (max-width: 620px) { .wrap { width: calc(100% - 32px); } .pkg-grid, .pkg-grid--4 { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 28px; } .hero__headline { font-size: 17vw; } .stats { flex-wrap: wrap; } } /* ========================================================================= TWEAKABLE — rank hover effects (driven by [data-rank-hover] on ) ========================================================================= */ .pkg { transform-style: preserve-3d; will-change: transform; } /* --- Shine sweep (also layered into Neon Pulse) --- */ [data-rank-hover="shine"] #ranks .pkg::before, [data-rank-hover="pulse"] #ranks .pkg::before { content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.20) 48%, rgba(255,255,255,0.05) 54%, transparent 64%); transform: translateX(-130%); transition: transform .8s cubic-bezier(.2,.7,.3,1); } [data-rank-hover="shine"] #ranks .pkg:hover::before, [data-rank-hover="pulse"] #ranks .pkg:hover::before { transform: translateX(130%); } /* --- Neon pulse (glow throb + shine sweep) --- */ [data-rank-hover="pulse"] #ranks .pkg:hover { border-color: var(--red); transform: translateY(-3px); animation: pkg-pulse 1.15s ease-in-out infinite; } @keyframes pkg-pulse { 0%, 100% { box-shadow: 0 14px 32px -22px var(--red-glow), 0 0 0 0 rgba(226,59,70,0.0); } 50% { box-shadow: 0 0 30px -2px var(--red-glow), 0 0 0 1.5px var(--red); } } /* --- 3D tilt (JS sets the per-card transform; here we just prep the stage) --- */ [data-rank-hover="tilt"] #ranks .pkg-grid { perspective: 1000px; } [data-rank-hover="tilt"] #ranks .pkg { transition: transform .12s ease, box-shadow .18s, border-color .16s; } [data-rank-hover="tilt"] #ranks .pkg:hover { transform: none; } /* overridden inline by JS */ [data-rank-hover="tilt"] #ranks .pkg.is-tilting { border-color: var(--red); box-shadow: 0 30px 60px -30px var(--red-glow); } [data-rank-hover="tilt"] #ranks .pkg.is-tilting::after { opacity: 1; } .pkg__glare { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s; background: radial-gradient(220px 220px at var(--gx,50%) var(--gy,0%), rgba(255,255,255,0.16), transparent 60%); } [data-rank-hover="tilt"] #ranks .pkg.is-tilting .pkg__glare { opacity: 1; } /* ========================================================================= TWEAKABLE — order-throughput layout (driven by data-* on ) ========================================================================= */ /* Hero density: condensed pulls products up the page; minimal trims it to a band */ [data-hero="condensed"] .hero { padding-block: 40px 44px; } [data-hero="condensed"] .hero__headline { font-size: clamp(40px, 5vw, 72px); } [data-hero="condensed"] .hero__lead { display: none; } [data-hero="condensed"] .stats { margin-top: 26px; } [data-hero="condensed"] .scrollcue { display: none; } [data-hero="minimal"] .hero { padding-block: 30px 30px; } [data-hero="minimal"] .hero__grid { grid-template-columns: 1fr; } [data-hero="minimal"] .hero__side, [data-hero="minimal"] .hero__lead, [data-hero="minimal"] .hero__kicker, [data-hero="minimal"] .scrollcue { display: none; } [data-hero="minimal"] .hero__headline { font-size: clamp(34px, 4vw, 56px); margin-top: 16px; } [data-hero="minimal"] .stats { margin-top: 22px; gap: 36px; } [data-hero="minimal"] .hero__cta { margin-top: 24px; } /* Grid density: compact shows more products per screen (4-up, tighter) */ [data-grid="compact"] #ranks .pkg-grid { grid-template-columns: repeat(4, 1fr); } [data-grid="compact"] #ranks .pkg { padding: 16px; gap: 12px; } [data-grid="compact"] #ranks .pkg__icon { width: 44px; height: 44px; } [data-grid="compact"] #ranks .pkg__title { font-size: 15px; } [data-grid="compact"] #ranks .pkg__desc { display: none; } [data-grid="compact"] #ranks .pkg__perks { display: none; } [data-grid="compact"] #ranks .pkg__price .amt { font-size: 24px; } @media (max-width: 1080px) { [data-grid="compact"] #ranks .pkg-grid { grid-template-columns: repeat(2, 1fr); } } /* Spotlight best value: anchor the eye on the featured rank */ [data-spotlight="on"] #ranks .pkg.is-featured { border-color: var(--red); box-shadow: 0 26px 60px -26px var(--red-glow), inset 0 0 0 1px var(--red); transform: translateY(-6px) scale(1.025); } [data-spotlight="on"] #ranks .pkg.is-featured:hover { transform: translateY(-9px) scale(1.03); } /* Urgency cues: scarcity / social-proof micro-labels under the price */ .pkg__urgency { display: none; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--gold); } .pkg__urgency .flame { width: 12px; height: 12px; color: var(--red); flex: none; } [data-urgency="on"] .pkg__urgency { display: flex; } [data-grid="compact"] .pkg__urgency { display: none !important; } /* ========================================================================= STICKY ORDER BAR (throughput) — shown via [data-sticky="on"] ========================================================================= */ .orderbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.7,.3,1); background: rgba(13,8,9,0.86); backdrop-filter: blur(16px); border-top: 1px solid var(--line-strong); box-shadow: 0 -18px 40px -24px rgba(0,0,0,0.8); } [data-sticky="on"] .orderbar.is-active { transform: translateY(0); } .orderbar__inner { display: flex; align-items: center; gap: 22px; height: 70px; } .orderbar__cart { display: flex; align-items: center; gap: 12px; } .orderbar__cart svg { width: 22px; height: 22px; color: var(--red); } .orderbar__count { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .orderbar__count b { color: var(--ink); } .orderbar__total { margin-left: auto; display: flex; align-items: baseline; gap: 10px; } .orderbar__total .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .orderbar__total .amt { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--red); line-height: 1; } .orderbar__actions { display: flex; gap: 10px; } [data-sticky="on"] .footer { padding-bottom: 100px; } @media (max-width: 620px) { .orderbar__inner { height: auto; padding-block: 12px; flex-wrap: wrap; gap: 12px; } .orderbar__total { margin-left: 0; } .orderbar__actions { width: 100%; } .orderbar__actions .btn { flex: 1; } } /* ========================================================================= Production additions (Tebex template) New components introduced when wiring real Tebex pages. ========================================================================= */ /* logo image in the navbar / footer (store.logo) */ .brand__logo { height: 40px; width: auto; display: block; } /* toast surfaced via page.message */ .toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; max-width: min(92vw, 460px); background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-strong); border-left: 3px solid var(--red); border-radius: 10px; padding: 12px 18px; font: 600 13.5px/1.45 var(--sans); box-shadow: 0 18px 50px rgba(0,0,0,.5); } .toast--success { border-left-color: var(--green); } .toast--error { border-left-color: var(--red); } /* hero side rendered as a single featured card */ .hero__side--card { display: flex; flex-direction: column; gap: 14px; } .hero__side--card .pkg { margin: 0; } /* ========================================================================= HOMEPAGE — greeting, trust strip, quick-start, value props, categories, CTA ========================================================================= */ /* featured package (hero side, injected from the top category page) */ .hero__featured { display: flex; flex-direction: column; gap: 14px; } .hero__featured-slot .pkg { margin: 0; cursor: pointer; border-color: var(--line-strong); box-shadow: 0 0 0 1px var(--red-soft), 0 22px 48px -30px rgba(0,0,0,0.85); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .hero__featured-slot .pkg:hover { transform: translateY(-4px) scale(1.015); border-color: var(--red); box-shadow: 0 0 0 1px var(--red-glow), 0 34px 66px -28px rgba(0,0,0,0.92); } /* clamp by default; reveal the full description on hover */ .hero__featured-slot .pkg__desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; transition: -webkit-line-clamp .2s ease; } .hero__featured-slot .pkg:hover .pkg__desc { -webkit-line-clamp: 999; } /* signed-in greeting chip */ .welcome { display: flex; width: fit-content; align-items: center; gap: 10px; margin-top: 16px; padding: 7px 14px 7px 7px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 100px; font-size: 13.5px; color: var(--muted); } .welcome img { width: 26px; height: 26px; border-radius: 6px; image-rendering: pixelated; } .welcome b { color: var(--ink); font-weight: 700; } /* hero trust strip */ .hero__trust { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 30px 0 0; padding: 0; list-style: none; } .hero__trust li { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); } .hero__trust svg { width: 16px; height: 16px; color: var(--red); flex: none; } /* quick-start card (hero side) */ .qcard { background: linear-gradient(180deg, var(--card), var(--bg-2)); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 24px; } .qsteps { list-style: none; margin: 4px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 16px; } .qsteps li { display: flex; gap: 14px; align-items: flex-start; } .qsteps__n { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); font-family: var(--mono); font-weight: 700; font-size: 13px; } .qsteps li b { display: block; font-size: 14.5px; color: var(--ink); } .qsteps li span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.5; } .qcard__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--muted-2); } .qcard__note svg { width: 14px; height: 14px; } /* value-prop band */ .features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: border-color .15s ease, transform .15s ease; } .feature:hover { border-color: var(--line-strong); transform: translateY(-2px); } .feature__ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); margin-bottom: 16px; } .feature__ic svg { width: 22px; height: 22px; } .feature h4 { margin: 0 0 8px; font-size: 15px; color: var(--ink); } .feature p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; } /* category cards */ .catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .catcard { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .catcard:hover { border-color: var(--red); background: var(--card-hover); transform: translateY(-2px); } .catcard__ic { flex: none; width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); } .catcard__ic svg { width: 24px; height: 24px; } .catcard__body { flex: 1; min-width: 0; } .catcard__name { font-size: 16px; font-weight: 700; color: var(--ink); } .catcard__desc { margin: 3px 0 0; font-size: 13px; color: var(--muted); } .catcard__arrow { width: 18px; height: 18px; color: var(--muted-2); flex: none; transition: color .15s ease, transform .15s ease; } .catcard:hover .catcard__arrow { color: var(--red); transform: translateX(3px); } /* closing CTA band */ .ctaband { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 40px; border-radius: var(--radius); background: radial-gradient(600px 200px at 12% -40%, var(--red-soft), transparent 70%), linear-gradient(180deg, var(--card), var(--bg-2)); border: 1px solid var(--line-strong); } .ctaband__title { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 27px; line-height: 1.1; letter-spacing: 0.02em; margin: 0; } .ctaband__text p { margin: 12px 0 0; color: var(--muted); font-size: 15px; } @media (max-width: 1080px) { .features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .features { grid-template-columns: 1fr; } .catgrid { grid-template-columns: 1fr; } .ctaband { padding: 28px; } .ctaband__title { font-size: 22px; } .hero__trust { gap: 10px 18px; } } /* clickable category tile (link variant of rcard) */ .rcard--link { display: flex; align-items: center; gap: 16px; padding: 20px; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .rcard--link:hover { border-color: var(--red); background: var(--card-hover); } /* list display type for categories */ .pkg-grid--list { grid-template-columns: 1fr; } .pkg-grid--list .pkg { flex-direction: row; align-items: center; } /* package video embed */ .pdp__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-sm); } /* read-only line item (checkout summary) */ .lineitem--readonly { opacity: 1; } .lineitem--readonly .lineitem__right { text-align: right; } /* checkout summary order panel reuses .cform + .summary */ .checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; } @media (max-width: 860px) { .checkout-layout { grid-template-columns: 1fr; } } /* sign-in page */ .auth { min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: 56px 24px; } .auth__card { width: 100%; max-width: 430px; text-align: center; background: linear-gradient(180deg, var(--card), var(--bg-2)); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 36px 32px; box-shadow: 0 0 0 1px var(--red-soft), 0 30px 70px -40px rgba(0,0,0,0.9); } .auth__brand { width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 14px; background: var(--red-soft); display: grid; place-items: center; color: var(--red); overflow: hidden; } .auth__brand img { width: 100%; height: 100%; object-fit: cover; } .auth__brand svg { width: 30px; height: 30px; } .auth__title { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: 1.08; letter-spacing: 0.01em; margin: 0; } .auth__sub { color: var(--muted); font-size: 14px; margin: 10px 0 26px; } .auth__sub b { color: var(--ink); font-weight: 700; } .auth__form { text-align: left; } .auth__note { justify-content: center; margin-top: 20px; } /* ========================================================================= OPTIONS / VARIABLES PAGE (Tebex default markup — Discord identify, choose server, custom price, text variables). Styled to match the store theme. ========================================================================= */ .store-product-options { width: 100%; max-width: 480px; margin: 56px auto; background: linear-gradient(180deg, var(--card), var(--bg-2)); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 32px; box-shadow: 0 0 0 1px var(--red-soft), 0 30px 70px -40px rgba(0,0,0,0.9); } .store-product-options .product-title { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 21px; line-height: 1.15; letter-spacing: 0.02em; margin: 0; color: var(--ink); } .store-form-options .field { margin-top: 18px; } .store-form-options .field p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 12px; } .store-form-options select, .store-form-options input[type="text"], .store-form-options input[type="number"] { width: 100%; height: 46px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); outline: none; font-size: 14px; font-family: var(--sans); transition: border-color .15s; } .store-form-options select:focus, .store-form-options input:focus { border-color: var(--red); } .store-form-options select option { background: var(--panel); color: var(--ink); } .store-form-options .field-inline { display: flex; align-items: center; gap: 10px; color: var(--muted); font-family: var(--mono); font-size: 13px; } .store-form-options .field-inline input { flex: 1; } .store-product-options .actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; align-items: center; } .store-product-options .btn-primary, .store-product-options .btn-secondary { flex: 1 1 auto; min-width: 150px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; } .store-product-options .btn-primary { background: linear-gradient(180deg, var(--red-bright), var(--red-deep)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); } .store-product-options .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -8px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.22); } .store-product-options .btn-secondary { background: var(--panel); color: var(--ink); border-color: var(--line-strong); } .store-product-options .btn-secondary:hover { border-color: var(--red); color: #fff; } .store-product-options .link-text { display: inline-block; margin-top: 8px; color: var(--muted); font-size: 13px; } .store-product-options .link-text:hover { color: var(--red); } @media (max-width: 620px) { .store-product-options { margin: 32px auto; padding: 26px; } .store-product-options .btn-primary, .store-product-options .btn-secondary { flex-basis: 100%; } } /* mobile nav drawer. 1270px, not 880px: the category links + search + right-hand controls simply do not fit below that. Measured on the live nav — at 900px the bar overflowed its container by 218px and scrolled horizontally, and that was BEFORE the Main Site button existed (with it, 352px). Anything narrower than 1270 gets the burger. Above it, .wrap is capped at --maxw so the row fits at every larger width. */ @media (max-width: 1270px) { .nav__links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 0; background: var(--panel); border-bottom: 1px solid var(--line); display: none; } .nav__links.is-open { display: flex; } .nav__burger { display: grid; } } /* nav fits small screens. .nav__inner is flex-nowrap and every child is white-space:nowrap, so nothing reflows — each item has to shrink or hide or the whole bar overflows the viewport. Measured against the live nav: at 375px the header overflowed by 61px even before the Main Site button was added (and by 196px with it). Widths below are the ones that actually made it fit, tier by tier. */ @media (max-width: 860px) { .nav__inner { gap: 12px; } .nav__right { gap: 8px; } .brand-badge { display: none; } .cur__btn > svg:first-of-type { display: none; } /* globe; keep code + caret */ .nav__home-label { display: none; } /* icon-only; aria-label carries the name */ .nav__home { padding: 0 10px; height: 32px; } .icon-btn, .avatar { width: 32px; height: 32px; } } @media (max-width: 420px) { .nav__right { gap: 6px; } .cur__btn { padding: 0 8px; } .cur__caret { display: none; } /* code alone is enough this narrow */ .brand { gap: 7px; } .brand__name { font-size: 13px; } /* .wrap's 48px gutter is most of the budget at this width — halve it, nav only */ .nav .wrap { width: min(100% - 24px, var(--maxw)); } } @media (max-width: 370px) { .brand__name { display: none; } /* logo mark only */ }