/* ========================================================================== Kestrel Self-contained on purpose. This fronts every vhost on the box — sites that have nothing to do with each other — so it wears nobody's brand: a neutral field, one indigo accent, and the system type stack. No shared stylesheet, no CDN, no build step, one file. Light is the default; dark is either the system preference or an explicit choice. The explicit choice is a `data-theme` attribute on , written by the toggle in the header, and it always beats the media query — so every dark token appears twice below, once per mechanism. Two type decisions carry most of the look. Figures are the system sans with tabular numerals, so columns of counts sit still. Log material — paths, referrers, hosts, status codes — is monospace, because those strings are lifted straight out of an access log and should read as what they are. ========================================================================== */ :root { --bg: #f6f7f9; --surface: #ffffff; --border: #e5e7ee; --border-strong: #d4d8e3; --text: #171a23; --muted: #626a7d; --faint: #9aa1b3; --accent: #0d9488; --accent-soft: rgba(13, 148, 136, 0.09); --accent-line: rgba(13, 148, 136, 0.38); --on-accent: #0c1614; /* Pure green, kept deliberately apart from the teal accent — a delta badge and a data line must never read as the same colour. */ --up: #16a34a; --up-soft: rgba(22, 163, 74, 0.1); --down: #d6403a; --down-soft: rgba(214, 64, 58, 0.09); --ghost: #b3b9c9; /* The pageviews line on a site's own chart. Indigo because it has to be told apart from the teal beside it and from the green and red of a delta badge, and those four are most of the colours on the page. */ --pages: #6366f1; /* The requests line — every request in the bucket, which is the ceiling the other lines sit under. Pink because a site's own chart now draws it alongside the indigo pageviews line, and the two are nested figures rather than unrelated ones: same plot, one inside the other, so they have to be told apart at a glance. Kept away from the red of a falling delta badge, which is filled rather than drawn as a line. */ --hits: #db2777; /* The assistants' line on the split chart, against the teal the people are drawn in. Amber: the fifth colour that is not any of the four above, and the one that reads as "something else is here" without reading as an error. */ --ai: #c2610c; --shadow: 0 1px 2px rgba(23, 26, 35, 0.04), 0 8px 24px rgba(23, 26, 35, 0.04); --radius: 10px; --radius-sm: 7px; /* The row height the two list cards share — Recent activity and AI assistants. Set rather than left to the content: both stack two lines of different sizes, and a row whose height depends on whether it happens to carry a chip cannot be counted into a fixed box. */ --feed-row: 3.3rem; /* Every list card on a site's page is this tall inside, whether it holds six feed rows, ten ranked ones, four AI groups or nothing at all. One value, so a grid of cards lines up without any of them being measured against the others. A panel's row is a tenth of it for the same reason a feed's is a sixth: a page has to be exactly what the box holds, or the last row of it peeks over the fold and the button under it looks like it has already been pressed. Report::PAGE is the ten; they change together. */ --card-box: calc(6 * var(--feed-row)); --panel-row: calc(var(--card-box) / 10); /* The page's side margin and a card's own, as tokens rather than as the same number written out twenty times: a phone sets both narrower, and every card, row and rail has to move by exactly the same amount or the left edge of the page stops being a line. */ --gutter: 1.25rem; --card-pad: 1.15rem; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: light; } /* Dark, as the system preference — held off when light was chosen by hand. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e1015; --surface: #171a22; --border: #252a37; --border-strong: #323848; --text: #e7e9f0; --muted: #949bad; --faint: #626a7e; --accent: #2dd4bf; --accent-soft: rgba(45, 212, 191, 0.12); --accent-line: rgba(45, 212, 191, 0.45); --on-accent: #0c1614; --up: #4ade80; --up-soft: rgba(74, 222, 128, 0.13); --down: #ff7b72; --down-soft: rgba(255, 123, 114, 0.12); --ghost: #565d70; --pages: #a5b4fc; --hits: #f472b6; --ai: #fbbf24; --shadow: none; color-scheme: dark; } } /* Dark, as the explicit choice. Same values as above, deliberately. */ :root[data-theme="dark"] { --bg: #0e1015; --surface: #171a22; --border: #252a37; --border-strong: #323848; --text: #e7e9f0; --muted: #949bad; --faint: #626a7e; --accent: #2dd4bf; --accent-soft: rgba(45, 212, 191, 0.12); --accent-line: rgba(45, 212, 191, 0.45); --on-accent: #0c1614; --up: #4ade80; --up-soft: rgba(74, 222, 128, 0.13); --down: #ff7b72; --down-soft: rgba(255, 123, 114, 0.12); --ghost: #565d70; --pages: #a5b4fc; --hits: #f472b6; --ai: #fbbf24; --shadow: none; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* The viewport is covered to the edges of the glass — see viewport-fit in head.php — so a phone held sideways has a notch inside the page rather than beside it, and the gutter has to clear it where there is one. */ .wrap { max-width: 1200px; margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } /* Counts and figures hold their columns. */ .num { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- nav One bar carrying everything this dashboard can be asked, stuck to the top so it is still there after you have scrolled to the number you came for. What it replaced was four stacked bands — brand, heading, selects, chips — which on a phone was a fifth of the screen and all of it gone at the first flick. Two rows. Where you are: the bird home, the site as a heading that opens into the list of them, the span on screen, and who is on it right now. What you asked: the range, then the order and the comparison. On a phone the second row becomes one rail that scrolls sideways, with the four everyday ranges under a thumb and everything rarer folded into two pills at the end. Opaque rather than translucent on purpose. A blurred bar looks better and makes itself the containing block for anything fixed inside it — which is where the menus go on a phone, so it cannot have one. */ /* The strip above the nav on the public dashboard: what this is, and where to go if it sounds useful. Only that page draws it — see views/promo.php. Above the nav rather than in the page, because on a phone the page is a window that does not scroll and anything inside it would either scroll away or take its height out of the one screen there is. Here it costs its own height once, on both shapes of screen. Hidden from the attribute rather than by removing the element, so the decision can be made before first paint by the same inline script that picks the theme — a banner somebody closed last week must not flash past before a later script gets to it. */ [data-promo="off"] .promo { display: none; } /* The band runs the full width of the window and the row inside it stays on the page's own column, so the rule under it is a line across the top of the screen rather than a box floating on one. */ .promo { border-bottom: 1px solid var(--border); background: var(--accent-soft); } .promo__inner { display: flex; align-items: center; gap: 0.7rem; max-width: 1200px; margin: 0 auto; padding: 0.5rem max(var(--gutter), env(safe-area-inset-right)) 0.5rem max(var(--gutter), env(safe-area-inset-left)); } .promo__text { min-width: 0; margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.4; } .promo__cta { display: inline-flex; flex: none; align-items: center; margin-left: auto; cursor: pointer; padding: 0.28rem 0.75rem; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--surface); color: var(--accent); font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .promo__cta:hover { border-color: var(--accent); background: var(--accent); color: var(--surface); } /* The button is a link when there is somewhere to link to and the summary of a
when there is not, so both wear this and the marker a summary would otherwise draw is taken off. */ .promo__cta { list-style: none; } .promo__cta::-webkit-details-marker { display: none; } .promo__thanks { display: inline-flex; flex: none; align-items: center; gap: 0.35rem; margin: 0 0 0 auto; color: var(--accent); font-size: 0.78rem; font-weight: 600; white-space: nowrap; } /* ------------------------------------------------------------------- sign-up The box behind the banner's button. A
like every other menu here, so it opens without JavaScript; what makes it a panel over the middle of the screen rather than a dropdown under its own button is entirely below. `static` rather than the `relative` a menu gets, because the panel is positioned against the window and a positioned ancestor would pull it back under the button. */ .signup { position: static; flex: none; margin-left: auto; } /* The dim. Drawn as the
's own ::before so that a press on it is reported as a press on the
— which is exactly what the outside- click handler in views/head.php already looks for, and is why closing this by pressing away from it needs no code of its own. */ .signup[open]::before { position: fixed; z-index: 60; inset: 0; background: rgba(9, 11, 16, 0.45); content: ""; } .signup__panel { position: fixed; z-index: 61; top: 50%; left: 50%; width: min(23rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); transform: translate(-50%, -50%); } .signup > .promo__cta { margin-left: 0; } .signup__title { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; } .signup__blurb { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.82rem; line-height: 1.5; } .signup__bad { margin: 0 0 0.7rem; color: var(--down); font-size: 0.8rem; } .signup__label { display: block; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.76rem; font-weight: 600; } .signup__form input[type="email"] { width: 100%; margin-bottom: 0.7rem; padding: 0.5rem 0.65rem; } .signup__form button.primary { width: 100%; padding: 0.5rem; } /* Off the page rather than `display: none`. A form-filler skips what is not displayed and writes into what is, so a trap has to be in the layout to be walked into — and out of everybody else's way to be a trap. */ .signup__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .signup__fine { margin: 0.8rem 0 0; color: var(--faint); font-size: 0.72rem; line-height: 1.45; } .promo__x { display: inline-flex; flex: none; padding: 0.25rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--faint); cursor: pointer; } .promo__x:hover { color: var(--text); } .nav { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--border); background: var(--bg); } .nav__inner { padding-block: 0.55rem 0.5rem; } .nav__row { display: flex; align-items: center; gap: 0.55rem; min-width: 0; } .nav__row--what { gap: 0.35rem; margin-top: 0.5rem; } .nav__spacer { flex: 1 1 auto; } /* Grows on a wide screen to push the settings to the far end; on a phone, where the rail overflows and nothing can grow, it is the gap that separates the ranges from them. */ .nav__gap { flex: 1 1 auto; min-width: 0.55rem; } .brand { display: inline-flex; flex: none; align-items: center; gap: 0.45rem; color: var(--text); font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; } .brand .mark { display: block; color: var(--accent); } .brand:hover .brand__name { color: var(--accent); } /* The heading and the range it covers, as one block against the brand. */ .nav__id { display: flex; min-width: 0; flex-direction: column; padding-left: 0.65rem; border-left: 1px solid var(--border); } .navtitle { /* Blockified, because this is not always the same element. On the public overview it is a — the page's real heading is the product's name and this is a control that says which site is on screen — and an inline box ignores the three properties below it, which is a title that runs under the bird instead of ending in an ellipsis. See views/sitepick.php. */ display: block; margin: 0; overflow: hidden; color: var(--text); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; } /* Read, not seen. The public page's

and nothing else. What the page is called — the product, not the slice of it on screen — is a thing a search engine, an assistant and a screen reader all ask for and a person looking at the page does not: they can see it is a dashboard, and the nav already says whose traffic. So it is said once, in the element those three read it from, and taken out of the layout rather than out of the document. Off the page rather than `display: none`, for the same reason .signup__trap is: what is not displayed is not read out either, and a heading a screen reader skips is no heading at all. */ .offscreen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); white-space: nowrap; } /* One line of running text rather than a row of boxes: the pieces are a sentence about what is on screen, and a flex gap between "3" and "sites" would read as two facts. */ .nav__meta { margin: 0; overflow: hidden; color: var(--faint); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; } .nav__meta .live { margin-left: 0.3rem; font-size: inherit; vertical-align: baseline; } /* The heading is the switcher. Same question, so it is one control. */ .sitepick > summary { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; margin-left: -0.4rem; padding: 0.05rem 0.4rem; border-radius: var(--radius-sm); color: var(--faint); cursor: pointer; list-style: none; } .sitepick > summary::-webkit-details-marker { display: none; } .sitepick > summary:hover { background: var(--accent-soft); } .sitepick > summary:hover .navtitle, .sitepick[open] > summary { color: var(--accent); } .sitepick > summary .icon { flex: none; transition: transform 0.15s ease; } .sitepick[open] > summary .icon { transform: rotate(180deg); } /* The three theme states as one segmented control. A two-way toggle can only ever offer the other one, which leaves no way back to following the system once you have chosen. Which segment is lit comes from an attribute the pre-paint script in head.php sets, so it is never briefly wrong; with no script at all nothing is stored, the system decides, and the last rule below lights that one. */ .themeset { display: inline-flex; flex: none; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .themeset__btn { display: inline-flex; width: 26px; height: 23px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--faint); cursor: pointer; } .themeset__btn:hover { color: var(--text); } :root[data-choice="light"] [data-theme-set="light"], :root[data-choice="dark"] [data-theme-set="dark"], :root[data-choice="system"] [data-theme-set="system"], :root:not([data-choice]) [data-theme-set="system"] { background: var(--accent-soft); color: var(--accent); } .nav__out { display: flex; } /* Sign out: quiet, icon-sized, borderless until hover. */ .iconbtn { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--faint); cursor: pointer; font: inherit; } .iconbtn:hover { border-color: var(--border); background: var(--surface); color: var(--text); } .iconbtn svg { display: block; } /* ---------------------------------------------------------- form controls The plain versions, for the gate, the custom dates and the load-more button. The nav dresses its own buttons as chips below, which override these by carrying a class. Nothing here is a wearing a border — and the settings that pill held are menus of links now, so there is one thing here rather than two that had to be kept looking alike. */ /* Never shrinks. Inside a rail that scrolls, a chip row allowed to narrow spills its chips out of its own box and under whatever comes next. */ .chips { display: flex; flex: none; align-items: center; gap: 0.3rem; } .chip { display: inline-flex; flex: none; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 0.78rem; line-height: 1.35; list-style: none; text-decoration: none; white-space: nowrap; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .chip::-webkit-details-marker { display: none; } .chip:hover { border-color: var(--accent-line); color: var(--accent); } .chip.is-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); font-weight: 600; } .chip .icon { flex: none; } .chip--menu { padding-inline: 0.55rem 0.5rem; } .chip--menu .icon:last-child { transition: transform 0.15s ease; } details[open] > .chip--menu .icon:last-child { transform: rotate(180deg); } /* The two settings, at the end of the rail. A chip that wears what it is set to and opens a list of the others, which is the range's own control in a different hat — and the reason neither of them is a rather than anything hand-built. It is the one control on this page that opens the operating system's own picker, which is the picker people already know how to use and the only one that works on a phone. Dressed down to the size of the seven beside it — the default is a button with a border and a lot of padding — and given the same round shape, so the row reads as eight of one thing rather than seven and a widget. */ .picker__hex { flex: none; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; } .picker__hex::-webkit-color-swatch-wrapper { padding: 2px; } .picker__hex::-webkit-color-swatch { border: none; border-radius: 50%; } .picker__hex::-moz-color-swatch { border: none; border-radius: 50%; } /* The one line saying a chosen colour may come back adjusted, shown only while a chosen colour is what is selected. */ .picker__aside { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--faint); max-width: 30rem; } .picker__go { align-self: flex-start; padding: 0.35rem 0.8rem; font-size: 0.8rem; } :root[data-js] .picker__go { display: none; } /* --------------------------------------------------------------- copy buttons One per code block, in the corner, put there by views/snippet.php. Opaque and sitting over the code rather than beside it: the first line of a snippet is usually its longest, so there is no clear space to sit in. The button is a sibling of the 
 and not a child, so the code scrolls
   sideways underneath it while it stays where it is.

   Only ever drawn once a script has run. head.php marks the root the moment
   one does; before that this is a button that could not copy anything, and one
   of those is worse than none — it is pressed, nothing happens, and there is
   no way to tell whether it worked. */
.snippet__copy {
    position: absolute;
    /* Inside the block's own border rather than floating a few pixels off it.
       A button inset from the corner leaves a sliver of code showing down its
       right-hand side, which does not read as a button over code — it reads as
       something drawn in the wrong place. Filling the corner, with a rule down
       one side and along the bottom, makes it part of the block's chrome. */
    top: 1px;
    right: 1px;
    display: none;
    padding: 0.28rem 0.6rem;
    border: 0;
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0 6px 0 6px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
}

/* No width is set, deliberately. The word changes to "Copied" and, where the
   clipboard was refused, to "Selected" — and anchored to the right corner a
   wider word grows leftward, so the button never moves out from under the
   pointer that is still resting on it. */
:root[data-js] .snippet__copy { display: block; }

.snippet__copy:hover { color: var(--text); }

.snippet__copy:active { background: var(--bg); }

/* The setup page's blocks sit on the card colour rather than the page's, so a
   button painted the same would have nothing but its two rules to be seen by. */
.setup .snippet__copy { background: var(--bg); }

/* ------------------------------------------------------- the stale code panel

   The snippet describes the badge that is saved. The preview above it follows
   the picker live. So the moment somebody changes a control the two have
   parted, and this covers the code to say so.

   Covering it rather than annotating it is the decision worth stating: what is
   underneath is now the wrong thing to copy, and a warning beside code is a
   warning people copy past. The panel goes when the two agree again, which is
   either saving or putting the controls back. */
.snippet__box {
    position: relative;
    margin: 0 0 0.9rem;
}

/* The box carries the spacing now that every snippet is inside one, and the
   block makes room above itself for the button in its corner.
 
   Room rather than overlap, which is the second thing tried here and the one
   that survives. A button sitting on top of the code covers most of the first
   line and leaves the bottom two pixels of it showing underneath — letter
   bottoms with no letters above them, which reads as a rendering fault rather
   than as a control. Sizing the button to cover the line exactly would work
   until the day a font size changed. This cannot be wrong. */
.snippet__box .snippet {
    margin-bottom: 0;
    padding-top: 2.05rem;
}

/* The setup page styles its own code blocks — roomier, on the card's ground
   rather than the page's, because that page has no cards. `.setup pre` beats
   `.snippet` on specificity and always did; this is the one thing it cannot
   reach, because the rule it is up against is on the  inside. */
.setup .snippet code { font-size: 0.8rem; }

.snippet__stale {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    /* Opaque first for anything that cannot mix, then a shade of translucency
       so it reads as code covered over rather than as code gone. */
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 93%, transparent);
    backdrop-filter: blur(2px);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    text-align: center;
}

/* The UA's `display: none` for [hidden] loses to the rule above, which is how
   a panel meant to be hidden ends up permanently on screen. */
.snippet__stale[hidden] { display: none; }

.snippet__stale p {
    margin: 0 !important;
    font-size: 0.78rem !important;
    line-height: 1.45;
    color: var(--muted) !important;
}

.snippet__stale button {
    padding: 0.34rem 0.85rem;
    font-size: 0.8rem;
}

.snippet__stale button[disabled] { opacity: 0.55; cursor: default; }

/* A phone's code block is short enough that a centred column does not fit.
   The message goes and the button stays, which is the half that does anything.

   Except when the message is the half that does something: a save that failed
   says why here, and a sentence nobody can read is the same as no sentence.
   The script marks the panel while it is carrying one — see say() at the foot
   of views/site.php — and a live region set to display:none is not announced
   either, so this is what makes the failure reach a screen reader as well. */
@media (max-width: 30rem) {
    .snippet__stale p { display: none; }
    .snippet__stale[data-state] p { display: block; }
}

/* Two by two rather than a row. This card is a fixed column whatever the
   screen is, so four readings never fit a line — and three with a fourth
   hanging underneath reads as a mistake where a square reads as a decision. */
.site__figures .metric { flex: 1 1 40%; }

/* The badge, shown as it will appear rather than described. On the page's own
   ground, not the card's, so that what is being previewed is the badge and not
   the badge plus whatever is behind it here. */
.site__badgepreview img {
    display: block;
    max-width: 100%;
    height: auto;
}