/* The UA's `[hidden]{display:none}` lives in the user-agent origin, so ANY author `display` rule beats it: an element carrying both `hidden` and a class like `.grid{display:grid}` stays on screen while script believes it hid it. That is why the AI Models page showed its cards AND a stale "Loading…" above the table in table view (2026-09-05). Declared once here, for every page that loads the shell, so no page has to remember. */ [hidden]{display:none!important;} /* * tux-shell.css — ONE chrome + base-typography layer for every standalone * TTI Code page (AI Activity, Boards, Scorecard, AI Models, methods, guide, * policy, launch). * * Load order on a page: tux-tokens.css → tux-classes.css → tux-shell.css * (+ tux-shell.js in , pre-paint, for the tti/tti-dark theme boot). * * This file replaces the per-page copies of the navbar CSS that had to be * kept "byte-identical" by convention (B2 shell-fragment consolidation) and * the per-page @font-face/token blocks. Everything here references CANONICAL * tokens (kit doctrine: rename, don't alias); the only new names are three * documented DERIVATIONS at the bottom of the token section — zero raw hex * outside them. * * The navbar is the editorial TuxSiteNav recipe, matching the forge * header.tmpl: page-surface bar + 1px border, uppercase Work Sans links, * wash hover, 2px primary underline on the active item. The maroon bar was * retired 2026-08-27. Light/dark comes entirely from the canonical tokens — * there are NO theme-scoped rules in this file (light-dark() needs the * color-scheme set below). */ /* ── derived tokens (documented; canonical-composed, no free hex) ── */ :root { color-scheme: light; } [data-theme="tti-dark"] { color-scheme: dark; } :root { /* text on a --brand-primary fill: white on maroon (light), warm-black ink on lifted teal (dark) — same semantics as the forge --color-primary-contrast */ --on-primary: light-dark(#ffffff, var(--surface-sunken)); /* warning as TEXT: canonical --color-warning is fill-grade gold; the text-grade pair is gold-700 (light) / the dark theme's warning value */ --warn-text: light-dark(var(--color-gold-700), var(--color-warning)); /* hairline for dense chart/table rules, softer than --surface-border */ --rule-soft: color-mix(in srgb, var(--surface-border) 55%, transparent); } /* ── base ── */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.1; text-transform: uppercase; color: var(--text-primary); margin: 0; } h4, h5, h6 { font-family: var(--font-body); font-weight: 700; line-height: 1.25; margin: 0; } code, kbd, samp, pre { font-family: var(--font-mono); } a { color: var(--brand-secondary); } button, input, select, textarea { font-family: var(--font-bold); } hr { border: 0; border-top: 1px solid var(--surface-border); } ::selection { background: color-mix(in srgb, var(--brand-accent) 50%, transparent); color: var(--text-primary); } /* outline, not box-shadow — box-shadow is not painted on SVG children (the Flow graph's commit points), and the radius squared avatars on focus. */ :focus-visible { outline: 2px solid var(--focus-ring-outer); outline-offset: 2px; } @media (forced-colors: active) { :focus-visible { outline: revert; box-shadow: none; } } /* ── the shared TTI Code navbar (editorial) ── */ .tti-nav { background: var(--surface-page); border-bottom: 1px solid var(--surface-border); color: var(--text-secondary); display: flex; align-items: center; gap: .1rem; padding: 0 10px; min-height: 49px; flex-wrap: wrap; font-family: var(--font-body); } .tti-nav .brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; padding: 3px 8px; margin-right: .2rem; } /* brand-fill logo square (theme-invariant maroon — the on-brand rule) */ .tti-nav .brand::before { content: ""; width: 26px; height: 26px; flex: none; background: url("/assets/img/logo.svg") center/contain no-repeat; } .tti-nav .brand .wm { color: var(--text-primary); font-weight: 600; font-size: 1.05rem; letter-spacing: -.005em; white-space: nowrap; } .tti-nav .brand .beta { background: var(--brand-accent); color: var(--brand-accent-ink); font-size: .6rem; font-weight: 700; letter-spacing: .8px; line-height: 1; padding: .3em .5em; border-radius: 4px; } .tti-nav a.item { color: var(--text-secondary); text-decoration: none; font-family: var(--font-bold); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; line-height: 1; padding: 0 13px; height: 32px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: .4rem; } .tti-nav a.item:hover { background: var(--wash-brand-8); color: var(--brand-primary); } .tti-nav a.item.active { color: var(--brand-primary); box-shadow: inset 0 -2px 0 var(--brand-primary); background: transparent; font-weight: 700; } .tti-nav .sp { margin-left: auto; } /* Second-level SECTION nav (Insights). Two shapes, one markup: < 1000px — the horizontal bar it has always been (rules below), because a 216px rail would take a third of a laptop-narrow window. >= 1000px — a sticky LEFT RAIL (2026-09-08, maintainer ask). Stacking two horizontal bars of uppercase small caps read as chrome-on-chrome and pushed every page's H1 toward the fold; moving the section list to the side gives the page one bar of chrome and puts the sections where a section switcher belongs. The rail and the page share `.tti-shell`, a flex row capped at 1360px so the pair stays optically centred (216 rail + 1080 content + gutters). Each page keeps its own `main{max-width:1080px;margin:0 auto}` — it simply centres inside the remaining track instead of the viewport. */ .tti-subnav { background: var(--surface-page); border-bottom: 1px solid var(--surface-border); display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; padding: 0 10px; min-height: 42px; font-family: var(--font-body); } .tti-subnav a.item { color: var(--text-secondary); text-decoration: none; font-family: var(--font-bold); font-size: .8125rem; font-weight: 600; line-height: 1; padding: 0 13px; height: 30px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: .4rem; } .tti-subnav a.item:hover { background: var(--wash-brand-8); color: var(--brand-primary); } .tti-subnav a.item.active { color: var(--brand-primary); box-shadow: inset 0 -2px 0 var(--brand-primary); background: transparent; font-weight: 700; } /* The rail's own label. Redundant with the nav's aria-label by design: in the bar shape the section had no visible name at all, and "Insights" in the navbar was the only clue you were inside a section. */ .tti-subnav .rail-title { display: none; font-family: var(--font-body); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-muted); } @media (min-width: 1000px) { .tti-shell { display: flex; align-items: flex-start; gap: 2rem; max-width: 1360px; margin: 0 auto; padding-right: 1rem; } .tti-shell > main { flex: 1 1 auto; min-width: 0; } .tti-shell > .tti-subnav { flex: 0 0 216px; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 1px; /* sticky, not fixed: no navbar-height magic number, and the rail scrolls away with the page rather than sitting over the footer. */ /* Exactly one viewport tall, so the divider is a full-height rule rather than a stub that stops under the last link, and so the sticky pin has nothing left to scroll — the rail reads as fixed without hard-coding the navbar's height into a `top` offset. */ position: sticky; top: 0; height: 100vh; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--surface-border); padding: 2.9rem .75rem 2rem 1.1rem; min-height: 0; } .tti-shell > .tti-subnav .rail-title { display: block; padding: 0 .55rem .7rem; } .tti-shell > .tti-subnav a.item { height: auto; min-height: 32px; padding: .45rem .55rem; font-size: .875rem; letter-spacing: 0; text-transform: none; } /* Active reads as a LEFT edge in a vertical list — an underline under one row of a stack looks like a divider, not a selection. */ .tti-shell > .tti-subnav a.item.active { box-shadow: inset 2px 0 0 var(--brand-primary); background: var(--wash-brand-8); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } } .tti-nav .status { font-size: .76rem; color: var(--text-muted); font-family: var(--font-mono); display: inline-flex; align-items: center; gap: .4rem; padding: 0 .6rem; white-space: nowrap; } .tti-nav .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 60%, transparent); animation: tti-pulse 2s infinite; } @media (prefers-reduced-motion: reduce) { .tti-nav .status .dot { animation: none; } } .tti-nav .tti-theme-toggle { background: none; border: none; cursor: pointer; color: var(--text-secondary); display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); } .tti-nav .tti-theme-toggle:hover { background: var(--wash-brand-8); color: var(--brand-primary); } .tti-nav .tti-theme-toggle .ic { display: none; } #tti-theme-toggle[data-mode="auto"] .ic-auto, #tti-theme-toggle:not([data-mode]) .ic-auto { display: inline-block; } #tti-theme-toggle[data-mode="light"] .ic-sun { display: inline-block; } #tti-theme-toggle[data-mode="dark"] .ic-moon { display: inline-block; } @keyframes tti-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (max-width: 640px) { .tti-nav .hide-sm { display: none; } } /* ── navbar mirror cluster (identity items projected from the forge navbar) ── */ .tti-nav .icon-item, .tti-nav details.dropdown > summary { color: var(--text-secondary); display: inline-flex; align-items: center; gap: .3rem; height: 32px; padding: 0 9px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; position: relative; } .tti-nav .icon-item:hover, .tti-nav details.dropdown > summary:hover { background: var(--wash-brand-8); color: var(--brand-primary); } .tti-nav .icon-item svg, .tti-nav details.dropdown > summary svg { width: 16px; height: 16px; } .tti-nav img.avatar, .tti-nav details.dropdown img { width: 24px; height: 24px; border-radius: var(--radius-sm); } .tti-nav .notification_count { background: var(--brand-primary); color: var(--on-primary); font-size: .6rem; font-weight: 700; line-height: 1; border-radius: var(--radius-full); padding: .25em .45em; position: absolute; top: 1px; right: 0; } .tti-nav details.dropdown { position: relative; list-style: none; } .tti-nav details.dropdown > summary { list-style: none; } .tti-nav details.dropdown > summary::-webkit-details-marker { display: none; } .tti-nav details.dropdown > .content { position: absolute; right: 0; top: calc(100% + 6px); z-index: 900; min-width: 180px; background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-md); box-shadow: var(--elevation-overlay); padding: .35rem 0; } .tti-nav details.dropdown > .content a { display: block; padding: .4rem .9rem; color: var(--text-primary); text-decoration: none; font-size: .85rem; white-space: nowrap; } .tti-nav details.dropdown > .content a:hover { background: var(--wash-brand-8); color: var(--brand-primary); } /* mirrored non-link rows: the avatar menu's "Signed in as …" + dividers */ .tti-nav details.dropdown > .content .header { padding: .4rem .9rem; font-size: .75rem; color: var(--text-secondary); white-space: nowrap; } .tti-nav details.dropdown > .content .divider { border-top: 1px solid var(--surface-border); margin: .3rem 0; } /* page-meta line (the data-freshness stamp relocated out of the navbar so the navbar can stay identical to the forge's) */ .tti-pagemeta { color: var(--text-muted); font-family: var(--font-mono); font-size: .76rem; margin: .1rem 0 0; } .tti-pagemeta .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); vertical-align: baseline; } /* ── waffle panel (mirrored from the forge navbar; markup lives in extra_links.tmpl — keep the shape in step with its forge-side styles) ── */ .tti-nav #tti-waffle > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:var(--radius-sm);color:var(--text-secondary);} .tti-nav #tti-waffle > summary::-webkit-details-marker{display:none;} .tti-nav #tti-waffle > summary:hover{background:var(--wash-brand-8);color:var(--brand-primary);} .tti-nav #tti-waffle{position:relative;list-style:none;} .tti-nav #tti-waffle > .content{position:absolute;right:0;top:calc(100% + 8px);z-index:900;width:340px; background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-md); box-shadow:var(--elevation-overlay);padding:.6rem;} .tti-waffle-heading{font-family:var(--font-body);font-size:.68rem;font-weight:600;text-transform:uppercase; letter-spacing:var(--tracking-wider);color:var(--text-muted);padding:.2rem .4rem .5rem;} .tti-waffle-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;} .tti-waffle-app{display:block;padding:.55rem .6rem;border-radius:var(--radius-md);text-decoration:none;} .tti-waffle-app:hover{background:var(--wash-brand-8);} .tti-waffle-app .n{display:block;font-weight:600;font-size:.85rem;color:var(--text-primary);} .tti-waffle-app:hover .n{color:var(--brand-primary);} .tti-waffle-app .t{display:block;font-size:.72rem;color:var(--text-muted);margin-top:.1rem;line-height:1.3;} .tti-waffle-app.current{outline:1px solid var(--brand-primary);outline-offset:-1px;} .tti-waffle-app.current .n::after{content:"· here";color:var(--text-muted);font-weight:400;margin-left:.3em;} /* ── site footer (TuxFooter two-band; forge twin lives in branding/footer.tmpl — keep the class shapes in step) ── */ #tti-fband{background:var(--brand-fill);color:rgba(255,255,255,.92);margin-top:3rem;} #tti-fband .in{max-width:1280px;margin:0 auto;padding:2.2rem 2rem 2rem;display:flex;flex-wrap:wrap;gap:2.2rem 3.5rem;} #tti-fband .id{flex:1 1 240px;min-width:220px;} #tti-fband .id img{width:40px;height:40px;/* no invert filter: logo-code is a FILLED maroon square — unfiltered it melts into the brand-fill band and only the white chevrons float (tux's invert trick assumes a transparent-glyph logo) */} #tti-fband .id .nm{font-weight:600;font-size:1.02rem;margin:.6rem 0 .2rem;color:#fff;} #tti-fband .id .tag{font-family:var(--font-elegant);font-style:italic;color:var(--brand-accent);font-size:.95rem;line-height:1.45;} #tti-fband .tti-f-col{flex:0 1 auto;min-width:150px;} #tti-fband .tti-f-col h4{font-family:var(--font-body);font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:rgba(255,255,255,.65);margin:0 0 .6rem;} #tti-fband .tti-f-col a{display:block;color:rgba(255,255,255,.92);text-decoration:none;font-size:.85rem;line-height:1.9;} #tti-fband .tti-f-col a:hover{color:var(--brand-accent);text-decoration:underline;text-underline-offset:3px;} .tti-fstrip{background:#1f1c1c;color:rgba(255,255,255,.75);border-top:1px solid rgba(255,255,255,.08);font-size:.75rem;padding:.6rem 2rem;} .tti-fstrip a{color:rgba(255,255,255,.85);} .tti-hc-btn{background:none;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.85); border-radius:4px;padding:.15rem .5rem;font:inherit;font-size:.72rem;cursor:pointer;margin-left:.6rem;} .tti-hc-btn:hover{border-color:var(--brand-accent);color:var(--brand-accent);}