/* fcc-compass — site-specific Field Bulletin layer. * * Sits on top of /shared/fcc-museum.css. Owns the survey-chart blue * accent and compass-specific module styles (hero canvas surround, * controls row, declination map, playground readouts and canvases). */ /* ── Per-site accent: survey-chart blue ─────────────────────────── * * !important required because /shared/fcc-theme-boot.js writes * --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #5a9fd4 !important; --accent-2: #7fb5dc !important; --accent-wash: color-mix(in srgb, #5a9fd4 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #346d99 !important; --accent-2: #4a85b3 !important; --accent-wash: color-mix(in srgb, #346d99 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero compass ─────────────────────────────────────────────── */ .compass-canvas { width: 100%; aspect-ratio: 1 / 1; max-width: 480px; margin: 1rem auto 0; display: block; background: transparent; cursor: grab; } .compass-canvas:active { cursor: grabbing; } .compass-controls { display: grid; gap: 1rem; grid-template-columns: minmax(180px, 240px) 1fr; align-items: start; margin-bottom: 0.5rem; } @media (max-width: 720px) { .compass-controls { grid-template-columns: 1fr; } } .compass-readout { display: flex; flex-direction: column; padding: 0.85rem 1rem; background: var(--panel-2); border: 0; border-top: 1px solid var(--border); } .readout-bearing { font: 500 2.4rem/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -0.02em; color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; } .readout-cardinal { font: 500 0.8rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-top: 0.45rem; } .readout-point { font: 400 0.88rem var(--serif); color: var(--ink-2, var(--text)); font-style: italic; margin-top: 0.25rem; } .compass-options { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.65rem 0; } .compass-option { display: inline-flex; gap: 0.5rem; align-items: center; font: 500 0.82rem var(--sans); color: var(--ink-2, var(--text)); cursor: pointer; } .compass-option input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; } .declination-slider { display: flex; align-items: center; gap: 0.5rem; font: 500 0.82rem var(--sans); } .declination-slider input[type="range"] { flex: 1; max-width: 200px; } .declination-slider label { font-size: 0.75rem; color: var(--ink-3, var(--dim)); } .dec-value { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; } .compass-action-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } .compass-action-row .btn-sm.active { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); } /* ── Declination map ──────────────────────────────────────────── */ .dec-map-canvas { width: 100%; height: 340px; display: block; background: #0a1116; border: 0; border-top: 1px solid var(--border); } .dec-map-controls { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin: 0 0 0.85rem; } .dec-map-controls label { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .dec-map-controls input[type="range"] { flex: 1; min-width: 220px; max-width: 320px; } .dec-year-value { font: 500 0.95rem 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); font-feature-settings: "tnum" 1; } .dec-map-controls .btn-sm.active { border-color: var(--accent); color: var(--accent); } .dec-map-readout { margin-top: 0.75rem; padding: 0.65rem 0.85rem; background: var(--panel-2); border: 0; border-top: 1px solid var(--border); font: 500 0.85rem var(--mono); color: var(--ink-2, var(--dim)); min-height: 1.5em; font-feature-settings: "tnum" 1, "zero" 1; } .dec-map-caption { margin-top: 0.45rem; font: 400 0.78rem var(--serif); font-style: italic; color: var(--ink-3, var(--dim)); line-height: 1.55; } /* ── Playground ───────────────────────────────────────────────── */ .bearing-inputs, .truemag-inputs, .navsim-start { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 0.85rem; } .bearing-presets { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .bearing-presets .presets-label { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-right: 0.2rem; } .readout-strip { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0.5rem 0 1rem; } .readout-block { display: flex; flex-direction: column; padding: 0.7rem 0.9rem; background: var(--panel-2); border: 0; border-top: 1px solid var(--border); } .readout-label { font: 500 0.65rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.45rem; } .readout-value { font: 500 1.1rem 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum" 1, "zero" 1; color: var(--text); cursor: pointer; letter-spacing: -0.01em; } .readout-value:hover { color: var(--accent); } .readout-value:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .readout-sub { font: 400 0.78rem var(--sans); color: var(--ink-3, var(--dim)); margin-top: 0.3rem; font-feature-settings: "tnum" 1; } .bearing-preview-canvas { width: 100%; height: 220px; display: block; background: #0a1116; border: 0; border-top: 1px solid var(--border); margin-top: 0.6rem; } .mnemonic-box { margin: 1rem 0; padding: 0.9rem 1rem; background: var(--bg); border: 0; border-left: 1px solid var(--signal); font-family: var(--serif); font-style: italic; color: var(--ink-2, var(--dim)); line-height: 1.6; } .mnemonic-box .mnemonic-eyebrow { display: block; font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; color: var(--signal); margin-bottom: 0.45rem; } .truemag-canvas { width: 100%; height: 280px; display: block; background: var(--bg); border: 0; border-top: 1px solid var(--border); margin-top: 0.85rem; } .navsim-legs { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .navsim-leg { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: end; padding: 0.5rem 0.6rem; background: var(--panel-2); border: 0; border-top: 1px solid var(--border); } .leg-remove { background: transparent; border: 1px solid var(--border); color: var(--ink-3, var(--dim)); font-size: 1rem; line-height: 1; width: 28px; height: 28px; border-radius: var(--r-2); cursor: pointer; } .leg-remove:hover { color: var(--text); border-color: var(--accent); } .navsim-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.85rem; } .navsim-drift { display: flex; gap: 0.6rem; align-items: center; margin: 0 0 0.85rem; padding: 0.6rem 0.8rem; background: var(--panel-2); border: 0; border-top: 1px solid var(--border); } .navsim-drift label { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .navsim-drift input[type="range"] { flex: 1; max-width: 280px; } .navsim-drift .control-value { min-width: 3rem; } .navsim-canvas { width: 100%; height: 320px; display: block; background: #0a1116; border: 0; border-top: 1px solid var(--border); margin-top: 0.6rem; } @media (max-width: 480px) { .compass-canvas { max-width: 320px; } .dec-map-canvas { height: 240px; } .navsim-canvas, .bearing-preview-canvas { height: 200px; } .truemag-canvas { height: 240px; } }