/* ========================================================================== AdmitMe chrome for go.admitme.io: the Alf.io admin shell and its login page. Spec: docs/brand/admitme-design-system.md. Tokens and component values mirror ems-frontend/src/assets/styles/main.css + tailwind.config.js. rebrand.py links this LAST in (after Bootstrap, admin.css, every bower sheet, reservation-create.css and the Lit admin's main-*.css). WHY NO !important: every override repeats Bootstrap 3.4.1's own selector group for that state -- base, :focus/.focus, :hover, :active/.active/.open>.dropdown- toggle, :active:hover, .disabled/[disabled]. Same specificity, later in the cascade, so this file wins. A shorter selector silently loses. rebrand.py fails the build if the jar stops shipping Bootstrap v3.4.1; if that ever fires, re-copy the groups from the new bootstrap-admin.min.css before bumping it. The only !important is the reduced-motion block, as in EMS. Organiser chrome is not themeable (docs/brand/themes.md §3): no [data-theme], no --theme-*. Event themes load on the public site only. Fonts resolve from //resources/css/ to classpath:/font/, which the font handler serves ONE path segment deep. Keep them directly under font/. ========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../font/admitme-inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../font/admitme-inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../font/admitme-bricolage-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../font/admitme-bricolage-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../font/admitme-jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------------------------------------------------------------- tokens -- */ :root { /* Bootstrap sets html{font-size:10px}. The Lit admin's main-*.css resets it on the admin shell, but the login page never loads that file. */ font-size: 16px; /* Same names, channels and values as ems-frontend main.css. */ --primary-50: 255 244 240; --primary-100: 255 229 219; --primary-200: 255 203 183; --primary-300: 255 168 136; --primary-400: 255 125 80; --primary-500: 255 100 49; --primary-600: 240 70 22; --primary-700: 199 52 14; --primary-800: 158 45 18; --primary-900: 128 41 20; --am-orange: #ff6431; --am-orange-deep: #e04413; --am-orange-soft: #fff1eb; --am-orange-text: #c7340e; --ink-1000: #0f0f0b; --ink-950: #171710; --ink-900: #201f18; --ink-800: #2b2a22; --ink-700: #3b3a31; --ink-600: #55534a; --ink-500: #6e6c63; --ink-400: #92908a; --ink-300: #b8b6b0; --ink-200: #d8d7d2; --ink-150: #e6e5e0; --ink-100: #efeeea; --ink-50: #f7f6f3; --paper: #ffffff; --success-50: #ecfdf5; --success-200: #a7f3d0; --success-500: #10b981; --success-700: #047857; --warning-50: #fffbeb; --warning-200: #fde68a; --warning-500: #f59e0b; --warning-700: #b45309; --danger-50: #fef2f2; --danger-200: #fecaca; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c; --info-50: #eff6ff; --info-200: #bfdbfe; --info-500: #3b82f6; --info-700: #1d4ed8; --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-display: 'Bricolage Grotesque', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); --motion-quick: 0.18s; --motion-standard: 0.32s; --motion-slow: 0.48s; --ease-brand: cubic-bezier(0.4, 0, 0.2, 1); --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* Shoelace (the Lit admin components). Its theme only exists as :root custom properties, which inherit into the shadow roots, so this is the one lever. */ --sl-font-sans: var(--font-sans); --sl-font-mono: var(--font-mono); --sl-color-primary-50: #fff4f0; --sl-color-primary-100: #ffe5db; --sl-color-primary-200: #ffcbb7; --sl-color-primary-300: #ffa888; --sl-color-primary-400: #ff7d50; --sl-color-primary-500: #ff6431; --sl-color-primary-600: #f04616; --sl-color-primary-700: #c7340e; --sl-color-primary-800: #9e2d12; --sl-color-primary-900: #802914; --sl-color-primary-950: #5c1d0e; --sl-color-neutral-0: #ffffff; --sl-color-neutral-50: #f7f6f3; --sl-color-neutral-100: #efeeea; --sl-color-neutral-200: #d8d7d2; --sl-color-neutral-300: #b8b6b0; --sl-color-neutral-400: #92908a; --sl-color-neutral-500: #6e6c63; --sl-color-neutral-600: #55534a; --sl-color-neutral-700: #3b3a31; --sl-color-neutral-800: #2b2a22; --sl-color-neutral-900: #201f18; --sl-color-neutral-950: #171710; --sl-color-neutral-1000: #0f0f0b; --sl-border-radius-small: 6px; --sl-border-radius-medium: 8px; --sl-border-radius-large: 12px; --sl-border-radius-x-large: 16px; --sl-focus-ring-color: var(--am-orange); --sl-focus-ring-width: 2px; --sl-focus-ring-offset: 2px; --sl-input-border-color-focus: var(--am-orange); --sl-input-focus-ring-color: rgb(255 100 49 / 0.2); } /* ------------------------------------------------------------------ base -- */ /* Inter at 15px sets about as dense as Bootstrap's 16px Source Sans (Inter's x-height is ~12% taller), so the admin keeps its density. */ body { font-family: var(--font-sans); font-size: 15px; color: var(--ink-800); background-color: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); font-weight: 700; color: var(--ink-950); letter-spacing: -0.01em; } h1, .h1 { font-size: 28px; } h2, .h2 { font-size: 24px; } h3, .h3 { font-size: 20px; } h4, .h4 { font-size: 17px; } /* Alf.io uses h5/h6 as subtitle prose ("Here the categories that have been defined..."). Bold display type reads as shouting at that size. */ h5, .h5 { font-size: 15px; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; } h6, .h6 { font-size: 13px; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; } a { color: rgb(var(--primary-700)); } a:hover, a:focus { color: rgb(var(--primary-800)); } /* Event names in the events list: a column of orange titles reads as noise. */ .list-group-item-heading a { color: var(--ink-950); } .list-group-item-heading a:hover, .list-group-item-heading a:focus { color: rgb(var(--primary-700)); } hr { border-top-color: var(--ink-150); } ::selection { background-color: var(--am-orange); color: #fff; } code, kbd, pre, samp { font-family: var(--font-mono); } code { color: rgb(var(--primary-800)); background-color: rgb(var(--primary-50)); border-radius: var(--radius-sm); } pre { color: var(--ink-800); background-color: var(--ink-50); border-color: var(--ink-150); border-radius: var(--radius-md); } .text-muted { color: var(--ink-500); } .text-primary { color: rgb(var(--primary-700)); } a.text-primary:hover, a.text-primary:focus { color: rgb(var(--primary-800)); } .text-success { color: var(--success-700); } .text-info { color: var(--info-700); } .text-warning { color: var(--warning-700); } .text-danger { color: var(--danger-700); } .bg-primary { color: #fff; background-color: rgb(var(--primary-700)); } .bg-success { background-color: var(--success-50); } .bg-info { background-color: var(--info-50); } .bg-warning { background-color: var(--warning-50); } .bg-danger { background-color: var(--danger-50); } .bg-gray { background-color: var(--ink-50); } /* ----------------------------------------------------------------- focus -- */ /* Bootstrap paints a 5px UA outline on :focus, so it also shows after a mouse click. Drop that, then draw the §7 ring on :focus-visible only. The ring selectors must out-rank or equal the :focus ones above them, which is why they are spelled out rather than a bare :focus-visible. */ a:focus { outline: 0; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: 0; } input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: 0; } :focus-visible, a:focus-visible, .btn:focus-visible, .btn:active:focus-visible, .btn.active:focus-visible, input[type="file"]:focus-visible, input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible, .dropdown-toggle:focus-visible, .btn-group.open .dropdown-toggle:focus-visible, .dropdown-menu > .active > a:focus-visible, .navbar-toggle:focus-visible, .close:focus-visible { outline: 2px solid var(--am-orange); outline-offset: 2px; } /* ui-bootstrap focuses the modal window itself on open; Bootstrap strips that outline on purpose, and the bare :focus-visible above would put it back. */ .modal:focus-visible, .modal-content:focus-visible { outline: 0; } input[type="checkbox"], input[type="radio"] { accent-color: var(--am-orange); } /* --------------------------------------------------------------- buttons -- */ /* Mapped by how Alf.io actually uses each class, not by name: btn-success "add new", "Create new event", Confirm check in -> EMS .btn-primary btn-primary btn-xs Detail / Settings / Check-In on every row -> EMS .btn-secondary btn-primary "download attendees' data" beside a btn-default "close"; the scanner's Scan / Next Scan -> ink fill btn-default, btn-info -> EMS .btn-secondary btn-warning Save / Edit / Close / Send / Publish now -> ink fill btn-danger -> EMS .btn-danger Several are swapped by state (users.html success/warning, reservation-cancel danger/warning), so each pair above must stay visibly distinct. */ /* Alf.io ships a 16px Bootstrap build, so .form-control is a fixed 37px (34 sm, 50 lg). At 15px type these line-heights keep a button exactly as tall as the field beside it in an .input-group (date-time.html, the list searches); the ratio-based stock ones leave a 1.6px step. */ .btn { font-size: 15px; line-height: 23px; font-weight: 600; border-radius: var(--radius-md); transition: color var(--motion-quick) var(--ease-brand), background-color var(--motion-quick) var(--ease-brand), border-color var(--motion-quick) var(--ease-brand), box-shadow var(--motion-quick) var(--ease-brand); } .btn:active, .btn.active { box-shadow: inset 0 1px 2px rgba(23, 23, 16, 0.1); } .btn-lg, .btn-group-lg > .btn { font-size: 18px; line-height: 28px; border-radius: var(--radius-md); } .btn-sm, .btn-group-sm > .btn { font-size: 13px; line-height: 22px; border-radius: var(--radius-sm); } .btn-xs, .btn-group-xs > .btn { font-size: 13px; line-height: 21px; border-radius: var(--radius-sm); } /* secondary: default, info, and row-sized primary. The .btn-xs selectors out-rank the ink .btn-primary group below, so both can hold every state. */ .btn-default, .btn-primary.btn-xs, .btn-info { color: var(--ink-700); background-color: var(--paper); border-color: var(--ink-200); box-shadow: var(--shadow-xs); } .btn-default:focus, .btn-default.focus, .btn-primary.btn-xs:focus, .btn-primary.btn-xs.focus, .btn-info:focus, .btn-info.focus { color: var(--ink-700); background-color: var(--paper); border-color: var(--ink-200); } .btn-default:hover, .btn-primary.btn-xs:hover, .btn-info:hover { color: var(--ink-950); background-color: var(--ink-50); border-color: var(--ink-300); } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default, .btn-primary.btn-xs:active, .btn-primary.btn-xs.active, .open > .dropdown-toggle.btn-primary.btn-xs, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { color: var(--ink-950); background-color: var(--ink-100); border-color: var(--ink-300); } .btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus, .btn-primary.btn-xs:active:hover, .btn-primary.btn-xs.active:hover, .open > .dropdown-toggle.btn-primary.btn-xs:hover, .btn-primary.btn-xs:active:focus, .btn-primary.btn-xs.active:focus, .open > .dropdown-toggle.btn-primary.btn-xs:focus, .btn-primary.btn-xs:active.focus, .btn-primary.btn-xs.active.focus, .open > .dropdown-toggle.btn-primary.btn-xs.focus, .btn-info:active:hover, .btn-info.active:hover, .open > .dropdown-toggle.btn-info:hover, .btn-info:active:focus, .btn-info.active:focus, .open > .dropdown-toggle.btn-info:focus, .btn-info:active.focus, .btn-info.active.focus, .open > .dropdown-toggle.btn-info.focus { color: var(--ink-950); background-color: var(--ink-100); border-color: var(--ink-300); } .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-primary.btn-xs.disabled:hover, .btn-primary.btn-xs[disabled]:hover, fieldset[disabled] .btn-primary.btn-xs:hover, .btn-primary.btn-xs.disabled:focus, .btn-primary.btn-xs[disabled]:focus, fieldset[disabled] .btn-primary.btn-xs:focus, .btn-primary.btn-xs.disabled.focus, .btn-primary.btn-xs[disabled].focus, fieldset[disabled] .btn-primary.btn-xs.focus, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus { background-color: var(--paper); border-color: var(--ink-200); } .btn-default .badge, .btn-primary.btn-xs .badge, .btn-info .badge { color: #fff; background-color: var(--ink-600); } /* primary: success */ .btn-success { color: #fff; background-color: rgb(var(--primary-500)); border-color: rgb(var(--primary-500)); box-shadow: var(--shadow-sm); } .btn-success:focus, .btn-success.focus { color: #fff; background-color: rgb(var(--primary-500)); border-color: rgb(var(--primary-500)); } .btn-success:hover { color: #fff; background-color: rgb(var(--primary-600)); border-color: rgb(var(--primary-600)); } .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { color: #fff; background-color: rgb(var(--primary-700)); border-color: rgb(var(--primary-700)); } .btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus { color: #fff; background-color: rgb(var(--primary-700)); border-color: rgb(var(--primary-700)); } .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus { background-color: rgb(var(--primary-500)); border-color: rgb(var(--primary-500)); } .btn-success .badge { color: rgb(var(--primary-700)); background-color: #fff; } /* ink: warning and full-size primary. No EMS equivalent; both are commits here. */ .btn-warning, .btn-primary { color: #fff; background-color: var(--ink-900); border-color: var(--ink-900); box-shadow: var(--shadow-sm); } .btn-warning:focus, .btn-warning.focus, .btn-primary:focus, .btn-primary.focus { color: #fff; background-color: var(--ink-900); border-color: var(--ink-900); } .btn-warning:hover, .btn-primary:hover { color: #fff; background-color: var(--ink-700); border-color: var(--ink-700); } .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #fff; background-color: var(--ink-1000); border-color: var(--ink-1000); } .btn-warning:active:hover, .btn-warning.active:hover, .open > .dropdown-toggle.btn-warning:hover, .btn-warning:active:focus, .btn-warning.active:focus, .open > .dropdown-toggle.btn-warning:focus, .btn-warning:active.focus, .btn-warning.active.focus, .open > .dropdown-toggle.btn-warning.focus, .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus { color: #fff; background-color: var(--ink-1000); border-color: var(--ink-1000); } .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled.focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning.focus, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus { background-color: var(--ink-900); border-color: var(--ink-900); } .btn-warning .badge, .btn-primary .badge { color: var(--ink-900); background-color: #fff; } /* danger: one step darker than EMS so white labels clear AA (4.83:1 vs 3.76:1). */ .btn-danger { color: #fff; background-color: var(--danger-600); border-color: var(--danger-600); box-shadow: var(--shadow-sm); } .btn-danger:focus, .btn-danger.focus { color: #fff; background-color: var(--danger-600); border-color: var(--danger-600); } .btn-danger:hover { color: #fff; background-color: var(--danger-700); border-color: var(--danger-700); } .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { color: #fff; background-color: var(--danger-700); border-color: var(--danger-700); } .btn-danger:active:hover, .btn-danger.active:hover, .open > .dropdown-toggle.btn-danger:hover, .btn-danger:active:focus, .btn-danger.active:focus, .open > .dropdown-toggle.btn-danger:focus, .btn-danger:active.focus, .btn-danger.active.focus, .open > .dropdown-toggle.btn-danger.focus { color: #fff; background-color: var(--danger-700); border-color: var(--danger-700); } .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled.focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger.focus { background-color: var(--danger-600); border-color: var(--danger-600); } .btn-danger .badge { color: var(--danger-700); background-color: #fff; } .btn-link { color: rgb(var(--primary-700)); } .btn-link:hover, .btn-link:focus { color: rgb(var(--primary-800)); } .btn-link[disabled]:hover, fieldset[disabled] .btn-link:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:focus { color: var(--ink-400); } .close { color: var(--ink-950); text-shadow: none; } /* ---------------------------------------------------------------- navbar -- */ .navbar-default { background-color: var(--paper); border-color: var(--ink-150); } .navbar-default .navbar-text { color: var(--ink-500); } .navbar-default .navbar-nav > li > a { color: var(--ink-600); font-weight: 500; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: var(--ink-950); background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: var(--ink-950); background-color: transparent; box-shadow: inset 0 -2px 0 var(--am-orange); } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: var(--ink-950); background-color: var(--ink-50); } .navbar-default .navbar-toggle { border-color: var(--ink-200); border-radius: var(--radius-md); } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: var(--ink-50); } .navbar-default .navbar-toggle .icon-bar { background-color: var(--ink-700); } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: var(--ink-150); } .navbar-default .navbar-link { color: var(--ink-600); } .navbar-default .navbar-link:hover { color: var(--ink-950); } /* The shell's 40px wordmark sits flush with the top of the 50px bar. */ .navbar-header > a > img { margin-top: 5px; } /* TRAP: the bar is fixed and .menu-spacer pads content by exactly 50px, so a nav that wraps to two rows hides the top of every page. An owner's full menu already wraps at 1440px in stock Alf.io; these widths buy back ~150px so it fits there. A long username can still push it over. */ @media (min-width: 992px) { .navbar-default .navbar-nav > li > a { font-size: 14px; } .navbar-nav > li > a { padding-left: 10px; padding-right: 10px; } .navbar-text { margin-left: 8px; margin-right: 8px; } } /* Below the 992px float breakpoint the nav stacks; an underline reads wrong there. */ @media (max-width: 991px) { .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { box-shadow: inset 2px 0 0 var(--am-orange); background-color: var(--ink-50); } } /* Section labels in the collapsed mobile menu (Actions / Download / Status). */ .navbar-nav > li.navbar-header > h4 { margin: 16px 15px 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); } /* ------------------------------------------------------- sidebar + pills -- */ .nav > li > a:hover, .nav > li > a:focus { background-color: var(--ink-50); } .nav-pills > li > a { color: var(--ink-700); border-radius: var(--radius-sm); padding: 8px 12px; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: rgb(var(--primary-700)); background-color: rgb(var(--primary-50)); font-weight: 600; } .list-group-item.active > .badge, .nav-pills > .active > a > .badge { color: #fff; background-color: rgb(var(--primary-700)); } /* Copies of admin.css's own pill imitation (Status: waiting list, pending payments). */ a.emulate-nav-pills-link { color: var(--ink-700); border-radius: var(--radius-sm); padding: 8px 12px; } .emulate-nav-pills-link + .active > .badge { color: #fff; background-color: rgb(var(--primary-700)); } .emulate-nav-pills-link + .active, .emulate-nav-pills-link + .active :hover, .emulate-nav-pills-link + .active :focus { color: rgb(var(--primary-700)); background-color: rgb(var(--primary-50)); } .emulate-nav-pills-link:hover, .emulate-nav-pills-link:focus { background-color: var(--ink-50); } /* §4 plain eyebrow. ink-500, not EMS .eyebrow's ink-400: 5.27:1 vs 3.19:1 on paper. */ .sidebar h4.text-muted, .sidebar .text-muted > h4 { margin: 20px 0 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); } .sidebar footer h5.text-muted { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-500); } .sidebar-header { border-bottom-color: var(--ink-150); } /* -------------------------------------------------------- page structure -- */ .page-header { margin: 32px 0 16px; padding-bottom: 8px; border-bottom-color: var(--ink-150); } legend { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink-950); border-bottom-color: var(--ink-150); } .panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .panel-heading { padding: 10px 16px; border-top-left-radius: 11px; border-top-right-radius: 11px; } .panel-footer { background-color: var(--ink-50); border-top-color: var(--ink-150); border-bottom-right-radius: 11px; border-bottom-left-radius: 11px; } .panel-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; } .panel-group .panel { border-radius: var(--radius-lg); } .panel-default { border-color: var(--ink-150); } .panel-default > .panel-heading { color: var(--ink-950); background-color: var(--ink-50); border-color: var(--ink-150); } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: var(--ink-150); } .panel-default > .panel-heading .badge { color: #fff; background-color: var(--ink-600); } .panel-default > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: var(--ink-150); } .panel-primary { border-color: rgb(var(--primary-200)); } .panel-primary > .panel-heading { color: rgb(var(--primary-800)); background-color: rgb(var(--primary-50)); border-color: rgb(var(--primary-200)); } .panel-success { border-color: var(--success-200); } .panel-success > .panel-heading { color: var(--success-700); background-color: var(--success-50); border-color: var(--success-200); } .panel-info { border-color: var(--info-200); } .panel-info > .panel-heading { color: var(--info-700); background-color: var(--info-50); border-color: var(--info-200); } .panel-warning { border-color: var(--warning-200); } .panel-warning > .panel-heading { color: var(--warning-700); background-color: var(--warning-50); border-color: var(--warning-200); } .panel-danger { border-color: var(--danger-200); } .panel-danger > .panel-heading { color: var(--danger-700); background-color: var(--danger-50); border-color: var(--danger-200); } /* Inner corners follow the 12px outer radius, or child backgrounds square off the panel's curved border (the events list is a list-group inside a panel). */ .panel > .list-group:first-child .list-group-item:first-child, .panel > .panel-collapse > .list-group:first-child .list-group-item:first-child { border-top-left-radius: 11px; border-top-right-radius: 11px; } .panel > .list-group:last-child .list-group-item:last-child, .panel > .panel-collapse > .list-group:last-child .list-group-item:last-child { border-bottom-right-radius: 11px; border-bottom-left-radius: 11px; } .panel > .table:first-child, .panel > .table-responsive:first-child > .table:first-child { border-top-left-radius: 11px; border-top-right-radius: 11px; } .panel > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { border-top-left-radius: 11px; } .panel > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { border-top-right-radius: 11px; } .panel > .table:last-child, .panel > .table-responsive:last-child > .table:last-child { border-bottom-right-radius: 11px; border-bottom-left-radius: 11px; } .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { border-bottom-left-radius: 11px; } .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { border-bottom-right-radius: 11px; } .well { background-color: var(--ink-50); border-color: var(--ink-150); border-radius: var(--radius-lg); box-shadow: none; } /* admin.css structures */ div.list-even { background-color: var(--ink-50); border-top-color: var(--ink-150); border-bottom-color: var(--ink-150); } div.category { border-color: var(--ink-150); } .category-description { border-bottom-color: var(--ink-150); } /* ---------------------------------------------------------- list groups -- */ .list-group-item { border-color: var(--ink-150); } .list-group-item:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .list-group-item:last-child { border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); } .list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus { color: var(--ink-400); background-color: var(--ink-50); } .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { color: rgb(var(--primary-800)); background-color: rgb(var(--primary-50)); border-color: rgb(var(--primary-200)); } .list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text { color: rgb(var(--primary-800)); } a.list-group-item, button.list-group-item { color: var(--ink-700); } a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading { color: var(--ink-950); } a.list-group-item:hover, button.list-group-item:hover, a.list-group-item:focus, button.list-group-item:focus { color: var(--ink-950); background-color: var(--ink-50); } .list-group-item-text { color: var(--ink-600); } /* ---------------------------------------------------------------- tables -- */ /* No header fill: a tinted would square off a panel's rounded corner. */ .table { font-variant-numeric: tabular-nums; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border-top-color: var(--ink-150); } .table > thead > tr > th { border-bottom: 1px solid var(--ink-200); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-500); } .table-bordered { border-color: var(--ink-150); } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-color: var(--ink-150); } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom-width: 1px; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--ink-50); } .table-hover > tbody > tr:hover { background-color: var(--ink-100); } .table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th { background-color: var(--success-50); } .table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info, .table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th { background-color: var(--info-50); } .table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th { background-color: var(--warning-50); } .table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, .table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th { background-color: var(--danger-50); } /* ----------------------------------------------------------------- forms -- */ label { font-weight: 600; color: var(--ink-700); } .help-block { color: var(--ink-500); } .form-control { font-size: 15px; color: var(--ink-800); border-color: var(--ink-200); border-radius: var(--radius-md); box-shadow: none; transition: border-color var(--motion-quick) var(--ease-brand), box-shadow var(--motion-quick) var(--ease-brand); } /* 1px border + 1px spread = the §7 2px orange edge, plus EMS .input's soft halo. */ .form-control:focus { border-color: var(--am-orange); outline: 0; box-shadow: 0 0 0 1px var(--am-orange), 0 0 0 4px rgb(var(--primary-500) / 0.2); } .form-control::-moz-placeholder { color: var(--ink-400); } .form-control:-ms-input-placeholder { color: var(--ink-400); } .form-control::-webkit-input-placeholder { color: var(--ink-400); } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { color: var(--ink-600); background-color: var(--ink-50); } .input-sm { font-size: 13px; border-radius: var(--radius-sm); } .form-group-sm .form-control { font-size: 13px; border-radius: var(--radius-sm); } .input-lg { font-size: 18px; border-radius: var(--radius-md); } .form-group-lg .form-control { font-size: 18px; border-radius: var(--radius-md); } .input-group-addon { font-size: 15px; color: var(--ink-600); background-color: var(--ink-50); border-color: var(--ink-200); border-radius: var(--radius-md); } .input-group-addon.input-sm { font-size: 13px; border-radius: var(--radius-sm); } output { font-size: 15px; color: var(--ink-700); } /* admin.css marks touched invalid fields red at (0,2,1); keep that, in §2.3 red. */ input.ng-invalid.ng-touched, select.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched, form.force-show-errors input.ng-invalid, form.force-show-errors select.ng-invalid, form.force-show-errors textarea.ng-invalid { border-color: var(--danger-500); } .has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label { color: var(--success-700); } .has-success .form-control { border-color: var(--success-500); box-shadow: none; } .has-success .form-control:focus { border-color: var(--success-500); box-shadow: 0 0 0 1px var(--success-500), 0 0 0 4px rgb(16 185 129 / 0.2); } .has-success .input-group-addon { color: var(--success-700); background-color: var(--success-50); border-color: var(--success-500); } .has-success .form-control-feedback { color: var(--success-700); } .has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox, .has-warning .radio-inline, .has-warning .checkbox-inline, .has-warning.radio label, .has-warning.checkbox label, .has-warning.radio-inline label, .has-warning.checkbox-inline label { color: var(--warning-700); } .has-warning .form-control { border-color: var(--warning-500); box-shadow: none; } .has-warning .form-control:focus { border-color: var(--warning-500); box-shadow: 0 0 0 1px var(--warning-500), 0 0 0 4px rgb(245 158 11 / 0.2); } .has-warning .input-group-addon { color: var(--warning-700); background-color: var(--warning-50); border-color: var(--warning-500); } .has-warning .form-control-feedback { color: var(--warning-700); } .has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label { color: var(--danger-700); } .has-error .form-control { border-color: var(--danger-500); box-shadow: none; } .has-error .form-control:focus { border-color: var(--danger-500); box-shadow: 0 0 0 1px var(--danger-500), 0 0 0 4px rgb(239 68 68 / 0.2); } .has-error .input-group-addon { color: var(--danger-700); background-color: var(--danger-50); border-color: var(--danger-500); } .has-error .form-control-feedback { color: var(--danger-700); } /* ---------------------------------------------------- alerts, chips, bars -- */ /* EMS .alert-* is tint + border and leans on a coloured icon. Alf.io's alerts are bare text, and the check-in scanner reports its verdict (checked in / must pay / rejected) in one, so the status colour has to stay on the text. */ .alert { color: var(--ink-800); border-radius: var(--radius-lg); } .alert-success { color: var(--success-700); background-color: var(--success-50); border-color: var(--success-200); } .alert-success hr { border-top-color: var(--success-200); } .alert-info { color: var(--info-700); background-color: var(--info-50); border-color: var(--info-200); } .alert-info hr { border-top-color: var(--info-200); } .alert-warning { color: var(--warning-700); background-color: var(--warning-50); border-color: var(--warning-200); } .alert-warning hr { border-top-color: var(--warning-200); } .alert-danger { color: var(--danger-700); background-color: var(--danger-50); border-color: var(--danger-200); } .alert-danger hr { border-top-color: var(--danger-200); } /* Tinted chips, as EMS .badge-*: white-on-status fills fail AA at 75% size. No hover tints: no template renders a .label as a link. */ .label { font-weight: 600; border-radius: var(--radius-sm); } .label-default { color: var(--ink-600); background-color: var(--ink-100); } .label-primary { color: rgb(var(--primary-700)); background-color: rgb(var(--primary-50)); } .label-success { color: var(--success-700); background-color: var(--success-50); } .label-info { color: var(--info-700); background-color: var(--info-50); } .label-warning { color: var(--warning-700); background-color: var(--warning-50); } .label-danger { color: var(--danger-700); background-color: var(--danger-50); } .badge { font-size: 12px; font-weight: 600; background-color: var(--ink-600); } /* Bar fills stay stock. They are data: event detail's capacity bars pair .progress-bar-info with admin.css's purple .slice-pending (which loses to any later .progress-bar-info) and share the slice-* colours of the statistics legend. */ .progress { background-color: var(--ink-100); box-shadow: none; } .progress-bar { box-shadow: none; } .breadcrumb { background-color: var(--ink-50); border-radius: var(--radius-md); } .breadcrumb > li + li:before { color: var(--ink-300); } .breadcrumb > .active { color: var(--ink-500); } .pagination > li > a, .pagination > li > span { color: var(--ink-700); border-color: var(--ink-200); } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: var(--ink-950); background-color: var(--ink-50); border-color: var(--ink-200); } .pagination > li:first-child > a, .pagination > li:first-child > span { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .pagination > li:last-child > a, .pagination > li:last-child > span { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { color: rgb(var(--primary-700)); background-color: rgb(var(--primary-50)); border-color: rgb(var(--primary-200)); font-weight: 600; } .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { color: var(--ink-400); background-color: var(--paper); border-color: var(--ink-200); } .nav-tabs { border-bottom-color: var(--ink-150); } .nav-tabs > li > a { color: var(--ink-600); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .nav-tabs > li > a:hover { border-color: var(--ink-100) var(--ink-100) var(--ink-150); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--ink-950); border-color: var(--ink-150); border-bottom-color: transparent; box-shadow: inset 0 2px 0 var(--am-orange); } /* ---------------------------------------------- overlays: menus, modals -- */ .dropdown-menu { font-size: 15px; border-color: var(--ink-150); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .dropdown-menu .divider { background-color: var(--ink-150); } .dropdown-menu > li > a { color: var(--ink-700); padding: 5px 16px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: var(--ink-950); background-color: var(--ink-50); } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: rgb(var(--primary-700)); background-color: rgb(var(--primary-50)); } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: var(--ink-400); } .dropdown-header { color: var(--ink-500); } .modal-content { border-color: var(--ink-150); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); } @media (min-width: 768px) { .modal-content { box-shadow: var(--shadow-xl); } } .modal-backdrop { background-color: var(--ink-1000); } .modal-backdrop.in { opacity: 0.4; } .modal-header { border-bottom-color: var(--ink-150); } .modal-footer { border-top-color: var(--ink-150); } .modal-header h1, .modal-header h2 { font-size: 22px; } .tooltip { font-family: var(--font-sans); } .tooltip.in { opacity: 1; } .tooltip-inner { background-color: var(--ink-950); border-radius: var(--radius-sm); } .tooltip.top .tooltip-arrow { border-top-color: var(--ink-950); } .tooltip.top-left .tooltip-arrow { border-top-color: var(--ink-950); } .tooltip.top-right .tooltip-arrow { border-top-color: var(--ink-950); } .tooltip.right .tooltip-arrow { border-right-color: var(--ink-950); } .tooltip.left .tooltip-arrow { border-left-color: var(--ink-950); } .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--ink-950); } .tooltip.bottom-left .tooltip-arrow { border-bottom-color: var(--ink-950); } .tooltip.bottom-right .tooltip-arrow { border-bottom-color: var(--ink-950); } .popover { font-family: var(--font-sans); border-color: var(--ink-150); border-radius: var(--radius-lg); } .popover-title { font-size: 15px; font-weight: 600; background-color: var(--ink-50); border-bottom-color: var(--ink-150); border-radius: 11px 11px 0 0; } /* bootstrap-daterangepicker (daterangepicker-bs3.css). Selected dates are small text on a fill, so primary-700 (5.35:1), not the 2.95:1 brand orange. */ .daterangepicker .ranges li { color: rgb(var(--primary-700)); background: var(--ink-50); border-color: var(--ink-50); } .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { color: #fff; background: rgb(var(--primary-700)); border-color: rgb(var(--primary-700)); } .daterangepicker td.available:hover, .daterangepicker td.available.today, .daterangepicker th.available:hover { background: var(--ink-100); } .daterangepicker td.in-range { background: rgb(var(--primary-50)); } .daterangepicker td.today.active, .daterangepicker td.active, .daterangepicker td.active:hover { color: #fff; background-color: rgb(var(--primary-700)); border-color: rgb(var(--primary-700)); } /* ============================================================ login page == */ /* Scoped to body.am-auth, which only login.ms carries (rebrand.py rewrites it). Layout copies ems-frontend AuthLayout.vue: from 1024px a 42% ink-950 brand panel with one orange orb; below it, ink-50 ground and a bordered card. Grid, not flex: warning-msg.js appends a bare .alert to , which would otherwise become a third column. The