/* DNS Coffee theme (#78): a "subtle warmth" coffee palette on top of Bootstrap 5.3's CSS-variable theming — light is milk coffee (near-white with a faint cream tint, espresso ink), dark is black coffee (deep warm neutral, cream ink). Caramel is the primary accent, teal the secondary (a nod to the old flatly theme). No Sass build: everything here overrides the variables the vendored stock bootstrap CSS already consumes. The mode is selected by data-bs-theme on , set before first paint by the inline boot script in base.tmpl (auto via prefers-color-scheme, or the navbar toggle's stored choice). Accent/ink pairs were chosen by computed WCAG contrast, not by eye: caramel #96570f is 5.2:1+ on both light surfaces (5.7:1 under white text); amber #e2a75b is 8.7:1 on the dark surfaces (8.0:1 under dark text). The chart palette lives in charts.js and is mode-invariant; only the chart chrome (--dc-chart-*) swaps with the theme. */ :root, [data-bs-theme="light"] { --bs-body-bg: #f7f3ee; --bs-body-bg-rgb: 247, 243, 238; --bs-body-color: #2b2118; --bs-body-color-rgb: 43, 33, 24; --bs-emphasis-color: #171310; --bs-emphasis-color-rgb: 23, 19, 16; --bs-secondary-color: rgba(43, 33, 24, 0.7); --bs-secondary-color-rgb: 43, 33, 24; --bs-secondary-bg: #ece5da; --bs-secondary-bg-rgb: 236, 229, 218; --bs-tertiary-color: rgba(43, 33, 24, 0.5); --bs-tertiary-color-rgb: 43, 33, 24; --bs-tertiary-bg: #f1ebe2; --bs-tertiary-bg-rgb: 241, 235, 226; --bs-border-color: #e4dccf; --bs-border-color-translucent: rgba(43, 33, 24, 0.12); --bs-primary: #96570f; --bs-primary-rgb: 150, 87, 15; /* secondary stays a warm neutral so text-bg-secondary badges ("inactive") read as muted, not tinted; the teal accent is applied to .btn-secondary explicitly below */ --bs-secondary: #6b5d4f; --bs-secondary-rgb: 107, 93, 79; --bs-info: #0e7a67; --bs-info-rgb: 14, 122, 103; /* alert-info and friends: teal-tinted warm subtle tones instead of bootstrap's compiled cyan */ --bs-info-bg-subtle: #e2f1ec; --bs-info-border-subtle: #b7ddd3; --bs-info-text-emphasis: #0a5c4e; --bs-light: #f1ebe2; --bs-light-rgb: 241, 235, 226; --bs-dark: #2a2019; --bs-dark-rgb: 42, 32, 25; --bs-link-color: #96570f; --bs-link-color-rgb: 150, 87, 15; --bs-link-hover-color: #7a460c; --bs-link-hover-color-rgb: 122, 70, 12; --bs-focus-ring-color: rgba(150, 87, 15, 0.25); /* site tokens (dc- = dns.coffee) */ --dc-surface: #fffdfa; /* cards and other raised surfaces */ --dc-navbar-bg: #ece1d0; /* latte bar in light, espresso in dark */ --dc-accent: #96570f; --dc-accent-hover: #7a460c; --dc-accent-contrast: #ffffff; /* text on the accent */ --dc-teal: #0e7a67; --dc-teal-hover: #0c6a59; --dc-teal-contrast: #ffffff; --dc-header-bg: #efe5d4; /* latte card/list header bands */ --dc-header-ink: #3b2d1f; --dc-counter-bg: rgba(150, 87, 15, 0.14); /* count pills on header bands */ --dc-counter-ink: #6d3f0a; --dc-blurb-bg: #f1e7d6; /* info-blurb panels */ --dc-blurb-header-bg: rgba(0, 0, 0, 0.05); --dc-chart-ink: #6f6152; /* plotly axis/tick/legend text */ --dc-chart-grid: #e9e2d5; --dc-spinner: #96570f; --dc-perc-bar: #a8dccc; /* table percentage bars */ --dc-subnet-d0: #efece6; /* subnet density ramp (sequential blue) */ --dc-subnet-d1: #aed6f1; --dc-subnet-d2: #5dade2; --dc-subnet-d3: #2e86c1; --dc-subnet-d4: #1a5276; } [data-bs-theme="dark"] { --bs-body-bg: #171310; --bs-body-bg-rgb: 23, 19, 16; --bs-body-color: #ece5db; --bs-body-color-rgb: 236, 229, 219; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: rgba(236, 229, 219, 0.78); --bs-secondary-color-rgb: 236, 229, 219; --bs-secondary-bg: #2a231c; --bs-secondary-bg-rgb: 42, 35, 28; --bs-tertiary-color: rgba(236, 229, 219, 0.6); --bs-tertiary-color-rgb: 236, 229, 219; --bs-tertiary-bg: #211b16; --bs-tertiary-bg-rgb: 33, 27, 22; --bs-border-color: #3a3128; --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-primary: #e2a75b; --bs-primary-rgb: 226, 167, 91; /* dark enough that text-bg-secondary's fixed white badge text stays readable on it */ --bs-secondary: #5a4d3f; --bs-secondary-rgb: 90, 77, 63; --bs-light: #f1ebe2; --bs-light-rgb: 241, 235, 226; /* lighter roast than the true dark so text-bg-dark badges stay visible on dark cards */ --bs-dark: #4a3a2a; --bs-dark-rgb: 74, 58, 42; --bs-info: #3bbfa2; --bs-info-rgb: 59, 191, 162; --bs-info-bg-subtle: #14322b; --bs-info-border-subtle: #1e5347; --bs-info-text-emphasis: #7fd6c2; --bs-link-color: #e2a75b; --bs-link-color-rgb: 226, 167, 91; --bs-link-hover-color: #ecbd80; --bs-link-hover-color-rgb: 236, 189, 128; --bs-focus-ring-color: rgba(226, 167, 91, 0.25); --dc-surface: #211b16; --dc-navbar-bg: #211a14; --dc-accent: #e2a75b; --dc-accent-hover: #ecbd80; --dc-accent-contrast: #211b16; --dc-teal: #3bbfa2; --dc-teal-hover: #55cbb1; --dc-teal-contrast: #171310; --dc-header-bg: #3a2f24; --dc-header-ink: #f6f0e7; --dc-counter-bg: rgba(255, 255, 255, 0.14); --dc-counter-ink: #f6f0e7; --dc-blurb-bg: #362b20; --dc-blurb-header-bg: rgba(0, 0, 0, 0.22); --dc-chart-ink: #b3a690; --dc-chart-grid: #332b23; --dc-spinner: #e2a75b; --dc-perc-bar: #14574a; /* magnitude anchors flip on a dark surface: near-zero recedes into the card, high density comes forward */ --dc-subnet-d0: #2a231c; --dc-subnet-d1: #1e3a52; --dc-subnet-d2: #295a7c; --dc-subnet-d3: #3d7ea8; --dc-subnet-d4: #6ba7d4; } /* --- components ----------------------------------------------------------- */ /* the navbar follows the page theme: a latte bar with espresso ink in light mode, the espresso bar (with a cream emphasis tint) in dark. The hairline separates it from the page since the surfaces are close in tone. */ .dc-navbar { background-color: var(--dc-navbar-bg); border-bottom: 1px solid var(--bs-border-color); } [data-bs-theme="dark"] .dc-navbar { --bs-emphasis-color-rgb: 242, 236, 227; } /* the navbar search is chrome, not a call to action: a quiet ghost button instead of a solid accent block */ .dc-navbar form .btn { --bs-btn-bg: transparent; --bs-btn-border-color: rgba(var(--bs-emphasis-color-rgb), 0.4); --bs-btn-color: rgba(var(--bs-emphasis-color-rgb), 0.8); --bs-btn-hover-bg: var(--dc-accent); --bs-btn-hover-border-color: var(--dc-accent); --bs-btn-hover-color: var(--dc-accent-contrast); --bs-btn-active-bg: var(--dc-accent-hover); --bs-btn-active-border-color: var(--dc-accent-hover); --bs-btn-active-color: var(--dc-accent-contrast); } .btn-primary { --bs-btn-bg: var(--dc-accent); --bs-btn-border-color: var(--dc-accent); --bs-btn-color: var(--dc-accent-contrast); --bs-btn-hover-bg: var(--dc-accent-hover); --bs-btn-hover-border-color: var(--dc-accent-hover); --bs-btn-hover-color: var(--dc-accent-contrast); --bs-btn-active-bg: var(--dc-accent-hover); --bs-btn-active-border-color: var(--dc-accent-hover); --bs-btn-active-color: var(--dc-accent-contrast); --bs-btn-disabled-bg: var(--dc-accent); --bs-btn-disabled-border-color: var(--dc-accent); --bs-btn-disabled-color: var(--dc-accent-contrast); } .btn-secondary { --bs-btn-bg: var(--dc-teal); --bs-btn-border-color: var(--dc-teal); --bs-btn-color: var(--dc-teal-contrast); --bs-btn-hover-bg: var(--dc-teal-hover); --bs-btn-hover-border-color: var(--dc-teal-hover); --bs-btn-hover-color: var(--dc-teal-contrast); --bs-btn-active-bg: var(--dc-teal-hover); --bs-btn-active-border-color: var(--dc-teal-hover); --bs-btn-active-color: var(--dc-teal-contrast); --bs-btn-disabled-bg: var(--dc-teal); --bs-btn-disabled-border-color: var(--dc-teal); --bs-btn-disabled-color: var(--dc-teal-contrast); } .card { --bs-card-bg: var(--dc-surface); } /* tables sit on the card surface, not the page plane (bootstrap 5.3 defaults --bs-table-bg to the body bg) */ .card .table { --bs-table-bg: transparent; } /* The "Current Nameservers"-style card headers are bare list-group-item elements outside any .list-group, so bootstrap 5.3's list-group variables never reach them (they're only defined on the .list-group parent) and the header would render transparent WITH ZERO PADDING. Style them directly: explicit padding, a latte band (deep roast in dark mode) with a caramel accent bar, and links inheriting the band ink. */ .card > .list-group-item { padding: 0.65rem 1rem; } .card > .list-group-item.active { background-color: var(--dc-header-bg); color: var(--dc-header-ink); border-color: var(--dc-header-bg); box-shadow: inset 0.25rem 0 0 var(--dc-accent); } .card > .list-group-item.active a:not(.btn) { color: inherit; } /* count pills on the bands: a quiet caramel-tinted chip instead of the text-bg-light cream (which disappears on a latte band); the !important matches text-bg-light's own */ .card > .list-group-item.active .badge { background-color: var(--dc-counter-bg) !important; color: var(--dc-counter-ink) !important; } /* action buttons on the bands (e.g. home's "View feeds") become ghost buttons in the band's ink rather than a floating light block */ .card > .list-group-item.active .btn-light { --bs-btn-bg: transparent; --bs-btn-border-color: color-mix(in srgb, var(--dc-header-ink) 45%, transparent); --bs-btn-color: var(--dc-header-ink); --bs-btn-hover-bg: var(--dc-accent); --bs-btn-hover-border-color: var(--dc-accent); --bs-btn-hover-color: var(--dc-accent-contrast); --bs-btn-active-bg: var(--dc-accent-hover); --bs-btn-active-border-color: var(--dc-accent-hover); --bs-btn-active-color: var(--dc-accent-contrast); } /* roomier count pills everywhere (#78 feedback) */ .badge.rounded-pill { padding: 0.45em 0.85em; } /* dc-blurb: the info/intro panels (home, search, list pages). A soft latte tint in light mode (the old espresso block fought the cream page), a slightly raised roast in dark. Body ink and link colors are the theme's own; links stay underlined so they read on the tinted surface. */ .card.dc-blurb { background-color: var(--dc-blurb-bg); border-color: var(--bs-border-color); } .card.dc-blurb .card-header { background-color: var(--dc-blurb-header-bg); border-bottom-color: var(--dc-blurb-header-bg); } .card.dc-blurb a:not(.btn) { text-decoration: underline; } /* info accents (badges, border-info cards) wear the teal instead of bootstrap's cyan; the pairing is computed per mode in --dc-teal-contrast */ .text-bg-info { color: var(--dc-teal-contrast) !important; background-color: var(--dc-teal) !important; } /* --- record page header + stat tiles (#78 phase 2) ----------------------- */ /* dc-page-header opens every record detail page: a type kicker, the record name with its status badge, and a one-line presence summary. Replaces the old three-card top row. */ .dc-page-header { margin: 0.25rem 0 1.25rem; } .dc-page-header .dc-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 600; color: var(--bs-secondary-color); } .dc-page-header .dc-page-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem; overflow-wrap: anywhere; /* punycode/subdomain names can be very long */ } .dc-page-header .dc-page-title .badge { font-size: 0.45em; } .dc-presence { color: var(--bs-secondary-color); margin-bottom: 0.35rem; } .dc-presence .dc-val { color: var(--bs-body-color); } .dc-presence .dc-sep { margin: 0 0.35rem; opacity: 0.5; } /* a presence line whose first fact is conditional can start with its separator; never show a leading one */ .dc-presence .dc-sep:first-child { display: none; } /* dc-chip: small linked pills in the header (other record types, parent zone); plain .badge sets no color, so anchors keep the theme link color */ .badge.dc-chip { background-color: var(--dc-counter-bg); } /* dc-hero: the home page's search-first opening section */ .dc-hero { padding: 2.25rem 0 1.5rem; text-align: center; } .dc-hero h1 { margin-bottom: 1.25rem; } .dc-hero form { display: flex; gap: 0.5rem; max-width: 40rem; margin: 0 auto 1.25rem; } .dc-hero .dc-hero-blurb { max-width: 46rem; margin: 0 auto 0.75rem; color: var(--bs-secondary-color); } /* dc-stats: the quick-stat tile row under the header */ .dc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.75rem; } .dc-tile { background-color: var(--dc-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 0.75rem 1rem; text-align: center; } .dc-tile .dc-tile-value { font-size: 1.25rem; font-weight: 600; line-height: 1.3; } .dc-tile .dc-tile-label { font-size: 0.85rem; color: var(--bs-secondary-color); } /* linked tiles (home page stats) stay in body ink and glow caramel on hover */ a.dc-tile { display: block; color: var(--bs-body-color); text-decoration: none; } a.dc-tile:hover, a.dc-tile:focus { border-color: var(--dc-accent); } /* sortable tables (#78 phase 3, sort.js): clickable headers with an arrow reflecting aria-sort; a faint two-way hint appears on hover for columns that aren't currently sorted */ table.dc-sortable thead th { cursor: pointer; user-select: none; white-space: nowrap; } table.dc-sortable thead th::after { display: inline-block; width: 1em; margin-left: 0.15em; color: var(--dc-accent); content: ""; } table.dc-sortable thead th:hover::after { content: "↕"; opacity: 0.45; } table.dc-sortable thead th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; } table.dc-sortable thead th[aria-sort="descending"]::after { content: "↓"; opacity: 1; } /* mobile: keep wide tables scrollable inside their card instead of stretching the page; the wrapper also owns the card's rounded corners */ .card > .table-responsive { border-radius: inherit; } /* the wide data tables (all sortable) escape the site's fixed table layout on small screens: give them a real minimum width so the responsive wrapper scrolls horizontally instead of crushing 5-6 columns */ @media (max-width: 991.98px) { .table-responsive > .dc-sortable { table-layout: auto; min-width: 40rem; } } /* home-page daily feed stat tiles: the same mode-invariant hues as the New/Removed/Moved chart traces below them (chartPalette in charts.js) */ .dc-stat-new { color: #008300; } .dc-stat-removed { color: #e66767; } .dc-stat-moved { color: #c98500; }