/*
Matrix Systems Documentation Design System — Components
============================================================
Requires tokens.css to be loaded first. Every rule here reads from the
custom properties in tokens.css — no hardcoded colors/fonts in this file.
RTL: every component uses logical CSS properties (margin-inline-start,
padding-inline-end, border-inline-start, text-align: start, etc.) instead
of left/right, so the same stylesheet serves both English (LTR) and
Hebrew (RTL) documents — the page simply sets
and every component below flips automatically with zero duplicated CSS.
*/
* { box-sizing: border-box; }
/* [hidden] must always win over any element's own `display` rule (e.g.
.callout sets display:flex, which otherwise silently defeats the
hidden attribute - found during responsive QA: the support form's
error banner was rendering visible on page load despite having
`hidden` set, because author CSS specificity beats the UA stylesheet's
own [hidden] rule). Affects data-support-error and data-demo-banner. */
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--surface-page);
color: var(--text-primary);
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
-webkit-font-smoothing: antialiased;
}
html[dir="rtl"] body { font-family: var(--font-family-sans-he); }
h1, h2, h3, .cover-page__title, .hero-title, .section-header h2 {
font-family: var(--font-family-display);
letter-spacing: -0.01em;
font-weight: var(--font-weight-bold);
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}
/* Phase 2.6 fix: real 320-430px screenshots showed hero copy being clipped at the
viewport edge instead of wrapping - the fixed
mid-sentence plus no
overflow-wrap on paragraphs was the cause. Belt-and-suspenders on every
hero/paragraph text node, not just headings. */
p, .hub-hero p, .hero p, .hero__inner p, .hub-hero__inner p {
max-width: 100%;
overflow-wrap: break-word;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .cover-page__title, html[dir="rtl"] .section-header h2 {
font-family: var(--font-family-sans-he); /* Orbitron has no Hebrew glyphs - Heebo carries headings in RTL */
letter-spacing: normal;
}
a { color: var(--link-color); text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }
/* Filenames, code, emails, menu paths stay LTR even inside RTL documents,
per the Hebrew localization requirement. Wrap any such token: ... */
.ltr-token { direction: ltr; unicode-bidi: isolate; font-family: var(--font-family-mono); font-size: 0.95em; }
.doc-content { max-width: var(--content-max-width); margin-inline: auto; padding: var(--space-6) var(--space-5); }
/* ============ 1. Cover page ============ */
.cover-page {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(160deg, var(--brand-ink-900), var(--brand-ink-700));
color: var(--text-on-primary);
padding: var(--space-8) var(--space-7);
}
.cover-page__brand { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--font-weight-semibold); }
.cover-page__brand img { height: 32px; }
.cover-page__title { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); max-width: 14ch; }
.cover-page__subtitle { font-size: var(--font-size-lg); color: var(--brand-ink-100); margin-top: var(--space-3); }
.cover-page__meta { display: flex; gap: var(--space-6); font-size: var(--font-size-sm); color: var(--brand-ink-300); }
/* ============ 2. Header (in-document, not the cover) ============ */
.doc-header {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; justify-content: space-between;
height: var(--header-height);
padding-inline: var(--space-5);
background: color-mix(in srgb, var(--surface-page) 90%, transparent);
backdrop-filter: blur(8px);
border-block-end: 1px solid var(--surface-border);
}
.doc-header__brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); }
.doc-header__actions { display: flex; align-items: center; gap: var(--space-3); }
/* Premium touch matching the live site's header: subtle at rest, gains a
firmer background/shadow once the page has actually scrolled, rather
than looking identical at the very top and three screens down. */
.doc-header.is-scrolled { background: color-mix(in srgb, var(--surface-page) 96%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,0.28); }
/* ---- Language switcher: two real links, not a JS-guessed rewrite ---- */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.02); }
.lang-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 6px 14px; border-radius: var(--radius-pill);
font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
color: var(--text-secondary); text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast);
}
.lang-btn:hover { color: var(--text-primary); }
.lang-btn.is-active { background: var(--accent); color: var(--text-on-primary); }
/* ---- Inline icon system (replaces emoji glyphs sitewide) ---- */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.journey__marker .icon { width: 22px; height: 22px; }
.icon-btn .icon { width: 18px; height: 18px; }
/* ---- Sitewide navigation menu (hamburger) ---- */
.nav-menu-toggle { order: -1; }
.nav-menu-panel {
position: absolute; left: 0; right: 0; top: 100%;
background: var(--surface-page);
border-block-end: 1px solid var(--surface-border);
box-shadow: 0 24px 48px rgba(0,0,0,0.35);
opacity: 0; transform: translateY(-8px); pointer-events: none;
transition: opacity var(--transition-fast), transform var(--transition-fast);
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
}
.nav-menu-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-menu-panel__inner {
max-width: var(--container); margin-inline: auto; padding: var(--space-6) var(--space-5);
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-6);
}
.nav-menu-group__title { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-block-end: var(--space-3); font-weight: 700; }
.nav-menu-group__links { display: flex; flex-direction: column; gap: var(--space-2); }
.nav-menu-group__links a { color: var(--text-secondary); text-decoration: none; font-size: var(--font-size-sm); padding-block: 2px; transition: color var(--transition-fast); }
.nav-menu-group__links a:hover, .nav-menu-group__links a.is-current { color: var(--accent); }
.nav-menu-panel__footer { border-block-start: 1px solid var(--surface-border); padding: var(--space-4) var(--space-5); max-width: var(--container); margin-inline: auto; }
.nav-menu-panel__home { color: var(--text-secondary); text-decoration: none; font-size: var(--font-size-sm); font-weight: 600; }
.nav-menu-panel__home:hover { color: var(--accent); }
@media (max-width: 640px) {
.nav-menu-panel__inner { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
/* ============ 3. Footer ============ */
.doc-footer {
border-block-start: 1px solid var(--surface-border);
padding: var(--space-6) var(--space-5);
color: var(--text-secondary);
font-size: var(--font-size-sm);
display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
}
/* ============ 4. Navigation (hub sidebar + mobile) ============ */
.hub-shell { display: grid; grid-template-columns: var(--hub-sidebar-width) 1fr; min-height: 100vh; }
.hub-nav {
border-inline-end: 1px solid var(--surface-border);
background: var(--surface-raised);
padding: var(--space-5) var(--space-4);
position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.hub-nav__group-title { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: var(--space-5) var(--space-2) var(--space-2); }
.hub-nav__link {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--text-primary); text-decoration: none;
font-size: var(--font-size-sm);
}
.hub-nav__link:hover { background: var(--surface-sunken); }
.hub-nav__link[aria-current="page"] { background: var(--brand-primary-100); color: var(--brand-primary-700); font-weight: var(--font-weight-medium); }
.hub-nav__toggle { display: none; }
@media (max-width: 860px) {
.hub-shell { grid-template-columns: 1fr; }
.hub-nav {
position: fixed; inset-block: 0; inset-inline-start: 0; width: min(84vw, 320px);
transform: translateX(-100%); transition: transform var(--transition-base); z-index: 30;
box-shadow: var(--shadow-lg);
}
html[dir="rtl"] .hub-nav { transform: translateX(100%); }
.hub-nav.is-open { transform: translateX(0); }
.hub-nav__toggle { display: inline-flex; }
}
/* ============ 5. Table of contents ============ */
.toc { background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: var(--space-5); margin-block: var(--space-6); }
.toc__title { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-block-end: var(--space-3); }
.toc ol { margin: 0; padding-inline-start: var(--space-5); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
/* ============ 6. Section header ============ */
.section-header { display: flex; align-items: baseline; gap: var(--space-3); margin-block: var(--space-7) var(--space-4); }
.section-header__index { color: var(--brand-primary-600); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); }
.section-header h2 { margin: 0; font-size: var(--font-size-2xl); }
/* ============ 7. Step card ============ */
.step-card {
display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4);
padding: var(--space-5); border: 1px solid var(--surface-border); border-radius: var(--radius-md);
margin-block-end: var(--space-4); background: var(--surface-page);
transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.step-card:hover { border-color: var(--brand-primary-500); transform: translateY(-2px); }
.step-card__number {
width: 40px; height: 40px; border-radius: 50%;
background: var(--brand-primary-600); color: var(--text-on-primary);
display: flex; align-items: center; justify-content: center;
font-weight: var(--font-weight-bold);
}
.step-card__title { font-weight: var(--font-weight-semibold); margin-block-end: var(--space-2); }
.step-card__result { margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px dashed var(--surface-border); font-size: var(--font-size-sm); color: var(--text-secondary); }
/* ============ 8. Callout boxes: warning / important / tip / note / success / troubleshooting ============ */
.callout {
display: flex; gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
border-inline-start: 4px solid transparent;
margin-block: var(--space-4);
}
.callout__icon { flex: none; font-size: var(--font-size-lg); line-height: 1; }
.callout__title { font-weight: var(--font-weight-semibold); margin-block-end: var(--space-1); }
/* color: var(--text-primary), not --brand-ink-900 - found via PDF QA + a
default-dark-theme screenshot check: --brand-ink-900 is an alias for
--bg-0 (a *background* token), not a text token. It happened to read as
a plausible dark "ink" color, but using a background alias as a text
color meant callout text was actually near-invisible against its own
background in every context that matters here: the default (dark)
theme, and print (where --bg-0 is separately redefined to white for
the page background, making callout text render literally white-on-
white). --text-primary is the token that's actually meant for text and
is correctly redefined in both the light theme and print overrides. */
.callout--warning { background: var(--color-warning-100); border-color: var(--color-warning-700); color: var(--text-primary); }
.callout--important { background: var(--color-danger-100); border-color: var(--color-danger-700); color: var(--text-primary); }
.callout--tip { background: var(--color-tip-100); border-color: var(--color-tip-700); color: var(--text-primary); }
.callout--note { background: var(--surface-sunken); border-color: var(--brand-ink-300); color: var(--text-primary); }
.callout--success { background: var(--color-success-100); border-color: var(--color-success-700); color: var(--text-primary); }
.callout--troubleshooting { background: var(--surface-raised); border-color: var(--brand-primary-600); color: var(--text-primary); }
/* ============ 9. FAQ accordion ============ */
.faq-item { border-block-end: 1px solid var(--surface-border); }
.faq-item__question {
width: 100%; text-align: start; background: none; border: none; cursor: pointer;
padding: var(--space-4) 0; font-weight: var(--font-weight-medium); font-size: var(--font-size-base);
display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
color: var(--text-primary);
}
.faq-item__chevron { transition: transform var(--transition-base); flex: none; }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__answer { padding-block-end: var(--space-4); color: var(--text-secondary); }
/* ============ 10. Parameter table ============ */
.param-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); margin-block: var(--space-5); }
.param-table th, .param-table td { text-align: start; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--surface-border); }
.param-table th { color: var(--text-secondary); font-weight: var(--font-weight-medium); text-transform: uppercase; font-size: var(--font-size-xs); letter-spacing: .04em; }
.param-table code { font-family: var(--font-family-mono); background: var(--surface-sunken); padding: 0.1em 0.4em; border-radius: 4px; }
/* ============ 11. Supported-market card ============ */
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); margin-block: var(--space-5); }
.market-card {
border: 1px solid var(--surface-border); border-radius: var(--radius-md);
padding: var(--space-4); text-align: center; background: var(--surface-page);
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.market-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.market-card__symbol { font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); }
.market-card__name { color: var(--text-secondary); font-size: var(--font-size-xs); margin-block-start: var(--space-1); }
/* ============ 12. Screenshot frame ============ */
.screenshot-frame {
border: 1px solid var(--surface-border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-md); overflow: hidden; margin-block: var(--space-5);
background: var(--surface-raised);
}
.screenshot-frame__chrome { display: flex; gap: 6px; padding: var(--space-3) var(--space-4); background: var(--surface-sunken); }
.screenshot-frame__chrome span { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-border); }
.screenshot-frame img { display: block; width: 100%; height: auto; }
.screenshot-frame__caption { padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); color: var(--text-secondary); }
.screenshot-frame__placeholder {
aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
color: var(--text-secondary); font-size: var(--font-size-sm); background: var(--surface-sunken);
}
/* ============ 13. Numbered annotation (for callouts on screenshots) ============ */
.annotation-marker {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--brand-primary-600); color: var(--text-on-primary);
font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
}
/* ============ 14. Before/after block ============ */
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-block: var(--space-5); }
.before-after__panel { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--surface-border); }
.before-after__label { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; }
.before-after__panel--before .before-after__label { background: var(--color-danger-100); color: var(--color-danger-700); }
.before-after__panel--after .before-after__label { background: var(--color-success-100); color: var(--color-success-700); }
@media (max-width: 600px) { .before-after { grid-template-columns: 1fr; } }
/* ============ 15. Video tutorial block ============ */
.video-block { border: 1px solid var(--surface-border); border-radius: var(--radius-lg); overflow: hidden; margin-block: var(--space-5); background: var(--surface-page); }
.video-block__thumb {
position: relative; aspect-ratio: 16/9; background: var(--brand-ink-900);
display: flex; align-items: center; justify-content: center;
}
.video-block__play {
width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.92);
display: flex; align-items: center; justify-content: center; color: var(--text-on-primary);
font-size: var(--font-size-xl); box-shadow: var(--shadow-lg);
}
.video-block__duration { position: absolute; inset-inline-end: var(--space-3); inset-block-end: var(--space-3); background: rgba(0,0,0,.7); color: #fff; font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-pill); }
.video-block__badge { position: absolute; inset-inline-start: var(--space-3); inset-block-start: var(--space-3); background: var(--brand-primary-600); color: #fff; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: 3px 10px; border-radius: var(--radius-pill); }
.video-block__body { padding: var(--space-4) var(--space-5); }
.video-block__title { font-weight: var(--font-weight-semibold); }
.video-block__meta { color: var(--text-secondary); font-size: var(--font-size-sm); margin-block-start: var(--space-1); }
.video-block__links { display: flex; gap: var(--space-4); margin-block-start: var(--space-3); font-size: var(--font-size-sm); }
.video-block--pending .video-block__thumb { background: var(--surface-sunken); }
.video-block--pending .video-block__play { display: none; }
/* ============ 15b. Video component (page-hero, rich metadata) ============
Provider-agnostic: authored with data-video-* attributes so a future real
video (YouTube, Vimeo, Cloudflare Stream, or a self-hosted MP4) is a data
change only, not a markup rewrite. See src/scripts/interactive.js
initVideoComponents() for the embed swap. Until a real src is set, this
always renders the "coming soon" state below — never a broken embed. */
.video-component { border: 1px solid var(--surface-border); border-radius: var(--radius-lg); overflow: hidden; margin-block: var(--space-6); background: var(--surface-page); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .video-component { grid-template-columns: 1fr; } }
.video-component__media { position: relative; aspect-ratio: 16/9; background: linear-gradient(155deg, var(--surface-sunken), var(--surface-page)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.video-component__media iframe, .video-component__media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-component__coming-soon { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary); text-align: center; padding: var(--space-4); }
.video-component__coming-soon .icon { width: 34px; height: 34px; color: var(--accent); opacity: .8; }
.video-component__coming-soon-label { font-family: var(--font-family-display); font-size: var(--font-size-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--text-primary); }
.video-component__coming-soon-note { font-size: var(--font-size-xs); max-width: 26ch; }
.video-component__duration { position: absolute; inset-inline-end: var(--space-3); inset-block-end: var(--space-3); background: rgba(0,0,0,.7); color: #fff; font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-pill); }
.video-component__status { position: absolute; inset-inline-start: var(--space-3); inset-block-start: var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-secondary); border: 1px solid var(--surface-border); }
.video-component[data-video-status="published"] .video-component__status { background: var(--brand-primary-600); color: #fff; border-color: transparent; }
.video-component__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.video-component__meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.video-component__title { font-family: var(--font-family-display); font-size: var(--font-size-lg); margin: 0; }
.video-component__summary { color: var(--text-secondary); font-size: var(--font-size-sm); margin: 0; }
.video-component__outcomes { margin: 0; padding-inline-start: 1.1em; color: var(--text-secondary); font-size: var(--font-size-sm); display: flex; flex-direction: column; gap: 2px; }
.video-component__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: auto; padding-block-start: var(--space-2); }
.video-component__updated { font-size: var(--font-size-xs); color: var(--text-3); }
/* ============ 16. Download block ============ */
.download-block {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
padding: var(--space-5); border-radius: var(--radius-md);
background: var(--surface-raised); border: 1px solid var(--surface-border);
margin-block: var(--space-5);
transition: border-color var(--transition-fast);
}
.download-block:hover { border-color: var(--brand-primary-500); }
.download-block__meta { color: var(--text-secondary); font-size: var(--font-size-sm); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
padding: 13px 26px; border-radius: var(--radius-pill);
font-weight: var(--font-weight-semibold); font-size: 0.95rem;
text-decoration: none; border: 1px solid transparent; cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:not(.btn--secondary) {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
color: var(--text-on-primary);
box-shadow: 0 6px 24px var(--accent-glow);
}
.btn:not(.btn--secondary):hover { transform: translateY(-2px); box-shadow: 0 10px 34px var(--accent-glow); }
.btn--secondary {
background: rgba(255, 255, 255, 0.02); color: var(--text-primary);
border-color: var(--line-strong); backdrop-filter: blur(6px);
}
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* ============ 17. Support contact block ============ */
.support-block { display: flex; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius-md); background: var(--brand-ink-900); color: var(--text-on-primary); margin-block: var(--space-6); }
.support-block__item { flex: 1 1 180px; }
.support-block__label { font-size: var(--font-size-xs); text-transform: uppercase; color: var(--brand-ink-300); letter-spacing: .05em; }
.support-block__value { font-weight: var(--font-weight-medium); margin-block-start: var(--space-1); }
/* ============ 18. Version information ============ */
.version-tag { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--text-secondary); background: var(--surface-sunken); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); }
/* ============ 19. Legal disclaimer ============ */
.legal-disclaimer { font-size: var(--font-size-xs); color: var(--text-secondary); border-block-start: 1px solid var(--surface-border); padding-block-start: var(--space-4); margin-block-start: var(--space-7); line-height: var(--line-height-loose); }
/* ============ 20. Page-break control / print layout ============ */
.page-break-before { break-before: page; }
.page-break-after { break-after: page; }
.avoid-break { break-inside: avoid; }
/*
Phase 2.6 fix: the previous @media print block flattened every brand color to
black/white, including callout/badge semantic colors (warning/danger/tip) -
a real regression for a printed manual, where the color-coding is part of how
a customer scans the page for what matters. This version instead:
1. Switches to a light, print-safe page background (saves ink vs. the dark
brand default) with dark text for readability.
2. Forces browsers to actually keep background-colors/gradients when
printing via print-color-adjust (Chromium drops them by default to save
ink unless told otherwise - this alone was likely the biggest cause of
"flattened" colors, separate from the old black/white override above).
3. Redefines only the token values that need to change for a light print
background, the same token-swap pattern already used for the optional
light UI theme - components don't need their own print-specific rules.
*/
@media print {
.hub-nav, .doc-header, .site-header, .no-print, .matrix-rain-layer, .matrix-rain-fallback, .hero-cursor-glow, .nav-menu-panel { display: none !important; }
.hub-shell { display: block; }
:root {
--bg-0: #ffffff; --bg-1: #ffffff; --bg-2: #f4f6f5;
--bg-card: #f8faf9; --bg-card-hover: #f8faf9;
--line: #dfe6e2; --line-strong: #c7d1cc;
--text-0: #0b1512; --text-1: #1c2b26; --text-2: #3f4e48; --text-3: #5c6a64;
--text-on-primary: #04150c;
/* Accent/semantic colors intentionally unchanged from the brand tokens -
these are what must survive into print, not be flattened. */
}
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
body { background: #fff; }
a { text-decoration: underline; }
.doc-content, .hub-main { max-width: none; padding: 0; }
@page { margin: var(--print-page-margin); }
.callout, .step-card, .market-card, .video-block, .video-component, .tile, .doc-card, .timeline__entry { break-inside: avoid; }
h1, h2, h3 { break-after: avoid; }
}
/* ============ Progress tracker (Quick Start) ============ */
.progress-track { display: flex; gap: var(--space-2); margin-block: var(--space-5); flex-wrap: wrap; }
.progress-step { flex: 1; min-width: 90px; text-align: center; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: var(--font-size-xs); color: var(--text-secondary); }
.progress-step.is-done { background: var(--color-success-100); color: var(--color-success-700); }
.progress-step.is-current { background: var(--brand-primary-100); color: var(--brand-primary-700); font-weight: var(--font-weight-semibold); }
/* ============ Prev/Next ============ */
.doc-pager { display: flex; justify-content: space-between; gap: var(--space-4); margin-block: var(--space-7); }
.doc-pager__link { flex: 1; padding: var(--space-4); border: 1px solid var(--surface-border); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); }
.doc-pager__link:hover { border-color: var(--brand-primary-600); }
.doc-pager__label { font-size: var(--font-size-xs); color: var(--text-secondary); text-transform: uppercase; }
.doc-pager__next { text-align: end; }
/* ==========================================================================
MATRIX ACADEMY — additional components (Phase 2)
========================================================================== */
/* ---- Brand mark (real logo, used everywhere) ---- */
.brand-mark { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text-primary); }
.brand-mark img { height: 34px; width: 34px; border-radius: 50%; display: block; }
.brand-mark__wordmark { font-family: var(--font-family-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; }
.brand-mark__wordmark small { display: block; font-family: var(--font-family-sans); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.cover-page__brand img { height: 44px; width: 44px; border-radius: 50%; }
/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; }
.badge--version { background: var(--bg-card); border-color: var(--line-strong); color: var(--text-secondary); font-family: var(--font-family-mono); }
.badge--difficulty-beginner { background: var(--color-success-100); color: var(--accent); }
.badge--difficulty-intermediate { background: var(--color-tip-100); color: var(--gold); }
.badge--difficulty-advanced { background: var(--color-danger-100); color: var(--danger); }
.badge--platform { background: var(--bg-2); color: var(--text-secondary); border-color: var(--line); }
.badge--time { background: transparent; color: var(--text-secondary); border-color: var(--line-strong); }
.badge--new { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--text-on-primary); }
.badge--live { background: transparent; color: var(--accent); border-color: var(--accent-dim); }
.badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); animation: matrix-pulse 1.8s var(--ease) infinite; }
@keyframes matrix-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
/* ---- Learning / guide / feature / video / download cards (shared shape) ---- */
.tile { display: flex; flex-direction: column; gap: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; background: var(--bg-card); backdrop-filter: blur(14px); text-decoration: none; color: var(--text-primary); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.tile__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tile__icon { font-size: 1.6rem; }
.tile__title { font-family: var(--font-family-display); font-weight: 700; font-size: 1rem; }
.tile__desc { color: var(--text-secondary); font-size: var(--font-size-sm); }
.tile__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--font-size-xs); color: var(--text-3); margin-block-start: auto; padding-block-start: var(--space-2); border-block-start: 1px dashed var(--line); }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }
/* ---- Support card ---- */
.support-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-md); background: linear-gradient(160deg, var(--bg-1), var(--bg-2)); border: 1px solid var(--line); transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.support-card:hover { border-color: var(--accent-dim); transform: translateY(-2px); box-shadow: var(--shadow-card, 0 10px 30px rgba(0,0,0,.3)); }
.support-card__title { font-family: var(--font-family-display); font-weight: 700; }
/* ---- Release notes timeline ---- */
.timeline { position: relative; margin-inline-start: 10px; padding-inline-start: var(--space-6); border-inline-start: 2px solid var(--line); }
.timeline__entry { position: relative; padding-block-end: var(--space-7); }
.timeline__entry::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--space-6) - 6px); top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg-0), 0 0 12px var(--accent-glow); }
.timeline__entry--past::before { background: var(--text-3); box-shadow: 0 0 0 4px var(--bg-0); }
.timeline__date { font-size: var(--font-size-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-block-end: var(--space-1); }
.timeline__title { font-family: var(--font-family-display); font-weight: 700; font-size: var(--font-size-lg); display: flex; align-items: center; gap: var(--space-3); }
.timeline__body { margin-block-start: var(--space-3); }
.timeline__body h4 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-block: var(--space-3) var(--space-1); }
.timeline__body ul { margin: 0; padding-inline-start: 1.2em; color: var(--text-1); }
/* ---- Checklist ---- */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.checklist li::before { content: "○"; color: var(--text-3); flex: none; }
.checklist li.is-checked::before { content: "●"; color: var(--accent); }
.checklist li.is-checked { border-color: var(--accent-dim); }
/* ---- Completion banner ---- */
.completion-banner { text-align: center; padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(26,255,140,.14), transparent 70%), var(--bg-card); border: 1px solid var(--accent-dim); }
.completion-banner__icon { font-size: 2.5rem; }
.completion-banner h2 { margin-block-end: var(--space-2); }
/* ---- Onboarding journey (Getting Started) ---- */
.journey { display: flex; flex-direction: column; gap: 0; margin-block: var(--space-6); }
.journey__step { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); position: relative; padding-block-end: var(--space-6); }
.journey__step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 23px; top: 48px; bottom: 0; width: 2px; background: var(--line); }
.journey__step.is-done:not(:last-child)::after { background: var(--accent-dim); }
.journey__marker { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-family-display); background: var(--bg-2); border: 2px solid var(--line-strong); color: var(--text-secondary); z-index: 1; }
.journey__step.is-done .journey__marker { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--text-on-primary); box-shadow: 0 0 0 4px var(--accent-glow); }
.journey__step.is-current .journey__marker { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.journey__title { font-family: var(--font-family-display); font-weight: 700; font-size: var(--font-size-lg); }
.journey__desc { color: var(--text-secondary); font-size: var(--font-size-sm); margin-block-start: 2px; }
.journey__eta { font-size: var(--font-size-xs); color: var(--text-3); margin-inline-start: var(--space-2); }
/* ---- Continue / Next lesson bar ---- */
.lesson-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--line); margin-block: var(--space-7); }
.lesson-nav__side { display: flex; flex-direction: column; gap: 2px; }
.lesson-nav__label { font-size: var(--font-size-xs); color: var(--text-3); text-transform: uppercase; }
/* ---- Code block ---- */
.code-block { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4); font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--accent); overflow-x: auto; direction: ltr; text-align: start; }
/* ---- Estimated-time / difficulty inline meta row ---- */
.meta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-block: var(--space-3); }
/* ---- Comparison / before-after zoom-capable screenshot ---- */
.screenshot-zoomable { cursor: zoom-in; position: relative; }
.screenshot-zoomable::after { content: "🔍 Click to zoom"; position: absolute; inset-inline-end: var(--space-3); inset-block-end: var(--space-3); background: rgba(0,0,0,.6); color: #fff; font-size: var(--font-size-xs); padding: 3px 10px; border-radius: var(--radius-pill); opacity: 0; transition: opacity var(--transition-fast); }
.screenshot-zoomable:hover::after { opacity: 1; }
/* ==========================================================================
PHASE 2.5 — Accessibility, responsive foundation, motion, support, portal
========================================================================== */
/* ---- Skip link (keyboard/screen-reader first stop) ---- */
.skip-link {
position: absolute; inset-inline-start: var(--space-3); top: -60px; z-index: 100;
background: var(--accent); color: var(--text-on-primary); padding: 12px 20px;
border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-3); }
/* ---- Focus visibility (WCAG 2.4.7) — every interactive element, not just links ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* ---- Touch target minimum (WCAG 2.5.5 / mobile HIG: 44x44 effective) ---- */
.btn, .icon-btn, .doc-pager__link, .lesson-nav__side a, .faq-item__question,
.hub-nav__link, .journey__marker, a.doc-card, a.tile, .lang-btn {
min-height: 44px;
}
.icon-btn { min-width: 44px; }
/* ---- Safe-area support (iPhone notch / home indicator) ---- */
.doc-header, .site-header {
padding-inline-start: max(var(--space-5), env(safe-area-inset-left));
padding-inline-end: max(var(--space-5), env(safe-area-inset-right));
}
.doc-footer, footer.site-footer {
padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
padding-inline-start: max(var(--space-5), env(safe-area-inset-left));
padding-inline-end: max(var(--space-5), env(safe-area-inset-right));
}
body { padding-bottom: env(safe-area-inset-bottom); }
/* ---- No horizontal scroll, ever ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre, .code-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ---- Responsive typography (fluid scale, already used on hero; extend to body headings) ---- */
h1 { font-size: clamp(1.9rem, 5vw, var(--font-size-4xl)); }
h2 { font-size: clamp(1.35rem, 3.4vw, var(--font-size-2xl)); }
h3 { font-size: clamp(1.1rem, 2.4vw, var(--font-size-xl)); }
/* ---- Breakpoints: tablet (≤860px already used for nav), phone (≤480px), tiny (≤340px) ---- */
@media (max-width: 860px) {
.doc-content { padding-inline: var(--space-4); }
.card-grid, .tile-grid, .mkt-grid, .lesson-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.before-after { grid-template-columns: 1fr; }
.hub-hero, .hero { padding-inline: var(--space-4); }
}
@media (max-width: 640px) {
.doc-header, .site-header { padding-inline: var(--space-3); }
/* Phase 2.6 fix: real screenshot testing showed the language-switch pill and
theme toggle overflowing past the viewport edge on phones (header had no
wrap/shrink path). Compact the pill enough to fit; icon-btn stays fixed
44px (touch target minimum takes priority over further shrinking it). */
.lang-btn { padding-inline: 8px; font-size: 0.68rem; gap: 4px; }
.brand-mark__wordmark { font-size: 0.8rem; }
.hub-hero, .hero { padding-inline: var(--space-3); }
.hub-hero__meta, .hero__meta { font-size: 0.9em; }
.doc-header__brand .brand-mark__wordmark small,
.brand-mark__wordmark small { display: none; } /* keep header compact on phones */
.card-grid, .tile-grid, .mkt-grid, .lesson-grid { grid-template-columns: 1fr; }
.hub-hero__ctas, .hero__ctas { flex-direction: column; align-items: stretch; }
.hub-hero__ctas .btn, .hero__ctas .btn { width: 100%; }
.doc-pager, .lesson-nav { flex-direction: column; }
.support-block, .release-card, .download-row, .continue-card { flex-direction: column; align-items: stretch; text-align: center; }
.step-card { grid-template-columns: 1fr; text-align: center; }
.step-card__number { margin-inline: auto; }
.journey__step { grid-template-columns: 40px 1fr; }
table.param-table { font-size: var(--font-size-xs); }
.split { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.hub-hero h1, .hero h1 { font-size: 1.5rem; }
}
@media (max-width: 340px) {
.hub-hero h1, .hero h1 { font-size: 1.35rem; }
.btn { padding: 12px 18px; font-size: 0.88rem; }
}
/* Phase 2.6 fix: hero-break spans render as forced line breaks on wide screens
(matching the intended two-line design) but collapse to normal inline flow
under 480px, where a hard break was overflowing rather than wrapping - a real
bug found via actual 320/390px screenshot testing, not assumed. */
.hero-break { display: block; }
@media (max-width: 480px) {
.hero-break { display: inline; }
}
/* ---- Reduced motion — every animation in this file must honor this ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
.matrix-rain { display: none; }
.hero-cursor-glow { display: none; }
}
/* ==========================================================================
Matrix letter-rain effect (GPU-friendly canvas, decorative, aria-hidden)
============================================================
Sitewide, not hero-scoped: position:fixed + negative z-index means it sits
behind every page's content and keeps running while the page scrolls,
the same technique matrix-systems-trader.com itself uses for #matrix-rain.
Opacity is deliberately low (this now sits behind body text on every page,
not just a decorative hero) so it reads as ambient texture, never
competing with readability. One lives
right after on every page - see any page's opening. */
.matrix-rain-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .16; }
.matrix-rain-layer canvas { display: block; width: 100%; height: 100%; }
/* True no-JS/no-canvas-support fallback only - sits behind the canvas in
source order so the real animated layer paints over it whenever canvas
is available (the overwhelming majority of the time). */
.matrix-rain-fallback { position: fixed; inset: 0; z-index: -2; opacity: .12; pointer-events: none; background-image: linear-gradient(var(--accent-glow) 1px, transparent 1px), linear-gradient(90deg, var(--accent-glow) 1px, transparent 1px); background-size: 46px 46px; }
/* ---- Mouse-reactive glow (position set via --mx/--my custom properties by JS) ---- */
.hero-cursor-glow {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(circle 420px at var(--mx, 50%) var(--my, 20%), var(--accent-glow), transparent 70%);
transition: background-position .2s linear;
}
/* ==========================================================================
Support experience — modal + dedicated page share these classes
========================================================================== */
.support-modal-backdrop {
position: fixed; inset: 0; z-index: 200; background: rgba(2,4,3,.72); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center; padding: var(--space-4);
opacity: 0; pointer-events: none; transition: opacity var(--transition-base);
}
.support-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.support-modal {
width: min(640px, 100%); max-height: 90vh; overflow-y: auto;
background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
box-shadow: var(--shadow-card); padding: var(--space-6);
transform: translateY(12px); transition: transform var(--transition-base);
}
.support-modal-backdrop.is-open .support-modal { transform: translateY(0); }
.support-modal__close { position: absolute; inset-inline-end: var(--space-5); top: var(--space-5); }
.support-form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
.form-field .optional { color: var(--text-secondary); font-weight: 400; font-size: var(--font-size-xs); }
.form-field input, .form-field select, .form-field textarea {
min-height: 44px; padding: 11px 14px; border-radius: var(--radius-sm);
border: 1px solid var(--surface-border); background: var(--surface-sunken); color: var(--text-primary);
font-family: var(--font-family-sans); font-size: var(--font-size-base);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field textarea { min-height: 96px; resize: vertical; font-family: var(--font-family-sans); }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow, rgba(26,255,140,.25));
}
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--danger); }
.form-field__error { color: var(--danger); font-size: var(--font-size-xs); display: none; }
.form-field.has-error .form-field__error { display: block; }
.form-check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-sm); }
.form-check input { min-width: 20px; min-height: 20px; margin-block-start: 2px; }
.form-file { border: 1px dashed var(--surface-border); border-radius: var(--radius-sm); padding: var(--space-4); text-align: center; color: var(--text-secondary); font-size: var(--font-size-sm); }
.priority-select { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.priority-option { flex: 1; min-width: 90px; }
.priority-option input { position: absolute; opacity: 0; }
.priority-option label {
display: block; text-align: center; padding: 10px; border-radius: var(--radius-sm);
border: 1px solid var(--surface-border); font-size: var(--font-size-sm); cursor: pointer; min-height: 44px;
}
.priority-option input:checked + label { border-color: var(--accent); background: var(--color-success-100); color: var(--accent); font-weight: 700; }
.priority-option input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.support-success { text-align: center; padding: var(--space-7) var(--space-5); }
.support-success__icon { font-size: 3rem; margin-block-end: var(--space-3); }
/* ==========================================================================
Customer Portal foundation (future-ready, placeholder data now)
========================================================================== */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.portal-card {
border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: var(--space-5);
background: var(--bg-card, var(--surface-raised)); backdrop-filter: blur(14px);
display: flex; flex-direction: column; gap: var(--space-3);
transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.portal-card:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.portal-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.portal-card__label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.portal-card__value { font-family: var(--font-family-display, inherit); font-weight: 700; font-size: var(--font-size-xl); }
.portal-card__foot { font-size: var(--font-size-xs); color: var(--text-3, var(--text-secondary)); }
.portal-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.portal-status-dot--active { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.portal-status-dot--inactive { background: var(--text-3, var(--text-secondary)); }
.portal-quick-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }