/* index.css — the front page a publish root opens on. * * Light by construction, and not viewer.css: that sheet is tuned to a canvas * that has to hold a graph for a long sitting; this is a short document * with no canvas at all, read once on the way into a model. The two share the * inlining and no rule. * * The palette resembles kernelize.ai — near-black ink on white, electric azure * as the one accent — written here rather than fetched, and the nav is the * site's own header redrawn: its logo, its links, its `Contact` pill, in the * site's layout and tones spelled out below with local fallback stacks for * the three faces the site loads and this page does not. Nothing in this file * may name a URL: no imported sheet, no url function, no font from anywhere. * The page opens straight off a local file and asks the network for nothing, * which is the guarantee every kcharter page carries and the reason a root can * be read before a server has ever seen it. The suite pins that literally, so * even a comment here may not spell one of those constructs out. * * Colour is spent on one thing: the accent marks what the reader is meant to * act on — the wordmark's dot, the `Charter` button beside it, a card under * the pointer and the variant a card has selected. Everything else is greyscale — the bar's links in the site's * slate, its pill in the site's navy — so a grid of thirty models does not * read as thirty offers. * * **Two themes, one default.** `:root` below is the light one and it is what * the page opens on — a short document read once on the way into a model is a * document, and documents are light. The dark theme is the site's own navy * under the same accent, and it is reached by the toggle in the nav and by * nothing else: the system preference is not consulted, because a reader who * darkened their desktop did not thereby ask this page to stop matching the * site it is a face for. Only the tokens change between the two — no rule * below names a colour, so a theme is a block of custom properties and never * a second stylesheet to keep in step. */ :root { --bg: #ffffff; --bg2: #f5f7fa; --ink: #0b1020; --dim: #5a6478; --faint: #8b94a7; --line: #e2e6ee; --accent: #0099ff; --accent-ink: #0072c2; /* The bar: the site's header under this theme's ground. The dark block's * values are the site's own; these are the same bar on the page's white. */ --bar: #ffffff; --bar-line: #e2e6ee; --bar-link: #6a778a; --pill: #25253d; --pill-ink: #ffffff; --pill-shade: #191926; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* The site's three faces, each first in a stack that ends on a face every * machine has: the logo's Open Sauce One over the page's sans, the links' * Fragment Mono over the page's mono, the pill's Saira over the sans. A * name is not a fetch — a reader who has the face sees it, and one who does * not sees the same bar in the fallback. */ --logo-face: "Open Sauce One", var(--sans); --link-face: "Fragment Mono", var(--mono); --pill-face: Saira, var(--sans); --gutter: 24px; --wide: 1040px; } /* The other theme, on the attribute the nav's toggle writes on ``. The * site's navy as ground, the same accent over it, and `--accent-ink` going * *up* rather than down: a hover has to separate from the accent, and on a * dark ground the direction that separates is brighter. */ :root[data-theme="dark"] { --bg: #000717; --bg2: #10162b; --ink: #eef1f6; --dim: #9aa2b4; --faint: #667089; --line: #23294a; --accent: #0099ff; --accent-ink: #36aefc; --bar: #000717; --bar-line: #191926; --bar-link: #6a778a; --pill: #25253d; --pill-ink: #ffffff; --pill-shade: #191926; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* ── nav ─────────────────────────────────────────────────────────────── */ /* The site's header, redrawn: a full-width band on the bar ground with a * hairline under it, and three groups across it — the logo pair at the left, * the site's page links across the middle, the `Contact` pill and this page's * theme toggle at the right. Under the dark theme the tokens are the site's * own values, so the bar *is* the site's; under the light one it is the same * bar on the page's white. The band runs the width of the viewport as the * site's does, and wraps rather than clips where the links do not fit. */ #top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 14px var(--gutter); background: var(--bar); border-bottom: 1px solid var(--bar-line); } #top .logo { display: flex; align-items: center; gap: 16px; } .wordmark { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } #top .wordmark { font-family: var(--logo-face); } /* The wordmark links out to the kernelize.ai homepage: a site's wordmark goes * to the site, as it does on the site's own bar. It is ink, and the dot after * it is where its accent goes — the page's stand-in for the site's mark, which * is not fetched. */ #top .wordmark::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--accent); vertical-align: 0.12em; } /* `Charter`, beside the wordmark: the pair the viewer's masthead opens on, * drawn here in this page's own tokens — the site's mark and the product's * button, one mark and one control. It is an anchor drawn as a button because * it navigates (here to the top of this very page: the models are what the * page is), in the accent the wordmark's dot spends and on `--bg2`, so it sits * with the mark and not with the site's pill or the grey theme toggle. Pulled * in under the logo group's gap so the two read as one unit; the site's links * begin a full stretch away. */ #top .charter { font-size: 18px; font-weight: 600; color: var(--accent); background: var(--bg2); border: 1px solid var(--accent); border-radius: 4px; padding: 3px 10px; margin-left: -6px; } #top .charter:hover { color: var(--accent-ink); border-color: var(--accent-ink); } /* The Charter mark, inside the button before the word: `assets/charter.png`, * kcharter's own and committed beside this sheet, fetched by the page's `img` * rather than from here, so the one attribute the rule reads is the one that * names it. Black ink on a clear ground, standing a little taller than the * label and sunk to centre on it; under the dark theme it is inverted to * white, so the mark reads on the navy the way the label does and never * lands as a tile. */ #top .charter .mark { height: 1.4em; width: auto; margin-right: 7px; vertical-align: -0.3em; } :root[data-theme="dark"] #top .charter .mark { filter: invert(1); } /* The site's links, as the site sets them: small uppercase monospace, tight, * in the site's slate, every one out to a kernelize.ai page. They take the * middle of the bar and are pushed off the logo pair by the bar's gap. */ .navlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-left: auto; font-family: var(--link-face); font-size: 14px; letter-spacing: -0.04em; text-transform: uppercase; color: var(--bar-link); } .navlinks a:hover { color: var(--ink); } /* The right-hand group: the site's `Contact` pill, then the toggle the site * does not have. */ #top .navend { display: flex; align-items: center; gap: 16px; } /* The site's one button, redrawn: small uppercase in the site's face, white * on a navy pill with the site's dark vertical gradient and 6px radius. It is * the site's navy under both themes — it is the site's button, and a white * pill on a white bar would be a second button shape to explain. */ #top .contact { font-family: var(--pill-face); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pill-ink); background: linear-gradient(180deg, var(--pill), var(--pill-shade)); border-radius: 6px; padding: 7px 14px; } #top .contact:hover { filter: brightness(1.2); } /* The theme toggle: the page's one control, and the only thing in the nav that * is not a link. Quiet — it names the theme it would switch to, so the press * is self-describing and the nav does not grow a grey thing competing with the * pair at its head for the accent. */ #theme { font-family: var(--mono); font-size: 12px; color: var(--bar-link); background: transparent; border: 1px solid var(--bar-line); border-radius: 4px; padding: 4px 10px; cursor: pointer; } #theme:hover { color: var(--accent-ink); border-color: var(--accent); } /* ── hero ─────────────────────────────────────────────────────────────── */ #hero { max-width: var(--wide); margin: 0 auto; padding: 72px var(--gutter) 56px; border-bottom: 1px solid var(--line); } #hero h1 { margin: 0; font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; } #hero .tagline { margin: 20px 0 0; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--dim); } /* ── the grid ─────────────────────────────────────────────────────────── */ #models { max-width: var(--wide); margin: 0 auto; padding: 44px var(--gutter) 64px; } .sectionhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .sectionhead h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); } .sectionhead .sorthead { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--faint); } /* The sort menu: a native select, because nothing here has to be styled as * a title, in the section head's own type and greyscale — it regroups, it * does not act on a model, so it spends no accent. */ .sectionhead .sort { color: var(--faint); } .sectionhead select { font: inherit; color: var(--dim); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; cursor: pointer; } .sectionhead select:hover { color: var(--ink); border-color: var(--accent); } .sectionhead .count { color: var(--faint); } /* The grid is a column of groups — one heading over one grid of cards — and * which record key heads them is the sort menu's; a regroup redraws these * from the records in hand. */ .grid { display: flex; flex-direction: column; gap: 32px; } /* A heading: the key's value, small and quiet in the section head's own * voice, so a page of thirteen models under seven families reads as a list * with rules across it rather than seven pages. */ .group .heading { margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--dim); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } /* The whole card is the link, as it was when the card was one anchor: the * title is the anchor and its `::after` is stretched over the card, so a * click anywhere on the ground opens the selected variant. The axes row is * raised above that stretch — a button cannot live inside an anchor and a * press must pick a variant, not navigate. */ .card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 156px; padding: 18px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; } .card:hover { border-color: var(--accent); background: var(--bg); } .card .model { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; overflow-wrap: anywhere; } .card .model::after { content: ""; position: absolute; inset: 0; border-radius: 12px; } .card .arch { font-family: var(--mono); font-size: 12.5px; color: var(--dim); overflow-wrap: anywhere; } /* One row per axis: its name, then its values — buttons where the record * holds more than one, a plain label where it holds one. The selected value * takes the accent, the one colour the page spends on what the reader acts * on; a label takes none, because there is nothing to act on. */ .card .axes { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 12px; } .card .axis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .card .axisname { min-width: 3.6em; color: var(--faint); } .card .value { font: inherit; color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 2px 9px; cursor: pointer; } .card .value:hover { color: var(--accent-ink); border-color: var(--accent); } .card .value.selected { color: var(--accent-ink); border-color: var(--accent); background: var(--bg); } .card .value.label { border-color: transparent; padding-left: 0; cursor: default; } .card .foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--faint); } .card .file { overflow-wrap: anywhere; } .card .size { white-space: nowrap; } .empty { margin: 0; padding: 40px 0; font-size: 16px; color: var(--dim); } /* ── footer ───────────────────────────────────────────────────────────── */ footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; max-width: var(--wide); margin: 0 auto; padding: 28px var(--gutter) 48px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); } footer .wordmark { font-size: 15px; color: var(--dim); } footer .footlinks { display: flex; gap: 18px; } footer .footlinks a:hover { color: var(--accent-ink); } footer .colophon { margin-left: auto; }