/* ============================================================= Context Grammar — Explorations Visual System Shared CSS for all _explorations/ illustration pages. Dual-mode: light (default) ↔ dark via [data-theme="dark"] on Color: monochrome + 1 green (#30c969) ============================================================= */ /* ─── FONT STACK (mirror tokens.css) ─── */ /* Geist loaded via CDN in each page head */ /* ─── THEME TOKENS ─── */ :root { --e-bg: #ffffff; --e-bg-2: #fafafa; --e-bg-card: #f4f4f5; --e-ink: #0a0a0a; --e-ink-2: #525252; --e-ink-3: #a1a1aa; --e-line: #d4d4d8; --e-line-2: #e4e4e7; --e-green: #30c969; --e-green-2: rgba(48, 201, 105, 0.15); --e-ease: cubic-bezier(0.16, 1, 0.3, 1); --e-ease-std: cubic-bezier(0.215, 0.61, 0.355, 1); --e-switcher-bg: #f4f4f5; --e-switcher-active: #ffffff; --e-switcher-border: #d4d4d8; --e-switcher-text: #525252; --e-switcher-text-a: #0a0a0a; } [data-theme="dark"] { --e-bg: #0a0a0a; --e-bg-2: #111111; --e-bg-card: #1a1a1a; --e-ink: #ededed; --e-ink-2: #a1a1aa; --e-ink-3: #52525b; --e-line: #3f3f46; --e-line-2: #27272a; --e-green: #30c969; --e-green-2: rgba(48, 201, 105, 0.12); --e-switcher-bg: #1a1a1a; --e-switcher-active: #2a2a2a; --e-switcher-border: #3f3f46; --e-switcher-text: #52525b; --e-switcher-text-a: #ededed; } /* ─── RESET + BASE ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--e-bg); color: var(--e-ink); font-family: 'Geist', 'Geist Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background 0.3s var(--e-ease), color 0.3s var(--e-ease); } a { color: inherit; text-decoration: none; } /* ─── PAGE LAYOUT ─── */ .expl-page { padding: 64px 48px 140px; } .expl-header { max-width: 1280px; margin: 0 auto 56px; } .expl-header__fig { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--e-ink-3); margin-bottom: 12px; display: flex; align-items: center; gap: 16px; } .expl-header__fig::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--e-green); border-radius: 50%; } .expl-header__title { font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; letter-spacing: -1px; line-height: 1.15; margin-bottom: 10px; } .expl-header__sub { font-size: 15px; color: var(--e-ink-2); line-height: 1.65; max-width: 600px; } /* ─── 2×2 GRID ─── */ .expl-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--e-line-2); border: 1px solid var(--e-line-2); } .expl-cell { background: var(--e-bg); padding: 56px 48px 40px; display: flex; flex-direction: column; min-height: 480px; transition: background 0.3s var(--e-ease); } .expl-cell__tag { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 2.5px; color: var(--e-ink-3); text-transform: uppercase; } .expl-cell__canvas { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; min-height: 320px; } .expl-cell__meta { margin-top: auto; padding-top: 24px; } /* ─── FOOTER NOTE ─── */ .expl-footer { max-width: 1280px; margin: 48px auto 0; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 1.5px; color: var(--e-ink-3); text-transform: uppercase; line-height: 2.2; display: flex; gap: 32px; flex-wrap: wrap; } /* ─── NAV BAR (breadcrumb) ─── */ .expl-nav { max-width: 1280px; margin: 0 auto 40px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--e-ink-3); display: flex; align-items: center; gap: 12px; } .expl-nav a { color: var(--e-ink-3); transition: color 0.2s; } .expl-nav a:hover { color: var(--e-ink); } .expl-nav__sep { opacity: 0.4; } /* ─── SVG UTILITY CLASSES ─── */ /* Use these on SVG elements — CSS vars inherited from DOM */ .s { stroke: var(--e-ink); fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; } .s-soft { stroke: var(--e-line); fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; } .s-hair { stroke: var(--e-ink-3); fill: none; stroke-width: 0.5; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; } .s-green { stroke: var(--e-green); fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; } .s-green2 { stroke: var(--e-green); fill: none; stroke-width: 0.8; vector-effect: non-scaling-stroke; opacity: 0.5; } .f { fill: var(--e-ink); stroke: none; } .f-bg { fill: var(--e-bg); stroke: none; } .f-card { fill: var(--e-bg-card); stroke: none; } .f-green { fill: var(--e-green); stroke: none; } .f-green2 { fill: var(--e-green-2); stroke: none; } .lbl { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 1.5px; fill: var(--e-ink-3); text-transform: uppercase; } .lbl-dark { fill: var(--e-ink); } .lbl-green { fill: var(--e-green); } /* ─── SVG ANIMATION BASE ─── */ svg { display: block; overflow: visible; } /* ─── THEME SWITCHER — icon pill, fixed bottom-left ─── */ .theme-switcher { position: fixed; bottom: 28px; left: 28px; z-index: 100; display: flex; align-items: center; background: var(--e-switcher-bg); border: 1px solid var(--e-switcher-border); border-radius: 100px; padding: 4px; gap: 2px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } [data-theme="dark"] .theme-switcher { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3); } .theme-switcher__btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--e-switcher-text); background: transparent; border: none; cursor: pointer; border-radius: 100px; transition: background 0.2s var(--e-ease), color 0.2s var(--e-ease); } .theme-switcher__btn svg { display: block; flex-shrink: 0; } .theme-switcher__btn.is-active { background: var(--e-switcher-active); color: var(--e-switcher-text-a); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* ─── REDUCED MOTION ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ─── RESPONSIVE ─── */ @media (max-width: 900px) { .expl-grid { grid-template-columns: 1fr; } .expl-page { padding: 32px 20px 120px; } .expl-cell { min-height: 480px; } .expl-footer { flex-direction: column; gap: 4px; } }