/* ============================================================================= MESSAGE BEST — the site chrome, worn by the room ----------------------------------------------------------------------------- The header, menu and edition pill of the labs.llc front door and the network console, extracted for this page: tokens, .nav, .menu, .mode-pill and .btn — nothing that would restyle the room itself. The dark rules are scoped to html[data-dark], which indexdark.html carries. The accent tokens are deliberately absent: the page owns its #ff8800, and the chrome reads it from the page. ========================================================================== */ :root { --ink: #1E262B; --ink-77: rgba(30, 38, 43, .77); /* The secondary ink, at .64 rather than .55. .55 measures 3.6:1 on the paper, under the 4.5:1 body-text floor, and this token carries most of the small type on the site: every eyebrow, every field label, every registrar name, the whole of the results table's second line. At .64 it measures 4.7:1 and is still plainly the quieter of the two inks. */ --ink-55: rgba(30, 38, 43, .64); --paper: #ffffff; --tint: #FAFAFA; /* recessed panel ground, added for Network Labs */ --deep: #11161C; --deep-soft: #171E26; --line: rgba(30, 38, 43, .12); --line-soft: rgba(30, 38, 43, .07); /* The inverse hairline: for rules drawn ON the deep band while the page itself is light. The dark edition has to flip this one the other way or those rules draw white on white. */ --line-dark: rgba(255, 255, 255, .13); --muted: #717171; /* DomainChaos was #ff8800 throughout — a screen orange, chosen against #0a0a0a. It measures 2.1:1 on white, so on paper it is not an accent, it is a highlighter. The lineage survives as the burnt print red of the same family; the dark edition takes it back up to #F97316, which is the original orange one step calmer and holds on the deep ground. Used for hairlines, eyebrows and live indicators only — never as a large fill. */ /* The accent as a FILL, with dark type on it. Inking a colour is right for type and wrong for a solid block, so the two are separate tokens and the fill keeps its saturation. */ /* ------------------------------------------------------------- semantics The status of a domain is the one place this site needs colour to carry meaning, so these four are the only hues besides the accent. Every one of them is three steps down its scale from where a dark-ground palette would put it. #00cc66 — the old build's "AVAILABLE" — measures 1.8:1 on white; at #15803D it is 4.9:1 and still unmistakably green. The dark edition moves all four back up; see dark.css. */ --measure: 1265px; --gutter: clamp(20px, 5vw, 56px); /* The height of the sticky header, published as a token because two things have to agree about it: the header, and every anchor target on the page. A heading scrolled to the top of the viewport lands underneath a sticky bar unless something subtracts the bar first. */ --nav-h: 74px; --band: clamp(64px, 9vw, 128px); --ease: cubic-bezier(.22, .61, .36, 1); } *, *::before, *::after { box-sizing: border-box; } [id] { scroll-margin-top: calc(var(--nav-h) + 14px); } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } /* The skip link. background:var(--ink) + color:#fff, which the dark edition has to answer or it is white on white — invisible to every check that only looks at what is on screen, and the very first thing a keyboard user reaches. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 400; background: var(--ink); color: #fff; padding: .8rem 1.2rem; text-decoration: none; } .skip:focus { left: 0; } /* Print. The console is a screen tool and its controls mean nothing on paper; what a printed page is for is the list of names and their status. */ .nav { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-soft); } .nav__in { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); height: var(--nav-h); display: flex; align-items: center; gap: 1.5rem; } .nav__mark { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; } /* The mark. No box, no ring, no fill. The old build ringed a photographic disc in 4px of orange with a 45px glow; the rewrite before this one swapped that for a hairline and a border-radius, which was quieter but was still a circle drawn around a logo that already had one. Two edges, concentric, neither of them content. A wordmark on paper needs no edge at all: the letterforms are the shape, and the thing that separates them from the page is the page. Height is set here and width is left to the viewBox so the 86:24 proportion cannot be squashed the way an with two hard attributes squashed the old one. The colour is inherited, not declared — currentColor in the SVG picks up whatever --ink resolves to in this edition, which is the entire reason it can be one file for both. */ .nav__logo { display: block; height: 17px; width: auto; color: var(--ink); } /* The mark is a
of two links now — the labs.llc plate and the local wordmark — so each half re-declares the flex row the single anchor used to be. The plate's height is set here and its width left to the 189:80 ratio, for the same no-squashing reason as the wordmark above. */ .nav__mark a { display: flex; align-items: center; gap: .8rem; text-decoration: none; } .nav__plate { display: block; height: 28px; width: auto; } .nav__mark b { font-size: .95rem; font-weight: 600; letter-spacing: -.03em; color: var(--ink); } .nav__mark span { font-size: .6rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-55); padding-left: .8rem; border-left: 1px solid var(--line); } @media (max-width: 980px) { .nav__mark span { display: none; } } .nav__links { display: flex; align-items: center; gap: 1.9rem; } @media (max-width: 1100px) { .nav__links { display: none; } } .nav__links a { text-decoration: none; font-size: .875rem; font-weight: 500; color: var(--ink-77); letter-spacing: -.01em; position: relative; padding-block: .4rem; } .nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); } .nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); } .nav__links a[aria-current] { color: var(--ink); } /* --------------------------------------------------------------------------- THE EDITION PILL Lifted whole from labs.llc, because it is the same control doing the same job and a visitor who has met one should not have to learn the other. Two editions of this page — this one, paper, and indexdark.html — and the pill is where a visitor moves between them. Deliberately a segmented control rather than another nav link: the two are alternatives to each other, not destinations alongside Generator and Registrars, and a segmented control is the one shape that says so without a word of explanation. Exactly one segment carries .is-on, and it is written into the markup rather than worked out at runtime, because on any given page the answer is a constant: this file is always the light one. tools/mkdark.py moves it. The moving part is a single thumb behind both segments, not a background on whichever segment is lit. That is what lets it slide: on hover it travels to the segment under the cursor and previews the switch before the click. ------------------------------------------------------------------------ */ .mode-pill { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; border: 1px solid var(--line); /* A shallow well, so the thumb reads as sitting in the track rather than floating on the navbar. Both values are ink at single digits of alpha. */ background: linear-gradient(180deg, rgba(30,38,43,.045), rgba(30,38,43,.025)); box-shadow: inset 0 1px 2px rgba(30, 38, 43, .055); } .mode-pill__thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--ink); box-shadow: 0 1px 2px rgba(30, 38, 43, .26), 0 6px 18px rgba(30, 38, 43, .14); transition: transform .42s var(--ease); } /* Which half is lit. The class is on the container and written into the markup: on any one page the answer never changes. */ .mode-pill--dark .mode-pill__thumb { transform: translateX(100%); } /* Hover preview. There are exactly two segments, so "the unlit one is hovered" already says which side the thumb belongs on and the rule needs no position selector — which matters, because the lit segment is a and the unlit one an , and a :first-of-type / :last-of-type pair counts types. Where :has is unsupported the pill simply does not preview, which costs nothing. */ .mode-pill:has(.mode-pill__seg:not(.is-on):hover) .mode-pill__thumb { transform: translateX(100%); } .mode-pill--dark:has(.mode-pill__seg:not(.is-on):hover) .mode-pill__thumb { transform: none; } .mode-pill__seg { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; /* Both segments hold the same width, because the thumb is half the track and an uneven split would leave it short of one end. */ min-width: 2.5rem; padding: .4rem .45rem; border-radius: 999px; text-decoration: none; color: var(--ink-55); transition: color .32s var(--ease); } /* The lit segment is a , not a link — it is the page you are already on, and a link to here is a reload that costs a round trip and returns the same document. */ .mode-pill__seg.is-on { color: var(--paper); cursor: default; } /* The fallback where :has is missing and the thumb therefore cannot move: the unlit segment darkens in place. It must not go to paper — with no thumb underneath, paper on the track is a label that vanishes. */ .mode-pill__seg:not(.is-on):hover { color: var(--ink); } /* While a segment is hovered the thumb is under IT, so the lit colour follows the thumb rather than the class. Equal specificity, later wins. */ .mode-pill:has(.mode-pill__seg:hover) .mode-pill__seg.is-on { color: var(--ink-55); } .mode-pill:has(.mode-pill__seg:hover) .mode-pill__seg:hover { color: var(--paper); } .mode-pill__seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* 13px, and the same 13 is written on the tag itself as width and height. That duplication is the point: an SVG with a viewBox and no dimensions of its own falls back to 300x150 when no stylesheet reaches it. */ .mode-pill__i { width: 13px; height: 13px; flex: 0 0 auto; display: block; } @media (prefers-reduced-motion: reduce) { .mode-pill__thumb { transition: none; } } /* The hamburger. At every width — it opens the whole menu rather than a fold of the header, so on a wide screen the navbar's section links and the menu's tools are two different offers rather than the same one twice. */ .nav__burger { display: flex; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; color: var(--ink); transition: border-color .24s var(--ease); } .nav__burger:hover { border-color: var(--ink); } .nav__burger svg { display: block; } /* transform-box: view-box puts the origin in the icon's own coordinate space rather than on the line's own zero-height box, and the translate has to come second — CSS applies transform functions right to left. */ .nav__burger line { transform-box: view-box; transform-origin: 9px 6px; transition: transform .28s var(--ease); } .nav__burger[aria-expanded="true"] .nav__burger-t { transform: rotate(45deg) translateY(2.5px); } .nav__burger[aria-expanded="true"] .nav__burger-b { transform: rotate(-45deg) translateY(-2.5px); } @media (prefers-reduced-motion: reduce) { .nav__burger line { transition: none; } } /* THE HEADER ON A PHONE. Three things have to fit inside 335 usable pixels at 375 and 280 at 320: the mark, the edition pill, and the way into the rest of the site. Everything here is measured against those two numbers. */ @media (max-width: 1100px) { .nav__in { gap: .9rem; } } @media (max-width: 640px) { :root { --nav-h: 62px; } .nav__in { gap: .55rem; } .nav__mark b { font-size: .86rem; } /* A segment is a glyph in a box, and the box is the tap target. The glyph stays at 13px — it is meant to be small — and what grows is the box. */ .mode-pill__seg { min-width: 1.9rem; padding: .58rem .4rem; } /* No ring on a phone: the burger is the only thing in that corner and the outline was the heaviest object in the bar for no work it was doing. 44px is the smallest a finger reliably hits. */ .nav__burger { width: 44px; height: 44px; border-color: transparent; } .nav__burger:hover { border-color: transparent; } .nav__in > .btn { display: none; } } @media (max-width: 380px) { .nav__mark b { display: none; } } /* ============================================================================= THE MENU ========================================================================== */ .menu[hidden] { display: none; } .menu { position: fixed; inset: 0; z-index: 200; display: block; /* Clipped: on the way out the scroll lock is released the instant close() runs while the panel is still travelling, and an unclipped panel sitting outside the viewport for those 360ms is a horizontal scrollbar that appears and leaves for no visible reason. */ overflow: hidden; } .menu__scrim { position: absolute; inset: 0; /* A scrim exists to dim what is behind it, so it stays dark in both editions — see R2. It is the one black wash on this sheet that the dark edition does not re-polarise. */ background: rgba(17, 22, 28, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .32s var(--ease); } .menu.is-open .menu__scrim { opacity: 1; } .menu__panel { position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 404px; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(30, 38, 43, .10); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .36s var(--ease); } .menu.is-open .menu__panel { transform: none; } /* The panel takes focus itself on open so a screen reader reads the dialog's label. It is a container, not a control, and the sheet-wide :focus-visible rule was drawing a 2px accent ring around all 404 pixels of it. */ .menu__panel:focus, .menu__panel:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { .menu__scrim, .menu__panel { transition: none; } } .menu__head { flex: 0 0 auto; height: 74px; display: flex; align-items: center; gap: .8rem; padding: 0 1.15rem 0 1.4rem; border-bottom: 1px solid var(--line-soft); } .menu__logo { display: block; height: 24px; width: auto; } .menu__title { font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-55); padding-left: .8rem; border-left: 1px solid var(--line); margin-right: auto; } .menu__x { width: 34px; height: 34px; flex: 0 0 auto; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-55); cursor: pointer; transition: border-color .24s var(--ease), color .24s var(--ease); } .menu__x:hover { border-color: var(--ink); color: var(--ink); } .menu__x svg { width: 13px; height: 13px; } @media (max-width: 640px) { .menu__x { width: 44px; height: 44px; } } .menu__search { flex: 0 0 auto; position: relative; padding: .9rem 1.4rem; border-bottom: 1px solid var(--line-soft); background: var(--paper); } .menu__search svg { position: absolute; left: 2.05rem; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--ink-55); pointer-events: none; } .menu__q { font: inherit; font-size: .88rem; font-weight: 500; width: 100%; padding: .6rem 2.1rem .6rem 2.05rem; color: var(--ink); background: rgba(30, 38, 43, .035); /* --line is a rule between two things that are already there; a text input is a box that has to announce itself, so it gets a real border. */ border: 1px solid rgba(30, 38, 43, .52); border-radius: 8px; transition: border-color .24s var(--ease), background .24s var(--ease); -webkit-appearance: none; appearance: none; } .menu__q::placeholder { color: var(--ink-55); font-weight: 400; } .menu__q::-webkit-search-cancel-button { display: none; } .menu__q:focus { outline: none; border-color: var(--ink); background: var(--paper); } .menu__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Safari on iOS zooms the page when a focused input is under 16px, and a zoomed page carries the 404px panel — and the field that was just tapped — off the visual viewport. 16px is the threshold at which it does not, so the field takes it wherever the zoom can happen. Matched on the pointer rather than on a width: a phone held sideways is 932px wide and still zooms. */ @media (hover: none) and (pointer: coarse) { .menu__q { font-size: 16px; } } .menu__clear { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 6px; color: var(--ink-55); cursor: pointer; } .menu__clear[hidden] { display: none; } .menu__clear:hover { color: var(--ink); background: rgba(30, 38, 43, .06); } .menu__clear svg { width: 10px; height: 10px; } .menu__count { flex: 0 0 auto; margin: 0; padding: .55rem 1.4rem 0; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-55); } .menu__count b { color: var(--ink); font-weight: 700; } .menu__count[data-filtered="1"] b { color: var(--accent); } .menu__body { flex: 1 1 auto; overflow-y: auto; padding: 1.1rem 1.4rem 1.6rem; } .menu__sec + .menu__sec { margin-top: 1.7rem; } .menu__sec[hidden] { display: none; } .menu__h { display: flex; align-items: center; gap: .8rem; font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-55); margin: 0 0 .5rem; } .menu__h::after { content: ''; height: 1px; background: var(--line); flex: 1 1 auto; } .menu__row { display: flex; align-items: baseline; gap: .7rem; padding: .62rem 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink-77); transition: padding-left .2s var(--ease), color .2s var(--ease); } .menu__row:hover { color: var(--ink); padding-left: .5rem; } .menu__row[hidden] { display: none; } .menu__row:last-child { border-bottom: 0; } .menu__l { flex: 1 1 auto; min-width: 0; } .menu__l b { display: block; font-size: .9rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink); } .menu__l span { display: block; font-size: .74rem; font-weight: 400; color: var(--ink-55); line-height: 1.4; } .menu__go { flex: 0 0 auto; color: var(--ink-55); font-size: .8rem; font-style: normal; } .menu__empty { margin: 1.4rem 0 0; text-align: center; font-size: .82rem; color: var(--ink-55); } .menu__empty[hidden] { display: none; } .menu__foot { flex: 0 0 auto; padding: 1rem 1.4rem; border-top: 1px solid var(--line-soft); background: var(--paper); display: flex; justify-content: center; } /* The footer's copy of the pill is the same control, so it is the same size: a segmented pill held to its own width and centred, one step larger than the header's because a panel footer has the room. Stretched to the full width of the panel it reads as a broken button rather than as the pill above. */ .menu__foot .mode-pill { display: inline-flex; width: auto; } .menu__foot .mode-pill__seg { flex: 0 0 auto; min-width: 3.6rem; padding: .6rem .8rem; } @media (max-width: 460px) { .menu__panel { max-width: 100%; } } /* ============================================================================= BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .02em; padding: .72rem 1.15rem; border-radius: 8px; border: 1px solid transparent; background: var(--ink); color: #fff; text-decoration: none; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .btn:hover { background: #000; transform: translateY(-1px); } .btn:active { transform: none; } .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .btn--sm { font-size: .72rem; padding: .5rem .8rem; } .btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); text-transform: uppercase; font-size: .72rem; letter-spacing: .13em; font-weight: 600; padding: .82rem 1.35rem; } .btn--outline:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn i { transition: transform .25s var(--ease); font-style: normal; } .btn:hover i { transform: translateX(3px); } /* Defensive reset: the board pages style bare