/* 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 stays exactly viewport-tall; body must be free to GROW. height:100% pinned body's box to one viewport however long the page was, and because carries its own colour (below), body's gradient never propagates to the canvas — it paints inside body's box and stops. On a 3752px page that left 2940px painted in flat #0A3458, which read as the background repeating halfway down. min-height keeps the full-height layout and lets the gradient reach the end of the page. */ html { height: 100%; } body { min-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; } /* ---------- horizontal card strips: spotlight, photo gallery, popular routes One carousel everywhere. Each strip still sizes its own cards, but the shell, the arrows and the scroll behaviour live here, because three near-copies of this is how the routes strip ended up still showing a scrollbar while the spotlight had arrows. Swipe on touch, arrows on mouse: the arrows only appear for a pointer that can hover, since a finger already swipes. */ .strip-shell { position: relative; } .strip-arrow { display: none; position: absolute; top: 44%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); color: #17293a; cursor: pointer; font-size: 1.1rem; line-height: 1; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(23, 41, 58, .18); transition: opacity .2s; } .strip-arrow.prev { left: 6px; } .strip-arrow.next { right: 6px; } .strip-arrow[disabled] { opacity: .25; cursor: default; } @media (hover: hover) and (pointer: fine) { .strip-arrow { display: flex; } .strip-shell .strip { scrollbar-width: none; scroll-behavior: smooth; } .strip-shell .strip::-webkit-scrollbar { display: none; } } /* faint chart-grid — ONLY on the wizard/landing. Every other page keeps the solid gradient body background (the grid lines read as clutter over content and photos). */ body.landing::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; } /* Editor-tools stack above the edit pencil (bottom-left): edit (teal, 18px), enrich (gold, 82px), translate (green, 146px). Form wrappers are layout-neutral (the button itself is position:fixed). */ .fab-form { display: contents; } .edit-fab.enrich-fab { bottom: 82px; color: var(--go); border-color: var(--go); cursor: pointer; } .edit-fab.translate-fab { bottom: 146px; color: #5bbf93; border-color: #5bbf93; cursor: pointer; } .edit-fab:disabled { opacity: .6; cursor: default; } /* 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); } /* The photo-hero bar is dark frosted-blue in EVERY theme, so its mobile icons (search + hamburger) must be white — on the light theme --ink is dark and disappears against it. */ body.hero-header .iconbtn { color: #fff; } body.hero-header .iconbtn:hover { background: rgba(255, 255, 255, .16); } .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:not(:disabled), .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); } /* ---------- autocomplete dropdown (shared) ---------- Used by the planner (add stop / focus), the supplier dashboard and the Explore search. One theme-adaptive definition here so the panel is always a solid sheet: on light-theme pages --panel is white and --ink is dark; on the dark app they flip. It used to be redeclared per page, which is why the Explore page — the one place it was NEVER declared — rendered transparent. The container needs position:relative and the box position:absolute. */ .suggest-box { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1000; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; max-height: 340px; overflow-y: auto; box-shadow: 0 14px 40px rgba(6, 26, 46, .28); } .suggest-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--ink); text-decoration: none; padding: 10px 13px; font-size: .85rem; line-height: 1.35; cursor: pointer; border-bottom: 1px solid var(--line); } .suggest-item:last-child { border-bottom: none; } .suggest-item:hover { background: rgba(59, 179, 193, .12); } .suggest-item strong { color: var(--kio); font-weight: 700; } /* ---------- 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; } /* header padding is unified for every page in the topbar component's own stylesheet (loaded last) — see components/topbar.blade.php @media 760px */ .fab { right: 12px; bottom: 12px; height: 50px; padding: 0 13px; } /* ---- edge-to-edge "app sheet" pages (opt in with body class `sheet`) ---- Content cards run the full width and square off — no side gutter, no rounded corners, no shadow — so the screen reads as an app and gains ~20px of width. Scoped to main.wrap so overlays/modals (body-level .card) are untouched. Loose text directly in the wrap keeps a small inline pad so it never touches the screen edge; text inside cards already has the card's own padding. */ body.sheet main.wrap { padding-left: 0; padding-right: 0; } body.sheet main.wrap .card { border-radius: 0 !important; border-left: none; border-right: none; box-shadow: none; } body.sheet main.wrap > h1, body.sheet main.wrap > h2, body.sheet main.wrap > p { padding-left: 14px; padding-right: 14px; } /* connections list: the wrapper keeps a 14px text inset while each row bleeds to the screen edge, so dividers span full width but text never touches it. */ body.sheet main.wrap .conn-wrap { padding-left: 14px; padding-right: 14px; } body.sheet main.wrap .conn-row { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; } /* inbox pages (Feed / Notifications / Messages) all match: the wrapper is full-bleed so tabs and photo cards reach the screen edge, and each row keeps its own 14px pad so text/avatars never touch it — the messenger-list look. */ body.sheet main.wrap .note-wrap { padding-left: 0; padding-right: 0; } body.sheet main.wrap .note-row { padding-left: 14px; padding-right: 14px; } } .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); } /* anchored mode: the layout script floats a flash next to the form that caused it, then fades it out after 3 seconds */ .flash.flash-float { position: fixed; left: 50%; transform: translateX(-50%); z-index: 4500; max-width: min(520px, 92vw); margin: 0; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); background: #0d3050; transition: opacity .3s ease, transform .3s ease; } body.theme-light .flash.flash-float { background: #eafafb; } .flash.flash-float.bye { opacity: 0; transform: translateX(-50%) translateY(-8px); } input[type="text"], input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input:not([type]), /* an omitted type IS type=text — never let it fall to browser default */ 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-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem; padding: 8px 14px; border-radius: 9px; display: inline-flex; align-items: center; gap: 7px; } .admin-nav a .ni { font-size: 1.02rem; color: var(--muted); } .admin-nav a:hover { color: var(--ink); } .admin-nav a:hover .ni { color: var(--ink); } .admin-nav a.on { color: var(--ink); background: rgba(59, 179, 193, .16); } .admin-nav a.on .ni { color: var(--kio); } /* grouped ops nav: tiny section labels split the strip into scannable clusters. Desktop flattens the section wrappers (display:contents) so the strip looks like one row; on phones each section collapses into a tab button that opens its items on a full-width row below. */ .admin-nav .nav-sec, .admin-nav .nav-sec-items { display: contents; } .admin-nav .nav-sec-btn { display: none; } .admin-nav .nav-group { margin-left: 10px; padding: 6px 8px 6px 14px; border-left: 1px solid var(--line); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; user-select: none; } .admin-nav .nav-count { background: var(--mi); color: #fff; border-radius: 9px; padding: 1px 7px; font-size: .66rem; font-weight: 700; margin-left: 5px; display: inline-block; vertical-align: 1px; } @media (max-width: 760px) { /* dense ops nav: every pixel goes to content on a phone */ .admin-nav { padding: 4px 6px; gap: 0; margin-bottom: 12px; } .admin-nav a { padding: 7px 9px; font-size: .84rem; } .admin-nav .nav-group { display: none; } .admin-nav .nav-sec { display: block; } .admin-nav .nav-sec-btn { display: inline-flex; align-items: center; gap: 3px; background: none; border: 1px solid transparent; cursor: pointer; font: inherit; color: var(--muted); font-weight: 600; font-size: .84rem; padding: 7px 9px; border-radius: 9px; } .admin-nav .nav-sec-btn.on { color: var(--ink); background: rgba(59, 179, 193, .16); } .admin-nav .nav-sec-btn .chev { font-size: 1rem; transition: transform .15s ease; } .admin-nav .nav-sec.open .nav-sec-btn .chev { transform: rotate(180deg); } .admin-nav .nav-sec-items { display: none; } .admin-nav .nav-sec.open .nav-sec-items { display: flex; flex-wrap: wrap; gap: 0; order: 10; width: 100%; border-top: 1px solid var(--line); margin-top: 5px; padding-top: 5px; } /* the open panel sits below ALL tabs, full width */ .admin-nav .nav-sec.open { display: contents; } /* admin pages generally: condense chrome so lists/stats fit a phone. Scoped via :has(.admin-nav) so public pages keep their spacing. */ body:has(.admin-nav) main.wrap { padding: 10px 8px 28px; } body:has(.admin-nav) h1 { font-size: 1.25rem; margin: 6px 0 10px; } body:has(.admin-nav) h2 { font-size: 1.05rem; } body:has(.admin-nav) .card { padding: 10px !important; border-radius: 12px; } body:has(.admin-nav) .grid2 { gap: 10px; } body:has(.admin-nav) table { font-size: .82rem; } } /* Wide screens: the ops console gets a real sidebar. The grouped strip's sections stack vertically (labels become headings) and the content area goes full-bleed - ops tables and dashboards want the width. Grows to dozens of links without layout changes. */ @media (min-width: 1100px) { .admin-nav { position: fixed; left: 0; top: 0; bottom: 0; width: 212px; z-index: 400; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 86px 12px 20px; border: none; border-right: 1px solid var(--line); border-radius: 0; background: rgba(8, 18, 32, .55); overflow-y: auto; } .admin-nav a { padding: 9px 12px; font-size: .88rem; gap: 10px; } .admin-nav .nav-count { margin-left: auto; } .admin-nav .nav-group { margin: 16px 2px 4px; padding: 0 12px; border-left: none; } body:has(.admin-nav) main.wrap { max-width: none; margin: 0; padding: 26px 32px 60px 244px; } body:has(.admin-nav) footer { margin-left: 212px; } } /* dashboard: compact stat tiles + the needs-attention work queue strip */ .attn-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .attn-item { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; color: var(--ink); font-size: .86rem; font-weight: 600; background: rgba(14, 29, 46, .45); } .attn-item .material-icons { font-size: 1.15rem; color: var(--muted); } .attn-item b { font-size: 1.05rem; } .attn-item.hot { border-color: rgba(245, 121, 79, .55); } .attn-item.hot .material-icons, .attn-item.hot b { color: var(--mi); } .attn-item.ok, .attn-item.ok b { color: var(--muted); font-weight: 500; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat-tile { padding: 14px 16px !important; } .stat-tile .st-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .02em; } .stat-tile .st-label .material-icons { font-size: 1rem; color: var(--kio); } .stat-tile .st-big { font-size: 1.7rem; font-weight: 800; line-height: 1.25; margin: 4px 0 2px; } .stat-tile .st-sub { color: var(--muted); font-size: .74rem; } /* Pagination: the framework's default view ships Tailwind-sized SVG arrows that balloon without Tailwind. Cap them and give the pager a compact themed look. */ nav[role="navigation"] svg { width: 16px; height: 16px; display: inline; vertical-align: middle; } nav[role="navigation"] { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: .82rem; } nav[role="navigation"] .hidden { display: none; } nav[role="navigation"] > div:first-child { display: none; } /* mobile prev/next duplicate */ nav[role="navigation"] a, nav[role="navigation"] span[aria-current] > span, nav[role="navigation"] span[aria-disabled] > span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 9px; text-decoration: none; color: var(--ink); line-height: 1; min-width: 32px; text-align: center; } nav[role="navigation"] a:hover { border-color: var(--kio); color: var(--kio); } nav[role="navigation"] span[aria-current] > span { background: rgba(59,179,193,.16); border-color: var(--kio); color: var(--kio); font-weight: 700; } nav[role="navigation"] span[aria-disabled] > span { opacity: .4; } nav[role="navigation"] p { color: var(--muted); margin: 0 8px 0 0; } .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; }