/** * Visual design for [cod_refill_form] / the standalone form page. * * Design tokens (custom properties) are defined once on the two possible * "root" elements this form ever renders inside — `.cod-pr-form-wrap` * itself (works when embedded via shortcode inside any theme's page, * where we don't control anything outside the wrap) and * `body.cod-pr-standalone-page` (the bare page template, where the wrap * IS the whole page and we also want the page background itself themed). * Every component below reads colors from these tokens instead of literal * values, which is what makes the dark theme below just a second set of * variable values rather than a duplicated stylesheet. * * Theme selection (light/dark) is decided in three layers, in increasing * priority: * 1. `prefers-color-scheme: dark` (the visitor's OS/browser setting) — * applies automatically until they choose otherwise. * 2. An explicit `data-cod-theme="light"` or `"dark"` attribute, set * server-side from the `cod_pr_theme` cookie when present (see * templates/form-template.php / standalone-form-page-template.php) * — this is what makes the CORRECT theme show up on first paint, * with no flash, for a returning visitor. * 3. The toggle button (assets/js/cod-form.js) — flips the attribute * live and writes the cookie for next time. */ .cod-pr-form-wrap, body.cod-pr-standalone-page { --cod-bg: #ffffff; --cod-surface: #f4f6f8; --cod-border: #d7dce2; --cod-text: #1c232c; --cod-text-muted: #5c6773; --cod-accent: #1d4e89; --cod-accent-hover: #163c69; --cod-accent-contrast: #ffffff; --cod-danger: #b3261e; --cod-danger-bg: #fbeceb; --cod-success-text: #1c6b34; --cod-success-bg: #eaf5ec; --cod-radius: 10px; --cod-radius-sm: 6px; --cod-shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 4px 14px rgba(16, 24, 32, 0.05); --cod-focus-ring: rgba(29, 78, 137, 0.35); } @media (prefers-color-scheme: dark) { .cod-pr-form-wrap:not([data-cod-theme="light"]), body.cod-pr-standalone-page:not([data-cod-theme="light"]) { --cod-bg: #12161c; --cod-surface: #1a2029; --cod-border: #2c3542; --cod-text: #e8ecf1; --cod-text-muted: #98a3b3; --cod-accent: #5b9bd9; --cod-accent-hover: #7bb0e3; --cod-accent-contrast: #0b1220; --cod-danger: #ff7b72; --cod-danger-bg: #3a1f1f; --cod-success-text: #7fd99a; --cod-success-bg: #16301f; --cod-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4); --cod-focus-ring: rgba(91, 155, 217, 0.45); } } .cod-pr-form-wrap[data-cod-theme="dark"], body.cod-pr-standalone-page[data-cod-theme="dark"] { --cod-bg: #12161c; --cod-surface: #1a2029; --cod-border: #2c3542; --cod-text: #e8ecf1; --cod-text-muted: #98a3b3; --cod-accent: #5b9bd9; --cod-accent-hover: #7bb0e3; --cod-accent-contrast: #0b1220; --cod-danger: #ff7b72; --cod-danger-bg: #3a1f1f; --cod-success-text: #7fd99a; --cod-success-bg: #16301f; --cod-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4); --cod-focus-ring: rgba(91, 155, 217, 0.45); } /* Page chrome — only takes effect on the standalone template, since only there do we own . Centers the card on the page instead of it just sitting flush at the top-left. */ body.cod-pr-standalone-page { margin: 0; min-height: 100vh; background: var(--cod-bg); color: var(--cod-text); display: flex; justify-content: center; padding: 40px 16px; box-sizing: border-box; transition: background-color 0.2s ease, color 0.2s ease; } .cod-pr-form-wrap { position: relative; max-width: 640px; width: 100%; font-size: 15px; line-height: 1.5; color: var(--cod-text); background: var(--cod-bg); border: 1px solid var(--cod-border); border-radius: var(--cod-radius); box-shadow: var(--cod-shadow); padding: 28px 28px 24px; box-sizing: border-box; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* When embedded via shortcode, a theme's own page background shows through around the card (expected — see the class docblock above); the shadow/border above is what keeps the card legible either way. */ /* ---- theme toggle -------------------------------------------------- */ .cod-pr-theme-toggle { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--cod-surface); border: 1px solid var(--cod-border); border-radius: 50%; color: var(--cod-text-muted); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .cod-pr-theme-toggle:hover { color: var(--cod-accent); border-color: var(--cod-accent); } .cod-pr-theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cod-focus-ring); } .cod-pr-theme-icon { width: 18px; height: 18px; } .cod-pr-theme-icon-sun { display: none; } .cod-pr-form-wrap[data-cod-theme="dark"] .cod-pr-theme-icon-moon { display: none; } .cod-pr-form-wrap[data-cod-theme="dark"] .cod-pr-theme-icon-sun { display: block; } @media (prefers-color-scheme: dark) { .cod-pr-form-wrap:not([data-cod-theme="light"]) .cod-pr-theme-icon-moon { display: none; } .cod-pr-form-wrap:not([data-cod-theme="light"]) .cod-pr-theme-icon-sun { display: block; } } /* ---- typography / fields -------------------------------------------- */ .cod-pr-field { margin-bottom: 18px; } .cod-pr-field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--cod-text); } .cod-pr-field .req { color: var(--cod-danger); } .cod-pr-optional { font-weight: 400; color: var(--cod-text-muted); font-size: 0.9em; } .cod-pr-hint { margin: 4px 0 0; font-size: 0.85em; color: var(--cod-text-muted); } .cod-pr-form-wrap input[type="text"], .cod-pr-form-wrap input[type="tel"], .cod-pr-form-wrap input[type="number"], .cod-pr-form-wrap input[type="file"], .cod-pr-form-wrap textarea, .cod-pr-form-wrap select { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--cod-border); border-radius: var(--cod-radius-sm); font-size: 15px; font-family: inherit; background: var(--cod-bg); color: var(--cod-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .cod-pr-form-wrap input::placeholder, .cod-pr-form-wrap textarea::placeholder { color: var(--cod-text-muted); opacity: 1; } .cod-pr-form-wrap input:focus, .cod-pr-form-wrap textarea:focus, .cod-pr-form-wrap select:focus { outline: none; border-color: var(--cod-accent); box-shadow: 0 0 0 3px var(--cod-focus-ring); } .cod-pr-form-wrap textarea { resize: vertical; } .cod-pr-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .cod-pr-row { display: grid; grid-template-columns: 1fr 180px auto; gap: 8px; align-items: center; } .cod-pr-row-name, .cod-pr-row-qty { padding: 9px 11px; border: 1px solid var(--cod-border); border-radius: var(--cod-radius-sm); font-size: 15px; background: var(--cod-bg); color: var(--cod-text); } .cod-pr-row-name:focus, .cod-pr-row-qty:focus { outline: none; border-color: var(--cod-accent); box-shadow: 0 0 0 3px var(--cod-focus-ring); } .cod-pr-row-name.cod-pr-invalid { border-color: var(--cod-danger); background: var(--cod-danger-bg); } .cod-pr-row-remove { border: none; background: var(--cod-danger-bg); color: var(--cod-danger); width: 34px; height: 34px; border-radius: var(--cod-radius-sm); font-size: 18px; line-height: 1; cursor: pointer; transition: filter 0.15s ease; } .cod-pr-row-remove:hover { filter: brightness(0.94); } /* ---- buttons ---------------------------------------------------------- */ .cod-pr-btn-primary, .cod-pr-btn-secondary { display: inline-block; padding: 10px 20px; border-radius: var(--cod-radius-sm); border: none; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; transition: background-color 0.15s ease, filter 0.15s ease; } .cod-pr-btn-primary { background: var(--cod-accent); color: var(--cod-accent-contrast); } .cod-pr-btn-primary:hover { background: var(--cod-accent-hover); } .cod-pr-btn-primary:focus-visible, .cod-pr-btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cod-focus-ring); } .cod-pr-btn-primary:disabled { background: var(--cod-border); color: var(--cod-text-muted); cursor: not-allowed; } .cod-pr-btn-secondary { background: var(--cod-surface); color: var(--cod-text); border: 1px solid var(--cod-border); } .cod-pr-btn-secondary:hover { filter: brightness(0.97); } /* ---- messages / panels ------------------------------------------------- */ .cod-pr-message { min-height: 1.2em; margin-bottom: 12px; color: var(--cod-success-text); } .cod-pr-message-error { color: var(--cod-danger); } .cod-pr-result { margin-top: 24px; padding: 18px; border: 1px solid var(--cod-border); border-radius: var(--cod-radius); background: var(--cod-surface); } .cod-pr-result-title { font-weight: 600; margin-top: 0; color: var(--cod-text); } .cod-pr-upload-field { margin-top: 18px; } .cod-pr-done { margin-top: 24px; padding: 18px; border-radius: var(--cod-radius); background: var(--cod-success-bg); color: var(--cod-success-text); } .cod-pr-done-text { font-weight: 600; margin: 0 0 16px; } .cod-pr-qr-block { text-align: center; font-weight: normal; } .cod-pr-qr-caption { margin: 0 0 12px; color: var(--cod-success-text); } .cod-pr-qr-image { max-width: 220px; width: 100%; height: auto; /* Deliberately fixed white, not a theme token: QR scanners expect dark modules on a light background, so this stays white in dark mode too — inverting it would risk it not scanning. */ background: #fff; padding: 10px; border-radius: var(--cod-radius-sm); border: 1px solid var(--cod-border); } @media (max-width: 480px) { .cod-pr-form-wrap { padding: 22px 18px 20px; } .cod-pr-row { grid-template-columns: 1fr; } }