/* fcc-vision — site-specific Field Bulletin layer. * * Per-site accent: retinal emerald — the green of fundus photography * and the OCT scan. Distinct from cipher's phosphor mint by being deeper * and more saturated. */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #10b981 !important; --accent-2: #34d399 !important; --accent-wash: color-mix(in srgb, #10b981 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #047857 !important; --accent-2: #059669 !important; --accent-wash: color-mix(in srgb, #047857 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero — Eye cross-section ───────────────────────────────── */ .hero-card { padding: 1.75rem 1.5rem 1.5rem; } .hero-lab { display: grid; gap: 1.25rem; grid-template-columns: minmax(260px, 1fr) minmax(220px, 1fr); align-items: start; } @media (max-width: 720px) { .hero-lab { grid-template-columns: 1fr; } } .hero-canvas { width: 100%; height: 380px; display: block; background: var(--bg); border-top: 1px solid var(--border); } .hero-controls { display: flex; flex-direction: column; gap: 0.85rem; padding-top: 0.25rem; } .hero-readouts { display: grid; gap: 0.55rem; grid-template-columns: 1fr 1fr; } .readout { padding: 0.6rem 0.85rem; background: var(--panel-2); border-top: 1px solid var(--border); } .readout-label { display: block; font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.35rem; } .readout-value { display: block; font: 500 0.95rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.01em; } /* ── Tab intro (shared in playground) ───────────────────────── */ .tab-intro { margin: 0 0 0.85rem; font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--ink-2, var(--dim)); line-height: 1.6; max-width: 640px; } .lab-canvas { width: 100%; height: 300px; display: block; background: var(--bg); border-top: 1px solid var(--border); } .lab-readouts { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 0.85rem; } .lab-readouts .readout-row { padding: 0.6rem 0.85rem; background: var(--panel-2); border-top: 1px solid var(--border); } .lab-readouts .readout-row-label { display: block; font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.35rem; } .lab-readouts .readout-row-value { display: block; font: 500 0.95rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1; } /* ── Color Vision Simulator ─────────────────────────────────── */ .color-layout { display: flex; flex-direction: column; gap: 0.85rem; } /* ── Blind Spot Demo ────────────────────────────────────────── */ .blindspot-layout { display: flex; flex-direction: column; gap: 0.85rem; } .bs-stage { position: relative; width: 100%; height: 240px; background: var(--bg); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 2rem; overflow: hidden; } .bs-plus { font: 700 2rem var(--mono); color: var(--ink-3, var(--dim)); margin-right: auto; } .bs-dot { width: 18px; height: 18px; background: var(--accent); border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); } .blindspot-hint { margin: 0; font-family: var(--serif); font-style: italic; font-size: 0.85rem; color: var(--ink-3, var(--dim)); line-height: 1.55; } /* ── Visual Acuity ──────────────────────────────────────────── */ .acuity-layout { display: flex; flex-direction: column; gap: 0.85rem; } .acuity-controls { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .acuity-visual-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .acu-letter { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; padding: 2rem 1rem; background: var(--bg); border-top: 1px solid var(--border); font-family: var(--serif); font-weight: 700; font-size: 8rem; line-height: 1; color: var(--text); } @media (max-width: 720px) { .hero-canvas { height: 280px; } .lab-canvas { height: 220px; } } @media (max-width: 480px) { .hero-canvas { height: 220px; } .acu-letter { font-size: 5rem; min-height: 140px; padding: 1rem; } }