/* ================================================== ELOBOOSTLEAGUE · LOL BOOSTING SUBPAGE Extends homepage.css (shared tokens, nav, footer, buttons, section heads, FAQ, reviews, reveal). This sheet adds: page hero, product menu, the rank calculator, order panel, extra options, note box, review-submit, SEO content blocks, CTA strip. ================================================== */ /* The order page's display face is 'Rajdhani' (matches the design), shipped in the theme at assets/fonts/League.otf. Drives headings + the big calculator numbers (dial value, prices, rank names) via --font-display below. */ /* League.otf @font-face removed — display font is now Google Rajdhani (loaded via the page ) */ /* ---- subpage-local knobs (tweakable) ---- Do NOT re-declare --font-display / --gold / --gold-deep / --bar here. Those are owned by the .owb-rd token block (home-page.css + f3-tokens.css). A :root copy split the palette — gold rendered yellow inside .owb-rd but the old peach on :root, and font-display pinned Rajdhani outside .owb-rd — i.e. the reported colliding styles. Only page-local knobs + tier colours belong here. */ :root { --calc-skin: classic; /* calculator version */ --xopt-skin: chips; /* extra-options version */ --menu-skin: rail; /* product-menu version */ --tier-iron:#8a7d72; --tier-bronze:#b3744a; --tier-silver:#9fb1c2; --tier-gold:#e3ad36; --tier-platinum:#3ec2b4; --tier-emerald:#27ad65; --tier-diamond:#5b93e6; --tier-master:#9a5ad1; --tier-grandmaster:#e0563f; --tier-challenger:#43b6ec; } /* ================================================== PAGE HERO · vhero "Cream compact" (handoff hero 6), Frost colourway -------------------------------------------------- Cool-white page bg + a brand diagonal wedge that bleeds to the right viewport edge, holding a centred Top 500 crest card. Ported from valorant-hero.css. The handoff's per-hero scale --k (0.58 for hero 6) is multiplied by the site's 1.2 scale → 0.696, so every calc(Npx * var(--k)) lands at 1.2×; fixed gutters/gaps are written at 1.2× directly so the hero shares the calculator's 1584 / 28.8 box. ================================================== */ .vhero { --k: 0.696; /* 0.58 (hero 6) × 1.2 site scale */ position: relative; overflow: hidden; color: var(--ink); background: radial-gradient(1003.2px 580.8px at 88% -20%, rgba(35,116,196,0.16), transparent 60%), linear-gradient(160deg, #ffffff 0%, #f7f9fc 55%, #eef1f7 100%); border-bottom: 1.2px solid #ececf0; --cc-acc: var(--royal); --cc-wedge: linear-gradient(135deg, var(--royal) 0%, var(--royal-deep) 100%); --cc-glow: rgba(35,116,196,0.55); } .vhero h1 { font-family: var(--font-display); font-weight: 700; font-size: min(calc(59.4px * var(--k)), 12vw); letter-spacing: -0.03em; line-height: 0.98; text-wrap: balance; } .vhero h1 em { font-style: normal; color: var(--cc-acc); } .vhero-lead { font-family: var(--font-body); font-size: max(17.16px, calc(16.5px * var(--k))); font-weight: 400; color: #4a4e57; line-height: 1.5; max-width: 686.4px; } .vhero-eyebrow { display: inline-flex; align-items: center; gap: 11.88px; font-family: var(--font-ui); font-size: 14.52px; font-weight: 600; letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: #8b909c; } .vhero-eyebrow svg { width: 18.48px; height: 18.48px; color: var(--cc-acc); } .hs-copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(19.8px * var(--k)); } /* inline perks row — items split by a left border, first has none */ .vhero-frow { display: flex; flex-wrap: wrap; align-items: center; margin-top: 5.28px; } .vhero-frow .fi { display: inline-flex; align-items: center; gap: 10.56px; padding: 2.64px 19.8px; font-family: var(--font-ui); font-size: 15.84px; font-weight: 600; letter-spacing: calc(0.03em * var(--tracking)); color: #2a2e36; border-left: 1.2px solid #e2e4ea; } .vhero-frow .fi:first-child { padding-left: 0; border-left: 0; } .vhero-frow svg { width: 19.8px; height: 19.8px; color: var(--cc-acc); } /* crest-card / diagonal wedge system */ .cc-inner { position: relative; z-index: 2; max-width: 1742.4px; margin: 0 auto; padding: calc(63.8px * var(--k)) 31.68px; padding-bottom: calc(63.8px * var(--k) + 10.56px); display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 39.6px; align-items: stretch; } .cc-panel { position: relative; min-height: calc(330px * var(--k)); display: flex; align-items: center; justify-content: center; } .cc-slash { position: absolute; z-index: 1; top: calc(-63.8px * var(--k)); bottom: calc(-63.8px * var(--k) - 10.56px); left: 18.48px; right: min(-52.8px, calc(818.4px - 50vw)); background: var(--cc-wedge); clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%); box-shadow: 0 36px 96px -40px var(--cc-glow); } .cc-slash::after { content: ''; position: absolute; inset: 0; clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%); background-image: radial-gradient(rgba(255,255,255,0.13) 1.32px, transparent 1.32px); background-size: 26.4px 26.4px; opacity: 0.5; mask-image: linear-gradient(115deg, #000, transparent 75%); } .cc-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: calc(11px * var(--k)); padding: calc(24.2px * var(--k)); text-align: center; } .cc-crest { width: calc(154px * var(--k)); height: calc(154px * var(--k)); filter: drop-shadow(0 18.48px 39.6px rgba(0,0,0,0.4)); } /* Brand fox crest variant (like EBL) — the SVG fox scales by width, natural height. */ .cc-crest-brand { width: calc(177px * var(--k)); height: auto; } .cc-tag { font-family: var(--font-display); font-weight: 800; font-size: calc(35.2px * var(--k)); letter-spacing: 0.02em; color: #fff; line-height: 1; } .cc-sub { font-family: var(--font-ui); font-size: max(13.2px, calc(12.1px * var(--k))); font-weight: 600; letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: rgba(255,255,255,0.88); } @keyframes vhIn { from { opacity: 0; transform: translateY(21.12px); } to { opacity: 1; transform: none; } } @keyframes perkIn { from { opacity: 0; transform: translateY(13.2px) scale(0.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .cc-inner { animation: vhIn 0.55s var(--ease-out) both; } .vhero-frow .fi { opacity: 0; animation: perkIn 0.5s var(--ease-out) forwards; } .hs-copy .vhero-frow > :nth-child(1) { animation-delay: 0.18s; } .hs-copy .vhero-frow > :nth-child(2) { animation-delay: 0.30s; } .hs-copy .vhero-frow > :nth-child(3) { animation-delay: 0.42s; } .hs-copy .vhero-frow > :nth-child(4) { animation-delay: 0.54s; } } /* ---- responsive · stack ≤1104px (handoff 920 × 1.2) ---- */ @media (max-width: 1104px) { .cc-inner { grid-template-columns: 1fr; gap: 34.32px; } .cc-panel { order: -1; min-height: 0; } .cc-slash { top: calc(-17.6px * var(--k)); bottom: calc(-17.6px * var(--k)); left: -31.68px; right: -31.68px; clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); } .cc-card { padding: calc(33px * var(--k)) calc(22px * var(--k)); } } /* ================================================== CALCULATOR LAYOUT ================================================== */ .calc-section { background: var(--bg); padding: 47.52px 31.68px 79.2px; } .calc-layout { /* Match the hero + the sections below (.cc-inner / .xopts-wrap / .note-section / .rev-trust are all 1742.4) so the calculator + order panel line up vertically with everything else on the page instead of sitting ~31px narrower. */ max-width: 1742.4px; margin: 0 auto; display: grid; grid-template-columns: 1fr 475.2px; gap: 29.04px; align-items: start; } @media (max-width: 1296px) { .calc-layout { grid-template-columns: 1fr; } } .calc-main { display:flex; flex-direction:column; gap: 23.76px; min-width: 0; } /* lift the whole calculator up so it overlaps the hero a touch */ .calc-section { margin-top: -36.96px; position: relative; z-index: 5; } /* ================================================== PRODUCT MENU (default: rail of pills) ================================================== */ .prod-menu { background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 5.28px); box-shadow: var(--shadow-pop); padding: 13.2px; display: flex; gap: 10.56px; flex-wrap: wrap; } /* default rail: 2 big tabs on the top row (50% each), the rest wrap below */ .prod-menu .prod-tab.big { flex: 1 1 calc(50% - 10.56px); } .prod-menu .prod-tab.big .prod-tab-ico { width: 52.8px; height: 52.8px; } .prod-menu .prod-tab.big .prod-tab-ico svg { width: 27.72px; height: 27.72px; } .prod-menu .prod-tab.big .prod-tab-name { font-size: 21.12px; } .prod-menu .prod-tab:not(.big) { flex: 1 1 0; } .prod-tab { flex: 1 1 auto; position: relative; display: flex; align-items: center; gap: 14.52px; padding: 15.84px 18.48px; border-radius: var(--r); border: 1.2px solid transparent; background: var(--bg-soft); cursor: pointer; transition: background 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out), box-shadow 200ms ease; text-align: left; min-width: 0; } .prod-tab:hover { background: var(--royal-tint); border-color: var(--royal-soft); transform: translateY(-1.32px); } .prod-tab.is-active { background: linear-gradient(135deg, var(--royal) 0%, var(--royal-deep) 100%); border-color: var(--royal-deep); box-shadow: 0 12px 31.2px -14.4px rgba(35,116,196,0.6); } .prod-tab-ico { width: 44.88px; height: 44.88px; flex-shrink: 0; border-radius: var(--r); background: #fff; border:1.2px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color: var(--royal); transition: background 200ms ease, color 200ms ease, border-color 200ms ease; } .prod-tab-ico svg { width:23.76px; height:23.76px; } .prod-tab.is-active .prod-tab-ico { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.2); color:#fff; } .prod-tab-txt { display:flex; flex-direction:column; gap:5.28px; min-width:0; } .prod-tab-name { font-family: var(--font-display); font-weight: 700; font-size: 18.48px; letter-spacing:-0.01em; color: var(--ink); white-space:nowrap; } .prod-tab.is-active .prod-tab-name { color:#fff; } .prod-tab-sub { font-family: var(--font-ui); font-size: 11.22px; font-weight:600; letter-spacing: calc(0.12em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); white-space:nowrap; } .prod-tab.is-active .prod-tab-sub { color: rgba(255,255,255,0.7); } .prod-tab-hot { position:absolute; top:-7.92px; right:-5.28px; font-family: var(--font-ui); font-size:9.9px; font-weight:800; letter-spacing: calc(0.1em * var(--tracking)); text-transform:uppercase; color:#fff; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); border-radius: var(--r); padding: 2.64px 7.92px; box-shadow: 0 3.6px 9.6px -2.4px rgba(255,122,42,0.6); } /* ---- MENU SKIN 2 · PILL-ICON (rounded pills, circular gradient icon badge) ---- */ body[data-menu="pillicon"] .prod-menu { background:#fff; border:1.2px solid var(--line); border-radius:1318.68px; padding:9.24px; gap:7.92px; box-shadow: var(--shadow-soft); } body[data-menu="pillicon"] .prod-tab { border-radius:1318.68px; background:none; border:none; padding:10.56px 23.76px 10.56px 10.56px; } body[data-menu="pillicon"] .prod-tab:hover { background: var(--royal-tint); transform:none; } body[data-menu="pillicon"] .prod-tab-ico { width:50.16px; height:50.16px; border-radius:50%; background: var(--bg-deep); border:none; color: var(--royal); } body[data-menu="pillicon"] .prod-tab.is-active { background: linear-gradient(135deg, var(--royal), var(--royal-deep)); box-shadow: 0 12px 31.2px -14.4px rgba(35,116,196,0.65); } body[data-menu="pillicon"] .prod-tab.is-active .prod-tab-ico { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); } body[data-menu="pillicon"] .prod-tab.is-active .prod-tab-name { color:#fff; } body[data-menu="pillicon"] .prod-tab.is-active .prod-tab-sub { color: rgba(255,255,255,0.72); } body[data-menu="pillicon"] .prod-tab-hot { top:-2.64px; right:7.92px; } /* ---- MENU SKIN 4 · TOP-ACCENT (white tabs, per-product colour stripe on top) ---- */ body[data-menu="accent"] .prod-menu { background:none; border:none; box-shadow:none; padding:0; gap:13.2px; } body[data-menu="accent"] .prod-tab { background:#fff; border:1.2px solid var(--line); border-top:3.6px solid var(--c, var(--royal)); border-radius: var(--r); padding:19.8px 21.12px; box-shadow: var(--shadow-soft); } body[data-menu="accent"] .prod-tab:nth-child(1){ --c:#22b358; } body[data-menu="accent"] .prod-tab:nth-child(2){ --c:#ff5663; } body[data-menu="accent"] .prod-tab:nth-child(3){ --c:#8d6ce0; } body[data-menu="accent"] .prod-tab:nth-child(4){ --c:var(--gold-deep); } body[data-menu="accent"] .prod-tab:nth-child(5){ --c:var(--orange); } body[data-menu="accent"] .prod-tab:hover { transform: translateY(-2.64px); box-shadow: var(--shadow-pop); } body[data-menu="accent"] .prod-tab.is-active { transform: translateY(-3.96px); border-top-width:6px; box-shadow: var(--shadow-pop); } body[data-menu="accent"] .prod-tab-ico { background: color-mix(in srgb, var(--c) 14%, #fff); border-color: color-mix(in srgb, var(--c) 30%, var(--line)); color: var(--c); } body[data-menu="accent"] .prod-tab.is-active .prod-tab-ico { background: var(--c); border-color: var(--c); color:#fff; } body[data-menu="accent"] .prod-tab.is-active .prod-tab-name { color: var(--c); } /* ---- MENU SKIN 3 · COLOUR CARDS (like homepage tiles) ---- */ body[data-menu="cards"] .prod-menu { background: none; border: none; box-shadow: none; padding: 0; gap: 15.84px; } body[data-menu="cards"] .prod-tab { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 23.76px; min-height: 153.12px; padding: 21.12px 21.12px 19.8px; color:#fff; border: none; border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow-soft); } body[data-menu="cards"] .prod-tab:nth-child(1) { background: linear-gradient(140deg, #2cc468, #168a44); } body[data-menu="cards"] .prod-tab:nth-child(2) { background: linear-gradient(140deg, #ff5663, var(--royal-deep)); } body[data-menu="cards"] .prod-tab:nth-child(3) { background: linear-gradient(140deg, #8d6ce0, #5a3cb0); } body[data-menu="cards"] .prod-tab:nth-child(4) { background: linear-gradient(140deg, var(--gold), var(--gold-deep)); color: var(--navy); } body[data-menu="cards"] .prod-tab:nth-child(5) { background: linear-gradient(140deg, #ff9248, var(--orange-deep)); } body[data-menu="cards"] .prod-tab:hover { transform: translateY(-3.96px); box-shadow: var(--shadow-pop); } body[data-menu="cards"] .prod-tab.is-active { box-shadow: 0 0 0 3.6px var(--gold), var(--shadow-pop); } body[data-menu="cards"] .prod-tab:nth-child(4).is-active { box-shadow: 0 0 0 3.6px var(--royal), var(--shadow-pop); } body[data-menu="cards"] .prod-tab-ico { background: rgba(255,255,255,0.18); border: none; color:#fff; } body[data-menu="cards"] .prod-tab:nth-child(4) .prod-tab-ico { background: rgba(27,31,42,0.16); color: var(--navy); } body[data-menu="cards"] .prod-tab-name { color:#fff; font-size:22.44px; } body[data-menu="cards"] .prod-tab:nth-child(4) .prod-tab-name { color: var(--navy); } body[data-menu="cards"] .prod-tab-sub { color: rgba(255,255,255,0.78); } body[data-menu="cards"] .prod-tab:nth-child(4) .prod-tab-sub { color: rgba(27,31,42,0.7); } @media (max-width: 912px) { body[data-menu="cards"] .prod-tab { min-height: 121.44px; } } /* ================================================== CALCULATOR CARD ================================================== */ .calc-card { position: relative; background: radial-gradient(1082.4px 501.6px at 85% -10%, rgba(35,116,196,0.06), transparent 60%), radial-gradient(818.4px 448.8px at 0% 120%, rgba(255,234,61,0.08), transparent 55%), var(--bg-soft); border: 1.2px solid var(--line); border-radius: calc(var(--r) + 5.28px); box-shadow: var(--shadow-soft); padding: 34.32px 36.96px 39.6px; overflow: hidden; } .calc-card-head { display:flex; align-items:center; justify-content:space-between; gap:18.48px; flex-wrap:wrap; margin-bottom: 29.04px; } .calc-card-head .ttl { font-family: var(--font-display); font-weight:700; font-size:26.4px; letter-spacing:-0.02em; color: var(--ink); display:inline-flex; align-items:center; gap:13.2px; } .calc-card-head .ttl svg { width:23.76px; height:23.76px; color: var(--royal); } .calc-chip { font-family: var(--font-ui); font-size:12.54px; font-weight:600; letter-spacing: calc(0.12em * var(--tracking)); text-transform:uppercase; color: var(--green); background: color-mix(in srgb, var(--green) 12%, #fff); border:1.2px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: var(--r); padding: 7.92px 15.84px; display:inline-flex; align-items:center; gap:9.24px; } .calc-chip .dot { width:9.24px;height:9.24px;border-radius:50%;background:var(--green); } .calc-chip .chip-ico { width:17.16px; height:17.16px; color: var(--green); } .calc-chip .chip-dot { width:10.56px; height:10.56px; border-radius:50%; background: var(--green); box-shadow: 0 0 0 3.6px color-mix(in srgb, var(--green) 22%, transparent); } .calc-chip b { font-weight:800; color: var(--ink); } /* ---- twin rank stations (the only calculator; 4 skins via data-calc) ---- */ .calc-sel { display: block; } .rank-vs { display: none; } .rank-stations { display: grid; grid-template-columns: 1fr auto 1fr; gap: 23.76px; align-items: stretch; } @media (max-width: 864px) { .rank-stations { grid-template-columns: 1fr; } } .rank-station { background: #fff; border: 1.2px solid var(--line); border-radius: var(--r); padding: 23.76px 23.76px 26.4px; display:flex; flex-direction:column; align-items:center; gap: 18.48px; transition: border-color 240ms ease, box-shadow 240ms ease; } .rank-station.is-focus { border-color: var(--royal-soft); box-shadow: var(--shadow-soft); } .rank-station-label { font-family: var(--font-ui); font-size:15.84px; font-weight:600; letter-spacing: calc(0.18em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); display:flex; align-items:center; gap:10.56px; } .rank-station-label .pin { color: var(--royal); } .rank-station.target .rank-station-label .pin { color: var(--gold-deep); } /* crest — clean FLOATING crest (no ring). The handoff drops the spinning conic ring; the crest just sits on its soft drop-shadow and gently bobs. */ .crest-stage { /* full 306px on desktop, but shrinks on phones so the +10% crest can't push the rank card past the viewport (stays square via the same min() on both axes). */ position: relative; width: min(306.24px, 68vw); height: min(306.24px, 68vw); display:flex; align-items:center; justify-content:center; } .rank-stations, .rank-station, .tier-select, .calc-sel { min-width: 0; } .crest-ring { display: none; } /* ring removed → replaced by the float bob below */ /* The float itself (img bob + ground/contact shadow) is the handoff data-float="on" block lower in this file, switched on for every boost page via the body attribute set in page.php. The crest-img bobs (not the whole stage) so the ::after ground shadow can pulse underneath it — a real floating-object contact shadow. */ .crest-glow { position:absolute; inset:8%; border-radius:50%; background: radial-gradient(circle, var(--tier-c, var(--royal)) 0%, transparent 68%); opacity: 0.22; filter: blur(10.56px); } body.no-glow .crest-glow { display:none; } .crest-img { position: relative; z-index: 2; width: 261.36px; height: 261.36px; object-fit: contain; filter: drop-shadow(0 13.2px 21.12px rgba(27,31,42,0.28)); transform: scale(var(--crest-scale, 1)); transition: transform 420ms var(--ease-out); } /* hover lift only — NO scale. The crest used to grow 1.03x on hover, which then "settled in" right after a rank-swap (mouse sits over the station after a pick), reading as the crest resizing bigger at the end of the animation. */ .rank-station:hover .crest-img { transform: scale(var(--crest-scale, 1)) translateY(-3.96px); } /* rank change · the new crest cross-fades + slides in at a CONSTANT size (no scale) — scaling up to the rest size read as the crest "resizing bigger" at the end. boost-live.js toggles .crest-swap only when the icon src actually changes (with a reflow to restart the run), so a same-rank re-render doesn't replay it. */ @keyframes crest-swap { 0% { opacity: 0; transform: scale(var(--crest-scale, 1)) translateY(11px); } 100% { opacity: 1; transform: scale(var(--crest-scale, 1)) translateY(0); } } .crest-img.crest-swap { animation: crest-swap 380ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } @media (prefers-reduced-motion: reduce) { .crest-img.crest-swap { animation: none; } } /* Slide+fade the rank-station name (.rank-name-big) when its value changes — boost-live.js swapText() adds .f3-swap after a reflow, and only when the value actually changed. The order prices deliberately do NOT animate (user call 2026-07-09). em-based rise so the travel scales with the font-size. */ @keyframes f3-swap { 0% { opacity: 0; transform: translateY(0.4em); } 100% { opacity: 1; transform: translateY(0); } } .f3-swap { animation: f3-swap 1000ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } @media (prefers-reduced-motion: reduce) { .f3-swap { animation: none; } } .rank-name-big { font-family: var(--font-display); font-weight:700; font-size: 29.04px; letter-spacing:-0.02em; color: var(--ink); text-align:center; line-height:1.05; } .rank-name-big small { display:block; font-family: var(--font-ui); font-size:13.2px; font-weight:600; letter-spacing: calc(0.1em * var(--tracking)); color: var(--ink-muted); text-transform:uppercase; margin-top:3.96px; } /* tier dropdown */ .tier-select { position: relative; width: 100%; } .tier-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap:13.2px; padding: 13.2px 15.84px; border-radius: var(--r); background: var(--bg-soft); border:1.2px solid var(--line); cursor:pointer; transition: border-color 200ms ease, background 200ms ease; font-family: var(--font-display); font-weight:600; font-size:21.12px; color: var(--ink); } .tier-trigger:hover { border-color: var(--royal-soft); background:#fff; } .tier-trigger .swatch { width:18.48px;height:18.48px;border-radius:5.28px; flex-shrink:0; background: var(--tier-c, var(--royal)); } .tier-trigger .lab { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tier-trigger .chev { width:21.12px;height:21.12px; color: var(--ink-muted); transition: transform 240ms var(--ease-out); } .tier-select.open .tier-trigger .chev { transform: rotate(180deg); } .tier-pop { position:absolute; top: calc(100% + 7.92px); left:0; right:0; z-index: 40; background:#fff; border:1.2px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); padding:7.92px; display:grid; grid-template-columns: repeat(2, 1fr); gap:5.28px; opacity:0; visibility:hidden; transform: translateY(-7.92px); transition: opacity 180ms ease, transform 200ms var(--ease-out), visibility 180ms; max-height: 422.4px; overflow:auto; } .tier-select.open .tier-pop { opacity:1; visibility:visible; transform: translateY(0); } .tier-opt { display:flex; align-items:center; gap:11.88px; padding:11.88px 13.2px; border-radius: 6.6px; cursor:pointer; transition: background 150ms ease; font-family: var(--font-display); font-size:17.16px; font-weight:600; color: var(--ink); } .tier-opt:hover { background: var(--royal-tint); } .tier-opt.sel { background: var(--bg-soft); } .tier-opt img { width:31.68px; height:31.68px; object-fit:contain; } .tier-opt.disabled { opacity: 0.32; cursor: not-allowed; } .tier-opt.disabled img { filter: grayscale(0.55); } /* division pills */ .div-pills { display:flex; gap:7.92px; width:100%; } .div-pill { flex:1; padding: 11.88px 0; border-radius: var(--r); background: var(--bg-soft); border:1.2px solid var(--line); font-family: var(--font-ui); font-size:15.84px; font-weight:700; color: var(--ink-soft); cursor:pointer; text-align:center; transition: all 180ms var(--ease-out); } .div-pill:hover { border-color: var(--royal-soft); color: var(--royal); } .div-pill.sel { background: var(--royal); border-color: var(--royal-deep); color:#fff; box-shadow: 0 7.2px 19.2px -9.6px rgba(35,116,196,0.6); } .div-pills.apex-hide { opacity: 0.35; pointer-events:none; } /* center arrow / climb meter */ .rank-arrow { align-self: center; display:flex; flex-direction:column; align-items:center; gap:13.2px; } .rank-arrow-glyph { width: auto; height:auto; border-radius:0; background: none; display:flex; align-items:center; justify-content:center; color: var(--royal); box-shadow: none; } .rank-arrow-glyph svg { width:66px; height:52.8px; } /* arrow versions — modern animated icons */ .rank-arrow-glyph .aopt { display: none; color: var(--royal); } body[data-arrow="flow"] .rank-arrow-glyph .a-flow { display: block; } /* default = the static "rising" trend glyph (handoff arrowStyle: rising), not the flow chevrons */ body[data-arrow="rising"] .rank-arrow-glyph .a-rising, body:not([data-arrow]) .rank-arrow-glyph .a-rising { display: block; } body[data-arrow="rocket"] .rank-arrow-glyph .a-rocket { display: block; } body[data-arrow="bolt"] .rank-arrow-glyph .a-bolt { display: block; color: var(--gold-deep); } body[data-arrow="long"] .rank-arrow-glyph .a-long { display: block; } .rank-arrow-glyph .a-flow { width:39.6px; height:25.08px; --fatchev-base:#b9cde8; --fatchev-hot:#2a7de0; } .rank-arrow-glyph .a-flow .fatchev { fill: var(--royal); transform-box: fill-box; } .rank-arrow-glyph .a-rising { width:30.36px; height:30.36px; } .rank-arrow-glyph .a-rocket { width:29.04px; height:29.04px; } .rank-arrow-glyph .a-bolt { width:26.4px; height:30.36px; } .rank-arrow-glyph .a-long { width:36.96px; height:25.08px; } @media (prefers-reduced-motion: no-preference) { .rank-arrow-glyph .a-flow .fatchev { animation: fatchev-ignite 1.6s ease-in-out infinite; } .rank-arrow-glyph .a-flow .fatchev:nth-of-type(2) { animation-delay: .28s; } .rank-arrow-glyph .a-flow .fatchev:nth-of-type(3) { animation-delay: .56s; } /* a-rising stays STATIC between ranks (handoff valorant-hero.css: .a-rising{animation:none}) */ .rank-arrow-glyph .a-rocket { animation: arr-rocket 1.8s ease-in-out infinite; } .rank-arrow-glyph .a-bolt { animation: arr-bolt 1.6s ease-in-out infinite; } .rank-arrow-glyph .a-long { animation: arr-long 1.7s ease-in-out infinite; } } @keyframes fatchev-ignite { 0%,100%{ fill: var(--fatchev-base); transform: translateY(0); } 50%{ fill: var(--fatchev-hot); transform: translateY(-2.64px); } } @keyframes arr-rise { 0%,100%{ transform: translateY(2.64px) scale(0.96); } 50%{ transform: translateY(-3.96px) scale(1.04); } } @keyframes arr-rocket { 0%,100%{ transform: translate(-1.32px,2.64px) rotate(-2deg); } 50%{ transform: translate(2.64px,-3.96px) rotate(2deg); filter: drop-shadow(0 5.28px 7.92px rgba(255,122,42,0.5)); } } @keyframes arr-bolt { 0%,100%{ opacity:1; transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 35%{ opacity:0.55; transform: scale(0.92); } 55%{ opacity:1; transform: scale(1.08); filter: drop-shadow(0 0 9.24px var(--gold)); } } @keyframes arr-long { 0%{ transform: translateX(-7.92px); opacity:0.6; } 55%{ transform: translateX(5.28px); opacity:1; } 100%{ transform: translateX(-7.92px); opacity:0.6; } } .rank-arrow-jump { font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.12em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); text-align:center; white-space:nowrap; } .rank-arrow-jump b { color: var(--royal); } @media (max-width: 864px) { .rank-arrow-glyph { transform: rotate(90deg); } .rank-arrow-glyph svg { animation: none; } /* the trend glyph is a diagonal ↗ — the wrapper's 90° turn (which points the chevron variants at the stacked target below) flips it into a downward ↘, so counter-rotate it back upright (user report: "a-rising is downwards") */ .rank-arrow-glyph .a-rising { transform: rotate(-90deg); } } /* ================================================== CALC v2 · SLIDER LADDER (dual-handle) ================================================== */ .calc-slider-stage { display:grid; grid-template-columns: 1fr 1fr; gap: 21.12px; margin-bottom: 31.68px; } @media (max-width: 672px){ .calc-slider-stage{ grid-template-columns:1fr 1fr; } } .cs-card { background:#fff; border:1.2px solid var(--line); border-radius: var(--r); padding: 21.12px; display:flex; align-items:center; gap:18.48px; transition: border-color 240ms ease, box-shadow 240ms ease; } .cs-card.from { border-left: 3.6px solid var(--royal); } .cs-card.to { border-left: 3.6px solid var(--gold-deep); } .cs-crest { position:relative; width: 145.2px; height:145.2px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .cs-crest .glow { position:absolute; inset:6%; border-radius:50%; background: radial-gradient(circle, var(--tier-c,var(--royal)) 0%, transparent 68%); opacity:0.22; filter: blur(7.92px); } body.no-glow .cs-crest .glow { display:none; } .cs-crest img { position:relative; z-index:2; width:126.72px; height:126.72px; object-fit:contain; filter: drop-shadow(0 7.92px 13.2px rgba(27,31,42,0.25)); transition: transform 360ms var(--ease-out); } .cs-card:hover .cs-crest img { transform: scale(1.06); } .cs-meta .cs-lab { font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.16em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .cs-card.from .cs-lab { color: var(--royal); } .cs-card.to .cs-lab { color: var(--gold-deep); } .cs-meta .cs-name { font-family: var(--font-display); font-weight:700; font-size:25.08px; letter-spacing:-0.02em; color: var(--ink); line-height:1.05; margin-top:2.64px; } .cs-meta .cs-sub { font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.08em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); margin-top:3.96px; } .cs-rail-wrap { padding: 7.92px 5.28px 2.64px; } .cs-rail { position: relative; height: 73.92px; } .cs-rail-track { position:absolute; left:13.2px; right:13.2px; top: 11.88px; height: 10.56px; border-radius:1318.68px; background: var(--bg-deep); border:1.2px solid var(--line-soft); overflow:hidden; } .cs-rail-fill { position:absolute; top:0; bottom:0; left: var(--from,0%); right: calc(100% - var(--to,100%)); background: linear-gradient(90deg, var(--royal), var(--gold-deep)); transition: left 120ms linear, right 120ms linear; } .cs-rail input[type="range"] { -webkit-appearance:none; appearance:none; position:absolute; left:0; right:0; top:0; width:100%; height: 34.32px; background:none; margin:0; pointer-events:none; } .cs-rail input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto; width:31.68px; height:31.68px; border-radius:50%; background:#fff; cursor:grab; box-shadow:0 3.6px 12px rgba(27,31,42,0.3); } .cs-rail input.from-range::-webkit-slider-thumb { border:4.8px solid var(--royal); } .cs-rail input.to-range::-webkit-slider-thumb { border:4.8px solid var(--gold-deep); } .cs-rail input[type="range"]::-moz-range-thumb { pointer-events:auto; width:31.68px; height:31.68px; border-radius:50%; background:#fff; cursor:grab; box-shadow:0 3.6px 12px rgba(27,31,42,0.3); } .cs-rail input.from-range::-moz-range-thumb { border:4.8px solid var(--royal); } .cs-rail input.to-range::-moz-range-thumb { border:4.8px solid var(--gold-deep); } .cs-rail-ticks { display:flex; justify-content:space-between; padding: 0 7.92px; margin-top: 2.64px; } .cs-rail-ticks .tk { display:flex; flex-direction:column; align-items:center; gap:3.96px; flex:1; } .cs-rail-ticks .tk img { width:26.4px; height:26.4px; object-fit:contain; opacity:0.4; transition: opacity 240ms ease, transform 240ms ease; } .cs-rail-ticks .tk.on img { opacity:1; transform: scale(1.1); } .cs-rail-ticks .tk span { font-family: var(--font-ui); font-size:9.24px; font-weight:600; letter-spacing: calc(0.04em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } @media (max-width:672px){ .cs-rail-ticks .tk span{ display:none; } } .cs-hint { text-align:center; font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.1em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); margin-top:15.84px; } .cs-hint b { color: var(--royal); } .cs-divrow { display:flex; gap:21.12px; justify-content:center; margin-top: 18.48px; } .cs-divrow .grp { display:flex; flex-direction:column; align-items:center; gap:9.24px; } .cs-divrow .grp .gl { font-family: var(--font-ui); font-size:11.22px; font-weight:600; letter-spacing: calc(0.14em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .cs-divrow .div-pills { width: 221.76px; } /* ================================================== CALC v3 · STEPPER ROWS ================================================== */ .calc-stepper { display:flex; flex-direction:column; gap: 18.48px; margin-bottom: 10.56px; } .step-row { display:grid; grid-template-columns: 60.72px 1fr 60.72px; align-items:center; gap: 18.48px; background:#fff; border:1.2px solid var(--line); border-radius: var(--r); padding: 21.12px 21.12px; transition: border-color 240ms ease, box-shadow 240ms ease; } .step-row.from { border-top: 3.6px solid var(--royal); } .step-row.to { border-top: 3.6px solid var(--gold-deep); } .step-btn { width: 60.72px; height: 60.72px; border-radius:50%; border:1.2px solid var(--line); background: var(--bg-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--royal); transition: all 170ms var(--ease-out); } .step-btn:hover { background: var(--royal-tint); border-color: var(--royal-soft); transform: scale(1.06); } .step-btn:active { transform: scale(0.94); } .step-btn svg { width:26.4px; height:26.4px; } .step-btn[disabled] { opacity:0.3; cursor:not-allowed; transform:none; } .step-mid { display:flex; align-items:center; justify-content:center; gap: 21.12px; min-width:0; } .step-crest { position:relative; width: 126.72px; height:126.72px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .step-crest .glow { position:absolute; inset:6%; border-radius:50%; background: radial-gradient(circle, var(--tier-c,var(--royal)) 0%, transparent 68%); opacity:0.22; filter: blur(7.92px); } body.no-glow .step-crest .glow { display:none; } .step-crest img { position:relative; z-index:2; width:116.16px; height:116.16px; object-fit:contain; filter: drop-shadow(0 7.92px 13.2px rgba(27,31,42,0.25)); } @media (prefers-reduced-motion: no-preference){ .step-crest img.pop { animation: crest-pop 380ms var(--ease-out); } } @keyframes crest-pop { 0%{ transform: scale(0.8) rotate(-6deg); opacity:0.4; } 100%{ transform:none; opacity:1; } } .step-info { min-width:0; } .step-info .sl { font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.16em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .step-row.from .sl { color: var(--royal); } .step-row.to .sl { color: var(--gold-deep); } .step-info .sn { font-family: var(--font-display); font-weight:700; font-size:29.04px; letter-spacing:-0.02em; color: var(--ink); line-height:1.0; margin-top:1.32px; } .step-info .div-pills { margin-top:11.88px; width: 205.92px; } .step-info .div-pills .div-pill { padding:7.92px 0; font-size:14.52px; } .step-between { display:flex; align-items:center; justify-content:center; gap:15.84px; padding: 5.28px 0 2.64px; } .step-between .line { flex:1; height:1.32px; background: var(--line); max-width: 158.4px; } .step-between .pill { font-family: var(--font-ui); font-size:13.2px; font-weight:700; letter-spacing: calc(0.08em*var(--tracking)); text-transform:uppercase; color: var(--royal); background: var(--royal-tint); border:1.2px solid var(--royal-soft); border-radius:var(--r); padding: 9.24px 18.48px; display:inline-flex; align-items:center; gap:10.56px; } .step-between .pill svg { width:17.16px; height:17.16px; } /* ---- LP slider ---- */ .calc-controls { margin-top: 21.12px; display:grid; grid-template-columns: 1fr 1fr; gap: 18.48px; } @media (max-width: 864px) { .calc-controls { grid-template-columns: 1fr; } } .ctl-block { background:#fff; border:1.2px solid var(--line); border-radius: var(--r); padding: 21.12px 21.12px 23.76px; } .ctl-label { display:flex; align-items:center; justify-content:space-between; gap:13.2px; margin-bottom:18.48px; } .ctl-label .l { font-family: var(--font-ui); font-size:12.54px; font-weight:600; letter-spacing: calc(0.06em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .ctl-label .v { font-family: var(--font-display); font-weight:700; font-size:19.8px; color: var(--ink); font-variant-numeric: tabular-nums; } .ctl-label .v em { font-style:normal; color: var(--royal); } .lp-slider { -webkit-appearance:none; appearance:none; width:100%; height:10.56px; border-radius:1318.68px; background: linear-gradient(90deg, var(--royal) var(--lp,0%), var(--bg-deep) var(--lp,0%)); border:1.2px solid var(--line-soft); cursor:pointer; outline:none; } .lp-slider::-webkit-slider-thumb { -webkit-appearance:none; width:26.4px; height:26.4px; border-radius:50%; background:#fff; border:3.6px solid var(--royal); box-shadow: 0 3.6px 9.6px rgba(27,31,42,0.25); cursor:pointer; transition: transform 140ms ease; } .lp-slider::-webkit-slider-thumb:hover { transform: scale(1.12); } .lp-slider::-moz-range-thumb { width:26.4px; height:26.4px; border-radius:50%; background:#fff; border:3.6px solid var(--royal); box-shadow: 0 3.6px 9.6px rgba(27,31,42,0.25); cursor:pointer; } .lp-scale { display:flex; justify-content:space-between; margin-top:13.2px; } .lp-scale span { font-family: var(--font-ui); font-size:11.88px; color: var(--ink-muted); } /* queue toggle (Solo / Flex) */ .queue-toggle { display:flex; gap:7.92px; } .queue-opt { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3.96px; padding: 14.52px 10.56px; border-radius: 6.6px; cursor:pointer; background: var(--bg-soft); border:1.2px solid var(--line); transition: all 180ms var(--ease-out); } .queue-opt:hover { border-color: var(--royal-soft); } .queue-opt.sel { background: var(--royal); border-color: var(--royal-deep); } .queue-opt .qn { font-family: var(--font-display); font-weight:700; font-size:18.48px; line-height:1.1; color: var(--ink); white-space:nowrap; } .queue-opt.sel .qn { color:#fff; } .queue-opt .qs { font-family: var(--font-ui); font-size:10.56px; font-weight:600; line-height:1.1; letter-spacing: calc(0.1em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); white-space:nowrap; } .queue-opt.sel .qs { color: rgba(255,255,255,0.7); } /* server selector */ .server-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(90.2px, 1fr)); gap:7.92px; } @media (max-width: 552px) { .server-grid { grid-template-columns: repeat(3,1fr); } } .server-opt { display:flex; flex-direction:column; align-items:center; gap: 7.92px; padding: 11.88px 5.28px; border-radius: 6.6px; cursor:pointer; background: var(--bg-soft); border:1.2px solid var(--line); transition: all 170ms var(--ease-out); } .server-opt:hover { border-color: color-mix(in srgb, var(--orange) 55%, var(--line)); transform: translateY(-1.32px); } .server-opt.sel { background: color-mix(in srgb, var(--orange) 12%, #fff); border-color: var(--orange); } /* bigger flag/icon shown directly — no circle, no white frame */ .server-flag { width: 55.44px; height: 55.44px; display:flex; align-items:center; justify-content:center; } /* recolor the server flag to brand red (same filter as the checkout recap) so the picker matches the recap (UI batch 8). */ .server-flag img { width:100%; height:100%; object-fit:contain; border-radius: 3.96px; filter: invert(35%) sepia(100%) saturate(968%) hue-rotate(354deg) brightness(103%) contrast(88%); } .server-opt .sname { font-family: var(--font-ui); font-size:11.88px; font-weight:700; letter-spacing: calc(0.06em * var(--tracking)); color: var(--ink-soft); } .server-opt.sel .sname { color: var(--orange-deep); } /* Platform icons (PC/PS4/Xbox) inherit the same brand recolor as the server flags above, so the two pickers match. */ /* ================================================== ORDER PANEL (sticky aside) ================================================== */ .order-aside { position: sticky; top: 110.88px; align-self: start; max-height: calc(100vh - 132px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .order-aside::-webkit-scrollbar { width: 7.92px; } .order-aside::-webkit-scrollbar-thumb { background: var(--line); border-radius: 1318.68px; } @media (max-width: 1296px) { .order-aside { position: static; max-height: none; overflow: visible; } } .order-panel { background:#fff; border:1.2px solid var(--line); border-radius: calc(var(--r) + 5.28px); box-shadow: var(--shadow-pop); overflow:hidden; } .order-top { /* vivid hero-red diagonal — navy tail dropped per handoff */ background: linear-gradient(135deg, var(--royal) 0%, var(--royal-deep) 100%); color:#fff; padding: 23.76px 26.4px 21.12px; position:relative; overflow:hidden; } .order-top::before { content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,0.06) 1.32px, transparent 1.32px); background-size: 23.76px 23.76px; mask-image: linear-gradient(180deg,#000,transparent); pointer-events:none; } .order-top-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:13.2px; margin-bottom:21.12px; } .order-title { font-family: var(--font-display); font-weight:800; font-size:23.76px; letter-spacing:-0.01em; } .order-title em { font-style:normal; color: var(--gold); } .order-secure { display:inline-flex; align-items:center; gap:7.92px; font-family: var(--font-ui); font-size:11.22px; font-weight:600; letter-spacing: calc(0.1em * var(--tracking)); text-transform:uppercase; color: rgba(255,255,255,0.7); } .order-secure svg { width:14.52px;height:14.52px; } .order-journey { position:relative; display:flex; align-items:center; justify-content:center; gap:18.48px; padding:0; border-bottom:0; margin-bottom:0; } .order-mini { display:flex; flex-direction:column; align-items:center; gap:6.6px; } /* object-position:bottom bottom-anchors the contain-scaled crest so a divisionless art asset (Unranked) with a different aspect ratio / more transparent padding lines up on the same baseline as a square tier crest instead of floating centered — the "Unranked misaligned" report. */ .order-mini img { width:158.4px; height:158.4px; object-fit:contain; object-position:center bottom; filter: drop-shadow(0 7.92px 13.2px rgba(0,0,0,0.35)); } .order-mini span { font-family: var(--font-display); font-size:22.44px; font-weight:700; letter-spacing: -0.01em; color:#fff; white-space:nowrap; } .order-mini small { font-family: var(--font-ui); font-size:9.9px; font-weight:600; letter-spacing: calc(0.14em * var(--tracking)); text-transform:uppercase; color: rgba(255,255,255,0.55); } /* order journey · flowing gold chevrons (handoff a1) */ .order-arrow { display:flex; align-items:center; } .order-arrow .oa1 { display:inline-flex; align-items:center; } .order-arrow .oa1 svg { width:15.84px; height:21.12px; color: #fff; opacity:0.28; margin-left:-9.24px; } .order-arrow .oa1 svg:first-child { margin-left:0; } .order-arrow .oa1 svg:nth-child(2) { opacity:0.55; } @keyframes oaWave { 0%,100% { opacity:0.22; } 50% { opacity:1; } } @media (prefers-reduced-motion: no-preference) { .order-arrow .oa1 svg:nth-child(1) { animation: oaWave 2.2s ease-in-out infinite; } .order-arrow .oa1 svg:nth-child(2) { animation: oaWave 2.2s ease-in-out 0.3s infinite; } .order-arrow .oa1 svg:nth-child(3) { animation: oaWave 2.2s ease-in-out 0.6s infinite; } } .order-body { padding: 21.12px 26.4px 5.28px; } .order-row { display:flex; align-items:center; justify-content:space-between; gap:13.2px; padding: 11.88px 0; font-size:16.5px; color: var(--ink-soft); } .order-row + .order-row { border-top: 1.2px solid var(--line-soft); } /* key + value share family/size/weight/spacing/uppercase — differ only by colour (handoff) */ .order-row .k { font-family: var(--font-ui); font-size:13.86px; font-weight:700; letter-spacing: calc(0.08em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .order-row .v { font-family: var(--font-ui); font-weight:700; font-size:13.86px; letter-spacing: calc(0.08em * var(--tracking)); text-transform:uppercase; color: var(--ink); display:inline-flex; align-items:center; gap:9.24px; font-variant-numeric: tabular-nums; } .order-row .v .flag-sm { width:23.76px; height:23.76px; border-radius:50%; font-size:10.56px; } /* chosen extra options, listed under the spec rows in "Your order". The head div breaks the .order-row + .order-row chain, so the first extra has no double rule; each extra names its title (display font) with the agents as a muted sub-line. */ .order-xo-head { margin-top: 5.28px; padding-top: 15.84px; border-top: 1.2px solid var(--line-soft); font-family: var(--font-ui); font-size: 11.88px; font-weight: 700; letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; color: var(--accent); } .order-row.order-xo { align-items: flex-start; } .order-row.order-xo .k { display: inline-flex; flex-direction: column; gap: 3.96px; min-width: 0; font-family: var(--font-ui); font-size: 15.84px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); } .order-xo-pick { font-family: var(--font-ui); font-size: 12.54px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-muted); line-height: 1.35; } .order-row.order-xo .v { color: var(--accent); white-space: nowrap; flex-shrink: 0; } body[data-order="modern"] .order-xo-head { border-top-color: rgba(255,255,255,0.08); } body[data-order="modern"] .order-row.order-xo .k { color: #fff; } body[data-order="modern"] .order-xo-pick { color: rgba(255,255,255,0.6); } /* reward banner · "NEXT PURCHASE REWARD" card with UNLOCKED pill (handoff r1) */ .order-reward { margin: 15.84px 26.4px; padding: 14.52px 17.16px; display:flex; align-items:center; justify-content:space-between; gap:15.84px; border-radius: var(--r); background:#fff; border:1.2px solid var(--line); } .order-reward .orw-text { display:flex; flex-direction:column; gap:3.96px; min-width:0; } .order-reward .orw-title { display:flex; align-items:center; gap:9.24px; font-family: var(--font-ui); font-size:13.86px; font-weight:700; letter-spacing: calc(0.09em * var(--tracking)); text-transform:uppercase; color: var(--ink); } .order-reward .orw-star { width:17.16px; height:17.16px; color: var(--royal); flex-shrink:0; } .order-reward .orw-sub { font-family: var(--font-ui); font-size:15.84px; font-weight:600; color: var(--ink-soft); white-space:nowrap; } .order-reward .orw-sub b { color: var(--ink); font-weight:800; } .order-reward .orw-badge { display:inline-flex; align-items:center; gap:6.6px; padding:6.6px 11.88px; border-radius:1098.9px; background: color-mix(in srgb, var(--green) 15%, #fff); border:1.2px solid color-mix(in srgb, var(--green) 45%, #fff); color:#1c9150; font-family: var(--font-ui); font-size:11.22px; font-weight:800; letter-spacing: calc(0.1em * var(--tracking)); text-transform:uppercase; flex-shrink:0; } .order-reward .orw-badge svg { width:13.2px; height:13.2px; } .order-total { padding: 13.2px 26.4px 0; display:flex; align-items:stretch; gap:13.2px; } .order-total .price-col { flex:1; display:flex; flex-direction:column; gap:7.92px; padding: 15.84px 18.48px; border-radius: var(--r); } .order-total .price-col.reg { background: var(--bg-soft); border:1.2px solid var(--line); } .order-total .price-col.vip { background: var(--bg-soft); border:1.2px solid var(--line); } .order-total .lbl { font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.1em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); display:flex; align-items:center; gap:7.92px; white-space:nowrap; } /* both prices dark-bold + identical (handoff p1) — no muted/strikethrough difference */ .order-total .amt { font-family: var(--font-body); font-weight:800; font-size:39.6px; letter-spacing:-0.03em; line-height:0.95; color: var(--ink); font-variant-numeric: tabular-nums; } .order-total .price-col.vip .amt.now { color: var(--ink); } .order-total .vip-badge { font-family: var(--font-ui); font-size:10.56px; font-weight:800; letter-spacing: calc(0.1em * var(--tracking)); text-transform:uppercase; color: var(--navy); background: var(--gold); border-radius:2.64px; padding:2.64px 6.6px; } .order-foot { padding: 21.12px 26.4px 26.4px; } .order-foot .btn { width:100%; justify-content:center; font-size:17.16px; padding: 24.2px 19.8px; min-height: 64.9px; } .order-note { margin-top:13.2px; text-align:center; font-family: var(--font-ui); font-size:11.88px; letter-spacing: calc(0.08em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); display:flex; align-items:center; justify-content:center; gap:9.24px; } .order-note svg { width:15.84px;height:15.84px; color: var(--green); } /* ---- ORDER PANEL · MODERN (dark glass) skin ---- */ body[data-order="modern"] .order-panel { background: radial-gradient(554.4px 264px at 100% 0%, rgba(255,234,61,0.10), transparent 60%), linear-gradient(168deg, #1b1f2a 0%, #1b1f2a 55%, #11141c 100%); border: 1.2px solid rgba(255,255,255,0.12); box-shadow: 0 28.8px 72px -26.4px rgba(6,18,42,0.7); } body[data-order="modern"] .order-top { background: none; } body[data-order="modern"] .order-mini img { width: 168.96px; height: 168.96px; filter: drop-shadow(0 10.56px 18.48px rgba(0,0,0,0.4)); } body[data-order="modern"] .order-body { padding-top: 23.76px; } body[data-order="modern"] .order-row { color: rgba(255,255,255,0.82); } body[data-order="modern"] .order-row + .order-row { border-top-color: rgba(255,255,255,0.08); } body[data-order="modern"] .order-row .k { color: rgba(255,255,255,0.5); } body[data-order="modern"] .order-row .v { color: #fff; } body[data-order="modern"] .order-reward { background: rgba(255,255,255,0.06); border: 1.2px dashed rgba(255,234,61,0.4); } body[data-order="modern"] .order-reward .rt { color: rgba(255,255,255,0.8); } body[data-order="modern"] .order-reward .rt b { color: #fff; } body[data-order="modern"] .order-total .lbl { color: rgba(255,255,255,0.55); } body[data-order="modern"] .order-total .price-col.reg { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); } body[data-order="modern"] .order-total .price-col.vip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); } body[data-order="modern"] .order-total .amt { color: rgba(255,255,255,0.92); } body[data-order="modern"] .order-total .price-col.vip .amt.now { color: rgba(255,255,255,0.92); -webkit-text-fill-color: rgba(255,255,255,0.92); background: none; } body[data-order="modern"] .order-foot .btn-royal { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--navy); box-shadow: 0 12px 36px -9.6px rgba(54,167,242,0.5); } body[data-order="modern"] .order-note { color: rgba(255,255,255,0.55); } /* ================================================== EXTRA OPTIONS ================================================== */ .xopts-section { background: var(--bg); padding: 10.56px 31.68px 39.6px; } .xopts-wrap { max-width: 1742.4px; margin: 0 auto; } .xopts-card { background: var(--bg-soft); border:1.2px solid var(--line); border-radius: calc(var(--r) + 5.28px); padding: 38.016px 41.184px 41.184px; } .xopts-head { display:flex; align-items:flex-end; justify-content:space-between; gap:25.344px; flex-wrap:wrap; margin-bottom:28.512px; } .xopts-head h2 { font-family: var(--font-display); font-weight:700; font-size: clamp(34.848px,2.88vw,47.52px); letter-spacing:-0.02em; color: var(--ink); } .xopts-head h2 em { font-style:normal; color: var(--royal); } .xopts-head p { font-size:20.592px; color: var(--ink-soft); margin-top:7.92px; max-width: 633.6px; } .xopts-allnote { font-family: var(--font-ui); font-size:15.048px; font-weight:600; letter-spacing: calc(0.1em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); display:inline-flex; align-items:center; gap:11.088px; } .xopts-allnote svg { width:20.592px; height:20.592px; color: var(--green); } /* default skin: chips */ .xopts-chips { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15.84px; } @media (max-width:672px){ .xopts-chips{ grid-template-columns: minmax(0, 1fr);} } .xopt { position:relative; display:flex; align-items:flex-start; gap:19.008px; padding: 23.76px 23.76px; border-radius: var(--r); background:#fff; border:1.2px solid var(--line); cursor:pointer; transition: border-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out); } .xopt:hover { border-color: var(--royal-soft); transform: translateY(-2.64px); box-shadow: var(--shadow-soft); } .xopt.on { border-color: var(--royal); box-shadow: 0 12px 28.8px -16.8px rgba(35,116,196,0.5); } .xopt-ico { width: 57.024px; height:57.024px; border-radius: var(--r); flex-shrink:0; background: var(--bg-soft); border:1.2px solid var(--line); display:flex; align-items:center; justify-content:center; color: var(--royal); transition: background 200ms ease, color 200ms ease; } .xopt.on .xopt-ico { background: var(--royal); border-color: var(--royal-deep); color:#fff; } .xopt-ico svg { width:28.512px; height:28.512px; } .xopt-txt { flex:1; min-width:0; } .xopt-name { font-family: var(--font-body); font-weight:700; font-size:22.176px; letter-spacing:-0.01em; color: var(--ink); display:flex; align-items:center; gap:11.088px; } .xopt-price { font-family: var(--font-ui); font-size:13.464px; font-weight:700; letter-spacing: calc(0.06em * var(--tracking)); text-transform:uppercase; color: var(--green); margin-top:7.92px; align-self:center; display:inline-flex; align-items:center; line-height:1; background: color-mix(in srgb, var(--green) 12%, #fff); border:1.2px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: var(--r); padding: 4.752px 12.672px; } .xopt-price.paid { color: var(--green); background: color-mix(in srgb, var(--green) 12%, #fff); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); } .xopt-desc { font-size:18.216px; line-height:1.3; color: var(--ink-soft); margin-top:8.4px; } .xopt-switch { width: 60.192px; height:34.848px; border-radius:1318.68px; background: var(--bg-deep); border:1.2px solid var(--line); flex-shrink:0; position:relative; transition: background 200ms ease, border-color 200ms ease; } .xopt-switch::after { content:''; position:absolute; top:3.168px; left:3.168px; width:25.344px; height:25.344px; border-radius:50%; background:#fff; box-shadow:0 1.2px 3.6px rgba(0,0,0,0.2); transition: transform 220ms var(--ease-out); } .xopt.on .xopt-switch { background: var(--royal); border-color: var(--royal-deep); } .xopt.on .xopt-switch::after { transform: translateX(25.344px); } /* ---- XOPTS SKIN 2 · LIST ROWS ---- */ body[data-xopt="list"] .xopts-chips { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10.56px; } @media (max-width: 984px){ body[data-xopt="list"] .xopts-chips { grid-template-columns: minmax(0, 1fr); } } body[data-xopt="list"] .xopt { align-items: center; padding: 19.008px 22.176px; } body[data-xopt="list"] .xopt-desc { display: none; } body[data-xopt="list"] .xopt-txt { display: flex; flex-direction: column; } body[data-xopt="list"] .xopt-name { font-size: 22.176px; } body[data-xopt="list"] .xopt-ico { width: 42.24px; height: 42.24px; } body[data-xopt="list"] .xopt-ico svg { width: 21.12px; height: 21.12px; } /* ---- XOPTS SKIN 3 · COMPACT TAGS ---- */ body[data-xopt="tags"] .xopts-chips { display: flex; flex-wrap: wrap; gap: 11.88px; } body[data-xopt="tags"] .xopt { flex: 0 1 auto; align-items: center; gap: 11.88px; padding: 14.52px 21.12px; border-radius: var(--r); } body[data-xopt="tags"] .xopt:hover { transform: translateY(-2.64px); } body[data-xopt="tags"] .xopt-desc, body[data-xopt="tags"] .xopt-switch { display: none; } body[data-xopt="tags"] .xopt-ico { width: 39.6px; height: 39.6px; border-radius: 1318.68px; } body[data-xopt="tags"] .xopt-ico svg { width: 19.8px; height: 19.8px; } body[data-xopt="tags"] .xopt-txt { flex-direction: row; align-items: center; gap: 11.88px; } body[data-xopt="tags"] .xopt-name { font-size: 17.82px; } body[data-xopt="tags"] .xopt-price { margin-top: 0; } body[data-xopt="tags"] .xopt.on .xopt-price { border-color: color-mix(in srgb, var(--royal) 30%, var(--line)); } /* ================================================== NOTE BOX ================================================== */ .note-section { background: var(--bg); padding: 0 31.68px 47.52px; } .note-card { max-width: 1742.4px; margin: 0 auto; background:#fff; border:1.2px solid var(--line); border-radius: calc(var(--r) + 5.28px); box-shadow: var(--shadow-soft); padding: 29.04px 31.68px 31.68px; } .note-head { display:flex; align-items:center; justify-content:space-between; gap:15.84px; margin-bottom:18.48px; } .note-head .nt { font-family: var(--font-display); font-weight:700; font-size:23.76px; letter-spacing:-0.01em; color: var(--ink); display:inline-flex; align-items:center; gap:11.88px; } .note-head .nt svg { width:21.12px; height:21.12px; color: var(--royal); } .note-head .opt { font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.12em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); border:1.2px solid var(--line); border-radius:var(--r); padding:6.6px 13.2px; } .note-card textarea { width:100%; min-height: 126.72px; resize: vertical; border:1.2px solid var(--line); border-radius: var(--r); background: var(--bg-soft); padding: 17.16px 19.8px; font-family: var(--font-body); font-size:17.82px; color: var(--ink); outline:none; transition: border-color 200ms ease, background 200ms ease; } .note-card textarea:focus { border-color: var(--royal-soft); background:#fff; box-shadow: 0 0 0 3.6px rgba(35,116,196,0.08); } .note-card textarea::placeholder { color: var(--ink-muted); } .note-foot { display:flex; align-items:center; justify-content:space-between; gap:13.2px; margin-top:13.2px; } .note-foot .hint { font-family: var(--font-ui); font-size:11.88px; letter-spacing: calc(0.08em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); display:inline-flex; align-items:center; gap:9.24px; } .note-foot .hint svg { width:15.84px; height:15.84px; color: var(--royal); } .note-foot .count { font-family: var(--font-ui); font-size:13.2px; color: var(--ink-muted); } /* ================================================== SEO CONTENT BLOCKS ================================================== */ .seo { background: var(--bg-soft); padding: 84.48px 31.68px; border-top:1.2px solid var(--line-soft); } .seo-wrap { max-width: 1742.4px; margin: 0 auto; display:grid; grid-template-columns: minmax(0,1fr) 396px; gap: 58.08px; align-items:start; } .seo-main { display:flex; flex-direction:column; gap: 58.08px; min-width:0; } .seo-aside { position: sticky; top: 110.88px; display:flex; flex-direction:column; gap:18.48px; } @media (max-width: 1032px){ .seo-wrap { grid-template-columns: 1fr; gap: 47.52px; } .seo-aside { position: static; } } .seo-block .seo-kicker { font-family: var(--font-ui); font-size:13.2px; font-weight:600; letter-spacing: calc(0.16em * var(--tracking)); text-transform:uppercase; color: var(--royal); display:inline-flex; align-items:center; gap:10.56px; margin-bottom:15.84px; } .seo-block .seo-kicker .tag { background: var(--royal); color:#fff; border-radius:2.64px; padding:3.96px 10.56px; } .seo-block h2 { font-family: var(--font-display); font-weight:700; font-size: clamp(31.68px,2.8vw,44.88px); letter-spacing:-0.02em; color: var(--ink); margin-bottom:18.48px; } .seo-block h2 em { font-style:normal; color: var(--royal); } .seo-block p { font-size:19.8px; line-height:1.7; letter-spacing: -0.022em; color: var(--ink-soft); max-width: 1003.2px; margin-bottom:15.84px; } .seo-block p[data-comment-anchor="8931895b99-p"] { line-height: 1.5; letter-spacing: -0.022em; } .seo-block p a, .seo-block p .lnk { color: var(--royal); font-weight:600; } .seo-block p a:hover { text-decoration: underline; } /* stats row */ .seo-stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 18.48px; margin-top: 10.56px; } @media (max-width:816px){ .seo-stats{ grid-template-columns: repeat(2,1fr);} } .seo-stat { background:#fff; border:1.2px solid var(--line); border-radius: var(--r); padding: 26.4px 23.76px; text-align:center; } .seo-stat .n { font-family: var(--font-display); font-weight:800; font-size:39.6px; letter-spacing:-0.03em; color: var(--ink); } .seo-stat .n em { font-style:normal; color: var(--royal); } .seo-stat .l { font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.12em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); margin-top:7.92px; } /* steps row */ .seo-steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 21.12px; margin-top: 7.92px; } @media (max-width:912px){ .seo-steps{ grid-template-columns: 1fr;} } .seo-step { background:#fff; border:1.2px solid var(--line); border-radius: var(--r); padding: 29.04px 26.4px; position:relative; overflow:hidden; } .seo-step .num { font-family: var(--font-display); font-weight:800; font-size:18.48px; color:#fff; width:39.6px;height:39.6px; border-radius: var(--r); background: linear-gradient(135deg,var(--royal),var(--royal-deep)); display:flex; align-items:center; justify-content:center; margin-bottom:18.48px; } .seo-step h3 { font-family: var(--font-display); font-weight:700; font-size:21.12px; letter-spacing:-0.01em; color: var(--ink); margin-bottom:9.24px; } .seo-step h3 em { font-style:normal; color: var(--royal); } .seo-step p { font-size:17.16px; line-height:1.6; color: var(--ink-soft); margin:0; } /* ================================================== CTA STRIP ================================================== */ .cta-strip { background: var(--navy); padding: 29.04px 31.68px; } .cta-inner { max-width: 1452px; margin: 0 auto; display:flex; align-items:center; justify-content:space-between; gap:31.68px; flex-wrap:wrap; } .cta-lead { display:flex; align-items:center; gap:18.48px; min-width:0; } .cta-badge { width:60.72px; height:60.72px; flex-shrink:0; border-radius: var(--r); background: rgba(255,255,255,0.1); border:1.2px solid rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center; color: var(--gold); } .cta-badge svg { width:26.4px; height:26.4px; } .cta-text { display:flex; flex-direction:column; gap:2.64px; min-width:0; } .cta-text b { font-family: var(--font-display); font-weight:700; font-size:23.76px; letter-spacing:-0.01em; color:#fff; } .cta-text small { font-family: var(--font-body); font-size:16.5px; color: rgba(255,255,255,0.62); } .cta-strip .btn-orange { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); color:#fff; box-shadow: 0 9.6px 31.2px -9.6px rgba(255,122,42,0.55); flex-shrink:0; } .cta-strip .btn-orange:hover { transform: translateY(-1.32px); } /* ================================================== REVIEW SUBMIT (extends reviews) ================================================== */ .rev-submit-grid { max-width: 1742.4px; margin: 31.68px auto 0; display:grid; grid-template-columns: 422.4px 1fr; gap: 23.76px; align-items:start; } @media (max-width: 1080px){ .rev-submit-grid{ grid-template-columns:minmax(0, 1fr); } } .rev-form { background:#fff; border:1.2px solid var(--line); border-radius: calc(var(--r)+2.64px); box-shadow: var(--shadow-soft); padding: 29.04px; } .rev-form h3 { font-family: var(--font-body); font-weight:700; font-size:22.44px; letter-spacing:-0.01em; color: var(--ink); margin-bottom:5.28px; } .rev-form .sub { font-size:16.5px; color: var(--ink-soft); margin-bottom:21.12px; } .rev-field { margin-bottom:15.84px; } .rev-field label { display:block; font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.12em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); margin-bottom:7.92px; } .rev-field input, .rev-field textarea, .rev-field select { width:100%; border:1.2px solid var(--line); border-radius: 6.6px; background: var(--bg-soft); padding:13.2px 15.84px; font-family: var(--font-body); font-size:17.16px; color: var(--ink); outline:none; transition: border-color 180ms ease, background 180ms ease; } .rev-field input:focus, .rev-field textarea:focus, .rev-field select:focus { border-color: var(--royal-soft); background:#fff; } .rev-stars-pick { display:flex; gap:6.6px; } .rev-star { width:39.6px; height:39.6px; border-radius:6.6px; border:1.2px solid var(--line); background: var(--bg-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink-muted); transition: all 150ms ease; } .rev-star svg { width:21.12px; height:21.12px; } .rev-star.on { background: var(--gold); border-color: var(--gold-deep); color: var(--navy); } .rev-list { display:flex; flex-direction:column; gap:15.84px; } .rev-item { background:#fff; border:1.2px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-soft); padding: 23.76px 26.4px; } .rev-item-top { display:flex; align-items:center; justify-content:space-between; gap:13.2px; margin-bottom:10.56px; } .rev-item .tp-stars { display:flex; gap:2.64px; color: var(--gold-deep); } .rev-item .tp-stars svg { width:17.16px; height:17.16px; } .rev-item .when { font-family: var(--font-ui); font-size:11.88px; letter-spacing: calc(0.08em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .rev-item h4 { font-family: var(--font-body); font-weight:700; font-size:19.8px; letter-spacing:-0.01em; color: var(--ink); margin-bottom:6.6px; } .rev-item p { font-size:17.16px; line-height:1.6; color: var(--ink-soft); margin-bottom:10.56px; } .rev-item .who { display:flex; align-items:center; gap:10.56px; font-family: var(--font-ui); font-size:12.54px; letter-spacing: calc(0.06em * var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .rev-item .who b { color: var(--ink-soft); font-weight:600; } .rev-item .who .verif { display:inline-flex; align-items:center; gap:5.28px; color: var(--green); } .rev-item .who .verif svg { width:14.52px; height:14.52px; } /* faq groups on subpage reuse .faq styles but allow a section title block */ .faq.subfaq { background: #fff; padding: 52.8px 31.68px; } .faq.subfaq + .faq.subfaq { padding-top: 0; } .faq.subfaq .wrap { max-width: 1742.4px; padding-left: 0; padding-right: 0; } .faq.subfaq .section-head { margin-bottom: 0; } .faq.subfaq .section-title { font-size: clamp(25.08px, 2vw, 33px); } .faq.subfaq .faq-grid { margin-top: 21.12px; } .faq.subfaq .faq-col { gap: 10.56px; } .faq.subfaq .faq-q { padding: 17.16px 19.8px; font-size: 17.16px; } .faq.subfaq .faq-a { padding: 0 19.8px; } .faq.subfaq .faq-item.is-open .faq-a { padding: 0 19.8px 17.16px; } .faq.subfaq .faq-group-head { max-width:1742.4px; margin: 0 auto 5.28px; padding-left: 0; padding-right: 0; } .faq-group-head .gk { font-family: var(--font-ui); font-size:13.2px; font-weight:600; letter-spacing: calc(0.16em*var(--tracking)); text-transform:uppercase; color: var(--royal); display:inline-flex; align-items:center; gap:10.56px; } .faq-group-head .gk svg { width:17.16px; height:17.16px; } /* tweaks root z-index already set in homepage.css */ /* ================================================== HERO C · CENTERED ================================================== */ .subhero-c .subhero-c-inner { position: relative; z-index: 2; max-width: 1135.2px; margin: 0 auto; padding: 73.92px 31.68px 84.48px; display:flex; flex-direction:column; align-items:center; text-align:center; gap: 5.28px; } .subhero-c .subhero-crumbs { justify-content:center; } .subhero-c h1 { font-family: var(--font-display); font-weight:700; font-size: clamp(47.52px,4.6vw,73.92px); letter-spacing:-0.03em; line-height:1.06; margin-bottom:23.76px; } .subhero-c h1 em { font-style:normal; color: var(--gold); } .subhero-c .lead { font-family: var(--font-body); font-size: clamp(19.8px,1.5vw,23.76px); font-weight:500; color: rgba(255,255,255,0.78); line-height:1.5; max-width: 792px; margin-bottom: 29.04px; } .subhero-c-feats { display:flex; gap:10.56px; flex-wrap:wrap; justify-content:center; margin-bottom: 31.68px; } .subhero-c-ctas { display:flex; gap:15.84px; flex-wrap:wrap; justify-content:center; margin-bottom: 29.04px; } /* ================================================== HERO D · STAT BAND ================================================== */ .subhero-d .subhero-d-inner { position: relative; z-index: 2; max-width: 1742.4px; margin: 0 auto; padding: 63.36px 31.68px 0; } .subhero-d-top { display:flex; align-items:flex-end; justify-content:space-between; gap:31.68px; flex-wrap:wrap; padding-bottom: 42.24px; } .subhero-d h1 { font-family: var(--font-display); font-weight:700; font-size: clamp(47.52px,4.6vw,73.92px); letter-spacing:-0.03em; line-height:1.0; margin-bottom:15.84px; } .subhero-d h1 em { font-style:normal; color: var(--gold); } .subhero-d .lead { font-family: var(--font-body); font-size: clamp(19.8px,1.4vw,23.76px); font-weight:500; color: rgba(255,255,255,0.78); line-height:1.45; max-width: 686.4px; } .subhero-d-cta { flex-shrink:0; } .subhero-d-stats { display:grid; grid-template-columns: repeat(5,1fr); gap:0; border-top:1.2px solid rgba(255,255,255,0.14); } @media (max-width:912px){ .subhero-d-stats{ grid-template-columns: repeat(2,1fr); } } .sd-stat { padding: 29.04px 23.76px; text-align:center; border-right:1.2px solid rgba(255,255,255,0.1); } .sd-stat:last-child { border-right:none; } .sd-stat .n { display:block; font-family: var(--font-display); font-weight:800; font-size: clamp(34.32px,3vw,50.16px); letter-spacing:-0.03em; color:#fff; line-height:1; } .sd-stat .n em { font-style:normal; color: var(--gold); font-size:0.55em; font-weight:700; } .sd-stat .l { display:block; font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.12em*var(--tracking)); text-transform:uppercase; color: rgba(255,255,255,0.55); margin-top:10.56px; } /* ================================================== HERO E · COMPACT BAR ================================================== */ .subhero-e .subhero-e-inner { position: relative; z-index: 2; max-width: 1742.4px; margin: 0 auto; padding: 34.32px 31.68px; display:flex; align-items:center; justify-content:space-between; gap:26.4px; flex-wrap:wrap; } .subhero-e-left { display:flex; align-items:center; gap:23.76px; } .subhero-e h1 { font-family: var(--font-display); font-weight:700; font-size: clamp(36.96px,3vw,52.8px); letter-spacing:-0.03em; line-height:1; } .subhero-e h1 em { font-style:normal; color: var(--gold); } .subhero-e-div { width:1.32px; height:44.88px; background: rgba(255,255,255,0.2); } .subhero-e-rating { display:flex; align-items:center; gap:10.56px; } .subhero-e-rating .tp-stars { display:flex; gap:2.64px; color: var(--gold); } .subhero-e-rating .tp-stars svg { width:18.48px; height:18.48px; } .subhero-e-rating span { font-family: var(--font-ui); font-size:13.2px; font-weight:600; letter-spacing: calc(0.1em*var(--tracking)); text-transform:uppercase; color: rgba(255,255,255,0.7); } .subhero-e-rating span em { font-style:normal; color:#fff; } .subhero-e-right { display:flex; align-items:center; gap:13.2px; flex-wrap:wrap; } @media (max-width:744px){ .subhero-e .subhero-e-inner{ padding: 29.04px 31.68px; } .subhero-e-div{ display:none; } } /* ================================================== EXTRA OPTIONS · tag-note box (visible only in Tags layout) ================================================== */ .xopts-tagnote { display: none; margin-top: 18.48px; align-items: center; gap: 18.48px; padding: 18.48px 21.12px; background:#fff; border:1.2px solid var(--line); border-radius: var(--r); } body[data-xopt="tags"] .xopts-tagnote { display: flex; } .xopts-tagnote .xtn-ico { width:52.8px; height:52.8px; flex-shrink:0; border-radius: var(--r); background: var(--royal-tint); border:1.2px solid var(--royal-soft); color: var(--royal); display:flex; align-items:center; justify-content:center; } .xopts-tagnote .xtn-ico svg { width:26.4px; height:26.4px; } .xopts-tagnote .xtn-body { min-width:0; } .xopts-tagnote .xtn-head { display:flex; align-items:center; gap:13.2px; } .xopts-tagnote .xtn-name { font-family: var(--font-body); font-weight:700; font-size:19.8px; letter-spacing:-0.01em; color: var(--ink); } .xopts-tagnote .xtn-price { font-family: var(--font-ui); font-size:11.88px; font-weight:700; letter-spacing: calc(0.06em*var(--tracking)); text-transform:uppercase; color: var(--green); border:1.2px solid color-mix(in srgb,var(--green) 30%,var(--line)); border-radius:var(--r); padding:2.64px 10.56px; } .xopts-tagnote .xtn-price.paid { color: var(--gold-deep); border-color: color-mix(in srgb,var(--gold) 45%,var(--line)); } .xopts-tagnote .xtn-desc { font-size:17.16px; line-height:1.5; color: var(--ink-soft); margin-top:3.96px; } /* ================================================== CALC v4 · TIER GRID ================================================== */ .cg-preview { display:flex; align-items:center; justify-content:center; gap:29.04px; margin-bottom:23.76px; } .cg-mini { display:flex; align-items:center; gap:17.16px; background:#fff; border:1.2px solid var(--line); border-radius: var(--r); padding: 15.84px 21.12px; } .cg-mini.from { border-left:3.6px solid var(--royal); } .cg-mini.to { border-left:3.6px solid var(--gold-deep); } .cg-crest { position:relative; width:102.96px; height:102.96px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .cg-crest .glow { position:absolute; inset:6%; border-radius:50%; background: radial-gradient(circle, var(--tier-c,var(--royal)) 0%, transparent 68%); opacity:0.22; filter: blur(7.92px); } body.no-glow .cg-crest .glow { display:none; } .cg-crest img { position:relative; z-index:2; width:92.4px; height:92.4px; object-fit:contain; filter: drop-shadow(0 7.92px 13.2px rgba(27,31,42,0.25)); } .cg-tx { display:flex; flex-direction:column; gap:2.64px; } .cg-tx .cg-l { font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.16em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .cg-mini.from .cg-l { color: var(--royal); } .cg-mini.to .cg-l { color: var(--gold-deep); } .cg-tx .cg-n { font-family: var(--font-display); font-weight:700; font-size:25.08px; letter-spacing:-0.02em; color: var(--ink); } .cg-arrow { color: var(--royal); display:flex; } .cg-arrow svg { width:29.04px; height:29.04px; } .cg-editswitch { display:flex; gap:7.92px; background: var(--bg-deep); border:1.2px solid var(--line); border-radius: var(--r); padding:5.28px; max-width: 554.4px; margin: 0 auto 21.12px; } .cg-edit { flex:1; padding:11.88px 15.84px; border-radius:calc(var(--r) - 2.64px); border:none; background:none; cursor:pointer; font-family: var(--font-ui); font-size:14.52px; font-weight:700; letter-spacing: calc(0.06em*var(--tracking)); text-transform:uppercase; color: var(--ink-soft); transition: all 160ms var(--ease-out); } .cg-edit.sel { background:#fff; box-shadow:0 2.4px 7.2px rgba(27,31,42,0.14); color: var(--royal); } .cg-tiers { display:grid; grid-template-columns: repeat(5, 1fr); gap:10.56px; margin-bottom:21.12px; } @media (max-width:672px){ .cg-tiers{ grid-template-columns: repeat(3,1fr); } } .cg-tier { display:flex; flex-direction:column; align-items:center; gap:6.6px; padding:15.84px 7.92px; border-radius: var(--r); background:#fff; border:1.2px solid var(--line); cursor:pointer; transition: all 160ms var(--ease-out); } .cg-tier:hover { border-color: var(--royal-soft); transform: translateY(-2.64px); box-shadow: var(--shadow-soft); } .cg-tier img { width:60.72px; height:60.72px; object-fit:contain; } .cg-tier span { font-family: var(--font-ui); font-size:11.88px; font-weight:700; letter-spacing: calc(0.04em*var(--tracking)); text-transform:uppercase; color: var(--ink-soft); } .cg-tier.sel-from { border-color: var(--royal); box-shadow: 0 0 0 2.4px var(--royal-soft); } .cg-tier.sel-to { border-color: var(--gold-deep); box-shadow: 0 0 0 2.4px color-mix(in srgb, var(--gold) 60%, transparent); } .cg-divrow { display:flex; gap:21.12px; justify-content:center; } .cg-divrow .grp { display:flex; flex-direction:column; align-items:center; gap:9.24px; } .cg-divrow .grp .gl { font-family: var(--font-ui); font-size:11.22px; font-weight:600; letter-spacing: calc(0.14em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .cg-divrow .div-pills { width: 221.76px; } /* ================================================== CALC v5 · COMPACT DROPDOWNS ================================================== */ .cmp-row { display:grid; grid-template-columns: 1fr auto 1fr; gap:18.48px; align-items:center; } @media (max-width:816px){ .cmp-row{ grid-template-columns: 1fr; } } .cmp-card { display:flex; align-items:center; gap:18.48px; background:#fff; border:1.2px solid var(--line); border-radius: var(--r); padding: 21.12px; } .cmp-card.from { border-left:3.6px solid var(--royal); } .cmp-card.to { border-left:3.6px solid var(--gold-deep); } .cmp-crest { position:relative; width:110.88px; height:110.88px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .cmp-crest .glow { position:absolute; inset:6%; border-radius:50%; background: radial-gradient(circle, var(--tier-c,var(--royal)) 0%, transparent 68%); opacity:0.22; filter: blur(7.92px); } body.no-glow .cmp-crest .glow { display:none; } .cmp-crest img { position:relative; z-index:2; width:100.32px; height:100.32px; object-fit:contain; filter: drop-shadow(0 7.92px 13.2px rgba(27,31,42,0.25)); } .cmp-fields { flex:1; min-width:0; display:flex; flex-direction:column; gap:11.88px; } .cmp-lab { font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.16em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .cmp-card.from .cmp-lab { color: var(--royal); } .cmp-card.to .cmp-lab { color: var(--gold-deep); } .cmp-select { width:100%; border:1.2px solid var(--line); border-radius: var(--r); background: var(--bg-soft); padding:13.2px 15.84px; font-family: var(--font-body); font-weight:600; font-size:18.48px; color: var(--ink); outline:none; cursor:pointer; } .cmp-select:focus { border-color: var(--royal-soft); background:#fff; } .cmp-arrow { display:flex; align-items:center; justify-content:center; width:60.72px; height:60.72px; border-radius:50%; background: linear-gradient(135deg, var(--royal), var(--royal-deep)); color:#fff; box-shadow: 0 12px 26.4px -12px rgba(35,116,196,0.6); } .cmp-arrow svg { width:26.4px; height:26.4px; } @media (max-width:816px){ .cmp-arrow{ transform: rotate(90deg); margin: 0 auto; } } /* ================================================== RANK CALCULATOR · 4 TWIN-CREST VERSIONS (data-calc: classic | spotlight | rows | vs) ================================================== */ /* ---- v2 · SPOTLIGHT — borderless, oversized crests, big glow ---- */ body[data-calc="spotlight"] .rank-station { background: none; border: none; box-shadow: none; padding: 7.92px 10.56px 15.84px; gap: 15.84px; } body[data-calc="spotlight"] .rank-station.is-focus { box-shadow: none; } body[data-calc="spotlight"] .crest-stage { width: 369.6px; height: 369.6px; } body[data-calc="spotlight"] .crest-img { width: 322.08px; height: 322.08px; } body[data-calc="spotlight"] .crest-glow { opacity: 0.4; inset: 2%; filter: blur(18.48px); } body[data-calc="spotlight"] .crest-ring { opacity: 0.7; } body[data-calc="spotlight"] .rank-name-big { font-size: 36.96px; } body[data-calc="spotlight"] .tier-select, body[data-calc="spotlight"] .div-pills { max-width: 343.2px; } body[data-calc="spotlight"] .rank-arrow-glyph { width: 79.2px; height: 79.2px; } /* ---- v3 · ROWS — each station a horizontal row, stacked vertically ---- */ body[data-calc="rows"] .rank-stations { grid-template-columns: 1fr; gap: 15.84px; } body[data-calc="rows"] .rank-station { flex-direction: row; align-items: center; text-align: left; gap: 26.4px; padding: 23.76px 29.04px; } body[data-calc="rows"] .rank-station .crest-stage { width: 198px; height: 198px; flex-shrink: 0; } body[data-calc="rows"] .rank-station .crest-img { width: 168.96px; height: 168.96px; } body[data-calc="rows"] .rank-station-label { position: absolute; top: 18.48px; left: 29.04px; } body[data-calc="rows"] .rank-station { position: relative; padding-top: 52.8px; } body[data-calc="rows"] .rank-name-big { flex: 0 0 171.6px; text-align: left; } body[data-calc="rows"] .rank-name-big small { margin-top: 6.6px; } body[data-calc="rows"] .tier-select { flex: 1; min-width: 158.4px; } body[data-calc="rows"] .div-pills { flex: 0 0 237.6px; } body[data-calc="rows"] .rank-arrow { flex-direction: row; gap: 18.48px; padding: 2.64px 0; } body[data-calc="rows"] .rank-arrow-glyph { transform: rotate(90deg); width: 55.44px; height: 55.44px; } body[data-calc="rows"] .rank-arrow-glyph svg { animation: none; } body[data-calc="rows"] .rank-arrow-glyph .a-rising { transform: rotate(-90deg); } @media (max-width: 816px) { body[data-calc="rows"] .rank-station { flex-wrap: wrap; } body[data-calc="rows"] .rank-name-big, body[data-calc="rows"] .tier-select, body[data-calc="rows"] .div-pills { flex: 1 1 100%; } } /* ---- v4 · VS — dark battle panel with a VS badge ---- */ body[data-calc="vs"] #sel-stations { background: radial-gradient(924px 422.4px at 50% -10%, rgba(255,234,61,0.10), transparent 60%), linear-gradient(165deg, #1b1f2a, #0a2752 60%, #11141c); border-radius: calc(var(--r) + 5.28px); padding: 34.32px 29.04px; margin: -5.28px 0 5.28px; border: 1.2px solid rgba(255,255,255,0.1); } body[data-calc="vs"] .rank-station { background: rgba(255,255,255,0.05); border: 1.2px solid rgba(255,255,255,0.12); } body[data-calc="vs"] .rank-station.is-focus { box-shadow: none; border-color: rgba(255,255,255,0.22); } body[data-calc="vs"] .rank-station-label { color: rgba(255,255,255,0.6); } body[data-calc="vs"] .rank-station.from .rank-station-label .pin { color: #6fb0ff; } body[data-calc="vs"] .rank-name-big { color: #fff; } body[data-calc="vs"] .rank-name-big small { color: rgba(255,255,255,0.55); } body[data-calc="vs"] .crest-glow { opacity: 0.45; filter: blur(15.84px); } body[data-calc="vs"] .tier-trigger { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #fff; } body[data-calc="vs"] .tier-trigger:hover { background: rgba(255,255,255,0.14); } body[data-calc="vs"] .div-pill { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.8); } body[data-calc="vs"] .div-pill.sel { background: var(--gold); border-color: var(--gold-deep); color: var(--navy); box-shadow: none; } body[data-calc="vs"] .rank-arrow-glyph { display: none; } body[data-calc="vs"] .rank-arrow-jump { color: rgba(255,255,255,0.6); } body[data-calc="vs"] .rank-arrow-jump b { color: var(--gold); } body[data-calc="vs"] .rank-vs { display: flex; align-items: center; justify-content: center; width: 76.56px; height: 76.56px; border-radius: 50%; font-family: var(--font-display); font-weight: 800; font-size: 26.4px; letter-spacing: -0.02em; color: var(--navy); background: linear-gradient(135deg, var(--gold), var(--gold-deep)); box-shadow: 0 0 0 7.2px rgba(255,234,61,0.18), 0 14.4px 31.2px -9.6px rgba(0,0,0,0.5); margin-bottom: 7.92px; } @media (max-width: 864px) { body[data-calc="vs"] .rank-vs { transform: none; } } /* ================================================== ORDER PANEL · 3 LIGHT VERSIONS (+ modern dark elsewhere) data-order: light-a (Clean) | light-b (Sky) | light-c (Receipt) | modern ================================================== */ /* light-a = the base look (royal gradient header, white body) — no overrides needed */ /* light-b · SKY — soft-blue panel, lighter header, accent rows */ body[data-order="light-b"] .order-panel { background: var(--bg-soft); border-color: var(--royal-soft); } body[data-order="light-b"] .order-top { background: linear-gradient(155deg, #ff6470 0%, #e23d4b 100%); } body[data-order="light-b"] .order-body { background: #fff; } body[data-order="light-b"] .order-row .v { color: var(--royal); } body[data-order="light-b"] .order-total .price-col.vip { background: #fff; border-color: var(--royal); box-shadow: 0 9.6px 24px -14.4px rgba(35,116,196,0.5); } body[data-order="light-b"] .order-reward { background: #fff; } /* light-c · RECEIPT — white, gold top stripe, dark header text, dashed dividers */ body[data-order="light-c"] .order-panel { border-top: 3.6px solid var(--gold); } body[data-order="light-c"] .order-top { background: #fff; border-bottom: 1.2px dashed var(--line); } body[data-order="light-c"] .order-top::before { display: none; } body[data-order="light-c"] .order-title { color: var(--ink); } body[data-order="light-c"] .order-title em { color: var(--royal); } body[data-order="light-c"] .order-secure { color: var(--green); } body[data-order="light-c"] .order-mini span { color: var(--ink); } body[data-order="light-c"] .order-mini small { color: var(--ink-muted); } body[data-order="light-c"] .order-mini img { filter: drop-shadow(0 7.92px 13.2px rgba(27,31,42,0.2)); } body[data-order="light-c"] .order-arrow { color: var(--royal); } body[data-order="light-c"] .order-row { border-style: dashed; } body[data-order="light-c"] .order-row + .order-row { border-top-style: dashed; } body[data-order="light-c"] .order-total .price-col.reg { background: #fff; border-style: dashed; } body[data-order="light-c"] .order-total .price-col.vip { background: color-mix(in srgb, var(--gold) 14%, #fff); border-color: var(--gold-deep); } body[data-order="light-c"] .order-total .price-col.vip .amt.now { color: var(--gold-deep); } body[data-order="light-c"] .order-foot .btn-royal { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); box-shadow: 0 9.6px 28.8px -9.6px rgba(54,167,242,0.5); } /* ================================================== REVIEWS · overall rating box + 3 layout versions ================================================== */ .rev-wrap { padding: 0 31.68px; margin-top: 23.76px; } .rev-summary { max-width: 1742.4px; margin: 0 auto 21.12px; display: grid; grid-template-columns: auto 1fr auto; gap: 44.88px; align-items: center; background:#fff; border:1.2px solid var(--line); border-radius: calc(var(--r) + 2.64px); box-shadow: var(--shadow-soft); padding: 29.04px 36.96px; } @media (max-width: 1032px){ .rev-summary { grid-template-columns: 1fr; gap: 23.76px; justify-items:center; text-align:center; } } .rev-sum-score { display:flex; flex-direction:column; align-items:center; gap:9.24px; } .rev-sum-score .big { font-family: var(--font-display); font-weight:800; font-size:73.92px; letter-spacing:-0.03em; line-height:0.9; color: var(--ink); } .rev-sum-score .big span { font-size:29.04px; font-weight:500; color: var(--ink-muted); } .rev-sum-score .tp-stars { display:flex; gap:2.64px; color: var(--gold-deep); } .rev-sum-score .tp-stars svg { width:22.44px; height:22.44px; } .rev-sum-count { font-family: var(--font-ui); font-size:13.2px; letter-spacing: calc(0.08em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .rev-sum-count b { color: var(--ink-soft); } .rev-sum-bars { display:flex; flex-direction:column; gap:7.92px; min-width: 290.4px; width:100%; max-width: 475.2px; } .rev-bar { display:flex; align-items:center; gap:13.2px; font-family: var(--font-ui); font-size:13.2px; color: var(--ink-muted); } .rev-bar .s { width:13.2px; text-align:center; color: var(--ink-soft); font-weight:700; } .rev-bar i { flex:1; height:9.24px; border-radius:1318.68px; background: var(--bg-deep); position:relative; overflow:hidden; } .rev-bar i::after { content:''; position:absolute; top:0; left:0; bottom:0; width:var(--w,0%); background: linear-gradient(90deg, color-mix(in srgb,var(--gold) 75%,#fff), var(--gold-deep)); border-radius:1318.68px; } .rev-bar em { width:44.88px; text-align:right; font-style:normal; color: var(--ink-soft); } .rev-sum-badges { display:flex; flex-direction:column; gap:11.88px; } .rev-sum-badges span { display:inline-flex; align-items:center; gap:10.56px; font-family: var(--font-ui); font-size:13.2px; font-weight:600; letter-spacing: calc(0.08em*var(--tracking)); text-transform:uppercase; color: var(--ink-soft); } .rev-sum-badges svg { width:18.48px; height:18.48px; color: var(--green); } .rev-submit-grid { max-width: 1742.4px; margin: 0 auto; grid-template-columns: 448.8px 1fr; } /* This second .rev-submit-grid declaration sits after the collapse @media above, so it re-introduced 2 columns on mobile (horizontal overflow). Re-assert the single-column collapse here so it wins by source order. */ @media (max-width: 1080px){ .rev-submit-grid { grid-template-columns: minmax(0, 1fr); } } /* summary now lives in the left column, above the form */ .rev-left { display:flex; flex-direction:column; gap:18.48px; min-width:0; } .rev-left .rev-summary { display:flex; flex-direction:column; align-items:stretch; gap:17.16px; margin:0; padding:23.76px 26.4px; text-align:left; } .rev-left .rev-summary .rev-sum-score { flex-direction:row; align-items:center; gap:17.16px; justify-content:flex-start; } .rev-left .rev-summary .rev-sum-score .big { font-size:52.8px; } .rev-left .rev-summary .rev-sum-bars { max-width:none; min-width:0; } .rev-left .rev-summary .rev-sum-badges { flex-direction:row; flex-wrap:wrap; gap:11.88px 18.48px; } @media (max-width: 1080px){ .rev-left .rev-summary .rev-sum-score { justify-content:center; } } /* version: split (default) — summary+form left, reviews single column right */ /* version: cards — reviews become a 2-col card grid on the right */ body[data-reviews="cards"] .rev-list { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15.84px; align-content:start; } @media (max-width: 840px){ body[data-reviews="cards"] .rev-list { grid-template-columns: 1fr; } } /* version: wall — summary + form side-by-side on top, reviews as a 3-col wall below */ body[data-reviews="wall"] .rev-submit-grid { display:flex; flex-direction:column; gap:21.12px; } body[data-reviews="wall"] .rev-left { flex-direction:row; align-items:stretch; gap:21.12px; } body[data-reviews="wall"] .rev-left .rev-summary { flex:0 0 422.4px; } body[data-reviews="wall"] .rev-left .rev-form { flex:1; } body[data-reviews="wall"] .rev-list { display:grid; grid-template-columns: repeat(3, 1fr); gap: 15.84px; } @media (max-width: 1080px){ body[data-reviews="wall"] .rev-left { flex-direction:column; } body[data-reviews="wall"] .rev-list { grid-template-columns: repeat(2,1fr); } } @media (max-width: 744px){ body[data-reviews="wall"] .rev-list { grid-template-columns: 1fr; } } /* reviews trust strip (3rd-party / Trustpilot) */ .rev-trust { max-width:1742.4px; margin:0 auto 18.48px; display:flex; align-items:center; gap:15.84px; flex-wrap:wrap; background: #fff; border:1.2px solid var(--line); border-radius: var(--r); padding:14.52px 21.12px; } /* CTA to the full (third-party / independently verified) reviews page — pushed to the right of the trust bar; wraps under on narrow widths. */ .rev-trust-btn { margin-left:auto; white-space:nowrap; padding:11.88px 19.8px; font-size:14.52px; } @media (max-width:672px){ .rev-trust-btn { margin-left:0; width:100%; justify-content:center; } } .rev-trust .tp-stars { display:flex; gap:2.64px; color: var(--green); } .rev-trust .tp-stars svg { width:19.8px; height:19.8px; } .rev-trust-txt { font-size:16.5px; color: var(--ink-soft); } .rev-trust-txt b { color: var(--ink); font-weight:600; } /* review form auto-submit note */ .rev-auto { display:flex; align-items:flex-start; gap:10.56px; margin-top:15.84px; font-size:15.18px; line-height:1.5; color: var(--ink-muted); } .rev-auto svg { width:18.48px; height:18.48px; color: var(--green); flex-shrink:0; margin-top:1.32px; } /* back-to-top button */ .totop-wrap { display:flex; justify-content:center; background: var(--bg); padding: 10.56px 31.68px 39.6px; } .totop-wrap .totop-btn { display:inline-flex; align-items:center; gap:11.88px; font-family: var(--font-ui); font-size:15.84px; font-weight:700; letter-spacing: calc(0.12em*var(--tracking)); text-transform:uppercase; color: #fff; background: var(--royal); border:1.2px solid var(--royal-deep); border-radius:var(--r); padding:18.48px 34.32px; box-shadow: 0 9.6px 26.4px -12px rgba(35,116,196,0.55); transition: background 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out); } .totop-wrap .totop-btn:hover { background: var(--royal-deep); border-color: var(--royal-deep); color:#fff; transform: translateY(-2.64px); } .totop-wrap .totop-btn .totop-ico { width:18.48px; height:18.48px; transform: rotate(180deg); } /* FAQ "question" section titles read better in the body face than the display face */ .faq.subfaq .section-title { font-family: var(--font-body); } /* ================================================== ABOUT SECTION ASIDE · 3 ways to use the right space data-about: highlights (default) | media | wide ================================================== */ .seo-aside .sa-card, .seo-aside .sa-media { display: none; } body[data-about="highlights"] .seo-aside .sa-highlights, body:not([data-about]) .seo-aside .sa-highlights { display: flex; } body[data-about="media"] .seo-aside .sa-media { display: block; } body[data-about="wide"] .seo-wrap { grid-template-columns: 1fr; } body[data-about="wide"] .seo-aside { display: none; } body[data-about="wide"] .seo-block p { max-width: 1188px; } .sa-card { flex-direction: column; gap: 18.48px; background:#fff; border:1.2px solid var(--line); border-radius: calc(var(--r) + 2.64px); box-shadow: var(--shadow-soft); padding: 26.4px; } .sa-card-head { display:flex; align-items:center; gap:11.88px; font-family: var(--font-display); font-weight:700; font-size:19.8px; color: var(--ink); } .sa-card-head svg { width:23.76px; height:23.76px; color: var(--royal); } .sa-list { display:flex; flex-direction:column; gap:11.88px; } .sa-list li { display:flex; align-items:flex-start; gap:11.88px; font-size:16.5px; line-height:1.4; color: var(--ink-soft); } .sa-list svg { width:18.48px; height:18.48px; color: var(--green); flex-shrink:0; margin-top:1.32px; } .sa-rating { display:flex; align-items:center; gap:10.56px; padding-top:15.84px; border-top:1.2px solid var(--line-soft); } .sa-rating .tp-stars { display:flex; gap:1.32px; color: var(--gold-deep); } .sa-rating .tp-stars svg { width:17.16px; height:17.16px; } .sa-rating span { font-family: var(--font-ui); font-size:13.2px; color: var(--ink-muted); } .sa-rating b { color: var(--ink); } .sa-card .btn { width:100%; justify-content:center; } .sa-media image-slot { display:block; width:100%; height:422.4px; border-radius:13.2px; overflow:hidden; } .sa-media-cap { display:flex; align-items:center; gap:10.56px; margin-top:13.2px; font-family: var(--font-ui); font-size:14.52px; font-weight:600; color: var(--ink-soft); } .sa-media-cap svg { width:18.48px; height:18.48px; color: var(--gold-deep); } /* keep bottom-content "cards" styling available without conflicting with the aside grid */ body[data-bottom="cards"] .seo-block { background:#fff; border:1.2px solid var(--line); border-radius: calc(var(--r)+2.64px); padding: 39.6px 42.24px; box-shadow: var(--shadow-soft); } body[data-bottom="cards"] .seo-block .seo-stats .seo-stat, body[data-bottom="cards"] .seo-block .seo-step { box-shadow:none; } /* ================================================== REVIEWS PAGER (1, 2, 3 · Next) ================================================== */ .rev-pager { grid-column: 1 / -1; display:flex; align-items:center; justify-content:center; gap:7.92px; margin-top:21.12px; } .rev-page, .rev-page-nav { font-family: var(--font-ui); font-size:15.84px; font-weight:700; color: var(--ink-soft); background:#fff; border:1.2px solid var(--line); border-radius: var(--r); min-width:44.88px; height:44.88px; padding:0 14.52px; display:inline-flex; align-items:center; justify-content:center; gap:7.92px; cursor:pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .rev-page:hover, .rev-page-nav:hover { border-color: var(--royal-soft); color: var(--royal); } .rev-page.is-on { background: var(--royal); border-color: var(--royal-deep); color:#fff; } .rev-page-nav svg { width:17.16px; height:17.16px; } .rev-page-nav[disabled] { opacity:0.4; cursor:not-allowed; } .rev-page-nav[disabled]:hover { border-color: var(--line); color: var(--ink-soft); } /* ================================================== TEAMMATE-REVISION PATCHES ================================================== */ /* condensed calculator controls (LP + queue) */ .calc-controls .ctl-block { padding: 17.16px 19.8px; } .calc-controls .ctl-label { margin-bottom: 13.2px; } /* fonts out of the display category → body face */ .seo h2, .seo h3, .seo .seo-stat .n, .seo .seo-step .num { font-family: var(--font-body); } /* footer column headings: now owned site-wide by chrome-f3.css (.site-footer); the boost-page font override is removed so this page's footer matches the rest. */ /* muted (empty) review star */ .rev-item .tp-stars .tp-star.off { color: var(--line); } /* ---- reviews sort bar ---- */ .rev-list-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 15.84px; flex-wrap: wrap; padding-bottom: 2.64px; } .rlh-count { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); } .rlh-count b { color: var(--ink-soft); } .rev-sort { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5.28px; background: #fff; border: 1.2px solid var(--line); border-radius: var(--r); padding: 3.96px; box-shadow: var(--shadow-soft); } .rev-sort-lab { font-family: var(--font-ui); font-size: 11.88px; font-weight: 600; letter-spacing: calc(0.12em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); padding: 0 7.92px 0 9.24px; } .rev-sort-btn { font-family: var(--font-ui); font-size: 14.52px; font-weight: 700; color: var(--ink-soft); background: none; border: none; border-radius: calc(var(--r) - 2.64px); padding: 7.92px 14.52px; cursor: pointer; transition: background 160ms ease, color 160ms ease; } .rev-sort-btn:hover { color: var(--royal); } .rev-sort-btn.is-on { background: var(--royal); color: #fff; } /* ---- order CTA · hover ---- The parent boosting/main.css `.btn` is the old blue theme: `.btn` is white, and `.btn:not(:disabled):hover { background:0 0 }` strips the background to transparent while a skewed blue `::after` panel (#0062a6) sweeps in (0,3,0 — it beats the F3 `.owb-rd .btn-royal` gradient at 0,2,0). That read as the button "blinking white". Pin the royal gradient on hover (!important to win regardless of load order) and remove the ::after sweep, so the CTA stays the same red on hover. */ .order-foot .btn { position: relative; } .order-foot .btn::after { display: none !important; } .order-foot .btn-royal, .order-foot .btn-royal:hover { background: linear-gradient(135deg, var(--royal) 0%, var(--royal-deep) 100%) !important; color: #fff; border-color: transparent; } /* hover blink = LIGHT BLUE (per design feedback), not the gold default */ .order-foot .btn:hover { box-shadow: 0 0 0 1.2px #5cc8ff, 0 12px 36px -7.2px rgba(92,200,255,0.6); } @media (prefers-reduced-motion: no-preference) { .order-foot .btn:hover svg { animation: btn-bolt-flicker 0.6s ease-in-out; } } .order-foot .btn:hover svg { color: #5cc8ff; filter: drop-shadow(0 0 6.6px #5cc8ff); } @keyframes btn-bolt-flicker { 0%,100% { opacity: 1; } 12%,32%,52% { opacity: 0.35; } 22%,42%,62% { opacity: 1; } } /* ================================================== ROUND PATCHES ================================================== */ /* Footer: removed the boost-page-only .site-footer overrides (brand-colour social icons keyed by nth-child + bigger column headings). They predated the global F3 footer and were dead (no live page emitted .site-footer); now that footer.php renders .site-footer site-wide they would only desync THIS page — the design uses the ghost social icons + 12px headings chrome-f3.css applies everywhere, and the nth-child(1-4) set also missed the new 5th (email) icon. */ /* equal width for extra-options & note cards in the order column */ .calc-main .xopts-card, .calc-main .note-card { max-width: none; width: 100%; margin: 0; } /* ================================================== NAV DROPDOWN (example) ================================================== */ .nav-dd { position: relative; display: inline-flex; } .nav-dd-caret { width: 17.16px; height: 17.16px; margin-left: 3.96px; transition: transform 220ms var(--ease-out); } .nav-dd:hover .nav-dd-caret { transform: rotate(180deg); } .nav-dd-menu { position: absolute; top: calc(100% + 10.56px); left: 50%; transform: translateX(-50%) translateY(-7.92px); width: 382.8px; background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 2.64px); box-shadow: var(--shadow-pop); padding: 9.24px; z-index: 60; opacity: 0; visibility: hidden; transition: opacity 180ms ease, transform 200ms var(--ease-out), visibility 180ms; } .nav-dd:hover .nav-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dd-menu::before { content: ''; position: absolute; top: -10.56px; left: 0; right: 0; height: 10.56px; } .nav-dd-menu > a { display: flex; align-items: center; gap: 14.52px; padding: 11.88px 13.2px; border-radius: var(--r); transition: background 150ms ease; } .nav-dd-menu > a:hover { background: var(--royal-tint); } .nav-dd-menu > a svg { width: 22.44px; height: 22.44px; color: var(--royal); flex-shrink: 0; } .nav-dd-menu > a span { display: flex; flex-direction: column; gap: 1.32px; min-width: 0; } .nav-dd-menu > a b { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-dd-menu > a small { font-family: var(--font-ui); font-size: 11.88px; font-weight: 600; letter-spacing: calc(0.06em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); } .nav-dd-menu .nav-dd-all { justify-content: center; gap: 9.24px; margin-top: 3.96px; border-top: 1.2px solid var(--line-soft); border-radius: 0 0 var(--r) var(--r); font-family: var(--font-ui); font-size: 13.2px; font-weight: 700; letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; color: var(--royal); } .nav-dd-menu .nav-dd-all svg { width: 17.16px; height: 17.16px; } @media (max-width: 1320px) { .nav-dd { display: none; } } /* ================================================== HOT BADGE · 3 versions (data-hot: flame | ice | neon) ================================================== */ .nav-hot { position: relative; overflow: hidden; } /* flame (default) */ body[data-hot="flame"] .nav-hot, body:not([data-hot]) .nav-hot { background: linear-gradient(0deg, #ff3d00 0%, #ff7a2a 45%, #36a7f2 100%); color: #3a1500; } @media (prefers-reduced-motion: no-preference) { body[data-hot="flame"] .nav-hot, body:not([data-hot]) .nav-hot { animation: hot-flame 1.1s ease-in-out infinite; } } @keyframes hot-flame { 0%,100% { box-shadow: 0 0 7.2px -1.2px rgba(255,80,0,0.7); transform: scale(1); } 50% { box-shadow: 0 0 13.2px 1.2px rgba(255,140,0,0.85); transform: scale(1.06); } } /* ice — cool blue */ body[data-hot="ice"] .nav-hot { background: linear-gradient(160deg, #6fe0ff 0%, #2aa6e6 60%, #2374c4 100%); color: #042036; } @media (prefers-reduced-motion: no-preference) { body[data-hot="ice"] .nav-hot { animation: hot-ice 2s ease-in-out infinite; } } @keyframes hot-ice { 0%,100% { box-shadow: 0 0 7.2px -1.2px rgba(60,180,255,0.6); } 50% { box-shadow: 0 0 14.4px 1.2px rgba(120,220,255,0.85); } } /* neon — glow outline */ body[data-hot="neon"] .nav-hot { background: #0a0f1f; color: #5cffd0; border: 1.2px solid #5cffd0; } @media (prefers-reduced-motion: no-preference) { body[data-hot="neon"] .nav-hot { animation: hot-neon 1.4s ease-in-out infinite; } } @keyframes hot-neon { 0%,100% { box-shadow: 0 0 6px rgba(92,255,208,0.6), inset 0 0 4.8px rgba(92,255,208,0.4); } 50% { box-shadow: 0 0 15.6px rgba(92,255,208,0.95), inset 0 0 8.4px rgba(92,255,208,0.6); } } /* banner hero — comfortable bottom padding under the lifted calculator */ body[data-hero="a"] .subhero-a .subhero-inner { padding-bottom: 71.28px; } /* center the arrow column vertically against the crests (not the full station height) */ .rank-arrow { align-self: start; margin-top: 205.92px; } @media (max-width: 864px) { .rank-arrow { align-self: center; margin-top: 0; } } body[data-calc="spotlight"] .rank-arrow { margin-top: 208.56px; } body[data-calc="rows"] .rank-arrow { align-self: center; margin-top: 0; } /* ================================================== MULTI-PRODUCT CONFIGURATORS ================================================== */ .prod-panel { display: none; } body[data-prod="rank"] .prod-panel[data-for~="rank"], body[data-prod="duo"] .prod-panel[data-for~="duo"], body[data-prod="wins"] .prod-panel[data-for~="wins"], body[data-prod="duowins"] .prod-panel[data-for~="duowins"], body[data-prod="placement"] .prod-panel[data-for~="placement"], body[data-prod="coaching"] .prod-panel[data-for~="coaching"], body[data-prod="packs"] .prod-panel[data-for~="packs"] { display: block; } body:not([data-prod]) .prod-panel[data-for~="rank"] { display: block; } /* packs DO show the server/region selector (the region is needed to assign the booster). */ /* product hot badge — "save" pill variant */ .prod-tab-hot.save { background: linear-gradient(135deg, var(--green), #178a44); } /* ---- shared rankbox (single rank picker) ---- */ .pp-lead { margin-bottom: 23.76px; } /* wins / duo-wins split: control left, division-style rank station right */ .wins-split { display:grid; grid-template-columns: 1fr 1fr; gap:23.76px; align-items:stretch; } @media (max-width: 864px){ .wins-split { grid-template-columns: 1fr; } } /* dial right, rank left */ .wins-split .qty-block { margin:0; display:flex; flex-direction:column; order: 2; } .wins-split .wins-station { order: 1; } @media (max-width: 864px){ .wins-split .qty-block { order: 1; } .wins-split .wins-station { order: 2; } } .wins-station { justify-content:center; } .wins-station .crest-stage { width: 221.76px; height: 221.76px; } .wins-station .crest-img { width: 171.6px; height: 171.6px; } .rankbox { background:#fff; border:1.2px solid var(--line); border-radius: var(--r); padding: 21.12px 23.76px 23.76px; } .rb-label { display:flex; align-items:center; gap:10.56px; font-family: var(--font-ui); font-size:12.54px; font-weight:600; letter-spacing: calc(0.16em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); margin-bottom:18.48px; } .rb-label .pin { color: var(--royal); display:inline-flex; } .rb-row { display:flex; align-items:center; gap:23.76px; } .rb-crest { position:relative; width:142.56px; height:142.56px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .rb-crest .glow { position:absolute; inset:6%; border-radius:50%; background: radial-gradient(circle, var(--tier-c,var(--royal)) 0%, transparent 68%); opacity:0.22; filter: blur(10.56px); } body.no-glow .rb-crest .glow { display:none; } .rb-crest img { position:relative; z-index:2; width:126.72px; height:126.72px; object-fit:contain; filter: drop-shadow(0 10.56px 18.48px rgba(27,31,42,0.26)); transition: transform 360ms var(--ease-out); } .rankbox:hover .rb-crest img { transform: scale(1.05) translateY(-2.64px); } .rb-fields { flex:1; min-width:0; display:flex; flex-direction:column; gap:13.2px; } .rb-tier { position:relative; } .rb-pills { display:flex; gap:7.92px; } /* ---- quantity block (wins / hours) ---- */ .qty-block { background:#fff; border:1.2px solid var(--line); border-radius: var(--r); padding: 21.12px 23.76px 23.76px; } .qty-block .ctl-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:18.48px; } .qty-block .ctl-label .l { font-family: var(--font-ui); font-size:12.54px; font-weight:600; letter-spacing: calc(0.16em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .qty-block .ctl-label .v { font-family: var(--font-display); font-weight:700; font-size:19.8px; color: var(--ink); } .qty-block .ctl-label .v em { font-style:normal; color: var(--royal); } /* layout toggles for wins quantity */ .qty-slider, .qty-stepper, .dial-host { display: none; } body[data-wins="dial"] #wins-qty .dial-host { display: flex; } body[data-wins="stepper"] #wins-qty .qty-stepper { display: flex; } body:not([data-wins]) #wins-qty .dial-host { display: flex; } .prod-panel[data-for~="coaching"] .dial-host { display: flex; } .qty-stepper.solo { display: flex; } /* ---- circular win/hours dial ---- */ .dial-host { flex-direction: column; align-items: center; gap: 21.12px; } .win-dial { position: relative; width: 264px; height: 264px; touch-action: none; } .dial-svg { width: 100%; height: 100%; display: block; transform: rotate(0deg); } /* transform-origin MUST stay the SVG-viewBox centre (100,100). The +10% px scale wrongly bumped it to 110px, pivoting the rotate() off-centre and breaking the dial. center + fill-box is scale-proof (always the circle's own centre). */ .dial-track { fill: none; stroke: #ffe0e3; stroke-width: 9; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; } body.no-glow .dial-track { stroke: #e4e7ec; } .dial-prog { fill: none; stroke: var(--orange, #ff7a2a); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; transition: stroke-dasharray 220ms var(--ease-out); } .dial-knob { fill: #fff; stroke: var(--orange, #ff7a2a); stroke-width: 4; cursor: grab; transition: cx 200ms var(--ease-out), cy 200ms var(--ease-out); } .win-dial:active .dial-knob { cursor: grabbing; } .dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .dial-num { font-family: var(--font-display); font-weight: 800; font-size: 95.04px; line-height: 0.84; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; } .dial-unit { font-family: var(--font-ui); font-size: 14.52px; font-weight: 700; letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-top: 10.56px; } .dial-presets { display: flex; gap: 7.92px; } .qty-stepper { flex-wrap:wrap; align-items:center; gap:15.84px; } .qty-btn { width:58.08px; height:58.08px; border-radius:50%; border:1.2px solid var(--line); background: var(--bg-soft); color: var(--royal); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all 160ms var(--ease-out); flex-shrink:0; } .qty-btn:hover { background: var(--royal-tint); border-color: var(--royal-soft); transform: scale(1.06); } .qty-btn:active { transform: scale(0.94); } .qty-btn[disabled] { opacity:0.3; cursor:not-allowed; transform:none; } .qty-btn svg { width:23.76px; height:23.76px; } .qty-readout { display:flex; flex-direction:column; align-items:center; min-width:102.96px; } .qty-readout span { font-family: var(--font-display); font-weight:800; font-size:44.88px; line-height:0.9; letter-spacing:-0.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .qty-readout small { font-family: var(--font-ui); font-size:11.22px; font-weight:600; letter-spacing: calc(0.12em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); margin-top:5.28px; } .qty-presets { display:flex; gap:7.92px; margin-left:auto; } .qty-preset { padding:10.56px 17.16px; border-radius: var(--r); border:1.2px solid var(--line); background: var(--bg-soft); font-family: var(--font-ui); font-size:15.84px; font-weight:700; color: var(--ink-soft); cursor:pointer; transition: all 150ms var(--ease-out); } .qty-preset:hover { border-color: var(--royal-soft); color: var(--royal); } .qty-preset.sel { background: var(--royal); border-color: var(--royal-deep); color:#fff; } /* Plain paragraph, not flex: flex turned each inline run into its own item, so the bold "net win" wrapped into a two-line column beside the check icon (user report); the leading icon was dropped from the markup with it. */ .pp-note { display:block; margin-top:21.12px; font-size:15.84px; line-height:1.5; color: var(--ink-soft); } .pp-note b { color: var(--ink); } /* ---- placement games segmented ---- */ #pl-qty .games-seg { display: none; } body[data-pl="dial"] #pl-qty .dial-host { display: flex; } body[data-pl="cards"] #pl-qty .games-seg { display: grid; } body:not([data-pl]) #pl-qty .dial-host { display: flex; } .games-seg { display:grid; grid-template-columns: 1fr 1fr; gap:13.2px; } .game-card { display:flex; flex-direction:column; align-items:center; gap:5.28px; padding: 26.4px 18.48px; border-radius: var(--r); border:1.2px solid var(--line); background: var(--bg-soft); cursor:pointer; transition: all 170ms var(--ease-out); } .game-card:hover { border-color: var(--royal-soft); transform: translateY(-2.64px); box-shadow: var(--shadow-soft); } .game-card.sel { background: var(--royal-tint); border-color: var(--royal); box-shadow: 0 12px 28.8px -16.8px rgba(35,116,196,0.5); } .game-card .gc-num { font-family: var(--font-display); font-weight:800; font-size:52.8px; line-height:0.9; letter-spacing:-0.03em; color: var(--royal); } .game-card .gc-lab { font-family: var(--font-display); font-weight:700; font-size:17.16px; color: var(--ink); } .game-card .gc-sub { font-family: var(--font-ui); font-size:11.88px; font-weight:600; letter-spacing: calc(0.08em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } /* placement layout B: compact pills */ body[data-pl="cards"] .games-seg { grid-template-columns: 1fr; gap:13.2px; } /* ---- coaching roles ---- */ .role-block { margin-bottom:21.12px; } .role-block .ctl-label { margin-bottom:15.84px; } .role-block .ctl-label .l { font-family: var(--font-ui); font-size:12.54px; font-weight:600; letter-spacing: calc(0.16em*var(--tracking)); text-transform:uppercase; color: var(--ink-muted); } .role-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:10.56px; } .role-opt { display:flex; flex-direction:column; align-items:center; gap:9.24px; padding:18.48px 7.92px; border-radius: var(--r); border:1.2px solid var(--line); background: var(--bg-soft); cursor:pointer; transition: all 160ms var(--ease-out); color: var(--ink-soft); } .role-opt:hover { border-color: var(--royal-soft); transform: translateY(-2.64px); color: var(--royal); } .role-opt.sel { background: var(--royal); border-color: var(--royal-deep); color:#fff; } .role-opt svg { width:29.04px; height:29.04px; } .role-opt span { font-family: var(--font-ui); font-size:13.2px; font-weight:700; letter-spacing: calc(0.06em*var(--tracking)); text-transform:uppercase; } /* coaching layout B: horizontal list */ body[data-co="list"] .role-grid { grid-template-columns: 1fr; gap:7.92px; } body[data-co="list"] .role-opt { flex-direction:row; justify-content:flex-start; gap:15.84px; padding:14.52px 21.12px; } body[data-co="list"] .role-opt svg { width:23.76px; height:23.76px; } /* ---- packs · preset rank-journey deal cards (XL deals) ---- */ .deals-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18.48px; } @media (max-width: 1228.8px){ .deals-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 720px){ .deals-grid { grid-template-columns: 1fr; } } /* ===== base deal card (shared DOM, skinned per data-packs) ===== */ .dl { position: relative; display: flex; flex-direction: column; gap: 21.12px; background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 5.28px); padding: 26.4px; cursor: pointer; text-align: left; overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease; } .dl:hover { transform: translateY(-5.28px); box-shadow: var(--shadow-pop); border-color: var(--royal-soft); } .dl.sel { border-color: var(--royal); box-shadow: var(--shadow-pop); } /* hex check badge — shared across all 4 selection styles */ .dl.sel::after { content: '\2713'; position: absolute; z-index: 5; top: 14.52px; left: 14.52px; width: 35.64px; height: 39.6px; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 800; font-size: 18.48px; color: #fff; background: var(--royal); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } @media (prefers-reduced-motion: no-preference) { .dl.sel::after { animation: hexpop 240ms var(--ease-out); } } @keyframes hexpop { from { transform: scale(0.4) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } } /* v1 · BADGE (default) — thin border + hex badge */ body[data-dealsel="badge"] .dl.sel { border-color: var(--royal); } /* v2 · NOTCH — royal hex badge top-center + accent top edge */ body[data-dealsel="notch"] .dl.sel { border-color: var(--royal); box-shadow: inset 0 4.8px 0 var(--royal), var(--shadow-pop); } body[data-dealsel="notch"] .dl.sel::after { top: -2.64px; left: 50%; transform: translateX(-50%); width: 52.8px; height: 29.04px; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); border-radius: 0 0 5.28px 5.28px; } @media (prefers-reduced-motion: no-preference) { body[data-dealsel="notch"] .dl.sel::after { animation: none; } } /* v3 · LIFT — gold border + big float shadow under the card */ body[data-dealsel="lift"] .dl.sel { border-color: var(--gold-deep); transform: translateY(-7.92px); box-shadow: 0 31.2px 38.4px -21.6px rgba(27,31,42,0.5), var(--shadow-pop); } body[data-dealsel="lift"] .dl.sel::after { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); } /* v4 · GLOW — royal glow halo + float shadow */ body[data-dealsel="glow"] .dl.sel { box-shadow: 0 0 0 3.6px color-mix(in srgb, var(--royal) 32%, transparent), 0 26.4px 43.2px -19.2px rgba(35,116,196,0.55); } body[data-dealsel="glow"] .dl.sel::after { box-shadow: 0 0 16.8px 1.2px color-mix(in srgb, var(--royal) 60%, transparent); } .dl-off { position: absolute; top: 0; right: 0; z-index: 3; font-family: var(--font-ui); font-weight: 800; font-size: 17.16px; color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); padding: 9.24px 17.16px; border-radius: 0 calc(var(--r) + 5.28px) 0 15.84px; box-shadow: 0 4.8px 14.4px -4.8px rgba(255,122,42,0.6); } .dl-head { display: flex; flex-direction: column; gap: 3.96px; padding-right: 73.92px; } .dl-kicker { font-family: var(--font-ui); font-size: 12.54px; font-weight: 700; letter-spacing: calc(0.16em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); } .dl-target { font-family: var(--font-display); font-weight: 800; font-size: 33px; letter-spacing: -0.025em; line-height: 1; color: var(--royal); text-transform: uppercase; } .dl-journey { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7.92px; padding: 7.92px 0 2.64px; } .dl-c { display: flex; flex-direction: column; align-items: center; gap: 10.56px; min-width: 0; } .dl-c { position: relative; } .dl-c img { position: relative; z-index: 2; width: 102.96px; height: 102.96px; object-fit: contain; filter: drop-shadow(0 7.92px 14.52px rgba(27,31,42,0.24)); } .dl-c::before { content:''; position:absolute; top:-2.64px; left:50%; transform:translateX(-50%); width:110.88px; height:110.88px; border-radius:50%; background: radial-gradient(circle, var(--tier-c, var(--royal)) 0%, transparent 66%); opacity:0.2; filter: blur(9.24px); } body.no-glow .dl-c::before { display:none; } .dl-c i { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing:-0.01em; color: var(--ink); text-transform: uppercase; white-space: nowrap; } .dl-arrow { display: flex; align-items: center; justify-content: center; width: 44.88px; height: 44.88px; border-radius: 50%; background: var(--royal-tint); color: var(--royal); align-self: flex-start; margin-top: 29.04px; } .dl-arrow svg { width: 21.12px; height: 21.12px; } .dl-pricing { display: flex; align-items: flex-end; justify-content: space-between; gap: 15.84px; padding-top: 18.48px; border-top: 1.2px solid var(--line-soft); } .dl-price { font-family: var(--font-display); font-weight: 800; font-size: 44.88px; letter-spacing: -0.035em; line-height: 0.9; color: var(--ink); } .dl-saves { display: flex; flex-direction: column; align-items: flex-end; gap: 5.28px; } .dl-saves b { font-family: var(--font-ui); font-size: 14.52px; font-weight: 800; letter-spacing: calc(0.04em*var(--tracking)); text-transform: uppercase; color: var(--gold-deep); } .dl-saves i { font-style: normal; font-family: var(--font-ui); font-size: 11.88px; font-weight: 700; color: var(--royal); background: var(--royal-tint); border-radius: 3.96px; padding: 2.64px 7.92px; } .dl-eta { display: inline-flex; align-items: center; gap: 9.24px; font-family: var(--font-ui); font-size: 13.2px; font-weight: 700; letter-spacing: calc(0.08em*var(--tracking)); text-transform: uppercase; color: var(--ink-soft); } .dl-eta svg { width: 17.16px; height: 17.16px; color: var(--gold-deep); } .dl-cta { display: flex; align-items: center; justify-content: center; gap: 10.56px; margin-top: auto; padding: 18.48px; border-radius: var(--r); background: var(--royal); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 15.84px; letter-spacing: calc(0.1em*var(--tracking)); text-transform: uppercase; transition: background 160ms ease, gap 160ms ease; } .dl:hover .dl-cta { background: var(--royal-deep); gap: 15.84px; } .dl-cta svg { width: 19.8px; height: 19.8px; } /* ====== VARIANT 2 · ROWS (full-width horizontal table-style) ====== */ body[data-packs="rows"] .deals-grid { grid-template-columns: 1fr; gap: 13.2px; } body[data-packs="rows"] .dl { display: grid; grid-template-columns: 1.5fr 1.7fr auto auto auto; align-items: center; gap: 29.04px; padding: 21.12px 29.04px 21.12px 23.76px; } body[data-packs="rows"] .dl-off { position: static; border-radius: 1318.68px; padding: 6.6px 14.52px; font-size: 14.52px; align-self: center; justify-self: start; order: -1; } body[data-packs="rows"] .dl-head { padding-right: 0; } body[data-packs="rows"] .dl-target { font-size: 26.4px; } body[data-packs="rows"] .dl-journey { padding: 0; gap: 5.28px; } body[data-packs="rows"] .dl-c img { width: 68.64px; height: 68.64px; } body[data-packs="rows"] .dl-c::before { width: 73.92px; height: 73.92px; } body[data-packs="rows"] .dl-c i { font-size: 14.52px; } body[data-packs="rows"] .dl-arrow { width: 34.32px; height: 34.32px; margin-top: 18.48px; } body[data-packs="rows"] .dl-arrow svg { width: 17.16px; height: 17.16px; } body[data-packs="rows"] .dl-pricing { flex-direction: column; align-items: flex-end; gap: 5.28px; padding-top: 0; border-top: none; } body[data-packs="rows"] .dl-price { font-size: 34.32px; } body[data-packs="rows"] .dl-eta { flex-direction: column; gap: 5.28px; text-align: center; } body[data-packs="rows"] .dl-cta { margin-top: 0; padding: 15.84px 29.04px; white-space: nowrap; } @media (max-width: 1032px){ body[data-packs="rows"] .dl { grid-template-columns: 1fr 1fr; } body[data-packs="rows"] .dl-off { order: 0; } body[data-packs="rows"] .dl-cta { grid-column: 1 / -1; } } /* ====== VARIANT 3 · SPOTLIGHT (target crest is the hero) ====== */ body[data-packs="spotlight"] .deals-grid { grid-template-columns: repeat(3,1fr); } @media (max-width:1228.8px){ body[data-packs="spotlight"] .deals-grid { grid-template-columns: repeat(2,1fr);} } @media (max-width:720px){ body[data-packs="spotlight"] .deals-grid { grid-template-columns: 1fr;} } body[data-packs="spotlight"] .dl { align-items: center; text-align: center; gap: 15.84px; padding-top: 34.32px; } body[data-packs="spotlight"] .dl-head { padding-right: 0; align-items: center; order: 2; gap: 2.64px; } body[data-packs="spotlight"] .dl-kicker { order: 2; } body[data-packs="spotlight"] .dl-target { order: 1; font-size: 35.64px; } body[data-packs="spotlight"] .dl-journey { order: 1; display: flex; flex-direction: column; gap: 7.92px; } body[data-packs="spotlight"] .dl-c:first-child { display: none; } /* hide FROM crest */ body[data-packs="spotlight"] .dl-arrow { display: none; } body[data-packs="spotlight"] .dl-c img { width: 163.68px; height: 163.68px; } body[data-packs="spotlight"] .dl-c::before { width: 174.24px; height: 174.24px; opacity: 0.28; } body[data-packs="spotlight"] .dl-c i { display: none; } body[data-packs="spotlight"] .dl-head::after { content: attr(data-route); } body[data-packs="spotlight"] .dl-pricing { order: 3; flex-direction: column; align-items: center; gap: 7.92px; width: 100%; } body[data-packs="spotlight"] .dl-price { font-size: 52.8px; } body[data-packs="spotlight"] .dl-saves { align-items: center; } body[data-packs="spotlight"] .dl-eta { order: 4; } body[data-packs="spotlight"] .dl-cta { order: 5; width: 100%; } /* ====== VARIANT 4 · DARK (premium navy + gold) ====== */ body[data-packs="dark"] .dl { background: radial-gradient(554.4px 264px at 100% 0%, rgba(255,234,61,0.10), transparent 60%), linear-gradient(165deg, #1b1f2a 0%, #1b1f2a 55%, #11141c 100%); border-color: rgba(255,255,255,0.12); box-shadow: 0 24px 60px -26.4px rgba(6,18,42,0.6); } body[data-packs="dark"] .dl:hover { border-color: rgba(255,234,61,0.4); } body[data-packs="dark"] .dl.sel { border-color: var(--gold); box-shadow: 0 0 0 2.4px rgba(255,234,61,0.5), 0 24px 60px -26.4px rgba(6,18,42,0.6); } body[data-packs="dark"] .dl.sel::after { box-shadow: inset 0 3.6px 0 var(--gold); } body[data-packs="dark"] .dl-off { background: var(--gold); color: var(--navy); box-shadow: none; } body[data-packs="dark"] .dl-kicker { color: rgba(255,255,255,0.55); } body[data-packs="dark"] .dl-target { color: #fff; } body[data-packs="dark"] .dl-c i { color: rgba(255,255,255,0.9); } body[data-packs="dark"] .dl-c::before { opacity: 0.4; } body[data-packs="dark"] .dl-arrow { background: rgba(255,255,255,0.12); color: var(--gold); } body[data-packs="dark"] .dl-pricing { border-top-color: rgba(255,255,255,0.14); } body[data-packs="dark"] .dl-price { color: #fff; } body[data-packs="dark"] .dl-saves b { color: var(--gold); } body[data-packs="dark"] .dl-saves i { color: #fff; background: rgba(255,255,255,0.12); } body[data-packs="dark"] .dl-eta { color: rgba(255,255,255,0.7); } body[data-packs="dark"] .dl-eta svg { color: var(--gold); } body[data-packs="dark"] .dl-cta { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); } body[data-packs="dark"] .dl:hover .dl-cta { background: linear-gradient(135deg, #ffe773, var(--gold-deep)); } /* ====== SPOTLIGHT CREST · float baseline + 4 unique borders (data-spot) ====== */ /* visible target crest = last .dl-c in the journey (FROM is hidden in spotlight) */ body[data-packs="spotlight"] .dl-journey { position: relative; padding: 10.56px 0 5.28px; } body[data-packs="spotlight"] .dl-c:last-child { position: relative; padding: 23.76px; } /* lift the static pack crest ~5px so it sits where the (removed) float used to peak — compensates for no longer bobbing (UI batch 8). The ::before ground shadow + ::after ring are anchored to the parent, so only the crest moves. */ body[data-packs="spotlight"] .dl-c:last-child img { position: relative; z-index: 3; width: 153.12px; height: 153.12px; transform: translateY(-5px); } /* grounding shadow — the pack crest sits STILL over a soft static bottom shadow. The up/down bob (spot-bob) + pulsing shadow (spot-shadow) were removed per UI batch 7 ("packs icons should not float, only have a float shadow in the bottom"). The crest's own drop-shadow (.dl-c img, above) + this ellipse read as a floating icon without any motion. */ body[data-packs="spotlight"] .dl-c:last-child::before { content:''; position:absolute; z-index:0; bottom:10.56px; left:50%; transform:translateX(-50%); width: 121.44px; height: 17.16px; border-radius:50%; background: radial-gradient(ellipse, rgba(27,31,42,0.30), transparent 70%); } @keyframes spot-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5.28px); } } @keyframes spot-shadow { 0%,100% { transform: translateX(-50%) scaleX(1); opacity:0.85; } 50% { transform: translateX(-50%) scaleX(0.72); opacity:0.5; } } @keyframes spot-spin { to { transform: translate(-50%,-50%) rotate(360deg); } } /* the border ring sits behind the crest, does NOT bob (stays put while crest floats) */ body[data-packs="spotlight"] .dl-c:last-child::after { content:''; position:absolute; z-index:1; top:46%; left:50%; width:198px; height:198px; transform: translate(-50%,-50%); border-radius:50%; box-sizing:border-box; } /* --- border 1 · SOLID ring --- */ body[data-packs="spotlight"][data-spot="solid"] .dl-c:last-child::after { border: 3.6px solid var(--tier-c,var(--royal)); box-shadow: 0 0 0 7.2px color-mix(in srgb, var(--tier-c,var(--royal)) 14%, transparent); } /* --- border 2 · DASHED ring (slow rotate) --- */ body[data-packs="spotlight"][data-spot="dashed"] .dl-c:last-child::after { border: 3.6px dashed var(--tier-c,var(--royal)); opacity: 0.85; } @media (prefers-reduced-motion: no-preference) { body[data-packs="spotlight"][data-spot="dashed"] .dl-c:last-child::after { animation: spot-spin 14s linear infinite; } } /* --- border 3 · DOUBLE glow ring --- */ body[data-packs="spotlight"][data-spot="double"] .dl-c:last-child::after { width:184.8px; height:184.8px; border: 2.4px solid var(--tier-c,var(--royal)); box-shadow: 0 0 0 6px #fff, 0 0 0 8.4px color-mix(in srgb, var(--tier-c,var(--royal)) 55%, transparent), 0 0 26.4px 4.8px color-mix(in srgb, var(--tier-c,var(--royal)) 30%, transparent); } /* --- border 4 · HEX frame --- */ body[data-packs="spotlight"][data-spot="hex"] .dl-c:last-child::after { width:205.92px; height:205.92px; border:none; border-radius:0; background: var(--tier-c,var(--royal)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 5.28px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0.9; } /* simpler robust hex outline: tinted hex plate behind crest */ body[data-packs="spotlight"][data-spot="hex"] .dl-c:last-child::after { -webkit-mask: none; mask: none; padding: 0; border:none; background: linear-gradient(150deg, color-mix(in srgb, var(--tier-c,var(--royal)) 26%, #fff), color-mix(in srgb, var(--tier-c,var(--royal)) 10%, #fff)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: none; } /* ====== FLOAT toggle for boost crests (Division / Wins / Placement / Coaching) ====== */ body[data-float="on"] .crest-ring, body[data-float="on"] .crest-glow { display: none; } /* remove the circle/rings around it */ body[data-float="on"] .crest-stage { position: relative; } body[data-float="on"] .crest-stage::after { content:''; position:absolute; z-index:0; bottom: 10.56px; left:50%; transform: translateX(-50%); width: 54%; height: 15.84px; border-radius: 50%; background: radial-gradient(ellipse, rgba(27,31,42,0.30), transparent 70%); } @media (prefers-reduced-motion: no-preference) { body[data-float="on"] .crest-img { animation: crest-bob 3s ease-in-out infinite; } body[data-float="on"] .crest-stage::after { animation: spot-shadow 3s ease-in-out infinite; } } @keyframes crest-bob { 0%,100% { transform: translateY(0) scale(var(--crest-scale,1)); } 50% { transform: translateY(-5.28px) scale(var(--crest-scale,1)); } } /* order panel — quantity badge for non-rank journeys */ .order-qty-badge { display:inline-flex; align-items:center; justify-content:center; gap:6.6px; font-family: var(--font-display); font-weight:800; font-size:29.04px; letter-spacing:-0.02em; color:#fff; } .order-mini.solo { gap:9.24px; } /* wins/placement journey — the quantity overlaid on the rank crest (handoff valorant-hero.css:385-387, ×1.2). The crest matches the journey crest size so the two minis read as a pair; the qbadge is a small pill pinned bottom-right. */ .order-mini .order-qty-crest { position: relative; display: inline-flex; } .order-mini .order-qty-crest img { width: 158.4px; height: 158.4px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 7.92px 13.2px rgba(0,0,0,0.35)); } .order-mini .order-qty-crest .qbadge { position: absolute; right: 2.64px; bottom: 10.56px; display: inline-flex; align-items: center; justify-content: center; min-width: 34.32px; height: 29.04px; padding: 0 9.24px; border-radius: 1098.9px; background: linear-gradient(135deg, var(--royal) 0%, var(--royal-deep) 100%); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 17.16px; line-height: 1; box-shadow: 0 4.8px 12px -4.8px rgba(35,116,196,0.7); border: 1.8px solid #fff; } /* ============================================================ OWBOOST mobile polish — the +20% scale tightens this dense page on phones; keep everything inside the viewport. ============================================================ */ /* decorative hero glow must never create sideways scroll (scope to the hero only — clipping the calc card would cut off the tier popover) */ .subhero { overflow-x: clip; } /* let the calc/sidebar grid columns shrink below their content min-width so the dense calculator never forces horizontal scroll on narrow screens */ .calc-layout > *, .calc-main, .order-aside { min-width: 0; } @media (max-width: 600px) { /* product-menu switcher: all tabs 2-up so labels fit on a phone */ .prod-menu { padding: 10.56px; gap: 7.92px; } .prod-menu .prod-tab.big, .prod-menu .prod-tab:not(.big) { flex: 1 1 calc(50% - 3.96px); } .prod-menu .prod-tab.big .prod-tab-name { font-size: 14.3px; } .prod-menu .prod-tab.big .prod-tab-ico { width: 42.24px; height: 42.24px; } .prod-tab { padding: 10.56px; } .prod-tab-name { font-size: 14.3px; } .prod-tab-sub { font-size: 9.9px; } .prod-tab-txt { gap: 2.2px; } } /* ============================================================ CHECKOUT / PAYMENT MODAL (F3-styled; opens from the order CTA) Fields mirror the live checkout so it binds to #paymentform later. ============================================================ */ .pay-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 31.68px; } .pay-overlay[hidden] { display: none; } .pay-backdrop { position: absolute; inset: 0; background: rgba(27, 31, 42, 0.62); -webkit-backdrop-filter: blur(5.28px); backdrop-filter: blur(5.28px); } /* overflow-x: clip (not the default auto that overflow-y forces) so a tooltip bubble that extends past the modal edge can't trigger a horizontal scrollbar — the .pay-tip ::after expands the scroll area even while hidden (UI batch 4). */ .pay-modal { position: relative; z-index: 1; width: 100%; max-width: 712.8px; max-height: 92vh; overflow-y: auto; overflow-x: clip; background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 10.56px); box-shadow: 0 48px 120px -24px rgba(27, 31, 42, 0.55); padding: 36.96px; } /* Open transition — the modal pops in from just above its resting spot (top-down) instead of hard-cutting in. Driven by :not([hidden]) so it re-runs each open() (UI batch 7 — "checkout should move from top down as a pop up"). */ @keyframes payPopIn { from { opacity: 0; transform: translateY(-40px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes payFadeIn { from { opacity: 0; } to { opacity: 1; } } .pay-overlay:not([hidden]) { animation: payFadeIn 180ms ease both; } .pay-overlay:not([hidden]) .pay-modal { animation: payPopIn 320ms cubic-bezier(0.16, 1, 0.3, 1) both; } @media (prefers-reduced-motion: reduce) { .pay-overlay:not([hidden]), .pay-overlay:not([hidden]) .pay-modal { animation: none; } } .pay-close { position: absolute; top: 21.12px; right: 21.12px; width: 47.52px; height: 47.52px; display: inline-flex; align-items: center; justify-content: center; border: 1.2px solid var(--line); border-radius: 10.56px; background: var(--bg); color: var(--ink-soft); cursor: pointer; transition: background 160ms ease, color 160ms ease; } .pay-close:hover { background: var(--royal-tint); color: var(--accent); } .pay-close svg { width: 23.76px; height: 23.76px; } .pay-eyebrow { display: inline-flex; align-items: center; gap: 9.24px; font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .pay-eyebrow svg { width: 17.16px; height: 17.16px; } .pay-title { font-family: var(--font-display); font-weight: 700; font-size: 36.96px; letter-spacing: -0.02em; color: var(--ink); margin-top: 7.92px; } .pay-title em { font-style: normal; color: var(--accent); } /* Recap (UI batch 9): one row — the four minis SPREAD across the left (journey flex:1, space-between) and the price hugs the right, so there's no dead gap. nowrap so applying a VIP code (which widens the price column with the struck price + badge) never bumps the price to a new row; the journey is taller than the price column, so the row height is stable in both states. Stacks on a phone (mobile block re-enables wrap). */ .pay-recap { display: flex; flex-wrap: wrap; align-items: center; gap: 16.5px; margin: 26.4px 0; padding: 18.48px 21.12px; background: var(--bg-soft); border: 1.2px solid var(--line); border-radius: var(--r); } .pay-recap-journey { display: flex; align-items: flex-start; justify-content: space-between; gap: 9.24px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; } .pay-recap-total { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; flex-shrink: 0; text-align: right; } .pay-recap-total-lbl { font-family: var(--font-ui); font-size: 11.88px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } /* price matches the "Your Order" panel (Barlow 800, tabular-nums) instead of League, which read badly at this size (UI batch 9). */ .pay-recap-total-amt { font-family: var(--font-body); font-weight: 800; font-size: 33px; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } /* VIP price section in the checkout recap — "Today's price" struck above the discounted VIP total so the saving is explicit (mirrors the order panel). */ .pay-recap-was { display: inline-flex; align-items: center; gap: 6.6px; margin-bottom: 1.32px; } .pay-recap-was .prw-lbl { font-family: var(--font-ui); font-size: 10.56px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); } .pay-recap-was s { font-family: var(--font-body); font-weight: 700; font-size: 14.52px; color: var(--ink-muted); text-decoration-thickness: 1.32px; } .pay-vip-badge { font-family: var(--font-ui); font-size: 10.56px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); background: var(--gold); border-radius: 4.4px; padding: 1.32px 6.6px; margin-left: 5.28px; vertical-align: middle; } /* Normal-by-default total: the recap shows the plain "Total" + normal price; the struck normal price + "VIP price -10%" label appear only when a VIP/promo code is applied (the checkout JS adds .vip-applied to .pay-recap) (UI batch 7). */ .pay-recap .pay-recap-was { display: none; } .pay-recap.vip-applied .pay-recap-was { display: inline-flex; } .pay-recap .prt-vip { display: none; } .pay-recap.vip-applied .prt-normal { display: none; } .pay-recap.vip-applied .prt-vip { display: inline; } .pay-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15.84px; } .pay-field { display: flex; flex-direction: column; gap: 7.92px; min-width: 0; } .pay-field-full { grid-column: 1 / -1; } .pay-label { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .pay-label em { color: var(--accent); font-style: normal; } .pay-label small { text-transform: none; letter-spacing: 0; color: var(--ink-muted); font-size: 12.1px; } /* Field help tooltip — info icon appended to a label, reveals data-tip on hover/ focus. Driven by the $tip helper in checkout.php; on every checkout field so each input is self-explaining (UI batch 4). Left-anchored so the bubble never clips the modal's left edge (fields sit near the modal's left). */ .pay-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15.84px; height: 15.84px; margin-left: 5.28px; vertical-align: -2.64px; color: var(--ink-muted); cursor: help; } .pay-tip svg { width: 100%; height: 100%; } .pay-tip:hover, .pay-tip:focus-visible, .pay-tip:focus { color: var(--accent); outline: none; } .pay-tip::after { content: attr(data-tip); position: absolute; left: -6.6px; bottom: calc(100% + 9.24px); width: 224.4px; max-width: 58vw; background: var(--navy); color: #fff; font-family: var(--font-body); font-size: 12.54px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; padding: 9.24px 11.88px; border-radius: 9.24px; box-shadow: 0 14.52px 33px -13.2px rgba(0,0,0,0.45); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 150ms ease, transform 150ms ease; z-index: 6; } .pay-tip::before { content: ''; position: absolute; left: 4.62px; bottom: calc(100% + 4.62px); border: 6.6px solid transparent; border-top-color: var(--navy); opacity: 0; transition: opacity 150ms ease; z-index: 6; } /* include plain :focus (not only :focus-visible) so a TAP on the icon reveals the tip on touch devices — :focus-visible doesn't match a pointer-focused span (UI batch 4). */ .pay-tip:hover::after, .pay-tip:focus-visible::after, .pay-tip:focus::after, .pay-tip:hover::before, .pay-tip:focus-visible::before, .pay-tip:focus::before { opacity: 1; } .pay-tip:hover::after, .pay-tip:focus-visible::after, .pay-tip:focus::after { transform: translateY(0); } /* right-column field (Discord) on the 2-up grid: anchor the bubble to the right so it opens leftward and isn't clipped by the modal's overflow-x: clip (UI batch 4). */ @media (min-width: 561px) { .pay-fields > .pay-field:nth-of-type(2) .pay-tip::after { left: auto; right: -6.6px; } .pay-fields > .pay-field:nth-of-type(2) .pay-tip::before { left: auto; right: 4.62px; } } .pay-field input { font-family: var(--font-body); font-size: 18.48px; padding: 14.52px 17.16px; border: 1.8px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); transition: border-color 160ms ease, box-shadow 160ms ease; } .pay-field input::placeholder { color: var(--ink-muted); } .pay-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.6px var(--royal-tint); } /* VIP / promo code box — sits above the payment methods */ /* margin-top matches the other label→field rhythm so the VIP block sits at the same spacing as the fields above it, not jammed against them (UI batch 4). */ .pay-vip-block { margin: 19.8px 0 23.76px; } /* mirror .pay-label exactly (was inline-flex w/ 0.066em tracking + 10.56 gap, which read as misaligned vs the other field labels) (UI batch 4). */ .pay-vip-label { display: block; font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7.92px; } .pay-vip-row { display: flex; gap: 10.56px; } .pay-vip-row input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 18.48px; padding: 14.52px 17.16px; border: 1.8px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; transition: border-color 160ms ease, box-shadow 160ms ease; } .pay-vip-row input::placeholder { color: var(--ink-muted); text-transform: none; letter-spacing: normal; } .pay-vip-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.6px var(--royal-tint); } .pay-vip-apply { flex-shrink: 0; padding: 0 26.4px; border: none; border-radius: var(--r); background: var(--royal); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 14.52px; letter-spacing: 0.066em; text-transform: uppercase; cursor: pointer; transition: background 160ms ease; } .pay-vip-apply:hover { background: var(--royal-deep); } .pay-vip-msg { font-size: 14.52px; margin-top: 8.4px; font-weight: 600; color: var(--green); } .pay-vip-msg:empty { display: none; } .pay-vip-msg.is-error { color: var(--accent); } .pay-vip-msg.is-checking { color: var(--ink-muted); } /* the live loyalty JS (boosting-calc.js) REPLACES the class with cb-cm-success / cb-cm-error, dropping .pay-vip-msg's size/colour — re-home them so the live apply-result message stays visible + on-brand (UI batch 7). */ .pay-vip-block .cb-cm-success, .pay-vip-block .cb-cm-error { font-size: 14.52px; margin-top: 8.4px; font-weight: 600; } .pay-vip-block .cb-cm-success { color: var(--green); } .pay-vip-block .cb-cm-error { color: var(--accent); } /* Loyalty redemption UI — the real boosting-calc.js coins flow, styled for F3 (UI batch 8). .cli-coins-block is display:none until a valid ACCOUNT code resolves (loadAccount sets display:block); ticking "Use bonus" applies the discount. */ .pay-vip-loyalty:empty { display: none; } .cli-coins-block.pay-vip-coins { margin-top: 11.88px; padding: 14.52px 16.5px; border: 1.8px solid var(--royal-soft); border-radius: var(--r); background: var(--royal-tint); display: none; } .cli-coins-block.pay-vip-coins .cb-coin-info { font-size: 15.18px; color: var(--ink-soft); } .cli-coins-block.pay-vip-coins .cb-coin-info strong { color: var(--accent); font-weight: 800; } .pay-vip-usecoins { display: flex; align-items: center; gap: 9.24px; margin-top: 9.24px; cursor: pointer; font-family: var(--font-ui); font-size: 15.18px; font-weight: 600; color: var(--ink); } .pay-vip-usecoins input { width: 19.8px; height: 19.8px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; } .cb-deduction-info { margin-top: 7.92px; font-size: 13.86px; font-weight: 600; color: var(--green); transition: opacity 160ms ease; } .cli-signup-info-block { margin-top: 9.24px; font-size: 13.86px; color: var(--ink-muted); } .pay-methods-label { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 23.76px 0 11.88px; } .pay-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13.2px; } /* Customers see 3 methods, admins 4 (the extra Free tile). Let a lone final tile span both columns so the 2-col grid never leaves an empty cell. */ .pay-method:last-child:nth-child(odd) { grid-column: 1 / -1; } .pay-method { cursor: pointer; position: relative; } .pay-method input { position: absolute; opacity: 0; pointer-events: none; } .pay-method-card { display: flex; flex-direction: column; gap: 2.64px; padding: 17.16px 18.48px; border: 1.8px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .pay-method:hover .pay-method-card { border-color: var(--royal-soft); } .pay-method input:checked + .pay-method-card { border-color: var(--accent); background: var(--royal-tint); box-shadow: 0 0 0 1.2px var(--accent); } .pay-method input:checked + .pay-method-card::after { content: '✓'; position: absolute; top: 13.2px; right: 17.16px; color: var(--accent); font-weight: 800; font-size: 18.48px; } .pay-method input:focus-visible + .pay-method-card { box-shadow: 0 0 0 3.6px var(--royal-tint); } .pay-method-name { font-family: var(--font-display); font-weight: 700; font-size: 19.8px; color: var(--ink); } .pay-method-sub { font-size: 14.52px; color: var(--ink-muted); } .pay-tos { display: flex; align-items: flex-start; gap: 11.88px; margin: 23.76px 0 21.12px; font-size: 16.5px; color: var(--ink-soft); line-height: 1.5; } .pay-tos input { margin-top: 2.64px; width: 21.12px; height: 21.12px; accent-color: var(--accent); flex-shrink: 0; } .pay-tos a { color: var(--accent); text-decoration: underline; } .pay-submit { width: 100%; justify-content: center; font-size: 17.16px; padding: 24.2px 19.8px; min-height: 64.9px; } .pay-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 23.76px; margin-top: 18.48px; font-family: var(--font-ui); font-size: 13.2px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); } .pay-trust span { display: inline-flex; align-items: center; gap: 7.92px; } .pay-trust svg { width: 17.16px; height: 17.16px; color: var(--green); } body.pay-open { overflow: hidden; } /* Toast for transient calculator notices (min-order + the Top 500 per-win notice). The plugin's .buypaymentnotifity is unstyled on F3 (main.css is stripped), so style it as a fixed bottom-center toast here — loaded on both live + preview (UI batch 9). */ .buypaymentnotifity { position: fixed; left: 50%; bottom: 26.4px; transform: translateX(-50%); z-index: 2000; max-width: min(90vw, 460px); text-align: center; background: var(--navy); color: #fff; font-family: var(--font-body); font-size: 15.84px; font-weight: 600; line-height: 1.4; padding: 14.52px 22px; border-radius: var(--r); border: 1.2px solid rgba(255,255,255,0.12); box-shadow: 0 18px 50px -12px rgba(0,0,0,0.45); } .buypaymentnotifity b { color: var(--gold); font-weight: 800; } /* Radiant = per-win CENTERED blocking popup (UI batch 10). Reuses the .agent-pop centering recipe in a narrower dedicated class; shown on picking Top 500 on a division boost AND when "Rank up" is clicked while Top 500 is the target. */ body.radiant-pop-open { overflow: hidden; } /* background:transparent is LOAD-BEARING: this container carries .vb-rd, and home-page.css paints .vb-rd with an opaque var(--bg) — on a fixed inset-0 container that whites out the entire page behind the dim (the "grey void" report; .agent-pop fixed the same bug the same way). With the container transparent, the dim matches the champions/booster popups. */ .radiant-pop { position: fixed; inset: 0; z-index: 1300; display: none; background: transparent; } .radiant-pop.open { display: grid; place-items: center; padding: 26.4px; overflow-y: auto; } .radiant-pop-backdrop { position: fixed; inset: 0; background: rgba(27,31,42,0.62); -webkit-backdrop-filter: blur(5.28px); backdrop-filter: blur(5.28px); } .radiant-pop-modal { position: relative; z-index: 1; width: 100%; max-width: 462px; background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 10.56px); box-shadow: 0 48px 120px -24px rgba(27,31,42,0.55); padding: 33px 31.68px; text-align: center; } .radiant-pop-ico { width: 59.4px; height: 59.4px; margin: 0 auto 15.84px; border-radius: 50%; background: var(--royal-tint); color: var(--royal); display: inline-flex; align-items: center; justify-content: center; } .radiant-pop-ico svg { width: 30.36px; height: 30.36px; } .radiant-pop-title { font-family: var(--font-display); font-weight: 700; font-size: 27.72px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10.56px; } .radiant-pop-title em { font-style: normal; color: var(--accent); } .radiant-pop-msg { font-family: var(--font-body); font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 23.76px; } .radiant-pop-msg b { color: var(--ink); font-weight: 800; } .radiant-pop-foot { display: flex; gap: 11.88px; justify-content: center; flex-wrap: wrap; } .radiant-pop-foot .btn { min-width: 152px; justify-content: center; } /* ---- extra-option activation popup (boost-live.js openXoptPop) ---- Same modal mechanics as .radiant-pop (own class set so the two popups never collide in querySelector). background:transparent on the container is LOAD-BEARING: it carries the token scope class, which paints an opaque var(--bg) — on a fixed inset-0 container that would white out the page. */ body.xopt-pop-open { overflow: hidden; } .xopt-pop { position: fixed; inset: 0; z-index: 1300; display: none; background: transparent; } .xopt-pop.open { display: grid; place-items: center; padding: 26.4px; overflow-y: auto; } .xopt-pop-backdrop { position: fixed; inset: 0; background: rgba(27,31,42,0.62); -webkit-backdrop-filter: blur(5.28px); backdrop-filter: blur(5.28px); } .xopt-pop-modal { position: relative; z-index: 1; width: 100%; max-width: 528px; max-height: 88vh; overflow-y: auto; background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 10.56px); box-shadow: 0 48px 120px -24px rgba(27,31,42,0.55); padding: 33px 31.68px; text-align: center; } .xopt-pop-emoji { display: block; font-size: 47.52px; line-height: 1; margin: 0 auto 13.2px; } .xopt-pop-title { font-family: var(--font-display); font-weight: 700; font-size: 25.08px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 13.2px; } .xopt-pop-title .xopt-pop-price { font-style: normal; font-family: var(--font-ui); font-size: 13.2px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--royal); background: var(--royal-tint); border-radius: 1098.9px; padding: 3.96px 10.56px; vertical-align: middle; margin-left: 6.6px; } .xopt-pop-desc { font-family: var(--font-body); font-size: 15.84px; line-height: 1.6; color: var(--ink-soft); text-align: left; margin: 0 0 19.8px; } .xopt-pop-desc p { margin: 0 0 10.56px; } .xopt-pop-desc p:last-child { margin-bottom: 0; } /* Admin-authored option descriptions (the_content) sometimes ship a decorative .extraimage icon — often a raw inline on the SAME baseline — no misaligned CURRENT/SERVICE labels (UI batch 10). */ .pay-recap-journey .order-mini span { font-family: var(--font-body); font-size: 13.2px; font-weight: 700; color: var(--ink); white-space: normal; overflow-wrap: break-word; line-height: 1.14; max-width: 100%; text-align: center; min-height: 2.28em; display: flex; align-items: flex-end; justify-content: center; } .pay-recap-journey .order-mini small { font-family: var(--font-ui); font-size: 10.56px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } /* arrow removed from the recap — the four minis read as a clean, evenly-spread row without the From->To arrow (UI batch 10). */ .pay-recap-journey .order-arrow { display: none; } /* Below ~767px the modal is narrower than the journey (80px minis) + price, so the nowrap desktop recap would push the last mini onto the price. WRAP the recap (price stacks below the journey) for the whole sub-desktop band, not just phones, and shrink the minis. Gate at 767px (the modal caps at 748px, so >=767 is the clean desktop case) (UI batch 10 — fixes the mid-width overlap the 80px minis introduced). */ @media (max-width: 767px) { /* stack the journey above the price (re-enable wrap; desktop is nowrap) */ .pay-recap { flex-wrap: wrap; } .pay-recap-journey { gap: 3.3px; flex: 1 1 100%; justify-content: space-around; flex-wrap: wrap; } .pay-recap-total { align-items: center; width: 100%; flex-direction: row; justify-content: center; gap: 9.24px; } .pay-recap-journey .order-mini { width: 74px; } .pay-recap-journey .order-mini > img, .pay-recap-journey .order-mini > .order-qty-badge, .pay-recap-journey .order-mini > .order-svr, .pay-recap-journey .order-mini > .order-ico { width: 60px; height: 60px; } .pay-recap-journey .order-mini > .order-svr svg, .pay-recap-journey .order-mini > .order-ico svg { width: 35px; height: 35px; } .pay-recap-journey .order-mini span { font-size: 12px; } .pay-recap-journey .order-arrow { margin: 0 1px; } .pay-recap-journey .order-arrow svg { width: 13px; height: 13px; } /* tooltip narrower on phones so the shown bubble stays inside the clipped modal */ .pay-tip::after { width: 190px; max-width: 64vw; } } /* ================================================== LIVE INTEGRATION (body.owb-boost-page only) The preview is a standalone full-width document; live, the boosting plugin renders this product template INSIDE the theme's ~1140px centered .container and prints its own .banner.banner__page hero above it. Two fixes, both scoped to the body class functions.php adds only when owb_f3_product_enabled is on, so the preview (which has no such class) is byte-for-byte unaffected: 1. Hide the legacy banner hero — the F3 .subhero in page.php replaces it. 2. Break the calc / hero / seo / faq / cta sections out of the narrow container to the full viewport width. The calc's order grid is 1fr/432px and only lays the order panel beside the calculator above ~1296px; inside a 1140px container it would otherwise drop the "Your order" panel below. The 100vw + 50%/50vw margin pull is the standard full-bleed; it assumes the container is horizontally centered (the live theme's is). margin-left/right only — never the shorthand — so .calc-section keeps its -33.6px hero overlap. ================================================== */ body.owb-boost-page .banner.banner__page, body.owb-boost-page .banner__page, body.owb-boost-page .banner__page + .arrow-page-down, body.owb-boost-page .arrow-page-down { display: none !important; } body.owb-boost-page .subhero, body.owb-boost-page .calc-section, body.owb-boost-page .seo, body.owb-boost-page .faq.subfaq, body.owb-boost-page .totop-wrap, body.owb-boost-page .cta-strip { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* The CTA strip is the last section; kill any bottom margin and the stray empty paragraph wpautop can leave from the template's trailing newline, so the page ends flush at the footer with no empty band after "Still have a question?". */ body.owb-boost-page .cta-strip { margin-bottom: 0 !important; } body.owb-boost-page .cta-strip + p:empty, body.owb-boost-page .cta-strip ~ p:empty { display: none !important; margin: 0 !important; } /* Guard against a horizontal scrollbar if any wrapper would otherwise let the 100vw sections poke a pixel past the viewport edge. */ body.owb-boost-page { overflow-x: hidden; } /* -------------------------------------------------------------------------- CALC GRID — the live form vs the preview structure. The preview lays .calc-main (col 1) and .order-aside (col 2) as the two direct children of .calc-layout's 1fr/432px grid, with NO form. Live wraps both in a single

so the CTA inside .order-aside submits every field; page.php gives that form class .calc-form and puts the four calc blocks in an inner .calc-main. display:contents removes the form's own box so its children (.calc-main + .order-aside) ARE the grid items — the order panel sits in column 2 again instead of dropping to the bottom of column 1. The .calculate-end-button dummy carries the [hidden] attribute, but the plugin's own ".calculate-end-button{display:inline-block}" overrides that, so without this it would render as a third grid item and shove the columns out of place. Hidden inputs are display:none already, so they are never grid items. */ body.owb-boost-page .calc-form { display: contents; } body.owb-boost-page .calc-form > .calculate-end-button { display: none !important; } /* SECTION HEIGHTS — .owb-rd doubles as the homepage ROOT reset: home-page.css gives .owb-rd { min-height: 100vh } for the SINGLE .owb-rd wrapper used on the home page and the previews. This template instead puts .owb-rd on EVERY section (subhero/calc/seo/faq/cta) purely to resolve the design tokens, so each one inherited min-height:100vh and ballooned to a full viewport — the thin cta-strip and the faq rendered as 100vh-tall empty bands and the hero sat half-empty. Null it here so sections size to their content (the preview, whose .owb-rd IS the body, keeps its full-height root and is unaffected). */ body.owb-boost-page .owb-rd { min-height: 0; } /* HERO BREATHING ROOM (live only). The F3 subhero sits directly beneath the dense .eb-nav now that the legacy .banner__page (which used to separate them) is hidden, so the preview's tight 31/34px inner padding reads as cramped against the nav. Give the hero more vertical room. Preview/EBL/OWB keep the design pad. */ body.owb-boost-page .subhero-inner { padding-top: 57.2px; padding-bottom: 50.6px; } /* REVIEWS SECTION SHELL. page.php now renders the F3 .rev-* reviews block from the REAL Site Reviews (owb_reviews_get_site_reviews()). boost-page.css already ships the inner .rev-* styles, but the preview styled the .reviews SECTION wrapper inline-only, so add its background + vertical rhythm here and full-bleed it like the sibling sections (.wrap / .rev-wrap keep the inner content centered). */ body.owb-boost-page .reviews { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--bg-soft); padding: 59.4px 0 70.4px; } /* REVIEWS PAGER — client-side 5/page nav built by the inline script in page.php. */ body.owb-boost-page .rev-pager { display: flex; flex-wrap: wrap; gap: 7.92px; justify-content: center; margin-top: 29.04px; } body.owb-boost-page .rev-page { min-width: 44px; height: 44px; padding: 0 13.2px; display: inline-flex; align-items: center; justify-content: center; border: 1.2px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink-soft); font-family: var(--font-ui); font-size: 14.52px; font-weight: 600; cursor: pointer; transition: border-color 150ms ease, color 150ms ease, background 150ms ease; } body.owb-boost-page .rev-page:hover:not(.is-disabled):not(.is-on) { border-color: var(--royal-soft); color: var(--royal); } body.owb-boost-page .rev-page.is-on { background: var(--royal); border-color: var(--royal); color: #fff; } body.owb-boost-page .rev-page.is-disabled { opacity: 0.4; cursor: default; } /* SITE REVIEWS (glsr) SUBMISSION FORM — F3 nudge. The plugin renders its own .glsr-* markup that's only visible on a running WP, so this is best-effort over the common glsr field/input/button/star classes; refine on staging once the real markup is visible. */ body.owb-boost-page .owb-glsr-form .glsr-form { display: flex; flex-direction: column; gap: 15.84px; margin-top: 5.28px; } body.owb-boost-page .owb-glsr-form .glsr-field > label, body.owb-boost-page .owb-glsr-form .glsr-field-label { font-family: var(--font-ui); font-size: 12.54px; font-weight: 600; letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 6.6px; } body.owb-boost-page .owb-glsr-form input[type="text"], body.owb-boost-page .owb-glsr-form input[type="email"], body.owb-boost-page .owb-glsr-form textarea, body.owb-boost-page .owb-glsr-form select { width: 100%; border: 1.2px solid var(--line); border-radius: var(--r); background: var(--bg-soft); padding: 12.1px 14.3px; font-family: var(--font-body); font-size: 16.5px; color: var(--ink); box-sizing: border-box; } body.owb-boost-page .owb-glsr-form input:focus, body.owb-boost-page .owb-glsr-form textarea:focus { outline: none; border-color: var(--royal-soft); background: #fff; box-shadow: 0 0 0 3.6px color-mix(in srgb, var(--royal) 13%, transparent); } body.owb-boost-page .owb-glsr-form button[type="submit"], body.owb-boost-page .owb-glsr-form .glsr-button { width: 100%; justify-content: center; background: linear-gradient(135deg, var(--royal), var(--royal-deep)); color: #fff; border: none; border-radius: var(--r); padding: 14.3px 19.8px; font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; } body.owb-boost-page .owb-glsr-form .glsr-star-rating, body.owb-boost-page .owb-glsr-form .glsr-stars { color: var(--gold-deep); } /* ========================================================================== AGENTS PICKER POPUP (boost-live.js). An F3 modal that surfaces the LIVE plugin .faivotite_champions picker — boost-live.js moves that block in on open (and back on close) so the plugin's own CHOOSE buttons + selection feed the order. This skins the plugin's .eo-fav-* markup to F3; the plugin shows one category's agents at a time via its own JS (refine on staging once the real rendered markup is visible). ========================================================================== */ body.agent-pop-open { overflow: hidden; } /* transparent — the modal carries .owb-rd which paints a white bg; without this the backdrop-filter below blurs that white instead of the page (the "white background"). */ .agent-pop { position: fixed; inset: 0; z-index: 1200; display: none; background: transparent; } /* Centre the panel like the checkout modal (pops over the dimmed page). The old top-anchor was to stop a bounce from the plugin's jQuery slideUp/slideDown picker; the current self-contained .ap-* grid shows every role at once (no slide), so the bounce is gone and centring reads as a proper modal instead of a top sliver with a big empty backdrop below it. The panel's own max-height:88vh + overflow-y handle tall content. */ .agent-pop.open { display: grid; place-items: center; padding: 26.4px; overflow-y: auto; } .agent-pop-backdrop { position: fixed; inset: 0; background: rgba(27,31,42,0.62); -webkit-backdrop-filter: blur(5.28px); backdrop-filter: blur(5.28px); } .agent-pop-modal { position: relative; z-index: 1; width: 100%; max-width: 836px; max-height: 88vh; overflow-y: auto; background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 10.56px); box-shadow: 0 48px 120px -24px rgba(27,31,42,0.55); padding: 31.68px; } .agent-pop-close { position: absolute; top: 17.6px; right: 17.6px; width: 41.8px; height: 41.8px; display: inline-flex; align-items: center; justify-content: center; border: 1.2px solid var(--line); border-radius: 10.56px; background: var(--bg); color: var(--ink-soft); font-size: 17.6px; cursor: pointer; transition: background 150ms ease, color 150ms ease; } .agent-pop-close:hover { background: var(--royal-tint); color: var(--accent); } .agent-pop-title { display: inline-flex; align-items: center; gap: 10.56px; font-family: var(--font-display); font-weight: 700; font-size: 29.04px; letter-spacing: -0.01em; color: var(--ink); } .agent-pop-title em { font-style: normal; color: var(--accent); } .agent-pop-title svg { width: 26.4px; height: 26.4px; color: var(--accent); } .agent-pop-sub { font-size: 15.84px; color: var(--ink-soft); margin: 7.92px 0 21.12px; } .agent-pop-foot { margin-top: 23.76px; display: flex; align-items: center; justify-content: space-between; gap: 17.6px; } .agent-pop-foot .btn { min-width: 165px; justify-content: center; } .ap-count { font-family: var(--font-ui); font-size: 14.52px; color: var(--ink-soft); } /* re-open link added to the champions chip */ .xopt-edit { margin-top: 7.92px; align-self: flex-start; background: var(--royal-tint); color: var(--accent); border: none; border-radius: 1098.9px; padding: 5.28px 13.2px; font-family: var(--font-ui); font-size: 12.54px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; } .xopt-edit:hover { background: var(--royal); color: #fff; } /* Self-contained F3 agent picker (boost-live.js builds .ap-* — no plugin block). */ .agent-pop-body { display: flex; flex-direction: column; gap: 21.12px; } .ap-role-head { font-family: var(--font-ui); font-size: 12.54px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-bottom: 10.56px; } .ap-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(162.8px, 1fr)); gap: 10.56px; } .ap-agent { display: flex; align-items: center; gap: 9.24px; width: 100%; box-sizing: border-box; padding: 11.88px 14.52px; border: 1.2px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; font-family: var(--font-body); font-size: 15.84px; color: var(--ink); text-align: left; transition: border-color 150ms ease, background 150ms ease; } .ap-agent:hover { border-color: var(--royal-soft); background: var(--royal-tint); } .ap-agent.is-sel { border-color: var(--royal); background: var(--royal-tint); } .ap-agent-emoji { flex: 0 0 auto; font-size: 18.48px; line-height: 1; } .ap-agent-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-agent-tick { flex: 0 0 auto; width: 21.12px; height: 21.12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--royal); color: #fff; opacity: 0; transform: scale(0.55); transition: opacity 140ms ease, transform 140ms ease; } .ap-agent-tick svg { width: 13.2px; height: 13.2px; } .ap-agent.is-sel .ap-agent-tick { opacity: 1; transform: scale(1); } .ap-empty { font-size: 15.84px; color: var(--ink-soft); } .agent-pop .choose_btn:hover { background: var(--royal-deep); } .agent-pop .eo-selected-fav-champ { color: var(--green); flex-shrink: 0; } /* --- "Choose your booster" picker (free extra): roster cards inside the agent-pop shell. The status dot is the hourly-rotated online flag served by the booster-directory endpoint. --- */ .bpop .agent-pop-modal { max-width: 726px; } .bp-meta { font-family: var(--font-ui); font-size: 13.2px; font-weight: 700; color: var(--ink-soft); margin-bottom: 13.2px; } .bp-meta::before { content: ''; display: inline-block; width: 8.8px; height: 8.8px; border-radius: 50%; background: #2fae6b; margin-right: 7.92px; } .bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(162.8px, 100%), 1fr)); gap: 10.56px; } .bp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4.4px; padding: 15.84px 13.2px 13.2px; border: 1.2px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; text-align: center; transition: border-color 150ms ease, background 150ms ease; } .bp-card:hover { border-color: var(--royal-soft); background: var(--royal-tint); } .bp-card.is-sel { border-color: var(--royal); background: var(--royal-tint); } .bp-ava { width: 52.8px; height: 52.8px; border-radius: 50%; object-fit: cover; border: 1.2px solid var(--line); background: var(--bg); } .bp-ava-txt { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink-soft); } /* Emoji avatar (replaces the profile picture) — bare, a touch larger than the old circle. */ .bp-ava-emoji { width: auto; height: auto; border: none; background: transparent; border-radius: 0; font-size: 40.92px; line-height: 1.1; } .bp-name { font-family: var(--font-ui); font-weight: 700; font-size: 17.16px; color: var(--ink); margin-top: 4.4px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-status { display: inline-flex; align-items: center; gap: 5.28px; font-family: var(--font-ui); font-size: 13.2px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); } .bp-status::before { content: ''; width: 7.92px; height: 7.92px; border-radius: 50%; background: #c2c7d0; } .bp-card.is-online .bp-status { color: #2fae6b; } .bp-card.is-online .bp-status::before { background: #2fae6b; box-shadow: 0 0 0 3.3px rgba(47, 174, 107, 0.16); } .bp-done { font-family: var(--font-ui); font-size: 11.88px; color: var(--ink-soft); } .bp-card .ap-agent-tick { position: absolute; top: 8.8px; right: 8.8px; } /* ================================================== DENSITY · V2 (handoff "calcDensity: v2" — compact) -------------------------------------------------- Condenses the station / control / ladder / server / dropdown paddings ~30% while the rank crest + rank name stay full size (they already match the v2 target: crest 278px = 232×1.2, name 26.4px = 22×1.2). Values are the handoff's v2 NET (last- wins) values × 1.2 site scale. Appended last so equal-specificity base rules above are overridden by source order. ================================================== */ .calc-card { padding-top: 21.12px; padding-bottom: 21.12px; } .calc-main { gap: 10.56px; } .rank-stations { gap: 15.84px; } .rank-station { padding: 11.88px 17.16px 14.52px; gap: 9.24px; } .rank-station-label { font-size: 13.2px; } .tier-trigger { padding: 7.92px 13.2px; } .tier-trigger .lab { font-size: 17.16px; } .tier-opt { padding: 9.24px 11.88px; font-size: 15.84px; } .div-pill { padding: 6.6px 0; } .rank-arrow-glyph { width: 55.44px; height: 55.44px; } .calc-controls { margin-top: 13.2px; gap: 13.2px; } .calc-controls .ctl-block { padding: 11.88px 14.52px; } .calc-controls .ctl-label { margin-bottom: 9.24px; } .queue-opt { padding: 10.56px 11.88px; } .server-block { margin-top: 14.52px; } .server-opt { padding: 6.6px 5.28px; } /* ================================================== REVIEWS · compacted under the calculator (handoff) 72→44px vertical (×1.2 = 52.8px), tighter inner gaps. Overrides home-page.css .reviews (loaded earlier). ================================================== */ .reviews { padding-top: 58.08px; padding-bottom: 58.08px; } .reviews .section-head { margin-bottom: 2.64px; } .rev-wrap { margin-top: 15.84px; } .rev-submit-grid { margin-top: 21.12px; } .rev-summary { margin-bottom: 15.84px; } /* ================================================== DEFENSIVE · survive a parent main.css leak -------------------------------------------------- main.css (boosting-main) is meant to be stripped on F3 pages, but LiteSpeed's CSS-combine can re-inline it. main.css has same-named .order-top / .order-title rules that would leak onto the F3 red order header (a 2px #ececec border-top, extra margin, uppercase/centre/avenirnextcyr). Pin those props at .owb-rd specificity (0,2,0) so they beat the bare main.css selectors (0,1,0) regardless of combined source order. The real fix is operational: strip main.css + purge. ================================================== */ .owb-rd .order-top { border-top: 0; margin: 0; } .owb-rd .order-title { margin: 0; text-transform: none; text-align: left; } /* ---- narrow-phone overflow pass (≤480) ---- The +20%/+10% scale leaves several boost-page rows wider than a 360–430px phone. Measured at 360px (DevTools/diagnostic): the product-tab labels clip (name needs 114px in a 53px column), the extra-option text column is crushed to ~8px by the fixed icon+switch+scaled padding, the twin price cards overflow ~12px, and the order-journey crests (158px each) overrun the panel. Each fix shrinks a fixed consumer or stacks a too-wide row; nothing here changes the ≥481px layout. */ @media (max-width: 480px) { /* product tabs: let the labels wrap (font-agnostic — Bricolage is wider than the fallback) and reclaim width from the icon + gap so text has room */ .prod-tab { gap: 8.8px; } .prod-tab-ico, .prod-menu .prod-tab.big .prod-tab-ico { width: 35.2px; height: 35.2px; } .prod-tab-ico svg, .prod-menu .prod-tab.big .prod-tab-ico svg { width: 19.8px; height: 19.8px; } .prod-tab-name, .prod-tab-sub { white-space: normal; overflow-wrap: anywhere; } /* extra options: trim the scaled padding + icon so the text column isn't starved to a single word per line (was ~8px wide at 360) */ .xopts-section { padding-left: 13.2px; padding-right: 13.2px; } .xopts-card { padding: 18.48px 13.2px 19.8px; } /* pull the toggle OUT of the flex row (absolute top-right) so the text column gets the full card width instead of being pinched between icon + switch — the description was wrapping to ~6 lines in a ~138px column */ .xopt { position: relative; padding: 15.84px; gap: 11.88px; } .xopt-ico { width: 38px; height: 38px; } .xopt-ico svg { width: 19px; height: 19px; } .xopt-switch { position: absolute; top: 15.84px; right: 15.84px; margin: 0; } .xopt-name { font-size: 18px; flex-wrap: wrap; overflow-wrap: anywhere; padding-right: 62px; } .xopt-desc { font-size: 15.84px; } /* twin price cards: stack so each gets the full panel width (the VIP label + "−10%" badge no longer clip on the right) */ .order-total { flex-direction: column; } .order-total .price-col { width: 100%; } .order-total .lbl { white-space: normal; } /* order-journey crests overran the panel — shrink the art + rank label so the Current → Target row fits even for the long apex names (Grandmaster) */ .order-journey { gap: 9.24px; } .order-journey .order-mini img { width: 105.6px; height: 105.6px; } .order-journey .order-mini span { font-size: 15.84px; } /* reclaim the heavy scaled side-padding (was 31–37px each side) so the dense calculator + order panel get real width on a phone — this alone gives the server grid, queue toggle, rank stations and reviews summary room to fit */ .calc-section { padding-left: 13.2px; padding-right: 13.2px; } .calc-card { padding-left: 16.5px; padding-right: 16.5px; } .order-body { padding-left: 16.5px; padding-right: 16.5px; } .order-top { padding-left: 16.5px; padding-right: 16.5px; } .order-total { padding-left: 16.5px; padding-right: 16.5px; } .order-foot { padding-left: 16.5px; padding-right: 16.5px; } .order-reward { margin-left: 16.5px; margin-right: 16.5px; } .note-section, .seo, .cta-strip { padding-left: 16px; padding-right: 16px; } /* "Next purchase reward" row: stack so the UNLOCKED badge stops overlapping the title, and let the "$N VIP credit · 2% bonus" line wrap instead of clipping */ .order-reward { flex-direction: column; align-items: flex-start; gap: 9.24px; } .order-reward .orw-text { width: 100%; } .order-reward .orw-sub { white-space: normal; } /* reviews summary (4.9 / 5 + 5-4-3-2-1 bars + COMPLETION/GUARANTEE/YEARS): the bars carry a 290px min-width and the score is 74px — both overrun the card at 360. Let the bars shrink, wrap the score row, shrink the number. */ .rev-sum-bars { min-width: 0; } .rev-sum-score { flex-wrap: wrap; } .rev-sum-score .big { font-size: 52.8px; } .rev-sum-score .big span { font-size: 22.44px; } /* Solo/Duo · Flex queue + Server/Region: never let a label force the row wider than the card (the qn/qs were nowrap; servers are an auto-fit grid) */ .queue-opt .qn, .queue-opt .qs { white-space: normal; } }