/* ============================================================ Florentini v5 — Motion & micro-interaction layer Loaded last in so equal-specificity rules win. Reuses existing tokens: --ease-expo, --t-fast/med/slow, --glass-shadow(-lift), brand colors. ============================================================ */ :root { --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot */ --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* smooth settle */ --lift-shadow: 0 18px 40px rgba(74,107,62,0.16), 0 3px 8px rgba(74,107,62,0.08); } /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ 1. ENTRANCES — gentle rise + fade (replaces opacity-only) ============================================================ */ .page-enter { animation: flPageRise 460ms var(--ease-soft) both; } @keyframes flPageRise { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } } .fade-stagger > * { animation: flRise 560ms var(--ease-soft) both; } @keyframes flRise { 0% { opacity: 0; transform: translateY(16px) scale(0.985); } 100% { opacity: 1; transform: none; } } .fade-stagger > *:nth-child(1) { animation-delay: 40ms; } .fade-stagger > *:nth-child(2) { animation-delay: 80ms; } .fade-stagger > *:nth-child(3) { animation-delay: 120ms; } .fade-stagger > *:nth-child(4) { animation-delay: 160ms; } .fade-stagger > *:nth-child(5) { animation-delay: 200ms; } .fade-stagger > *:nth-child(6) { animation-delay: 240ms; } .fade-stagger > *:nth-child(7) { animation-delay: 280ms; } .fade-stagger > *:nth-child(8) { animation-delay: 320ms; } .fade-stagger > *:nth-child(9) { animation-delay: 360ms; } .fade-stagger > *:nth-child(10) { animation-delay: 400ms; } .fade-stagger > *:nth-child(11) { animation-delay: 440ms; } .fade-stagger > *:nth-child(12) { animation-delay: 480ms; } .fade-stagger > *:nth-child(13) { animation-delay: 520ms; } .fade-stagger > *:nth-child(14) { animation-delay: 560ms; } /* ============================================================ 2. CARDS / WIDGETS — hover lift ============================================================ */ .v5-widget { transition: transform var(--t-med) var(--ease-expo), box-shadow var(--t-med) var(--ease-expo), border-color var(--t-med) var(--ease-expo); will-change: transform; } .v5-widget:hover { transform: translateY(-4px); box-shadow: var(--lift-shadow); border-color: rgba(122,148,102,0.30); } .glass-card:hover { transform: translateY(-3px); box-shadow: var(--lift-shadow); } /* widget header icon comes alive when its card is hovered */ .v5-widget .glyph, .v5-widget .svg-glyph { display: inline-flex; transition: transform var(--t-med) var(--ease-back), color var(--t-med) var(--ease-expo); } .v5-widget:hover .glyph, .v5-widget:hover .svg-glyph { transform: scale(1.14) rotate(-4deg); } /* ============================================================ 3. KPI strip — hover pop ============================================================ */ .v5-kpi { transition: transform var(--t-med) var(--ease-expo), box-shadow var(--t-med) var(--ease-expo); } .v5-kpi:hover { transform: translateY(-3px); box-shadow: var(--lift-shadow); } /* ============================================================ 4. BUTTONS — lift on hover, press on active ============================================================ */ .btn, .v5-btn-ink, .v5-btn-lime, .action-tile, .lp-btn { transition: transform var(--t-fast) var(--ease-expo), box-shadow var(--t-fast) var(--ease-expo), background var(--t-fast) var(--ease-expo), filter var(--t-fast) var(--ease-expo); } .btn:hover, .v5-btn-ink:hover, .v5-btn-lime:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(74,107,62,0.22); } .btn:active, .v5-btn-ink:active, .v5-btn-lime:active, .action-tile:active { transform: translateY(0) scale(0.97); box-shadow: 0 2px 6px rgba(74,107,62,0.18); } .action-tile:hover { transform: translateY(-3px); box-shadow: var(--lift-shadow); } /* ============================================================ 5. LINKS / PILLS / TABS — nudges & taps ============================================================ */ .v5-widget-link { transition: transform var(--t-fast) var(--ease-expo), background var(--t-fast) var(--ease-expo), color var(--t-fast) var(--ease-expo); } .v5-widget-link:hover { transform: translateX(3px); } .v5-widget-pill { transition: transform var(--t-fast) var(--ease-back), box-shadow var(--t-fast) var(--ease-expo); } .v5-widget-pill:hover { transform: translateY(-1px) scale(1.04); } .v5-pill-tabs button { transition: transform var(--t-fast) var(--ease-expo), background var(--t-fast) var(--ease-expo), color var(--t-fast) var(--ease-expo); } .v5-pill-tabs button:hover { transform: translateY(-1px); } .v5-pill-tabs button:active { transform: scale(0.96); } /* ============================================================ 6. NAV / LIST ROWS — slide & tint ============================================================ */ .nav-item, .v5-nav-item { transition: transform var(--t-fast) var(--ease-expo), background var(--t-fast) var(--ease-expo), color var(--t-fast) var(--ease-expo), padding var(--t-fast) var(--ease-expo); } .nav-item:hover, .v5-nav-item:hover { transform: translateX(4px); } .v4-topmenu-item, .v5-notice-row, .v5-event-row, .v5-team-row, .v5-feed-row { transition: transform var(--t-fast) var(--ease-expo), background var(--t-fast) var(--ease-expo); } .v4-topmenu-item { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; } .v4-topmenu-item:hover, .v5-notice-row:hover, .v5-event-row:hover, .v5-feed-row:hover { transform: translateX(3px); } /* location / season / uniform cards — lift */ .v5-loc-mini, .v5-season-card, .v5-uni-order { transition: transform var(--t-med) var(--ease-expo), box-shadow var(--t-med) var(--ease-expo), border-color var(--t-med) var(--ease-expo); } .v5-loc-mini:hover, .v5-season-card:hover, .v5-uni-order:hover { transform: translateY(-3px); box-shadow: var(--lift-shadow); } /* team row avatar bounce */ .v5-team-row:hover { transform: translateX(3px); } .v5-team-row .av { transition: transform var(--t-med) var(--ease-back); } .v5-team-row:hover .av { transform: scale(1.1) rotate(-3deg); } /* ============================================================ 7. TABLES — soft row highlight ============================================================ */ .page-enter table tbody tr { transition: background var(--t-fast) var(--ease-expo); } .page-enter table tbody tr:hover { background: var(--florentini-green-mist); } /* ============================================================ 8. INPUTS — focus glow ============================================================ */ input, select, textarea { transition: border-color var(--t-fast) var(--ease-expo), box-shadow var(--t-fast) var(--ease-expo), background var(--t-fast) var(--ease-expo); } /* ============================================================ 9. CHARTS — mount draw + hover interactivity ============================================================ */ /* bars grow up from baseline */ .fl-chart-bar { transform-box: fill-box; transform-origin: bottom; animation: flBarGrow 640ms var(--ease-expo) both; transition: opacity var(--t-fast) ease, filter var(--t-fast) ease; cursor: pointer; } @keyframes flBarGrow { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } /* line draws itself in (pathLength normalized to 100) */ .fl-chart-line { stroke-dasharray: 100; animation: flLineDraw 1150ms var(--ease-expo) 120ms both; } @keyframes flLineDraw { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } /* area fades up under the line */ .fl-chart-area { animation: flAreaFade 900ms ease-out 420ms both; } @keyframes flAreaFade { 0% { opacity: 0; } 100% { opacity: 0.10; } } /* points pop in, then react to hover via r (set in JS) */ .fl-chart-point { transform-box: fill-box; transform-origin: center; animation: flPointPop 520ms var(--ease-back) both; transition: r var(--t-fast) var(--ease-back), stroke-width var(--t-fast) var(--ease-expo); cursor: pointer; } @keyframes flPointPop { 0% { transform: scale(0); } 100% { transform: scale(1); } } /* hover tooltip bubble that rides on the chart */ .fl-chart-tip { pointer-events: none; animation: flTipIn 180ms var(--ease-back) both; } @keyframes flTipIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } } /* compare-table status badge gentle pulse on hover row (handled in JS classes) */ .fl-pulse-once { animation: flPulse 600ms var(--ease-expo) both; } @keyframes flPulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } /* ============================================================ 10. SHARED PAGE BITS — demo banner (used by compare & telegram) Defined globally so it is styled regardless of which page mounted first (was previously scoped inside ComparePage only). ============================================================ */ .cmp-demo-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px; border-radius: 14px; font-size: 13px; color: var(--graphite); line-height: 1.5; } .cmp-demo-banner b { color: var(--charcoal); } .cmp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,169,97,.18); flex-shrink: 0; } /* ============================================================ 11. LOGIN SCREEN — entrances + micro-interactions The login stage has no .page-enter/.fade-stagger, so it is animated explicitly here. fill-mode:backwards keeps elements hidden until their turn AND releases control afterwards so :hover transforms still work. ============================================================ */ .v4-login-stage { animation: flFadeIn 520ms ease-out both; } @keyframes flFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* two panels rise in, staggered */ .v4-login-left { animation: flRiseSm 660ms var(--ease-soft) 60ms both; } .v4-login-right { animation: flRiseSm 660ms var(--ease-soft) 140ms both; } @keyframes flRiseSm { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } } /* brand block — gentle cascade */ .v4-login-mono { animation: flRiseSm 620ms var(--ease-soft) 220ms backwards; } .v4-login-brand-word { animation: flRiseSm 620ms var(--ease-soft) 290ms backwards; } .v4-login-brand-sub { animation: flRiseSm 620ms var(--ease-soft) 350ms backwards; } .v4-login-tag { animation: flRiseSm 620ms var(--ease-soft) 410ms backwards; } /* right column — title, sub, tabs cascade (only on first mount) */ .v4-login-title { animation: flRiseSm 560ms var(--ease-soft) 300ms backwards; } .v4-login-sub { animation: flRiseSm 560ms var(--ease-soft) 350ms backwards; } .v5-login-mode-tabs { animation: flRiseSm 560ms var(--ease-soft) 400ms backwards; } /* mode content fades in on every tab switch (remounts) — snappy */ .v5-login-pin-layout, .v5-login-password-form { animation: flRiseSm 480ms var(--ease-soft) 80ms backwards; } /* Login cards stay anchored inside the scroll grid. Moving transforms caused first/last-row cards to be clipped and repeated when filters remounted them. */ .v4-user-chip { animation: none; transition: transform var(--t-fast) var(--ease-expo), box-shadow var(--t-fast) var(--ease-expo), border-color var(--t-fast) var(--ease-expo); } .v4-user-chip:hover { transform: none; box-shadow: var(--lift-shadow); } .v4-user-chip:active { transform: none; } .v4-user-chip .av { transition: transform var(--t-med) var(--ease-back); } .v4-user-chip:hover .av { transform: scale(1.08) rotate(-3deg); } /* keypad keys pop in, then lift/press on interaction */ .v4-key { animation: flKeyPop 380ms var(--ease-back) backwards; } @keyframes flKeyPop { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: none; } } .v4-keypad .v4-key:nth-child(1) { animation-delay: 0.42s; } .v4-keypad .v4-key:nth-child(2) { animation-delay: 0.45s; } .v4-keypad .v4-key:nth-child(3) { animation-delay: 0.48s; } .v4-keypad .v4-key:nth-child(4) { animation-delay: 0.51s; } .v4-keypad .v4-key:nth-child(5) { animation-delay: 0.54s; } .v4-keypad .v4-key:nth-child(6) { animation-delay: 0.57s; } .v4-keypad .v4-key:nth-child(7) { animation-delay: 0.60s; } .v4-keypad .v4-key:nth-child(8) { animation-delay: 0.63s; } .v4-keypad .v4-key:nth-child(9) { animation-delay: 0.66s; } .v4-keypad .v4-key:nth-child(10) { animation-delay: 0.69s; } .v4-keypad .v4-key:nth-child(11) { animation-delay: 0.72s; } .v4-keypad .v4-key:nth-child(12) { animation-delay: 0.75s; } .v4-key { transition: transform var(--t-fast) var(--ease-expo), background var(--t-fast) var(--ease-expo), box-shadow var(--t-fast) var(--ease-expo); } .v4-key:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(74,107,62,0.18); } .v4-key:active { transform: scale(0.93); box-shadow: 0 2px 5px rgba(74,107,62,0.16); } /* pin dots — gentle scale when filled */ .v4-pin-dot { transition: transform var(--t-fast) var(--ease-back), background var(--t-fast) var(--ease-expo); } .v4-pin-dot.filled { animation: flPinFill 320ms var(--ease-back) both; } @keyframes flPinFill { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } /* login pills / group chips hover */ .v5-login-mode-tabs .v5-pill, .v5-login-groups .chip { transition: transform var(--t-fast) var(--ease-expo), background var(--t-fast) var(--ease-expo), color var(--t-fast) var(--ease-expo); } .v5-login-mode-tabs .v5-pill:hover, .v5-login-groups .chip:hover { transform: translateY(-1px); } .v5-login-mode-tabs .v5-pill:active, .v5-login-groups .chip:active { transform: scale(0.96); } /* ============================================================ 12. SITE-WIDE CONTROL FEEDBACK + OPERATIONAL MODULES No global translate/scale is used here: dense grids and login cards keep their geometry while every control still feels live. ============================================================ */ button:not(:disabled) { cursor: pointer; transition-property: background-color, border-color, color, box-shadow, filter; transition-duration: var(--t-fast); transition-timing-function: var(--ease-expo); } button:not(:disabled):hover { filter: brightness(1.025); } button:not(:disabled):active { filter: brightness(0.96); } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--florentini-green); outline-offset: 3px; } .hq-ledger-card, .chk-item, .chk-step, .resv-card, .cohort-card, .chef-result-card { transition: background-color var(--t-fast) var(--ease-expo), border-color var(--t-fast) var(--ease-expo), box-shadow var(--t-fast) var(--ease-expo), filter var(--t-fast) var(--ease-expo); } .hq-ledger-card:hover, .chk-item:hover, .resv-card:hover, .cohort-card:hover, .chef-result-card:hover { border-color: rgba(74,107,62,0.28); box-shadow: 0 12px 28px rgba(74,107,62,0.09); } .hq-ledger-group, .chk-block, .mod .glass, .settings-panel { animation: flOperationalIn 440ms var(--ease-soft) both; } .hq-ledger-group:nth-child(2), .chk-block:nth-child(2) { animation-delay: 55ms; } .hq-ledger-group:nth-child(3), .chk-block:nth-child(3) { animation-delay: 110ms; } .hq-ledger-group:nth-child(4), .chk-block:nth-child(4) { animation-delay: 165ms; } @keyframes flOperationalIn { 0% { opacity: 0; transform: translateY(7px); } 100% { opacity: 1; transform: none; } } .status-pill, .alert-pill, .ok-pill, .card-pill, .chk-meta-chip { transition: background-color var(--t-fast) var(--ease-expo), color var(--t-fast) var(--ease-expo), border-color var(--t-fast) var(--ease-expo); } /* ============================================================ 13. BRAND SCROLLBARS — one system for the page and nested lists ============================================================ */ html { --fl-scroll-size: 10px; --fl-scroll-thumb: #789069; --fl-scroll-thumb-hover: #586f4d; --fl-scroll-track: rgba(122, 148, 102, 0.10); } html[data-scrollbar-size="slim"] { --fl-scroll-size: 6px; } html[data-scrollbar-size="wide"] { --fl-scroll-size: 14px; } html[data-scrollbar-tone="deep"] { --fl-scroll-thumb: #4f6847; --fl-scroll-thumb-hover: #344a31; } html[data-scrollbar-tone="lime"] { --fl-scroll-thumb: #a8bd71; --fl-scroll-thumb-hover: #7f9856; } html[data-scrollbar-track="clear"] { --fl-scroll-track: transparent; } html, html body, html body * { scrollbar-color: var(--fl-scroll-thumb) var(--fl-scroll-track) !important; } html[data-scrollbar-size="slim"], html[data-scrollbar-size="slim"] body, html[data-scrollbar-size="slim"] body * { scrollbar-width: thin; } html[data-scrollbar-size="balanced"], html[data-scrollbar-size="balanced"] body, html[data-scrollbar-size="balanced"] body * { scrollbar-width: thin; } html[data-scrollbar-size="wide"], html[data-scrollbar-size="wide"] body, html[data-scrollbar-size="wide"] body * { scrollbar-width: auto; } html::-webkit-scrollbar, html body::-webkit-scrollbar, html body *::-webkit-scrollbar { width: var(--fl-scroll-size); height: var(--fl-scroll-size); } html::-webkit-scrollbar-track, html body::-webkit-scrollbar-track, html body *::-webkit-scrollbar-track { background: var(--fl-scroll-track) !important; border-radius: 999px; } html::-webkit-scrollbar-thumb, html body::-webkit-scrollbar-thumb, html body *::-webkit-scrollbar-thumb { min-height: 34px; background: var(--fl-scroll-thumb) !important; border: 2px solid var(--fl-scroll-track); border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, html body::-webkit-scrollbar-thumb:hover, html body *::-webkit-scrollbar-thumb:hover { background: var(--fl-scroll-thumb-hover) !important; } html::-webkit-scrollbar-corner, html body::-webkit-scrollbar-corner, html body *::-webkit-scrollbar-corner { background: transparent; } html::-webkit-scrollbar-button, html body::-webkit-scrollbar-button, html body *::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } body[data-smooth-scroll="on"], body[data-smooth-scroll="on"] * { scroll-behavior: smooth; } body[data-smooth-scroll="off"], body[data-smooth-scroll="off"] * { scroll-behavior: auto; } /* ============================================================ 14. USER-CONTROLLED MOTION, MATERIAL AND CONTRAST ============================================================ */ .page-enter { animation-duration: var(--motion-page-duration, 460ms); } .fade-stagger > * { animation-duration: var(--motion-card-duration, 560ms); } .hq-ledger-group, .chk-block, .mod .glass, .settings-panel { animation-duration: var(--motion-page-duration, 460ms); } .fl-chart-bar, .fl-chart-area { animation-duration: var(--motion-chart-duration, 900ms); } body[data-motion-level="off"] *, body[data-motion-level="off"] *::before, body[data-motion-level="off"] *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } body[data-motion-level="calm"] .v5-widget:hover, body[data-motion-level="calm"] .v5-kpi:hover, body[data-motion-level="calm"] .btn:hover, body[data-motion-level="calm"] .action-tile:hover { transform: translateY(-1px); } body[data-motion-level="calm"] .nav-item:hover, body[data-motion-level="calm"] .v5-nav-item:hover, body[data-motion-level="calm"] .v5-widget-link:hover { transform: none; } body[data-motion-level="calm"] .v5-widget:hover .glyph, body[data-motion-level="calm"] .v5-widget:hover .svg-glyph { transform: scale(1.04); } body[data-motion-level="expressive"] .v5-widget:hover { transform: translateY(-7px) scale(1.005); } body[data-motion-level="expressive"] .v5-kpi:hover { transform: translateY(-5px) scale(1.01); } body[data-motion-level="expressive"] .nav-item:hover, body[data-motion-level="expressive"] .v5-nav-item:hover { transform: translateX(7px); } body[data-motion-level="expressive"] .btn:hover, body[data-motion-level="expressive"] .v5-btn-ink:hover, body[data-motion-level="expressive"] .v5-btn-lime:hover { transform: translateY(-3px) scale(1.015); } body[data-glass-strength="soft"] { --glass-bg: rgba(var(--surface-rgb), 0.38); --glass-bg-strong: rgba(var(--surface-rgb), 0.56); --glass-blur: blur(22px) saturate(1.12); } body[data-theme="white"] { color-scheme: light; --surface-rgb: 255, 255, 255; --ivory: #ffffff; --ivory-deep: #ffffff; --cream: #f7f8f6; --charcoal: #252923; --graphite: #485047; --gray: #7c847b; --gray-light: #aeb5ad; --gray-mist: #e7ebe6; --glass-bg: rgba(255, 255, 255, 0.96); --glass-bg-strong: #ffffff; --glass-border: rgba(75, 98, 67, 0.18); --glass-border-soft: rgba(75, 98, 67, 0.11); --glass-shadow: 0 7px 22px rgba(45, 62, 41, 0.055); --glass-shadow-lift: 0 14px 34px rgba(45, 62, 41, 0.09); } body[data-theme="white"] .bg-stage { background: #ffffff !important; } body[data-theme="white"] .bg-stage::before, body[data-theme="white"] .bg-stage::after, body[data-theme="white"] .watercolor { display: none !important; } .settings-choice-card.theme-white .settings-swatch { background: #ffffff; border-color: #dce4db; box-shadow: inset 0 0 0 1px rgba(74, 107, 62, 0.08); } .detail-close, .fl-close-button { width: 34px; height: 34px; display: inline-grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--glass-border) !important; border-radius: 50% !important; background: rgba(var(--surface-rgb), 0.94) !important; color: var(--florentini-green-deep) !important; font: 500 21px/1 var(--font-sans) !important; box-shadow: 0 5px 15px rgba(49, 69, 44, 0.08); transition: transform var(--t-fast) var(--ease-expo), background var(--t-fast) var(--ease-expo), color var(--t-fast) var(--ease-expo) !important; } .detail-close:hover, .fl-close-button:hover { transform: rotate(6deg) scale(1.06); background: var(--florentini-green-deep) !important; color: #fff !important; } .po-manual-copy { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(420px, 1.3fr); gap: 14px; margin-top: 12px; padding: 14px 18px; } .po-manual-copy label { min-width: 0; } .po-manual-copy input, .po-manual-copy textarea { width: 100%; border: 1px solid var(--glass-border-soft); border-radius: 11px; background: rgba(var(--surface-rgb), .84); color: var(--charcoal); font: 12.5px/1.45 var(--font-sans); outline: none; } .po-manual-copy input { height: 40px; padding: 0 12px; } .po-manual-copy textarea { min-height: 74px; padding: 10px 12px; resize: vertical; } .po-order-preview-backdrop { z-index: 2100; } .po-order-preview { position: relative; width: min(920px, calc(100vw - 36px)); max-width: 920px !important; max-height: calc(100vh - 36px); overflow: auto; padding: 28px !important; } .po-order-preview > .detail-close { position: absolute; top: 18px; right: 18px; } .po-order-preview-head { padding-right: 52px; } .po-order-preview-head > span { font: 9px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gray); } .po-order-preview-head h2 { margin: 7px 0 4px; font: 30px var(--font-serif); color: var(--florentini-green-deep); } .po-order-preview-head p { margin: 0; color: var(--gray); font-size: 11px; } .po-order-preview-copy { margin: 20px 0; padding: 14px 16px; white-space: pre-wrap; border-left: 3px solid var(--florentini-green); border-radius: 0 12px 12px 0; background: var(--florentini-green-mist); color: var(--graphite); font-size: 13px; line-height: 1.55; } .po-order-preview-table { overflow-x: auto; } .po-order-preview-table table { width: 100%; border-collapse: collapse; font-size: 12px; } .po-order-preview-table th, .po-order-preview-table td { padding: 9px 10px; border-bottom: 1px solid var(--glass-border-soft); text-align: left; } .po-order-preview-table th { font: 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); } .po-order-preview-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } @media (max-width: 900px) { .po-manual-copy { grid-template-columns: 1fr; } } .events-local-search { min-width: 210px; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: rgba(var(--surface-rgb), .72); } .events-local-search svg { width: 14px; color: var(--gray); } .events-local-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--charcoal); font-size: 11px; } .event-participation { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--glass-border-soft); } .event-participation > div { min-width: 0; display: grid; gap: 2px; } .event-participation b { font-size: 10.5px; color: var(--charcoal); } .event-participation span { overflow: hidden; color: var(--gray); font: 9px/1.35 var(--font-mono); text-overflow: ellipsis; } .event-participation button { min-height: 30px; flex: 0 0 auto; padding: 6px 10px; font-size: 9.5px; } .uniform-control-page { display: grid; gap: 12px; } .uniform-wear-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .uniform-wear-kpis > div { min-height: 86px; padding: 13px 15px; border-radius: 15px; } .uniform-wear-kpis span { display: block; font: 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); } .uniform-wear-kpis b { display: inline-block; margin-top: 5px; font: 30px var(--font-serif); color: var(--charcoal); } .uniform-wear-kpis small { margin-left: 6px; color: var(--gray); font-size: 9px; } .uniform-wear-kpis .expired b { color: var(--terracotta); } .uniform-wear-kpis .due b { color: #987b28; } .uniform-wear-kpis .active b { color: var(--florentini-green-deep); } .uniform-controlbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 15px; border-radius: 15px; } .uniform-controlbar > div:first-child { display: grid; gap: 3px; } .uniform-controlbar b { font-size: 12.5px; color: var(--charcoal); } .uniform-controlbar span { max-width: 720px; color: var(--gray); font-size: 10px; line-height: 1.45; } .uniform-controlbar > div:last-child { display: flex; gap: 4px; } .uniform-wear-list { display: grid; gap: 7px; } .uniform-wear-row { display: grid; grid-template-columns: minmax(190px, 1.15fr) minmax(190px, 1.25fr) minmax(130px, .8fr) minmax(140px, .85fr) minmax(210px, 1.1fr); align-items: center; gap: 12px; padding: 11px 13px; border-radius: 15px; } .uniform-wear-row.expired { border-color: rgba(200, 85, 61, .28); } .uniform-wear-row.due { border-color: rgba(201, 169, 97, .35); } .uniform-wear-person { min-width: 0; display: flex; align-items: center; gap: 9px; } .uniform-wear-person > span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--florentini-green), var(--florentini-green-deep)); color: white; font-family: var(--font-serif); } .uniform-wear-person div, .uniform-wear-items, .uniform-wear-date { min-width: 0; display: grid; gap: 2px; } .uniform-wear-person b, .uniform-wear-items b, .uniform-wear-date b { overflow: hidden; color: var(--charcoal); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .uniform-wear-person small, .uniform-wear-items span, .uniform-wear-date span, .uniform-wear-date small { overflow: hidden; color: var(--gray); font: 8.5px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; } .uniform-wear-status { display: grid; justify-items: end; gap: 6px; } .uniform-wear-status > span { padding: 4px 8px; border-radius: 999px; font: 8.5px var(--font-mono); } .uniform-wear-status > span.expired { background: rgba(200,85,61,.11); color: var(--terracotta); } .uniform-wear-status > span.due { background: rgba(201,169,97,.16); color: #80651d; } .uniform-wear-status > span.active { background: var(--florentini-green-mist); color: var(--florentini-green-deep); } .uniform-wear-status > div { display: flex; gap: 5px; } .uniform-wear-status button { min-height: 28px; padding: 5px 8px; font-size: 8.5px; } @media (max-width: 1180px) { .uniform-wear-row { grid-template-columns: 1fr 1fr 1fr; } .uniform-wear-status { justify-items: start; } } @media (max-width: 760px) { .uniform-wear-kpis { grid-template-columns: 1fr 1fr; } .uniform-controlbar { align-items: stretch; flex-direction: column; } .uniform-wear-row { grid-template-columns: 1fr; } } /* Compact technical-card controls: one working row instead of a tall filter wall. */ .kitchen-tech-page .tech-catalog-toolbar { grid-template-columns: minmax(280px, 390px) minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 16px; } .kitchen-tech-page .tech-catalog-toolbar .search-input { min-height: 40px; } .kitchen-tech-page .tech-catalog-toolbar .tech-chips { min-width: 0; max-height: 42px; display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 4px; scrollbar-width: none !important; } .kitchen-tech-page .tech-catalog-toolbar .tech-chips::-webkit-scrollbar { display: none !important; } .kitchen-tech-page .tech-catalog-toolbar .tech-chips .chip { flex: 0 0 auto; min-height: 34px; padding: 7px 12px; font-size: 10px; } .kitchen-tech-page .tech-card-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 11px; } .kitchen-tech-page .tech-card-tile { grid-template-rows: 180px minmax(132px, 1fr) auto; min-height: 380px; gap: 10px; padding: 11px; border-radius: 18px; } .kitchen-tech-page .tech-tile-copy p { -webkit-line-clamp: 3; } @media (max-width: 820px) { .kitchen-tech-page .tech-catalog-toolbar { grid-template-columns: 1fr; } } .schedule-document-board.density-doc { display: none; } .schedule-ledger-paper.density-doc { animation: flOperationalIn var(--motion-page-duration, 460ms) var(--ease-soft) both; } .checklist-creator { margin-bottom: 12px; padding: 15px; border-radius: 17px; } .checklist-creator-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 11px; border-bottom: 1px solid var(--glass-border-soft); } .checklist-creator-head span, .checklist-custom-list > div:first-child span { font: 8.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--florentini-green-deep); } .checklist-creator-head h3 { margin: 3px 0 0; font: 21px var(--font-serif); color: var(--charcoal); } .checklist-creator-head small { max-width: 490px; color: var(--gray); font-size: 9.5px; line-height: 1.45; } .checklist-creator-grid { display: grid; grid-template-columns: 1.4fr .7fr .8fr; gap: 8px; margin-top: 11px; } .checklist-creator-grid label { display: grid; gap: 4px; } .checklist-creator-grid label > span { font: 8px var(--font-mono); text-transform: uppercase; color: var(--gray); } .checklist-creator-grid input, .checklist-creator-grid select, .checklist-task-editor input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--glass-border-soft); border-radius: 9px; background: rgba(var(--surface-rgb), .76); color: var(--charcoal); font-size: 11px; outline: 0; } .checklist-task-editor { margin-top: 12px; } .checklist-task-editor > div:first-child, .checklist-assignees > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .checklist-task-editor > div:first-child b, .checklist-assignees > div:first-child b { font-size: 10.5px; color: var(--charcoal); } .checklist-task-editor > div:not(:first-child) { display: grid; grid-template-columns: 25px 1fr 25px; gap: 6px; align-items: center; margin-top: 4px; } .checklist-task-editor > div:not(:first-child) > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--florentini-green-mist); color: var(--florentini-green-deep); font: 9px var(--font-mono); } .checklist-task-editor .fl-close-button { width: 24px; height: 24px; font-size: 14px !important; } .checklist-assignees { margin-top: 12px; } .checklist-assignees > div:first-child span { font: 8.5px var(--font-mono); color: var(--gray); } .checklist-assignees > div:last-child { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 160px; overflow: auto; } .checklist-assignees button { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: rgba(var(--surface-rgb), .56); color: var(--charcoal); text-align: left; } .checklist-assignees button.active { border-color: var(--florentini-green); background: var(--florentini-green-mist); } .checklist-assignees button > i { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--florentini-green-deep); color: white; font: 10px var(--font-serif); } .checklist-assignees button > span { min-width: 0; display: grid; } .checklist-assignees button b, .checklist-assignees button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .checklist-assignees button b { font-size: 9.5px; } .checklist-assignees button small { color: var(--gray); font-size: 7.5px; } .checklist-creator-actions { display: flex; justify-content: flex-end; margin-top: 11px; } .checklist-custom-list { display: grid; grid-template-columns: 165px 1fr; gap: 10px; margin-bottom: 12px; padding: 12px; border-radius: 15px; } .checklist-custom-list > div:first-child { display: grid; align-content: center; gap: 4px; } .checklist-custom-list > div:first-child b { font: 17px var(--font-serif); color: var(--charcoal); } .checklist-custom-list > div:last-child { display: flex; gap: 6px; overflow-x: auto; } .checklist-custom-list button { min-width: 210px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: rgba(var(--surface-rgb), .58); text-align: left; } .checklist-custom-list button span, .checklist-custom-list button small { color: var(--gray); font: 8px var(--font-mono); } .checklist-custom-list button b { color: var(--charcoal); font-size: 10px; } .chk-blocks { gap: 9px; } .chk-block { padding: 13px; border-radius: 16px; } .chk-item { min-height: 54px; padding: 8px 9px; border-radius: 10px; } @media (max-width: 900px) { .checklist-creator-grid { grid-template-columns: 1fr; } .checklist-assignees > div:last-child { grid-template-columns: 1fr 1fr; } .checklist-custom-list { grid-template-columns: 1fr; } } .team-directory-panel { margin-bottom: 12px; padding: 12px; border-radius: 16px; } .team-directory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .team-directory-toolbar .search-input { min-width: 280px; min-height: 38px; } .team-directory-toolbar > div:last-child { display: flex; gap: 4px; flex-wrap: wrap; } .team-directory-toolbar > div:last-child button { min-height: 32px; display: flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--glass-border-soft); border-radius: 9px; background: rgba(var(--surface-rgb), .56); color: var(--gray); font-size: 9px; } .team-directory-toolbar > div:last-child button.active { border-color: var(--florentini-green); background: var(--florentini-green-mist); color: var(--florentini-green-deep); } .team-directory-toolbar button span { font: 8px var(--font-mono); opacity: .72; } .team-directory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .team-directory-grid article { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: rgba(var(--surface-rgb), .48); } .team-directory-grid article > div { min-width: 0; } .team-directory-grid article b, .team-directory-grid article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-directory-grid article b { color: var(--charcoal); font-size: 10px; } .team-directory-grid article small { margin-top: 2px; color: var(--gray); font: 7.5px var(--font-mono); } @media (max-width: 1000px) { .team-directory-grid { grid-template-columns: repeat(2, 1fr); } .team-directory-toolbar { align-items: stretch; flex-direction: column; } } @media (max-width: 600px) { .team-directory-grid { grid-template-columns: 1fr; } .team-directory-toolbar .search-input { min-width: 0; } } body[data-glass-strength="solid"] { --glass-bg: rgba(var(--surface-rgb), 0.90); --glass-bg-strong: rgba(var(--surface-rgb), 0.97); --glass-blur: blur(7px) saturate(1.02); } body[data-high-contrast="on"] { --gray: #5a625a; --graphite: #38423a; --glass-border: rgba(57, 78, 52, 0.30); --glass-border-soft: rgba(57, 78, 52, 0.22); } body[data-theme="night"][data-high-contrast="on"] { --gray: #c2c8c2; --graphite: #e1e7df; --glass-border: rgba(207, 226, 198, 0.32); --glass-border-soft: rgba(207, 226, 198, 0.24); } body[data-decorations="reduced"] { --glass-shadow: 0 5px 16px rgba(48, 62, 46, 0.06); --glass-shadow-lift: 0 10px 24px rgba(48, 62, 46, 0.09); } body[data-decorations="reduced"] .monogram-meta, body[data-decorations="reduced"] .gf-orbit { display: none; } body[data-corner-style="soft"] .glass, body[data-corner-style="soft"] .v5-widget, body[data-corner-style="soft"] .v5-kpi, body[data-corner-style="soft"] .settings-panel, body[data-corner-style="soft"] button, body[data-corner-style="soft"] input, body[data-corner-style="soft"] select, body[data-corner-style="soft"] textarea { border-radius: 22px; } body[data-corner-style="square"] .glass, body[data-corner-style="square"] .v5-widget, body[data-corner-style="square"] .v5-kpi, body[data-corner-style="square"] .settings-panel, body[data-corner-style="square"] button, body[data-corner-style="square"] input, body[data-corner-style="square"] select, body[data-corner-style="square"] textarea { border-radius: 7px; } /* ============================================================ 15. DASHBOARD MODES ============================================================ */ .dashboard-hero-compact .v5-hero { margin-bottom: 14px; } .dashboard-hero-compact .v5-hero h1 { font-size: 31px; } .dashboard-hero-compact .v5-hero .meta { margin-top: 5px; } .dashboard-hero-compact .v5-kpi-strip { margin-top: 12px; gap: 9px; } .dashboard-hero-compact .v5-kpi { min-height: 86px; padding: 12px 15px; border-radius: 15px; } .dashboard-hero-compact .v5-kpi .val { font-size: 29px; margin-top: 4px; } .dashboard-hero-compact .v5-kpi .delta { margin-top: 3px; font-size: 9.5px; } .dashboard-kpi-only { margin-bottom: 14px; } .dashboard-kpi-only .v5-kpi-strip { margin-top: 0; } .dashboard-density-compact .v5-widget-grid { gap: 9px; } .dashboard-density-compact .v5-widget { padding: 13px 15px; border-radius: 15px; } .dashboard-density-compact .v5-widget-head { margin-bottom: 9px; } .dashboard-density-compact .v5-widget-title { font-size: 14px; } /* ============================================================ 16. SETTINGS STUDIO ============================================================ */ .settings-studio-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; margin-bottom: 14px; } .settings-studio-tabs button { min-width: 0; min-height: 58px; display: grid; gap: 2px; align-content: center; text-align: left; padding: 10px 13px; border: 1px solid transparent; background: transparent; color: var(--graphite); } .settings-studio-tabs button b { font-size: 12.5px; font-weight: 650; } .settings-studio-tabs button small { font: 9.5px var(--font-mono); color: var(--gray); } .settings-studio-tabs button.active { color: var(--florentini-green-deep); border-color: rgba(122, 148, 102, 0.24); background: var(--florentini-green-mist); box-shadow: inset 0 -2px 0 var(--florentini-green); } .settings-dashboard-studio, .settings-interface-studio { display: grid; grid-template-columns: minmax(430px, 0.9fr) minmax(410px, 1.1fr); gap: 14px; align-items: start; } .settings-preview-sticky { position: sticky; top: 84px; min-width: 0; } .settings-lead { margin: -3px 0 13px; color: var(--gray); font-size: 12px; line-height: 1.5; } .settings-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 13px; } .settings-preset-grid button { display: grid; gap: 3px; min-width: 0; padding: 10px; text-align: left; border: 1px solid var(--glass-border-soft); background: rgba(var(--surface-rgb), 0.48); color: var(--charcoal); } .settings-preset-grid button b { font-size: 12px; } .settings-preset-grid button small { min-height: 25px; font-size: 9.5px; line-height: 1.3; color: var(--gray); } .settings-preset-grid button span { font: 9px var(--font-mono); color: var(--florentini-green-deep); } .settings-preset-grid button.active { border-color: var(--florentini-green); background: var(--florentini-green-mist); } .settings-control-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--glass-border-soft); } .settings-control-row > div:first-child { display: grid; gap: 2px; } .settings-control-row b { font-size: 11.5px; color: var(--charcoal); } .settings-control-row small { font-size: 9.5px; color: var(--gray); } .settings-control-row.stacked { align-items: stretch; flex-direction: column; gap: 7px; } .settings-segmented { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(122, 148, 102, 0.09); border: 1px solid var(--glass-border-soft); } .settings-segmented button { min-height: 29px; padding: 5px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--gray); font-size: 9.5px; white-space: nowrap; } .settings-segmented button.active { background: rgba(var(--surface-rgb), 0.92); color: var(--florentini-green-deep); box-shadow: 0 3px 9px rgba(54, 74, 49, 0.10); } .settings-inline-switches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 11px 0 13px; } .settings-inline-switches .settings-switch { min-height: 44px; grid-template-columns: 34px 1fr; gap: 7px; padding: 7px 8px; border: 1px solid var(--glass-border-soft); border-radius: 11px; background: rgba(var(--surface-rgb), 0.40); } .settings-inline-switches .settings-switch span { width: 34px; height: 20px; } .settings-inline-switches .settings-switch span::after { width: 14px; height: 14px; top: 2px; left: 2px; } .settings-inline-switches .settings-switch input:checked + span::after { transform: translateX(14px); } .settings-inline-switches .settings-switch b { font-size: 10px; line-height: 1.2; } .settings-widget-list-head { display: flex; justify-content: space-between; margin: 11px 0 7px; } .settings-widget-list-head b { font-size: 11.5px; color: var(--charcoal); } .settings-widget-list-head span { font: 9.5px var(--font-mono); color: var(--gray); } .settings-widget-list { display: grid; gap: 5px; max-height: none; overflow: visible; padding-right: 0; } .settings-widget-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 5px 7px; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: rgba(var(--surface-rgb), 0.44); } .settings-widget-row.hidden { opacity: 0.48; } .settings-widget-row > div:nth-child(2) { min-width: 0; } .settings-widget-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--charcoal); } .settings-widget-row small { display: block; margin-top: 1px; font: 8.5px var(--font-mono); color: var(--gray); text-transform: uppercase; } .settings-eye-toggle input { position: absolute; opacity: 0; pointer-events: none; } .settings-eye-toggle span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--florentini-green-deep); background: var(--florentini-green-mist); font-size: 12px; cursor: pointer; } .settings-dashboard-preview, .settings-interface-preview { overflow: hidden; border: 1px solid var(--glass-border); border-radius: 24px; background: linear-gradient(145deg, rgba(var(--surface-rgb), 0.88), rgba(var(--surface-rgb), 0.56)); box-shadow: var(--glass-shadow-lift); } .settings-preview-browserbar { min-height: 39px; display: flex; align-items: center; gap: 5px; padding: 0 13px; border-bottom: 1px solid var(--glass-border-soft); background: rgba(var(--surface-rgb), 0.48); } .settings-preview-browserbar > span { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-mist); } .settings-preview-browserbar > span:nth-child(1) { background: var(--florentini-green); } .settings-preview-browserbar b { margin-left: 5px; font: 8.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); } .settings-preview-hero { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 17px 18px 10px; } .settings-preview-hero.full { padding-top: 26px; padding-bottom: 17px; } .settings-preview-hero small { display: block; font: 7px var(--font-mono); letter-spacing: .16em; color: var(--gray); } .settings-preview-hero strong { display: block; margin-top: 3px; font: italic 26px var(--font-serif); color: var(--florentini-green-deep); } .settings-preview-hero.full strong { font-size: 34px; } .settings-preview-hero p { grid-column: 1 / -1; margin: 0; font: 8px var(--font-mono); color: var(--gray); } .settings-preview-action { align-self: start; padding: 7px 9px; border-radius: 8px; background: var(--charcoal); color: rgb(var(--surface-rgb)); font-size: 8px; } .settings-preview-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 14px 10px; } .settings-preview-kpis div { min-width: 0; padding: 8px; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: rgba(var(--surface-rgb), .68); } .settings-preview-kpis span { display: block; overflow: hidden; font: 6.5px var(--font-mono); color: var(--gray); text-overflow: ellipsis; } .settings-preview-kpis b { display: block; margin-top: 4px; font: 15px var(--font-serif); color: var(--charcoal); } .settings-preview-widgets { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 6px; padding: 4px 14px 14px; } .settings-preview-widgets button { grid-column: span 1; min-width: 0; min-height: 66px; display: grid; align-content: start; gap: 3px; padding: 9px; text-align: left; border: 1px solid var(--glass-border-soft); border-radius: 11px; background: rgba(var(--surface-rgb), .64); color: var(--charcoal); } .settings-preview-widgets button.wide { grid-column: span 2; } .settings-preview-widgets button span { overflow: hidden; font: 6.5px var(--font-mono); color: var(--gray); text-transform: uppercase; text-overflow: ellipsis; } .settings-preview-widgets button b { overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; } .settings-preview-widgets button i { width: 70%; height: 3px; margin-top: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--florentini-green), var(--lime-soft)); } .settings-dashboard-preview.density-compact .settings-preview-widgets { gap: 4px; } .settings-dashboard-preview.density-compact .settings-preview-widgets button { min-height: 52px; padding: 7px; } .settings-preview-foot { padding: 9px 14px; border-top: 1px solid var(--glass-border-soft); font: 7.5px var(--font-mono); color: var(--gray); text-align: center; } .settings-control-section { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--glass-border-soft); } .settings-control-section:first-of-type { margin-top: 0; } .settings-small-title { margin-bottom: 8px; } .settings-theme-grid { grid-template-columns: repeat(4, 1fr); } .settings-font-grid { grid-template-columns: repeat(3, 1fr); } .settings-interface-controls .settings-choice-card { min-height: 48px; padding: 7px; } .settings-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .settings-subgrid > div { min-width: 0; } .settings-subgrid .settings-segmented { align-self: flex-start; flex-wrap: wrap; } .settings-subgrid > div > .settings-switch { margin-top: 9px; } .settings-range { display: grid; gap: 9px; padding: 10px 0; } .settings-range > span { display: flex; justify-content: space-between; gap: 10px; } .settings-range b { font-size: 11.5px; color: var(--charcoal); } .settings-range small { font: 9px var(--font-mono); color: var(--florentini-green-deep); } .settings-range input { width: 100%; accent-color: var(--florentini-green); } .settings-replay { margin-top: 5px; } .settings-global-switches { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } .settings-interface-preview { padding-bottom: 12px; } .settings-interface-preview-body { display: grid; grid-template-columns: 88px 1fr; min-height: 500px; animation: flPageRise var(--motion-page-duration, 460ms) var(--ease-soft) both; } .settings-interface-preview-body nav { display: grid; align-content: start; gap: 5px; padding: 16px 8px; border-right: 1px solid var(--glass-border-soft); background: rgba(122, 148, 102, .07); } .settings-interface-preview-body nav i { margin: 0 auto 15px; font: italic 32px var(--font-serif); color: var(--florentini-green-deep); } .settings-interface-preview-body nav span { padding: 7px; border-radius: 8px; font-size: 8px; color: var(--gray); } .settings-interface-preview-body nav span.active { background: var(--florentini-green-mist); color: var(--florentini-green-deep); } .settings-interface-preview-body main { min-width: 0; padding: 22px; } .settings-interface-preview-body main > small { font: 7px var(--font-mono); letter-spacing: .16em; color: var(--gray); } .settings-interface-preview-body h4 { margin: 5px 0 14px; font: 27px var(--font-serif); color: var(--charcoal); } .settings-interface-preview-body h4 em { color: var(--florentini-green-deep); } .settings-preview-card { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--glass-border); border-radius: 15px; background: var(--glass-bg); box-shadow: var(--glass-shadow); } .settings-preview-card b { font-size: 9px; color: var(--gray); } .settings-preview-card strong { font: 25px var(--font-serif); color: var(--charcoal); } .settings-preview-card span { font: 8px var(--font-mono); color: var(--florentini-green-deep); } .settings-scroll-demo { height: 190px; display: grid; gap: 4px; margin: 12px 0; padding-right: 6px; overflow: auto; } .settings-scroll-demo > div { min-height: 35px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--glass-border-soft); border-radius: 9px; background: rgba(var(--surface-rgb), .50); font-size: 9px; color: var(--graphite); } .settings-scroll-demo i { width: 7px; height: 7px; border-radius: 50%; background: var(--florentini-green); } .settings-interface-preview main > button { width: 100%; min-height: 34px; border: 0; background: var(--charcoal); color: rgb(var(--surface-rgb)); font-size: 8px; } .settings-interface-preview > p { margin: 4px 16px 0; font: 8px/1.5 var(--font-mono); color: var(--gray); text-align: center; } .settings-grid { grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr); } .settings-sections { padding: 13px; } .settings-section-list { gap: 5px; } .settings-section-row { grid-template-columns: 61px 29px minmax(0, 1fr) auto; gap: 7px; min-height: 45px; padding: 5px 7px; border-radius: 10px; } .settings-check { gap: 4px; font-size: 8px; } .settings-row-icon { width: 29px; height: 29px; border-radius: 8px; } .settings-row-icon svg { width: 15px; height: 15px; } .settings-row-copy b { font-size: 11.5px; } .settings-row-copy small { margin-top: 0; font-size: 8.5px; } .icon-btn.settings-mini { width: 27px; height: 27px; border-radius: 8px; } .settings-open-section { font-size: 14px; color: var(--florentini-green-deep); } .settings-employee-panel { max-height: none; overflow: visible; } .settings-person-picker { display: grid; gap: 8px; margin: 10px 0 14px; } .settings-picker-selects { display: grid; grid-template-columns: .75fr 1.25fr; gap: 7px; } .settings-picker-selects label { min-width: 0; display: grid; gap: 4px; } .settings-picker-selects label > span { font: 8.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); } .settings-picker-selects select { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--glass-border-soft); background: rgba(var(--surface-rgb), .72); color: var(--charcoal); font-size: 10px; } .settings-access-grid { grid-template-columns: 1fr 1fr; gap: 7px; } .settings-access-grid .settings-switch { min-height: 38px; padding: 5px 6px; border: 1px solid var(--glass-border-soft); border-radius: 9px; } .settings-access-grid .settings-switch b { font-size: 10px; line-height: 1.2; } .settings-data-overview { display: grid; grid-template-columns: repeat(4, 1fr) minmax(210px, 1.25fr); gap: 8px; align-items: center; padding: 12px; margin-bottom: 14px; } .settings-data-overview > div { padding: 8px 10px; border-right: 1px solid var(--glass-border-soft); } .settings-data-overview > div b { display: block; font: 24px var(--font-serif); color: var(--florentini-green-deep); } .settings-data-overview > div span { display: block; font: 8.5px var(--font-mono); text-transform: uppercase; color: var(--gray); } @media (max-width: 1180px) { .settings-dashboard-studio, .settings-interface-studio { grid-template-columns: 1fr; } .settings-preview-sticky { position: static; } .settings-global-switches { grid-template-columns: repeat(3, 1fr); } .settings-data-overview { grid-template-columns: repeat(4, 1fr); } .settings-data-overview > .settings-switch { grid-column: 1 / -1; } } @media (max-width: 760px) { .settings-studio-tabs { grid-template-columns: 1fr 1fr; } .settings-dashboard-studio, .settings-interface-studio { display: block; } .settings-subgrid, .settings-picker-selects { grid-template-columns: 1fr; } .settings-theme-grid, .settings-font-grid { grid-template-columns: 1fr 1fr; } .settings-inline-switches, .settings-global-switches { grid-template-columns: 1fr 1fr; } .settings-preset-grid { grid-template-columns: 1fr; } .settings-control-row:not(.stacked) { align-items: stretch; flex-direction: column; } .settings-control-row:not(.stacked) .settings-segmented { align-self: flex-start; } .settings-preview-kpis { grid-template-columns: 1fr 1fr; } .settings-preview-widgets { grid-template-columns: 1fr 1fr; } .settings-preview-widgets button.wide { grid-column: span 1; } .settings-access-grid { grid-template-columns: 1fr; } .settings-data-overview { grid-template-columns: 1fr 1fr; } } /* The waiter guide lives inside the app shell, so its usable width is smaller than the browser viewport. Keep the three toolbar actions within that shell. */ .waiter-guide-page .menu-role-toolbar { min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(210px, 300px); } .waiter-guide-page .menu-role-toolbar > * { min-width: 0; } .waiter-guide-page .menu-role-toolbar > .btn { grid-column: 1 / -1; justify-self: end; } /* ============================================================ 17. OPERATIONAL V6 — notifications, checklists, schedule ============================================================ */ body, button, input, select, textarea { font-family: var(--font-sans); } html::-webkit-scrollbar-button:single-button, html body::-webkit-scrollbar-button:single-button, html body *::-webkit-scrollbar-button:single-button, html::-webkit-scrollbar-button:start:decrement, html::-webkit-scrollbar-button:end:increment, html body *::-webkit-scrollbar-button:start:decrement, html body *::-webkit-scrollbar-button:end:increment, html body *::-webkit-scrollbar-button:vertical, html body *::-webkit-scrollbar-button:horizontal { -webkit-appearance: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; } .v5-notice-head > div { min-width: 0; } .v5-notice-head small { display: block; margin-top: 2px; font: 8px var(--font-mono); color: var(--gray); } .v5-notice-head button:disabled { opacity: .45; cursor: default; } .v5-notice-row.read { opacity: .62; } .v5-notice-row.unread { background: rgba(122, 148, 102, .08); } .v5-notice-row.unread::after { content: ""; width: 6px; height: 6px; align-self: center; border-radius: 50%; background: var(--florentini-green); } .v5-notice-empty { display: grid; gap: 4px; padding: 22px 16px; text-align: center; color: var(--gray); } .v5-notice-empty b { color: var(--charcoal); font-size: 12px; } .v5-notice-empty span { font-size: 10px; } .event-participation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .event-participant-manager { width: min(920px, calc(100vw - 32px)); } .event-owner-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; } .event-owner-summary > div { display: grid; gap: 3px; padding: 11px; border: 1px solid var(--glass-border-soft); border-radius: 11px; background: rgba(var(--surface-rgb), .54); } .event-owner-summary span { font: 8.5px var(--font-mono); text-transform: uppercase; color: var(--gray); } .event-owner-summary b { font: 22px var(--font-serif); color: var(--florentini-green-deep); } .event-private-note { padding: 9px 11px; border-radius: 9px; background: var(--florentini-green-mist); color: var(--graphite); font-size: 10.5px; line-height: 1.45; } .event-participant-table { display: grid; gap: 6px; max-height: 52vh; margin-top: 12px; overflow: auto; padding-right: 3px; } .event-participant-row { display: grid; grid-template-columns: 34px minmax(150px, 1fr) minmax(170px, .9fr) 145px; gap: 9px; align-items: center; padding: 8px; border: 1px solid var(--glass-border-soft); border-radius: 11px; background: rgba(var(--surface-rgb), .58); } .event-participant-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--florentini-green); color: #fff; font-family: var(--font-serif); } .event-participant-person b, .event-participant-person span, .event-participant-contact span, .event-participant-contact small { display: block; } .event-participant-person b { font-size: 11.5px; } .event-participant-person span, .event-participant-contact small { margin-top: 2px; font: 8.5px var(--font-mono); color: var(--gray); } .event-participant-contact span { font-size: 10.5px; color: var(--florentini-green-deep); } .event-participant-row select { width: 100%; min-width: 0; height: 34px; border: 1px solid var(--glass-border-soft); border-radius: 8px; background: var(--surface); color: var(--charcoal); padding: 0 7px; font-size: 9.5px; } .checklist-command-toolbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px; margin-bottom: 12px; } .checklist-command-toolbar > div { display: flex; flex-wrap: wrap; gap: 4px; } .checklist-command-toolbar > div button { min-height: 36px; padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--gray); font-size: 10.5px; } .checklist-command-toolbar > div button.active { background: var(--florentini-green-mist); color: var(--florentini-green-deep); } .checklist-command-panel { padding: 18px; } .checklist-command-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--glass-border-soft); } .checklist-command-head > div:first-child { min-width: 0; } .checklist-command-head span { font: 8.5px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--florentini-green-deep); } .checklist-command-head h2 { margin: 4px 0 3px; font: 500 24px var(--font-serif); } .checklist-command-head p { margin: 0; color: var(--gray); font-size: 10.5px; line-height: 1.5; } .telegram-server-state { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--glass-border-soft); border-radius: 9px; font: 8.5px var(--font-mono); color: var(--gray); } .telegram-server-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); } .telegram-server-state.ok { color: var(--florentini-green-deep); } .telegram-server-state.ok i { background: var(--florentini-green); box-shadow: 0 0 0 4px rgba(122,148,102,.12); } .checklist-local-search { width: min(360px, 100%); display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 7px; margin: 13px 0; padding: 0 10px; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: rgba(var(--surface-rgb), .62); } .checklist-local-search input { height: 38px; border: 0; outline: 0; background: transparent; color: var(--charcoal); } .telegram-directory-table { border: 1px solid var(--gray-mist); border-radius: 12px; overflow: hidden; } .telegram-directory-header, .telegram-directory-row { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(130px, .8fr) minmax(130px, .75fr) 125px; gap: 8px; align-items: center; } .telegram-directory-header { min-height: 35px; padding: 6px 10px; background: var(--florentini-green-mist); font: 8px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); } .telegram-directory-row { min-height: 54px; padding: 7px 10px; border-top: 1px solid var(--gray-mist); } .telegram-directory-row > div:first-child { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; } .telegram-directory-row > div:first-child > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--florentini-green-mist); color: var(--florentini-green-deep); font-style: normal; } .telegram-directory-row b, .telegram-directory-row small { display: block; } .telegram-directory-row b { font-size: 10.5px; } .telegram-directory-row small { margin-top: 2px; font-size: 8.5px; color: var(--gray); } .telegram-directory-row label { display: grid; grid-template-columns: auto 1fr; align-items: center; min-width: 0; border: 1px solid var(--glass-border-soft); border-radius: 8px; padding-left: 8px; color: var(--gray); } .telegram-directory-row label input { width: 100%; min-width: 0; height: 33px; padding: 0 7px; border: 0; outline: 0; background: transparent; color: var(--charcoal); font-size: 10px; } .contact-ready, .contact-missing { font: 8.5px var(--font-mono); } .contact-ready { color: var(--florentini-green-deep); } .contact-missing { color: var(--terracotta); } .checklist-command-note { margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: rgba(122,148,102,.07); color: var(--gray); font-size: 9.5px; line-height: 1.5; } .checklist-builder-fields { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(150px, .65fr) minmax(190px, .8fr); gap: 10px; margin-top: 14px; } .checklist-builder-fields label, .settings-schedule-profile > label { display: grid; gap: 5px; } .checklist-builder-fields label > span, .checklist-builder-people > div:first-child > span, .settings-schedule-profile > label > span, .settings-schedule-profile > div > span { font: 8.5px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--gray); } .checklist-builder-fields input, .checklist-builder-fields select, .settings-schedule-profile select { width: 100%; height: 38px; border: 1px solid var(--glass-border-soft); border-radius: 9px; background: rgba(var(--surface-rgb), .72); padding: 0 10px; color: var(--charcoal); } .checklist-builder-tasks { display: grid; gap: 6px; margin-top: 16px; } .checklist-builder-tasks > div, .checklist-builder-people > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .checklist-builder-tasks > label { display: grid; grid-template-columns: 25px minmax(0,1fr) 30px; gap: 7px; align-items: center; } .checklist-builder-tasks > label > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: var(--florentini-green-mist); font: 9px var(--font-mono); color: var(--florentini-green-deep); } .checklist-builder-tasks > label input { height: 37px; border: 1px solid var(--glass-border-soft); border-radius: 9px; background: var(--surface); padding: 0 10px; color: var(--charcoal); } .checklist-builder-people { margin-top: 17px; } .checklist-builder-people > div:nth-child(2) { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-top: 8px; } .checklist-builder-people > div:nth-child(2) button { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 8px; align-items: center; min-width: 0; padding: 8px; text-align: left; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: rgba(var(--surface-rgb), .48); color: var(--charcoal); } .checklist-builder-people button.active { border-color: var(--florentini-green); background: var(--florentini-green-mist); } .checklist-builder-people button > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--florentini-green); color: #fff; font-style: normal; } .checklist-builder-people button b, .checklist-builder-people button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .checklist-builder-people button b { font-size: 10.5px; } .checklist-builder-people button small { margin-top: 2px; color: var(--gray); font-size: 8px; } .checklist-builder-footer { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--glass-border-soft); } .checklist-builder-footer .settings-switch-row { min-width: 280px; } .checklist-assignments-list { display: grid; gap: 10px; } .checklist-assignment-card { overflow: hidden; border: 1px solid var(--glass-border-soft); border-radius: 14px; background: var(--glass-bg); box-shadow: var(--glass-shadow); } .checklist-assignment-card.complete { border-color: rgba(122,148,102,.45); } .checklist-assignment-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px; } .checklist-assignment-head span { font: 8px var(--font-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--florentini-green-deep); } .checklist-assignment-head h3 { margin: 3px 0; font: 500 18px var(--font-serif); } .checklist-assignment-head p { margin: 0; color: var(--gray); font-size: 9.5px; } .checklist-assignment-total { text-align: right; } .checklist-assignment-total b, .checklist-assignment-total span { display: block; } .checklist-assignment-total b { font: 22px var(--font-serif); color: var(--florentini-green-deep); } .checklist-assignment-total span { font-size: 8px; } .checklist-recipient-tabs { display: flex; gap: 5px; overflow: auto; padding: 0 14px 9px; } .checklist-recipient-tabs button { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--glass-border-soft); border-radius: 8px; background: transparent; color: var(--gray); font-size: 9px; } .checklist-recipient-tabs button.active { background: var(--florentini-green-mist); color: var(--florentini-green-deep); } .checklist-recipient-tabs button.done::before { content: "✓"; } .checklist-recipient-tabs button span { font-family: var(--font-mono); } .checklist-person-sheet { border-top: 1px solid var(--glass-border-soft); } .checklist-person-status { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 16px; background: rgba(122,148,102,.05); } .checklist-person-status b, .checklist-person-status small { display: block; } .checklist-person-status b { font-size: 11px; } .checklist-person-status small { margin-top: 2px; color: var(--gray); font-size: 8.5px; } .checklist-person-status strong { font: 15px var(--font-mono); color: var(--florentini-green-deep); } .checklist-person-sheet > label { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: center; min-height: 43px; padding: 8px 16px; border-top: 1px solid var(--gray-mist); cursor: pointer; } .checklist-person-sheet > label input { position: absolute; opacity: 0; } .checklist-person-sheet > label i { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--gray-mist); border-radius: 5px; background: var(--surface); } .checklist-person-sheet > label.checked { color: var(--gray); } .checklist-person-sheet > label.checked i { border-color: var(--florentini-green); background: var(--florentini-green); } .checklist-person-sheet > label.checked i::after { content: "✓"; color: #fff; font-size: 11px; } .checklist-person-sheet > label.checked span { text-decoration: line-through; } .checklist-assignment-actions { display: flex; justify-content: flex-end; padding: 9px 14px; border-top: 1px solid var(--glass-border-soft); } .checklist-command-empty { display: grid; justify-items: center; gap: 7px; padding: 48px 20px; text-align: center; } .checklist-command-empty > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--florentini-green-mist); color: var(--florentini-green-deep); font: 13px var(--font-mono); } .checklist-command-empty h2 { margin: 3px 0 0; font: 500 22px var(--font-serif); } .checklist-command-empty p { max-width: 470px; margin: 0 0 7px; color: var(--gray); font-size: 10.5px; line-height: 1.5; } .schedule-doc-toolbar { display: grid; grid-template-columns: minmax(320px,1fr) auto auto; gap: 10px; align-items: center; padding: 7px; margin-bottom: 10px; } .schedule-department-tabs { display: flex; gap: 4px; min-width: 0; overflow: auto; } .schedule-department-tabs button { flex: 0 0 auto; min-height: 36px; padding: 7px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--gray); font-size: 10px; } .schedule-department-tabs button.active { background: var(--florentini-green-mist); color: var(--florentini-green-deep); } .schedule-doc-toolbar > label { display: flex; align-items: center; gap: 7px; } .schedule-doc-toolbar > label span { font: 8px var(--font-mono); text-transform: uppercase; color: var(--gray); } .schedule-doc-toolbar input[type="month"] { height: 35px; border: 1px solid var(--glass-border-soft); border-radius: 8px; background: var(--surface); padding: 0 8px; color: var(--charcoal); } .schedule-doc-actions { display: flex; gap: 5px; justify-content: flex-end; } .schedule-add-employee { padding: 12px; margin-bottom: 10px; } .schedule-add-employee > b { display: block; margin-bottom: 8px; font-size: 11px; } .schedule-add-employee > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; max-height: 190px; overflow: auto; } .schedule-add-employee button { min-width: 0; display: grid; gap: 2px; text-align: left; padding: 8px; border: 1px solid var(--glass-border-soft); border-radius: 8px; background: var(--surface); color: var(--charcoal); } .schedule-add-employee button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } .schedule-add-employee button small { color: var(--gray); font-size: 8px; } .schedule-paper-v6 { margin-bottom: 24px; padding: 20px; border: 1px solid #c7c7c1; background: #fff; color: #161715; box-shadow: 0 16px 42px rgba(42,48,39,.10); } .schedule-title-table { width: 100%; margin-bottom: 12px; border-collapse: collapse; table-layout: fixed; font-family: "Times New Roman", serif; } .schedule-title-table td, .schedule-title-table th { border: 1px solid #20211f; padding: 6px 8px; text-align: left; } .schedule-title-table td { width: 14%; background: #f0f0ec; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; } .schedule-title-table th { width: 36%; font-size: 12px; } .schedule-title-table th.approved { color: #365d37; } .schedule-title-table th.draft { color: #8a6a22; } .schedule-grid-scroll-v6 { width: 100%; overflow: auto; border: 1px solid #20211f; } .schedule-grid-v6 { width: max-content; min-width: 100%; border-collapse: collapse; table-layout: fixed; font-family: Arial, sans-serif; font-size: 9px; } .schedule-grid-v6 th, .schedule-grid-v6 td { height: 31px; border: 1px solid #85857e; padding: 0; text-align: center; } .schedule-grid-v6 thead th { background: #e6eadf; font-weight: 700; } .schedule-grid-v6 thead tr:first-child th:nth-child(2) { min-width: 190px; } .schedule-grid-v6 thead tr:first-child th:nth-child(3) { min-width: 135px; } .schedule-grid-v6 thead tr:nth-child(2) th { width: 34px; min-width: 34px; } .schedule-grid-v6 thead th small { display: block; font-size: 6.5px; font-weight: 400; color: #666; } .schedule-grid-v6 thead th.weekend, .schedule-grid-v6 td.weekend { background: #f1eee8; } .schedule-grid-v6 tbody th { min-width: 190px; padding: 0 7px; text-align: left; white-space: nowrap; background: #fff; } .schedule-grid-v6 tbody td:nth-child(3) { min-width: 135px; padding: 0 6px; text-align: left; } .schedule-grid-v6 tbody td:first-child { width: 32px; min-width: 32px; } .schedule-grid-v6 tbody td:last-child { min-width: 170px; } .schedule-grid-v6 td select { width: 33px; min-width: 33px; height: 30px; border: 0; outline: 0; appearance: none; text-align: center; text-align-last: center; background: transparent; color: #171814; font-weight: 700; cursor: pointer; } .schedule-grid-v6 td input { width: 100%; height: 30px; border: 0; outline: 0; padding: 0 6px; background: transparent; color: #171814; font-size: 8px; } .schedule-grid-v6 td.code-1 { background: #edf4e7; } .schedule-grid-v6 td.code-0-5 { background: #f4f0dd; } .schedule-grid-v6 td.code-Б { background: #f7e5e0; } .schedule-grid-v6 td.code-О { background: #e8eef6; } .schedule-grid-v6 .schedule-total { min-width: 55px; font-weight: 700; background: #f7f7f4; } .schedule-grid-v6 tfoot th, .schedule-grid-v6 tfoot td { background: #e6eadf; font-weight: 700; } .schedule-empty-row { height: 80px !important; color: #666; text-align: center !important; } .schedule-signatures-v6 { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 26px; font-family: "Times New Roman", serif; } .schedule-signatures-v6 > div { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 12px; } .schedule-signatures-v6 span { font-size: 10px; } .schedule-signatures-v6 b { padding-bottom: 3px; border-bottom: 1px solid #222; text-align: center; font-size: 11px; } .schedule-signatures-v6 i { grid-column: 2; text-align: center; color: #666; font-size: 7px; font-style: normal; } .schedule-legend-v6 { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 22px; padding-top: 8px; border-top: 1px solid #aaa; font: 8px Arial, sans-serif; } .settings-help { position: relative; z-index: 20; flex: 0 0 17px; width: 17px; height: 17px; display: inline-grid; place-items: center; margin-left: 3px; padding: 0; vertical-align: 1px; border: 1px solid rgba(122,148,102,.38); border-radius: 50%; background: rgba(var(--surface-rgb),.82); color: var(--florentini-green-deep); font: 700 9px var(--font-sans); cursor: help; } .settings-tooltip-float { position: fixed; z-index: 10000; display: block; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: var(--charcoal); color: rgb(var(--surface-rgb)); box-shadow: 0 14px 34px rgba(29,31,27,.24); font: 10px/1.45 var(--font-sans); letter-spacing: 0; text-align: left; text-transform: none; pointer-events: none; animation: settingsTooltipIn var(--motion-fast-duration,160ms) var(--ease-soft) both; } .settings-tooltip-float.above { transform: translate(-50%,-100%); transform-origin: 50% 100%; } .settings-tooltip-float.below { transform: translate(-50%,0); transform-origin: 50% 0; } @keyframes settingsTooltipIn { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } } .settings-small-title { display: flex; align-items: center; gap: 3px; } .settings-switch b { min-width: 0; } .settings-inline-switches .settings-switch b { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .settings-inline-switches .settings-switch .settings-help { margin-left: auto; } .settings-schedule-profile { display: grid; gap: 10px; margin: 13px 0; padding: 11px; border: 1px solid var(--glass-border-soft); border-radius: 11px; background: rgba(var(--surface-rgb),.38); } .settings-schedule-profile > div { display: grid; gap: 6px; } .settings-schedule-profile > div > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; } .settings-check-chip input { position: absolute; opacity: 0; } .settings-check-chip span { display: block; padding: 7px 5px; border: 1px solid var(--glass-border-soft); border-radius: 8px; text-align: center; color: var(--gray); font-size: 8.5px; cursor: pointer; } .settings-check-chip input:checked + span { border-color: var(--florentini-green); background: var(--florentini-green-mist); color: var(--florentini-green-deep); } @media (max-width: 1480px) { .settings-dashboard-studio, .settings-interface-studio { grid-template-columns: minmax(0,1fr); } .settings-preview-sticky { position: static; } .settings-global-switches { grid-template-columns: repeat(3,minmax(0,1fr)); } .settings-interface-controls, .settings-dashboard-controls { min-width: 0; } .settings-interface-preview-body { min-height: 390px; } } @media (max-width: 1050px) { .checklist-builder-people > div:nth-child(2) { grid-template-columns: 1fr 1fr; } .telegram-directory-header { display: none; } .telegram-directory-row { grid-template-columns: 1fr 1fr; } .telegram-directory-row > div:first-child { grid-column: 1 / -1; } .schedule-doc-toolbar { grid-template-columns: 1fr; } .schedule-doc-actions { justify-content: flex-start; flex-wrap: wrap; } .schedule-add-employee > div { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .event-owner-summary, .checklist-builder-fields { grid-template-columns: 1fr; } .event-participant-row { grid-template-columns: 34px 1fr; } .event-participant-contact, .event-participant-row select { grid-column: 2; } .checklist-command-toolbar, .checklist-command-head, .checklist-builder-footer, .checklist-assignment-head { align-items: stretch; flex-direction: column; } .checklist-builder-people > div:nth-child(2), .telegram-directory-row { grid-template-columns: 1fr; } .telegram-directory-row > div:first-child, .telegram-directory-row > * { grid-column: 1; } .checklist-builder-footer .settings-switch-row { min-width: 0; } .schedule-paper-v6 { padding: 9px; } .schedule-title-table td, .schedule-title-table th { padding: 4px; font-size: 8px; } .schedule-signatures-v6 { grid-template-columns: 1fr; gap: 22px; } .settings-global-switches { grid-template-columns: 1fr 1fr; } .settings-schedule-profile > div > div { grid-template-columns: 1fr 1fr; } } @media print { .schedule-document-page-v6 .page-head, .schedule-doc-toolbar, .schedule-add-employee, .v5-topbar, .v5-sidebar { display: none !important; } .schedule-document-page-v6 { padding: 0 !important; } .schedule-paper-v6 { margin: 0; padding: 4mm; border: 0; box-shadow: none; } .schedule-grid-scroll-v6 { overflow: visible; } .schedule-grid-v6 { transform-origin: top left; font-size: 6.5px; } .schedule-grid-v6 th, .schedule-grid-v6 td { height: 22px; } .schedule-grid-v6 td select { height: 21px; font-size: 6.5px; } } /* Profile rewards */ .profile-rewards-v6 { position: relative; overflow: hidden; margin-top: 16px; padding: 18px; } .profile-rewards-v6::before { content: ""; position: absolute; inset: -45% auto auto -8%; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(207,224,168,.18), transparent 68%); pointer-events: none; } .profile-rewards-head { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 22px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--glass-border-soft); } .profile-rewards-head > div:first-child > span { font: 8.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--florentini-green-deep); } .profile-rewards-head h2 { margin: 4px 0 3px; font: 500 25px var(--font-serif); } .profile-rewards-head p { max-width: 690px; margin: 0; color: var(--gray); font-size: 10px; line-height: 1.55; } .profile-reward-level { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; } .profile-reward-level > span { font-size: 10px; color: var(--gray); } .profile-reward-level > b { font: 13px var(--font-mono); color: var(--florentini-green-deep); } .profile-reward-level > i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: var(--gray-mist); } .profile-reward-level > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--florentini-green),var(--lime)); transition: width var(--motion-chart-duration,900ms) var(--ease-soft); } .profile-reward-level > small { grid-column: 1 / -1; font: 8px var(--font-mono); color: var(--gray); } .profile-reward-grid { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 14px; } .profile-reward-card { position: relative; min-width: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: 9px; padding: 13px; border: 1px solid var(--glass-border-soft); border-radius: 15px; background: rgba(var(--surface-rgb),.54); transition: transform var(--motion-fast-duration,180ms) var(--ease-soft), box-shadow var(--motion-fast-duration,180ms) var(--ease-soft); } .profile-reward-card:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lift); } .profile-reward-card.ready { border-color: rgba(122,148,102,.62); box-shadow: inset 0 0 0 1px rgba(122,148,102,.14), 0 12px 28px rgba(69,91,59,.10); } .profile-reward-card.claimed { background: linear-gradient(145deg,rgba(122,148,102,.11),rgba(var(--surface-rgb),.62)); } .profile-medal-v6 { position: relative; width: 53px; height: 62px; display: grid; place-items: start center; } .profile-medal-v6 > span { position: relative; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(85,110,72,.36); border-radius: 50%; background: radial-gradient(circle at 35% 28%,#fbfff3,#b8ca9f 72%); color: #46613f; box-shadow: inset 0 0 0 4px rgba(255,255,255,.52),0 7px 15px rgba(64,80,56,.18); font: 700 11px var(--font-mono); } .profile-medal-v6 > i { position: absolute; z-index: 1; bottom: 0; width: 30px; height: 28px; background: linear-gradient(90deg,#718d64 0 44%,transparent 44% 56%,#718d64 56%); clip-path: polygon(10% 0,90% 0,100% 100%,50% 76%,0 100%); } .tone-gold .profile-medal-v6 > span, .profile-medal-v6.tone-gold > span { background: radial-gradient(circle at 35% 28%,#fff8d8,#d4ad54 72%); color:#745918; } .tone-rose .profile-medal-v6 > span, .profile-medal-v6.tone-rose > span { background: radial-gradient(circle at 35% 28%,#fff4ef,#d78e78 72%); color:#774534; } .tone-lime .profile-medal-v6 > span, .profile-medal-v6.tone-lime > span { background: radial-gradient(circle at 35% 28%,#f7ffd8,#b6cb70 72%); color:#526329; } .profile-reward-copy > span { font: 700 9px var(--font-mono); color: var(--florentini-green-deep); } .profile-reward-copy h3 { margin: 3px 0; font: 500 16px var(--font-serif); } .profile-reward-copy p { margin: 0; color: var(--gray); font-size: 9px; line-height: 1.45; } .profile-reward-progress { align-self: end; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; } .profile-reward-progress > div { height: 5px; overflow: hidden; border-radius: 99px; background: var(--gray-mist); } .profile-reward-progress > div i { display: block; height: 100%; border-radius: inherit; background: var(--florentini-green); transition: width var(--motion-chart-duration,900ms) var(--ease-soft); } .profile-reward-progress > span { font: 8px var(--font-mono); color: var(--gray); } .profile-reward-card > button { min-height: 34px; border: 1px solid var(--florentini-green); border-radius: 9px; background: var(--florentini-green-mist); color: var(--florentini-green-deep); font-size: 9.5px; cursor: pointer; } .profile-reward-claimed { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(122,148,102,.4); border-radius: 9px; background: var(--florentini-green-mist); color: var(--florentini-green-deep); font-size: 9.5px; } .profile-reward-card > button:disabled { border-color: var(--gray-mist); background: rgba(var(--surface-rgb),.34); color: var(--gray); cursor: default; } .profile-reward-card.claimed > button:disabled { border-color: rgba(122,148,102,.4); color: var(--florentini-green-deep); } .reward-celebration-v6 { position: fixed; z-index: 1600; inset: 50% auto auto 50%; width: min(360px,calc(100vw - 30px)); display: grid; justify-items: center; padding: 28px; border: 1px solid rgba(207,224,168,.65); border-radius: 24px; background: rgba(26,35,24,.94); color: #f7f8f1; box-shadow: 0 30px 90px rgba(15,20,13,.48); backdrop-filter: blur(18px); transform: translate(-50%,-50%); animation: rewardRevealV6 var(--motion-page-duration,460ms) var(--ease-soft) both; } .reward-celebration-v6 > span { margin-top: 12px; font: 8px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: #cfe0a8; } .reward-celebration-v6 h2 { margin: 5px 0; font: 500 26px var(--font-serif); } .reward-celebration-v6 > b { color: #ddebab; font: 24px var(--font-serif); } .reward-celebration-v6 > small { margin-top: 4px; color: #aeb8a6; font-size: 9px; } .reward-celebration-v6 .profile-medal-v6 { transform: scale(1.3); animation: rewardMedalV6 900ms var(--ease-spring) both; } .reward-particles-v6 { position: absolute; inset: 0; pointer-events: none; } .reward-particles-v6 i { --angle: calc(var(--i, 1) * 30deg); position: absolute; left: 50%; top: 40%; width: 5px; height: 10px; border-radius: 3px; background: #cfe0a8; animation: rewardParticleV6 1100ms var(--ease-soft) both; } .reward-particles-v6 i:nth-child(1){--x:-120px;--y:-70px}.reward-particles-v6 i:nth-child(2){--x:-80px;--y:-110px;background:#d6ad65}.reward-particles-v6 i:nth-child(3){--x:-25px;--y:-125px}.reward-particles-v6 i:nth-child(4){--x:45px;--y:-120px;background:#d78e78}.reward-particles-v6 i:nth-child(5){--x:100px;--y:-90px}.reward-particles-v6 i:nth-child(6){--x:125px;--y:-30px;background:#d6ad65}.reward-particles-v6 i:nth-child(7){--x:110px;--y:55px}.reward-particles-v6 i:nth-child(8){--x:55px;--y:95px;background:#d78e78}.reward-particles-v6 i:nth-child(9){--x:-20px;--y:100px}.reward-particles-v6 i:nth-child(10){--x:-85px;--y:70px;background:#d6ad65}.reward-particles-v6 i:nth-child(11){--x:-120px;--y:25px}.reward-particles-v6 i:nth-child(12){--x:10px;--y:-150px;background:#d78e78} @keyframes rewardRevealV6 { from { opacity:0; transform:translate(-50%,-46%) scale(.92); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } } @keyframes rewardMedalV6 { from { opacity:0; transform:scale(.4) rotate(-18deg); } to { opacity:1; transform:scale(1.3) rotate(0); } } @keyframes rewardParticleV6 { 0% { opacity:0; transform:translate(0,0) rotate(0); } 22% { opacity:1; } 100% { opacity:0; transform:translate(var(--x),var(--y)) rotate(190deg); } } @media (max-width: 1120px) { .profile-reward-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .profile-rewards-head, .profile-reward-grid { grid-template-columns: 1fr; } } body[data-motion="off"] .reward-celebration-v6, body[data-motion="off"] .reward-celebration-v6 .profile-medal-v6, body[data-motion="off"] .reward-particles-v6 i { animation: none !important; } /* Checklists V7 — compact cards and explicit assignment controls */ .checklist-builder-fields { grid-template-columns: minmax(220px,1fr) minmax(340px,1.35fr) minmax(190px,.72fr); align-items: end; } .checklist-department-picker { min-width: 0; display: grid; gap: 5px; } .checklist-department-picker > span { font: 8.5px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--gray); } .checklist-department-picker > div { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; padding: 4px; border: 1px solid var(--glass-border-soft); border-radius: 11px; background: rgba(122,148,102,.06); } .checklist-department-picker button { min-width: 0; min-height: 42px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px; padding: 6px 7px; border: 0; border-radius: 8px; background: transparent; color: var(--gray); text-align: left; cursor: pointer; } .checklist-department-picker button b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .checklist-department-picker button small { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; background: rgba(var(--surface-rgb),.76); font: 7.5px var(--font-mono); } .checklist-department-picker button.active { background: var(--surface); color: var(--florentini-green-deep); box-shadow: 0 5px 14px rgba(64,82,56,.10); } .checklist-builder-people > div:first-child > span { display: grid; gap: 2px; } .checklist-builder-people > div:first-child > span small { font-size: 8.5px; color: var(--gray); } .checklist-builder-people > div:nth-child(2) button { grid-template-columns: 32px minmax(0,1fr) 24px; position: relative; } .checklist-builder-people > div:nth-child(2) button.active { border-color: var(--florentini-green); box-shadow: inset 0 0 0 1px rgba(122,148,102,.18),0 7px 18px rgba(67,88,58,.08); } .checklist-person-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--gray-mist); border-radius: 50%; background: var(--surface); color: var(--gray); font: 700 10px var(--font-mono); font-style: normal; } .checklist-builder-people button.active .checklist-person-check { border-color: var(--florentini-green); background: var(--florentini-green); color: #fff; animation: checklistCheckV7 240ms var(--ease-spring) both; } @keyframes checklistCheckV7 { from { transform: scale(.65); } to { transform: scale(1); } } .checklist-telegram-toggle { min-width: min(440px,100%); display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--glass-border-soft); border-radius: 12px; background: rgba(var(--surface-rgb),.45); cursor: pointer; } .checklist-telegram-toggle.active { border-color: rgba(122,148,102,.48); background: var(--florentini-green-mist); } .checklist-telegram-toggle > input { position: absolute; opacity: 0; pointer-events: none; } .checklist-toggle-track { position: relative; width: 40px; height: 23px; border-radius: 99px; background: #d9d8d0; box-shadow: inset 0 1px 3px rgba(31,37,29,.12); transition: background var(--motion-fast-duration,180ms) var(--ease-soft); } .checklist-toggle-track i { position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(38,45,34,.2); transition: transform var(--motion-fast-duration,180ms) var(--ease-soft); } .checklist-telegram-toggle.active .checklist-toggle-track { background: var(--florentini-green); } .checklist-telegram-toggle.active .checklist-toggle-track i { transform: translateX(17px); } .checklist-telegram-toggle > span:last-child { min-width: 0; } .checklist-telegram-toggle b,.checklist-telegram-toggle small { display: block; } .checklist-telegram-toggle b { font-size: 10.5px; } .checklist-telegram-toggle small { margin-top: 2px; color: var(--gray); font-size: 8.5px; line-height: 1.4; } .checklist-assignments-list { grid-template-columns: repeat(auto-fill,minmax(310px,1fr)); gap: 9px; align-items: start; } .checklist-assignment-card { min-width: 0; } .checklist-assignment-card.expanded { grid-column: 1 / -1; } .checklist-card-summary-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; } .checklist-card-summary { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 38px minmax(0,1fr) 64px 18px; gap: 10px; align-items: center; padding: 12px; border: 0; background: transparent; color: var(--charcoal); text-align: left; cursor: pointer; } .checklist-card-status { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--florentini-green-mist); color: var(--florentini-green-deep); font: 600 11px var(--font-mono); } .checklist-card-status.done { background: var(--florentini-green); color: #fff; } .checklist-card-copy { min-width: 0; display: grid; gap: 3px; } .checklist-card-copy small,.checklist-card-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray); font: 7.8px var(--font-mono); font-style: normal; } .checklist-card-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px var(--font-serif); } .checklist-card-progress { display: grid; gap: 5px; text-align: right; } .checklist-card-progress > b { font: 15px var(--font-mono); color: var(--florentini-green-deep); } .checklist-card-progress > i { width: 64px; height: 4px; overflow: hidden; border-radius: 99px; background: var(--gray-mist); } .checklist-card-progress > i em { display: block; height: 100%; border-radius: inherit; background: var(--florentini-green); } .checklist-card-chevron { color: var(--gray); font-size: 17px; transform: rotate(0); transition: transform var(--motion-fast-duration,180ms) var(--ease-soft); } .checklist-assignment-card.expanded .checklist-card-chevron { transform: rotate(180deg); } .checklist-card-actions { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 8px 8px 0; } .checklist-card-actions button { min-width: 64px; min-height: 29px; padding: 5px 7px; border: 1px solid var(--glass-border-soft); border-radius: 8px; background: rgba(var(--surface-rgb),.62); color: var(--graphite); font-size: 8px; cursor: pointer; } .checklist-card-actions button:hover { border-color: var(--florentini-green); color: var(--florentini-green-deep); } .checklist-card-actions button.danger:hover { border-color: rgba(176,92,65,.45); background: rgba(176,92,65,.07); color: var(--terracotta); } .checklist-card-detail { border-top: 1px solid var(--glass-border-soft); animation: flPageRise var(--motion-fast-duration,180ms) var(--ease-soft) both; } .checklist-card-detail .checklist-assignment-head { padding-top: 11px; padding-bottom: 11px; } @media (max-width: 1180px) { .checklist-builder-fields { grid-template-columns: 1fr 1fr; } .checklist-department-picker { grid-column: 1 / -1; grid-row: 2; } } @media (max-width: 720px) { .checklist-builder-fields { grid-template-columns: 1fr; } .checklist-department-picker { grid-column: auto; grid-row: auto; } .checklist-department-picker > div { grid-template-columns: 1fr 1fr; } .checklist-builder-footer { align-items: stretch; } .checklist-telegram-toggle { min-width: 0; } .checklist-card-summary-row { grid-template-columns: 1fr; } .checklist-card-actions { flex-direction: row; justify-content: flex-end; padding: 0 10px 10px; } } /* Notification inbox V7 */ .v5-notice-panel { width: min(460px,calc(100vw - 24px)); max-height: min(680px,calc(100vh - 78px)); padding: 0; overflow: hidden; border: 1px solid rgba(52,67,47,.20); border-radius: 22px; background: #f8f6ef; box-shadow: 0 32px 90px rgba(36,47,32,.28); } .v5-notice-head { min-height: 104px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 16px; border: 0; background: linear-gradient(135deg,#20281f,#344530); color: #f8f8ef; } .v5-notice-monogram { width: 42px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(222,236,190,.28); border-radius: 18px 18px 7px 7px; background: linear-gradient(160deg,rgba(255,255,255,.13),rgba(207,224,168,.10)); color: #dcebab; font: italic 34px/1 var(--font-serif); box-shadow: inset 0 0 0 4px rgba(255,255,255,.03); } .v5-notice-head > div { display: grid; gap: 2px; } .v5-notice-head > div > small { margin: 0; color: #aebca6; font: 7.5px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; } .v5-notice-head > div > b { color: #f8f8ef; font: 500 24px/1 var(--font-serif); } .v5-notice-head > div > em { color: #d4ddce; font-size: 8.5px; font-style: normal; } .v5-notice-head > button { align-self: start; padding: 7px 9px; border-color: rgba(222,236,190,.24); background: rgba(255,255,255,.07); color: #dcebab; font-size: 8px; } .v5-notice-stack { max-height: 500px; display: grid; gap: 7px; overflow: auto; padding: 11px; } .v5-notice-row { position: relative; grid-template-columns: 42px minmax(0,1fr) 18px; gap: 10px; align-items: center; margin: 0; padding: 11px; overflow: hidden; border: 1px solid #deded4; border-radius: 15px; background: #fffef9; box-shadow: 0 5px 15px rgba(46,55,42,.035); } .v5-notice-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #839a79; } .v5-notice-row.tone-alert::before,.v5-notice-row.tone-warn::before { background: var(--terracotta); } .v5-notice-row.tone-ok::before { background: var(--florentini-green); } .v5-notice-row:hover { border-color: rgba(78,104,67,.35); background: #fff; box-shadow: 0 12px 24px rgba(47,62,42,.09); transform: translateY(-1px); } .v5-notice-row.read { opacity: .66; box-shadow: none; } .v5-notice-row.unread { background: #fff; } .v5-notice-row.unread::after { position: absolute; top: 10px; right: 10px; width: 5px; height: 5px; } .v5-notice-row .v5-notice-icon { grid-row: auto; width: 40px; height: 40px; border-radius: 13px; background: #e8eee2; color: #45613e; font-size: 9px; } .v5-notice-row.tone-alert .v5-notice-icon,.v5-notice-row.tone-warn .v5-notice-icon { background: #f4e5df; color: #934f3b; } .v5-notice-row > .v5-notice-copy { width: auto !important; height: auto !important; min-width: 0; display: grid; grid-row: auto !important; place-items: initial; gap: 3px; border-radius: 0 !important; background: transparent !important; color: inherit !important; font: inherit; } .v5-notice-meta { display: flex; justify-content: space-between; gap: 8px; padding-right: 7px; } .v5-notice-meta em,.v5-notice-meta time { color: #879082; font: 7px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; } .v5-notice-copy > b { overflow: hidden; color: #283027; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .v5-notice-copy > small { overflow: hidden; color: #777e73; font: 8.5px var(--font-sans); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .v5-notice-arrow { width: auto !important; height: auto !important; grid-row: auto !important; border-radius: 0 !important; background: transparent !important; color: #94a08f !important; font-size: 13px !important; transition: transform var(--motion-fast-duration,180ms) var(--ease-soft); } .v5-notice-row:hover .v5-notice-arrow { transform: translate(2px,-2px); } .v5-notice-foot { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid #e1e0d7; color: #8a9086; font-size: 8px; } .v5-notice-foot b { color: #556a4d; font-weight: 600; } @media (max-width: 520px) { .v5-notice-panel { position: fixed; top: 62px; left: 12px; right: 12px; width: auto; } .v5-notice-head { grid-template-columns: 38px minmax(0,1fr); } .v5-notice-head > button { grid-column: 2; justify-self: start; } } /* Florentini League V7 */ .profile-league-layout-v7 { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 12px; align-items: start; margin-top: 14px; } .profile-league-layout-v7 .profile-reward-grid { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 0; } .profile-league-layout-v7 .profile-reward-card { min-height: 255px; } .profile-leaderboard-v7 { overflow: hidden; border: 1px solid rgba(66,83,59,.22); border-radius: 17px; background: linear-gradient(155deg,#273126,#354631); color: #f5f6ef; box-shadow: 0 18px 44px rgba(37,48,33,.17); } .profile-leaderboard-head { padding: 16px; border-bottom: 1px solid rgba(255,255,255,.09); } .profile-leaderboard-head > span { color: #ccdda5; font: 7.5px var(--font-mono); letter-spacing: .17em; text-transform: uppercase; } .profile-leaderboard-head h3 { margin: 4px 0 2px; color: #fff; font: 500 19px var(--font-serif); } .profile-leaderboard-head p { margin: 0; color: #aeb9aa; font-size: 8.5px; line-height: 1.45; } .profile-leaderboard-list { display: grid; padding: 7px; } .profile-leaderboard-list article { min-width: 0; display: grid; grid-template-columns: 25px 29px minmax(0,1fr) auto; gap: 7px; align-items: center; min-height: 43px; padding: 5px 7px; border-bottom: 1px solid rgba(255,255,255,.065); } .profile-leaderboard-list article:last-child { border-bottom: 0; } .profile-leaderboard-list article.current { border-radius: 10px; background: rgba(207,224,168,.12); box-shadow: inset 0 0 0 1px rgba(207,224,168,.16); } .profile-leaderboard-list strong { color: #8e9a89; font: 8px var(--font-mono); } .profile-leaderboard-list article:nth-child(-n+3) strong { color: #d9bd75; font-weight: 700; } .profile-leaderboard-list article > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.09); color: #dce8cf; font: 500 11px var(--font-serif); font-style: normal; } .profile-leaderboard-list article > span { min-width: 0; } .profile-leaderboard-list article > span b,.profile-leaderboard-list article > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-leaderboard-list article > span b { color: #f8f8f3; font-size: 9.5px; } .profile-leaderboard-list article > span small { margin-top: 1px; color: #9eaaa0; font-size: 7.5px; } .profile-leaderboard-list article > em { color: #cfdfa9; font: 9px var(--font-mono); font-style: normal; } .profile-current-rank { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.09); color: #aeb9aa; font-size: 8px; } .profile-current-rank b { color: #dcebab; } @media (max-width: 1280px) { .profile-league-layout-v7 { grid-template-columns: 1fr; } .profile-league-layout-v7 .profile-reward-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width: 900px) { .profile-league-layout-v7 .profile-reward-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .profile-league-layout-v7 .profile-reward-grid { grid-template-columns: 1fr; } } /* Owner reward control room V7 */ .owner-reward-studio-v7 { position: relative; z-index: 2; overflow: hidden; margin-top: 14px; border: 1px solid rgba(65,81,57,.26); border-radius: 20px; background: #293328; color: #f6f7f0; box-shadow: 0 20px 48px rgba(34,44,31,.16); } .owner-reward-studio-head { width: 100%; display: grid; grid-template-columns: 48px minmax(0,1fr) auto 26px; gap: 12px; align-items: center; min-height: 86px; padding: 13px 16px; border: 0; background: radial-gradient(circle at 12% 0,rgba(207,224,168,.14),transparent 34%),linear-gradient(135deg,#222b21,#354632); color: inherit; text-align: left; cursor: pointer; } .owner-reward-studio-head:hover { background: radial-gradient(circle at 12% 0,rgba(207,224,168,.20),transparent 37%),linear-gradient(135deg,#222b21,#394b35); } .owner-studio-monogram { width: 46px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(221,235,186,.28); border-radius: 19px 19px 7px 7px; background: linear-gradient(160deg,rgba(255,255,255,.12),rgba(207,224,168,.08)); color: #dcebab; font: italic 31px/1 var(--font-serif); box-shadow: inset 0 0 0 4px rgba(255,255,255,.025); } .owner-reward-studio-head > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; } .owner-reward-studio-head small,.owner-reward-studio-head em { color: #aeb9aa; font-style: normal; } .owner-reward-studio-head > span:nth-child(2) small { color: #cfe0a8; font: 7.5px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; } .owner-reward-studio-head > span:nth-child(2) b { color: #fff; font: 500 22px/1.15 var(--font-serif); } .owner-reward-studio-head > span:nth-child(2) em { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .owner-studio-summary { min-width: 72px; display: grid; justify-items: end; } .owner-studio-summary b { color: #dcebab; font: 20px var(--font-serif); } .owner-studio-summary small { font: 7px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; } .owner-reward-studio-head > i { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #dcebab; font: 15px/1 var(--font-sans); font-style: normal; } .owner-reward-studio-body { border-top: 1px solid rgba(255,255,255,.075); background: #f7f6ef; color: var(--charcoal); animation: flPageRise var(--motion-page-duration,460ms) var(--ease-soft) both; } .owner-reward-builder-v7 { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 14px 18px; padding: 16px; border-bottom: 1px solid #dfe0d6; background: linear-gradient(145deg,#fdfcf7,#f0f2e9); } .owner-reward-builder-intro { grid-row: 1 / span 2; padding: 13px; border-radius: 15px; background: #344431; color: #f5f6ef; } .owner-reward-builder-intro > span,.owner-reward-control-head span { color: #cedda8; font: 7.5px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; } .owner-reward-builder-intro h3 { margin: 7px 0 5px; color: #fff; font: 500 20px/1.1 var(--font-serif); } .owner-reward-builder-intro p { margin: 0; color: #b8c1b4; font-size: 8.5px; line-height: 1.55; } .owner-reward-fields-v7 { min-width: 0; display: grid; grid-template-columns: minmax(180px,1fr) minmax(135px,.58fr) minmax(135px,.58fr) 94px; gap: 7px; } .owner-reward-fields-v7 label { min-width: 0; display: grid; align-content: start; gap: 5px; } .owner-reward-fields-v7 label:first-child { grid-column: span 2; } .owner-reward-fields-v7 label.wide { grid-column: 1 / -1; } .owner-reward-fields-v7 label > span { color: #747b70; font: 7.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } .owner-reward-fields-v7 input,.owner-reward-fields-v7 textarea { width: 100%; min-width: 0; border: 1px solid #d7d9ce; border-radius: 10px; outline: 0; background: rgba(255,255,255,.74); color: #293027; font: 9.5px var(--font-sans); transition: border-color var(--motion-fast-duration,180ms) var(--ease-soft),box-shadow var(--motion-fast-duration,180ms) var(--ease-soft); } .owner-reward-fields-v7 input { height: 39px; padding: 0 10px; } .owner-reward-fields-v7 textarea { min-height: 61px; resize: vertical; padding: 9px 10px; line-height: 1.45; } .owner-reward-fields-v7 input:focus,.owner-reward-fields-v7 textarea:focus { border-color: #829b76; box-shadow: 0 0 0 3px rgba(122,148,102,.12); } .owner-reward-fields-v7 .medal-input-v7 { color: #5c713e; font: 18px var(--font-serif); text-align: center; } .owner-reward-people-v7 { min-width: 0; display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 8px; align-items: start; } .owner-reward-people-v7 > div:first-child { display: grid; gap: 4px; padding-top: 5px; } .owner-reward-people-v7 > div:first-child span { color: #6f776c; font: 7.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } .owner-reward-people-v7 > div:first-child b { font-size: 9px; } .owner-employee-picker-v7 { min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(120px,1fr)); gap: 5px; } .owner-employee-picker-v7 > button { min-width: 0; display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 7px; align-items: center; min-height: 42px; padding: 6px 7px; border: 1px solid #d7d9cf; border-radius: 10px; background: rgba(255,255,255,.57); color: #353a33; text-align: left; cursor: pointer; } .owner-employee-picker-v7 > button:hover { border-color: #9aac91; background: #fff; transform: translateY(-1px); } .owner-employee-picker-v7 > button.selected { border-color: #708c63; background: #e8efe2; box-shadow: inset 0 0 0 1px rgba(112,140,99,.10); } .owner-employee-picker-v7 > button > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e4e6dc; color: #66705f; font: 7.5px var(--font-mono); font-style: normal; } .owner-employee-picker-v7 > button.selected > i { background: #6f8965; color: #fff; } .owner-employee-picker-v7 > button > span { min-width: 0; display: block; } .owner-employee-picker-v7 b,.owner-employee-picker-v7 small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .owner-employee-picker-v7 b { font-size: 8.5px; } .owner-employee-picker-v7 small { margin-top: 2px; color: #8a9086; font-size: 7px; } .owner-reward-builder-actions-v7 { grid-column: 2; display: flex; justify-content: space-between; gap: 12px; align-items: center; } .owner-reward-builder-actions-v7 > span { color: #64715e; font-size: 8px; } .owner-reward-builder-actions-v7 > button { min-height: 38px; display: inline-flex; gap: 12px; align-items: center; padding: 0 14px; border: 1px solid #3f543a; border-radius: 10px; background: #2d3a2a; color: #fff; cursor: pointer; box-shadow: 0 8px 18px rgba(49,64,44,.13); } .owner-reward-builder-actions-v7 > button:hover { background: #3a4d35; transform: translateY(-1px); } .owner-reward-builder-actions-v7 > button i { color: #d7e7ad; font-style: normal; } .owner-reward-control-v7 { padding: 16px; } .owner-reward-control-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 10px; } .owner-reward-control-head span { color: #617557; } .owner-reward-control-head h3 { margin: 3px 0 0; font: 500 20px var(--font-serif); } .owner-reward-control-head p { max-width: 360px; margin: 0; color: #7d8479; font-size: 8px; text-align: right; } .owner-reward-programs-v7 { display: grid; gap: 8px; } .owner-reward-program-v7 { overflow: hidden; border: 1px solid #dadcd2; border-radius: 15px; background: #fffef9; box-shadow: 0 8px 20px rgba(50,61,45,.04); } .owner-reward-program-v7.paused { opacity: .69; } .owner-program-head-v7 { display: grid; grid-template-columns: 45px minmax(0,1fr) 100px; gap: 10px; align-items: center; padding: 11px 12px; } .owner-program-medal { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(85,110,72,.28); border-radius: 50%; background: radial-gradient(circle at 35% 28%,#fbfff3,#bdcca8 72%); color: #4c6745; box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); font: 700 9px var(--font-mono); } .owner-program-medal.tone-gold { background: radial-gradient(circle at 35% 28%,#fff8d8,#d4ad54 72%); color: #745918; } .owner-program-medal.tone-rose { background: radial-gradient(circle at 35% 28%,#fff4ef,#d78e78 72%); color: #774534; } .owner-program-medal.tone-lime { background: radial-gradient(circle at 35% 28%,#f7ffd8,#b6cb70 72%); color: #526329; } .owner-program-head-v7 > div:nth-child(2) { min-width: 0; } .owner-program-head-v7 > div:nth-child(2) > span { color: #74816d; font: 7px var(--font-mono); letter-spacing: .11em; text-transform: uppercase; } .owner-program-head-v7 h4 { margin: 2px 0; font: 500 15px var(--font-serif); } .owner-program-head-v7 p { overflow: hidden; margin: 0; color: #7b8178; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .owner-program-stats-v7 { display: grid; justify-items: end; } .owner-program-stats-v7 b { color: #486241; font: 17px var(--font-serif); } .owner-program-stats-v7 small { color: #899085; font: 7px var(--font-mono); } .owner-program-stats-v7 em { margin-top: 3px; color: #4e5e49; font: 8px var(--font-mono); font-style: normal; } .owner-program-toolbar-v7 { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-top: 1px solid #e4e4dc; border-bottom: 1px solid #e4e4dc; background: #f5f5ef; } .owner-program-toolbar-v7 > span { margin-right: auto; color: #737b70; font: 7.5px var(--font-mono); } .owner-program-toolbar-v7 button,.owner-assignment-editor-v7 > div:last-child button { min-height: 28px; padding: 0 9px; border: 1px solid #d2d5cb; border-radius: 8px; background: #fff; color: #586451; font-size: 7.5px; cursor: pointer; } .owner-program-toolbar-v7 button:hover,.owner-assignment-editor-v7 > div:last-child button:hover { border-color: #829a78; background: #edf2e9; } .owner-assignment-editor-v7 { padding: 9px 12px; border-bottom: 1px solid #e2e3da; background: #f0f3eb; } .owner-assignment-editor-v7 .owner-employee-picker-v7 { grid-template-columns: repeat(5,minmax(105px,1fr)); } .owner-assignment-editor-v7 > div:last-child { display: flex; justify-content: flex-end; gap: 5px; margin-top: 7px; } .owner-assignment-editor-v7 > div:last-child button:last-child { border-color: #627c59; background: #627c59; color: #fff; } .owner-progress-list-v7 { display: grid; } .owner-progress-row-v7 { min-width: 0; display: grid; grid-template-columns: 30px minmax(130px,.72fr) minmax(150px,1fr) 78px minmax(92px,auto); gap: 9px; align-items: center; min-height: 54px; padding: 7px 12px; border-bottom: 1px solid #ebeae3; } .owner-progress-row-v7:last-child { border-bottom: 0; } .owner-progress-row-v7:hover { background: #fafbf6; } .owner-progress-avatar-v7 { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #e8ede3; color: #5e7655; font: 8px var(--font-mono); font-style: normal; } .owner-progress-person-v7 { min-width: 0; } .owner-progress-person-v7 b,.owner-progress-person-v7 small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .owner-progress-person-v7 b { font-size: 9px; } .owner-progress-person-v7 small { margin-top: 2px; color: #8b9188; font-size: 7px; } .owner-progress-meter-v7 { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 36px; gap: 7px; align-items: center; } .owner-progress-meter-v7 > i { height: 6px; overflow: hidden; border-radius: 99px; background: #e3e5dc; } .owner-progress-meter-v7 > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#708a65,#a9bd7d); transition: width var(--motion-chart-duration,900ms) var(--ease-soft); } .owner-progress-meter-v7 > small { color: #737b70; font: 7.5px var(--font-mono); } .owner-progress-state-v7 { padding: 5px 6px; border-radius: 7px; background: #f0f1eb; color: #777e74; font: 6.8px var(--font-mono); text-align: center; text-transform: uppercase; } .owner-progress-state-v7.ready,.owner-progress-state-v7.pending { background: #f2ead5; color: #7c652e; } .owner-progress-state-v7.paid { background: #e7f0e1; color: #496b41; } .owner-plus-one-v7,.owner-settle-v7 { min-height: 36px; border: 1px solid #66805d; border-radius: 9px; background: #e9f0e4; color: #496442; cursor: pointer; } .owner-plus-one-v7 { display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; align-items: center; padding: 4px 8px; text-align: left; } .owner-plus-one-v7 b { grid-row: 1 / span 2; font: 16px var(--font-serif); } .owner-plus-one-v7 small { color: #6d7968; font-size: 6.8px; } .owner-plus-one-v7:hover,.owner-settle-v7:hover { background: #dfead8; transform: translateY(-1px); } .owner-plus-one-v7:disabled { border-color: #d5d7cf; background: #f0f0eb; color: #9a9d96; cursor: default; transform: none; } .owner-settle-v7 { padding: 4px 9px; background: #394b35; color: #fff; font-size: 7.5px; } .owner-reward-empty-v7 { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; align-items: center; min-height: 90px; padding: 14px; border: 1px dashed #cfd3c7; border-radius: 14px; background: #fbfbf6; } .owner-reward-empty-v7 > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #e8eee2; color: #66805d; font-size: 17px; } .owner-reward-empty-v7 b { font: 500 14px var(--font-serif); } .owner-reward-empty-v7 p { margin: 3px 0 0; color: #838a80; font-size: 8px; } @media (max-width: 1180px) { .owner-reward-fields-v7 { grid-template-columns: 1fr 1fr; } .owner-reward-fields-v7 label:first-child { grid-column: span 2; } .owner-employee-picker-v7,.owner-assignment-editor-v7 .owner-employee-picker-v7 { grid-template-columns: repeat(3,minmax(110px,1fr)); } } @media (max-width: 820px) { .owner-reward-builder-v7 { grid-template-columns: 1fr; } .owner-reward-builder-intro { grid-row: auto; } .owner-reward-builder-actions-v7 { grid-column: auto; } .owner-reward-people-v7 { grid-template-columns: 1fr; } .owner-progress-row-v7 { grid-template-columns: 30px minmax(0,1fr) auto; } .owner-progress-meter-v7 { grid-column: 2 / -1; } .owner-progress-state-v7 { grid-column: 2; } } @media (max-width: 560px) { .owner-reward-studio-head { grid-template-columns: 42px minmax(0,1fr) 24px; } .owner-studio-summary { display: none; } .owner-reward-fields-v7,.owner-employee-picker-v7,.owner-assignment-editor-v7 .owner-employee-picker-v7 { grid-template-columns: 1fr; } .owner-reward-fields-v7 label:first-child,.owner-reward-fields-v7 label.wide { grid-column: auto; } .owner-reward-builder-actions-v7,.owner-reward-control-head,.owner-program-toolbar-v7 { align-items: stretch; flex-direction: column; } .owner-program-head-v7 { grid-template-columns: 43px minmax(0,1fr); } .owner-program-stats-v7 { grid-column: 2; justify-items: start; } .owner-progress-row-v7 { grid-template-columns: 30px minmax(0,1fr); } .owner-progress-meter-v7,.owner-progress-state-v7,.owner-plus-one-v7,.owner-settle-v7 { grid-column: 2; } } /* Team quick actions and shift recognition */ .team-directory-grid > button { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr) 20px; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: rgba(var(--surface-rgb),.48); color: var(--charcoal); text-align: left; cursor: pointer; } .team-directory-grid > button:hover,.team-directory-grid > button.active { border-color: rgba(122,148,102,.52); background: var(--florentini-green-mist); box-shadow: 0 8px 18px rgba(61,80,53,.08); } .team-directory-grid > button > div { min-width: 0; } .team-directory-grid > button b,.team-directory-grid > button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-directory-grid > button b { font-size: 10px; } .team-directory-grid > button small { margin-top: 2px; color: var(--gray); font: 7.5px var(--font-mono); } .team-card-arrow { color: var(--gray); font-size: 12px; transition: transform var(--motion-fast-duration,180ms) var(--ease-soft); } .team-directory-grid > button:hover .team-card-arrow { transform: translate(2px,-2px); color: var(--florentini-green-deep); } .team-quick-drawer { margin-top: 10px; padding: 13px; border: 1px solid rgba(122,148,102,.30); border-radius: 15px; background: linear-gradient(145deg,rgba(var(--surface-rgb),.82),rgba(122,148,102,.07)); box-shadow: 0 16px 38px rgba(55,70,49,.10); animation: flPageRise var(--motion-page-duration,460ms) var(--ease-soft) both; } .team-quick-person { display: grid; grid-template-columns: 42px minmax(0,1fr) 28px; gap: 10px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid var(--glass-border-soft); } .team-quick-person .real-avatar { width: 42px; height: 42px; font-size: 15px; } .team-quick-person small { color: var(--florentini-green-deep); font: 7.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } .team-quick-person h3 { margin: 2px 0; font: 500 18px var(--font-serif); } .team-quick-person p { margin: 0; color: var(--gray); font-size: 8.5px; } .team-quick-actions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin-top: 10px; } .team-quick-actions button { min-width: 0; min-height: 72px; display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 2px 8px; align-content: center; padding: 8px; border: 1px solid var(--glass-border-soft); border-radius: 11px; background: rgba(var(--surface-rgb),.62); color: var(--charcoal); text-align: left; cursor: pointer; } .team-quick-actions button:hover { border-color: var(--florentini-green); background: var(--surface); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(61,80,53,.08); } .team-quick-actions button > span { grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--florentini-green-mist); color: var(--florentini-green-deep); font: 8px var(--font-mono); } .team-quick-actions button b,.team-quick-actions button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-quick-actions button b { font-size: 9px; } .team-quick-actions button small { color: var(--gray); font-size: 7.5px; } .team-shift-recognition { display: grid; grid-template-columns: minmax(190px,.8fr) minmax(220px,1fr); gap: 10px 14px; align-items: center; margin-top: 11px; padding: 11px; border-radius: 12px; background: #293328; color: #f5f6ef; } .team-shift-recognition > div:first-child span,.team-shift-recognition > div:first-child b,.team-shift-recognition > div:first-child small { display: block; } .team-shift-recognition > div:first-child span { color: #cfdfa9; font: 7px var(--font-mono); letter-spacing: .15em; text-transform: uppercase; } .team-shift-recognition > div:first-child b { margin-top: 3px; font: 500 15px var(--font-serif); } .team-shift-recognition > div:first-child small { margin-top: 2px; color: #aeb9aa; font-size: 7.5px; } .team-shift-recognition > input { height: 37px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.07); padding: 0 10px; color: #fff; outline: 0; font-size: 9px; } .team-shift-recognition > div:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; } .team-shift-recognition > div:last-child button { min-width: 0; display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 2px 7px; align-items: center; padding: 7px; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: rgba(255,255,255,.055); color: #fff; text-align: left; cursor: pointer; } .team-shift-recognition > div:last-child button:hover { border-color: rgba(207,224,168,.48); background: rgba(207,224,168,.10); } .team-shift-recognition > div:last-child button span { grid-row: 1 / span 2; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(207,224,168,.12); color: #dcebab; font: 7px var(--font-mono); } .team-shift-recognition > div:last-child button b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .team-shift-recognition > div:last-child button small { color: #9eaaa0; font-size: 7px; } @media (max-width: 1080px) { .team-quick-actions { grid-template-columns: repeat(3,minmax(0,1fr)); } .team-shift-recognition > div:last-child { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .team-quick-actions,.team-shift-recognition,.team-shift-recognition > div:last-child { grid-template-columns: 1fr; } .team-shift-recognition > div:last-child { grid-column: auto; } } /* SOP library V7 */ .sop-toolbar-v7 { display: grid; grid-template-columns: minmax(240px,420px) minmax(0,1fr) auto; gap: 8px; align-items: center; } .sop-search-v7 { min-width: 0; display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 8px; align-items: center; min-height: 40px; padding: 0 11px; border: 1px solid var(--glass-border-soft); border-radius: 11px; background: rgba(var(--surface-rgb),.64); color: var(--gray); } .sop-search-v7 input { width: 100%; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; color: var(--charcoal); } .sop-category-tabs-v7 { min-width: 0; display: flex; gap: 4px; overflow: auto; padding: 2px; } .sop-category-tabs-v7 button { flex: 0 0 auto; } .sop-library-v7 { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(0,1.45fr); gap: 12px; align-items: start; } .sop-list-v7 { overflow: hidden; padding: 6px; } .sop-row-v7 { width: 100%; min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr) auto 17px; gap: 9px; align-items: center; min-height: 57px; padding: 7px 9px; border: 0; border-bottom: 1px solid var(--glass-border-soft); border-radius: 9px; background: transparent; color: var(--charcoal); text-align: left; cursor: pointer; } .sop-row-v7:last-child { border-bottom: 0; } .sop-row-v7:hover,.sop-row-v7.active { background: var(--florentini-green-mist); } .sop-row-v7 > span { color: var(--florentini-green-deep); font: 8px var(--font-mono); } .sop-row-v7 > div { min-width: 0; } .sop-row-v7 b,.sop-row-v7 small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sop-row-v7 b { font-size: 10.5px; } .sop-row-v7 small { margin-top: 3px; color: var(--gray); font-size: 8px; } .sop-row-v7 em { padding: 4px 6px; border-radius: 6px; background: rgba(var(--surface-rgb),.72); color: var(--gray); font: 7.5px var(--font-mono); font-style: normal; } .sop-row-v7 > i { color: var(--gray); font-size: 10px; font-style: normal; } .sop-document-v7 { min-width: 0; padding: 18px; } .sop-document-head-v7 { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--gray-mist); } .sop-document-head-v7 h2 { margin: 4px 0 0; } .sop-document-head-v7 > div:last-child { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .sop-document-body-v7 { display: grid; gap: 0; } .sop-document-body-v7 section { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; padding: 15px 0; border-bottom: 1px solid var(--glass-border-soft); } .sop-document-body-v7 section:last-child { border-bottom: 0; } .sop-document-body-v7 section > span { padding-top: 2px; color: var(--florentini-green-deep); font: 8px var(--font-mono); letter-spacing: .12em; } .sop-document-body-v7 h3 { margin: 0 0 6px; font: 500 15px var(--font-serif); } .sop-document-body-v7 p,.sop-document-body-v7 li { color: var(--graphite); font-size: 10.5px; line-height: 1.6; } .sop-document-body-v7 p { margin: 0; } .sop-document-body-v7 ul,.sop-document-body-v7 ol { margin: 0; padding-left: 18px; } .sop-document-body-v7 li + li { margin-top: 4px; } .sop-document-foot-v7 { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--gray-mist); color: var(--gray); font: 8px var(--font-mono); } @media (max-width: 1080px) { .sop-toolbar-v7 { grid-template-columns: 1fr auto; } .sop-category-tabs-v7 { grid-column: 1 / -1; grid-row: 2; } .sop-library-v7 { grid-template-columns: 1fr; } .sop-list-v7 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } } @media (max-width: 640px) { .sop-toolbar-v7,.sop-list-v7 { grid-template-columns: 1fr; } .sop-toolbar-v7 > .btn { width: 100%; } .sop-category-tabs-v7 { grid-column: auto; grid-row: auto; } .sop-document-head-v7 { display: grid; } .sop-document-head-v7 > div:last-child { justify-content: flex-start; } } /* Rewards Control Room V8 */ .rarity-standard { --rarity:#758b6d; --rarity-soft:#e7ece3; --rarity-deep:#42533d; --rarity-glow:rgba(117,139,109,.22); } .rarity-rare { --rarity:#9aaa63; --rarity-soft:#eef2d8; --rarity-deep:#59662d; --rarity-glow:rgba(176,194,100,.28); } .rarity-epic { --rarity:#a56f69; --rarity-soft:#f2e2df; --rarity-deep:#70423d; --rarity-glow:rgba(176,110,102,.25); } .rarity-legendary { --rarity:#c39b46; --rarity-soft:#f4eacb; --rarity-deep:#73571f; --rarity-glow:rgba(205,165,75,.32); } .rewards-center-v8 { --reward-border:rgba(65,81,57,.16); padding-bottom:24px; } .rewards-page-head-v8 { margin-bottom:10px; } .rewards-command-hero-v8 { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(340px,1.1fr) minmax(460px,.9fr); gap:20px; min-height:192px; padding:20px; border:1px solid rgba(207,224,168,.2); border-radius:22px; background:radial-gradient(circle at 12% 4%,rgba(207,224,168,.16),transparent 34%),linear-gradient(135deg,#20291f,#344530 72%,#263422); color:#f6f7ef; box-shadow:0 22px 52px rgba(35,46,31,.18); } .rewards-command-hero-v8::after { content:"F"; position:absolute; right:41%; bottom:-68px; color:rgba(255,255,255,.025); font:italic 220px/1 var(--font-serif); pointer-events:none; } .rewards-command-copy-v8 { position:relative; z-index:1; align-self:center; } .rewards-command-copy-v8 > span { color:#cedda8; font:7.5px var(--font-mono); letter-spacing:.18em; text-transform:uppercase; } .rewards-command-copy-v8 h2 { max-width:620px; margin:7px 0 6px; color:#fff; font:500 28px/1.06 var(--font-serif); } .rewards-command-copy-v8 p { max-width:670px; margin:0; color:#b7c0b3; font-size:9px; line-height:1.55; } .rewards-command-copy-v8 > button { display:inline-flex; align-items:center; gap:8px; min-height:38px; margin-top:13px; padding:0 14px; border:1px solid rgba(220,235,178,.42); border-radius:11px; background:#dce9b8; color:#2f422a; font-size:9px; font-weight:700; cursor:pointer; box-shadow:0 9px 22px rgba(13,20,11,.18); } .rewards-command-copy-v8 > button:hover { background:#edf5d4; transform:translateY(-2px); } .rewards-command-copy-v8 > button span { font-size:16px; font-weight:400; } .rewards-command-kpis-v8 { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:7px; align-self:stretch; } .rewards-command-kpis-v8 article { min-width:0; display:grid; grid-template-columns:1fr auto; align-content:center; gap:2px 8px; padding:11px 13px; border:1px solid rgba(255,255,255,.10); border-radius:15px; background:rgba(255,255,255,.055); backdrop-filter:blur(8px); } .rewards-command-kpis-v8 article:hover { border-color:rgba(220,235,178,.26); background:rgba(255,255,255,.075); transform:translateY(-1px); } .rewards-command-kpis-v8 article.attention { border-color:rgba(205,165,75,.32); background:rgba(205,165,75,.10); } .rewards-command-kpis-v8 span { color:#aeb9aa; font:7px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; } .rewards-command-kpis-v8 b { grid-row:1 / span 2; grid-column:2; align-self:center; color:#e1edbd; font:500 28px var(--font-serif); } .rewards-command-kpis-v8 small { color:#d4dbd0; font-size:7.5px; } .rewards-tabs-v8 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin:10px 0; padding:4px; border:1px solid var(--reward-border); border-radius:14px; background:rgba(var(--surface-rgb),.56); box-shadow:0 8px 24px rgba(42,54,38,.05); } .rewards-tabs-v8 button { min-width:0; display:flex; justify-content:center; align-items:center; gap:8px; min-height:39px; border:0; border-radius:10px; background:transparent; color:var(--gray); cursor:pointer; } .rewards-tabs-v8 button:hover { background:rgba(122,148,102,.08); color:var(--charcoal); } .rewards-tabs-v8 button.active { background:#344431; color:#fff; box-shadow:0 7px 16px rgba(42,57,38,.16); } .rewards-tabs-v8 button span { font-size:9px; } .rewards-tabs-v8 button b { min-width:20px; padding:3px 6px; border-radius:999px; background:rgba(122,148,102,.12); color:var(--florentini-green-deep); font:7px var(--font-mono); } .rewards-tabs-v8 button.active b { background:rgba(220,235,178,.15); color:#dcebab; } .reward-builder-v8 { overflow:hidden; margin-bottom:10px; border:1px solid rgba(82,101,73,.28); border-radius:19px; background:var(--surface); box-shadow:0 20px 50px rgba(46,59,42,.13); animation:flPageRise var(--motion-page-duration,460ms) var(--ease-soft) both; } .reward-builder-v8 > form { display:grid; } .reward-builder-title-v8 { display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; padding:12px 15px; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(135deg,#293528,#3d5038); color:#fff; } .reward-builder-title-v8 > span { color:#d0dfa9; font:7px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; } .reward-builder-title-v8 h3 { grid-column:1; margin:2px 0 0; font:500 19px var(--font-serif); } .reward-builder-title-v8 button { grid-column:2; grid-row:1 / span 2; width:28px; height:28px; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:rgba(255,255,255,.06); color:#dce8cf; font-size:16px; cursor:pointer; } .reward-builder-title-v8 button:hover { background:rgba(255,255,255,.13); transform:rotate(5deg); } .reward-builder-layout-v8 { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:12px; padding:13px; background:linear-gradient(145deg,rgba(var(--surface-rgb),.92),rgba(122,148,102,.04)); } .reward-builder-main-v8 { min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start; } .reward-builder-main-v8 > label { min-width:0; display:grid; gap:4px; } .reward-builder-main-v8 > label:nth-child(2) { grid-column:1 / -1; } .reward-builder-main-v8 > div { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:8px; } .reward-builder-main-v8 > div label { min-width:0; display:grid; gap:4px; } .reward-builder-main-v8 label > span,.reward-rarity-picker-v8 legend,.reward-medal-picker-v8 legend { color:var(--gray); font:7.5px var(--font-mono); letter-spacing:.09em; text-transform:uppercase; } .reward-builder-main-v8 input,.reward-builder-main-v8 textarea { width:100%; min-width:0; border:1px solid var(--glass-border-soft); border-radius:10px; outline:0; background:rgba(var(--surface-rgb),.72); color:var(--charcoal); font:9px var(--font-sans); } .reward-builder-main-v8 input { height:38px; padding:0 10px; } .reward-builder-main-v8 textarea { min-height:58px; padding:9px 10px; resize:vertical; line-height:1.45; } .reward-builder-main-v8 input:focus,.reward-builder-main-v8 textarea:focus,.reward-employee-search-v8:focus-within { border-color:var(--florentini-green); box-shadow:0 0 0 3px rgba(122,148,102,.12); } .reward-rarity-picker-v8,.reward-medal-picker-v8 { grid-column:1 / -1; min-width:0; margin:0; padding:0; border:0; } .reward-rarity-picker-v8 legend,.reward-medal-picker-v8 legend { margin-bottom:5px; } .reward-rarity-picker-v8 > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; } .reward-rarity-picker-v8 button { min-width:0; display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:6px; align-items:center; min-height:46px; padding:6px 7px; border:1px solid var(--glass-border-soft); border-radius:10px; background:rgba(var(--surface-rgb),.58); color:var(--charcoal); text-align:left; cursor:pointer; } .reward-rarity-picker-v8 button:hover,.reward-rarity-picker-v8 button.selected { border-color:var(--rarity); background:var(--rarity-soft); box-shadow:inset 0 0 0 1px var(--rarity-glow); } .reward-rarity-picker-v8 button > i { width:7px; height:27px; border-radius:99px; background:var(--rarity); box-shadow:0 0 10px var(--rarity-glow); } .reward-rarity-picker-v8 button span { min-width:0; } .reward-rarity-picker-v8 button b,.reward-rarity-picker-v8 button small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .reward-rarity-picker-v8 button b { color:var(--rarity-deep); font-size:8px; } .reward-rarity-picker-v8 button small { margin-top:2px; color:var(--gray); font-size:6.6px; } .reward-rarity-picker-v8 button em { color:var(--rarity-deep); font:7px var(--font-mono); font-style:normal; } .reward-medal-picker-v8 > div { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; } .reward-medal-picker-v8 button { min-width:0; min-height:54px; display:grid; justify-items:center; gap:3px; padding:5px 3px; border:1px solid var(--glass-border-soft); border-radius:10px; background:rgba(var(--surface-rgb),.56); color:var(--gray); cursor:pointer; } .reward-medal-picker-v8 button:hover,.reward-medal-picker-v8 button.selected { border-color:var(--florentini-green); background:var(--florentini-green-mist); color:var(--florentini-green-deep); transform:translateY(-1px); } .reward-medal-picker-v8 button i { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:rgba(122,148,102,.10); font:700 8px var(--font-mono); font-style:normal; } .reward-medal-picker-v8 button.selected i { background:var(--florentini-green); color:#fff; box-shadow:0 5px 10px rgba(73,94,63,.18); } .reward-medal-picker-v8 button span { overflow:hidden; max-width:100%; font-size:6.4px; text-overflow:ellipsis; white-space:nowrap; } .reward-builder-preview-v8 { min-width:0; display:grid; align-content:start; gap:7px; padding:9px; border:1px solid var(--glass-border-soft); border-radius:15px; background:rgba(122,148,102,.06); } .reward-builder-preview-v8 > span { color:var(--gray); font:7px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; } .reward-builder-preview-v8 > small { color:var(--gray); font-size:7px; line-height:1.45; } .reward-builder-team-v8 { grid-column:1 / -1; min-width:0; display:grid; grid-template-columns:130px minmax(0,1fr); gap:7px 10px; align-items:center; padding-top:11px; border-top:1px solid var(--glass-border-soft); } .reward-builder-team-v8 > div:first-child { display:grid; gap:2px; } .reward-builder-team-v8 > div:first-child span { color:var(--gray); font:7px var(--font-mono); letter-spacing:.10em; text-transform:uppercase; } .reward-builder-team-v8 > div:first-child b { font-size:9px; } .reward-employee-search-v8 { min-width:0; display:grid; grid-template-columns:15px minmax(0,1fr) auto; gap:7px; align-items:center; min-height:37px; padding:0 5px 0 10px; border:1px solid var(--glass-border-soft); border-radius:10px; background:rgba(var(--surface-rgb),.68); } .reward-employee-search-v8 svg { width:14px; height:14px; color:var(--gray); } .reward-employee-search-v8 input { min-width:0; height:34px; border:0; outline:0; background:transparent; color:var(--charcoal); font-size:8.5px; } .reward-employee-search-v8 button { min-height:27px; padding:0 9px; border:1px solid var(--glass-border-soft); border-radius:7px; background:var(--surface); color:var(--florentini-green-deep); font-size:7px; cursor:pointer; } .reward-employee-list-v8 { grid-column:1 / -1; display:grid; grid-template-columns:repeat(6,minmax(110px,1fr)); gap:4px; max-height:150px; overflow:auto; padding-right:3px; } .reward-employee-list-v8 > button { min-width:0; display:grid; grid-template-columns:24px minmax(0,1fr); gap:6px; align-items:center; min-height:39px; padding:5px 6px; border:1px solid var(--glass-border-soft); border-radius:9px; background:rgba(var(--surface-rgb),.52); color:var(--charcoal); text-align:left; cursor:pointer; } .reward-employee-list-v8 > button:hover { border-color:rgba(122,148,102,.48); background:var(--surface); } .reward-employee-list-v8 > button.selected { border-color:var(--florentini-green); background:var(--florentini-green-mist); } .reward-employee-list-v8 > button > i { width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:var(--gray-mist); color:var(--gray); font:7px var(--font-mono); font-style:normal; } .reward-employee-list-v8 > button.selected > i { background:var(--florentini-green); color:#fff; } .reward-employee-list-v8 > button span { min-width:0; } .reward-employee-list-v8 b,.reward-employee-list-v8 small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .reward-employee-list-v8 b { font-size:7.8px; } .reward-employee-list-v8 small { margin-top:1px; color:var(--gray); font-size:6.4px; } .reward-builder-submit-v8 { display:flex; justify-content:flex-end; align-items:center; gap:6px; padding:9px 13px; border-top:1px solid var(--glass-border-soft); background:rgba(122,148,102,.045); } .reward-builder-submit-v8 > span { margin-right:auto; color:var(--terracotta); font-size:7.5px; } .reward-builder-submit-v8 button { min-height:34px; padding:0 12px; border:1px solid var(--glass-border-soft); border-radius:9px; background:var(--surface); color:var(--gray); font-size:8px; cursor:pointer; } .reward-builder-submit-v8 button[type="submit"] { display:inline-flex; align-items:center; gap:12px; border-color:#344a30; background:#344a30; color:#fff; } .reward-builder-submit-v8 button:hover { transform:translateY(-1px); box-shadow:0 7px 15px rgba(49,65,44,.10); } .reward-builder-submit-v8 button i { color:#dcebab; font-style:normal; } .reward-visual-card-v8 { --rarity:#758b6d; --rarity-soft:#e7ece3; --rarity-deep:#42533d; --rarity-glow:rgba(117,139,109,.22); position:relative; overflow:hidden; min-width:0; display:grid; grid-template-columns:52px minmax(0,1fr) auto; grid-template-rows:auto auto auto 1fr auto auto; gap:3px 10px; min-height:250px; padding:13px; border:1px solid color-mix(in srgb,var(--rarity) 44%,transparent); border-radius:18px; background:radial-gradient(circle at 85% 4%,var(--rarity-glow),transparent 32%),linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--rarity-soft) 42%,var(--surface))); color:var(--charcoal); text-align:left; box-shadow:0 14px 30px rgba(44,56,39,.09); transition:transform var(--motion-fast-duration,180ms) var(--ease-soft),box-shadow var(--motion-fast-duration,180ms) var(--ease-soft),border-color var(--motion-fast-duration,180ms) var(--ease-soft); } button.reward-visual-card-v8 { width:100%; font:inherit; cursor:pointer; } .reward-visual-card-v8:hover { transform:translateY(-3px); box-shadow:0 20px 38px rgba(44,56,39,.14),0 0 24px var(--rarity-glow); } .reward-visual-card-v8.selected { border-color:var(--rarity); box-shadow:0 0 0 2px var(--rarity-glow),0 20px 38px rgba(44,56,39,.13); } .reward-card-shine-v8 { position:absolute; inset:-45% auto auto 54%; width:100px; height:260px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent); transform:rotate(24deg); pointer-events:none; } .reward-visual-card-v8:hover .reward-card-shine-v8 { animation:rewardCardShineV8 850ms var(--ease-soft); } @keyframes rewardCardShineV8 { from{ transform:translateX(-170px) rotate(24deg); } to{ transform:translateX(210px) rotate(24deg); } } .reward-card-medal-v8 { position:relative; grid-row:1 / span 3; width:50px; height:61px; display:grid; place-items:start center; } .reward-card-medal-v8 b { position:relative; z-index:2; width:46px; height:46px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--rarity) 65%,transparent); border-radius:50%; background:radial-gradient(circle at 32% 25%,#fff,var(--rarity-soft) 70%,var(--rarity)); color:var(--rarity-deep); box-shadow:inset 0 0 0 4px rgba(255,255,255,.56),0 7px 15px var(--rarity-glow); font:700 9px var(--font-mono); } .reward-card-medal-v8 i { position:absolute; bottom:0; width:29px; height:27px; background:linear-gradient(90deg,var(--rarity) 0 44%,transparent 44% 56%,var(--rarity) 56%); clip-path:polygon(8% 0,92% 0,100% 100%,50% 76%,0 100%); } .reward-card-rarity-v8 { align-self:center; color:var(--rarity-deep); font:7px var(--font-mono); letter-spacing:.13em; text-transform:uppercase; } .reward-card-value-v8 { align-self:center; color:var(--rarity-deep); font:700 8px var(--font-mono); } .reward-visual-card-v8 > strong { grid-column:2 / -1; font:500 17px/1.15 var(--font-serif); } .reward-visual-card-v8 > p { grid-column:2 / -1; margin:2px 0 0; color:var(--gray); font-size:8px; line-height:1.45; } .reward-card-foot-v8 { grid-column:1 / -1; align-self:end; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:8px; padding:7px; border:1px solid color-mix(in srgb,var(--rarity) 18%,transparent); border-radius:10px; background:rgba(var(--surface-rgb),.44); } .reward-card-foot-v8 > span { min-width:0; display:grid; justify-items:center; gap:1px; border-right:1px solid color-mix(in srgb,var(--rarity) 18%,transparent); } .reward-card-foot-v8 > span:last-child { border-right:0; } .reward-card-foot-v8 b { color:var(--rarity-deep); font:9px var(--font-mono); } .reward-card-foot-v8 small { overflow:hidden; max-width:100%; color:var(--gray); font-size:5.9px; text-overflow:ellipsis; white-space:nowrap; } .reward-card-completion-v8 { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; margin-top:4px; } .reward-card-completion-v8 > i { height:5px; overflow:hidden; border-radius:99px; background:color-mix(in srgb,var(--rarity) 14%,var(--gray-mist)); } .reward-card-completion-v8 > i em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--rarity),color-mix(in srgb,var(--rarity) 55%,white)); } .reward-card-completion-v8 small { color:var(--gray); font:6.5px var(--font-mono); } .reward-visual-card-v8.compact { min-height:210px; padding:11px; } .reward-visual-card-v8.compact .reward-card-medal-v8 { width:45px; } .reward-visual-card-v8.compact .reward-card-medal-v8 b { width:42px; height:42px; } .reward-visual-card-v8.compact > strong { font-size:15px; } .rewards-overview-v8 { display:grid; grid-template-columns:1.12fr .88fr; gap:10px; animation:flPageRise var(--motion-page-duration,460ms) var(--ease-soft) both; } .rewards-panel-v8 { min-width:0; overflow:hidden; border:1px solid var(--reward-border); border-radius:17px; background:rgba(var(--surface-rgb),.68); box-shadow:0 12px 30px rgba(43,54,39,.06); } .rewards-panel-v8.activity { grid-column:1 / -1; } .rewards-panel-head-v8 { min-height:58px; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 13px; border-bottom:1px solid var(--glass-border-soft); } .rewards-panel-head-v8 > div > span { color:var(--florentini-green-deep); font:7px var(--font-mono); letter-spacing:.13em; text-transform:uppercase; } .rewards-panel-head-v8 h3 { margin:2px 0 0; font:500 17px var(--font-serif); } .rewards-panel-head-v8 > b { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--florentini-green-mist); color:var(--florentini-green-deep); font:13px var(--font-serif); } .rewards-panel-head-v8 > small { color:var(--gray); font-size:7.5px; } .rewards-panel-head-v8 > button { min-height:29px; padding:0 9px; border:1px solid var(--glass-border-soft); border-radius:8px; background:var(--surface); color:var(--florentini-green-deep); font-size:7px; cursor:pointer; } .rewards-payment-list-v8,.reward-audit-mini-v8 { display:grid; padding:6px; } .rewards-payment-list-v8 article { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; gap:8px; align-items:center; min-height:51px; padding:6px 7px; border-bottom:1px solid var(--glass-border-soft); } .rewards-payment-list-v8 article:last-child { border-bottom:0; } .mini-reward-medal-v8 { --rarity:#758b6d; --rarity-soft:#e7ece3; --rarity-deep:#42533d; width:33px; height:33px; display:grid; place-items:center; border:1px solid var(--rarity); border-radius:50%; background:radial-gradient(circle at 35% 25%,#fff,var(--rarity-soft)); color:var(--rarity-deep); box-shadow:inset 0 0 0 3px rgba(255,255,255,.55); font:700 7px var(--font-mono); } .rewards-payment-list-v8 article > span:nth-child(2) { min-width:0; } .rewards-payment-list-v8 b,.rewards-payment-list-v8 small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rewards-payment-list-v8 b { font-size:8.5px; } .rewards-payment-list-v8 small { margin-top:2px; color:var(--gray); font-size:6.7px; } .rewards-payment-list-v8 em { color:var(--charcoal); font:8px var(--font-mono); font-style:normal; } .rewards-payment-list-v8 button { min-height:29px; border:1px solid #607959; border-radius:8px; background:#344832; color:#fff; padding:0 9px; font-size:7px; cursor:pointer; } .rewards-payment-list-v8 button:hover { background:#476041; transform:translateY(-1px); } .rarity-guide-v8 { display:grid; gap:4px; padding:7px; } .rarity-guide-v8 article { --rarity:#758b6d; --rarity-soft:#e7ece3; --rarity-deep:#42533d; display:grid; grid-template-columns:7px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:44px; padding:6px 8px; border:1px solid color-mix(in srgb,var(--rarity) 24%,transparent); border-radius:10px; background:color-mix(in srgb,var(--rarity-soft) 54%,transparent); } .rarity-guide-v8 article > i { width:6px; height:27px; border-radius:99px; background:var(--rarity); } .rarity-guide-v8 article b,.rarity-guide-v8 article small { display:block; } .rarity-guide-v8 article b { color:var(--rarity-deep); font-size:8px; } .rarity-guide-v8 article small { margin-top:2px; color:var(--gray); font-size:6.6px; } .rarity-guide-v8 article em { color:var(--rarity-deep); font:8px var(--font-mono); font-style:normal; } .reward-audit-mini-v8 { grid-template-columns:1fr 1fr; gap:0 10px; } .reward-audit-mini-v8 article { min-width:0; display:grid; grid-template-columns:27px minmax(0,1fr) auto; gap:7px; align-items:center; min-height:45px; border-bottom:1px solid var(--glass-border-soft); } .reward-audit-mini-v8 article > i { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--florentini-green-mist); color:var(--florentini-green-deep); font:7px var(--font-mono); font-style:normal; } .reward-audit-mini-v8 article > span { min-width:0; } .reward-audit-mini-v8 b,.reward-audit-mini-v8 small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .reward-audit-mini-v8 b { font-size:8px; } .reward-audit-mini-v8 small { margin-top:2px; color:var(--gray); font-size:6.5px; } .reward-audit-mini-v8 time { color:var(--gray); font:6px var(--font-mono); } .rewards-clear-state-v8 { display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; align-items:center; min-height:82px; padding:12px; } .rewards-clear-state-v8 > span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--florentini-green-mist); color:var(--florentini-green-deep); font-size:14px; } .rewards-clear-state-v8 b { font:500 13px var(--font-serif); } .rewards-clear-state-v8 p { margin:3px 0 0; color:var(--gray); font-size:7.5px; } .rewards-program-workspace-v8 { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:10px; align-items:start; animation:flPageRise var(--motion-page-duration,460ms) var(--ease-soft) both; } .reward-catalog-v8 { min-width:0; } .reward-section-heading-v8 { display:flex; justify-content:space-between; gap:12px; align-items:center; min-height:53px; margin-bottom:6px; padding:7px 10px; border:1px solid var(--reward-border); border-radius:13px; background:rgba(var(--surface-rgb),.58); } .reward-section-heading-v8 span { color:var(--florentini-green-deep); font:7px var(--font-mono); letter-spacing:.13em; text-transform:uppercase; } .reward-section-heading-v8 h3 { margin:2px 0 0; font:500 17px var(--font-serif); } .reward-section-heading-v8 > button { min-height:31px; padding:0 10px; border:1px solid var(--florentini-green); border-radius:9px; background:var(--florentini-green-mist); color:var(--florentini-green-deep); font-size:7.5px; cursor:pointer; } .reward-catalog-grid-v8 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .reward-catalog-empty-v8 { min-height:310px; display:grid; grid-template-columns:80px minmax(0,360px); justify-content:center; align-items:center; gap:18px; border:1px dashed rgba(122,148,102,.35); border-radius:18px; background:rgba(var(--surface-rgb),.52); } .reward-catalog-empty-v8 > span { width:74px; height:94px; display:grid; place-items:center; border:1px solid rgba(122,148,102,.25); border-radius:30px 30px 10px 10px; background:var(--florentini-green-mist); color:var(--florentini-green-deep); font:italic 47px var(--font-serif); } .reward-catalog-empty-v8 h3 { margin:0; font:500 21px var(--font-serif); } .reward-catalog-empty-v8 p { margin:5px 0 11px; color:var(--gray); font-size:8.5px; line-height:1.5; } .reward-catalog-empty-v8 button { min-height:33px; border:1px solid #597151; border-radius:9px; background:#354932; color:#fff; padding:0 11px; font-size:8px; cursor:pointer; } .reward-program-control-v8 { position:sticky; top:76px; overflow:hidden; border:1px solid rgba(69,88,62,.24); border-radius:17px; background:rgba(var(--surface-rgb),.78); box-shadow:0 18px 42px rgba(39,51,35,.11); } .reward-control-head-v8 { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:9px; align-items:center; padding:11px; border-bottom:1px solid var(--glass-border-soft); background:linear-gradient(145deg,rgba(122,148,102,.10),transparent); } .reward-control-head-v8 > div { min-width:0; } .reward-control-head-v8 small { color:var(--florentini-green-deep); font:6.8px var(--font-mono); letter-spacing:.09em; text-transform:uppercase; } .reward-control-head-v8 h3 { overflow:hidden; margin:2px 0 0; font:500 16px var(--font-serif); text-overflow:ellipsis; white-space:nowrap; } .reward-control-head-v8 > button { min-height:28px; padding:0 8px; border:1px solid var(--glass-border-soft); border-radius:8px; background:var(--surface); color:var(--florentini-green-deep); font-size:7px; cursor:pointer; } .reward-program-control-v8 > p { margin:0; padding:10px 11px; color:var(--gray); font-size:8px; line-height:1.45; } .reward-control-meta-v8 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:0 9px 9px; } .reward-control-meta-v8 > span { min-width:0; display:grid; justify-items:center; gap:2px; padding:6px 4px; border-radius:9px; background:rgba(122,148,102,.07); } .reward-control-meta-v8 b { color:var(--florentini-green-deep); font:8px var(--font-mono); } .reward-control-meta-v8 small { color:var(--gray); font-size:6px; } .reward-control-meta-v8 > button { grid-column:1 / -1; min-height:28px; border:1px solid var(--glass-border-soft); border-radius:8px; background:transparent; color:var(--gray); font-size:7px; cursor:pointer; } .reward-control-meta-v8 > button:hover { border-color:var(--florentini-green); color:var(--florentini-green-deep); } .reward-control-list-v8 { max-height:500px; overflow:auto; border-top:1px solid var(--glass-border-soft); } .reward-control-list-v8 article { min-width:0; display:grid; grid-template-columns:29px minmax(86px,.7fr) minmax(90px,1fr) minmax(86px,auto); gap:7px; align-items:center; min-height:52px; padding:6px 9px; border-bottom:1px solid var(--glass-border-soft); } .reward-control-list-v8 article:last-child { border-bottom:0; } .reward-control-list-v8 article:hover { background:rgba(122,148,102,.045); } .reward-person-avatar-v8 { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--florentini-green-mist); color:var(--florentini-green-deep); font:7px var(--font-mono); font-style:normal; } .reward-control-list-v8 article > span:nth-child(2) { min-width:0; } .reward-control-list-v8 article > span:nth-child(2) b,.reward-control-list-v8 article > span:nth-child(2) small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .reward-control-list-v8 article > span:nth-child(2) b { font-size:7.7px; } .reward-control-list-v8 article > span:nth-child(2) small { margin-top:1px; color:var(--gray); font-size:6.2px; } .reward-person-progress-v8 { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 29px; gap:5px; align-items:center; } .reward-person-progress-v8 > i { height:5px; overflow:hidden; border-radius:99px; background:var(--gray-mist); } .reward-person-progress-v8 > i em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--florentini-green),var(--lime)); } .reward-person-progress-v8 small { color:var(--gray); font:6.3px var(--font-mono); } .reward-control-list-v8 button.plus { min-height:33px; display:grid; grid-template-columns:auto 1fr; gap:0 5px; align-items:center; padding:3px 7px; border:1px solid var(--florentini-green); border-radius:8px; background:var(--florentini-green-mist); color:var(--florentini-green-deep); text-align:left; cursor:pointer; } .reward-control-list-v8 button.plus b { grid-row:1 / span 2; font:14px var(--font-serif); } .reward-control-list-v8 button.plus small { font-size:5.8px; } .reward-control-list-v8 button.plus:disabled { border-color:var(--glass-border-soft); background:var(--gray-mist); color:var(--gray); cursor:default; } .reward-control-list-v8 button.pay { min-height:32px; padding:0 7px; border:1px solid #6b7d3e; border-radius:8px; background:#3c5037; color:#fff; font-size:6.5px; cursor:pointer; } .reward-person-paid-v8 { justify-self:stretch; padding:7px 5px; border-radius:8px; background:#e6efe1; color:#4b6744; font:6.4px var(--font-mono); text-align:center; } .rewards-leaderboard-v8,.rewards-history-v8 { animation:flPageRise var(--motion-page-duration,460ms) var(--ease-soft) both; } .reward-podium-v8 { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:10px; background:linear-gradient(145deg,rgba(122,148,102,.07),transparent); } .reward-podium-v8 article { position:relative; display:grid; grid-template-columns:35px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:70px; padding:9px; border:1px solid var(--glass-border-soft); border-radius:13px; background:rgba(var(--surface-rgb),.62); } .reward-podium-v8 article.place-1 { border-color:rgba(195,155,70,.45); background:linear-gradient(145deg,#f5ecd1,rgba(var(--surface-rgb),.72)); box-shadow:0 10px 24px rgba(175,137,58,.12); } .reward-podium-v8 strong { position:absolute; top:5px; right:7px; color:var(--gray); font:6px var(--font-mono); } .reward-podium-v8 article > i { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--florentini-green); color:#fff; font:9px var(--font-mono); font-style:normal; } .reward-podium-v8 article.place-1 > i { background:#b78e3c; } .reward-podium-v8 article > span { min-width:0; } .reward-podium-v8 b,.reward-podium-v8 small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .reward-podium-v8 b { font-size:8.5px; } .reward-podium-v8 small { margin-top:2px; color:var(--gray); font-size:6.5px; } .reward-podium-v8 em { color:var(--florentini-green-deep); font:8px var(--font-mono); font-style:normal; } .reward-ranking-list-v8 { display:grid; padding:0 10px 10px; } .reward-ranking-list-v8 article { min-width:0; display:grid; grid-template-columns:28px 28px minmax(0,1fr) auto 65px; gap:8px; align-items:center; min-height:46px; border-bottom:1px solid var(--glass-border-soft); } .reward-ranking-list-v8 article > strong { color:var(--gray); font:7px var(--font-mono); } .reward-ranking-list-v8 article > i { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--gray-mist); color:var(--graphite); font:7px var(--font-mono); font-style:normal; } .reward-ranking-list-v8 article > span { min-width:0; } .reward-ranking-list-v8 article > span b,.reward-ranking-list-v8 article > span small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .reward-ranking-list-v8 article > span b { font-size:8px; } .reward-ranking-list-v8 article > span small,.reward-ranking-list-v8 article > em { color:var(--gray); font-size:6.5px; font-style:normal; } .reward-ranking-list-v8 article > b { color:var(--florentini-green-deep); font:8px var(--font-mono); text-align:right; } .rewards-history-v8 > div:last-child { display:grid; padding:5px 11px 11px; } .rewards-history-v8 > div:last-child > article { min-width:0; display:grid; grid-template-columns:92px 28px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:49px; border-bottom:1px solid var(--glass-border-soft); } .rewards-history-v8 > div:last-child > article time { color:var(--gray); font:6.5px var(--font-mono); } .rewards-history-v8 > div:last-child > article > i { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--florentini-green-mist); color:var(--florentini-green-deep); font:7px var(--font-mono); font-style:normal; } .rewards-history-v8 > div:last-child > article > span { min-width:0; } .rewards-history-v8 > div:last-child > article b,.rewards-history-v8 > div:last-child > article small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rewards-history-v8 > div:last-child > article b { font-size:8px; } .rewards-history-v8 > div:last-child > article small { margin-top:2px; color:var(--gray); font-size:6.5px; } .rewards-history-v8 > div:last-child > article em { color:var(--gray); font:6.5px var(--font-mono); font-style:normal; } @media (max-width:1320px) { .rewards-command-hero-v8 { grid-template-columns:1fr; } .rewards-program-workspace-v8 { grid-template-columns:minmax(0,1fr) 340px; } .reward-catalog-grid-v8 { grid-template-columns:1fr 1fr; } .reward-employee-list-v8 { grid-template-columns:repeat(4,minmax(110px,1fr)); } } @media (max-width:980px) { .rewards-program-workspace-v8 { grid-template-columns:1fr; } .reward-program-control-v8 { position:relative; top:auto; } .reward-builder-layout-v8 { grid-template-columns:1fr; } .reward-builder-preview-v8 { grid-row:2; } .reward-builder-team-v8 { grid-column:auto; } .reward-employee-list-v8 { grid-template-columns:repeat(3,minmax(105px,1fr)); } } @media (max-width:720px) { .rewards-command-hero-v8 { grid-template-columns:1fr; padding:15px; } .rewards-command-kpis-v8,.rewards-overview-v8,.reward-podium-v8 { grid-template-columns:1fr 1fr; } .rewards-panel-v8.activity { grid-column:auto; } .reward-audit-mini-v8 { grid-template-columns:1fr; } .rewards-tabs-v8 { grid-template-columns:1fr 1fr; } .reward-catalog-grid-v8 { grid-template-columns:1fr; } .reward-builder-main-v8,.reward-builder-main-v8 > div { grid-template-columns:1fr; } .reward-rarity-picker-v8 > div { grid-template-columns:1fr 1fr; } .reward-medal-picker-v8 > div { grid-template-columns:repeat(4,1fr); } .reward-builder-team-v8 { grid-template-columns:1fr; } .reward-employee-list-v8 { grid-column:auto; grid-template-columns:1fr 1fr; } .reward-podium-v8 article { grid-template-columns:31px minmax(0,1fr); } .reward-podium-v8 em { grid-column:2; } } @media (max-width:480px) { .rewards-command-kpis-v8,.rewards-overview-v8,.reward-podium-v8,.reward-rarity-picker-v8 > div,.reward-employee-list-v8 { grid-template-columns:1fr; } .rewards-payment-list-v8 article { grid-template-columns:34px minmax(0,1fr); } .rewards-payment-list-v8 article em,.rewards-payment-list-v8 article button { grid-column:2; } .reward-control-list-v8 article { grid-template-columns:29px minmax(0,1fr); } .reward-person-progress-v8,.reward-control-list-v8 article > button,.reward-person-paid-v8 { grid-column:2; } .rewards-history-v8 > div:last-child > article { grid-template-columns:28px minmax(0,1fr); } .rewards-history-v8 time,.rewards-history-v8 em { grid-column:2; } } body[data-motion="off"] .reward-builder-v8,body[data-motion="off"] .rewards-overview-v8,body[data-motion="off"] .rewards-program-workspace-v8,body[data-motion="off"] .rewards-leaderboard-v8,body[data-motion="off"] .rewards-history-v8,body[data-motion="off"] .reward-visual-card-v8:hover .reward-card-shine-v8 { animation:none !important; } /* Rewards V9 — readable editorial scale and employee board */ .rewards-center-v8 .rewards-command-copy-v8 > span { font-size:11px; } .rewards-center-v8 .rewards-command-copy-v8 h2 { max-width:760px; font-size:36px; line-height:1.08; } .rewards-center-v8 .rewards-command-copy-v8 p { max-width:760px; font-size:13px; line-height:1.6; } .rewards-center-v8 .rewards-command-copy-v8 > button { min-height:44px; padding:0 17px; font-size:13px; } .rewards-center-v8 .rewards-command-kpis-v8 span { font-size:10px; } .rewards-center-v8 .rewards-command-kpis-v8 small { font-size:11px; } .rewards-center-v8 .rewards-command-kpis-v8 b { font-size:34px; } .rewards-center-v8 .rewards-tabs-v8 button { min-height:46px; } .rewards-center-v8 .rewards-tabs-v8 button span { font-size:13px; } .rewards-center-v8 .rewards-tabs-v8 button b { font-size:10px; } .rewards-center-v8 .reward-builder-title-v8 > span,.rewards-center-v8 .reward-section-heading-v8 span,.rewards-center-v8 .rewards-panel-head-v8 > div > span { font-size:10px; } .rewards-center-v8 .reward-builder-title-v8 h3 { font-size:24px; } .rewards-center-v8 .reward-builder-main-v8 label > span,.rewards-center-v8 .reward-rarity-picker-v8 legend,.rewards-center-v8 .reward-medal-picker-v8 legend { font-size:11px; } .rewards-center-v8 .reward-builder-main-v8 input,.rewards-center-v8 .reward-builder-main-v8 textarea { font-size:13px; } .rewards-center-v8 .reward-builder-main-v8 input { height:44px; } .rewards-center-v8 .reward-builder-main-v8 textarea { min-height:74px; } .rewards-center-v8 .reward-rarity-picker-v8 button { min-height:58px; padding:8px 9px; } .rewards-center-v8 .reward-rarity-picker-v8 button b { font-size:12px; } .rewards-center-v8 .reward-rarity-picker-v8 button small { font-size:9px; } .rewards-center-v8 .reward-rarity-picker-v8 button em { font-size:10px; } .rewards-center-v8 .reward-medal-picker-v8 button { min-height:68px; } .rewards-center-v8 .reward-medal-picker-v8 button i { width:34px; height:34px; font-size:11px; } .rewards-center-v8 .reward-medal-picker-v8 button span { font-size:9px; } .rewards-center-v8 .reward-builder-preview-v8 > span,.rewards-center-v8 .reward-builder-team-v8 > div:first-child span { font-size:10px; } .rewards-center-v8 .reward-builder-preview-v8 > small { font-size:10px; } .rewards-center-v8 .reward-builder-team-v8 > div:first-child b { font-size:13px; } .rewards-center-v8 .reward-employee-search-v8 { min-height:44px; } .rewards-center-v8 .reward-employee-search-v8 input { height:41px; font-size:12px; } .rewards-center-v8 .reward-employee-search-v8 button { min-height:33px; font-size:10px; } .rewards-center-v8 .reward-employee-list-v8 { grid-template-columns:repeat(4,minmax(150px,1fr)); max-height:210px; gap:6px; } .rewards-center-v8 .reward-employee-list-v8 > button { min-height:50px; padding:7px 8px; } .rewards-center-v8 .reward-employee-list-v8 > button > i { width:30px; height:30px; font-size:10px; } .rewards-center-v8 .reward-employee-list-v8 b { font-size:11px; } .rewards-center-v8 .reward-employee-list-v8 small { font-size:9px; } .rewards-center-v8 .reward-builder-submit-v8 > span { font-size:11px; } .rewards-center-v8 .reward-builder-submit-v8 button { min-height:40px; font-size:12px; } .rewards-center-v8 .reward-catalog-grid-v8 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .rewards-center-v8 .reward-section-heading-v8 h3,.rewards-center-v8 .rewards-panel-head-v8 h3 { font-size:21px; } .rewards-center-v8 .reward-section-heading-v8 > button { min-height:38px; font-size:11px; } .rewards-center-v8 .reward-visual-card-v8.compact { min-height:270px; padding:16px; } .rewards-center-v8 .reward-card-rarity-v8 { font-size:10px; } .rewards-center-v8 .reward-card-value-v8 { font-size:11px; } .rewards-center-v8 .reward-visual-card-v8 > strong { font-size:21px; } .rewards-center-v8 .reward-visual-card-v8 > p { font-size:12px; line-height:1.5; } .rewards-center-v8 .reward-card-foot-v8 { padding:10px; } .rewards-center-v8 .reward-card-foot-v8 b { font-size:12px; } .rewards-center-v8 .reward-card-foot-v8 small { font-size:9px; } .rewards-center-v8 .reward-card-completion-v8 small { font-size:9px; } .rewards-center-v8 .rewards-program-workspace-v8 { grid-template-columns:minmax(0,1fr) 450px; gap:14px; } .rewards-center-v8 .reward-control-head-v8 { grid-template-columns:46px minmax(0,1fr); padding:15px; } .rewards-center-v8 .reward-control-head-v8 small { font-size:10px; } .rewards-center-v8 .reward-control-head-v8 h3 { font-size:22px; } .reward-control-actions-v9 { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; padding:10px 12px; border-bottom:1px solid var(--glass-border-soft); background:rgba(122,148,102,.055); } .reward-control-actions-v9 button { min-height:38px; border:1px solid var(--glass-border-soft); border-radius:9px; background:var(--surface); color:var(--florentini-green-deep); font-size:11px; cursor:pointer; } .reward-control-actions-v9 button:hover { border-color:var(--florentini-green); background:var(--florentini-green-mist); transform:translateY(-1px); } .reward-control-actions-v9 button.danger { min-width:82px; border-color:rgba(166,94,75,.34); color:#9b5544; } .reward-control-actions-v9 button.danger:hover { border-color:#a65e4b; background:#f5e8e3; } .rewards-center-v8 .reward-program-control-v8 > p { padding:13px 15px; font-size:12px; } .rewards-center-v8 .reward-control-meta-v8 b { font-size:12px; } .rewards-center-v8 .reward-control-meta-v8 small { font-size:9px; } .rewards-center-v8 .reward-control-list-v8 article { grid-template-columns:38px minmax(120px,.8fr) minmax(110px,1fr) minmax(110px,auto); min-height:66px; padding:8px 12px; } .rewards-center-v8 .reward-person-avatar-v8 { width:36px; height:36px; font-size:11px; } .rewards-center-v8 .reward-control-list-v8 article > span:nth-child(2) b { font-size:12px; } .rewards-center-v8 .reward-control-list-v8 article > span:nth-child(2) small { font-size:9px; } .rewards-center-v8 .reward-person-progress-v8 small { font-size:9px; } .rewards-center-v8 .reward-control-list-v8 button.plus,.rewards-center-v8 .reward-control-list-v8 button.pay { min-height:42px; font-size:10px; } .rewards-center-v8 .reward-control-list-v8 button.plus b { font-size:19px; } .rewards-center-v8 .reward-control-list-v8 button.plus small { font-size:8px; } .rewards-center-v8 .reward-person-paid-v8 { padding:11px 7px; font-size:9px; } .rewards-center-v8 .rewards-panel-head-v8 > small,.rewards-center-v8 .rewards-panel-head-v8 > button { font-size:10px; } .rewards-center-v8 .rewards-payment-list-v8 b,.rewards-center-v8 .reward-audit-mini-v8 b { font-size:12px; } .rewards-center-v8 .rewards-payment-list-v8 small,.rewards-center-v8 .reward-audit-mini-v8 small { font-size:9px; } .rewards-center-v8 .rewards-payment-list-v8 em { font-size:11px; } .rewards-center-v8 .rewards-payment-list-v8 button { min-height:36px; font-size:10px; } .rewards-center-v8 .rarity-guide-v8 article b { font-size:12px; } .rewards-center-v8 .rarity-guide-v8 article small { font-size:9px; } .rewards-center-v8 .rarity-guide-v8 article em { font-size:11px; } .employee-reward-board-v9,.employee-rewards-page-v9 { --reward-border:rgba(66,84,59,.18); } .employee-reward-board-v9.compact { margin-top:18px; padding:20px; border-radius:20px; } .employee-board-head-v9 { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding-bottom:15px; border-bottom:1px solid var(--glass-border-soft); } .employee-board-head-v9 > div:first-child > span,.employee-rewards-hero-v9 > div:first-child > span,.employee-rating-head-v9 > span { color:var(--florentini-green-deep); font:11px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; } .employee-board-head-v9 h2 { margin:5px 0 3px; font:500 28px var(--font-serif); } .employee-board-head-v9 p { margin:0; color:var(--gray); font-size:13px; } .employee-board-head-v9 > div:last-child { display:grid; justify-items:end; gap:2px; } .employee-board-head-v9 > div:last-child > b { color:var(--florentini-green-deep); font:30px var(--font-serif); } .employee-board-head-v9 > div:last-child > small { color:var(--gray); font:11px var(--font-mono); } .employee-board-head-v9 button { min-height:36px; margin-top:7px; padding:0 12px; border:1px solid var(--florentini-green); border-radius:9px; background:var(--florentini-green-mist); color:var(--florentini-green-deep); font-size:11px; cursor:pointer; } .employee-reward-compact-grid-v9 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; } .employee-rewards-hero-v9 { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; padding:22px; border:1px solid rgba(207,224,168,.22); border-radius:22px; background:radial-gradient(circle at 10% 0,rgba(207,224,168,.16),transparent 34%),linear-gradient(135deg,#253023,#3b4d36); color:#fff; box-shadow:0 20px 45px rgba(39,51,35,.15); } .employee-rewards-hero-v9 > div:first-child > span { color:#d6e5b1; } .employee-rewards-hero-v9 h2 { margin:6px 0 5px; color:#fff; font:500 32px var(--font-serif); } .employee-rewards-hero-v9 p { max-width:760px; margin:0; color:#bdc6b8; font-size:13px; line-height:1.6; } .employee-rewards-hero-v9 > div:last-child { display:grid; grid-template-columns:repeat(3,145px); gap:7px; } .employee-rewards-hero-v9 article { display:grid; justify-items:center; gap:2px; padding:14px 10px; border:1px solid rgba(255,255,255,.11); border-radius:14px; background:rgba(255,255,255,.055); } .employee-rewards-hero-v9 article b { color:#dcebab; font:28px var(--font-serif); } .employee-rewards-hero-v9 article small { color:#b8c1b4; font-size:10px; text-align:center; } .employee-reward-tabs-v9 { display:flex; gap:6px; margin:12px 0; padding:5px; border:1px solid var(--reward-border); border-radius:14px; background:rgba(var(--surface-rgb),.62); } .employee-reward-tabs-v9 button { min-height:42px; display:flex; align-items:center; gap:9px; padding:0 15px; border:0; border-radius:10px; background:transparent; color:var(--gray); font-size:13px; cursor:pointer; } .employee-reward-tabs-v9 button:hover { background:rgba(122,148,102,.08); color:var(--charcoal); } .employee-reward-tabs-v9 button.active { background:#344832; color:#fff; box-shadow:0 7px 16px rgba(46,61,41,.14); } .employee-reward-tabs-v9 button b { min-width:23px; padding:3px 6px; border-radius:999px; background:rgba(122,148,102,.14); color:var(--florentini-green-deep); font:10px var(--font-mono); } .employee-reward-tabs-v9 button.active b { background:rgba(255,255,255,.13); color:#dcebab; } .employee-reward-grid-v9 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; } .employee-reward-card-v9 { --rarity:#758b6d; --rarity-soft:#e7ece3; --rarity-deep:#42533d; --rarity-glow:rgba(117,139,109,.22); position:relative; overflow:hidden; min-width:0; display:grid; grid-template-columns:58px minmax(0,1fr); grid-template-rows:auto auto auto 1fr auto auto auto; gap:7px 12px; min-height:330px; padding:18px; border:1px solid color-mix(in srgb,var(--rarity) 42%,transparent); border-radius:20px; background:radial-gradient(circle at 88% 2%,var(--rarity-glow),transparent 30%),linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--rarity-soft) 38%,var(--surface))); box-shadow:0 15px 32px rgba(44,56,39,.08); } .employee-reward-card-v9:hover { transform:translateY(-3px); box-shadow:0 20px 42px rgba(44,56,39,.13),0 0 24px var(--rarity-glow); } .employee-reward-medal-v9 { position:relative; grid-row:1 / span 3; width:56px; height:69px; display:grid; place-items:start center; } .employee-reward-medal-v9 b { position:relative; z-index:2; width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--rarity); border-radius:50%; background:radial-gradient(circle at 32% 24%,#fff,var(--rarity-soft) 72%); color:var(--rarity-deep); box-shadow:inset 0 0 0 4px rgba(255,255,255,.56),0 8px 17px var(--rarity-glow); font:700 11px var(--font-mono); } .employee-reward-medal-v9 i { position:absolute; bottom:0; width:31px; height:29px; background:linear-gradient(90deg,var(--rarity) 0 44%,transparent 44% 56%,var(--rarity) 56%); clip-path:polygon(8% 0,92% 0,100% 100%,50% 76%,0 100%); } .employee-reward-card-head-v9 { min-width:0; display:flex; justify-content:space-between; gap:8px; align-items:center; } .employee-reward-card-head-v9 span,.employee-reward-card-head-v9 em { color:var(--rarity-deep); font:10px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; font-style:normal; } .employee-reward-card-head-v9 em { padding:4px 6px; border-radius:6px; background:var(--rarity-soft); } .employee-reward-card-v9 h3 { grid-column:2; margin:0; font:500 22px/1.15 var(--font-serif); } .employee-reward-card-v9 > p { grid-column:2; margin:0; color:var(--gray); font-size:12px; line-height:1.55; } .employee-reward-value-v9 { grid-column:1 / -1; align-self:end; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px; border:1px solid color-mix(in srgb,var(--rarity) 20%,transparent); border-radius:11px; background:rgba(var(--surface-rgb),.48); } .employee-reward-value-v9 > span { display:grid; justify-items:center; gap:2px; } .employee-reward-value-v9 > span:first-child { border-right:1px solid color-mix(in srgb,var(--rarity) 22%,transparent); } .employee-reward-value-v9 b { color:var(--rarity-deep); font:13px var(--font-mono); } .employee-reward-value-v9 small { color:var(--gray); font-size:9px; } .employee-reward-progress-v9 { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:center; } .employee-reward-progress-v9 > span { height:7px; overflow:hidden; border-radius:99px; background:color-mix(in srgb,var(--rarity) 14%,var(--gray-mist)); } .employee-reward-progress-v9 > span i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--rarity),color-mix(in srgb,var(--rarity) 58%,white)); } .employee-reward-progress-v9 > b { color:var(--rarity-deep); font:10px var(--font-mono); } .employee-reward-card-v9 > button,.employee-reward-status-v9 { grid-column:1 / -1; min-height:42px; display:flex; justify-content:center; align-items:center; border-radius:10px; font-size:12px; } .employee-reward-card-v9 > button { border:1px solid var(--rarity); background:var(--rarity-soft); color:var(--rarity-deep); cursor:pointer; } .employee-reward-card-v9 > button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 8px 17px var(--rarity-glow); } .employee-reward-card-v9 > button:disabled { border-color:var(--glass-border-soft); background:rgba(var(--surface-rgb),.38); color:var(--gray); cursor:default; } .employee-reward-status-v9 { border:1px solid color-mix(in srgb,var(--rarity) 35%,transparent); background:var(--rarity-soft); color:var(--rarity-deep); } .employee-reward-card-v9.compact { grid-template-columns:46px minmax(0,1fr); grid-template-rows:auto auto auto 1fr auto; gap:5px 9px; min-height:220px; padding:14px; } .employee-reward-card-v9.compact .employee-reward-medal-v9 { width:44px; height:54px; } .employee-reward-card-v9.compact .employee-reward-medal-v9 b { width:42px; height:42px; font-size:9px; } .employee-reward-card-v9.compact .employee-reward-medal-v9 i { width:25px; height:23px; } .employee-reward-card-v9.compact .employee-reward-card-head-v9 span { font-size:8px; } .employee-reward-card-v9.compact .employee-reward-card-head-v9 em { font-size:8px; } .employee-reward-card-v9.compact h3 { font-size:17px; } .employee-reward-card-v9.compact > p { overflow:hidden; display:-webkit-box; font-size:10px; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .employee-reward-card-v9.compact .employee-reward-value-v9 { padding:7px; } .employee-reward-card-v9.compact .employee-reward-value-v9 b { font-size:10px; } .employee-reward-card-v9.compact .employee-reward-value-v9 small { font-size:7px; } .employee-reward-empty-v9 { min-height:260px; display:grid; grid-template-columns:70px minmax(0,400px); justify-content:center; align-items:center; gap:18px; border:1px dashed rgba(122,148,102,.38); border-radius:20px; background:rgba(var(--surface-rgb),.55); } .employee-reward-empty-v9 > span { width:66px; height:66px; display:grid; place-items:center; border-radius:50%; background:var(--florentini-green-mist); color:var(--florentini-green-deep); font-size:25px; } .employee-reward-empty-v9 h3 { margin:0; font:500 22px var(--font-serif); } .employee-reward-empty-v9 p { margin:5px 0 0; color:var(--gray); font-size:12px; } .employee-rating-v9 { overflow:hidden; border:1px solid var(--reward-border); border-radius:20px; background:rgba(var(--surface-rgb),.68); box-shadow:0 14px 34px rgba(43,55,39,.07); } .employee-rating-head-v9 { padding:20px; border-bottom:1px solid var(--glass-border-soft); background:linear-gradient(145deg,rgba(122,148,102,.09),transparent); } .employee-rating-head-v9 h2 { margin:5px 0 3px; font:500 27px var(--font-serif); } .employee-rating-head-v9 p { margin:0; color:var(--gray); font-size:12px; } .employee-rating-v9 > div:last-child { display:grid; padding:8px 16px 16px; } .employee-rating-v9 article { min-width:0; display:grid; grid-template-columns:38px 42px minmax(0,1fr) auto 110px; gap:12px; align-items:center; min-height:62px; padding:5px 10px; border-bottom:1px solid var(--glass-border-soft); } .employee-rating-v9 article.current { border:1px solid rgba(122,148,102,.35); border-radius:12px; background:var(--florentini-green-mist); } .employee-rating-v9 article > strong { color:var(--gray); font:11px var(--font-mono); } .employee-rating-v9 article > i { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--florentini-green); color:#fff; font:11px var(--font-mono); font-style:normal; } .employee-rating-v9 article > span { min-width:0; } .employee-rating-v9 article > span b,.employee-rating-v9 article > span small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .employee-rating-v9 article > span b { font-size:13px; } .employee-rating-v9 article > span small,.employee-rating-v9 article > em { color:var(--gray); font-size:10px; font-style:normal; } .employee-rating-v9 article > b { color:var(--florentini-green-deep); font:12px var(--font-mono); text-align:right; } @media (max-width:1240px) { .rewards-center-v8 .rewards-program-workspace-v8 { grid-template-columns:1fr; } .rewards-center-v8 .reward-program-control-v8 { position:relative; top:auto; } .employee-reward-grid-v9 { grid-template-columns:1fr 1fr; } .employee-rewards-hero-v9 { grid-template-columns:1fr; } } @media (max-width:920px) { .employee-reward-compact-grid-v9 { grid-template-columns:1fr; } .rewards-center-v8 .reward-catalog-grid-v8 { grid-template-columns:1fr; } .rewards-center-v8 .reward-employee-list-v8 { grid-template-columns:1fr 1fr; } .employee-rewards-hero-v9 > div:last-child { grid-template-columns:repeat(3,1fr); } } @media (max-width:680px) { .employee-board-head-v9,.employee-rewards-hero-v9 { grid-template-columns:1fr; } .employee-board-head-v9 > div:last-child { justify-items:start; } .employee-reward-grid-v9 { grid-template-columns:1fr; } .employee-reward-tabs-v9 { display:grid; grid-template-columns:1fr; } .employee-rewards-hero-v9 > div:last-child { grid-template-columns:1fr; } .employee-rating-v9 article { grid-template-columns:34px 38px minmax(0,1fr); } .employee-rating-v9 article > em,.employee-rating-v9 article > b { grid-column:3; text-align:left; } .reward-control-actions-v9 { grid-template-columns:1fr; } } /* Reward Studio V10 — rarity frames, animated medals and clean steps */ .reward-builder-v8 { --rarity:#758b6d; --rarity-soft:#e7ece3; --rarity-deep:#42533d; --rarity-glow:rgba(117,139,109,.22); border:2px solid color-mix(in srgb,var(--rarity) 72%,transparent); box-shadow:0 24px 58px rgba(46,59,42,.14),0 0 0 5px color-mix(in srgb,var(--rarity-glow) 45%,transparent); transition:border-color .24s var(--ease-soft),box-shadow .24s var(--ease-soft); } .reward-builder-v8 .reward-builder-title-v8 { background:radial-gradient(circle at 86% 0,var(--rarity-glow),transparent 36%),linear-gradient(135deg,color-mix(in srgb,var(--rarity-deep) 72%,#1f291e),#354632); } .reward-builder-v8.rarity-rare { box-shadow:0 24px 58px rgba(46,59,42,.15),0 0 28px rgba(176,194,100,.20); } .reward-builder-v8.rarity-epic { box-shadow:0 24px 58px rgba(71,48,46,.17),0 0 34px rgba(176,110,102,.23); } .reward-builder-v8.rarity-legendary { box-shadow:0 26px 62px rgba(76,58,25,.18),0 0 42px rgba(205,165,75,.28); animation:flPageRise var(--motion-page-duration,460ms) var(--ease-soft) both,rewardLegendaryFrameV10 2.8s ease-in-out infinite; } @keyframes rewardLegendaryFrameV10 { 0%,100%{ box-shadow:0 26px 62px rgba(76,58,25,.18),0 0 28px rgba(205,165,75,.20); } 50%{ box-shadow:0 28px 68px rgba(76,58,25,.22),0 0 48px rgba(220,181,87,.38); } } .reward-builder-steps-v10 { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:0 14px; border-bottom:1px solid var(--glass-border-soft); background:color-mix(in srgb,var(--rarity-soft) 35%,var(--surface)); } .reward-builder-steps-v10 span { position:relative; display:flex; align-items:center; gap:8px; min-height:44px; color:var(--gray); font-size:11px; } .reward-builder-steps-v10 span:not(:last-child)::after { content:""; position:absolute; right:10px; width:28px; height:1px; background:color-mix(in srgb,var(--rarity) 35%,transparent); } .reward-builder-steps-v10 b { width:25px; height:25px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--rarity) 38%,transparent); border-radius:50%; background:var(--surface); color:var(--rarity-deep); font:9px var(--font-mono); } .reward-builder-v8 .reward-builder-layout-v8 { grid-template-columns:minmax(0,1fr) 330px; gap:16px; padding:16px; background:linear-gradient(145deg,rgba(var(--surface-rgb),.96),color-mix(in srgb,var(--rarity-soft) 18%,var(--surface))); } .reward-builder-v8 .reward-builder-main-v8 { min-width:0; max-width:100%; display:grid; grid-template-columns:1fr; gap:12px; container-type:inline-size; } .reward-builder-basics-v10,.reward-rarity-picker-v8,.reward-medal-picker-v8 { min-width:0; padding:14px !important; border:1px solid color-mix(in srgb,var(--rarity) 24%,var(--glass-border-soft)) !important; border-radius:15px; background:rgba(var(--surface-rgb),.68); box-shadow:0 8px 22px rgba(45,57,41,.045); } .reward-builder-step-title-v10,.reward-rarity-picker-v8 > legend,.reward-medal-picker-v8 > legend { width:100%; display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:0; color:var(--charcoal); text-transform:none; } .reward-builder-step-title-v10 > b,.reward-rarity-picker-v8 > legend > b,.reward-medal-picker-v8 > legend > b { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:var(--rarity-soft); color:var(--rarity-deep); font:10px var(--font-mono); } .reward-builder-step-title-v10 > span,.reward-rarity-picker-v8 > legend > span,.reward-medal-picker-v8 > legend > span { min-width:0; display:grid; gap:2px; } .reward-builder-step-title-v10 strong,.reward-rarity-picker-v8 > legend strong,.reward-medal-picker-v8 > legend strong { color:var(--charcoal); font:600 14px var(--font-sans); } .reward-builder-step-title-v10 small,.reward-rarity-picker-v8 > legend small,.reward-medal-picker-v8 > legend small { color:var(--gray); font:10px var(--font-sans); letter-spacing:0; text-transform:none; } .reward-builder-basic-fields-v10 { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .reward-builder-basic-fields-v10 label { min-width:0; display:grid; gap:5px; } .reward-builder-basic-fields-v10 label.wide { grid-column:1 / -1; } .reward-builder-basic-fields-v10 label > span { color:var(--gray); font:10px var(--font-mono); letter-spacing:.07em; text-transform:uppercase; } .reward-builder-v8 .reward-rarity-picker-v8 > div { max-width:100%; grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); gap:8px; } .reward-builder-v8 .reward-rarity-picker-v8 button { position:relative; overflow:hidden; min-height:68px; border-width:2px; } .reward-builder-v8 .reward-rarity-picker-v8 button::after { content:""; position:absolute; inset:auto -20% -34px; height:54px; border-radius:50%; background:radial-gradient(circle,var(--rarity-glow),transparent 70%); opacity:0; transition:opacity .22s var(--ease-soft),transform .22s var(--ease-soft); } .reward-builder-v8 .reward-rarity-picker-v8 button:hover::after,.reward-builder-v8 .reward-rarity-picker-v8 button.selected::after { opacity:1; transform:translateY(-9px); } .reward-builder-v8 .reward-rarity-picker-v8 button.selected { border-color:var(--rarity); box-shadow:0 0 0 3px var(--rarity-glow),0 10px 24px var(--rarity-glow); transform:translateY(-2px); } .reward-builder-v8 .reward-rarity-picker-v8 button.selected > i { box-shadow:0 0 16px var(--rarity),0 0 28px var(--rarity-glow); animation:rewardRarityBarV10 1.8s ease-in-out infinite; } @keyframes rewardRarityBarV10 { 0%,100%{ transform:scaleY(.82); } 50%{ transform:scaleY(1.08); } } .reward-builder-v8 .reward-medal-picker-v8 > div { max-width:100%; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:8px; } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10 { position:relative; min-height:105px; display:grid; grid-template-columns:62px minmax(0,1fr); justify-items:stretch; align-items:center; gap:10px; padding:10px; border:2px solid var(--glass-border-soft); border-radius:14px; background:linear-gradient(145deg,rgba(var(--surface-rgb),.88),color-mix(in srgb,var(--rarity-soft) 20%,var(--surface))); text-align:left; } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10:hover { border-color:color-mix(in srgb,var(--rarity) 65%,transparent); background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--rarity-soft) 45%,var(--surface))); transform:translateY(-3px); box-shadow:0 13px 25px rgba(50,63,45,.10); } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10.selected { border-color:var(--rarity); background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--rarity-soft) 58%,var(--surface))); color:var(--rarity-deep); box-shadow:0 0 0 3px var(--rarity-glow),0 16px 30px var(--rarity-glow); transform:translateY(-3px); } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10 > i { position:relative; width:58px; height:72px; display:grid; place-items:start center; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10 > i::before { content:""; position:absolute; z-index:1; top:1px; width:52px; height:52px; border:2px solid color-mix(in srgb,var(--rarity) 58%,transparent); border-radius:50%; background:radial-gradient(circle at 32% 24%,#fff,var(--rarity-soft) 68%,var(--rarity)); box-shadow:inset 0 0 0 4px rgba(255,255,255,.58),0 8px 18px var(--rarity-glow); transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-soft); } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10 > i > b { position:relative; z-index:3; width:52px; height:52px; display:grid; place-items:center; color:var(--rarity-deep); font:700 13px var(--font-mono); } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10 > i > em { position:absolute; z-index:0; bottom:0; width:34px; height:31px; background:linear-gradient(90deg,var(--rarity) 0 44%,transparent 44% 56%,var(--rarity) 56%); clip-path:polygon(8% 0,92% 0,100% 100%,50% 76%,0 100%); } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10:hover > i::before { transform:scale(1.07) rotate(-4deg); box-shadow:inset 0 0 0 4px rgba(255,255,255,.62),0 10px 24px var(--rarity-glow),0 0 20px var(--rarity-glow); } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10.selected > i { animation:rewardMedalSelectedV10 1.4s var(--ease-spring) both; } @keyframes rewardMedalSelectedV10 { 0%{ transform:scale(.72) rotate(-10deg); opacity:.45; } 55%{ transform:scale(1.10) rotate(4deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10 > span { min-width:0; display:grid; gap:4px; overflow:visible; white-space:normal; } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10 > span b { color:var(--charcoal); font-size:12px; } .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10 > span small { color:var(--gray); font-size:9px; line-height:1.35; } .reward-builder-v8 .reward-rarity-picker-v8 > legend small,.reward-builder-v8 .reward-medal-picker-v8 > legend small { overflow-wrap:anywhere; } .reward-builder-v8 .reward-medal-picker-v8 button.medal-diamond > i::before { border-radius:13px; transform:rotate(45deg) scale(.76); } .reward-builder-v8 .reward-medal-picker-v8 button.medal-diamond:hover > i::before { transform:rotate(41deg) scale(.84); } .reward-builder-v8 .reward-medal-picker-v8 button.medal-crown > i::before { border-radius:16px 16px 45% 45%; } .reward-builder-v8 .reward-medal-picker-v8 button.medal-spark > i::before { border-radius:0; clip-path:polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%); border:0; } .reward-builder-v8 .reward-medal-picker-v8 button.medal-florentine > i::before { border-radius:19px 19px 7px 7px; } .reward-builder-v8 .reward-medal-picker-v8 button.medal-heart > i::before { background:radial-gradient(circle at 32% 24%,#fff,#f1d7d2 68%,#b9776e); } .reward-builder-v8 .reward-medal-picker-v8 button.medal-quality > i::before { border-radius:14px 14px 45% 45%; clip-path:polygon(50% 0,92% 13%,86% 72%,50% 100%,14% 72%,8% 13%); } .reward-builder-v8 .reward-medal-picker-v8 button.medal-laurel > i::before { border-style:double; border-width:4px; } .reward-builder-v8 .reward-builder-preview-v8 { position:sticky; top:76px; align-self:start; gap:10px; padding:12px; border:2px solid color-mix(in srgb,var(--rarity) 46%,transparent); background:radial-gradient(circle at 70% 0,var(--rarity-glow),transparent 34%),color-mix(in srgb,var(--rarity-soft) 24%,var(--surface)); box-shadow:0 14px 34px rgba(46,59,42,.08),0 0 24px var(--rarity-glow); } .reward-builder-preview-v8 > div:first-child { display:grid; gap:2px; } .reward-builder-preview-v8 > div:first-child span { color:var(--rarity-deep); font:10px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; } .reward-builder-preview-v8 > div:first-child b { color:var(--charcoal); font-size:12px; } .reward-builder-v8 .reward-builder-team-v8 { grid-template-columns:250px minmax(0,1fr); gap:10px 14px; padding:14px; border:1px solid color-mix(in srgb,var(--rarity) 24%,var(--glass-border-soft)); border-radius:15px; background:rgba(var(--surface-rgb),.68); } .reward-builder-v8 .reward-builder-team-v8 > .reward-builder-step-title-v10 { margin:0; } .reward-builder-v8 .reward-employee-list-v8 { padding-top:3px; } /* Medal identities on created and employee cards */ .reward-visual-card-v8,.employee-reward-card-v9 { border-width:2px; box-shadow:0 16px 36px rgba(44,56,39,.10),0 0 20px var(--rarity-glow); } .reward-visual-card-v8.rarity-epic,.employee-reward-card-v9.rarity-epic { box-shadow:0 18px 40px rgba(71,48,46,.13),0 0 28px var(--rarity-glow); } .reward-visual-card-v8.rarity-legendary,.employee-reward-card-v9.rarity-legendary { box-shadow:0 20px 44px rgba(77,59,25,.15),0 0 34px var(--rarity-glow); animation:rewardLegendaryCardV10 3.2s ease-in-out infinite; } @keyframes rewardLegendaryCardV10 { 0%,100%{ border-color:color-mix(in srgb,var(--rarity) 62%,transparent); box-shadow:0 20px 44px rgba(77,59,25,.14),0 0 24px var(--rarity-glow); } 50%{ border-color:var(--rarity); box-shadow:0 22px 48px rgba(77,59,25,.18),0 0 44px var(--rarity-glow); } } .reward-visual-card-v8 .reward-card-medal-v8,.employee-reward-card-v9 .employee-reward-medal-v9 { transform-origin:center 35%; transition:transform .35s var(--ease-spring); } .reward-visual-card-v8:hover .reward-card-medal-v8,.employee-reward-card-v9:hover .employee-reward-medal-v9 { transform:translateY(-3px) rotate(-4deg) scale(1.06); } .reward-visual-card-v8.medal-diamond .reward-card-medal-v8 b,.employee-reward-card-v9.medal-diamond .employee-reward-medal-v9 b { border-radius:0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); text-shadow:0 0 1px currentColor; } .reward-visual-card-v8.medal-crown .reward-card-medal-v8 b,.employee-reward-card-v9.medal-crown .employee-reward-medal-v9 b { border-radius:16px 16px 45% 45%; } .reward-visual-card-v8.medal-spark .reward-card-medal-v8 b,.employee-reward-card-v9.medal-spark .employee-reward-medal-v9 b { border-radius:0; clip-path:polygon(50% 0,63% 35%,100% 50%,63% 65%,50% 100%,37% 65%,0 50%,37% 35%); } .reward-visual-card-v8.medal-florentine .reward-card-medal-v8 b,.employee-reward-card-v9.medal-florentine .employee-reward-medal-v9 b { border-radius:19px 19px 7px 7px; font:italic 22px var(--font-serif); } .reward-visual-card-v8.medal-quality .reward-card-medal-v8 b,.employee-reward-card-v9.medal-quality .employee-reward-medal-v9 b { border-radius:14px 14px 45% 45%; clip-path:polygon(50% 0,92% 13%,86% 72%,50% 100%,14% 72%,8% 13%); } .reward-visual-card-v8.medal-laurel .reward-card-medal-v8 b,.employee-reward-card-v9.medal-laurel .employee-reward-medal-v9 b { border-style:double; border-width:4px; } .reward-visual-card-v8.rarity-legendary .reward-card-medal-v8,.employee-reward-card-v9.rarity-legendary .employee-reward-medal-v9 { animation:rewardLegendaryMedalV10 2.4s ease-in-out infinite; } @keyframes rewardLegendaryMedalV10 { 0%,100%{ filter:drop-shadow(0 0 2px var(--rarity-glow)); } 50%{ filter:drop-shadow(0 0 11px var(--rarity)); transform:translateY(-2px) scale(1.04); } } .rewards-history-actions-v10 { display:flex; align-items:center; gap:10px; } .rewards-history-actions-v10 small { color:var(--gray); font-size:11px; } .rewards-history-actions-v10 button { min-height:36px; padding:0 11px; border:1px solid rgba(166,94,75,.34); border-radius:9px; background:rgba(166,94,75,.07); color:#9b5544; font-size:11px; cursor:pointer; } .rewards-history-actions-v10 button:hover:not(:disabled) { border-color:#a65e4b; background:#f3e3de; transform:translateY(-1px); } .rewards-history-actions-v10 button:disabled { opacity:.42; cursor:default; } @media (max-width:1100px) { .reward-builder-v8 .reward-builder-layout-v8 { grid-template-columns:1fr; } .reward-builder-v8 .reward-builder-preview-v8 { position:relative; top:auto; grid-row:auto; } } @media (max-width:760px) { .reward-builder-steps-v10 { grid-template-columns:1fr 1fr; padding-block:5px; } .reward-builder-steps-v10 span::after { display:none; } .reward-builder-basic-fields-v10,.reward-builder-v8 .reward-rarity-picker-v8 > div,.reward-builder-v8 .reward-medal-picker-v8 > div { grid-template-columns:1fr 1fr; } .reward-builder-v8 .reward-builder-team-v8 { grid-template-columns:1fr; } .rewards-history-actions-v10 { align-items:flex-end; flex-direction:column; } } @media (max-width:480px) { .reward-builder-basic-fields-v10,.reward-builder-v8 .reward-rarity-picker-v8 > div,.reward-builder-v8 .reward-medal-picker-v8 > div { grid-template-columns:1fr; } .reward-builder-steps-v10 { grid-template-columns:1fr; } } body[data-motion="off"] .reward-builder-v8.rarity-legendary,body[data-motion="off"] .reward-visual-card-v8.rarity-legendary,body[data-motion="off"] .employee-reward-card-v9.rarity-legendary,body[data-motion="off"] .reward-visual-card-v8.rarity-legendary .reward-card-medal-v8,body[data-motion="off"] .employee-reward-card-v9.rarity-legendary .employee-reward-medal-v9,body[data-motion="off"] .reward-builder-v8 .reward-rarity-picker-v8 button.selected > i,body[data-motion="off"] .reward-builder-v8 .reward-medal-picker-v8 button.medal-option-v10.selected > i { animation:none !important; }