/* ============================================================ CCD PORTAL — Design System "Obsidian & Brass" — тёмный премиальный клубный стиль. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Rajdhani:wght@500;600;700&display=swap'); /* ---------- Tokens ---------- */ :root{ --bg: #0B0B0D; --bg-soft: #101012; --surface: #16151A; --surface-2: #1C1B21; --line: rgba(245,241,234,.09); --line-strong: rgba(245,241,234,.16); --text: #F3EEE4; --text-dim: #A9A296; --text-faint: #736C62; --accent: #CBA457; --accent-bright: #E4C275; --accent-deep: #8A6B2E; --accent-ink: #191308; --good: #7FAE8E; --bad: #C97A63; --info: #86A0B4; --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px -14px rgba(0,0,0,.6); --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -20px rgba(0,0,0,.7); --shadow-glow: 0 0 0 1px rgba(203,164,87,.25), 0 18px 40px -16px rgba(203,164,87,.28); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px; --ease-out: cubic-bezier(.16,.8,.24,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --dur-fast: .18s; --dur-med: .42s; --dur-slow: .8s; --container: 1180px; --font-display: 'Fraunces', ui-serif, Georgia, serif; --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; color-scheme: dark; } :root[data-theme="light"]{ --bg: #F6F1E7; --bg-soft: #EFE9DC; --surface: #FFFDF9; --surface-2: #FAF5EA; --line: rgba(28,24,16,.09); --line-strong: rgba(28,24,16,.16); --text: #201B12; --text-dim: #6B6255; --text-faint: #948B7C; --accent: #9A731F; --accent-bright: #7C5C15; --accent-deep: #6E5115; --accent-ink: #FBF3E1; --good: #3F7A57; --bad: #A8442E; --info: #3C6480; --shadow-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 26px -16px rgba(60,45,15,.28); --shadow-2: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 50px -20px rgba(60,45,15,.3); --shadow-glow: 0 0 0 1px rgba(154,115,31,.3), 0 18px 36px -18px rgba(154,115,31,.35); color-scheme: light; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]):not([data-theme="light"]){ --bg:#F6F1E7; --bg-soft:#EFE9DC; --surface:#FFFDF9; --surface-2:#FAF5EA; --line: rgba(28,24,16,.09); --line-strong: rgba(28,24,16,.16); --text:#201B12; --text-dim:#6B6255; --text-faint:#948B7C; --accent:#9A731F; --accent-bright:#7C5C15; --accent-deep:#6E5115; --accent-ink:#FBF3E1; --good:#3F7A57; --bad:#A8442E; --info:#3C6480; color-scheme: light; } } /* ---------- Тема раздела "GTA 5" — полностью другое оформление ---------- "Neon Los Santos": неоновый ночной город вместо латунного клуба. Переключается атрибутом [data-realm="gta5"] на , который страницы этого раздела проставляют инлайн-скриптом в (как и data-theme). */ :root[data-realm="gta5"]{ --bg: #0A0A14; --bg-soft: #0F0F1E; --surface: #15152A; --surface-2: #1C1C36; --line: rgba(34,211,238,.14); --line-strong: rgba(34,211,238,.26); --text: #ECEBFA; --text-dim: #9A97C4; --text-faint: #615E8C; --accent: #2E9BFF; --accent-bright: #6FC3FF; --accent-deep: #0B5FCC; --accent-ink: #001126; --good: #2FE6A8; --bad: #FF4757; --info: #22D3EE; --shadow-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -14px rgba(0,0,0,.7); --shadow-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -20px rgba(0,0,0,.8); --shadow-glow: 0 0 0 1px rgba(46,155,255,.3), 0 18px 40px -16px rgba(46,155,255,.35); --font-display: 'Rajdhani', ui-sans-serif, system-ui, sans-serif; color-scheme: dark; } :root[data-realm="gta5"][data-theme="light"]{ --bg: #F3F1FA; --bg-soft: #EAE6F7; --surface: #FFFFFF; --surface-2: #F5F2FC; --line: rgba(20,10,60,.1); --line-strong: rgba(20,10,60,.18); --text: #1A1030; --text-dim: #5C5480; --text-faint: #948CB0; --accent: #0B72D6; --accent-bright: #0B5FCC; --accent-deep: #084A9E; --accent-ink: #F0F8FF; --good: #0F9D72; --bad: #D6273D; --info: #0E7FA3; color-scheme: light; } :root[data-realm="gta5"] h1, :root[data-realm="gta5"] h2, :root[data-realm="gta5"] h3, :root[data-realm="gta5"] .display-1, :root[data-realm="gta5"] .display-2, :root[data-realm="gta5"] .display-3{ font-style: normal; text-transform: uppercase; letter-spacing: .02em; } :root[data-realm="gta5"] .brand-word, :root[data-realm="gta5"] .drawer-link, :root[data-realm="gta5"] .crest, :root[data-realm="gta5"] .num{ font-style: normal; } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); min-height: 100vh; display:flex; flex-direction:column; position: relative; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; } input,select,textarea{ font:inherit; color:inherit; } h1,h2,h3,h4{ font-family: var(--font-display); font-weight:500; margin:0; letter-spacing:-.01em; } p{ margin:0; } ::selection{ background: var(--accent); color: var(--accent-ink); } /* thin scrollbar */ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background: var(--bg); } ::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 8px; border:2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover{ background: var(--accent-deep); } /* film-grain texture overlay — subtle premium tactility */ .grain{ position: fixed; inset:0; pointer-events:none; z-index: 999; opacity:.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme="light"] .grain{ opacity:.05; } /* ambient background rails — sitewide fixed layer in the page margins (never covered by content), with a glowing marker that tracks scroll progress top-to-bottom */ .bg-scene{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; } .rail{ position:absolute; top:0; bottom:0; width:1px; background: linear-gradient(to bottom, transparent 0%, var(--line-strong) 14%, var(--line-strong) 86%, transparent 100%); opacity:.7; } .rail-left{ left: clamp(28px, calc(50vw - 614px), 420px); } .rail-right{ right: clamp(28px, calc(50vw - 614px), 420px); } .rail-tick{ position:absolute; left:50%; translate:-50% 0; width:7px; height:1px; background:var(--line-strong); } .rail-glow{ position:absolute; left:50%; translate:-50% 0; top:0; width:2px; height:130px; background: linear-gradient(to bottom, transparent, var(--accent) 32%, var(--accent-bright) 50%, var(--accent) 68%, transparent); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--accent) 60%, transparent); border-radius:99px; will-change:transform; } :root[data-theme="light"] .rail-glow{ box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 45%, transparent); } @media (max-width: 1150px){ .rail{ display:none; } } @media (prefers-reduced-motion: reduce){ .rail-glow{ transition:none; } } /* ---------- Layout ---------- */ .container{ max-width: var(--container); margin-inline:auto; padding-inline: 24px; } main{ flex:1 0 auto; } .section{ padding-block: 72px; } @media (max-width: 720px){ .section{ padding-block: 48px; } } .eyebrow{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display:inline-flex; align-items:center; gap:8px; } .eyebrow::before{ content:''; width:16px; height:1px; background: var(--accent); } .display-1{ font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.06; } .display-2{ font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.1; } .display-3{ font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.2; } .lede{ font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--text-dim); max-width: 60ch; } .mono{ font-family: var(--font-mono); } .text-dim{ color: var(--text-dim); } .text-faint{ color: var(--text-faint); } .text-accent{ color: var(--accent-bright); } /* reveal-on-scroll */ [data-reveal]{ opacity:0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-reveal].is-visible{ opacity:1; transform:none; } /* пока не решено, показывать ли реальный контент или заглушку GTA5 (CCD.checkGta5Gate) — атрибут ставится синхронно в head-скрипте страницы и снимается тем же вызовом сразу после того, как решение принято (успешно или нет), поэтому не может "залипнуть" */ html[data-gate-pending] main{ visibility:hidden; } /* ---------- Витрина каталога на главной — авто-ротация карточек (index.html) ---------- */ .showcase-frame{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; } .showcase-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .7s var(--ease-out); display:block; } .showcase-slide.is-active{ opacity:1; pointer-events:auto; } .showcase-slide img{ width:100%; height:100%; object-fit:cover; display:block; } .showcase-meta-frame{ position:relative; margin-top:16px; min-height:52px; } .showcase-meta{ position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease-out); display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .showcase-meta.is-active{ opacity:1; } .showcase-dots{ display:flex; gap:6px; justify-content:center; margin-top:18px; } .showcase-dot{ width:6px; height:6px; border-radius:50%; background:var(--line-strong); border:none; padding:0; cursor:pointer; transition:background .25s, transform .25s; } .showcase-dot.is-active{ background:var(--accent); transform:scale(1.5); } @media (prefers-reduced-motion: reduce){ .showcase-slide, .showcase-meta{ transition:none; } } /* ---------- Поле "загрузить картинку" (см. CCD.imageFieldHTML в main.js) ---------- */ .image-upload-preview{ width:96px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; } .image-upload-preview img{ width:100%; height:100%; object-fit:cover; } .image-upload-controls{ display:flex; align-items:center; gap:8px; margin-top:8px; } .image-upload-trigger{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; } /* ---------- Констелляция (фоновая канва, см. injectConstellationField в main.js) ---------- */ #constellation-field{ position:fixed; inset:0; z-index:-1; display:block; pointer-events:none; } /* ---------- Синусоидальные волны — фон каталога (injectSilkWaveField в main.js) ---------- */ #silk-wave-field{ position:fixed; inset:0; z-index:-1; display:block; pointer-events:none; } /* ---------- Фоны разделов "Работы"/"Системы"/"Гайды" (main.js) ---------- */ #rising-coins-field, #circuit-grid-field, #orbit-rings-field{ position:fixed; inset:0; z-index:-1; display:block; pointer-events:none; } /* ---------- Кастомный курсор (см. initCustomCursor в main.js) ---------- Точка следует мгновенно, кольцо — с инерцией через rAF-лёрп в JS. Центровка и позиция всегда пишутся ЦЕЛИКОМ через JS (translate(-50%,-50%) translate(Xpx,Ypx) scale(S) одной строкой) — CSS сюда transform не трогает, иначе оба источника поборются за один и тот же transform и собьют центровку. */ body.has-custom-cursor{ cursor:none; } body.has-custom-cursor input, body.has-custom-cursor textarea, body.has-custom-cursor select, body.has-custom-cursor [contenteditable]{ cursor:text; } @media (pointer:coarse){ body.has-custom-cursor{ cursor:auto; } } #cursor-dot, #cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; } #cursor-dot{ width:7px; height:7px; background:var(--accent-bright); transition:opacity .25s var(--ease-out), background-color .3s, transform .25s var(--ease-out); } #cursor-ring{ width:38px; height:38px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; transition:width .4s var(--ease-spring), height .4s var(--ease-spring), border-color .35s var(--ease-out), background-color .35s var(--ease-out), opacity .25s var(--ease-out); } #cursor-dot.is-hidden, #cursor-ring.is-hidden{ opacity:0; } /* наведение на ссылки/кнопки — кольцо растёт и инвертирует цвета под собой */ #cursor-ring.is-hover{ width:54px; height:54px; border-color:transparent; background:var(--accent-bright); mix-blend-mode:difference; } /* наведение на кликабельные карточки — кольцо чуть растёт */ #cursor-ring.is-card{ width:50px; height:50px; border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); } /* импульс сжатия при клике — масштаб дописывается к тому же transform в JS */ #cursor-ring.is-click{ filter:brightness(1.15); } @media (prefers-reduced-motion: reduce){ #cursor-dot, #cursor-ring{ transition:none; } } /* ---------- Buttons ---------- */ .btn{ position: relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: 13px 26px; border-radius: var(--radius-md); font-family: var(--font-body); font-weight:700; font-size: .92rem; letter-spacing:.01em; cursor:pointer; white-space:nowrap; transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out); will-change: transform; } .btn svg{ width:16px; height:16px; flex:none; } .btn::before{ content:''; position:absolute; inset:0; z-index:-1; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%); transform: translateX(-120%); transition: transform .7s var(--ease-out); } .btn:hover::before{ transform: translateX(120%); } .btn:active{ transform: scale(.96) translateY(1px) !important; } .btn-primary{ color: var(--accent-ink); background: linear-gradient(180deg, var(--accent-bright), var(--accent)); box-shadow: var(--shadow-1), 0 10px 24px -12px rgba(203,164,87,.5); } .btn-primary:hover{ box-shadow: var(--shadow-2), 0 16px 34px -12px rgba(203,164,87,.6); transform: translateY(-2px); } .btn-ghost{ color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); } .btn-ghost:hover{ border-color: var(--accent); color: var(--accent-bright); transform: translateY(-2px); box-shadow: var(--shadow-1); } .btn-quiet{ color: var(--text-dim); padding: 10px 16px; } .btn-quiet:hover{ color: var(--accent-bright); } .btn-sm{ padding: 9px 16px; font-size: .82rem; border-radius: var(--radius-sm); } .btn-icon{ width:42px; height:42px; padding:0; border-radius: var(--radius-md); display:inline-flex; align-items:center; justify-content:center; background: var(--surface); border:1px solid var(--line-strong); transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-med), color var(--dur-med); } .btn-icon:hover{ border-color: var(--accent); color: var(--accent-bright); transform: translateY(-2px) rotate(-4deg); } .btn-icon svg{ width:18px; height:18px; } .realm-toggle{ height:42px; padding:0 14px; border-radius: var(--radius-md); display:inline-flex; align-items:center; justify-content:center; background: var(--surface); border:1px solid var(--line-strong); font-family: var(--font-mono); font-weight:700; font-size:.76rem; letter-spacing:.03em; color: var(--text-dim); white-space:nowrap; transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-med), color var(--dur-med), background var(--dur-med); } .realm-toggle:hover{ border-color: var(--accent); color: var(--accent-bright); transform: translateY(-2px); } .realm-toggle.is-active{ background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: var(--accent); color: var(--accent-bright); } /* magnetic wrapper offset set via JS custom props */ .magnetic{ transform: translate(var(--mx,0), var(--my,0)); } /* ---------- Nav ---------- */ .nav{ position: sticky; top:0; z-index: 60; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; } .brand{ display:flex; align-items:center; gap:12px; } .brand-mark{ width:38px; height:38px; border-radius: 10px; flex:none; display:flex; align-items:center; justify-content:center; background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-strong); position:relative; overflow:hidden; } .brand-mark svg{ width:20px; height:20px; color: var(--accent); } .brand-word{ font-family: var(--font-display); font-style:italic; font-weight:500; font-size: 1.32rem; letter-spacing:-.01em; } .brand-word b{ font-style:normal; color: var(--accent-bright); font-weight:600; } .nav-links{ display:flex; align-items:center; gap:6px; } .nav-link{ position:relative; padding: 10px 16px; font-size:.92rem; font-weight:600; color: var(--text-dim); border-radius: var(--radius-sm); white-space:nowrap; transition: color var(--dur-fast) var(--ease-out); } .nav-link::after{ content:''; position:absolute; left:16px; right:16px; bottom:6px; height:1px; background: var(--accent); transform: scaleX(0); transform-origin:center; transition: transform var(--dur-med) var(--ease-out); } .nav-link:hover{ color: var(--text); } .nav-link:hover::after{ transform: scaleX(1); } .nav-link.is-active{ color: var(--accent-bright); } .nav-link.is-active::after{ transform: scaleX(1); } .nav-actions{ display:flex; align-items:center; gap:10px; } .nav-burger{ display:none; } @media (max-width: 900px){ .nav-links{ display:none; } .nav-burger{ display:inline-flex; } } /* mobile drawer */ .drawer-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); opacity:0; pointer-events:none; transition: opacity var(--dur-med) var(--ease-out); z-index:70; } .drawer{ position:fixed; top:0; right:0; bottom:0; width: min(340px, 84vw); z-index:71; background: var(--surface); border-left:1px solid var(--line-strong); transform: translateX(100%); transition: transform var(--dur-med) var(--ease-out); display:flex; flex-direction:column; padding: 22px; } body.drawer-open .drawer-backdrop{ opacity:1; pointer-events:auto; } body.drawer-open .drawer{ transform:none; } .drawer-links{ display:flex; flex-direction:column; margin-top: 24px; gap:2px; } .drawer-link{ padding: 15px 6px; font-family: var(--font-display); font-size:1.3rem; font-style:italic; border-bottom:1px solid var(--line); color: var(--text-dim); opacity:0; transform: translateX(14px); transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out), color var(--dur-fast); } body.drawer-open .drawer-link{ opacity:1; transform:none; } .drawer-link.is-active, .drawer-link:hover{ color: var(--accent-bright); } .drawer-close{ align-self:flex-end; } /* ---------- Cards ---------- */ .card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); transform: perspective(900px) rotateX(var(--ry,0)) rotateY(var(--rx,0)) translateY(0); will-change: transform; } .card-tilt:hover{ border-color: var(--line-strong); box-shadow: var(--shadow-2); } .card-link{ display:block; overflow:hidden; } .card-media{ position:relative; overflow:hidden; aspect-ratio: 16/10; background: var(--bg-soft); } .card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease-out); } .card-link:hover .card-media img{ transform: scale(1.07); } .card-body{ padding: 22px; } /* crest — monogram badge, replaces emoji icons */ .crest{ --crest-c: var(--accent); width:56px; height:56px; border-radius: 16px; flex:none; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-style:italic; font-weight:500; font-size:1.5rem; color: var(--crest-c); background: linear-gradient(160deg, color-mix(in srgb, var(--crest-c) 16%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--crest-c) 40%, var(--line)); position:relative; } .crest::after{ content:''; position:absolute; inset:3px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--crest-c) 22%, transparent); } .crest-sm{ width:44px; height:44px; border-radius:12px; font-size:1.2rem; } .crest svg{ width:23px; height:23px; color: var(--crest-c); position:relative; z-index:1; } .crest-sm svg{ width:19px; height:19px; } /* ---------- Liquid glass (stat tiles, elevated panels) ---------- */ .glass{ position:relative; overflow:hidden; background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 18px 40px -20px rgba(0,0,0,.55); border-radius: var(--radius-md); } .glass > *{ position:relative; z-index:1; } .glass::before, .glass::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; } .glass::before{ background: radial-gradient(120% 90% at 18% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%); } /* moving specular sheen: tints itself to the active --accent (brass in MTA, blue in GTA5, …) instead of a hardcoded color, so it never clashes with whichever realm/brand theme is on. Drifts along the edges/corners (idle), swaps to pointer-tracked mode on hover (JS adds .sheen-live). background-position keeps this animatable everywhere without relying on custom-property interpolation. */ .glass::after{ background-image: radial-gradient(380px 380px at 50% 50%, color-mix(in srgb, var(--accent-bright) 22%, transparent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 32%, transparent 68%); background-repeat: no-repeat; background-position: -15% -25%; opacity:.8; mix-blend-mode: screen; filter: blur(6px); animation: glassDrift 16s ease-in-out infinite alternate; transition: opacity var(--dur-med) var(--ease-out); } .glass:hover::after{ opacity:1; } .glass.sheen-live::after{ animation: none; background-position: var(--gx,50%) var(--gy,50%); } @keyframes glassDrift{ 0% { background-position: -15% -25%; } 33% { background-position: 112% -10%; } 66% { background-position: 105% 118%; } 100% { background-position: -10% 112%; } } /* .callout is defined further down the file with its own flat `background`, which would otherwise win the cascade over .glass (same specificity, later source order) when both classes are combined on one element. Bump specificity explicitly so glass always wins regardless of where either rule sits in the file. */ .card.glass, .callout.glass{ background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border-color: rgba(255,255,255,.09); } :root[data-theme="light"] .glass{ background: linear-gradient(160deg, rgba(255,255,255,.65), rgba(255,255,255,.28)); border-color: rgba(28,24,16,.08); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 36px -20px rgba(60,45,15,.22); } :root[data-theme="light"] .glass::before{ background: radial-gradient(120% 90% at 18% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%); } :root[data-theme="light"] .glass::after{ background-image: radial-gradient(380px 380px at 50% 50%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, color-mix(in srgb, var(--accent) 12%, transparent) 32%, transparent 68%); mix-blend-mode: multiply; opacity:.55; } :root[data-theme="light"] .glass:hover::after{ opacity:.75; } @media (prefers-reduced-motion: reduce){ .glass::after{ animation: none; } } /* edit-mode helpers: pencil FAB on cards, dynamic row remove button, section toggle */ .pencil-fab{ position:absolute; top:14px; left:14px; z-index:2; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); border:1px solid var(--line-strong); color: var(--accent-bright); transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast); } .pencil-fab:hover{ transform: scale(1.08) rotate(-4deg); border-color: var(--accent); } .pencil-fab svg{ width:16px; height:16px; } .copy-fab{ left:58px; cursor:pointer; } .copy-fab:hover{ transform: scale(1.08) rotate(4deg); border-color: var(--accent); } /* generic centered modal (copy-to picker, etc.) */ .modal-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); z-index:90; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition: opacity var(--dur-med) var(--ease-out); } .modal-backdrop.is-open{ opacity:1; pointer-events:auto; } .modal-panel{ width:min(440px, 100%); max-height:min(560px, 84vh); display:flex; flex-direction:column; background: var(--surface); border:1px solid var(--line-strong); border-radius: var(--radius-lg); padding:24px; overflow-y:auto; transform: translateY(10px) scale(.98); transition: transform var(--dur-med) var(--ease-out); } .modal-backdrop.is-open .modal-panel{ transform:none; } .modal-list{ flex:1; overflow-y:auto; margin-top:14px; display:flex; flex-direction:column; gap:4px; } .modal-list-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius: var(--radius-sm); cursor:pointer; transition: background var(--dur-fast); } .modal-list-item:hover{ background: var(--bg-soft, rgba(255,255,255,.04)); } .modal-list-item img{ width:44px; height:30px; object-fit:cover; border-radius:6px; flex:none; } .modal-list-empty{ padding:24px; text-align:center; color: var(--text-faint); font-size:.88rem; } .add-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px dashed var(--line-strong); border-radius: var(--radius-lg); min-height:220px; color: var(--text-faint); transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-spring); } .add-tile:hover{ border-color: var(--accent); color: var(--accent-bright); transform: translateY(-2px); } .add-tile .crest{ pointer-events:none; } .edit-row{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; } .edit-row .field{ flex:1; } .edit-row-remove{ flex:none; width:38px; height:38px; margin-top:26px; border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; background: var(--surface); border:1px solid var(--line-strong); color: var(--bad); transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring); } .edit-row-remove:hover{ border-color: var(--bad); transform: scale(1.05); } .edit-row-remove svg{ width:15px; height:15px; } .toggle-row{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; } .toggle-row input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--accent); cursor:pointer; } .badge{ display:inline-flex; align-items:center; gap:6px; padding: 6px 12px; border-radius: var(--radius-pill); font-size:.76rem; font-weight:700; letter-spacing:.02em; border:1px solid var(--line-strong); color: var(--text-dim); font-family: var(--font-mono); } .badge-accent{ color: var(--accent-ink); background: var(--accent); border-color: transparent; } .badge-outline-accent{ color: var(--accent-bright); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); } .badge-good{ color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line-strong)); } .badge-bad{ color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line-strong)); } /* ---------- Forms ---------- */ .field{ display:flex; flex-direction:column; gap:8px; } .field label{ font-size:.8rem; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:.06em; } .input, .select{ width:100%; display:block; background: var(--surface); border:1px solid var(--line-strong); color: var(--text); border-radius: var(--radius-sm); padding: 12px 16px; font-size:.95rem; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .input::placeholder{ color: var(--text-faint); } .input:focus, .select:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .select{ appearance:none; -webkit-appearance:none; background-image: none; padding-right: 40px; cursor:pointer; } .search-shell{ position:relative; } .search-shell svg{ position:absolute; left:18px; top:50%; translate:0 -50%; width:18px; height:18px; color: var(--text-faint); pointer-events:none; } .search-shell .input{ padding-left: 48px; } /* ---------- Живой поиск по всей базе (главная — CCD.initSiteSearch в main.js) ---------- */ .search-results{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30; background: var(--surface); border:1px solid var(--line-strong); border-radius: var(--radius-md); overflow:hidden; box-shadow: 0 16px 40px rgba(0,0,0,.35); display:none; } .search-results.is-open{ display:block; } .search-result-item{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; text-decoration:none; color:var(--text); border-bottom:1px solid var(--line); transition: background .15s var(--ease-out); } .search-result-item:last-child{ border-bottom:none; } .search-result-item:hover, .search-result-item.is-focused{ background: var(--surface-2); } .search-result-title{ font-weight:600; font-size:.92rem; } .search-result-type{ font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); white-space:nowrap; } .search-results-empty{ padding:14px 16px; font-size:.85rem; color:var(--text-faint); } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- Table (ledger) ---------- */ .ledger{ width:100%; border-collapse: collapse; font-size:.88rem; } .ledger th{ text-align:left; padding: 12px 16px; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--text-faint); font-weight:500; border-bottom: 1px solid var(--line-strong); } .ledger td{ padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text-dim); } .ledger tr:last-child td{ border-bottom:none; } .ledger tr:hover td{ background: var(--surface-2); color: var(--text); } .ledger .money{ font-family: var(--font-mono); color: var(--accent-bright); font-weight:600; } .ledger-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .ledger-wrap .ledger{ min-width: 480px; } /* ---------- Фото-блок в конструкторе контента (jobs/systems/guides) ---------- Сетка сама подбирает число колонок под количество фото: одно фото — во всю ширину, несколько — переносятся по auto-fit/minmax без ручных брейкпоинтов. */ .block-gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:24px; } .block-gallery figure{ margin:0; } .block-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius: var(--radius-md); border:1px solid var(--line); } .block-gallery figcaption{ margin-top:10px; font-size:.86rem; color: var(--text-dim); font-style:italic; text-align:center; } /* ---------- Footer ---------- */ .site-footer{ border-top:1px solid var(--line); margin-top:auto; background: var(--bg-soft); } .footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:48px; padding-block: 56px 32px; } .footer-col h4{ font-family: var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color: var(--text-faint); margin-bottom:16px; font-weight:600; } .footer-links{ display:flex; flex-direction:column; gap:10px; } .footer-links a{ color: var(--text-dim); font-size:.92rem; transition: color var(--dur-fast) var(--ease-out); display:inline-flex; align-items:center; gap:8px; } .footer-links a:hover{ color: var(--accent-bright); } .footer-bottom{ border-top:1px solid var(--line); padding-block:20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:.82rem; color: var(--text-faint); } @media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr; gap:32px; } } /* ---------- Misc components ---------- */ .divider{ height:1px; background: var(--line); border:none; margin: 0; } .callout{ border-radius: var(--radius-md); padding: 20px; border:1px solid var(--line-strong); background: var(--surface); } .callout-accent{ border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .callout-bad{ border-color: color-mix(in srgb, var(--bad) 40%, var(--line-strong)); background: color-mix(in srgb, var(--bad) 7%, var(--surface)); } .callout-good{ border-color: color-mix(in srgb, var(--good) 40%, var(--line-strong)); background: color-mix(in srgb, var(--good) 7%, var(--surface)); } .callout-info{ border-color: color-mix(in srgb, var(--info) 40%, var(--line-strong)); background: color-mix(in srgb, var(--info) 7%, var(--surface)); } /* arbitrary-accent variant: set --c inline, e.g. style="--c:#9C8ADE" */ .callout-tint{ border-color: color-mix(in srgb, var(--c,var(--accent)) 40%, var(--line-strong)); background: color-mix(in srgb, var(--c,var(--accent)) 8%, var(--surface)); } .callout-tint .callout-title{ color: color-mix(in srgb, var(--c,var(--accent)) 70%, var(--text)); } .callout-icon{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; background: color-mix(in srgb, var(--c,var(--accent)) 18%, transparent); color: var(--c,var(--accent)); } .callout-icon svg{ width:17px; height:17px; } /* ledger zebra rows */ .ledger tr:nth-child(even) td{ background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .ledger tr:first-child th{ background: var(--surface-2); } .grid{ display:grid; gap:20px; } .grid-2{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(3,1fr); } .grid-4{ grid-template-columns: repeat(4,1fr); } @media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } } .stat{ text-align:left; } .num{ font-family: var(--font-display); font-style: italic; font-weight:500; font-size: clamp(2.3rem, 3.6vw, 3.1rem); line-height:1; letter-spacing:-.01em; color: var(--accent-bright); text-shadow: 0 0 36px color-mix(in srgb, var(--accent) 35%, transparent); } .label{ display:flex; align-items:center; gap:9px; margin-top:14px; font-family: var(--font-mono); font-size:.74rem; font-weight:500; text-transform:uppercase; letter-spacing:.09em; color: var(--text-dim); } .label::before{ content:''; width:14px; height:1px; background: var(--accent); flex:none; } .skeleton-page{ min-height: 40vh; } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: 32px; flex-wrap:wrap; } .pill-tabs{ display:flex; gap:8px; flex-wrap:wrap; } .pill-tab{ padding:9px 16px; border-radius: var(--radius-pill); font-size:.84rem; font-weight:600; color: var(--text-dim); border:1px solid var(--line-strong); transition: all var(--dur-fast) var(--ease-out); } .pill-tab:hover{ color:var(--text); border-color: var(--line-strong); } .pill-tab.is-active{ color: var(--accent-ink); background: var(--accent); border-color: transparent; } .hairline-box{ border:1px solid var(--line); border-radius: var(--radius-md); } /* handling/settings code block (car "Настройки" section) */ .code-block{ position:relative; font-family: var(--font-mono); font-size:.85rem; line-height:1.6; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-md); padding:16px 50px 16px 16px; white-space:pre-wrap; word-break:break-all; color: var(--text); } .code-block-copy{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; color: var(--text-faint); border:1px solid var(--line-strong); background: var(--surface); cursor:pointer; transition: color var(--dur-fast), border-color var(--dur-fast); } .code-block-copy:hover{ color: var(--accent-bright); border-color: var(--accent); } .code-block-copy.is-copied{ color: var(--good); border-color: var(--good); } .code-block-copy svg{ width:15px; height:15px; } /* star ratings (view) + star picker (input) */ .rating-stars{ display:inline-flex; gap:2px; } .rating-stars svg{ color: var(--line-strong); } .rating-stars svg.is-filled{ color: var(--accent); } .rating-stars svg.is-filled path{ fill: currentColor; } .star-picker{ display:flex; gap:6px; } .star-picker-btn{ background:none; border:none; padding:2px; cursor:pointer; color: var(--line-strong); transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-spring); } .star-picker-btn svg{ width:28px; height:28px; display:block; } .star-picker-btn.is-active{ color: var(--accent); transform: scale(1.08); } .star-picker-btn.is-active svg path{ fill: currentColor; } /* hero backdrop ornament — flowing gold ribbon lines, morph continuously via SMIL */ .hero-ribbons{ position:absolute; inset:-60px -8% auto -8%; height:640px; pointer-events:none; z-index:0; opacity:.85; } .hero-ribbons svg{ width:100%; height:100%; display:block; } :root[data-theme="light"] .hero-ribbons{ opacity:.5; } @media (max-width: 900px){ .hero-ribbons{ height:420px; top:-20px; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; } }