/* fcc-paths — Field Bulletin curated-journey layer. * * Per-site accent: curriculum indigo — the same #818cf8 used as the * Information-Travels path color, the natural "guided journey" hue * threading museum exhibits. Distinct from cipher phosphor-green * (#7dd3a4) and numbering ribbon-indigo (#818cf8 itself, deliberately * shared — the paths hub IS the index of journeys). */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #818cf8 !important; --accent-2: #a5b4fc !important; --accent-wash: color-mix(in srgb, #818cf8 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #4338ca !important; --accent-2: #6366f1 !important; --accent-wash: color-mix(in srgb, #4338ca 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Masthead — Intro stat strip (matches /museum/) ────────── */ .masthead-stats { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.85rem; font-family: var(--mono); font-size: 0.78rem; font-feature-settings: "tnum" 1, "zero" 1; color: var(--ink-2, var(--dim)); letter-spacing: 0.04em; } .masthead-stat-num { color: var(--accent); font-weight: 500; letter-spacing: 0; margin-right: 0.25rem; } .masthead-stat-sep { color: var(--rule-strong, var(--border)); } .intro-loading { margin: 1rem 0 0; font: 500 0.78rem var(--mono); letter-spacing: 0.06em; color: var(--ink-3, var(--dim)); text-transform: uppercase; } /* ── Paths section header (whisker pattern) ────────────────── */ .paths-section { padding: 0 0 2rem; } .paths-section-header { margin-bottom: 1.5rem; padding-left: 12px; border-left: 56px solid transparent; background: linear-gradient(var(--signal, var(--accent)), var(--signal, var(--accent))) left top / 56px 4px no-repeat; padding-top: 0.65rem; } .paths-section-header .eyebrow { margin-bottom: 0.5rem; } .paths-section-header .section-heading { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.75rem); letter-spacing: -0.01em; color: var(--text); margin: 0 0 0.4rem; line-height: 1.15; } .paths-section-header .section-desc { font-family: var(--serif); font-style: italic; font-size: 0.94rem; color: var(--ink-2, var(--dim)); line-height: 1.55; max-width: 60ch; margin: 0; } /* ── HUB VIEW — Path cards (Field Bulletin plates) ─────────── */ .paths-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0; } .path-card { display: block; background: var(--panel-2, var(--panel)); border: 0; border-top: 3px solid var(--path-color, var(--accent)); border-radius: 0; padding: 1.1rem 1.2rem 1.2rem; cursor: pointer; transition: border-top-color var(--dur-1) var(--ease-in-out), transform var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-in-out); } .path-card:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--path-color, var(--accent)) 4%, var(--panel-2, var(--panel))); } .path-card:focus-visible { outline: 2px solid var(--path-color, var(--accent)); outline-offset: -2px; } .path-card-header { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 0.75rem; } .path-card-badge { flex-shrink: 0; } .path-card-info { flex: 1; min-width: 0; } .path-card-title { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; color: var(--text); margin: 0 0 0.25rem; line-height: 1.2; } .path-card-tagline { font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--ink-2, var(--dim)); line-height: 1.5; } .path-card-stats { font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.04em; color: var(--path-color, var(--accent)); font-feature-settings: "tnum" 1; margin: 0 0 0.6rem; } .progress-bar { height: 3px; background: var(--rule-2, var(--border)); border-radius: 0; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--path-color, var(--accent)); border-radius: 0; transition: width 0.4s var(--ease-out); } .paths-footer { text-align: center; padding: 1.5rem 0 2.5rem; font: 500 0.78rem var(--mono); letter-spacing: 0.06em; color: var(--ink-3, var(--dim)); } .paths-footer a { color: var(--accent); } .paths-footer a:hover { color: var(--accent-2, var(--accent)); text-decoration: underline; text-underline-offset: 3px; } /* ── DETAIL VIEW — Header + journey timeline ───────────────── */ .detail-nav { padding: 1.5rem 0 0.85rem; font: 500 0.78rem var(--mono); letter-spacing: 0.04em; } .detail-nav a { color: var(--ink-3, var(--dim)); transition: color var(--dur-1) var(--ease-in-out); } .detail-nav a:hover { color: var(--accent); } .detail-header { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: flex-start; padding: 1rem 0 2rem; padding-left: 12px; border-left: 56px solid transparent; background: linear-gradient(var(--path-color, var(--signal, var(--accent))), var(--path-color, var(--signal, var(--accent)))) left top / 56px 4px no-repeat; margin-bottom: 1.5rem; } .detail-header-info { min-width: 0; } .detail-header-info .eyebrow { color: var(--path-color, var(--accent)); margin-bottom: 0.45rem; } .detail-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 3.4vw, 2.4rem); letter-spacing: -0.015em; color: var(--text); line-height: 1.1; margin: 0 0 0.7rem; } .detail-desc { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-2, var(--dim)); line-height: 1.6; max-width: 62ch; margin: 0 0 0.85rem; } .detail-progress-text { font: 500 0.78rem var(--mono); letter-spacing: 0.04em; color: var(--path-color, var(--accent)); font-feature-settings: "tnum" 1; margin: 0; } .detail-header-ring { flex-shrink: 0; } .progress-ring-bg { fill: none; stroke: var(--rule-2, var(--border)); stroke-width: 6; } .progress-ring-fill { fill: none; stroke: var(--path-color, var(--accent)); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ease-out); } .progress-ring-text { font-family: var(--mono); font-size: 14px; fill: var(--text); font-weight: 600; font-feature-settings: "tnum" 1; } /* ── Journey section header ────────────────────────────────── */ .journey-section { padding-bottom: 1.5rem; } .journey-header { margin: 0 0 1.25rem; padding-left: 12px; } .journey-header .eyebrow { margin-bottom: 0.5rem; } .journey-header .section-heading { font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 2.1vw, 1.5rem); letter-spacing: -0.01em; color: var(--text); margin: 0; line-height: 1.15; } /* ── Journey timeline ──────────────────────────────────────── */ .journey { padding: 0; } .step { display: flex; gap: 1rem; padding: 0.85rem 0; position: relative; } .step-line { position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--rule-2, var(--border)); } .step:first-child .step-line { top: 50%; } .step:last-child .step-line { bottom: 50%; } .step-marker { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 2px solid var(--rule-2, var(--border)); border-radius: 50%; z-index: 1; font-size: 0.9rem; position: relative; font-family: var(--mono); font-feature-settings: "tnum" 1; } .step--completed .step-marker { border-color: #7dd3a4; color: #7dd3a4; background: var(--bg); } .step--visited .step-marker { border-color: var(--path-color, var(--accent)); color: var(--path-color, var(--accent)); } .step--current .step-marker { border-color: var(--path-color, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--path-color, var(--accent)) 25%, transparent); } .step--future .step-marker { border-color: var(--line, var(--border)); color: var(--ink-3, var(--dim)); opacity: 0.55; } .step-icon { font-size: 0.85rem; line-height: 1; } .step-body { flex: 1; min-width: 0; padding-top: 0.25rem; } .step-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .step-number { font: 500 0.66rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); background: transparent; padding: 0; border-radius: 0; font-feature-settings: "tnum" 1; } .step-number::before { content: "Stop "; } .step-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--text); transition: color var(--dur-1) var(--ease-in-out); } a.step-title:hover { color: var(--path-color, var(--accent)); } .step-title.dim { color: var(--ink-3, var(--dim)); font-weight: 400; font-style: italic; } .step-current-tag { font: 500 0.68rem var(--mono); letter-spacing: 0.06em; color: var(--path-color, var(--accent)); background: color-mix(in srgb, var(--path-color, var(--accent)) 12%, transparent); padding: 0.2rem 0.5rem; border-radius: 0; border-top: 1px solid var(--path-color, var(--accent)); text-transform: uppercase; } .step-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.55rem; } .btn-visit { font: 500 0.74rem/1 var(--mono); letter-spacing: 0.04em; color: var(--ink-3, var(--dim)); padding: 0.45rem 0.85rem; border: 1px solid var(--border); border-radius: var(--r-1, 0); background: transparent; transition: color var(--dur-1) var(--ease-in-out), border-color var(--dur-1) var(--ease-in-out); } .btn-visit:hover { color: var(--path-color, var(--accent)); border-color: var(--path-color, var(--accent)); } .btn-quiz { font: 500 0.74rem/1 var(--mono); letter-spacing: 0.04em; color: var(--accent-ink, #0a0b0d); background: var(--path-color, var(--accent)); border: 0; padding: 0.5rem 0.95rem; border-radius: var(--r-1, 0); cursor: pointer; transition: opacity var(--dur-1) var(--ease-in-out); } .btn-quiz:hover { opacity: 0.85; } .btn-link { background: none; border: none; color: var(--accent); font: 500 0.74rem var(--mono); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0.04em; } .btn-link:hover { color: var(--text); } .step-quiz-info { font: 500 0.74rem var(--mono); letter-spacing: 0.04em; color: var(--ink-3, var(--dim)); font-feature-settings: "tnum" 1; } .step-quiz-info.dim { color: var(--ink-3, var(--dim)); opacity: 0.7; } .quiz-score { color: #7dd3a4; font-weight: 600; } .step-connective { padding: 0.6rem 0 0.3rem 3rem; font-family: var(--serif); font-size: 0.92rem; color: var(--ink-2, var(--dim)); font-style: italic; line-height: 1.6; max-width: 60ch; } /* ── Badge section ─────────────────────────────────────────── */ .detail-badge { text-align: center; padding: 2rem 1rem 2.5rem; border-top: 1px solid var(--border); margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; } .detail-badge .eyebrow { margin-bottom: 0; } .detail-badge-heading { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--text); margin: 0 0 0.5rem; letter-spacing: -0.01em; } .badge { display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem; } .badge-svg { display: block; } .badge-ring { fill: none; stroke: var(--badge-color, var(--accent)); stroke-width: 2; } .badge-fill { fill: var(--panel-2, var(--panel)); } .badge-icon { color: var(--badge-color, var(--accent)); } .badge-label { font: 500 0.7rem var(--mono); letter-spacing: 0.06em; color: var(--ink-2, var(--dim)); text-align: center; text-transform: uppercase; } .badge--locked { opacity: 0.4; filter: grayscale(1); } .badge--locked .badge-ring { stroke-dasharray: 4 4; } .badge--earned { opacity: 1; filter: none; } .badge--earned .badge-ring { filter: drop-shadow(0 0 8px var(--badge-color)); } .badge--earned .badge-label { color: var(--text); font-weight: 600; } .confetti { position: relative; height: 36px; pointer-events: none; } .confetti::before, .confetti::after { content: "★"; position: absolute; top: -12px; font-size: 1.2rem; color: var(--badge-color, var(--accent)); animation: confetti-bounce 1.2s var(--ease-out); } .confetti::before { left: calc(50% - 36px); } .confetti::after { right: calc(50% - 36px); animation-delay: 0.15s; } @keyframes confetti-bounce { 0% { opacity: 0; transform: translateY(16px) scale(0.5); } 40% { opacity: 1; transform: translateY(-10px) scale(1.1); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ── Quiz modal (Field Bulletin plate, square corners) ─────── */ body.quiz-open { overflow: hidden; } .quiz-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(6, 7, 9, 0.82); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 1rem; } .quiz-panel { background: var(--panel-2, var(--panel)); border: 0; border-top: 3px solid var(--accent); border-radius: 0; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; } .quiz-header { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.25rem 0.85rem; border-bottom: 1px solid var(--border); } .quiz-title { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; color: var(--text); flex: 1; margin: 0; letter-spacing: -0.01em; } .quiz-counter { font: 500 0.74rem var(--mono); letter-spacing: 0.06em; color: var(--ink-3, var(--dim)); font-feature-settings: "tnum" 1; } .quiz-close { background: none; border: none; color: var(--ink-3, var(--dim)); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; transition: color var(--dur-1) var(--ease-in-out); } .quiz-close:hover { color: var(--text); } .quiz-body { padding: 1.25rem; } .quiz-question { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; color: var(--text); margin: 0 0 1.25rem; line-height: 1.55; letter-spacing: -0.005em; } .quiz-options { display: flex; flex-direction: column; gap: 0; } .quiz-option { display: block; width: 100%; text-align: left; background: var(--bg); border: 0; border-top: 1px solid var(--border); color: var(--text); padding: 0.95rem 1.1rem; border-radius: 0; font-family: var(--sans); font-size: 0.94rem; cursor: pointer; transition: border-top-color var(--dur-1) var(--ease-in-out), background var(--dur-1) var(--ease-in-out); line-height: 1.45; } .quiz-options .quiz-option:last-child { border-bottom: 1px solid var(--border); } .quiz-option:hover:not(:disabled) { border-top-color: var(--accent); background: var(--panel-2, var(--panel)); } .quiz-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .quiz-option--correct { border-top-color: #7dd3a4 !important; background: color-mix(in srgb, #7dd3a4 10%, var(--panel-2, var(--panel))) !important; } .quiz-option--wrong { border-top-color: #fb7185 !important; background: color-mix(in srgb, #fb7185 10%, var(--panel-2, var(--panel))) !important; } .quiz-feedback { margin-top: 1rem; } .quiz-fb-correct { font: 500 0.78rem var(--mono); letter-spacing: 0.06em; color: #7dd3a4; text-transform: uppercase; margin: 0 0 0.4rem; } .quiz-fb-wrong { font: 500 0.78rem var(--mono); letter-spacing: 0.06em; color: #fb7185; text-transform: uppercase; margin: 0 0 0.4rem; } .quiz-fb-explain { font-family: var(--serif); font-style: italic; font-size: 0.92rem; color: var(--ink-2, var(--dim)); line-height: 1.6; margin: 0; } .quiz-footer { padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; } .quiz-next, .quiz-done { background: var(--accent); color: var(--accent-ink, #0a0b0d); border: 0; padding: 0.55rem 1.2rem; border-radius: var(--r-1, 0); font: 500 0.8rem var(--mono); letter-spacing: 0.04em; cursor: pointer; transition: opacity var(--dur-1) var(--ease-in-out); } .quiz-next:hover, .quiz-done:hover { opacity: 0.85; } .results-body { text-align: center; padding: 2rem 1rem; } .results-score { font: 500 2.6rem/1 var(--mono); color: var(--accent); margin: 0 0 0.85rem; font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.02em; } .results-message { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-2, var(--dim)); line-height: 1.55; margin: 0; max-width: 40ch; margin-inline: auto; } .hidden { display: none !important; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 720px) { .paths-grid { grid-template-columns: 1fr; } .paths-section-header, .detail-header { border-left-width: 40px; background-size: 40px 4px; } .detail-header { grid-template-columns: 1fr; gap: 1rem; } .detail-header-ring { justify-self: center; } .step-connective { padding-left: 2.5rem; } .masthead-stats { font-size: 0.72rem; gap: 0.3rem 0.55rem; } } /* ── Reduced motion ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .path-card, .progress-bar-fill, .progress-ring-fill { transition: none; } .path-card:hover { transform: none; } .confetti::before, .confetti::after { animation: none; } }