/* ============================================================ Globe Viewer — terrain + chrome follow light/dark theme. Loaded on top of colors_and_type.css. Theme set via data-theme on (system default, with header toggle). ============================================================ */ * { box-sizing: border-box; } /* ---- Teal accent (this page doesn't load landing.css) ------ */ :root[data-accent="teal"] { --accent: var(--teal-400); --accent-hover: var(--teal-500); --accent-press: var(--teal-600); --accent-subtle: var(--teal-100); --border-focus: var(--teal-500); } :root[data-theme="dark"][data-accent="teal"] { --accent: var(--teal-300); --accent-hover: var(--teal-200); --accent-press: var(--teal-400); --accent-subtle: rgba(73,170,177,0.18); --border-focus: var(--teal-300); } /* ---- Theme-scoped globe variables -------------------------- */ :root[data-theme="dark"] { --g-page-bg: var(--ink-950); --g-vignette: #0E0F12; --g-ocean-0: #2A2D34; --g-ocean-1: #1B1D22; --g-ocean-2: #141519; --g-limb-stop: rgba(0, 0, 0, 0.55); --g-grat: #ffffff; --g-grat-op: 0.05; --g-land: #34373F; --g-land-stroke: #44474F; --g-hl: #4A4E57; --g-name: var(--ink-100); --g-nav: var(--ink-300); --g-hint: var(--ink-500); --g-tt-bg: rgba(31, 32, 36, 0.92); --g-tt-border: var(--ink-700); --g-tt-shadow: rgba(0,0,0,.6); --g-region: var(--ink-100); --g-region-shadow: rgba(0,0,0,.6); --g-dot: var(--teal-300); --g-dot-hi: var(--teal-200); --g-dot-stroke: var(--ink-950); } :root[data-theme="light"] { --g-page-bg: var(--creme-100); --g-vignette: #DACFB5; --g-ocean-0: #F6F1E4; --g-ocean-1: #EBE2CF; --g-ocean-2: #DCD1B7; --g-limb-stop: rgba(107, 94, 66, 0.18); --g-grat: #1F2A3F; --g-grat-op: 0.10; --g-land: #99A0AC; --g-land-stroke: #868D9A; --g-hl: #7E8593; --g-name: var(--ink-900); --g-nav: var(--ink-600); --g-hint: var(--ink-500); --g-tt-bg: rgba(250, 246, 236, 0.94); --g-tt-border: var(--creme-300); --g-tt-shadow: rgba(31,42,63,.18); --g-region: var(--ink-800); --g-region-shadow: rgba(245,239,225,.7); --g-dot: var(--teal-500); --g-dot-hi: var(--teal-400); --g-dot-stroke: var(--creme-50); } html, body { margin: 0; height: 100%; background: var(--g-page-bg); color: var(--fg); overflow: hidden; } .globe-page { position: fixed; inset: 0; display: flex; flex-direction: column; background: radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--g-vignette) 100%), var(--g-page-bg); } /* --- Header ------------------------------------------------- */ .globe-header { display: flex; align-items: center; gap: 24px; padding: 20px 40px; z-index: 5; } .globe-mark { display: flex; align-items: center; gap: 11px; text-decoration: none; border: none; } .globe-mark__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent); } .globe-mark__name { font-family: var(--font-display); font-size: 20px; color: var(--g-name); letter-spacing: -0.01em; } .globe-nav { margin-left: auto; display: flex; gap: 26px; align-items: center; } .globe-nav a { font-family: var(--font-body); font-size: 14px; color: var(--g-nav); border: none; cursor: pointer; transition: color 140ms ease; text-decoration: none; } .globe-nav a:hover { color: var(--accent); } .globe-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; cursor: pointer; background: transparent; color: var(--g-nav); border: 1px solid var(--border); transition: color 140ms ease, border-color 140ms ease, background 140ms ease; } .globe-theme-toggle:hover { color: var(--g-name); border-color: var(--border-strong); } /* --- Stage -------------------------------------------------- */ .globe-main { position: relative; flex: 1; min-height: 0; } #globe-stage { position: absolute; inset: 0; cursor: grab; } #globe-stage:active { cursor: grabbing; } .globe-svg { display: block; } .globe-ocean { fill: url(#ocean); } .globe-limb { fill: url(#limb); pointer-events: none; } .globe-graticule { fill: none; stroke: var(--g-grat); stroke-opacity: var(--g-grat-op); stroke-width: 0.5; pointer-events: none; } .globe-landmass { fill: var(--g-land); stroke: var(--g-land-stroke); stroke-width: 0.4; } .globe-country-hl { fill: var(--g-hl); stroke: var(--accent); stroke-opacity: 0.5; stroke-width: 0.6; pointer-events: none; } /* --- Dots --------------------------------------------------- */ .globe-dot { cursor: pointer; } .globe-dot__glow { opacity: 0; transition: opacity 200ms ease; } .globe-dot__ring { fill: none; stroke: var(--g-dot); stroke-width: 1.2; opacity: 0.5; transition: opacity 200ms ease, r 200ms ease; } .globe-dot__core { fill: var(--g-dot); stroke: var(--g-dot-stroke); stroke-width: 1; transition: r 160ms ease; } .globe-dot:hover .globe-dot__core, .globe-dot.is-active .globe-dot__core { r: 4.2; fill: var(--g-dot-hi); } .globe-dot:hover .globe-dot__ring, .globe-dot.is-active .globe-dot__ring { opacity: 1; } .globe-dot:hover .globe-dot__glow, .globe-dot.is-active .globe-dot__glow { opacity: 1; } /* --- Region label (big faint serif, like the reference) ----- */ .region-label { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.4vw, 56px); letter-spacing: 0.14em; color: var(--g-region); opacity: 0; transition: opacity 320ms ease; pointer-events: none; text-align: center; white-space: nowrap; text-shadow: 0 2px 24px var(--g-region-shadow); } .region-label.is-visible { opacity: 0.92; } /* --- Tooltip / preview card -------------------------------- */ .globe-tooltip { position: absolute; top: 0; left: 0; width: 248px; pointer-events: none; background: var(--g-tt-bg); border: 1px solid var(--g-tt-border); border-radius: 10px; box-shadow: 0 18px 48px var(--g-tt-shadow); backdrop-filter: blur(10px); overflow: hidden; opacity: 0; transition: opacity 160ms ease; z-index: 6; } .globe-tooltip.is-visible { opacity: 1; } .gt-thumb { width: 100%; aspect-ratio: 16 / 10; background: var(--bg-sunken) center/cover no-repeat; border-bottom: 1px solid var(--g-tt-border); } .gt-body { padding: 12px 14px 14px; } .gt-meta { display: flex; gap: 6px; align-items: center; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 6px; } .gt-dot { opacity: 0.5; } .gt-title { font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: var(--fg); letter-spacing: -0.01em; text-wrap: balance; } .gt-place { font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); margin-top: 4px; } .gt-cta { font-family: var(--font-body); font-size: 12px; color: var(--accent); margin-top: 10px; letter-spacing: 0.02em; } /* --- Footer hint ------------------------------------------- */ .globe-hint { position: absolute; left: 40px; bottom: 28px; font-family: var(--font-mono); font-size: 11px; color: var(--g-hint); letter-spacing: 0.04em; pointer-events: none; display: flex; flex-direction: column; gap: 4px; } .globe-count { position: absolute; right: 40px; bottom: 28px; font-family: var(--font-mono); font-size: 11px; color: var(--g-hint); letter-spacing: 0.04em; } .globe-error { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--font-body); color: var(--fg-muted); } @media (max-width: 700px) { .globe-header { padding: 16px 20px; } .globe-hint, .globe-count { left: 20px; right: auto; bottom: 18px; } .globe-count { display: none; } }