/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[3]!./src/components/ContrastFix.module.css ***! \*********************************************************************************************************************************************************************************************************************************************************************************/ /* Global contrast tweaks. Goal: prevent "text same as background" on the site's dark surfaces. We keep this lightweight and only target the dark/translucent surfaces that appear across the UI (gamer-card + common translucent backgrounds). */ /* NOTE (Next.js CSS Modules): a selector in a *.module.css file must include at least one local class/id. We scope all global tweaks under a local `.scope`. The template wraps the whole locale subtree with this class. */ .ContrastFix_scope__dA16z { /* Scoping hook. NOTE: this class can also be applied to from template.tsx, so do NOT use display: contents here (it breaks body layout on some browsers). */ } .ContrastFix_scope__dA16z .gamer-card { color: rgb(255 255 255 / 0.92); } .ContrastFix_scope__dA16z .text-brand-muted { color: rgb(255 255 255 / 0.68) !important; } /* Common dark/translucent surfaces used in many pages */ .ContrastFix_scope__dA16z .bg-black\/10, .ContrastFix_scope__dA16z .bg-black\/20, .ContrastFix_scope__dA16z .bg-black\/30, .ContrastFix_scope__dA16z .bg-black\/40, .ContrastFix_scope__dA16z .bg-black\/50, .ContrastFix_scope__dA16z .bg-white\/5, .ContrastFix_scope__dA16z .bg-white\/10, .ContrastFix_scope__dA16z .bg-white\/15 { color: rgb(255 255 255 / 0.92); } .ContrastFix_scope__dA16z input, .ContrastFix_scope__dA16z textarea, .ContrastFix_scope__dA16z select { color: rgb(255 255 255 / 0.92); } .ContrastFix_scope__dA16z input::-moz-placeholder, .ContrastFix_scope__dA16z textarea::-moz-placeholder { color: rgb(255 255 255 / 0.45); } .ContrastFix_scope__dA16z input::placeholder, .ContrastFix_scope__dA16z textarea::placeholder { color: rgb(255 255 255 / 0.45); } /* Public games page: categories sidebar + two-column layout (generated in template.tsx) */ .ContrastFix_scope__dA16z .tg-games-layout { display: flex; gap: 24px; align-items: flex-start; } .ContrastFix_scope__dA16z .tg-games-content { min-width: 0; flex: 1; } .ContrastFix_scope__dA16z .tg-category-sidebar { width: 260px; flex: 0 0 260px; border: 1px solid rgb(255 255 255 / 0.12); background: rgb(0 0 0 / 0.22); border-radius: 16px; padding: 14px; position: sticky; top: 110px; } .ContrastFix_scope__dA16z .tg-category-sidebar-title { font-weight: 700; font-size: 18px; margin-bottom: 10px; color: rgb(255 255 255 / 0.92); } .ContrastFix_scope__dA16z .tg-category-sidebar-list { display: flex; flex-direction: column; gap: 6px; } .ContrastFix_scope__dA16z .tg-category-sidebar-item { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; color: rgb(255 255 255 / 0.78); border-radius: 12px; padding: 8px 10px; font-size: 13px; line-height: 1.2; cursor: pointer; } .ContrastFix_scope__dA16z .tg-category-sidebar-item:hover { border-color: rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.9); } .ContrastFix_scope__dA16z .tg-category-sidebar-item[data-active="1"] { border-color: rgb(255 203 0 / 0.55); background: rgb(255 203 0 / 0.14); color: rgb(255 255 255 / 0.95); } @media (max-width: 900px) { .ContrastFix_scope__dA16z .tg-games-layout { flex-direction: column; } .ContrastFix_scope__dA16z .tg-category-sidebar { width: 100%; flex-basis: auto; position: static; } } /* Header: two-row layout like trunggames.com (topbar: search + actions; below: nav/menu) */ .ContrastFix_scope__dA16z header.tg-header-v2, .ContrastFix_scope__dA16z [role="banner"].tg-header-v2 { display: flex; flex-direction: column; } /* Disable sticky/fixed headers (user asked: header must NOT follow when scrolling) */ .ContrastFix_scope__dA16z header, .ContrastFix_scope__dA16z [role="banner"] { position: static !important; top: auto !important; } .ContrastFix_scope__dA16z .tg-header-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; border-bottom: 1px solid rgb(255 255 255 / 0.15); flex-wrap: nowrap; } .ContrastFix_scope__dA16z .tg-header-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } /* Logo in the top bar (cloned from existing logo) */ .ContrastFix_scope__dA16z .tg-header-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; color: rgb(255 255 255 / 0.92); font-weight: 800; } .ContrastFix_scope__dA16z .tg-header-logo img { height: 36px; width: auto; -o-object-fit: contain; object-fit: contain; } .ContrastFix_scope__dA16z .tg-header-search-form { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .ContrastFix_scope__dA16z .tg-header-search-input { width: min(560px, 56vw); height: 36px; border-radius: 6px; border: 1px solid rgb(255 255 255 / 0.25); background: rgb(255 255 255 / 0.95); color: rgb(0 0 0 / 0.9); padding: 0 12px; font-size: 14px; outline: none; min-width: 140px; } .ContrastFix_scope__dA16z .tg-header-search-input::-moz-placeholder { color: rgb(0 0 0 / 0.5); } .ContrastFix_scope__dA16z .tg-header-search-input::placeholder { color: rgb(0 0 0 / 0.5); } .ContrastFix_scope__dA16z .tg-header-topbar-right { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; white-space: nowrap; } /* Cloned controls (Login / Language / Admin) */ .ContrastFix_scope__dA16z .tg-header-ctrl { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; height: 34px; border-radius: 10px; border: 1px solid rgb(255 255 255 / 0.18); background: rgb(0 0 0 / 0.25); color: rgb(255 255 255 / 0.88); text-decoration: none; font-size: 14px; cursor: pointer; } .ContrastFix_scope__dA16z .tg-header-ctrl:hover { background: rgb(0 0 0 / 0.35); } .ContrastFix_scope__dA16z .tg-header-search-btn { height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid rgb(255 255 255 / 0.18); background: rgb(255 203 0 / 0.9); color: rgb(0 0 0 / 0.92); font-weight: 700; cursor: pointer; } .ContrastFix_scope__dA16z .tg-header-search-btn:hover { background: rgb(255 203 0 / 1); } /* Nav row: keep it as a second row under top bar */ .ContrastFix_scope__dA16z .tg-header-navrow { display: flex; align-items: center; justify-content: flex-end; gap: 28px; padding: 14px 16px; } @media (max-width: 700px) { .ContrastFix_scope__dA16z .tg-header-topbar { flex-wrap: wrap; gap: 10px; } .ContrastFix_scope__dA16z .tg-header-search-input { width: min(560px, 90vw); } } /* Public games page: grid layout without moving nodes */ .ContrastFix_scope__dA16z .tg-games-layout-v2 { /* Force grid even if the page already has utility classes like `flex` */ display: grid !important; grid-template-columns: 260px 1fr !important; gap: 24px; align-items: start; width: 100%; } .ContrastFix_scope__dA16z .tg-games-layout-v2 > :not(.ContrastFix_tg-category-sidebar__DRwlW) { grid-column: 2 !important; } .ContrastFix_scope__dA16z .tg-category-sidebar { grid-column: 1 !important; position: sticky; top: 16px; align-self: start; } @media (max-width: 900px) { .ContrastFix_scope__dA16z .tg-games-layout-v2 { grid-template-columns: 1fr !important; } .ContrastFix_scope__dA16z .tg-games-layout-v2 > :not(.ContrastFix_tg-category-sidebar__DRwlW) { grid-column: 1 !important; } }