/* Handle styles Clean, modern, rounded sans-serif (Poppins / Inter / Quicksand family). Single source of truth for every page; each page sets a attribute so we can scope per-page tweaks without bloating the cascade. */ :root { --bg: #fafaf7; --bg-elev: #ffffff; --ink: #18181b; --ink-soft: #4b4b53; --ink-mute: #8a8a93; --line: #ececf0; --line-strong: #d6d6dc; --brand: #ff2d55; --brand-soft: #fff0f3; --accent: #111114; --good: #137a3f; --good-bg: #e6f6ec; --bad: #b42318; --bad-bg: #fde7e5; --warn: #92590f; --warn-bg: #fff5e0; --radius: 14px; --radius-lg: 22px; --shadow: 0 1px 2px rgba(20,20,30,.04), 0 12px 32px -12px rgba(20,20,30,.08); --font: 'Quicksand', 'Poppins', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* --- Top nav ---------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); } .topbar-inner { max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 22px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; font-size: 18px; color: var(--ink); } .brand .mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; } .nav { margin-left: auto; display: flex; gap: 4px; } .nav a { padding: 8px 12px; border-radius: 10px; color: var(--ink-soft); font-weight: 600; font-size: 14px; } .nav a:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; } .nav a.is-active { background: var(--accent); color: #fff; } .nav a.is-active:hover { background: var(--accent); color: #fff; } .nav-cta { background: var(--accent); color: #fff; padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; } .nav-cta:hover { background: #000; text-decoration: none; color: #fff; } /* --- Language switcher ----------------------------------------------------- */ /* A small
-based dropdown that lists every supported language. Each option is a real link to /xx/ (or / for English) so it works without JavaScript, crawlers can follow it, and the URL structure stays SEO-friendly (one URL per language). The current language is not a link — it's a non-clickable label so the user can see where they are. CSS-only, no router changes. */ .lang-switch { position: relative; margin-left: 8px; } .lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line-strong); color: var(--ink-soft); font-weight: 600; font-size: 13px; user-select: none; font-family: inherit; } .lang-switch > summary::-webkit-details-marker { display: none; } .lang-switch > summary::marker { content: ''; } .lang-switch > summary:hover { border-color: var(--brand); color: var(--brand); } .lang-switch[open] > summary { background: var(--brand); color: #fff; border-color: var(--brand); } .lang-switch__globe { font-size: 14px; line-height: 1; } .lang-switch__current { letter-spacing: 0.04em; } .lang-switch__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; max-height: 380px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .lang-switch__menu a { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 13px; text-decoration: none; gap: 8px; } .lang-switch__menu a:hover { background: var(--brand-soft); color: var(--brand); } .lang-native { font-weight: 600; } .lang-en { font-size: 11px; color: var(--ink-mute); } @media (max-width: 720px) { .lang-switch__menu { grid-template-columns: 1fr; min-width: 200px; } .lang-switch { margin-left: 4px; } /* Shrink the CTA on narrow screens so the lang-switch doesn't get pushed off */ .nav-cta { padding: 8px 10px; font-size: 13px; white-space: nowrap; } .topbar-inner { gap: 10px; padding: 12px 14px; } .nav { gap: 2px; } .nav a { padding: 8px 8px; font-size: 13px; } } @media (max-width: 480px) { /* On very narrow screens, reduce nav padding more so the lang-switch is always accessible. */ .topbar-inner { gap: 6px; padding: 10px 10px; } .nav a { padding: 6px 6px; font-size: 12px; } .nav-cta { padding: 7px 8px; font-size: 12px; } .lang-switch { margin-left: 2px; } .lang-switch > summary { padding: 6px 8px; font-size: 12px; } .lang-switch__menu { right: 0; min-width: 220px; max-height: 70vh; } } /* --- Layout ----------------------------------------------------------------- */ main { max-width: 1100px; margin: 0 auto; padding: 32px 20px 96px; } h1, h2, h3, h4 { letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); } h1 { font-size: clamp(32px, 4.6vw, 52px); margin: 0 0 16px; } h2 { font-size: clamp(24px, 3vw, 32px); margin: 56px 0 14px; } h3 { font-size: 19px; margin: 28px 0 8px; } p { color: var(--ink-soft); margin: 0 0 14px; } .lede { font-size: 19px; color: var(--ink-soft); max-width: 64ch; } .hero { padding: 32px 0 8px; } .hero p { font-size: 18px; } /* "Not affiliated with TikTok" disclaimer. Sits directly below the hero CTAs on home and at the top of the generator section, so the affiliation status is impossible to miss on the two pages most likely to mislead a casual reader. */ .affiliation-note { margin-top: 14px; font-size: 12px; color: var(--ink-mute); max-width: 64ch; line-height: 1.5; } /* --- Generator -------------------------------------------------------------- */ .tool { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); margin-top: 28px; } .field { display: block; margin-bottom: 18px; } .field > label { display: block; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 8px; } .field > .help { display: block; font-size: 13px; color: var(--ink-mute); margin-top: 6px; } input[type=text], select { width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s; } input[type=text]:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .row { grid-template-columns: 1fr; } } .vibes { display: flex; flex-wrap: wrap; gap: 8px; } .vibe-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-soft); background: #fff; cursor: pointer; user-select: none; } .vibe-chip:hover { border-color: var(--brand); color: var(--brand); } .vibe-chip.is-active { background: var(--brand); color: #fff; border-color: var(--brand); } /* Mode switches (none / random / unique) — visually a different animal from the themed vibes so the user reads "this changes how names are picked" rather than "this is another vibe word". Outlined when active instead of filled, with a different accent. */ .vibe-chip-mode { border-style: dashed; color: var(--ink-mute); } .vibe-chip-mode:hover { border-color: var(--accent); color: var(--accent); border-style: solid; } .vibe-chip-mode.is-active { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); border-style: solid; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; border: 0; border-radius: 12px; padding: 12px 18px; cursor: pointer; font-family: inherit; transition: transform .08s, background .15s; } .btn-primary:hover { background: #e61e48; } .btn-primary:active { transform: translateY(1px); } .btn-primary:disabled { background: #f0a8b3; cursor: not-allowed; } .btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 14px; cursor: pointer; font-family: inherit; } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } /* Smaller variant used inside result rows so the primary CTA doesn't balloon the row height. Same color, same weight, just compact. */ .btn-sm { font-size: 13px; padding: 7px 12px; border-radius: 9px; } .btn-primary.btn-sm { font-weight: 700; } /* Inline "Free · no signup · no limit" tag in the toolbar. Subtle — shouldn't compete with the Generate button, but it must be visible without squinting. */ .free-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--good); background: var(--good-bg); padding: 5px 10px; border-radius: 999px; letter-spacing: 0.01em; } .free-tag::before { content: "✓"; font-weight: 700; } /* --- Results ---------------------------------------------------------------- */ .results { margin-top: 14px; display: grid; gap: 10px; } /* Top-of-results summary line ("12 names — 4 likely available · 3 likely taken · 5 unknown"). Calm, low-emphasis — the rows below carry the actionable weight, not this line. */ .results-summary { margin-top: 18px; font-size: 13px; color: var(--ink-soft); font-weight: 500; } .result { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s; } .result:hover { border-color: var(--line-strong); } .result .handle { flex: 1; font-weight: 700; font-size: 16px; color: var(--ink); word-break: break-all; min-width: 0; } .result .meta { font-size: 12px; color: var(--ink-mute); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .result .actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } /* Compact per-row status. Small text + a small dot — not a pill. The primary CTA (Open on TikTok) is the loud element on the row; the status is information, not action. */ .status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-mute); white-space: nowrap; flex-shrink: 0; } .status .dot { width: 7px; height: 7px; border-radius: 50%; } .status-available { color: var(--good); } .status-available .dot { background: var(--good); } .status-taken { color: var(--bad); } .status-taken .dot { background: var(--bad); } .status-unverified .dot { background: var(--ink-mute); } .status-pending { color: var(--ink-mute); } .status-pending .dot { background: var(--ink-mute); animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } .result.is-checking { opacity: 0.7; } .toolbar { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .toolbar .spacer { flex: 1; } .disclaimer { margin-top: 14px; padding: 12px 14px; background: #fffaf0; border: 1px solid #f0e2b0; border-radius: 10px; font-size: 13px; color: var(--warn); } /* --- Sections / FAQ / About ------------------------------------------------- */ .section { margin-top: 56px; } .section p, .section li { color: var(--ink-soft); } .section ul { padding-left: 20px; } .faq-item { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px; } .faq-item h3 { margin: 0 0 6px; font-size: 17px; } .faq-item p { margin: 0; } .callout { background: var(--brand-soft); border: 1px solid #ffd5dd; border-radius: var(--radius); padding: 18px 20px; margin: 22px 0; } .callout h3 { margin-top: 0; color: var(--brand); } /* --- Footer ----------------------------------------------------------------- */ footer { border-top: 1px solid var(--line); background: #fff; margin-top: 80px; } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 28px 20px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 13px; color: var(--ink-mute); } .footer-inner a { color: var(--ink-soft); } .footer-inner .spacer { flex: 1; } /* Second row of the footer: the legal disclaimer text. Kept separate from the link row so it can wrap independently and never crowd. */ .footer-legal { max-width: 1100px; margin: 0 auto; padding: 0 20px 24px; font-size: 12px; color: var(--ink-mute); line-height: 1.5; } /* --- Font converter --------------------------------------------------------- */ .font-converter { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); margin-top: 22px; } .font-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; } .font-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; } .font-row .name { width: 110px; font-size: 13px; color: var(--ink-mute); } .font-row .sample { flex: 1; font-size: 22px; word-break: break-all; } /* --- Skip link / a11y ------------------------------------------------------- */ .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; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } /* --- SPA section visibility ------------------------------------------------- */ /* Sections are hidden by default. The router sets body[data-route] to one of "home" | "generator" | "faq" | "about" and the matching section becomes visible. A short fade keeps the swap from feeling jarring. */ [data-page-section] { display: none; } body[data-route="home"] [data-page-section="home"], body[data-route="generator"] [data-page-section="generator"], body[data-route="faq"] [data-page-section="faq"], body[data-route="about"] [data-page-section="about"], body[data-route="privacy"] [data-page-section="privacy"], body[data-route="terms"] [data-page-section="terms"], body[data-route="404"] [data-page-section="404"] { display: block; animation: pageFade 180ms ease-out; } @keyframes pageFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* --- Suppress platform-injected "Created by MiniMax Agent" floating ball ----- The static deploy platform appends a floating attribution UI to the served HTML. We don't control that injection from our source. The cleanest move is to make it invisible: hide the element with CSS, and let consent.js actually remove it from the DOM (belt and suspenders). We do NOT touch the accompanying analytics script — that's a platform-level telemetry concern, separate from the visible attribution. The local Node build doesn't have this injection at all, so these rules are no-ops there. */ #minimax-floating-ball, [class*="minimax-"] { display: none !important; } /* --- Cookie consent banner --------------------------------------------------- */ .cookie-consent { position: fixed; left: 14px; right: 14px; bottom: 14px; max-width: 720px; margin: 0 auto; z-index: 9998; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(20,20,30,.18); padding: 12px 16px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ink-soft); animation: cookieSlideUp 220ms ease-out; } @keyframes cookieSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .cookie-consent__text { flex: 1; min-width: 0; line-height: 1.5; } .cookie-consent__text a { color: var(--brand); font-weight: 600; } .cookie-consent__text a:hover { text-decoration: underline; } .cookie-consent__btn { flex-shrink: 0; display: inline-flex; align-items: center; background: var(--brand); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; border: 0; border-radius: 10px; padding: 8px 16px; cursor: pointer; transition: background .15s; } .cookie-consent__btn:hover { background: #e61e48; } .cookie-consent__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } @media (max-width: 520px) { .cookie-consent { flex-direction: column; align-items: stretch; gap: 10px; } .cookie-consent__btn { width: 100%; justify-content: center; } } /* =========================================================================== RTL (right-to-left) overrides for Arabic (ar) and Urdu (ur) =========================================================================== When the document has dir="rtl", flip horizontal margins, paddings, and floats. We use logical properties (margin-inline-start, padding-inline-end) where modern browsers support them, and explicit overrides for older declarations (margin-left, margin-right, float). =========================================================================== */ html[dir="rtl"] body { text-align: right; } /* Nav: flip margin-left:auto to margin-right:auto so the menu hugs the left in RTL (and the brand hugs the right) */ html[dir="rtl"] .nav { margin-left: 0; margin-right: auto; } /* Topbar inner: keep gap direction-neutral (gap is symmetric) */ /* Hero toolbar: the two CTA buttons sit side-by-side; flip margin so the primary button hugs the right edge in RTL */ html[dir="rtl"] .hero .toolbar { justify-content: flex-end; } /* Toolbar/button gap direction-neutral already; just align content to start (right in RTL) */ html[dir="rtl"] .lede, html[dir="rtl"] p, html[dir="rtl"] li { text-align: right; } /* Form labels: in RTL, labels sit on the right of inputs (default) */ /* Generator chip/vibe row: in LTR, the labels read left→right; in RTL, read right→left. The flex layout naturally handles this if we ensure the container's direction is rtl (it inherits from ). */ /* Inline list bullets in