/* =======================================================================
okQRal — THEME.CSS
Master style sheet controlling UI variables, theming, and component look.
Author: Jacob Eugene Henderson
-----------------------------------------------------------------------
STRUCTURE OVERVIEW
-----------------------------------------------------------------------
1. CONTROL PANEL — BASE (dark mode default)
• Global design tokens and CSS variables (color, radii, density, motion)
• Defines reusable Material-inspired system values (md-sys-color-* etc.)
2. GLOBAL SCAFFOLD
• Body background gradients, theme grid overlay, layout padding
3. CARDS / SURFACES
• Card containers, elevation shadows, stepper highlights
4. CONTROLS
• Inputs, selects, buttons, and top-bar menu items
• Includes hover/focus, emoji picker, and color-chip definitions
5. PREVIEW LAYOUT
• QR preview area, SVG mount, transparent-frame styling
6. ARROWS
• Navigation arrows for QR subtype switching
7. FOOTER
• Fixed footer gradient bar and copyright text
8. THEME MODES
• :root.light, :root.hc, and reduced-motion overrides
9. UTILITIES / OVERRIDES (sandbox)
• Temporary tweaks, experimental features, or future controls
-----------------------------------------------------------------------
NOTES
-----------------------------------------------------------------------
• Variables follow Material Design token conventions where possible.
• All custom properties begin with `--md-sys-`, `--ui-`, or `--qr-` prefixes.
• JS can read certain variables via `getComputedStyle()` (e.g., --export-*).
• To add new features, prefer creating new tokens at the top-level :root.
• For experiments or nonstandard styling, append at the bottom section (9).
======================================================================= */
/* =========================
1. CONTROL PANEL — BASE (dark by default)
========================= */
/* Ensure both selector styles respond to the same classes */
html.dark { color-scheme: dark; }
html.light { color-scheme: light; }
/* Mirror tokens whether the class is on (html.light) or :root.light */
html.light, :root.light {
/* Light overrides — keep in sync with your existing :root.light values */
--md-sys-color-background: #fafafa;
--md-sys-color-on-background: #0b0b0b;
--md-sys-color-surface: #ffffff;
--md-sys-color-on-surface: #111;
--md-sys-color-surface-variant: #f1f1f6;
--md-sys-color-outline: rgba(110,90,210,.35);
--md-sys-color-outline-variant: rgba(110,90,210,.55);
--brand-s: 86%;
--brand-l: 54%;
--ui-surface: var(--md-sys-color-surface);
--ui-surface-variant: var(--md-sys-color-surface-variant);
--ui-stroke: var(--md-sys-color-outline);
--ui-stroke-hover: var(--md-sys-color-outline-variant);
--ui-focus-ring: var(--md-sys-color-primary);
--ui-glow-color: var(--md-sys-color-primary);
/*--edge-gutter: clamp(24px, 1.5vw, 24px);*/
--md-sys-color-on-primary: #ffffff;
}
:root{
/* ----- Brand / Accent (HSL-based) ----- */
--brand-h: 266;
--brand-s: 92%;
--brand-l: 66%;
--md-sys-color-primary: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
--md-sys-color-primary-hover: color-mix(in oklab, var(--md-sys-color-primary) 86%, white);
--md-sys-color-primary-pressed: color-mix(in oklab, var(--md-sys-color-primary) 80%, black);
--md-sys-color-on-primary: #0B0715;
/* Typography */
--font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
/* Display (section buttons: Caption, Design, Mechanicals, Finish) */
--typo-display-size: 1rem; /* 16px */
--typo-display-weight: 600; /* semibold */
--typo-display-track: .012em;
/* Labels (field names like “Module Fill”, “Background”) */
--typo-label-size: .9375rem; /* 15px */
--typo-label-weight: 300; /* medium */
--typo-label-track: .01em;
--typo-label-color: color-mix(in oklab, var(--md-sys-color-on-surface) 82%, transparent);
/* Inputs text (inside fields) */
--typo-input-size: .9375rem; /* 15px */
--typo-input-weight: 200;
/* Placeholder text (“dummy” text) */
--typo-ph-color: color-mix(in oklab, var(--md-sys-color-on-surface) 55%, transparent);
--typo-ph-weight: 200;
--typo-ph-opacity: .65;
/* Surfaces & text */
--md-sys-color-background: #050505;
--md-sys-color-on-background: #EAEAEA;
--md-sys-color-surface: #0E0A12; /* cards, panels */
--md-sys-color-on-surface: #EAEAEA;
--md-sys-color-surface-variant: #171421; /* inputs, chips */
--md-sys-color-muted: #a1a1aa;
/* Strokes */
--md-sys-color-outline: rgba(160,140,255,.35);
--md-sys-color-outline-variant: rgba(160,140,255,.55);
/* Elevation (shadows) */
--elevation-1: 0 4px 12px rgba(0,0,0,.35);
--elevation-2: 0 8px 24px rgba(0,0,0,.40);
--elevation-3: 0 12px 32px rgba(0,0,0,.45);
/* ----- Shape / Corner scale ----- */
--shape-corner-scale: 1;
--shape-corner-sm-base: 8px;
--shape-corner-md-base: 14px;
--shape-corner-lg-base: 20px;
--shape-corner-sm: calc(var(--shape-corner-sm-base) * var(--shape-corner-scale));
--shape-corner-md: calc(var(--shape-corner-md-base) * var(--shape-corner-scale));
--shape-corner-lg: calc(var(--shape-corner-lg-base) * var(--shape-corner-scale));
--shape-corner-full: 9999px;
/* Interaction */
--state-hover-opacity: .08;
--state-focus-opacity: .12;
--state-pressed-opacity: .12;
--focus-ring: rgba(56,189,248,.7);
/* Component aliases (single source of truth) */
--ui-surface: rgba(14,14,20,.92);
--ui-surface-variant:var(--md-sys-color-surface-variant);
--ui-stroke: var(--md-sys-color-outline);
--ui-stroke-hover: var(--md-sys-color-outline-variant);
/* QR frame (Transparent mode) */
--qr-stroke-color: rgba(139,92,246,.70);
--qr-stroke-width: 1;
--qr-stroke-glow: 0 0 18px rgba(139,92,246,.28);
/* ----- Density / Compact scale ----- */
--density-scale: 1;
--density-control-h-base: 2.25rem;
--density-gap-base: .75rem;
--density-control-h: calc(var(--density-control-h-base) * var(--density-scale));
--density-gap: calc(var(--density-gap-base) * var(--density-scale));
/* ----- Focus ring (consistent keyboard focus) ----- */
--focus-ring-width: 2px;
--focus-ring-color: color-mix(in oklab, var(--md-sys-color-primary) 35%, transparent);
/* ----- Motion scale (global speed) ----- */
--motion-scale: 1;
--motion-duration-1-base: 120ms;
--motion-duration-2-base: 180ms;
--motion-duration-1: calc(var(--motion-duration-1-base) * var(--motion-scale));
--motion-duration-2: calc(var(--motion-duration-2-base) * var(--motion-scale));
--motion-ease: cubic-bezier(.2,.6,.2,1);
/* ----- Export defaults (read by JS) ----- */
--export-png-scale: 3;
--export-filename: "LGBTQRCode";
/* ----- Grid overlay knobs (for theme scaffold) ----- */
--grid-size: 40px; /* size of grid squares */
--grid-opacity: .10; /* overall overlay opacity */
/* Hover / focus glow knobs */
--hover-glow-color: color-mix(in oklab, var(--md-sys-color-primary) 30%, transparent);
--hover-glow-blur: 8px; /* glow softness */
--focus-glow-blur: 10px; /* slightly stronger for focus */
/* Shared chevron for top controls */
--chev-icon: url("data:image/svg+xml;utf8,");
/* Phone radius... */
--phone-radius: 22px;
/* Arrows placement... */
--edge-gutter: clamp(24px, 2vw, 24px);
/* Footer height token */
--footer-h: 72px;
/* … existing vars … */
--stack-gap: 0rem; /* unify spacing rhythm */
/* ----- BG CARD STROKE (filled mode) ----- */
--bg-card-stroke-color: hsl(179, 100%, 38%); /* sharp turquoise */
--bg-card-stroke-width: 1px; /* tweak for subtlety */
--bg-card-stroke-glow: 0 0 10px rgba(0,240,200,.35); /* optional soft halo */
/* Featured / open card accent */
--featured-stroke-width: 1px; /* increase to 3–4px if you want chunkier */
--featured-stroke-color: color-mix(in oklab, var(--md-sys-color-primary) 45%, transparent);
--featured-stroke-glow: 0 0 12px rgba(160,140,255,.35);
--stepper-stroke-closed: hsl(221, 100%, 7%); /* custom color */
}
/* shared sticky offset */
.stage-stick {
position: sticky;
top: var(--header-h);
}
/* =========================
2. GLOBAL SCAFFOLD
========================= */
main {
margin-top: 2rem; /* or 24px */
}
body{
background: linear-gradient(
135deg,
var(--md-sys-color-background),
color-mix(in oklab, var(--md-sys-color-background) 85%, black)
);
color: var(--md-sys-color-on-background);
}
.theme-grid{ position:relative; }
.theme-grid::before{
content:""; position:fixed; inset:0; pointer-events:none; opacity: var(--grid-opacity);
background:
linear-gradient(to right, var(--md-sys-color-primary) 1px, transparent 1px),
linear-gradient(to bottom, var(--md-sys-color-primary) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
z-index:0;
}
.theme-grid>*{ position:relative; z-index:1; }
/* Make room for the fixed footer + a little air */
main { padding-bottom: calc(var(--footer-h) + var(--stack-gap));
}
/* =========================
3. CARDS / SURFACES
========================= */
.card{
background: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
border: 1px solid var(--ui-stroke);
border-radius: var(--shape-corner-lg);
box-shadow: var(--elevation-2);
}
.step-card{ overflow:hidden; } /* remove square border artifact on rounded cards */
/* Open card highlight */
#stepper>div{ transition:background-color .15s,border-color .15s; }
#stepper .step-header{ transition:background-color .15s,border-color .15s,color .15s; }
#stepper>div.is-open .step-header {
border-bottom: var(--featured-stroke-width) solid var(--featured-stroke-color);
background: color-mix(in oklab, var(--md-sys-color-primary) 12%, transparent);
}
#stepper>div.is-open {
border: var(--featured-stroke-width) solid var(--featured-stroke-color);
box-shadow: var(--featured-stroke-glow);
background: color-mix(in oklab, var(--md-sys-color-primary) 6%, transparent);
}
/* Mechanicals (open): unified stripe and no duplicate borders */
.step-card[data-step="mechanicals"].is-open .step-header-wrap {
background: color-mix(in oklab, var(--md-sys-color-primary) 12%, transparent);
border-bottom: 0 !important;
position: relative;
}
.step-card[data-step="mechanicals"].is-open .step-header {
background: transparent !important;
border-bottom: 0 !important;
}
/* Single thin rule painted behind ECC pill (visual match with Caption) */
.step-card[data-step="mechanicals"].is-open .step-header-wrap::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--ui-stroke);
pointer-events: none;
}
/* Remove the button’s own stripe so there’s no seam */
.step-card[data-step="mechanicals"].is-open .step-header {
background: transparent;
border-bottom: 0;
}
/* Mechanicals body should match other panels’ surface */
.step-card[data-step="mechanicals"] [data-step-panel]{
background: var(--ui-surface-variant);
}
/* Nudge the panel up 1px so it tucks under the header line (no step) */
.step-card[data-step="mechanicals"].is-open [data-step-panel]{
margin-top: -1px;
}
/* The stepper is the scroll container + the gap owner */
#stepper{
display:flex;
flex-direction:column;
height:100dvh;
overflow:auto;
gap: var(--stack-gap);
min-width:0; width:100%; max-width:720px; margin-inline:auto;
scroll-padding-top: calc(var(--header-h,56px) + 2px);
padding-bottom: calc(var(--footer-h,72px) + 8px); /* reserve for fixed footer */
}
#captionEl{
white-space: pre-wrap; /* 🔑 preserves \n + collapses extra spaces */
overflow-wrap: anywhere; /* allow breaking long words/URLs */
word-break: break-word; /* legacy safety */
hyphens: auto; /* prettier wrapping for long words */
text-wrap: balance; /* nicer line breaks when multi-line */
}
#captionBox{
max-width: 90%;
margin: .5rem auto 0;
max-height: clamp(3rem, 16vh, 220px);
overflow: auto;
scrollbar-width: thin;
}
#captionBox::-webkit-scrollbar{ width: 8px; }
#captionBox::-webkit-scrollbar-thumb{ border-radius: 999px; background: var(--ui-stroke-hover); }
#captionEl{
font-size: clamp(.9rem, 2.2vw, 1.5rem);
line-height: 1.15;
}
/* Caption panel: allow full-width children */
.step-card[data-step="caption"] [data-step-panel]{
display: flex;
align-items: stretch; /* child can fill the row */
min-width: 0; /* prevents flex overflow clipping */
}
/* If the input is inside a