/* ============================================================ REX MU — THEME (carbon_red) · single source of truth Palette: CARBÓN + CARMÍN. Forbidden: gold. ============================================================ */ :root { --abyss: #0e0e10; --charcoal: #1c1c20; --blood: #1a0a0e; --primary: #383840; --carmin: #d9304a; --primary-dark: #1a0a0c; --blood-btn: #93233a; --accent: #9a9aa2; --accent-bright: #d8d8e2; --accent-deep: #5c5c68; --text: #f5f5f8; --text-2: #b8b8c2; --text-muted: #848490; --green: #22c55e; --bronze: #b97333; --silver: #b7bbc4; --gold-tier: #c6a24a; /* tier semantics only */ /* gold accent — for "live"/active states, premium (VIP) and currency (RP) */ --gold: #e8b84b; --gold-bright: #ffd877; --gold-glow: #ffcc4d66; --card-grad: linear-gradient(168deg, #1d1d21, #161619 82%); --maxw: 1180px; /* type system: Cinzel = big titles/logo (dramatic) · Inter = all UI/body text (legible) */ --font-display: "Cinzel", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --hair: #5c5c6858; /* hairline separators */ --glow: #d9304a; /* carmín glow */ --red: #e23a52; --red-hot: #ef4860; --red-deep: #a3243a; --radius: 6px; /* all rectangular boxes */ --radius-pill: 999px; /* pills only */ --ease-btn: cubic-bezier(0.16, 1, 0.3, 1); --shadow-card: 0 22px 48px -28px #000000, 0 1px 0 #ffffff08 inset, 0 0 0 1px #00000040; --card-border: 1px solid #6a5057a0; /* canonical .card border — every card shares this */ } /* ------------------------------------------------------------------ Per-locale type system. Cinzel/Inter above are en/es/pt's UNCHANGED defaults — neither has a vietnamese, thai or CJK subset (Cinzel's latin-ext even skips U+1EA0-1EF1, most of Vietnamese's accented vowels), so vi/th/zh/ja need different families entirely. Keyed off , which tools/build-locales.mjs already sets per locale from tools/locales.mjs's htmlLangFor() (zh's is "zh-Hans", not "zh" — matches the registry, not the two-letter code). An attribute selector on the html element outranks :root on specificity (0,1,1 vs 0,1,0) regardless of source order, so these three properties simply win here without !important. Family choice, weights and fallback chains are documented in and MUST stay in sync with tools/fonts.mjs's FONT_STACKS — that module's fontCssVars() returns these exact values; this block is the CSS half of the pair it has no way to generate for itself. ------------------------------------------------------------------ */ html[lang="vi"] { /* Montserrat carries the vietnamese subset Cinzel lacks. Body stays Inter — it already covers vietnamese, so vi loads no extra family for body text at all. */ --font-display: "Montserrat", "Segoe UI", Roboto, sans-serif; } html[lang="th"] { --font-display: "Noto Serif Thai", "Leelawadee UI", serif; --font-body: "Noto Sans Thai", "Leelawadee UI", sans-serif; } html[lang="zh-Hans"] { --font-display: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif; --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; } html[lang="ja"] { --font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-body); font-size: 15px; line-height: 1.62; font-weight: 400; font-feature-settings: "tnum" 1, "liga" 1, "calt" 1; color: var(--text); background-color: #101012; background-image: radial-gradient(900px 540px at 50% -80px, #3e0f1c3a, transparent 72%), radial-gradient(760px 760px at 86% 4%, #2a0c3216, transparent 60%), radial-gradient(1100px 900px at 10% 26%, #0a1a240e, transparent 62%); background-attachment: fixed; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- ATMOSPHERE (grain + vignette, behind content) ---------- */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse 130% 95% at 50% 28%, transparent 52%, #03030688 86%, #020203 100% ); } .topnav, .wrap, .hero, .final, .footer, main, section { position: relative; z-index: 1; } /* ---------- TYPOGRAPHY: Cinzel = big titles/logo · Inter = all UI/body text ---------- */ /* Cinzel: dramatic display elements only */ .logo, .sechead, .sectitle, .hero h1, .final h2, h1, h2, h3 { font-family: var(--font-display); } /* Inter (body font): nav, buttons, labels, badges, table headers, captions — anything read at small sizes */ .beta, .nav, .ni, .navbtns, .btn-sec, .btn-pri, .btn-lg, .acctxt, .vip, .secsub, .tag, .cta-pri, .cta-sec, .cta-play, .cta-dl, .tab, .nbadge, .pill, .capline, .capfree, .fh, .field-l, .tbl th, .pager { font-family: var(--font-body); } a { color: inherit; text-decoration: none; } img { max-width: 100%; } ::selection { background: var(--carmin); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0e0e10; } ::-webkit-scrollbar-thumb { background: #2a2a30; border: 1px solid #5c5c6855; } ::-webkit-scrollbar-thumb:hover { background: var(--blood-btn); } /* ---------- NAVBAR ---------- */ .topnav { position: sticky; top: 0; z-index: 60; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 36px; background: rgba(16, 16, 19, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid #5c5c6878; } /* BETA notice sub-bar (under the navbar) */ .betabar { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 6px 16px; font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); background: rgba(255, 255, 255, 0.015); border-bottom: 1px solid #ffffff0a; box-shadow: none; text-align: center; } .betabar-tag { font-size: 8px; font-weight: 600; letter-spacing: 1.4px; color: var(--carmin); background: transparent; border: 1px solid #d9304a40; border-radius: var(--radius-pill); padding: 1px 8px; box-shadow: none; } .betabar-txt { color: var(--text-muted); } @media (max-width: 600px) { .betabar { font-size: 8px; padding: 5px 12px; } } .logo { font-size: 23px; font-weight: 700; letter-spacing: 2px; white-space: nowrap; } .logo b { color: var(--carmin); } /* The mark+wordmark link is inline-flex, so as an inline box it sits on the line box's baseline and the 23px font's descender adds dead space UNDER it. That makes .logo taller than its visible content, and .topnav centers the taller box — leaving the logo sitting high against the nav links and buttons. Making .logo a flex container removes the line box entirely: the link becomes a flex item centered by align-items, so its box is exactly its content. */ .topnav .logo { display: flex; align-items: center; } /* navbar logo: red glow + subtle zoom-in on hover (inspired by mudream.online) */ .topnav .logo a { transition: transform 0.32s cubic-bezier(0.22, 0.78, 0.24, 1), filter 0.32s ease; transform-origin: left center; will-change: transform, filter; } .topnav .logo a:hover { transform: scale(1.08); filter: drop-shadow(0 0 4px #d9304a88) drop-shadow(0 0 11px #d9304a33); } .topnav .logo a:hover img { filter: drop-shadow(0 0 6px #d9304a66) brightness(1.07); } @media (prefers-reduced-motion: reduce) { .topnav .logo a { transition: filter 0.32s ease; } .topnav .logo a:hover { transform: none; } } .beta { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--green); background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.3); padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; line-height: 1; vertical-align: middle; } .beta::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: betapulse 2s ease-in-out infinite; } @keyframes betapulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .nav { margin-left: 22px; display: flex; gap: 18px; font-size: 12px; letter-spacing: 0.4px; align-items: center; } .ni { color: var(--text-2); transition: color 0.18s; white-space: nowrap; } .ni:hover { color: #fff; } .ni.on { color: #fff; background: var(--carmin); padding: 7px 14px; border-radius: var(--radius); } .navbtns { margin-left: auto; display: flex; gap: 10px; font-size: 11px; letter-spacing: 0.3px; align-items: center; } .btn-sec { border: 1px solid transparent; padding: 9px 20px; color: var(--text); background: rgba(255, 255, 255, 0.04); border-radius: var(--radius); transition: all 320ms var(--ease-btn); cursor: pointer; } .btn-sec:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); } .btn-sec:active { transform: translateY(0); } .btn-pri { border: 1px solid transparent; padding: 9px 20px; color: #fff; background: linear-gradient( 180deg, var(--red-hot) 0%, var(--red) 60%, #b3283e 100% ); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 28px -10px rgba(217, 48, 74, 0.55); border-radius: var(--radius); transition: all 320ms var(--ease-btn); cursor: pointer; } .btn-pri:hover { background: linear-gradient( 180deg, #ff3838 0%, var(--red-hot) 60%, var(--red) 100% ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 14px 36px -10px rgba(255, 32, 32, 0.7); transform: translateY(-1px); } .btn-pri:active { transform: translateY(0); } .navtoggle { display: none; margin-left: auto; background: none; border: 1px solid var(--accent-deep); color: #fff; width: 40px; height: 38px; font-size: 18px; cursor: pointer; border-radius: var(--radius); } /* account chip (logged-in) — logout lives inside the same box */ .acct { display: flex; align-items: stretch; height: 38px; box-sizing: border-box; border: 1px solid var(--accent-deep); background: #0e0e10; border-radius: var(--radius); overflow: hidden; } .acct-link { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 12px; cursor: pointer; } /* logout icon — integrated right side, separated by a hairline */ .acct-logout { display: flex; align-items: center; justify-content: center; padding: 0 11px; border: none; border-left: 1px solid var(--accent-deep); background: transparent; color: var(--text-2); cursor: pointer; transition: color 0.15s, background 0.15s; } .acct-logout:hover { color: var(--carmin); background: #1a0a0c; } .av { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; } .acctxt { font-size: 10px; letter-spacing: 1px; line-height: 1.3; } .acctxt .rp { color: var(--gold); /* RP is the cash currency — gold reads as "coins" */ font-size: 9px; } .vip { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #2a1c00; /* dark text on gold for premium contrast */ font-size: 8px; padding: 1px 5px; letter-spacing: 1px; font-weight: 600; border-radius: 3px; } /* ---------- GUIDES MEGAMENU DROPDOWN ---------- */ /* .ni-dd: wrapper — sits inline in .nav like a regular .ni */ .ni-dd { position: relative; display: inline-flex; align-items: center; } /* the trigger button resets all button chrome and looks like .ni */ .ni-dd-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: var(--text-2); font-size: 12px; letter-spacing: 1.5px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; transition: color 0.18s; } .ni-dd-btn:hover, .ni-dd.open .ni-dd-btn { color: #fff; } .ni-dd-btn.on { color: #fff; background: var(--carmin); padding: 7px 14px; border-radius: var(--radius); } .ni-arr { font-size: 9px; transition: transform 0.2s ease; } .ni-dd.open .ni-arr { transform: rotate(180deg); } /* the dropdown panel */ .nmm { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 200px; background: #0d0b10; border: 1px solid #5c5c6866; border-radius: var(--radius); box-shadow: 0 16px 40px -8px #000000bb, 0 0 0 1px #00000040; padding: 6px 0; z-index: 70; /* two-column grid for the link list */ display: none; } /* Invisible hover bridge that fills the 10px gap between the trigger and the panel. Without it, moving the mouse down to click a link crosses a hover dead-zone and `mouseleave` closes the menu. The ::before is a descendant of .ni-dd, so while the pointer is over it the menu stays open. Only rendered while the panel is shown (.nmm is display:none until open). */ .nmm::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .ni-dd.open .nmm { display: grid; grid-template-columns: 1fr 1fr; } .nmm-link { display: block; padding: 9px 18px; font-size: 11px; letter-spacing: 1.2px; color: var(--text-2); white-space: nowrap; transition: background 0.14s, color 0.14s; } .nmm-link:hover, .nmm-link:focus-visible { background: rgba(217, 48, 74, 0.1); color: #fff; outline: none; } /* small diamond bullet before each link */ .nmm-link::before { content: "◆ "; font-size: 7px; color: var(--carmin); margin-right: 5px; vertical-align: middle; } /* mobile: dropdown shows as an expanded group inside the slide-down .nav.open */ @media (max-width: 1200px) { .ni-dd { display: block; width: 100%; } .ni-dd-btn { width: 100%; padding: 13px 22px; border-bottom: 1px solid #5c5c6822; justify-content: space-between; } .ni-dd-btn.on { background: none; color: var(--carmin); padding: 13px 22px; border-radius: 0; } .nmm { position: static; transform: none; left: auto; min-width: 0; width: 100%; box-shadow: none; border: none; border-radius: 0; background: #0e0e10; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } /* no hover bridge on mobile — the menu is a tap-driven accordion */ .nmm::before { display: none; } .ni-dd.open .nmm { display: block; max-height: 400px; } .nmm-link { padding: 11px 36px; border-bottom: 1px solid #5c5c6830; font-size: 10px; } } /* ---------- LAYOUT ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 30px; } /* breathing room before the footer on every page. .final is excluded: it already carries its own padding-bottom + radial glow, so an extra 64px margin only added a black void before the footer. */ main, .wrap:last-of-type { margin-bottom: 64px; } .sechead { text-align: center; margin: 26px 0 6px; font-size: 11px; letter-spacing: 3px; color: var(--carmin); } .sectitle { text-align: center; font-size: 30px; letter-spacing: 5px; margin-bottom: 6px; } .secsub { text-align: center; font-size: 11px; letter-spacing: 2px; color: var(--text-2); margin-bottom: 28px; } .div, .divc { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto; width: min(560px, 90vw); } .div .ln, .divc .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #9a9aa2, transparent); } .div .dot, .divc .dot { color: var(--carmin); font-size: 9px; } /* ---------- CARDS + CORNER BRACKETS ---------- */ .card { position: relative; border: var(--card-border); background: var(--card-grad); border-radius: var(--radius); box-shadow: var(--shadow-card); } /* optional variant — stronger carmín border for a single featured/highlighted card */ .card--accent { border-color: var(--carmin); } .bk { position: absolute; width: 11px; height: 11px; /* dim by default — brightens to full carmín via .card:hover .bk below */ border: 0 solid rgba(217, 48, 74, 0.38); pointer-events: none; } .bk0 { top: 4px; left: 4px; border-top-width: 2px; border-left-width: 2px; } .bk1 { top: 4px; right: 4px; border-top-width: 2px; border-right-width: 2px; } .bk2 { bottom: 4px; left: 4px; border-bottom-width: 2px; border-left-width: 2px; } .bk3 { bottom: 4px; right: 4px; border-bottom-width: 2px; border-right-width: 2px; } /* ---------- BUTTONS ---------- */ .btn-lg { display: inline-block; vertical-align: middle; font-size: 12px; letter-spacing: 0.5px; padding: 13px 36px; cursor: pointer; font-family: var(--font-body); transition: all 0.18s; text-align: center; } .cta-pri, .cta-play { border: 1px solid transparent; background: linear-gradient( 180deg, var(--red-hot) 0%, var(--red) 60%, #b3283e 100% ); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 28px -10px rgba(217, 48, 74, 0.55); border-radius: var(--radius); padding: 14px 42px; display: inline-block; vertical-align: middle; cursor: pointer; letter-spacing: 0.6px; font-size: 12px; transition: all 320ms var(--ease-btn); } .cta-sec, .cta-dl { border: 1px solid transparent; background: rgba(255, 255, 255, 0.04); color: var(--text); border-radius: var(--radius); padding: 14px 42px; display: inline-block; vertical-align: middle; cursor: pointer; letter-spacing: 0.6px; font-size: 12px; transition: all 320ms var(--ease-btn); } .cta-pri:hover, .cta-play:hover { background: linear-gradient( 180deg, #ff3838 0%, var(--red-hot) 60%, var(--red) 100% ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 14px 36px -10px rgba(255, 32, 32, 0.7); transform: translateY(-1px); } .cta-sec:hover, .cta-dl:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); } /* platform icons (Windows + Android) shown left of the download CTA label */ .cta-dl .cta-plats { display: inline-flex; align-items: center; gap: 5px; margin-right: 7px; vertical-align: middle; } .cta-dl .pico { width: 15px; height: 15px; display: block; } /* download page — Windows/Android card grid, stacks on mobile */ .dlcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 820px; margin: 0 auto; } @media (max-width: 720px) { .dlcards { grid-template-columns: 1fr; } } .cta-pri:active, .cta-sec:active, .cta-play:active, .cta-dl:active, .btn-lg:active { transform: translateY(0); } /* ---------- DISABLED STATE ---------- */ .cta-pri:disabled, .cta-pri[disabled], .cta-play:disabled, .cta-play[disabled], .btn-pri:disabled, .btn-pri[disabled], .cta-sec:disabled, .cta-sec[disabled], .cta-dl:disabled, .cta-dl[disabled], .btn-sec:disabled, .btn-sec[disabled], .btn-lg:disabled, .btn-lg[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } :focus-visible { outline: 2px solid var(--red-hot); outline-offset: 3px; } /* keep the red focus ring legible on red button surfaces */ .cta-pri:focus-visible, .cta-play:focus-visible, .btn-pri:focus-visible, .btn-lg:focus-visible { box-shadow: 0 0 0 2px #0e0e10, 0 0 0 4px var(--red-hot); outline: none; } /* ---------- TABLES ---------- */ .tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .tbl th { text-align: left; font-size: 9px; letter-spacing: 0.5px; color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid #5c5c6878; font-weight: 400; } .tbl td { padding: 10px 14px; border-bottom: 1px solid #5c5c6848; letter-spacing: 0.5px; } .tbl tr:hover td { background: #1a1418; } /* Rankings table: center all cells without affecting other .tbl tables */ .rk-wrap .tbl th, .rk-wrap .tbl td { text-align: center; } /* ---------- TABS / CHIPS ---------- */ .tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 26px; flex-wrap: wrap; } .tab { font-size: 11px; letter-spacing: 0.5px; padding: 10px 26px; color: var(--text-2); background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; cursor: pointer; transition: all 0.18s var(--ease-btn); user-select: none; border-radius: var(--radius); } .tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .tab.on { background: linear-gradient(180deg, var(--red-hot), var(--red) 60%, #b3283e); color: #fff; border-color: transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 20px -10px rgba(217, 48, 74, 0.5); } /* ---------- FORM FIELDS ---------- */ .field-l { font-size: 9px; letter-spacing: 0.4px; color: var(--text-2); margin: 14px 0 6px; display: block; } .field { display: flex; align-items: center; gap: 10px; height: 44px; border: 1px solid var(--accent-deep); background: linear-gradient(180deg, #141418, #0e0e10); padding: 0 14px; font-size: 12px; letter-spacing: 1px; color: var(--text); width: 100%; border-radius: var(--radius); } .field:focus { outline: none; border-color: var(--carmin); box-shadow: 0 0 0 2px #d9304a33; } input.field::placeholder { color: var(--text-muted); } select.field { cursor: pointer; appearance: none; } /* ---------- PAGINATION ---------- */ .pager { display: flex; justify-content: center; gap: 6px; margin-top: 18px; font-size: 10px; flex-wrap: wrap; } .pg { border: 1px solid var(--accent-deep); padding: 5px 10px; color: var(--text-2); cursor: pointer; transition: all 0.15s; } .pg:hover { color: #fff; border-color: var(--accent); } .pg.on { background: var(--carmin); color: #fff; border-color: var(--carmin); } /* ---------- BADGES ---------- */ .nbadge { background: var(--carmin); color: #fff; font-size: 9px; padding: 3px 8px; letter-spacing: 1px; min-width: 52px; text-align: center; display: inline-block; border-radius: var(--radius); } .pill { display: inline-block; font-size: 9px; letter-spacing: 1px; padding: 3px 9px; border: 1px solid var(--accent-deep); color: var(--text-2); border-radius: var(--radius); } .pill.green { border-color: var(--green); color: var(--green); } .pill.carmin { border-color: var(--carmin); color: var(--carmin); } /* ---------- FOOTER ---------- */ .footer { display: flex; flex-wrap: wrap; gap: 50px; padding: 52px 60px 34px; border-top: 1px solid #5c5c6866; background: #0e0e10; font-size: 11px; color: var(--text-2); line-height: 2; margin-top: auto; } .footer .fcol a:hover { color: #fff; } .fh { color: var(--carmin); letter-spacing: 2px; font-size: 10px; margin-bottom: 4px; } /* Desktop: the two link columns (GAME / COMMUNITY) form a centered group that spans half the viewport. The logo block is pinned left (absolute) so it stays out of the flow and cannot push that group off-centre — which leaves the two .fcol as the only in-flow children, so the flex `gap` is exactly the space between them. Each column is 25% minus half the gap, so the pair measures 50% on the nose. Mobile (<1024px) keeps the normal wrapping layout. */ @media (min-width: 1024px) { .footer { justify-content: center; position: relative; gap: 64px; } .footer > div:first-child { position: absolute; left: 60px; top: 52px; margin-right: 0; } .footer .fcol { flex: 0 0 calc(25% - 32px); } } /* Legal strip at the foot of every page. Full-width row inside the flex footer, below the link columns. The "Botón de arrepentimiento" link is a legal requirement in Argentina (Disposición 954/2025): it must be reachable at a glance and without logging in, which is why it lives in the site-wide footer rather than only inside the terms page. */ .footer .flegal { flex: 0 0 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 10px; letter-spacing: 1px; line-height: 1.8; } .footer .flegal a { color: var(--text-muted); } .footer .flegal a:hover { color: #fff; } .footer .flegal .flegal-ar { color: var(--text-2); } /* ---------- ITEM IMAGE ---------- */ .itemimg { image-rendering: pixelated; width: 40px; height: 40px; object-fit: contain; } .itemslot { position: relative; border: 1px solid var(--accent-deep); background: linear-gradient(160deg, #1e1014, #0e0e10); display: flex; align-items: center; justify-content: center; border-radius: var(--radius); } /* ---------- MODAL / POPUP ---------- */ .overlay { position: fixed; inset: 0; z-index: 200; background: #0e0e10cc; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .overlay.show { opacity: 1; pointer-events: auto; } .modal { position: relative; max-width: 440px; width: 100%; border: 1px solid var(--carmin); background: linear-gradient(170deg, #1a1418, #0e0e10); padding: 34px 32px; border-radius: var(--radius); transform: translateY(8px); transition: transform 0.2s; /* never taller than the viewport (overlay has 20px padding top+bottom) so a long modal stays fully reachable; the body scrolls, the X stays pinned. */ max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; } /* the scrollable region of a modal — keeps the close button (.x) fixed in the modal corner while long content (e.g. the class detail) scrolls on mobile. */ .modal-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; flex: 1 1 auto; /* room so the last line clears the modal's bottom padding edge cleanly */ margin: 0 -6px; padding: 0 6px; } .overlay.show .modal { transform: none; } .modal .x { position: absolute; top: 12px; right: 14px; color: var(--text-2); cursor: pointer; font-size: 18px; background: none; border: none; } .modal .x:hover { color: #fff; } /* ---------- UTIL ---------- */ .green { color: var(--green); } .carmin { color: var(--carmin); } .muted { color: var(--text-muted); } .sec { color: var(--text-2); } .bright { color: var(--accent-bright); } .center { text-align: center; } .right { text-align: right; } .loading { color: var(--text-muted); font-size: 11px; letter-spacing: 2px; text-align: center; padding: 30px; } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 300; background: #141418; border: 1px solid var(--carmin); color: #fff; padding: 12px 22px; font-size: 11px; letter-spacing: 1px; opacity: 0; transition: all 0.25s; border-radius: var(--radius); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .spinner { width: 22px; height: 22px; border: 2px solid #5c5c68; border-top-color: var(--carmin); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- ANIMATIONS ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal.in { opacity: 1; transform: none; } .pl { opacity: 0; transform: translateY(-8px); animation: plin 0.7s forwards; } @keyframes plin { to { opacity: 1; transform: none; } } /* ---------- CAPACITY BAR ---------- */ .capwrap { margin: 24px auto 0; width: min(420px, 90vw); } /* top row: "● 42 / 500 JUGADORES" left + "458 SLOTS LIBRES" right */ .capline { display: flex; align-items: center; font-size: 10px; letter-spacing: 1.8px; margin-bottom: 8px; } .capfree { margin-left: auto; color: var(--text-2); font-size: 9px; letter-spacing: 1.5px; } /* percentage label right-aligned below the track */ .cappct { font-size: 9px; letter-spacing: 1.5px; color: var(--text-muted); text-align: right; margin-top: 5px; } /* pill-shaped track — inset dark groove */ .captrack { position: relative; height: 10px; background: linear-gradient(180deg, #0e0b10, #150f18); border: 1px solid #3a2330; border-radius: var(--radius-pill); box-shadow: inset 0 2px 6px #00000090, inset 0 0 0 1px #00000040; overflow: hidden; } /* fill — width only ever set by JS via style.width */ .capfill { height: 100%; /* NO width rule here — JS owns it */ background: linear-gradient( 90deg, #6b0f20 0%, #a61830 45%, #d9304a 80%, #e8536a 100% ); border-radius: var(--radius-pill); box-shadow: 0 0 8px #d9304a44, 0 0 2px #d9304a88 inset; transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); } /* sheen overlay for a glassy finish */ .capfill::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, #ffffff14, transparent); border-radius: var(--radius-pill) var(--radius-pill) 0 0; pointer-events: none; } /* nearfull — stronger pulse glow */ .capfill.nearfull { animation: cappulse 1.4s ease-in-out infinite; } @keyframes cappulse { 0%, 100% { box-shadow: 0 0 8px #d9304a44, 0 0 2px #d9304a88 inset; } 50% { box-shadow: 0 0 18px #d9304a99, 0 0 6px #d9304acc inset; } } /* capticks kept in markup but hidden — JS contract preserved */ .capticks { display: none; } /* ---------- HERO ---------- */ .hero { text-align: center; padding: 40px 20px 50px; } .hero h1 { font-size: clamp(38px, 6.5vw, 68px); letter-spacing: 12px; font-weight: 800; text-shadow: 0 0 50px #d9304a44, 0 2px 1px #000; } .hero h1 b { color: var(--carmin); text-shadow: 0 0 30px #d9304a99, 0 0 60px #d9304a55; } .tag { margin-top: 16px; font-size: 13px; letter-spacing: 3px; color: var(--accent-bright); } .tag b { color: var(--carmin); font-weight: 600; } .heroctas { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .final { text-align: center; padding: 64px 20px 70px; background: radial-gradient( ellipse 600px 300px at 50% 60%, #2a0c14, transparent ); } .final h2 { font-size: clamp(22px, 4vw, 30px); letter-spacing: 5px; } /* ============================================================ RESPONSIVE (breakpoints 1023 / 767) ============================================================ */ @media (max-width: 1023px) { .nav { gap: 14px; font-size: 11px; } .footer { gap: 36px; padding: 30px 34px; } } /* 1200px, not 880px: the horizontal nav stopped fitting between ~880 and ~1100. It already overflowed by 39px at 1024 with 7 items; the DOWNLOADS entry took that to 134px, and it still clipped by 8px at 1150. Collapsing to the burger earlier fixes both. */ @media (max-width: 1200px) { .topnav { gap: 10px; padding: 0 18px; } .navtoggle { display: block; } .nav { position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #18181b; margin: 0; /* No padding/border while closed: with box-sizing:border-box they form the box's minimum height, so max-height:0 can't fully collapse it and the leftover strip (fixed, opaque) covers the betabar below. Both move to .nav.open. */ padding: 0; gap: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; z-index: 59; } .nav.open { max-height: 80vh; overflow: auto; padding: 8px 0; border-bottom: 1px solid #5c5c6855; } .nav .ni { padding: 13px 22px; border-bottom: 1px solid #5c5c6822; } .nav .ni.on { background: none; color: var(--carmin); } .navbtns { display: none; } .nav.open + .navbtns, .navbtns.mopen { display: flex; position: fixed; top: calc(64px + var(--navh, 0px)); left: 0; right: 0; background: #18181b; padding: 12px 22px; gap: 10px; justify-content: stretch; z-index: 59; } } @media (max-width: 767px) { .wrap { padding: 0 16px; } .sectitle { font-size: 24px; letter-spacing: 3px; } .footer { /* keep a wrapping row so the 4 link columns pack 2×2 instead of stacking one-per-row (which left a big empty gutter on the right). */ flex-direction: row; flex-wrap: wrap; gap: 22px 16px; padding: 28px 22px; } /* logo block + social row span full width; the 4 .fcol columns go 2 per row */ .footer > div:first-child { flex: 1 0 100%; } .footer .fcol { flex: 1 1 calc(50% - 8px); min-width: 0; } .hero { padding: 48px 16px 36px; } .heroctas { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; } .cta-pri, .cta-sec, .cta-play, .cta-dl { width: 100%; } /* generic responsive grids: any inline grid collapses */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; } .tbl { font-size: 11px; } .tbl th, .tbl td { padding: 8px 8px; } } /* prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ---------- i18n FOUC GUARD ---------- */ html.i18n-pending { visibility: hidden; } /* ---------- LANG SELECTOR ---------- */ .lang-sel { position: relative; display: inline-flex; align-items: center; margin-left: 6px; } .lang-btn { display: inline-flex; align-items: center; gap: 5px; height: 38px; box-sizing: border-box; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--accent-deep); color: var(--text-2); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.8px; padding: 0 12px; border-radius: var(--radius); cursor: pointer; transition: all 0.18s; white-space: nowrap; } .lang-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .lang-globe { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.85; } .lang-arr { font-size: 9px; opacity: 0.6; transition: transform 0.18s; } .lang-sel.open .lang-arr { transform: rotate(180deg); } .lang-drop { display: none; position: absolute; top: calc(100% + 6px); right: 0; list-style: none; background: #141418; border: 1px solid var(--accent-deep); border-radius: var(--radius); /* Fits the longest native language name ("Português" / "Tiếng Việt"), which the selector now shows next to each code. Was 72px, sized for "EN/ES/PT" alone — enough to wrap every non-Latin entry onto two lines. */ min-width: 148px; z-index: 80; overflow: hidden; box-shadow: 0 8px 24px -4px #000000aa; } .lang-sel.open .lang-drop { display: block; } .lang-drop li { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.5px; color: var(--text-2); padding: 9px 14px; cursor: pointer; transition: background 0.15s, color 0.15s; } .lang-drop li { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } /* The language's own name, beside its code. Deliberately NOT var(--font-body): Inter has no Thai or CJK glyphs, and the selector renders on EVERY tree — including the English one, whose only loads Cinzel + Inter. Naming the system CJK/Thai families here is what keeps 简体中文 / 日本語 / ไทย from rendering as tofu boxes on a page that never loads a Noto family. */ .lang-native { font-family: Inter, "Segoe UI", "Noto Sans", "Microsoft YaHei", "Yu Gothic", "Leelawadee UI", system-ui, sans-serif; font-size: 11px; letter-spacing: 0; color: var(--text-3, #8a8a95); } .lang-drop li.on .lang-native { color: inherit; opacity: 0.85; } .lang-drop li:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .lang-drop li.on { color: var(--carmin); background: rgba(217, 48, 74, 0.08); } /* mobile: lang selector stays accessible below 880px */ @media (max-width: 1200px) { .lang-sel { margin-left: 4px; } .lang-btn { padding: 5px 8px; font-size: 9px; } } /* ---------- SOCIAL ICON BUTTONS (navbar + footer) ---------- */ .soc { display: inline-flex; align-items: center; gap: 6px; } .soc-nav { margin-left: 6px; } .soc-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; box-sizing: border-box; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--accent-deep); border-radius: var(--radius); color: var(--text-2); transition: all 0.18s; } .soc-btn svg { width: 16px; height: 16px; display: block; } .soc-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: var(--carmin); } .fsoc { display: flex; gap: 8px; margin-top: 14px; } .fsoc .soc-btn { width: 34px; height: 34px; } @media (max-width: 880px) { .soc-btn { width: 34px; height: 34px; } .soc-btn svg { width: 15px; height: 15px; } } /* ============================================================ GLOBAL AESTHETIC POLISH — additive layer Enhances transitions, hover states, glows, and micro-animations across all shared components. Does not restructure layout. ============================================================ */ /* ---------- CARD HOVER — lift + carmín glow + bracket brighten ---------- */ .card { transition: transform 0.22s cubic-bezier(0.22, 0.78, 0.24, 1), box-shadow 0.22s cubic-bezier(0.22, 0.78, 0.24, 1), border-color 0.22s ease; will-change: transform, box-shadow; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card), 0 0 0 1px #d9304a28, 0 8px 28px -8px #d9304a28; border-color: #a0445866; } /* corner brackets brighten smoothly on card hover */ .card .bk { transition: border-color 0.22s var(--ease-btn); } .card:hover .bk { border-color: var(--carmin); } /* ---------- BUTTON SHARED — refined transition timing ---------- */ .btn-pri, .btn-sec, .cta-pri, .cta-sec, .cta-play, .cta-dl { /* enforce performant properties only */ transition: transform 0.16s cubic-bezier(0.22, 0.78, 0.24, 1), box-shadow 0.16s ease, background 0.16s ease, filter 0.16s ease; } /* ---------- PRIMARY BUTTON — animated sheen sweep on hover ---------- */ .btn-pri, .cta-pri, .cta-play { position: relative; overflow: hidden; } .btn-pri::after, .cta-pri::after, .cta-play::after { content: ""; position: absolute; inset: 0; /* diagonal sheen strip, off-screen to the left by default */ background: linear-gradient( 105deg, transparent 30%, rgba(255, 255, 255, 0.13) 50%, transparent 70% ); transform: translateX(-110%); transition: transform 0.42s cubic-bezier(0.22, 0.78, 0.24, 1); pointer-events: none; border-radius: inherit; } .btn-pri:hover::after, .cta-pri:hover::after, .cta-play:hover::after { transform: translateX(110%); } /* tighten the existing hover raise to feel snappier */ .btn-pri:hover { transform: translateY(-2px); filter: brightness(1.06); } .btn-pri:active { transform: translateY(0) scale(0.98); filter: brightness(0.94); } .cta-pri:active, .cta-play:active { transform: translateY(0) scale(0.98); } /* ---------- SECONDARY BUTTON — border shimmer on hover ---------- */ .btn-sec:hover { border-color: var(--accent-deep); transform: translateY(-1px); } .cta-sec:hover, .cta-dl:hover { border-color: var(--accent-deep); } .btn-sec:active { transform: translateY(0) scale(0.98); } .cta-sec:active, .cta-dl:active { transform: translateY(0) scale(0.98); } /* ---------- HERO CTA HIERARCHY — Download is the solid primary standout, Register a strong outline ---------- */ /* scoped to .hero .heroctas (NOT bare .cta-dl/.cta-play, and NOT .heroctas alone — the "JOIN DISCORD" + "CREATE ACCOUNT" pair in .final also sits inside a .heroctas wrapper, see index.html; only the top hero pair gets this swap) */ .hero .heroctas .cta-dl { border: 1px solid transparent; background: linear-gradient( 180deg, var(--red-hot) 0%, var(--red) 60%, #b3283e 100% ); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 28px -10px rgba(217, 48, 74, 0.55); } .hero .heroctas .cta-dl:hover { background: linear-gradient( 180deg, #ff3838 0%, var(--red-hot) 60%, var(--red) 100% ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 14px 36px -10px rgba(255, 32, 32, 0.7); } .hero .heroctas .cta-play { border: 1.5px solid var(--red-hot); background: rgba(239, 72, 96, 0.09); color: #fff; box-shadow: 0 0 0 1px rgba(239, 72, 96, 0.16) inset, 0 8px 24px -12px rgba(217, 48, 74, 0.5); } .hero .heroctas .cta-play:hover { border-color: var(--red-hot); background: rgba(239, 72, 96, 0.15); box-shadow: 0 0 0 1px rgba(239, 72, 96, 0.26) inset, 0 0 20px -4px rgba(239, 72, 96, 0.55), 0 10px 28px -10px rgba(217, 48, 74, 0.6); } /* ---------- NAV ITEMS — animated underline indicator ---------- */ .ni { position: relative; transition: color 0.18s ease, transform 0.16s ease; } .ni::after { content: ""; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--carmin); transform: scaleX(0); transform-origin: center; transition: transform 0.2s cubic-bezier(0.22, 0.78, 0.24, 1); } /* don't show the underline on the active pill (.ni.on has its own bg) */ .ni:not(.on):hover::after { transform: scaleX(1); } .ni:not(.on):hover { color: #fff; } /* ---------- TABS — hover lift + active glow ---------- */ .tab { transition: color 0.16s ease, background 0.16s ease, transform 0.16s cubic-bezier(0.22, 0.78, 0.24, 1), box-shadow 0.16s ease; } .tab:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(217, 48, 74, 0.18); } .tab.on { /* ensure active tab gets a slightly tighter glow */ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px -8px rgba(217, 48, 74, 0.55); } /* ---------- PILLS + BADGES — hover lift ---------- */ .pill { transition: color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .pill:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); } .pill.green:hover { color: var(--green); border-color: var(--green); box-shadow: 0 0 8px -2px rgba(34, 197, 94, 0.3); } .pill.carmin:hover { color: var(--carmin); border-color: var(--carmin); box-shadow: 0 0 8px -2px rgba(217, 48, 74, 0.3); } /* ---------- FORM FIELDS — smoother focus ring ---------- */ .field { transition: border-color 0.18s ease, box-shadow 0.18s ease; } .field:focus { border-color: var(--carmin); box-shadow: 0 0 0 2px rgba(217, 48, 74, 0.2), 0 0 12px -4px rgba(217, 48, 74, 0.3); } /* ---------- PAGINATION — hover lift + smooth transition ---------- */ .pg { transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; border-radius: var(--radius); } .pg:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(217, 48, 74, 0.15); } /* ---------- TABLE ROW — smoother transition ---------- */ .tbl tr { transition: background 0.14s ease; } /* ---------- ITEM SLOT — hover glow for item thumbnails ---------- */ .itemslot { transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s cubic-bezier(0.22, 0.78, 0.24, 1); } .itemslot:hover { border-color: #a04458; box-shadow: 0 0 10px -2px rgba(217, 48, 74, 0.28); transform: translateY(-1px); } /* ---------- SECTION HEADING — subtle carmín text glow ---------- */ .sechead { text-shadow: 0 0 22px rgba(217, 48, 74, 0.35); transition: text-shadow 0.3s ease; } /* diamond dividers — subtle pulse on initial load */ .div .dot, .divc .dot { text-shadow: 0 0 8px rgba(217, 48, 74, 0.5); } /* ---------- REVEAL ANIMATION — livelier cubic-bezier ---------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.in { opacity: 1; transform: none; } /* LCP fix: on every inner page the hero heading block (.sechead/.sectitle/ .secsub) is rendered as the first direct children of , before the .wrap container — confirmed across all pages that use .reveal on their H1. Nothing below the fold is ever a direct child of . Excluding that block from opacity:0 lets the largest above-the-fold text paint immediately (LCP) and stay visible to crawlers that don't run JS, without touching any HTML or requiring a "js is present" hook on . `body > .reveal` outranks the plain `.reveal` specificity above, so this works regardless of source order and leaves every other .reveal element (all nested inside .wrap or deeper) animating exactly as before. */ body > .reveal { opacity: 1; transform: none; } /* ---------- MODAL — slightly more kinetic entrance ---------- */ .modal { transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease; } .overlay.show .modal { transform: none; } /* ---------- FOOTER LINK — subtle underline grow ---------- */ .footer .fcol a { position: relative; transition: color 0.18s ease; display: inline-block; } .footer .fcol a::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--carmin); transform: scaleX(0); transform-origin: left; transition: transform 0.2s cubic-bezier(0.22, 0.78, 0.24, 1); } .footer .fcol a:hover::after { transform: scaleX(1); } /* ---------- SCROLLBAR — refined thumb on hover ---------- */ ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } /* ---------- HERO H1 — slightly more vivid text glow ---------- */ .hero h1 { text-shadow: 0 0 60px rgba(217, 48, 74, 0.38), 0 2px 1px #000; } .hero h1 b { text-shadow: 0 0 24px rgba(217, 48, 74, 0.85), 0 0 70px rgba(217, 48, 74, 0.4); } /* ---------- REDUCED MOTION — disable all new animations ---------- */ @media (prefers-reduced-motion: reduce) { .card, .card .bk, .btn-pri, .btn-sec, .cta-pri, .cta-sec, .cta-play, .cta-dl, .ni, .ni::after, .tab, .pill, .field, .pg, .tbl tr, .itemslot, .modal, .footer .fcol a, .footer .fcol a::after { transition: none !important; } .btn-pri::after, .cta-pri::after, .cta-play::after { display: none; } .card:hover, .btn-pri:hover, .cta-pri:hover, .tab:hover, .pill:hover, .pg:hover, .itemslot:hover { transform: none !important; } } /* ---- guide pages: back link + prev/next pager (injected by app.js) ---- */ .gnav-back { /* small pill floated at the section-header height, in the empty left margin beside the centered title (header geometry is identical across guide pages). Absolute (no positioned ancestor) → anchored to the document, scrolls with the page. Mobile reverts to in-flow (see media query) to avoid overlapping the centered title where there's no side room. */ position: absolute; top: 138px; left: max(16px, calc((100vw - 1120px) / 2)); display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 5px 11px 5px 8px; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--accent-deep); border-radius: var(--radius-pill); background: var(--card-grad); text-decoration: none; z-index: 40; transition: border-color 0.16s, color 0.16s, transform 0.16s; } .gnav-back:hover { border-color: var(--carmin); color: #fff; transform: translateX(-2px); } .gnav-back svg { width: 12px; height: 12px; color: var(--carmin); } .gpager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; /* match the guide content container (.wrap) exactly so the prev button sits flush with the content's left edge and next flush with the right edge. width:100% is required because is a centering flex column — without it the grid shrink-wraps to its content and floats in the middle. */ width: 100%; max-width: var(--maxw); margin: 46px auto 10px; padding: 0 30px; } /* pin the buttons to the content edges, compact (not stretched across the half) */ .gpager-cell.prev { justify-self: start; } .gpager-cell.next { justify-self: end; } .gpager-hub { justify-self: center; } .gpager-cell { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border: 1px solid var(--accent-deep); border-radius: var(--radius); background: var(--card-grad); text-decoration: none; transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s; min-width: 0; } .gpager-cell.next { text-align: right; align-items: flex-end; } .gpager-cell:not(.empty):hover { border-color: var(--carmin); transform: translateY(-2px); box-shadow: 0 6px 22px -12px var(--carmin); } .gpager-cell.empty { border: none; background: none; pointer-events: none; } .gpager-dir { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--carmin); } .gpager-name { font-size: 13px; letter-spacing: 0.5px; color: var(--text); font-family: "Cinzel", serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gpager-hub { display: flex; align-items: center; padding: 0 18px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--accent-deep); border-radius: var(--radius); background: var(--card-grad); text-decoration: none; transition: border-color 0.16s, color 0.16s; } .gpager-hub:hover { border-color: var(--carmin); color: #fff; } @media (max-width: 640px) { .gpager { grid-template-columns: 1fr 1fr; } .gpager-hub { display: none; } .gnav-back { position: static; margin: 12px 0 0 16px; top: auto; left: auto; } }