:root { --bg: #0f1117; --surface: #1a1d27; --surface2: #242836; --border: #2e3348; --text: #e4e7f0; --text-dim: #8b90a5; --accent: #6366f1; --accent-hover: #818cf8; --accent-press: #4f52d6; --accent-ring: rgba(99,102,241,0.45); --accent-glow: rgba(99,102,241,0.15); --green: #22c55e; --green-bg: rgba(34,197,94,0.12); --green-bd: rgba(34,197,94,0.30); --red: #ef4444; --red-bg: rgba(239,68,68,0.1); --yellow: #eab308; --yellow-bg: rgba(234,179,8,0.1); --radius: 10px; --header-bg: rgba(15,17,23,0.85); /* sticky header (tokenized so it flips in light) */ --shadow-pop: 0 8px 30px rgba(0,0,0,0.45); } /* Light theme — opt-in via data-theme="light" on (dark stays default). Values from the Phase 2 design system (namizy.css), mapped onto the existing token names so every variable-driven component flips with zero markup change. Status meaning is identical; shades deepened to pass AA on white. Partner/ brand colors (registrar buttons) are intentionally NOT remapped. */ :root[data-theme="light"] { --bg: #ffffff; --surface: #f6f7f9; --surface2: #eef0f4; --border: #e2e4ea; --text: #1a1d27; --text-dim: #5c6175; --accent: #5457e6; --accent-hover: #4346cf; --accent-press: #3a3dbd; --accent-ring: rgba(84,87,230,0.40); --accent-glow: rgba(84,87,230,0.14); --green: #16a34a; --green-bg: rgba(22,163,74,0.10); --green-bd: rgba(22,163,74,0.28); --red: #dc2626; --red-bg: rgba(220,38,38,0.08); --yellow: #a16207; --yellow-bg: rgba(161,98,7,0.10); --header-bg: rgba(255,255,255,0.85); --shadow-pop: 0 8px 30px rgba(16,20,30,0.12); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } .container { max-width: 960px; margin: 0 auto; padding: 0 2rem; width: 100%; } main.container { flex: 1; padding-bottom: 3rem; } /* ─── Header / Nav ─── */ .site-header { border-bottom: 1px solid var(--border); background: var(--header-bg); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50; } .site-header .container { display: flex; align-items: center; gap: 1.5rem; padding-top: 0.7rem; padding-bottom: 0.7rem; flex-wrap: wrap; } /* Brand logo — X · The Living Name. Calm lockup is canonical: wordmark with the LED tittle on the i (indigo dot), no caret. The caret is product-only and never appears in the static nav. Uses existing --text/--accent (identical to the design system's --nz-text/--nz-accent). */ .logo { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.035em; text-decoration: none; color: var(--text); display: inline-flex; align-items: baseline; font-style: normal; } .logo__i { position: relative; display: inline-block; width: 0.15em; height: 0.5em; background: currentColor; border-radius: 0.08em; margin: 0 0.085em; font-style: normal; } .logo__i::after { content: ""; position: absolute; left: 50%; top: -0.42em; transform: translateX(-50%); width: 0.26em; height: 0.26em; border-radius: 50%; background: var(--accent); } /* The caret — the "I" half of the X blend, the name caught mid-type. Product moment only: rendered solely on the homepage logo (.logo--live), calm everywhere else. The LED dot holds steady while the caret blinks, so only one element is ever live at once. Reduced-motion shows a static caret. */ .logo__caret { display: inline-block; width: 0.09em; height: 0.92em; margin-left: 0.1em; border-radius: 0.05em; transform: translateY(0.06em); background: var(--accent); } @media (prefers-reduced-motion: no-preference) { .logo--live .logo__caret { animation: nz-blink 1.1s steps(1) infinite; } } @keyframes nz-blink { 50% { opacity: 0; } } .nav { display: flex; gap: 0.2rem; flex-wrap: wrap; } .nav a { color: var(--text-dim); text-decoration: none; font-size: 0.82rem; font-weight: 500; padding: 0.4rem 0.65rem; border-radius: 7px; transition: all 0.2s; white-space: nowrap; } .nav a:hover { color: var(--text); background: var(--surface2); } .nav a.active { background: var(--accent); color: #fff; } /* Theme toggle — user control over light/dark (H1 visibility, H3 user control). Glyph reflects the CURRENT theme; aria-label says what clicking will do. */ .theme-toggle { margin-left: auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; transition: color 0.2s, border-color 0.2s; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle__icon::before { content: "\263E"; } /* ☾ moon (dark active) */ :root[data-theme="light"] .theme-toggle__icon::before { content: "\2600"; } /* ☀ sun (light active) */ /* ─── Breadcrumb (NN/g: single line, current page distinct & not a link) ─── */ .breadcrumb { padding-top: 1rem; } .breadcrumb ol { list-style: none; display: flex; align-items: center; flex-wrap: nowrap; gap: 0.45rem; margin: 0; padding: 0; overflow: hidden; white-space: nowrap; font-size: 0.8rem; } .breadcrumb li { display: flex; align-items: center; gap: 0.45rem; min-width: 0; } .breadcrumb li + li::before { content: "\203A"; color: var(--text-dim); flex-shrink: 0; } .breadcrumb a { color: var(--accent); text-decoration: none; padding: 0.45rem 0; display: inline-block; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; } /* ─── Hero ─── */ .hero { text-align: center; padding: 2rem 0 1.5rem; } .hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; color: var(--text); /* solid, per design system (was a gradient) */ letter-spacing: -0.02em; } /* Live signature chip — "the data is live, from the registry". Green = live here, consistent with the design system's livechip. Reduced-motion safe. */ .livechip { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 0.78rem; font-weight: 600; background: var(--green-bg); border: 1px solid var(--green-bd); color: var(--green); padding: 5px 12px; border-radius: 999px; margin-bottom: 0.9rem; } .livechip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); position: relative; flex: none; } @media (prefers-reduced-motion: no-preference) { .livechip__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: nz-ping 2s ease-out infinite; } } @keyframes nz-ping { 0% { transform: scale(0.6); opacity: 0.55; } 70% { opacity: 0; } 100% { transform: scale(1); opacity: 0; } } .subtitle { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 1rem; max-width: 640px; margin-left: auto; margin-right: auto; } .hero-features { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.6rem; } .hero-feature { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-dim); } .hero-feature .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* ─── Inputs ─── */ .input-group { margin-bottom: 1rem; } .input-group label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-dim); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } input[type="text"], input[type="number"], textarea, select { padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.95rem; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; } input[type="text"], textarea { width: 100%; } select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238b90a5' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.2rem; min-width: 85px; } input[type="text"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } textarea { resize: vertical; min-height: 120px; font-family: 'SF Mono', Monaco, monospace; font-size: 0.85rem; } .btn { padding: 0.75rem 1.5rem; border: none; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--border); } /* Interactive-state parity with the design system: keyboard focus ring on all CTAs, and a press state on the primary button. */ .btn:focus-visible, .btn-aff:focus-visible, .btn-host:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn-primary:active:not(:disabled) { background: var(--accent-press); } .btn-group { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; } .input-row { display: flex; gap: 0.5rem; align-items: stretch; } .input-row input[type="text"] { flex: 1; } /* ─── TLD pills (real buttons — keyboard-operable, aria-pressed) ─── */ .tld-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.5rem; } .tld-pill { padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: 20px; font-size: 0.75rem; color: var(--text-dim); cursor: pointer; transition: all 0.2s; user-select: none; background: transparent; font-family: inherit; appearance: none; } .tld-pill:hover { border-color: var(--accent); color: var(--text); } .tld-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tld-pill.selected { background: var(--accent); color: #fff; border-color: var(--accent); } /* ─── Stats ─── */ .stats { display: flex; gap: 1rem; margin: 1.5rem 0 1rem; flex-wrap: wrap; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1.2rem; flex: 1; min-width: 100px; text-align: center; } .stat-value { font-size: 1.5rem; font-weight: 700; } .stat-label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; } .stat-available .stat-value { color: var(--green); } .stat-registered .stat-value { color: var(--red); } .stat-errors .stat-value { color: var(--yellow); } /* ─── Progress ─── */ .progress-bar { width: 100%; height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; margin: 1rem 0; display: none; } .progress-bar.active { display: block; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #a78bfa); border-radius: 2px; transition: width 0.3s; width: 0%; } /* ─── Results ─── */ .results-container { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .results-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 0.5rem; } .results-header h3 { font-size: 0.9rem; font-weight: 600; } .filter-btns { display: flex; gap: 4px; } .filter-btn { padding: 0.3rem 0.7rem; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 0.75rem; border-radius: 5px; cursor: pointer; transition: all 0.2s; } .filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } table { width: 100%; border-collapse: collapse; } th { padding: 0.6rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; background: var(--surface); border-bottom: 1px solid var(--border); } td { padding: 0.65rem 1rem; font-size: 0.88rem; border-bottom: 1px solid var(--border); } tr:last-child td { border-bottom: none; } tr:hover { background: var(--surface); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 0.2rem 0.6rem 0.2rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* status dot — inherits the variant color (design-system badge parity) */ .badge-available { background: var(--green-bg); color: var(--green); } .badge-registered { background: var(--red-bg); color: var(--red); } .badge-error { background: var(--yellow-bg); color: var(--yellow); } .time-ms { color: var(--text-dim); font-size: 0.8rem; font-family: 'SF Mono', Monaco, monospace; } /* ─── Affiliate (full registrar names; ≥44px touch targets on mobile) ─── Equal-width buttons: the three registrars are equivalent choices, so equal visual weight — size signals importance (NN/g visual hierarchy: scale). grid-auto-columns:1fr sizes every track to the widest label. */ .aff-btns { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; } .btn-aff { padding: 0.3rem 0.6rem; border: none; border-radius: 4px; font-size: 0.72rem; font-weight: 600; cursor: pointer; color: #fff; transition: opacity 0.2s; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; text-align: center; } .btn-aff:hover { opacity: 0.85; } .btn-nc { background: #f37121; } .btn-gd { background: #1bdbdb; color: #111; } .btn-dy { background: #4a90d9; } /* Indicative price line above the registrar buttons. Quiet by design (H8 minimalist): informs without competing with the green/red status or the equal-weight CTAs. "~" + month communicate that promos drift (H1). */ .aff-price { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; line-height: 1.2; cursor: help; } .aff-price-note { font-weight: 400; opacity: 0.75; } /* ─── Hosting banner (high-value CTA) ─── */ .hosting-banner { display: none; margin-top: 1rem; padding: 1rem 1.2rem; background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(167,139,250,0.08)); border: 1px solid rgba(99,102,241,0.35); border-radius: var(--radius); align-items: center; gap: 1rem; flex-wrap: wrap; } .hosting-banner.visible { display: flex; } .hosting-banner .hb-text { flex: 1; min-width: 220px; } .hosting-banner .hb-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; } .hosting-banner .hb-sub { color: var(--text-dim); font-size: 0.8rem; } .btn-host { padding: 0.5rem 1rem; border: none; border-radius: 7px; font-size: 0.8rem; font-weight: 700; cursor: pointer; color: #fff; min-width: 7.5em; text-align: center; } .btn-bluehost { background: #196bde; } .btn-hostinger { background: #673de6; } .btn-host:hover { opacity: 0.88; } /* ─── WHOIS ─── */ .whois-btn { padding: 0.15rem 0.5rem; border: 1px solid var(--border); background: transparent; color: var(--accent); font-size: 0.72rem; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .whois-btn:hover { background: var(--accent-glow); border-color: var(--accent); } .whois-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0.5rem 0; font-size: 0.82rem; line-height: 1.7; } .whois-row { display: flex; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border); } .whois-row:last-child { border-bottom: none; } .whois-label { color: var(--text-dim); font-weight: 500; min-width: 130px; flex-shrink: 0; font-size: 0.8rem; } .whois-value { color: var(--text); word-break: break-all; font-size: 0.8rem; } /* ─── Social ─── */ .social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; margin-top: 1rem; } .social-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; transition: border-color 0.2s; } .social-card:hover { border-color: var(--accent); } .social-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; } .social-platform { font-weight: 600; font-size: 0.88rem; text-transform: capitalize; } .social-status { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; } .social-status.available { background: var(--green-bg); color: var(--green); } .social-status.taken { background: var(--red-bg); color: var(--red); } .social-status.error { background: var(--yellow-bg); color: var(--yellow); } .social-url { font-size: 0.78rem; color: var(--text-dim); word-break: break-all; } .social-url a { color: var(--accent); text-decoration: none; } .social-url a:hover { text-decoration: underline; } .method-badge { font-size: 0.65rem; padding: 0.1rem 0.35rem; border-radius: 3px; background: var(--surface2); color: var(--text-dim); margin-left: 4px; vertical-align: middle; } .info-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 2rem; font-size: 0.82rem; color: var(--text-dim); line-height: 1.6; } .info-box strong { color: var(--text); } .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .chip-container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.5rem; } .chip { padding: 0.3rem 0.6rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; font-size: 0.78rem; color: var(--text-dim); font-family: 'SF Mono', Monaco, monospace; } .chip-count { padding: 0.3rem 0.6rem; background: var(--accent); color: #fff; border-radius: 5px; font-size: 0.78rem; font-weight: 600; } /* ─── SEO content / prose ─── */ .prose { margin-top: 3rem; line-height: 1.75; font-size: 0.92rem; color: var(--text-dim); } .prose h2 { color: var(--text); font-size: 1.25rem; margin: 2rem 0 0.75rem; } .prose h3 { color: var(--text); font-size: 1.05rem; margin: 1.5rem 0 0.5rem; } .prose p { margin-bottom: 0.9rem; } .prose a { color: var(--accent); text-decoration: none; } .prose a:hover { text-decoration: underline; } .prose ul, .prose ol { margin: 0 0 0.9rem 1.4rem; } .prose li { margin-bottom: 0.35rem; } .prose strong { color: var(--text); } /* ─── FAQ ─── */ .faq { margin-top: 2rem; } .faq h2 { color: var(--text); font-size: 1.25rem; margin-bottom: 1rem; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.5rem; } .faq summary { padding: 0.85rem 1.1rem; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text); } .faq details p { padding: 0 1.1rem 0.9rem; color: var(--text-dim); font-size: 0.87rem; line-height: 1.65; } /* ─── Footer ─── */ .site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding: 2rem 0; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; } .footer-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 0.6rem; } .footer-col a { display: block; color: var(--text-dim); text-decoration: none; font-size: 0.84rem; padding: 0.18rem 0; } .footer-col a:hover { color: var(--text); } .footer-bottom { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.78rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } /* ─── Inline validation & notices (NN/g H5/H9) ─── */ .input-error, input.input-error, textarea.input-error { border-color: var(--red) !important; } .input-hint { color: var(--red); font-size: 0.8rem; margin-top: 0.4rem; line-height: 1.5; } .input-hint[hidden] { display: none; } .notice-empty { padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); font-size: 0.85rem; } .notice-error { margin-top: 1rem; padding: 0.8rem 1rem; background: var(--red-bg); border: 1px solid rgba(239,68,68,0.25); border-radius: var(--radius); color: var(--red); font-size: 0.85rem; line-height: 1.5; } /* ─── Recent searches (H6/H7) ─── */ .recent-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 0.6rem; } .recent-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .chip-click { cursor: pointer; transition: all 0.15s; font-family: 'SF Mono', Monaco, monospace; } button.chip { appearance: none; } .chip-click:hover { border-color: var(--accent); color: var(--text); } /* ─── Stop control (H3) ─── */ .btn-stop { padding: 0.45rem 0.9rem; font-size: 0.8rem; } .btn-stop[hidden] { display: none; } /* ─── Name-ideas candidate grid ─── */ .name-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.6rem; } .name-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.9rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .name-card .name-text { font-family: 'SF Mono', Monaco, monospace; font-size: 0.85rem; flex: 1; min-width: 0; word-break: break-all; } .name-status { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.18rem 0.5rem; border-radius: 4px; background: var(--surface2); color: var(--text-dim); } .name-status[data-status="available"] { background: var(--green-bg); color: var(--green); } .name-status[data-status="taken"] { background: var(--red-bg); color: var(--red); } .name-status[data-status="checking"] { background: var(--yellow-bg); color: var(--yellow); } .name-card:has(.name-status[data-status="available"]) { border-color: rgba(34,197,94,0.45); } /* ─── BrandScore ─── */ .bscore { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; padding: 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .bscore-dial { --pct: 0; --ring: var(--accent); width: 108px; height: 108px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--surface2) 0); position: relative; } .bscore-dial::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); } .bscore-num { position: relative; font-size: 2.1rem; font-weight: 800; color: var(--text); line-height: 1; } .bscore-grade { position: relative; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; } .bscore-strong { color: var(--green); } .bscore-decent { color: var(--accent); } .bscore-crowded { color: var(--yellow); } .bscore-tough { color: var(--red); } .bscore-parts { display: flex; flex-direction: column; gap: 0.45rem; flex: 1; min-width: 200px; } .bscore-part { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-dim); border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; } .bscore-part b { color: var(--text); font-variant-numeric: tabular-nums; } .bscore-h { font-size: 0.95rem; margin: 1.3rem 0 0.5rem; } .bscore-h-sub { font-weight: 400; color: var(--text-dim); font-size: 0.8rem; } .bscore-doms { display: grid; gap: 0.5rem; } .bscore-dom { padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .bscore-dom.is-available { border-color: var(--green-bd, rgba(34,197,94,0.3)); } .bscore-dom.is-taken { opacity: 0.62; } .bscore-dom-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; } .bscore-dom-name { font-family: 'SF Mono', Monaco, monospace; font-size: 0.9rem; color: var(--text); } .bscore-social { display: flex; flex-wrap: wrap; gap: 0.4rem; } .bscore-chip { font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px; text-decoration: none; border: 1px solid var(--border); } .bscore-chip.bscore-available { color: var(--green); border-color: var(--green-bd, rgba(34,197,94,0.3)); background: var(--green-bg); } .bscore-chip.bscore-taken { color: var(--text-dim); } .bscore-chip.bscore-error { color: var(--yellow); } .bscore-note { font-size: 0.78rem; color: var(--text-dim); margin-top: 1rem; line-height: 1.5; } .name-card:has(.name-status[data-status="taken"]) { opacity: 0.55; } /* ─── Cookie consent ─── */ .consent-banner { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); width: min(640px, calc(100% - 2rem)); z-index: 100; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; box-shadow: 0 8px 30px rgba(0,0,0,0.45); } /* Author display:flex beats the UA [hidden]{display:none} — without this override the banner stays visible after consent and the buttons appear dead (handlers are not re-attached once nmz_consent is stored). */ .consent-banner[hidden] { display: none; } .consent-banner p { font-size: 0.82rem; color: var(--text-dim); flex: 1; min-width: 220px; margin: 0; } .consent-banner a { color: var(--accent); } .consent-actions { display: flex; gap: 0.5rem; } .consent-actions .btn { padding: 0.5rem 1rem; font-size: 0.8rem; } @media (max-width: 640px) { .container { padding: 0 1rem; } .hero h1 { font-size: 1.5rem; } .stats { gap: 0.5rem; } .stat { min-width: 70px; padding: 0.5rem 0.6rem; } td, th { padding: 0.5rem; font-size: 0.8rem; } /* NN/g touch-target guidance: ≥ ~44px interactive height on touch screens. auto-fit + minmax keeps columns equal while allowing wrap on narrow screens. */ .aff-btns { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin-top: 4px; } .btn-aff { padding: 0.7rem 0.9rem; font-size: 0.8rem; min-height: 44px; } .btn-host { min-height: 44px; } .tld-pill { padding: 0.55rem 0.8rem; min-height: 40px; } .social-grid { grid-template-columns: 1fr; } .input-row { flex-direction: column; } }