/* ============================================================================ Flamingo — app-wide design foundation (Flamingo UI migration · Prompt 2) Extracted from the Capture Station reference (flamingo/reference/*): "modern instrument UI — dark navy rail + coral, layered depth." Plus Jakarta Sans + JetBrains Mono · coral accent + gradient · 16px radius · soft shadows + coral glows · tablet-first (44px touch targets). SCOPING: every rule is nested under `.flamingo`, and the tokens are declared ON that scope (not :root). Loading this file changes nothing until an element gets the `.flamingo` class. Prompt 3 puts `.flamingo` on to flip the shell + Bootstrap components onto Flamingo in one move. ============================================================================ */ .flamingo{ /* dark rail */ --navy-1:#0f1830; --navy-2:#0c1322; --navy-line:#243150; /* ink (text on light) */ --ink:#172033; --ink-soft:#5a6678; --ink-faint:#616d7f; /* coral accent + primary gradient */ --coral:#f0617a; --coral-2:#ff7d6b; --coral-press:#bf3651; --coral-soft:#fdebee; --grad:linear-gradient(135deg,#d13856 0%,#c9452c 100%); /* light surfaces */ --surface:#f4f6fb; --panel:#ffffff; --line:#e6eaf2; --line-2:#eef1f7; /* semantic */ --pass:#13a268; --pass-soft:#e4f6ee; --pass-text:#0e7a4f; --warn:#df9526; --warn-soft:#fbf1db; --warn-text:#8a5e10; --fail:#e0504c; --fail-soft:#fce8e7; --fail-text:#b5322e; /* type */ --sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace; /* elevation */ --sh-sm:0 1px 2px rgba(18,28,50,.05); --sh:0 1px 2px rgba(18,28,50,.04),0 10px 30px rgba(18,28,50,.07); --sh-lg:0 12px 40px rgba(18,28,50,.16); /* radius */ --r:16px; --r-sm:12px; --r-xs:10px; /* fluid type */ --fs-2xs:clamp(10px,9.2px + .2vw,11px); --fs-xs:clamp(11px,10px + .3vw,12.5px); --fs-sm:clamp(12.5px,11.5px + .3vw,14px); --fs-md:clamp(14px,13px + .35vw,15.5px); --fs-lg:clamp(16px,14.5px + .5vw,18px); --fs-xl:clamp(19px,17px + .6vw,22px); --tap:44px; font-family:var(--sans); color:var(--ink); letter-spacing:-.005em; -webkit-font-smoothing:antialiased; } .flamingo *{box-sizing:border-box} .flamingo :where(button,[href],input,select,textarea,summary,[tabindex]):focus-visible{ outline:2.5px solid var(--coral); outline-offset:2px} .flamingo .mono{font-family:var(--mono)} .flamingo .t-soft{color:var(--ink-soft)} .flamingo .t-faint{color:var(--ink-faint)} .flamingo a{color:var(--coral-press); text-decoration:none} .flamingo a:hover{text-decoration:underline} /* ── App shell ─────────────────────────────────────────────────────────── */ .flamingo.fl-app, .flamingo .fl-app{display:grid; grid-template-columns:236px 1fr; min-height:100vh; min-height:100dvh} .flamingo .rail{background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:18px 14px; position:relative} .flamingo .rail-brand{display:flex; align-items:center; gap:12px; padding:6px 8px 22px} .flamingo .rail-brand .brand-mark{width:36px; height:36px; flex:0 0 auto; border-radius:11px; box-shadow:0 6px 16px rgba(240,97,122,.4)} .flamingo .brand-name{font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1.05} .flamingo .brand-tag{font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.22em; color:var(--coral-press)} .flamingo .rail .nav{display:flex; flex-direction:column; gap:4px} .flamingo .rail .nav-item{position:relative; display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--r-sm); color:var(--ink-soft); cursor:pointer; font-size:14.5px; font-weight:500; font-family:var(--sans); border:0; background:none; text-align:left; width:100%; text-decoration:none; transition:background .14s,color .14s} .flamingo .rail .nav-item:hover{background:var(--surface); color:var(--ink)} .flamingo .rail .nav-item.active{background:var(--coral-soft); color:var(--coral-press); font-weight:600} .flamingo .rail .nav-item.active::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--grad)} .flamingo .rail .nav-item svg,.flamingo .rail .nav-item i{width:19px; height:19px; flex:0 0 auto} .flamingo .rail-foot{margin-top:auto; padding:13px 11px 2px; display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--ink-faint); border-top:1px solid var(--line)} .flamingo .rail-foot .dot{width:7px; height:7px; border-radius:50%; background:var(--pass); box-shadow:0 0 8px #13a268} .flamingo .fl-main{display:flex; flex-direction:column; min-width:0; background:var(--surface)} .flamingo .topbar{min-height:64px; flex:0 0 auto; background:rgba(255,255,255,.85); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:8px clamp(14px,1.6vw,24px)} .flamingo .topbar-title{display:flex; flex-direction:column; line-height:1.15} .flamingo .tt-main{font-size:17px; font-weight:700; letter-spacing:-.02em} .flamingo .tt-sub{font-size:12.5px; color:var(--ink-soft); margin-top:1px} .flamingo .topbar-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-inline-start:auto} .flamingo .content{flex:1 1 auto; min-height:0; overflow:auto; padding:clamp(14px,1.6vw,24px); background:var(--surface); container-type:inline-size} /* full-page scope background when .flamingo is on */ .flamingo{background:var(--surface)} /* ── Cards / panels ────────────────────────────────────────────────────── */ .flamingo .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh)} .flamingo .card-pad{padding:20px 22px} .flamingo .panel-head{margin-bottom:18px} .flamingo .panel-head h1,.flamingo .panel-head h2{font-size:var(--fs-xl); font-weight:800; letter-spacing:-.025em; margin:0} .flamingo .panel-head p{font-size:13.5px; color:var(--ink-soft); margin:4px 0 0} .flamingo .card-title{font-size:13px; font-weight:700; letter-spacing:-.01em; margin:0 0 12px} .flamingo .eyebrow{font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint)} /* card header/footer strips + page header (used by _partials macros) */ .flamingo .card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)} .flamingo .card-head .card-title{margin:0; font-size:13.5px} .flamingo .card-foot{padding:12px 18px; border-top:1px solid var(--line)} .flamingo .fl-page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px} /* simple list (side-rail cards) */ .flamingo .fl-list{list-style:none; margin:0; padding:0} .flamingo .fl-list-item{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:11px 18px; border-top:1px solid var(--line-2)} .flamingo .fl-list-item:first-child{border-top:0} .flamingo .fl-list-item a{font-weight:600} .flamingo .fl-list-item .sub{font-size:12px; color:var(--ink-soft); margin-top:2px} .flamingo .fl-list-empty{padding:26px 18px; text-align:center; color:var(--ink-faint); font-size:13px} /* compact inline metric row (widgets) */ .flamingo .mini-stats{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:12px} .flamingo .mini-stat{display:flex; flex-direction:column} .flamingo .mini-stat .v{font-family:var(--mono); font-size:20px; font-weight:700; color:var(--ink); line-height:1} .flamingo .mini-stat .k{font-size:11px; color:var(--ink-soft); margin-top:4px} /* ── Buttons (also maps common Bootstrap variants) ─────────────────────── */ .flamingo .btn{font-family:var(--sans); font-size:14.5px; font-weight:650; letter-spacing:-.01em; border:1px solid transparent; border-radius:var(--r-sm); padding:11px 20px; cursor:pointer; min-height:var(--tap); display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; transition:background .14s,box-shadow .14s,transform .06s,border-color .14s} .flamingo .btn:active{transform:translateY(1px)} .flamingo .btn:disabled,.flamingo .btn.disabled{opacity:.45; cursor:not-allowed} .flamingo .btn-primary,.flamingo .btn-go,.flamingo .btn-success{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(240,97,122,.32)} .flamingo .btn-primary:hover,.flamingo .btn-go:hover,.flamingo .btn-success:hover{ box-shadow:0 9px 24px rgba(240,97,122,.4); transform:translateY(-1px); color:#fff} .flamingo .btn-quiet,.flamingo .btn-secondary,.flamingo .btn-outline-primary,.flamingo .btn-outline-secondary,.flamingo .btn-light{ background:var(--panel); color:var(--ink); border-color:var(--line)} .flamingo .btn-quiet:hover,.flamingo .btn-secondary:hover,.flamingo .btn-outline-primary:hover, .flamingo .btn-outline-secondary:hover,.flamingo .btn-light:hover{background:var(--surface); border-color:#d4dbe8; color:var(--ink)} .flamingo .btn-accent{background:var(--coral-soft); color:var(--coral-press); border-color:#f0617a44} .flamingo .btn-accent:hover{background:#fde0e5} .flamingo .btn-danger{background:var(--fail); color:#fff; border-color:transparent} .flamingo .btn-danger:hover{background:#c8433f; color:#fff} .flamingo .btn-sm{padding:8px 13px; min-height:38px; font-size:13px} /* ── Forms ─────────────────────────────────────────────────────────────── */ .flamingo input,.flamingo select,.flamingo textarea, .flamingo .form-control,.flamingo .form-select{font-family:var(--sans); font-size:14px; color:var(--ink); background-color:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-height:var(--tap); outline:none; width:100%; transition:border-color .15s} .flamingo input:focus,.flamingo select:focus,.flamingo textarea:focus, .flamingo .form-control:focus,.flamingo .form-select:focus{border-color:var(--coral); box-shadow:none} .flamingo input.mono,.flamingo .mono input{font-family:var(--mono)} .flamingo label,.flamingo .form-label{font-size:13px; font-weight:600; color:var(--ink-soft)} .flamingo .field-label{font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)} .flamingo input[type=checkbox],.flamingo input[type=radio]{width:16px; height:16px; min-height:0; accent-color:var(--coral)} /* ── Tables ────────────────────────────────────────────────────────────── */ .flamingo table,.flamingo .table{width:100%; border-collapse:collapse; font-size:13px; color:var(--ink)} .flamingo thead th,.flamingo .table thead th{position:sticky; top:0; background:var(--surface); text-align:left; padding:10px 14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; border-bottom:1px solid var(--line)} .flamingo tbody td,.flamingo .table tbody td{padding:9px 14px; border-top:1px solid var(--line-2); vertical-align:middle} .flamingo tbody tr:hover td{background:#fafbfd} .flamingo td.num,.flamingo th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums} .flamingo td.id,.flamingo th.id{font-family:var(--mono)} /* ── Badges / pills ────────────────────────────────────────────────────── */ .flamingo .pill,.flamingo .badge{display:inline-flex; align-items:center; font-family:var(--sans); font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--surface); color:var(--ink-soft)} .flamingo .pill-accent{background:var(--coral-soft); color:var(--coral-press)} .flamingo .pill-pass,.flamingo .badge.bg-success{background:var(--pass-soft); color:var(--pass-text)} .flamingo .pill-warn,.flamingo .badge.bg-warning{background:var(--warn-soft); color:var(--warn-text)} .flamingo .pill-fail,.flamingo .badge.bg-danger{background:var(--fail-soft); color:var(--fail-text)} .flamingo .pill-info,.flamingo .badge.bg-info,.flamingo .badge.bg-primary{background:var(--coral-soft); color:var(--coral-press)} /* ── Stat cards ────────────────────────────────────────────────────────── */ .flamingo .statbar{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px} .flamingo .stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; box-shadow:var(--sh-sm)} .flamingo .stat-v{font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1} .flamingo .stat-v small{font-size:14px; font-weight:600; color:var(--ink-soft)} .flamingo .stat-k{font-size:12px; color:var(--ink-soft); margin-top:6px; font-weight:500} .flamingo .stat.accent{background:linear-gradient(135deg,#fff,var(--coral-soft)); border-color:#f0617a33} .flamingo .stat.accent .stat-v{color:var(--coral-press)} /* ── Verdict / status lamp ─────────────────────────────────────────────── */ .flamingo .verdict{display:flex; align-items:center; gap:16px; padding:18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)} .flamingo .verdict-disc{width:30px; height:30px; border-radius:50%; flex:0 0 auto; background:#c4cbd8} .flamingo .verdict .status{font-size:20px; font-weight:800; letter-spacing:-.025em; line-height:1.1} .flamingo .verdict .status-sub{font-size:13px; color:var(--ink-soft); font-family:var(--mono)} .flamingo .lamp-pass{background:var(--pass-soft); border-color:#13a26836} .flamingo .lamp-pass .verdict-disc{background:var(--pass); box-shadow:0 0 0 6px #13a2681f} .flamingo .lamp-pass .status{color:#0d6e48} .flamingo .lamp-fail{background:var(--fail-soft); border-color:#e0504c36} .flamingo .lamp-fail .verdict-disc{background:var(--fail); box-shadow:0 0 0 6px #e0504c1f} .flamingo .lamp-fail .status{color:#b23733} /* ── Modal ─────────────────────────────────────────────────────────────── */ .flamingo .fl-modal{position:fixed; inset:0; background:rgba(15,24,48,.5); backdrop-filter:blur(3px); z-index:90; display:flex; align-items:center; justify-content:center; padding:24px} .flamingo .modal-card,.flamingo .fl-modal-card{background:var(--panel); border-radius:var(--r); box-shadow:var(--sh-lg); max-width:560px; width:100%; max-height:88vh; overflow:auto} .flamingo .modal-head{display:flex; align-items:center; gap:10px; padding:18px 22px; border-bottom:1px solid var(--line)} .flamingo .modal-head .h,.flamingo .modal-head h3{font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0} .flamingo .modal-x{margin-inline-start:auto; font-size:24px; line-height:1; color:var(--ink-faint); background:none; border:0; cursor:pointer; padding:2px 8px; min-width:var(--tap); min-height:var(--tap)} .flamingo .modal-x:hover{color:var(--ink)} .flamingo .modal-body{padding:20px 22px; display:flex; flex-direction:column; gap:14px} /* ── Toast ─────────────────────────────────────────────────────────────── */ .flamingo .toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--navy-1); color:#fff; font-family:var(--mono); font-size:14px; padding:14px 22px; border-radius:13px; box-shadow:var(--sh-lg); z-index:80; display:flex; align-items:center; gap:11px; border:1px solid rgba(255,255,255,.08)} /* ── Empty state / tips ────────────────────────────────────────────────── */ .flamingo .empty-state{text-align:center; padding:40px 28px; border:1.5px dashed #ccd5e6; border-radius:var(--r); color:var(--ink-soft); background:var(--panel)} .flamingo .empty-state .lead{font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.02em} .flamingo .tip{display:flex; gap:14px; padding:16px 18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-sm)} .flamingo .tip-n{font-family:var(--mono); font-weight:800; color:#fff; font-size:13px; width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:var(--grad); display:grid; place-items:center; box-shadow:0 4px 10px rgba(240,97,122,.3)} /* ── Layout utilities ──────────────────────────────────────────────────── */ .flamingo .fl-stack{display:flex; flex-direction:column; gap:16px} .flamingo .fl-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap} .flamingo .fl-grid{display:grid; gap:16px} /* ── Scrollbars + reduced motion ───────────────────────────────────────── */ .flamingo ::-webkit-scrollbar{width:10px; height:10px} .flamingo ::-webkit-scrollbar-thumb{background:#cfd6e3; border-radius:6px; border:2px solid var(--surface)} @media (prefers-reduced-motion:reduce){ .flamingo .btn:active,.flamingo .btn-primary:hover,.flamingo .btn-go:hover{transform:none} } @media (max-width:720px){ .flamingo.fl-app,.flamingo .fl-app{grid-template-columns:64px 1fr} .flamingo .rail-brand .brand-name,.flamingo .rail-brand .brand-tag,.flamingo .rail .nav-item .nav-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)} .flamingo .rail-brand{justify-content:center} .flamingo .rail .nav-item{justify-content:center} .flamingo .rail-foot{display:none} }