/* ─── Light/Dark theme variables ───────────────────────────────────── */ :root { /* Light theme */ --bg: #f2f2f2; --fg: #1d1d1f; --secondary: #333333; --tile-bg: #ffffff; --nav-bg: rgba(255,255,255,0.8); --footer-bg: #ffffff; --footer-fg: #8e8e93; --icon-filter: invert(0%) sepia(0%); } @media (prefers-color-scheme: dark) { :root { /* Dark theme */ --bg: #1d1d1f; --fg: #f2f2f2; --secondary: #e5e5e5; --tile-bg: #2c2c2e; --nav-bg: rgba(28,28,30,0.8); --footer-bg: #2c2c2e; --footer-fg: #8e8e93; --icon-filter: invert(100%) sepia(0%); } } /* ──────────────────────────────────────────────────────────────────── */ /* ─── Manual override when user clicks the toggle ─────────────────────── */ html[data-theme="dark"] { /* exactly the same overrides you had in your dark-mode media query */ --bg: #1d1d1f; --fg: #f2f2f2; --secondary: #e5e5e5; --tile-bg: #2c2c2e; --nav-bg: rgba(28,28,30,0.8); --footer-bg: #2c2c2e; --footer-fg: #8e8e93; --icon-filter: invert(100%) sepia(0%); } /* ─── Manual override to force light when toggled ─────────────────────── */ html[data-theme="light"] { --bg: #f2f2f2; --fg: #1d1d1f; --secondary: #333333; --tile-bg: #ffffff; --nav-bg: rgba(255,255,255,0.8); --footer-bg: #ffffff; --footer-fg: #8e8e93; --icon-filter: invert(0%) sepia(0%); } /* ─── Style the toggle button ───────────────────────────────────────── */ .theme-toggle { /* give it its own background */ background-color: var(--tile-bg); /* a subtle border for separation */ border: none; /* lift it off the page */ box-shadow: 0 2px 6px rgba(0,0,0,0.12); /* round it nicely */ border-radius: 8px; /* more tappable area */ padding: 6px; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .theme-toggle img { display: block; width: 24px; height: 24px; /* ensure the icon itself uses your fg color */ filter: var(--icon-filter); } .theme-toggle:hover { /* invert the nav-backdrop on hover for a tiny contrast shift */ background-color: var(--nav-bg); box-shadow: 0 4px 10px rgba(0,0,0,0.15); } /* ─── Make the toggle pop in dark mode ───────────────────────────────── */ html[data-theme="dark"] .theme-toggle { /* light translucent fill */ background-color: rgba(255,255,255,0.12); /* subtle white outline */ border: none; /* white "glow" */ box-shadow: 0 2px 6px rgba(255,255,255,0.1); /* brighten slightly */ filter: brightness(1.1); } html[data-theme="dark"] .theme-toggle:hover { background-color: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); box-shadow: 0 4px 10px rgba(255,255,255,0.15); } /* 1. Reset & body setup */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 1) Base styles for all pages */ html, body { width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg); color: var(--fg); display: flex; flex-direction: column; /* stack nav → main → footer */ } /* 2) Landing page (index.html) — no scrolling, exactly one viewport tall */ /* Make sure your tag in index.html is: */ html.no-scroll, body.no-scroll { height: 100vh; /* exactly one screen */ overflow: hidden; /* lock out any scroll */ } /* 3) All other pages — normal "grow & scroll" behavior */ html:not(.no-scroll), body:not(.no-scroll) { height: auto; /* grow with content */ overflow-y: auto; /* allow vertical scrolling */ } /* 2. Top nav (fixed at top, 60px tall) */ .nav-bar { position: fixed; top: 0; width: 100%; height: 60px; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); z-index: 100; } .nav-container { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; } .nav-logo { font-size: 18px; font-weight: 600; color: var(--fg); text-decoration: none; } .nav-links { list-style: none; /* hide the bullets */ margin: 0; /* reset any default ul margin */ padding: 0; display: flex; gap: 20px; overflow-x: auto; /* allow scrolling */ white-space: nowrap; /* keep items on one line */ -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */ padding-bottom: 8px; /* give a bit of breathing room */ } .nav-links li { flex: 0 0 auto; /* don't shrink the items below their content */ } /* Optional: slightly reduce font-size on really small screens */ @media (max-width: 500px) { .island { width: 240px; /* try 200px if 240 is still too large */ height: 240px; } .tile { width: 50px; /* down from 80 */ height: 50px; } .tile img { width: 32px; /* down from 56 */ height: 32px; } #face { width: 80px; /* down from 120 */ height: 80px; } } .nav-links li a { font-size: 14px; text-decoration: none; color: var(--fg); transition: color 0.2s ease; } .nav-links li a:hover { color: #0071e3; /* subtle Apple-blue hover */ } /* 3. Hero area: sits below nav, above footer, and centers .island */ #hero { position: relative; margin-top: 60px; /* push below the fixed 60px nav */ flex: 1; /* fill all vertical space between nav and footer */ display: flex; justify-content: center; /* center .island horizontally */ align-items: center; /* center .island vertically */ background-color: var(--bg); overflow: hidden; } /* 4. Island wrapper (320×320 box = circle diameter of 160px radius) */ .island { position: relative; width: 320px; /* 2 × 160px radius */ height: 320px; /* 2 × 160px radius */ } /* 5. Each tile (80×80) goes on a circle of radius 160px, centered at (160,160) */ .tile { position: absolute; width: 80px; height: 80px; background-color: var(--tile-bg); border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); display: flex; justify-content: center; align-items: center; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; transform: translate(-50%, -50%); /* (left, top) is the tile's center */ z-index: 1; } /* Place each tile's center on the 160px-radius circle: */ .tile:nth-child(1) { top: 0px; left: 160px; } /* 12 o'clock */ .tile:nth-child(2) { top: 47px; left: 273px; } /* 1:30 (45°) */ .tile:nth-child(3) { top: 160px; left: 320px; } /* 3 o'clock */ .tile:nth-child(4) { top: 273px; left: 273px; } /* 4:30 (45°) */ .tile:nth-child(5) { top: 320px; left: 160px; } /* 6 o'clock */ .tile:nth-child(6) { top: 273px; left: 47px; } /* 7:30 (45°) */ .tile:nth-child(7) { top: 160px; left: 0px; } /* 9 o'clock */ .tile:nth-child(8) { top: 47px; left: 47px; } /* 10:30 (45°) */ /* 6. Hover animations for tiles */ .tile:hover { transform: translate(-50%, -50%) translateY(-6px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); } .tile img { width: 56px; height: 56px; object-fit: contain; transition: transform 0.2s ease; pointer-events: none; } .tile:hover img { transform: scale(1.08); } .name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-size: 14px; color: var(--secondary); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; white-space: nowrap; } .tile:hover .name { opacity: 1; } /* 7. Face in the exact center of .island */ .face-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 10; } #face { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; transition: transform 0.1s ease-out; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1)); } /* 8. Footer (sticks to bottom) */ .footer { flex: 0; /* do not grow */ text-align: center; padding: 24px 16px; font-size: 14px; color: var(--footer-fg); border-top: 1px solid rgba(0,0,0,0.05); background-color: var(--footer-bg); } /* 9. Small-screen tweaks (≤400px) */ @media (max-width: 400px) { .nav-links { gap: 12px; } .nav-links li a { font-size: 12px; } .island { width: 240px; /* downsize from 320 to 240 */ height: 240px; } .face-container img { width: 90px; height: 90px; } .tile { width: 60px; height: 60px; } .tile img { width: 40px; height: 40px; } .name { font-size: 12px; margin-top: 4px; } /* Recompute circle: radius = 120px (120/√2 ≈ 85px) */ .tile:nth-child(1) { top: 0px; left: 120px; } .tile:nth-child(2) { top: 35px; left: 205px; } .tile:nth-child(3) { top: 120px; left: 240px; } .tile:nth-child(4) { top: 205px; left: 205px; } .tile:nth-child(5) { top: 240px; left: 120px; } .tile:nth-child(6) { top: 205px; left: 35px; } .tile:nth-child(7) { top: 120px; left: 0px; } .tile:nth-child(8) { top: 35px; left: 35px; } } /* → Leaflet map container styling */ .leaflet-map { width: 100%; max-width: 900px; height: 360px; margin: 0 auto 64px; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } /* → Hide default Leaflet UI for a cleaner look */ .leaflet-control-zoom, .leaflet-control-attribution { display: none; } /* 0) Intro section */ .intro-section { display: flex; align-items: center; justify-content: center; gap: 40px; max-width: 900px; margin: 0 auto 48px; text-align: left; } .intro-text { flex: 1 1 0; } .intro-image { width: 180px; height: auto; border-radius: 0; box-shadow: none; object-fit: cover; } @media (max-width: 700px) { .intro-section { flex-direction: column; text-align: center; gap: 24px; } .intro-image { width: 120px; } } /* 1) Map + Tiles container */ /* Ensure both halves share the same vertical start */ .map-and-tiles { display: flex; /* ADD THIS: */ align-items: flex-start; /* top-align both columns */ gap: 40px; max-width: 1200px; margin: 0 auto 64px; flex-wrap: wrap; } /* Nudge the map down 16px */ .map-half .leaflet-map { margin-top: 16px; } /* Force each half to take ~50% (but shrink on small screens) */ .map-half, .tiles-half { flex: 1 1 45%; /* basis ~45%, so there's room for gap */ } /* Optional: give the map a little min-width so it never squashes too small */ .map-half { min-width: 320px; } /* Style your mission block */ .tiles-half .mission { margin-bottom: 32px; /* space before the tiles */ } .tiles-half .mission h2 { font-size: 24px; color: var(--fg); margin-bottom: 12px; } .tiles-half .mission p { font-size: 16px; line-height: 1.6; color: var(--secondary); } /* Style your "Find Me On" block heading */ .tiles-half .findme h2 { font-size: 24px; color: var(--fg); margin-bottom: 16px; } /* Keep your existing .tile-grid & .brand-tile rules */ .tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } /* (existing) .brand-tile { … } */ /* Under-Construction Overlay */ .under-dev-overlay { position: fixed; inset: 0; /* top:0; right:0; bottom:0; left:0 */ background: var(--nav-bg); backdrop-filter: blur(12px); z-index: 9999; /* above everything */ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2rem; gap: 1rem; } .under-dev-overlay img { width: 80px; /* reasonable size for an icon */ height: 80px; object-fit: contain; } .under-dev-overlay h1 { font-size: 1.75rem; /* ~28px */ font-weight: 600; color: var(--fg); margin: 0; } .under-dev-overlay p { font-size: 1rem; /* ~16px */ color: var(--secondary); max-width: 320px; margin: 0; line-height: 1.4; } @media (max-width: 800px) { html, body { height: auto; /* let the page grow with its content */ min-height: 100vh; /* still guarantee at least full-screen height */ overflow-y: auto; /* allow vertical scrolling */ } } /* Hamburger styles */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; z-index: 200; } .hamburger span { display: block; height: 4px; width: 100%; background: var(--fg); border-radius: 2px; transition: 0.3s; } @media (max-width: 800px) { .nav-container { justify-content: center; position: relative; } .nav-links { position: absolute; top: 60px; left: 0; right: 0; background: var(--nav-bg); flex-direction: column; align-items: center; gap: 0; display: none; box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 150; } .nav-links.open { display: flex; } .hamburger { display: flex; position: absolute; left: 16px; top: 12px; } .theme-toggle { position: absolute; right: 16px; top: 12px; } }