/* ============================================================
I SMART QR — "THE MACHINE" DESIGN SYSTEM
Loaded AFTER assets/site.css and overrides it at the token
layer, so all 50 existing pages pick the new look up without
their markup changing. site.css stays intact: pulling this one
reverts the whole site.
Palette measured, not eyeballed (on --ink #07080C):
white 20.0:1 --fog #8C94A6 6.6:1
--g 11.6:1 --r #FF4438 5.9:1
--b 5.9:1 readout #B9C2D3 11.2:1
On the white label card, --b is 3.4:1 — fills and large type
only. Body text and links there use --b-ink #2B62D6 (5.5:1).
============================================================ */
:root{
/* dark stack */
--ink:#07080C; --ink2:#0D1017; --ink3:#121724;
--edge:#1B2030; /* hairlines, decorative — 1.2:1, never a control boundary */
--edge-ui:#5A6782; /* control boundaries. Measured, not guessed: 3.52:1 on
--ink, 3.35:1 on --ink2, 3.15:1 on --ink3, so a
control keeps a visible edge on every dark surface.
The first value here was #3A465F at 2.12:1. */
--fog:#8C94A6;
/* light stack, used by the label card and light sections */
--paper:#F4F6FA; --card:#FFF; --line:#DFE4ED; --slate:#49536A;
/* the camera channels: red, green, blue */
--r:#FF4438; --g:#28E08A; --b:#4C86FF;
--b-ink:#2B62D6; /* the blue that is legible as text on white */
--disp:"Bricolage Grotesque",system-ui,sans-serif;
--body:"Inter Tight",system-ui,sans-serif;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
/* remap the tokens the existing 50 pages already consume, so they
inherit this system without a single markup change */
--bg:var(--ink); --surface:var(--ink2); --surface-2:var(--ink3);
--text:#FFFFFF; --text-muted:var(--fog); --border:var(--edge);
--accent:var(--b); --highlight:var(--g);
--on-dark:#E7EBF3; --on-dark-muted:var(--fog);
--display:var(--disp); --fd:var(--disp);
--body-font:var(--body); --fb:var(--body);
--mono-font:var(--mono); --fm:var(--mono);
--radius:14px; --r-sm:10px;
color-scheme:dark;
}
html{color-scheme:dark}
body{
background:var(--ink); color:#fff;
font-family:var(--body); font-size:16px; line-height:1.55;
-webkit-font-smoothing:antialiased;
}
/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--disp); font-weight:800; letter-spacing:-.035em; line-height:.92; color:#fff}
h1{font-size:clamp(2.2rem,1.2rem + 4.4vw,5.2rem); line-height:.9; overflow-wrap:break-word}
h2{font-size:clamp(1.75rem,1.1rem + 2.6vw,3.1rem)}
h3{font-size:clamp(1.1rem,1rem + .6vw,1.45rem); letter-spacing:-.02em}
/* The outlined second line is the signature. It is decoration on top of
real text, so the text itself is never hidden from a screen reader and
never disappears in forced-colors mode. */
h1 em,.outline{font-style:normal; display:block; color:transparent;
-webkit-text-stroke:1.5px #fff; paint-order:stroke fill}
@media (forced-colors:active){
h1 em,.outline{color:CanvasText; -webkit-text-stroke:0}
}
p{color:var(--fog)}
.lead,.sub{color:#C3CAD8; font-size:1.05rem}
/* ── the pill ─────────────────────────────────────────────── */
.pill,.eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-family:var(--body); font-size:.79rem; font-weight:500; letter-spacing:0;
text-transform:none; color:var(--fog);
border:1px solid var(--edge-ui); border-radius:999px;
padding:8px 15px; background:rgba(13,16,23,.72);
}
.pill i{width:7px; height:7px; border-radius:2px; display:block}
/* ── sections ─────────────────────────────────────────────── */
.section{background:var(--ink)}
.section--alt{background:var(--ink2); border-block:1px solid var(--edge)}
.section.section--dark{background:#04050A; color:#fff}
.section--light{background:var(--paper); color:#0A0D12}
.section--light h1,.section--light h2,.section--light h3{color:#0A0D12}
.section--light p{color:var(--slate)}
/* ── cards ────────────────────────────────────────────────── */
.card{
background:var(--ink2); border:1px solid var(--edge);
border-radius:16px; color:#fff;
}
.card h3{color:#fff}
.card p{color:var(--fog)}
/* ── buttons ──────────────────────────────────────────────── */
.btn,.big,.ghost,.cta{
font-family:var(--body); font-weight:600; letter-spacing:-.005em;
border-radius:999px; min-height:44px;
display:inline-flex; align-items:center; justify-content:center;
padding:12px 26px; cursor:pointer; border:1px solid transparent;
transition:background .16s, color .16s, border-color .16s;
}
.btn--primary,.big,.cta{background:#fff; color:#07080C; border-color:#fff}
.btn--primary:hover,.big:hover,.cta:hover{background:var(--g); border-color:var(--g); color:#04140C}
.btn--ghost,.ghost{background:transparent; color:#fff; border-color:var(--edge-ui)}
.btn--ghost:hover,.ghost:hover{background:var(--ink3); border-color:var(--fog)}
/* ── focus: one visible ring everywhere ───────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline:3px solid var(--g); outline-offset:2px; border-radius:6px;
}
/* ── the readout: the machine's voice ─────────────────────── */
.readout{
border:1px solid var(--edge); border-radius:16px; background:var(--ink2);
padding:15px 17px; font-family:var(--mono); font-size:.78rem; color:#B9C2D3;
}
.readout dl{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:0}
.readout dt{color:#7E8899} .readout dd{margin:0; color:#DCE3EF; overflow-wrap:anywhere}
/* ============================================================
THE LABEL — the white card the code lives on.
Named for a printed label, which is what it is: the one light
object on a dark page, the way a label sits on a dark package.
============================================================ */
.label{
background:var(--card); color:#0A0D12;
border-radius:22px; padding:22px;
display:grid; gap:14px;
}
.label h1,.label h2,.label h3{color:#0A0D12}
.label p{color:var(--slate)}
.label a{color:var(--b-ink)}
.label .code{display:block}
.label .code svg{width:100%; height:auto; display:block; border-radius:10px}
/* contrast verdict strip */
.label .meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
font-family:var(--mono); font-size:.78rem; color:var(--slate)}
.label .ratio{font-weight:600; color:#0A0D12; font-size:.9rem}
.label .verdict{border-radius:999px; padding:5px 11px; font-weight:600; font-size:.74rem}
.label .verdict[data-v="good"]{background:#D8F7E7; color:#06492C} /* 7.9:1 */
.label .verdict[data-v="ok"] {background:#FFF0CC; color:#5A4100} /* 8.1:1 */
.label .verdict[data-v="bad"] {background:#FFE0DC; color:#8A1409} /* 7.6:1 */
.label .meta small{margin-left:auto; color:var(--slate)}
/* ============================================================
THE GENERATOR WIDGET
QRcdr ships Bootstrap markup. Rather than rewrite the PHP, the
rules below retheme the classes it already emits. Nothing here
changes behaviour - no display:none on anything the script
reads, no renamed hooks.
============================================================ */
/* tab pills -> the machine's chip row */
.nav-pills{gap:8px; border:0}
.nav-pills .nav-link{
font-family:var(--body); font-weight:500; font-size:.88rem;
color:var(--fog); background:var(--ink2);
border:1px solid var(--edge-ui); border-radius:999px;
padding:11px 18px; min-height:44px;
display:inline-flex; align-items:center; gap:8px;
transition:color .15s, background .15s, border-color .15s;
}
.nav-pills .nav-link:hover{color:#fff; background:var(--ink3); border-color:var(--fog)}
.nav-pills .nav-link.active{background:#fff; color:#07080C; border-color:#fff}
.nav-pills .nav-link i{opacity:.85}
/* the form side */
.tab-content{
background:var(--ink2); border:1px solid var(--edge);
border-radius:18px; padding:clamp(16px,2.2vw,26px); margin-top:18px;
}
.tab-content label,.qrcdr-form label{color:#D7DCE6; font-weight:500; font-size:.9rem}
.form-control,.form-select,
.qrcdr-form input[type=text],.qrcdr-form input[type=url],
.qrcdr-form input[type=email],.qrcdr-form input[type=tel],
.qrcdr-form input[type=number],.qrcdr-form input[type=date],
.qrcdr-form input[type=password],.qrcdr-form textarea,.qrcdr-form select{
background:var(--ink); color:#fff;
border:1px solid var(--edge-ui); border-radius:12px;
min-height:46px; padding:11px 14px;
font-family:var(--body); font-size:.95rem;
}
.form-control::placeholder,.qrcdr-form input::placeholder{color:#6B7488}
.form-control:focus,.qrcdr-form input:focus,.qrcdr-form textarea:focus,.qrcdr-form select:focus{
border-color:var(--g); box-shadow:none; background:var(--ink); color:#fff;
}
/* native controls inherit the accent rather than being rebuilt */
.qrcdr-form{accent-color:var(--g)}
/* collapsible option groups (COLORS / DESIGN / LOGO / FRAME / OPTIONS) */
.card-header,.accordion-button,.panel-heading{
background:var(--ink3); color:#fff; border:0;
font-family:var(--disp); font-weight:600; letter-spacing:-.01em;
}
.accordion-button:not(.collapsed){background:var(--ink3); color:#fff; box-shadow:none}
.accordion-item{background:transparent; border:1px solid var(--edge); border-radius:14px; overflow:hidden}
.accordion-body{background:var(--ink2)}
/* the result side becomes the label */
.placeresult{
background:var(--card); color:#0A0D12;
border:0; border-radius:22px; padding:22px;
}
.placeresult .resultholder{background:#fff; border-radius:12px}
.placeresult .resultholder svg,.placeresult .resultholder img{
width:100%; height:auto; display:block; border-radius:10px;
}
.placeresult label,.placeresult .form-group label{color:var(--slate)}
/* download buttons: a quiet row of four, not four shouting cards */
.placeresult .btn,.wrapresult .btn,
a[class*="download"],button[class*="download"]{
background:var(--paper); color:#0A0D12; border:1px solid var(--line);
border-radius:12px; font-weight:600; min-height:44px;
}
.placeresult .btn:hover,.wrapresult .btn:hover{background:#E6EBF5; border-color:#C4CCDA}
.generate_qrcode{
background:#07080C!important; color:#fff!important; border:0!important;
border-radius:999px!important; min-height:50px; font-family:var(--body);
font-weight:600; letter-spacing:-.005em;
}
.generate_qrcode:hover{background:var(--g)!important; color:#04140C!important}
/* ── header / footer ──────────────────────────────────────── */
.site-header,.top,header.site-header{
background:rgba(7,8,12,.86); backdrop-filter:blur(14px);
border-bottom:1px solid var(--edge);
}
.site-footer,.foot{background:#04050A; border-top:1px solid var(--edge); color:#fff}
.site-footer a,.foot a{color:#C3CAD8}
.site-footer a:hover,.foot a:hover{color:#fff}
.site-footer h3,.foot h3{color:#fff}
/* ── the drifting module field behind the hero ────────────────
Decorative only. It is aria-hidden, it is the one piece of
non-user-triggered motion on the page, and it stops entirely
for anyone who asks for reduced motion. */
.hero{position:relative; overflow:hidden; background:var(--ink)}
.hero .field{position:absolute; inset:-7%; opacity:.3; pointer-events:none}
.hero .wrap{position:relative; z-index:1}
@media (prefers-reduced-motion:reduce){
.hero .field{animation:none!important; transform:none!important}
*,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
/* ── print: the one place the dark page must not follow ───── */
@media print{
body,.section,.hero{background:#fff!important; color:#000!important}
h1,h2,h3{color:#000!important}
h1 em,.outline{color:#000!important; -webkit-text-stroke:0}
.hero .field,.site-footer,.nav-pills{display:none!important}
}
/* ============================================================
CORRECTIONS — found by compositing the real background stack
on ten pages after the token swap, not by eyeballing.
The big one: site.css:397 carries
.btn--primary,.btn--primary:hover{color:#fff!important}
left over from the earlier contrast remediation. Against the
machine's white primary button that is white-on-white, 1:1.
Beaten here with a higher-specificity !important rather than by
editing site.css, so removing the machine.css still
reverts the whole site in one move.
============================================================ */
.btn.btn--primary,.btn.btn--primary:hover,
a.btn.btn--primary,button.btn.btn--primary{
background:#fff!important; color:#07080C!important; border-color:#fff!important;
}
.btn.btn--primary:hover,a.btn.btn--primary:hover,button.btn.btn--primary:hover{
background:var(--g)!important; color:#04140C!important; border-color:var(--g)!important;
}
.btn.btn--primary::after{display:none} /* the sheen sweep reads as a glitch on a flat white pill */
/* the skip link and the back-to-top button both sat on --accent,
which is now a mid blue: white on it is 2.9:1 */
.skip{background:#07080C; color:#fff; border:1px solid var(--edge-ui)}
.to-top{background:var(--ink2); color:#fff; border:1px solid var(--edge-ui)}
.to-top span,.to-top svg{color:#fff}
.a11y-fab{background:var(--ink2); color:#fff; border:1px solid var(--edge-ui)}
/* Bootstrap's own components never saw the token layer */
.btn-primary,.btn-primary:hover,.btn-primary:focus{
background-color:#07080C; border-color:var(--edge-ui); color:#fff;
}
.btn-primary:hover{background-color:var(--ink3)}
.bg-light,.bg-info,.bg-white,.alert,.alert-info,.toast,.toast-body,.toast-header{
background-color:var(--ink2)!important; color:#D7DCE6!important; border-color:var(--edge)!important;
}
.bg-info p,.alert p,.alert-info{color:#D7DCE6!important}
.text-muted{color:var(--fog)!important}
.close,.btn-close{filter:invert(1) grayscale(1) brightness(1.6)}
/* tab labels: the 9px mobile caption was white on a light pill */
.nav-pills .nav-link span{color:inherit}
/* ── the generator's own stylesheet ───────────────────────────
css/unify.css scopes its button and tab rules to body.qrcdr with
!important, specificity (0,2,1). Matching that prefix from a sheet
that loads after it is what wins; a bare .btn-primary here does
not, whatever the order.
(unify.css also reads --accent, which this file remaps to the blue
--b. White on --b is 3.4:1, which is how SAVE and the active tab
ended up failing after the token swap.) */
body.qrcdr .btn-primary,body.qrcdr .generate_qrcode,
body.qrcdr .btn-primary:focus,body.qrcdr .generate_qrcode:focus{
background:#07080C!important; border-color:var(--edge-ui)!important; color:#fff!important;
font-family:var(--body)!important; font-weight:600!important;
text-transform:none!important; letter-spacing:-.005em!important;
}
body.qrcdr .generate_qrcode{border-radius:999px!important; min-height:50px}
body.qrcdr .btn-primary:hover,body.qrcdr .generate_qrcode:hover{
background:var(--g)!important; border-color:var(--g)!important; color:#04140C!important;
}
/* the active tab was white text on --b (3.4:1); make it the white pill
the rest of the system uses */
body.qrcdr .nav-pills .nav-link.active,
body.qrcdr .nav-pills .nav-link.active:hover{
background:#fff!important; color:#07080C!important; border-color:#fff!important;
}
body.qrcdr .nav-pills .nav-link.active span,
body.qrcdr .nav-pills .nav-link.active i{color:#07080C!important}
/* ── fixes found by looking at the rendered generator ─────────
The text-contrast sweep passed all of these: white on #07080C is
20:1. What it cannot see is WCAG 1.4.11 - a control needs 3:1
against what surrounds it, and a near-black button on a near-black
panel has no boundary at all. Save is the page's primary action,
so it takes the system's primary treatment: a white pill. */
body.qrcdr .generate_qrcode,
body.qrcdr .generate_qrcode:focus{
background:#FFFFFF!important; color:#07080C!important; border:0!important;
}
body.qrcdr .generate_qrcode:hover{background:var(--g)!important; color:#04140C!important}
/* the result column IS the label - one white object on a dark page */
body.qrcdr .placeresult,
body.qrcdr .col-lg-4 .placeresult{
background:#FFFFFF!important; color:#0A0D12!important;
border:0!important; border-radius:22px!important; padding:20px!important;
}
body.qrcdr .placeresult *{border-color:var(--line)}
body.qrcdr .placeresult label,
body.qrcdr .placeresult .form-group label,
body.qrcdr .placeresult small{color:var(--slate)!important}
body.qrcdr .placeresult .resultholder{background:#fff!important; border-radius:12px}
/* QRcdr's own red "Important Note" heading, restyled as the warning it is */
body.qrcdr .placeresult h4,
body.qrcdr .placeresult .text-danger,
body.qrcdr p.bg-info{
font-family:var(--body)!important; font-size:.84rem!important; font-weight:500!important;
line-height:1.45!important; text-align:left!important;
background:#FFF6E0!important; color:#4A3500!important;
border:1px solid #F0D79A!important; border-radius:12px!important;
padding:11px 14px!important; margin-top:12px!important;
}
/* the download row sits on the white label, so it needs light-surface
buttons with a visible 3:1 edge rather than the dark ones */
body.qrcdr .placeresult .btn:not(.generate_qrcode){
background:#F4F6FA!important; color:#0A0D12!important;
border:1px solid #C4CCDA!important; border-radius:12px!important;
min-height:44px; font-weight:600;
}
body.qrcdr .placeresult .btn:not(.generate_qrcode):hover{
background:#E6EBF5!important; border-color:#9AA6BA!important;
}
/* ── 1.4.11: bind the visible edge to every control ──────────
site.css and unify.css draw control borders from --border, which
this file maps to --edge (1.24:1) because --border also draws
section dividers, where a bright line would be wrong. Controls get
the edge explicitly instead of brightening every divider on the site.
Disabled controls are exempt from 1.4.11 and are left alone. */
body.qrcdr .form-control,body.qrcdr .form-select,
.tab-content input,.tab-content select,.tab-content textarea,
input.form-control,select.form-select,textarea.form-control,
.theme-toggle,.to-top,.a11y-fab,
.btn-outline-primary,.btn-outline-secondary,
.btn--ghost,.ghost,.nav-pills .nav-link:not(.active){
border:1px solid var(--edge-ui)!important;
}
.btn-outline-primary,.btn-outline-secondary{
background:var(--ink2)!important; color:#fff!important;
}
.btn-outline-primary:hover,.btn-outline-secondary:hover{
background:var(--ink3)!important; color:#fff!important; border-color:var(--fog)!important;
}
/* on the white label the edge has to go the other way */
body.qrcdr .placeresult .form-control,
body.qrcdr .placeresult input,
body.qrcdr .placeresult select{
border:1px solid #9AA6BA!important; background:#fff!important; color:#0A0D12!important;
}
/* unify.css scopes the accordion buttons to body.qrcdr, so an unprefixed
rule here loses on specificity however many !importants it carries. */
body.qrcdr .btn-outline-primary,body.qrcdr .btn-outline-secondary{
border:1px solid var(--edge-ui)!important;
background:var(--ink2)!important; color:#fff!important;
}
body.qrcdr .btn-outline-primary:hover,body.qrcdr .btn-outline-secondary:hover{
background:var(--ink3)!important; border-color:var(--fog)!important;
}
/* the blog carousel arrows were the last pair with an invisible edge */
.bs-arrow,.bs-arrow.prev,.bs-arrow.next{
background:var(--ink2); border:1px solid var(--edge-ui); color:#fff;
}
.bs-arrow:hover{background:var(--ink3); border-color:var(--fog)}
/* unify.css line 26 uses body.qrcdr .accordion .btn-outline-primary,
specificity (0,3,1). Match it exactly or lose. */
body.qrcdr .accordion .btn-outline-primary,body.qrcdr .accordion .btn{
background:var(--ink2)!important; border:1px solid var(--edge-ui)!important;
color:#fff!important; font-family:var(--disp)!important;
text-transform:none!important; letter-spacing:-.01em!important;
border-radius:12px!important;
}
body.qrcdr .accordion .btn-outline-primary:hover,body.qrcdr .accordion .btn:hover{
background:var(--ink3)!important; border-color:var(--fog)!important;
}
/* inactive carousel dots sat at --edge, 1.24:1 — the control the viewer
is meant to click was the one they could not see. The active dot
stays white and wider, so state is carried by size as well as tone. */
.bs-dots button{background:var(--edge-ui)}
.bs-dots button.on,.bs-dots button[aria-selected="true"]{background:#fff}
/* #malink kept unify.css's --border edge (1.24:1) despite an equal-
specificity !important later in the cascade. Rather than keep
bisecting the cascade, this settles it: html body.qrcdr is (0,2,2),
one element step above unify's (0,2,1), so it wins outright. */
html body.qrcdr .form-control,
html body.qrcdr input[type="text"],
html body.qrcdr input[type="url"],
html body.qrcdr input[type="email"],
html body.qrcdr input[type="tel"],
html body.qrcdr input[type="number"],
html body.qrcdr textarea,
html body.qrcdr select,
html body.qrcdr .form-select{
border:1px solid var(--edge-ui)!important;
}
html body.qrcdr .placeresult .form-control,
html body.qrcdr .placeresult input,
html body.qrcdr .placeresult select{
border:1px solid #9AA6BA!important;
}
/* QRcdr dims its disabled Save button to opacity .2, which leaves the
word unreadable — the viewer cannot tell what the control would do.
WCAG exempts inactive controls, so this is a usability call, not a
conformance one: still obviously inert, but legible. */
html body.qrcdr .generate_qrcode:disabled,
html body.qrcdr .generate_qrcode[disabled]{
opacity:.45!important; background:#C9CFDA!important; color:#2B3242!important;
cursor:not-allowed;
}
/* "Important Note" shipped as a 30px red in a .text-danger block.
It is advice about contrast, not an error, so it reads as the warning
panel the rest of the system uses. */
html body.qrcdr .text-danger{
display:block; background:#FFF6E0; color:#4A3500!important;
border:1px solid #F0D79A; border-left:3px solid #C98A00;
border-radius:12px; padding:12px 15px; margin:14px 0 0;
text-align:left; font-family:var(--body);
}
html body.qrcdr .text-danger b,
html body.qrcdr .text-danger strong{
display:block; font-size:.9rem!important; font-weight:700;
color:#4A3500!important; margin-bottom:3px;
}
html body.qrcdr .text-danger p,
html body.qrcdr .text-center .text-danger ~ p{color:#4A3500!important; font-size:.85rem}
/* ============================================================
THE HERO — ported from the concept rather than approximated.
What was missing before: the bokeh module field, the three-point
ambient glow, sentence-case display type, and a label that holds
working controls instead of a paragraph.
============================================================ */
/* site.css uppercases every heading. The system's display face is set
in sentence case - "Open the machine", not "OPEN THE MACHINE" - and
the uppercase transform is most of why the retheme read as the old
site in new colours. */
h1,h2,h3,h4,.hero h1,.section h2,.sec-head h2{text-transform:none!important}
.hero{position:relative; overflow:hidden; background:var(--ink); isolation:isolate}
.hero .field{position:absolute; inset:-7%; opacity:.3; pointer-events:none; z-index:0}
.hero .field img{width:100%; height:100%; object-fit:cover; display:block}
.hero .glow{position:absolute; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(60% 46% at 16% 14%, rgba(255,68,56,.17), transparent 70%),
radial-gradient(54% 44% at 86% 26%, rgba(76,134,255,.20), transparent 70%),
radial-gradient(46% 40% at 52% 96%, rgba(40,224,138,.13), transparent 70%);
}
/* the old wireframe grid belonged to the previous design */
.hero .hero-grid,.hero .aurora,.hero .gridlines{display:none!important}
.hero-two{position:relative; z-index:1;
display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,56px);
align-items:center; padding-block:clamp(44px,7vw,104px)}
.hero-two h1{margin:22px 0 0; max-width:11ch; letter-spacing:-.035em; line-height:.9}
.hero-two .sub{color:var(--fog); font-size:clamp(1rem,1.25vw,1.12rem);
max-width:46ch; margin-top:20px}
.hero-two .row{display:flex; flex-wrap:wrap; gap:11px; margin-top:28px}
/* the label, with its controls */
.hero-label{max-width:420px; width:100%; justify-self:end;
border-radius:26px; padding:19px; background:var(--card); color:#0A0D12;
box-shadow:0 34px 90px rgba(0,0,0,.6)}
.hero-label .code img{width:100%; height:auto; display:block; border-radius:14px}
.hero-label .meta{display:flex; align-items:center; gap:9px; margin-top:14px; flex-wrap:wrap}
.hero-label .ratio{font-family:var(--disp); font-weight:800; font-size:1.02rem;
color:#07080C; letter-spacing:-.03em}
.hero-label .meta small{margin-left:auto; color:#5E6779; font-size:.72rem}
.hero-label .verdict{font-size:.76rem; font-weight:600; border-radius:999px; padding:5px 11px}
.hero-label .verdict[data-v="good"]{background:#D8F7E7; color:#06492C}
.ctrl{display:flex; gap:7px; margin-top:12px; align-items:center}
.inp{flex:1; min-width:0; display:flex; gap:8px; align-items:center;
background:var(--paper); border:1px solid #C4CCDA; border-radius:999px; padding:10px 15px}
.inp:focus-within{box-shadow:0 0 0 2px var(--b-ink)}
.inp b{color:#4A5466; font-size:.7rem; font-weight:700; letter-spacing:.02em}
.inp input{flex:1; min-width:0; background:none; border:0; color:#07080C;
font:500 .88rem/1.2 var(--body); min-height:24px}
.inp input:focus{outline:none}
.heroGo{background:#07080C!important; color:#fff!important; border:0!important;
border-radius:999px!important; padding:12px 20px!important; min-height:44px;
font:600 .9rem/1 var(--body)!important}
.heroGo:hover{background:var(--b-ink)!important; color:#fff!important}
@media(max-width:900px){
.hero-two{grid-template-columns:1fr; gap:30px; padding-block:26px 44px}
.hero-two h1{max-width:none}
.hero-label{justify-self:stretch; max-width:none}
}
/* ── the kinds ticker ─────────────────────────────────────── */
.tick{background:var(--ink2); border-block:1px solid var(--edge);
overflow:hidden; padding:13px 0}
.tick-run{display:flex; gap:38px; width:max-content;
animation:tickrun 46s linear infinite}
.tick-run span{display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
color:#C3CAD8; font-size:.86rem; font-weight:500}
.tick-run i{width:7px; height:7px; border-radius:2px; display:block; flex:none}
@keyframes tickrun{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.tick-run{animation:none; flex-wrap:wrap; width:auto; gap:18px 26px; padding-inline:var(--gut,24px)}
}
/* unify.css uppercases headings at body.qrcdr h1 (0,2,1) !important —
an unprefixed rule cannot reach it. The display face is designed for
sentence case and the uppercase transform was most of why the
retheme still read as the old site. */
html body.qrcdr h1,html body.qrcdr h2,html body.qrcdr h3,html body.qrcdr h4,
html body.qrcdr .sec-head h2,html body.qrcdr .hero h1{text-transform:none!important}
/* the hero buttons were stretching to the full column */
.hero-two .row .big,.hero-two .row .ghost{
flex:0 0 auto; width:auto; display:inline-flex; align-items:center;
justify-content:center; padding:15px 27px; border-radius:999px;
font:600 .96rem/1 var(--body); text-decoration:none; min-height:48px;
}
.hero-two .row .big{background:#fff; color:#07080C; border:0}
.hero-two .row .big:hover{background:var(--g); color:#04140C}
.hero-two .row .ghost{background:transparent; color:#fff; border:1px solid var(--edge-ui)}
.hero-two .row .ghost:hover{border-color:#fff}
/* the URL field is a light pill; the generic dark input rule was
painting a second, darker box inside it */
html body.qrcdr .inp input[type="text"],
html body.qrcdr .inp input{
background:transparent!important; border:0!important; color:#07080C!important;
padding:0!important; min-height:24px!important; border-radius:0!important;
}
html body.qrcdr .inp input:focus{outline:none!important; box-shadow:none!important}