/* ============================================================================ THE YACHTCLUB PLATFORM One system, three modes. Bootstrap 5.3 override layer. Load AFTER bootstrap.min.css. Set the mode on or any wrapper: -> web (light, club-facing admin) -> mobile (dark, iOS employee + member apps) -> support (dark, dense, YachtClub NOC) Mode is chosen by SURFACE, never by instruction: browser / Rails view / desktop admin ....... web iPhone, iPad, POS terminal, device frame ... mobile YachtClub-internal operations tooling ...... support Every colour in a product surface must resolve through a token below. A literal hex in application code is a bug. ========================================================================= */ /* Fonts are linked from the document , never @import-ed from here — a nested stylesheet fetch blocks first paint: --------------------------------------------------------------------------- 1. BRAND CONSTANTS The harbor palette. These five hues never change across modes — only the surfaces they sit on, and which of them is allowed to carry an action. ------------------------------------------------------------------------ */ :root { --yc-navy: #33455C; /* structure, primary action, series 1 */ --yc-navy-press: #2A3A4F; /* hover + press for anything navy */ --yc-navy-deep: #16212E; /* dark-mode canvas */ --yc-linen: #DED4BC; /* active marker on navy; dark primary */ --yc-linen-bright: #F2ECDD; /* text on navy */ --yc-marigold: #E8A427; /* comparison series, record-tab rule */ --yc-burnt: #DE7A22; /* rail stripe middle band only */ --yc-ensign: #C0432E; /* destructive, hard failure */ --yc-on-ensign: #FFFFFF; /* 4.8:1 on ensign, in every mode */ --yc-khaki: #7A6242; /* third series, payment kind */ --yc-verdigris: #3F7A54; /* settled, open, approved */ /* Chart series — assigned in this order, always. Five is the ceiling. A series is a graphical object that carries meaning, so each must clear 3:1 against --yc-surface IN ITS MODE (WCAG 1.4.11). The brand hues only satisfy that on the light surface, so every mode block below restates all five. Never reference --yc-navy et al. directly from a chart. */ --yc-series-1: #2D3E54; /* navy, deepened for 11.1:1 on white */ --yc-series-2: #B5822A; /* marigold, darkened for 3.6:1 on white */ --yc-series-3: #7A6242; /* khaki */ --yc-series-4: #3F7A54; /* verdigris */ --yc-series-5: #C0432E; /* ensign */ /* Type */ --yc-font-sans: 'Plus Jakarta Sans', system-ui, sans-serif; --yc-font-mono: 'JetBrains Mono', ui-monospace, monospace; --yc-fs-page-title: 22px; /* page h1 */ --yc-fs-hero: 21px; /* hero figure, mono 800 */ --yc-fs-card-title: 13px; /* card header — Commerce is the reference */ --yc-fs-body: 13px; --yc-fs-sub: 12.5px; /* subtitle, table body */ --yc-fs-small: 11.5px; --yc-fs-eyebrow: 10.5px; /* 700, uppercase, .05em */ --yc-tracking-eyebrow: .05em; /* Motion — confident, never springy */ --yc-ease: cubic-bezier(.2, .6, .2, 1); --yc-fast: 120ms; --yc-base: 180ms; --yc-slow: 320ms; } /* --------------------------------------------------------------------------- 2. MODE: web — light, club-facing admin (DEFAULT) ------------------------------------------------------------------------ */ :root, [data-yc-mode="web"] { --yc-canvas: #F2F6FA; --yc-surface: #FFFFFF; --yc-surface-alt: #FAFBFC; /* card header + footer */ --yc-surface-sunken: #FBFCFD; /* code blocks, wells */ --yc-hover: #FAFBFD; /* table row hover */ --yc-border: #E5EAEF; /* card + control edge */ --yc-rule: #F0F3F7; /* inner divider */ --yc-ink: #2A3547; /* 11.6:1 on white — headings, figures */ --yc-body: #4D5C73; /* 7.2:1 */ --yc-muted: #5A6B84; /* 5.8:1 — subtitles, 11–13px */ --yc-faint: #61728A; /* 5.3:1 on white, 4.9:1 on the canvas */ --yc-decor: #A8B4C3; /* NOT for text. Hairlines, pips, rules. */ --yc-disabled: #C0C8D4; --yc-disabled-fg: #3E4B5E; /* 4.9:1 on the disabled fill \u2014 never white */ --yc-primary: var(--yc-navy); --yc-primary-rgb: 51, 69, 92; --yc-primary-hover: var(--yc-navy-press); --yc-on-primary: #FFFFFF; --yc-on-primary-muted:#AFBECE; /* 5.0:1 on the primary fill — eyebrows */ --yc-primary-quiet: #F1F4F8; /* tertiary hover */ --yc-primary-wash: #DCE4EE; /* informational tint */ --yc-primary-ink: var(--yc-navy); --yc-focus: rgba(51, 69, 92, .28); /* Semantic pairs — tint plus ink, each ink clearing 4.5:1 on its own tint. */ --yc-ok-bg: #E3EADF; --yc-ok-fg: #356346; --yc-ok-edge: #C6D6C0; --yc-warn-bg: #F9E7C4; --yc-warn-fg: #8A5F14; --yc-warn-edge: #DCC79C; --yc-danger-bg: #F6DAD3; --yc-danger-fg: #9E3423; --yc-danger-edge:#E6BCB1; --yc-neutral-bg: #EFE7D6; --yc-neutral-fg: #6B553A; --yc-info-bg: #DCE4EE; --yc-info-fg: #33455C; --yc-quiet-bg: #F3F4F6; --yc-quiet-fg: #5A6B84; /* Help surfaces are the one place cream carries a whole card. */ --yc-help-bg: #FBF6EA; --yc-help-edge: #EADFC6; --yc-help-fg: #6B5836; /* Rail is always the dark navy, in every mode. Its own scale, because the page tokens are tuned for the page surface, not for navy. */ --yc-rail-bg: var(--yc-navy); --yc-rail-hover: var(--yc-navy-press); --yc-rail-ink: var(--yc-linen-bright); --yc-rail-item: #B9C6D4; /* 6.0:1 on navy */ --yc-rail-icon: #A8B8CB; /* 4.9:1 */ --yc-rail-label: #A8B8CB; /* 4.9:1 — group headings at 10px/700 */ --yc-rail-rule: #46586F; --yc-rail-active-bg: var(--yc-linen); --yc-rail-active-fg: var(--yc-navy-press); /* Geometry */ --yc-r-card: 10px; --yc-r-control: 8px; --yc-r-chip: 7px; --yc-r-pill: 20px; /* Density */ --yc-cell-y: 11px; /* table cell vertical padding */ --yc-cell-x: 8px; --yc-cell-edge: 18px; /* first + last cell horizontal padding */ --yc-card-pad: 20px; --yc-card-head-y:13px; --yc-card-head-x:18px; /* card header + footer horizontal padding */ --yc-gap: 20px; /* between cards */ --yc-tap: 32px; /* minimum interactive height */ --yc-shadow-card: 0 2px 8px rgba(0, 0, 0, .06); --yc-shadow-lift: 0 4px 20px rgba(0, 0, 0, .08); --yc-shadow-over: 0 24px 60px rgba(0, 0, 0, .28); } /* --------------------------------------------------------------------------- 3. MODE: mobile — dark, iOS employee + member apps The dark mode of the same palette: navy becomes the surface, linen carries the words, and linen (not navy) carries the primary action. ------------------------------------------------------------------------ */ [data-yc-mode="mobile"] { --yc-canvas: var(--yc-navy-deep); --yc-surface: #1E2C3C; --yc-surface-alt: #243444; --yc-surface-sunken: #131E2A; --yc-hover: #2A3A4C; --yc-border: #2E4053; --yc-rule: #263647; --yc-ink: var(--yc-linen-bright); --yc-body: #C4CFDC; --yc-muted: #A3B2C2; /* 6.5:1 on #1E2C3C */ --yc-faint: #8FA0B3; /* 4.9:1 — the smallest label still reads */ --yc-decor: #4A5D73; /* NOT for text */ --yc-disabled: #46586F; --yc-disabled-fg: #C4CFDC; --yc-primary: var(--yc-linen); --yc-primary-rgb: 222, 212, 188; --yc-primary-hover: #EADFC6; --yc-on-primary: var(--yc-navy-press); --yc-on-primary-muted:#55606E; /* the primary fill is LIGHT in this mode */ --yc-primary-quiet: #263647; --yc-primary-wash: #23364A; --yc-primary-ink: #A8C4E0; --yc-focus: rgba(222, 212, 188, .40); --yc-ok-bg: #24382C; --yc-ok-fg: #8FC7A2; --yc-ok-edge: #325C41; --yc-warn-bg: #3A2E18; --yc-warn-fg: #E8BE72; --yc-warn-edge: #5C4820; --yc-danger-bg: #3B211B; --yc-danger-fg: #E39383; --yc-danger-edge:#5E3227; --yc-neutral-bg: #332C1E; --yc-neutral-fg: #CBB994; --yc-info-bg: #23364A; --yc-info-fg: #A8C4E0; --yc-quiet-bg: #263647; --yc-quiet-fg: #93A3B5; --yc-help-bg: #332C1E; --yc-help-edge: #5C4820; --yc-help-fg: #DCC79C; /* Softer, larger geometry reads as native on a device. */ --yc-r-card: 14px; --yc-r-control: 12px; --yc-r-chip: 10px; /* Touch density — 44px is the floor, never negotiable. */ --yc-cell-y: 14px; --yc-cell-x: 10px; --yc-cell-edge: 20px; --yc-card-pad: 18px; --yc-card-head-y:15px; --yc-card-head-x:18px; --yc-gap: 16px; --yc-tap: 44px; --yc-fs-card-title: 13.5px; --yc-fs-body: 14px; --yc-fs-sub: 13.5px; --yc-fs-small: 12.5px; /* Series lifted off the dark surface. Navy cannot lead here — it measures 1.45:1 on #1E2C3C — so the leading series becomes the steel blue that carries links and figures in this mode. */ --yc-series-1: #A8C4E0; /* 9.1:1 */ --yc-series-2: #E8BE72; /* 8.6:1 */ --yc-series-3: #CBB994; /* 8.4:1 */ --yc-series-4: #8FC7A2; /* 8.9:1 */ --yc-series-5: #E39383; /* 6.4:1 */ --yc-shadow-card: 0 1px 0 rgba(242, 236, 221, .05) inset, 0 2px 10px rgba(0, 0, 0, .32); --yc-shadow-lift: 0 1px 0 rgba(242, 236, 221, .06) inset, 0 6px 22px rgba(0, 0, 0, .40); --yc-shadow-over: 0 24px 60px rgba(0, 0, 0, .58); } /* --------------------------------------------------------------------------- 4. MODE: support — dark, dense, YachtClub internal operations Mobile's surface at tighter-than-web density. Cooler and flatter: these screens are read from across a room for twelve hours at a stretch. ------------------------------------------------------------------------ */ [data-yc-mode="support"] { --yc-canvas: #121A22; --yc-surface: #1A242F; --yc-surface-alt: #202C39; --yc-surface-sunken: #0F161D; --yc-hover: #253240; --yc-border: #2B3947; --yc-rule: #222E3A; --yc-ink: #E8EDF2; --yc-body: #B7C3CF; --yc-muted: #9AA7B5; /* 6.2:1 on #1A242F */ --yc-faint: #8996A5; /* 4.9:1 */ --yc-decor: #46535F; /* NOT for text */ --yc-disabled: #3D4A57; --yc-disabled-fg: #B7C3CF; --yc-primary: #A8C4E0; --yc-primary-rgb: 168, 196, 224; --yc-primary-hover: #C0D6EC; --yc-on-primary: #121A22; --yc-on-primary-muted:#43505E; --yc-primary-quiet: #222E3A; --yc-primary-wash: #1F303F; --yc-primary-ink: #A8C4E0; --yc-focus: rgba(168, 196, 224, .40); /* Status must read at a glance from a wall display — slightly hotter. */ --yc-ok-bg: #1B3323; --yc-ok-fg: #6FD494; --yc-ok-edge: #2C5439; --yc-warn-bg: #38290F; --yc-warn-fg: #F0BC55; --yc-warn-edge: #5A4318; --yc-danger-bg: #3D1C15; --yc-danger-fg: #F58C74; --yc-danger-edge:#63291D; --yc-neutral-bg: #2C2A21; --yc-neutral-fg: #C7B78F; --yc-info-bg: #1F303F; --yc-info-fg: #8FB6DC; --yc-quiet-bg: #222E3A; --yc-quiet-fg: #8A97A5; --yc-help-bg: #2C2A21; --yc-help-edge: #5A4318; --yc-help-fg: #C7B78F; --yc-rail-bg: #0F161D; --yc-rail-hover: #1F2A35; --yc-rail-active-bg: #A8C4E0; --yc-rail-active-fg: #121A22; /* Square and tight. No ceremony in the NOC. */ --yc-r-card: 6px; --yc-r-control: 5px; --yc-r-chip: 4px; --yc-r-pill: 3px; --yc-cell-y: 7px; --yc-cell-x: 7px; --yc-cell-edge: 12px; --yc-card-pad: 14px; --yc-card-head-y:9px; --yc-card-head-x:12px; --yc-gap: 12px; --yc-tap: 28px; --yc-fs-page-title: 18px; --yc-fs-card-title: 12.5px; --yc-fs-body: 12.5px; --yc-fs-sub: 12px; --yc-fs-small: 11px; /* Hotter than mobile — these are read from across a room. */ --yc-series-1: #8FB6DC; /* 8.0:1 */ --yc-series-2: #F0BC55; /* 9.6:1 */ --yc-series-3: #C7B78F; /* 9.0:1 */ --yc-series-4: #6FD494; /* 11.1:1 */ --yc-series-5: #F58C74; /* 7.4:1 */ --yc-shadow-card: none; --yc-shadow-lift: 0 2px 10px rgba(0, 0, 0, .40); --yc-shadow-over: 0 20px 48px rgba(0, 0, 0, .64); } /* --------------------------------------------------------------------------- 5. BASE ------------------------------------------------------------------------ */ /* Nothing in this system transitions. Not colour, not transform, not shadow. The rendering environment's animation timeline never advances, so an armed transition holds the pre-change value indefinitely and the computed style stops tracking the declared one. `transform` was the last survivor here and it took out every toggle knob in the product. State changes are instant. */ .btn, .page-link, .nav-link, .form-control, .form-select, .badge, .alert, .card, .dropdown-item, .breadcrumb-item > a, .progress-bar, .form-check-input, .form-switch .form-check-input { transition: none !important; } body { margin: 0; font-family: var(--yc-font-sans); background: var(--yc-canvas); color: var(--yc-ink); font-size: var(--yc-fs-body); -webkit-font-smoothing: antialiased; } /* A mode wrapper must restate surface and ink. Inherited colour resolves at the element that declares it — set it on alone and any nested [data-yc-mode] subtree keeps the OUTER mode's text colour, which is how you end up with dark ink on a dark card. */ [data-yc-mode] { background: var(--yc-canvas); color: var(--yc-ink); font-size: var(--yc-fs-body); } *, *::before, *::after { box-sizing: border-box; } a { color: var(--yc-primary-ink); text-decoration: none; } a:hover { color: var(--yc-primary-hover); text-decoration: underline; } input, select, textarea, button { font-family: inherit; } button { white-space: nowrap; } table { border-collapse: collapse; } :focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } /* Every figure, identifier, and timestamp is mono and never wraps. */.yc-figure, .yc-id, .yc-time { font-family: var(--yc-font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; } .yc-figure { font-weight: 700; color: var(--c, inherit); } .yc-eyebrow { font-size: var(--yc-fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: var(--yc-tracking-eyebrow); color: var(--yc-faint); white-space: nowrap; /* a tracked small-caps label reads as damage when wrapped */ } /* --yc-muted and --yc-faint are TEXT colours and clear 4.5:1 on their own mode's surface — they are used at 10.5–13px, which is a stricter bar than the 3:1 a chart series has to meet. Anything purely decorative (a hairline, an inactive pip, a chevron) takes --yc-decor instead, which is lighter and must never carry a word. */ .yc-decor { color: var(--yc-decor); } /* --------------------------------------------------------------------------- 6. BOOTSTRAP 5.3 OVERRIDES Bootstrap's defaults are wrong for this system in almost every respect: its blue, its 6px radii, its .375rem control padding, its heavy table borders, its coloured alert backgrounds. All of it is replaced. ------------------------------------------------------------------------ */ /* Remap Bootstrap's own CSS variables so utilities inherit the system. */ :root, [data-yc-mode] { --bs-body-bg: var(--yc-canvas); --bs-body-color: var(--yc-ink); --bs-body-font-family: var(--yc-font-sans); --bs-body-font-size: var(--yc-fs-body); --bs-border-color: var(--yc-border); --bs-border-radius: var(--yc-r-control); --bs-border-radius-sm: var(--yc-r-chip); --bs-border-radius-lg: var(--yc-r-card); /* Point these at the MODE tokens, not the brand hues — otherwise .text-primary and .border-primary stay dark navy in the dark modes while .btn-primary correctly flips. */ --bs-primary: var(--yc-primary); --bs-primary-rgb: var(--yc-primary-rgb); --bs-secondary: var(--yc-muted); --bs-success: var(--yc-ok-fg); --bs-warning: var(--yc-warn-fg); --bs-danger: var(--yc-danger-fg); --bs-info: var(--yc-primary-ink); --bs-link-color: var(--yc-primary-ink); --bs-link-hover-color: var(--yc-primary-hover); --bs-emphasis-color: var(--yc-ink); --bs-secondary-color: var(--yc-muted); --bs-tertiary-color: var(--yc-faint); --bs-font-monospace: var(--yc-font-mono); } /* Bootstrap's .text-* utilities resolve through --bs-*-rgb times a text-opacity multiplier, which lands well under 4.5:1 on these surfaces. Override the utilities directly — Bootstrap declares them !important, so we must too. */ .text-primary { color: var(--yc-primary-ink) !important; } .text-secondary { color: var(--yc-muted) !important; } .text-success { color: var(--yc-ok-fg) !important; } .text-warning { color: var(--yc-warn-fg) !important; } .text-danger { color: var(--yc-danger-fg) !important; } .text-info { color: var(--yc-neutral-fg) !important; } .text-body { color: var(--yc-body) !important; } .text-muted, .text-body-secondary { color: var(--yc-muted) !important; } .text-body-tertiary { color: var(--yc-faint) !important; } .link-primary { color: var(--yc-primary-ink) !important; } .link-secondary { color: var(--yc-muted) !important; } .link-danger { color: var(--yc-danger-fg) !important; } .border-primary { border-color: var(--yc-primary) !important; } /* --- Buttons ------------------------------------------------------------ */ /* Four ranks. One primary per view. Weight drops as consequence drops. */ .btn { --bs-btn-padding-y: .44rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 13.5px; --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--yc-r-control); min-height: var(--yc-tap); display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* NO state-driven CSS transition anywhere in this system. The rendering environment's animation timeline is frozen — document.timeline.currentTime stays at 0 — so any armed transition sits at currentTime 0 forever and latches the PRE-change value. The declared style flips; the computed style never follows. Verified on a throwaway element with a literal colour and literal timing and no custom properties involved at all, so this is not about the `background` shorthand or var() operands: transitions simply do not run. Symptoms are silent and look like broken state — a toggle whose knob never moves, a button stuck on Bootstrap's palette. Colour and position changes are INSTANT. That is also the better interaction here: these are dense operator surfaces, not a marketing page. The --yc-fast / --yc-base / --yc-slow / --yc-ease tokens exist for hand-written @keyframes, which do run, and must never appear inside a `transition` shorthand. */ } .btn:active { transform: translateY(1px); } .btn:disabled, .btn.disabled, fieldset:disabled .btn { background-color: var(--yc-disabled) !important; border-color: var(--yc-disabled) !important; /* Never a white label on the desaturated fill — it reads as broken and measures 1.7:1. Disabled is quiet, not illegible. */ color: var(--yc-disabled-fg) !important; cursor: not-allowed; opacity: 1; /* never fade — desaturate instead */ transform: none; } /* Rank 1 — primary. Solid. NB: the --bs-btn-* variables are set for anything that reads them, but the real properties are declared too. A CDN Bootstrap build does not reliably honour the variable indirection for variant classes, and a primary button silently rendering Bootstrap blue is not a failure we can risk. */ .btn-primary { --bs-btn-bg: var(--yc-primary); --bs-btn-border-color: var(--yc-primary); --bs-btn-color: var(--yc-on-primary); --bs-btn-hover-bg: var(--yc-primary-hover); --bs-btn-hover-border-color: var(--yc-primary-hover); --bs-btn-hover-color: var(--yc-on-primary); --bs-btn-active-bg: var(--yc-primary-hover); --bs-btn-active-border-color: var(--yc-primary-hover); --bs-btn-disabled-bg: var(--yc-disabled); --bs-btn-disabled-border-color: var(--yc-disabled); background-color: var(--yc-primary); border-color: var(--yc-primary); color: var(--yc-on-primary); } .btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active, .btn-primary.active { background-color: var(--yc-primary-hover); border-color: var(--yc-primary-hover); color: var(--yc-on-primary); } /* Rank 2 — secondary. Outlined, muted label. Sits beside the primary. */ .btn-secondary, .btn-outline-secondary { --bs-btn-bg: var(--yc-surface); --bs-btn-border-color: var(--yc-border); --bs-btn-color: var(--yc-muted); --bs-btn-hover-bg: var(--yc-surface); --bs-btn-hover-border-color: var(--yc-primary-wash); --bs-btn-hover-color: var(--yc-primary-ink); --bs-btn-active-bg: var(--yc-primary-quiet); --bs-btn-active-border-color: var(--yc-primary-wash); --bs-btn-active-color: var(--yc-primary-ink); background-color: var(--yc-surface); border-color: var(--yc-border); color: var(--yc-muted); } .btn-secondary:hover, .btn-outline-secondary:hover, .btn-secondary:active, .btn-outline-secondary:active { background-color: var(--yc-surface); border-color: var(--yc-primary-wash); color: var(--yc-primary-ink); } /* Rank 3 — tertiary. Same shell, navy label, card-scoped so it is smaller. */ .btn-yc-tertiary { --bs-btn-bg: var(--yc-surface); --bs-btn-border-color: var(--yc-border); --bs-btn-color: var(--yc-primary-ink); --bs-btn-hover-bg: var(--yc-primary-quiet); --bs-btn-hover-border-color: var(--yc-border); --bs-btn-hover-color: var(--yc-primary-ink); --bs-btn-padding-y: 5px; --bs-btn-padding-x: 13px; --bs-btn-font-size: 12px; --bs-btn-border-radius: var(--yc-r-chip); background-color: var(--yc-surface); border-color: var(--yc-border); color: var(--yc-primary-ink); min-height: 0; } .btn-yc-tertiary:hover { background-color: var(--yc-primary-quiet); border-color: var(--yc-border); color: var(--yc-primary-ink); } /* Rank 4 — quaternary. Text, or a bare icon square. */ .btn-yc-quiet { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--yc-primary-ink); --bs-btn-hover-color: var(--yc-primary-hover); --bs-btn-padding-x: 0; --bs-btn-font-size: 12px; background-color: transparent; border-color: transparent; color: var(--yc-primary-ink); min-height: 0; } .btn-yc-quiet:hover { background-color: transparent; color: var(--yc-primary-hover); text-decoration: underline; } .btn-yc-icon { --bs-btn-bg: var(--yc-surface); --bs-btn-border-color: var(--yc-border); --bs-btn-color: var(--yc-faint); --bs-btn-hover-color: var(--yc-primary-ink); --bs-btn-padding-y: 0; --bs-btn-padding-x: 0; --bs-btn-border-radius: var(--yc-r-chip); background-color: var(--yc-surface); border-color: var(--yc-border); color: var(--yc-faint); width: 26px; height: 26px; min-height: 0; font-size: 11px; } .btn-yc-icon:hover { background-color: var(--yc-surface); border-color: var(--yc-border); color: var(--yc-primary-ink); } /* Semantic actions — outside the hierarchy. Colour is the message. */ .btn-success { --bs-btn-bg: var(--yc-ok-bg); --bs-btn-border-color: var(--yc-ok-edge); --bs-btn-color: var(--yc-ok-fg); --bs-btn-hover-bg: var(--yc-ok-bg); --bs-btn-hover-border-color: var(--yc-ok-fg); --bs-btn-hover-color: var(--yc-ok-fg); --bs-btn-padding-y: 5px; --bs-btn-padding-x: 14px; --bs-btn-font-size: 12px; background-color: var(--yc-ok-bg); border-color: var(--yc-ok-edge); color: var(--yc-ok-fg); min-height: 0; } .btn-success:hover, .btn-success:active { background-color: var(--yc-ok-bg); border-color: var(--yc-ok-fg); color: var(--yc-ok-fg); } /* Solid ensign, so it can never be mistaken for the primary. */ .btn-danger { --bs-btn-bg: var(--yc-ensign); --bs-btn-border-color: var(--yc-ensign); --bs-btn-color: var(--yc-on-ensign); --bs-btn-hover-bg: #9E3423; --bs-btn-hover-border-color: #9E3423; --bs-btn-hover-color: var(--yc-on-ensign); background-color: var(--yc-ensign); border-color: var(--yc-ensign); color: var(--yc-on-ensign); } .btn-danger:hover, .btn-danger:active { background-color: #9E3423; border-color: #9E3423; color: var(--yc-on-ensign); } /* Warning is never a button in this system. If you reach for one you want .btn-danger or a confirmation step. Restyled rather than hidden — a display:none here would silently erase existing buttons in the Rails app. */ .btn-warning { --bs-btn-bg: var(--yc-warn-bg); --bs-btn-border-color: var(--yc-warn-edge); --bs-btn-color: var(--yc-warn-fg); --bs-btn-hover-bg: var(--yc-warn-bg); --bs-btn-hover-border-color: var(--yc-warn-fg); --bs-btn-hover-color: var(--yc-warn-fg); background-color: var(--yc-warn-bg); border-color: var(--yc-warn-edge); color: var(--yc-warn-fg); } .btn-warning:hover, .btn-warning:active { background-color: var(--yc-warn-bg); border-color: var(--yc-warn-fg); color: var(--yc-warn-fg); } /* --- Cards ------------------------------------------------------------- */ /* Elevation, not borders. NEVER a coloured accent stripe on any edge. */ .card { --bs-card-bg: var(--yc-surface); --bs-card-border-color: var(--yc-border); --bs-card-border-radius: var(--yc-r-card); --bs-card-spacer-y: var(--yc-card-pad); --bs-card-spacer-x: var(--yc-card-pad); --bs-card-cap-bg: var(--yc-surface-alt); --bs-card-inner-border-radius: calc(var(--yc-r-card) - 1px); background-color: var(--yc-surface); border: 1px solid var(--yc-border); border-radius: var(--yc-r-card); box-shadow: var(--yc-shadow-card); overflow: hidden; } .card-body { padding: var(--yc-card-pad); color: var(--yc-body); } .card-header, .card-footer { border-color: var(--yc-rule); background-color: var(--yc-surface-alt); color: var(--yc-ink); padding: var(--yc-card-head-y) var(--yc-card-head-x); font-size: var(--yc-fs-card-title); font-weight: 700; display: flex; align-items: center; gap: 9px; } /* Header and footer actions align right; metadata belongs in the footer. */ .card-header > .yc-actions, .card-footer > .yc-actions { margin-left: auto; display: flex; gap: 8px; } .card-footer { background: var(--yc-surface-alt); padding: 11px var(--yc-card-head-x); font-weight: 400; font-size: 12px; color: var(--yc-muted); justify-content: space-between; } .card[class*="border-start"], .card[class*="border-left"], .card[style*="border-left"] { border-left-width: 1px !important; border-left-color: var(--yc-border) !important; } /* --- Tables ------------------------------------------------------------ */ .table { --bs-table-bg: transparent; --bs-table-color: var(--yc-ink); --bs-table-border-color: var(--yc-rule); --bs-table-hover-bg: var(--yc-hover); --bs-table-hover-color: var(--yc-ink); margin-bottom: 0; } .table > thead > tr > th { font-size: var(--yc-fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: var(--yc-tracking-eyebrow); color: var(--yc-faint); text-align: left; background: transparent; box-shadow: none; border-bottom: 1px solid var(--yc-border); padding: 9px var(--yc-cell-x); white-space: nowrap; } .table > tbody > tr > td { padding: var(--yc-cell-y) var(--yc-cell-x); border-bottom: 1px solid var(--yc-rule); border-top: 0; font-size: var(--yc-fs-sub); color: var(--yc-body); vertical-align: middle; } .table > thead > tr > th:first-child, .table > tbody > tr > td:first-child { padding-left: var(--yc-cell-edge); } .table > thead > tr > th:last-child, .table > tbody > tr > td:last-child { padding-right: var(--yc-cell-edge); } /* Date and time is the first column of every table. */ .table > tbody > tr > td:first-child { white-space: nowrap; } /* Figures right, mono, never wrapped. */ .table .yc-num, .table [class*="text-end"] { text-align: right; font-family: var(--yc-font-mono); font-weight: 700; color: var(--yc-ink); white-space: nowrap; } /* A cell that yields. Every other cell in these tables is nowrap — headers, the date column, every .yc-num figure — so a table with nothing shrinkable grows past its card and .card's overflow:hidden clips the LAST column silently, which is always the figure the row exists for. Mark the one column that can afford to lose characters; keep the full value in a title. */ .table td.yc-shrink { max-width: 0; width: 99%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; } /* --- Badges ------------------------------------------------------------ */ /* Pill. Status only, never decoration. */ .badge { --bs-badge-padding-y: 2px; --bs-badge-padding-x: 9px; --bs-badge-font-size: 9.5px; --bs-badge-font-weight: 700; --bs-badge-border-radius: var(--yc-r-pill); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .badge.bg-primary { background: var(--yc-info-bg) !important; color: var(--yc-info-fg) !important; } .badge.bg-success { background: var(--yc-ok-bg) !important; color: var(--yc-ok-fg) !important; } .badge.bg-warning { background: var(--yc-warn-bg) !important; color: var(--yc-warn-fg) !important; } .badge.bg-danger { background: var(--yc-danger-bg) !important; color: var(--yc-danger-fg) !important; } .badge.bg-secondary { background: var(--yc-quiet-bg) !important; color: var(--yc-quiet-fg) !important; } .badge.bg-info { background: var(--yc-neutral-bg) !important; color: var(--yc-neutral-fg) !important; } .badge.bg-light { background: var(--yc-quiet-bg) !important; color: var(--yc-quiet-fg) !important; } .badge.bg-dark { background: var(--yc-ink) !important; color: var(--yc-surface) !important; } /* --- Alerts ----------------------------------------------------------- */ /* Tint plus ink plus a 1px edge. Bootstrap's saturated fills are gone. */ .alert { --bs-alert-padding-y: 11px; --bs-alert-padding-x: 13px; --bs-alert-border-radius: var(--yc-r-control); --bs-alert-border: 1px solid; font-size: var(--yc-fs-sub); line-height: 1.55; display: flex; align-items: flex-start; gap: 9px; margin-bottom: var(--yc-gap); } .alert-primary { background: var(--yc-info-bg); color: var(--yc-info-fg); border-color: var(--yc-primary-wash); } .alert-success { background: var(--yc-ok-bg); color: var(--yc-ok-fg); border-color: var(--yc-ok-edge); } .alert-warning { background: var(--yc-warn-bg); color: var(--yc-warn-fg); border-color: var(--yc-warn-edge); } .alert-danger { background: var(--yc-danger-bg); color: var(--yc-danger-fg); border-color: var(--yc-danger-edge); } .alert-secondary { background: var(--yc-quiet-bg); color: var(--yc-quiet-fg); border-color: var(--yc-border); } .alert-info { background: var(--yc-neutral-bg); color: var(--yc-neutral-fg); border-color: var(--yc-neutral-bg); } /* Guidance, not a state — the one place cream carries a whole surface. */ .alert-yc-help { background: var(--yc-help-bg); color: var(--yc-help-fg); border-color: var(--yc-help-edge); } /* --- Forms ------------------------------------------------------------- */ .form-control, .form-select { background-color: var(--yc-surface); border: 1px solid var(--yc-border); border-radius: var(--yc-r-control); color: var(--yc-ink); font-size: 13.5px; padding: 9px 12px; min-height: var(--yc-tap); box-shadow: none; } .form-control::placeholder { color: var(--yc-faint); } .form-control:focus, .form-select:focus { background: var(--yc-surface); border-color: var(--yc-primary-wash); box-shadow: 0 0 0 3px var(--yc-focus); color: var(--yc-ink); } .form-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--yc-body); margin-bottom: 6px; } .form-text { font-size: var(--yc-fs-small); color: var(--yc-muted); } .input-group-text { background-color: var(--yc-primary-quiet); border-color: var(--yc-border); color: var(--yc-body); font-weight: 700; font-size: 13px; } .form-check-input { border-color: var(--yc-border); background-color: var(--yc-surface); } .form-check-input:checked { background-color: var(--yc-primary); border-color: var(--yc-primary); } .form-check-input:focus { box-shadow: 0 0 0 3px var(--yc-focus); border-color: var(--yc-primary-wash); } .form-switch .form-check-input:checked { background-color: var(--yc-verdigris); border-color: var(--yc-verdigris); } /* --- Pagination -------------------------------------------------------- */ /* Sits BELOW the card, aligned left: Previous · pages · Next · range. */ .pagination { --bs-pagination-padding-y: 5px; --bs-pagination-padding-x: 12px; --bs-pagination-font-size: 12px; --bs-pagination-bg: var(--yc-surface); --bs-pagination-color: var(--yc-body); --bs-pagination-border-color: var(--yc-border); --bs-pagination-border-radius: var(--yc-r-control); --bs-pagination-hover-bg: var(--yc-hover); --bs-pagination-hover-color: var(--yc-primary-ink); --bs-pagination-active-bg: var(--yc-primary); --bs-pagination-active-border-color: var(--yc-primary); --bs-pagination-active-color: var(--yc-on-primary); --bs-pagination-disabled-bg: var(--yc-surface); --bs-pagination-disabled-color: var(--yc-faint); gap: 8px; justify-content: flex-start; margin: 14px 0 0; align-items: center; font-weight: 600; } .pagination .page-link { border-radius: var(--yc-r-control); min-width: 28px; text-align: center; background-color: var(--yc-surface); border-color: var(--yc-border); color: var(--yc-body); /* Bootstrap transitions .page-link colour; same latch as .btn. */ transition: none; } .pagination .page-link:hover { background-color: var(--yc-hover); color: var(--yc-primary-ink); } .pagination .page-item.active .page-link, .pagination .active > .page-link { background-color: var(--yc-primary); border-color: var(--yc-primary); color: var(--yc-on-primary); } .pagination .page-item.disabled .page-link, .pagination .disabled > .page-link { background-color: var(--yc-surface); border-color: var(--yc-border); color: var(--yc-faint); } .yc-pagination-range { font-size: 12px; color: var(--yc-muted); margin-left: 6px; list-style: none; } /* --- Nav -------------------------------------------------------------- */ /* Three levels, three treatments. Never two levels at once. */ /* Hub — index pages. Solid pill inside a card-like shell. */ .yc-hub-nav { display: flex; gap: 2px; background: var(--yc-surface); border: 1px solid var(--yc-border); border-radius: var(--yc-r-card); padding: 4px; box-shadow: var(--yc-shadow-card); width: fit-content; margin-bottom: var(--yc-gap); } .yc-hub-nav > a { display: flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: var(--yc-r-chip); font-size: 13.5px; font-weight: 500; color: var(--yc-muted); text-decoration: none; white-space: nowrap; } .yc-hub-nav > a:hover { background: var(--yc-primary-quiet); color: var(--yc-primary-ink); text-decoration: none; } .yc-hub-nav > a.active { background: var(--yc-primary); color: var(--yc-on-primary); font-weight: 600; } /* Record — inside one resource. Marigold rule. */ .nav-tabs, .yc-record-tabs { --bs-nav-tabs-border-color: var(--yc-border); --bs-nav-tabs-border-width: 1px; --bs-nav-tabs-link-active-color: var(--yc-ink); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent; gap: 22px; margin-bottom: var(--yc-gap); } .yc-record-tabs { display: flex; align-items: flex-end; border-bottom: 1px solid var(--yc-border); } .nav-tabs .nav-link, .yc-record-tabs > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 0 0 11px; font-size: 13.5px; font-weight: 500; color: var(--yc-muted); background: transparent; } .nav-tabs .nav-link:hover, .yc-record-tabs > a:hover { color: var(--yc-ink); text-decoration: none; border-bottom-color: var(--yc-border); } .nav-tabs .nav-link.active, .yc-record-tabs > a.active { color: var(--yc-ink); background: transparent; font-weight: 700; border-color: transparent; border-bottom-color: var(--yc-marigold); } /* Filter chips — a small set of views inside a RECORD page section. Never the primary filter of an index list — that is .yc-toolbar below. Any imported chip row on an index page converts to the toolbar. */ .yc-filter-chips { display: flex; gap: 8px; margin-bottom: 16px; flex-shrink: 0; } .yc-filter-chips > a { padding: 5px 13px; border-radius: var(--yc-r-pill); font-size: 12.5px; font-weight: 600; color: var(--yc-body); background: var(--yc-surface); border: 1px solid var(--yc-border); text-decoration: none; white-space: nowrap; } .yc-filter-chips > a.active { background: var(--yc-primary); border-color: var(--yc-primary); color: var(--yc-on-primary); } /* Index toolbar — THE list-filter pattern, no exceptions on index pages. Search + Filter menu inside the list's card, above the table; shown-count right-aligned ("8 of 24 employees"). The Filter button label carries the active pick ("Filter · Closed"); the menu row wears the check. CONVERSION RULE: when any outside design is imported or adapted (prototype, legacy page, screenshot), its standalone search bars, filter chip rows, status pills, or segmented filters are REPLACED by this toolbar. */ .yc-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px var(--yc-cell-edge); border-bottom: 1px solid var(--yc-rule); background: var(--yc-surface-alt); } .yc-toolbar-search { position: relative; flex: 1; max-width: 280px; } .yc-toolbar-search > i { position: absolute; left: 11px; top: 9px; font-size: 13px; color: var(--yc-faint); } .yc-toolbar-search > input, .yc-toolbar-search > .form-control { width: 100%; padding: 6px 12px 6px 32px; font-size: 13px; min-height: 0; background: var(--yc-surface); border: 1px solid var(--yc-border); border-radius: var(--yc-r-control); color: var(--yc-ink); outline: none; } .yc-toolbar-search > input::placeholder { color: var(--yc-faint); } .yc-toolbar-search > input:focus, .yc-toolbar-search > .form-control:focus { border-color: var(--yc-primary-wash); box-shadow: 0 0 0 3px var(--yc-focus); } .yc-toolbar .btn { gap: 7px; font-size: 13.5px; white-space: nowrap; } .yc-toolbar-count { margin-left: auto; font-size: 12px; color: var(--yc-muted); white-space: nowrap; } /* Anchored menu — the toolbar's Filter dropdown, row kebabs, any local menu. The trigger's wrapper is position:relative; rows are plain buttons; the active row is fw-700 on the primary wash with a trailing check. */ .yc-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 220px; background: var(--yc-surface); border: 1px solid var(--yc-border); border-radius: var(--yc-r-card); box-shadow: var(--yc-shadow-over); overflow: hidden; } .yc-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--yc-ink); background: var(--yc-surface); border: none; border-bottom: 1px solid var(--yc-rule); cursor: pointer; text-align: left; } .yc-menu > button:last-child { border-bottom: none; } .yc-menu > button:hover { background: var(--yc-hover); } .yc-menu > button.active { font-weight: 700; background: var(--yc-primary-wash); } /* Prototype scaffolding the pages depend on — codified, not inline. */ /* Modal underlay for state-driven modals (no Bootstrap JS in the prototypes). */ .yc-overlay { position: fixed; inset: 0; background: rgba(20, 30, 45, .45); z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 40px; } /* Bootstrap pads .modal-footer children with margins on top of our gap. */ .modal-footer > * { margin: 0; } /* Bare icon button — modal close, kebab, inline glyph actions. */ .btn-yc-bare { background: transparent; border: none; color: var(--yc-muted); font-size: 15px; cursor: pointer; } .btn-yc-bare:hover { color: var(--yc-ink); } /* Index tables read roomier than in-card summaries. */ .yc-table-roomy > tbody > tr > td { padding-top: 13px; padding-bottom: 13px; } /* Page heading block — title then subtitle, above the hub nav. */ .yc-page-title { font-size: var(--yc-fs-page-title); font-weight: 700; color: var(--yc-ink); margin: 0 0 3px; } .yc-page-sub { font-size: 13px; color: var(--yc-muted); } /* Breadcrumbs — inside the content column, above the page title. */ .breadcrumb { --bs-breadcrumb-font-size: 12px; --bs-breadcrumb-divider-color: var(--yc-faint); --bs-breadcrumb-item-padding-x: 7px; --bs-breadcrumb-margin-bottom: 6px; --bs-breadcrumb-divider: '\203A'; font-weight: 600; } .breadcrumb-item > a { color: var(--yc-muted); } .breadcrumb-item { white-space: nowrap; } /* a crumb never wraps; the trail truncates instead */ .breadcrumb-item > a:hover { color: var(--yc-primary-ink); } /* --- Modals ----------------------------------------------------------- */ .modal-content { background: var(--yc-surface); border: 0; border-radius: calc(var(--yc-r-card) + 2px); box-shadow: var(--yc-shadow-over); overflow: hidden; } .modal-header, .modal-footer { border-color: var(--yc-rule); padding: 16px 22px; } .modal-header { padding: 18px 22px; } .modal-title { font-size: 16px; font-weight: 800; color: var(--yc-ink); } .modal-body { padding: 20px 22px; } /* Footer actions align right — cancel, then commit. */ .modal-footer { background: var(--yc-surface-alt); justify-content: flex-end; gap: 8px; } .modal-backdrop { --bs-backdrop-bg: rgba(20, 30, 45, .45); --bs-backdrop-opacity: 1; } /* --- Progress + spinners --------------------------------------------- */ .progress { --bs-progress-bg: var(--yc-rule); --bs-progress-height: 6px; --bs-progress-border-radius: var(--yc-r-pill); background-color: var(--yc-rule); } .progress-bar { background-color: var(--yc-primary); } .spinner-border, .spinner-grow { color: var(--yc-primary); } /* --- Dropdowns + tooltips ------------------------------------------- */ .dropdown-menu { --bs-dropdown-bg: var(--yc-surface); --bs-dropdown-border-color: var(--yc-border); --bs-dropdown-border-radius: var(--yc-r-control); --bs-dropdown-link-color: var(--yc-body); --bs-dropdown-link-hover-bg: var(--yc-hover); --bs-dropdown-link-hover-color: var(--yc-ink); --bs-dropdown-link-active-bg: var(--yc-primary-quiet); --bs-dropdown-link-active-color: var(--yc-primary-ink); --bs-dropdown-font-size: var(--yc-fs-sub); box-shadow: var(--yc-shadow-lift); } .tooltip { --bs-tooltip-bg: var(--yc-ink); --bs-tooltip-color: var(--yc-surface); --bs-tooltip-border-radius: var(--yc-r-control); --bs-tooltip-font-size: 11.5px; } /* --------------------------------------------------------------------------- 7. COMPONENTS BOOTSTRAP HAS NO ANSWER FOR ------------------------------------------------------------------------ */ /* Rail — the only chrome. No top navigation bar in any mode. */ .yc-rail { position: fixed; top: 0; left: 0; bottom: 0; width: 270px; background: var(--yc-rail-bg); display: flex; flex-direction: column; z-index: 1000; overflow-y: auto; padding: 14px 12px 12px; } .yc-rail a { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: var(--yc-r-control); color: var(--yc-rail-item); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; /* a rail label never wraps — widen the rail instead */ } .yc-rail a:hover { background: var(--yc-rail-hover); color: var(--yc-rail-ink); text-decoration: none; } .yc-rail a.active { background: var(--yc-rail-active-bg); color: var(--yc-rail-active-fg); font-weight: 700; } .yc-rail a.active i { color: var(--yc-rail-active-fg); } .yc-rail i { font-size: 15px; color: var(--yc-rail-icon); } .yc-rail-group { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yc-rail-label); padding: 16px 11px 6px; } .yc-rail-account { border-top: 1px solid var(--yc-rail-rule); margin-top: 14px; padding: 11px 10px 4px; display: flex; align-items: center; gap: 9px; } /* The harbor stripe. Appears exactly once, at the top of the rail. */ .yc-rail-stripe { display: flex; height: 3px; border-radius: 2px; overflow: hidden; margin: 0 10px 14px; flex-shrink: 0; } .yc-rail-stripe > span:nth-child(1) { flex: 1; background: var(--yc-marigold); } .yc-rail-stripe > span:nth-child(2) { flex: 1; background: var(--yc-burnt); } .yc-rail-stripe > span:nth-child(3) { flex: 1; background: var(--yc-ensign); } /* Hero card — always the top card of the MAIN column. Never full width above a two-column layout. No icon or initials tile. */ .yc-hero { background: var(--yc-surface); border: 1px solid var(--yc-border); border-radius: var(--yc-r-card); box-shadow: var(--yc-shadow-card); padding: var(--yc-card-pad) calc(var(--yc-card-pad) + 2px); display: flex; align-items: flex-start; gap: 16px; } .yc-hero-title { font-size: 19px; font-weight: 800; line-height: 1.25; margin: 0 0 4px; color: var(--yc-ink); } .yc-hero-meta { font-size: var(--yc-fs-sub); color: var(--yc-muted); } .yc-hero-figure { font-family: var(--yc-font-mono); font-size: var(--yc-fs-hero); font-weight: 800; line-height: 1; white-space: nowrap; } /* KPI tile — no top rule, no side stripe. Label is the quiet 600 eyebrow; the figure is 24px mono — both straight off the Commerce overview. */ .yc-kpi { background: var(--yc-surface); border: 1px solid var(--yc-border); border-radius: var(--yc-r-card); box-shadow: var(--yc-shadow-card); padding: 18px 20px; } .yc-kpi .yc-eyebrow { font-weight: 600; margin-bottom: 8px; } .yc-kpi-figure { font-family: var(--yc-font-mono); font-size: 24px; font-weight: 800; line-height: 1; color: var(--c, var(--yc-ink)); } .yc-kpi-note { font-size: 11px; color: var(--yc-muted); margin-top: 6px; } /* Activity stream — the standard right-column companion. */ .yc-activity-entry { display: flex; gap: 10px; padding: 9px 16px; } .yc-activity-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; flex-shrink: 0; margin-top: 1px; background: var(--bg, var(--yc-info-bg)); color: var(--fg, var(--yc-info-fg)); } .yc-activity-date { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yc-faint); } .yc-activity-date::before, .yc-activity-date::after { content: ''; flex: 1; height: 1px; background: var(--yc-rule); } /* Avatar — five tints, cycled by person so one member reads the same everywhere. Icon fallback when no photo exists. */ .yc-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; width: 34px; height: 34px; font-size: 11.5px; } .yc-avatar-sm { width: 30px; height: 30px; font-size: 11px; } .yc-avatar-lg { width: 36px; height: 36px; font-size: 12px; } .yc-avatar-1 { background: var(--yc-info-bg); color: var(--yc-info-fg); } .yc-avatar-2 { background: var(--yc-ok-bg); color: var(--yc-ok-fg); } .yc-avatar-3 { background: var(--yc-warn-bg); color: var(--yc-warn-fg); } .yc-avatar-4 { background: var(--yc-danger-bg); color: var(--yc-danger-fg); } .yc-avatar-5 { background: var(--yc-neutral-bg); color: var(--yc-neutral-fg); } /* Help card — cream guidance. When a sidebar column carries one, it is the TOP card of that column; nothing sits above it. */ .yc-help-card { background: var(--yc-help-bg); border: 1px solid var(--yc-help-edge); border-radius: var(--yc-r-card); padding: 16px 18px; } .yc-help-card-title { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; font-size: var(--yc-fs-body); font-weight: 700; color: var(--yc-ink); } .yc-help-card-title i { font-size: 15px; color: var(--yc-help-fg); margin-top: 1px; } .yc-help-card-body { font-size: 12px; color: var(--yc-body); line-height: 1.6; } /* Kind tag — payment method, channel. Sentence case; .badge stays the uppercase status pill. */ .yc-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--yc-r-pill); white-space: nowrap; } /* Inline switch — 38×22, knob 18. State changes are instant; see the transition note at the top of section 6. */ .yc-switch { width: 38px; height: 22px; border-radius: var(--yc-r-pill); background: var(--yc-disabled); padding: 2px; display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer; border: 0; } .yc-switch > span { width: 18px; height: 18px; border-radius: 50%; background: var(--yc-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); margin-left: 0; } .yc-switch.on { background: var(--yc-primary); } .yc-switch.on > span { margin-left: 16px; } /* Staffing chip — a shift cell on a schedule week grid (Workforce). Colour carries the roll-up — full, short, or unstaffed — mono time over a confirmed-of-target count. The legend key for "unstaffed" is dashed. */ .yc-shift-chip { width: 100%; text-align: left; padding: 7px 9px; border-radius: var(--yc-r-control); border: 1px solid var(--yc-warn-edge); background: var(--yc-warn-bg); color: var(--yc-warn-fg); cursor: pointer; } .yc-shift-chip[data-staffing="full"] { background: var(--yc-ok-bg); border-color: var(--yc-ok-edge); color: var(--yc-ok-fg); } .yc-shift-chip[data-staffing="unstaffed"] { background: var(--yc-danger-bg); border-color: var(--yc-danger-edge); color: var(--yc-danger-fg); } .yc-shift-chip-time { display: block; font-family: var(--yc-font-mono); font-size: 11px; font-weight: 700; } .yc-shift-chip-sub { display: block; font-size: 10.5px; margin-top: 2px; } .yc-staffing-legend { display: inline-flex; align-items: center; gap: 7px; font-size: var(--yc-fs-small); font-weight: 600; white-space: nowrap; } /* Live marker — a dot, never a pulsing animation. */ .yc-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--yc-fs-small); font-weight: 600; color: var(--yc-ok-fg); white-space: nowrap; } .yc-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--yc-ok-fg); } /* Toast — ink, bottom-centre, no icon. */ .yc-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--yc-ink); color: var(--yc-surface); font-size: var(--yc-fs-sub); font-weight: 600; padding: 11px 18px; border-radius: var(--yc-r-control); box-shadow: var(--yc-shadow-lift); z-index: 2000; } /* Chart wrapper — fixed height so a card never reflows as data loads. */ .yc-chart { position: relative; height: 168px; } .yc-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; } .yc-chart-legend > span { display: flex; align-items: center; gap: 7px; font-size: var(--yc-fs-small); color: var(--yc-muted); } .yc-chart-key { width: 9px; height: 9px; border-radius: 2px; } /* Claim register — a value the SENDER asserted, which the platform has not verified. The dashed edge is the whole signal: asserted, unconfirmed. A derived observation keeps the solid .badge tint; the two must never be confused, and nothing may wear both. */ .yc-claim { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--yc-faint); background: transparent; border: 1px dashed var(--yc-decor); border-radius: var(--yc-r-pill); padding: 2px 8px; white-space: nowrap; } /* A claimed figure keeps mono and its own case — "60.0s", not "60.0S". */ .yc-claim-num { font-family: var(--yc-font-mono); font-size: 10.5px; text-transform: none; letter-spacing: 0; } /* Status dot — health beside a name, where a badge would crowd the line. Never colour alone: every dot carries a title and an aria-label. */ .yc-status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--yc-decor); flex-shrink: 0; } .yc-status-dot[data-health="online"] { background: var(--yc-ok-fg); } .yc-status-dot[data-health="degraded"] { background: var(--yc-warn-fg); } .yc-status-dot[data-health="offline"] { background: var(--yc-danger-fg); } /* Status-over-time strip — one cell per observation, oldest to newest. The absent case is the default rule: a cell with no data-s is UNKNOWN, not healthy. Silence about a thing is not a report of health. The legend key takes its colour from the same declarations, so it cannot drift. */ .yc-strip { display: flex; gap: 1px; } .yc-strip > span, .yc-strip-key { background: var(--yc-disabled); } .yc-strip > span { flex: 1; height: 15px; border-radius: 1px; } .yc-strip-key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; } .yc-strip > span[data-s="ok"], .yc-strip-key[data-s="ok"] { background: var(--yc-ok-fg); opacity: .45; } .yc-strip > span[data-s="warning"], .yc-strip-key[data-s="warning"] { background: var(--yc-warn-fg); } .yc-strip > span[data-s="error"], .yc-strip-key[data-s="error"] { background: var(--yc-danger-fg); } /* --- Third-party map surfaces ------------------------------------------ */ /* Leaflet ships its own light chrome and knows nothing about the modes. This is the whole skin, in one place: any surface that carries a map inherits it rather than restating it locally. Markers are divIcons drawn from the health tokens by the page — nothing here colours data. */ .leaflet-container { background: var(--yc-surface-sunken); font-family: var(--yc-font-sans); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--yc-surface); color: var(--yc-ink); border: 1px solid var(--yc-border); box-shadow: var(--yc-shadow-lift); border-radius: var(--yc-r-control); } .leaflet-popup-content { margin: 10px 12px; font-size: var(--yc-fs-sub); line-height: 1.5; } .leaflet-popup-close-button { color: var(--yc-faint) !important; } .leaflet-control-attribution { background: var(--yc-surface-alt) !important; color: var(--yc-faint) !important; font-size: 9.5px !important; } .leaflet-control-attribution a { color: var(--yc-muted) !important; } .leaflet-bar a { background: var(--yc-surface) !important; color: var(--yc-body) !important; border-color: var(--yc-border) !important; } /* --------------------------------------------------------------------------- 7b. WEB ADMIN SHELL + WORKFORCE Shared scaffolds for the light admin hubs (Commerce, Employees, …). These were previously restated as inline styles on every page; codified here so a hub page carries NO inline style beyond CSS-variable data bindings written by the view layer: --dot/--sz (swatch), --w/--fill/--h (meter), --c (tint), --bg/--fg/--edge (mark + icon), --al/--bbw (row), --strike (task label). ------------------------------------------------------------------------ */ /* Shell + rail chrome */ .yc-shell { min-height: 100vh; background: var(--yc-canvas); min-width: 1360px; } .yc-main { margin-left: 270px; padding: 26px 32px 96px; min-height: 100vh; } .yc-rail-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; } .yc-rail-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--yc-rail-active-bg); color: var(--yc-rail-bg); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .yc-rail-name { font-size: 13px; font-weight: 700; color: var(--yc-rail-ink); line-height: 1.3; white-space: nowrap; } .yc-rail-sub { font-size: 10.5px; color: var(--yc-rail-icon); } .yc-rail-caret { font-size: 12px; color: var(--yc-rail-label); } .yc-rail-nav { display: flex; flex-direction: column; gap: 1px; } .yc-rail-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--yc-rail-ink); background: var(--yc-ensign); padding: 1px 7px; border-radius: var(--yc-r-pill); } .yc-rail-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--yc-ensign); color: var(--yc-on-ensign); font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .yc-rail-user { font-size: 12px; font-weight: 600; color: var(--yc-rail-ink); white-space: nowrap; } .yc-rail-role { font-size: 10.5px; color: var(--yc-rail-icon); } /* Page head — title block, actions, breadcrumbs */ .yc-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; } .yc-page-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .yc-crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin-bottom: 6px; } .yc-crumbs a { color: var(--yc-muted); text-decoration: none; white-space: nowrap; } .yc-crumbs a:hover { color: var(--yc-ink); text-decoration: none; } .yc-crumbs-sep { color: var(--yc-disabled); } /* Layout primitives + utilities */ .yc-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .yc-record { display: grid; grid-template-columns: 3fr 1fr; gap: 20px; align-items: start; } .yc-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .yc-min { flex: 1; min-width: 0; } .yc-minw { min-width: 0; } .yc-grow { flex: 1; } .yc-noshrink { flex-shrink: 0; } .yc-mono { font-family: var(--yc-font-mono); } .yc-clickable { cursor: pointer; } .yc-inline-9 { display: flex; align-items: center; gap: 9px; } .yc-t-faint { color: var(--yc-faint); } .yc-m0 { margin: 0; } .yc-mt-1 { margin-top: 1px; } .yc-mt-2 { margin-top: 2px; } .yc-mb-2 { margin-bottom: 2px; } .yc-mb-3 { margin-bottom: 3px; } .yc-mb-7 { margin-bottom: 7px; } .yc-mb-12 { margin-bottom: 12px; } .yc-inline-8 { display: inline-flex; align-items: center; gap: 8px; } .yc-t-role { font-size: 12.5px; color: var(--yc-body); white-space: nowrap; } .yc-t-metanw { font-size: 12.5px; color: var(--yc-muted); white-space: nowrap; } .yc-t-subnw { font-size: 11.5px; color: var(--yc-muted); white-space: nowrap; } .yc-anno-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .yc-cardpad { padding: 14px 18px; } .yc-pin-ico { font-size: 11px; color: var(--yc-muted); } .yc-activity-list { padding: 6px 0 10px; } .yc-mt-4 { margin-top: 4px; } .yc-mt-14 { margin-top: 14px; } .yc-card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; } .yc-toolbar-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--yc-ink); } .yc-ico-muted { color: var(--yc-muted); } .yc-t-12nw { font-size: 12px; color: var(--yc-muted); white-space: nowrap; } .yc-week-rowhead-stack { padding: 12px 16px; border-bottom: 1px solid var(--yc-rule); min-width: 0; } .yc-week-rowhead-sub { font-size: 11px; color: var(--yc-muted); margin-top: 2px; } .yc-seat-label { flex: 1; font-size: 12.5px; color: var(--yc-muted); } .yc-seat-ghost i { font-size: 14px; } .yc-bar-row { display: flex; align-items: center; gap: 8px; } .yc-bar-count { font-size: 12px; font-weight: 600; color: var(--yc-muted); } .yc-chevron { color: var(--yc-disabled); font-size: 13px; } .yc-empty-sm { padding: 26px 18px; text-align: center; font-size: 12.5px; color: var(--yc-faint); } .yc-badge-ico { font-size: 9px; } .yc-inline-6 { display: inline-flex; align-items: center; gap: 6px; } .yc-not-uploaded { font-family: var(--yc-font-sans); font-weight: 500; font-style: italic; color: var(--yc-warn-fg); font-size: 12px; white-space: nowrap; } .yc-not-uploaded i { font-style: normal; } .yc-divider-cell { background: var(--yc-surface-alt); padding: 7px 18px; } .yc-mt-6 { margin-top: 6px; } .yc-hero-meta-inline { display: flex; align-items: center; gap: 7px; } .yc-warn-ico { flex-shrink: 0; margin-top: 1px; } .yc-tint { color: var(--c, inherit) !important; } .yc-menu-anchor { position: relative; flex-shrink: 0; } .yc-cell-action { text-align: right; } .yc-cell-strong { font-weight: 600; color: var(--yc-ink); } .yc-w-40 { width: 40px; } .yc-w-52 { width: 52px; } .yc-w-180 { width: 180px; } .yc-w-190 { width: 190px; } /* Small text roles (non-layout emphasis that a class must own) */ .yc-t-title { font-size: 13px; font-weight: 700; color: var(--yc-ink); } .yc-t-title-sm { font-size: 12.5px; font-weight: 700; color: var(--yc-ink); } .yc-t-sub { font-size: 11.5px; color: var(--yc-muted); } .yc-t-body { font-size: 12px; color: var(--yc-ink); line-height: 1.45; } .yc-t-preview { font-size: 12px; color: var(--yc-muted); line-height: 1.5; } .yc-t-note { font-size: 11.5px; color: var(--yc-muted); } .yc-t-mini { font-size: 11px; color: var(--yc-muted); } .yc-strong-nowrap { font-size: 13px; font-weight: 700; color: var(--yc-ink); white-space: nowrap; } .yc-activity-time { font-size: 10.5px; color: var(--yc-faint); margin-top: 2px; } .yc-list-time { font-size: 11px; color: var(--yc-faint); margin-top: 4px; } /* Hero interior */ .yc-hero-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; } .yc-hero-head .yc-hero-title { margin: 0; } .yc-hero-actions { display: flex; gap: 8px; flex-shrink: 0; } .yc-meta-grid { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 16px; } .yc-meta-label { margin-bottom: 4px; } .yc-meta-value { font-size: 13px; font-weight: 600; color: var(--c, var(--yc-ink)); white-space: nowrap; } /* Card interior */ .yc-card-title { display: flex; align-items: center; gap: 8px; } .yc-card-count { font-weight: 500; color: var(--yc-muted); } .yc-card-note { font-size: 11.5px; font-weight: 500; color: var(--c, var(--yc-muted)); } /* List row — divider on all but the last, or killed with --bbw:0 */ .yc-list-row { display: flex; align-items: var(--al, center); gap: 12px; padding: 12px 18px; border-bottom: var(--bbw, 1px) solid var(--yc-rule); } .yc-list-link { font-size: 13px; font-weight: 700; color: var(--yc-ink); text-decoration: none; } .yc-list-right { text-align: right; flex-shrink: 0; } /* Record-overview stat cells */ .yc-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); } .yc-statcell { padding: 16px 18px; border-right: 1px solid var(--yc-rule); } .yc-statcell:last-child { border-right: 0; } .yc-statcell-fig { font-size: 19px; color: var(--c, var(--yc-ink)); } /* Person cell (table) */ .yc-person { display: flex; align-items: center; gap: 10px; } .yc-person-name { font-size: 13px; font-weight: 700; color: var(--yc-ink); white-space: nowrap; } .yc-person-sub { font-size: 11.5px; color: var(--yc-muted); white-space: nowrap; } /* Schedule swatch + inline dot/label */ .yc-dot { width: var(--sz, 9px); height: var(--sz, 9px); border-radius: 3px; background: var(--dot); flex-shrink: 0; display: inline-block; } .yc-chip-inline { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .yc-schedules { display: flex; align-items: center; gap: 12px; } /* Overlapping avatar stack */ .yc-avatar-stack { display: flex; padding-left: 6px; } .yc-avatar-stacked { margin-left: -6px; box-shadow: 0 0 0 2px var(--yc-surface); } /* Meter (staffing, checklist, paystub coverage) */ .yc-meter { height: var(--h, 6px); border-radius: var(--yc-r-pill); background: var(--yc-border); overflow: hidden; } .yc-meter-54 { width: 54px; } .yc-meter-fill { height: 100%; border-radius: inherit; background: var(--fill, var(--yc-primary)); width: var(--w, 0); } /* Week grid */ .yc-week { display: grid; grid-template-columns: 170px repeat(7, minmax(0, 1fr)); } .yc-week-corner { padding: 9px 16px; background: var(--yc-surface-alt); border-bottom: 1px solid var(--yc-border); } .yc-week-dayhead { padding: 8px 10px; text-align: center; background: var(--yc-surface-alt); border-bottom: 1px solid var(--yc-border); border-left: 1px solid var(--yc-rule); } .yc-week-dayhead .yc-num { display: block; font-size: 15px; font-weight: 700; color: var(--yc-ink); margin-top: 2px; } .yc-week-rowhead { padding: 12px 16px; border-bottom: 1px solid var(--yc-rule); display: flex; align-items: center; gap: 8px; min-width: 0; } .yc-week-rowhead-name { font-size: 12.5px; font-weight: 700; color: var(--yc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yc-week-rowhead-sub { font-size: 11px; color: var(--yc-muted); margin-top: 2px; } .yc-week-cell { padding: 8px 7px; border-bottom: 1px solid var(--yc-rule); border-left: 1px solid var(--yc-rule); min-height: 60px; } .yc-contents { display: contents; } /* Staffing legend — keyed by data-staffing, never a bare colour */ .yc-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; } .yc-legend-item[data-staffing="full"] { color: var(--yc-ok-fg); } .yc-legend-item[data-staffing="short"] { color: var(--yc-warn-fg); } .yc-legend-item[data-staffing="unstaffed"] { color: var(--yc-danger-fg); } .yc-legend-key { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .yc-legend-item[data-staffing="full"] .yc-legend-key { background: var(--yc-ok-fg); } .yc-legend-item[data-staffing="short"] .yc-legend-key { background: var(--yc-warn-fg); } .yc-legend-item[data-staffing="unstaffed"] .yc-legend-key { border: 1.5px dashed var(--yc-danger-fg); } .yc-footer-legend { justify-content: flex-start; gap: 16px; } /* Checklist */ .yc-checklist-group { display: flex; align-items: center; gap: 10px; padding: 9px 18px; background: var(--yc-surface-alt); border-bottom: 1px solid var(--yc-rule); } .yc-checklist-count { font-family: var(--yc-font-mono); font-weight: 700; font-size: 11.5px; color: var(--c, var(--yc-ink)); white-space: nowrap; font-variant-numeric: tabular-nums; } .yc-task-mark { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--fg); border: 1px solid var(--edge); } .yc-task-mark i { font-size: 10px; } .yc-task-label { font-size: 13px; color: var(--c, var(--yc-ink)); text-decoration: var(--strike, none); } .yc-task-files { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--yc-muted); } .yc-task-by { font-size: 11.5px; color: var(--yc-faint); margin-top: 3px; } .yc-task-head { display: flex; align-items: center; gap: 8px; } /* Day-of-week pill (recurrence rules, modal day picker) */ .yc-daypill { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--yc-surface-alt); color: var(--yc-decor); border: 1px solid var(--yc-border); } .yc-daypill.is-on { background: var(--yc-primary); color: var(--yc-on-primary); border-color: var(--yc-primary); } .yc-daypill-lg { width: 38px; height: 38px; border-radius: var(--yc-r-control); font-size: 12.5px; cursor: pointer; } .yc-dayrow { display: flex; align-items: center; gap: 5px; } .yc-dayrow-6 { display: flex; gap: 6px; } /* Filter menu label + check (inside .yc-menu > button) */ .yc-menu-label { flex: 1; min-width: 0; text-align: left; } .yc-menu-check { font-size: 12px; color: var(--yc-primary-ink); } /* Schedule card */ .yc-schedcard-body { padding: 16px 18px 15px; } .yc-schedcard-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .yc-schedcard-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: var(--yc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yc-schedcard-meta { font-size: 12px; color: var(--yc-muted); margin-bottom: 15px; } .yc-schedcard-meter { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; } .yc-schedcard-crew { display: flex; align-items: center; gap: 10px; } /* Empty state */ .yc-empty { padding: 38px 18px; text-align: center; } .yc-empty-lg { padding: 44px 18px; text-align: center; } .yc-empty-icon { font-size: 19px; color: var(--yc-disabled); } .yc-empty-title { font-size: 13px; font-weight: 600; color: var(--yc-muted); margin-top: 7px; } .yc-empty-sub { font-size: 12px; color: var(--yc-faint); margin-top: 3px; } .yc-empty-sub-wide { max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.5; } /* In-card warning banner (e.g. missing paystubs) */ .yc-inline-warn { display: flex; align-items: flex-start; gap: 9px; padding: 11px 18px; background: var(--yc-warn-bg); border-bottom: 1px solid var(--yc-warn-edge); font-size: 12px; color: var(--yc-warn-fg); line-height: 1.5; } .yc-row-warn { background: var(--yc-warn-bg); } /* Shift crew — coverage meter row + open-seat prompt */ .yc-crew-meter-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--yc-rule); } .yc-seat-add { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--yc-rule); } .yc-seat-ghost { width: 34px; height: 34px; border-radius: 50%; border: 1px dashed var(--yc-disabled); display: flex; align-items: center; justify-content: center; color: var(--yc-faint); flex-shrink: 0; } .yc-pin-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--yc-font-mono); font-size: 12.5px; color: var(--yc-body); } .yc-pin-btn i { font-size: 11px; color: var(--yc-disabled); } /* Modal — hand-rolled shell mounts the platform .modal-* skin */ .yc-modal { display: flex; flex-direction: column; max-height: 88vh; width: var(--w, 560px); } .yc-modal .modal-body { overflow-y: auto; } .yc-modal-sub { font-size: 12px; color: var(--yc-muted); margin-top: 2px; } .yc-field { margin-bottom: 18px; } .yc-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .yc-req { color: var(--yc-ensign); } .yc-opt { color: var(--yc-faint); font-weight: 500; text-transform: none; letter-spacing: 0; } .yc-radio { margin: 0; flex-shrink: 0; } .yc-choice-row { display: flex; gap: 9px; } .yc-choice { flex: 1; display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 12px 14px; border-radius: var(--yc-r-card); cursor: pointer; background: var(--yc-surface); border: 1px solid var(--yc-border); } .yc-choice.is-on { background: var(--yc-primary-wash); border-color: var(--yc-primary); } .yc-choice-name { display: block; font-size: 13px; font-weight: 700; color: var(--yc-ink); } .yc-choice-desc { display: block; font-size: 11.5px; color: var(--yc-muted); line-height: 1.45; margin-top: 2px; } .yc-bordered { border: 1px solid var(--yc-border); border-radius: var(--yc-r-card); overflow: hidden; } .yc-picker { max-height: 190px; overflow-y: auto; } .yc-pickrow { display: flex; align-items: center; gap: 11px; margin: 0; padding: 11px 14px; cursor: pointer; background: var(--yc-surface); border-bottom: 1px solid var(--yc-rule); } .yc-pickrow:last-child { border-bottom: 0; } .yc-pickrow.is-on { background: var(--yc-primary-wash); } .yc-pin-row { display: flex; gap: 8px; } .yc-pin-digit { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--yc-border); border-radius: var(--yc-r-control); background: var(--yc-surface); font-family: var(--yc-font-mono); font-size: 16px; font-weight: 700; color: var(--yc-ink); } .yc-stepper { display: flex; align-items: center; gap: 9px; } .yc-stepper-val { min-width: 40px; text-align: center; font-size: 15px; font-weight: 700; color: var(--yc-ink); } .yc-file-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 22px 14px; border: 1.5px dashed var(--yc-decor); border-radius: var(--yc-r-card); background: var(--yc-surface); cursor: pointer; } .yc-file-drop-icon { font-size: 19px; color: var(--yc-faint); } .yc-file-drop-label { font-size: 12.5px; font-weight: 600; color: var(--yc-primary-ink); } .yc-file-drop-hint { font-size: 11.5px; color: var(--yc-muted); font-weight: 400; white-space: normal; } .yc-file-chip { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid var(--yc-border); border-radius: var(--yc-r-card); background: var(--yc-surface); } .yc-file-chip-icon { font-size: 15px; color: var(--yc-ensign); } .yc-file-chip-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--yc-ink); overflow: hidden; text-overflow: ellipsis; } .yc-gate-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; background: var(--yc-surface); border-bottom: 1px solid var(--yc-rule); } .yc-gate-row:last-child { border-bottom: 0; } .yc-gate-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; background: var(--bg); color: var(--fg); } .yc-toggle-field { display: flex; align-items: center; gap: 14px; margin: 0; padding: 13px 15px; border: 1px solid var(--yc-border); border-radius: var(--yc-r-card); cursor: pointer; } /* --------------------------------------------------------------------------- 8. PROHIBITIONS — enforced, not merely documented ------------------------------------------------------------------------ */ /* A coloured accent border on the side of a card is the single most recognisable AI-design tell. Status goes in the value, a chip, a badge, or an icon. The one legitimate exception is a selection marker on a row inside a master/detail list — hence .yc-row-selected. */ .card, .yc-hero, .yc-kpi { border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; } .yc-row-selected { border-left: 2px solid var(--yc-primary); } /* No decorative gradients. The only permitted gradient is a legibility scrim over photography. */ .yc-photo-scrim { background: linear-gradient(to top, var(--yc-canvas) 0%, transparent 60%); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* --------------------------------------------------------------------------- 9. PRINT — statements, receipts, day-end reports Always the light surface, whatever mode the screen was in. ------------------------------------------------------------------------ */ @media print { [data-yc-mode] { --yc-canvas: #FFFFFF; --yc-surface: #FFFFFF; --yc-surface-alt: #FFFFFF; --yc-ink: #1A1A1A; --yc-body: #333333; --yc-muted: #555555; --yc-faint: #777777; --yc-border: #CCCCCC; --yc-rule: #E5E5E5; --yc-shadow-card: none; --yc-shadow-lift: none; } .yc-rail, .yc-hub-nav, .yc-filter-chips, .yc-toolbar, .pagination { display: none !important; } }