/* ============================================================================ theme.css — the ONE monochrome design system for randomchat.io. ============================================================================ Rules this file enforces (2026-07-29 redesign). Do not reintroduce any of the things on the "never" list — they are the whole point of the rewrite: NEVER hues — with exactly ONE exception: --online, the live-user dot (see the token). Everything else is a neutral grey: R == G == B NEVER gradients (linear-gradient / conic-gradient / background-image) NEVER box-shadow, text-shadow, glow or blur ornamentation NEVER accent stripes (border-left/right: Npx solid ) NEVER border-radius — --radius is 0 and every component reads it NEVER emoji in markup — use the .ico SVG set (scripts/build-icons.py) Only two surfaces exist: page (--bg/--fg) and its inverse (--fg/--bg). Separation comes from 1px hairlines and whitespace, nothing else. Theme: light is the default; `data-theme="dark"` on flips it. The attribute is written by the no-FOUC boot snippet in every page and by js/theme.js (localStorage key `rc_theme`, values light|dark|system). With no stored choice we follow prefers-color-scheme. Layering: this file styles the public site (landing pages, blog, footer). The chat/room/form app shells add css/app.css on top; it inherits these tokens and must not redefine them. ========================================================================== */ /* ---------- Tokens ---------- */ :root { color-scheme: light; --bg: #ffffff; /* page background */ --fg: #000000; /* body text, and the inverse surface fill */ --muted: #595959; /* secondary text — 7.0:1 on white */ --faint: #767676; /* tertiary text — 4.7:1 on white */ --line: #d4d4d4; /* hairline borders */ --line-strong: #8c8c8c; /* borders that must read as a real edge */ --surface: #f5f5f5; /* the single tinted fill we allow */ /* THE ONE COLOUR ON THE SITE. The live-user dot is the single element allowed a hue: "people are online right now" is a status signal, and a green dot is the one convention every visitor already reads without a legend. It is used by .online-dot and nothing else — do not reach for it anywhere else, and do not add a second accent. 4.6:1 on white. */ --online: #15803d; --radius: 0; --hairline: 1px solid var(--line); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --wrap: 1200px; /* navbar / footer width */ --measure: 860px; /* article width */ } :root[data-theme="dark"] { color-scheme: dark; --bg: #000000; --fg: #ffffff; --muted: #a6a6a6; /* 9.7:1 on black */ --faint: #8c8c8c; /* 6.4:1 on black */ --line: #333333; --line-strong: #737373; --surface: #0f0f0f; --online: #4ade80; /* 9.4:1 on black — see the light-mode note */ } /* Visitors who never opened the picker follow the OS. The boot snippet stamps data-theme="light" explicitly, so an explicit choice always wins over this block regardless of source order. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #000000; --fg: #ffffff; --muted: #a6a6a6; --faint: #8c8c8c; --line: #333333; --line-strong: #737373; --surface: #0f0f0f; --online: #4ade80; } } /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { font-family: var(--font); background: var(--bg); color: var(--fg); line-height: 1.65; font-size: 16px; min-height: 100vh; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } [hidden] { display: none !important; } ::selection { background: var(--fg); color: var(--bg); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } /* ---------- Icons ---------- Every former emoji is now one of these. Uniform geometry: 24x24 box, no fill, 1.5px currentColor stroke, round joins. Size follows font-size, so an icon always matches the text it sits next to. */ .ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .ico-fill { fill: currentColor; stroke: none; } /* Icon slots that used to be sized emoji spans. */ .icon, .use-case-icon, .benefit-icon, .emoji, .lang-flag, .result-icon, .fab-chat-icon, .btn-icon, .country-flag, .tip-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .icon, .use-case-icon, .emoji { font-size: 32px; margin-bottom: 14px; } .result-icon { font-size: 40px; margin-bottom: 10px; justify-content: center; display: flex; } .lang-flag { font-size: 26px; margin-bottom: 8px; display: flex; justify-content: center; } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6 { color: var(--fg); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: clamp(30px, 5vw, 44px); } h2 { font-size: clamp(23px, 3.2vw, 28px); margin: 44px 0 16px; } h3 { font-size: 19px; margin: 28px 0 10px; } h4 { font-size: 16px; margin: 20px 0 8px; } h2:first-child, h3:first-child, h2:first-of-type { margin-top: 0; } p { margin-bottom: 16px; color: var(--muted); } strong, b { color: var(--fg); font-weight: 700; } em, i { font-style: italic; } small { font-size: 13px; } ul, ol { margin: 0 0 20px 22px; } ul { list-style: square; } ol { list-style: decimal; } li { margin-bottom: 8px; color: var(--muted); } li::marker { color: var(--faint); } a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } hr { border: 0; border-top: var(--hairline); margin: 32px 0; } code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; } code { border: var(--hairline); padding: 1px 5px; } pre { border: var(--hairline); padding: 14px; overflow-x: auto; } pre code { border: 0; padding: 0; } blockquote { border-left: var(--hairline); padding-left: 18px; margin: 24px 0; color: var(--muted); } /* ---------- Buttons ---------- Two shapes only. Primary is the inverse surface, secondary is an outline. Both are square and flat; hover swaps fill instead of moving the element. */ .btn, .cta-button, .cta-btn, .submit-btn, .local-submit, .btn-primary, .btn-secondary, .navbar-cta, .pwa-banner-install { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border: 1px solid var(--fg); border-radius: var(--radius); background: var(--fg); color: var(--bg); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .btn:hover, .cta-button:hover, .cta-btn:hover, .submit-btn:hover, .local-submit:hover, .btn-primary:hover, .navbar-cta:hover, .pwa-banner-install:hover { background: var(--bg); color: var(--fg); text-decoration: none; } .btn-secondary, .btn-outline { background: transparent; color: var(--fg); border-color: var(--line-strong); } .btn-secondary:hover, .btn-outline:hover { background: var(--fg); color: var(--bg); } .btn:disabled, button:disabled, .submit-btn:disabled, .local-submit:disabled { opacity: 0.4; cursor: not-allowed; } .btn:disabled:hover, button:disabled:hover { background: var(--fg); color: var(--bg); } /* ---------- Navbar ---------- */ .navbar { position: sticky; top: 0; z-index: 1000; background: var(--bg); border-bottom: var(--hairline); padding: 0 20px; } .navbar-inner { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; } .navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); } /* Brand mark. Inline SVG rather than the raster /icons/Icon-192.png so it inherits currentColor and flips with the theme; the PNG survives as the PWA/app icon and the favicon fallback. */ .brand-mark { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .navbar-brand img { width: 32px; height: 32px; border-radius: var(--radius); } .navbar-brand span { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); } .navbar-links { display: flex; align-items: center; gap: 4px; } .navbar-links a { color: var(--muted); text-decoration: none; padding: 8px 12px; font-size: 15px; border: 1px solid transparent; } .navbar-links a:hover { color: var(--fg); border-color: var(--line); } .navbar-cta { padding: 9px 18px; font-size: 15px; } .navbar-cta:hover { background: var(--bg); color: var(--fg); } .mobile-menu-btn { display: none; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--fg); font-size: 20px; line-height: 1; cursor: pointer; padding: 8px 10px; } .mobile-menu-btn:hover { background: var(--fg); color: var(--bg); } /* Theme switch that sits in the navbar / header of every page. */ .theme-toggle { background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--fg); cursor: pointer; font-size: 18px; line-height: 1; padding: 7px 9px; display: inline-flex; align-items: center; } .theme-toggle:hover { background: var(--fg); color: var(--bg); } /* ---------- Page hero ---------- Was a colour gradient band. Now it is the page itself: big type, one hairline underneath, nothing else. */ .page-hero { background: var(--bg); color: var(--fg); border-bottom: var(--hairline); padding: 64px 20px 56px; text-align: center; } .page-hero h1 { margin-bottom: 18px; } .page-hero p { color: var(--muted); font-size: 18px; max-width: 640px; margin: 0 auto 26px; } .page-hero p:last-child { margin-bottom: 0; } /* ---------- Layout ---------- */ main { max-width: var(--measure); margin: 0 auto; padding: 52px 20px 72px; } .content-card { background: var(--bg); border: 0; padding: 0; margin-bottom: 44px; } .content-section { padding: 64px 20px; max-width: var(--measure); margin: 0 auto; } .section-title { font-size: clamp(25px, 3.6vw, 32px); text-align: center; margin-bottom: 14px; } .section-subtitle { font-size: 17px; text-align: center; color: var(--muted); margin: 0 auto 44px; max-width: 620px; } /* ---------- Callout boxes ---------- All the old accent-striped, tinted, rounded variants collapse into one flat bordered block. .warning-box keeps a heavier border so a genuine warning still reads as one without colour. */ .info-box, .value-box, .feature-box, .highlight-box, .warning-box, .tip-box, .tip-card, .inclusivity-section { background: var(--bg); border: var(--hairline); border-radius: var(--radius); padding: 22px 24px; margin: 26px 0; } .warning-box { border-color: var(--line-strong); border-width: 2px; } .info-box h3, .value-box h3, .feature-box h3, .highlight-box h3, .warning-box h3, .tip-box h3, .tip-card h3, .inclusivity-section h3 { margin-top: 0; margin-bottom: 10px; color: var(--fg); display: flex; align-items: center; gap: 10px; } .info-box p:last-child, .value-box p:last-child, .feature-box p:last-child, .highlight-box p:last-child, .warning-box p:last-child, .tip-box p:last-child, .tip-card p:last-child, .inclusivity-section p:last-child { margin-bottom: 0; } .inclusivity-section { text-align: center; } .inclusivity-section p { max-width: 680px; margin-left: auto; margin-right: auto; } .tip-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--fg); border-radius: var(--radius); font-weight: 700; font-size: 15px; margin-right: 10px; flex-shrink: 0; } /* ---------- Card grids ---------- privacy / feature / cam / alt / use-case / testimonial / comparison all had their own tint + radius. One flat bordered tile serves all of them. */ .privacy-grid, .feature-grid, .cam-grid, .alt-grid, .use-cases, .testimonial-grid, .comparison-grid, .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 30px 0; } .privacy-card, .feature-card, .cam-card, .alt-card, .use-case, .testimonial-card, .comparison-card, .benefit-card { background: var(--bg); border: var(--hairline); border-radius: var(--radius); padding: 24px; } .privacy-card, .feature-card, .cam-card, .use-case, .comparison-card { text-align: center; } .privacy-card h3, .feature-card h3, .cam-card h3, .alt-card h3, .use-case h3, .comparison-card h3, .benefit-card h3 { font-size: 17px; margin: 0 0 8px; } .privacy-card p, .feature-card p, .cam-card p, .alt-card p, .use-case p, .comparison-card p, .benefit-card p { font-size: 15px; margin-bottom: 0; } .benefit-icon { width: 44px; height: 44px; border: 1px solid var(--fg); border-radius: var(--radius); font-size: 22px; margin-bottom: 16px; } .testimonials { margin: 40px 0; } .testimonial-text { font-style: italic; color: var(--muted); margin-bottom: 10px; font-size: 15px; } .testimonial-author { font-size: 13px; color: var(--faint); font-weight: 600; } .alt-rating { color: var(--muted); font-size: 14px; margin-bottom: 8px; display: flex; gap: 3px; align-items: center; } /* ---------- Stats ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0; } .stat-item { text-align: center; padding: 24px 16px; border: var(--hairline); border-radius: var(--radius); } .stat-number { font-size: 32px; font-weight: 800; color: var(--fg); display: block; line-height: 1.1; } .stat-label { font-size: 13px; color: var(--muted); margin-top: 6px; } /* ---------- Steps ---------- */ .step-grid, .steps-container { display: grid; gap: 18px; margin: 30px 0; } .step-card, .step { display: flex; gap: 20px; padding: 24px; border: var(--hairline); border-radius: var(--radius); background: var(--bg); align-items: flex-start; } .step-number { width: 44px; height: 44px; border: 1px solid var(--fg); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; flex-shrink: 0; } .step-content h3 { font-size: 18px; margin: 0 0 8px; } .step-content p { margin: 0; } /* ---------- Tables ---------- */ .comparison-table { width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 15px; border: var(--hairline); } .comparison-table th { background: var(--fg); color: var(--bg); padding: 12px 14px; text-align: left; font-weight: 600; } /* The header row is the inverse surface, so a link inside it must take the row's colour — the global `a { color: var(--fg) }` would paint it black on black. Same for the ranked site names, which are headings, not body links. */ .comparison-table th a { color: inherit; text-underline-offset: 3px; } .comparison-table td { padding: 11px 14px; border-top: var(--hairline); color: var(--muted); } .comparison-table tr:hover td { background: var(--surface); } /* Verdict glyphs are icons now — no green/red, the shape carries the meaning. */ .check, .cross, .partial { color: var(--fg); font-weight: 700; } .cross, .partial { color: var(--faint); } /* ---------- FAQ (accordion) ---------- Pages toggle either `.open` (most landing pages, index) or `.active` (faq.html) on .faq-item. Both are honoured here so no page needs its own accordion CSS. */ .faq-section { margin-top: 44px; padding: 0; background: var(--bg); } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { border: var(--hairline); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; background: var(--bg); } .faq-question { padding: 18px 20px; font-weight: 600; font-size: 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--bg); color: var(--fg); border: 0; width: 100%; text-align: left; } .faq-question:hover { background: var(--surface); } .faq-answer { padding: 0 20px 18px; color: var(--muted); display: none; } .faq-item.open .faq-answer, .faq-item.active .faq-answer { display: block; } .faq-answer p:last-child { margin-bottom: 0; } .faq-arrow, .faq-toggle, .q-toggle { transition: transform 0.2s; color: var(--muted); display: inline-flex; align-items: center; font-size: 16px; flex-shrink: 0; } .faq-item.open .faq-arrow, .faq-item.active .faq-arrow, .faq-item.open .q-toggle, .faq-item.active .q-toggle, .faq-item.open .faq-toggle, .faq-item.active .faq-toggle { transform: rotate(180deg); } .faq-question .q-icon { width: 30px; height: 30px; border: 1px solid var(--fg); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; margin-right: 12px; flex-shrink: 0; } .faq-question .q-text { flex: 1; } .faq-answer-content { padding: 0 20px 18px 62px; color: var(--muted); font-size: 15px; } /* ---------- Site cards (best-omegle-alternatives) ---------- */ .site-card { border: var(--hairline); border-radius: var(--radius); padding: 26px; margin: 22px 0; } .site-card.featured { border-color: var(--fg); border-width: 2px; } /* Scoped to .site-card on purpose: every page also wraps its