/* * Purpose: Kinetic component library. Phase 0 ships the stubs that * the rest of the plan builds on. Phase 2 expands these * rules with the full set of variants described in * `docs/domains/shared/KINETIC_REDESIGN_PROMPT.md` §7. * * Load order: Loaded AFTER tokens.css, fonts.css, reset.css, and * base.css. Loaded BEFORE motion.css. The `app.css` * file from the AdminLTE era is loaded after this file * and provides the DadKit-specific overrides * (`dadkit-*` rule blocks). * * Rules in this file MUST be high-specificity enough to win * against the Bootstrap component CSS that is still loaded for * the grid/utilities subset. We use `.k-*` class names so the * migration is opt-in per tool. * * Component library (Phase 2): * - .k-card (k-card, k-card--bordered, k-card--flat, * k-card--filled, k-card--hover, k-card--historical, * k-card--group, k-card__header, k-card__footer) * - .k-btn (k-btn, k-btn--primary, k-btn--outline, * k-btn--ghost, k-btn--danger, k-btn--success, * k-btn--sm, k-btn--lg, k-btn--block, k-btn--icon, * k-btn--loading) * - .k-input, .k-input--multiline, .k-input--search, * .k-input--error, .k-input--primary, .k-input--compact * - .k-select, .k-toggle, .k-check, .k-radio, * .k-chip-select, .k-chip-input * - .k-label, .k-help, .k-field, .k-fieldset, * .k-form__actions, .k-form__actions--sticky * - .k-slider, .k-file, .k-combobox, .k-rating * - .k-table, .k-table--zebra, .k-table--dense, * .k-table--fixed, .k-table--sticky-header, * .k-table__sort, .k-table__empty * - .k-modal, .k-modal__panel, .k-modal__header, * .k-modal__title, .k-modal__body, .k-modal__footer * - .k-tabs, .k-tab, .k-breadcrumb * - .k-toast, .k-toast--{info,success,warning,danger}, * .k-toast-container * - .k-badge, .k-badge--filled, .k-chip, .k-chip--removable * - .k-alert, .k-alert--{info,success,warning,danger} * - .k-pagination * - .k-progress, .k-spinner, .k-spinner--inline * - .k-stat-tile, .k-stat-marquee * - .k-social-tile, .k-social-tile--historical * - .k-list-row, .k-list-row__title, .k-list-row__meta * - .k-segmented, .k-seg * - .k-drawer, .k-drawer--side * - .k-collapse * - .k-fade-in * * DadKit additions in Phase 3 (DadKit base components): * - .k-top-toolbar (+ --split), .k-input--search-wrapper, * .k-input--search-icon * - .k-action-stack, .k-drawer--inline, .k-drawer__archive-form, * .k-drawer__read-table, .k-drawer__read-label, * .k-table--borderless * - .k-sync-indicator, .k-sync-dot (saving / saved / error states) * - .k-chip__remove, .k-chip-list * - .k-field--inline, .k-field--toggle * - .k-toggle--platform, .k-choice-buttons, .k-preset-buttons * - .k-collapse--advanced * - .k-contact-info, .k-social-account-row, .k-table__load-more * * Phase 4 (DadKit protected row blocks) added the following new * classes to the block-level surface for the four protected * row templates (media, model, model_leads, photographer): * - .k-media-row, .k-media-block, .k-media-main, .k-media-preview, * .k-media-empty, .k-media-variants, .k-variant-zone, * .k-variant-zone--custom, .k-variant-zone__label, * .k-variant-zone__count, .k-media-variant-thumb, * .k-dropzone--active * - .k-model-row, .k-photo-block, .k-photo-block__img, * .k-photo-block__placeholder, .k-photo-block--poster * - .k-photographer-row * - .k-inline-grid (+ --status), .k-inline-field, .k-inline-label * - .k-bulk-upload (+ __card, __title, __actions, __button, * __drop-note, __status) * - .k-crop-stage, .k-crop-dialog, .k-crop-content, * .k-media-preview-dialog, .k-media-preview-modal-image, * .k-cropper-view-box, .k-cropper-point * * Chrome added in Phase 1 (Global layout chrome): * - .kinetic-topbar (+ __inner, __primary, __actions, __brand, * __brand-eyebrow, __brand-text, __icon-btn, __icon-label, * __sidebar-toggle) * - .kinetic-sidebar (+ __brand, __brand-link, __brand-mark, * __nav, __section, __section-header, __group, __group-children, * __link, __link-icon, __link-text, __chevron) * - .kinetic-footer (+ __inner, __copyright, __meta, __meta-item, * __marquee) * - .kinetic-page-title (+ __primary, __eyebrow, __heading, * __watermark) * - .kinetic-breadcrumb (+ __item) * - .kinetic-brand-required (+ __title, __choices, __choice, * __empty) * * Phase 5 (Root system dashboard) added the dashboard-specific * classes (re-skin of the bespoke `.sysdash-*` block in * `src/System/Ui/views/system_dashboard.php`): * - .k-sysdash-page, .k-sysdash-grid, .k-sysdash-span-full, * .k-sysdash-span-half * - .k-sysdash-card (+ --historical, --storage), .k-sysdash-card__header, * .k-sysdash-card__eyebrow, .k-sysdash-card__title, * .k-sysdash-card__action, .k-sysdash-card__secondary-links, * .k-sysdash-card__footer-note * - .k-sysdash-social-grid, .k-sysdash-social-tile (+ --empty, * __image, __scrim, __body, __topline, __chip, __chip-icon, * __chip-label, __chip-handle, __chip-status, __title, * __caption, __time, __video) * - .k-sysdash-social-token-{instagram,facebook,x,twitter,tiktok, * bluesky,youtube,pinterest} (preserves the per-platform icon * background colors) * - .k-sysdash-kpi-grid, .k-sysdash-kpi (+ __value, __label) * - .k-sysdash-list, .k-sysdash-mini-list, .k-sysdash-list__row, * .k-sysdash-list__title, .k-sysdash-list__meta, * .k-sysdash-badges * - .k-sysdash-log-grid, .k-sysdash-log-grid__item, * .k-sysdash-log-grid__bucket * - .k-sysdash-metric-grid, .k-sysdash-metric-row (+ __label, * __caption, __value) * - .k-sysdash-bottom-grid * - .k-sysdash-storage-summary (+ __topline, __value, __meta, * __progress, __footer) * - .k-sysdash-storage-list, .k-sysdash-storage-row (+ --expandable, * __summary, __topline, __label, __path, __value-group, __value, * __share, __progress, __bar, --danger, --warning, --info, --muted) * - .k-sysdash-storage-row__nested (+ __item, __text, __label, * __path, __stats, __value, __share) * - .k-sysdash-storage-drilldowns * - .k-sysdash-storage-details (+ __summary, __body) * - .k-sysdash-storage-detail-row (+ __text, __label, __path, * __stats, __value, __share) * - .k-sysdash-empty * - .k-sysdash-placeholder (+ __eyebrow, __title, __body, __action) * - .k-sysdash-loading * - .k-stat-marquee--hero (acid yellow on black, "Live Stats" hero * strip; Phase 17 wires the JS to fill the cells) * * Phase 8 (Social queue + Social media tool + DadDev widget) added * the per-tool surface for the social queue timeline / history / * settings panels and the DadDev floating chat widget + page mode. * The social queue uses the existing shared primitives (`.k-input`, * `.k-select`, `.k-btn`, `.k-tabs`, `.k-table`, `.k-card`, etc.) and * adds the bespoke layout containers (`.k-sq-toolbar`, * `.k-sq-network-filter`, `.k-sq-timeline`, `.k-sq-post-box`, etc.). * The DadDev widget preserves its bespoke data contract (every * `data-*` attribute, class, ID, and event name is preserved) and * is re-skinned only via new `.k-daddev-*` selectors that win on * specificity. The PIN entry is the toned-down security variant * (sharp corners + monospace, no acid-yellow color flips). * - .k-sq-toolbar (+ __inner, __filter, __divider, __quicklinks) * - .k-sq-network-filter (+ __pill, __pill--active, __pill--icon) * - .k-sq-network-quicklink (+ __link, --instagram, --facebook, * --x, --twitter, --tiktok, --bluesky, --youtube, --pinterest, * --default) — preserves the per-platform brand colors * - .k-sq-tab-content (+ __card, __section) * - .k-sq-card, .k-sq-card__header, .k-sq-card__title, * .k-sq-card__body, .k-sq-card__footer * - .k-sq-timeline (+ __day-separator, __day-label, __item, * __time, __date, __post-box, __post-main, __content, * __media, __post-thumb, __video-tile) * - .k-sq-post-network (+ __handle, __id, --instagram, --facebook, * --x, --twitter, --tiktok, --bluesky, --youtube, --pinterest, * --default) — preserves the per-platform brand colors * - .k-sq-promo-preview (+ --prepend, --append) * - .k-sq-readiness (+ --ready, --blocked) * - .k-sq-caption-form (+ __input, __save) * - .k-sq-action-bar (+ --spacer, --group) * - .k-sq-history-filter (+ __wrap) * - .k-sq-history-table (+ __id, __net, __net-pill, --instagram, * --facebook, --x, --twitter, --tiktok, --bluesky, --youtube, * --pinterest, --default, __status, __time, __product, __media, * __error, __actions) * - .k-sq-platform-tabs (+ __tab, __tab--active, __tab-content) * - .k-sq-settings-card, .k-sq-settings-card--warning, * .k-sq-settings-card--success * - .k-sq-toggle, .k-sq-toggle--important (+ __input, __label) * - .k-sq-twigs, .k-sq-twigs__item, .k-sq-twigs__snippet, * .k-sq-copy-pill * - .k-sq-modetoggle (+ __pill, __pill--active) * - .k-sq-clear-bar (+ __label, __btn) * - .k-sq-restrictions (+ __row, __label, __value) * - .k-sq-alt-grid, .k-sq-alt-card, .k-sq-alt-card__body, * .k-sq-alt-card__footer, .k-sq-alt-thumb * - .k-daddev-fab (+ --open) — replaces the blue gradient FAB * with a flat acid-yellow 64×64 square (Phase 8.6) * - .k-daddev-backdrop, .k-daddev-panel, .k-daddev-panel-header, * .k-daddev-avatar, .k-daddev-title, .k-daddev-subtitle, * .k-daddev-head-actions, .k-daddev-icon-btn, .k-daddev-menu, * .k-daddev-menu-divider, .k-daddev-menu-heading, * .k-daddev-menu-session, .k-daddev-menu-settings, * .k-daddev-setting-row * - .k-daddev-bridge, .k-daddev-bridge--up * - .k-daddev-stream, .k-daddev-row (+ --user, --assistant, * --system, --step), .k-daddev-bubble, .k-daddev-progress * - .k-daddev-approval (+ __title, __preview, __actions, * __approve, __deny, __resolved) * - .k-daddev-lock-screen, .k-daddev-lock-card, * .k-daddev-lock-kicker, .k-daddev-lock-title, * .k-daddev-lock-subtitle * - .k-daddev-pin-dots, .k-daddev-pin-dot (+ --filled) * - .k-daddev-pin-grid, .k-daddev-pin-key (+ --action, * --submit) — Toned-down variant per §7.27 * - .k-daddev-composer (+ __textarea, __actions, __status, * __activity, __activity-char) * - .k-daddev-action-btns (+ __send, __interrupt) * - .k-daddev-page-shell (page mode container) * - .k-daddev-page (page mode body class) * * Phase 7 (Server monitor + System health watch + Social account * updates) added the live-telemetry and per-platform components: * - .k-metric-card (+ --compact, --danger, --warning, --success, * __eyebrow, __value, __sub, __progress) * - .k-metric-grid (responsive 4-column grid for the * server_monitor KPIs) * - .k-metric-detail-card (+ __heading, __row, __label, __value, * __progress) for the Memory / CPU + Uptime detail cards * - .k-metric-mini-card (+ __label, __value) for the smaller * grid cells (Peak Mem% / Swap% / Load/Core% etc.) * - .k-live-indicator (+ __dot, __label) — acid-yellow dot + * uppercase LIVE/PAUSED label, replaces the legacy * `text-bg-secondary / text-bg-success` badges on the * server monitor top strip. NOTE: this is a separate class * from the Phase 3 `.k-sync-indicator` (DadKit inline-save * indicator) — they share a naming theme but are distinct * components. * - .k-log-stream (+ __row, __line, __time, __level, __body, * --info, --notice, --warning, --error, --critical) — full-bleed * .k-card--flat with monospace rows; used for the server monitor * log tail and (when collapsed) the system health watch JSON * context blocks * - .k-platform-card (+ __header, __name, __rate, __stat, __label, * __value, --danger, --warning, --success) — per-platform health * tile for the social account updates "Per-Platform Health" * section (and reused for the system health watch process * family summaries) * - .k-anomaly-row (+ __cell, __cell--{info,warning,danger,muted}, * __tooltip) — 64×64 color-coded squares for the system health * watch anomaly timeline * - .k-process-table (+ __meta, __cmd, __bar) — the server * monitor top-processes table cells * - .k-debug-bootstrap (+ __copy, __textarea) — the AI Debug * Bootstrap card on server monitor * * Phase 9 (Wholesale admin) added the wholesale-specific surface * (49 new classes, see §27 below for the full list). * * Phase 11 (Promotions tool) added the per-tool surface for the * Promotions admin tool. The shared primitives are reused * wherever possible. The bespoke classes add: * - .k-promo-calendar (+ __month, __month__header, __month__title) * - .k-promo-calendar-table, .k-promo-cal-cell (+ --empty, --today), * .k-promo-cal-cell--drag-{range,start,end,continues-left, * continues-right} * - .k-promo-cal-day-head, .k-promo-cal-day-num, .k-promo-cal-day-dow, * .k-promo-cal-observances, .k-promo-cal-observance (+ --more) * - .k-promo-cal-chip (+ --continues-left, --continues-right, * --legend, --draft, --approved, --active, --ended, --canceled, * --failed, --failed_unlaunch, --lightning-type, --lightning- * projected) * - .k-promo-calendar-dragging * - .k-promo-calendar-legend (+ __tz), .k-promo-calendar-load-more * - .k-promo-panel (+ __header, __eyebrow, __title, __body, * __actions) * - .k-promo-field-label, .k-promo-field-label__required, * .k-promo-form-timezone * - .k-promo-input, .k-promo-code-input, .k-promo-theme-editor * - .k-promo-toggle-label, .k-promo-help-toggle, .k-promo-help, * .k-promo-compact-action, .k-promo-preview-frame * - .k-promo-code-tabs (the editor's HTML/CSS/JS sub-tabs) * - .k-promo-form--readonly * - .k-promo-action-tile (+ __icon, __body, __title, __sub, * __chevron) * - .k-promo-autosave-indicator * - .k-promo-agent-shell, .k-promo-agent-topbar (+ __main), * .k-promo-agent-kicker, .k-promo-agent-title, .k-promo-agent-meta, * .k-promo-agent-edit-link * - .k-promo-agent-workspace (2-col on >=992px) * - .k-promo-agent-chat-panel, .k-promo-agent-preview-panel, * .k-promo-agent-chat-head, .k-promo-agent-preview-head * - .k-promo-agent-status, .k-promo-agent-working-file * - .k-promo-agent-chat, .k-promo-agent-composer, .k-promo-agent-input, * .k-promo-agent-send * - .k-promo-agent-preview-frame-wrap, .k-promo-agent-panel * (+ __header, __body), .k-promo-agent-code * - .k-promo-agent-bubble (+ --user, --assistant, --system), * .k-promo-agent-avatar, .k-promo-agent-msg (+ --system) * - .k-promo-design-step (+ --active), .k-promo-design-card * (+ --center) * - .k-promo-design-stepbar, .k-promo-design-section * - .k-promo-design-tag-grid, .k-promo-design-tag * - .k-promo-design-input-block, .k-promo-design-text-input * (+ --grow-textarea) * - .k-promo-design-add-row, .k-promo-design-feature-block * - .k-promo-design-image-section, .k-promo-design-media-target * - .k-promo-design-loading, .k-promo-design-empty * - .k-promo-design-template-head, .k-promo-design-template-grid * - .k-promo-design-template-card (+ __preview, __body, __title, * __meta) * - .k-promo-design-filter-bar, .k-promo-design-filter-btn * - .k-promo-design-media-grid, .k-promo-design-media-option * (+ __frame, __title, __meta) * - .k-promo-design-gif-groups, .k-promo-design-gif-group * (+ __head) * - .k-promo-design-load-more, .k-promo-design-primary * - .k-promo-gifs-shell, .k-promo-gifs-topbar (+ __title, __kicker) * - .k-promo-gifs-panel, .k-promo-gifs-thumb, .k-promo-gifs-url * - .k-promo-gifs-swatches, .k-promo-templates-shell, * .k-promo-templates-topbar, .k-promo-templates-panel * - .k-promo-template-code, .k-promo-template-tab-info * - .k-promo-template-preview-box (+ __head), * .k-promo-template-description * - .k-promo-launch-status--{success,partial,failed} * - .k-promo-launch-count-ok, .k-promo-launch-count-fail, * .k-promo-launch-count-total * - .k-promo-launch-errors, .k-promo-launch-empty * - .k-promo-settings-page, .k-promo-settings-section * (+ __header, __title, __body, __desc) * - .k-promo-settings-meta-row, .k-promo-settings-actions * - .k-promo-settings-meta, .k-promo-settings-meta__count * - .k-promo-settings-row (+ __body, __title, __desc) * - .k-promo-lightning, .k-promo-lightning-exclusions * - .k-promo-lightning-exclusion-chip (+ __remove) * - .k-promo-lightning-exclusions-empty * - .k-promo-lightning-queue (+ __head, __list, __weight, __empty) * - .k-promo-lightning-product-search-results, * .k-promo-lightning-product-search-result * - .k-promo-lightning-product-search-empty * - .k-promo-newsletter-slot (+ __eyebrow, __eyebrow--primary, * __eyebrow--success, __eyebrow--danger, __desc, __hint) * - .k-promo-newsletter-page-header, .k-promo-newsletter-feedback * - .k-promo-price-before, .k-promo-price-after, * .k-promo-price-discount, .k-promo-price-rule * - .k-promo-price-empty, .k-promo-price-warning-row, * .k-promo-price-warning, .k-promo-price-summary * - .k-promo-list (+ __head, __title, __sub, __title-group, __empty, * __link) * - .k-nl-list, .k-nl-list__head, .k-nl-list__title, * .k-nl-list__sub, .k-nl-list__empty, .k-nl-list__link * - .k-nl-cal (+ __head, __month, __nav, __legend, * __legend-item, __legend-swatch) * - .k-nl-cal-grid, .k-nl-cal-cell (+ --today, --blank, --gap) * - .k-nl-cal-day-num (+ --today), .k-nl-cal-chip, * .k-nl-promo-bar, .k-nl-cal-add, .k-nl-cal-gap-hint * - .k-nl-editor (+ __feedback, __form, __col, __col--left, * __col--right), .k-nl-editor-card, .k-nl-editor-actions * - .k-nl-product-slot (+ __head, __title, __actions, __body, * __row, __col, __col--image, __col--fields, __field) * - .k-nl-image-slot (+ __img, __placeholder, __replace) * - .k-nl-status-actions, .k-nl-schedule-row * - .k-nl-preview-frame, .k-nl-preview-wrap * - .k-nl-send-info (+ __row, __label, __value, __meta, * __actions), .k-nl-nearby-promo (+ __list, __item, * __item-name, __item-dates), .k-nl-generate-variants * - .k-nl-audit (+ __head, __status, __counts, __finding, * __finding-row, __finding-icon, __finding-body, __finding-title, * __finding-detail), .k-nl-audit-spamassassin * - .k-nl-settings (+ __field, __form, __row, __actions, * __switch-row, __switch-help, __switch-warning, __planned, * __planned-row) * - .k-nl-subscribers (+ __stats, __stat, __stat-value, * __stat-label, __action-bar, __manual-add, __manual-add-form, * __table-wrap, __empty, __pagination, __count) * - .k-nl-import (+ __upload, __upload-form, __upload-help, * __history, __history-empty, __errors, __errors-list) * - .k-nl-send-log (+ __summary, __row, __status, __count, * __count-failed, __error) * - .k-nl-picker (+ __head, __type-grid, __type-option, * __type-option-name, __type-option-desc, __divider, * __promo-divider, __promo-list, __promo-option, * __promo-option-name, __promo-option-dates, __empty, * __actions, __cancel), .k-nl-modal (+ __backdrop, __panel, * __close, __body, __close-btn) * - .k-nl-variant (+ __intro, __subject, __grid, __col, * __card, __card-head, __card-label, __card-option, * __card-preview, __card-preview-frame, __card-footer, * __card-cta) * - .k-nl-type-button (+ __title, __desc) * * Phase 13 (Media admin + Media search + Product admin) added the * per-tool surface for the media search shell, the product admin * hybrid row, the product admin features editor, and the new * `k-pa-*` adapter helpers. The shared primitives (`.k-card`, * `.k-btn`, `.k-input`, `.k-table`, `.k-alert`, `.k-empty-state`, * `.k-tabs`, etc.) are reused wherever possible; the bespoke * classes below add the per-tool layout chrome. * - .k-ms-shell (+ __head, __primary, __heading, __advanced-toggle, * __body, __search-field, __advanced, __filter-grid, * __filter-cell, __filter-cell--wide, __switches, __actions, * __exclude, __results, __loading) * - .k-msr-toolbar (+ __count, __per-page) * - .k-msr-grid (1 → 2 → 3 → 4 column responsive) * - .k-msr-card (+ __media, __no-preview, __body, __title, __meta, * __meta-tags, __meta-models) * - .k-msr-modal-details (+ __group, __heading, __row, __models, * __empty) * - .k-pa-hybrid-row (+ --head) * - .k-pa-hybrid-cell (+ --info, --variants, --metafields, --actions) * - .k-pa-hybrid-title, .k-pa-hybrid-meta, .k-pa-hybrid-meta--strong * - .k-pa-hybrid-metafield, .k-pa-hybrid-metafield-grid, * .k-pa-hybrid-caption-override, .k-pa-hybrid-slider, * .k-pa-hybrid-control, .k-pa-hybrid-editor-btn, * .k-pa-hybrid-status-row * - .k-pa-dashboard-header (+ __copy, __title, __sub, __notice) * - .k-pa-products-card (+ __head, __title, __sub, __body) * - .k-pa-product-table (+ __row, __cell) * - .k-pa-modal-loading * - .k-pa-definitions-tabs (+ __content, __pane, __pane--active) * - .k-pa-features-editor (+ __row, __col, __image-card, * __image-toolbar, __image-toolbar-label, __image-wrap, __image-help, * __dot-layer, __dot, __dot--desktop, __dot--mobile, * __feature-list, __feature-card, __feature-title, __feature-grid, * __field, __debug, __actions, __alert, __alert-title, __alert-body) * - .k-pagination__btn (+ is-disabled), .k-pagination__label * - .k-tab__btn (button inside a tab) * * Phase 15 (Brand admin + Placeholder tools) added the per-tool * surface for the 8 placeholder tools (Order Monitor, Homepage * Updater, Inventory Reorder, Amazon Restock, Product Asset * Generator, Product Description Tool, Employee Ops Dashboard) * and the Brand Admin tool. The placeholder tools all render * through `src/Ui/PlaceholderToolPage.php`; the Brand Admin * renders through the standard DadKit list + drawer + form * pattern (Phase 3) with a single custom list cell that * combines a 48×48 color swatch logo + a 24px bold uppercase * name. The DadKit.php `errorPage()` helper is also re-skinned * to use the kinetic `.k-alert.k-alert--danger` pattern. * - .k-alert--placeholder (full-bleed acid-yellow page alert) * - .k-alert__eyebrow (12px uppercase tracking-widest) * - .k-alert__message + __message--hero (48px bold uppercase * tracking-tighter headline) * - .k-alert__body (16px body copy) * - .k-alert__action (back-to-dashboard action row) * - .k-brand-identity (brand admin first-column cell) * - .k-brand-identity__swatch (48x48 sharp color thumbnail) * - .k-brand-identity__text (flex column wrapper) * - .k-brand-identity__name (24px bold uppercase name) * - .k-brand-identity__slug (12px uppercase tracking-widest) * - .k-dadkit-error-card (+ __title, __body) — the * `DadKit::errorPage()` helper co-class * * Phase 16 (Public API surfaces) added the public auth + * OAuth callback shells. The login page * (`public/auth/login.php`) and the Meta OAuth callback * (`public/meta_oauth_callback.php`) both render through * `Layout::render` with `show_header/show_sidebar/show_footer * = false` and a body class (`k-login-page` or * `k-callback-page`) that triggers the new §33 surface. * The new class names are listed in §33 at the bottom of * this file. The wholesale portal is unaffected (every * §33 selector is scoped to `body:not(.wholesale-portal-body)`). * The machine endpoints (`import.php`, `mcp.php`, * `thumb.php`, `newsletter/subscribe.php`, * `newsletter/ses_webhook.php`) are JSON- or plain-text-only * and have no human-visible HTML to re-skin, so they are * preserved verbatim. * - body.k-login-page, body.k-callback-page (body class) * - .k-login, .k-callback (full-bleed flex wrapper) * - .k-login__card, .k-callback__card (centered 32rem card) * - .k-login__eyebrow, .k-callback__eyebrow (12px eyebrow) * - .k-login__title, .k-callback__title (clamp 2.5-4rem H1) * - .k-login__form, .k-login__field (form/field rows) * - .k-login__check, .k-login__check-label (remember-me row) * - .k-login__submit (block-width submit) * - .k-login__brand-strip (footer strip with label + link) * - .k-callback__status (flex row for check + eyebrow) * - .k-callback__check (+ --error, --info, __check-glyph) * - .k-callback__pre (monospace connection detail block) * - .k-callback__hint (follow-up hint row) * - .k-callback__back (back link with inline ) */ /* ---- 1. Cards --------------------------------------------------------- */ .k-card { background: var(--gp-bg); border: var(--gp-border-w) solid var(--gp-border); padding: clamp(1.5rem, 3vw, 2.5rem); position: relative; transition: background-color var(--gp-dur) var(--gp-ease), border-color var(--gp-dur) var(--gp-ease), color var(--gp-dur) var(--gp-ease); } .k-card--bordered { /* default; explicit alias */ } .k-card--flat { border: 0; border-bottom: var(--gp-border-w-thin) solid var(--gp-border); } .k-card--filled { background: var(--gp-accent); border-color: var(--gp-accent); color: var(--gp-accent-fg); } .k-card--filled .k-card__eyebrow, .k-card--filled .k-card__meta { color: var(--gp-accent-fg); } .k-card--historical { background: var(--gp-muted); color: var(--gp-muted-foreground); } .k-card--hover:hover, .k-card--hover:focus-within { background: var(--gp-accent); border-color: var(--gp-accent); color: var(--gp-accent-fg); } .k-card--hover:hover .k-card__eyebrow, .k-card--hover:focus-within .k-card__eyebrow, .k-card--hover:hover .k-card__meta, .k-card--hover:focus-within .k-card__meta, .k-card--hover:hover .k-card__title, .k-card--hover:focus-within .k-card__title { color: var(--gp-accent-fg); } /* Group: parent card that auto-inverts child cards on hover/focus-within. */ .k-card--group:hover .k-card, .k-card--group:focus-within .k-card, .k-card--group:hover .k-card--hover, .k-card--group:focus-within .k-card--hover { background: var(--gp-accent); border-color: var(--gp-accent); color: var(--gp-accent-fg); } .k-card--group:hover .k-card__eyebrow, .k-card--group:focus-within .k-card__eyebrow, .k-card--group:hover .k-card__title, .k-card--group:focus-within .k-card__title, .k-card--group:hover .k-card__meta, .k-card--group:focus-within .k-card__meta { color: var(--gp-accent-fg); } /* Card with internal header / footer slots (used by modals, KPI tiles, * the system dashboard, etc.). */ .k-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--gp-sp-4); padding: 0 0 var(--gp-sp-4); border-bottom: var(--gp-border-w) solid var(--gp-border); margin-bottom: var(--gp-sp-4); } .k-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--gp-sp-3); padding: var(--gp-sp-4) 0 0; border-top: var(--gp-border-w) solid var(--gp-border); margin-top: var(--gp-sp-4); } .k-card__eyebrow { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gp-muted-foreground); font-weight: 500; margin-bottom: var(--gp-sp-2); } .k-card__title { font-family: var(--gp-font-display); font-size: clamp(1.5rem, 4vw, 3.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9; color: inherit; margin: 0 0 var(--gp-sp-3); } .k-card__body { color: inherit; } .k-card__meta { color: var(--gp-muted-foreground); font-size: 0.875rem; } .k-card__number { display: block; font-family: var(--gp-font-display); font-size: clamp(6rem, 8vw, 12rem); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em; color: var(--gp-accent); text-align: center; } /* ---- 2. Buttons ------------------------------------------------------- */ .k-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 2rem; background: transparent; color: var(--gp-fg); border: var(--gp-border-w) solid var(--gp-border); border-radius: 0; font-family: var(--gp-font-display); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; user-select: none; transition: transform var(--gp-dur) var(--gp-ease), background-color var(--gp-dur) var(--gp-ease), color var(--gp-dur) var(--gp-ease), border-color var(--gp-dur) var(--gp-ease); line-height: 1.2; } .k-btn:hover { transform: scale(1.05); } .k-btn:active { transform: scale(0.95); } .k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; } .k-btn--primary { background: var(--gp-accent); color: var(--gp-accent-fg); border-color: var(--gp-accent); } .k-btn--primary:hover { background: var(--gp-fg); color: var(--gp-bg); border-color: var(--gp-fg); } .k-btn--outline { background: transparent; color: var(--gp-fg); border-color: var(--gp-border); } .k-btn--outline:hover { background: var(--gp-fg); color: var(--gp-bg); border-color: var(--gp-fg); } .k-btn--ghost { background: transparent; border-color: transparent; color: var(--gp-fg); } .k-btn--ghost:hover { color: var(--gp-accent); } .k-btn--danger { background: var(--gp-danger); color: var(--gp-danger-fg); border-color: var(--gp-danger); } .k-btn--danger:hover { filter: brightness(0.85); } .k-btn--success { background: var(--gp-success); color: var(--gp-success-fg); border-color: var(--gp-success); } .k-btn--success:hover { filter: brightness(0.85); } .k-btn--sm { min-height: 2.5rem; padding: 0 1rem; font-size: 0.75rem; } .k-btn--lg { min-height: 5rem; padding: 0 3rem; font-size: 1rem; } .k-btn--block { width: 100%; } .k-btn--icon { min-width: 3.5rem; min-height: 3.5rem; padding: 0; width: 3.5rem; height: 3.5rem; } .k-btn--loading { position: relative; color: transparent !important; pointer-events: none; } .k-btn--loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: k-spin 0.6s linear infinite; color: var(--gp-bg); } .k-btn--loading.k-btn--outline::after { color: var(--gp-fg); } .k-btn--loading.k-btn--ghost::after { color: var(--gp-fg); } @keyframes k-spin { to { transform: rotate(360deg); } } /* ---- 3. Inputs -------------------------------------------------------- */ .k-input, .k-select, input.k-input, textarea.k-input, select.k-select { display: block; width: 100%; min-height: 3.5rem; padding: 0.5rem 0; background: transparent; color: var(--gp-fg); border: 0; border-bottom: var(--gp-border-w) solid var(--gp-border); border-radius: 0; font-family: var(--gp-font-display); font-weight: 700; font-size: clamp(1.25rem, 1.6vw, 1.5rem); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2; transition: border-color var(--gp-dur) var(--gp-ease); } .k-input::placeholder { color: var(--gp-muted); } .k-input:focus, .k-select:focus { border-bottom-color: var(--gp-accent); outline: none; box-shadow: none; } .k-input--error, .k-select--error { border-bottom-color: var(--gp-danger); } .k-input--multiline, textarea.k-input--multiline { min-height: 9rem; padding: 1.25rem; border: var(--gp-border-w) solid var(--gp-border); resize: vertical; line-height: 1.4; } .k-input--primary { min-height: 6rem; font-size: clamp(1.75rem, 3vw, 2.5rem); } .k-input--compact { min-height: 2.5rem; font-size: 1rem; border-bottom-width: var(--gp-border-w-thin); border: var(--gp-border-w-thin) solid var(--gp-border); padding: 0.25rem 0.5rem; } .k-input--search { background: var(--gp-muted); border: var(--gp-border-w) solid var(--gp-border); padding: 0 3rem 0 1.25rem; position: relative; } .k-input--mono, textarea.k-input--mono { font-family: var(--gp-font-mono); text-transform: none; letter-spacing: 0; font-weight: 500; word-break: break-all; } .k-select { appearance: none; -webkit-appearance: none; background-color: var(--gp-muted); border: var(--gp-border-w) solid var(--gp-border); padding: 0 2.5rem 0 1.25rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--gp-fg) 50%), linear-gradient(135deg, var(--gp-fg) 50%, transparent 50%); background-position: right 1.1rem center, right 0.6rem center; background-size: 6px 6px; background-repeat: no-repeat; } .k-select:hover { border-color: var(--gp-accent); } .k-label { display: block; font-family: var(--gp-font-display); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gp-muted-foreground); font-weight: 500; margin-bottom: var(--gp-sp-2); } .k-label--required::after { content: ' *'; color: var(--gp-danger); margin-left: 0.125rem; } .k-help { display: block; font-size: 0.875rem; color: var(--gp-muted-foreground); font-style: italic; margin-top: 0.5rem; } .k-field { display: block; margin-bottom: var(--gp-sp-8); } .k-field--error .k-label { color: var(--gp-accent); } .k-field--error .k-input, .k-field--error .k-select { border-color: var(--gp-danger); } .k-fieldset { border: 0; border-top: var(--gp-border-w) solid var(--gp-border); padding-top: var(--gp-sp-6); margin: var(--gp-sp-8) 0; } .k-fieldset > legend { font-family: var(--gp-font-display); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gp-fg); padding: 0 var(--gp-sp-2); } .k-form__actions { display: flex; justify-content: flex-end; gap: var(--gp-sp-3); margin-top: var(--gp-sp-8); } .k-form__actions--sticky { position: sticky; bottom: 0; background: var(--gp-bg); border-top: var(--gp-border-w) solid var(--gp-border); padding: var(--gp-sp-4) 0; z-index: 5; } .k-check, .k-radio { appearance: none; -webkit-appearance: none; width: 1.5rem; height: 1.5rem; background: var(--gp-bg); border: var(--gp-border-w) solid var(--gp-border); display: inline-block; position: relative; cursor: pointer; vertical-align: middle; transition: background-color var(--gp-dur) var(--gp-ease), border-color var(--gp-dur) var(--gp-ease); } .k-radio { border-radius: 50% !important; } .k-check:checked, .k-radio:checked { background: var(--gp-accent); border-color: var(--gp-accent); } .k-check:checked::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0.5rem; height: 0.875rem; border-right: 3px solid var(--gp-bg); border-bottom: 3px solid var(--gp-bg); transform: rotate(45deg) translate(-1px, -2px); } .k-radio:checked::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0.5rem; height: 0.5rem; background: var(--gp-bg); border-radius: 50% !important; } /* Toggle (kinetic replacement for `.form-switch`) */ .k-toggle { appearance: none; -webkit-appearance: none; display: inline-block; position: relative; width: 3.5rem; height: 2rem; background: var(--gp-muted); border: var(--gp-border-w-thin) solid var(--gp-border); cursor: pointer; vertical-align: middle; transition: background-color var(--gp-dur) var(--gp-ease), border-color var(--gp-dur) var(--gp-ease); } .k-toggle::after { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.5rem; height: 1.5rem; background: var(--gp-fg); transition: transform var(--gp-dur) var(--gp-ease); } .k-toggle:checked { background: var(--gp-accent); border-color: var(--gp-accent); } .k-toggle:checked::after { background: var(--gp-accent-fg); transform: translateX(1.5rem); } /* File input (`.k-file`) */ .k-file { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 10rem; width: 100%; border: 2px dashed var(--gp-accent); background: transparent; color: var(--gp-fg); padding: var(--gp-sp-6); text-align: center; cursor: pointer; transition: background-color var(--gp-dur) var(--gp-ease); font-family: var(--gp-font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.875rem; } .k-file:hover, .k-file.is-dragover { background: var(--gp-muted); } .k-file input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Slider (`.k-slider`) */ .k-slider { appearance: none; -webkit-appearance: none; width: 100%; height: 0.5rem; background: var(--gp-muted); border-radius: 0; outline: none; cursor: pointer; } .k-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 1.5rem; height: 1.5rem; background: var(--gp-fg); cursor: pointer; border: var(--gp-border-w) solid var(--gp-border); border-radius: 50% !important; } .k-slider::-moz-range-thumb { width: 1.5rem; height: 1.5rem; background: var(--gp-fg); cursor: pointer; border: var(--gp-border-w) solid var(--gp-border); border-radius: 50% !important; } /* Combobox (`.k-combobox`) */ .k-combobox { position: relative; display: block; } .k-combobox__results { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--gp-bg); border: var(--gp-border-w) solid var(--gp-border); max-height: 13.75rem; overflow-y: auto; display: none; } .k-combobox.is-open .k-combobox__results { display: block; } .k-combobox__result { display: block; width: 100%; min-height: 3rem; padding: 0 var(--gp-sp-4); background: transparent; border: 0; border-bottom: var(--gp-border-w-thin) solid var(--gp-border); color: var(--gp-fg); text-align: left; cursor: pointer; font-family: var(--gp-font-body); text-transform: none; font-size: 0.875rem; } .k-combobox__result:hover, .k-combobox__result.is-active { background: var(--gp-accent); color: var(--gp-accent-fg); } /* Chip-select (`.k-chip-select`) — multi-select rendered as a row of * `.k-chip` elements wrapping a hidden `` inside a label * (so the label is the click target). The input itself * stays visually hidden but is fully accessible. */ .k-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gp-sp-2); cursor: pointer; } .k-file i { font-size: 1.5rem; color: var(--gp-accent); } .k-file input[type="file"]::file-selector-button { margin-right: var(--gp-sp-3); padding: 0 var(--gp-sp-4); min-height: 2.5rem; background: var(--gp-accent); color: var(--gp-accent-fg); border: 0; font-family: var(--gp-font-display); text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; } /* 21.13 Contact info grid (`.k-contact-info`). */ .k-contact-info .col-md-4 > .k-input, .k-contact-info .col-md-6 > .k-input { width: 100%; } /* 21.14 Combobox — see §3.1 components.css; the `dadkit-relation` * root element is rendered with `k-combobox` co-class so the * new rules win. The `k-combobox__selected` row is new. */ .k-combobox__selected { display: flex; flex-wrap: wrap; gap: var(--gp-sp-2); } .k-combobox__selected .k-chip { margin: 0; } .k-combobox .k-input--search { border: var(--gp-border-w) solid var(--gp-border); } /* 21.15 Empty state table cell (the `.k-table__empty` rule already * exists in §4; the new variant `.k-alert--empty` is a * compact variant the table can use without surrounding * card chrome). */ .k-table__load-more { font-family: var(--gp-font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--gp-muted-foreground); padding: var(--gp-sp-6) var(--gp-sp-4); } /* 21.16 Collapse (`.k-collapse` is in §17; the inline-block-mode * advanced options section needs a slightly different * treatment when used inside the DadKit form chrome). */ .k-collapse--advanced { margin-top: var(--gp-sp-6); } .k-collapse--advanced .k-collapse__body { padding: var(--gp-sp-4) 0; } .k-collapse--advanced .k-collapse__header { width: 100%; text-align: left; } .k-collapse--advanced .k-collapse__header[aria-expanded="true"] { color: var(--gp-accent); } /* 21.17 String list chip group (legacy `dadkit-string-list__chip` * is rendered with `k-chip` co-class; the new rule keeps * the visual in line with the rest of the chip system). */ .dadkit-string-list__chip.k-chip { background: var(--gp-muted); border: var(--gp-border-w-thin) solid var(--gp-border); color: var(--gp-fg); padding: 0.25rem 0.5rem 0.25rem 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: var(--gp-sp-2); } /* ---- 22. Phase 4 — DadKit protected row blocks ----------------------- * * The four bespoke row templates under * `apps/{media_admin,model_admin,model_leads,photographer_admin}/templates/gruff-pup/row.html` * are intentionally designed and **MUST NOT BE EDITED** (per the * hard constraint at the top of `KINETIC_REDESIGN_PLAN.md`). * They reference `*_block` context variables that each * `DadKit\Adapters\*Adapter::getTemplateContext()` builds. This * section re-skins the *containers* the templates use to host * the per-cell block content. * * Class strategy (per Phase 3's "co-class" pattern): * - The legacy `dadkit-*` class names are preserved on every * container so the JS in `public/assets/app.js` (drag-and-drop, * crop, preview, etc.) keeps working unchanged. * - A new `k-*` co-class is added to the same element. The * compound selector (`.dadkit-X.k-X`) gives the kinetic rule * a higher specificity than the legacy `app.css` rule and the * new kinetic visual wins. * - All new rules use `--gp-*` tokens (acid yellow accent, sharp * corners, 2px borders, no shadows) per `KINETIC_REDESIGN_PROMPT.md` §2. */ /* 22.1 Media row grid (5 cells: media, ratings, status, products, models). * The row is already a grid from Phase 3 (see `dadkit-table` * rules); this section layers the per-cell separators. * Selectors use the `body:not(.wholesale-portal-body)` parent * for higher specificity (0,2,0 vs the legacy `.dadkit-media-row` * rule in `app.css` at 0,1,0) so the kinetic visual wins without * rewriting the four `row.html` templates (per the plan's * Phase 4 hard constraint). */ body:not(.wholesale-portal-body) .dadkit-media-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; align-items: stretch; width: 100%; max-width: 100%; border: var(--gp-border-w) solid var(--gp-border); background: var(--gp-bg); } body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell { padding: var(--gp-sp-4); border-right: var(--gp-border-w-thin) solid var(--gp-border); display: flex; flex-direction: column; gap: var(--gp-sp-3); min-width: 0; } body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell:last-child { border-right: 0; } body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__label { font-family: var(--gp-font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--gp-muted-foreground); font-weight: 700; } @media (max-width: 1200px) { body:not(.wholesale-portal-body) .dadkit-media-row { grid-template-columns: 1fr 1fr; } body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell { border-right: var(--gp-border-w-thin) solid var(--gp-border); border-bottom: var(--gp-border-w-thin) solid var(--gp-border); } body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell:nth-child(2n) { border-right: 0; } } @media (max-width: 768px) { body:not(.wholesale-portal-body) .dadkit-media-row { grid-template-columns: 1fr; } body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell { border-right: 0; } } /* 22.2 Media block (the main + variants grid in the first cell). */ .dadkit-media-block.k-media-block { display: grid; grid-template-columns: 240px 1fr; gap: var(--gp-sp-4); align-items: start; max-width: 100%; min-width: 0; transition: background-color var(--gp-dur-fast) var(--gp-ease), border-color var(--gp-dur-fast) var(--gp-ease); } @media (max-width: 900px) { .dadkit-media-block.k-media-block { grid-template-columns: 1fr; } } /* 22.3 Main media preview container — 240px square sharp frame. * The plan's "poster" effect: a 2px acid-yellow border on * hover / drag-over. */ .dadkit-media-main.k-media-main { width: 240px; height: 240px; min-width: 0; min-height: 240px; border: var(--gp-border-w) solid var(--gp-border); background: var(--gp-muted); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; transition: border-color var(--gp-dur-fast) var(--gp-ease), background-color var(--gp-dur-fast) var(--gp-ease); } .dadkit-media-main.k-media-main:hover, .dadkit-media-main.k-media-main.dadkit-dropzone--active.k-dropzone--active, .dadkit-media-main.k-media-main.k-dropzone--active { border-color: var(--gp-accent); background: var(--gp-accent); } .dadkit-media-main.k-media-main:hover img, .dadkit-media-main.k-media-main.dadkit-dropzone--active.k-dropzone--active img, .dadkit-media-main.k-media-main.k-dropzone--active img { mix-blend-mode: normal; opacity: 0.92; } /* 22.4 The main media image (and the empty state) sit at full * container size with `object-fit: contain` so the aspect * ratio is preserved inside the 240×240 frame. */ .dadkit-media-main.k-media-main .dadkit-media-preview.k-media-preview, .dadkit-media-main.k-media-main .dadkit-media-empty.k-media-empty { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; background: var(--gp-muted); cursor: zoom-in; display: block; } .dadkit-media-main.k-media-main .dadkit-media-empty.k-media-empty { color: var(--gp-muted-foreground); font-family: var(--gp-font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; align-items: center; justify-content: center; display: flex; } /* 22.5 Variants strip — horizontal flex of 56×56 squares. */ .dadkit-media-variants.k-media-variants { display: flex; gap: var(--gp-sp-2); flex-wrap: wrap; max-width: 100%; min-width: 0; align-content: flex-start; align-items: flex-start; } /* 22.6 Variant zone button (a single 56×56 drop zone). 2px dashed * border in `var(--gp-border)`, acid-yellow on drag-over. */ .dadkit-variant-zone.k-variant-zone { height: 56px; min-width: 28px; padding: 0; border: var(--gp-border-w) dashed var(--gp-border); background: var(--gp-muted); color: var(--gp-fg); position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; cursor: copy; transition: border-color var(--gp-dur-fast) var(--gp-ease), background-color var(--gp-dur-fast) var(--gp-ease); } .dadkit-variant-zone.k-variant-zone:hover, .dadkit-variant-zone.k-variant-zone.dadkit-dropzone--active.k-dropzone--active, .dadkit-variant-zone.k-variant-zone.k-dropzone--active { border-color: var(--gp-accent); background: var(--gp-accent); color: var(--gp-accent-fg); } .dadkit-variant-zone.k-variant-zone--custom { width: 56px !important; min-width: 56px !important; } .dadkit-variant-zone.k-variant-zone .dadkit-media-variant-thumb.k-media-variant-thumb { width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; object-fit: cover; object-position: center; } .dadkit-variant-zone.k-variant-zone.is-disabled { cursor: not-allowed; opacity: 0.55; } .dadkit-variant-zone.k-variant-zone__label, .dadkit-variant-zone .dadkit-variant-zone__label.k-variant-zone__label { font-family: var(--gp-font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; color: inherit; line-height: 1; font-weight: 700; } .dadkit-variant-zone.k-variant-zone__count, .dadkit-variant-zone .dadkit-variant-zone__count.k-variant-zone__count { position: absolute; right: 4px; bottom: 4px; min-width: 1.25rem; height: 1.25rem; font-family: var(--gp-font-display); font-size: 0.6875rem; font-weight: 700; background: var(--gp-accent); color: var(--gp-accent-fg); border: 0; border-radius: 0; padding: 0 0.3rem; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.04em; } /* 22.7 Active dropzone state. The JS in `app.js` adds * `dadkit-dropzone--active` on drag-over; the new * `.k-dropzone--active` co-class is on the same element and * the compound selector wins. */ .dadkit-dropzone--active.k-dropzone--active { border-color: var(--gp-accent); background: var(--gp-accent); color: var(--gp-accent-fg); box-shadow: 0 0 0 2px rgba(223, 225, 4, 0.25); } /* 22.8 Model + model_leads row grid (the 4 cells: reference * photo, status/type, names/tags, social). The outer * `.dadkit-model-row` is just a `
` wrapper today; the * actual layout is delegated to Bootstrap's `.row .g-3` * inside the template. The new rule layers a sharp border * and a no-shadow grid on top of the Bootstrap grid. * Selectors use the `body:not(.wholesale-portal-body)` parent * for higher specificity (0,2,0) so the kinetic visual wins * without rewriting the four `row.html` templates. */ body:not(.wholesale-portal-body) .dadkit-model-row { width: 100%; max-width: 100%; background: var(--gp-bg); border: var(--gp-border-w) solid var(--gp-border); padding: var(--gp-sp-4); display: flex; flex-direction: column; gap: var(--gp-sp-4); } body:not(.wholesale-portal-body) .dadkit-model-row > .row { margin: 0; --bs-gutter-x: var(--gp-sp-4); --bs-gutter-y: var(--gp-sp-4); } body:not(.wholesale-portal-body) .dadkit-model-row > .row > [class*="col-"] { display: flex; flex-direction: column; gap: var(--gp-sp-3); min-width: 0; } /* 22.9 Reference photo block — the "poster" effect: 200×280 * portrait ratio, sharp 2px border, model name overlaid in * the bottom-left in bold uppercase on hover. */ .dadkit-model-photo.k-photo-block { width: 100%; aspect-ratio: 200 / 280; min-height: 200px; max-height: 320px; border: var(--gp-border-w) solid var(--gp-border); background: var(--gp-muted); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; overflow: hidden; transition: border-color var(--gp-dur-fast) var(--gp-ease), background-color var(--gp-dur-fast) var(--gp-ease); } .dadkit-model-photo.k-photo-block:hover, .dadkit-model-photo.k-photo-block.dadkit-model-photo--active.k-photo-block--active { border-color: var(--gp-accent); background: var(--gp-accent); } .dadkit-model-photo.k-photo-block .dadkit-model-photo__img.k-photo-block__img { width: 100%; height: 100%; min-height: 0; max-width: 100%; object-fit: cover; object-position: center top; } .dadkit-model-photo.k-photo-block .dadkit-model-photo__placeholder.k-photo-block__placeholder { color: var(--gp-muted-foreground); font-family: var(--gp-font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; text-align: center; padding: var(--gp-sp-3); font-weight: 700; } .dadkit-model-photo.k-photo-block .dadkit-model-photo__input.k-photo-block__input { display: none; } .dadkit-model-photo.k-photo-block--poster { /* The "poster" variant overlays the model's display_name in * bold uppercase on the bottom-left on hover. The block * builder is responsible for emitting the * `` element. */ color: var(--gp-fg); } .dadkit-model-photo.k-photo-block--poster .k-photo-block__caption { position: absolute; left: 0; bottom: 0; padding: var(--gp-sp-2) var(--gp-sp-3); background: var(--gp-bg); color: var(--gp-fg); font-family: var(--gp-font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity var(--gp-dur) var(--gp-ease), transform var(--gp-dur) var(--gp-ease); pointer-events: none; border-top: var(--gp-border-w-thin) solid var(--gp-accent); border-right: var(--gp-border-w-thin) solid var(--gp-accent); } .dadkit-model-photo.k-photo-block--poster:hover .k-photo-block__caption, .dadkit-model-photo.k-photo-block--poster:focus-within .k-photo-block__caption { opacity: 1; transform: translateY(0); } /* 22.10 Photographer row container (3 cells: identity, contact, * social). The row.html wraps in `.row.g-3`; the new rule * layers the sharp border / background. Uses the * `body:not(.wholesale-portal-body)` parent selector for * higher specificity. */ body:not(.wholesale-portal-body) .dadkit-photographer-row { width: 100%; max-width: 100%; background: var(--gp-bg); border: var(--gp-border-w) solid var(--gp-border); padding: var(--gp-sp-4); display: flex; flex-direction: column; gap: var(--gp-sp-4); } body:not(.wholesale-portal-body) .dadkit-photographer-row > .row { margin: 0; --bs-gutter-x: var(--gp-sp-4); --bs-gutter-y: var(--gp-sp-4); } body:not(.wholesale-portal-body) .dadkit-photographer-row > .row > [class*="col-"] { display: flex; flex-direction: column; gap: var(--gp-sp-3); min-width: 0; } /* 22.11 Inline field grid (the model + photographer inline-edit * cells). The `.dadkit-inline-grid` is a CSS-grid wrapper * that the per-field `render*` arms in * `DadKitInlineBlockRenderer` emit. The new rule layers * the kinetic border / padding. */ .dadkit-inline-grid.k-inline-grid { display: grid; gap: var(--gp-sp-3); background: var(--gp-muted); border: var(--gp-border-w-thin) solid var(--gp-border); padding: var(--gp-sp-3); } .dadkit-inline-grid--status.k-inline-grid--status { gap: var(--gp-sp-4); row-gap: var(--gp-sp-4); } .dadkit-inline-field.k-inline-field { display: grid; gap: var(--gp-sp-2); min-width: 0; } .dadkit-inline-label.k-inline-label { font-family: var(--gp-font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; color: var(--gp-muted-foreground); font-weight: 700; } /* 22.12 Bulk upload zone (the `MediaAdminBulkUploadService` card). * The card is a `.k-file` variant — full-width drop zone * with a 2px dashed border, drag-over paints acid-yellow. */ .dadkit-bulk-upload.k-bulk-upload { position: relative; max-height: 0; margin-bottom: 0 !important; overflow: hidden; opacity: 0; transform: translateY(-14px); pointer-events: none; transition: max-height var(--gp-dur) var(--gp-ease), margin-bottom var(--gp-dur) var(--gp-ease), opacity var(--gp-dur-fast) var(--gp-ease), transform var(--gp-dur) var(--gp-ease); } .dadkit-bulk-upload__card.k-bulk-upload__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gp-sp-4); align-items: center; padding: var(--gp-sp-6) var(--gp-sp-8); border: var(--gp-border-w) dashed var(--gp-border); background: var(--gp-muted); color: var(--gp-fg); transition: background-color var(--gp-dur-fast) var(--gp-ease), border-color var(--gp-dur-fast) var(--gp-ease); } .dadkit-bulk-upload__copy.k-bulk-upload__copy { display: flex; align-items: center; gap: var(--gp-sp-3); min-width: 0; } .dadkit-bulk-upload__icon.k-bulk-upload__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: var(--gp-accent); color: var(--gp-accent-fg); font-size: 1.25rem; flex-shrink: 0; } .dadkit-bulk-upload__title.k-bulk-upload__title { font-family: var(--gp-font-display); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.15; margin: 0; } .dadkit-bulk-upload__actions.k-bulk-upload__actions { display: flex; align-items: center; justify-content: flex-end; } .dadkit-bulk-upload__button.k-bulk-upload__button { min-width: 8.25rem; min-height: 3.5rem; padding: 0 2rem; background: var(--gp-accent); color: var(--gp-accent-fg); border: var(--gp-border-w) solid var(--gp-accent); font-family: var(--gp-font-display); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; cursor: pointer; transition: transform var(--gp-dur) var(--gp-ease), background-color var(--gp-dur) var(--gp-ease); } .dadkit-bulk-upload__button.k-bulk-upload__button:hover { background: var(--gp-fg); color: var(--gp-bg); border-color: var(--gp-fg); transform: scale(1.02); } .dadkit-bulk-upload__drop-note.k-bulk-upload__drop-note { grid-column: 1 / -1; display: none; align-items: center; justify-content: center; min-height: 4.25rem; border: var(--gp-border-w) dashed var(--gp-accent); background: var(--gp-accent); color: var(--gp-accent-fg); font-family: var(--gp-font-display); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .dadkit-bulk-upload__status.k-bulk-upload__status { grid-column: 1 / -1; min-height: 1rem; color: var(--gp-muted-foreground); font-size: 0.875rem; } .dadkit-bulk-upload.is-dragging-files.k-bulk-upload, .dadkit-bulk-upload.is-hovered.k-bulk-upload { max-height: 16.25rem; margin-bottom: 1.5rem !important; opacity: 1; transform: translateY(0); pointer-events: auto; } .dadkit-bulk-upload.is-dragging-files .dadkit-bulk-upload__card.k-bulk-upload__card, .dadkit-bulk-upload.is-hovered .dadkit-bulk-upload__card.k-bulk-upload__card { border-color: var(--gp-accent); background: var(--gp-accent); color: var(--gp-accent-fg); } .dadkit-bulk-upload.is-dragging-files .dadkit-bulk-upload__drop-note.k-bulk-upload__drop-note, .dadkit-bulk-upload.is-hovered .dadkit-bulk-upload__drop-note.k-bulk-upload__drop-note { display: flex; } .dadkit-bulk-upload.is-uploading.k-bulk-upload .dadkit-bulk-upload__card.k-bulk-upload__card { opacity: 0.88; } @media (max-width: 1200px) { .dadkit-bulk-upload__card.k-bulk-upload__card { grid-template-columns: 1fr; } .dadkit-bulk-upload__actions.k-bulk-upload__actions { justify-content: flex-start; } } /* 22.13 Cropper + preview modal chrome. The two modals in * `footer.php` (`#dadkitCropModal` and * `#dadkitMediaPreviewModal`) keep their * `data-bs-toggle="modal"` data-bus. The new rules paint * the panel chrome in the kinetic style. */ .dadkit-crop-dialog.k-crop-dialog, .dadkit-media-preview-dialog.k-media-preview-dialog { width: min(96vw, 1600px); max-width: min(96vw, 1600px); margin: 0.5rem auto; } .dadkit-crop-content.k-crop-content { height: calc(100vh - 1rem); min-height: calc(100vh - 1rem); background: var(--gp-bg); border: var(--gp-border-w) solid var(--gp-border); } .dadkit-crop-stage.k-crop-stage { flex: 1 1 auto; min-height: 320px; height: calc(100vh - 220px); max-height: calc(100vh - 220px); overflow: hidden; display: flex; align-items: stretch; justify-content: center; background: var(--gp-muted); border: var(--gp-border-w-thin) solid var(--gp-border); } .dadkit-crop-stage.k-crop-stage img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; display: block; } .dadkit-media-preview-modal-image.k-media-preview-modal-image { max-width: 100%; max-height: calc(100vh - 200px); width: auto; height: auto; object-fit: contain; border: var(--gp-border-w-thin) solid var(--gp-border); background: var(--gp-muted); } /* 22.14 Cropper.js outline — paint the crop box in acid yellow * instead of the default soft blue. */ .cropper-view-box.k-cropper-view-box, .k-cropper-view-box { outline: 2px solid var(--gp-accent); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); } .cropper-point.k-cropper-point, .k-cropper-point { width: 10px; height: 10px; background-color: var(--gp-accent); } .cropper-line.k-cropper-line, .k-cropper-line { background-color: var(--gp-accent); } .cropper-dashed.k-cropper-dashed, .k-cropper-dashed { border: 1px dashed var(--gp-accent); } /* 22.15 Relation picker chip (`.dadkit-relation__chip`) — keep * the inline-save behavior intact (the JS in * `DadKitRelationRenderer` / `app.js` rewrites these * chips). The new rule layers the kinetic chip look. */ .dadkit-relation__chip.k-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--gp-sp-3); padding: 0.4rem 0.6rem; background: var(--gp-muted); border: var(--gp-border-w-thin) solid var(--gp-border); min-width: 0; } .dadkit-relation__chip.k-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dadkit-relation__chip-remove.k-chip__remove { appearance: none; position: absolute; top: -6px; right: -6px; width: 1.25rem; height: 1.25rem; background: var(--gp-bg); color: var(--gp-fg); border: var(--gp-border-w-thin) solid var(--gp-border); display: inline-flex; align-items: center; justify-content: center; font-size: 0.6875rem; line-height: 1; font-weight: 700; cursor: pointer; transition: background-color var(--gp-dur-fast) var(--gp-ease), color var(--gp-dur-fast) var(--gp-ease), border-color var(--gp-dur-fast) var(--gp-ease); } .dadkit-relation__chip-remove.k-chip__remove:hover, .dadkit-relation__chip-remove.k-chip__remove:focus { background: var(--gp-accent); color: var(--gp-accent-fg); border-color: var(--gp-accent); } .dadkit-relation__chip-remove.k-chip__remove i { font-weight: 700; } /* 22.16 Relation picker dropdown — 220px max-height, 2px border, * acid-yellow on active. The dropdown is teleported to * body via `