/* The calm shell — the styling template every converted page opts into. Set data-calm on (route-styles.js and the static generator do this for CALM_ROUTES) and a page gets: no press grain, the cool off-white ground, one typeface at one weight, the sticky top bar instead of the rail, the classic-window primitive (.hx-win), and the numbered note list (.anno-list). Page files add only what is specific to that page. */ /* The press grain is declared inside @layer printed-surfaces with !important. Among important declarations the earliest layer wins, so the override has to live in the tokens layer to take effect. */ @layer tokens{ html[data-design-system="halde"][data-calm] :is(main,.stack,.pnl,section)::before, html[data-design-system="halde"][data-calm] :is(main,.stack,.pnl,section)::after{background-image:none!important} html[data-design-system="halde"][data-calm] :is(body,main,.stack,.pnl,section){background-image:none!important} html[data-design-system="halde"][data-calm] .landing-page>.pnl, html[data-design-system="halde"][data-calm] .landing-page .pnl, html[data-design-system="halde"][data-calm] .landing-page{background-image:none!important} } /* ---- ground and palette (light only) ---- */ html[data-design-system="halde"][data-calm]:not([data-resolved-theme="dark"]){ --bg-page:#fafbfb; --bg-surface:#ffffff; --bg-surface-muted:#f1f2f2; --border-default:rgba(15,23,42,.08); --border-strong:rgba(15,23,42,.14); --text-primary:#1a1a1a; --text-secondary:#5b6068; --text-tertiary:#8a9099; } /* ---- type: one weight, small inside wide margins ---- */ html[data-design-system="halde"][data-calm]{ --type-landing-hero-weight:400; --type-landing-section-weight:400; --type-product-hero-weight:400; --type-product-hero-size:clamp(34px,3vw,46px); --type-product-hero-tracking:-.035em; --type-landing-section-size:clamp(28px,2.35vw,36px); --type-landing-display-tracking:-.03em; --type-landing-display-leading:1.12; --type-landing-body-size:15px; --type-landing-lead-size:15px; --ds-section-space:clamp(120px,16vh,190px); } html[data-design-system="halde"][data-calm] :is(body,main,.stack,.pnl,section){background-image:none!important} html[data-design-system="halde"][data-calm] body{background:var(--bg-page)} /* ---- claims: the quiet second line of a title ---- */ html[data-design-system="halde"][data-calm] h1 .claim-quiet, html[data-design-system="halde"][data-calm] h2 .claim-quiet{display:block;color:var(--text-tertiary)} /* ---- eyebrow chips (kept for pages that still show one) ---- */ html[data-design-system="halde"][data-calm] .lab.ds-eyebrow{display:inline-block;padding:5px 8px;color:var(--text-secondary);border:1px solid var(--border-strong);border-radius:4px;font-size:10px;letter-spacing:.1em} /* ---- the numbered note list ---- */ html[data-design-system="halde"] .anno-list{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:0;max-width:36ch;counter-reset:anno} html[data-design-system="halde"] .anno-list .anno{margin:0;padding:11px 0 11px 40px;position:relative;color:var(--text-secondary);font:400 clamp(16px,1.15vw,18px)/1.35 var(--font-editorial);letter-spacing:-.015em;border-top:1px dotted rgba(17,17,17,.3);counter-increment:anno} html[data-design-system="halde"] .anno-list .anno:first-child{border-top:0;padding-top:0} html[data-design-system="halde"] .anno-list .anno:first-child::before{top:.35em} html[data-design-system="halde"] .anno-list .anno::before{content:counter(anno,decimal-leading-zero);position:absolute;left:0;top:calc(11px + .35em);color:#ff5a1f;font:700 10px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em} html[data-design-system="halde"][data-resolved-theme="dark"] .anno-list .anno{border-top-color:rgba(241,241,237,.3)} html[data-design-system="halde"] .anno-list .anno--dropped{color:#ff5a1f} html[data-design-system="halde"] .anno-list .anno--kept{color:var(--text-primary)} html[data-design-system="halde"][data-resolved-theme="dark"] .anno-list .anno--kept{color:#f1f1ed} /* ---- the classic window ---- */ html[data-design-system="halde"] .hx-win{min-width:0;border:1.5px solid #111;background:#fff} html[data-design-system="halde"] .hx-win>header{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 10px;border-bottom:1.5px solid #111;font:600 11px/1 var(--font-technical);letter-spacing:.08em} html[data-design-system="halde"] .hx-win>header i{font-style:normal;font-size:12px} html[data-design-system="halde"] .hx-win>header span{white-space:nowrap} html[data-design-system="halde"] .hx-win>header .stripes{flex:1 1 auto;min-width:14px;height:12px;background:repeating-linear-gradient(180deg,#111 0 1.5px,transparent 1.5px 3.5px)} html[data-design-system="halde"] .hx-win>pre{box-sizing:content-box;min-height:calc(1.6em * var(--hx-lines,6));margin:0;padding:14px 14px 16px;overflow:hidden;font:400 12.5px/1.6 var(--font-technical);color:#111;white-space:pre;text-align:left} html[data-design-system="halde"] .hx-win--play>pre{text-align:center} html[data-design-system="halde"] .hx-win pre b{font-weight:400} html[data-design-system="halde"] .hx-win pre b.t1,html[data-design-system="halde"] .hx-win pre s{color:#ff5a1f;text-decoration:none} html[data-design-system="halde"] .hx-win pre b.t2{color:#b9bcc2} html[data-design-system="halde"] .hx-win pre u{color:#2f8f3a;text-decoration:none} html[data-design-system="halde"] .hx-win pre i{color:#5b6068;font-style:normal} html[data-design-system="halde"] .hx-win pre strong{font-weight:600} html[data-design-system="halde"] .hx-win pre a{color:#ff5a1f;text-decoration:none;border-bottom:1px solid currentColor} html[data-design-system="halde"] .hx-win pre a:is(:hover,:focus-visible){background:#fff3ee;outline:none} html[data-design-system="halde"][data-resolved-theme="dark"] .hx-win{border-color:#f1f1ed;background:#0a0a09} html[data-design-system="halde"][data-resolved-theme="dark"] .hx-win>header{border-color:#f1f1ed} html[data-design-system="halde"][data-resolved-theme="dark"] .hx-win>header .stripes{background:repeating-linear-gradient(180deg,#f1f1ed 0 1.5px,transparent 1.5px 3.5px)} html[data-design-system="halde"][data-resolved-theme="dark"] .hx-win>pre{color:#f1f1ed} html[data-design-system="halde"][data-resolved-theme="dark"] .hx-win pre b.t2{color:#4a4d52} html[data-design-system="halde"][data-resolved-theme="dark"] .hx-win pre u{color:#8fe08f} html[data-design-system="halde"][data-resolved-theme="dark"] .hx-win pre a:is(:hover,:focus-visible){background:rgba(255,90,31,.12)} /* ---- section deep links land below the sticky bar ---- */ html[data-design-system="halde"][data-calm] main>section{scroll-margin-top:72px} /* ---- top bar instead of the rail ---- */ @media (min-width:981px){ html[data-design-system="halde"][data-calm]{--home-nav-width:0px;--app-rail-width:0px} html[data-design-system="halde"][data-calm] :is(header.mast,header.mast.is-scrolled){position:sticky;inset:auto;top:0;width:100%;height:60px;z-index:40;border:0;border-bottom:1px solid var(--border-default);background:color-mix(in srgb,var(--bg-page) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} html[data-design-system="halde"][data-calm] .mastin{width:min(100%,1180px);height:60px;display:flex;flex-direction:row;align-items:center;gap:24px;margin:0 auto;padding:0 24px} html[data-design-system="halde"][data-calm] .mastin>a.mast-brand{width:92px;height:26px} html[data-design-system="halde"][data-calm] .mastnav{width:auto;height:100%;flex:1 1 auto;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:0;margin:0;padding:0;font-size:13px;letter-spacing:0;text-transform:none} html[data-design-system="halde"][data-calm] .mast-group-label{display:none} html[data-design-system="halde"][data-calm] .mast-group, html[data-design-system="halde"][data-calm] .mast-group+.mast-group, html[data-design-system="halde"][data-calm] .mast-group-links{width:auto;display:contents;margin:0;padding:0;border:0} html[data-design-system="halde"][data-calm] .mastnav .lnk{width:auto;height:100%;min-height:0;display:inline-flex;align-items:center;padding:0 12px;color:var(--text-primary)!important;background:transparent;font:400 13px/1 var(--font-editorial);letter-spacing:0;text-transform:none} html[data-design-system="halde"][data-calm] .mastnav .lnk::before{display:none} html[data-design-system="halde"][data-calm] .mastnav .lnk:hover, html[data-design-system="halde"][data-calm] .mastnav .lnk.here{color:var(--text-primary)!important;background:transparent} html[data-design-system="halde"][data-calm] .mastnav .lnk.here::after{display:block;left:12px;right:12px;bottom:-1px;height:1px;background:var(--text-primary)} html[data-design-system="halde"][data-calm] .key-help{width:auto;height:30px;margin:0 0 0 8px;padding:0 4px 0 10px;border-radius:6px;font-size:9px} html[data-design-system="halde"][data-calm] .mast-utils{width:auto;height:100%;flex-direction:row;align-items:center;gap:10px;margin:0} html[data-design-system="halde"][data-calm] .mast-social{height:30px;flex-direction:row;justify-content:flex-start;gap:2px;padding:0 8px;border:0;border-inline:1px solid var(--border-default)} html[data-design-system="halde"][data-calm] .mast-social a{width:26px;height:26px} html[data-design-system="halde"][data-calm] .theme-toggle{width:30px;height:30px;border-radius:6px} html[data-design-system="halde"][data-calm] :is(main,.bigfoot,.page-resource){width:100%;margin-left:0} }