/* forms-product.css — T136-UX Fáze 2 (docs/PROJECT_DESIGN_BRIEF.md, sekce 2a-2c). * * Nový redesignový sheet. Načítá se JAKO POSLEDNÍ (viz base.html), takže * vyhrává zdrojovým pořadím bez potřeby !important. Bezpečnostní přepínač: * (base.html). Riziková pravidla (Bootstrap proměnný * most, type scale, spacing) jsou schválně pod [data-ui="v2"], aby * neredesignované stránky (default v1) renderovaly beze změny. * * ⚠️ Past: --bs-primary samo o sobě NEPŘEBARVÍ .btn-primary — Bootstrap 5.3 * kompiluje barvy tlačítek do per-class proměnných (--bs-btn-bg apod.), proto * je tu komponentní remap, ne jen root proměnná. */ [data-ui="v2"] { --bs-body-bg: var(--color-canvas); --bs-body-color: var(--color-text); --bs-body-font-family: var(--type-body); --bs-border-color: var(--color-line); --bs-border-radius: var(--radius-control); --bs-border-radius-sm: var(--radius-control); --bs-border-radius-lg: var(--radius-control); --bs-link-color: var(--color-focus); --bs-link-hover-color: var(--color-focus); --bs-focus-ring-color: rgba(21, 95, 209, 0.35); --bs-primary: var(--color-accent); --bs-primary-rgb: 247, 201, 75; } /* ⚠️ Past #2, found by live browser check (not just reading the CSS): the * --bs-btn-* and --bs-card-* variable remap below is necessary but NOT * sufficient. surveysai-theme.css sets background-color/border-radius etc. * as LITERAL property values (not via the bootstrap variables) on the same * selectors, loaded after bootstrap's own CDN rule. Two same-specificity * declarations for the same property → later source order wins, so * surveysai-theme.css's literal value always beat bootstrap's * var(--bs-btn-bg)-based one, regardless of what we redefined that variable * to. Fix: also declare the literal properties here — [data-ui="v2"] .foo * has higher specificity (attribute + class) than plain .foo, so it wins on * specificity alone, independent of load order. Keep both: the --bs-btn-* * vars for any Bootstrap-internal consumer (focus rings, disabled states), * the literal properties to actually win the visible cascade today. */ [data-ui="v2"] .btn-primary { --bs-btn-bg: var(--color-accent); --bs-btn-border-color: var(--color-accent); --bs-btn-color: var(--color-accent-contrast); --bs-btn-hover-bg: var(--color-accent); --bs-btn-hover-border-color: var(--color-accent-contrast); --bs-btn-hover-color: var(--color-accent-contrast); --bs-btn-active-bg: var(--color-accent); --bs-btn-active-border-color: var(--color-accent-contrast); --bs-btn-active-color: var(--color-accent-contrast); --bs-btn-border-radius: var(--radius-control); background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); border-radius: var(--radius-control); } [data-ui="v2"] .btn-primary:hover, [data-ui="v2"] .btn-primary:focus, [data-ui="v2"] .btn-primary:active { background-color: var(--color-accent); border-color: var(--color-accent-contrast); color: var(--color-accent-contrast); } /* Bootstrap's .bg-primary keeps a white foreground by default. Primary maps to forms-yellow in v2, so every yellow badge/header needs the documented dark contrast color (white on this accent is only 1.57:1). */ [data-ui="v2"] .bg-primary { color: var(--color-accent-contrast) !important; } [data-ui="v2"] .card { --bs-card-bg: var(--color-surface-raised); --bs-card-border-color: var(--color-line); --bs-card-border-radius: var(--radius-surface); --bs-card-cap-bg: var(--color-surface-raised); background-color: var(--color-surface-raised); border-color: var(--color-line); border-radius: var(--radius-surface); box-shadow: none; } [data-ui="v2"] .card:hover { box-shadow: none; transform: none; } [data-ui="v2"] .card-header, [data-ui="v2"] .card-body, [data-ui="v2"] .card-footer { background-color: var(--color-surface-raised); } [data-ui="v2"] .form-control { --bs-form-control-bg: var(--color-surface-raised); --bs-body-color: var(--color-text); background-color: var(--color-surface-raised); color: var(--color-text); border-radius: var(--radius-control); } [data-ui="v2"] .modal-content { --bs-modal-bg: var(--color-surface-raised); --bs-modal-border-color: var(--color-line); background-color: var(--color-surface-raised); border-color: var(--color-line); border-radius: var(--radius-surface); } [data-ui="v2"] .nav-tabs { --bs-nav-tabs-link-active-bg: var(--color-surface-raised); --bs-nav-tabs-link-active-border-color: var(--color-line) var(--color-line) var(--color-surface-raised); } [data-ui="v2"] .nav-tabs .nav-link.active { background-color: var(--color-surface-raised); border-color: var(--color-line) var(--color-line) var(--color-surface-raised); color: var(--color-text); } [data-ui="v2"] .btn { border-radius: var(--radius-control); } @media (prefers-reduced-motion: reduce) { [data-ui="v2"] * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* Legacy animated selectors (custom.css/surveysai-theme.css) — this guard * is a shared-shell/accessibility fix, applies regardless of data-ui. */ .card:hover, .benefit-item:hover { transform: none !important; } .plan-days-warning { animation: none !important; } } /* --- Shared shell (T136-UX F2.3) — applies on every page, not gated by data-ui, since header/footer/skip-link are a real structural redesign of the shared chrome, not the risky Bootstrap variable remap above. --- */ .skip-link { position: absolute; top: -100%; left: 0.5rem; z-index: 2000; padding: 0.5rem 1rem; background-color: var(--color-frame); color: var(--color-frame-text, #fff); text-decoration: none; border-radius: 0 0 var(--radius-control) var(--radius-control); transition: top var(--motion-fast, 160ms) ease; } .skip-link:focus { top: 0; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .app-header { background-color: var(--color-surface-raised); border-bottom: 1px solid var(--color-line); padding: 0.5rem 0; } .app-header__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } .app-header__brand { display: flex; align-items: center; min-width: 0; } .app-header__logo { height: 32px; max-width: 140px; } .app-header__tool-name { margin-left: 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--color-line); font-size: 1.05rem; font-weight: 600; color: var(--color-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header__nav { display: flex; align-items: center; } .app-header__account-toggle { display: inline-flex; align-items: center; } .plan-chip { display: inline-block; font-family: var(--type-operational, monospace); font-size: 0.7rem; letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: var(--radius-control); background-color: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-line); } .plan-chip--pro { background-color: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); } .feedback-cta-section { margin-top: 3rem; } .app-footer { background-color: var(--color-surface-raised); border-top: 1px solid var(--color-line); padding: 0.75rem 0; margin-top: 1.5rem; } .app-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; } .app-footer__brand { display: flex; flex-direction: column; } .app-footer__brand-name { font-weight: 600; } .app-footer__links { display: flex; flex-wrap: wrap; } /* --- Canvas (T136-UX F2.5, `/` only — these classes don't exist in any other template, so they're safe unscoped by data-ui). --- */ .canvas-hero__kicker { font-family: var(--type-operational, monospace); text-transform: uppercase; letter-spacing: 0.04em; } .canvas-page { max-width: 82rem; } [data-ui="v2"] .canvas-page.form-container { padding: 0; background-color: transparent; border: 0; } .canvas-hero { max-width: 68rem; padding: clamp(var(--space-5), 5vw, var(--space-7)) 0 var(--space-4); } .canvas-hero__title { font-family: var(--type-display, inherit); max-width: 15ch; font-size: clamp(2.5rem, 7vw, 5.75rem); line-height: 0.96; letter-spacing: -0.055em; } .canvas-hero__lede { max-width: 46rem; color: var(--color-text-muted); } /* Canvas workspace (T144-UX) — status strip, syntax guidance, editor, and action row read as one bounded working surface: raised neutral background plus a real line border, no shadow, square geometry. Distinguishes the primary task area from the page canvas through surface/geometry, not a generic Bootstrap card. */ .canvas-workspace { background-color: var(--color-surface-raised); border: 1px solid var(--color-line); border-radius: var(--radius-surface); padding: var(--space-5); } .canvas-status-bar { padding: 0 0 var(--space-3); background-color: transparent; border-bottom: 1px solid var(--color-line); border-radius: 0; } .canvas-editor-hint code { background-color: var(--color-surface); border-radius: var(--radius-control); padding: 0.1rem 0.3rem; color: var(--color-text); } .canvas-editor__textarea { min-height: clamp(20rem, 55vh, 34rem); font-family: var(--type-operational, monospace); font-size: 1rem; line-height: 1.55; padding: clamp(var(--space-4), 3vw, var(--space-6)); border: 1px solid var(--color-line); } .canvas-editor__textarea:focus { border-color: var(--color-focus); } /* T148-UX: vzorový text v editoru četli uživatelé jako už vyplněný obsah. Placeholder proto dostává tlumenou barvu a kurzívu, aby byl jasně odlišený od skutečného vstupu. Kontrast na --color-surface-raised zůstává nad 4.5:1. */ .canvas-editor__textarea::placeholder { color: var(--color-text-muted); font-style: italic; opacity: 1; /* Firefox tlumí placeholder navíc vlastní opacity */ } .canvas-actions { align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--color-line); } .canvas-actions .btn-primary { min-width: 10rem; } .canvas-trust-strip { display: grid; grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 2fr); gap: var(--space-3) var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); } .canvas-trust-strip__heading { display: flex; align-items: center; gap: var(--space-2); font-family: var(--type-operational, monospace); } .canvas-trust-strip__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); padding-left: 1rem; color: var(--color-text-muted); font-size: 0.875rem; } .canvas-trust-strip__legal { grid-column: 2; color: var(--color-text-muted); font-size: 0.75rem; } .canvas-section-divider { border-color: var(--color-line); opacity: 1; } .disclosure-guide .btn-link { color: inherit; } .disclosure-guide button[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); transition: transform var(--motion-fast, 160ms) ease; } /* --- Dashboard plan-expiration progress bar width (T136-UX F3b) — functional, not visual, so unscoped by data-ui: replaces the removed inline style="width: {{ days_percent }}%" with a CSS custom property read off data-percent. Must keep working before AND after dashboard.html's v2 flip, since the width behavior isn't part of the redesign itself. --- */ .plan-expiration-bar__fill { width: var(--days-percent, 0%); } /* --- Dashboard Workbench (T136-UX F3b) — /dashboard. Primary surface is the forms table (#my-forms): raised, stronger border, more visual weight. Secondary/inspector rail (account status, stat tiles, API keys/credits) reads as a supporting panel: dimmer surface, operational-mono labels, same card language as the rest of the redesign, just quieter. --- */ [data-ui="v2"] .dashboard-title { color: var(--color-text); font-family: var(--type-display, inherit); font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.045em; border-bottom: 0; margin: var(--space-5) 0 var(--space-3); } [data-ui="v2"] #my-forms .card { background-color: var(--color-surface-raised); border: 1px solid var(--color-line); border-top: 4px solid var(--color-accent); } [data-ui="v2"] #my-forms .card-header { padding: var(--space-4) var(--space-5); } [data-ui="v2"] #my-forms .empty-state { min-height: 16rem; display: grid; place-content: center; text-align: center; } [data-ui="v2"] .dashboard-summary .card, [data-ui="v2"] #apiKeysCard { background-color: var(--color-surface); } [data-ui="v2"] .dashboard-summary { margin-top: var(--space-6); } [data-ui="v2"] .dashboard-summary .card { border: 0; border-top: 1px solid var(--color-line); } [data-ui="v2"] .dashboard-summary .card-header, [data-ui="v2"] .dashboard-summary .card-body, [data-ui="v2"] .dashboard-summary .card-footer { background-color: transparent; padding-left: 0; padding-right: var(--space-4); } .dashboard-summary__metric, .dashboard-summary__split strong { font-family: var(--type-display, inherit); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; } .dashboard-summary__split { display: flex; gap: var(--space-6); } .dashboard-summary__split span, .dashboard-summary__split small { display: block; } [data-ui="v2"] .plan-badge { font-family: var(--type-operational, monospace); letter-spacing: 0.02em; border-radius: var(--radius-control); } [data-ui="v2"] .empty-state .bi { color: var(--color-text-muted); } [data-ui="v2"] .plan-expiration-bar { background-color: var(--color-line); border-radius: var(--radius-control); overflow: hidden; } /* --- Editor / validace / preview surfaces (T136-UX F3a) — form_validation.html, form_preview.html. Canvas-consistent inspector layer: editor/rendered preview is the primary surface, .validation-issues/.original-text/.fixed-text read as a secondary panel, same primary+inspector rhythm as `/`'s Canvas archetype. --- */ [data-ui="v2"] .form-container, [data-ui="v2"] .preview-container { background-color: var(--color-surface-raised); border: 1px solid var(--color-line); border-radius: var(--radius-surface); box-shadow: none; } [data-ui="v2"] .form-input { background-color: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-text); border-radius: var(--radius-control); font-family: var(--type-operational, monospace); } [data-ui="v2"] .form-input:hover, [data-ui="v2"] .form-input:focus { border-color: var(--color-focus); } [data-ui="v2"] .validation-issue { border-left-color: var(--color-warning); } [data-ui="v2"] .original-text, [data-ui="v2"] .fixed-text { font-family: var(--type-operational, monospace); border-radius: var(--radius-control); } [data-ui="v2"] .original-text { background-color: var(--color-surface); border-color: var(--color-line); color: var(--color-text-muted); } [data-ui="v2"] .fixed-text { background-color: var(--color-surface-raised); border-color: var(--color-success); color: var(--color-text); } [data-ui="v2"] .form-preview { background-color: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-surface); padding: var(--space-4); } [data-ui="v2"] .question-preview { border-bottom: 1px solid var(--color-line); padding-bottom: var(--space-3); } [data-ui="v2"] .question-preview:last-child { border-bottom: none; padding-bottom: 0; } [data-ui="v2"] .question-type { font-family: var(--type-operational, monospace); font-size: 0.8rem; color: var(--color-text-muted); } [data-ui="v2"] .option { color: var(--color-text-muted); } /* --- Library (T136-UX F3c) — /library. Čistý přesun z library.html's inline