/* kiomigo — shared brand shell. One source of truth for the identity: azure night-atlas ground, tri-colour wordmark, header bar, buttons, cards, inputs. Page-specific stylesheets (e.g. landing.css) layer on top of this. */ :root { --night: #082B4A; /* deep azure ocean */ --night-2: #0C3765; --panel: #0F3D66; --ink: #EEF6FB; --muted: #93B2C9; --line: rgba(220, 238, 252, .12); --kio: #3BB3C1; --mi: #F5794F; --go: #EEBE4E; /* aliases kept for older views */ --ground: var(--night); --surface: var(--panel); --teal: var(--kio); --route: var(--mi); --mono: var(--sans); --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; /* titles */ --body: "Open Sans", "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif; /* body text */ } /* ---------- light theme (token overrides) ---------- Used by the travel-guide pages (body.theme-light). Because everything is variable-driven, a future site-wide dark/light mode with system preference is just: apply these under @media (prefers-color-scheme: light). */ body.theme-light { --night: #ffffff; --night-2: #f2f7fa; --panel: #ffffff; --ink: #17293a; --muted: #5d7285; --line: rgba(23, 41, 58, .13); background: radial-gradient(1000px 700px at 50% -10%, rgba(59, 179, 193, .10), transparent 60%), linear-gradient(180deg, #f4f9fc, #e9f1f7 60%, #eef5f9); background-attachment: fixed; } body.theme-light::before { opacity: .35; } body.theme-light .card { background: #ffffff; box-shadow: 0 6px 22px rgba(23, 41, 58, .07); } body.theme-light .navlink:hover, body.theme-light .iconbtn:hover { background: rgba(23, 41, 58, .06); } /* light content pages: pale search field; photo-hero pages keep a dark field + white text */ body.theme-light:not(.hero-header) .topsearch input { background: rgba(23, 41, 58, .05) !important; color: #17293a; } body.hero-header .topsearch input { background: rgba(6, 26, 46, .45) !important; color: #fff; } body.hero-header .topsearch .ts-icon { color: rgba(255, 255, 255, .7); } * { box-sizing: border-box; } html, body { height: 100%; } /* full-bleed heroes use width:100vw, which is scrollbar-width too wide and causes a stray horizontal scrollbar. `clip` hides that overflow WITHOUT creating a scroll container, so position:sticky keeps working. */ /* Give the page's dark edge colour: iOS rubber-band overscroll shows the HTML element's background, and without one it flashes white at the top/bottom. (:has lets it follow the light theme, which is set as a class on .) */ html { overflow-x: clip; background: #0A3458; overscroll-behavior-y: none; } html:has(body.theme-light) { background: #ffffff; } body { margin: 0; font-family: var(--sans); color: var(--ink); line-height: 1.6; overflow-x: clip; max-width: 100%; background: radial-gradient(1200px 800px at 50% 30%, rgba(46, 151, 164, .18), transparent 65%), radial-gradient(900px 600px at 85% -10%, rgba(59, 179, 193, .14), transparent 60%), radial-gradient(900px 600px at 8% 110%, rgba(245, 121, 79, .10), transparent 60%), linear-gradient(180deg, #0A3458, var(--night) 55%, #061F38); background-attachment: fixed; } /* faint chart-grid over the whole stage */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5; z-index: 0; background: repeating-linear-gradient(90deg, transparent 0 119px, var(--line) 119px 120px), repeating-linear-gradient(0deg, transparent 0 119px, var(--line) 119px 120px); } body > * { position: relative; z-index: 1; } a { color: var(--kio); } h1, h2, h3 { font-family: var(--sans); } p { font-family: var(--body); } /* ---------- header bar: ONE frosted-glass header everywhere ---------- Same look on landing, hero pages and content pages; only light/dark colour differs. Positioning differs invisibly: fixed overlay on landing + photo heroes (so the map/photo shows behind it), sticky on plain content pages. Smart scroll: hides on scroll-down past a threshold, returns on scroll-up. */ .bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: rgba(8, 43, 74, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .08); transition: transform .32s ease; } .bar.static { position: sticky; } /* plain content pages reserve space */ body.hero-header .bar.static { position: fixed; } /* photo heroes: overlay + stay */ .bar.nav-hidden { transform: translateY(-100%); } /* editor pencil FAB (bottom-left) — jumps to this page's editor */ .edit-fab { position: fixed; left: 18px; bottom: 18px; z-index: 2500; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--night-2); color: var(--kio); text-decoration: none; border: 1px solid var(--kio); box-shadow: 0 10px 26px rgba(0,0,0,.4); transition: width .2s ease, border-radius .2s ease; } .edit-fab .material-icons { font-size: 1.4rem; } .edit-fab .edit-fab-label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: .9rem; transition: max-width .22s ease, opacity .2s ease, margin .22s ease; } .edit-fab:hover, .edit-fab:focus-visible { width: auto; border-radius: 26px; padding: 0 18px; } .edit-fab:hover .edit-fab-label, .edit-fab:focus-visible .edit-fab-label { max-width: 160px; opacity: 1; margin-left: 8px; } /* light theme, but NOT over a photo hero (there the dark frosted bar + white text reads best against bright images) */ body.theme-light:not(.hero-header) .bar { background: rgba(255, 255, 255, .72); border-bottom-color: rgba(23, 41, 58, .1); } .wordmark { font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; text-decoration: none; } .wordmark .k { color: var(--kio); } .wordmark .m { color: var(--mi); } .wordmark .g { color: var(--go); } .bar nav { display: flex; gap: 10px; align-items: center; } .lang-select { width: auto; padding: 8px 10px; font-size: .85rem; font-family: var(--body); color: var(--ink); background: rgba(14, 29, 46, .55); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; margin-right: 6px; color-scheme: dark; } .lang-select:hover { border-color: rgba(238, 246, 251, .3); } .username { color: var(--muted); font-family: var(--body); font-size: .9rem; } /* ---------- buttons ---------- */ .ghost, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(14, 29, 46, .55); backdrop-filter: blur(6px); cursor: pointer; font-family: var(--sans); transition: border-color .2s ease, transform .2s ease; } .ghost:hover, .btn:hover { border-color: rgba(238, 246, 251, .3); } .btn.primary, .btn-primary { border: none; background: linear-gradient(120deg, var(--mi), #e2603b); color: #fff; } .btn.primary:hover, .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(245, 121, 79, .3); } /* ---------- content shell ---------- */ .wrap { max-width: 960px; margin: 0 auto; padding: 48px 24px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); } /* ---------- mobile compaction: margins shrink or disappear on small screens ---------- */ @media (max-width: 640px) { .wrap { padding: 14px 10px 84px; } /* slim sides, room for the floating + button */ .card { padding: 14px 12px !important; border-radius: 14px; } .bar.static { padding: 10px 12px; } .fab { right: 12px; bottom: 12px; height: 50px; padding: 0 13px; } } .flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-size: .92rem; font-family: var(--body); background: rgba(59, 179, 193, .12); border: 1px solid rgba(59, 179, 193, .5); } input[type="text"], input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], select, textarea { width: 100%; padding: 13px 15px; border-radius: 12px; font-size: 1rem; background: var(--night); color: var(--ink); border: 1px solid rgba(238, 246, 251, .16); font-family: var(--body); color-scheme: dark; } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--kio); outline-offset: 1px; } /* ---------- admin (ops) ---------- */ .admin-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(14, 29, 46, .45); } .admin-badge { font-family: var(--sans); font-size: .68rem; letter-spacing: .14em; font-weight: 700; color: var(--go); padding: 6px 10px; } .admin-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem; padding: 8px 14px; border-radius: 9px; } .admin-nav a:hover { color: var(--ink); } .admin-nav a.on { color: var(--ink); background: rgba(59, 179, 193, .16); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cardtitle { margin: 0 0 12px; font-weight: 700; } .admintable { width: 100%; border-collapse: collapse; font-family: var(--body); font-size: .9rem; } .admintable th { text-align: left; font-family: var(--sans); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); } .admintable td { padding: 9px 10px; border-bottom: 1px solid var(--line); } .admintable tr:last-child td { border-bottom: none; } .matrixtable td, .matrixtable th { padding: 5px 8px; font-size: .82rem; } .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .76rem; border: 1px solid var(--line); color: var(--muted); } .pill.ok { border-color: rgba(59, 179, 193, .55); color: var(--kio); } .pill.warn { border-color: rgba(238, 190, 78, .6); color: var(--go); } code { font-family: var(--sans); font-size: .82em; color: var(--kio); } @media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ghost, .btn, .btn-primary { transition: none !important; } } /* ---- unified header pills: Travel, Plan a trip, locale, sign in ---- identical height (36px), radius (12px) and frosted-glass blur everywhere */ .pill-nav { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); font-size: .85rem; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .18s, border-color .18s; } .pill-nav:hover { border-color: rgba(59, 179, 193, .6); background: rgba(255, 255, 255, .16); } body.theme-light .pill-nav { background: rgba(23, 41, 58, .05); color: #17293a; border-color: rgba(23, 41, 58, .12); } body.theme-light .pill-nav:hover { background: rgba(23, 41, 58, .09); } /* pages with a photo hero fade the header dark: frosted glass pills, white text */ body.hero-header header.bar.static .pill-nav, body.theme-light.hero-header header.bar.static .pill-nav { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .24); } body.hero-header header.bar.static .pill-nav:hover, body.theme-light.hero-header header.bar.static .pill-nav:hover { background: rgba(255, 255, 255, .2); } /* date inputs: the browser draws the calendar icon itself and colors it via color-scheme (dark inputs get a light icon) — never filter it manually */ input[type="date"] { cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator { opacity: .95; cursor: pointer; } body.theme-light input[type="date"] { color-scheme: light; }