/* ===================================================================== MARROW ATELIER. THE GROUND, THE TABLE, THE CHROME. assets/css/atelier.css (2026-09-16) One system on every Marrow surface: the website, the coach console, the staff view, the member view and the gym console. This sheet is linked directly after css/styles.css on every page that carries the stamp (the website) (a console) and it paints nothing on a page without it. The stamp is the switch. THREE THINGS LIVE HERE AND NOWHERE ELSE. 1. THE GROUND (BACKGROUND.md 3). The app's honeycomb, radius 42, drawn flat in the accent at 0.12 on Oura cream, fading out by 62 percent of the viewport. One tile, one mask rule, one body::before. Never lit, never moving, no second layer. 2. THE TABLE (DESIGN-SYSTEM 2c). Two selectors, one rule, so the same values win on a console page (0,3,0 beats the dark and light tables at 0,2,0) and on the website (0,2,0 beats the base :root). No :not(): there is no account the table may go inert for. 3. THE CHROME ON THE CANVAS. Nav glass, page head, eyebrow, lede, jump rail, footer, bottom bar, skip link, and the type scale bound to the hooks the pages already carry. Everything that is a component is in assets/css/atelier-components.css; everything that is an atmosphere panel is in assets/css/atelier-atmo.css. THE ONE CONVENTION. Every rule opens with :root[data-mz-console="atelier"], (0,2,0) before the hook, so a prefixed rule with one class beats any two class surface rule on weight and no !important is needed. No combinator inside an :is(), no id inside an :is() beside a class (the shared cascade resolver reads this sheet). Tokens, never literals: the table reads --atelier-canvas and --atelier-card, the ground reads --atelier-lattice-alpha and --atelier-hex-radius, every component rule reads --paper-*, --ink-*, --rule-*, --marrow-accent*, --mz-status-*, --mzv-onfill. NO LIGHT SOURCE. No radial gradient, no glow, no halo, no shadow, no sheen, no lift, no drift. The alpha ramp in --atelier-hex-ramp is the one linear-gradient this sheet carries and it is a MASK: opacity, not colour. backdrop-filter on the sticky nav is glass, not light, and is the one filter here. No em or en dashes anywhere in this file. ===================================================================== */ /* --------------------------------------------------------------------- 1. THE GROUND. Geometry declared once, then the one mask rule. --------------------------------------------------------------------- */ /* The tile: two columns of a flat top hex grid at circumradius 42, width 126 (two pitches), height 72.746 (one pitch). Four cells are drawn as three edge polylines (top, upper right, lower right) so every edge of the infinite grid is stroked exactly once when the tile repeats. Stroke 1, square caps so the seams close. Black on transparent: it is a MASK, the colour comes from the rule. */ :root[data-mz-console="atelier"] { --atelier-hex-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='72.746' viewBox='0 0 126 72.746'%3E%3Cg fill='none' stroke='black' stroke-width='1' stroke-linecap='square' stroke-linejoin='round'%3E%3Cpolyline points='21,-36.373 63,-36.373 84,0 63,36.373'/%3E%3Cpolyline points='21,36.373 63,36.373 84,72.746 63,109.119'/%3E%3Cpolyline points='84,0 126,0 147,36.373 126,72.746'/%3E%3Cpolyline points='-42,0 0,0 21,36.373 0,72.746'/%3E%3C/g%3E%3C/svg%3E"); /* The fade: the app's (1 - travel)^1.4 sampled at five points across the 62 percent reach, ending where the app's minimum visible opacity cuts its last row. An alpha ramp in a mask is opacity, not colour, and it is the ONE linear-gradient the light source guard allows, by this selector and property only. */ --atelier-hex-ramp: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.73) 12.4%, rgba(0,0,0,0.49) 24.8%, rgba(0,0,0,0.28) 37.2%, rgba(0,0,0,0.10) 49.6%, rgba(0,0,0,0) 50%); } /* The page paints the canvas on html, not body, so a fixed pseudo element at z-index -1 sits between the canvas and the content. */ :root[data-mz-console="atelier"] { background: var(--paper-canvas); } :root[data-mz-console="atelier"] body { background: transparent; } :root[data-mz-console="atelier"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--marrow-accent); opacity: var(--atelier-lattice-alpha); -webkit-mask-image: var(--atelier-hex-ramp), var(--atelier-hex-tile); mask-image: var(--atelier-hex-ramp), var(--atelier-hex-tile); -webkit-mask-size: 100% 100%, 126px 72.746px; mask-size: 100% 100%, 126px 72.746px; -webkit-mask-repeat: no-repeat, repeat; mask-repeat: no-repeat, repeat; -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; -webkit-mask-composite: source-in; mask-composite: intersect; } @media print { :root[data-mz-console="atelier"] body::before { display: none; } } /* --------------------------------------------------------------------- 2. THE TABLE. DESIGN-SYSTEM 2c, exactly. Every value is a var() of a token that already exists in css/styles.css :root or a literal the light table already carries. Held by tests/atelier-token-table.test.mjs. --------------------------------------------------------------------- */ :root[data-mz-console="atelier"], :root[data-mz-theme][data-mz-console="atelier"] { color-scheme: light; /* GROUNDS. Themed roles: --bone-cream is the PAGE, --bone-white is the CARD. */ --bone-cream: var(--atelier-canvas); --bone-white: var(--atelier-card); --paper-canvas: var(--atelier-canvas); --paper-card: var(--atelier-card); --paper-nested: #EFE9DC; /* the nested band; a literal because the alias would follow --bone-cream to the canvas */ --mz-bg-page: var(--atelier-canvas); --mz-bg-card: var(--atelier-card); --mz-surface: var(--atelier-card); --mz-bg-raised: var(--atelier-card); --mz-bg-overlay: var(--atelier-card); --mz-bg-modal: var(--atelier-card); --mz-ground-rgb: 247, 241, 232; /* INK. The light ladder, from css/styles.css. */ --bone-black: #0A0908; --ink-secondary: #373734; --ink-muted: #55504A; --ink-tertiary: #6E675D; --steel: #475569; --steel-mid: #94A3B8; --steel-light: #B8C5D6; --ash: #2A2A28; --line: rgba(10, 9, 8, 0.08); --mz-line: rgba(10, 9, 8, 0.08); --rule-strong: #B8B4AA; --rule-soft: #E7E3DA; --mz-accent-text: var(--marrow-accent); --mz-fg-link: var(--marrow-accent); /* ON FILL. The theme layer declares this once at its :root; the website never loads that layer, so the table restates the same literal. */ --mzv-onfill: #FBF8F2; /* STATUS and METRIC hues, light values (meaning, never brand). */ --mz-status-good: #0C632C; --mz-status-good-soft: rgba(12, 99, 44, 0.10); --mz-status-risk: #9E2B18; --mz-status-risk-soft: rgba(158, 43, 24, 0.10); --mz-status-info: #6D28D9; --mz-status-info-soft: rgba(109, 40, 217, 0.10); --mz-status-neutral: #4E4942; --mz-status-neutral-soft: rgba(78, 73, 66, 0.10); --mzv-train: #0F7B37; --mzv-mind: #0E7490; --mzv-spirit: #6D28D9; --mzv-money: #995F0B; --mzv-roster: #1D4ED8; --r2-kicker-color: var(--marrow-accent); --r2-muted-color: #4E4942; --r2-footer-color: #55504A; --r2-dot-color: var(--marrow-accent); /* NO ELEVATION, NO LIGHT. Every shadow, sheen, glow, lift and halo token is none. The orb tokens are DELETED from the theme layer by L3, so they are not restated here. */ --mz-card-shadow: none; --mz-card-sheen: none; --mz-card-glow-fill: none; --shadow-soft: none; --mz-lift-1: none; --mz-lift-2: none; --r2-dot-halo: transparent; --r2-stamp-glow: transparent; /* TYPE FLOORS. Body 16, small 14 for data, captions 12. */ --type-body: 16px; --fs-body: 1rem; --fs-td: 0.875rem; --fs-help: 0.75rem; --fs-label: 0.75rem; --fs-th: 0.75rem; --type-micro: 12px; /* SHAPE AND RHYTHM. */ --mz-card-pad: var(--space-3); --card-pad: var(--space-3); --mz-card-radius: 8px; --radius-card: 8px; --radius-control: 12px; --radius-elevated: 24px; --radius-sm: 4px; /* MOTION. The two durations the theme layer declares, restated for the website. */ --mz-dur-fast: 160ms; --mz-dur-base: 240ms; } @media (prefers-reduced-motion: reduce) { :root[data-mz-console="atelier"] { --mz-dur-fast: 0.01ms; --mz-dur-base: 0.01ms; } } /* --------------------------------------------------------------------- 3. THE BODY AND THE PAGE CAP. Body ink is the light ladder; the page is capped at the Oura max width; the reading column at 720. --------------------------------------------------------------------- */ :root[data-mz-console="atelier"] body { color: var(--ink-primary); font-family: var(--sans); font-size: var(--type-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } :root[data-mz-console="atelier"] :is(.dash-main, .revenue-container, .acct-main, .console-main, .site-main, .page-wrap), :root[data-mz-console="atelier"] main { max-width: var(--atelier-max-width); margin-left: auto; margin-right: auto; } :root[data-mz-console="atelier"] .dash { --mz-lift-1: none; --mz-lift-2: none; } :root[data-mz-console="atelier"] .dash-starthere-top::after { display: none; animation: none; } :root[data-mz-console="atelier"] .dash-starthere-top { animation: none; } /* --------------------------------------------------------------------- 4. THE NAV. One shell on the website and every console: sticky glass at 0.88 of the canvas, blur 12, a bottom hairline, 64 tall, Inter 500 16 secondary ink links, the current link a 2px accent underline offset 6. --------------------------------------------------------------------- */ :root[data-mz-console="atelier"] :is(.nav, .dash-nav, .rev-nav, .acct-nav) { position: sticky; top: 0; z-index: 40; background: rgba(var(--mz-ground-rgb), 0.88); background-image: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule-soft); box-shadow: none; color: var(--ink-primary); } :root[data-mz-console="atelier"] :is(.nav-inner, .dash-nav-inner, .rev-nav-inner, .acct-nav-inner) { max-width: var(--atelier-max-width); min-height: 64px; margin: 0 auto; display: flex; align-items: center; gap: var(--space-3); } :root[data-mz-console="atelier"] :is(.nav, .dash-nav, .rev-nav, .acct-nav) :is(.brand, .dash-nav-brand, .rev-nav-brand, .acct-brand, .mz-header-name, .mz-header-section, .dash-navmenu-current, .lamella-chip-name, .mz-viewswitch-current, .dash-add-logo, .mz-back-link), :root[data-mz-console="atelier"] #greet-name { color: var(--ink-primary); text-decoration: none; } :root[data-mz-console="atelier"] :is(.nav, .dash-nav, .rev-nav, .acct-nav) :is(.brand, .dash-nav-brand, .rev-nav-brand, .acct-brand) { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: var(--weight-serif); font-size: 24px; letter-spacing: 0; } :root[data-mz-console="atelier"] :is(.nav, .dash-nav, .rev-nav, .acct-nav) :is(.brand, .dash-nav-brand, .rev-nav-brand, .acct-brand) svg { width: 28px; height: 28px; } :root[data-mz-console="atelier"] .nav .brand svg { width: 32px; height: 32px; } :root[data-mz-console="atelier"] :is(.nav, .dash-nav, .rev-nav, .acct-nav) :is(.dash-navmenu-kicker, .lamella-chip-kicker, .mz-viewswitch-kicker, .acct-nav-tag), :root[data-mz-console="atelier"] .rev-nav-brand .label { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--marrow-accent); } :root[data-mz-console="atelier"] :is(.nav-link, .own-nav-links a, .acct-nav a) { font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--ink-secondary); text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid transparent; transition: color var(--mz-dur-fast) ease, border-color var(--mz-dur-fast) ease; } :root[data-mz-console="atelier"] :is(.nav-link, .own-nav-links a, .acct-nav a):hover { color: var(--ink-primary); } :root[data-mz-console="atelier"] :is(.nav-link, .own-nav-links a, .acct-nav a):is([aria-current="page"], .is-current) { color: var(--ink-primary); border-bottom-color: var(--marrow-accent); } :root[data-mz-console="atelier"] .mz-header-sep { background: var(--rule-soft); } /* No .logo-svg stroke rule (removed 2026-09-16 with the final mark): the partial strokes its own white token inline and is never re inked; the tile it sits in on cream is painted by css/styles.css on svg[data-marrow-mark="final"]. */ :root[data-mz-console="atelier"] .dash-brand-mark-glow { display: none; } /* The mobile bottom bar: the same glass, a top hairline, 44 targets, the current item in the accent. */ :root[data-mz-console="atelier"] .dash-bottom-nav { background: rgba(var(--mz-ground-rgb), 0.88); background-image: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--rule-soft); box-shadow: none; } :root[data-mz-console="atelier"] .bnav-btn { color: var(--ink-secondary); min-height: 44px; min-width: 44px; } :root[data-mz-console="atelier"] .bnav-btn[aria-current="page"] { color: var(--marrow-accent); } :root[data-mz-console="atelier"] .bnav-btn[aria-current="page"] svg { stroke: var(--marrow-accent); } /* --------------------------------------------------------------------- 5. THE PAGE HEAD ON THE CANVAS. Eyebrow mono 12 caps 700 sage, h1 serif 40 at 300 with the one italic word in ink, lede 16 secondary. Chrome that sits straight on the canvas reads --ink-primary, --ink-secondary, --ink-muted or the accent only (BACKGROUND.md 4). --------------------------------------------------------------------- */ :root[data-mz-console="atelier"] :is(.section-head, .dash-today-head, .rev-header, .acct-head, .console-head, .mz-page-title, .mz-section-title, .dash-band-h) { color: var(--ink-primary); } :root[data-mz-console="atelier"] :is(.today-eyebrow, .rev-eyebrow, .section-eyebrow, .card-eyebrow, .mz-eyebrow, .acct-eyebrow, .r2-kicker, .eyebrow, .dash-band-h) { font-family: var(--mono); font-weight: 700; font-size: 12px; line-height: 1.5; letter-spacing: 0.5px; text-transform: uppercase; color: var(--atelier-sage); } :root[data-mz-console="atelier"] :is(.section-head, .dash-today-head, .rev-header, .acct-head, .console-head) :is(.today-eyebrow, .rev-eyebrow, .section-eyebrow, .mz-eyebrow, .acct-eyebrow, .eyebrow), :root[data-mz-console="atelier"] #today-eyebrow { color: var(--marrow-accent); } :root[data-mz-console="atelier"] :is(.section-sub, .dash-today-sub, .rev-sub, .section-head-meta, .lede, .acct-lede, .console-lede), :root[data-mz-console="atelier"] .section-head p, :root[data-mz-console="atelier"] .rev-header p, :root[data-mz-console="atelier"] #today-sub { font-size: 16px; line-height: 1.5; color: var(--ink-secondary); max-width: 720px; } :root[data-mz-console="atelier"] #today-updated { font-family: var(--mono); font-size: 12px; letter-spacing: 0.35px; color: var(--ink-muted); } :root[data-mz-console="atelier"] .console-cursive, :root[data-mz-console="atelier"] .serif em { font-style: italic; font-weight: var(--weight-serif); } /* The money jump rail is a pill row on the canvas, on the same glass as the nav. */ :root[data-mz-console="atelier"] .mny-rail { background: rgba(var(--mz-ground-rgb), 0.88); background-image: none; border-bottom: 1px solid var(--rule-soft); box-shadow: none; } /* Footers and legal lines: the one dark surface on a page, the same dark as the pill and the mark's ring. */ :root[data-mz-console="atelier"] :is(footer, .mr-foot, .dash-footer, .dash-legal, .rev-footer, .acct-footer, .site-footer) { --r2-footer-color: var(--paper-canvas); background: var(--paper-footer); background-image: none; color: var(--paper-canvas); border-top: 0; box-shadow: none; } :root[data-mz-console="atelier"] :is(footer, .mr-foot, .dash-footer, .dash-legal, .rev-footer, .acct-footer, .site-footer) :is(a, .r2-footer-trust) { color: var(--marrow-accent-on-dark); } :root[data-mz-console="atelier"] :is(footer, .mr-foot, .dash-footer, .dash-legal, .rev-footer, .acct-footer, .site-footer) :is(.mr-foot-mono, .legal-line) { font-family: var(--mono); font-size: 12px; letter-spacing: 0.5px; color: var(--paper-canvas); } :root[data-mz-console="atelier"] :is(footer, .mr-foot, .dash-footer, .dash-legal, .rev-footer, .acct-footer, .site-footer) svg { color: var(--mzv-onfill); } /* The skip link: a bone black pill that appears on focus, the one filled control until the page's own does. */ :root[data-mz-console="atelier"] .skip-link { position: absolute; left: var(--space-2); top: -100px; z-index: 100; padding: 12px 24px; border-radius: 999px; background: var(--bone-black); color: var(--mzv-onfill); font-weight: 500; text-decoration: none; } :root[data-mz-console="atelier"] .skip-link:focus { top: var(--space-2); outline: 2px solid var(--marrow-accent); outline-offset: 3px; } /* --------------------------------------------------------------------- 6. THE TYPE SCALE ON THE HOOKS. Oura's scale to the pixel (DESIGN-SYSTEM 3 and 11.8): heading 40 / 1.25 / -1px serif 300; heading lg 48 / 1.25 / -1.2px; heading sm 24 / 1.38 serif 400; subheading 18 / 1.5 Inter 500; body sm 14 / 1.5 / +0.35px; caption 12 / 1.5 / +0.5px. Big figures are the serif at 300 (the approved boards), tabular. --------------------------------------------------------------------- */ :root[data-mz-console="atelier"] :is(.section-title, .dash-today-title, .mz-page-title, .mz-section-title, .acct-h1, .console-title, .h40), :root[data-mz-console="atelier"] .rev-header .rev-title, :root[data-mz-console="atelier"] #today-h { font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1.25; letter-spacing: -1px; color: var(--ink-primary); } :root[data-mz-console="atelier"] .h48 { font-family: var(--serif); font-weight: 300; font-size: 48px; line-height: 1.25; letter-spacing: -1.2px; } :root[data-mz-console="atelier"] :is(.h24, .own-box-h, .card-h2), :root[data-mz-console="atelier"] #owner-box-h, :root[data-mz-console="atelier"] :is(.mz-card, .card, .mny-section, .own-box) h2 { font-family: var(--serif); font-weight: var(--weight-serif); font-size: 24px; line-height: 1.38; letter-spacing: 0; color: var(--ink-primary); } :root[data-mz-console="atelier"] :is(.mz-card-title, .card-title, .mny-sub-h, .dash-navmenu-current, .subheading), :root[data-mz-console="atelier"] .card-head h2, :root[data-mz-console="atelier"] .mny-section .rev-title, :root[data-mz-console="atelier"] .form-panel h2, :root[data-mz-console="atelier"] .earnings-section h2 { font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: 0; color: var(--ink-primary); } :root[data-mz-console="atelier"] :is(.metric-tile, .mz-metric, .own-box) .k, :root[data-mz-console="atelier"] .mz-metric-label { font-family: var(--mono); font-weight: 700; font-size: 12px; line-height: 1.5; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); opacity: 1; } :root[data-mz-console="atelier"] :is(.metric-tile, .mz-metric, .own-box) .v, :root[data-mz-console="atelier"] .mz-metric-value, :root[data-mz-console="atelier"] .own-cell { font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink-primary); } :root[data-mz-console="atelier"] :is(.metric-tile, .mz-metric, .own-box) .meta, :root[data-mz-console="atelier"] .mz-metric-note { font-size: 14px; line-height: 1.5; letter-spacing: 0.35px; color: var(--ink-muted); opacity: 1; } :root[data-mz-console="atelier"] .own-cell[data-state="unreadable"], :root[data-mz-console="atelier"] .own-cell[data-state="loading"] { color: var(--ink-muted); } /* The ONE hero figure per console page at 48. */ :root[data-mz-console="atelier"] .mz-metric--xl .mz-metric-value, :root[data-mz-console="atelier"] #ans-earned, :root[data-mz-console="atelier"] #needs-count { font-family: var(--serif); font-weight: 300; font-size: 48px; line-height: 1.25; letter-spacing: -1.2px; text-transform: none; background: transparent; background-image: none; padding: 0; border: 0; border-radius: 0; color: var(--ink-primary); } :root[data-mz-console="atelier"] #needs-count { padding: 0 !important; } :root[data-mz-console="atelier"] .display { font-family: var(--serif); font-weight: 300; font-size: 80px; line-height: 1; letter-spacing: -2px; color: var(--ink-primary); } @media (min-width: 1280px) { :root[data-mz-console="atelier"] .display { font-size: 96px; letter-spacing: -4.8px; } } :root[data-mz-console="atelier"] .display em, :root[data-mz-console="atelier"] .h48 em { font-style: italic; font-weight: var(--weight-serif); color: var(--marrow-accent); } /* Section rhythm: 80 between sections on every surface. */ :root[data-mz-console="atelier"] :is(.site-section, .atl-section) { padding-block: var(--atelier-section-gap); }