/* FiveM counter (/fivem-player-count/) and server list (/fivem-servers/), every locale. One token set, light by default, dark from (set in the page head from the lc-theme key or the system setting). No framework, no icon font. */ :root { color-scheme: light; --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; --font-ar: system-ui, 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif; --accent: #c2410c; --accent-dark: #9a3412; --accent-soft: #fff1e8; --btn: #c2410c; --btn-hover: #9a3412; --bg: #f2f4f7; --card: #ffffff; --field: #f7f8fa; --text: #1b1f24; --text-2: #3d434c; --muted: #57606a; --border: #dde1e6; --border-2: #b9c0c8; --bar: #e6e9ed; --tag-bg: #eef0f4; --tag-ink: #30343c; --good: #15803d; --bad: #b91c1c; --bad-bg: #fef2f2; --tld: #c62a3c; --focus: #2563eb; --radius: 12px; --shadow: 0 1px 3px rgba(16, 24, 40, 0.1); --wrap: 1040px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --accent: #fb923c; --accent-dark: #fdba8c; --accent-soft: #33221a; --bg: #0f1113; --card: #181a1e; --field: #121417; --text: #eceef1; --text-2: #c3c7cf; --muted: #a3a8b2; --border: #2c3036; --border-2: #4a5059; --bar: #2a2d33; --tag-bg: #2a2e34; --tag-ink: #e2e5ea; --good: #4ade80; --bad: #f87171; --bad-bg: #2d1717; --tld: #ff5c6c; --focus: #8ab4ff; --shadow: 0 0 0 1px #24272c; } } :root[data-theme="dark"] { color-scheme: dark; --accent: #fb923c; --accent-dark: #fdba8c; --accent-soft: #33221a; --bg: #0f1113; --card: #181a1e; --field: #121417; --text: #eceef1; --text-2: #c3c7cf; --muted: #a3a8b2; --border: #2c3036; --border-2: #4a5059; --bar: #2a2d33; --tag-bg: #2a2e34; --tag-ink: #e2e5ea; --good: #4ade80; --bad: #f87171; --bad-bg: #2d1717; --tld: #ff5c6c; --focus: #8ab4ff; --shadow: 0 0 0 1px #24272c; } * { box-sizing: border-box; } /* The consent dialog locks scrolling; a reserved gutter keeps the page from getting wider for a moment. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; } html[lang="ar"] body { font-family: var(--font-ar); } h1, h2, h3 { margin: 0; line-height: 1.25; } p { margin: 0 0 1rem 0; } a { color: var(--accent-dark); } img, svg { vertical-align: middle; } button, input, select { font: inherit; } ul, ol { margin: 0; padding: 0; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Moved up out of view rather than far left: a huge negative left offset widens the page in right to left layouts. */ .skip-link { position: absolute; top: -200px; inset-inline-start: 8px; z-index: 100; background: var(--card); color: var(--text); padding: 10px 14px; border-radius: 8px; } .skip-link:focus { top: 8px; } .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- header: the site brand, then the FiveM tools ---------- */ .site-head { position: relative; z-index: 40; background: var(--card); border-bottom: 1px solid var(--border); } .head-row { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 20px; height: 56px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); text-decoration: none; white-space: nowrap; } .brand-mark { display: block; width: 28px; height: 28px; } .tld { color: var(--tld); } .head-nav { display: flex; gap: 20px; margin-inline-start: auto; } .head-nav a { padding-block: 17px; border-bottom: 2px solid transparent; color: var(--text-2); font-size: 14px; text-decoration: none; white-space: nowrap; } .head-nav a:hover { color: var(--text); } .head-nav a[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } .head-tools { display: flex; align-items: center; gap: 8px; } .icon-btn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text-2); cursor: pointer; } .icon-btn:hover { color: var(--text); border-color: var(--border-2); } .theme-toggle .ico-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ico-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ico-moon { display: none; } /* ---------- layout, cards, buttons ---------- */ .main { max-width: var(--wrap); margin: 0 auto; padding: 0 16px 40px; } .card, .counter-card, .creator-spotlight, .cmp-form, .cmp-side, .cmp-gap { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); } .card { padding: 22px 24px; margin-bottom: 16px; } .card h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; } .card h2:not(:first-child) { margin-top: 20px; } .card p { color: var(--text-2); line-height: 1.65; } .card p:last-child { margin-bottom: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; text-align: center; } .btn-primary { background: var(--btn); color: #fff; } .btn-primary:hover { background: var(--btn-hover); color: #fff; } .btn-line, .btn-secondary { background: var(--card); border-color: var(--border-2); color: var(--text); } .btn-line:hover, .btn-secondary:hover { border-color: var(--text); color: var(--text); } /* ---------- breadcrumb and the way back to the list ---------- */ .crumbs { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 16px 0 4px; font-size: 14px; } .back-link { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 14px 0 10px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--card); color: var(--text); font-weight: 600; text-decoration: none; } .back-link:hover { border-color: var(--text); } [dir="rtl"] .back-link .ico { transform: scaleX(-1); } .crumbs ol { display: flex; align-items: center; min-width: 0; list-style: none; color: var(--muted); white-space: nowrap; } .crumbs li { flex: none; } .crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--border-2); } .crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .crumbs a { color: var(--text-2); text-decoration: none; } .crumbs a:hover { color: var(--text); text-decoration: underline; } .crumbs [aria-current] { color: var(--text); } .page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; margin: 10px 0 14px; overflow-wrap: anywhere; } /* one short paragraph under the title: what the page does, where the numbers come from */ .page-lead { max-width: 100ch; margin: -4px 0 16px; color: var(--text-2); font-size: 15px; line-height: 1.6; } /* the list page has no breadcrumb above its title */ .main > .page-title:first-child { margin-top: 22px; } /* ---------- search at the top ---------- */ .finder { margin-bottom: 16px; } .search-form { display: flex; gap: 8px; } .search-box { position: relative; flex: 1; min-width: 0; } .search-box .ico { position: absolute; top: 15px; inset-inline-start: 13px; color: var(--muted); pointer-events: none; } .search-box input { width: 100%; height: 48px; padding: 0 14px; padding-inline-start: 40px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--card); color: var(--text); font-size: 16px; } .search-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.18); } .search-form .btn { min-height: 48px; } .search-results { list-style: none; margin-top: 8px; background: var(--card); border-radius: 10px; } .search-results:empty { display: none; } .search-results li + li { border-top: 1px solid var(--border); } .search-results a { display: flex; flex-direction: column; padding: 10px 12px; text-decoration: none; color: var(--text); } .search-results a:hover { background: var(--accent-soft); } .result-name { font-weight: 600; } .result-meta, .search-message { font-size: 13px; color: var(--muted); } .search-message { padding: 10px 12px; } .featured { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; min-width: 0; } .featured-label { flex: none; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--muted); } .featured-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; min-width: 0; } .featured-list a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 14px; white-space: nowrap; text-decoration: none; } .featured-list a:hover { border-color: var(--accent); color: var(--accent-dark); } /* ---------- counter card ---------- */ .counter-card { position: relative; overflow: hidden; margin-bottom: 16px; } /* Most servers have no usable banner, so the card stays plain: the icon with the accent ring. A static banner of the server's own shows behind the top half of the icon once it has loaded. It sits out of the flow, so nothing below it moves when it arrives. */ .banner { display: none; position: absolute; top: 0; left: 0; right: 0; height: 76px; overflow: hidden; background: var(--bar); } .has-banner .banner { display: block; } .server-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; } .server-banner.is-on { opacity: 1; } .counter-body { position: relative; padding: 24px 20px 18px; text-align: center; } .server-icon { position: relative; z-index: 1; display: block; width: 104px; height: 104px; margin: 0 auto 10px; border-radius: 50%; border: 4px solid var(--card); box-shadow: 0 0 0 3px var(--accent); background: var(--card); object-fit: cover; } .server-name { font-size: 1.35rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .server-code-line { margin-top: 2px; font-size: 13px; color: var(--muted); } .main-odometer { display: flex !important; justify-content: center; min-height: 1.15em; margin-top: 6px; color: var(--text); font-size: clamp(48px, 10vw, 80px); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; } .main-odometer.is-unknown { color: var(--muted); } .count-label { margin-top: 2px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .slots { max-width: 420px; margin: 16px auto 0; } .progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--bar); } .progress-bar { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.6s ease; } .slots-line { margin-top: 6px; font-size: 13px; color: var(--muted); } .server-offline { margin: 0 20px 16px; padding: 10px 14px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: 14px; text-align: center; } /* secondary numbers: one quiet row, 2 by 2 on phones */ .stats-grid { display: flex; flex-wrap: wrap; border-top: 1px solid var(--border); } .stat-card { flex: 1 1 0; min-width: 0; padding: 14px 10px; text-align: center; } .stat-card + .stat-card { border-inline-start: 1px solid var(--border); } .stat-head { font-size: 13px; font-weight: 600; color: var(--muted); } .stat-value { display: flex !important; justify-content: center; min-height: 1.3em; margin: 2px 0; color: var(--text); font-size: 1.45rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; } .stat-label { font-size: 12.5px; line-height: 1.4; color: var(--muted); } .trend-up { color: var(--good) !important; } .trend-down { color: var(--bad) !important; } .counter-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--border); } /* ---------- compare (/fivem-player-count/compare/): two servers side by side ---------- */ .cmp-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding: 16px; margin-bottom: 14px; } .cmp-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--text-2); } .cmp-form input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--field); color: var(--text); font-size: 16px; } .cmp-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.18); } .cmp-error { margin: -4px 0 14px; color: var(--bad); font-size: 14px; } .cmp-error:empty { display: none; } .cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .cmp-side { min-width: 0; padding: 18px 12px; text-align: center; } .cmp-icon { display: block; width: 112px; height: 112px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--card); box-shadow: 0 0 0 3px var(--accent); background: var(--card); object-fit: cover; } .cmp-name { margin-top: 10px; min-height: 1.5em; font-size: 1.25rem; font-weight: 500; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmp-odo { display: flex !important; justify-content: center; min-height: 1.2em; color: var(--text); font-size: calc(24px + 1.6vw); font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.2; } .cmp-visit { display: inline-block; margin-top: 8px; font-size: 14px; } .cmp-gap { margin-bottom: 16px; padding: 16px; text-align: center; } .cmp-gap .cmp-odo { font-size: calc(26px + 1.6vw); } .cmp-gap .count-label { font-size: 14px; } .cmp-lead { margin: 4px 0 0; color: var(--muted); font-size: 14px; } .cmp-lead:empty { display: none; } .matchup-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .matchup-list a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 14px; text-decoration: none; } .matchup-list a:hover { border-color: var(--accent); color: var(--accent-dark); } /* ---------- chart ---------- */ .chart-card { padding: 18px 20px; } .chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .chart-head h2 { margin: 0; } .range-btns { display: inline-flex; gap: 6px; } .range-btns button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--card); color: var(--text); font-size: 14px; cursor: pointer; } .range-btns button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--card); } #chart { height: 360px; } .highcharts-background { fill: transparent; } :root[data-theme="dark"] .highcharts-title, :root[data-theme="dark"] .highcharts-axis-labels text { fill: #c3c7cf !important; } :root[data-theme="dark"] .highcharts-grid-line { stroke: #2c3036; } /* ---------- details ---------- */ .server-about { margin-bottom: 8px !important; } .fivem-updated { font-size: 13px; color: var(--muted) !important; margin: 0 0 12px !important; } .detail-list { list-style: none; } .detail-list li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); } .detail-list li:last-child { border-bottom: 0; } .detail-label { flex: 0 0 130px; font-size: 14px; font-weight: 600; color: var(--text-2); } .detail-value { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; } .tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } .tag-list .detail-label { flex: 0 0 auto; margin-inline-end: 6px; } .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--tag-bg); color: var(--tag-ink); font-size: 13px; } .server-more { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; } .server-more summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 14px; } .server-more .table-wrap { overflow-x: auto; padding: 0 14px 12px; } .server-more table { width: 100%; border-collapse: collapse; font-size: 14px; } .server-more th, .server-more td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--border); } .resource-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; max-height: 240px; overflow-y: auto; } /* ---------- ads: space reserved up front ---------- */ .lcnl-ad, .lcnl-ad-fluid { min-height: 100px; margin: 16px 0; text-align: center; overflow: hidden; } /* ---------- FAQ, share, footer ---------- */ .faq details { border-bottom: 1px solid var(--border); } .faq details:last-child { border-bottom: 0; } .faq summary { position: relative; cursor: pointer; padding: 14px 0; padding-inline-end: 28px; font-weight: 600; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; inset-inline-end: 4px; top: 12px; font-size: 20px; color: var(--muted); } .faq details[open] summary::after { content: '\2212'; } .faq details > div { padding: 0 0 14px; color: var(--text-2); } .share label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; } .share label:first-of-type { margin-top: 0; } .share input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--field); color: var(--text); font-size: 14px; } .share .hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; } .site-footer { max-width: var(--wrap); margin: 0 auto; padding: 0 16px 40px; font-size: 14px; color: var(--muted); } .site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; } .site-footer a { color: var(--text-2); } /* ---------- Space-Node promo, server-rendered spotlight ---------- */ .spacenode-promo-card { margin: 0 0 16px; } .spacenode-promo-title { font-size: 1.3rem; } .creator-spotlight { padding: 20px 24px; margin-bottom: 16px; } .creator-spotlight h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; } .creator-spotlight h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; } .creator-spotlight p { color: var(--text-2); margin: 0 0 12px; } .creator-spotlight .creator-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .creator-spotlight .creator-links a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 14px; text-decoration: none; } .creator-spotlight .creator-links a:hover { border-color: var(--accent); color: var(--accent-dark); } .creator-spotlight .creator-links .creator-meta { color: var(--muted); font-size: 13px; } .creator-spotlight .creator-more { margin: 12px 0 0; font-weight: 600; } .intro-text { color: var(--text-2); font-size: 15px; line-height: 1.65; } /* ---------- right to left (Arabic) ---------- */ /* Odometer digits are separate inline boxes; keep them left to right or 1234 reads 4321. */ [dir="rtl"] .odometer, [dir="rtl"] .stat-value, [dir="rtl"] .server-code-line, [dir="rtl"] #slots-text { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .count-label, [dir="rtl"] .stat-head { letter-spacing: 0; } /* ---------- small screens ---------- */ @media (max-width: 760px) { .head-row { height: 52px; gap: 12px; } .head-nav { gap: 14px; } .head-nav a { padding-block: 15px; font-size: 13.5px; } .crumbs { margin-top: 12px; } .page-title { font-size: 1.3rem; margin: 8px 0 8px; } .page-lead { margin-bottom: 14px; font-size: 14px; line-height: 1.55; } .card, .creator-spotlight { padding: 18px 16px; } .banner { height: 54px; } .server-icon { width: 76px; height: 76px; margin-bottom: 8px; } .slots { margin-top: 12px; } .counter-body { padding: 16px 14px 16px; } .stat-card { flex: 1 1 50%; padding: 10px 8px; } .stat-card:nth-child(odd) { border-inline-start: 0; } .stat-card:nth-child(n+3) { border-top: 1px solid var(--border); } .stat-value { font-size: 1.25rem; } .counter-actions { padding: 14px; } /* one line per label: two buttons share a row when they fit, else each gets its own */ .counter-actions .btn { flex: 1 1 auto; padding: 0 14px; gap: 6px; font-size: 14px; white-space: nowrap; } .counter-actions .btn-primary { flex-basis: 100%; } .chart-card { padding: 14px 12px; } #chart { height: 300px; } .detail-label { flex-basis: 105px; } .lcnl-ad { min-height: 280px; } .lcnl-ad-fluid { min-height: 250px; } .lcnl-ad-horizontal { min-height: 100px; } /* one row of popular servers that scrolls sideways */ .featured { margin-inline: -16px; padding-inline: 16px; } .featured-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .featured-list::-webkit-scrollbar { display: none; } } @media (max-width: 600px) { .cmp-form { grid-template-columns: 1fr 1fr; } .cmp-form .btn { grid-column: 1 / -1; } .cmp-icon { width: 72px; height: 72px; border-width: 3px; } .cmp-name { font-size: 1rem; } .cmp-odo { font-size: 24px; } .cmp-gap .cmp-odo { font-size: 30px; } .head-nav { display: none; } .head-tools { margin-inline-start: auto; } .search-form .btn { padding: 0 14px; } /* the back button already goes to the list: keep the filter (if any) and the server name */ .crumbs li:nth-child(-n+2) { display: none; } .crumbs li:nth-child(3)::before, .crumbs li:nth-child(3)[hidden] + li::before { content: none; } .featured { align-items: center; } .featured-label { padding-top: 0; } } @media (max-width: 420px) { .counter-actions .btn-line .ico { display: none; } } @media (max-width: 380px) { .brand { font-size: 16px; } .crumbs ol { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }