/* Kalkas website (v2, warm): what the Kalkas Keel theme (src/theme.rs) cannot say yet.
* Each block names the Keel gap that replaces it
* (docs/design/site-redesign-2026-10.md, "Keel gaps"). */
/* ---------- fonts: keel#3821 (theme-owned font faces) ----------
* The brand text face (brand/tokens.json): Inter, preloaded and optional,
* so it never reflows the hero. */
@font-face {
font-family: "Inter";
src: url("/assets/fonts/inter-latin.woff2") format("woff2");
font-weight: 100 900;
font-display: optional;
}
@font-face {
font-family: "Inter Fallback";
src: local("Arial"), local("Liberation Sans"), local("Helvetica");
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22.4%;
line-gap-override: 0%;
}
body, button { font-family: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif; font-feature-settings: "cv11", "ss01"; }
/* ---------- stacking: keel#3941 ---------- */
[data-keel-surface="top"] { z-index: 50; }
/* ---------- soft depth: W-1630 (layered shadows on a surface) ----------
* Warm, low shadows instead of borders: cards float on the cream. */
[data-keel-surface="qcard"] { box-shadow: 0 1px 2px rgba(80, 50, 20, .06), 0 18px 48px -12px rgba(120, 70, 20, .22); }
[data-keel-surface="step"], [data-keel-surface="chan"] { box-shadow: 0 1px 2px rgba(80, 50, 20, .05), 0 10px 30px -14px rgba(120, 70, 20, .18); }
[data-keel-surface="cta-ghost"] { box-shadow: inset 0 0 0 1.5px var(--keel-token-line); }
[data-keel-surface="nudge-btn"] { box-shadow: 0 2px 8px -2px rgba(120, 70, 20, .25); }
[data-keel-surface="stage-art"] { border-radius: 2.5rem; }
/* ---------- a cover layer's height on a replaced element: new gap, with W-1630 ----------
* Position::Cover sets inset 0, but an ![]()
keeps its intrinsic height, so
* the scene would stop short of the stage. */
[data-keel-surface="stage-art"] { height: 100%; }
/* ---------- flex grow and shrink per child: new gap, with W-1630 ---------- */
[data-keel-surface="bell"] { flex: none; }
[data-keel-surface="nudge-text"] { flex: 1 1 10rem; }
/* ---------- gentle motion: W-1629 (looping, reduced-motion-aware) ----------
* The card breathes, the bell rings once in a while, the nudge settles in.
* All of it stops under reduced motion. */
@keyframes kalkas-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kalkas-ring { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(14deg); } 92% { transform: rotate(-12deg); } 95% { transform: rotate(6deg); } }
@keyframes kalkas-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[data-keel-surface="qcard"] { animation: kalkas-float 7s ease-in-out infinite; }
[data-keel-surface="bell"] { animation: kalkas-ring 6s ease-in-out 1.2s infinite; transform-origin: 50% 20%; }
[data-keel-surface="nudge"] { animation: kalkas-settle .7s cubic-bezier(.22, 1, .36, 1) .3s both; }
[data-keel-surface="step"], [data-keel-surface="chan"], [data-keel-surface="cta-primary"], [data-keel-surface="cta-ghost"] { transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s; }
[data-keel-surface="step"]:hover, [data-keel-surface="chan"]:hover, [data-keel-surface="cta-primary"]:hover, [data-keel-surface="cta-ghost"]:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
[data-keel-surface="qcard"], [data-keel-surface="bell"], [data-keel-surface="nudge"] { animation: none; }
[data-keel-surface="step"]:hover, [data-keel-surface="chan"]:hover, [data-keel-surface="cta-primary"]:hover, [data-keel-surface="cta-ghost"]:hover { transform: none; }
}
/* ---------- skip link: a visually hidden surface until it has focus ---------- */
[data-keel-surface="skip"] { position: absolute; left: -9999px; top: 0.5rem; z-index: 100; padding: 0.7rem 1.2rem; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
[data-keel-surface="skip"]:focus { left: 1rem; }
/* ---------- the phone menu: keel#4992 gives the no-script disclosure; its look is the site's ----------
* A native : the summary is a round button in the header row and the
* panel opens as a card under the header. */
[data-keel-surface="nav-menu"] { margin-left: 0.25rem; }
/* The theme hides it from 961 px, but the node style of a kit disclosure wins: say it here. */
@media (min-width: 961px) { [data-keel-surface="nav-menu"] { display: none; } }
[id="menu.trigger"] { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; background: #fff; color: #2b2420; font-weight: 600; font-size: 0.9rem; box-shadow: inset 0 0 0 1.5px #eadfd2; }
[id="menu.trigger"]::-webkit-details-marker { display: none; }
[id="menu.panel"] { position: absolute; left: 0.75rem; right: 0.75rem; top: calc(100% + 0.25rem); z-index: 60; border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(80, 50, 20, .06), 0 18px 48px -12px rgba(120, 70, 20, .28); }
[data-keel-surface="menu-link"] { border-radius: 0.9rem; }
/* ---------- soft depth and full-height cards: W-1630 ---------- */
[data-keel-surface="bcard"] { box-shadow: 0 1px 2px rgba(80, 50, 20, .05), 0 10px 30px -14px rgba(120, 70, 20, .18); height: 100%; }
[data-keel-surface="toc-link"], [data-keel-surface="auth-card"] { box-shadow: 0 1px 2px rgba(80, 50, 20, .05), 0 10px 30px -14px rgba(120, 70, 20, .18); }
[data-keel-surface="auth-card"] { box-shadow: 0 1px 2px rgba(80, 50, 20, .06), 0 18px 48px -12px rgba(120, 70, 20, .22); }
[data-keel-surface="clause"] { scroll-margin-top: 5.5rem; }
/* ---------- code and paths in a monospace face: new gap (a surface font family), with W-1630 ----------
* The one place the public site uses a monospace face: code blocks, route
* paths and names in the API reference, and inline code in the docs. Long
* lines wrap instead of scrolling, so a phone never needs a sideways scroll. */
[data-keel-surface="code"], [data-keel-surface="path"], [data-keel-surface="row-name"], [data-keel-surface="term-name"], main code {
font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
}
[data-keel-surface="code"] { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: 0.8rem; }
[data-keel-surface="path"], [data-keel-surface="row-name"], [data-keel-surface="term-name"] { overflow-wrap: anywhere; }
main code { font-size: 0.88em; background: #f5ede3; padding: 0.1em 0.4em; border-radius: 0.45em; overflow-wrap: anywhere; }
/* ---------- soft depth on the new cards: W-1630 ---------- */
[data-keel-surface="pick"], [data-keel-surface="way"], [data-keel-surface="op"] { box-shadow: 0 1px 2px rgba(80, 50, 20, .05), 0 10px 30px -14px rgba(120, 70, 20, .18); }
[data-keel-surface="pick"] { transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s; }
[data-keel-surface="pick"]:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { [data-keel-surface="pick"]:hover { transform: none; } }
/* ---------- anchors under the sticky header, and a timing chip beside its line: W-1630 ---------- */
[data-keel-surface="dev-band"], [data-keel-surface="op"] { scroll-margin-top: 5.5rem; }
[data-keel-surface="timing-text"] { flex: 1 1 12rem; }