/* ============================================================================ Wireframe mode — load AFTER styles.min.css. Activated by .wf-mode on . Default state. Strips colour, type, decoration; preserves structure & copy. ============================================================================ */ /* ---- Toggle button (icon-only segmented switch, visible in both modes) ---- */ .mode-toggle { position: fixed; top: 16px; left: 16px; z-index: 999; display: inline-flex; align-items: center; gap: 0; padding: 6px 8px; background: #fffaf0; border: 1.5px solid #263027; border-radius: 999px; cursor: pointer; font: inherit; color: #1d221b; box-shadow: 3px 3px 0 rgba(38, 48, 39, 0.18); transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; } .mode-toggle:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(38, 48, 39, 0.22); } .mode-toggle:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(38, 48, 39, 0.18); } .mode-toggle-opt { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 999px; color: rgba(38, 48, 39, 0.38); transition: color 160ms ease, background 160ms ease; } .mode-toggle-opt svg { width: 18px; height: 18px; display: block; } .mode-toggle-opt.is-active { color: #d15c2f; background: rgba(209, 92, 47, 0.10); } .mode-toggle-divider { width: 1px; height: 16px; background: rgba(38, 48, 39, 0.20); margin: 0 4px; } /* Wireframe-mode toggle styling: flatter, monochrome, no hover bounce */ .wf-mode .mode-toggle { background: #ffffff; color: #111; border-color: #222; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.14); transition: none; } .wf-mode .mode-toggle:hover, .wf-mode .mode-toggle:active { transform: none; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.14); } .wf-mode .mode-toggle-opt { color: #999; transition: none; } .wf-mode .mode-toggle-opt.is-active { color: #111; background: #ececec; } .wf-mode .mode-toggle-divider { background: #cfcfcf; } /* ============================================================================ Active wireframe overrides — only when html.wf-mode ============================================================================ */ .wf-mode { /* re-paint the design tokens to a flat, paper-grid palette */ --bg: #ffffff; --paper: #ffffff; --panel: #fafafa; --ink: #111111; --muted: #6f6f6f; --line: #cfcfcf; --line-strong: #222222; --accent: #444444; --accent-2: #444444; --accent-3: #444444; --warn: #444444; --gold: #444444; --tile: #ececec; --shadow: rgba(0, 0, 0, 0.06); --font-serif: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --shadow-phone: 0 0 0 1px var(--line); } /* Body: pure paper grid, sans serif everywhere */ .wf-mode body { background-color: #ffffff !important; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(180deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) !important; background-size: 32px 32px, 32px 32px !important; background-position: 0 0, 0 0 !important; font-family: var(--font-serif) !important; } .wf-mode body, .wf-mode h1, .wf-mode h2, .wf-mode h3, .wf-mode h4, .wf-mode h5, .wf-mode h6, .wf-mode p, .wf-mode a, .wf-mode em, .wf-mode strong, .wf-mode blockquote, .wf-mode figcaption, .wf-mode .hero h1, .wf-mode .doc h2, .wf-mode .doc h3, .wf-mode .doc p, .wf-mode .toc, .wf-mode .callout, .wf-mode .byline { font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important; font-feature-settings: normal !important; } .wf-mode em { font-style: italic; } .wf-mode .hero h1 em { font-style: italic; font-weight: 600; } /* Nuke shadows, glow, gradient fills everywhere */ .wf-mode *, .wf-mode *::before, .wf-mode *::after { box-shadow: none !important; text-shadow: none !important; filter: none !important; } /* ---- Hard animation kill ---------------------------------------------------- Wireframes should read as static drafts. Disable CSS animation, transition, transform-based hovers, and scroll-driven behaviour. JS-driven animation that mutates style directly is rare on this page; this catches the rest. */ .wf-mode *, .wf-mode *::before, .wf-mode *::after { animation: none !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; will-change: auto !important; } .wf-mode *:hover, .wf-mode *:focus, .wf-mode *:focus-visible { transform: none !important; } /* Keep the toggle button itself responsive even in wf-mode (override above) */ .wf-mode .mode-toggle, .wf-mode .mode-toggle * { transition: none !important; } /* Strip background gradients but keep solids */ .wf-mode .hero, .wf-mode .callout, .wf-mode .card, .wf-mode .panel, .wf-mode .doc, .wf-mode .section, .wf-mode .toc, .wf-mode .bento-tile, .wf-mode .role-chip, .wf-mode .finding-row, .wf-mode .cfg-summary-row, .wf-mode [class*="-card"], .wf-mode [class*="-tile"] { background-image: none !important; } /* Soften corners — wireframes use small radii */ .wf-mode .toc, .wf-mode .callout, .wf-mode .card, .wf-mode .panel, .wf-mode [class*="-card"], .wf-mode [class*="-tile"], .wf-mode .bento-tile, .wf-mode .role-chip, .wf-mode .finding-row, .wf-mode .cfg-summary-row, .wf-mode .stake-badge, .wf-mode .scout-bubble { border-radius: 4px !important; } /* Phones — keep the shape but flatten */ .wf-mode .phone, .wf-mode .screen-card .phone { background: #ffffff !important; border: 1.5px solid #222 !important; border-radius: 28px !important; box-shadow: none !important; } /* Highlight text — still mark important phrases, but paper-yellow */ .wf-mode mark, .wf-mode .hl, .wf-mode mark.hl { background: #fff4a8 !important; color: inherit !important; padding: 0 2px; border-radius: 2px; } /* Borders — collapse to a single neutral grey */ .wf-mode .callout, .wf-mode .card, .wf-mode [class*="-card"], .wf-mode [class*="-tile"], .wf-mode .toc, .wf-mode .bento-tile, .wf-mode .role-chip, .wf-mode .finding-row, .wf-mode .cfg-summary-row, .wf-mode .scout-bubble, .wf-mode .stake-badge { border-color: #cfcfcf !important; } /* Links — underline rather than colour */ .wf-mode a { color: #111 !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .wf-mode .toc a { text-decoration: none; } .wf-mode .toc a:hover { text-decoration: underline; } /* Persona avatars + screenshot images — desaturate, dashed frame */ .wf-mode img:not(.no-wf) { filter: grayscale(1) contrast(0.92) !important; opacity: 0.62; outline: 1px dashed #999; outline-offset: 2px; border-radius: 0 !important; } .wf-mode .persona-avatars figure img, .wf-mode .persona-avatars img { border-radius: 4px !important; } /* SVG icons — make sure they read as line art (but not the toggle button) */ .wf-mode svg:not(.mode-toggle svg) [stroke] { stroke: currentColor !important; } .wf-mode svg:not(.mode-toggle svg) [fill]:not([fill="none"]) { fill: currentColor !important; } /* Hide noise: scroll progress bar + sparkly demo overlays */ .wf-mode .scroll-progress { display: none !important; } .wf-mode .demo-finger, .wf-mode .demo-ripple, .wf-mode .demo-narration, .wf-mode .demo-replay { display: none !important; } .wf-mode .phone.demo-active > * { filter: none !important; opacity: 1 !important; } /* Reveal-on-scroll classes used by app.js — show immediately, no fade */ .wf-mode .reveal, .wf-mode .is-in, .wf-mode .reveal-up, .wf-mode .reveal-fade, .wf-mode [class*="reveal-"] { opacity: 1 !important; transform: none !important; } /* TOC: stamp into a flat sidebar */ .wf-mode .toc { background: #ffffff !important; border: 1px solid #cfcfcf !important; } /* Hero: flat banner, no fancy treatments */ .wf-mode .hero { background: transparent !important; border-bottom: 1px solid #cfcfcf; padding-bottom: 32px; } .wf-mode .hero .eyebrow, .wf-mode .hero .byline { color: #6f6f6f !important; } /* Section banners + dividers */ .wf-mode .divider, .wf-mode hr { border: none !important; border-top: 1px dashed #cfcfcf !important; background: none !important; } /* Hide the polished-mode footer flourishes */ .wf-mode .page-footer { background: transparent !important; color: #6f6f6f !important; border-top: 1px dashed #cfcfcf; } /* Reduce fancy patterned backgrounds on bento + diagram tiles */ .wf-mode .bento-tile, .wf-mode [class*="cfg-"], .wf-mode [class*="clf-"], .wf-mode [class*="diag-"], .wf-mode [class*="win-"] { background: #ffffff !important; background-image: none !important; } /* Buttons inside content */ .wf-mode button:not(.mode-toggle):not(.mode-toggle *) { background: #ffffff !important; border: 1px solid #222 !important; color: #111 !important; border-radius: 4px !important; }