/* ============================================================ enhancements.css Additive on top of theme.css - reuses your existing tokens (--brand, --brand-dark, --brand-pale, --surface-2, --card-bg, --card-border, --ink, --ink-2, --muted, --muted-light, --radius, --radius-sm, --font-display, --transition-fast). Nothing here redefines those variables. ============================================================ */ /* ---------- Scroll-reveal (IntersectionObserver driven, see site.js) ---------- */ .reveal-up { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal-up.is-visible { opacity: 1; transform: translateY(0); } .reveal-fade { opacity: 0; transition: opacity .7s ease; transition-delay: var(--reveal-delay, 0ms); } .reveal-fade.is-visible { opacity: 1; } .reveal-scale { opacity: 0; transform: scale(.96); transition: opacity .5s ease, transform .5s cubic-bezier(.16,.84,.44,1); transition-delay: var(--reveal-delay, 0ms); } .reveal-scale.is-visible { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: reduce) { .reveal-up, .reveal-fade, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- Logo: instant light/dark swap, driven by [data-bs-theme] on ---------- */ .site-logo { width: auto; display: block; } .site-logo-dark { display: none; } [data-bs-theme="dark"] .site-logo-light { display: none; } [data-bs-theme="dark"] .site-logo-dark { display: block; } /* ---------- Dataset card polish ---------- */ .dataset-card { transition: transform var(--transition-fast, .2s ease), box-shadow var(--transition-fast, .2s ease), border-color var(--transition-fast, .2s ease); } .dataset-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(22,163,74,.10); border-color: rgba(22,163,74,.28); } .card-title-link { text-decoration: none; color: inherit; } .card-title-link:hover > div { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; } .footer-link { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; transition: color var(--transition-fast, .2s ease); } .footer-link:hover { color: var(--brand); } /* ---------- Breadcrumbs (detail page) ---------- */ .bk-breadcrumb { font-size: .82rem; color: var(--muted-light); margin-bottom: 1.5rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .bk-breadcrumb a { color: var(--muted); text-decoration: none; } .bk-breadcrumb a:hover { color: var(--brand); } .bk-breadcrumb .sep { opacity: .5; } .bk-breadcrumb .current { color: var(--ink); font-weight: 600; } /* ---------- Detail page hero ---------- */ .ds-hero { padding: 2.5rem 0 1.5rem; } .ds-hero .ds-icon-badge { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--brand-pale); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; } .ds-stat-tile { background: var(--surface-2); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 1rem; text-align: center; transition: transform var(--transition-fast, .2s ease); } .ds-stat-tile:hover { transform: translateY(-2px); } .ds-stat-tile .val { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--brand); line-height: 1; } .ds-stat-tile .lbl { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin-top: .35rem; } .ds-preview-table { font-size: .78rem; } .ds-preview-table th { color: var(--muted); text-transform: uppercase; font-size: .64rem; letter-spacing: .06em; white-space: nowrap; } .ds-preview-table td { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .ds-preview-wrap { position: relative; } .ds-preview-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; pointer-events: none; background: linear-gradient(to left, var(--card-bg), transparent); } .ds-cta-sticky { position: sticky; top: 84px; } /* Number count-up target (see site.js) */ .count-up { font-variant-numeric: tabular-nums; } /* Related datasets section spacing */ .related-heading { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } /* Copy-link button micro feedback */ .copy-btn.copied i::before { content: "\f26a"; } /* bi-check2 fallback swap handled in JS via class instead */ .copy-btn.copied { color: var(--brand) !important; border-color: var(--brand) !important; }