/* atlas.css — shared styles for Icesus map pages (/maps/) */ /* Google Fonts (Uncial Antiqua, Cormorant Garamond, Fira Sans) are loaded in * each page's via +preconnect to avoid the @import chain that * blocks render until atlas.css finishes parsing. */ :root { --ice-deep: #060b14; --ice-dark: #0b1221; --ice-mid: #12203a; --ice-glow: #4a8cc2; --ice-bright: #7ec8e3; --ice-white: #c8dff0; --frost: rgba(120,180,220,0.12); --gold-dim: #8a7a5a; --gold: #c4a55a; --gold-bright: #e8cc6a; --ember: #c47a3a; --parchment: #b8a882; } * { box-sizing: border-box; margin: 0; padding: 0; } /* -- Header (shared across all /maps/ pages) -- */ .header { width: 100%; text-align: center; padding: 14px 20px 10px; background: linear-gradient(180deg, rgba(15,25,45,0.97) 0%, rgba(6,11,20,0.9) 100%); position: relative; z-index: 10; flex-shrink: 0; } .header::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(120,180,220,0.2), var(--gold-dim), rgba(120,180,220,0.2), transparent); } :where(.header) h1 { font-family: 'Uncial Antiqua', cursive; color: var(--ice-bright); font-size: 1.6em; font-weight: 400; letter-spacing: 4px; text-shadow: 0 0 30px rgba(100,180,240,0.25), 0 2px 8px rgba(0,0,0,0.5); } :where(.header) .subtitle { font-family: 'Cormorant Garamond', serif; color: var(--gold-dim); font-size: 0.85em; letter-spacing: 3px; margin-top: 2px; font-style: italic; } .header-nav { display: flex; justify-content: center; gap: 2px; margin-top: 8px; } .header-nav a { color: var(--ice-glow); text-decoration: none; font-size: 0.78em; font-family: 'Fira Sans', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 16px; border-radius: 3px; opacity: 0.55; transition: opacity 0.2s, background 0.2s; } .header-nav a:hover { opacity: 1; background: rgba(74,140,194,0.1); } .header-nav a.active { opacity: 1; color: var(--gold); background: rgba(196,165,90,0.08); border: 1px solid rgba(196,165,90,0.15); } .header-nav .back-link, .header .back-link { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); text-transform: none; letter-spacing: 0; padding: 0; border: none; background: none; color: var(--ice-glow); text-decoration: none; font-size: 0.8em; opacity: 0.55; } .header-nav .back-link:hover, .header .back-link:hover { opacity: 1; } /* -- Ambient frost particles -- */ @keyframes snowfall { 0% { transform: translateY(0) translateX(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 0.8; } 100% { transform: translateY(100vh) translateX(40px); opacity: 0; } } .frost-particle { position: fixed; top: -10px; pointer-events: none; width: 2px; height: 2px; border-radius: 50%; background: rgba(160,210,240,0.3); animation: snowfall linear infinite; z-index: 0; } /* -- Scrollbar -- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(74,140,194,0.2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(74,140,194,0.35); } /* -- Mobile header collapse -- */ @media (max-width: 700px) { :where(.header) h1 { font-size: 1.1em; letter-spacing: 2px; } :where(.header) .subtitle { font-size: 0.7em; display: none; } :where(.header) { padding: 8px 12px 6px; } :where(.header-nav) { gap: 1px; margin-top: 4px; } :where(.header-nav) a { padding: 3px 8px; font-size: 0.65em; letter-spacing: 1px; } .back-link { display: none !important; } }