/* ═══════════════════════════════════════════════════════════════════════ MMCX LLC — "Field Manual" ═══════════════════════════════════════════════════════════════════════ The house system, not a new look. TWO faces, sharing octetoperator.com's tokens: dark (phosphor on black, canonical) and light (corporate cream), with the Octet terminal-green as the single accent in both. Bebas Neue for display (the Thomson Visuals rule — genuine Bebas, tight, never a bold fallback), IBM Plex Sans for reading, IBM Plex Mono for anything that reads as a specification. Both Plex faces are shared with octetoperator.com — three self-hosted families across the whole estate, zero third-party font requests. Structure is a field manual, not a landing page: numbered sections, hairline rules, asymmetric measures, square corners. There is no centered hero, no feature-card grid, no stat counters. WHAT THIS REPLACED, AND WHY (so it doesn't come back): - Green-on-black CRT + 28 glow shadows + a full-screen matrix-rain canvas on a 20fps setInterval that never paused. Read as a screensaver, cost a constant repaint, and had no reduced-motion path. The dark face here is the Octet palette applied to an editorial layout — NOT that pastiche. - A marquee protocol ticker and blinking cursor pseudo-elements. - `.reveal { opacity: 0 }` driven by an IntersectionObserver, on every major block of every page. With JS unavailable, or the observer simply not firing, the content stayed invisible PERMANENTLY — most of apps.html never rendered in a full-page capture. NO CONTENT ON THIS SITE DEPENDS ON JAVASCRIPT. There are three small scripts — a pre-paint theme stamp, a theme toggle, and a cookie-consent banner — and all three are purely additive: with JS off you get the canonical dark face, fully readable, no dead toggle, and no dead Accept/Decline (both controls are injected). Analytics cannot run without JS, so a JS-less visitor is already essential-only. Never gate visibility on a script again. Never load a tracker outside the gated startAnalytics hook, and never before Accept. Motion budget: color and border transitions on interactive elements only, 150ms, and all of it dropped under prefers-reduced-motion. ═══════════════════════════════════════════════════════════════════════ */ /* ── Faces (self-hosted: no third-party request from a site that publishes its own privacy policy, and no FOUT) ───────────────────────────────── */ @font-face { font-family: 'Bebas Neue'; src: url('fonts/BebasNeue-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; /* block, not swap: a Bebas headline must never paint in a fallback */ } @font-face { /* One VARIABLE file covers 400 and 700 — Google serves byte-identical files for both weights because v23 is variable, so declaring the range here means `strong` gets a REAL bold instead of a synthesised one. */ font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-400_700-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-500-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* ── TWO MODES, ONE SET OF NAMES ──────────────────────────────────────── DARK IS CANONICAL, exactly as on octetoperator.com: the dark values live on `:root`, and the cream face is opted into with ``, stamped pre-paint by the script in each page's . That direction matters — if the script never runs, the page renders dark and complete rather than half-themed. The semantic values below are LIFTED FROM the Octet token file (`apps/web/src/lib/styles/tokens.css` in the app repo) so the two sites are the same product family, not two interpretations of it. If those change there, change them here. One deliberate divergence, and the reason for it: Octet's dark hero sets display type in phosphor green with `--glow-signal` behind it. MMCX's display type stays near-white (`--ink-display`) with NO glow. Bebas at 136px in glowing green is the exact CRT pastiche this redesign removed, and the glow was one of the audited tells. The palette matches; the glow does not come back. Green stays the accent — band numbers, the 2110 mark, links, nav rules — in both modes. */ :root { /* Semantic core — DARK canonical (phosphor on black) */ --color-primary: #00ff00; --color-secondary: #00aa00; --color-background: #000000; --color-surface: #1a1a1a; --color-border: #333333; --color-text-hi: #ddede2; --color-text-mid: #8aa595; --color-text-lo: #5e7567; /* Field-Manual names → the semantic layer. Only this block changes per mode; every rule below reads these and never a literal. */ --paper: var(--color-background); --paper-sunk: var(--color-surface); /* recessed panels — a shade, never a grey card */ --ink: var(--color-text-hi); --ink-display: var(--color-text-hi); /* dark: near-white. light: FULL black. */ --ink-mid: var(--color-text-mid); /* NOTE: there is deliberately no --ink-faint. text-lo (#5e7567 / #7c8574) measures 4.22 dark and 3.29 light against the ground — under AA's 4.5 for the 11px mono labels that were using it. A tint you cannot legally set type in is not a useful step in a type scale, so labels use --ink-mid. */ --rule: var(--color-border); --rule-strong: var(--color-text-lo); /* #333 is invisible against #000 for an emphatic rule */ /* The one accent. Zero purple, zero gradients, in either mode. */ --signal: var(--color-primary); --signal-deep: var(--color-primary); /* on black the deep green is too dim for a link */ /* The app screenshots are black-backed, so their plate is black in BOTH modes. In light that reads as a deliberate printed plate. */ --plate-bg: #000000; --display: 'Bebas Neue', 'Arial Narrow', sans-serif; --body: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, sans-serif; --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; --measure: 62ch; --gutter: clamp(1.25rem, 4vw, 4rem); --shell: 76rem; color-scheme: dark; } /* ── LIGHT — white ground, cool neutral. Opted into, never automatic. ──── Founder call 2026-07-30: MMCX's light face moves OFF cream to white. Cream stays the Octet light face — the two products no longer share this one value, which is why the whole neutral ramp below is declared here rather than inherited. The ground could not move alone. Every other light value was cream-derived (a warm surface, a #e3d9c3 hairline, greenish text); on white those read as dirty. Surface, border and the three text steps are all re-cut cool-neutral so nothing warm survives. Contrast on #ffffff, all measured, not eyeballed: display #000000 21.0 text-hi 17.8 text-mid 8.3 text-lo 4.9 accent #17864a 4.6 deep #12603a 7.6 The accent was #1f9e57, which measures 3.45 on white — fine for the decorative uses it actually has (rules, markers, focus ring) but under AA if anyone ever sets type in it. Deepened to #17864a so it clears 4.5 either way. */ :root[data-mode='light'] { --color-primary: #17864a; --color-secondary: #4f5b55; --color-background: #ffffff; --color-surface: #f4f5f6; --color-border: #e3e5e7; --color-text-hi: #16181a; --color-text-mid: #4a4f52; --color-text-lo: #6b7176; --ink-display: #000000; /* the Thomson rule: display type is FULL black */ --rule-strong: var(--color-text-hi); --signal-deep: #12603a; /* link + small-accent text; 7.6 on white */ color-scheme: light; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.55; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } /* ── Type ─────────────────────────────────────────────────────────────── Bebas is a display face: uppercase, tight, and never below ~1.5rem where its narrow forms stop being legible. Body copy never uses it. */ .d1, .d2, .d3 { font-family: var(--display); font-weight: 400; color: var(--ink-display); text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.92; text-wrap: balance; } .d1 { font-size: clamp(3.25rem, 1.6rem + 8.2vw, 8.5rem); } .d2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); } .d3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); } p { max-width: var(--measure); text-wrap: pretty; } p + p { margin-top: 0.9em; } .lede { font-size: clamp(1.125rem, 1rem + 0.55vw, 1.375rem); line-height: 1.45; color: var(--ink); } .dim { color: var(--ink-mid); } .small { font-size: 0.875rem; line-height: 1.5; } /* Anything that reads as a specification is mono, uppercase, tracked. */ .label { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mid); } strong { font-weight: 700; color: var(--ink); } a { color: var(--signal-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 150ms linear; } a:hover { color: var(--ink-display); } a:focus-visible, :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* ── Header: a rule, a wordmark, and the nav. No sticky bar, no blur. ──── */ .masthead { border-bottom: 1px solid var(--rule-strong); } .masthead-in { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-block: 1.15rem; flex-wrap: wrap; } .wordmark { font-family: var(--display); font-size: 1.75rem; line-height: 1; letter-spacing: 0.01em; color: var(--ink-display); text-decoration: none; text-transform: uppercase; } /* The dot is punctuation, so it is text as far as contrast is concerned: --signal on cream measures 2.95 against the 3.0 large-text floor. */ .wordmark span { color: var(--signal-deep); } .masthead nav { display: flex; align-items: center; /* the 32px toggle sits in here with the text links */ gap: clamp(1rem, 2.4vw, 2rem); } .masthead nav a { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mid); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; } .masthead nav a:hover, .masthead nav a[aria-current='page'] { color: var(--ink-display); border-bottom-color: var(--signal); } /* Theme toggle — a direct port of octetoperator.com's `.oo-theme-toggle` (founder-directed: "copy the one from octet operator"). Same 32x32 square, same hairline border, same sun/moon glyph, same hover behaviour; only the token NAMES are translated to this sheet's. The 4px radius is the ONE sanctioned exception to this system's no-radius rule. It exists because matching Octet's control was an explicit instruction, and it is scoped to this single 32px button — do not let it spread. No font-family on purpose: the glyphs are U+2600/U+263E, which are not in our latin font subsets, so this inherits and falls through to a system face that has them. Setting var(--mono) here would render tofu. Still INJECTED BY SCRIPT, never present in the HTML — a toggle that ships in the markup and does nothing without JS is a dead control, which is exactly the kind of placebo interaction this redesign was auditing for. */ .themetoggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 0.95rem; line-height: 1; color: var(--ink-mid); background: transparent; border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; transition: color 150ms linear, border-color 150ms linear; } .themetoggle:hover { color: var(--signal-deep); border-color: var(--signal); } main { flex: 1; } /* ── Hero: asymmetric. Type on the left, ONE oversized real asset on the right, bleeding past the shell so it reads as a plate in a manual rather than a centered product mockup. ─────────────────────────────── */ .hero { border-bottom: 1px solid var(--rule-strong); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-top: clamp(3rem, 7vw, 6.5rem); } .hero-copy { padding-bottom: clamp(3rem, 6vw, 5.5rem); } .hero-copy .label { display: block; margin-bottom: 1.4rem; } .hero-copy .d1 { margin-bottom: 1.5rem; } .hero-copy .lede { max-width: 46ch; } .hero-meta { margin-top: 2.25rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; } /* The plate. Square, hard-bordered, no radius, no glow, no float. */ .hero-plate { align-self: end; margin-bottom: -1px; /* sit the frame ON the section rule */ } .hero-plate img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-strong); border-bottom: 0; background: var(--plate-bg); } .hero-plate figcaption { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mid); padding: 0.6rem 0 0.9rem; } /* ── Sections: numbered, hairline-ruled, asymmetric 4/8 measure. ───────── */ .band { border-bottom: 1px solid var(--rule); padding-block: clamp(2.75rem, 6vw, 5rem); } .band:last-of-type { border-bottom: 0; } .band-head { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: baseline; margin-bottom: 1.75rem; } .band-num { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; color: var(--signal-deep); } .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 3.5rem); } /* ── Spec list: the replacement for the emoji feature grid. Hairline rows, mono keys, prose values. Reads as a manual's contents page. ───────── */ .spec { border-top: 1px solid var(--rule-strong); } .spec-row { display: grid; grid-template-columns: 2.75rem minmax(0, 12rem) minmax(0, 1fr); gap: 0.35rem 1.25rem; padding-block: 1.05rem; border-bottom: 1px solid var(--rule); align-items: start; } .spec-i { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--signal-deep); letter-spacing: 0.06em; padding-top: 0.15em; } .spec-k { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-display); padding-top: 0.1em; } .spec-v { color: var(--ink-mid); font-size: 0.9375rem; max-width: 58ch; } /* ── Protocol set: plain tracked mono, no pills, no marquee. ───────────── */ .protos { display: flex; flex-wrap: wrap; gap: 0.4rem 1.35rem; list-style: none; } .protos li { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; color: var(--ink); white-space: nowrap; } /* ── The 2110 mark. The company's actual point of view, given real size instead of being buried in an amber card. ───────────────────────────── */ .mark { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; } .mark-sum { font-family: var(--display); font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: 0.9; color: var(--ink-display); white-space: nowrap; } .mark-sum em { font-style: normal; color: var(--signal-deep); } /* ── Plates row (app screens) ───────────────────────────────────────────── */ .plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); list-style: none; } .plates img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-strong); background: var(--plate-bg); } .plates figcaption { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mid); padding-top: 0.55rem; } /* ── Definition block (contact) ─────────────────────────────────────────── */ .defs { border-top: 1px solid var(--rule-strong); } .defs > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 0.3rem 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); } .defs dt { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mid); padding-top: 0.3em; } .defs dd { color: var(--ink); } /* ── A sunk panel, used sparingly where a block genuinely is an aside. ──── */ .panel { background: var(--paper-sunk); border-left: 2px solid var(--signal); padding: clamp(1.1rem, 2.5vw, 1.6rem); } .panel > * + * { margin-top: 0.7rem; } /* ── Footer ─────────────────────────────────────────────────────────────── */ .foot { border-top: 1px solid var(--rule-strong); padding-block: 2rem 2.5rem; margin-top: clamp(2.5rem, 6vw, 5rem); } .foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; } .foot nav { display: flex; gap: 1.5rem; } .foot nav a { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid transparent; } .foot nav a:hover { color: var(--ink-display); border-bottom-color: var(--signal); } .legalese { margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); font-size: 0.6875rem; line-height: 1.6; color: var(--ink-mid); max-width: none; } /* ── Cookie consent ────────────────────────────────────────────────────── Injected by script, same additive pattern as the theme toggle. With JS off the banner never appears and no analytics can run, so there is no dead control. Square corners, hairline rule, Field Manual type. Equal Accept/Decline hit targets — do not restyle Accept into a dark pattern. */ .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--paper); border-top: 1px solid var(--rule-strong); padding-bottom: env(safe-area-inset-bottom); } .consent-in { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label actions" "copy actions"; gap: 0.35rem 1.75rem; align-items: center; padding-block: 1rem 1.15rem; } .consent .label { grid-area: label; } .consent-copy { grid-area: copy; max-width: var(--measure); font-size: 0.9375rem; color: var(--ink); margin: 0; } .consent-actions { grid-area: actions; display: flex; gap: 0.6rem; flex-shrink: 0; } .consent-btn { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.55rem 1.05rem; cursor: pointer; border: 1px solid var(--rule); background: transparent; color: var(--ink-display); transition: color 150ms linear, border-color 150ms linear; } .consent-accept { border-color: var(--signal); } .consent-accept:hover, .consent-decline:hover { border-color: var(--ink-display); color: var(--ink-display); } body.has-consent { padding-bottom: 8.5rem; } /* ── Legal pages ──────────────────────────────────────────────────────── The policy TEXT is unchanged and authoritative — sg_privacy.html and nextevent_privacy.html are the Privacy Policy URLs on shipped App Store listings. Only the chrome around it moved to this system. The four policies currently use exactly: h1, h2, h3, p, ul/li, strong, a, br — all styled below. The h4 and table rules are defensive, for policy text that grows a sub-heading or a data table later; they are not in use today. If you add an element to a policy, add its rule here in the same change — an unstyled tag in a legal document is how these pages start looking broken. */ .legal { padding-block: clamp(2.5rem, 5vw, 4rem); max-width: 68ch; } .legal h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 0.94; text-transform: uppercase; color: var(--ink-display); margin-bottom: 1rem; text-wrap: balance; } .legal h2 { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-display); margin-top: 2.5rem; margin-bottom: 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--rule-strong); } .legal h3 { font-family: var(--body); font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-top: 1.6rem; margin-bottom: 0.35rem; } .legal h4 { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mid); margin-top: 1.3rem; margin-bottom: 0.3rem; } .legal p, .legal li { max-width: none; color: var(--ink); } .legal p { margin-top: 0.75rem; } .legal ul { margin: 0.75rem 0 0; padding-left: 1.1rem; } .legal li { margin-top: 0.3rem; } .legal li::marker { color: var(--signal); } .legal table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9375rem; } .legal th, .legal td { text-align: left; vertical-align: top; padding: 0.6rem 0.9rem 0.6rem 0; border-bottom: 1px solid var(--rule); } .legal th { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mid); border-bottom-color: var(--rule-strong); } /* ── Responsive: the asymmetry collapses to one column. The plate stays AFTER the copy, matching document order — a phone leads with the headline, and visual order never contradicts reading order (WCAG 1.3.2). Do not reintroduce a grid-row override here to move the image up; that is exactly the mismatch this note exists to prevent. ── */ @media (max-width: 62rem) { .hero-grid { grid-template-columns: 1fr; gap: 0; align-items: start; } .hero-plate { max-width: 22rem; margin-top: 2.5rem; margin-bottom: 0; } .hero-plate img { border-bottom: 1px solid var(--rule-strong); } .hero-copy { padding-bottom: 0; } .split { grid-template-columns: 1fr; } .band-head { grid-template-columns: 2.5rem 1fr; } } @media (max-width: 40rem) { .spec-row { grid-template-columns: 2.25rem 1fr; } .spec-v { grid-column: 2; } .defs > div { grid-template-columns: 1fr; } .mark { grid-template-columns: 1fr; align-items: start; } .masthead-in { gap: 0.75rem; } .masthead nav { width: 100%; justify-content: space-between; gap: 0.5rem; } .consent-in { grid-template-columns: 1fr; grid-template-areas: "label" "copy" "actions"; gap: 0.45rem; } .consent-actions { width: 100%; margin-top: 0.35rem; } .consent-btn { flex: 1; } body.has-consent { padding-bottom: 14rem; } body { padding-bottom: 4.5rem; } .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px)); background: var(--color-background); border-top: 1px solid var(--rule-strong); } .sticky-cta a { display: block; text-align: center; padding: 0.7rem 1rem; border: 1px solid var(--signal-deep, var(--ink-mid)); color: var(--signal-deep, var(--ink-mid)); text-decoration: none; font-family: var(--sans); } } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 1.5rem; } .cta { display: inline-block; padding: 0.65rem 1rem; border: 1px solid var(--signal-deep, var(--ink-mid)); color: var(--signal-deep, var(--ink-mid)); text-decoration: none; font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.02em; } .cta:hover { border-color: var(--ink); color: var(--ink); } .cta-ghost { border-color: var(--rule-strong); color: var(--ink-mid); } .sticky-cta { display: none; } /* ── Motion is opt-out, and there is very little of it to begin with. ───── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } @media print { body { background: #fff; } .masthead nav, .hero-plate, .plates, .consent { display: none; } }