:root { /* Premium Linear-dark glassmorphism: deep base, single indigo accent, hairline borders, restrained motion. No pure black. */ --bg-deep: #050509; --bg-base: #0a0a12; --bg-elevated: #0e0e1a; --glass: rgba(255, 255, 255, 0.045); --glass-strong: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.09); --glass-border-strong: rgba(255, 255, 255, 0.16); --text: #ededf2; --muted: #9a9fb0; --faint: #6b7080; --accent: #6e79e6; --accent-2: #8b95f0; --accent-glow: rgba(110, 121, 230, 0.22); --focus-ring: rgba(110, 121, 230, 0.45); --ok: #3ddc97; --warn: #f5c451; --bad: #f0788a; /* spacing scale (8px rhythm) */ --s-1: 6px; --s-2: 10px; --s-3: 16px; --s-4: 24px; --s-5: 36px; --s-6: 56px; --radius: 16px; --radius-sm: 12px; --radius-lg: 22px; --shadow: 0 12px 40px rgba(0, 0, 0, 0.5); --ease: cubic-bezier(0.16, 1, 0.3, 1); font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } /* Background on too: prevents a white root-canvas flash between page loads (Firefox/Safari paint the root before body styles apply). */ html { background: var(--bg-deep); } body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg-base); font-family: inherit; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Ambient depth: one calm indigo glow, top gradient — no busy blobs. */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(60% 50% at 78% -5%, rgba(110,121,230,0.14), transparent 70%), radial-gradient(50% 40% at 10% 105%, rgba(139,149,240,0.08), transparent 70%), linear-gradient(180deg, var(--bg-deep), var(--bg-base) 45%, var(--bg-deep)); z-index: -1; pointer-events: none; } /* Skip link + screen-reader-only utility */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; } .skip-link:focus { left: 16px; top: 16px; padding: 10px 18px; background: var(--accent); color: #fff; border-radius: 10px; font-weight: 600; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } a { color: var(--accent-2); text-decoration: none; transition: color 150ms var(--ease), opacity 150ms var(--ease); } a:hover { text-decoration: underline; } .glass { position: relative; background: var(--glass); backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); } /* subtle top-edge sheen — the tell of real glass, done once, globally */ .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding-top: 1px; background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .container { max-width: 1140px; margin: 0 auto; padding: var(--s-4); } /* Smooth cross-page navigation (Chrome/Edge support this MPA API; other browsers just navigate normally). The nav stays put; only the main content cross-fades + lifts between pages. */ @view-transition { navigation: auto; } /* keep the sticky nav from sliding — it's shared across pages */ .nav { view-transition-name: app-nav; } ::view-transition-group(app-nav) { animation-duration: 0s; } ::view-transition-old(root) { animation: vt-out 200ms var(--ease) both; } ::view-transition-new(root) { animation: vt-in 320ms var(--ease) both; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* fallback fade-in for browsers WITHOUT view transitions (Firefox/Safari) */ @supports not (view-transition-name: none) { main.container { animation: page-in 320ms var(--ease) both; } @keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } } /* --- Navbar --- */ .nav { position: sticky; top: 12px; z-index: 50; display: flex; align-items: center; gap: var(--s-4); padding: 10px 16px; margin: 16px auto; max-width: 1140px; } .nav .brand { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; text-transform: uppercase; color: #fff; } .nav .brand span { color: var(--accent-2); } .nav .links { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; } .nav .links a { color: var(--muted); padding: 8px 13px; border-radius: 10px; font-size: .9rem; font-weight: 500; transition: background 200ms var(--ease), color 200ms var(--ease); } .nav .links a:hover { background: var(--glass-strong); color: var(--text); text-decoration: none; } .nav .links a.active { color: var(--text); background: var(--glass-strong); } .nav .links a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .nav .user { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); } .nav .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--glass-border); } /* --- Layout helpers --- */ .grid { display: grid; gap: var(--s-4); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .nav { flex-wrap: wrap; } } @media (max-width: 768px) { .container { padding: 16px; } .nav { padding: 10px 16px; gap: 10px; } } @media (max-width: 540px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .hero h1 { font-size: 1.9rem; } .stat .value { font-size: 1.6rem; } h1 { font-size: 1.45rem; } } .card { padding: var(--s-4); } h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.25; } h2 { font-size: 1.2rem; font-weight: 600; line-height: 1.3; } h3 { font-size: 1.02rem; font-weight: 600; line-height: 1.35; } h1, h2, h3, h4 { margin-top: 0; letter-spacing: -.02em; } .card h1, .card h2, .card h3 { margin-top: 0; } .muted { color: var(--muted); } .center { text-align: center; } /* --- Stat tiles --- */ .stat { padding: var(--s-4); } .stat .label { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; } .stat .value { font-size: 1.9rem; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; } .stat .sub { color: var(--muted); font-size: .82rem; } .value.ok { color: var(--ok); } .value.warn { color: var(--warn); } .value.bad { color: var(--bad); } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; min-height: 44px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--text); cursor: pointer; font-size: .92rem; font-weight: 600; text-decoration: none; transition: background 150ms var(--ease), transform 120ms var(--ease), box-shadow 150ms var(--ease); } .btn:hover { transform: translateY(-1px); text-decoration: none; background: var(--glass-strong); border-color: var(--glass-border-strong); } .btn:active { transform: translateY(0); transition-duration: 60ms; } .btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; } .btn.primary { background: var(--accent); border: 1px solid transparent; color: #fff; box-shadow: 0 6px 20px var(--accent-glow); } .btn.primary:hover { background: var(--accent-2); box-shadow: 0 8px 26px var(--accent-glow); } .btn.danger { background: rgba(240,120,138,.14); border-color: rgba(240,120,138,.4); color: #ffc4cc; } .btn.sm { padding: 9px 14px; min-height: 40px; font-size: .84rem; } .btn.block { width: 100%; justify-content: center; } /* --- Forms --- */ label { display: block; font-size: .88rem; margin: 12px 0 6px; color: var(--muted); } input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(0,0,0,.22); color: var(--text); font-size: .95rem; font-family: inherit; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--focus-ring); } input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent-2); min-width: 18px; min-height: 18px; } input[type=file] { width: 100%; padding: 9px 0; background: transparent; border: none; border-bottom: 1px solid var(--glass-border); color: var(--muted); font-family: inherit; font-size: .92rem; } input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: 10px; cursor: pointer; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--text); font-family: inherit; } select option { color: #111; } /* --- Tables --- */ table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); } th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .75rem; letter-spacing: .5px; } td { transition: background 150ms var(--ease); } tr:hover td { background: rgba(255,255,255,.04); } .table-wrap { overflow-x: auto; } /* --- Badges --- */ .badge { display: inline-block; align-self: flex-start; width: fit-content; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; background: var(--glass-strong); color: var(--muted); } /* Badge sitting inline after a heading/text — keep it off the words. */ h1 > .badge, h2 > .badge, h3 > .badge { margin-left: var(--s-2); vertical-align: middle; } /* Name + badge on one row: let the name take space, badge stays put. */ .title-row { display: flex; align-items: baseline; gap: var(--s-3); } .title-row > :first-child { flex: 1; min-width: 0; } /* name + badge on one row: name wraps/flexes, badge pinned top-right */ .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); } .title-row > .badge { margin-top: 3px; } .badge.ok { background: rgba(52,224,161,.18); color: var(--ok); } .badge.warn { background: rgba(255,207,92,.18); color: var(--warn); } .badge.bad { background: rgba(255,107,129,.18); color: var(--bad); } .badge.info { background: rgba(56,214,255,.18); color: var(--accent-2); } /* Equal-height cards with the CTA pinned to the bottom of each cell. The .push-end block absorbs free space; everything after it (the CTA) is pushed to the card bottom, aligning CTAs across the whole row. */ .grid > .card-fill { display: flex; flex-direction: column; } .card-fill > .push-end { margin-top: auto; padding-top: var(--s-3); } /* --- Messages --- */ .messages { margin-bottom: 18px; display: grid; gap: 10px; } .msg { padding: 12px 16px; border-radius: 12px; border-left: 3px solid; } .msg.success { background: rgba(52,224,161,.12); border-color: var(--ok); } .msg.info { background: rgba(56,214,255,.12); border-color: var(--accent-2); } .msg.warning { background: rgba(255,207,92,.12); border-color: var(--warn); } .msg.error { background: rgba(255,107,129,.12); border-color: var(--bad); } /* --- Layout utilities (replace scattered inline styles) --- */ .flex { display: flex; gap: 12px; align-items: center; } .between { justify-content: space-between; } .center-x { justify-content: center; } .wrap { flex-wrap: wrap; } .col { display: flex; flex-direction: column; } .flex-1 { flex: 1; } .gap-sm { gap: var(--s-2); } .mt { margin-top: var(--s-3); } .mb { margin-bottom: var(--s-3); } .mt-lg { margin-top: var(--s-5); } .stack > * + * { margin-top: var(--s-3); } /* consistent vertical rhythm */ .narrow { max-width: 640px; } .narrow-sm { max-width: 560px; } .narrow-wide { max-width: 840px; } /* list row inside a card: hairline divider + even padding */ .row-sep { border-bottom: 1px solid var(--glass-border); padding: var(--s-3) 0; } .row-sep:last-child { border-bottom: none; } .text-sm { font-size: .85rem; } .form-hint { font-size: .85rem; color: var(--muted); margin: 4px 0 12px; } .items-end { align-items: flex-end; } .mx-auto { margin-left: auto; margin-right: auto; } .accent { color: var(--accent-2); } .text-bad { color: var(--bad); } .col-full { grid-column: 1 / -1; } /* Admin banner upload cell + user-facing offer banner image */ .banner-cell { display: flex; flex-direction: column; gap: 6px; min-width: 160px; } .banner-thumb { display: block; width: 100%; max-width: 140px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--glass-border); } .banner-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .banner-form input[type="file"] { max-width: 140px; font-size: .78rem; } .card-banner { width: 100%; max-height: 140px; object-fit: cover; border-radius: 12px; margin-bottom: var(--s-3); } .detail-banner { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; margin: var(--s-3) 0; } .pill-link { font-family: ui-monospace, "SF Mono", monospace; font-size: .82rem; background: rgba(0,0,0,.28); padding: 10px 12px; border-radius: var(--radius-sm); overflow-wrap: anywhere; word-break: break-word; display: block; border: 1px solid var(--glass-border); } td .value, td.value { font-variant-numeric: tabular-nums; } .hero { text-align: center; padding: var(--s-6) var(--s-4) var(--s-5); } .hero h1 { font-size: 2.6rem; margin-bottom: var(--s-2); letter-spacing: -.02em; color: #fff; } .hero h1 .accent { color: var(--muted); } .hero .lead { color: var(--muted); font-size: 1.05rem; } .copy-btn { cursor: pointer; } .empty { text-align: center; padding: var(--s-5); color: var(--muted); } /* highlight a freshly created row */ .row-new { animation: rowflash 2.5s ease-out; } @keyframes rowflash { 0% { background: var(--focus-ring); } 100% { background: transparent; } } /* onboarding steps */ .steps { display: grid; gap: 12px; counter-reset: step; } .steps .step { display: flex; gap: 12px; align-items: flex-start; } .steps .step::before { counter-increment: step; content: counter(step); flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; } /* Бизнес системы: breadcrumb + selectable tiles + offer radio-cards */ /* Admin catalog tab bar */ .tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); border-bottom: 1px solid var(--glass-border); padding-bottom: var(--s-2); } .tabs .tab { display: inline-flex; align-items: center; gap: var(--s-2); padding: 9px 14px; border-radius: var(--radius-sm); color: var(--muted); font-size: .9rem; font-weight: 500; text-decoration: none; transition: background 200ms var(--ease), color 200ms var(--ease); } .tabs .tab:hover { background: var(--glass-strong); color: var(--text); text-decoration: none; } .tabs .tab.active { background: var(--glass-strong); color: var(--text); } .tabs .tab.active .badge { background: var(--accent); color: #fff; } .tabs .tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } /* button mid-request */ .btn.is-busy { opacity: .6; cursor: progress; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); } .breadcrumb a { color: var(--accent-2); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--text); } a.bs-tile { display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; color: inherit; transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease); } a.bs-tile:hover { transform: translateY(-3px); border-color: var(--glass-border-strong); box-shadow: 0 16px 48px rgba(0,0,0,.55); } a.bs-tile h2 { margin: 0; } a.bs-tile p { margin: 0; } /* the badge above the heading needs clear separation */ a.bs-tile > .badge { margin-bottom: var(--s-2); } a.bs-tile .bs-tile-go { margin-top: auto; padding-top: var(--s-3); color: var(--accent-2); font-weight: 600; } a.bs-tile-hero { background: radial-gradient(120% 100% at 100% 0%, var(--accent-glow), transparent 60%), var(--glass); border-color: rgba(110,121,230,0.3); } .bs-instructions-photo { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; } .bs-instructions h2 { margin-bottom: var(--s-2); } .bs-offers { border: none; padding: 0; margin: 0 0 6px; } .bs-offers legend { padding: 0; font-weight: 600; margin-bottom: 8px; } .radio-card { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(0,0,0,.22); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease); } .radio-card:hover { border-color: var(--accent-2); } .radio-card:has(input:checked) { border-color: var(--accent-2); box-shadow: 0 0 0 2px var(--focus-ring); } .radio-card input { width: auto; margin: 0; } .radio-card:focus-within { border-color: var(--accent-2); } /* dismissible message close button */ .msg { position: relative; } .msg .close { position: absolute; right: 8px; top: 6px; cursor: pointer; background: none; border: none; color: var(--muted); font-size: 1.1rem; min-height: 28px; min-width: 28px; padding: 4px 8px; border-radius: 8px; transition: color 150ms var(--ease), background 150ms var(--ease); } .msg .close:hover { color: var(--text); background: var(--glass-strong); } .msg .close:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } /* Collapse wide tables into cards on small screens */ @media (max-width: 640px) { .table-cards thead { display: none; } .table-cards tr { display: block; margin-bottom: 12px; padding: 12px 14px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); border-radius: 12px; } .table-cards td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border: none; text-align: right; } .table-cards td::before { content: attr(data-label); color: var(--muted); font-size: .78rem; text-align: left; font-weight: 600; } } /* --- Учёт заявок (admin): per-user collapsible blocks --- */ .apps-list { display: flex; flex-direction: column; gap: var(--s-3); } .app-user-block { overflow: hidden; border-radius: var(--radius); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); } .app-user-block[open] { border-color: var(--glass-border-strong); box-shadow: 0 16px 44px rgba(0,0,0,.4); } .app-user-block > summary { cursor: pointer; list-style: none; padding: var(--s-3) var(--s-4); display: flex; align-items: center; gap: var(--s-3); transition: background 150ms var(--ease); } .app-user-block > summary::-webkit-details-marker { display: none; } .app-user-block > summary:hover { background: var(--glass-strong); } .app-user-block[open] > summary { border-bottom: 1px solid var(--glass-border); } .app-chevron { flex-shrink: 0; color: var(--muted); font-size: 1.2rem; font-weight: 700; transition: transform 200ms var(--ease); width: 14px; text-align: center; } .app-user-block[open] .app-chevron { transform: rotate(90deg); color: var(--accent-2); } .avatar-badge { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 1.05rem; box-shadow: 0 4px 14px var(--accent-glow); } .app-user-meta { flex: 1; min-width: 0; } .app-user-meta .name { font-weight: 650; font-size: 1rem; } .app-user-meta .sub { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .8rem; margin-top: 3px; } .app-count-badge { flex-shrink: 0; } .app-table-wrap { padding: 0 var(--s-4) var(--s-4); animation: app-block-in 220ms var(--ease) both; } @keyframes app-block-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } body::before, body::after { display: none; } .btn:hover { transform: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }