/* 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: #3f51b5; --ds-primary-hover: #303f9f; --ds-primary-dark: #303f9f; --ds-on-primary: #ffffff; --ds-surface: #ffffff; --ds-background: #fafafa; --ds-text: #212121; --ds-text-muted: #757575; --ds-border: #e0e0e0; --ds-error: #d32f2f; --ds-error-bg: #ffebee; --ds-success: #388e3c; --ds-success-bg: #e8f5e9; --ds-info: #303f9f; --ds-info-bg: #e8eaf6; --ds-warning: #5d4037; --ds-warning-bg: #fff8e1; --ds-focus-ring: #ffc107; --ds-radius: 8px; --ds-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06); /* Material Design palette (500 shades unless noted) used for the domain category tags. */ --ds-ai: #673ab7; /* Deep Purple 500 */ --ds-fintech: #2196f3; /* Blue 500 */ --ds-greentech: #4caf50; /* Green 500 */ --ds-other: #607d8b; /* Blue Grey 500 */ /* Public marketing site - same Material Indigo primary as the rest of the product (--ds-primary above), kept as separate tokens only so the public templates/CSS read clearly as "the brand color" rather than coupling them to the admin-dashboard token name. Not a second color system - always kept equal to --ds-primary/-hover. */ --ds-brand: #3f51b5; --ds-brand-hover: #303f9f; --ds-brand-tint: #e8eaf6; --ds-brand-on: #ffffff; --ds-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } @media (prefers-color-scheme: dark) { :root { --ds-primary: #7986cb; --ds-primary-hover: #5c6bc0; --ds-primary-dark: #c5cae9; --ds-on-primary: #ffffff; --ds-surface: #1e1e1e; --ds-background: #121212; --ds-text: #e0e0e0; --ds-text-muted: #9e9e9e; --ds-border: #424242; --ds-error: #ef5350; --ds-error-bg: #4e2020; --ds-success: #66bb6a; --ds-success-bg: #1e3320; --ds-info: #7986cb; --ds-info-bg: #262c4a; --ds-warning: #ffd54f; --ds-warning-bg: #4a3b14; --ds-focus-ring: #ffd54f; --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: #3f51b5; --ds-primary-hover: #303f9f; --ds-primary-dark: #303f9f; --ds-on-primary: #ffffff; --ds-surface: #ffffff; --ds-background: #fafafa; --ds-text: #212121; --ds-text-muted: #757575; --ds-border: #e0e0e0; --ds-error: #d32f2f; --ds-error-bg: #ffebee; --ds-success: #388e3c; --ds-success-bg: #e8f5e9; --ds-info: #303f9f; --ds-info-bg: #e8eaf6; --ds-warning: #5d4037; --ds-warning-bg: #fff8e1; --ds-focus-ring: #ffc107; --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: #7986cb; --ds-primary-hover: #5c6bc0; --ds-primary-dark: #c5cae9; --ds-on-primary: #ffffff; --ds-surface: #1e1e1e; --ds-background: #121212; --ds-text: #e0e0e0; --ds-text-muted: #9e9e9e; --ds-border: #424242; --ds-error: #ef5350; --ds-error-bg: #4e2020; --ds-success: #66bb6a; --ds-success-bg: #1e3320; --ds-info: #7986cb; --ds-info-bg: #262c4a; --ds-warning: #ffd54f; --ds-warning-bg: #4a3b14; --ds-focus-ring: #ffd54f; --ds-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); } /* Self-hosted (not loaded from Google's CDN, matching this app's no- external-runtime-dependency architecture) - a single variable-font file covering the whole 100-900 weight range, see app/static/fonts/OFL.txt for license. Used on the public marketing site's headings/buttons/brand wordmark only (see the "Public marketing site" section below) - the admin dashboard keeps the plain system font. */ @font-face { font-family: "Archivo"; src: url("/static/fonts/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } * { 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; justify-content: center; gap: 0.25rem 1rem; flex: 1; min-width: 0; } /* Centering a *wrapped* nav means each wrapped line re-centers on its own, which reads as scattered/uneven once there are enough items to wrap (6 nav links + brand + actions, on a narrow screen). A left-aligned list reads as one coherent block once it no longer fits on one line. */ @media (max-width: 40rem) { .app-header__nav { justify-content: flex-start; } } .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); } /* --- Mobile nav (hamburger) - shared by the admin dashboard and the public site header below. Below the breakpoint, the primary nav links collapse behind a toggle button instead of wrapping onto several uneven lines; .nav-toggle's click handler (app/static/js/main.js) just toggles .is-nav-open on the nearest header. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; background: transparent; color: var(--ds-text); cursor: pointer; border-radius: var(--ds-radius); } .nav-toggle:hover { background: var(--ds-background); } .nav-toggle svg { width: 1.35rem; height: 1.35rem; } @media (max-width: 64rem) { .nav-toggle { display: inline-flex; } .app-header { flex-wrap: wrap; } .app-header__brand { order: 1; } .app-header__actions { order: 2; margin-left: auto; } .app-header .nav-toggle { order: 3; } .app-header__nav { order: 4; flex-basis: 100%; display: none; flex-direction: column; align-items: flex-start; gap: 0.15rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--ds-border); } .app-header.is-nav-open .app-header__nav { display: flex; } .app-header__nav a { padding: 0.5rem 0; width: 100%; } } .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; overflow-wrap: anywhere; } /* Clamped to a few lines so a long AI-generated blurb can't blow out the Owned table's row height - hover for the full text (title attribute set in owned.js), or click Regenerate to see it update in place. */ .blurb-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 20em; } .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: 3px; background: var(--ds-brand); opacity: 0; transition: opacity 0.15s ease; } .domain-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(109, 40, 217, 0.3); } .domain-card:hover::before { opacity: 1; } .domain-card h2 { margin: .75rem 0 0; font-size: 1.15rem; font-family: var(--ds-font-display); } .domain-card__price { font-family: var(--ds-font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: .35rem 0 0; color: var(--ds-brand); } .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.5rem; font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -0.02em; word-break: break-word; } .domain-detail__price { font-family: var(--ds-font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; display: inline-block; color: var(--ds-brand); } .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: the Archivo display font, a single flat brand accent (no gradients - see the :root token comment above), pill-shaped buttons, and big, tight-tracked type - inspired by zig.ai's design language (one confident color, lots of air, oversized confident headlines) but with Dommmain's own accent color and content. Reuses the same --ds-* tokens for surfaces/text (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; font-family: var(--ds-font-display); } .site .button { font-family: var(--ds-font-display); border-radius: 999px; letter-spacing: -0.01em; background: var(--ds-brand); } .site .button:hover { background: var(--ds-brand-hover); } .site .button--secondary { background: var(--ds-surface); color: var(--ds-text); } .site .button--secondary:hover { background: var(--ds-background); } .site .button--buy { background: var(--ds-success); } .site .button--buy:hover { filter: brightness(0.9); } .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: 700; font-size: 1.4rem; letter-spacing: -0.02em; /* Theme-variable (not the constant --ds-brand) so "do"/"ain" is dark charcoal on the light header and flips to light on the header in dark mode - matching the fixed white used for the same text on the always-dark footer below. */ color: var(--ds-text); text-decoration: none; } /* The three consecutive m's in "dommmain" read as a blurred double-m at a glance under tight overall tracking - loosening just this span (and bumping its weight, since Archivo is a variable font) separates the three letterforms enough to count them without changing the word. */ .wordmark-emphasis { font-weight: 900; letter-spacing: 0.05em; color: var(--ds-brand); } .site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.35rem; flex: 1; min-width: 0; } .site-nav a { text-decoration: none; color: var(--ds-text-muted); font-weight: 500; 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; } /* Mobile nav (hamburger) - see the shared .nav-toggle rules and comment near .app-header__actions above. */ @media (max-width: 64rem) { .site-header__inner { flex-wrap: wrap; } .site-header__brand { order: 1; } .site-header__actions { order: 2; margin-left: auto; } .site-header .nav-toggle { order: 3; } .site-nav { order: 4; flex-basis: 100%; display: none; flex-direction: column; align-items: flex-start; gap: 0.15rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--ds-border); } .site-header.is-nav-open .site-nav { display: flex; } .site-nav a { padding: 0.6rem 0; width: 100%; } } .site-main { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; width: 100%; } /* A distinct, deliberately darker "grounding" panel rather than a thin strip of links - the flat single-row footer read as an afterthought. */ .site-footer { margin-top: auto; background: #263238; /* Blue Grey 900 */ padding: 4rem 1.5rem 2rem; } .site-footer__inner { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: minmax(16rem, 1.6fr) repeat(3, minmax(8rem, 1fr)); gap: 2.5rem; padding-bottom: 3rem; } .site-footer__brand { max-width: 22rem; } .site-footer__wordmark { display: inline-block; font-family: var(--ds-font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: #ffffff; text-decoration: none; margin-bottom: 0.85rem; } .site-footer__brand p { color: #90a4ae; margin: 0 0 1.1rem; font-size: 0.92rem; line-height: 1.5; } /* Blue Grey 300 */ .site-footer__col h2 { font-family: var(--ds-font-display); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #78909c; /* Blue Grey 400 */ margin: 0 0 1rem; } .site-footer__col nav { display: flex; flex-direction: column; gap: 0.65rem; } .site-footer__col a { color: #b0bec5; text-decoration: none; font-size: 0.92rem; } /* Blue Grey 200 */ .site-footer__col a:hover { color: #ffffff; } .site-footer__bottom { max-width: 72rem; margin: 0 auto; padding-top: 1.75rem; border-top: 1px solid #37474f; /* Blue Grey 800 */ display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: #78909c; /* Blue Grey 400 */ font-size: 0.8rem; } .site-footer__copyright, .site-footer__note { margin: 0; } @media (max-width: 48rem) { .site-footer__inner { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; max-width: none; } } /* --- Hero -------------------------------------------------------------------- No card, no gradient, no illustration - just very large, tight-tracked type directly on the page background and a pill CTA, the way zig.ai's hero reads: one confident sentence, air around it, nothing competing with the type. The right-hand two-fifths is reserved (visually, via .hero__content's max-width) for the floating domain-bubble animation - see .hero__bubbles below and app/static/js/hero-bubbles.js. Full-bleed: .hero lives inside .site-main (max-width: 72rem, centered), but the bubbles need the *actual* full viewport width/height to roam in - not just the centered content column - so .hero breaks out to 100vw via the negative-margin trick, then re-adds padding that lines .hero__content back up with the rest of the page's content column. */ .hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 3rem max(1.5rem, calc((100vw - 72rem) / 2 + 1.5rem)) 4rem; /* Bubbles now render at every viewport size (see hero-bubbles.js), so give them close to the full viewport height to roam in everywhere, not just on wide screens - the header is a compact single row at every width now too (see the hamburger nav), so one estimate works for all of them. */ min-height: calc(100vh - 4.5rem); overflow: hidden; } .hero__content { position: relative; z-index: 2; max-width: 34rem; /* The bubbles sit *behind* this (z-index 1) but this box's own footprint - including the gaps between its child elements - would otherwise still intercept clicks meant for a bubble drifting underneath it, now that bubbles roam the full hero instead of staying clear of this column. Re-enabled on the actual interactive children below. */ pointer-events: none; } .hero__content a { pointer-events: auto; } .hero h1 { font-size: 4rem; line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 1.25rem; color: var(--ds-text); } .hero__subtitle { font-size: 1.2rem; color: var(--ds-text-muted); margin: 0 0 2.25rem; max-width: 34rem; } .hero__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 2.25rem; } .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.9rem 1.85rem; font-size: 1.05rem; } @media (max-width: 40rem) { .hero h1 { font-size: 2.5rem; } } /* --- Hero domain bubbles ------------------------------------------------------ Purely decorative, ambient animation (app/static/js/hero-bubbles.js populates/animates these) - a handful of floating .com names, some real well-known companies mixed with invented ones, illustrating ".com is where the big names live" without claiming Dommmain sells those specific domains. Sits behind .hero__content (z-index 1 vs. 2) so a bubble drifting under the headline never obscures it (and dims further still while actually overlapping it - see hero-bubbles.js). Renders at every viewport size (size/count scaled down for smaller ones), except for prefers-reduced-motion (the JS checks this and no-ops). */ .hero__bubbles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .bubble { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; pointer-events: auto; cursor: pointer; opacity: 0; transition: opacity 0.6s ease; /* Flat fill with just a faint top-left highlight - enough to still read as a bubble, not a glossy 3D orb (no inset shadow, no glass blur). */ background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--bubble-color) 74%, white 8%); border: 1px solid color-mix(in srgb, var(--bubble-color) 55%, transparent); box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--bubble-color) 45%, transparent); } .bubble.is-visible { opacity: 1; } .bubble span { font-family: var(--ds-font-display); font-size: 0.85rem; font-weight: 700; /* A light tint of the bubble's own hue reads as "belonging" to that bubble, rather than a plain white label sitting on top of it. */ color: color-mix(in srgb, var(--bubble-color) 30%, white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); text-align: center; padding: 0 0.5rem; line-height: 1.2; /* Always one line - hero-bubbles.js's fitLabel() shrinks the font size per-bubble so a long domain name still fits inside a small bubble instead of wrapping to two lines. */ white-space: nowrap; } .bubble.is-bursting { /* Actual transform value (translate + scale combined) is set inline by hero-bubbles.js's burst() - a transform here would replace the inline translate() wholesale rather than compose with it. A back-out curve (slight overshoot past the target scale) plus a bigger scale jump reads as a snappier, more dramatic pop than a plain ease-out. */ transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease 0.05s; opacity: 0; } /* --- How-it-works step lists ------------------------------------------------- zig.ai's "/ 01 / 02" numbered-feature convention - a large flat number label instead of a filled badge, left-aligned, no card/shadow. */ .process-teaser { padding: 1rem 0 3.5rem; } .process-teaser h2 { font-size: 1.9rem; margin-bottom: 2rem; font-weight: 600; letter-spacing: -0.01em; } .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; } .steps__item { text-align: left; } .steps__number { display: block; font-family: var(--ds-font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ds-brand); margin-bottom: 0.6rem; } .steps__number::before { content: "/ "; color: var(--ds-border); } .steps__item h2, .steps__item h3 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 600; } .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: 2rem; margin: 0 auto 2.5rem; } .stat-strip__item { text-align: left; font-size: 0.9rem; color: var(--ds-text-muted); } .stat-strip__number { display: block; font-family: var(--ds-font-display); font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ds-brand); margin-bottom: 0.25rem; } /* --- Long-form content pages (About, Privacy, Terms) ------------------------ */ .page-intro { text-align: center; padding: 1rem 0 2.5rem; } .page-intro h1 { font-size: 2.5rem; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .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); overflow-wrap: anywhere; } .callout { background: var(--ds-surface); border: 1px solid var(--ds-border); border-left: 4px solid var(--ds-brand); 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); overflow-wrap: anywhere; } .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; } /* Restrained Material Card treatment - a neutral surface with a colored left-edge accent stripe, rather than a full-bleed colored tint block. A saturated background block per column (bright green next to bright amber) read as "crayon" next to the rest of the flat, single-accent design - a border stripe + colored icon carries the same information with far less visual noise. */ .pros-cons__column { background: var(--ds-surface); border-radius: var(--ds-radius); padding: 1.25rem 1.4rem; border: 1px solid var(--ds-border); border-left: 3px 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); overflow-wrap: anywhere; } .pros-cons__column--positive { border-left-color: var(--ds-success); } .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 { border-left-color: var(--ds-warning); } .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); 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 card in a flat brand-color spotlight, zig.ai-style (one confident color, no gradient, no glass). Colors here are fixed rather than theme-variable (`#fff` card, light-mode pros-cons tints) since this page doesn't follow the visitor's light/dark toggle - it's a deliberate one-off "spotlight" moment, not part of the themed site chrome. */ .parked { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: var(--ds-brand); font-family: var(--ds-font-display); } .parked__card { max-width: 32rem; width: 100%; text-align: center; background: #ffffff; border-radius: calc(var(--ds-radius) * 2.5); padding: 3rem 2.5rem; box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.35); } .parked__badge { display: inline-block; background: var(--ds-brand-tint); color: var(--ds-brand); padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1.5rem; } .parked__domain { font-size: 2rem; margin: 0 0 0.5rem; word-break: break-word; color: #212121; font-weight: 600; letter-spacing: -0.02em; } .parked__price { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.25rem; color: var(--ds-brand); } .parked__blurb { font-size: 1.05rem; color: #757575; margin: 0 0 2rem; line-height: 1.55; } /* Pros-cons reuses the same component/markup as the domain detail page, but with fixed light-mode colors (not the theme-variable success/ warning tokens) since .parked__card is always a white card. Same restrained border-accent treatment as the base rules - no colored background block. */ .parked .pros-cons { text-align: left; margin: 1.5rem 0 2rem; } .parked .pros-cons__column { background: #ffffff; border: 1px solid #e0e0e0; } .parked .pros-cons__column li { color: #212121; } .parked .pros-cons__column--positive { border-left-color: #388e3c; } .parked .pros-cons__column--positive h2 { color: #388e3c; } .parked .pros-cons__column--positive li::before { color: #388e3c; } .parked .pros-cons__column--negative { border-left-color: #5d4037; } .parked .pros-cons__column--negative h2 { color: #5d4037; } .parked .pros-cons__column--negative li::before { color: #5d4037; } .parked .button { background: var(--ds-brand); color: #fff; } .parked .button:hover { background: var(--ds-brand-hover); } .parked__footer { margin: 1.75rem 0 0; font-size: 0.85rem; color: #757575; } .parked__footer a { color: #212121; 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; } /* ========================================================================== Admin dashboard - shadcn/ui visual style (https://ui.shadcn.com) Style only, not the stack - no Tailwind/Radix/React, just a scoped layer of overrides on the shared component rules above. Confined to .app-shell (the dashboard) and .auth-page (the login screen - the one admin page rendered without the dashboard shell), because several base classes here (.button, .card, .field, .flash-list, .tag) are also used by the PUBLIC marketing site (domain cards, the offer form, category tags) - this scoping is what keeps that site's own Material/Indigo look completely untouched by this restyle. shadcn's signature details: neutral zinc palette, a near-black primary instead of a bright accent color, border-first elevation (a 1px border does the work a shadow did before - shadows are nearly imperceptible, used sparingly), smaller/ denser controls than Material's, and a visible box-shadow focus ring (with a background-color "gap" around the element) instead of a plain outline. */ :is(.app-shell, .auth-page) { --sc-background: #ffffff; --sc-foreground: #09090b; --sc-card: #ffffff; --sc-card-foreground: #09090b; --sc-primary: #18181b; --sc-primary-foreground: #fafafa; --sc-secondary: #f4f4f5; --sc-secondary-foreground: #18181b; --sc-muted: #f4f4f5; --sc-muted-foreground: #71717a; --sc-accent: #f4f4f5; --sc-accent-foreground: #18181b; --sc-border: #e4e4e7; --sc-input: #e4e4e7; --sc-ring: #18181b; --sc-radius: 0.5rem; --sc-radius-sm: 0.375rem; --sc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04); --sc-error: #dc2626; --sc-error-bg: #fef2f2; --sc-success: #16a34a; --sc-success-bg: #f0fdf4; /* Used for .progress-notice instead of --sc-error - an import quietly running isn't an error, and styling it as one read as a persistent false alarm even when everything was fine. */ --sc-warning: #b45309; --sc-warning-bg: #fffbeb; --sc-info: #2563eb; --sc-info-bg: #eff6ff; background: var(--sc-background); color: var(--sc-foreground); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } @media (prefers-color-scheme: dark) { :is(.app-shell, .auth-page) { --sc-background: #09090b; --sc-foreground: #fafafa; --sc-card: #131316; --sc-card-foreground: #fafafa; --sc-primary: #fafafa; --sc-primary-foreground: #18181b; --sc-secondary: #27272a; --sc-secondary-foreground: #fafafa; --sc-muted: #27272a; --sc-muted-foreground: #a1a1aa; --sc-accent: #27272a; --sc-accent-foreground: #fafafa; --sc-border: #27272a; --sc-input: #27272a; --sc-ring: #d4d4d8; --sc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --sc-error: #f87171; --sc-error-bg: #431414; --sc-success: #4ade80; --sc-success-bg: #052e16; --sc-warning: #fbbf24; --sc-warning-bg: #422006; --sc-info: #60a5fa; --sc-info-bg: #172554; } } :root[data-theme="light"] :is(.app-shell, .auth-page) { --sc-background: #ffffff; --sc-foreground: #09090b; --sc-card: #ffffff; --sc-card-foreground: #09090b; --sc-primary: #18181b; --sc-primary-foreground: #fafafa; --sc-secondary: #f4f4f5; --sc-secondary-foreground: #18181b; --sc-muted: #f4f4f5; --sc-muted-foreground: #71717a; --sc-accent: #f4f4f5; --sc-accent-foreground: #18181b; --sc-border: #e4e4e7; --sc-input: #e4e4e7; --sc-ring: #18181b; --sc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04); --sc-error: #dc2626; --sc-error-bg: #fef2f2; --sc-success: #16a34a; --sc-success-bg: #f0fdf4; --sc-warning: #b45309; --sc-warning-bg: #fffbeb; --sc-info: #2563eb; --sc-info-bg: #eff6ff; } :root[data-theme="dark"] :is(.app-shell, .auth-page) { --sc-background: #09090b; --sc-foreground: #fafafa; --sc-card: #131316; --sc-card-foreground: #fafafa; --sc-primary: #fafafa; --sc-primary-foreground: #18181b; --sc-secondary: #27272a; --sc-secondary-foreground: #fafafa; --sc-muted: #27272a; --sc-muted-foreground: #a1a1aa; --sc-accent: #27272a; --sc-accent-foreground: #fafafa; --sc-border: #27272a; --sc-input: #27272a; --sc-ring: #d4d4d8; --sc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --sc-error: #f87171; --sc-error-bg: #431414; --sc-success: #4ade80; --sc-success-bg: #052e16; --sc-warning: #fbbf24; --sc-warning-bg: #422006; --sc-info: #60a5fa; --sc-info-bg: #172554; } .app-shell :focus-visible, .auth-page :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sc-background), 0 0 0 4px var(--sc-ring); border-radius: var(--sc-radius-sm); } /* Header / nav */ .app-shell .app-header { background: var(--sc-background); border-bottom: 1px solid var(--sc-border); padding: 0.75rem 1.5rem; } .app-shell .app-header__brand { color: var(--sc-foreground); font-size: 1rem; } .app-shell .app-header__nav a { color: var(--sc-muted-foreground); font-size: 0.875rem; font-weight: 500; padding: 0.4rem 0.65rem; border-radius: var(--sc-radius-sm); border-bottom: none; } .app-shell .app-header__nav a:hover { background: var(--sc-accent); color: var(--sc-accent-foreground); } .app-shell .app-header__nav a[aria-current="page"] { background: var(--sc-accent); color: var(--sc-accent-foreground); font-weight: 600; } .app-shell .app-header__logout { color: var(--sc-muted-foreground); font-size: 0.875rem; } .app-shell .app-header__logout:hover { color: var(--sc-foreground); } .app-shell .nav-toggle { border-radius: var(--sc-radius-sm); color: var(--sc-muted-foreground); } .app-shell .nav-toggle:hover { background: var(--sc-accent); color: var(--sc-accent-foreground); } .app-shell .theme-toggle { border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-border); background: var(--sc-background); color: var(--sc-muted-foreground); } .app-shell .theme-toggle:hover { background: var(--sc-accent); color: var(--sc-accent-foreground); } /* Page header / body typography */ .app-shell .page-header h1 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--sc-foreground); } .app-shell .subtitle, .app-shell .run-stats, .app-shell .empty-state { color: var(--sc-muted-foreground); } /* Cards - a border does the elevation work a shadow did before */ .app-shell .card { background: var(--sc-card); color: var(--sc-card-foreground); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-sm); padding: 1.25rem 1.5rem; } .app-shell .card h2 { color: var(--sc-foreground); font-size: 1rem; font-weight: 600; } /* Buttons */ .app-shell .button, .auth-page .button { background: var(--sc-primary); color: var(--sc-primary-foreground); border-radius: var(--sc-radius-sm); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; transition: opacity 0.15s ease; } .app-shell .button:hover, .auth-page .button:hover { opacity: 0.85; } .app-shell .button--secondary, .auth-page .button--secondary { background: var(--sc-background); color: var(--sc-foreground); border: 1px solid var(--sc-border); } .app-shell .button--secondary:hover, .auth-page .button--secondary:hover { background: var(--sc-accent); opacity: 1; } /* Forms */ .app-shell .field label, .auth-page .field label { color: var(--sc-foreground); font-size: 0.875rem; font-weight: 500; } .app-shell .field input, .app-shell .field textarea, .app-shell .field select, .auth-page .field input, .auth-page .field textarea, .auth-page .field select, .app-shell .inline-form input { background: var(--sc-background); color: var(--sc-foreground); border: 1px solid var(--sc-input); border-radius: var(--sc-radius-sm); padding: 0.5rem 0.7rem; font-size: 0.875rem; } .app-shell .field-status { color: var(--sc-muted-foreground); } .app-shell .field-status--set { color: var(--sc-success); } .app-shell .error-text, .auth-page .error-text { color: var(--sc-error); } /* Flash / notices */ .app-shell .flash, .auth-page .flash { border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); font-size: 0.875rem; } .app-shell .flash--error, .auth-page .flash--error { background: var(--sc-error-bg); color: var(--sc-error); border-color: transparent; } .app-shell .flash--success, .auth-page .flash--success { background: var(--sc-success-bg); color: var(--sc-success); border-color: transparent; } .app-shell .flash--info, .auth-page .flash--info { background: var(--sc-info-bg); color: var(--sc-info); border-color: transparent; } .app-shell .progress-notice { color: var(--sc-warning); background: var(--sc-warning-bg); border-radius: var(--sc-radius-sm); font-weight: 500; } .app-shell .progress-notice__dot { background: var(--sc-warning); } /* Tables - a bordered container, thin row dividers, no header uppercase */ .app-shell .table-scroll { border: 1px solid var(--sc-border); border-radius: var(--sc-radius); } .app-shell table { background: var(--sc-card); border-radius: 0; } .app-shell th, .app-shell td { border-bottom: 1px solid var(--sc-border); } .app-shell th { background: var(--sc-muted); color: var(--sc-muted-foreground); text-transform: none; letter-spacing: normal; font-size: 0.8125rem; font-weight: 500; } .app-shell tbody tr:last-child td { border-bottom: none; } /* Badges / tags / status pills - muted secondary fill instead of solid Material category colors (which stay as-is on the public marketplace, where the color-coding is a merchandising cue for shoppers). */ .app-shell .tag { background: var(--sc-secondary); color: var(--sc-secondary-foreground); text-transform: none; font-weight: 500; } .app-shell .tag--ai, .app-shell .tag--fintech, .app-shell .tag--greentech, .app-shell .tag--other { background: var(--sc-secondary); } .app-shell .badge--success, .app-shell .status-pill--success { background: var(--sc-success-bg); color: var(--sc-success); } .app-shell .badge--pending, .app-shell .status-pill--pending { background: var(--sc-muted); color: var(--sc-muted-foreground); } .app-shell .badge--failed, .app-shell .status-pill--failed { background: var(--sc-error-bg); color: var(--sc-error); } .app-shell .badge-flag { color: var(--sc-error); } /* Login card */ .auth-page { background: var(--sc-background); } .auth-page .auth-card { background: var(--sc-card); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-sm); } .auth-page .auth-card h1 { color: var(--sc-foreground); font-size: 1.25rem; font-weight: 600; }