/* * components.css — SolarRubias 2026 * ───────────────────────────────────────────────────────────── * Visual styling for all UI components. * References tokens from theme.css. Respects structure from layout.css. * ───────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════ THEME TOGGLE — .sr-theme-pill (renamed from .theme-toggle so app.js owns its hidden .theme-toggle button without touching our visible pill) ══════════════════════════════════════════════════════════════ */ .sr-theme-pill { box-shadow: var(--shadow-card); } .sr-pill__btn { color: var(--text-secondary); } .sr-pill__btn:hover { color: var(--text-primary); } /* Active button: driven purely by [data-theme] on . app.js sets this attribute — our CSS picks it up automatically. */ [data-theme="dark"] .sr-pill__btn--dark, [data-theme="light"] .sr-pill__btn--light { background: var(--accent-dim); color: var(--accent); } /* Icon SVGs inherit currentColor */ .sr-pill__btn svg { display: block; flex-shrink: 0; } /* Moon disk in the eclipse icon always matches the page background */ .eclipse-moon-disk { fill: var(--bg-base); transition: fill var(--dur-base); } /* ══════════════════════════════════════════════════════════════ HERO TITLE — SolarRubias wordmark ══════════════════════════════════════════════════════════════ */ .hero__location { color: var(--accent); } .hero__title { color: var(--text-primary); } /* The ◉ eclipse separator between Solar and Rubias */ .hero__title-sep { color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); } /* Year line */ .hero__title-year { color: var(--text-secondary); } .hero__subtitle { color: var(--text-secondary); } /* ══════════════════════════════════════════════════════════════ COUNTDOWN ══════════════════════════════════════════════════════════════ */ .countdown__digit { color: var(--accent); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-card); display: block; } .countdown__digit.ticking { animation: digit-tick 0.2s var(--ease-out); } [data-countdown-state="totality"] .countdown__digit { background: var(--bg-surface); color: var(--accent); border-color: var(--accent); animation: corona-pulse 2s ease-in-out infinite; } [data-countdown-state="post"] .countdown__digit { color: var(--text-secondary); border-color: var(--border-subtle); } .countdown__sep { color: var(--accent-dim); } .countdown__label { color: var(--text-tertiary); } .countdown__context { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-3); min-height: 1.4em; transition: color var(--dur-base); } [data-countdown-state="totality"] .countdown__context { color: var(--accent); font-weight: 600; letter-spacing: 0.08em; } /* ── Phase bar ── */ .phase-bar__segment--partial { background: var(--phase-partial); opacity: 0.6; } .phase-bar__segment--totality { background: var(--accent); flex-shrink: 0; width: 4px; min-width: 4px; } .phase-bar__segment--elapsed { background: var(--accent); opacity: 0.5; } .phase-bar__segment--remaining { background: var(--phase-progress); } .phase-bar__labels { color: var(--text-tertiary); } .phase-indicator { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent); display: inline-block; margin-right: var(--space-2); animation: corona-pulse 2s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════════ CARD BASE ══════════════════════════════════════════════════════════════ */ .card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: var(--transition-theme); } .card--accent { border-color: var(--accent); background: var(--bg-surface); } .card--danger { background: var(--status-danger-bg); border-color: var(--status-danger-border); } .card--warning { background: var(--status-warn-bg); border-color: var(--status-warn-border); } .card--info { background: var(--status-info-bg); border-color: var(--status-info-border); } .card--ok { background: var(--status-ok-bg); border-color: var(--status-ok-border); } /* ══════════════════════════════════════════════════════════════ CONTACT TIMES ══════════════════════════════════════════════════════════════ */ .contact-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .contact-card--c2, .contact-card--c3 { border-color: var(--accent-dim); } .contact-card__phase { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-2); } .contact-card__phase--totality { color: var(--accent); } .contact-card__time { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; display: block; } .contact-card__sub { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); } .contact-card--duration { background: var(--bg-surface); border-color: var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), 0 0 0 1px var(--accent-glow); } .contact-card__duration-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); } .contact-card__duration-value { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--accent); letter-spacing: -0.01em; display: block; } .confidence-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-full); } .confidence-badge--estimated { background: var(--status-warn-bg); color: var(--status-warn-text); border: 1px solid var(--status-warn-border); } .confidence-badge--confirmed { background: var(--status-ok-bg); color: var(--status-ok-text); border: 1px solid var(--status-ok-border); } .horizon-note { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 3px solid var(--status-warn-text); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); margin-top: var(--space-4); } .horizon-note__icon { flex-shrink: 0; font-size: var(--text-md); color: var(--status-warn-text); } /* ══════════════════════════════════════════════════════════════ WEATHER ══════════════════════════════════════════════════════════════ */ .weather-metric { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .weather-metric__icon { font-size: 1.4rem; margin-bottom: var(--space-2); color: var(--text-secondary); } .weather-metric__value { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); display: block; margin-bottom: var(--space-1); } .weather-metric__label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); } [data-cloud-level="clear"] .weather-metric__value { color: var(--status-ok-text); } [data-cloud-level="partial"] .weather-metric__value { color: var(--status-warn-text); } [data-cloud-level="overcast"] .weather-metric__value { color: var(--status-danger-text); } .weather-history { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card); } .weather-history__title { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-3); } .history-bar { background: var(--border-default); transition: background var(--dur-base), height var(--dur-slow) var(--ease-out); } .history-bar--current { background: var(--accent); opacity: 0.75; } .history-bar:hover { opacity: 0.9; } .history-axis { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-tertiary); } .history-avg { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-3); text-align: center; } .forecast-notice { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-tertiary); text-align: right; margin-top: var(--space-2); } .forecast-notice a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-dim); } /* ══════════════════════════════════════════════════════════════ MAP ══════════════════════════════════════════════════════════════ */ .map-container { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); } .leaflet-popup-content-wrapper { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-card) !important; font-family: var(--font-ui) !important; } .leaflet-popup-tip { background: var(--bg-elevated) !important; } .leaflet-popup-close-button { color: var(--text-secondary) !important; } .map-btn { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--text-secondary); cursor: pointer; transition: all var(--dur-fast); backdrop-filter: blur(8px); } .map-btn:hover { border-color: var(--accent); color: var(--accent); } .map-btn[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } .leaflet-control-attribution { background: var(--bg-overlay) !important; color: var(--text-tertiary) !important; font-size: 10px !important; } /* ══════════════════════════════════════════════════════════════ SKY VIEW ══════════════════════════════════════════════════════════════ */ .skyview-frame { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .skyview__placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--text-tertiary); font-family: var(--font-ui); font-size: var(--text-sm); } .skyview__badge { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-full); letter-spacing: 0.06em; } .skyview__badge--snapshot { background: var(--status-info-bg); color: var(--status-info-text); border: 1px solid var(--status-info-border); } .skyview__badge--live { background: var(--status-danger-bg); color: var(--status-danger-text); border: 1px solid var(--status-danger-border); } .skyview__refresh { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-tertiary); } .skyview__credit { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-tertiary); } .skyview__credit a { color: var(--accent); } #live-slot { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-default); } #live-slot iframe { width: 100%; height: 100%; border: 0; } /* ══════════════════════════════════════════════════════════════ ACCORDION ══════════════════════════════════════════════════════════════ */ .accordion__trigger { color: var(--text-primary); transition: color var(--dur-fast); } .accordion__trigger:hover { color: var(--accent); } .accordion__trigger-text { flex: 1; font-family: var(--font-body); font-size: var(--text-base); } .accordion__icon { color: var(--text-tertiary); } .accordion__body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-loose); color: var(--text-secondary); } .accordion__body p + p { margin-top: var(--space-3); } /* ══════════════════════════════════════════════════════════════ SAFETY BANNER Subtle: neutral surface, thin left border in danger colour ══════════════════════════════════════════════════════════════ */ .safety-banner { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 3px solid var(--status-danger-text); } .safety-banner__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .safety-banner__icon { font-size: var(--text-xl); color: var(--status-danger-text); } .safety-banner__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); line-height: var(--leading-snug); } .safety-banner__body { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-loose); } .filter-protocol { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); } .filter-protocol__row { display: flex; justify-content: space-between; padding: var(--space-1) 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); } .filter-protocol__row:last-child { border-bottom: none; } .filter-protocol__row--active { color: var(--accent); } /* ══════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════ */ .footer { border-top: 1px solid var(--border-subtle); } .footer__text { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-loose); } .footer__text a { color: var(--accent); } .footer__coords { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: 0.04em; } /* ══════════════════════════════════════════════════════════════ SKELETON LOADERS ══════════════════════════════════════════════════════════════ */ .skeleton { background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border-subtle) 50%, var(--bg-elevated) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); display: inline-block; } .skeleton--text { height: 1em; width: 80%; margin-bottom: var(--space-2); } .skeleton--number { height: 2em; width: 3ch; } /* ══════════════════════════════════════════════════════════════ TOAST ══════════════════════════════════════════════════════════════ */ .toast { background: var(--bg-elevated); border: 1px solid var(--border-default); box-shadow: var(--shadow-card); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--text-sm); } .toast__close { background: none; border: none; cursor: pointer; color: var(--text-tertiary); padding: 2px; font-size: var(--text-md); transition: color var(--dur-fast); } .toast__close:hover { color: var(--text-primary); } /* ══════════════════════════════════════════════════════════════ MISC ══════════════════════════════════════════════════════════════ */ [data-loaded="true"] { animation: fade-in 0.4s var(--ease-out) both; } .source-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-tertiary); padding: 1px var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); } /* ══════════════════════════════════════════════════════════════ LECTURE SLIDER ══════════════════════════════════════════════════════════════ */ .lecture-slider { position: relative; overflow: hidden; } .lecture-slider__track { display: flex; transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .lecture-slider__slide { flex: 0 0 100%; width: 100%; min-width: 0; } /* Controls row */ .lecture-slider__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); } /* Arrows */ .lecture-slider__arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary); font-size: var(--text-md); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast); flex-shrink: 0; } .lecture-slider__arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); transform: scale(1.08); } .lecture-slider__arrow:disabled { opacity: 0.25; cursor: not-allowed; } /* Dots */ .lecture-slider__dots { display: flex; align-items: center; gap: var(--space-2); } .lecture-slider__dot { width: 8px; height: 8px; border-radius: var(--radius-full); border: none; background: var(--border-default); cursor: pointer; padding: 0; transition: background var(--dur-base), transform var(--dur-base); } .lecture-slider__dot--active { background: var(--accent); transform: scale(1.35); } /* ══════════════════════════════════════════════════════════════ OBSERVATION SPOTS SECTION (§2.5) ══════════════════════════════════════════════════════════════ */ .spots-maps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); } @media (max-width: 520px) { .spots-maps { grid-template-columns: 1fr; } } .spots-map-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .spots-map-card img { width: 100%; height: 180px; object-fit: cover; object-position: center; display: block; } .spots-map-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .spots-map-card__title { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .spots-map-card__desc { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-normal); flex: 1; } .spots-map-card__link { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--accent); text-decoration: none; margin-top: var(--space-1); } .spots-map-card__link:hover { text-decoration: underline; } /* Document link card */ .spots-doc-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: var(--space-5); text-decoration: none; color: var(--text-primary); transition: border-color var(--dur-fast); } .spots-doc-link:hover { border-color: var(--accent); } .spots-doc-link__icon { font-size: 1.5rem; flex-shrink: 0; } .spots-doc-link__title { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .spots-doc-link__sub { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); } /* ══════════════════════════════════════════════════════════════ HERO CORONA LAYOUT Both bugs (corona on top, toggle blocked) had the same cause: the JS-injected SVG uses position:absolute;inset:0 but its parent had no position:relative, so it escaped to the viewport. ══════════════════════════════════════════════════════════════ */ /* Establish stacking context so corona stays inside hero */ .section--hero { position: relative; } /* Corona clip: fills hero section, clips overflow, passes through clicks */ .hero__corona-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* Corona container: centered, scrolls with parallax JS */ .hero__corona { position: absolute; left: 50%; top: 0; width: 520px; height: 520px; pointer-events: none; /* JS parallax sets: transform: translateX(-50%) translateY(scrollY * 0.45) */ } /* Hero content floats above corona */ .hero__content { position: relative; z-index: 1; }