/* ===================================================================== ClanWar — SKIN + MOBILE layer (2026-06-26) Loaded LAST. Two jobs: 1. Atmospheric background imagery site-wide (textured tactical grid + layered brand glows; richer hero/section backdrops). 2. Full mobile hardening for Android / iPhone on top of cw.css's existing breakpoints — topbar fit, no horizontal overflow, stacked grids, scrollable tables, comfortable touch targets. Uses the existing --cw-* tokens so it tracks the live palette. ===================================================================== */ /* --------------------------------------------------------------------- 1 · BACKGROUND IMAGERY --------------------------------------------------------------------- */ body.cw-body { background-color: var(--cw-bg) !important; background-image: radial-gradient(1100px 720px at -160px -220px, color-mix(in srgb, var(--cw-accent) 12%, transparent), transparent 60%), radial-gradient(960px 660px at 118% -140px, rgba(153,27,27,.13), transparent 60%), radial-gradient(900px 900px at 50% 128%, color-mix(in srgb, var(--cw-accent) 7%, transparent), transparent 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0V48' fill='none' stroke='%23ff8a3c' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E") !important; background-repeat: no-repeat, no-repeat, no-repeat, repeat !important; background-attachment: fixed, fixed, fixed, fixed !important; background-position: 0 0 !important; } /* sidebar gets a faint matching grid so the frame feels textured too */ .cw-side { background-image: linear-gradient(180deg, color-mix(in srgb, var(--cw-bg-2) 92%, transparent), var(--cw-bg)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0V48' fill='none' stroke='%23ff8a3c' stroke-opacity='0.035' stroke-width='1'/%3E%3C/svg%3E") !important; background-repeat: no-repeat, repeat !important; } /* generic hero (shop / cups / store / etc.) — patterned slab with a glow. profile.php keeps its own equipped-background hero, untouched. */ .cw-hero:not(.cw-hero-bg) { position: relative; background: radial-gradient(720px 320px at 100% -30%, color-mix(in srgb, var(--cw-accent) 18%, transparent), transparent 60%), radial-gradient(560px 320px at 0 120%, rgba(153,27,27,.16), transparent 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0l14 8v16l-14 8L0 24V8z' fill='none' stroke='%23ff8a3c' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--cw-bg-2), var(--cw-bg)) !important; } /* a touch more depth on cards + a brand top-edge on headered cards */ .cw-card { box-shadow: 0 14px 40px -26px rgba(0,0,0,.75) !important; } /* --------------------------------------------------------------------- 2 · MOBILE HARDENING --------------------------------------------------------------------- */ /* never allow sideways scroll on the whole page (the #1 mobile bug); tables keep their own scroll inside .cw-table-wrap */ @media (max-width: 900px) { html, body { max-width: 100%; overflow-x: hidden; } .cw-main, .cw-content { min-width: 0; max-width: 100vw; } .cw-card, .cw-hero, .cw-table-wrap, .cw-stats, .cw-prof-grid { max-width: 100%; } .cw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* the background pattern shouldn't be fixed on mobile (iOS jank) */ body.cw-body, .cw-side { background-attachment: scroll, scroll, scroll, scroll !important; } } /* tablet / large phone */ @media (max-width: 768px) { .cw-topbar { padding: 0 12px !important; gap: 8px !important; height: 56px !important; } .cw-page-title { font-size: 16px !important; } .cw-search { max-width: 200px; } .cw-top-live, .cw-top-admin { display: none !important; } /* keep wallet + avatar */ .cw-content { padding: 14px 12px !important; } /* stack every two/three-column page grid */ .cw-prof-grid, .cw-grid, .cw-grid-2, .cw-grid-3, .cw-slots, .cw-foot-grid, .cw-home-grid, .cw-cmp-grid { grid-template-columns: 1fr !important; } .cw-hero h1, .cw-hero-id-text h1, h1 { font-size: 22px !important; } .cw-hero { padding: 18px 16px !important; } } /* phone */ @media (max-width: 560px) { .cw-search { display: none !important; } /* search via the page / nav instead */ .cw-content { padding: 12px 10px !important; } .cw-card-b, .cw-card-b.padded { padding: 14px !important; } .cw-card-h { padding: 13px 14px !important; } .cw-hero { padding: 16px 14px !important; } .cw-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; } /* comfortable tap targets on nav + buttons + pills */ .cw-side-link { padding: 12px 12px !important; } .cw-btn.sm { height: 36px; } .cw-badge.cw-pill { padding: 6px 11px; } /* dock fills the screen width as a sheet */ #cw-dock .cw-dk-panel { width: calc(100vw - 20px) !important; max-height: 78vh !important; } #cw-dock .cw-dk-dmhost { right: 0 !important; left: 0 !important; } #cw-dock .cw-dk-chat { width: 100% !important; } /* the stat-tile strips wrap to 2-up instead of cramming */ .cw-stats, .cw-hero-tiles { grid-template-columns: repeat(2, 1fr) !important; } } /* very small phones */ @media (max-width: 380px) { .cw-page-title { font-size: 15px !important; } .cw-wallet { padding: 0 10px !important; } .cw-foot-grid { grid-template-columns: 1fr !important; } } /* --------------------------------------------------------------------- 3 · NO UNDERLINES + POLISH --------------------------------------------------------------------- */ /* No underline / hairline under player names (or any link) anywhere. */ a, a:hover, a:focus { text-decoration: none !important; } .cw-name, .cw-name a, .cw-name-cell, .cw-name-cell a, .cw-lb-pinfo, .cw-lb-pname, .cw-lb-pname a, .cw-podium-name, .cw-podium-name a, .cw-hero-id-text a, .cw-dk-name { text-decoration: none !important; border-bottom: 0 !important; } /* smoother everything + crisp keyboard focus */ html { scroll-behavior: smooth; } :focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; border-radius: 4px; } .cw-btn, .cw-chip, .cw-side-link, .cw-badge.cw-pill, .cw-card, .cw-lbt tbody tr, .cw-table tbody tr { transition: background .15s ease, border-color .15s ease, color .15s ease; } /* leaderboard: a touch more vertical air + a clean gradient hover */ .cw-lbt tbody td { padding-top: 13px !important; padding-bottom: 13px !important; } .cw-lbt tbody tr:hover td { background: linear-gradient(90deg, color-mix(in srgb, var(--cw-accent) 10%, transparent), transparent 88%) !important; } /* the standings (top-3) cards: quiet accent on hover, no jump */ .cw-podium-spot { transition: border-color .16s ease, box-shadow .16s ease; } /* name links go accent on hover instead of underlining */ .cw-name-cell a:hover, .cw-lb-pname a:hover, .cw-podium-name a:hover, .cw-hero-id-text a:hover { color: var(--cw-accent) !important; } /* --------------------------------------------------------------------- GLOBAL: no row/header hairline on ANY table, ANY page. Catches .cw-table and every variant (.cw-lbt, .cw-season-table, the HoF tables, cups, clans, admin) plus any plain table inside a .cw-table-wrap. This is the single source of truth for "no line under the names". --------------------------------------------------------------------- */ .cw-table thead th, .cw-table tbody td, .cw-table tbody tr, .cw-table-wrap table thead th, .cw-table-wrap table tbody td, .cw-table-wrap table tbody tr { border-top: 0 !important; border-bottom: 0 !important; } /* ROOT CAUSE of the stray hairline under names: the base .cw-name-cell is display:flex, and a flex floats its bottom edge up to content height (the cw.css override at .cw-table .cw-name-cell forgot to reset display). Force real table-cell flow so the cell behaves normally — inline avatar / flag / name are middle-aligned. The leaderboard (.cw-lbt) opts out: it sets its own flex for a 2-line name + steamID stack. */ .cw-table:not(.cw-lbt) td.cw-name-cell { display: table-cell !important; vertical-align: middle !important; white-space: nowrap; } .cw-table:not(.cw-lbt) td.cw-name-cell > * { vertical-align: middle; } .cw-table:not(.cw-lbt) td.cw-name-cell .cw-flag { margin: 0 6px; } .cw-table:not(.cw-lbt) td.cw-name-cell .cw-avatar { margin-right: 8px; } /* --------------------------------------------------------------------- AVATAR FRAMES — fit cleanly everywhere. The decorative art ring (.cw-frame-art) renders at 146% of the avatar, so it balloons beyond the box. Inline contexts (name cells, tables, league, dock lists) need breathing room so the ring can't collide with the name; big contexts (hero / podium / settings) already have room. This is additive only — it never touches the frame's internal art/mask. */ .cw-frame { vertical-align: middle; flex: none; } .cw-name-cell .cw-frame { margin: 0 9px 0 0; } .cw-table td .cw-frame, .cw-table-wrap td .cw-frame { margin-right: 9px; } .cw-dk-row .cw-frame, .cw-dk-list .cw-frame { margin-right: 8px; } /* --------------------------------------------------------------------- NO HOVER "POP". Boxes / cards / tiles / rows must NOT lift or scale on hover anywhere (user preference). Border + colour + shadow hover feedback is kept; only the movement (transform) is removed. Single source of truth site-wide. The top-3 podium is handled in ranks.php instead, because the gold card has a PERSISTENT elevation that must survive hover. --------------------------------------------------------------------- */ .cw-card:hover, a.cw-stat:hover, .cw-stat:hover, .cw-stat-tier:hover, .cw-round:hover, .cw-ach:hover, .cw-tod-cell:hover, .cw-home-fmt:hover, .cw-potw:hover, .cw-dk-launch:hover, .cw-clanx-stat:hover, .cw-clanx-card:hover, .cw-clanx-ratepanel:hover, .cw-cl-stat:hover, .cw-cl-invite:hover, .cw-cl .cw-card:hover, .cw-col-item:hover, .cwx-card:hover, .cwx-bg:hover, .cw-cmp-card:hover, .cw-day:hover, .cw-day.next:hover, .cw-day.jackpot:hover, .cw-unbox:hover, .cw-fr-tile:hover, .cw-fr-card:hover, .cw-szn-pod:hover, .cw-szn-standing:hover, .cw-play-fmt:hover, .cw-play-ladder:hover, .cw-fz-card:hover, .cw-fz-find:hover, .cw-lm:hover, .cw-srv-card:hover, .cw-lb-tile:hover, .cw-ts-cta:hover, .cw-ts-room:hover, .cw-srch-row:hover, .cw-pack:hover, .cw-pack.featured:hover, .cw-shop-tile:hover, .cw-sub-card:hover, .cw-cos-tile:hover, .cw-table tbody tr:hover, .cw-prow:hover, .cw-prow:hover td { transform: none !important; }