+ data-label="…" on each
* . Hides the , lets each become a card with label/value
* pairs flowing as flex rows. */
@media (max-width: 640px) {
.data-table--responsive,
.data-table--responsive thead,
.data-table--responsive tbody,
.data-table--responsive tr,
.data-table--responsive td,
.data-table--responsive th { display: block; }
.data-table--responsive thead {
position: absolute;
left: -10000px; /* visually hidden, kept in DOM for AT */
}
.data-table--responsive tr {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
margin-bottom: var(--space-3);
background: var(--color-bg);
}
.data-table--responsive tbody tr:hover { background: var(--color-bg); }
.data-table--responsive td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
padding: var(--space-1) 0;
border: none;
text-align: left;
}
.data-table--responsive td.num { text-align: right; }
.data-table--responsive td::before {
content: attr(data-label);
font-weight: 500;
color: var(--color-fg-muted);
font-size: .85rem;
flex: 0 0 auto;
}
/* If a cell has no data-label, suppress the empty pseudo to avoid the gap */
.data-table--responsive td:not([data-label])::before { content: none; }
}
/* ---------- 9. Generator (three-step flow) -------------------------------- */
/* Hide the file input — the drop zone + "Vybrat soubor" link drive it. */
#imageInput { display: none; }
/* Container around the step cards. */
.generator { margin-top: var(--space-4); }
/* One numbered step card. The list itself is a real so screen readers
* announce step numbers; the visual numbering is rendered by the chip. */
.generator__steps {
list-style: none;
padding: 0;
margin: 0;
}
.generator-step {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
}
.generator-step[aria-current="step"] {
background: var(--color-bg);
border-color: var(--color-brand);
box-shadow: var(--shadow-sm);
}
.generator-step__num {
flex: 0 0 auto;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--color-border);
color: var(--color-fg-muted);
font-family: var(--font-brand);
font-weight: 700;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
}
.generator-step[aria-current="step"] .generator-step__num {
background: var(--color-brand);
color: #fff;
}
.generator-step__body {
flex: 1 1 auto;
min-width: 0;
}
.generator-step__body > h2:first-child {
margin-top: 0;
margin-bottom: var(--space-3);
font-size: 1.25rem;
}
/* Drop zone — large tap-friendly area, brand-tinted on drag-hover. */
#drop {
border: 2px dashed var(--color-border-strong);
background: var(--color-bg);
padding: var(--space-6);
text-align: center;
border-radius: var(--radius-md);
color: var(--color-fg-muted);
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-2);
transition: border-color .15s, background .15s;
cursor: pointer;
}
#drop:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
#drop.hovering {
border-color: var(--color-brand);
background: var(--color-brand-soft);
color: var(--color-fg);
}
#drop #imageSelect {
font-weight: 500;
font-size: 1.05rem;
}
#drop p { margin: 0; font-size: .9rem; }
/* Image + outline previews side-by-side, stacked on tablet portrait. */
.generator-previews {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
@media (max-width: 720px) {
.generator-previews { grid-template-columns: 1fr; }
}
.generator-previews figure {
margin: 0;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
box-shadow: var(--shadow-sm);
/* Allow the grid item to shrink below its intrinsic min-content size,
* so a freshly-loaded full-resolution ![]() doesn't widen the column. */
min-width: 0;
}
.generator-previews figcaption {
font-size: .85rem;
font-weight: 500;
color: var(--color-fg-muted);
margin-bottom: var(--space-2);
}
.generator-previews img,
.generator-previews svg {
width: 100%;
height: 240px;
object-fit: contain;
display: block;
}
/* Adjust controls — labels left-aligned to a fixed column on desktop, stack on mobile. */
.generator-controls {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: var(--space-4) 0 0 0;
}
.generator-controls__row {
display: flex;
gap: var(--space-3);
align-items: center;
flex-wrap: wrap;
}
.generator-controls__row > label {
min-width: 9em;
margin-bottom: 0;
font-weight: 500;
}
.generator-controls__row input[type="number"] { max-width: 90px; min-height: 40px; }
.generator-controls__row input[type="range"] { flex: 1 1 220px; }
@media (max-width: 540px) {
.generator-controls__row > label { min-width: 100%; }
}
#offsetValue {
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--color-fg);
min-width: 2.5em;
display: inline-block;
}
.status-line {
color: var(--color-fg-muted);
font-size: .92rem;
flex: 1 1 100%;
}
.status-line a { font-weight: 500; }
/* Preview-pay step (#previewPane). Renders top + iso views, summary, actions. */
.preview-info {
background: var(--color-brand-soft);
color: var(--color-fg);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
margin-bottom: var(--space-4);
}
.preview-info strong { color: var(--color-brand-dark); }
.preview-images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
@media (max-width: 720px) {
.preview-images { grid-template-columns: 1fr; }
}
.preview-images img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
}
/* Iso "spinner": draggable container with a hint overlay that fades on
* first interaction. Cursor signals "you can grab this and rotate".
* Touch pan is disabled so swipes go to the JS handler, not page-scroll. */
.iso-spinner {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
cursor: grab;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.iso-spinner.is-grabbing { cursor: grabbing; }
.iso-spinner img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
pointer-events: none; /* let the parent capture drag */
-webkit-user-drag: none;
border: none;
box-shadow: none;
background: transparent;
border-radius: 0;
}
.iso-spinner__hint {
position: absolute;
bottom: var(--space-2);
left: 50%;
transform: translateX(-50%);
background: rgba(31, 34, 40, 0.78);
color: #fff;
font-size: .82rem;
font-weight: 500;
padding: 4px 12px;
border-radius: 999px;
pointer-events: none;
transition: opacity .25s;
white-space: nowrap;
}
.iso-spinner.is-touched .iso-spinner__hint { opacity: 0; }
/* Loader overlay shown while orbit frames load in the background. */
.iso-spinner__loader {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
background: rgba(255, 255, 255, 0.82);
color: var(--color-fg-muted);
font-size: .85rem;
font-weight: 500;
}
.iso-spinner__loader::before {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid var(--color-border);
border-top-color: var(--color-brand);
animation: iso-spin .8s linear infinite;
}
@keyframes iso-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.iso-spinner__loader::before { animation: none; }
}
.preview-actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
align-items: center;
}
/* In-progress state for image upload+trace. Drop zone hides; this panel
* (matching the drop zone's bordered look) shows a spinner + "tracing"
* text. potrace+downsample on a large phone photo can take 2-4 seconds. */
.drop-loading {
border: 2px solid var(--color-brand-soft);
background: var(--color-bg);
padding: var(--space-6);
text-align: center;
border-radius: var(--radius-md);
color: var(--color-fg);
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--space-3);
}
.drop-loading p { margin: 0; }
.loading-spinner {
width: 32px;
height: 32px;
border: 3px solid var(--color-brand-soft);
border-top-color: var(--color-brand);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Transient error overlay on the drop zone — set via JS data-error on
* upload/trace failure. Flashes for a few seconds, then JS clears it. */
#drop[data-error]::after {
content: attr(data-error);
display: block;
margin-top: var(--space-2);
color: var(--color-danger);
font-size: .9rem;
font-weight: 500;
}
/* "Change image" button shown after upload — small affordance to start over. */
.change-image-btn {
margin-top: 0;
min-height: 36px;
font-size: .9rem;
}
/* Step-1 collapses once an image is picked: smaller chip turns green, drop
* zone hidden, only the "Change image" button remains. h2 hidden because
* the chip + button alone are already self-explanatory. */
.generator-step--minimized {
padding: var(--space-3) var(--space-4);
gap: var(--space-3);
align-items: center;
}
.generator-step--minimized .generator-step__body > h2 { display: none; }
.generator-step--minimized .generator-step__num {
background: var(--color-success);
color: #fff;
width: 28px; height: 28px;
font-size: .9rem;
}
/* ---------- 10. Utilities ------------------------------------------------- */
.text-muted { color: var(--color-fg-muted); }
.text-brand { color: var(--color-brand); }
.text-accent { color: var(--color-accent); }
.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Honeypot — invisible-but-DOM-present field on auth forms.
* Off-screen positioning (NOT display:none — some bots skip hidden fields).
* tabindex=-1 + autocomplete=off cover keyboard / password-manager paths.
*/
.hp-field {
position: absolute !important;
left: -10000px !important;
top: 0 !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* ---------- 10b. Page-level patterns -------------------------------------- */
/* Narrow centered form pages — sign in, sign up, forgot password, etc. */
.auth-card {
max-width: 420px;
margin: var(--space-5) 0;
}
/* Toolbar row: filter links + primary CTA, separated by space-between */
.toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-4);
align-items: center;
margin: var(--space-3) 0;
}
.toolbar .filter-links {
display: flex;
gap: var(--space-1) var(--space-3);
flex-wrap: wrap;
color: var(--color-fg-muted);
}
.toolbar .spacer { flex: 1; }
/* Pagination nav */
.pagination {
margin-top: var(--space-4);
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
align-items: center;
color: var(--color-fg-muted);
font-size: .95rem;
}
.pagination a, .pagination strong {
display: inline-block;
padding: 2px 10px;
border-radius: var(--radius-sm);
min-width: 1.8em;
text-align: center;
}
.pagination a { color: var(--color-brand); text-decoration: none; }
.pagination a:hover { background: var(--color-brand-soft); }
.pagination strong { background: var(--color-brand-soft); color: var(--color-brand); }
/* Status pills + text colors */
.status--success { color: var(--color-success); font-weight: 500; }
.status--danger { color: var(--color-danger); font-weight: 500; }
.status--muted { color: var(--color-fg-muted); }
.status--warning { color: var(--color-warning); font-weight: 500; }
/* Big credit-balance display */
.balance {
font-family: var(--font-brand);
font-size: 3rem;
font-weight: 700;
color: var(--color-brand);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.balance__unit {
font-size: .9rem;
font-weight: 500;
color: var(--color-fg-muted);
letter-spacing: .04em;
margin-left: var(--space-1);
}
.balance__label {
display: block;
font-size: .85rem;
font-weight: 500;
color: var(--color-fg-muted);
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: var(--space-1);
}
/* Generation thumbnail in /account history rows — the top-view SVG preview
* served by /api/preview, displayed at a small inline size. */
.gen-thumb {
width: 56px;
height: 56px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
object-fit: contain;
flex: 0 0 auto;
}
/* Pending-section accent bar — highlight the "needs your action" rows */
.section--pending h2 { color: var(--color-warning); }
.section--pending {
border-left: 3px solid var(--color-warning);
padding-left: var(--space-4);
margin-bottom: var(--space-6);
}
/* Tight cluster of two/three action buttons inside a table cell */
.action-cluster {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
align-items: center;
}
.action-cluster .btn { min-height: 32px; padding: 4px 10px; font-size: .9rem; }
.action-cluster .inline-form { margin: 0; }
/* Account hero — balance + email + top-up CTA in one card. Stacks on mobile. */
.account-hero {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-5) var(--space-6);
background: var(--color-brand-soft);
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
flex-wrap: wrap;
}
.account-hero__balance { flex: 0 0 auto; }
.account-hero__user {
flex: 1 1 auto;
min-width: 0;
color: var(--color-fg-muted);
font-size: .95rem;
}
.account-hero__user strong {
display: block;
color: var(--color-fg);
font-weight: 500;
word-break: break-all;
}
.account-hero .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
.account-hero { padding: var(--space-4); gap: var(--space-3); }
.account-hero .btn { width: 100%; }
.balance { font-size: 2.4rem; }
}
/* Table-row "deactivated/disabled" hint */
.data-table tr.muted-row td { color: var(--color-fg-muted); }
/* Mono-tone "code-like" cell content (audit type, kupon kódy) */
.data-table .mono { font-family: var(--font-mono); font-size: .92em; }
/* Inline form (e.g. revoke-code reason input next to a Submit) */
.inline-form {
display: inline-flex;
gap: var(--space-2);
align-items: center;
flex-wrap: wrap;
margin: 0;
}
.inline-form input[type="text"] {
max-width: 160px;
min-height: auto;
padding: 4px 8px;
}
.inline-form button {
min-height: auto;
padding: 4px 12px;
font-size: .9rem;
}
/* Danger zone — destructive admin actions framed in red. Used on the user
* edit page for GDPR redact. */
.danger-zone {
margin-top: var(--space-6);
padding: var(--space-4);
border: 1px solid var(--color-danger);
border-radius: var(--radius-md);
background: var(--color-danger-soft);
}
.danger-zone h2 {
margin-top: 0;
color: var(--color-danger);
}
/* Admin nav variant — slightly more compact, subtle accent in subtitle */
.site-header--admin .site-header__subtitle { color: var(--color-brand); }
/* Empty-state placeholder — used where a list/table has zero rows.
* Centered text + muted colour + soft surface, with optional icon line. */
.empty-state {
background: var(--color-surface);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-5);
text-align: center;
color: var(--color-fg-muted);
}
.empty-state__title {
font-family: var(--font-brand);
font-weight: 500;
font-size: 1.05rem;
color: var(--color-fg);
margin-bottom: var(--space-2);
}
.empty-state p { margin-bottom: var(--space-3); }
.empty-state p:last-child { margin-bottom: 0; }
/* Pre-formatted blocks inside table cells (audit payload, error_message) */
.data-table pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
font-size: .88em;
font-family: var(--font-mono);
color: var(--color-fg);
}
/* ---------- 10c. Landing page --------------------------------------------- */
.hero {
padding: var(--space-7) 0 var(--space-6);
text-align: center;
}
.hero h1 {
font-size: 2.5rem;
max-width: 24ch;
margin: 0 auto var(--space-3);
color: var(--color-fg);
}
.hero h1 .accent { color: var(--color-brand); }
.hero .lead {
font-size: 1.15rem;
color: var(--color-fg-muted);
max-width: 50ch;
margin: 0 auto var(--space-5);
}
.cta-cluster {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
}
.cta-cluster .btn { min-width: 180px; }
/* Generic content section between hero and footer. */
.section {
padding: var(--space-6) 0;
border-top: 1px solid var(--color-border);
}
.section h2 {
font-size: 1.6rem;
text-align: center;
margin-top: 0;
margin-bottom: var(--space-2);
}
.section .lead {
text-align: center;
color: var(--color-fg-muted);
max-width: 60ch;
margin: 0 auto var(--space-6);
}
/* "How it works" 3-step strip. */
.steps-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-5);
}
@media (max-width: 720px) {
.steps-strip { grid-template-columns: 1fr; gap: var(--space-4); }
}
.steps-strip__item {
text-align: center;
padding: var(--space-4);
}
.steps-strip__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
background: var(--color-brand-soft);
color: var(--color-brand);
font-family: var(--font-brand);
font-weight: 700;
font-size: 1.4rem;
border-radius: 50%;
margin-bottom: var(--space-3);
}
.steps-strip__item h3 {
margin: 0 0 var(--space-2);
font-size: 1.1rem;
}
.steps-strip__item p {
color: var(--color-fg-muted);
font-size: .95rem;
margin: 0;
}
/* Feature row: text + image, side-by-side on desktop, stacked on tablet. */
.feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
align-items: center;
margin-top: var(--space-5);
}
@media (max-width: 720px) {
.feature { grid-template-columns: 1fr; gap: var(--space-4); }
}
.feature--reverse > :first-child { order: 2; }
@media (max-width: 720px) {
.feature--reverse > :first-child { order: 0; }
}
.feature__text h3 {
margin-top: 0;
font-size: 1.3rem;
}
.feature__media img {
width: 100%;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
.feature__media figcaption {
font-size: .85rem;
color: var(--color-fg-muted);
text-align: center;
margin-top: var(--space-2);
}
/* Highlighted call-out for "Where to get codes" — eshop-coloured tint. */
.section--highlight {
background: var(--color-brand-soft);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-5);
margin: var(--space-6) 0;
border: none;
text-align: center;
}
.section--highlight h2 { color: var(--color-brand-dark); }
/* ---------- 10d. Footer --------------------------------------------------- */
.site-footer {
/* margin-top:auto pushes footer to viewport bottom on short pages
* (sticky-footer pattern; works because body is a flex column with
* min-height:100vh — see body rule above). */
margin-top: auto;
padding: var(--space-5) 0 var(--space-6);
border-top: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-fg-muted);
font-size: .9rem;
}
.site-footer__inner {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-5);
align-items: center;
justify-content: space-between;
}
.site-footer ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-4);
}
.site-footer a {
color: var(--color-fg-muted);
text-decoration: none;
}
.site-footer a:hover { color: var(--color-brand); text-decoration: underline; }
.site-footer__brand {
display: flex;
align-items: center;
gap: var(--space-2);
}
.site-footer__brand img { height: 24px; width: auto; opacity: .8; }
/* ---------- 11. Responsive ------------------------------------------------ */
@media (max-width: 640px) {
body { font-size: 15.5px; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.3rem; }
.hero { padding: var(--space-5) 0 var(--space-5); }
.hero h1 { font-size: 1.9rem; }
.hero .lead { font-size: 1.05rem; }
.site-header__inner {
gap: var(--space-2);
}
.site-header__nav { margin-left: 0; width: 100%; }
#imgdiv img, #svgdiv svg { height: 200px; }
/* Tables become cards-ish on phone — opt-in via data-label cells later */
.data-table { font-size: .92rem; }
.data-table th, .data-table td { padding: var(--space-2); }
}
|