/* ==================================================================== Home One — flat "liquid glass" UI ==================================================================== The design language is the one Trackr uses, ported to this app's markup: a near-black page with two ambient colour orbs behind it, and every raised thing a translucent pane that blurs what is behind it, edged with a single hairline border and a faint shine along its top. Surfaces are built from four tokens rather than from colours: --layer-1 the faintest fill — inputs, hover states, insets --surface a card / panel --layer-3 something raised out of a card, or a selected row --glass-border + --glass-shine the hairline edge and its highlight They are all *alpha over the page*, never opaque, which is what makes the blur read as glass instead of as flat grey. Two things must stay opaque — anything that floats over arbitrary content (menus, dropdowns, popovers) uses --bg-elev so its text never has page content showing through it. This file used to implement neumorphism: every raised element carried a pair of opposed shadows, a dark one down-right and a light one up-left, driven by --shadow-dark / --shadow-light. Both variables are gone. Raised things take --elev-card (one soft drop, straight down); recessed ones take a fill and a hairline. Do not reintroduce a light shadow — the raised bump it draws is the whole tell, and one left in a corner of the app is enough to make everything else look like a mistake. ==================================================================== */ :root { --bg: #0b0e15; /* Opaque surface for anything floating over unknown content. */ --bg-elev: #151b28; --bg-light: #1a2130; --surface: rgba(255, 255, 255, 0.055); --layer-1: rgba(255, 255, 255, 0.035); --layer-3: rgba(255, 255, 255, 0.115); --glass-border: rgba(255, 255, 255, 0.12); --glass-shine: rgba(255, 255, 255, 0.06); --hairline: rgba(255, 255, 255, 0.07); --text: #c7ccd6; --text-dim: #868c99; /* Alias: the radio-site tablet view at the end of this sheet was written against `--muted`, which nothing ever defined — every rule reading it fell back to inheriting its parent's colour instead of going dim. */ --muted: var(--text-dim); --heading: #e8ebf2; --accent: #5b8cff; --accent-dim: #3f63b8; --accent-glow: rgba(91, 140, 255, 0.35); --accent-soft: rgba(91, 140, 255, 0.14); --green: #46d39a; --red: #ff5f6d; --amber: #ffb454; /* Ambient orbs the glass refracts (see body::before / ::after). */ --orb-1: rgba(91, 140, 255, 0.30); --orb-2: rgba(70, 211, 154, 0.12); --radius: 18px; --radius-sm: 12px; --radius-xs: 8px; --blur-glass: blur(18px) saturate(1.4); --blur-heavy: blur(30px) saturate(1.5); /* Elevation. A single soft drop, straight down — never a directional pair. */ --elev-card: 0 8px 32px rgba(0, 0, 0, 0.45); --elev-pop: 0 14px 38px rgba(0, 0, 0, 0.6); } /* ==================================================================== Themes — selected via (Settings ▸ Appearance). The default :root above is the "dark" theme; the blocks below override the palette for the other themes. The same variables are reused by the theme-swatch previews so each swatch shows its own palette regardless of the page's active theme. A theme sets its page colour, its accent and — for the light one — the direction the glass layers tint in. Everything else is inherited from the block above, so a new theme is a dozen lines and not a second stylesheet. ==================================================================== */ /* The one theme where the glass tints *dark over light* rather than the other way round: white-alpha layers vanish against a pale page, so every layer, border and shine flips. */ :root[data-theme="light"], .theme-swatch[data-theme="light"] { --bg: #eef1f6; --bg-elev: #ffffff; --bg-light: #ffffff; --surface: rgba(255, 255, 255, 0.72); --layer-1: rgba(15, 23, 42, 0.04); --layer-3: rgba(15, 23, 42, 0.11); --glass-border: rgba(15, 23, 42, 0.12); --glass-shine: rgba(255, 255, 255, 0.75); --hairline: rgba(15, 23, 42, 0.09); --text: #38404e; --text-dim: #6b7280; --heading: #1f2733; --accent: #3b6ef0; --accent-dim: #93aef5; --accent-glow: rgba(59, 110, 240, 0.28); --accent-soft: rgba(59, 110, 240, 0.12); --green: #1aa06a; --red: #e23b4a; --amber: #d4881a; --orb-1: rgba(59, 110, 240, 0.18); --orb-2: rgba(26, 160, 106, 0.10); /* A heavy black drop reads as grime over a pale page. */ --elev-card: 0 8px 28px rgba(15, 23, 42, 0.12); --elev-pop: 0 14px 34px rgba(15, 23, 42, 0.18); } /* Light theme, surfaces that sit over a scrim. The scrim and the near-white glass are tuned against a dark page; over a light one the dark scrim shows straight through a 72%-white pane and every modal reads grey. Darken less, and make the pane itself nearly opaque. */ :root[data-theme="light"] .modal-overlay { background: rgba(15, 23, 42, .28); } :root[data-theme="light"] .modal { background: rgba(255, 255, 255, .93); } :root[data-theme="light"] .app-sidebar { background: rgba(255, 255, 255, .72); } :root[data-theme="light"] .bottom-nav { background: rgba(255, 255, 255, .8); } :root[data-theme="light"] .sheet-backdrop, :root[data-theme="light"] .site-backdrop { background: rgba(15, 23, 42, .3); } /* Green and amber fills are light enough that white text disappears on them. */ :root[data-theme="light"] .btn.green { color: #06281c; } :root[data-theme="midnight"], .theme-swatch[data-theme="midnight"] { --bg: #05070d; --bg-elev: #0e1523; --bg-light: #131c2c; --surface: rgba(255, 255, 255, 0.05); --layer-3: rgba(255, 255, 255, 0.12); --text: #c3cad8; --text-dim: #7b8597; --heading: #e8ecf5; --accent: #5b8cff; --accent-dim: #38528f; --accent-glow: rgba(91, 140, 255, 0.4); --accent-soft: rgba(91, 140, 255, 0.15); --orb-1: rgba(91, 140, 255, 0.28); --orb-2: rgba(56, 82, 143, 0.16); --elev-card: 0 8px 34px rgba(0, 0, 0, 0.6); } /* The warm one. Every other theme here is a blue-grey page with a blue accent; this is Gruvbox's retro brown-and-orange, and it is the only palette in the set where the glass tints warm — hence a bone-coloured hairline rather than the plain white-alpha the dark themes use, which over #282828 goes visibly cold and makes the panes look like they belong to a different sheet. */ :root[data-theme="gruvbox"], .theme-swatch[data-theme="gruvbox"] { --bg: #282828; --bg-elev: #32302f; --bg-light: #3c3836; --surface: rgba(251, 241, 199, 0.055); --layer-1: rgba(251, 241, 199, 0.035); --layer-3: rgba(251, 241, 199, 0.12); --glass-border: rgba(235, 219, 178, 0.14); --glass-shine: rgba(251, 241, 199, 0.06); --hairline: rgba(235, 219, 178, 0.08); --text: #ebdbb2; --text-dim: #a89984; --heading: #fbf1c7; --accent: #fe8019; --accent-dim: #d65d0e; --accent-glow: rgba(254, 128, 25, 0.30); --accent-soft: rgba(254, 128, 25, 0.14); --green: #b8bb26; --red: #fb4934; --amber: #fabd2f; --orb-1: rgba(254, 128, 25, 0.20); --orb-2: rgba(142, 192, 124, 0.14); } /* The accent is bright enough that white text on it is hard to read — the same problem the light theme has with its green and amber buttons. */ :root[data-theme="gruvbox"] .btn.accent { color: #282828; } /* ─── Theme picker (Settings ▸ Appearance) ──────────────── */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .theme-option { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); cursor: pointer; background: var(--layer-1); border: 1px solid var(--glass-border); transition: background .15s ease, border-color .15s ease; } .theme-option:hover { background: var(--layer-3); } .theme-option input { accent-color: var(--accent); } .theme-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); } .theme-swatch { display: inline-flex; gap: 3px; padding: 4px; border-radius: 8px; background: var(--bg); } .theme-swatch .sw { width: 14px; height: 24px; border-radius: 4px; } /* The swatch previews a theme's *page*, so it paints the layer over the page colour rather than borrowing the current theme's card. */ .theme-swatch .sw-bg { background: var(--surface); border: 1px solid var(--glass-border); } .theme-swatch .sw-accent { background: var(--accent); } .theme-swatch .sw-text { background: var(--text); } .theme-meta { display: flex; flex-direction: column; line-height: 1.3; } .theme-meta .dim { font-size: 12px; } * { box-sizing: border-box; margin: 0; padding: 0; } /* The page colour lives on , not on . See the orbs below: they are drawn as 's pseudo-elements and body must stay transparent for them to show through. */ html { background: var(--bg); } body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; background: transparent; color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ─── Ambient orbs ──────────────────────────────────────── Two fixed, heavily blurred colour washes behind everything. They are what the glass panes have to refract: without something coloured under them a translucent surface is just a slightly lighter grey, and the whole effect reads as flat. Fixed rather than scrolled, so the light stays put and the panes move across it. They hang off rather than so that nothing has to be lifted above them. Hanging them off means giving the app a z-index to sit on top, and that traps every z-index in the page inside one stacking context — which is how the phone drawer ended up *underneath* its own backdrop, blurred by the very overlay it was supposed to sit above. As 's children they paint before does, and the ordinary z-index of the chrome (backdrop 110 < drawer 120) means what it says. */ html::before, html::after { content: ""; position: fixed; pointer-events: none; filter: blur(40px); } html::before { top: -220px; right: -160px; width: 720px; height: 720px; background: radial-gradient(circle at center, var(--orb-1), var(--orb-2) 42%, transparent 70%); opacity: .6; } html::after { bottom: -260px; left: -160px; width: 620px; height: 620px; background: radial-gradient(circle at center, var(--orb-2), transparent 70%); opacity: .5; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent); text-decoration: underline; } /* Scrollbars, so they read as part of the glass rather than as OS chrome. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--layer-3); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; } /* ─── Glass primitives ─────────────────────────────────── `.neu` is the universal pane in this app's markup — cards, panels, the sidebar, popovers and most widgets all carry it — so giving it the glass treatment here is what carries the look across every page at once. The class name is left alone deliberately: renaming it would touch every template for no visual gain. */ .neu { position: relative; background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); box-shadow: var(--elev-card); } /* The single-pixel shine along the top edge. Inset from the corners so it fades out before the radius bends it. */ .neu::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-shine), rgba(255, 255, 255, .18), var(--glass-shine), transparent); pointer-events: none; border-radius: 1px; } :root[data-theme="light"] .neu::before { background: linear-gradient(90deg, transparent, var(--glass-shine), #fff, var(--glass-shine), transparent); } .neu-inset { background: var(--layer-1); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); } .neu-pressable { transition: background .15s ease, border-color .15s ease, transform .08s ease; cursor: pointer; } .neu-pressable:hover { border-color: var(--text-dim); } .neu-pressable:active { transform: scale(.985); } /* ─── Layout ────────────────────────────────── The shell is Trackr's, ported to this app's markup: a fixed rail down the left at desktop widths, and on a phone a tab bar along the bottom instead. There is no state in between. The 64px icon-only rail that used to sit between the two is gone — it kept the rail's cost (a sixth of a small laptop screen) while throwing away the labels, which are the half that makes a navigation usable by anyone who has not memorised the icons. The rail is `position: fixed` rather than a sticky flex item because a flex item shrinks: a page with something wide in it (the flow builder's canvas, a long host table) squeezed the rail and wrapped every label onto two lines. .app-main reserves the width with a margin instead, which nothing can negotiate away. ═════════════════════════════════════════════════════════════════════ */ :root { --sidebar-width: 240px; --bottomnav-height: 64px; } .app-shell { display: flex; min-height: 100vh; min-height: 100dvh; } /* The rail is glass in its own right, but a *panel* rather than a card: heavier blur, no drop shadow, and a single hairline down its right edge. */ .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 20px 14px; background: var(--layer-1); backdrop-filter: var(--blur-heavy); -webkit-backdrop-filter: var(--blur-heavy); border-right: 1px solid var(--glass-border); } /* `min-width: 0` lets the column shrink below its content's natural width, so the scroll containers inside it (.table-wrap, .flow-canvas) actually engage instead of pushing the whole page sideways. */ .app-main { flex: 1; min-width: 0; margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); max-width: 1400px; padding: 28px 32px 60px; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-weight: 700; font-size: 17px; color: var(--heading); } .brand:hover { color: var(--heading); text-decoration: none; } /* The brand mark is the one place the accent is used as a filled shape, which is what makes it read as a logo tile rather than another nav row. */ .brand-mark { width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-dim)); box-shadow: 0 4px 16px var(--accent-glow); color: #fff; font-size: 18px; } .brand-accent { color: var(--accent); } /* `overflow-y: auto` forces the x axis to `auto` as well (CSS Overflow §3: a non-visible value on one axis computes `visible` on the other to `auto`), so any horizontal movement inside a row pops a scrollbar along the bottom of the nav. The gutter gives that movement somewhere to land, and the matching negative margin keeps every row drawn exactly where it was. */ .nav-list { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; padding-right: 4px; margin-right: -4px; } /* One row shape for all three renderings of the nav: the rail, a section's fly-out, and the phone's More sheet. It is used on both and