/*! * Global DNS - Design system * * Token-driven styling for the public site: sticky header, tool pages and * result components. Light and dark themes are real palettes driven by * [data-theme] on - no inversion filters. * * --gd-primary / --gd-primary-ink are injected inline from the app settings. */ /* ========================================================================== Tokens ========================================================================== */ :root { color-scheme: light; /* Brand (overridden inline from app settings) */ --gd-primary: #2563eb; --gd-primary-ink: #1d4ed8; --gd-primary-soft: rgba(37, 99, 235, .10); --gd-primary-tint: rgba(37, 99, 235, .18); --gd-on-primary: #ffffff; /* Surfaces */ --gd-bg: #f6f7f9; --gd-surface: #ffffff; --gd-surface-2: #f4f5f8; --gd-surface-3: #eceef3; --gd-border: #e3e6ec; --gd-border-strong: #cfd4de; --gd-hairline: #eef0f4; --gd-overlay: rgba(15, 23, 42, .45); /* Text */ --gd-heading: #101828; --gd-body: #475467; --gd-muted: #667085; --gd-faint: #98a2b3; /* Semantic */ --gd-ok: #067647; --gd-ok-soft: #dcfae6; --gd-warn: #b54708; --gd-warn-soft: #fef0c7; --gd-danger: #b42318; --gd-danger-soft: #fee4e2; --gd-info: #175cd3; --gd-info-soft: #d1e9ff; /* Type */ --gd-fs-xs: .75rem; --gd-fs-sm: .8125rem; --gd-fs-md: .9375rem; --gd-fs-lg: 1.0625rem; --gd-fs-xl: 1.375rem; --gd-fs-2xl: 1.75rem; /* Space */ --gd-sp-1: 4px; --gd-sp-2: 8px; --gd-sp-3: 12px; --gd-sp-4: 16px; --gd-sp-5: 24px; --gd-sp-6: 32px; /* Radius */ --gd-r-sm: 6px; --gd-r-md: 10px; --gd-r-lg: 14px; --gd-r-xl: 18px; --gd-r-pill: 999px; /* Elevation */ --gd-sh-1: 0 1px 2px rgba(16, 24, 40, .05); --gd-sh-2: 0 4px 12px -2px rgba(16, 24, 40, .08), 0 2px 6px -2px rgba(16, 24, 40, .04); --gd-sh-3: 0 12px 32px -8px rgba(16, 24, 40, .16), 0 4px 10px -4px rgba(16, 24, 40, .06); --gd-ring: 0 0 0 3px var(--gd-primary-soft); --gd-ease: cubic-bezier(.2, 0, .2, 1); --gd-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* --gd-header-h is the layout floor (drives min-height). --gd-header-offset is the measured height, written by tools.js, and must never feed back into the header's own box or it grows by the border width on every observation. */ --gd-header-h: 68px; --gd-header-offset: 68px; } /* html[...] rather than [...] on purpose: the per-site brand colours are emitted from Blade in a :root block that sits *after* this file, so the dark overrides need one extra point of specificity to win. */ html[data-theme="dark"] { color-scheme: dark; --gd-on-primary: #ffffff; --gd-bg: #0b0e14; --gd-surface: #12161f; --gd-surface-2: #181d28; --gd-surface-3: #212734; --gd-border: #242b38; --gd-border-strong: #333c4d; --gd-hairline: #1c222d; --gd-overlay: rgba(2, 4, 8, .65); --gd-heading: #f2f4f7; --gd-body: #c3cad6; --gd-muted: #98a2b3; --gd-faint: #6b7688; --gd-ok: #5fd39a; --gd-ok-soft: rgba(23, 178, 106, .16); --gd-warn: #f5b544; --gd-warn-soft: rgba(247, 144, 9, .16); --gd-danger: #ff8a80; --gd-danger-soft: rgba(240, 68, 56, .16); --gd-info: #7cc3ff; --gd-info-soft: rgba(41, 112, 255, .18); --gd-sh-1: 0 1px 2px rgba(0, 0, 0, .4); --gd-sh-2: 0 4px 14px -2px rgba(0, 0, 0, .5); --gd-sh-3: 0 16px 40px -12px rgba(0, 0, 0, .65); } /* Brand colours are chosen against a white page, so on a dark surface they get lifted towards white for text and icon use. Guarded by @supports: without color-mix the raw brand colour is kept rather than breaking the token. */ @supports (color: color-mix(in srgb, red 50%, blue)) { html[data-theme="dark"] { --gd-primary: color-mix(in srgb, var(--gd-primary-base, #2563eb) 48%, #ffffff); --gd-primary-ink: color-mix(in srgb, var(--gd-primary-base, #2563eb) 72%, #ffffff); --gd-primary-soft: color-mix(in srgb, var(--gd-primary-base, #2563eb) 30%, transparent); --gd-primary-tint: color-mix(in srgb, var(--gd-primary-base, #2563eb) 45%, transparent); } } /* ========================================================================== Base overrides for the bundled Bootstrap 4 theme ========================================================================== */ body { background-color: var(--gd-bg); color: var(--gd-body); transition: background-color .2s var(--gd-ease), color .2s var(--gd-ease); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] strong, [data-theme="dark"] b { color: var(--gd-heading); } [data-theme="dark"] .text-muted { color: var(--gd-muted) !important; } [data-theme="dark"] hr { border-top-color: var(--gd-border); } [data-theme="dark"] a:not(.gd-tool-card):not(.gd-dd__item):not(.gd-nav__link) { color: var(--gd-primary); } [data-theme="dark"] .ql-editor, [data-theme="dark"] .ql-editor p, [data-theme="dark"] .ql-editor li, [data-theme="dark"] .ql-editor span { color: var(--gd-body); } [data-theme="dark"] .form-control { background-color: var(--gd-surface-2); border-color: var(--gd-border-strong); color: var(--gd-heading); } [data-theme="dark"] .form-control::placeholder { color: var(--gd-faint); } [data-theme="dark"] .form-control:focus { background-color: var(--gd-surface-2); color: var(--gd-heading); } [data-theme="dark"] select.form-control option { background: var(--gd-surface-2); color: var(--gd-heading); } [data-theme="dark"] .list-group-item { background-color: var(--gd-surface); border-color: var(--gd-hairline); color: var(--gd-body); } [data-theme="dark"] .table, [data-theme="dark"] .table th, [data-theme="dark"] .table td { color: var(--gd-body); border-color: var(--gd-border); } [data-theme="dark"] .card { background-color: var(--gd-surface); border-color: var(--gd-border); } [data-theme="dark"] .dropdown-menu { background-color: var(--gd-surface); border-color: var(--gd-border); } [data-theme="dark"] .dropdown-item { color: var(--gd-body); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--gd-surface-2); color: var(--gd-heading); } [data-theme="dark"] .navbar-light .navbar-nav .nav-link { color: var(--gd-body); } [data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover { color: var(--gd-heading); border-color: var(--gd-border-strong); } [data-theme="dark"] .spinner-border { color: var(--gd-primary); } /* Propagation server list (styled inline in the app view) */ [data-theme="dark"] .servers { border-color: var(--gd-border); } [data-theme="dark"] .servers .list-group-item .result { color: var(--gd-muted); } [data-theme="dark"] .servers::-webkit-scrollbar-track { background: var(--gd-surface-2); } [data-theme="dark"] .servers::-webkit-scrollbar-thumb { background: var(--gd-border-strong); } /* World map -- the SVG gets a viewBox from tools.js, so these let it scale with the container instead of keeping the pixel width it was drawn at. */ #map svg { display: block; width: 100%; height: auto; max-height: 400px; } #map .jvectormap-container { width: 100%; } [data-theme="dark"] .jvectormap-container { background: transparent !important; } [data-theme="dark"] .jvectormap-zoomin, [data-theme="dark"] .jvectormap-zoomout { background: var(--gd-surface-3); color: var(--gd-heading); } /* ========================================================================== Sticky header ========================================================================== */ .gd-header { position: sticky; top: 0; z-index: 1040; background: color-mix(in srgb, var(--gd-surface) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s var(--gd-ease), box-shadow .2s var(--gd-ease), background-color .2s var(--gd-ease); } @supports not (background: color-mix(in srgb, red 50%, blue)) { .gd-header { background: var(--gd-surface); } } .gd-header.is-stuck { border-bottom-color: var(--gd-border); box-shadow: var(--gd-sh-2); } .gd-header__inner { display: flex; align-items: center; gap: var(--gd-sp-4); min-height: var(--gd-header-h); } .gd-header__brand { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: auto; text-decoration: none !important; } .gd-header__brand img, .gd-logo__custom { max-height: 44px; width: auto; display: block; } /* --- wordmark ----------------------------------------------------------- */ .gd-logo__mark { width: 42px; height: 42px; flex: 0 0 auto; display: block; } .gd-logo__text { margin-left: 11px; font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -.025em; white-space: nowrap; } .gd-logo__dns { color: var(--gd-heading); } /* The badge is a fixed brand blue, so the wordmark accent is pinned to the same blue rather than the configurable --gd-primary. */ .gd-logo__check { color: #0155b5; } [data-theme="dark"] .gd-logo__check { color: #6dafff; } @media (max-width: 400px) { .gd-logo__text { font-size: 1.24rem; } .gd-logo__mark { width: 36px; height: 36px; } } .gd-header__actions { display: flex; align-items: center; gap: var(--gd-sp-2); flex: 0 0 auto; } /* --- nav ---------------------------------------------------------------- */ .gd-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .gd-nav__item { position: relative; } .gd-nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 0; border-radius: var(--gd-r-md); background: transparent; color: var(--gd-body); font-size: var(--gd-fs-md); font-weight: 550; line-height: 1.4; white-space: nowrap; text-decoration: none !important; cursor: pointer; transition: background-color .15s var(--gd-ease), color .15s var(--gd-ease); } .gd-nav__link:hover, .gd-nav__link:focus-visible { background: var(--gd-surface-2); color: var(--gd-heading); outline: none; } .gd-nav__link:focus-visible { box-shadow: var(--gd-ring); } .gd-nav__item.is-active > .gd-nav__link, .gd-nav__link.is-active { background: var(--gd-primary-soft); color: var(--gd-primary); } .gd-nav__chev { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .2s var(--gd-ease); opacity: .7; } .gd-dd.is-open > .gd-nav__link .gd-nav__chev { transform: rotate(180deg); } .gd-dd.is-open > .gd-nav__link { background: var(--gd-surface-2); color: var(--gd-heading); } /* --- dropdown panel ----------------------------------------------------- */ .gd-dd__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 232px; padding: 6px; background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-r-lg); box-shadow: var(--gd-sh-3); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: top left; transition: opacity .16s var(--gd-ease), transform .16s var(--gd-ease), visibility .16s; z-index: 20; } .gd-dd__menu--right { left: auto; right: 0; transform-origin: top right; } .gd-dd.is-open > .gd-dd__menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .gd-dd__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--gd-r-sm); color: var(--gd-body); font-size: var(--gd-fs-md); text-decoration: none !important; transition: background-color .13s var(--gd-ease), color .13s var(--gd-ease); } .gd-dd__item:hover, .gd-dd__item:focus-visible { background: var(--gd-surface-2); color: var(--gd-heading); outline: none; } .gd-dd__item i { width: 18px; text-align: center; font-size: .85rem; color: var(--gd-primary); opacity: .85; flex: 0 0 auto; } /* --- theme toggle & burger ---------------------------------------------- */ .gd-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--gd-border); border-radius: var(--gd-r-md); background: var(--gd-surface); color: var(--gd-body); cursor: pointer; transition: background-color .15s var(--gd-ease), color .15s var(--gd-ease), border-color .15s var(--gd-ease); } .gd-icon-btn:hover { background: var(--gd-surface-2); color: var(--gd-heading); border-color: var(--gd-border-strong); } .gd-icon-btn:focus-visible { outline: none; box-shadow: var(--gd-ring); } .gd-icon-btn svg { width: 18px; height: 18px; } .gd-theme-toggle .gd-icon-moon { display: none; } [data-theme="dark"] .gd-theme-toggle .gd-icon-sun { display: none; } [data-theme="dark"] .gd-theme-toggle .gd-icon-moon { display: block; } .gd-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; } .gd-burger span { display: block; width: 17px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s var(--gd-ease), opacity .2s var(--gd-ease); } .gd-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .gd-burger.is-open span:nth-child(2) { opacity: 0; } .gd-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* --- mobile ------------------------------------------------------------- */ @media (max-width: 991.98px) { .gd-burger { display: inline-flex; } .gd-nav { position: fixed; top: var(--gd-header-offset); left: 0; right: 0; max-height: calc(100vh - var(--gd-header-offset)); overflow-y: auto; padding: var(--gd-sp-3) var(--gd-sp-4) var(--gd-sp-5); background: var(--gd-surface); border-bottom: 1px solid var(--gd-border); box-shadow: var(--gd-sh-3); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s var(--gd-ease), transform .18s var(--gd-ease), visibility .18s; } .gd-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .gd-nav__list { display: block; } .gd-nav__item { border-bottom: 1px solid var(--gd-hairline); } .gd-nav__item:last-child { border-bottom: 0; } .gd-nav__link { width: 100%; justify-content: space-between; padding: 12px 4px; border-radius: 0; font-size: 1rem; } .gd-nav__link:hover, .gd-dd.is-open > .gd-nav__link { background: transparent; } .gd-dd__menu { position: static; min-width: 0; padding: 0 0 var(--gd-sp-2) var(--gd-sp-3); border: 0; border-radius: 0; box-shadow: none; background: transparent; display: none; opacity: 1; visibility: visible; transform: none; transition: none; } .gd-dd.is-open > .gd-dd__menu { display: block; } .gd-dd__item { padding: 9px 8px; } } /* ========================================================================== Tool shell ========================================================================== */ .gd-tool { margin-top: var(--gd-sp-5); } .gd-panel { background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-r-lg); box-shadow: var(--gd-sh-1); padding: var(--gd-sp-5); } /* ========================================================================== Results ========================================================================== */ .gd-result { margin-top: var(--gd-sp-4); } .gd-result__card { background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-r-lg); box-shadow: var(--gd-sh-1); overflow: hidden; } .gd-result__card + .gd-result__card { margin-top: var(--gd-sp-4); } .gd-result__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gd-sp-3); flex-wrap: wrap; padding: var(--gd-sp-3) var(--gd-sp-4); background: var(--gd-surface-2); border-bottom: 1px solid var(--gd-border); } .gd-result__head h4 { margin: 0; font-size: var(--gd-fs-md); font-weight: 650; color: var(--gd-heading); } .gd-result__body { padding: var(--gd-sp-4); } .gd-result__body--flush { padding: 0; overflow-x: auto; } /* Data table */ .gd-table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--gd-fs-md); } .gd-table th, .gd-table td { padding: 10px 16px; border-bottom: 1px solid var(--gd-hairline); text-align: left; vertical-align: top; color: var(--gd-body); } .gd-table thead th { background: var(--gd-surface-2); color: var(--gd-muted); font-size: var(--gd-fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--gd-border); white-space: nowrap; } .gd-table tbody tr:last-child th, .gd-table tbody tr:last-child td { border-bottom: 0; } .gd-table tbody tr:hover { background: var(--gd-surface-2); } .gd-table th.gd-key { width: 210px; color: var(--gd-heading); font-weight: 600; white-space: nowrap; } .gd-table td.gd-val { word-break: break-word; } .gd-mono { font-family: var(--gd-mono); font-size: var(--gd-fs-sm); color: var(--gd-heading); } /* Key/value grid */ .gd-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gd-sp-3); } .gd-kv__item { background: var(--gd-surface-2); border: 1px solid var(--gd-border); border-radius: var(--gd-r-md); padding: var(--gd-sp-3) var(--gd-sp-4); } .gd-kv__label { display: block; font-size: var(--gd-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--gd-muted); margin-bottom: 2px; } .gd-kv__value { font-size: var(--gd-fs-lg); font-weight: 650; color: var(--gd-heading); word-break: break-word; } /* ========================================================================== Badges ========================================================================== */ .gd-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--gd-r-pill); font-size: var(--gd-fs-xs); font-weight: 650; line-height: 1.5; white-space: nowrap; } .gd-badge--ok { background: var(--gd-ok-soft); color: var(--gd-ok); } .gd-badge--warn { background: var(--gd-warn-soft); color: var(--gd-warn); } .gd-badge--danger { background: var(--gd-danger-soft); color: var(--gd-danger); } .gd-badge--info { background: var(--gd-info-soft); color: var(--gd-info); } .gd-badge--muted { background: var(--gd-surface-3); color: var(--gd-muted); } .gd-type-pill { display: inline-block; min-width: 58px; text-align: center; padding: 2px 9px; border-radius: var(--gd-r-sm); background: var(--gd-primary-soft); color: var(--gd-primary); font-family: var(--gd-mono); font-size: var(--gd-fs-xs); font-weight: 700; } /* ========================================================================== Score dial & check list ========================================================================== */ .gd-score { display: flex; align-items: center; gap: var(--gd-sp-5); flex-wrap: wrap; } .gd-score__dial { position: relative; width: 116px; height: 116px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; } .gd-score__dial::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--gd-surface); } .gd-score__num { position: relative; z-index: 1; font-size: 1.9rem; font-weight: 750; color: var(--gd-heading); line-height: 1; text-align: center; } .gd-score__num small { display: block; font-size: var(--gd-fs-xs); font-weight: 600; color: var(--gd-muted); text-transform: uppercase; letter-spacing: .07em; margin-top: 3px; } .gd-score__meta { flex: 1 1 240px; min-width: 0; } .gd-score__meta h5 { font-size: var(--gd-fs-lg); font-weight: 700; color: var(--gd-heading); margin: 0 0 4px; } .gd-score__meta p { margin: 0; color: var(--gd-muted); font-size: var(--gd-fs-md); } .gd-checks { list-style: none; margin: 0; padding: 0; } .gd-checks li { display: flex; align-items: flex-start; gap: var(--gd-sp-3); padding: 11px var(--gd-sp-4); border-bottom: 1px solid var(--gd-hairline); } .gd-checks li:last-child { border-bottom: 0; } .gd-checks__icon { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; margin-top: 1px; } .gd-checks__icon--ok { background: var(--gd-ok-soft); color: var(--gd-ok); } .gd-checks__icon--warn { background: var(--gd-warn-soft); color: var(--gd-warn); } .gd-checks__icon--fail { background: var(--gd-danger-soft); color: var(--gd-danger); } .gd-checks__text { min-width: 0; flex: 1; } .gd-checks__text strong { display: block; font-size: var(--gd-fs-md); font-weight: 600; color: var(--gd-heading); } .gd-checks__text span { display: block; font-size: var(--gd-fs-sm); color: var(--gd-muted); word-break: break-word; } /* ========================================================================== Copy button, code, empty & loading states ========================================================================== */ .gd-copy { border: 1px solid var(--gd-border); background: var(--gd-surface); color: var(--gd-muted); border-radius: var(--gd-r-sm); font-size: var(--gd-fs-xs); font-weight: 600; padding: 3px 9px; cursor: pointer; transition: all .15s var(--gd-ease); line-height: 1.6; } .gd-copy:hover { border-color: var(--gd-primary); color: var(--gd-primary); background: var(--gd-primary-soft); } .gd-copy.is-done { border-color: var(--gd-ok); color: var(--gd-ok); background: var(--gd-ok-soft); } .gd-pre { margin: 0; padding: var(--gd-sp-4); background: #0d1117; color: #e6edf3; font-family: var(--gd-mono); font-size: var(--gd-fs-sm); line-height: 1.65; border-radius: var(--gd-r-md); border: 1px solid var(--gd-border); overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .gd-empty { text-align: center; padding: var(--gd-sp-6) var(--gd-sp-4); color: var(--gd-muted); } .gd-empty i { display: block; font-size: 2rem; color: var(--gd-faint); margin-bottom: var(--gd-sp-3); } .gd-empty strong { display: block; color: var(--gd-heading); font-size: var(--gd-fs-lg); margin-bottom: 4px; } .gd-loading { display: flex; align-items: center; justify-content: center; gap: var(--gd-sp-3); padding: var(--gd-sp-6) var(--gd-sp-4); color: var(--gd-muted); font-size: var(--gd-fs-md); } .gd-spinner { width: 20px; height: 20px; border: 2px solid var(--gd-border); border-top-color: var(--gd-primary); border-radius: 50%; animation: gd-spin .7s linear infinite; } @keyframes gd-spin { to { transform: rotate(360deg); } } /* ========================================================================== Public DNS cards ========================================================================== */ .gd-dns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--gd-sp-4); } .gd-dns-card { background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-r-lg); padding: var(--gd-sp-4); box-shadow: var(--gd-sh-1); transition: transform .2s var(--gd-ease), box-shadow .2s var(--gd-ease), border-color .2s var(--gd-ease); } .gd-dns-card:hover { transform: translateY(-3px); box-shadow: var(--gd-sh-2); border-color: var(--gd-primary); } .gd-dns-card__name { font-size: var(--gd-fs-lg); font-weight: 700; color: var(--gd-heading); margin: 0 0 2px; } .gd-dns-card__provider { font-size: var(--gd-fs-xs); color: var(--gd-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--gd-sp-3); } .gd-dns-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gd-sp-2); padding: 5px 0; border-top: 1px solid var(--gd-hairline); } .gd-dns-row span:first-child { font-size: var(--gd-fs-xs); color: var(--gd-muted); text-transform: uppercase; letter-spacing: .05em; flex: 0 0 auto; } .gd-dns-row code { font-family: var(--gd-mono); font-size: var(--gd-fs-sm); color: var(--gd-heading); background: none; padding: 0; text-align: right; word-break: break-all; } .gd-dns-card__features { margin-top: var(--gd-sp-3); padding-top: var(--gd-sp-3); border-top: 1px solid var(--gd-hairline); display: flex; flex-wrap: wrap; gap: 5px; } /* ========================================================================== Home page tool directory ========================================================================== */ .gd-tools-section { background: var(--gd-surface-2); border: 1px solid var(--gd-border); border-radius: var(--gd-r-xl); padding: var(--gd-sp-6) var(--gd-sp-5); margin-top: var(--gd-sp-6); } .gd-section-title { font-size: var(--gd-fs-2xl); font-weight: 750; color: var(--gd-heading); margin: 0 0 4px; letter-spacing: -.015em; } .gd-section-sub { color: var(--gd-muted); font-size: var(--gd-fs-md); margin: 0; } .gd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--gd-sp-4); /* Always the raw brand gradient so white text keeps its contrast in both themes. */ background: linear-gradient(135deg, var(--gd-primary-ink-base, var(--gd-primary-ink)), var(--gd-primary-base, var(--gd-primary))); border-radius: var(--gd-r-lg); padding: var(--gd-sp-5); color: var(--gd-on-primary); margin: var(--gd-sp-5) 0; box-shadow: var(--gd-sh-2); } .gd-stats__item { text-align: center; } .gd-stats__num { font-size: 1.7rem; font-weight: 750; line-height: 1.1; } .gd-stats__label { font-size: var(--gd-fs-sm); opacity: .9; } .gd-cat { background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-r-lg); overflow: hidden; margin-bottom: var(--gd-sp-3); } .gd-cat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gd-sp-3); padding: var(--gd-sp-3) var(--gd-sp-4); background: var(--gd-surface); border-bottom: 1px solid transparent; cursor: pointer; transition: background-color .18s var(--gd-ease); } .gd-cat__head:hover { background: var(--gd-surface-2); } .gd-cat__head[aria-expanded="true"] { border-bottom-color: var(--gd-border); } .gd-cat__head h5 { margin: 0; font-size: var(--gd-fs-md); font-weight: 650; color: var(--gd-heading); display: flex; align-items: center; gap: var(--gd-sp-2); } .gd-cat__count { background: var(--gd-surface-3); color: var(--gd-muted); font-size: var(--gd-fs-xs); font-weight: 700; padding: 2px 9px; border-radius: var(--gd-r-pill); } .gd-cat__chev { color: var(--gd-faint); transition: transform .25s var(--gd-ease); margin-left: var(--gd-sp-2); } .gd-cat__head[aria-expanded="true"] .gd-cat__chev { transform: rotate(180deg); } .gd-cat__body { padding: var(--gd-sp-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: var(--gd-sp-3); } .gd-tool-card { display: block; background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-r-md); padding: var(--gd-sp-4) var(--gd-sp-3); text-align: center; text-decoration: none !important; box-shadow: var(--gd-sh-1); transition: transform .2s var(--gd-ease), box-shadow .2s var(--gd-ease), border-color .2s var(--gd-ease); } .gd-tool-card:hover { transform: translateY(-3px); box-shadow: var(--gd-sh-2); border-color: var(--gd-primary); } .gd-tool-card__icon { width: 44px; height: 44px; border-radius: var(--gd-r-md); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: var(--gd-sp-2); background: var(--gd-primary-soft); color: var(--gd-primary); } .gd-tool-card h6 { font-size: var(--gd-fs-md); font-weight: 650; color: var(--gd-heading); margin: 0 0 2px; } .gd-tool-card p { font-size: var(--gd-fs-xs); color: var(--gd-muted); margin: 0; line-height: 1.45; } /* Footer brand block */ .gd-footer-brand { display: flex; align-items: center; gap: var(--gd-sp-4) var(--gd-sp-5); flex-wrap: wrap; margin-top: var(--gd-sp-6); } .gd-footer-brand__logo { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none !important; } .gd-footer-brand__tag { margin: 0; flex: 1 1 320px; min-width: 0; color: var(--gd-muted); font-size: var(--gd-fs-sm); line-height: 1.6; max-width: 62ch; } /* Footer link columns */ .gd-footer-tools { border-top: 1px solid var(--gd-border); padding-top: var(--gd-sp-5); margin-top: var(--gd-sp-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gd-sp-4); } .gd-footer-tools h6 { color: var(--gd-muted); font-size: var(--gd-fs-xs); text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--gd-sp-2); } .gd-footer-tools a { display: block; color: var(--gd-body) !important; font-size: var(--gd-fs-sm); padding: 3px 0; text-decoration: none; transition: color .15s var(--gd-ease); } .gd-footer-tools a:hover { color: var(--gd-primary) !important; } /* ========================================================================== Related tools strip ========================================================================== */ .gd-related { margin-top: var(--gd-sp-6); } .gd-related h5 { font-size: var(--gd-fs-md); font-weight: 650; color: var(--gd-heading); margin-bottom: var(--gd-sp-3); } .gd-related__list { display: flex; flex-wrap: wrap; gap: var(--gd-sp-2); } .gd-related__list a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--gd-border); border-radius: var(--gd-r-pill); background: var(--gd-surface); color: var(--gd-body) !important; font-size: var(--gd-fs-sm); font-weight: 550; text-decoration: none; transition: all .15s var(--gd-ease); } .gd-related__list a:hover { border-color: var(--gd-primary); color: var(--gd-primary) !important; background: var(--gd-primary-soft); text-decoration: none; } /* ========================================================================== Form polish ========================================================================== */ .input .form-control, #gd-tool-filter { border-radius: var(--gd-r-md); border-color: var(--gd-border-strong); font-size: var(--gd-fs-md); height: auto; padding: 10px 14px; transition: border-color .15s var(--gd-ease), box-shadow .15s var(--gd-ease); } .input .form-control:focus, #gd-tool-filter:focus { border-color: var(--gd-primary); box-shadow: var(--gd-ring); } #gd-tool-filter { background: var(--gd-surface); color: var(--gd-heading); } .input input[type=submit] { border-radius: var(--gd-r-md); font-weight: 650; border: 0; padding: 10px 14px; transition: filter .15s var(--gd-ease); } .input input[type=submit]:hover:not(:disabled) { filter: brightness(.94); } .input input[type=submit]:disabled { opacity: .6; cursor: not-allowed; } .form-text { color: var(--gd-muted) !important; } /* ========================================================================== Anchors & motion ========================================================================== */ html { scroll-behavior: smooth; } [id] { scroll-margin-top: calc(var(--gd-header-offset) + 24px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 767.98px) { .gd-tools-section { padding: var(--gd-sp-5) var(--gd-sp-3); } .gd-table th.gd-key { width: auto; } .gd-table th, .gd-table td { padding: 9px 12px; font-size: var(--gd-fs-sm); } .gd-score { gap: var(--gd-sp-4); } .gd-score__dial { width: 96px; height: 96px; } .gd-cat__body { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }