/* ============================================================================ HILLS COFFEE OPERATIONS — flat design system No frosted glass, no blur, no ambient orbs. Solid surfaces, hairline borders, one confident accent. Gradient is used only where it carries meaning: a hero, a chart fill, a progress bar. ============================================================================ */ /* ===== tokens ===== Neutral black / grey / white shell, one vivid emerald accent. The greys are deliberately untinted: a green-tinted dark theme made every surface look slightly dirty next to the accent. */ :root{ --accent:#0f7357;--accent-2:#17916f;--accent-3:#2bb890; --bg:#f2f3f4;--bg-tint-a:transparent;--bg-tint-b:transparent;--bg-tint-c:transparent; --ink:#0c0d0e;--ink-2:#42454a;--ink-3:#71757c;--ink-4:#9a9ea5; --surface:#ffffff;--surface-solid:#ffffff;--surface-2:#fafafb;--surface-3:#f1f2f4; --line:#e4e6e9;--line-2:#d4d7dc;--hairline:#eceef1; /* form-field greys — see the input rules for why these are separate */ --field:#f1f2f4;--field-2:#fafafb;--field-line:#d4d7dc; --edge:none; --shadow:0 1px 2px rgba(12,13,14,.05); --shadow-lg:0 4px 8px rgba(12,13,14,.05),0 18px 38px rgba(12,13,14,.09); --accent-soft:#e3f3ee;--accent-ink:#0b5a44; --accent-glow:0 6px 22px rgba(15,115,87,.26); /* the reference never fills a green shape flat — it always runs deep to light */ --accent-grad:linear-gradient(100deg,#0b5a45 0%,#17916f 100%); --accent-grad-soft:linear-gradient(100deg,#e8f4f0 0%,#d6ece4 100%); --danger:#d13b2e;--danger-soft:#fcebe9; --warn:#946708;--warn-soft:#fdf3e0; --info:#2563c4;--info-soft:#e9effb; --ok:#0f7357;--ok-soft:#e3f3ee; --dark:#0c0d0e;--spark:#0f7357; --hero-a:#1a1d20;--hero-b:#0a0b0c; --blur:0px;--sat:100%;--r:16px;--r2:14px;--r3:10px;--rn:10px; /* one grain tile, reused by the page ground and by any panel that wants it */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } [data-theme="dark"]{ /* deep emerald, not mint. The bright tone is reserved for thin marks — a rule, a sparkline, an active indicator — never for a filled block. */ --accent:#12876a;--accent-2:#1aa37f;--accent-3:#35c9a3; --bg:#080a09;--bg-tint-a:transparent;--bg-tint-b:transparent;--bg-tint-c:transparent; --ink:#ffffff;--ink-2:#b6bcb9;--ink-3:#7f8683;--ink-4:#5a615e; --surface:#0e100f;--surface-solid:#0e100f;--surface-2:#141715;--surface-3:#1a1e1c; --line:#1e2220;--line-2:#2a2f2c;--hairline:#191c1a; /* half the green bias of the surfaces above, so a column of fields reads grey */ --field:#1a1c1b;--field-2:#141615;--field-line:#2a2d2b; --edge:none; --shadow:0 1px 2px rgba(0,0,0,.6); --shadow-lg:0 12px 40px rgba(0,0,0,.65); --accent-soft:#0d2b22;--accent-ink:#35c9a3; --accent-glow:0 8px 30px rgba(18,135,106,.34); --accent-grad:linear-gradient(100deg,#0b4f3d 0%,#189a76 100%); --accent-grad-soft:linear-gradient(100deg,#0c2a21 0%,#123c2f 100%); --danger:#ff6b5a;--danger-soft:#2a1512; --warn:#e8b44f;--warn-soft:#2a2114; --info:#6ea4f5;--info-soft:#111d2d; --ok:#35c9a3;--ok-soft:#0d2b22; --dark:#ffffff;--spark:#35c9a3; --hero-a:#161a18;--hero-b:#080a09; } *{box-sizing:border-box} html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:14px;letter-spacing:-.011em; min-height:100vh;transition:background .35s,color .35s; /* contextual alternates and better default figures */ font-feature-settings:"cv05" 1,"cv11" 1,"ss01" 1} /* ===== typography ===== Every figure in a dashboard sits in a column next to another figure, so the digits are set to a fixed width. Without this, 111 is visibly narrower than 999 and the columns shimmer as data changes. */ .card strong,.statstrip strong,.statbig,td,th,.cnt,.donutcenter strong, .funnel .bar,.funnellegend,.statrow b,.tag{font-variant-numeric:tabular-nums} /* Display type is LIGHT, not heavy. The reference sets its headline and its big figures at a low weight and large size — that contrast between airy display and dense small text is most of what reads as expensive. Light weights are only ever used above ~24px, where they stay legible. */ h1,h2,.statbig,.card strong,.statstrip strong,.donutcenter strong{font-weight:350} h1{font-size:44px;letter-spacing:-.035em;line-height:1.02} h2{font-size:30px;letter-spacing:-.032em} .card small,.statstrip small,th,.navgroup,header small,.qa small{letter-spacing:.04em} /* a hairline rule under a headline figure, as the reference draws under its "Paid for the period" number */ .ruled{position:relative;padding-bottom:13px} .ruled::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,var(--accent-3),var(--line) 62%,transparent)} /* One restrained wash at the top of the page. Nothing floats behind panels any more — the old blurred orbs are what made the surfaces read as "gradient blocks stuck on top" rather than as real cards. */ /* ===== atmosphere ===== Three effects working together, all pure CSS: 1. a luminous emerald light source bleeding across the ground, the way the planet lights the page in the reference; 2. a diagonal shift in the black itself, so the ground is never a flat slab; 3. a fine grain over everything, which is what stops a large dark area looking like dead plastic. */ body{background-attachment:fixed;background-repeat:no-repeat} /* A smooth charcoal-to-black diagonal, with two very faint nebula clouds and a whisper of emerald. The grey-to-black shift does the heavy lifting; the colour is only there so the black is never flat. */ [data-theme="dark"] body{ background-image: radial-gradient(1200px 800px at 18% -12%,rgba(58,66,72,.34),transparent 62%), radial-gradient(900px 620px at 92% 6%,rgba(18,135,106,.13),transparent 58%), radial-gradient(1000px 760px at 72% 104%,rgba(38,46,52,.30),transparent 62%), radial-gradient(700px 520px at 4% 92%,rgba(11,79,61,.12),transparent 60%), linear-gradient(152deg,#1a1e21 0%,#101315 30%,#08090a 66%,#050506 100%)} :root:not([data-theme="dark"]) body{ background-image: radial-gradient(1000px 620px at 6% -10%,rgba(15,115,87,.09),transparent 58%), radial-gradient(760px 520px at 99% 2%,rgba(43,184,144,.06),transparent 55%), linear-gradient(152deg,#fafbfb 0%,#f3f5f4 46%,#e9ecea 100%)} /* grain — a tiny tiled turbulence, held at a few percent. Any stronger and it reads as a dirty screen rather than as texture. */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; opacity:.05;mix-blend-mode:overlay; background-image:var(--grain);background-size:160px 160px} :root:not([data-theme="dark"]) body::before{opacity:.028} /* a sparse starfield, drawn rather than loaded — a photograph would cost hundreds of kilobytes and fight the text for contrast */ body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;display:block; background-image: radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,255,255,.55),transparent), radial-gradient(1.1px 1.1px at 62% 8%,rgba(255,255,255,.40),transparent), radial-gradient(1.6px 1.6px at 84% 34%,rgba(255,255,255,.50),transparent), radial-gradient(1px 1px at 28% 52%,rgba(255,255,255,.34),transparent), radial-gradient(1.3px 1.3px at 46% 78%,rgba(255,255,255,.30),transparent), radial-gradient(1px 1px at 91% 68%,rgba(255,255,255,.28),transparent), radial-gradient(1.5px 1.5px at 8% 86%,rgba(255,255,255,.32),transparent), radial-gradient(1px 1px at 72% 94%,rgba(255,255,255,.24),transparent); background-size:100% 100%;opacity:.7} :root:not([data-theme="dark"]) body::after{display:none} /* ===== emerald corner glow ===== The Clario popup has light pouring out of one corner. Add .aglow to any panel that deserves the emphasis. */ /* The glow covers the whole panel (inset:0) rather than being a sized ellipse inside it — a sized box has an edge, and that edge is what made it read as a blob stuck on top instead of light inside the card. The falloff uses many closely-spaced stops. Two or three stops across a wide area is what produces visible banding in a large soft gradient; stepping the alpha down gradually keeps it smooth. Grain sits on its own layer (::after), not blended into the gradient. Mixing it into the same background with blend-mode:overlay is what washed the card grey last time: the noise tile is mid-grey, and overlay lifts everything under it. A separate layer at ~3% with soft-light adds the texture without touching the panel's tone. */ .aglow{position:relative;overflow:hidden;isolation:isolate} .aglow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(130% 110% at 100% 0%, rgba(18,135,106,.22) 0%, rgba(18,135,106,.175) 9%, rgba(18,135,106,.132) 18%, rgba(18,135,106,.097) 27%, rgba(18,135,106,.068) 36%, rgba(18,135,106,.045) 45%, rgba(18,135,106,.028) 54%, rgba(18,135,106,.016) 63%, rgba(18,135,106,.008) 72%, rgba(18,135,106,.003) 82%, rgba(18,135,106,0) 92%)} :root:not([data-theme="dark"]) .aglow::before{ background:radial-gradient(130% 110% at 100% 0%, rgba(15,115,87,.105) 0%, rgba(15,115,87,.083) 9%, rgba(15,115,87,.063) 18%, rgba(15,115,87,.046) 27%, rgba(15,115,87,.032) 36%, rgba(15,115,87,.021) 45%, rgba(15,115,87,.013) 54%, rgba(15,115,87,.007) 63%, rgba(15,115,87,.003) 72%, rgba(15,115,87,0) 85%)} /* the grain, on its own layer and barely there */ .aglow::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--grain);background-size:150px 150px; opacity:.032;mix-blend-mode:soft-light} :root:not([data-theme="dark"]) .aglow::after{opacity:.02} /* ===== hatch ===== Diagonal stripes for anything inactive, empty or on hold — the reference uses exactly this to mark blocked-out time. It carries the meaning without needing a colour, which keeps the palette to one accent. */ .hatch,tr.is-idle td,.funnel .bar.idle{ background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.05) 5px 6px)} :root:not([data-theme="dark"]) .hatch, :root:not([data-theme="dark"]) tr.is-idle td{ background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(12,13,14,.045) 5px 6px)} .orb{display:none} a{text-decoration:none;color:inherit} .ico{flex:none;vertical-align:middle} /* ===== surface primitive ===== Solid panels, but now with a top highlight and a real drop shadow so each one separates from the ground instead of sitting flush against it. */ .card,.panel,aside,.qa,.loginbox{ background:var(--surface); border:1px solid var(--line);box-shadow:var(--shadow)} [data-theme="dark"] .card,[data-theme="dark"] .panel, [data-theme="dark"] aside,[data-theme="dark"] .qa{ background:linear-gradient(168deg,#15181a 0%,#101315 52%,#0d0f11 100%); box-shadow:0 1px 0 rgba(255,255,255,.045) inset,0 10px 30px rgba(0,0,0,.45)} :root:not([data-theme="dark"]) .card,:root:not([data-theme="dark"]) .panel{ background:linear-gradient(168deg,#ffffff 0%,#fcfdfd 100%)} /* the frosted hint — only where a surface floats over content and the bend is actually visible: the sticky top bar, dropdown panels, the select popup */ /* the bar itself is bare — the frosting now belongs to .topglass inside it */ .hasmenu>.menu,.xsel-pop{ backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)} [data-theme="dark"] .hasmenu>.menu,[data-theme="dark"] .xsel-pop{background:rgba(20,23,21,.86)} :root:not([data-theme="dark"]) .hasmenu>.menu, :root:not([data-theme="dark"]) .xsel-pop{background:rgba(255,255,255,.88)} /* ===== featured card ===== One pure-white tile among the dark ones, the way Stripe puts a single white card in a black row. It marks the headline figure without adding a colour. */ /* Full white for the first tile, then an ash-grey second, then the dark row — a deliberate three-step descent across the top of the grid rather than one odd tile out. */ [data-theme="dark"] .card.feature{ background:linear-gradient(168deg,#ffffff 0%,#f2f4f5 100%); border-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 26px rgba(0,0,0,.4)} /* Brushed silver, not concrete. A flat mid-grey between a white tile and a black one just reads as the white one greyed out — i.e. disabled. Lifting the value and laying a light sweep across it gives the tile a material of its own, so the row descends white → silver → dark instead of white → dead → dark. */ [data-theme="dark"] .card.ash{ background: linear-gradient(104deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.16) 34%,rgba(255,255,255,0) 58%), radial-gradient(128% 96% at 8% -8%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 62%), linear-gradient(168deg,#dee3e6 0%,#c2c9ce 62%,#b6bec3 100%); border-color:transparent; box-shadow:0 1px 0 rgba(255,255,255,.62) inset,0 -1px 0 rgba(16,19,21,.06) inset, 0 10px 26px rgba(0,0,0,.38)} [data-theme="dark"] .card.ash small{color:#4a5156} [data-theme="dark"] .card.ash strong{color:#0e1114} [data-theme="dark"] .card.ash .trend{color:#4a5156} [data-theme="dark"] .card.ash .trend.up{color:#0a5641} [data-theme="dark"] .card.ash .trend.down{color:#8a2820} [data-theme="dark"] .card.ash .icn{background:rgba(14,17,20,.10);border-color:rgba(14,17,20,.14);color:#1e2327} [data-theme="dark"] .card.ash svg.spark polyline{stroke:#0a5641} :root:not([data-theme="dark"]) .card.ash{ background: linear-gradient(104deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 56%), linear-gradient(168deg,#eef1f3 0%,#dee3e7 62%,#d5dade 100%); border-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,var(--shadow)} [data-theme="dark"] .card.feature small{color:#5a6066} [data-theme="dark"] .card.feature strong{color:#14171a} [data-theme="dark"] .card.feature .trend{color:#5a6066} [data-theme="dark"] .card.feature .trend.up{color:#0d6a50} [data-theme="dark"] .card.feature .trend.down{color:#a83327} [data-theme="dark"] .card.feature .icn{background:rgba(20,23,26,.10);border-color:rgba(20,23,26,.14);color:#2a2f34} [data-theme="dark"] .card.feature svg.spark polyline{stroke:#0d6a50} :root:not([data-theme="dark"]) .card.feature{ background:linear-gradient(168deg,#15181a 0%,#0d0f11 100%);border-color:transparent} :root:not([data-theme="dark"]) .card.feature small, :root:not([data-theme="dark"]) .card.feature .trend{color:#9aa0a6} :root:not([data-theme="dark"]) .card.feature strong{color:#fff} :root:not([data-theme="dark"]) .card.feature .icn{background:rgba(255,255,255,.10);border-color:transparent;color:#fff} /* ===== accent tiles ===== The green / grey / red block composition from the reference. Used for a small group of related figures where the colour itself carries the reading. */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .tile{position:relative;overflow:hidden;border-radius:var(--r2);padding:16px 15px; display:flex;flex-direction:column;justify-content:space-between;min-height:118px; border:1px solid var(--line);background:var(--surface-2)} .tile b{font-size:26px;font-weight:350;letter-spacing:-.035em;line-height:1} .tile small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:650;margin-top:12px;opacity:.72} .tile.green{background:var(--accent-grad);border-color:transparent;color:#fff} .tile.red{background:linear-gradient(150deg,#7d2b22 0%,#c0392b 100%);border-color:transparent;color:#fff} .tile.grey{color:var(--ink)} [data-theme="dark"] .tile.grey{background:linear-gradient(150deg,#22262a 0%,#15181a 100%);border-color:transparent} .tile.white{background:#fff;color:#0c0d0e;border-color:transparent} /* ===== sidebar ===== */ aside{position:fixed;inset:14px auto 14px 14px;width:236px;padding:22px 14px;display:flex;flex-direction:column;overflow-y:auto;border-radius:var(--r)} aside::-webkit-scrollbar{width:0} .brand{margin:4px 8px 22px;display:flex;flex-direction:column} .brand b{font-size:19px;letter-spacing:2.5px;color:var(--ink);font-weight:800} .brand span{display:block;font-size:9.5px;margin-top:3px;letter-spacing:1.4px;color:var(--accent-ink);font-weight:700;text-transform:uppercase} .brand.center{text-align:center;align-items:center} /* logo artwork is white, so the light theme uses the inverted (dark) file */ .brand .logo{display:block;width:100%;height:auto} /* sidebar: compact, sitting in the top-left corner */ aside .brand{margin:0 6px 20px;align-items:flex-start} aside .brand .logo{max-width:118px} :root:not([data-theme="dark"]) aside .brand .logo{content:url("logo-dark.png")} /* login keeps the larger centred mark */ .loginbox .brand .logo{max-width:190px;margin:0 auto} .mobilenav{gap:2px} .navgroup{display:block;font-size:9.5px;letter-spacing:1.3px;color:var(--ink-4);font-weight:700;margin:18px 12px 7px} .navgroup:first-child{margin-top:0} /* a solid chip for the active item, like the black/white pills in the references — not a translucent tint */ /* A quiet chip with an accent marker, not a block of colour. Twenty of these in a column at full saturation would shout; the marker still makes the current page unmistakable. */ .mobilenav a{position:relative;padding:9px 12px 9px 14px;border-radius:var(--rn);color:var(--ink-2);font-size:13px;font-weight:500; transition:background .15s,color .15s;border:1px solid transparent} .mobilenav a.active::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%); width:3px;height:16px;border-radius:99px;background:var(--accent-grad)} .user{margin-top:auto;padding-top:16px;border-top:1px solid var(--hairline);font-size:13px;font-weight:600} .user small{display:block;color:var(--ink-3);margin:2px 0 10px;text-transform:capitalize;font-weight:500} .user a{color:var(--ink-3);font-weight:500;font-size:12.5px} .user a:hover{color:var(--accent-ink)} /* ===== shell ===== Navigation lives along the top now, so the page gets its full width back and the content starts directly under one bar instead of beside a column. */ aside{display:none} main{margin-left:0;padding:22px 26px 46px;min-height:100vh;max-width:1560px;margin-inline:auto} /* The bar itself carries nothing any more. The pills bring their own boxes and the search + icons share .topglass, so the strip between them is page. That is what lets the glass block meet the hero as one surface: it is aligned to main's content box rather than bleeding to the window edge. */ .topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px; margin:0 auto;padding:14px 26px 8px;border:0;border-radius:0;background:none;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none;max-width:1560px;width:100%} .topglass{display:flex;align-items:center;gap:8px;flex:1;min-width:0;position:relative; padding:7px 8px 7px 6px;border-radius:var(--r2); background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow); backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)} [data-theme="dark"] .topglass{background:rgba(20,24,26,.72);border-color:rgba(255,255,255,.07)} :root:not([data-theme="dark"]) .topglass{background:rgba(255,255,255,.74)} /* ----- the stepped card ----- On the dashboard the glass block stops being a floating bar and becomes the raised right-hand step of the hero: same fill, square bottom, no gap beneath it, and a filleted inside corner where the two heights meet. The result is a single card with a notch cut out for the pills, not a bar above a rectangle. */ body.heroblend .topbar{padding-bottom:0} body.heroblend main{padding-top:0} /* Same flat ground as the hero, and the same light — the radial is re-scaled so its centre and radii land exactly where the hero's do, one box higher up. */ [data-theme="dark"] body.heroblend .topglass, :root:not([data-theme="dark"]) body.heroblend .topglass{background:var(--hero-b)} body.heroblend .topglass{border-radius:var(--r) var(--r) 0 0; border:1px solid rgba(255,255,255,.07);border-bottom:0; box-shadow:none;padding:9px 9px 13px 7px} /* the four icon boxes read as their own blocks on the surface, matching the four pills on the left, rather than dissolving into it */ body.heroblend .topicons .icon{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.10);color:rgba(255,255,255,.72)} body.heroblend .topicons .icon:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.20);color:#fff} body.heroblend .topicons .icon b{box-shadow:0 0 0 2px var(--hero-b)} body.heroblend .topglass>*{position:relative;z-index:1} body.heroblend .topglass::before{content:"";position:absolute;inset:0;pointer-events:none; border-radius:inherit;transition:opacity .2s ease; background: radial-gradient(116% 745% at 100% 340%, rgba(24,154,118,.58) 0%, rgba(23,145,111,.47) 12%, rgba(20,124,96,.36) 24%, rgba(17,105,81,.26) 36%, rgba(14,90,70,.175) 48%, rgba(12,80,62,.105) 60%, rgba(11,72,56,.055) 72%, rgba(11,68,53,.020) 84%, rgba(11,66,51,0) 100%), linear-gradient(100deg,rgba(11,79,61,.02) 0%,rgba(11,79,61,.10) 54%,rgba(11,79,61,.26) 100%)} /* The hero's top border has to go, not just turn transparent: ::after is laid out against the padding box, so a 1px border leaves a 1px strip of bare fill that the glow never reaches — which read as a hairline across the seam. */ body.heroblend .hero{border-top:0} /* ----- scrolled: the bar lifts off and becomes floating pills ----- Once the hero has moved out from under it there is nothing left to join, so the step un-joins: every corner rounds right off, the fill goes back to frosted glass, and the row picks up a shadow so it reads as floating over the page rather than cut into it. */ .navtop,.topicons .icon,.topicons .avatar,.topglass{ transition:border-radius .32s cubic-bezier(.22,.85,.3,1),background .28s ease, box-shadow .28s ease,border-color .28s ease,padding .28s cubic-bezier(.22,.85,.3,1)} .topbar{transition:padding .28s cubic-bezier(.22,.85,.3,1)} body.scrolled .topbar{padding-top:9px;padding-bottom:9px} body.scrolled .navtop, body.scrolled .topicons .icon, body.scrolled .topicons .avatar{border-radius:99px} body.scrolled .topglass{border-radius:99px;padding:6px 7px 6px 6px} body.heroblend.scrolled .topglass{border-bottom:1px solid rgba(255,255,255,.07)} body.scrolled .topglass{box-shadow:0 10px 34px rgba(0,0,0,.5)} :root:not([data-theme="dark"]) body.scrolled .topglass{box-shadow:0 10px 30px rgba(20,30,26,.16)} /* denser than the resting bar: floating over cards rather than over page, so a white tile passing underneath must not wash out the placeholder text */ [data-theme="dark"] body.scrolled .topglass{background:rgba(16,20,21,.9)} :root:not([data-theme="dark"]) body.scrolled .topglass{background:rgba(255,255,255,.9)} body.scrolled .topglass::before, body.scrolled .topglass::after{opacity:0;transition:opacity .2s ease} /* back to the page's own ink once the block is no longer sitting on the hero */ body.heroblend.scrolled .topglass .search input{color:var(--ink)} body.heroblend.scrolled .topglass .search input::placeholder{color:var(--ink-4)} body.heroblend.scrolled .topglass .search .ico{color:var(--ink-4)} body.heroblend.scrolled .topicons .icon{background:var(--surface-3); border-color:var(--line-2);color:var(--ink-2)} body.heroblend.scrolled .topicons .icon b{box-shadow:0 0 0 2px var(--surface)} /* the inside corner: a quarter disc bitten out of a square of hero fill */ body.heroblend .topglass::after{content:"";position:absolute;left:-18px;bottom:-1px; width:18px;height:18px;pointer-events:none;transition:opacity .2s ease; background:radial-gradient(circle at 0 0,transparent 0 17.4px,var(--hero-b) 18px)} body.heroblend .hero{border-top-right-radius:0;margin-top:0} .topbar .brand{margin:0;flex:none} .topbar .brand .logo{max-width:104px;display:block} :root:not([data-theme="dark"]) .topbar .brand .logo{content:url("logo-dark.png")} /* ----- top-level nav ----- Four separate boxed pills, then the search joined onto the end of the row so the whole thing reads as one control strip, as in the reference. */ /* The pills ride a little higher than the glass block beside them rather than sitting on its centre line — it lifts them off the card edge and reads as the two blocks being different heights on purpose. */ .mainnav{display:flex;align-items:center;gap:8px;flex:none;align-self:flex-start;margin-top:3px} .navitem{position:relative} .navtop{display:inline-flex;align-items:center;gap:7px;padding:11px 19px;border-radius:var(--r3); background:var(--surface-3);border:1px solid var(--line);color:var(--ink-2); font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap; transition:background .15s,color .15s,border-color .15s} .navtop:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)} .navtop.active{background:var(--accent-grad);color:#fff;border-color:transparent;box-shadow:var(--accent-glow)} .navtop svg{opacity:.8} .navtop.menubtn{background:var(--ink);color:var(--bg);border-color:transparent} [data-theme="dark"] .navtop.menubtn{background:#fff;color:#0c0d0e} .navtop.menubtn:hover{background:var(--accent-3);color:#fff} body.navopen .navtop.menubtn{background:var(--accent-grad);color:#fff} /* search takes the rest of the row inside the glass block, and is drawn as part of that surface rather than as a box sitting on it */ .topbar .topglass .search{flex:1;min-width:0;max-width:none;margin-right:8px} .topbar .topglass .search input{padding:10px 46px 10px 40px;border-radius:var(--r3); background:transparent;border:1px solid transparent} .topbar .topglass .search input:hover{background:var(--surface-3)} body.heroblend .topglass .search input{color:#fff} body.heroblend .topglass .search input::placeholder{color:rgba(255,255,255,.42)} body.heroblend .topglass .search .ico{color:rgba(255,255,255,.5)} body.heroblend .topglass .search input:hover{background:rgba(255,255,255,.06)} body.heroblend .topglass .search input:focus{background:rgba(255,255,255,.08)} body.heroblend .topglass .kbd{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.5)} /* ----- mega menu ----- */ .mega{position:absolute;left:0;top:calc(100% + 10px);z-index:70; display:flex;gap:26px;padding:20px 22px;border-radius:var(--r2); background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .18s,transform .18s cubic-bezier(.22,.85,.3,1),visibility .18s} [data-theme="dark"] .mega{background:rgba(20,23,21,.92); backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)} :root:not([data-theme="dark"]) .mega{background:rgba(255,255,255,.94); backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)} .navitem.open .mega{opacity:1;visibility:visible;transform:none} .megacol{display:grid;gap:1px;min-width:168px;align-content:start} .megacol small{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700; color:var(--ink-4);padding:0 10px 9px} .megacol a{padding:8px 10px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--ink-2); white-space:nowrap;transition:background .13s,color .13s} .megacol a:hover{background:var(--surface-3);color:var(--ink)} .megacol a.on{color:var(--accent-ink);font-weight:650} /* ----- the Menu drawer ----- Slides in from the left at every screen size, not just on a phone. It holds every group, so the three pills beside Menu never have to. */ .mobilenav{display:block;position:fixed;inset:0 auto 0 0;width:288px;max-width:86vw;z-index:80; padding:20px 14px 26px;overflow-y:auto;border-right:1px solid var(--line); transform:translateX(-102%);transition:transform .3s cubic-bezier(.22,.85,.3,1); /* the platform scrollbar sat as a grey stripe down the drawer — the list still scrolls, it just does it without drawing a gutter over the panel */ scrollbar-width:none;-ms-overflow-style:none} .mobilenav::-webkit-scrollbar{width:0;height:0;display:none} /* the phone's search lives in the drawer — see the phone block at the end */ .drawersearch{display:none;position:relative;align-items:center;margin:2px 0 14px} .drawersearch .ico{position:absolute;left:12px;color:var(--ink-4);width:15px;height:15px} .drawersearch input{padding-left:36px;font-size:13px} [data-theme="dark"] .mobilenav{background:rgba(14,17,16,.93); backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)} :root:not([data-theme="dark"]) .mobilenav{background:rgba(255,255,255,.95); backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)} body.navopen .mobilenav{transform:none;box-shadow:24px 0 70px rgba(0,0,0,.45)} .mobilenav .drawerbrand{display:block;padding:2px 10px 16px} .mobilenav .drawerbrand .logo{max-width:104px;display:block;width:auto} :root:not([data-theme="dark"]) .mobilenav .drawerbrand .logo{content:url("logo-dark.png")} .draweruser{padding:0 12px 14px;margin-bottom:8px;border-bottom:1px solid var(--hairline)} .draweruser b{display:block;font-size:13.5px;color:var(--ink);font-weight:650} .draweruser small{display:block;color:var(--ink-4);font-size:11px;text-transform:capitalize;margin-top:2px} .mobilenav a{display:block;padding:9px 12px;border-radius:var(--rn);color:var(--ink-2);font-size:13px;font-weight:500} .mobilenav a:hover{background:var(--surface-3);color:var(--ink)} .mobilenav a.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:650} .mobilenav .signout{margin-top:16px;border-top:1px solid var(--hairline);padding-top:14px;color:var(--danger)} .scrimnav{display:none;position:fixed;inset:0;z-index:75;background:rgba(4,6,5,.55)} body.navopen .scrimnav{display:block} .topbar .search{position:relative;flex:1;max-width:350px;display:flex;align-items:center} .topbar .search .ico{position:absolute;left:13px;color:var(--ink-4);width:16px;height:16px} .topbar .search input{width:100%;background:var(--surface-3);border:1px solid var(--line-2);color:var(--ink);padding:10px 46px 10px 38px;border-radius:var(--rn);font:inherit;font-size:13px;transition:.16s} .topbar .search input:focus{outline:none;border-color:var(--accent);background:var(--surface-2);box-shadow:0 0 0 3px var(--accent-soft)} .topbar .kbd{position:absolute;right:11px;font-size:10px;color:var(--ink-4);border:1px solid var(--line-2);padding:2px 6px;border-radius:6px;background:var(--surface-3)} .topicons{display:flex;align-items:center;gap:8px;flex:none} /* rounded squares, matching the avatar beside them and the pills on the left */ .topicons .icon{position:relative;width:38px;height:38px;border-radius:var(--r3);display:grid;place-items:center;color:var(--ink-2); background:var(--surface-3);border:1px solid var(--line-2);transition:.16s;padding:0;font:inherit;cursor:default} button.icon{cursor:pointer} .topicons .icon:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)} .topicons .icon b{position:absolute;top:-5px;right:-5px;background:var(--accent-grad);color:#fff;font-size:9px;border-radius:5px;padding:1px 4px;font-weight:700;box-shadow:0 0 0 2px var(--bg)} .topicons .when{font-size:11.5px;color:var(--ink-2);text-align:right;padding-left:12px;margin-left:3px;border-left:1px solid var(--hairline);font-weight:600} .topicons .when small{display:block;font-size:10.5px;color:var(--ink-4);font-weight:500;margin-top:1px} .topicons .avatar{width:38px;height:38px;border-radius:var(--r3);display:grid;place-items:center;font-size:13.5px;font-weight:700;color:#fff;flex:none; background:var(--accent-grad)} /* theme toggle icon swap */ #themeToggle .ico-moon{display:none} [data-theme="dark"] #themeToggle .ico-sun{display:none} [data-theme="dark"] #themeToggle .ico-moon{display:block} header{display:flex;justify-content:space-between;align-items:flex-end;margin:6px 4px 22px} header small{font-size:10px;letter-spacing:1.7px;color:var(--ink-4);font-weight:700} /* display type sits straight on the background, no card around it */ h1{margin:4px 0 0;color:var(--ink)} h2{margin:6px 0} h3{margin:0 0 14px;font-size:14px;font-weight:650;letter-spacing:-.012em;color:var(--ink)} .online{background:transparent;color:var(--ink-3);border:1px solid var(--line-2);padding:7px 13px;border-radius:99px;font-size:10.5px;font-weight:650;height:fit-content;letter-spacing:.3px; display:inline-flex;align-items:center;gap:7px} .online::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none} /* ===== hero ===== */ /* The one high-contrast block on the page, the way Zoho uses its black chart panel and Stripe its single white card. Linear, not radial — a soft corner glow reads as a smudge at this size. */ .hero{position:relative;overflow:hidden;color:#fff;padding:34px 34px;border-radius:var(--r); display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:16px; /* Flat ground, all the modelling from ::after. A base gradient that varies with x could not be continued exactly onto the raised step above it — the step starts at a different x for every role, since the pill count changes. Flat plus a right-edge light is the same picture and joins perfectly. */ background:var(--hero-b);border:1px solid rgba(255,255,255,.07)} /* a light source entering from the right edge, as the planet does in the reference: brightest at one point, falling away across the panel */ .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(78% 160% at 100% 50%, rgba(24,154,118,.58) 0%, rgba(23,145,111,.47) 12%, rgba(20,124,96,.36) 24%, rgba(17,105,81,.26) 36%, rgba(14,90,70,.175) 48%, rgba(12,80,62,.105) 60%, rgba(11,72,56,.055) 72%, rgba(11,68,53,.020) 84%, rgba(11,66,51,0) 100%), linear-gradient(100deg,transparent 40%,rgba(11,79,61,.10) 70%,rgba(11,79,61,.26) 100%)} /* the same grain as the page, so the hero is textured rather than a flat sticker */ .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.042;mix-blend-mode:soft-light; background-image:var(--grain);background-size:160px 160px} .hero>*{position:relative;z-index:2} .hero h2{color:#fff;font-size:44px;font-weight:300;letter-spacing:-.038em;margin:12px 0 0;line-height:1.02} .hero p{color:rgba(255,255,255,.58);margin:11px 0 0;font-size:13.5px;max-width:52ch} .hero small{color:var(--accent-3);letter-spacing:1.8px;font-weight:800;font-size:9.5px} /* taller, so the headline has somewhere to sit */ .hero{padding:44px 38px;min-height:212px;align-items:center} .hero .heroleft{flex:1;min-width:0} /* the info cards riding on the right of the hero */ .herostats{display:flex;gap:10px;flex:none;align-items:stretch} .hstat{min-width:132px;padding:15px 16px;border-radius:var(--r2); background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12); display:flex;flex-direction:column;justify-content:space-between; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .hstat small{display:block;color:rgba(255,255,255,.62);font-size:9.5px;letter-spacing:.07em; text-transform:uppercase;font-weight:700} .hstat b{display:block;color:#fff;font-size:25px;font-weight:350;letter-spacing:-.035em;margin-top:10px;line-height:1} .hstat i{display:block;font-style:normal;font-size:10.5px;margin-top:5px;color:rgba(255,255,255,.5);font-weight:500} .hstat i.up{color:var(--accent-3)} .hstat i.down{color:#ff8f80} .hstat.solid{background:#fff;border-color:transparent} .hstat.solid small{color:#5a6066} .hstat.solid b{color:#14171a} .hstat.solid i{color:#5a6066} .hero .heroactions{display:flex;flex-direction:column;gap:9px;align-items:flex-end;flex:none} /* the mark sits inside the card, as in the reference, not in the bar above it */ .herologo{display:block;width:132px;margin:0 0 30px;opacity:.95} /* ----- what the card is, in the corner ----- The greeting is the headline now, so the section's own name drops to a quiet label in the bottom-right of the card rather than a heading of its own. */ .herofoot{position:absolute;right:38px;bottom:20px;z-index:2; display:flex;align-items:center;gap:12px} .herotag{color:rgba(255,255,255,.44);font-size:9.5px;font-weight:800; letter-spacing:.19em;text-transform:uppercase} .herofoot .online{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13); color:rgba(255,255,255,.55)} .herofoot .online::before{background:var(--accent-3)} /* ===== cards & panels ===== */ /* Column count comes from the page as --cols. It must NOT be written as an inline grid-template-columns: an inline property beats every media query, so the tiles stayed at 4-across on a phone and the labels broke mid-word. */ .cards{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:12px;margin-bottom:16px} .card{padding:19px;display:flex;flex-direction:column;border-radius:var(--r2);transition:border-color .16s,box-shadow .16s} .card:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)} .card .icn{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;margin-bottom:14px; background:var(--surface-3);color:var(--ink-3);border:1px solid var(--line)} .card small{color:var(--ink-3);font-size:9.5px;letter-spacing:.72px;text-transform:uppercase;font-weight:650} /* the number is the point of a KPI card, so it gets the weight */ .card strong{display:block;font-size:29px;margin-top:9px;color:var(--ink);letter-spacing:-.035em;line-height:1.08} .card .trend{font-size:11.5px;margin-top:6px;color:var(--ink-3);font-weight:500} .card .trend.up{color:var(--ok);font-weight:600} .card .trend.down{color:var(--danger);font-weight:600} .card svg.spark{display:block;margin-top:auto;padding-top:10px;width:100%;height:28px} /* a sparkline in a full panel has no height of its own to work from and grew to fill whatever room was left under the gauge */ .panel>svg.spark{display:block;width:100%;height:40px;margin:16px 0 2px} /* a KPI tile that is also a link: same shape, plus a corner arrow that leans on hover */ a.card.action{text-decoration:none;position:relative} a.card.action .go{position:absolute;top:17px;right:17px;width:26px;height:26px;border-radius:99px; display:grid;place-items:center;background:rgba(16,19,21,.10);color:#22272b; transition:transform .2s cubic-bezier(.22,.85,.3,1),background .18s} a.card.action:hover .go{transform:translate(2px,-2px);background:rgba(16,19,21,.18)} a.card.action:not(.feature):not(.ash) .go{background:var(--surface-3);color:var(--ink-2)} .cols{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start} /* even-bottom variant: both columns fill the row so the next section starts level */ .cols.even{align-items:stretch} .colstack{display:flex;flex-direction:column;min-width:0} .colstack>.panel:last-child{flex:1 1 auto} .cols3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;margin-bottom:16px;align-items:start} .panel{padding:20px;margin-bottom:16px;border-radius:var(--r2)} .panelhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .panelhead h3{margin:0} .panelhead small{font-size:11px;color:var(--ink-3);font-weight:600} .panelhead a{color:var(--accent-ink);font-size:12px;font-weight:650} .panelhead a:hover{opacity:.75} /* ===== tables ===== */ .table{overflow:auto} table{width:100%;border-collapse:collapse;font-size:13px} th{font-size:9.5px;text-transform:uppercase;color:var(--ink-4);text-align:left;letter-spacing:.7px;font-weight:700;padding:0 12px 10px;white-space:nowrap} td{padding:13px 12px;border-top:1px solid var(--hairline);color:var(--ink-2);vertical-align:middle} /* in-table controls need room to show their selected value, not just an arrow */ td select,td input[type="text"],td input:not([type]){min-width:132px;padding:8px 10px;font-size:12.5px} td input[type="number"]{min-width:88px;padding:8px 10px;font-size:12.5px} td form{margin:0} .rowform{display:flex;gap:6px;align-items:center;flex-wrap:nowrap} td .tag{white-space:nowrap} .rowform select{flex:1 1 auto} .rowform .btn{flex:none} td b{color:var(--ink);font-weight:650} tr:hover td{background:var(--surface-3)} .tag{background:var(--surface-3);border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:10px;color:var(--ink-2);font-weight:650;display:inline-block;letter-spacing:.2px} .tag.success{background:var(--ok-soft);color:var(--ok);border-color:transparent} .tag.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent} .tag.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent} .tag.info{background:var(--info-soft);color:var(--info);border-color:transparent} /* ===== quick actions ===== */ /* auto-fit so the grid adapts whether it sits in the wide or narrow column */ .quickgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px} /* portal links: keep all eight on one row instead of wrapping 7 + 1 */ .quickgrid.row8{grid-template-columns:repeat(8,1fr);gap:8px} .quickgrid.row8 .qa{padding:15px 8px 13px} .quickgrid.row8 .qi{width:34px;height:34px;margin-bottom:9px} .quickgrid.row8 .qa b{font-size:11.5px} .quickgrid.row8 .qa small{font-size:9.5px} .quickgrid.row8 .arrow{top:10px;right:9px} @media(max-width:1280px){.quickgrid.row8{grid-template-columns:repeat(4,1fr)}} @media(max-width:680px){.quickgrid.row8{grid-template-columns:repeat(2,1fr)}} .qa{position:relative;overflow:hidden;border-radius:var(--r2);padding:17px 13px 15px;display:block; transition:transform .22s cubic-bezier(.22,.85,.3,1),box-shadow .22s,border-color .22s} .qa::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .22s; background:linear-gradient(180deg,var(--accent-soft),transparent 70%)} .qa:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg)} .qa:hover::after{opacity:1} .qa:active{transform:translateY(-1px)} .qa>*{position:relative;z-index:1} .qa .qi{width:38px;height:38px;border-radius:var(--r3);background:var(--surface-3);border:1px solid var(--line-2); display:grid;place-items:center;margin-bottom:12px;color:var(--ink-2); transition:transform .22s cubic-bezier(.22,.85,.3,1),background .22s,color .22s,border-color .22s} .qa:hover .qi{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft);transform:translateY(-2px) scale(1.05)} .qa b{display:block;font-size:12.5px;color:var(--ink);font-weight:650;line-height:1.25} .qa small{color:var(--ink-3);font-size:10.5px;display:block;margin-top:4px;line-height:1.35} .qa .arrow{position:absolute;top:14px;right:13px;z-index:2;color:var(--ink-4);opacity:0; transform:translate(-5px,5px);transition:.22s cubic-bezier(.22,.85,.3,1)} .qa:hover .arrow{opacity:1;transform:none;color:var(--accent-ink)} /* one lime primary tile, mirroring the reference's single highlighted card */ .qa.primary{background:var(--accent-grad);border-color:transparent;box-shadow:var(--accent-glow)} .qa.primary b{color:#fff} .qa.primary small{color:rgba(255,255,255,.72)} .qa.primary .qi{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26);color:#fff} .qa.primary .arrow{color:rgba(255,255,255,.72);opacity:1;transform:none} .qa.primary:hover{box-shadow:0 12px 30px rgba(0,168,98,.30)} .qa.primary:hover .qi{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4);color:#fff;transform:translateY(-2px) scale(1.05)} .qa.primary:hover .arrow{color:#fff} .qa.primary::after{background:radial-gradient(75% 70% at 50% 0%,rgba(255,255,255,.20),transparent 72%)} .action{display:block;border:1px solid var(--line);padding:14px;border-radius:var(--r3);margin:9px 0;background:var(--surface-3)} .action small{display:block;color:var(--ink-3);margin-top:3px} /* ===== buttons & forms ===== */ /* pill buttons throughout, matching the reference chips */ .btn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:10px 17px;border-radius:99px; display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;font-weight:650;font-size:12.5px; transition:background .15s,border-color .15s,color .15s} .btn:hover{border-color:var(--ink-4);background:var(--surface-3)} /* Filled green shapes always carry the deep-to-light emerald sweep with white text, never a flat fill — that gradient is the reference's signature. */ .btn.dark{background:var(--accent-grad);color:#fff;border-color:transparent;box-shadow:var(--accent-glow)} .btn.dark:hover{filter:brightness(1.14)} [data-theme="dark"] .btn.dark{background:var(--accent-grad);color:#fff;font-weight:650} [data-theme="dark"] .btn.dark:hover{filter:brightness(1.18)} .btn.danger{background:transparent;color:var(--danger);border-color:var(--danger-soft)} .btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)} .btn.sm{padding:6px 13px;font-size:11.5px} /* hero CTA is always the green primary action, in both themes */ .hero .btn,.hero .btn.dark,[data-theme="dark"] .hero .btn.dark{ background:var(--accent-grad);border-color:transparent;color:#fff;box-shadow:var(--accent-glow)} .hero .btn:hover,.hero .btn.dark:hover,[data-theme="dark"] .hero .btn.dark:hover{ background:#fff;border-color:#fff;color:#0c0d0e} .toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap} .toolbar form{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* a date field otherwise stretches and pushes the buttons onto a second row */ .toolbar form>input[type="date"]{max-width:180px} .formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px} label{font-size:11.5px;font-weight:650;display:grid;gap:7px;color:var(--ink-2)} /* Fields use their own greys rather than the page surfaces. The surface tokens carry a deliberate green bias — a couple of levels on the green channel — which is right for one card but stacks up visibly down a column of inputs. These sit about half as warm, so a form reads neutral while the page keeps its cast. The focus ring stays green: that one is the accent doing its job. */ input,select,textarea{width:100%;padding:11px 14px;border:1px solid var(--field-line);border-radius:var(--r3); background:var(--field);color:var(--ink);font:inherit;font-size:13px; transition:border-color .18s,background .18s,box-shadow .18s} input:hover,select:hover,textarea:hover{border-color:var(--ink-4)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--field-2);box-shadow:0 0 0 3px var(--accent-soft)} input::placeholder{color:var(--ink-4)} /* ===== select ===== The browser's own chevron is a different shape, weight and colour on every platform, which is most of why the dropdowns looked unfinished. Replace it with the same stroked chevron the rest of the UI uses, drawn as a background image so no extra markup is needed. Extra right padding keeps a long value from running underneath it. */ select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; padding-right:36px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2382868d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:12px 12px} select:hover,select:focus{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2335c9a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} select:disabled{opacity:.5;cursor:not-allowed} /* fallback styling for the native popup, used wherever the custom list below is not applied (touch devices keep their native picker on purpose) */ select option{padding:10px 12px;font-size:13px} [data-theme="dark"] select option{background:#141715;color:#f3f5f0} [data-theme="dark"] select optgroup{background:#0e100f;color:#82868d;font-style:normal;font-weight:700;font-size:11px} :root:not([data-theme="dark"]) select optgroup{color:#71757c;font-style:normal;font-weight:700;font-size:11px} /* ===== custom select ===== A native stays in the DOM: forms submit exactly as before and every existing onchange handler still fires. Touch devices are left alone, because a native picker beats any custom list on a phone. */ .xsel{position:relative;display:block;width:100%} .xsel.compact{display:inline-block;width:auto;vertical-align:middle} .xsel>select.xsel-native{position:absolute;inset:0;width:100%;height:100%; opacity:0;pointer-events:none;margin:0;padding:0;border:0} .xsel-btn{display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;padding:11px 13px 11px 14px;border:1px solid var(--field-line);border-radius:var(--r3); background:var(--field);color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer; transition:border-color .18s,background .18s,box-shadow .18s} .xsel-btn:hover{border-color:var(--ink-4)} .xsel-btn .chev{flex:none;color:var(--ink-3);transition:transform .2s,color .18s} .xsel-btn .val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .xsel.open .xsel-btn{border-color:var(--accent);background:var(--field-2);box-shadow:0 0 0 3px var(--accent-soft)} .xsel.open .xsel-btn .chev{transform:rotate(180deg);color:var(--accent-3)} .xsel-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .xsel.compact .xsel-btn{padding:8px 10px 8px 12px;font-size:12.5px;min-width:132px} td .xsel.compact .xsel-btn{min-width:132px} /* the list is attached to so a scrolling table can never clip it */ .xsel-pop{position:fixed;z-index:200;min-width:180px;max-height:300px;overflow-y:auto; padding:6px;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line); box-shadow:var(--shadow-lg); opacity:0;transform:translateY(-6px);transition:opacity .15s,transform .15s cubic-bezier(.22,.85,.3,1)} [data-theme="dark"] .xsel-pop{background:#141715} :root:not([data-theme="dark"]) .xsel-pop{background:#fff} .xsel-pop.in{opacity:1;transform:none} .xsel-pop::-webkit-scrollbar{width:8px} .xsel-pop::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px} .xsel-opt{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 11px;border-radius:7px;font-size:12.5px;color:var(--ink-2);cursor:pointer; white-space:nowrap;transition:background .12s,color .12s} .xsel-opt:hover,.xsel-opt.active{background:var(--surface-3);color:var(--ink)} .xsel-opt.sel{background:var(--accent-soft);color:var(--accent-ink);font-weight:650} .xsel-opt .tick{flex:none;opacity:0} .xsel-opt.sel .tick{opacity:1} .xsel-opt.dis{opacity:.42;cursor:not-allowed} .xsel-opt.dis:hover{background:transparent;color:var(--ink-2)} .xsel-grp{padding:9px 11px 5px;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase; font-weight:700;color:var(--ink-4)} .xsel-grp:not(:first-child){margin-top:4px;border-top:1px solid var(--hairline);padding-top:10px} /* a tighter chevron for the compact selects inside table rows and toolbars */ td select,.rowform select,.toolbar select{padding-right:30px;background-position:right 10px center;background-size:11px 11px} .full{grid-column:1/-1} .actionsright{text-align:right;margin-top:8px} .actionsright .btn+.btn{margin-left:8px} /* ===== alerts ===== */ .alert{padding:13px 16px;border-radius:var(--r3);margin-bottom:16px;font-size:13px;font-weight:550;border:1px solid var(--line)} .alert.success{background:var(--ok-soft);color:var(--ok)} .alert.error{background:var(--danger-soft);color:var(--danger)} .alertlist{list-style:none;margin:0;padding:0} .alertlist li{display:flex;align-items:center;padding:11px 0;border-top:1px solid var(--hairline);font-size:12.5px;color:var(--ink-2)} .alertlist li:first-child{border-top:0} .alertlist .sev{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;margin-right:11px;flex:none;font-weight:800} .sev1{background:var(--danger-soft);color:var(--danger)} .sev2{background:var(--warn-soft);color:var(--warn)} .sev3{background:var(--info-soft);color:var(--info)} .empty{color:var(--ink-4);font-size:12.5px;padding:8px 0;font-weight:500} /* ===== funnel ===== */ .funnelwrap{display:flex;gap:22px;align-items:center} .funnel{flex:1;display:flex;flex-direction:column;gap:5px} .funnel .bar{height:32px;border-radius:7px;font-weight:700;font-size:11.5px;display:flex;align-items:center;justify-content:center;margin:0 auto} /* eight stages: enquiry, sample sent, quoted, negotiation, order placed, shipped, completed, cancelled. Adding 'shipped' shifted every later stage along, so the last bar had no class at all and rendered as a bare number. */ .f0{background:#dceee8;color:#0b5a45} .f1{background:#bfe2d8;color:#0b5a45} .f2{background:#93cdba;color:#083e30} .f3{background:#5faf92;color:#fff} .f4{background:#2f8e70;color:#fff} .f5{background:#0f6a52;color:#fff} .f6{background:#0c0d0e;color:#fff} /* completed */ .f7{background:#b34435;color:#fff} /* cancelled */ [data-theme="dark"] .f0{background:#132e26;color:#8fd6c0} [data-theme="dark"] .f1{background:#163a2f;color:#9fdcc7} [data-theme="dark"] .f2{background:#1a4d3e;color:#b6e6d5} [data-theme="dark"] .f3{background:#146450;color:#fff} [data-theme="dark"] .f4{background:#12876a;color:#fff} [data-theme="dark"] .f5{background:#1aa37f;color:#fff} [data-theme="dark"] .f6{background:#ffffff;color:#0c0d0e} [data-theme="dark"] .f7{background:#c0574a;color:#fff} .funnellegend{flex:1;font-size:12px} .funnellegend .row{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--hairline);color:var(--ink-2)} .funnellegend .row:first-child{border-top:0} .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px} /* ===== charts ===== */ .chartbox{position:relative;height:220px} .chartbox.sm{height:180px} .donutlegend{margin-top:14px;font-size:12px} .donutlegend .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:8px 0;color:var(--ink-2);border-top:1px solid var(--hairline)} .donutlegend .row:first-child{border-top:0} /* the qualifier after a label, and the value/share pair on the right */ .donutlegend .row i{font-style:normal;color:var(--ink-4);font-size:10.5px;margin-left:5px} .donutlegend .row>span:last-child{display:flex;align-items:baseline;gap:8px;flex:none} .donutlegend .row b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums} .donutlegend .row em{font-style:normal;color:var(--ink-4);font-size:10.5px; min-width:38px;text-align:right;font-variant-numeric:tabular-nums} /* ----- score scale ----- A position on a range, drawn as a bar rather than a dial. The three zones are sized by their real width on the 70-100 scale — 70-80 is a third of it, 85+ is half — so the pin's position is honest rather than decorative. */ .scorescale{margin-top:18px} .scorescale .track{position:relative;height:10px} .scorescale .zones{position:absolute;inset:0;display:flex;gap:2px; border-radius:99px;overflow:hidden} .scorescale .zones>span{display:block;height:100%} .scorescale .z1{flex:0 0 33.33%;background:linear-gradient(90deg,#7e241c,#c0574a)} .scorescale .z2{flex:0 0 16.67%;background:linear-gradient(90deg,#4a5155,#79828a)} .scorescale .z3{flex:1 1 auto;background:linear-gradient(90deg,#0b5a45,#2bb890)} .scorescale .pin{position:absolute;top:-6px;width:4px;height:22px;border-radius:99px; background:#fff;transform:translateX(-50%); box-shadow:0 0 0 2px rgba(8,10,9,.55),0 3px 10px rgba(0,0,0,.5)} .scorescale .ends{display:flex;justify-content:space-between;align-items:center;gap:10px; margin-top:11px;font-size:9.5px;font-weight:700;color:var(--ink-4);letter-spacing:.04em} .scorescale .ends>span:nth-child(2){flex:1;min-width:0;text-align:center; font-size:10.5px;font-weight:600;letter-spacing:0;color:var(--ink-3)} /* the full ring's centre carries a signed figure, so it needs the trend colours */ .donutcenter strong.up{color:var(--ok)} .donutcenter strong.down{color:var(--danger)} .donutlegend .row b.up{color:var(--ok)} .donutlegend .row b.down{color:var(--danger)} .donutcenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none} .donutcenter strong{font-size:22px;color:var(--ink);letter-spacing:-.03em} .donutcenter small{color:var(--ink-4);font-size:9.5px;letter-spacing:.6px;font-weight:700;margin-top:2px} /* ===== cafe day sheet ===== Built to read as the same screen the POS shows at the counter: a date to step through, the unit weights are typed in, and the three figures the barista is actually watching. */ .cafebar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px} .daypick{display:flex;align-items:center;gap:7px} .dayform{margin:0} .daypick input[type="date"]{width:auto;min-width:158px;padding:9px 12px} .stepbtn{width:34px;height:34px;border-radius:var(--r3);display:grid;place-items:center;flex:none; background:var(--surface-3);border:1px solid var(--line-2);color:var(--ink-2); font-size:19px;line-height:1;transition:.15s} .stepbtn:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)} .btn.sm.on{background:var(--accent-grad);border-color:transparent;color:#fff} /* g / kg — how weights are typed and read, never how they are stored */ .unitseg{display:inline-flex;padding:3px;border-radius:99px;gap:2px; background:var(--surface-3);border:1px solid var(--line-2)} .unitseg a{padding:6px 15px;border-radius:99px;font-size:12px;font-weight:650;color:var(--ink-3);transition:.15s} .unitseg a:hover{color:var(--ink)} .unitseg a.on{background:var(--ink);color:var(--bg)} [data-theme="dark"] .unitseg a.on{background:#fff;color:#0c0d0e} .cafetotals{display:flex;gap:9px;margin-left:auto;flex-wrap:wrap} .cafetotals>div{min-width:104px;padding:10px 14px;border-radius:var(--r3); background:var(--surface);border:1px solid var(--line)} .cafetotals small{display:block;color:var(--ink-4);font-size:9px;letter-spacing:.08em; text-transform:uppercase;font-weight:700} .cafetotals b{font-size:21px;font-weight:400;letter-spacing:-.03em;color:var(--ink); margin-top:4px;display:inline-block;font-variant-numeric:tabular-nums} .cafetotals i{font-style:normal;font-size:11px;color:var(--ink-4);margin-left:3px} /* Used is the number that moves stock, so it is the one wearing the accent */ .cafetotals .used{border-color:transparent;background:var(--accent-grad)} .cafetotals .used small{color:rgba(255,255,255,.72)} .cafetotals .used b,.cafetotals .used i{color:#fff} .daystate{margin:0 0 14px;padding:11px 15px;border-radius:var(--r3);font-size:12.5px; color:var(--ink-2);background:var(--surface);border:1px solid var(--line); display:flex;align-items:center;gap:10px;flex-wrap:wrap} .daystate.is-closed{border-left:3px solid var(--ok)} .daystate.is-open{border-left:3px solid var(--accent-3)} .daystate.is-pos{border-left:3px solid var(--warn)} .tag.posbadge{background:var(--warn-soft,rgba(176,138,60,.16));color:#b08a3c;border-color:transparent} table.sheet td{vertical-align:middle} table.sheet th.num,table.sheet td.num{text-align:right;white-space:nowrap} table.sheet .coffeecell b{display:block;color:var(--ink);font-size:13px} table.sheet .coffeecell small{display:block;color:var(--ink-4);font-size:10.5px;margin-top:2px} table.sheet .coffeecell .instore{color:var(--ink-3)} table.sheet td.num input{width:104px;text-align:right;padding:8px 10px;font-size:13px; font-variant-numeric:tabular-nums} table.sheet td.used b{font-size:15px;color:var(--accent-ink);font-weight:650;font-variant-numeric:tabular-nums} [data-theme="dark"] table.sheet td.used b{color:var(--accent-3)} table.sheet td.used em{display:block;font-style:normal;font-size:10px;color:var(--danger);margin-top:3px} table.sheet tr.bad td.num input[data-taken], table.sheet tr.bad td.num input[data-left]{border-color:var(--danger)} table.sheet tr.bad td.used b{color:var(--danger)} table.sheet .notecell input{min-width:140px;padding:8px 10px;font-size:12.5px} table.sheet .pending{color:var(--ink-4);font-size:11.5px} table.sheet .totalrow td{border-top:1px solid var(--line-2);font-weight:650;color:var(--ink)} .linkbtn{background:none;border:0;padding:4px 2px;font:inherit;font-size:11.5px;font-weight:600; color:var(--ink-4);cursor:pointer;text-decoration:underline;text-underline-offset:3px} .linkbtn:hover{color:var(--danger)} .hiddenform{display:none} .sheetfoot{display:flex;justify-content:space-between;align-items:center;gap:14px; flex-wrap:wrap;margin-top:16px;padding-top:15px;border-top:1px solid var(--hairline)} .sheetfoot .footnote{font-size:12.5px;color:var(--ink-3)} .sheetfoot .footbtns{display:flex;gap:9px;align-items:center} .sheetfoot .btn[disabled]{opacity:.45;cursor:not-allowed} @media(max-width:680px){ .cafebar{gap:10px} .cafetotals{margin-left:0;width:100%} .cafetotals>div{flex:1;min-width:0;padding:9px 11px} .cafetotals b{font-size:17px} .daypick input[type="date"]{min-width:0;flex:1} .dayform{flex:1} table.sheet td.num input{width:76px} .sheetfoot{flex-direction:column;align-items:stretch} .sheetfoot .footbtns{justify-content:stretch} .sheetfoot .footbtns .btn{flex:1;justify-content:center} } /* ===== stat rows ===== */ .statbig{font-size:38px;color:var(--ink);letter-spacing:-.035em;line-height:1.08} .statrow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--hairline);font-size:12.5px;color:var(--ink-3)} .statrow:first-of-type{border-top:0} .statrow b{color:var(--ink);font-weight:650} .up{color:var(--ok)} .down{color:var(--danger)} /* ===== motion system ===== */ @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes growW{from{width:0}} @keyframes drawLine{to{stroke-dashoffset:0}} @keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}} /* Animations are opt-in via the .anim class (set by an inline head script). If scripting or animation is unavailable, content simply renders visible. */ .funnel .bar{transform-origin:left center} .anim .reveal{animation:fadeUp .55s cubic-bezier(.22,.85,.3,1) both} .anim .funnel .bar{animation:growX .65s cubic-bezier(.22,.85,.3,1) both} .anim .progress i{animation:growW .9s cubic-bezier(.22,.85,.3,1) both} .anim svg.spark polyline{stroke-dasharray:420;stroke-dashoffset:420;animation:drawLine 1.3s ease-out .25s forwards} .online::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor; margin-right:6px;vertical-align:middle;animation:pulseDot 2.2s ease-in-out infinite} /* ===== top-bar dropdown menus ===== */ .hasmenu{position:relative;display:flex} /* A little wider, with the panel's own padding pulled off the rows so each row can carry a full-bleed hover. A small pointer ties it to the button it came from, and it rises into place rather than just fading. */ .hasmenu>.menu{position:absolute;right:0;top:calc(100% + 12px);width:330px;max-width:min(330px,92vw); padding:8px;border-radius:var(--r2);z-index:70; background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right; transition:opacity .18s ease,transform .18s cubic-bezier(.22,.85,.3,1),visibility .18s} :root:not([data-theme="dark"]) .hasmenu>.menu{background:#fff} [data-theme="dark"] .hasmenu>.menu{background:#141715} .hasmenu.open>.menu{opacity:1;visibility:visible;transform:none} .menuhead{display:flex;justify-content:space-between;align-items:center; padding:8px 10px 11px;margin:0 0 6px;border-bottom:1px solid var(--hairline); font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink-3)} .menuhead b{color:var(--ink);font-size:12.5px;letter-spacing:-.01em;text-transform:none;font-weight:650} .menurow{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:10px;border-radius:9px;font-size:12.5px;color:var(--ink-2); transition:background .14s,color .14s} .menurow small{display:block;color:var(--ink-4);font-size:10.5px;margin-top:2px} .menurow b{color:var(--ink);font-weight:650} a.menurow:hover{background:var(--surface-3);color:var(--ink)} .menufoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px; padding:11px 10px 6px;border-top:1px solid var(--hairline); font-size:12px;font-weight:650;color:var(--accent-ink);border-radius:0 0 9px 9px;transition:background .14s} .menufoot:hover{background:var(--surface-3);opacity:1} .menufoot.danger{color:var(--danger)} .menuuser{display:flex;gap:11px;align-items:flex-start;padding:10px 10px 13px;margin:0 0 6px;border-bottom:1px solid var(--hairline)} .menuuser b{display:block;font-size:13.5px;color:var(--ink)} .menuuser small{display:block;color:var(--ink-4);font-size:11.5px;margin-top:2px} .menuuser .tag{text-transform:capitalize} .avatar.lg{width:42px;height:42px;font-size:16px;border-radius:var(--r3)} .topicons .avatar{border:0;cursor:pointer;font-family:inherit} .hasmenu .menu .alertlist li{font-size:12px;padding:8px 0} /* ===== assignee picker (replaces a fiddly multi-select) ===== */ .pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px} .pick{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--r3);cursor:pointer; background:var(--surface-3);border:1px solid var(--line-2);transition:.16s;font-weight:500} .pick:hover{border-color:var(--accent)} .pick input{width:auto;margin:0;flex:none;accent-color:var(--accent)} .pick .rowav{margin:0} .pick b{display:block;font-size:12.5px;color:var(--ink)} .pick small{display:block;color:var(--ink-4);font-size:10.5px;text-transform:capitalize} .pick:has(input:checked){background:var(--accent-soft);border-color:var(--accent)} /* ===== order / shipment progress steps ===== */ .steps{display:flex;align-items:flex-start;margin:2px 0 18px;gap:0} .steps .step{flex:1;text-align:center;position:relative;min-width:0} .steps .step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line-2)} .steps .step:first-child::before{display:none} .steps .step.done::before{background:var(--accent-grad)} .dotstep{position:relative;z-index:1;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;margin:0 auto 7px; font-size:11px;font-weight:700;background:var(--surface-3);border:1px solid var(--line-2);color:var(--ink-4)} .steps .step.done .dotstep{background:var(--accent);border-color:var(--accent);color:#fff} .steps .step small{font-size:10.5px;color:var(--ink-3);font-weight:600;display:block;overflow-wrap:anywhere} .steps .step.done small{color:var(--ink)} @media(max-width:640px){.steps .step small{font-size:9px}.dotstep{width:23px;height:23px;font-size:10px}} /* ===== round icon buttons (reference-style) ===== */ /* The corner arrow sits in a solid white disc, as in the reference — the one piece of pure white on a dark panel, which is what makes it read as an affordance rather than decoration. Size is unchanged. */ .iconbtn{width:30px;height:30px;border-radius:99px;display:inline-grid;place-items:center;color:#0c0d0e; background:#fff;border:1px solid transparent;transition:transform .18s,box-shadow .18s,background .18s; cursor:pointer;padding:0;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.22)} .iconbtn:hover{background:var(--accent-3);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(18,135,106,.35)} /* on the light theme a white disc would vanish, so it inverts to ink */ :root:not([data-theme="dark"]) .iconbtn{background:var(--ink);color:#fff;box-shadow:0 1px 3px rgba(12,13,14,.18)} :root:not([data-theme="dark"]) .iconbtn:hover{background:var(--accent);color:#fff} .headactions{display:flex;gap:6px;align-items:center} /* ===== expanding pill button ===== A white disc that grows into a labelled pill on hover. This replaces the old pairing of a text link beside a decorative disc — the disc was a , so clicking the obvious target did nothing at all. The width is transitioned between two EXPLICIT values. Both the intrinsic approaches were tried and measured first — grid 0fr->1fr, then max-width on the label — and neither moved the button a single pixel inside this flex context. An explicit width always animates. The cost is a per-button ceiling, which --ibtn-w exposes for any label that needs more room. */ .ibtn{display:inline-flex;align-items:center;justify-content:flex-end; width:30px;height:30px;padding:0 8px;border-radius:99px;overflow:hidden;flex:none; background:#fff;color:#0c0d0e;border:0;cursor:pointer;text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:width .3s cubic-bezier(.22,.85,.3,1),background .2s,color .2s,box-shadow .25s} .ibtn .ico{flex:none} .ibtn .lbl{opacity:0;white-space:nowrap;margin-right:6px; font-size:11.5px;font-weight:650;letter-spacing:-.005em;line-height:1; transition:opacity .2s ease .06s} .ibtn:hover,.ibtn:focus-visible{width:var(--ibtn-w,126px); background:var(--accent-3);color:#fff;box-shadow:0 4px 16px rgba(18,135,106,.42)} .ibtn:hover .lbl,.ibtn:focus-visible .lbl{opacity:1} .ibtn:focus-visible{outline:2px solid var(--accent-3);outline-offset:2px} .ibtn:active{transform:translateY(0)} /* a white disc would vanish on the light theme */ :root:not([data-theme="dark"]) .ibtn{background:var(--ink);color:#fff;box-shadow:0 1px 3px rgba(12,13,14,.18)} :root:not([data-theme="dark"]) .ibtn:hover, :root:not([data-theme="dark"]) .ibtn:focus-visible{background:var(--accent);color:#fff} /* with motion reduced the label is simply always shown */ @media(prefers-reduced-motion:reduce){ .ibtn,.ibtn .lbl{transition:none} .ibtn{width:var(--ibtn-w,126px)} .ibtn .lbl{opacity:1} } .rowav{width:26px;height:26px;border-radius:99px;display:inline-grid;place-items:center;font-size:10.5px;font-weight:700; color:#fff;background:var(--accent-grad);margin-right:9px;flex:none} .namecell{display:flex;align-items:center;min-width:0} /* ===== page transitions ===== Content is visible by default and only animates when the script opts in, so a JavaScript failure can never leave a page permanently blank. */ main.page-in{animation:pageIn .34s cubic-bezier(.22,.85,.3,1) both} @keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* clicked-from-here variant: the page grows out of the point that was pressed */ main.page-in.from-origin{animation:pageOrigin .42s cubic-bezier(.22,.85,.3,1) both; transform-origin:var(--nav-x,50%) var(--nav-y,50%)} @keyframes pageOrigin{ from{opacity:0;transform:scale(.975)} to{opacity:1;transform:none} } main{transition:opacity .18s ease,transform .18s ease;transform-origin:var(--nav-x,50%) var(--nav-y,50%)} .leaving main{opacity:0;transform:scale(.994)} .leaving .topbar,.leaving aside{opacity:.55;transition:opacity .18s ease} @media(prefers-reduced-motion:reduce){ main.page-in,main.page-in.from-origin{animation:none} main,.leaving main{transition:none;opacity:1;transform:none} } /* ===== segmented tabs / chips / progress / stat strip ===== */ .segbar{display:inline-flex;align-items:center;gap:3px;padding:4px;border-radius:99px; background:var(--surface-3);border:1px solid var(--line)} .segbar a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--ink-3);transition:.16s;white-space:nowrap} .segbar a:hover{color:var(--ink)} .segbar a.on{background:var(--dark);color:#fff} .segbar a.on .cnt{background:rgba(255,255,255,.20);color:#fff;border-color:transparent} .segbar a.on.accent{background:var(--accent-grad);color:#fff} [data-theme="dark"] .segbar a.on{background:var(--ink);color:#000} [data-theme="dark"] .segbar a.on .cnt{background:rgba(0,0,0,.18);color:#000} [data-theme="dark"] .segbar a.on.accent{background:var(--accent-grad);color:#fff} .cnt{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;border-radius:99px; background:var(--surface);border:1px solid var(--line);font-size:10.5px;font-weight:700;color:var(--ink-2)} .chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center} .chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--rn);font-size:12px;font-weight:600; background:var(--surface-3);border:1px solid var(--line-2);color:var(--ink-2)} .chip .ico{width:14px;height:14px;color:var(--ink-4)} .chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)} /* thinner track, no border, gradient fill — reads as data rather than as a widget */ .progress{height:5px;border-radius:99px;background:var(--surface-3);border:0;overflow:hidden;margin-top:11px} .progress i{display:block;height:100%;border-radius:99px;background:var(--accent-grad)} .progress i.warn{background:linear-gradient(90deg,var(--warn),#e6c366)} .progress i.danger{background:linear-gradient(90deg,var(--danger),#e8836f)} .progress i.ok{background:var(--accent-grad)} .statstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:16px;border-radius:var(--r2);overflow:hidden; background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)} .statstrip>div{padding:22px 24px;border-left:1px solid var(--hairline)} .statstrip>div:first-child{border-left:0} .statstrip small{display:block;color:var(--ink-3);font-size:10.5px;font-weight:600;margin-bottom:10px;letter-spacing:.03em} .statstrip strong{font-size:28px;letter-spacing:-.032em;color:var(--ink)} .statstrip strong span{font-size:12px;color:var(--ink-3);font-weight:600;margin-left:4px;vertical-align:super;letter-spacing:0} .avstack{display:flex;align-items:center} .avstack span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700; color:#fff;background:var(--accent);border:2px solid var(--surface-solid);margin-left:-8px} .avstack span:first-child{margin-left:0} .avstack .more{background:var(--surface-3);color:var(--ink-2);border-color:var(--line)} [data-theme="dark"] .avstack span{border-color:#161a15} /* ===== login (full-screen video) ===== */ body.login{background:#070906;min-height:100vh} .videobg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#070906} .videobg video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;filter:saturate(105%) contrast(104%)} .videobg .scrim{position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,9,6,.60),rgba(6,9,6,.42) 45%,rgba(6,9,6,.82)), radial-gradient(105% 85% at 50% 48%,transparent 32%,rgba(5,7,5,.72)), radial-gradient(60% 45% at 78% 18%,rgba(0,168,98,.14),transparent 62%)} .loginwrap{position:relative;z-index:1;min-height:100vh;margin:0;display:grid;place-items:center;padding:24px} .loginbox{width:min(408px,100%);padding:36px 34px;border-radius:var(--r); background:#0e0f11;border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12)} .loginbox .brand{margin-bottom:22px} .loginbox .brand b{color:#fff;font-size:20px} .loginbox .brand span{color:var(--accent-3)} .loginbox .eyebrow{display:block;font-size:9.5px;letter-spacing:1.6px;color:var(--accent-3);font-weight:800;text-transform:uppercase;text-align:center} .loginbox h1{font-size:26px;color:#fff;margin:9px 0 5px;text-align:center} .loginbox .sub{color:rgba(255,255,255,.58);font-size:13px;margin:0 0 22px;text-align:center} .loginbox label{margin-bottom:14px;color:rgba(255,255,255,.78)} .loginbox input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#fff} .loginbox input::placeholder{color:rgba(255,255,255,.34)} .loginbox input:focus{background:rgba(255,255,255,.11);border-color:var(--accent-3);box-shadow:0 0 0 3px rgba(127,181,15,.16)} .loginbox .btn{width:100%;justify-content:center;margin-top:6px;padding:12px 16px; background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 20px rgba(0,168,98,.30)} .loginbox .btn:hover{background:var(--accent-2);border-color:var(--accent-2)} .loginbox .alert.error{background:rgba(200,69,47,.20);color:#ffb9ab;border-color:transparent} .loginhelp{margin-top:14px;text-align:center} .loginhelp a{color:rgba(255,255,255,.62);font-size:12.5px;font-weight:600;text-decoration:none} .loginhelp a:hover{color:var(--accent-3)} .loginfoot{margin-top:20px;padding-top:15px;border-top:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.38);font-size:11px;display:flex;justify-content:space-between;gap:10px} @media(max-width:560px){.loginbox{padding:28px 22px}.loginbox h1{font-size:23px}} .login{min-height:100vh;display:grid;place-items:center;padding:20px;background:#0a0c0a; background-image:radial-gradient(720px 480px at 26% 14%,rgba(0,217,126,.16),transparent 64%),radial-gradient(600px 440px at 86% 90%,rgba(94,139,10,.14),transparent 62%)} .loginbox{width:min(420px,94vw);padding:36px;border-radius:var(--r); background:#0e0f11;border:1px solid rgba(255,255,255,.10); box-shadow:0 12px 40px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08)} .loginbox .brand b{color:#fff} .loginbox .brand span{color:var(--accent-3)} .loginbox h1{font-size:25px;color:#fff;margin-top:22px} .loginbox p{color:rgba(255,255,255,.60);margin:7px 0 4px;font-size:13.5px} .loginbox label{margin:15px 0;color:rgba(255,255,255,.78)} .loginbox input{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);color:#fff} .loginbox input::placeholder{color:rgba(255,255,255,.35)} .loginbox input:focus{background:rgba(255,255,255,.12);border-color:var(--accent-3);box-shadow:0 0 0 3px rgba(127,181,15,.15)} .loginbox .btn{width:100%;margin-top:12px;justify-content:center;background:var(--accent);border-color:var(--accent);color:#fff} .loginbox .btn:hover{background:var(--accent-2);border-color:var(--accent-2)} .loginbox .alert.error{background:rgba(200,69,47,.18);color:#ffb4a6;border-color:transparent} footer{text-align:center;color:var(--ink-4);font-size:10px;padding:16px 8px 4px;font-weight:500} /* ===== responsive ===== */ /* grid/flex children must be allowed to shrink below their content width */ /* A grid or flex child defaults to min-width:auto and refuses to shrink below its content, so one long