/* ============================================================================ uniDNX Design System — v1.0.0 Navy/azure blue · softwareni-style · 3-state saved light/dark. Scoping contract: - TOKENS live on :root (harmless variables; they restyle nothing on their own). - COMPONENTS are all namespaced `.udx-*` so they never collide with Astra, Bootstrap, DataTables, Elementor or plugin CSS on the live site. - There is NO global restyle of body/a/h1/etc. here — so dropping this onto the current theme is safe. Global base lives in the uniDNX 2026 theme (which opts every surface in). To opt a container in on the OLD theme, wrap it in `.udx-scope`. ========================================================================== */ /* ---------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root{ --udx-logo:url(../img/unidnx-logo-black.png); /* light (blue-biased neutrals) */ --udx-paper:oklch(0.981 0.006 250); --udx-panel:oklch(0.966 0.008 250); --udx-panel2:oklch(0.945 0.011 250); --udx-ink:oklch(0.24 0.035 260); --udx-ink2:oklch(0.5 0.045 255); --udx-ink3:oklch(0.64 0.035 252); --udx-line:oklch(0.9 0.014 250); --udx-hair:oklch(0.935 0.01 250); --udx-accent:#1c6fb0; --udx-ok:#2f8a5b; --udx-warn:#b26a10; --udx-crit:#c0453f; --udx-shadow:0 1px 14px oklch(0 0 0 / .05); --udx-shadow-card:0 1px 2px oklch(0 0 0 / .04), 0 8px 24px oklch(0 0 0 / .05); /* type + rhythm */ --udx-font:'Helvetica Neue',Helvetica,Arial,sans-serif; --udx-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; --udx-maxw:1120px; --udx-pad:clamp(20px,4vw,52px); } @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --udx-paper:oklch(0.165 0.05 264); --udx-panel:oklch(0.215 0.052 263); --udx-panel2:oklch(0.255 0.055 262); --udx-ink:oklch(0.95 0.012 250); --udx-ink2:oklch(0.72 0.035 248); --udx-ink3:oklch(0.56 0.04 253); --udx-line:oklch(0.325 0.05 262); --udx-hair:oklch(0.275 0.045 263); --udx-accent:#3f97da; --udx-ok:color-mix(in oklab,#2f8a5b 52%,white); --udx-warn:color-mix(in oklab,#b26a10 58%,white); --udx-crit:color-mix(in oklab,#c0453f 54%,white); --udx-shadow:0 1px 18px oklch(0 0 0 / .5); --udx-shadow-card:0 1px 2px oklch(0 0 0 / .35), 0 12px 32px oklch(0 0 0 / .42); }} :root[data-theme="light"]{ --udx-paper:oklch(0.981 0.006 250); --udx-panel:oklch(0.966 0.008 250); --udx-panel2:oklch(0.945 0.011 250); --udx-ink:oklch(0.24 0.035 260); --udx-ink2:oklch(0.5 0.045 255); --udx-ink3:oklch(0.64 0.035 252); --udx-line:oklch(0.9 0.014 250); --udx-hair:oklch(0.935 0.01 250); --udx-accent:#1c6fb0; --udx-ok:#2f8a5b; --udx-warn:#b26a10; --udx-crit:#c0453f; --udx-shadow:0 1px 14px oklch(0 0 0 / .05); --udx-shadow-card:0 1px 2px oklch(0 0 0 / .04), 0 8px 24px oklch(0 0 0 / .05); } :root[data-theme="dark"]{ --udx-paper:oklch(0.165 0.05 264); --udx-panel:oklch(0.215 0.052 263); --udx-panel2:oklch(0.255 0.055 262); --udx-ink:oklch(0.95 0.012 250); --udx-ink2:oklch(0.72 0.035 248); --udx-ink3:oklch(0.56 0.04 253); --udx-line:oklch(0.325 0.05 262); --udx-hair:oklch(0.275 0.045 263); --udx-accent:#3f97da; --udx-ok:color-mix(in oklab,#2f8a5b 52%,white); --udx-warn:color-mix(in oklab,#b26a10 58%,white); --udx-crit:color-mix(in oklab,#c0453f 54%,white); --udx-shadow:0 1px 18px oklch(0 0 0 / .5); --udx-shadow-card:0 1px 2px oklch(0 0 0 / .35), 0 12px 32px oklch(0 0 0 / .42); } /* ---------------------------------------------------------------------------- 2. Opt-in base — wrap any region in .udx-scope to get the full treatment. The uniDNX 2026 theme applies these to directly instead. -------------------------------------------------------------------------- */ .udx-scope{ background:var(--udx-paper); color:var(--udx-ink); font-family:var(--udx-font); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .35s ease,color .35s ease; } .udx-scope .udx-mono,.udx-mono{font-family:var(--udx-mono)} .udx-wrap{max-width:var(--udx-maxw);margin:0 auto;padding:0 var(--udx-pad)} .udx-eyebrow{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--udx-ink2);font-weight:500;margin:0} .udx-selectable::selection{background:color-mix(in oklab,var(--udx-accent) 30%,transparent)} @media (prefers-reduced-motion: reduce){.udx-scope *,.udx-toggle,.udx-nav{transition-duration:.01ms !important;animation:none !important}} /* ---------------------------------------------------------------------------- 3. Wordmark (theme-tintable mask of the official logo) -------------------------------------------------------------------------- */ .udx-logo{ display:inline-block;width:84px;height:28px;background:var(--udx-ink); -webkit-mask:var(--udx-logo) left center/contain no-repeat; mask:var(--udx-logo) left center/contain no-repeat; transition:background .18s ease; } a:hover > .udx-logo,.udx-brand:hover .udx-logo{background:var(--udx-accent)} /* ---------------------------------------------------------------------------- 4. Nav (sticky blur) -------------------------------------------------------------------------- */ .udx-nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--udx-paper) 82%,transparent); backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease} .udx-nav.is-scrolled{border-bottom-color:var(--udx-line);box-shadow:var(--udx-shadow)} .udx-nav__bar{display:flex;align-items:center;gap:26px;padding:13px var(--udx-pad);max-width:var(--udx-maxw);margin:0 auto} .udx-brand{display:flex;align-items:center;gap:9px;margin-right:auto} .udx-nav__links{display:flex;align-items:center;gap:22px} .udx-nav__links a{font-size:13.5px;color:var(--udx-ink2);text-decoration:none} .udx-nav__links a:hover{color:var(--udx-ink)} .udx-nav__links a.is-active,.udx-nav__links .current-menu-item > a{color:var(--udx-ink);font-weight:500} .udx-nav__right{display:flex;align-items:center;gap:11px} @media (max-width:820px){.udx-nav__links{display:none}} /* ---------------------------------------------------------------------------- 5. Toggle -------------------------------------------------------------------------- */ .udx-toggle{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--udx-ink2); background:transparent;border:none;box-shadow:inset 0 0 0 1px var(--udx-line);padding:8px 12px;border-radius:100px; cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:box-shadow .2s ease,color .2s ease} .udx-toggle:hover{color:var(--udx-ink);box-shadow:inset 0 0 0 1px var(--udx-ink3)} .udx-toggle__dot{width:7px;height:7px;border-radius:100px;background:var(--udx-accent)} .udx-toggle--float{position:fixed;bottom:18px;right:18px;z-index:60; background:color-mix(in oklab,var(--udx-panel) 80%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} /* ---------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .udx-btn{font-size:13.5px;font-weight:500;padding:9px 16px;border-radius:6px;cursor:pointer;border:none; display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none; transition:transform .14s ease,opacity .2s ease,box-shadow .2s ease,color .2s ease,background .2s ease} .udx-btn--primary{color:var(--udx-paper);background:var(--udx-ink)} .udx-btn--primary:hover{transform:translateY(-1px);opacity:.92} .udx-btn--accent{color:#fff;background:var(--udx-accent)} .udx-btn--accent:hover{transform:translateY(-1px);opacity:.92} .udx-btn--ghost{color:var(--udx-ink);background:transparent;box-shadow:inset 0 0 0 1px var(--udx-line)} .udx-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--udx-ink3);color:var(--udx-accent)} .udx-btn .udx-ar{color:var(--udx-ink3)} /* ---------------------------------------------------------------------------- 7. Pills + EPP status codes -------------------------------------------------------------------------- */ .udx-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:100px;font-size:12px; font-weight:500;line-height:1.5;white-space:nowrap} .udx-pill__d{width:6px;height:6px;border-radius:100px;background:currentColor;flex:none} .udx-pill--ok{color:var(--udx-ok);background:color-mix(in oklab,var(--udx-ok) 14%,var(--udx-paper))} .udx-pill--warn{color:var(--udx-warn);background:color-mix(in oklab,var(--udx-warn) 16%,var(--udx-paper))} .udx-pill--crit{color:var(--udx-crit);background:color-mix(in oklab,var(--udx-crit) 15%,var(--udx-paper))} .udx-pill--info{color:var(--udx-accent);background:color-mix(in oklab,var(--udx-accent) 15%,var(--udx-paper))} .udx-pill--muted{color:var(--udx-ink3);background:var(--udx-panel2)} .udx-epp{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:100px;font-size:11.5px; font-weight:500;font-family:var(--udx-mono);white-space:nowrap} .udx-epp .udx-pill__d{width:6px;height:6px} .udx-epp--crit{color:var(--udx-crit);background:color-mix(in oklab,var(--udx-crit) 15%,var(--udx-paper))} .udx-epp--warn{color:var(--udx-warn);background:color-mix(in oklab,var(--udx-warn) 16%,var(--udx-paper))} .udx-epp--ok{color:var(--udx-ok);background:color-mix(in oklab,var(--udx-ok) 14%,var(--udx-paper))} .udx-rdapcode{font-size:12px;color:var(--udx-ink2);background:var(--udx-panel2);border:1px solid var(--udx-hair);border-radius:5px;padding:2px 7px;font-family:var(--udx-mono)} /* ---------------------------------------------------------------------------- 8. Cards + facts -------------------------------------------------------------------------- */ .udx-card{border:1px solid var(--udx-line);border-radius:12px;background:var(--udx-panel);box-shadow:var(--udx-shadow-card)} .udx-card__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border-bottom:1px solid var(--udx-hair)} .udx-card__t{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--udx-ink3);font-weight:600} .udx-card__x{font-size:12px;color:var(--udx-ink3)} .udx-card__body{padding:15px 18px;font-size:13.5px;color:var(--udx-ink2)} .udx-facts .udx-facts__row{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:11px 18px;border-bottom:1px solid var(--udx-hair);align-items:baseline} .udx-facts .udx-facts__row:last-child{border-bottom:none} .udx-facts .udx-k{font-size:12.5px;color:var(--udx-ink3)} .udx-facts .udx-v{font-size:13.5px;color:var(--udx-ink)} .udx-facts .udx-v.udx-mono{font-size:12.5px} /* Rich date value: nice date + relative diff (hover title = full UTC datetime + exact days). */ .udx-dateval{display:inline-flex;flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap;line-height:1.3;cursor:help} .udx-dateval__abs{font-family:var(--udx-mono);font-size:12.5px;color:var(--udx-ink);font-variant-numeric:tabular-nums} .udx-dateval__rel{font-size:11.5px;color:var(--udx-ink3)} .udx-dateval--warn .udx-dateval__rel{color:oklch(0.62 0.16 70);font-weight:500} .udx-dateval--crit .udx-dateval__abs,.udx-dateval--crit .udx-dateval__rel{color:oklch(0.6 0.19 25);font-weight:500} .udx-dateval--ok .udx-dateval__rel{color:oklch(0.6 0.13 150)} /* Favourite star (header action) + domain labels (domain_group taxonomy front-end). */ .udx-fav{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--udx-line);border-radius:9px;background:transparent;color:var(--udx-ink3);font-size:18px;line-height:1;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease} .udx-fav:hover{color:var(--udx-ink);border-color:var(--udx-ink3)} .udx-fav.is-on{color:oklch(0.8 0.16 85);border-color:color-mix(in oklab,oklch(0.8 0.16 85) 55%,var(--udx-line));background:color-mix(in oklab,oklch(0.8 0.16 85) 12%,transparent)} .udx-fav:disabled{opacity:.5;cursor:default} .udx-labels{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px} .udx-label{display:inline-flex;align-items:center;gap:2px;background:var(--udx-panel2);border:1px solid var(--udx-hair);border-radius:100px;padding:2px 4px 2px 10px;font-size:12px;line-height:1.6} .udx-label__t{color:var(--udx-ink2);text-decoration:none} .udx-label__t:hover{color:var(--udx-accent)} .udx-label__x{border:0;background:none;color:var(--udx-ink3);font-size:14px;line-height:1;cursor:pointer;padding:0 4px;border-radius:100px} .udx-label__x:hover{color:oklch(0.6 0.19 25)} .udx-label-add{border:1px dashed var(--udx-line);background:none;color:var(--udx-ink3);font:inherit;font-size:12px;border-radius:100px;padding:2px 10px;cursor:pointer} .udx-label-add:hover{color:var(--udx-accent);border-color:var(--udx-accent)} .udx-label-form{display:inline-flex;align-items:center;gap:6px} .udx-label-input{font:inherit;font-size:12.5px;padding:4px 9px;border:1px solid var(--udx-line);border-radius:7px;background:var(--udx-paper);color:var(--udx-ink);width:150px} .udx-label-input:focus{outline:1.5px solid var(--udx-accent);outline-offset:1px} .udx-label-save{font:inherit;font-size:12px;color:#fff;background:var(--udx-accent);border:1px solid var(--udx-accent);border-radius:7px;padding:4px 12px;cursor:pointer} .udx-label-msg{font-size:12px;color:oklch(0.6 0.19 25)} /* Click-to-select label picker (toggle known terms; create-new at the bottom). */ .udx-labelpick{display:none;flex-basis:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--udx-hair);border-radius:9px;background:var(--udx-panel2)} .udx-labelpick:not([hidden]){display:block} .udx-labelpick__list{display:flex;flex-wrap:wrap;gap:6px} .udx-pick{font:inherit;font-size:12px;color:var(--udx-ink2);background:var(--udx-panel);border:1px solid var(--udx-line);border-radius:100px;padding:3px 12px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease} .udx-pick:hover{border-color:var(--udx-ink3);color:var(--udx-ink)} .udx-pick.is-on{color:#fff;background:var(--udx-accent);border-color:var(--udx-accent)} .udx-pick:disabled{opacity:.5;cursor:default} .udx-labelpick__new{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--udx-hair)} .udx-labelpick__new .udx-label-input{flex:1;min-width:0} .udx-stack{display:flex;flex-direction:column;gap:2px} /* runway bar */ .udx-runway{display:inline-flex;align-items:center;gap:9px} .udx-runway__bar{width:120px;height:5px;border-radius:100px;background:var(--udx-panel2);overflow:hidden} .udx-runway__bar i{display:block;height:100%;border-radius:100px;background:var(--udx-ok)} .udx-runway__lbl{font-size:12px;color:var(--udx-ink3);font-variant-numeric:tabular-nums} .udx-fill-ok{background:var(--udx-ok)!important}.udx-fill-warn{background:var(--udx-warn)!important}.udx-fill-crit{background:var(--udx-crit)!important}.udx-fill-info{background:var(--udx-accent)!important} /* ---------------------------------------------------------------------------- 9. Stat tiles + chips -------------------------------------------------------------------------- */ .udx-stats{display:grid;gap:1px;background:var(--udx-line);border:1px solid var(--udx-line);border-radius:10px;overflow:hidden} .udx-stat{background:var(--udx-panel);padding:16px 18px;border:none;text-align:left;cursor:pointer;transition:background .16s;width:100%} .udx-stat:hover{background:color-mix(in oklab,var(--udx-accent) 6%,var(--udx-panel))} .udx-stat.is-sel{background:color-mix(in oklab,var(--udx-accent) 10%,var(--udx-panel));box-shadow:inset 0 -2px 0 var(--udx-accent)} .udx-stat__n{font-weight:300;font-size:28px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:var(--udx-ink)} .udx-stat__k{font-size:12px;color:var(--udx-ink2);margin-top:8px;display:flex;align-items:center;gap:6px} .udx-stat__k .udx-d{width:6px;height:6px;border-radius:100px;flex:none;background:var(--udx-ink3)} .udx-stat--crit .udx-stat__n{color:var(--udx-crit)}.udx-stat--warn .udx-stat__n{color:var(--udx-warn)}.udx-stat--ok .udx-stat__n{color:var(--udx-ok)} .udx-stat--crit .udx-d{background:var(--udx-crit)}.udx-stat--warn .udx-d{background:var(--udx-warn)}.udx-stat--ok .udx-d{background:var(--udx-ok)}.udx-stat--info .udx-d{background:var(--udx-accent)} .udx-chips{display:flex;gap:7px;flex-wrap:wrap} .udx-chip{font-size:12.5px;color:var(--udx-ink2);background:transparent;border:none;box-shadow:inset 0 0 0 1px var(--udx-line); padding:7px 13px;border-radius:100px;cursor:pointer;transition:box-shadow .18s,color .18s,background .18s} .udx-chip:hover{color:var(--udx-ink);box-shadow:inset 0 0 0 1px var(--udx-ink3)} .udx-chip.is-on{color:var(--udx-paper);background:var(--udx-ink);box-shadow:none} .udx-chip__c{font-variant-numeric:tabular-nums;opacity:.6;margin-left:4px} /* ---------------------------------------------------------------------------- 10. Tables -------------------------------------------------------------------------- */ .udx-tablecard{border:1px solid var(--udx-line);border-radius:11px;overflow:hidden;background:var(--udx-panel);box-shadow:var(--udx-shadow-card)} .udx-tscroll{overflow-x:auto} .udx-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px} .udx-table thead th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--udx-ink3); padding:11px 16px;border-bottom:1px solid var(--udx-line);background:var(--udx-panel2);white-space:nowrap} .udx-table thead th.udx-r{text-align:right} .udx-table tbody td{padding:12px 16px;border-bottom:1px solid var(--udx-hair);vertical-align:middle} .udx-table tbody tr:last-child td{border-bottom:none} .udx-table tbody tr{transition:background .15s ease} .udx-table tbody tr:hover{background:color-mix(in oklab,var(--udx-accent) 5%,var(--udx-panel))} .udx-table tbody tr.is-sel{background:color-mix(in oklab,var(--udx-accent) 9%,var(--udx-panel));box-shadow:inset 3px 0 0 var(--udx-accent)} .udx-table td.udx-r{text-align:right;white-space:nowrap} .udx-dname{font-family:var(--udx-mono);font-size:14px;color:var(--udx-ink);font-weight:500} .udx-dname .udx-tld{color:var(--udx-ink3);font-weight:400} .udx-cell-muted{color:var(--udx-ink2);font-size:13px} .udx-cell-num{font-variant-numeric:tabular-nums;color:var(--udx-ink2);font-size:13.5px;white-space:nowrap} .udx-rowbtn{color:var(--udx-ink3);background:transparent;border:none;box-shadow:inset 0 0 0 1px var(--udx-line); border-radius:6px;padding:5px 10px;cursor:pointer;font-size:12.5px;transition:box-shadow .18s,color .18s;text-decoration:none;display:inline-block} .udx-rowbtn:hover{color:var(--udx-accent);box-shadow:inset 0 0 0 1px var(--udx-accent)} /* ---------------------------------------------------------------------------- 11. Forms -------------------------------------------------------------------------- */ .udx-field-label{font-size:13.5px;font-weight:500;color:var(--udx-ink);display:block;margin:0 0 5px} .udx-field-hint{font-size:12.5px;color:var(--udx-ink3);margin:0 0 12px} .udx-field-hint code{font-family:var(--udx-mono);background:var(--udx-panel2);border:1px solid var(--udx-hair);border-radius:4px;padding:1px 5px;font-size:11.5px} .udx-field{width:100%;font-size:14px;color:var(--udx-ink);background:var(--udx-paper);border:1px solid var(--udx-line); border-radius:8px;padding:12px 14px;font-family:var(--udx-mono);line-height:1.6} .udx-field--sans{font-family:var(--udx-font)} textarea.udx-field{resize:vertical} .udx-field::placeholder{color:var(--udx-ink3)} .udx-field:focus{outline:none;border-color:var(--udx-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--udx-accent) 18%,transparent)} select.udx-field{cursor:pointer;font-size:13px} .udx-check{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--udx-ink2);cursor:pointer} .udx-check input{accent-color:var(--udx-accent);width:16px;height:16px} .udx-check small{color:var(--udx-ink3)} .udx-seg{display:inline-flex;background:var(--udx-panel2);border:1px solid var(--udx-line);border-radius:9px;padding:3px} .udx-seg button{font-size:13px;color:var(--udx-ink2);background:transparent;border:none;padding:6px 16px;border-radius:6px;cursor:pointer;transition:color .15s,background .15s} .udx-seg button.is-on{color:var(--udx-ink);background:var(--udx-panel);box-shadow:var(--udx-shadow)} .udx-progress__bar{height:6px;border-radius:100px;background:var(--udx-panel2);overflow:hidden} .udx-progress__bar i{display:block;height:100%;background:var(--udx-accent);border-radius:100px;transition:width .3s ease} .udx-progress__counts{display:flex;gap:16px;margin-top:9px;font-size:12.5px;color:var(--udx-ink3);font-variant-numeric:tabular-nums;flex-wrap:wrap} .udx-progress__counts b{color:var(--udx-ink);font-weight:500} .udx-search{position:relative;display:flex;align-items:center} .udx-search svg{position:absolute;left:13px;width:15px;height:15px;color:var(--udx-ink3);pointer-events:none} .udx-search input{width:100%;font-size:14px;color:var(--udx-ink);background:var(--udx-panel);border:1px solid var(--udx-line);border-radius:100px;padding:9px 14px 9px 36px} .udx-search input:focus{outline:none;border-color:var(--udx-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--udx-accent) 16%,transparent)} /* ---------------------------------------------------------------------------- 12. Skeleton loaders -------------------------------------------------------------------------- */ .udx-skel{height:12px;border-radius:6px;margin:8px 0;background:linear-gradient(90deg,var(--udx-panel2) 25%,var(--udx-hair) 37%,var(--udx-panel2) 63%);background-size:400% 100%;animation:udx-sk 1.4s ease infinite} .udx-skel--tall{height:150px} @keyframes udx-sk{0%{background-position:100% 0}100%{background-position:0 0}} /* ---------------------------------------------------------------------------- 13. Screenshot preview (browser frame + placeholder) -------------------------------------------------------------------------- */ .udx-preview{border:1px solid var(--udx-line);border-radius:12px;overflow:hidden;background:var(--udx-panel);box-shadow:var(--udx-shadow-card)} .udx-preview__chrome{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--udx-hair);background:var(--udx-panel2)} .udx-preview__lights{display:flex;gap:5px} .udx-preview__lights i{width:9px;height:9px;border-radius:100px;background:var(--udx-line)} .udx-preview__url{flex:1;font-size:12px;color:var(--udx-ink3);background:var(--udx-paper);border:1px solid var(--udx-hair);border-radius:5px;padding:4px 10px;text-align:center;font-family:var(--udx-mono)} .udx-preview__img{display:block;width:100%} .udx-shot{aspect-ratio:16/10;position:relative;overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,color-mix(in oklab,var(--udx-accent) 16%,var(--udx-panel)),var(--udx-panel) 60%);padding:22px;display:flex;flex-direction:column;gap:12px} .udx-shot .udx-wbar{height:9px;border-radius:4px;background:color-mix(in oklab,var(--udx-ink) 14%,var(--udx-panel))} .udx-shot .udx-wbar--2{width:70%;height:20px;background:color-mix(in oklab,var(--udx-accent) 34%,var(--udx-panel))} .udx-shot .udx-wrow{display:flex;gap:12px;margin-top:6px} .udx-shot .udx-wcard{flex:1;height:60px;border-radius:8px;background:color-mix(in oklab,var(--udx-ink) 8%,var(--udx-panel));border:1px solid var(--udx-hair)} /* Loading animation: faint fixed CRT scanlines (::before) + a bright accent line sweeping bottom-right → top-left at a steady pace (::after), to prove the preview is still working. Both are pointer-events:none overlays; when the JS swaps in the , .udx-shot is removed and the animation stops. */ .udx-shot::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--udx-ink) 6%,transparent) 0 5px,transparent 5px 11px);opacity:.55} .udx-shot::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(135deg,transparent 0 43%,color-mix(in oklab,var(--udx-accent) 72%,transparent) 49% 51%,transparent 57% 100%);background-size:280% 280%;animation:udx-scan 1.5s linear infinite} @keyframes udx-scan{from{background-position:100% 100%}to{background-position:0% 0%}} @media (prefers-reduced-motion:reduce){.udx-shot::after{animation:none;background-position:50% 50%;opacity:.4}} /* Preview status line under the frame: Loading… / Successful / Error, with a state dot. */ .udx-preview__status{display:flex;align-items:center;gap:8px;padding:8px 13px;border-top:1px solid var(--udx-hair);background:var(--udx-panel2);font-size:12px;font-family:var(--udx-mono);color:var(--udx-ink3)} .udx-preview__dot{width:8px;height:8px;border-radius:100px;background:var(--udx-ink3);flex:none} .udx-preview__status[data-state="loading"] .udx-preview__dot{background:var(--udx-accent);animation:udx-pulse 1s ease-in-out infinite} .udx-preview__status[data-state="ok"] .udx-preview__dot{background:oklch(0.72 0.17 150)} .udx-preview__status[data-state="ok"] .udx-preview__stxt{color:oklch(0.62 0.14 150)} .udx-preview__status[data-state="error"] .udx-preview__dot{background:oklch(0.63 0.21 25)} .udx-preview__status[data-state="error"] .udx-preview__stxt{color:oklch(0.6 0.19 25)} @keyframes udx-pulse{0%,100%{opacity:1}50%{opacity:.25}} @media (prefers-reduced-motion:reduce){.udx-preview__status[data-state="loading"] .udx-preview__dot{animation:none}} /* Screenshot status bar: "● Cached ↻ Refresh" on line 1, the full last-updated line (human datediff · absolute date-time) wrapping to line 2. */ .udx-preview__status{flex-wrap:wrap} .udx-preview__age{flex-basis:100%;color:var(--udx-ink3);opacity:.9} .udx-preview__refresh{font:inherit;font-size:12px;color:var(--udx-accent);background:none;border:1px solid var(--udx-line);border-radius:7px;padding:3px 9px;cursor:pointer;margin-left:auto;transition:background .15s ease} .udx-preview__refresh:hover{background:color-mix(in oklab,var(--udx-accent) 10%,transparent)} .udx-preview__refresh:disabled{opacity:.5;cursor:default} /* Standalone state dot reused in section headers (RDAP badge, Wayback label). */ .udx-status__dot{display:inline-block;width:7px;height:7px;border-radius:100px;background:var(--udx-ink3);vertical-align:middle} .udx-status__dot[data-state="loading"]{background:var(--udx-accent);animation:udx-pulse 1s ease-in-out infinite} .udx-status__dot[data-state="ok"]{background:oklch(0.72 0.17 150)} .udx-status__dot[data-state="error"]{background:oklch(0.63 0.21 25)} @media (prefers-reduced-motion:reduce){.udx-status__dot[data-state="loading"]{animation:none}} /* Wayback history block: saved count + first-archived + per-year sparkline + refresh. */ .udx-wb{padding:16px 18px} .udx-wb__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .udx-wb__title{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--udx-ink3);font-weight:500} .udx-wb__refresh{font:inherit;font-size:12px;color:var(--udx-accent);background:none;border:1px solid var(--udx-line);border-radius:7px;padding:3px 9px;cursor:pointer;transition:background .15s ease} .udx-wb__refresh:hover{background:color-mix(in oklab,var(--udx-accent) 10%,transparent)} .udx-wb__refresh:disabled{opacity:.5;cursor:default} /* explicit token colour so the number stays readable in dark mode (never inherit a computed light-mode ink) */ .udx-wb__num{display:flex;align-items:center;gap:8px;font-size:30px;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--udx-ink)} .udx-wb__sub{font-size:12.5px;color:var(--udx-ink3);margin:2px 0 12px} .udx-wb__sub b{color:var(--udx-ink);font-weight:600} .udx-wb__spark{display:flex;align-items:flex-end;gap:2px;height:56px} .udx-wb__bar{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:color-mix(in oklab,var(--udx-accent) 32%,var(--udx-panel))} .udx-wb__bar--hot{background:var(--udx-accent)} .udx-wb__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:7px} .udx-wb__asof{font-size:11px;color:var(--udx-ink3);font-family:var(--udx-mono);opacity:.9} .udx-wb__archive{font-size:12px;white-space:nowrap} /* Asking-price card: current price + inline add/edit form + price-history list (operators). */ .udx-prices{padding:16px 18px} .udx-prices__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .udx-prices__addbtn{font:inherit;font-size:12px;color:var(--udx-accent);background:none;border:1px solid var(--udx-line);border-radius:7px;padding:3px 9px;cursor:pointer;transition:background .15s ease} .udx-prices__addbtn:hover{background:color-mix(in oklab,var(--udx-accent) 10%,transparent)} .udx-prices__current{display:flex;flex-direction:column;gap:2px;margin-bottom:4px} .udx-prices__amount{font-size:30px;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--udx-ink);line-height:1.05} .udx-prices__curat{font-size:12.5px;color:var(--udx-ink3)} .udx-prices__none{font-size:13.5px;color:var(--udx-ink3)} .udx-prices__form{display:flex;flex-direction:column;gap:8px;margin:12px 0;padding:12px;border:1px solid var(--udx-hair);border-radius:9px;background:var(--udx-panel2)} .udx-prices__frow{display:flex;gap:8px} .udx-prices__cur{flex:0 0 96px} .udx-prices__amt,.udx-prices__note{flex:1;min-width:0} .udx-prices__date{flex:0 0 auto} .udx-prices__form select,.udx-prices__form input{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--udx-line);border-radius:7px;background:var(--udx-paper);color:var(--udx-ink)} .udx-prices__form input:focus,.udx-prices__form select:focus{outline:1.5px solid var(--udx-accent);outline-offset:1px} .udx-prices__factions{display:flex;align-items:center;gap:8px} .udx-prices__save{font:inherit;font-size:13px;color:#fff;background:var(--udx-accent);border:1px solid var(--udx-accent);border-radius:7px;padding:6px 14px;cursor:pointer} .udx-prices__save:disabled{opacity:.55;cursor:default} .udx-prices__cancel{font:inherit;font-size:13px;color:var(--udx-ink2);background:none;border:1px solid var(--udx-line);border-radius:7px;padding:6px 12px;cursor:pointer} .udx-prices__msg{font-size:12px;color:oklch(0.6 0.19 25)} .udx-prices__list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column} .udx-prices__item{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;padding:9px 0;border-top:1px solid var(--udx-hair)} .udx-prices__iamt{font-weight:600;color:var(--udx-ink);font-variant-numeric:tabular-nums} .udx-prices__iat{font-size:12px;color:var(--udx-ink3);font-variant-numeric:tabular-nums} .udx-prices__isrc{font-size:11px;color:var(--udx-ink2);background:var(--udx-panel2);border:1px solid var(--udx-hair);border-radius:100px;padding:1px 8px;white-space:nowrap} .udx-prices__iact{margin-left:auto;display:inline-flex;gap:4px} .udx-prices__inote{flex-basis:100%;font-size:12.5px;color:var(--udx-ink3);font-style:italic} .udx-prices__src{flex:1;min-width:0} .udx-prices__edit,.udx-prices__del{font:inherit;font-size:13px;line-height:1;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:var(--udx-ink3);background:none;border:1px solid var(--udx-line);border-radius:6px;cursor:pointer;transition:color .15s ease,border-color .15s ease} .udx-prices__edit:hover{color:var(--udx-accent);border-color:var(--udx-accent)} .udx-prices__del:hover{color:oklch(0.6 0.19 25);border-color:oklch(0.6 0.19 25)} /* Timeline notes — dated free-text observations (mirrors .udx-prices) */ .udx-notes{padding:16px 18px} .udx-notes__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .udx-notes__addbtn{font:inherit;font-size:12px;color:var(--udx-accent);background:none;border:1px solid var(--udx-line);border-radius:7px;padding:3px 9px;cursor:pointer;transition:background .15s ease} .udx-notes__addbtn:hover{background:color-mix(in oklab,var(--udx-accent) 10%,transparent)} .udx-notes__form{display:flex;flex-direction:column;gap:8px;margin:4px 0 6px;padding:12px;border:1px solid var(--udx-hair);border-radius:9px;background:var(--udx-panel2)} .udx-notes__text{font:inherit;font-size:13px;line-height:1.5;padding:8px 9px;border:1px solid var(--udx-line);border-radius:7px;background:var(--udx-paper);color:var(--udx-ink);resize:vertical;min-height:62px} .udx-notes__text:focus{outline:1.5px solid var(--udx-accent);outline-offset:1px} .udx-notes__frow{display:flex;align-items:center;gap:8px} .udx-notes__date{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--udx-line);border-radius:7px;background:var(--udx-paper);color:var(--udx-ink)} .udx-notes__date:focus{outline:1.5px solid var(--udx-accent);outline-offset:1px} .udx-notes__datehint{font-size:11.5px;color:var(--udx-ink3)} .udx-notes__factions{display:flex;align-items:center;gap:8px} .udx-notes__save{font:inherit;font-size:13px;color:#fff;background:var(--udx-accent);border:1px solid var(--udx-accent);border-radius:7px;padding:6px 14px;cursor:pointer} .udx-notes__save:disabled{opacity:.55;cursor:default} .udx-notes__cancel{font:inherit;font-size:13px;color:var(--udx-ink2);background:none;border:1px solid var(--udx-line);border-radius:7px;padding:6px 12px;cursor:pointer} .udx-notes__msg{font-size:12px;color:oklch(0.6 0.19 25)} .udx-notes__empty{font-size:13px;color:var(--udx-ink3);margin:4px 0 0} .udx-notes__list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column} .udx-notes__item{padding:10px 0;border-top:1px solid var(--udx-hair)} .udx-notes__itext{font-size:13.5px;line-height:1.5;color:var(--udx-ink);word-break:break-word} .udx-notes__ibar{display:flex;align-items:center;gap:8px;margin-top:5px} .udx-notes__iat{font-size:12px;color:var(--udx-ink3);font-variant-numeric:tabular-nums} .udx-notes__iact{margin-left:auto;display:inline-flex;gap:4px} .udx-notes__edit,.udx-notes__del{font:inherit;font-size:13px;line-height:1;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:var(--udx-ink3);background:none;border:1px solid var(--udx-line);border-radius:6px;cursor:pointer;transition:color .15s ease,border-color .15s ease} .udx-notes__edit:hover{color:var(--udx-accent);border-color:var(--udx-accent)} .udx-notes__del:hover{color:oklch(0.6 0.19 25);border-color:oklch(0.6 0.19 25)} /* ---------------------------------------------------------------------------- 14. Events timeline + nameservers + links + raw whois -------------------------------------------------------------------------- */ .udx-events{border:1px solid var(--udx-line);border-radius:12px;background:var(--udx-panel);box-shadow:var(--udx-shadow-card);overflow:hidden} .udx-event{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--udx-hair)} .udx-event:last-child{border-bottom:none} .udx-event__act{font-weight:500;text-transform:capitalize;font-size:14px} .udx-event__date{font-size:13px;color:var(--udx-ink2);font-variant-numeric:tabular-nums;font-family:var(--udx-mono)} .udx-event__rel{font-size:12px;color:var(--udx-ink3);white-space:nowrap;font-variant-numeric:tabular-nums} .udx-event__rel.is-hi{color:var(--udx-ok);font-weight:500} .udx-nslist{padding:8px 6px;margin:0;list-style:none} .udx-nslist li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:7px} .udx-nslist li:hover{background:var(--udx-panel2)} .udx-nslist .udx-g{width:6px;height:6px;border-radius:100px;background:var(--udx-accent);flex:none} .udx-nslist .udx-h{font-size:13px;font-family:var(--udx-mono)} .udx-linkrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 18px;border-bottom:1px solid var(--udx-hair)} .udx-linkrow:last-child{border-bottom:none} .udx-linkrow .udx-rel{font-size:12px;color:var(--udx-ink3);text-transform:uppercase;letter-spacing:.05em} .udx-linkrow a{font-size:12.5px;word-break:break-all;text-align:right;font-family:var(--udx-mono);color:var(--udx-accent);text-decoration:none} .udx-whois{border:1px solid var(--udx-line);border-radius:12px;overflow:hidden;background:var(--udx-panel);box-shadow:var(--udx-shadow-card)} .udx-whois pre{margin:0;padding:18px 20px;max-height:360px;overflow:auto;font-size:12px;line-height:1.65;color:var(--udx-ink2);font-family:var(--udx-mono);white-space:pre} .udx-whois pre b{color:var(--udx-ink);font-weight:600} .udx-whois pre .udx-cmt{color:var(--udx-ink3)} .udx-copy{font-size:12px;color:var(--udx-ink2);background:transparent;border:none;box-shadow:inset 0 0 0 1px var(--udx-line);padding:5px 11px;border-radius:6px;cursor:pointer;transition:color .18s,box-shadow .18s} .udx-copy:hover{color:var(--udx-accent);box-shadow:inset 0 0 0 1px var(--udx-accent)} /* lifecycle track */ .udx-life{padding:18px;border-top:1px solid var(--udx-hair)} .udx-life__cap{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--udx-ink3);margin:0 0 14px} .udx-track{display:flex;align-items:center} .udx-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative} .udx-step__node{width:12px;height:12px;border-radius:100px;background:var(--udx-panel2);box-shadow:inset 0 0 0 1.5px var(--udx-line);z-index:1} .udx-step.is-done .udx-step__node{background:var(--udx-ink3);box-shadow:none} .udx-step.is-now .udx-step__node{background:var(--udx-accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--udx-accent) 22%,transparent)} .udx-step__cn{font-size:11px;color:var(--udx-ink3);text-align:center;line-height:1.25} .udx-step.is-now .udx-step__cn{color:var(--udx-accent);font-weight:600} .udx-step::before{content:"";position:absolute;top:6px;left:-50%;width:100%;height:1.5px;background:var(--udx-line)} .udx-step:first-child::before{display:none} .udx-step.is-done::before,.udx-step.is-now::before{background:var(--udx-ink3)} /* ---------------------------------------------------------------------------- 15. Prose (articles / the_content) -------------------------------------------------------------------------- */ .udx-prose{max-width:684px} .udx-prose > *:first-child{margin-top:0} .udx-prose p{font-size:16.5px;line-height:1.72;color:var(--udx-ink);margin:0 0 22px;text-wrap:pretty} .udx-prose .udx-lede{font-size:19px;line-height:1.6;color:var(--udx-ink2);font-weight:300} .udx-prose h2{font-weight:400;font-size:24px;letter-spacing:-.02em;margin:40px 0 14px;line-height:1.2;color:var(--udx-ink)} .udx-prose h3{font-weight:600;font-size:17px;letter-spacing:-.01em;margin:32px 0 10px;color:var(--udx-ink)} .udx-prose a{color:var(--udx-accent);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--udx-accent) 45%,transparent);text-underline-offset:3px} .udx-prose a:hover{text-decoration-color:var(--udx-accent)} .udx-prose ul,.udx-prose ol{margin:0 0 22px;padding-left:22px} .udx-prose li{font-size:16.5px;line-height:1.6;color:var(--udx-ink);margin:0 0 8px} .udx-prose code{font-family:var(--udx-mono);font-size:13.5px;background:var(--udx-panel2);border:1px solid var(--udx-hair);border-radius:5px;padding:1px 6px;color:var(--udx-ink2)} .udx-prose blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:2px solid var(--udx-accent);color:var(--udx-ink2);font-size:17px;line-height:1.6} .udx-prose pre{margin:0 0 24px;background:var(--udx-panel);border:1px solid var(--udx-line);border-radius:10px;padding:16px 18px;overflow-x:auto;font-family:var(--udx-mono);font-size:13px;line-height:1.6;color:var(--udx-ink2);box-shadow:var(--udx-shadow-card)} .udx-prose pre code{background:none;border:none;padding:0} .udx-prose img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--udx-line)} .udx-prose hr{border:none;border-top:1px solid var(--udx-line);margin:40px 0} /* ---------------------------------------------------------------------------- 16. Video grid (YouTube feed) -------------------------------------------------------------------------- */ .udx-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:26px 20px} .udx-vcard{cursor:pointer;text-decoration:none;display:block} .udx-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--udx-line);box-shadow:var(--udx-shadow-card)} .udx-thumb img{width:100%;height:100%;object-fit:cover;display:block} .udx-thumb__dur{position:absolute;right:7px;bottom:7px;font-family:var(--udx-mono);font-size:11px;color:#fff;background:oklch(0 0 0 / .72);padding:1px 5px;border-radius:4px} .udx-thumb__new{position:absolute;left:8px;top:8px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--udx-accent);padding:2px 8px;border-radius:100px} .udx-vmeta{display:flex;gap:11px;margin-top:12px} .udx-av{width:34px;height:34px;border-radius:100px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:var(--udx-ink);background:color-mix(in oklab,var(--udx-accent) 22%,var(--udx-panel))} .udx-vinfo{min-width:0} .udx-vtitle{font-size:14.5px;font-weight:500;color:var(--udx-ink);line-height:1.32;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .udx-vcard:hover .udx-vtitle{color:var(--udx-accent)} .udx-vchan{font-size:12.5px;color:var(--udx-ink2);margin-top:5px} .udx-vsub{font-size:12.5px;color:var(--udx-ink3);margin-top:1px;font-variant-numeric:tabular-nums} /* ---------------------------------------------------------------------------- 17. Section rhythm helpers -------------------------------------------------------------------------- */ .udx-section{border-top:1px solid var(--udx-line);margin-top:38px;padding-top:clamp(26px,3.5vw,38px)} .udx-h1{font-weight:300;font-size:clamp(28px,4.2vw,40px);letter-spacing:-.032em;line-height:1.05;margin:0} .udx-h2{font-weight:300;font-size:clamp(21px,2.7vw,28px);letter-spacing:-.025em;margin:0} .udx-sub{font-size:15px;color:var(--udx-ink2);line-height:1.5}