/* ========================================================================== Likoma Airlines — Application shell -------------------------------------------------------------------------- The v1 chrome: a persistent left rail instead of a horizontal header. The rail is fixed and the content column is inset by its width, so the navigation never scrolls away and the page keeps a single scroll context. Width is driven by one custom property, which is all that changes when the rail collapses. ========================================================================== */ :root { /* Wide enough for the longest label plus its submenu caret — "Flight status" and "Destinations" both need the room, and a truncated nav label is worse than a slightly wider rail. */ --navrail-width: 200px; --navrail-width-collapsed: 76px; --navrail-current: var(--navrail-width); } /* Collapsed state is stored on so it applies before first paint and never flashes open on a page load. */ [data-rail="collapsed"] { --navrail-current: var(--navrail-width-collapsed); } .lk-app { display: block; min-block-size: 100dvh; background-color: var(--color-background); } .lk-app__main { margin-inline-start: var(--navrail-current); min-block-size: 100dvh; display: flex; flex-direction: column; transition: margin-inline-start var(--duration-base) var(--ease-out); } .lk-app__content { flex: 1 0 auto; } /* --- Coming-soon announcement ---------------------------------------------- */ .lk-announce { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-warning-bg); color: var(--color-warning-fg); border-block-end: 1px solid var(--color-warning); } .lk-announce__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); flex: 1 0 auto; } .lk-announce__badge { flex-shrink: 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--color-warning); color: var(--color-surface); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .lk-announce__text { margin: 0; font-size: var(--text-sm); font-weight: 500; } .lk-announce__close { flex-shrink: 0; color: inherit; } /* --- Rail ----------------------------------------------------------------- */ .lk-navrail { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-header); inline-size: var(--navrail-current); display: flex; flex-direction: column; padding-block: var(--space-6) var(--space-5); background: var(--gradient-dawn); color: rgb(255 255 255 / 0.78); transition: inline-size var(--duration-base) var(--ease-out); overflow: visible; } .lk-navrail__brand { display: flex; align-items: center; justify-content: center; padding-inline: var(--space-4); margin-block-end: var(--space-6); min-block-size: 44px; } /* The stacked lockup is sized by WIDTH, not height. Constraining its height in a 172px rail shrinks the wordmark to the point where "Airlines Limited" is unreadable; giving it the available width keeps the lettering legible. */ .lk-navrail__logo-full { inline-size: 132px; block-size: auto; transition: inline-size var(--duration-base) var(--ease-out); } /* Collapsed: the full lockup gives way to the tail-fin mark alone. */ [data-rail="collapsed"] .lk-navrail__logo-full { display: none; } .lk-navrail__logo-mark { display: none; } [data-rail="collapsed"] .lk-navrail__logo-mark { display: block; block-size: 38px; inline-size: auto; } .lk-navrail__divider { block-size: 1px; margin: 0 var(--space-5) var(--space-5); background-color: rgb(255 255 255 / 0.14); } /* Deliberately not a scroll container: a flyout anchored to a nav item cannot escape one. Nine items fit comfortably, and the short-viewport rule at the foot of this file handles the exception. */ .lk-navrail__nav { display: flex; flex-direction: column; gap: var(--space-1); padding-inline: var(--space-3); overflow: visible; } .lk-navrail__item { position: relative; } /* --- Flyout submenu --------------------------------------------------------- Opens to the side of the rail on hover, and on focus moving into the item, so it is reachable by keyboard without any scripting. The invisible bridge in ::before spans the gap between rail and panel, so a diagonal mouse path does not dismiss it halfway across. ------------------------------------------------------------------------ */ .lk-navrail__caret { margin-inline-start: auto; display: inline-flex; opacity: 0.5; } .lk-navrail__caret svg { inline-size: 15px; block-size: 15px; } [data-rail="collapsed"] .lk-navrail__caret { display: none; } .lk-navrail__flyout { position: absolute; inset-block-start: calc(var(--space-3) * -1); inset-inline-start: 100%; z-index: var(--z-dropdown); margin-inline-start: var(--space-3); padding: var(--space-5); inline-size: max-content; max-inline-size: min(34rem, calc(100vw - var(--navrail-current) - var(--space-8))); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); background-color: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-2xl); opacity: 0; visibility: hidden; transform: translateX(-8px); transition: opacity var(--duration-fast) var(--ease-soft), transform var(--duration-base) var(--ease-out), visibility var(--duration-base); } .lk-navrail__flyout::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: 100%; inline-size: var(--space-4); } .lk-navrail__item:hover .lk-navrail__flyout, .lk-navrail__item:focus-within .lk-navrail__flyout { opacity: 1; visibility: visible; transform: translateX(0); } .lk-navrail__flyout-title { margin-block-end: var(--space-4); padding-block-end: var(--space-3); border-block-end: 1px solid var(--color-divider); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } .lk-navrail__flyout-cols { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(11rem, 1fr)); gap: var(--space-5); } /* Touch devices have no hover, and a flyout that opens on tap would swallow the tap meant for the section itself. */ @media (hover: none) { .lk-navrail__flyout { display: none; } .lk-navrail__caret { display: none; } } .lk-navrail__link { position: relative; display: flex; align-items: center; gap: var(--space-3); min-block-size: 46px; padding-inline: var(--space-3); border-radius: var(--radius-md); color: inherit; font-size: var(--text-base); font-weight: var(--weight-regular); white-space: nowrap; transition: var(--transition-colors); } .lk-navrail__link svg { inline-size: 21px; block-size: 21px; flex-shrink: 0; transition: color var(--duration-fast) var(--ease-soft); } .lk-navrail__link:hover { background-color: rgb(255 255 255 / 0.09); color: #fff; } .lk-navrail__link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } .lk-navrail__link[aria-current="page"] { background-color: rgb(255 255 255 / 0.12); color: #fff; font-weight: var(--weight-medium); } .lk-navrail__link[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; translate: 0 -50%; inline-size: 3px; block-size: 22px; border-radius: var(--radius-full); background-color: var(--blue-500); } /* Gated by App\Filters\LaunchGate — the link still goes somewhere (the coming-soon notice), so this is a dimmed look rather than a true disabled state: no pointer-events:none, which would break keyboard/AT focus. */ .lk-navrail__link[aria-disabled="true"] { opacity: 0.55; } .lk-navrail__soon { flex-shrink: 0; margin-inline-start: var(--space-2); padding: 1px var(--space-1); border-radius: var(--radius-sm); background: rgb(255 255 255 / 0.16); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } [data-rail="collapsed"] .lk-navrail__soon { display: none; } /* Label collapses to nothing rather than being removed, so the transition has something to animate and the accessible name never disappears. */ .lk-navrail__label { overflow: hidden; transition: opacity var(--duration-fast) var(--ease-soft); } [data-rail="collapsed"] .lk-navrail__label { opacity: 0; inline-size: 0; } [data-rail="collapsed"] .lk-navrail__link { justify-content: center; padding-inline: 0; } /* Collapsed rail shows the label as a tooltip on hover instead. */ [data-rail="collapsed"] .lk-navrail__link::after { content: attr(data-label); position: absolute; inset-inline-start: calc(100% + var(--space-3)); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background-color: var(--navy-900); color: #fff; font-size: var(--text-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-soft); z-index: var(--z-tooltip); } [data-rail="collapsed"] .lk-navrail__link:hover::after, [data-rail="collapsed"] .lk-navrail__link:focus-visible::after { opacity: 1; } .lk-navrail__foot { margin-block-start: auto; padding: var(--space-4) var(--space-3) 0; } /* --- Collapse toggle ------------------------------------------------------- Sits on the rail's edge, half over the content, exactly as the reference does — it belongs to neither region, which is what makes it read as a divider handle rather than a button someone forgot to align. ------------------------------------------------------------------------ */ .lk-navrail__toggle { position: absolute; inset-block-start: 84px; inset-inline-start: 100%; translate: -50% 0; z-index: 1; display: grid; place-items: center; inline-size: 28px; block-size: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background-color: var(--color-surface); color: var(--color-text-secondary); box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition-colors), transform var(--duration-fast) var(--ease-out); } .lk-navrail__toggle:hover { color: var(--color-primary); border-color: var(--color-primary); } .lk-navrail__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .lk-navrail__toggle svg { inline-size: 15px; block-size: 15px; transition: rotate var(--duration-base) var(--ease-out); } [data-rail="collapsed"] .lk-navrail__toggle svg { rotate: 180deg; } /* --- Top actions ----------------------------------------------------------- Locale, search and account, floating over the hero at the top of the content column. ------------------------------------------------------------------------ */ .lk-app__actions { position: absolute; inset-block-start: var(--space-6); inset-inline-end: clamp(var(--space-5), 3vw, var(--space-10)); z-index: var(--z-raised); display: flex; align-items: center; gap: var(--space-2); } .lk-app__locale { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: rgb(255 255 255 / 0.82); font-size: var(--text-sm); font-weight: var(--weight-medium); transition: var(--transition-colors); } .lk-app__locale:hover { color: #fff; } .lk-app__locale svg { inline-size: 17px; block-size: 17px; } .lk-app__locale-sep { inline-size: 1px; block-size: 13px; background-color: rgb(255 255 255 / 0.34); } /* --- Mobile ---------------------------------------------------------------- The rail becomes an off-canvas drawer and a slim bar carries the trigger. ------------------------------------------------------------------------ */ .lk-app__bar { display: none; } /* Short viewports: let the rail scroll rather than overflow the screen. A scroll container clips the flyouts, so they stand down here — every section is still reachable by following the rail link itself. */ @media (max-height: 680px) and (min-width: 1024px) { .lk-navrail__nav { overflow-y: auto; scrollbar-width: none; } .lk-navrail__nav::-webkit-scrollbar { display: none; } .lk-navrail__flyout { display: none; } .lk-navrail__caret { display: none; } } @media (max-width: 1023px) { :root { --navrail-current: 0px; } .lk-app__main { margin-inline-start: 0; } .lk-navrail { inline-size: var(--navrail-width); transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease-out); box-shadow: var(--shadow-2xl); } [data-rail="open"] .lk-navrail { transform: translateX(0); } /* Scrim behind the open drawer */ [data-rail="open"] .lk-app__main::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); background-color: var(--color-scrim); } .lk-navrail__toggle { display: none; } .lk-app__bar { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--gradient-dawn); color: #fff; } /* Sized by width so the wordmark stays readable on a phone rather than being squeezed by a height cap. */ .lk-app__bar img { inline-size: 150px; block-size: auto; } .lk-app__bar .lk-icon-btn { color: #fff; } .lk-app__actions { position: static; margin-inline-start: auto; } .lk-app__locale { padding-inline: var(--space-3); } }