/* Cardbridge, dressed in the Botnest design system. Tokens come from static/botnest/ (colors, layout, typography, fonts). Themes: dawn (default) and night, switched via data-bn-theme on . The aliases below map Cardbridge's original palette names onto Botnest semantic tokens, so template inline styles keep working and follow the theme: interactive = glacier blue, success = aurora green, warning = amber, danger = red. */ :root { --paper: var(--bn-bg); --surface: var(--bn-surface); --ink: var(--bn-text); --ink-soft: var(--bn-text-2); --ink-faint: var(--bn-text-3); --line: var(--bn-border-subtle); --line-firm: var(--bn-border); --amethyst: var(--bn-link); --amethyst-wash: var(--bn-action-subtle); --moss: var(--bn-success-text); --moss-wash: var(--bn-success-subtle); --gold: var(--bn-warning-text); --gold-wash: var(--bn-warning-subtle); --rust: var(--bn-danger-text); --rust-wash: var(--bn-danger-subtle); --radius: var(--bn-radius-sm); } *, *::before, *::after { box-sizing: border-box; } /* Keep navigation steady: reserve the scrollbar's lane so pages of different heights don't shift sideways when the bar appears. */ html { scrollbar-gutter: stable; } body { margin: 0; } h1 { font-size: var(--bn-text-h1); } h2 { font-size: var(--bn-text-h2); } h3 { font-size: var(--bn-text-h3); } .wrap { max-width: 1020px; margin: 0 auto; padding: 28px 28px 80px; } /* App shell: the design system's chrome rail — horizon glow behind the nav, ridge silhouette at the foot, stars-and-aurora at night. */ body.app { display: flex; min-height: 100vh; } body.app .main { flex: 1; min-width: 0; } .side { width: 248px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; overflow: hidden; color: var(--bn-chrome-text); background-color: var(--bn-chrome-bg); border-right: 1px solid var(--bn-border); } .side > * { position: relative; z-index: 1; } .side::before, .side::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Dawn: first light rising behind the ridge */ .side::before { background-image: radial-gradient(120% 52% at 50% 108%, rgba(224, 172, 71, 0.34), rgba(224, 172, 71, 0.08) 55%, transparent 78%), radial-gradient(70% 26% at 76% 90%, rgba(214, 71, 138, 0.10), transparent 70%), linear-gradient(180deg, #FBF7ED 0%, #F7EEDD 55%, #F2E2C8 100%); } .side::after { top: auto; height: 92px; background-position: bottom; background-size: 100% 92px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 92' preserveAspectRatio='none'%3E%3Cpath d='M0 92 L0 48 L40 24 L78 46 L120 12 L156 40 L200 20 L232 46 L260 34 L260 92 Z' fill='%23E3CD9E' opacity='.5'/%3E%3Cpath d='M0 92 L0 64 L30 44 L64 60 L102 32 L138 56 L176 40 L214 62 L244 50 L260 58 L260 92 Z' fill='%23C4AE85' opacity='.34'/%3E%3C/svg%3E"); } /* Night: aurora glow on the horizon */ [data-bn-theme="night"] .side::before { background-image: radial-gradient(120% 52% at 50% 108%, rgba(76, 203, 151, 0.30), rgba(76, 203, 151, 0.07) 55%, transparent 78%), radial-gradient(70% 26% at 76% 90%, rgba(231, 107, 163, 0.13), transparent 70%), linear-gradient(180deg, #0A101E 0%, #0C1729 55%, #10263B 100%); } [data-bn-theme="night"] .side::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 92' preserveAspectRatio='none'%3E%3Cpath d='M0 92 L0 48 L40 24 L78 46 L120 12 L156 40 L200 20 L232 46 L260 34 L260 92 Z' fill='%2316384A' opacity='.4'/%3E%3Cpath d='M0 92 L0 64 L30 44 L64 60 L102 32 L138 56 L176 40 L214 62 L244 50 L260 58 L260 92 Z' fill='%23081020' opacity='.7'/%3E%3C/svg%3E"); } .sidebrand { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 14px; } .mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bn-chrome-text); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; } .mark:hover { text-decoration: none; color: var(--bn-chrome-text); } .mark svg { display: block; flex-shrink: 0; } .markname { display: flex; flex-direction: column; line-height: 1.15; } .byline { font-weight: 700; font-size: 10px; letter-spacing: var(--bn-tracking-caps); text-transform: uppercase; color: var(--bn-chrome-text-dim); } .sidenav { display: flex; flex-direction: column; gap: 2px; } .sidenav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: var(--bn-chrome-text); border-radius: var(--bn-radius-sm); border: 1px solid transparent; font: var(--bn-weight-medium) var(--bn-text-body)/1.2 var(--bn-font-ui); text-decoration: none; transition: background var(--bn-dur-1) var(--bn-ease), color var(--bn-dur-1) var(--bn-ease); } .sidenav a svg { flex-shrink: 0; opacity: 0.85; } .sidenav a:hover { background: rgba(42, 36, 28, 0.06); text-decoration: none; color: var(--bn-chrome-text); } [data-bn-theme="night"] .sidenav a:hover { background: rgba(255, 255, 255, 0.07); } /* Raised pill: the active item lifts off the rail as a card with a soft shadow and a visible edge — its icon takes the aurora green. At night the pill is a lighter navy with a gradient sheen so it clearly stands proud. */ .sidenav a.is-active { background: var(--bn-surface); color: var(--bn-text); border-color: var(--bn-border); font-weight: var(--bn-weight-bold); box-shadow: var(--bn-shadow-2); } [data-bn-theme="night"] .sidenav a.is-active { background: linear-gradient(180deg, var(--bn-night-750), var(--bn-night-850)); border-color: rgba(255, 255, 255, 0.16); color: #fff; } .sidenav a.is-active svg { color: var(--bn-accent-green); opacity: 1; } .sidegroup { margin: 18px 12px 6px; font: var(--bn-weight-bold) 11px/1 var(--bn-font-ui); letter-spacing: var(--bn-tracking-caps); text-transform: uppercase; color: var(--bn-chrome-text-dim); } .sidefoot { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 8px; } .who { font-size: 13px; color: var(--bn-chrome-text-dim); } .themebtn { background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--bn-chrome-text-dim); padding: 5px 7px; line-height: 0; border-radius: var(--bn-radius-sm); } .themebtn:hover { color: var(--bn-chrome-text); background: rgba(42, 36, 28, 0.06); } [data-bn-theme="night"] .themebtn:hover { background: rgba(255, 255, 255, 0.07); } /* The toggle previews what a click gives you: a solid moon by day, a full sun by night. */ .themebtn .icon-sun { display: none; } [data-bn-theme="night"] .themebtn .icon-sun { display: block; } [data-bn-theme="night"] .themebtn .icon-moon { display: none; } /* Monospace signature line under card and set names. */ .cardline { font-family: var(--bn-font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--bn-text-3); text-transform: uppercase; } .cardline b { color: var(--bn-text); font-weight: 600; } .cardline .sep { opacity: 0.4; padding: 0 5px; } /* Cards and panels */ .panel { background: var(--bn-surface); border: 1px solid var(--bn-border-subtle); border-radius: var(--bn-radius-md); box-shadow: var(--bn-shadow-1); padding: 20px 22px; margin-bottom: 20px; } /* KPI cards: each stat is its own card — label left, icon right, heavy value. */ .stats { display: flex; gap: 14px; margin-bottom: 28px; } .stat { flex: 1; background: var(--bn-surface); border: 1px solid var(--bn-border-subtle); border-radius: var(--bn-radius-md); box-shadow: var(--bn-shadow-1); padding: 14px 16px; } .stat .k { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: var(--bn-weight-medium) var(--bn-text-small)/1.3 var(--bn-font-ui); color: var(--bn-text-2); } .stat .k svg { color: var(--bn-text-3); flex-shrink: 0; } .stat .v { font: var(--bn-weight-heavy) 30px/1.1 var(--bn-font-ui); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: 8px; } .bar { height: 4px; background: var(--bn-track); border-radius: var(--bn-radius-pill); overflow: hidden; margin-top: 10px; } .bar i { display: block; height: 100%; border-radius: var(--bn-radius-pill); background: linear-gradient(90deg, var(--bn-accent-green), var(--bn-accent-rose)); } /* Set rows. The left rule carries the risk grade. */ .setrow { background: var(--bn-surface); border: 1px solid var(--bn-border-subtle); border-left: 3px solid var(--bn-border-strong); border-radius: var(--bn-radius-md); margin-bottom: 10px; box-shadow: var(--bn-shadow-1); overflow: hidden; } .setrow[data-risk="clean"] { border-left-color: var(--bn-success-text); } .setrow[data-risk="verify"] { border-left-color: var(--bn-warning-text); } .setrow[data-risk="manual"] { border-left-color: var(--bn-danger-text); } .setrow[data-done="1"] { opacity: 0.55; } .setrow[data-done="1"] .setname { text-decoration: line-through; } .setrow > summary { list-style: none; cursor: pointer; padding: 13px 18px; display: flex; align-items: center; gap: 14px; transition: background var(--bn-dur-1) var(--bn-ease); } .setrow > summary::-webkit-details-marker { display: none; } .setrow > summary:hover { background: var(--bn-spotlight-soft); } .setname { font-weight: 700; } .setmeta { margin-left: auto; text-align: right; font-size: 13px; color: var(--bn-text-2); white-space: nowrap; } /* Status chips: the design system's pill with a colored dot. */ .tag { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: var(--bn-radius-pill); font: var(--bn-weight-medium) 12px/1 var(--bn-font-ui); text-transform: capitalize; white-space: nowrap; background: var(--bn-surface-2); color: var(--bn-text-2); } .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .tag.clean { background: var(--bn-success-subtle); color: var(--bn-success-text); } .tag.verify { background: var(--bn-warning-subtle); color: var(--bn-warning-text); } .tag.manual { background: var(--bn-danger-subtle); color: var(--bn-danger-text); } .setbody { padding: 4px 18px 18px; border-top: 1px solid var(--bn-border-subtle); } .reason { font-size: 13px; color: var(--bn-warning-text); background: var(--bn-warning-subtle); border: 1px solid var(--bn-warning-border); padding: 8px 12px; border-radius: var(--bn-radius-sm); margin: 12px 0; } .reason.manual { color: var(--bn-danger-text); background: var(--bn-danger-subtle); border-color: var(--bn-danger-border); } /* Tables — the design system's carded table: bordered shell, quiet header band, spotlight row hover. Wrap every wide table in .tablewrap. */ table { width: 100%; border-collapse: collapse; } .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bn-border-subtle); border-radius: var(--bn-radius-md); background: var(--bn-surface); box-shadow: var(--bn-shadow-1); margin-top: 12px; } .tablewrap table { margin-top: 0; } th { position: sticky; top: 0; z-index: 1; text-align: left; padding: var(--bn-cell-pad-y) var(--bn-cell-pad-x); font: var(--bn-weight-bold) var(--bn-text-small)/1.3 var(--bn-font-ui); color: var(--bn-text-2); background: var(--bn-surface-2); border-bottom: 1px solid var(--bn-border); white-space: nowrap; } td { height: var(--bn-row-h); padding: var(--bn-cell-pad-y) var(--bn-cell-pad-x); border-bottom: 1px solid var(--bn-border-subtle); vertical-align: middle; } tr:last-child td { border-bottom: none; } tbody tr { transition: background var(--bn-dur-1) var(--bn-ease); } /* Cursor-tracking spotlight: base.html writes --tx/--ty on the hovered row. Kept faint — a hint of light, not a highlighter. */ tbody tr:hover { background: radial-gradient(170px circle at var(--tx, 50%) var(--ty, 50%), var(--bn-spotlight-soft) 0%, transparent 75%), color-mix(in srgb, var(--bn-action-subtle) 40%, transparent); } td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } th.num { text-align: right; } /* Progress cell: label and bar as one tight unit. */ .progresscell { min-width: 150px; } .progresscell .note { font-size: 12.5px; } .progresscell .bar { margin-top: 4px; max-width: 130px; } .stale { color: var(--bn-warning-text); font-size: 12px; } .liveprice { color: var(--bn-success-text); font-weight: 600; } /* A table row that is itself a link target. */ tr.rowclick td:first-child a { font-weight: 700; color: var(--bn-text); text-decoration: none; } tr.rowclick td:first-child a:hover { color: var(--bn-link); } /* Controls */ input[type=text], input[type=password], input[type=number], input[type=file], textarea { font: inherit; font-size: 14px; color: var(--bn-text); background: var(--bn-surface); border: 1px solid var(--bn-border); border-radius: var(--bn-radius-sm); padding: 7px 10px; width: 100%; transition: border-color var(--bn-dur-1) var(--bn-ease); } input:hover, textarea:hover { border-color: var(--bn-border-strong); } input:focus, textarea:focus, button:focus-visible, summary:focus-visible, a:focus-visible { outline: none; border-color: var(--bn-focus-ring); box-shadow: var(--bn-focus-glow); } input[type=number] { width: 92px; text-align: right; } input.abbrev { width: 130px; text-transform: uppercase; font-family: var(--bn-font-mono); } input[type=checkbox] { accent-color: var(--bn-action); } label.field { display: block; margin-bottom: 14px; } label.field span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: var(--bn-tracking-caps); font-weight: 700; color: var(--bn-text-2); margin-bottom: 5px; } button, .btn { font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; background: var(--bn-surface); color: var(--bn-link); border: 1px solid var(--bn-border); border-radius: var(--bn-radius-sm); padding: 7px 15px; text-decoration: none; display: inline-block; transition: background var(--bn-dur-1) var(--bn-ease), border-color var(--bn-dur-1) var(--bn-ease); } button:hover, .btn:hover { background: var(--bn-action-subtle); border-color: var(--bn-link); text-decoration: none; color: var(--bn-link); } button:active, .btn:active { background: var(--bn-action-subtle-hover); transform: translateY(1px); } button.primary { background: var(--bn-action); border-color: var(--bn-action); color: var(--bn-on-action); } button.primary:hover { background: var(--bn-action-hover); border-color: var(--bn-action-hover); color: var(--bn-on-action); } button.quiet { border-color: transparent; background: transparent; color: var(--bn-chrome-text-dim); } button.quiet:hover { color: var(--bn-chrome-text); background: var(--bn-action-subtle); } button.danger { color: var(--bn-danger-text); border-color: var(--bn-danger-border); } button.danger:hover { background: var(--bn-danger-subtle); border-color: var(--bn-danger-text); color: var(--bn-danger-text); } .actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; } .actions .spacer { margin-left: auto; } .flash { padding: 10px 14px; border-radius: var(--bn-radius-sm); margin-bottom: 18px; font-size: 14px; border: 1px solid transparent; } .flash.error { background: var(--bn-danger-subtle); color: var(--bn-danger-text); border-color: var(--bn-danger-border); } .flash.ok { background: var(--bn-success-subtle); color: var(--bn-success-text); border-color: var(--bn-success-border); } .empty { text-align: center; padding: 48px 24px; color: var(--bn-text-2); } .empty h2 { margin-bottom: 8px; } .note { font-size: 13px; color: var(--bn-text-2); } .hint { font-size: 12.5px; color: var(--bn-text-3); margin-top: 5px; } .steps { counter-reset: step; list-style: none; padding: 0; margin: 14px 0 0; } .steps li { counter-increment: step; position: relative; padding-left: 32px; margin-bottom: 11px; font-size: 14px; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; font-family: var(--bn-font-mono); font-size: 11px; color: var(--bn-link); background: var(--bn-action-subtle); width: 21px; height: 21px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .login { max-width: 340px; margin: 90px auto; } /* Tab bar — the design system's underline tabs. */ .tabs { display: flex; gap: 4px; margin: 16px 0 24px; border-bottom: 1px solid var(--bn-border-subtle); } .tabs a { padding: 9px 14px; text-decoration: none; color: var(--bn-text-2); font-size: 14px; font-weight: 500; margin-bottom: -1px; transition: color var(--bn-dur-1) var(--bn-ease); } .tabs a:hover { color: var(--bn-text); text-decoration: none; } .tabs a.active { color: var(--bn-text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--bn-link); } /* Scryfall card thumbnails: small in the row, full art on hover. */ .thumb img { width: 42px; border-radius: 3px; display: block; box-shadow: var(--bn-shadow-1); } .thumb { position: relative; display: inline-block; } .thumb::after { content: ""; position: absolute; left: 54px; top: -40px; z-index: 30; width: 244px; height: 340px; border-radius: 12px; background-image: var(--large, none); background-size: cover; opacity: 0; pointer-events: none; transition: opacity var(--bn-dur-1) var(--bn-ease); box-shadow: var(--bn-shadow-3); } .thumb:hover::after { opacity: 1; } /* Foil printings: a holographic sheen over the art. Uses the aurora identity hues — decorative only, so semantic rules stay intact. */ .thumb.foil::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 3px; background: linear-gradient(115deg, rgba(76, 203, 151, 0.30), rgba(237, 198, 114, 0.22), rgba(116, 168, 233, 0.26), rgba(231, 107, 163, 0.28), rgba(76, 203, 151, 0.24)); mix-blend-mode: screen; pointer-events: none; } .thumb.foil::after { background-image: linear-gradient(115deg, rgba(76, 203, 151, 0.20), rgba(237, 198, 114, 0.15), rgba(116, 168, 233, 0.18), rgba(231, 107, 163, 0.20), rgba(76, 203, 151, 0.18)), var(--large, none); background-size: 300% 300%, cover; background-position: 0% 0%, center; background-blend-mode: screen, normal; } .thumb.foil:hover::after { animation: foilsheen 3s linear infinite; } @keyframes foilsheen { 0% { background-position: 0% 0%, center; } 100% { background-position: 300% 300%, center; } } /* The done checkbox sits inside the clickable summary row. */ .donebox { display: inline-flex; align-items: center; margin-right: 2px; } .donebox input { width: 17px; height: 17px; accent-color: var(--bn-success-fill); cursor: pointer; } /* Small icon-only buttons, e.g. archive and trash on a row. */ .iconbtn { padding: 7px 9px; line-height: 0; color: var(--bn-text-3); border-color: transparent; background: transparent; } .iconbtn:hover { color: var(--bn-danger-text); border-color: var(--bn-border); background: var(--bn-surface); } /* Row links live in the first cell; the row spotlight marks the target. (No stretched-link overlay here: without a positioned ancestor it would swallow clicks for the whole page.) */ /* Phone-friendly. Tables keep their real layout and scroll sideways. */ /* Mobile top bar + hamburger (hidden on desktop). */ .mobiletop { display: none; align-items: center; gap: 10px; padding: 10px 14px; position: sticky; top: 0; z-index: 30; background: var(--bn-chrome-bg); border-bottom: 1px solid var(--bn-border); color: var(--bn-chrome-text); } .mobiletop .mark { font-size: 17px; } .menubtn { background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--bn-chrome-text); padding: 7px 8px; line-height: 0; border-radius: var(--bn-radius-sm); } .navbackdrop { display: none; position: fixed; inset: 0; z-index: 50; background: var(--bn-overlay); border: none; padding: 0; } @media (max-width: 820px) { /* The rail slides in from the left as a drawer; the content is the page. */ body.app { display: block; } .mobiletop { display: flex; } .side { position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: 264px; transform: translateX(-105%); transition: transform var(--bn-dur-3) var(--bn-ease-io); z-index: 60; box-shadow: var(--bn-shadow-3); } body.nav-open .side { transform: translateX(0); } body.nav-open .navbackdrop { display: block; } .wrap { padding-top: 18px; } /* On mobile the theme toggle lives top-right in the bar, not in the drawer. */ .sidebrand .themebtn { display: none; } .mobiletop .themebtn { margin-left: auto; } } @media (max-width: 700px) { .wrap { padding-left: 14px; padding-right: 14px; padding-top: 18px; } h1 { font-size: 24px; } .stats { flex-direction: column; } .stat { padding: 12px 14px; } .stat .v { font-size: 21px; } th, td { padding: 8px 6px; } .tablewrap table { min-width: 640px; } .setrow > summary { flex-wrap: wrap; } .setmeta { flex-basis: 100%; text-align: left; margin-left: 46px; } .setbody { padding: 4px 12px 14px; } .login { margin: 36px auto; } .iconbtn { padding: 10px 11px; } .actions form { flex-shrink: 0; } /* Inline label rows (settings, price rule) wrap instead of overflowing. */ label[style*="display:flex"] { flex-wrap: wrap; } .thumb::after { position: fixed; left: 50%; top: 8vh; transform: translateX(-50%); width: min(244px, 62vw); height: min(340px, 86vw); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }