/* ==========================================================================
KECA U.S.A. — base element rules for the VIEWER pages
--------------------------------------------------------------------------
Base rules carried over from the live site so headings and buttons match
rather than being re-invented per page.
WHO LOADS THIS FILE:
app/index.html
app/viewer.html
app/viewer-states.html
app/tearsheet.html
app/insights.html
and deliberately nothing else. Each of the three later pages was written
against these rules from the start, in the same tokens → base → page-styles
order as viewer.html, so all four inherit one set of page furniture instead
of re-authoring it:
index.html uses .btn, .wrap, .eyebrow and the heading scale, and
overrides them only by class.
tearsheet.html uses .btn, .btn--ghost, .wrap and .eyebrow; its own
stylesheet adds the sheet and the print rules.
insights.html the internal product intelligence dashboard. Uses .btn,
.btn--ghost, .wrap, .eyebrow and .rule-label, and
restates the .site-head / .site-nav / .site-foot chrome
in its own inline block rather than linking viewer.css,
which also carries the 3D stage layout.
plan.html and dev/test.html still deliberately do NOT load this file, for
the reason below.
WHY IT IS A SEPARATE FILE — 2026-08-31
These rules used to sit at the bottom of app/assets/css/keca-tokens.css.
When the two parallel token files were merged into that one file, plan.html
and dev/test.html started linking it — and would have inherited these rules
for the first time. That is not a no-op: neither page's own stylesheet sets
heading `margin`/`color`, `h1`/`h2`/`h3` `font-size`, `a` colour, `.wrap`,
`[hidden] { display: none !important }` or `.eyebrow`/`.rule-label`, so the
plan tool and the test runner would both have visibly restyled themselves as
a side effect of a structural cleanup. Splitting them out keeps
keca-tokens.css a pure token file that is safe for every page to link.
CASCADE POSITION MATTERS. Link this AFTER keca-tokens.css and BEFORE
viewer.css — exactly where these rules sat before the split. viewer.css
relies on winning against them at equal specificity (e.g. its own `.brand`
and `.back-link` colours over the `a` rule here), and it wins by source
order alone.
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--paper);
font-family: var(--body-font);
font-size: 15px;
font-weight: 400;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
font-family: var(--head-font);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
line-height: 1.25;
margin: 0 0 .6em;
color: var(--paper);
}
h1 { font-size: 1.5rem; letter-spacing: .10em; }
h2 { font-size: 1.05rem; letter-spacing: .10em; }
h3 { font-size: .82rem; font-weight: 500; letter-spacing: .14em; color: var(--paper-muted); }
p { margin: 0 0 1em; }
a { color: var(--paper); text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }
/* Small uppercase label above a heading. */
.eyebrow {
font-family: var(--head-font);
font-weight: 500;
font-size: var(--keca-fs-micro, 0.6875rem);
text-transform: uppercase;
letter-spacing: .18em;
color: var(--paper-muted);
margin: 0 0 .5em;
display: block;
}
/* Label sitting on a horizontal rule — the site's section marker. */
.rule-label {
display: flex;
align-items: center;
gap: .9rem;
font-family: var(--head-font);
font-weight: 500;
font-size: var(--keca-fs-micro, 0.6875rem);
text-transform: uppercase;
letter-spacing: .18em;
color: var(--paper-muted);
margin: 0 0 .9rem;
}
.rule-label::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
/* Buttons — square, bordered, monochrome. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .78rem 1.4rem;
border: 1px solid var(--accent);
border-radius: var(--radius);
background: var(--accent);
color: var(--surface);
font-family: var(--head-font);
font-weight: 500;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .16em;
text-decoration: none;
cursor: pointer;
box-shadow: var(--shadow-rest);
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--surface); }
.btn--ghost {
background: transparent;
color: var(--paper);
}
.btn--ghost:hover { background: var(--tint); color: var(--paper); border-color: var(--accent); }
.btn[disabled],
.btn[aria-disabled="true"] {
background: transparent;
color: var(--paper-muted);
border-color: var(--line);
cursor: not-allowed;
}
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
background: transparent;
color: var(--paper-muted);
border-color: var(--line);
}
/* Border-based focus ring, matching the site's border idiom.
2px, not the 1px this used to be. keca-tokens.css already defines
--keca-focus-width: 2px and plan.css and room.css both honour it, so the
index, viewer and tearsheet pages were the only three in the app drawing a
focus ring at half the thickness of every other page — on the same monochrome
ground, where the ring is the ONLY indication of focus (there is no colour
change to fall back on). A hairline outline against #d6d4d2 rules is easy to
lose, and WCAG 2.2 Focus Appearance asks for at least a 2px perimeter. */
:focus-visible {
outline: var(--keca-focus-width, 2px) solid var(--accent);
outline-offset: var(--keca-focus-offset, 2px);
}
/* Layout wrapper. */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 32px);
}
[hidden] { display: none !important; }