/* ========================================= Theme + Base (shared variables) ========================================= */ :root { --bg: #0b1220; --text: rgba(255, 255, 255, 0.92); --muted: rgba(255, 255, 255, 0.68); --card: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.14); --shadow: 0 14px 34px rgba(0, 0, 0, 0.35); --radius: 16px; --accent: #4aa3ff; } * { box-sizing: border-box; } img { max-width: 100%; height: auto; } button, a, input { touch-action: manipulation; } /* ========================================= HOME PAGE ONLY (scope everything to .page-home) Add in index.html ========================================= */ .page-home { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color: var(--text); background: radial-gradient(900px 500px at 15% 10%, rgba(80, 130, 255, 0.25), transparent 60%), radial-gradient(800px 450px at 85% 15%, rgba(255, 160, 90, 0.18), transparent 55%), radial-gradient(900px 600px at 60% 95%, rgba(60, 220, 180, 0.12), transparent 60%), var(--bg); } .page-home a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } .page-home a:hover { text-decoration: underline; } /* ========================================= Topbar (home) ========================================= */ .page-home .topbar { padding: 14px 16px 8px; text-align: center; } .page-home .title-badge { display: inline-grid; gap: 2px; width: min(1080px, calc(100vw - 28px)); padding: 8px 22px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32); backdrop-filter: blur(10px); animation: title-rise 420ms ease-out both; } .page-home .site-kicker { margin: 0; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; font-size: 10px; line-height: 1; color: rgba(255, 255, 255, 0.66); } .page-home #page-title { margin: 0; font-size: clamp(22px, 2.6vw, 40px); text-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); } /* ========================================= App Layout (home) ========================================= */ .page-home .app-layout { display: grid; grid-template-columns: 360px 1fr; gap: 14px; padding: 12px 12px 16px; height: calc(100vh - 64px); min-height: calc(100dvh - 64px); } /* ========================================= Sidebar (home) ========================================= */ .page-home .sidebar { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; } .page-home .sidebar-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .page-home .sidebar-btn { min-height: 44px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)); color: var(--text); font-weight: 800; cursor: pointer; transition: transform 0.12s ease, border-color 0.18s ease; } .page-home .sidebar-btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.28); } .page-home .sidebar-btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(74, 163, 255, 0.18); } .page-home #searchBox { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; font-size: 16px; background: rgba(255, 255, 255, 0.06); color: var(--text); outline: none; } .page-home #searchBox::placeholder { color: rgba(255, 255, 255, 0.55); } .page-home #searchBox:focus { border-color: rgba(74, 163, 255, 0.65); box-shadow: 0 0 0 4px rgba(74, 163, 255, 0.18); } /* Tabs (home) */ .page-home .tabs { display: flex; flex-wrap: wrap; gap: 8px; } .page-home .tab { min-height: 40px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); cursor: pointer; font-weight: 700; transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease; } .page-home .tab:hover { transform: translateY(-1px); background: rgba(255,255,255,0.08); } .page-home .tab.active { border-color: rgba(74, 163, 255, 0.75); box-shadow: 0 0 0 3px rgba(74, 163, 255, 0.15); } /* Sidebar list (home) */ .page-home .sidebar-list { list-style: none; padding: 0; margin: 0; overflow: auto; flex: 1; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); } .page-home .sidebar-item { min-height: 44px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.08); transition: background 0.12s ease, transform 0.12s ease; } .page-home .sidebar-item:hover { background: rgba(255,255,255,0.08); transform: translateX(2px); } .page-home .sidebar-empty { padding: 12px; color: rgba(255,255,255,0.7); } /* Highlight card (home) */ .page-home .highlight-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 12px; } .page-home .highlight-card h3 { margin: 0 0 10px; font-size: 16px; } .page-home .highlight-card img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); display: block; } .page-home .highlight-card p { margin: 10px 0 0; color: rgba(255,255,255,0.75); font-weight: 700; font-size: 14px; } /* ========================================= Map (home) ========================================= */ .page-home .map-area { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .page-home #map { width: 100%; height: 100%; } /* ========================================= Popups + Marker Hover (keep global marker hover OK, but popup styling is scoped to home) ========================================= */ .page-home .popup { text-align: center; } .page-home .popup-image { width: 260px; max-width: min(70vw, 260px); border-radius: 10px; cursor: pointer; margin-bottom: 6px; transition: transform 0.15s ease, box-shadow 0.15s ease; } @media (max-width: 640px) { .page-home .popup-image { width: 220px; max-width: min(78vw, 220px); } } .page-home .popup-image:hover { transform: scale(1.03); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45); } .page-home .country-link { display: inline-block; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.85); } /* Markers: can stay global so it works wherever the map appears */ .leaflet-marker-icon { transition: transform 0.15s ease, filter 0.15s ease; cursor: pointer; } .leaflet-marker-icon:hover { transform: scale(1.22); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.65)); } /* ========================================= Responsive (home) ========================================= */ @media (max-width: 980px) { .page-home .app-layout { grid-template-columns: 1fr; height: auto; min-height: auto; } .page-home .map-area { height: clamp(340px, 65dvh, 680px); } } @media (max-width: 640px) { .page-home .topbar { padding: 14px 12px 8px; } .page-home .title-badge { width: calc(100vw - 20px); padding: 8px 12px; } .page-home .app-layout { gap: 10px; padding: 10px 10px 14px; } .page-home .sidebar { padding: 12px; } .page-home .sidebar-controls { grid-template-columns: 1fr; } .page-home .tabs { gap: 6px; } .page-home .tab { flex: 1 1 calc(50% - 6px); justify-content: center; } .page-home .highlight-card img { max-height: 160px; } } /* ========================================= LOCATION PAGE RESTORE (light theme) Add in location.html (and you can keep your existing location styles below) ========================================= */ .page-location { background: #f4f4f4; color: #333; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; } .page-location a { color: #2c3e50; text-decoration: none; } .page-location a:hover { text-decoration: underline; } /* ========================================================= LOCATION PAGE (restore prior layout) Requires: ========================================================= */ .page-location { background: #f4f4f4; color: #333; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; } .page-location a { color: #2c3e50; text-decoration: none; } .page-location a:hover { text-decoration: underline; } /* Page container */ .page-location .location-page { max-width: 1200px; margin: 0 auto; padding: 16px; } .page-location .location-mini-nav { position: sticky; top: 10px; z-index: 15; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(12, 21, 36, 0.72); backdrop-filter: blur(8px); } .page-location .location-mini-nav a { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); font-size: 13px; font-weight: 700; text-decoration: none; } .page-location .location-mini-nav a:hover { background: rgba(255,255,255,0.12); } /* Top banner: thumbnail + title */ .page-location .location-banner { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: center; background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.12); margin-bottom: 16px; } .page-location .location-thumb { width: 90px; height: 90px; border-radius: 12px; object-fit: cover; display: block; border: 2px solid rgba(0,0,0,0.08); } .page-location .banner-title h1, .page-location #location-title { margin: 0; font-size: 28px; line-height: 1.1; color: #1f2d3d; } .page-location .location-subtitle { margin: 6px 0 0; color: #555; font-size: 14px; } /* Two-column layout */ .page-location .location-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; /* left bigger */ gap: 16px; align-items: start; } /* Left column: media */ .page-location .location-media { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.12); } .page-location .location-media section + section { margin-top: 16px; } /* Right column: writing */ .page-location .location-writing { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.12); } .page-location .location-writing section + section { margin-top: 16px; } .page-location .location-writing h2 { margin: 0 0 8px; font-size: 18px; color: #1f2d3d; border-bottom: 2px solid rgba(0,0,0,0.08); padding-bottom: 6px; } /* Itinerary list formatting */ .page-location .location-writing ul { margin: 0; padding-left: 18px; } .page-location .location-writing li { margin: 6px 0; line-height: 1.4; } /* Carousel sizing + "no crop" support */ .page-location .carousel { width: 100%; max-width: 100%; margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 15px rgba(0,0,0,0.18); } .page-location #location-carousel img, .page-location #location-carousel .carousel-img { width: 100%; height: 520px; object-fit: contain; /* show whole image */ object-position: center; background: #111; /* letterbox background */ display: block; } @media (max-width: 900px) { .page-location #location-carousel img, .page-location #location-carousel .carousel-img { height: 340px; } } @media (max-width: 520px) { .page-location #location-carousel img, .page-location #location-carousel .carousel-img { height: 240px; } } /* Journal under carousel (left column) */ .page-location .location-journal { margin-top: 16px; background: #f8f9fa; padding: 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); } .page-location .location-journal h2 { margin: 0 0 10px; font-size: 18px; color: #1f2d3d; } .page-location .journal-entry p, .page-location .location-journal p { margin: 0 0 12px; line-height: 1.7; color: #222; } /* Responsive: stack columns */ @media (max-width: 900px) { .page-location .location-grid { grid-template-columns: 1fr; } .page-location .location-banner { grid-template-columns: 72px 1fr; } .page-location .location-thumb { width: 72px; height: 72px; } .page-location .banner-title h1, .page-location #location-title { font-size: 24px; } } @media (max-width: 640px) { .page-location .location-page { padding: 10px; } .page-location .location-mini-nav { top: 6px; margin-bottom: 10px; padding: 8px; } .page-location .location-banner { grid-template-columns: 60px 1fr; gap: 10px; padding: 10px 12px; margin-bottom: 10px; } .page-location .location-thumb { width: 60px; height: 60px; } .page-location .location-grid { gap: 10px; } .page-location .location-media, .page-location .location-writing { padding: 10px; } } .page-location .back-to-top { position: fixed; right: 14px; bottom: 14px; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(12, 21, 36, 0.8); color: rgba(255,255,255,0.92); font-weight: 800; box-shadow: 0 10px 20px rgba(0,0,0,0.28); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 40; } .page-location .back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } /* ========================================================= LOCATION PAGE — match homepage theme + style carousel arrows ========================================================= */ .page-location { /* same background as homepage */ background: radial-gradient(900px 500px at 15% 10%, rgba(80, 130, 255, 0.25), transparent 60%), radial-gradient(800px 450px at 85% 15%, rgba(255, 160, 90, 0.18), transparent 55%), radial-gradient(900px 600px at 60% 95%, rgba(60, 220, 180, 0.12), transparent 60%), var(--bg); color: var(--text); } .page-location a { color: rgba(255, 255, 255, 0.85); } .page-location a:hover { text-decoration: underline; } /* Cards become "glass" like homepage */ .page-location .location-banner, .page-location .location-media, .page-location .location-writing, .page-location .location-journal { background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(10px); color: var(--text); } /* Title text on dark */ .page-location .banner-title h1, .page-location #location-title { color: var(--text); } .page-location .location-subtitle { color: var(--muted); } /* Section headings */ .page-location .location-writing h2, .page-location .location-journal h2 { color: var(--text); border-bottom: 2px solid rgba(255,255,255,0.10); } /* Lists + paragraph text */ .page-location .location-writing li, .page-location .location-writing p, .page-location .location-journal p, .page-location .journal-entry p { color: rgba(255,255,255,0.88); } .page-location .related-locations-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .page-location .related-location-item { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); } .page-location .related-location-item a { font-weight: 700; } .page-location .related-location-meta { font-size: 12px; color: var(--muted); } /* Video embed */ .page-location .location-video { margin-top: 16px; background: rgba(255,255,255,0.06); padding: 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); } .page-location .location-video h2 { margin: 0 0 10px; font-size: 18px; color: var(--text); } .page-location .video-embed { position: relative; width: min(100%, 420px); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12); } .page-location .video-embed.landscape { width: 100%; max-width: none; aspect-ratio: 16 / 9; } @media (max-width: 640px) { .page-location .video-embed { width: min(100%, 320px); } } .page-location .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Journal “card” look (still slightly distinct) */ .page-location .location-journal { background: rgba(255,255,255,0.06); } /* ========================================================= Carousel arrows/buttons styling (dark theme) ========================================================= */ .page-location .carousel { position: relative; } /* If your carousel buttons exist, this will make them match */ .page-location .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.92); display: grid; place-items: center; font-size: 26px; line-height: 1; cursor: pointer; z-index: 5; transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .page-location .carousel-btn.prev { left: 10px; } .page-location .carousel-btn.next { right: 10px; } @media (max-width: 640px) { .page-location .carousel-btn { width: 44px; height: 44px; font-size: 22px; } .page-location .carousel-btn.prev { left: 6px; } .page-location .carousel-btn.next { right: 6px; } } .page-location .carousel-btn:hover { background: rgba(0,0,0,0.70); border-color: rgba(255,255,255,0.35); box-shadow: 0 0 0 4px rgba(74,163,255,0.18); transform: translateY(-50%) scale(1.06); } .page-location .carousel-btn:active { transform: translateY(-50%) scale(0.98); } .page-location .carousel-btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(74,163,255,0.22); } /* Optional: hide arrows until hover (feels modern) */ .page-location .carousel-btn { opacity: 0.92; } .page-location .carousel:hover .carousel-btn { opacity: 1; } /* ========================================= Hamburger Menu ========================================= */ .menu-container { position: fixed; top: 12px; right: 12px; z-index: 3000; } /* Button */ .menu-toggle { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); backdrop-filter: blur(10px); box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; cursor: pointer; } .menu-toggle span { height: 2px; width: 100%; background: rgba(255,255,255,0.9); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .menu-toggle:hover { box-shadow: 0 0 0 4px rgba(74,163,255,0.18); } /* Dropdown */ .menu-dropdown { position: absolute; top: 54px; right: 0; min-width: min(220px, calc(100vw - 24px)); padding: 8px; background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: none; flex-direction: column; gap: 4px; } .menu-dropdown a { padding: 10px 12px; border-radius: 10px; font-weight: 700; color: rgba(255,255,255,0.9); transition: background 0.15s ease, transform 0.15s ease; } .menu-dropdown a:hover { background: rgba(255,255,255,0.10); transform: translateX(2px); } /* Open state */ .menu-container.open .menu-dropdown { display: flex; } /* Animate hamburger to X */ .menu-container.open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-container.open .menu-toggle span:nth-child(2) { opacity: 0; } .menu-container.open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 640px) { .menu-toggle { width: 46px; height: 46px; } .menu-dropdown { top: 52px; right: 0; } } /* ========================================= About Page ========================================= */ .about-page { max-width: 900px; margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 18px; } .about-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); padding: 18px 20px; } .about-section h2 { margin: 0 0 8px; font-size: 20px; border-bottom: 2px solid rgba(255,255,255,0.12); padding-bottom: 6px; } .about-section p { margin: 0; line-height: 1.65; color: rgba(255,255,255,0.85); } .about-section ul { margin: 8px 0 0; padding-left: 18px; color: rgba(255,255,255,0.85); } .about-section li { margin: 5px 0; } /* ========================================= About Hero + Stats ========================================= */ .about-hero { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); padding: 18px 20px; } .about-avatar-wrap { width: 140px; height: 140px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); display: grid; place-items: center; } .about-avatar { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 10px 22px rgba(0,0,0,0.35); } .about-avatar.about-avatar-fallback { width: 58%; height: 58%; object-fit: contain; opacity: 0.8; box-shadow: none; } .about-hero-text h2 { margin: 0 0 6px; font-size: 26px; } .about-muted { margin: 0 0 14px; color: var(--muted); line-height: 1.6; } .about-muted p { margin: 0; } .about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stat-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 12px 14px; } .stat-number { font-size: 26px; font-weight: 900; letter-spacing: 0.5px; } .stat-label { margin-top: 4px; color: rgba(255,255,255,0.75); font-weight: 700; font-size: 13px; } /* Responsive */ @media (max-width: 720px) { .about-hero { grid-template-columns: 1fr; text-align: left; } .about-avatar { width: 100%; height: 100%; } .about-avatar-wrap { width: 100%; height: 220px; } .about-stats { grid-template-columns: 1fr; } } .site-title { margin: 0; font-size: clamp(25px, 2.8vw, 42px); font-weight: 900; letter-spacing: 0.4px; line-height: 1.08; text-shadow: 0 12px 28px rgba(0,0,0,0.45); } .site-subtitle { display: block; margin-top: 4px; font-size: clamp(12px, 1.05vw, 15px); font-weight: 600; letter-spacing: 0.35px; color: rgba(255,255,255,0.75); max-width: 70ch; margin-left: auto; margin-right: auto; } .site-title::after { content: ""; display: block; width: 110px; height: 4px; margin: 10px auto 0; border-radius: 4px; background: linear-gradient(90deg, rgba(74,163,255,0.12), var(--accent), rgba(74,163,255,0.12)); box-shadow: 0 0 20px rgba(74,163,255,0.45); } @keyframes title-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Center only main section headers */ .location-overview > h2, .location-logistics > h2, .location-notes > h2 { text-align: center; margin-bottom: 12px; } /* ========================================= About Page (match homepage theme) ========================================= */ .page-about { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color: var(--text); background: radial-gradient(900px 500px at 15% 10%, rgba(80, 130, 255, 0.25), transparent 60%), radial-gradient(800px 450px at 85% 15%, rgba(255, 160, 90, 0.18), transparent 55%), radial-gradient(900px 600px at 60% 95%, rgba(60, 220, 180, 0.12), transparent 60%), var(--bg); } .page-about .topbar { padding: 14px 16px 8px; text-align: center; } .page-about #page-title { margin: 0; font-size: clamp(22px, 2.6vw, 40px); text-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); } /* ========================================= Countries Page ========================================= */ .page-countries { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color: var(--text); background: radial-gradient(900px 500px at 15% 10%, rgba(80, 130, 255, 0.25), transparent 60%), radial-gradient(800px 450px at 85% 15%, rgba(255, 160, 90, 0.18), transparent 55%), radial-gradient(900px 600px at 60% 95%, rgba(60, 220, 180, 0.12), transparent 60%), var(--bg); } .countries-page { max-width: 900px; margin: 0 auto; padding: 24px 16px 40px; } .countries-intro { margin: 0 0 12px; color: var(--muted); } .countries-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .countries-item a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); text-decoration: none; font-weight: 700; transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease; } .countries-item a:hover { transform: translateY(-1px); background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.24); } .countries-count { display: inline-flex; min-width: 32px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(74,163,255,0.18); border: 1px solid rgba(74,163,255,0.35); font-size: 13px; color: rgba(255,255,255,0.9); } /* ========================================= Country Page ========================================= */ .page-country { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color: var(--text); background: radial-gradient(900px 500px at 15% 10%, rgba(80, 130, 255, 0.25), transparent 60%), radial-gradient(800px 450px at 85% 15%, rgba(255, 160, 90, 0.18), transparent 55%), radial-gradient(900px 600px at 60% 95%, rgba(60, 220, 180, 0.12), transparent 60%), var(--bg); } .page-country a { color: rgba(255,255,255,0.88); text-decoration: none; } .page-country a:hover { text-decoration: underline; } .page-country .page-nav { display: flex; align-items: center; gap: 8px; color: var(--muted); } .page-country .country-page { max-width: 980px; margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 16px; } @media (max-width: 640px) { .page-country .country-page { padding: 16px 10px 24px; gap: 10px; } .page-country .country-hero, .page-country .places-card { padding: 12px; } } .page-country .country-hero { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); padding: 18px 20px; } .page-country .country-hero h1 { margin: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: 0.4px; } .page-country .country-carousel { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); box-shadow: var(--shadow); background: rgba(0,0,0,0.35); } .page-country .country-carousel img { width: 100%; height: 420px; object-fit: cover; display: block; } @media (max-width: 720px) { .page-country .country-carousel img { height: 260px; } } .page-country .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.92); display: grid; place-items: center; font-size: 26px; line-height: 1; cursor: pointer; z-index: 5; transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .page-country .carousel-btn.prev { left: 10px; } .page-country .carousel-btn.next { right: 10px; } @media (max-width: 640px) { .page-country .carousel-btn { width: 44px; height: 44px; font-size: 22px; } .page-country .carousel-btn.prev { left: 6px; } .page-country .carousel-btn.next { right: 6px; } } .page-country .carousel-btn:hover { background: rgba(0,0,0,0.70); border-color: rgba(255,255,255,0.35); box-shadow: 0 0 0 4px rgba(74,163,255,0.18); transform: translateY(-50%) scale(1.06); } .page-country .carousel-btn:active { transform: translateY(-50%) scale(0.98); } .page-country .places-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); padding: 18px 20px; } .page-country .places-card h2 { margin: 0 0 10px; font-size: 20px; border-bottom: 2px solid rgba(255,255,255,0.10); padding-bottom: 6px; } .page-country #country-locations { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .page-country #country-locations > li { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 12px 14px; } .page-country #country-locations h3 { margin: 0 0 8px; font-size: 16px; color: rgba(255,255,255,0.9); } .page-country #country-locations ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .page-country #country-locations li li a { display: inline-flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease; } .page-country #country-locations li li a:hover { transform: translateX(2px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.24); } /* ========================================= Year In Review Page ========================================= */ .page-years { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color: var(--text); background: radial-gradient(900px 500px at 15% 10%, rgba(80, 130, 255, 0.25), transparent 60%), radial-gradient(800px 450px at 85% 15%, rgba(255, 160, 90, 0.18), transparent 55%), radial-gradient(900px 600px at 60% 95%, rgba(60, 220, 180, 0.12), transparent 60%), var(--bg); } .page-years #page-title { margin: 0; font-size: clamp(24px, 3vw, 40px); text-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); } .years-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; } .years-intro { margin: 0 0 14px; color: var(--muted); } .years-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .year-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); padding: 14px; display: grid; gap: 10px; } .year-title { margin: 0; font-size: clamp(26px, 3vw, 36px); letter-spacing: 0.4px; } .year-subtitle { margin: 0; font-weight: 800; color: rgba(255, 255, 255, 0.9); } .year-summary { margin: 0; color: rgba(255, 255, 255, 0.82); line-height: 1.5; } .year-highlights { display: flex; flex-wrap: wrap; gap: 8px; } .year-chip { border-radius: 999px; padding: 5px 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); font-size: 12px; font-weight: 700; } .year-video-embed { position: relative; width: min(100%, 320px); margin: 0 auto; border-radius: 12px; overflow: hidden; aspect-ratio: 9 / 16; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.14); } .year-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .year-video-placeholder { width: min(100%, 320px); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 12px; border: 1px dashed rgba(255,255,255,0.28); background: rgba(255,255,255,0.05); display: grid; place-items: center; color: rgba(255,255,255,0.7); font-weight: 700; } @media (max-width: 900px) { .years-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .years-page { padding: 16px 10px 24px; } }