/* COPY 20 theme — near-black canvas, one green accent. Loaded by the site layout and by scripts/preview_page.php, so the preview and the real pages can never drift apart. */ /* Tokens are global: modals teleport onto and lose anything scoped to a wrapper. Every page in this build reads from here. */ :root{ --cb-bg:#171717; --cb-block:#262626; --cb-block-2:#1f1f1f; --cb-line:#2b2b2b; --cb-ink:#dbdbdb; --cb-ink-2:#828282; --cb-ink-3:#979797; --cb-white:#fff; --cb-green:#4ad493; --cb-green-2:#28c47a; --cb-link:#5fad7e; --cb-on-green:#262626; --cb-outline:#424242; --cb-outline-hover:#979797; --cb-yellow:#ffe55f; --cb-red:#e0614f; --cb-blue:#5ca1ff; --cb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; --cb-shell:1380px; } html{ background:var(--cb-bg); } body{ background:var(--cb-bg); color:var(--cb-ink); font-family:var(--cb-font); font-size:14px; line-height:1.5; color-scheme:dark; -webkit-font-smoothing:antialiased; } body *,body *::before,body *::after{ box-sizing:border-box; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; } [x-cloak]{ display:none !important; } ::selection{ background:var(--cb-green); color:var(--cb-on-green); } :where(a,button,input,select,textarea):focus-visible{ outline:2px solid var(--cb-green); outline-offset:2px; } /* shared furniture every page leans on */ .shell{ max-width:var(--cb-shell); margin:0 auto; padding:0 20px; } .cb-h1{ font-size:26px; font-weight:700; color:var(--cb-white); line-height:1.2; } .cb-h2{ font-size:20px; font-weight:700; color:var(--cb-ink); } .cb-lead{ font-size:16px; line-height:23px; color:var(--cb-ink-2); } .cb-panel{ border:1px solid var(--cb-line); border-radius:6px; background:var(--cb-block-2); } .cb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 22px; border:0; border-radius:6px; background:var(--cb-green); color:var(--cb-on-green); font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; white-space:nowrap; } .cb-btn:hover{ background:var(--cb-green-2); } .cb-btn--ghost{ background:transparent; border:1px solid var(--cb-outline); color:var(--cb-ink); font-weight:500; } .cb-btn--ghost:hover{ background:transparent; border-color:var(--cb-outline-hover); } .cb-btn--sm{ height:36px; padding:0 14px; font-size:14px; } .cb-field label{ display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--cb-ink-2); } .cb-input,body input[type=text],body input[type=email],body input[type=tel],body input[type=password], body input[type=number],body input[type=search],body select,body textarea{ width:100%; padding:11px 13px; background:var(--cb-block-2); border:1px solid var(--cb-line); border-radius:6px; color:var(--cb-ink); font-family:inherit; font-size:15px; } body input:focus,body select:focus,body textarea:focus{ border-color:var(--cb-green); outline:none; } body input::placeholder,body textarea::placeholder{ color:var(--cb-ink-3); } /* Chrome paints autofilled fields near-white; pin them back to the surface. These MUST stay separate rules — one unknown selector in a comma list makes the browser drop the whole rule. */ input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px var(--cb-block-2) inset !important; -webkit-text-fill-color:var(--cb-ink) !important; caret-color:var(--cb-ink); } input:autofill,textarea:autofill,select:autofill{ box-shadow:0 0 0 1000px var(--cb-block-2) inset !important; -webkit-text-fill-color:var(--cb-ink) !important; } /* ── header ───────────────────────────────────────────────────────── */ .cbh{ position:sticky; top:0; z-index:500; background:var(--cb-bg); border-bottom:1px solid var(--cb-line); } .cbh__in{ max-width:var(--cb-shell); margin:0 auto; height:56px; padding:0 20px; display:flex; align-items:center; gap:22px; } .cbh__logo{ display:flex; align-items:center; gap:8px; flex:none; font-size:19px; font-weight:700; color:var(--cb-white); letter-spacing:-.01em; } .cbh__logo img{ height:26px; width:auto; display:block; } .cbh__logo em{ font-style:normal; color:var(--cb-green); } .cbh__nav{ display:flex; align-items:center; gap:20px; min-width:0; } .cbh__nav a{ font-size:14px; font-weight:500; color:var(--cb-ink-2); white-space:nowrap; } .cbh__nav a:hover{ color:var(--cb-ink); } .cbh__nav a.on{ color:var(--cb-white); font-weight:600; } .cbh__sp{ flex:1; } .cbh__r{ display:flex; align-items:center; gap:10px; flex:none; } .cbh__admin{ color:var(--cb-yellow) !important; } .cbh__burger{ display:none; background:none; border:0; padding:6px; cursor:pointer; color:var(--cb-ink); } .cbh__burger svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } @media(max-width:1023px){ .cbh__nav{ display:none; } .cbh__r .cb-btn{ display:none; } .cbh__burger{ display:block; } } /* ── mobile drawer ────────────────────────────────────────────────── */ .cbm{ position:fixed; inset:0; z-index:900; background:var(--cb-bg); display:flex; flex-direction:column; } .cbm__h{ height:56px; padding:0 16px; display:flex; align-items:center; border-bottom:1px solid var(--cb-line); } .cbm__x{ margin-left:auto; background:none; border:0; padding:6px; cursor:pointer; color:var(--cb-ink); } .cbm__x svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } .cbm__b{ flex:1; overflow-y:auto; padding:8px 0 24px; } .cbm__b a{ display:flex; align-items:center; gap:12px; padding:15px 20px; font-size:17px; font-weight:600; color:var(--cb-ink); border-bottom:1px solid var(--cb-line); } .cbm__b a svg{ width:19px; height:19px; flex:none; color:var(--cb-ink-3); } .cbm__f{ padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--cb-line); display:grid; grid-template-columns:1fr 1fr; gap:10px; } .cbm__f .cb-btn{ width:100%; } /* ── footer ───────────────────────────────────────────────────────── */ .cbf{ margin-top:60px; border-top:1px solid var(--cb-line); background:var(--cb-bg); } .cbf__in{ max-width:var(--cb-shell); margin:0 auto; padding:40px 20px 28px; } .cbf__grid{ display:grid; grid-template-columns:1fr; gap:30px; } @media(min-width:700px){ .cbf__grid{ grid-template-columns:1.6fr 1fr 1fr; } } @media(min-width:1000px){ .cbf__grid{ grid-template-columns:2fr 1fr 1fr 1fr; } } .cbf__brand .cbh__logo{ margin-bottom:12px; } .cbf__brand p{ margin:0; font-size:14px; line-height:20px; color:var(--cb-ink-2); max-width:42ch; } .cbf__meta{ margin-top:14px; font-size:14px; line-height:21px; color:var(--cb-ink-2); } .cbf__meta a{ color:var(--cb-ink); } .cbf__meta a:hover{ color:var(--cb-green); } .cbf h4{ margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cb-ink-3); } .cbf__col a{ display:block; padding:5px 0; font-size:14px; color:var(--cb-ink-2); } .cbf__col a:hover{ color:var(--cb-green); } .cbf__bot{ margin-top:32px; padding-top:18px; border-top:1px solid var(--cb-line); display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; font-size:13px; color:var(--cb-ink-3); } .cbf__bot div{ margin-left:auto; display:flex; gap:18px; } .cbf__bot a:hover{ color:var(--cb-ink); } @media(max-width:600px){ .cbf__bot div{ margin-left:0; } } /* flash strip */ .cb-flash{ max-width:var(--cb-shell); margin:14px auto 0; padding:0 20px; } .cb-flash > div{ padding:11px 14px; border-radius:6px; font-size:14px; } .cb-flash .ok{ background:rgba(74,212,147,.12); border:1px solid rgba(74,212,147,.35); color:var(--cb-green); } .cb-flash .no{ background:rgba(224,97,79,.12); border:1px solid rgba(224,97,79,.35); color:var(--cb-red); } /* ── shared page furniture ───────────────────────────────────────────── Content pages all use the same masthead, prose column and form blocks, so they live here rather than being restated in every view. */ /* padding-top only. The shorthand here would reset .shell's side gutters — these pages are class="shell pg", so a `padding: 34px 0 0` wipes the very margins that keep text off the edge of a phone. */ .pg{ padding-top:34px; } .pg-head{ max-width:64ch; } .pg-head .kick{ display:block; margin-bottom:9px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--cb-green); } .pg-head h1{ font-size:clamp(26px,4vw,38px); font-weight:700; color:var(--cb-white); line-height:1.12; letter-spacing:-.02em; } .pg-head p{ margin-top:13px; font-size:17px; line-height:25px; color:var(--cb-ink-2); } .pg-sec{ margin-top:38px; } .pg-sec > h2{ font-size:20px; font-weight:700; color:var(--cb-ink); margin-bottom:12px; } .pg-prose{ max-width:72ch; font-size:16px; line-height:24px; color:var(--cb-ink); } .pg-prose p + p{ margin-top:13px; } .pg-prose ul{ margin:12px 0 0; padding-left:1.1rem; list-style:disc; } .pg-prose li + li{ margin-top:9px; } .pg-prose h3{ margin:24px 0 8px; font-size:16px; font-weight:700; color:var(--cb-white); } .pg-prose a{ color:var(--cb-green); text-decoration:underline; } /* card grids */ .cb-cards{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--cb-line); border:1px solid var(--cb-line); border-radius:6px; overflow:hidden; } @media(min-width:700px){ .cb-cards--2{ grid-template-columns:1fr 1fr; } } @media(min-width:760px){ .cb-cards--3{ grid-template-columns:repeat(3,1fr); } } @media(min-width:700px){ .cb-cards--4{ grid-template-columns:1fr 1fr; } } @media(min-width:1080px){ .cb-cards--4{ grid-template-columns:repeat(4,1fr); } } .cb-cards > div{ background:var(--cb-bg); padding:20px; } .cb-cards i{ display:block; font-style:normal; margin-bottom:8px; font-size:13px; font-weight:700; color:var(--cb-green); } .cb-cards b{ display:block; font-size:15px; color:var(--cb-ink); } .cb-cards span{ display:block; margin-top:6px; font-size:14px; line-height:20px; color:var(--cb-ink-2); } /* key/value table, same furniture as the lot page's quick facts */ .cb-dl{ padding:0 11px; border:1px solid var(--cb-line); border-radius:6px; } .cb-dl dl{ margin:0; display:grid; grid-template-columns:130px 1fr; } @media(min-width:769px){ .cb-dl dl{ grid-template-columns:150px 1fr; } } .cb-dl dt{ padding:12px 7px 10px 0; font-weight:600; font-size:15px; line-height:20px; border-bottom:1px solid var(--cb-line); } .cb-dl dd{ margin:0; padding:12px 7px 10px .5rem; font-size:15px; line-height:20px; border-bottom:1px solid var(--cb-line); overflow-wrap:anywhere; } .cb-dl dt:last-of-type,.cb-dl dd:last-of-type{ border-bottom:0; } /* forms */ .cb-form{ padding:22px; border:1px solid var(--cb-line); border-radius:6px; background:var(--cb-block-2); } .cb-form h2{ font-size:19px; font-weight:700; color:var(--cb-white); } .cb-form > p{ margin-top:6px; font-size:14px; line-height:20px; color:var(--cb-ink-2); } .cb-row{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:16px; } @media(min-width:620px){ .cb-row--2{ grid-template-columns:1fr 1fr; } } .cb-form textarea{ min-height:120px; resize:vertical; } .cb-form .cb-btn{ margin-top:18px; } .cb-err{ margin-top:6px; font-size:13px; color:var(--cb-red); } .cb-note{ margin-top:12px; font-size:13px; line-height:19px; color:var(--cb-ink-3); } /* auth pages sit in a narrow centred column */ .cb-auth{ max-width:440px; margin:44px auto 0; } .cb-auth h1{ font-size:26px; font-weight:700; color:var(--cb-white); text-align:center; } .cb-auth > p{ margin:8px 0 22px; font-size:15px; line-height:21px; color:var(--cb-ink-2); text-align:center; } .cb-auth .cb-form{ padding:24px; } .cb-auth .cb-btn{ width:100%; } .cb-alt{ margin-top:18px; text-align:center; font-size:14px; color:var(--cb-ink-2); } .cb-alt a{ color:var(--cb-green); font-weight:600; } .cb-alt a:hover{ text-decoration:underline; } .cb-check{ display:flex; align-items:flex-start; gap:9px; margin-top:14px; font-size:14px; line-height:20px; color:var(--cb-ink-2); cursor:pointer; } .cb-check input{ width:auto; margin-top:2px; accent-color:var(--cb-green); } /* ── announcement strip ───────────────────────────────────────────────── */ .marquee-bar{ overflow:hidden; background:var(--cb-block); border-bottom:1px solid var(--cb-line); } .marquee-track{ display:flex; gap:0; width:max-content; padding:7px 0; animation:cb-marquee 32s linear infinite; } .marquee-item{ display:inline-flex; align-items:center; gap:14px; padding-right:14px; font-size:13px; color:var(--cb-ink-2); white-space:nowrap; } .marquee-sep{ width:4px; height:4px; border-radius:50%; background:var(--cb-green); flex:none; } @keyframes cb-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media(prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } } .cb-flash .info{ background:rgba(92,161,255,.12); border:1px solid rgba(92,161,255,.35); color:var(--cb-blue); } /* the live-lots pill in the header */ .bnav-live{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:20px; background:rgba(74,212,147,.14); font-size:12px; font-weight:700; color:var(--cb-green); } .bnav-live b{ font-weight:800; } /* ── reviews strip + trust badges ─────────────────────────────────────── */ .cb-strip{ margin-top:56px; padding:34px 0; border-top:1px solid var(--cb-line); } .cb-strip__h{ margin:0 0 16px; font-size:20px; font-weight:700; color:var(--cb-ink); } .cb-revs{ display:grid; grid-template-columns:1fr; gap:14px; } @media(min-width:760px){ .cb-revs{ grid-template-columns:repeat(3,1fr); } } .cb-rev{ padding:18px; border:1px solid var(--cb-line); border-radius:6px; background:var(--cb-block-2); } .cb-rev__s{ display:flex; gap:2px; margin-bottom:9px; color:var(--cb-yellow); font-size:14px; } .cb-rev__t{ font-size:15px; line-height:22px; color:var(--cb-ink); } .cb-rev__w{ margin-top:11px; font-size:13px; color:var(--cb-ink-3); } .cb-badges{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:26px; } .cb-badges img{ height:44px; width:auto; opacity:.75; } .cb-badges img:hover{ opacity:1; } /* ── pending-approval banner ─────────────────────────────────────────── */ .cb-pending{ background:rgba(255,229,95,.1); border-bottom:1px solid rgba(255,229,95,.3); } .cb-pending .shell{ padding-top:10px; padding-bottom:10px; font-size:13.5px; line-height:20px; color:var(--cb-yellow); } .cb-pending strong{ color:var(--cb-white); font-weight:700; } /* ── contact modal (Call / Message / Email) ──────────────────────────── */ .cb-cmodal{ position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.72); } .cb-cmodal__s{ width:min(400px,100%); overflow:hidden; border-radius:8px; background:var(--cb-bg); border:1px solid var(--cb-line); } .cb-cmodal__h{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--cb-line); } .cb-cmodal__h h3{ margin:0; font-size:17px; font-weight:700; color:var(--cb-white); } .cb-cmodal__h button{ margin-left:auto; background:none; border:0; padding:5px; cursor:pointer; color:var(--cb-ink-3); } .cb-cmodal__h button:hover{ color:var(--cb-white); } .cb-cmodal__h svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } .cb-cmodal__b{ padding:14px; display:flex; flex-direction:column; gap:9px; } .cb-cmodal__a{ display:flex; align-items:center; gap:13px; width:100%; padding:13px 14px; text-align:left; border:1px solid var(--cb-line); border-radius:6px; background:var(--cb-block-2); color:var(--cb-ink); font-family:inherit; cursor:pointer; } .cb-cmodal__a:hover{ border-color:var(--cb-green); } .cb-cmodal__a .ic{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:6px; background:rgba(74,212,147,.14); color:var(--cb-green); } .cb-cmodal__a .ic svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .cb-cmodal__a .tx{ min-width:0; } .cb-cmodal__a b{ display:block; font-size:15px; font-weight:600; color:var(--cb-white); } .cb-cmodal__a i{ display:block; margin-top:2px; font-style:normal; font-size:13px; color:var(--cb-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ══════════════════════════════════════════════════════════════════════ app.css override layer. app.css is the original LIGHT theme and it is still loaded for the admin and for legacy components. Two things in it break a dark page: 1. its tokens are light (--surface-raise:#f3f4f6, --ink:#14171c) 2. it forces the focus background with !important: input:focus { background-color: var(--surface-raise) !important; } So the moment you click into a field the background flipped to near-white while the text stayed light grey — white on white. Repointing the tokens fixes every component that reads them; the !important rules below make the fields immune regardless of load order. ══════════════════════════════════════════════════════════════════════ */ :root{ --paper: var(--cb-bg); --paper-deep: var(--cb-block-2); --bg: var(--cb-bg); --bg-soft: var(--cb-block-2); --surface: var(--cb-block-2); --surface-raise:var(--cb-block-2); --ink: var(--cb-ink); --ink-soft: var(--cb-ink-2); --ink-mute: var(--cb-ink-2); --ink-faint: var(--cb-ink-3); --border: var(--cb-line); --border-soft: var(--cb-line); --border-dark: var(--cb-outline); --brand: var(--cb-green); --gold-soft: rgba(74,212,147,.18); } /* Fields keep the dark surface through every state, including autofill. */ body input:not([type=checkbox]):not([type=radio]):not([type=file]), body select, body textarea{ background:var(--cb-block-2) !important; background-color:var(--cb-block-2) !important; color:var(--cb-ink) !important; -webkit-text-fill-color:var(--cb-ink) !important; border-color:var(--cb-line); caret-color:var(--cb-green); } body input:focus,body select:focus,body textarea:focus{ background:var(--cb-block-2) !important; background-color:var(--cb-block-2) !important; color:var(--cb-ink) !important; -webkit-text-fill-color:var(--cb-ink) !important; border-color:var(--cb-green) !important; outline:none; box-shadow:0 0 0 3px rgba(74,212,147,.18) !important; } body input::placeholder,body textarea::placeholder{ color:var(--cb-ink-3) !important; -webkit-text-fill-color:var(--cb-ink-3) !important; } /* Options render from the OS list, which ignores the parent's colours. */ body select option{ background:var(--cb-block-2); color:var(--cb-ink); }