/* ============================================================ QUESTIX UI — единая дизайн-система Две темы: light / dark (автоопределение + ручной override через [data-theme="..."] на ). Все токены и компоненты — префикс .q-* ============================================================ */ /* ------------------------------------------------------------ 1. БРЕНДОВЫЕ ТОКЕНЫ (не меняются между темами) ------------------------------------------------------------ */ :root { /* Brand palette (из лэндинга) */ --q-yellow: #FFB800; --q-yellow-soft: #FFD152; --q-orange: #FF6B00; --q-orange-light: #FF8C2E; --q-orange-deep: #E55A00; --q-purple: #7B4EAB; --q-purple-deep: #5A2D82; --q-purple-glow: rgba(123,78,171,.45); --q-blue: #4FC3F7; --q-blue-dark: #0277BD; --q-red: #FF4757; --q-green: #43C97A; --q-pink: #FF6AC1; /* Gradients */ --q-grad-hero: linear-gradient(135deg, var(--q-yellow) 0%, var(--q-orange) 100%); --q-grad-purple: linear-gradient(135deg, var(--q-purple) 0%, var(--q-purple-deep) 100%); --q-grad-sky: linear-gradient(135deg, var(--q-blue) 0%, var(--q-purple) 100%); --q-grad-success: linear-gradient(135deg, #43C97A 0%, #2EAF5E 100%); --q-grad-danger: linear-gradient(135deg, #FF4757 0%, #C9184A 100%); /* Fonts */ --q-font-display: 'Dela Gothic One', 'Comfortaa', cursive; --q-font-heading: 'Comfortaa', cursive; --q-font-body: 'Nunito', system-ui, -apple-system, Segoe UI, sans-serif; --q-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Radii */ --q-r-pill: 100px; --q-r-card: 28px; --q-r-lg: 22px; --q-r-md: 16px; --q-r-sm: 12px; --q-r-xs: 8px; /* Motion */ --q-ease: cubic-bezier(.34,1.56,.64,1); --q-ease-out: cubic-bezier(.22,.61,.36,1); --q-d-fast: .18s; --q-d: .28s; --q-d-slow: .5s; /* Layout */ --q-sidebar-w: 256px; --q-appbar-h: 68px; --q-bottomnav-h:74px; /* Z-index */ --q-z-nav: 50; --q-z-sticky: 80; --q-z-drawer: 90; --q-z-overlay: 100; --q-z-modal: 120; --q-z-toast: 140; --q-z-tooltip: 160; } /* ------------------------------------------------------------ 2. СВЕТЛАЯ ТЕМА (default) ------------------------------------------------------------ */ :root { color-scheme: light; --q-bg: #F6F3EB; /* тёпло-кремовый */ --q-bg-alt: #EDE7DC; --q-surface: #FFFFFF; --q-surface-alt: #FBF8F1; --q-surface-hov: #FAF5E8; --q-text: #0D0D2B; --q-text-sub: rgba(13,13,43,.72); --q-text-mute: #6B6E8E; --q-text-on-brand:#0D0D2B; /* текст на жёлтой кнопке */ --q-border: rgba(13,13,43,.10); --q-border-strong:rgba(13,13,43,.22); --q-brand: var(--q-orange); /* основной акцент в светлой */ --q-brand-soft: rgba(255,107,0,.12); --q-brand-glow: rgba(255,107,0,.35); --q-accent: var(--q-purple); --q-accent-soft: rgba(123,78,171,.12); --q-success: #2EAF5E; --q-success-soft: rgba(46,175,94,.14); --q-warning: #E89A00; --q-warning-soft: rgba(232,154,0,.16); --q-danger: #D62828; --q-danger-soft: rgba(214,40,40,.12); --q-info: #0277BD; --q-info-soft: rgba(2,119,189,.12); /* Shadows (hard-shadow в светлой — пурпурная, а не чёрная) */ --q-sh-hard: 4px 4px 0 rgba(90,45,130,.18); --q-sh-hard-lg: 6px 6px 0 rgba(90,45,130,.22); --q-sh-card: 0 2px 8px rgba(13,13,43,.06), 0 18px 40px -20px rgba(13,13,43,.18); --q-sh-card-hov: 0 4px 14px rgba(13,13,43,.08), 0 28px 60px -20px rgba(123,78,171,.28); --q-sh-pop: 0 24px 80px -20px rgba(13,13,43,.35), 0 4px 14px rgba(13,13,43,.10); --q-sh-inset: inset 0 1px 0 rgba(255,255,255,.6); --q-glow-brand: 0 0 0 4px rgba(255,107,0,.18), 0 0 40px rgba(255,107,0,.28); --q-glow-accent: 0 0 0 4px rgba(123,78,171,.18), 0 0 40px rgba(123,78,171,.28); /* Grain overlay */ --q-grain-opacity: .035; } /* ------------------------------------------------------------ 3. ТЁМНАЯ ТЕМА — через @media и [data-theme="dark"] ------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --q-bg: #0D0D2B; --q-bg-alt: #101030; --q-surface: #17173F; --q-surface-alt: #1C1C4A; --q-surface-hov: #23236B; --q-text: #F0F2FF; --q-text-sub: rgba(240,242,255,.78); --q-text-mute: #A0A3C4; --q-text-on-brand:#0D0D2B; --q-border: rgba(255,255,255,.08); --q-border-strong:rgba(255,255,255,.20); --q-brand: var(--q-yellow); /* жёлтый ярче на тёмном */ --q-brand-soft: rgba(255,184,0,.14); --q-brand-glow: rgba(255,184,0,.45); --q-accent: #A880E0; --q-accent-soft: rgba(168,128,224,.16); --q-success: #43C97A; --q-success-soft: rgba(67,201,122,.16); --q-warning: #FFB800; --q-warning-soft: rgba(255,184,0,.14); --q-danger: #FF4757; --q-danger-soft: rgba(255,71,87,.16); --q-info: #4FC3F7; --q-info-soft: rgba(79,195,247,.14); --q-sh-hard: 4px 4px 0 rgba(0,0,0,.35); --q-sh-hard-lg: 6px 6px 0 rgba(0,0,0,.4); --q-sh-card: 0 2px 8px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.6); --q-sh-card-hov: 0 4px 14px rgba(0,0,0,.5), 0 28px 60px -20px rgba(255,184,0,.22); --q-sh-pop: 0 24px 80px -20px rgba(0,0,0,.8), 0 4px 14px rgba(0,0,0,.4); --q-sh-inset: inset 0 1px 0 rgba(255,255,255,.05); --q-glow-brand: 0 0 0 4px rgba(255,184,0,.18), 0 0 60px rgba(255,184,0,.35); --q-glow-accent: 0 0 0 4px rgba(168,128,224,.18), 0 0 60px rgba(168,128,224,.35); --q-grain-opacity: .05; } } /* Ручной override через [data-theme="dark"] */ :root[data-theme="dark"] { color-scheme: dark; --q-bg: #0D0D2B; --q-bg-alt: #101030; --q-surface: #17173F; --q-surface-alt: #1C1C4A; --q-surface-hov: #23236B; --q-text: #F0F2FF; --q-text-sub: rgba(240,242,255,.78); --q-text-mute: #A0A3C4; --q-text-on-brand:#0D0D2B; --q-border: rgba(255,255,255,.08); --q-border-strong:rgba(255,255,255,.20); --q-brand: var(--q-yellow); --q-brand-soft: rgba(255,184,0,.14); --q-brand-glow: rgba(255,184,0,.45); --q-accent: #A880E0; --q-accent-soft: rgba(168,128,224,.16); --q-success: #43C97A; --q-success-soft: rgba(67,201,122,.16); --q-warning: #FFB800; --q-warning-soft: rgba(255,184,0,.14); --q-danger: #FF4757; --q-danger-soft: rgba(255,71,87,.16); --q-info: #4FC3F7; --q-info-soft: rgba(79,195,247,.14); --q-sh-hard: 4px 4px 0 rgba(0,0,0,.35); --q-sh-hard-lg: 6px 6px 0 rgba(0,0,0,.4); --q-sh-card: 0 2px 8px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.6); --q-sh-card-hov: 0 4px 14px rgba(0,0,0,.5), 0 28px 60px -20px rgba(255,184,0,.22); --q-sh-pop: 0 24px 80px -20px rgba(0,0,0,.8), 0 4px 14px rgba(0,0,0,.4); --q-sh-inset: inset 0 1px 0 rgba(255,255,255,.05); --q-glow-brand: 0 0 0 4px rgba(255,184,0,.18), 0 0 60px rgba(255,184,0,.35); --q-glow-accent: 0 0 0 4px rgba(168,128,224,.18), 0 0 60px rgba(168,128,224,.35); --q-grain-opacity: .05; } /* ------------------------------------------------------------ 4. БАЗА / RESET ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--q-font-body); font-size: 15px; line-height: 1.55; color: var(--q-text); background: var(--q-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } h1,h2,h3,h4,h5,h6 { font-family: var(--q-font-heading); font-weight: 700; margin: 0 0 .5em; letter-spacing: -.01em; color: var(--q-text); } h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); } h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } p { margin: 0 0 1em; } a { color: var(--q-brand); text-decoration: none; transition: color var(--q-d-fast); } a:hover { color: var(--q-orange); } hr { border: none; border-top: 1px solid var(--q-border); margin: 20px 0; } code, kbd { font-family: var(--q-font-mono); font-size: .92em; } input, select, textarea, button { font: inherit; color: inherit; } ::selection { background: var(--q-brand); color: var(--q-text-on-brand); } /* Скроллбар */ * { scrollbar-width: thin; scrollbar-color: var(--q-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--q-border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--q-brand); background-clip: padding-box; border: 2px solid transparent; } /* Grain overlay для атмосферы */ body.q-grain::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity: var(--q-grain-opacity); mix-blend-mode: overlay; } /* ------------------------------------------------------------ 5. УТИЛИТЫ ------------------------------------------------------------ */ .q-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } .q-container-sm { max-width: 720px; } .q-container-md { max-width: 960px; } .q-flex { display: flex; } .q-grid { display: grid; } .q-gap-1 { gap: 8px; } .q-gap-2 { gap: 12px; } .q-gap-3 { gap: 16px; } .q-gap-4 { gap: 24px; } .q-gap-5 { gap: 32px; } .q-center { display: flex; align-items: center; justify-content: center; } .q-between { display: flex; align-items: center; justify-content: space-between; } .q-row { display: flex; align-items: center; } .q-col { display: flex; flex-direction: column; } .q-mute { color: var(--q-text-mute); } .q-sub { color: var(--q-text-sub); } .q-mono { font-family: var(--q-font-mono); } .q-display { font-family: var(--q-font-display); letter-spacing: .01em; } .q-heading { font-family: var(--q-font-heading); } .q-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .q-kbd { font: 500 .8em var(--q-font-mono); padding: 2px 7px; border-radius: 6px; background: var(--q-surface-alt); border: 1px solid var(--q-border); box-shadow: 0 1px 0 var(--q-border); color: var(--q-text-sub); } .q-divider { height: 1px; background: var(--q-border); margin: 20px 0; border-radius: 1px; } .q-divider--dash { background: none; border-top: 1px dashed var(--q-border); } /* ------------------------------------------------------------ 6. BUTTONS ------------------------------------------------------------ */ .q-btn { --q-btn-bg: var(--q-surface); --q-btn-color: var(--q-text); --q-btn-border: var(--q-border-strong); --q-btn-shadow: none; --q-btn-pad-y: 10px; --q-btn-pad-x: 20px; --q-btn-fs: .95rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: var(--q-btn-pad-y) var(--q-btn-pad-x); font-family: var(--q-font-heading); font-weight: 700; font-size: var(--q-btn-fs); line-height: 1.2; color: var(--q-btn-color); background: var(--q-btn-bg); border: 1.5px solid var(--q-btn-border); border-radius: var(--q-r-pill); box-shadow: var(--q-btn-shadow); cursor: pointer; user-select: none; white-space: nowrap; transition: transform var(--q-d) var(--q-ease), box-shadow var(--q-d) var(--q-ease-out), background-color var(--q-d-fast), color var(--q-d-fast), border-color var(--q-d-fast); position: relative; overflow: hidden; text-decoration: none; } .q-btn i { font-size: 1.05em; line-height: 1; } .q-btn:hover { transform: translateY(-2px); box-shadow: var(--q-sh-hard); } .q-btn:active { transform: translateY(0); box-shadow: none; transition-duration: 60ms; } .q-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--q-brand-soft), var(--q-sh-hard); } .q-btn:disabled, .q-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .q-btn--sm { --q-btn-pad-y: 6px; --q-btn-pad-x: 14px; --q-btn-fs: .82rem; } .q-btn--lg { --q-btn-pad-y: 14px; --q-btn-pad-x: 28px; --q-btn-fs: 1.05rem; } .q-btn--xl { --q-btn-pad-y: 20px; --q-btn-pad-x: 44px; font-family: var(--q-font-display); font-size: 1.3rem; letter-spacing: .02em; } .q-btn--icon { --q-btn-pad-x: 10px; --q-btn-pad-y: 10px; border-radius: 50%; aspect-ratio: 1; } .q-btn--block { width: 100%; } /* Primary — брендовый жёлто-оранж градиент */ .q-btn--primary { --q-btn-bg: var(--q-grad-hero); --q-btn-color: var(--q-text-on-brand); --q-btn-border: transparent; --q-btn-shadow: var(--q-sh-hard); background: var(--q-grad-hero); } .q-btn--primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-110%); transition: transform .7s var(--q-ease-out); pointer-events: none; } .q-btn--primary:hover::before { transform: translateX(110%); } .q-btn--primary:hover { box-shadow: var(--q-sh-hard-lg), var(--q-glow-brand); } /* Accent — пурпурный */ .q-btn--accent { --q-btn-bg: var(--q-grad-purple); --q-btn-color: #fff; --q-btn-border: transparent; --q-btn-shadow: var(--q-sh-hard); background: var(--q-grad-purple); } .q-btn--accent:hover { box-shadow: var(--q-sh-hard-lg), var(--q-glow-accent); } /* Ghost — прозрачный с обводкой */ .q-btn--ghost { --q-btn-bg: transparent; --q-btn-color: var(--q-text); --q-btn-border: var(--q-border-strong); } .q-btn--ghost:hover { --q-btn-bg: var(--q-surface-alt); --q-btn-border: var(--q-brand); } /* Soft — мягкий с брендовым оттенком */ .q-btn--soft { --q-btn-bg: var(--q-brand-soft); --q-btn-color: var(--q-brand); --q-btn-border: transparent; } .q-btn--soft:hover { --q-btn-bg: var(--q-brand); --q-btn-color: var(--q-text-on-brand); } /* Danger */ .q-btn--danger { --q-btn-bg: var(--q-grad-danger); --q-btn-color: #fff; --q-btn-border: transparent; --q-btn-shadow: var(--q-sh-hard); background: var(--q-grad-danger); } .q-btn--danger-ghost { --q-btn-bg: transparent; --q-btn-color: var(--q-danger); --q-btn-border: var(--q-danger); } .q-btn--danger-ghost:hover { --q-btn-bg: var(--q-danger-soft); } /* Success */ .q-btn--success { --q-btn-bg: var(--q-grad-success); --q-btn-color: #fff; --q-btn-border: transparent; --q-btn-shadow: var(--q-sh-hard); background: var(--q-grad-success); } /* Link-style */ .q-btn--link { --q-btn-bg: transparent; --q-btn-color: var(--q-brand); --q-btn-border: transparent; padding: 0; box-shadow: none !important; } .q-btn--link:hover { transform: none; text-decoration: underline; } /* Loading state */ .q-btn.is-loading { pointer-events: none; color: transparent !important; } .q-btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2.5px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--q-btn-color, #fff); animation: q-spin .7s linear infinite; } @keyframes q-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------ 7. FORMS / INPUTS ------------------------------------------------------------ */ .q-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .q-field-label { font-family: var(--q-font-heading); font-size: .85rem; font-weight: 600; color: var(--q-text-sub); letter-spacing: .01em; } .q-field-hint { font-size: .82rem; color: var(--q-text-mute); } .q-field-error { font-size: .82rem; color: var(--q-danger); display: flex; align-items: center; gap: 4px; } .q-input, .q-select, .q-textarea { width: 100%; padding: 12px 16px; font-family: var(--q-font-body); font-size: 1rem; color: var(--q-text); background: var(--q-surface); border: 1.5px solid var(--q-border); border-radius: var(--q-r-md); outline: none; transition: border-color var(--q-d-fast), box-shadow var(--q-d-fast), background-color var(--q-d-fast); } .q-input::placeholder, .q-textarea::placeholder { color: var(--q-text-mute); } .q-input:hover, .q-select:hover, .q-textarea:hover { border-color: var(--q-border-strong); } .q-input:focus, .q-select:focus, .q-textarea:focus { border-color: var(--q-brand); box-shadow: 0 0 0 4px var(--q-brand-soft); background: var(--q-surface); } .q-input:disabled, .q-textarea:disabled, .q-select:disabled { opacity: .6; cursor: not-allowed; } .q-input.is-error, .q-select.is-error, .q-textarea.is-error { border-color: var(--q-danger); box-shadow: 0 0 0 4px var(--q-danger-soft); } .q-textarea { resize: vertical; min-height: 100px; } .q-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B6E8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; } /* Input group с иконкой */ .q-input-group { position: relative; } .q-input-group .q-input { padding-left: 46px; } .q-input-group .q-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--q-text-mute); font-size: 1.1rem; pointer-events: none; } .q-input-group--trailing .q-input { padding-left: 16px; padding-right: 46px; } .q-input-group--trailing .q-input-icon { left: auto; right: 16px; } /* Checkbox / Radio / Switch */ .q-check, .q-radio, .q-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: .95rem; color: var(--q-text); } .q-check input, .q-radio input, .q-switch input { position: absolute; opacity: 0; pointer-events: none; } .q-check-box, .q-radio-dot { width: 22px; height: 22px; border: 1.5px solid var(--q-border-strong); background: var(--q-surface); display: inline-flex; align-items: center; justify-content: center; transition: all var(--q-d-fast); flex-shrink: 0; } .q-check-box { border-radius: 6px; } .q-radio-dot { border-radius: 50%; } .q-check-box::after { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--q-text-on-brand); transform: scale(0); transition: transform var(--q-d-fast) var(--q-ease); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M10.3 3.3L4.6 9l-2.9-2.9 1.4-1.4L4.6 6.2l4.3-4.3z'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M10.3 3.3L4.6 9l-2.9-2.9 1.4-1.4L4.6 6.2l4.3-4.3z'/%3E%3C/svg%3E") center/contain no-repeat; width: 14px; height: 14px; } .q-radio-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--q-text-on-brand); transform: scale(0); transition: transform var(--q-d-fast) var(--q-ease); } .q-check input:checked + .q-check-box, .q-radio input:checked + .q-radio-dot { background: var(--q-brand); border-color: var(--q-brand); } .q-check input:checked + .q-check-box::after, .q-radio input:checked + .q-radio-dot::after { transform: scale(1); } .q-check input:focus-visible + .q-check-box, .q-radio input:focus-visible + .q-radio-dot { box-shadow: 0 0 0 4px var(--q-brand-soft); } .q-switch-track { width: 42px; height: 24px; border-radius: 100px; background: var(--q-border-strong); position: relative; transition: background-color var(--q-d-fast); flex-shrink: 0; } .q-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--q-d) var(--q-ease); } .q-switch input:checked + .q-switch-track { background: var(--q-brand); } .q-switch input:checked + .q-switch-track::after { transform: translateX(18px); } /* ------------------------------------------------------------ 8. CARDS ------------------------------------------------------------ */ .q-card { background: var(--q-surface); border: 1px solid var(--q-border); border-radius: var(--q-r-card); box-shadow: var(--q-sh-card); padding: 28px; position: relative; transition: transform var(--q-d), box-shadow var(--q-d); } .q-card--flat { box-shadow: none; } .q-card--alt { background: var(--q-surface-alt); } .q-card--pad-sm { padding: 18px; } .q-card--pad-lg { padding: 40px; } .q-card--interactive { cursor: pointer; } .q-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--q-sh-card-hov); border-color: var(--q-border-strong); } .q-card--highlight { border-color: var(--q-brand); box-shadow: var(--q-sh-card), 0 0 0 2px var(--q-brand-soft); } .q-card--highlight::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; background: var(--q-grad-hero); border-radius: 0 0 3px 3px; } .q-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .q-card-head h2, .q-card-head h3 { margin: 0; } .q-card-sub { color: var(--q-text-mute); font-size: .95rem; margin: -8px 0 18px; } /* Статистические карточки */ .q-stat { background: var(--q-surface); border: 1px solid var(--q-border); border-radius: var(--q-r-card); padding: 24px; box-shadow: var(--q-sh-card); position: relative; overflow: hidden; transition: transform var(--q-d), box-shadow var(--q-d); } .q-stat:hover { transform: translateY(-3px); box-shadow: var(--q-sh-card-hov); } .q-stat-icon { width: 48px; height: 48px; border-radius: var(--q-r-md); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--q-brand-soft); color: var(--q-brand); margin-bottom: 14px; } .q-stat-value { font-family: var(--q-font-display); font-size: clamp(1.8rem, 3vw, 2.3rem); color: var(--q-text); line-height: 1; margin-bottom: 6px; } .q-stat-label { color: var(--q-text-mute); font-size: .92rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .q-stat--brand { border-color: var(--q-brand); background: linear-gradient(160deg, var(--q-brand-soft) 0%, transparent 70%), var(--q-surface); } .q-stat--success .q-stat-icon { background: var(--q-success-soft); color: var(--q-success); } .q-stat--warning .q-stat-icon { background: var(--q-warning-soft); color: var(--q-warning); } .q-stat--danger .q-stat-icon { background: var(--q-danger-soft); color: var(--q-danger); } .q-stat--info .q-stat-icon { background: var(--q-info-soft); color: var(--q-info); } /* Композитные модификаторы иконки */ .q-stat-icon--brand { background: var(--q-brand-soft); color: var(--q-brand); } .q-stat-icon--accent { background: var(--q-accent-soft); color: var(--q-accent); } .q-stat-icon--success { background: var(--q-success-soft); color: var(--q-success); } .q-stat-icon--warning { background: var(--q-warning-soft); color: var(--q-warning); } .q-stat-icon--danger { background: var(--q-danger-soft); color: var(--q-danger); } .q-stat-icon--info { background: var(--q-info-soft); color: var(--q-info); } /* Доп. элементы стата */ .q-stat-body { display: flex; flex-direction: column; } .q-stat-sub { color: var(--q-text-mute); font-size: .85rem; margin-top: 4px; font-weight: 500; } .q-stat-value-sub { font-size: .55em; color: var(--q-text-mute); font-family: var(--q-font-heading); font-weight: 600; margin-left: 4px; } /* Сетка статов */ .q-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } /* Прогресс-бар (тонкий) */ .q-progress { display: block; width: 100%; height: 6px; background: var(--q-surface-alt); border-radius: 100px; overflow: hidden; } .q-progress > span { display: block; height: 100%; background: var(--q-grad-hero); border-radius: 100px; transition: width .6s cubic-bezier(.4,0,.2,1); } /* ------------------------------------------------------------ 9. BADGES / CHIPS / TAGS ------------------------------------------------------------ */ .q-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: .78rem; font-weight: 700; font-family: var(--q-font-heading); border-radius: 100px; background: var(--q-surface-alt); color: var(--q-text-sub); border: 1px solid var(--q-border); line-height: 1.4; } .q-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .q-badge--brand { background: var(--q-brand-soft); color: var(--q-brand); border-color: transparent; } .q-badge--accent { background: var(--q-accent-soft); color: var(--q-accent); border-color: transparent; } .q-badge--success { background: var(--q-success-soft); color: var(--q-success); border-color: transparent; } .q-badge--warning { background: var(--q-warning-soft); color: var(--q-warning); border-color: transparent; } .q-badge--danger { background: var(--q-danger-soft); color: var(--q-danger); border-color: transparent; } .q-badge--info { background: var(--q-info-soft); color: var(--q-info); border-color: transparent; } .q-badge--solid-brand { background: var(--q-grad-hero); color: var(--q-text-on-brand); border: none; } /* Chip — крупнее badge */ .q-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: .9rem; font-weight: 600; background: var(--q-surface); border: 1px solid var(--q-border); border-radius: 100px; color: var(--q-text); cursor: pointer; transition: all var(--q-d-fast); } .q-chip:hover { border-color: var(--q-brand); color: var(--q-brand); } .q-chip.is-active { background: var(--q-brand); color: var(--q-text-on-brand); border-color: transparent; } /* ------------------------------------------------------------ 10. ALERTS ------------------------------------------------------------ */ .q-alert { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--q-r-md); background: var(--q-surface-alt); border: 1px solid var(--q-border); border-left: 4px solid var(--q-brand); color: var(--q-text); align-items: flex-start; } .q-alert-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; color: var(--q-brand); } .q-alert-body { flex: 1; min-width: 0; } .q-alert-title { font-weight: 700; font-family: var(--q-font-heading); margin-bottom: 2px; } .q-alert-msg { color: var(--q-text-sub); font-size: .95rem; } .q-alert-close { background: none; border: none; cursor: pointer; padding: 4px; color: var(--q-text-mute); font-size: 1.1rem; border-radius: 6px; transition: all var(--q-d-fast); } .q-alert-close:hover { background: var(--q-border); color: var(--q-text); } .q-alert--success { border-left-color: var(--q-success); background: var(--q-success-soft); } .q-alert--success .q-alert-icon { color: var(--q-success); } .q-alert--warning { border-left-color: var(--q-warning); background: var(--q-warning-soft); } .q-alert--warning .q-alert-icon { color: var(--q-warning); } .q-alert--danger { border-left-color: var(--q-danger); background: var(--q-danger-soft); } .q-alert--danger .q-alert-icon { color: var(--q-danger); } .q-alert--info { border-left-color: var(--q-info); background: var(--q-info-soft); } .q-alert--info .q-alert-icon { color: var(--q-info); } .q-alert--brand { border-left-color: var(--q-brand); background: var(--q-brand-soft); } .q-alert--brand .q-alert-icon { color: var(--q-brand); } /* ------------------------------------------------------------ 11. TOAST ------------------------------------------------------------ */ .q-toast-host { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: var(--q-z-toast); pointer-events: none; max-width: 380px; width: calc(100% - 40px); } .q-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--q-surface); border: 1px solid var(--q-border); border-left: 4px solid var(--q-brand); border-radius: var(--q-r-md); box-shadow: var(--q-sh-pop); color: var(--q-text); animation: q-toast-in .35s var(--q-ease) both; font-size: .92rem; } .q-toast.is-leaving { animation: q-toast-out .25s var(--q-ease-out) both; } .q-toast-icon { font-size: 1.3rem; color: var(--q-brand); flex-shrink: 0; } .q-toast-body { flex: 1; min-width: 0; } .q-toast-title { font-weight: 700; font-family: var(--q-font-heading); } .q-toast-msg { color: var(--q-text-sub); } .q-toast--success { border-left-color: var(--q-success); } .q-toast--success .q-toast-icon { color: var(--q-success); } .q-toast--warning { border-left-color: var(--q-warning); } .q-toast--warning .q-toast-icon { color: var(--q-warning); } .q-toast--danger { border-left-color: var(--q-danger); } .q-toast--danger .q-toast-icon { color: var(--q-danger); } .q-toast--info { border-left-color: var(--q-info); } .q-toast--info .q-toast-icon { color: var(--q-info); } @keyframes q-toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } } @keyframes q-toast-out { to { opacity: 0; transform: translateX(30px); } } /* ------------------------------------------------------------ 12. MODAL (наша — не Bootstrap) ------------------------------------------------------------ */ .q-modal-backdrop { position: fixed; inset: 0; background: rgba(13,13,43,.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: var(--q-z-modal); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity var(--q-d) var(--q-ease-out); } .q-modal-backdrop.is-open { opacity: 1; pointer-events: auto; } .q-modal { background: var(--q-surface); border: 1px solid var(--q-border); border-radius: var(--q-r-card); box-shadow: var(--q-sh-pop); max-width: 560px; width: 100%; max-height: min(calc(100vh - 48px), 90dvh); /* CSS Grid — чётко фиксирует head/body/foot, футер всегда виден */ display: grid; grid-template-rows: auto minmax(0, 1fr) auto; transform: translateY(24px) scale(.96); opacity: 0; transition: opacity var(--q-d) var(--q-ease-out), transform var(--q-d) var(--q-ease); overflow: hidden; } .q-modal-backdrop.is-open .q-modal { transform: none; opacity: 1; } .q-modal--lg { max-width: 720px; } .q-modal--sm { max-width: 440px; } /* Если внутри модалки есть
-обёртка — делаем её прозрачной для грида, чтобы head/body/foot попали прямо в ячейки .q-modal */ .q-modal > form { display: contents; } .q-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; gap: 16px; border-bottom: 1px solid var(--q-border); position: relative; } .q-modal-head::after { content: ''; position: absolute; left: 28px; right: 28px; bottom: -1px; height: 2px; background: var(--q-grad-hero); opacity: .5; border-radius: 2px; } .q-modal-title { font-family: var(--q-font-heading); font-size: 1.25rem; font-weight: 700; margin: 0; } .q-modal-close { background: var(--q-surface-alt); border: 1px solid var(--q-border); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--q-text); font-size: 1rem; transition: all var(--q-d-fast); } .q-modal-close:hover { background: var(--q-danger-soft); color: var(--q-danger); border-color: transparent; transform: rotate(90deg); } .q-modal-body { padding: 24px 28px; overflow-y: auto; flex: 1 1 auto; min-height: 0; /* критично для flex-скролла, иначе footer уплывает за экран */ } .q-modal-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 28px; border-top: 1px solid var(--q-border); background: var(--q-surface-alt); flex-shrink: 0; } /* ------------------------------------------------------------ 13. TABS ------------------------------------------------------------ */ .q-tabs { display: flex; gap: 4px; padding: 6px; background: var(--q-surface-alt); border-radius: var(--q-r-pill); border: 1px solid var(--q-border); width: fit-content; } .q-tab { padding: 9px 20px; font-family: var(--q-font-heading); font-weight: 600; font-size: .9rem; color: var(--q-text-sub); background: none; border: none; border-radius: var(--q-r-pill); cursor: pointer; transition: all var(--q-d-fast); display: inline-flex; align-items: center; gap: 6px; } .q-tab:hover { color: var(--q-text); } .q-tab.is-active { background: var(--q-surface); color: var(--q-text); box-shadow: var(--q-sh-card); } /* ------------------------------------------------------------ 14. TABLE ------------------------------------------------------------ */ .q-table-wrap { border: 1px solid var(--q-border); border-radius: var(--q-r-card); background: var(--q-surface); overflow: hidden; } .q-table { width: 100%; border-collapse: collapse; font-size: .92rem; } .q-table th, .q-table td { padding: 14px 18px; text-align: left; vertical-align: middle; } .q-table thead th { font-family: var(--q-font-heading); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--q-text-mute); font-weight: 700; background: var(--q-surface-alt); border-bottom: 1px solid var(--q-border); white-space: nowrap; } .q-table tbody tr { border-top: 1px solid var(--q-border); transition: background-color var(--q-d-fast); } .q-table tbody tr:first-child { border-top: none; } .q-table tbody tr:hover { background: var(--q-surface-hov); } /* ------------------------------------------------------------ 15. SKELETON ------------------------------------------------------------ */ .q-skeleton { display: block; background: linear-gradient(90deg, var(--q-surface-alt) 0%, var(--q-surface-hov) 50%, var(--q-surface-alt) 100%); background-size: 200% 100%; border-radius: var(--q-r-sm); animation: q-shimmer 1.4s linear infinite; min-height: 16px; } .q-skeleton--circle { border-radius: 50%; aspect-ratio: 1; } @keyframes q-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Скелет-карточка (для children-list / подобных сеток) */ .q-skeleton-card { background: var(--q-surface); border: 1px solid var(--q-border); border-radius: var(--q-r-card); padding: 24px; min-height: 180px; position: relative; overflow: hidden; box-shadow: var(--q-sh-card); } .q-skeleton-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--q-surface-hov) 50%, transparent 100%); background-size: 200% 100%; animation: q-shimmer 1.4s linear infinite; } /* Скелет-строка (для списков/таблиц) */ .q-skeleton-row { height: 62px; border-bottom: 1px solid var(--q-border); position: relative; overflow: hidden; background: var(--q-surface); } .q-skeleton-row:last-child { border-bottom: none; } .q-skeleton-row::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--q-surface-hov) 50%, transparent 100%); background-size: 200% 100%; animation: q-shimmer 1.4s linear infinite; } /* ------------------------------------------------------------ 16. EMPTY STATE ------------------------------------------------------------ */ .q-empty { padding: 56px 24px; text-align: center; background: var(--q-surface); border: 1.5px dashed var(--q-border-strong); border-radius: var(--q-r-card); color: var(--q-text-sub); } .q-empty-icon { font-size: 3.5rem; margin-bottom: 14px; opacity: .55; display: inline-block; animation: q-empty-float 4s ease-in-out infinite; } .q-empty h3 { color: var(--q-text); margin-bottom: 6px; } .q-empty p { color: var(--q-text-mute); margin-bottom: 18px; } .q-empty-title { font-family: var(--q-font-heading); font-weight: 800; font-size: 1.05rem; color: var(--q-text); margin-bottom: 4px; } .q-empty-sub { color: var(--q-text-mute); font-size: .9rem; } @keyframes q-empty-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } } /* ------------------------------------------------------------ 16.1 ICON BUTTON — компактное круглое действие в строке ------------------------------------------------------------ */ .q-icon-btn { width: 34px; height: 34px; border-radius: 10px; background: var(--q-surface-alt); border: 1px solid var(--q-border); color: var(--q-text-sub); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--q-d-fast); text-decoration: none; font-size: 1rem; } .q-icon-btn:hover { transform: translateY(-1px); border-color: var(--q-brand); color: var(--q-brand); } .q-icon-btn--success { color: var(--q-success); border-color: transparent; background: var(--q-success-soft); } .q-icon-btn--success:hover{ background: var(--q-success); color: #fff; } .q-icon-btn--danger { color: var(--q-danger); border-color: transparent; background: var(--q-danger-soft); } .q-icon-btn--danger:hover { background: var(--q-danger); color: #fff; } .q-icon-btn--brand { color: var(--q-brand); border-color: transparent; background: var(--q-brand-soft); } .q-icon-btn--brand:hover { background: var(--q-brand); color: var(--q-text-on-brand); } .q-icon-btn--ghost:hover { color: var(--q-danger); border-color: transparent; background: var(--q-danger-soft); } .q-inline-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* ------------------------------------------------------------ 16.2 TABLE CELL — main + sub двухстрочная ячейка ------------------------------------------------------------ */ .q-table-cell-main { font-weight: 700; color: var(--q-text); font-family: var(--q-font-heading); } .q-table-cell-sub { color: var(--q-text-mute); font-size: .85rem; margin-top: 2px; } /* ------------------------------------------------------------ 17. APPBAR / SIDEBAR / BOTTOM NAV ------------------------------------------------------------ */ .q-shell { display: grid; grid-template-columns: var(--q-sidebar-w) 1fr; grid-template-rows: var(--q-appbar-h) 1fr; grid-template-areas: "sidebar appbar" "sidebar main"; min-height: 100vh; } .q-shell--no-sidebar { grid-template-columns: 1fr; grid-template-areas: "appbar" "main"; } .q-appbar { grid-area: appbar; display: flex; align-items: center; gap: 16px; padding: 0 28px; background: color-mix(in srgb, var(--q-bg) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--q-border); position: sticky; top: 0; z-index: var(--q-z-sticky); } .q-appbar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--q-font-display); font-size: 1.1rem; color: var(--q-text); letter-spacing: .02em; } .q-appbar-brand img { height: 30px; } .q-appbar-spacer { flex: 1; } .q-appbar-actions { display: flex; align-items: center; gap: 10px; } .q-appbar-title { min-width: 0; display: flex; align-items: center; gap: 10px; } .q-appbar-h1 { font-family: var(--q-font-display); font-size: 1.3rem; margin: 0; color: var(--q-text); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 768px) { .q-appbar-h1 { font-size: 1.1rem; } } .q-hide-sm { display: inline-flex; } @media (max-width: 640px) { .q-hide-sm { display: none !important; } } .q-sidebar { grid-area: sidebar; background: var(--q-surface); border-right: 1px solid var(--q-border); padding: 22px 18px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: var(--q-z-drawer); } .q-sidebar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--q-font-display); font-size: 1.15rem; padding: 8px 10px 22px; color: var(--q-text); letter-spacing: .02em; border-bottom: 1px solid var(--q-border); margin-bottom: 12px; text-decoration: none; } .q-sidebar-brand img { height: 32px; } .q-sidebar-section { font-family: var(--q-font-heading); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--q-text-mute); padding: 16px 14px 8px; } .q-sidebar-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--q-r-md); color: var(--q-text-sub); font-weight: 600; font-size: .95rem; text-decoration: none; position: relative; transition: all var(--q-d-fast); font-family: var(--q-font-heading); } .q-sidebar-link i { font-size: 1.15rem; flex-shrink: 0; width: 20px; text-align: center; } .q-sidebar-link:hover { background: var(--q-surface-alt); color: var(--q-text); } .q-sidebar-link.is-active { background: var(--q-brand-soft); color: var(--q-brand); } .q-sidebar-link.is-active::before { content: ''; position: absolute; left: -18px; top: 8px; bottom: 8px; width: 3px; background: var(--q-brand); border-radius: 0 3px 3px 0; } .q-sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--q-border); } .q-main { grid-area: main; padding: 32px 40px; min-width: 0; min-height: calc(100vh - var(--q-appbar-h)); background: var(--q-bg); position: relative; } /* User menu в appbar */ .q-user { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; background: var(--q-surface-alt); border: 1px solid var(--q-border); border-radius: var(--q-r-pill); cursor: pointer; transition: all var(--q-d-fast); color: var(--q-text); font-family: var(--q-font-heading); font-weight: 600; } .q-user:hover { border-color: var(--q-brand); } .q-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--q-grad-hero); display: inline-flex; align-items: center; justify-content: center; font-family: var(--q-font-display); color: var(--q-text-on-brand); font-size: .9rem; flex-shrink: 0; } .q-user i.bi-chevron-down { font-size: .8rem; color: var(--q-text-mute); margin-right: 4px; transition: transform var(--q-d-fast); } .q-user.is-open i.bi-chevron-down { transform: rotate(180deg); } /* Universal dropdown menu */ .q-menu-wrap { position: relative; display: inline-block; } .q-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; padding: 8px; background: var(--q-surface); border: 1px solid var(--q-border); border-radius: var(--q-r-card); box-shadow: var(--q-sh-card-hov, 0 12px 40px rgba(0,0,0,.16)); z-index: var(--q-z-dropdown, 900); opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity var(--q-d-fast), transform var(--q-d-fast); } .q-menu.is-open { opacity: 1; transform: none; pointer-events: auto; } .q-menu--left { right: auto; left: 0; } .q-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--q-r-md); color: var(--q-text); font-family: var(--q-font-heading); font-weight: 600; font-size: .92rem; text-decoration: none; cursor: pointer; transition: background var(--q-d-fast), color var(--q-d-fast); width: 100%; border: none; background: none; text-align: left; } .q-menu-item i { font-size: 1.05rem; width: 20px; text-align: center; color: var(--q-text-mute); } .q-menu-item:hover { background: var(--q-surface-alt); color: var(--q-text); } .q-menu-item:hover i { color: var(--q-brand); } .q-menu-item--danger { color: var(--q-danger); } .q-menu-item--danger i { color: var(--q-danger); } .q-menu-item--danger:hover { background: var(--q-danger-soft); color: var(--q-danger); } .q-menu-sep { height: 1px; background: var(--q-border); margin: 6px 0; } .q-menu-head { padding: 8px 12px 10px; font-size: .75rem; color: var(--q-text-mute); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } /* Bottom nav — для детской PWA */ .q-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--q-z-sticky); display: flex; justify-content: space-around; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--q-surface) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--q-border); height: var(--q-bottomnav-h); } .q-bottomnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 6px; border: none; background: none; color: var(--q-text-mute); font-family: var(--q-font-heading); font-size: .68rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: color var(--q-d-fast), transform var(--q-d); letter-spacing: .02em; } .q-bottomnav-item i { font-size: 1.5rem; } .q-bottomnav-item.is-active { color: var(--q-brand); } .q-bottomnav-item:hover:not(.is-active) { color: var(--q-text); } .q-bottomnav-fab { position: relative; transform: translateY(-16px); width: 64px; height: 64px; border-radius: 50%; background: var(--q-grad-hero); box-shadow: var(--q-sh-hard), var(--q-glow-brand); color: var(--q-text-on-brand) !important; font-size: 1.6rem; font-family: inherit; padding: 0; transition: transform var(--q-d) var(--q-ease), box-shadow var(--q-d); align-self: center; } .q-bottomnav-fab i { font-size: 1.9rem !important; } .q-bottomnav-fab:hover { transform: translateY(-22px) scale(1.05); } /* ------------------------------------------------------------ 18. АВТОРИЗАЦИЯ (auth-страницы) ------------------------------------------------------------ */ .q-auth { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; position: relative; overflow: hidden; } .q-auth::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 500px at 10% 0%, var(--q-brand-soft), transparent 60%), radial-gradient(700px 400px at 90% 100%, var(--q-accent-soft), transparent 60%); pointer-events: none; z-index: 0; } .q-auth-card { position: relative; z-index: 1; width: 100%; max-width: 460px; background: var(--q-surface); border: 1px solid var(--q-border); border-radius: var(--q-r-card); box-shadow: var(--q-sh-pop); padding: 40px 36px; animation: q-auth-in .55s var(--q-ease) both; } @keyframes q-auth-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } } .q-auth-logo { text-align: center; margin-bottom: 28px; } .q-auth-logo img { height: 54px; margin: 0 auto 12px; } .q-auth-logo h1 { font-family: var(--q-font-display); font-size: 1.8rem; margin: 0; background: var(--q-grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: .02em; } .q-auth-logo p { color: var(--q-text-mute); font-size: .95rem; margin: 8px 0 0; } .q-auth-switch { text-align: center; margin-top: 22px; color: var(--q-text-sub); font-size: .92rem; } .q-auth-switch a { color: var(--q-brand); font-weight: 700; } /* ---- Детский вход: кард, привет-блок, PIN-дотсы и клавиатура ---- */ .q-auth-card--kid { position: relative; padding-top: 92px; } .q-kid-hello { position: absolute; top: -54px; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; border-radius: 50%; background: var(--q-grad-hero); box-shadow: var(--q-sh-hard); border: 2px solid var(--q-text); display: grid; place-items: center; z-index: 1; } .q-kid-hello__emoji { font-size: 3.6rem; line-height: 1; } .q-kid-hello__spark { position: absolute; font-family: var(--q-font-display); color: var(--q-text); pointer-events: none; } .q-kid-hello__spark--a { top: -10px; right: -8px; font-size: 1.4rem; animation: q-pulse 2.2s infinite; } .q-kid-hello__spark--b { bottom: -6px; left: -12px; font-size: 1rem; animation: q-pulse 2.8s infinite .4s; } .q-kid-hello__spark--c { top: 12px; left: -20px; font-size: 1.2rem; animation: q-pulse 3.1s infinite .8s; } .q-auth-logo--kid h1 { font-size: 2.2rem; -webkit-text-fill-color: currentColor; background: none; color: var(--q-text); } .q-auth-logo--kid p { font-size: 1.05rem; color: var(--q-text-sub); } /* PIN dots */ .q-pin-dots { display: flex; gap: 16px; justify-content: center; margin: 10px 0 22px; } .q-pin-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--q-surface-alt); border: 2px solid var(--q-border); transition: all var(--q-d); } .q-pin-dot.is-filled { background: var(--q-brand); border-color: var(--q-text); transform: scale(1.15); box-shadow: 0 0 0 5px var(--q-brand-soft); } .q-pin-dot.is-active { border-color: var(--q-brand); animation: qPulseSoft 1.2s infinite; } @keyframes qPulseSoft { 0%, 100% { box-shadow: 0 0 0 0 var(--q-brand-soft); } 50% { box-shadow: 0 0 0 6px var(--q-brand-soft); } } /* Keypad */ .q-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; } .q-key { appearance: none; border: 2px solid var(--q-text); background: var(--q-surface); color: var(--q-text); font-family: var(--q-font-display); font-size: 1.8rem; height: 68px; border-radius: 20px; cursor: pointer; box-shadow: var(--q-sh-hard); transition: transform var(--q-d), box-shadow var(--q-d), background var(--q-d); display: inline-flex; align-items: center; justify-content: center; user-select: none; } .q-key:hover { background: var(--q-surface-hov); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--q-text); } .q-key:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--q-text); } .q-key--ghost { background: var(--q-surface-alt); font-size: 1.3rem; color: var(--q-text-sub); } .q-key--ghost:hover { color: var(--q-text); } /* На маленьких экранах — компактнее */ @media (max-width: 420px) { .q-keypad { gap: 10px; } .q-key { height: 60px; font-size: 1.5rem; border-radius: 16px; } .q-kid-hello { width: 104px; height: 104px; top: -48px; } .q-kid-hello__emoji { font-size: 3rem; } .q-auth-card--kid { padding-top: 78px; } } /* ------------------------------------------------------------ 19. THEME TOGGLE ------------------------------------------------------------ */ .q-theme-toggle { width: 42px; height: 42px; border: 1px solid var(--q-border); background: var(--q-surface); color: var(--q-text); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: all var(--q-d); position: relative; overflow: hidden; } .q-theme-toggle:hover { border-color: var(--q-brand); color: var(--q-brand); transform: rotate(15deg); } .q-theme-toggle .bi-sun-fill { display: none; } :root[data-theme="dark"] .q-theme-toggle .bi-sun-fill { display: inline; } :root[data-theme="dark"] .q-theme-toggle .bi-moon-stars-fill { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .q-theme-toggle .bi-sun-fill { display: inline; } :root:not([data-theme="light"]) .q-theme-toggle .bi-moon-stars-fill { display: none; } } /* ------------------------------------------------------------ 20. ЭФФЕКТЫ / АНИМАЦИИ ------------------------------------------------------------ */ .q-glow-brand { box-shadow: var(--q-glow-brand); } .q-glow-accent { box-shadow: var(--q-glow-accent); } .q-float { animation: q-float 3.5s ease-in-out infinite; } @keyframes q-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .q-pulse { animation: q-pulse 2s ease-in-out infinite; } @keyframes q-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .q-wiggle { animation: q-wiggle 2.8s ease-in-out infinite; } @keyframes q-wiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } } /* Particle background (опционально — лёгкие звёздочки) */ .q-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .q-particle { position: absolute; width: 3px; height: 3px; background: var(--q-brand); border-radius: 50%; opacity: .25; animation: q-drift 18s linear infinite; } @keyframes q-drift { 0% { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: .35; } 90% { opacity: .35; } 100% { transform: translateY(-120vh) scale(.4); opacity: 0; } } /* ------------------------------------------------------------ 21. ADAPTIVE / MOBILE ------------------------------------------------------------ */ @media (max-width: 960px) { :root { --q-sidebar-w: 76px; } .q-sidebar { padding: 18px 10px; } .q-sidebar-brand span, .q-sidebar-link span, .q-sidebar-section { display: none; } .q-sidebar-link { justify-content: center; padding: 12px 0; } .q-sidebar-link.is-active::before { left: -10px; } .q-main { padding: 24px 20px; } } @media (max-width: 680px) { :root { --q-sidebar-w: 0px; --q-appbar-h: 60px; } .q-shell { grid-template-columns: 1fr; grid-template-areas: "appbar" "main"; } .q-sidebar { display: none; } .q-main { padding: 18px 14px; } .q-appbar { padding: 0 14px; } .q-modal-head, .q-modal-body, .q-modal-foot { padding-left: 20px; padding-right: 20px; } .q-auth-card { padding: 28px 20px; } .q-toast-host { top: auto; bottom: 20px; right: 20px; left: 20px; max-width: none; } } /* ------------------------------------------------------------ 22. HELPERS spacing (мини-tailwind для быстроты) ------------------------------------------------------------ */ .q-mt-0 { margin-top: 0; } .q-mt-1 { margin-top: 8px; } .q-mt-2 { margin-top: 16px; } .q-mt-3 { margin-top: 24px; } .q-mt-4 { margin-top: 32px; } .q-mt-5 { margin-top: 48px; } .q-mb-0 { margin-bottom: 0; } .q-mb-1 { margin-bottom: 8px; } .q-mb-2 { margin-bottom: 16px; } .q-mb-3 { margin-bottom: 24px; } .q-mb-4 { margin-bottom: 32px; } .q-mb-5 { margin-bottom: 48px; } .q-m-1 { margin: 8px; } .q-m-2 { margin: 16px; } .q-m-3 { margin: 24px; } .q-p-0 { padding: 0; } .q-p-1 { padding: 8px; } .q-p-2 { padding: 16px; } .q-p-3 { padding: 24px; } .q-p-4 { padding: 32px; } .q-justify-end { justify-content: flex-end; } .q-justify-start { justify-content: flex-start; } .q-between { justify-content: space-between; } .q-text-center { text-align: center; } .q-text-right { text-align: right; } .q-text-danger { color: var(--q-danger); } .q-text-success { color: var(--q-success); } .q-text-warning { color: var(--q-warning); } .q-text-muted { color: var(--q-text-mute); } .q-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .q-grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .q-grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .q-grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 900px) { .q-grid-cols-4 { grid-template-columns: repeat(2, 1fr); } .q-grid-cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .q-grid-cols-4, .q-grid-cols-3, .q-grid-cols-2 { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ 23. HERO / SECTION HEADS / CARD GRIDS ------------------------------------------------------------ */ .q-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 32px 36px; background: linear-gradient(135deg, var(--q-brand-soft) 0%, transparent 55%), var(--q-surface); border: 1px solid var(--q-border); border-radius: var(--q-r-card); position: relative; overflow: hidden; } .q-hero::before { content: ''; position: absolute; inset: auto -40px -60px auto; width: 240px; height: 240px; background: radial-gradient(circle, var(--q-accent-soft) 0%, transparent 70%); pointer-events: none; } .q-hero-eyebrow { color: var(--q-brand); font-family: var(--q-font-heading); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; } .q-hero-title { font-family: var(--q-font-display); font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--q-text); margin: 0 0 10px; line-height: 1.1; } .q-hero-sub { color: var(--q-text-sub); font-size: 1.02rem; margin: 0; max-width: 56ch; } .q-hero-illustration { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; } .q-hero-bubble { width: 120px; height: 120px; border-radius: 50%; background: var(--q-grad-hero); box-shadow: var(--q-sh-hard); border: 2px solid var(--q-text); display: grid; place-items: center; font-size: 3.4rem; } @media (max-width: 720px) { .q-hero { grid-template-columns: 1fr; padding: 26px 22px; gap: 18px; } .q-hero-illustration { display: none; } } .q-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .q-section-title { font-family: var(--q-font-display); font-size: 1.55rem; margin: 0; color: var(--q-text); display: flex; align-items: center; gap: 10px; } .q-section-title i { color: var(--q-brand); font-size: 1.35rem; } .q-section-sub { color: var(--q-text-mute); font-size: .95rem; margin: 4px 0 0; } .q-grid--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } /* ------------------------------------------------------------ 24. FORM EXTRAS: required mark, radio-pills, uploader, spinner ------------------------------------------------------------ */ .q-req { color: var(--q-danger); font-weight: 700; margin-left: 2px; } .q-spin { animation: q-spin 1s linear infinite; display: inline-block; } /* Pill-style radios (для выбора пола, категории и т.п.) */ .q-radio-pills { display: flex; gap: 12px; flex-wrap: wrap; } .q-radio-pill { flex: 1 1 160px; cursor: pointer; position: relative; } .q-radio-pill input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .q-radio-pill-box { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px; background: var(--q-surface-alt); border: 2px solid var(--q-border); border-radius: var(--q-r-card); font-family: var(--q-font-heading); font-weight: 700; color: var(--q-text); transition: all var(--q-d-fast); } .q-radio-pill-emoji { font-size: 1.8rem; line-height: 1; } .q-radio-pill:hover .q-radio-pill-box { border-color: var(--q-brand); background: var(--q-surface); } .q-radio-pill input:checked + .q-radio-pill-box { border-color: var(--q-brand); background: var(--q-brand-soft); color: var(--q-brand); box-shadow: 0 0 0 3px var(--q-brand-soft); } .q-radio-pill input:focus-visible + .q-radio-pill-box { outline: 2px solid var(--q-brand); outline-offset: 2px; } /* Сетка персонажей */ .q-characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; max-height: 340px; overflow-y: auto; padding: 6px; background: var(--q-surface-alt); border-radius: var(--q-r-card); } .q-char-loader { grid-column: 1 / -1; padding: 36px; text-align: center; color: var(--q-text-mute); font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 10px; } .q-char-loader i { font-size: 2rem; color: var(--q-brand); } .q-character-option { cursor: pointer; display: block; position: relative; } .q-character-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .q-character-card { --char-color: var(--q-brand); border: 2px solid var(--q-border); border-radius: 16px; padding: 10px 8px; text-align: center; transition: all var(--q-d-fast); background: var(--q-surface); } .q-character-card:hover { transform: translateY(-3px); border-color: var(--char-color); box-shadow: var(--q-sh-card-hov); } .q-character-option input:checked + .q-character-card { border-color: var(--char-color); background: color-mix(in srgb, var(--char-color) 8%, var(--q-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--char-color) 30%, transparent); transform: translateY(-3px); } .q-character-card img { width: 70px; height: 70px; object-fit: contain; margin: 0 auto 6px; display: block; } .q-character-card .q-char-name { font-size: .78rem; font-weight: 700; color: var(--q-text); line-height: 1.2; } /* Uploader (drag&drop зона) */ .q-uploader { border: 2px dashed var(--q-border-strong); border-radius: var(--q-r-card); padding: 28px 20px; text-align: center; cursor: pointer; transition: all var(--q-d-fast); background: var(--q-surface-alt); position: relative; } .q-uploader:hover, .q-uploader.is-dragover { border-color: var(--q-brand); background: var(--q-brand-soft); } .q-uploader-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; } .q-uploader-empty > i { font-size: 2.2rem; color: var(--q-brand); } .q-uploader-text { font-weight: 700; color: var(--q-text); } .q-uploader-hint { font-size: .85rem; color: var(--q-text-mute); } .q-uploader-preview { position: relative; display: inline-block; } .q-uploader-preview img { max-width: 160px; max-height: 160px; border-radius: var(--q-r-md); object-fit: cover; border: 1px solid var(--q-border); } .q-uploader-remove { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; background: var(--q-danger); color: #fff; border: 2px solid var(--q-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; transition: transform var(--q-d-fast); } .q-uploader-remove:hover { transform: scale(1.1); }