/* Domain Scout styles - Material Design inspired, same design system as Site Manager (shared token names/structure, `--ds-` prefix instead of `--sm-`), so the two dashboards feel like one product family. */ :root { color-scheme: light dark; --ds-primary: #1a56db; --ds-primary-hover: #1e3a8a; --ds-primary-dark: #1e3a8a; --ds-on-primary: #ffffff; --ds-surface: #ffffff; --ds-background: #f3f4f6; --ds-text: #111827; --ds-text-muted: #4b5563; --ds-border: #d1d5db; --ds-error: #b91c1c; --ds-error-bg: #fef2f2; --ds-success: #065f46; --ds-success-bg: #ecfdf5; --ds-info: #1e3a8a; --ds-info-bg: #eff6ff; --ds-warning: #92400e; --ds-warning-bg: #fef3c7; --ds-focus-ring: #f59e0b; --ds-radius: 8px; --ds-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06); --ds-ai: #6c5ce7; --ds-fintech: #0984e3; --ds-greentech: #00b894; --ds-other: #636e72; /* Public marketing site only - a richer, more distinctive accent than the admin dashboard's plain corporate blue above. Additive tokens, not a replacement for --ds-primary etc., so the admin dashboard is completely unaffected. */ --ds-brand-1: #4338ca; --ds-brand-2: #7c3aed; --ds-brand-3: #db2777; --ds-brand-gradient: linear-gradient(135deg, var(--ds-brand-1) 0%, var(--ds-brand-2) 55%, var(--ds-brand-3) 100%); --ds-brand-on-gradient: #ffffff; } @media (prefers-color-scheme: dark) { :root { --ds-primary: #3b6fd4; --ds-primary-hover: #2f5db8; --ds-primary-dark: #7db0ff; --ds-on-primary: #ffffff; --ds-surface: #1a212c; --ds-background: #10141c; --ds-text: #e5e7eb; --ds-text-muted: #9aa4b2; --ds-border: #647694; --ds-error: #f87171; --ds-error-bg: #3f1d1d; --ds-success: #34d399; --ds-success-bg: #14332a; --ds-info: #7db0ff; --ds-info-bg: #1c2a45; --ds-warning: #fbbf24; --ds-warning-bg: #3f2f0a; --ds-focus-ring: #fbbf24; --ds-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); } } /* Manual override (theme-toggle button stamps data-theme on , see main.js) - always wins over the media query above via specificity. */ :root[data-theme="light"] { color-scheme: light; --ds-primary: #1a56db; --ds-primary-hover: #1e3a8a; --ds-primary-dark: #1e3a8a; --ds-on-primary: #ffffff; --ds-surface: #ffffff; --ds-background: #f3f4f6; --ds-text: #111827; --ds-text-muted: #4b5563; --ds-border: #d1d5db; --ds-error: #b91c1c; --ds-error-bg: #fef2f2; --ds-success: #065f46; --ds-success-bg: #ecfdf5; --ds-info: #1e3a8a; --ds-info-bg: #eff6ff; --ds-warning: #92400e; --ds-warning-bg: #fef3c7; --ds-focus-ring: #f59e0b; --ds-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06); } :root[data-theme="dark"] { color-scheme: dark; --ds-primary: #3b6fd4; --ds-primary-hover: #2f5db8; --ds-primary-dark: #7db0ff; --ds-on-primary: #ffffff; --ds-surface: #1a212c; --ds-background: #10141c; --ds-text: #e5e7eb; --ds-text-muted: #9aa4b2; --ds-border: #647694; --ds-error: #f87171; --ds-error-bg: #3f1d1d; --ds-success: #34d399; --ds-success-bg: #14332a; --ds-info: #7db0ff; --ds-info-bg: #1c2a45; --ds-warning: #fbbf24; --ds-warning-bg: #3f2f0a; --ds-focus-ring: #fbbf24; --ds-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } html, body { overflow-x: hidden; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--ds-background); color: var(--ds-text); line-height: 1.5; } a { color: var(--ds-primary-dark); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ds-primary); color: var(--ds-on-primary); padding: 0.75rem 1rem; z-index: 100; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } :focus-visible { outline: 3px solid var(--ds-focus-ring); outline-offset: 2px; } /* --- Auth page (login) -------------------------------------------------- */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .auth-card { background: var(--ds-surface); border-radius: var(--ds-radius); box-shadow: var(--ds-elevation-1); padding: 2rem; width: 100%; max-width: 26rem; } .auth-card h1 { margin-top: 0; font-size: 1.5rem; } .auth-page-toggle { position: fixed; top: 1rem; right: 1rem; } /* --- Forms ---------------------------------------------------------------- */ .field { margin-bottom: 1.25rem; } .field label { display: block; font-weight: 600; margin-bottom: 0.35rem; } .field input, .field textarea, .field select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); font-size: 1rem; font-family: inherit; background: var(--ds-surface); color: var(--ds-text); } .field .error-text, .error-text { color: var(--ds-error); font-size: 0.875rem; margin-top: 0.35rem; } .field-status { font-weight: 400; font-size: 0.8rem; color: var(--ds-text-muted); } .field-status--set { color: var(--ds-success); } .button { display: inline-block; background: var(--ds-primary); color: var(--ds-on-primary); border: none; border-radius: var(--ds-radius); padding: 0.65rem 1.25rem; font-size: 1rem; font-weight: 600; cursor: pointer; } .button:hover { background: var(--ds-primary-hover); } .button:disabled { opacity: 0.6; cursor: not-allowed; } .button:disabled:hover { background: var(--ds-primary); } .button--secondary { background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border); } .button--secondary:hover { background: var(--ds-background); } .flash-list { list-style: none; margin: 0 0 1.25rem; padding: 0; } .flash { border-radius: var(--ds-radius); padding: 0.75rem 1rem; margin-bottom: 0.5rem; } .flash--error { background: var(--ds-error-bg); color: var(--ds-error); } .flash--info { background: var(--ds-info-bg); color: var(--ds-info); } .flash--success { background: var(--ds-success-bg); color: var(--ds-success); } /* --- App shell (dashboard) ------------------------------------------------ */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .app-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); padding: 0.85rem 1.5rem; } .app-header__brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.1rem; color: var(--ds-text); text-decoration: none; } .app-header__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; flex: 1; min-width: 0; } .app-header__nav a { text-decoration: none; color: var(--ds-text-muted); padding: 0.4rem 0.1rem; border-bottom: 2px solid transparent; } .app-header__nav a[aria-current="page"] { color: var(--ds-text); border-bottom-color: var(--ds-primary); font-weight: 600; } .app-header__actions { display: flex; align-items: center; gap: 0.85rem; } .app-header__logout { color: var(--ds-text-muted); text-decoration: none; } .app-header__logout:hover { color: var(--ds-text); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--ds-border); border-radius: 999px; background: var(--ds-surface); color: var(--ds-text-muted); cursor: pointer; } .theme-toggle:hover { background: var(--ds-background); color: var(--ds-text); } .theme-toggle svg { width: 1.15rem; height: 1.15rem; } .theme-toggle--to-dark { display: inline-flex; } .theme-toggle--to-light { display: none; } @media (prefers-color-scheme: dark) { .theme-toggle--to-dark { display: none; } .theme-toggle--to-light { display: inline-flex; } } :root[data-theme="light"] .theme-toggle--to-dark { display: inline-flex; } :root[data-theme="light"] .theme-toggle--to-light { display: none; } :root[data-theme="dark"] .theme-toggle--to-dark { display: none; } :root[data-theme="dark"] .theme-toggle--to-light { display: inline-flex; } .app-main { flex: 1; padding: 2rem 1.5rem; max-width: 72rem; width: 100%; margin: 0 auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .page-header h1 { margin: 0 0 .2rem; font-size: 1.4rem; } .page-header .subtitle { margin: 0; } .subtitle { color: var(--ds-text-muted); } .run-stats { color: var(--ds-text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; } /* An import actively running - deliberately loud (red, bold) rather than the muted .run-stats tone above, so it's obvious at a glance that something is in progress and the Process button is disabled because of it, not because of an error. */ .progress-notice { display: flex; align-items: center; gap: .6rem; color: var(--ds-error); font-weight: 700; font-size: 0.95rem; margin-bottom: 1.25rem; padding: .75rem 1rem; background: var(--ds-error-bg); border-radius: var(--ds-radius); } .progress-notice__dot { width: .55rem; height: .55rem; border-radius: 999px; background: var(--ds-error); flex: none; animation: progress-notice-pulse 1.2s ease-in-out infinite; } @keyframes progress-notice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .card { background: var(--ds-surface); border-radius: var(--ds-radius); box-shadow: var(--ds-elevation-1); padding: 1.25rem; margin-bottom: 1.25rem; } .card h2 { margin-top: 0; font-size: 1.1rem; } .table-scroll { overflow-x: auto; border-radius: var(--ds-radius); margin-bottom: 1rem; } table { width: 100%; min-width: 32rem; border-collapse: collapse; background: var(--ds-surface); border-radius: var(--ds-radius); } th, td { text-align: left; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--ds-border); vertical-align: top; } th { background: var(--ds-background); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ds-text-muted); } .domain-cell { font-weight: 600; } .score { font-weight: 700; font-size: 1.1em; } .reasoning { color: var(--ds-text-muted); font-size: 0.85em; max-width: 30em; } .tag, .badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } .tag { color: #fff; text-transform: uppercase; font-size: .75em; } .tag--ai { background: var(--ds-ai); } .tag--fintech { background: var(--ds-fintech); } .tag--greentech { background: var(--ds-greentech); } .tag--other { background: var(--ds-other); } .badge--success, .status-pill--success { background: var(--ds-success-bg); color: var(--ds-success); } .badge--pending, .status-pill--pending { background: var(--ds-background); color: var(--ds-text-muted); } .badge--failed, .status-pill--failed { background: var(--ds-error-bg); color: var(--ds-error); } .badge-flag { color: var(--ds-error); font-size: 0.8em; font-weight: 600; } .inline-form { display: inline-flex; gap: .4rem; align-items: center; } .inline-form input[type=text] { width: 8em; padding: .35rem .5rem; border-radius: var(--ds-radius); border: 1px solid var(--ds-border); background: var(--ds-surface); color: var(--ds-text); } .empty-state { color: var(--ds-text-muted); padding: 2rem 0; text-align: center; } /* --- Public marketplace ---------------------------------------------------- */ .marketplace-header { text-align: center; padding: 2.5rem 0 1.5rem; } .marketplace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .domain-card { display: block; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .domain-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ds-brand-gradient); opacity: 0; transition: opacity 0.15s ease; } .domain-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(76, 29, 149, 0.35); } .domain-card:hover::before { opacity: 1; } .domain-card h2 { margin: .75rem 0 0; font-size: 1.15rem; } .domain-card__price { font-size: 1.5rem; font-weight: 800; margin: .35rem 0 0; background: var(--ds-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .domain-card dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: .75rem 0 0; font-size: .85em; } .domain-card dt { color: var(--ds-text-muted); } .domain-card dd { margin: 0; } /* --- Public domain detail page ---------------------------------------------- */ .domain-detail { max-width: 40rem; margin: 0 auto; padding: 1.5rem 0; } .domain-detail__header { text-align: center; padding: 1.5rem 0; } .domain-detail__header h1 { margin: .5rem 0; font-size: 2.25rem; letter-spacing: -0.01em; word-break: break-word; } .domain-detail__price { font-size: 2.5rem; font-weight: 800; margin: 0; display: inline-block; background: var(--ds-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .domain-detail__facts { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: 1.25rem; margin-bottom: 1.5rem; } .domain-detail__facts dt { color: var(--ds-text-muted); } .domain-detail__facts dd { margin: 0; font-weight: 600; } .domain-detail__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .button--buy { background: var(--ds-success); } .button--buy:hover { filter: brightness(0.9); } /* --- Public marketing site (Dommmain) -------------------------------------- Separate visual register from the admin dashboard above: a bigger type scale, more breathing room, a persistent header/footer. Reuses the same --ds-* tokens (so dark/light theming keeps working with zero duplication) but nothing here is referenced by the admin pages, so there's no risk of bleed into the dashboard's plainer look. */ .site { min-height: 100vh; display: flex; flex-direction: column; } .site-header { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); } .site-header__inner { max-width: 72rem; margin: 0 auto; padding: 1.1rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; } .site-header__brand { font-weight: 800; font-size: 1.4rem; letter-spacing: -0.01em; background: var(--ds-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; } .site-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.35rem; flex: 1; min-width: 0; } .site-nav a { text-decoration: none; color: var(--ds-text-muted); font-weight: 600; font-size: 0.95rem; padding: 0.3rem 0.1rem; border-bottom: 2px solid transparent; } .site-nav a:hover { color: var(--ds-text); } .site-header__actions { display: flex; align-items: center; } .site-main { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; width: 100%; } .site-footer { margin-top: auto; background: var(--ds-surface); border-top: 1px solid var(--ds-border); padding: 2.5rem 1.5rem 1.5rem; } .site-footer__inner { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; } .site-footer__brand p { color: var(--ds-text-muted); margin: 0.25rem 0 0; font-size: 0.9rem; } .site-footer__links { display: flex; flex-direction: column; gap: 0.5rem; } .site-footer__links a, .site-footer__contact a { color: var(--ds-text-muted); text-decoration: none; font-size: 0.9rem; } .site-footer__links a:hover, .site-footer__contact a:hover { color: var(--ds-text); text-decoration: underline; } .site-footer__copyright { max-width: 72rem; margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--ds-border); color: var(--ds-text-muted); font-size: 0.8rem; } /* --- Hero -------------------------------------------------------------------- A bold gradient "hero card" carries the visual weight instead of a generated illustration - fully art-directable, guaranteed to fill the frame, and reads as a deliberate brand choice rather than stock/AI art. */ .hero { position: relative; isolation: isolate; overflow: hidden; border-radius: calc(var(--ds-radius) * 3); background: var(--ds-brand-gradient); padding: 4.5rem 3rem; margin: 1rem 0 3.5rem; box-shadow: 0 20px 50px -20px rgba(76, 29, 149, 0.5); } .hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse 60% 100% at 100% 0%, black, transparent 70%); mask-image: radial-gradient(ellipse 60% 100% at 100% 0%, black, transparent 70%); z-index: -1; } .hero::after { content: ""; position: absolute; top: -25%; right: -8%; width: 32rem; height: 32rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 72%); z-index: -1; } .hero__content { max-width: 38rem; } .hero__eyebrow { display: inline-block; color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 1.25rem; } .hero h1 { font-size: 3.1rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1.1rem; color: #fff; } .hero__subtitle { font-size: 1.2rem; color: rgba(255, 255, 255, 0.9); margin: 0 0 2rem; max-width: 34rem; } .hero__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 2rem; } .hero .button { background: #fff; color: var(--ds-brand-1); } .hero .button:hover { background: rgba(255, 255, 255, 0.9); } .hero .button--secondary { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); } .hero .button--secondary:hover { background: rgba(255, 255, 255, 0.22); } .hero .trust-bullets li { color: rgba(255, 255, 255, 0.92); } .hero .trust-bullets li::before { color: #fff; } .trust-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .trust-bullets li { padding-left: 1.6rem; position: relative; color: var(--ds-text-muted); font-size: 0.95rem; } .trust-bullets li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ds-success); font-weight: 700; } .button--large { padding: 0.85rem 1.75rem; font-size: 1.05rem; border-radius: calc(var(--ds-radius) * 1.1); } @media (max-width: 40rem) { .hero { padding: 3rem 1.5rem; } .hero h1 { font-size: 2.25rem; } } /* --- How-it-works step lists ------------------------------------------------ */ .process-teaser { padding: 1rem 0 3.5rem; text-align: center; } .process-teaser h2 { font-size: 1.75rem; margin-bottom: 2rem; } .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.75rem; } .steps__item { text-align: center; } .steps__number { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--ds-brand-gradient); color: #fff; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.85rem; box-shadow: 0 8px 18px -6px rgba(124, 58, 237, 0.5); } .steps__item h2, .steps__item h3 { margin: 0 0 0.5rem; font-size: 1.15rem; } .steps__item p { color: var(--ds-text-muted); margin: 0; } .steps--compact .steps__item p { display: none; } .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; max-width: 42rem; margin: 0 auto 2.5rem; } .stat-strip__item { text-align: center; padding: 1.25rem 1rem; border-radius: var(--ds-radius); background: var(--ds-surface); border: 1px solid var(--ds-border); font-size: 0.85rem; color: var(--ds-text-muted); } .stat-strip__number { display: block; font-size: 2rem; font-weight: 800; background: var(--ds-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.15rem; } /* --- Long-form content pages (About, Privacy, Terms) ------------------------ */ .page-intro { text-align: center; padding: 1rem 0 2.5rem; } .page-intro h1 { font-size: 2.25rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; } .lede { font-size: 1.1rem; color: var(--ds-text-muted); max-width: 38rem; margin: 0 auto; } .page-cta { text-align: center; margin-top: 2.5rem; font-size: 1.05rem; } .prose { max-width: 42rem; margin: 0 auto; } .prose h2 { font-size: 1.25rem; margin-top: 2rem; } .prose p { color: var(--ds-text); } .contact-email { font-size: 1.5rem; font-weight: 700; } .callout { background: var(--ds-surface); border: 1px solid var(--ds-border); border-left: 4px solid var(--ds-brand-2); border-radius: var(--ds-radius); padding: 1.5rem; max-width: 42rem; margin: 2.5rem auto 0; } .callout h2 { margin-top: 0; font-size: 1.1rem; } .callout p { margin-bottom: 0; color: var(--ds-text-muted); } .callout--compact { max-width: none; margin: 1.5rem 0; padding: 1.1rem 1.25rem; } /* --- Positives / Considerations (domain detail page) ------------------------ */ .pros-cons { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin: 1.75rem 0; } .pros-cons__column { border-radius: var(--ds-radius); padding: 1.25rem 1.4rem; border: 1px solid var(--ds-border); } .pros-cons__column h2 { margin: 0 0 0.75rem; font-size: 1rem; } .pros-cons__column ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .pros-cons__column li { padding-left: 1.5rem; position: relative; font-size: 0.92rem; color: var(--ds-text); } .pros-cons__column--positive { background: var(--ds-success-bg); border-color: transparent; } .pros-cons__column--positive h2 { color: var(--ds-success); } .pros-cons__column--positive li::before { content: "✓"; position: absolute; left: 0; color: var(--ds-success); font-weight: 700; } .pros-cons__column--negative { background: var(--ds-warning-bg); border-color: transparent; } .pros-cons__column--negative h2 { color: var(--ds-warning); } .pros-cons__column--negative li::before { content: "!"; position: absolute; left: 0.15rem; color: var(--ds-warning); font-weight: 700; } /* --- FAQ ---------------------------------------------------------------- */ .faq-list { max-width: 42rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: 1rem 1.25rem; } .faq-item summary { font-weight: 600; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::before { content: "+ "; color: var(--ds-brand-2); font-weight: 700; } .faq-item[open] summary::before { content: "− "; } .faq-item p { color: var(--ds-text-muted); margin: 0.75rem 0 0; } /* --- Breadcrumb --------------------------------------------------------- */ .breadcrumb { font-size: 0.9rem; color: var(--ds-text-muted); margin-bottom: 1.5rem; display: flex; gap: 0.5rem; } .breadcrumb a { color: var(--ds-text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--ds-text); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--ds-text); font-weight: 600; } /* --- Parked-domain landing page --------------------------------------------- Deliberately no site nav/footer (a visitor here typed a specific domain, they didn't navigate the main site) - a single focused, premium card on the same brand gradient as the homepage hero. */ .parked { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: var(--ds-brand-gradient); position: relative; overflow: hidden; } .parked::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px); background-size: 30px 30px; } .parked__card { position: relative; z-index: 1; max-width: 32rem; width: 100%; text-align: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: calc(var(--ds-radius) * 3); padding: 3rem 2.5rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.4); } .parked__badge { display: inline-block; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; margin-bottom: 1.5rem; } .parked__domain { font-size: 2rem; margin: 0 0 0.5rem; word-break: break-word; color: #fff; letter-spacing: -0.01em; } .parked__price { font-size: 2.75rem; font-weight: 800; margin: 0 0 1.25rem; color: #fff; } .parked__blurb { font-size: 1.05rem; color: rgba(255, 255, 255, 0.92); margin: 0 0 2rem; line-height: 1.55; } .parked .button { background: #fff; color: var(--ds-brand-1); } .parked .button:hover { background: rgba(255, 255, 255, 0.9); } .parked__footer { margin: 1.75rem 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); } .parked__footer a { color: #fff; font-weight: 600; } /* --- Utility ---------------------------------------------------------------- */ .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; }