/* ─── Escape Hatch — ui.css ───────────────────────────────────────────────── Header, search bar, legend, footer. ──────────────────────────────────────────────────────────────────────────── */ /* ─── Disclaimer gate ────────────────────────────────────────────────────── */ .disclaimer-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(10, 12, 16, 0.97); display: flex; align-items: center; justify-content: center; padding: 1.5rem; /* Freeze everything underneath */ pointer-events: auto; } /* Returning visitors: hidden before first paint via .disclaimer-done */ html.disclaimer-done .disclaimer-overlay { display: none; } .disclaimer-overlay.dismissed { opacity: 0; pointer-events: none; transition: opacity 350ms var(--ease-out); } .disclaimer-card { width: 100%; max-width: 480px; background: var(--color-surface); border: 1px solid var(--color-border-strong); padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1rem; } .disclaimer-wordmark { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.02em; } .disclaimer-intro { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-accent); font-style: italic; line-height: var(--leading-normal); } .disclaimer-divider { height: 1px; background: var(--color-border); } .disclaimer-fine { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .disclaimer-btn { margin-top: 0.75rem; width: 100%; padding: 1rem 1.25rem; background: #e8c44e; border: none; border-radius: 6px; color: #1a1400; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-normal); text-align: center; cursor: pointer; box-shadow: 0 0 18px rgba(232, 196, 78, 0.35), 0 2px 8px rgba(0,0,0,0.4); transition: background 150ms, box-shadow 150ms, transform 150ms; transform-origin: center; } .disclaimer-btn:hover { background: #f0d060; box-shadow: 0 0 28px rgba(240, 208, 96, 0.5), 0 4px 12px rgba(0,0,0,0.4); transform: scale(1.02); } /* Inflate then pop on click */ .disclaimer-btn.popping { animation: disclaimer-pop 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; pointer-events: none; } @keyframes disclaimer-pop { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.09); opacity: 1; } 60% { transform: scale(1.14); opacity: 1; } 78% { transform: scale(1.17); opacity: 0.9; } 88% { transform: scale(1.2); opacity: 0.5; } 100% { transform: scale(0.05); opacity: 0; } } /* ─── Header ─────────────────────────────────────────────────────────────── */ .site-header { position: fixed; top: 1.5rem; left: 1.75rem; z-index: var(--header-z); pointer-events: none; /* let globe events pass through */ } .wordmark { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.02em; line-height: 1; text-shadow: 0 1px 12px rgba(0,0,0,0.8), 0 2px 24px rgba(0,0,0,0.6); } .site-tagline { margin-top: 0.3rem; font-family: var(--font-body); font-size: var(--text-xs); font-style: italic; color: var(--color-text-secondary); letter-spacing: 0.02em; text-shadow: 0 1px 8px rgba(0,0,0,0.8); } /* ─── Search ─────────────────────────────────────────────────────────────── */ .search-container { position: fixed; top: 1.5rem; right: 1.75rem; z-index: var(--search-z); width: 220px; } .search-input { width: 100%; height: 36px; padding: 0 0.875rem; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-sm); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .search-input::placeholder { color: var(--color-text-muted); } .search-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(197, 168, 74, 0.12); } /* ─── Search results dropdown ────────────────────────────────────────────── */ .search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .search-results[hidden] { display: none; } .search-result-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.875rem; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-primary); cursor: pointer; transition: background var(--dur-fast); } .search-result-item:hover, .search-result-item[aria-selected="true"] { background: rgba(197, 168, 74, 0.08); color: var(--color-text-accent); } .search-result-flag { font-size: 1rem; line-height: 1; } .search-result-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-score { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); } /* ─── Legend ─────────────────────────────────────────────────────────────── */ .legend { position: fixed; bottom: 2.5rem; left: 1.75rem; z-index: var(--legend-z); padding: 0.875rem 1rem; background: rgba(18, 21, 28, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--color-border); border-radius: 4px; } .legend-title { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 0.6rem; } .legend-swatches { display: flex; gap: 3px; margin-bottom: 0.4rem; } .legend-swatch { width: 20px; height: 12px; border-radius: 2px; cursor: default; } .legend-swatch[data-heat="1"] { background: var(--heat-1); } .legend-swatch[data-heat="2"] { background: var(--heat-2); } .legend-swatch[data-heat="3"] { background: var(--heat-3); } .legend-swatch[data-heat="4"] { background: var(--heat-4); } .legend-swatch[data-heat="5"] { background: var(--heat-5); } .legend-labels { display: flex; justify-content: space-between; font-family: var(--font-body); font-size: 10px; color: var(--color-text-muted); letter-spacing: 0.02em; } /* ─── Footer disclaimer ──────────────────────────────────────────────────── */ .site-footer { position: fixed; bottom: 0.75rem; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: var(--legend-z); font-family: var(--font-body); font-size: 10px; color: var(--color-text-muted); letter-spacing: 0.02em; pointer-events: none; } /* ─── About button ───────────────────────────────────────────────────────── */ .about-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.5rem; width: 18px; height: 18px; background: transparent; border: 1px solid var(--color-border-strong); border-radius: 50%; color: var(--color-text-muted); font-family: var(--font-body); font-size: 10px; font-weight: 500; cursor: pointer; pointer-events: auto; /* override parent pointer-events: none */ transition: border-color var(--dur-fast), color var(--dur-fast); } .about-btn:hover { border-color: var(--color-accent); color: var(--color-accent); } /* ─── About modal ────────────────────────────────────────────────────────── */ .about-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; } .about-modal[hidden] { display: none; } .about-overlay { position: absolute; inset: 0; background: rgba(10, 12, 16, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .about-content { position: relative; width: min(480px, calc(100vw - 3rem)); background: var(--color-surface); border: 1px solid var(--color-border-strong); padding: 2rem; z-index: 1; } .about-close { position: absolute; top: 1rem; right: 1rem; width: 26px; height: 26px; background: transparent; border: 1px solid var(--color-border); border-radius: 2px; color: var(--color-text-secondary); font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast), color var(--dur-fast); } .about-close:hover { border-color: var(--color-accent); color: var(--color-accent); } .about-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text-primary); margin-bottom: 1.25rem; padding-right: 2rem; } .about-body { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: 0.875rem; } .about-body:last-of-type { margin-bottom: 1.25rem; } .about-disclaimer { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-top: 1rem; border-top: 1px solid var(--color-border); } /* ─── Toast ──────────────────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 2.5rem; left: 50%; transform: translateX(-50%); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); padding: 0.45rem 0.875rem; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-secondary); letter-spacing: 0.02em; white-space: nowrap; z-index: 350; pointer-events: none; opacity: 0; transition: opacity 200ms; } .toast[hidden] { display: none; } .toast.visible { opacity: 1; } /* ─── Entrance animations ────────────────────────────────────────────────── */ .site-header, .search-container, .legend, .site-footer { opacity: 0; transition: opacity 500ms var(--ease-out); } body.loaded .site-header { opacity: 1; transition-delay: 100ms; } body.loaded .search-container { opacity: 1; transition-delay: 200ms; } body.loaded .legend { opacity: 1; transition-delay: 300ms; } body.loaded .site-footer { opacity: 1; transition-delay: 400ms; } /* ─── Legend toggle (mobile only — hidden on desktop) ────────────────────── */ .legend-toggle { display: none; }