/* whois.co.im — design tokens + layout */ :root { /* Sage palette (light) */ --c-bg: #e8e5d6; --c-surface: #dfdcc9; --c-fg: #1f1f17; --c-rule: #1f1f17; --c-ink: #3a4b1e; --c-muted: #5d5d4b; --c-soft: #cfcbb5; /* Space Grotesk + JetBrains Mono */ --font-sans: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-display: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif; /* Compact density */ --density-scale: 0.85; --pad-s: calc(8px * var(--density-scale)); --pad-m: calc(14px * var(--density-scale)); --pad-l: calc(22px * var(--density-scale)); --pad-xl: calc(34px * var(--density-scale)); --rule-w: 1px; } /* Sage dark — applied when [data-theme="dark"] is set on */ [data-theme="dark"] { --c-bg: #16170e; --c-surface: #1d1f14; --c-fg: #dcdcc2; --c-rule: #4f5037; --c-ink: #c0c994; --c-muted: #8a8a72; --c-soft: #262717; } [data-theme="dark"] .rx-card-headline { background: var(--c-surface); } [data-theme="dark"] .home-search-btn { background: var(--c-fg); color: var(--c-bg); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--c-bg); color: var(--c-fg); font-family: var(--font-mono); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; } input { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; } /* Links stand in for the prototype's buttons (brand, recent rows); inherit by default so only explicitly-underlined elements (e.g. recent domain) show. */ a { color: inherit; text-decoration: none; } ul, ol, dl { margin: 0; padding: 0; list-style: none; } dl > div, dl { margin: 0; } table { border-collapse: collapse; width: 100%; } .app { min-height: 100vh; } /* ─────────── HOME ─────────── */ .home { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-xl); } .home-band { padding: calc(48px * var(--density-scale)) 0 calc(36px * var(--density-scale)); border-bottom: var(--rule-w) solid var(--c-rule); } .home-band-inner { display: grid; gap: var(--pad-xl); } .home-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--pad-m); } .home-mast { display: flex; align-items: center; gap: var(--pad-m); } .home-mast-mark { color: var(--c-fg); flex-shrink: 0; } .home-mast-text { line-height: 1; display: flex; align-items: center; } .home-mast-name { font-family: var(--font-mono); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; } .home-mast-sub { font-family: var(--font-display); font-size: 17px; font-style: italic; color: var(--c-muted); margin-top: 6px; } /* search */ .home-search { border-top: var(--rule-w) solid var(--c-rule); border-bottom: var(--rule-w) solid var(--c-rule); padding: var(--pad-l) 0; } .home-search-row { display: flex; align-items: baseline; gap: var(--pad-m); } .home-search-prompt { font-family: var(--font-mono); font-size: 26px; color: var(--c-ink); font-weight: 500; line-height: 1; } .home-search-input { flex: 1; font-family: var(--font-mono); font-size: 26px; font-weight: 400; letter-spacing: -0.01em; padding: 0; caret-color: var(--c-ink); min-width: 0; } .home-search-input::placeholder { color: var(--c-muted); } .home-search-btn { font-family: var(--font-mono); font-size: 14px; border: var(--rule-w) solid var(--c-rule); padding: 10px 16px; background: var(--c-fg); color: var(--c-bg); white-space: nowrap; min-width: 96px; text-align: center; letter-spacing: 0.02em; } .home-search-btn:hover { background: var(--c-ink); color: var(--c-bg); } .home-search-btn[data-loading="1"] { background: var(--c-ink); color: var(--c-bg); cursor: default; } .home-search-btn[data-loading="1"]:hover { background: var(--c-ink); } .home-search-btn .spinner { display: inline-block; width: 1ch; margin-right: 6px; font-variant-numeric: tabular-nums; } .rx-search-btn .spinner { display: inline-block; width: 1ch; margin-right: 4px; } .home-search-hints { margin-top: var(--pad-m); display: flex; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--c-muted); flex-wrap: wrap; } /* columns */ .home-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0; border-bottom: var(--rule-w) solid var(--c-rule); } .home-col { padding: var(--pad-l) var(--pad-l) var(--pad-xl); border-right: var(--rule-w) solid var(--c-rule); } .home-col:first-child { padding-left: 0; } .home-col:last-child { padding-right: 0; border-right: 0; } .home-col-head { display: flex; align-items: baseline; gap: var(--pad-m); padding-bottom: var(--pad-m); margin-bottom: var(--pad-m); border-bottom: var(--rule-w) solid var(--c-rule); } .home-col-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-bg); background: var(--c-fg); padding: 3px 7px; } .home-col-head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; } /* recent lookups */ .home-recent { display: flex; flex-direction: column; } .home-recent-row { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: baseline; gap: var(--pad-m); padding: calc(10px * var(--density-scale)) 0; border-bottom: var(--rule-w) dotted var(--c-rule); cursor: pointer; } .home-recent-row:hover { background: var(--c-soft); } .home-recent-row:last-child { border-bottom: 0; } .home-recent-num { font-family: var(--font-mono); color: var(--c-muted); font-size: 11px; } .home-recent-domain { font-family: var(--font-mono); font-size: 15px; text-decoration: underline; text-decoration-color: var(--c-ink); text-underline-offset: 4px; text-decoration-thickness: 1px; } .home-recent-cc { font-family: var(--font-mono); font-size: 11px; color: var(--c-muted); } .home-recent-time { font-family: var(--font-mono); font-size: 11px; color: var(--c-muted); font-variant-numeric: tabular-nums; } /* tld bars */ .home-tlds { display: flex; flex-direction: column; gap: 0; } .home-tld-row { display: grid; grid-template-columns: 56px 1fr 52px; align-items: center; gap: var(--pad-m); padding: calc(8px * var(--density-scale)) 0; } .home-tld-name { font-family: var(--font-mono); font-size: 14px; font-weight: 500; } .home-tld-bar { height: 10px; background: var(--c-soft); position: relative; } .home-tld-bar-fill { display: block; height: 100%; background: var(--c-fg); } .home-tld-pct { font-family: var(--font-mono); font-size: 12px; color: var(--c-muted); text-align: right; font-variant-numeric: tabular-nums; } .home-col-foot { font-family: var(--font-mono); font-size: 10.5px; color: var(--c-muted); margin-top: var(--pad-l); padding-top: var(--pad-m); border-top: var(--rule-w) dotted var(--c-rule); } /* about */ .home-about-body p { font-family: var(--font-display); font-size: 17px; line-height: 1.5; margin: 0 0 var(--pad-l); text-wrap: pretty; } .home-about-body p:last-child { margin-bottom: 0; } .home-about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: var(--rule-w) solid var(--c-rule); } .home-about-stats > div { padding: var(--pad-m) 0; border-bottom: var(--rule-w) solid var(--c-rule); border-right: var(--rule-w) dotted var(--c-rule); padding-right: var(--pad-m); } .home-about-stats > div:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: var(--pad-m); } .home-about-stats > div:nth-last-child(-n+2) { border-bottom: 0; } .home-about-stats dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); } .home-about-stats dd { font-family: var(--font-display); font-size: 22px; margin: 4px 0 0; } /* footer */ .home-foot { display: flex; justify-content: space-between; padding: var(--pad-l) 0; font-family: var(--font-mono); font-size: 11px; color: var(--c-muted); } .home-foot-meta { display: flex; gap: 8px; } /* ─────────── LOADING ─────────── */ .loading { min-height: 100vh; display: grid; place-items: center; padding: var(--pad-xl); } .loading-inner { width: min(560px, 100%); border: var(--rule-w) solid var(--c-rule); background: var(--c-surface); } .loading-mono { padding: var(--pad-l); font-family: var(--font-mono); } .loading-head { display: flex; gap: 10px; padding-bottom: var(--pad-m); margin-bottom: var(--pad-m); border-bottom: var(--rule-w) solid var(--c-rule); font-size: 16px; } .loading-prompt { color: var(--c-ink); font-weight: 500; } .loading-steps { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .loading-step-on { color: var(--c-fg); } .loading-step-off { color: var(--c-muted); opacity: 0.5; } .loading-step-mark { display: inline-block; width: 14px; color: var(--c-ink); } /* ─────────── RESULTS ─────────── */ .rx { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-xl); } .rx-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pad-l); padding: var(--pad-m) 0; border-bottom: var(--rule-w) solid var(--c-rule); } .rx-url { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; } .rx-brand { display: inline-flex; align-items: baseline; font-family: var(--font-mono); font-size: 15px; font-weight: 500; } .rx-brand:hover { color: var(--c-ink); } .rx-brand-slash { color: var(--c-muted); } /* The input is rendered as if it were the path segment of the URL: same font, same baseline, no chrome — just a 1px underline to flag it as editable. Fixed width gives room to type without the field jumping. */ .rx-url-input { width: 30%; min-width: 240px; margin-left: -14px; /* tuck up against the slash so url reads as one string */ font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--c-ink); background: transparent; border: 0; border-bottom: 1px solid var(--c-ink); padding: 0 2px 2px; line-height: 1.4; } .rx-url-input:focus { outline: none; border-bottom-width: 2px; padding-bottom: 1px; } .rx-search-btn { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--c-bg); background: var(--c-ink); padding: 3px 9px; letter-spacing: 0.02em; align-self: center; white-space: nowrap; } .rx-search-btn:hover { background: var(--c-accent, var(--c-ink)); } .rx-search-btn[disabled] { opacity: 0.6; } .rx-search-btn[data-loading="1"] { cursor: default; } .rx-search-input:disabled { color: var(--c-muted); } /* light/dark theme toggle (sits where the status indicator used to) */ .rx-themetoggle { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--c-muted); padding: 4px 6px; margin-right: -6px; letter-spacing: 0.04em; text-transform: lowercase; } .rx-themetoggle:hover { color: var(--c-fg); } .rx-themetoggle-glyph { display: inline-block; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0; position: relative; } .rx-themetoggle-glyph[data-dark="1"] { background: currentColor; } .rx-themetoggle-text { font-variant-numeric: tabular-nums; } .rx-main { padding-bottom: var(--pad-xl); } /* overview grid */ .rx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: var(--rule-w) solid var(--c-rule); } .rx-card { padding: var(--pad-l); border-right: var(--rule-w) solid var(--c-rule); border-bottom: var(--rule-w) solid var(--c-rule); background: var(--c-surface); } .rx-card:nth-child(2n) { border-right: 0; } .rx-card:last-child:not(.rx-card-wide) { border-bottom: 0; } .rx-card:nth-last-child(2):not(.rx-card-wide):not(:has(+ .rx-card-wide)) { border-bottom: 0; } .rx-card-wide { grid-column: 1 / -1; border-right: 0; } .rx-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--pad-m); padding-bottom: 8px; border-bottom: var(--rule-w) dotted var(--c-rule); } .rx-card-head h3 { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--c-fg); } .rx-card-count { font-family: var(--font-mono); font-size: 11px; color: var(--c-muted); } /* headline card */ .rx-card-headline { background: var(--c-bg); border-bottom: var(--rule-w) solid var(--c-rule); } .rx-headline-domain { font-family: var(--font-display); font-size: 42px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; } .rx-headline-meta { display: flex; align-items: baseline; gap: 14px; margin-top: var(--pad-m); font-family: var(--font-mono); font-size: 14px; flex-wrap: wrap; } .rx-headline-sep { color: var(--c-muted); } .rx-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); margin-right: 8px; } .rx-v { font-family: var(--font-mono); } .rx-headline-tape { margin-top: var(--pad-l); padding-top: var(--pad-m); border-top: var(--rule-w) dotted var(--c-rule); display: flex; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--c-muted); flex-wrap: wrap; } /* generic dl in cards */ .rx-dl { display: flex; flex-direction: column; gap: 8px; } .rx-dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; padding-bottom: 6px; border-bottom: var(--rule-w) dotted var(--c-rule); } .rx-dl > div:last-child { border-bottom: 0; padding-bottom: 0; } .rx-dl dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); } .rx-dl dd { margin: 0; font-family: var(--font-mono); font-size: 14px; } .rx-dates { display: flex; flex-direction: column; gap: 0; } .rx-dates li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 10px 0; border-bottom: var(--rule-w) dotted var(--c-rule); } .rx-dates li:last-child { border-bottom: 0; } .rx-dates-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); } .rx-dates-v { font-family: var(--font-mono); font-size: 17px; font-variant-numeric: tabular-nums; } .rx-ns { display: flex; flex-direction: column; gap: 0; } .rx-ns li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 6px 0; border-bottom: var(--rule-w) dotted var(--c-rule); font-family: var(--font-mono); font-size: 13px; } .rx-ns li:last-child { border-bottom: 0; } .rx-ns-idx { color: var(--c-muted); font-size: 11px; } .rx-status-codes { display: flex; flex-direction: column; gap: 8px; } .rx-status-codes li { display: grid; grid-template-columns: 16px 240px 1fr; gap: 12px; align-items: baseline; font-family: var(--font-mono); font-size: 12.5px; padding-bottom: 6px; border-bottom: var(--rule-w) dotted var(--c-rule); } .rx-status-codes li:last-child { border-bottom: 0; } .rx-status-codes-mark { color: var(--c-ink); } .rx-status-codes-note { color: var(--c-muted); font-size: 12px; } /* WHOIS report — current + history as one continuous artifact */ .rx-report { display: contents; } /* Trunk rail — hangs off the bottom of the current card */ .rx-trunk { font-family: var(--font-sans); } .rx-trunk-list { display: flex; flex-direction: column; position: relative; padding-top: var(--pad-xl); } /* connector line from the bottom of the overview card down to the first dot */ .rx-trunk-list::before { content: ""; position: absolute; top: 0; left: calc(140px + var(--pad-m) + 14px); width: 1px; height: var(--pad-xl); background: var(--c-rule); transform: translateX(-0.5px); } .rx-trunk-row { display: grid; grid-template-columns: 140px 28px 1fr; gap: var(--pad-m); padding: var(--pad-m) 0; } .rx-trunk-row:first-child { padding-top: var(--pad-m); } .rx-trunk-meta { font-family: var(--font-mono); padding-top: 2px; text-align: right; } .rx-trunk-date { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; } .rx-trunk-age { font-size: 11px; color: var(--c-muted); margin-top: 2px; letter-spacing: 0.02em; } .rx-trunk-mark { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100%; } .rx-trunk-mark .rx-trunk-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--c-rule); transform: translateX(-0.5px); } .rx-trunk-row:last-child .rx-trunk-mark .rx-trunk-line { display: none; } .rx-trunk-dot { width: 11px; height: 11px; background: var(--c-ink); border-radius: 50%; margin-top: 6px; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--c-bg); } .rx-trunk-dot-open { background: var(--c-bg); border: 1.5px solid var(--c-fg); } .rx-trunk-body { padding-top: 2px; } .rx-trunk-label { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 8px; } .rx-trunk-changes { display: flex; flex-direction: column; gap: 6px; } .rx-trunk-change { display: grid; grid-template-columns: 150px 1fr auto 1fr; gap: 12px; align-items: baseline; font-family: var(--font-mono); font-size: 12px; padding: 3px 0; border-bottom: var(--rule-w) dotted var(--c-rule); } .rx-trunk-change:last-child { border-bottom: 0; } .rx-trunk-change-field { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); } .rx-trunk-change-from { color: var(--c-muted); text-decoration: line-through; text-decoration-thickness: 1px; word-break: break-word; } .rx-trunk-change-arrow { color: var(--c-muted); } .rx-trunk-change-to { color: var(--c-fg); font-weight: 500; word-break: break-word; } .rx-trunk-genesis .rx-trunk-genesis-text { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--c-muted); } .rx-trunk-empty-note { font-family: var(--font-display); font-size: 14px; line-height: 1.5; color: var(--c-muted); margin-top: 8px; max-width: 56ch; text-wrap: pretty; } /* shorten the connector when there's only an anchor row — long pre-line is meaningless when nothing hangs off of it */ .rx-trunk-list-empty::before { bottom: auto; height: 24px; } @media (max-width: 720px) { .rx-trunk-row { grid-template-columns: 90px 24px 1fr; } .rx-trunk-change { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; } .rx-trunk-change-arrow { display: none; } } /* responsive */ @media (max-width: 900px) { .home-cols { grid-template-columns: 1fr; } .home-col { border-right: 0; border-bottom: var(--rule-w) solid var(--c-rule); padding: var(--pad-l) 0; } .rx-grid { grid-template-columns: 1fr; } .rx-card { border-right: 0 !important; } .rx-headline-domain { font-size: 36px; } }