/* ============================================================ AI BUILD LAB — Field Manual, dark: the BLUEPRINT theme The dark side of the marketing-site design toggle (data-design="terminal"). Same Field Manual structure as the light theme — 2px borders, hard offset shadows, 4px radius, mono stamps, one lime highlighter — drawn as a night blueprint: Prussian blue-black canvas, cyan drafting grid, chalk ink. Chosen from mockups-dark-fm/variant-b-blueprint.css (Hunter, 2026-08-20). The other candidates (variant-a-night-manual, variant-c-terminal) stay in mockups-dark-fm/ for revisiting. Load order: this file goes LAST in , after /css/field-manual-site.css and any page-local field-manual patch block, so its equal-specificity overrides win under "terminal". ============================================================ */ /* -------- Token flip: Blueprint materials -------- */ html[data-design="terminal"] { --black: #0B1526; /* canvas: Prussian night */ --dark: #142136; /* card surface */ --dark-2: #182741; --dark-3: rgba(233,241,248,0.18); --dark-4: #2A3B58; --gray-dark: rgba(233,241,248,0.32); --white: #E9F1F8; /* ink -> chalk */ --gray: #C0CDDC; --gray-dim: #8B9AB0; --neon-tint: #23310A; /* opaque tints -> night equivalents */ --blue-tint: #0C2E3E; --coral-tint: #3A1D26; --teal-tint: #10312E; --fmd-surface: #142136; /* literal-override tokens */ --fmd-panel: #101B2E; /* full-bleed section band */ --fmd-shadow: #050B14; /* hard offset shadows: ink-black */ } /* -------- Canvas: cyan drafting grid on Prussian night -------- */ html[data-design="terminal"] body::after { background-image: linear-gradient(rgba(0,212,255,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.10) 1px, transparent 1px); } html[data-design="terminal"] body::before { opacity: 0.04; } /* -------- Nav + mobile overlay -------- */ html[data-design="terminal"] nav { background: #0B1526 !important; } html[data-design="terminal"] .mobile-menu-overlay { background: #0B1526; } html[data-design="terminal"] nav .aibl-design-toggle, html[data-design="terminal"] .nav-design-slot .aibl-design-toggle { background: var(--fmd-surface); border-color: var(--white); box-shadow: 2px 2px 0 var(--fmd-shadow); } html[data-design="terminal"] nav .aibl-dt-ic { color: var(--white); } /* -------- White fills -> blueprint surface -------- (borders and shadows declared with var(--white) follow the chalk ink automatically; only literal fills need re-pointing) */ html[data-design="terminal"] .btn-ghost, html[data-design="terminal"] .pipe-step:nth-child(1) .pipe-icon, html[data-design="terminal"] .pipe-step:nth-child(2) .pipe-icon, html[data-design="terminal"] .pipe-step:nth-child(3) .pipe-icon, html[data-design="terminal"] .pipe-step:nth-child(4) .pipe-icon, html[data-design="terminal"] .pipe-step:nth-child(5) .pipe-icon, html[data-design="terminal"] .pipe-step:nth-child(6) .pipe-icon, html[data-design="terminal"] .pillar, html[data-design="terminal"] .bp-card, html[data-design="terminal"] .kungfu-card, html[data-design="terminal"] .agent-card, html[data-design="terminal"] .agent-btn, html[data-design="terminal"] .ts-right, html[data-design="terminal"] .founder, html[data-design="terminal"] .proof-cell, html[data-design="terminal"] .testimonial, html[data-design="terminal"] .tool-chip, html[data-design="terminal"] .gateway-step:nth-child(1) .gateway-step-icon, html[data-design="terminal"] .gateway-step:nth-child(2) .gateway-step-icon, html[data-design="terminal"] .gateway-step:nth-child(3) .gateway-step-icon, html[data-design="terminal"] .gateway-step:nth-child(4) .gateway-step-icon, html[data-design="terminal"] .gateway-rev-card, html[data-design="terminal"] .pricing-card, html[data-design="terminal"] .pricing-cta, html[data-design="terminal"] .new-card, html[data-design="terminal"] .card, html[data-design="terminal"] .get-item, html[data-design="terminal"] .meta-pill, html[data-design="terminal"] .rating-box, html[data-design="terminal"] .schedule-card, html[data-design="terminal"] .ladder-step, html[data-design="terminal"] .time-row, html[data-design="terminal"] .doc-section, html[data-design="terminal"] .section-pill, html[data-design="terminal"] .search-input, html[data-design="terminal"] .hero p code, html[data-design="terminal"] .legal-body code, html[data-design="terminal"] .track-card, html[data-design="terminal"] .philosophy-strip, html[data-design="terminal"] .what-card, html[data-design="terminal"] .founder-socials a, html[data-design="terminal"] .filter-btn, html[data-design="terminal"] .event-card, html[data-design="terminal"] .cal-btn, html[data-design="terminal"] .btn-outline, html[data-design="terminal"] .door-card, html[data-design="terminal"] .roadmap-card, html[data-design="terminal"] .proof-card, html[data-design="terminal"] .not-item, html[data-design="terminal"] .prereq-box, html[data-design="terminal"] .form-wrapper, html[data-design="terminal"] .form-input, html[data-design="terminal"] .form-textarea { background: var(--fmd-surface); } html[data-design="terminal"] .blueprints-section, html[data-design="terminal"] .agents-section, html[data-design="terminal"] .culture-section, html[data-design="terminal"] .gateway-section, html[data-design="terminal"] .lightning-banner, html[data-design="terminal"] .culture-strip { background: var(--fmd-panel); } html[data-design="terminal"] .price-banner, html[data-design="terminal"] .credit-card { background: var(--neon-tint); } html[data-design="terminal"] .price-banner.blue-banner { background: var(--blue-tint); } html[data-design="terminal"] .billing-note { background: var(--blue-tint); } html[data-design="terminal"] .form-input, html[data-design="terminal"] .form-textarea { color: var(--white); } /* -------- Hard offset shadows: chalk -> ink-black -------- */ html[data-design="terminal"] .pillar, html[data-design="terminal"] .kungfu-card, html[data-design="terminal"] .agent-card, html[data-design="terminal"] .ts-right, html[data-design="terminal"] .founder, html[data-design="terminal"] .proof-grid, html[data-design="terminal"] .pricing-card, html[data-design="terminal"] .new-card, html[data-design="terminal"] .card, html[data-design="terminal"] .schedule-card, html[data-design="terminal"] .doc-section, html[data-design="terminal"] .track-card, html[data-design="terminal"] .philosophy-strips, html[data-design="terminal"] .what-grid, html[data-design="terminal"] .event-card, html[data-design="terminal"] .door-card, html[data-design="terminal"] .roadmap-card, html[data-design="terminal"] .proof-card, html[data-design="terminal"] .get-item, html[data-design="terminal"] .not-item, html[data-design="terminal"] .prereq-box, html[data-design="terminal"] .form-wrapper { box-shadow: 6px 6px 0 var(--fmd-shadow); } html[data-design="terminal"] .pillar:hover, html[data-design="terminal"] .kungfu-card:hover, html[data-design="terminal"] .agent-card:hover, html[data-design="terminal"] .founder:hover, html[data-design="terminal"] .pricing-card:hover, html[data-design="terminal"] .new-card:hover, html[data-design="terminal"] .card:hover, html[data-design="terminal"] .track-card:hover, html[data-design="terminal"] .event-card:hover, html[data-design="terminal"] .door-card:hover, html[data-design="terminal"] .roadmap-card:hover { box-shadow: 9px 9px 0 var(--fmd-shadow); } html[data-design="terminal"] .bp-card, html[data-design="terminal"] .testimonial, html[data-design="terminal"] .gateway-rev-card, html[data-design="terminal"] .pricing-cta, html[data-design="terminal"] .rating-box, html[data-design="terminal"] .btn-outline { box-shadow: 3px 3px 0 var(--fmd-shadow); } html[data-design="terminal"] .bp-card:hover, html[data-design="terminal"] .testimonial:hover, html[data-design="terminal"] .gateway-rev-card:hover, html[data-design="terminal"] .pricing-cta:hover { box-shadow: 5px 5px 0 var(--fmd-shadow); } html[data-design="terminal"] .btn-neon, html[data-design="terminal"] .nav-cta, html[data-design="terminal"] .hero-btn, html[data-design="terminal"] .form-submit { box-shadow: 3px 3px 0 var(--fmd-shadow); border-color: #111111; } html[data-design="terminal"] .btn-neon:hover, html[data-design="terminal"] .nav-cta:hover, html[data-design="terminal"] .hero-btn:hover, html[data-design="terminal"] .form-submit:hover { box-shadow: 5px 5px 0 var(--fmd-shadow); } html[data-design="terminal"] .btn-ghost:hover { box-shadow: 3px 3px 0 var(--fmd-shadow); } html[data-design="terminal"] .filter-btn.active { box-shadow: 2px 2px 0 var(--fmd-shadow); } /* -------- Hovers: lime tint washes -> blueprint-appropriate -------- */ html[data-design="terminal"] .philosophy-strip:hover, html[data-design="terminal"] .what-card:hover, html[data-design="terminal"] .proof-cell:hover, html[data-design="terminal"] .culture-strip:hover, html[data-design="terminal"] .bp-card:hover, html[data-design="terminal"] .filter-btn:hover, html[data-design="terminal"] .section-pill:hover, html[data-design="terminal"] .section-toggle:hover { background: var(--blue-tint); } /* -------- On-accent text stays true ink (summer-camp's page block declares these with var(--white), which was ink in light mode but resolves to chalk here — chalk on lime fails) -------- */ html[data-design="terminal"] .h-purple, html[data-design="terminal"] .btn-neon, html[data-design="terminal"] .form-submit { color: #111111; } /* -------- Drafting details -------- */ html[data-design="terminal"] .hero-overline::before { background: var(--blue); } html[data-design="terminal"] .time-header .dot-upcoming { background: var(--blue); } html[data-design="terminal"] .what-number { color: rgba(233,241,248,0.15); } html[data-design="terminal"] .kungfu-num { color: rgba(233,241,248,0.10); } html[data-design="terminal"] .section-divider hr { border-top-color: rgba(233,241,248,0.35); } html[data-design="terminal"] hr.section-divider { border-top-color: rgba(233,241,248,0.35); } html[data-design="terminal"] .status-recorded { background: rgba(233,241,248,0.08); } html[data-design="terminal"] .status-past { background: rgba(233,241,248,0.05); } html[data-design="terminal"] .founder-photo { background: var(--fmd-panel); } html[data-design="terminal"] .founder-tag { background: var(--fmd-panel); } html[data-design="terminal"] .track-detail { background: var(--fmd-panel); } html[data-design="terminal"] .legal-body th { background: var(--fmd-panel); }