/* ===================================================================== aichat.com.ua — Theme v3 "Signal" A premium, minimal AI-tech publication design system. Namespaced under .theme-v3 — safe alongside v1 / v2. Fonts: Space Grotesk (display) · Inter (body/UI) · JetBrains Mono (meta) ===================================================================== */ /* --------------------------------------------------------------------- 1. DESIGN TOKENS ------------------------------------------------------------------- */ .theme-v3 { /* Surfaces */ --bg: #fbfbfd; --surface: #ffffff; --surface-2: #f4f5f8; --surface-3: #ecedf2; --surface-inv: #0b0c10; /* Ink / text */ --ink: #0b0c10; --ink-2: #383b44; --ink-3: #676b76; --ink-4: #9a9da8; --ink-inv: #f4f5f8; /* Lines */ --line: #e6e8ef; --line-2: #eef0f4; --line-strong: #d5d8e1; /* Brand — signal green */ --accent: #228e5d; --accent-hover: #1c7a4f; --accent-ink: #ffffff; --accent-soft: #e4f3ec; --accent-line: #c2e4d3; /* Category / type hues */ --c-article: #228e5d; /* green */ --c-test: #10b981; /* emerald*/ --c-poll: #f59e0b; /* amber */ --c-question: #06b6d4;/* cyan */ --c-rose: #f43f5e; --success: #10b981; --danger: #ef4444; /* Radii — плаский стиль без заокруглень (кола на 50% лишаються колами) */ --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-full: 0; /* Elevation — soft, cool */ --shadow-xs: 0 1px 2px rgba(16, 18, 32, .05); --shadow-sm: 0 1px 3px rgba(16, 18, 32, .07), 0 1px 2px rgba(16, 18, 32, .04); --shadow-md: 0 12px 28px -14px rgba(16, 18, 32, .22), 0 3px 8px -4px rgba(16, 18, 32, .08); --shadow-lg: 0 28px 56px -22px rgba(16, 18, 32, .32); --ring: 0 0 0 3px rgba(34, 142, 93, .30); /* Typography */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* Layout */ --maxw: 1440px; --gutter: 24px; --header-h: 68px; /* Motion */ --ease: cubic-bezier(.22, .61, .36, 1); --dur: .18s; /* Glass header */ --header-bg: rgba(251, 251, 253, .78); } .theme-v3.darkTheme { --bg: #0a0b0f; --surface: #101219; --surface-2: #161923; --surface-3: #1e2230; --surface-inv: #f4f5f8; --ink: #f4f5f8; --ink-2: #c6c9d4; --ink-3: #9297a4; --ink-4: #626673; --ink-inv: #0b0c10; --line: #21242f; --line-2: #1a1d26; --line-strong: #2c303c; --accent: #34b37c; --accent-hover: #45c48d; --accent-ink: #ffffff; --accent-soft: rgba(52, 179, 124, .15); --accent-line: rgba(52, 179, 124, .34); --c-article: #45c48d; --c-test: #2dd4a7; --c-poll: #fbbf24; --c-question: #22d3ee; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30); --shadow-md: 0 14px 34px -16px rgba(0, 0, 0, .70), 0 4px 10px -4px rgba(0, 0, 0, .45); --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, .8); --ring: 0 0 0 3px rgba(52, 179, 124, .40); --header-bg: rgba(10, 11, 15, .72); } /* --------------------------------------------------------------------- 2. BASE (scoped) ------------------------------------------------------------------- */ .theme-v3 { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .25s var(--ease), color .25s var(--ease); } .theme-v3 * , .theme-v3 *::before, .theme-v3 *::after { box-sizing: border-box; } .theme-v3 a { color: inherit; text-decoration: none; } .theme-v3 img { max-width: 100%; height: auto; display: block; } .theme-v3 h1, .theme-v3 h2, .theme-v3 h3, .theme-v3 h4, .theme-v3 h5 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin: 0; color: var(--ink); } .theme-v3 p { margin: 0; } .theme-v3 button { font-family: inherit; cursor: pointer; } .theme-v3 :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); } .theme-v3 ::selection { background: var(--accent-soft); color: var(--ink); } /* --------------------------------------------------------------------- 3. LAYOUT PRIMITIVES ------------------------------------------------------------------- */ .theme-v3 .v3-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .theme-v3 .v3-shell { padding: 40px 0 72px; } .theme-v3 .v3-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; } .theme-v3 .v3-main { min-width: 0; } .theme-v3 .v3-section { margin-top: 56px; } .theme-v3 .v3-section:first-child { margin-top: 0; } .theme-v3 .v3-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .theme-v3 .v3-sec-head h2 { font-size: 26px; } .theme-v3 .v3-sec-head h2 em { font-style: normal; color: var(--accent); } .theme-v3 .v3-sec-more { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-full); transition: all var(--dur) var(--ease); white-space: nowrap; } .theme-v3 .v3-sec-more:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .theme-v3 .v3-sec-more svg { width: 14px; height: 14px; } /* Kicker (mono eyebrow) */ .theme-v3 .v3-kicker { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; } .theme-v3 .v3-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* --------------------------------------------------------------------- 4. BUTTONS ------------------------------------------------------------------- */ .theme-v3 .v3-btn { --_bg: var(--accent); --_fg: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1; padding: 12px 18px; border: 1px solid transparent; border-radius: var(--r-full); background: var(--_bg); color: var(--_fg); cursor: pointer; white-space: nowrap; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-v3 .v3-btn svg { width: 16px; height: 16px; } .theme-v3 .v3-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(34, 142, 93, .5); } .theme-v3 .v3-btn:active { transform: translateY(0); } .theme-v3 .v3-btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); box-shadow: none; } .theme-v3 .v3-btn--ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); box-shadow: none; } .theme-v3 .v3-btn--subtle { background: var(--surface-2); color: var(--ink); box-shadow: none; } .theme-v3 .v3-btn--subtle:hover { background: var(--surface-3); transform: translateY(-1px); box-shadow: none; } .theme-v3 .v3-btn--sm { padding: 9px 14px; font-size: 13px; } .theme-v3 .v3-btn--block { width: 100%; } .theme-v3 .v3-icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); transition: all var(--dur) var(--ease); } .theme-v3 .v3-icon-btn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .theme-v3 .v3-icon-btn svg { width: 18px; height: 18px; } /* --------------------------------------------------------------------- 5. TYPE TAG / CHIP ------------------------------------------------------------------- */ .theme-v3 .v3-type { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); backdrop-filter: blur(6px); } .theme-v3 .v3-type .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .theme-v3 .v3-type.t-article { color: var(--c-article); } .theme-v3 .v3-type.t-test { color: var(--c-test); } .theme-v3 .v3-type.t-poll { color: var(--c-poll); } .theme-v3 .v3-type.t-question { color: var(--c-question); } .theme-v3 .v3-chip { font-size: 12.5px; font-weight: 500; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; } .theme-v3 .v3-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); display: inline-block; } .theme-v3 .v3-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; background-size: cover; background-position: center; flex-shrink: 0; } .theme-v3 .v3-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); } .theme-v3 .v3-meta b { color: var(--ink-2); font-weight: 600; } .theme-v3 .v3-stat { display: inline-flex; align-items: center; gap: 5px; } .theme-v3 .v3-stat svg { width: 14px; height: 14px; opacity: .8; } /* --------------------------------------------------------------------- 6. HEADER ------------------------------------------------------------------- */ .theme-v3 .v3-hdr { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); } .theme-v3 .v3-hdr-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; gap: 18px; } .theme-v3 .v3-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .theme-v3 .v3-brand-mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #34b37c); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px; box-shadow: 0 4px 12px -4px rgba(34, 142, 93, .5); } .theme-v3 .v3-brand-txt { display: flex; flex-direction: column; line-height: 1.05; } .theme-v3 .v3-brand-txt b { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.02em; } .theme-v3 .v3-brand-txt small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; } /* Restored brand logo (chat-ai.fun) */ .theme-v3 .v3-logo { height: 30px; width: auto; display: block; } .theme-v3 .v3-logo-dark { display: none; } .theme-v3.darkTheme .v3-logo-light { display: none; } .theme-v3.darkTheme .v3-logo-dark { display: block; } .theme-v3 .v3-ft-brand .v3-logo { height: 34px; } .theme-v3 .v3-nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; } .theme-v3 .v3-nav a { font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 8px 13px; border-radius: var(--r-sm); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .theme-v3 .v3-nav a:hover { color: var(--ink); background: var(--surface-2); } .theme-v3 .v3-nav a.is-active { color: var(--accent); } .theme-v3 .v3-search { flex: 1; max-width: 340px; margin-left: auto; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .theme-v3 .v3-search:focus-within { border-color: var(--accent-line); background: var(--surface); box-shadow: var(--ring); } .theme-v3 .v3-search svg { width: 16px; height: 16px; color: var(--ink-3); flex-shrink: 0; } .theme-v3 .v3-search input { flex: 1; border: 0; background: transparent; outline: none; font-family: var(--font-body); font-size: 14px; color: var(--ink); min-width: 0; } .theme-v3 .v3-search input::placeholder { color: var(--ink-4); } /* Обрамлення дає wrapper (.v3-search:focus-within) — знімаємо власний ринг інпута */ .theme-v3 .v3-search input:focus, .theme-v3 .v3-search input:focus-visible { box-shadow: none; } .theme-v3 .v3-search kbd { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); } .theme-v3 .v3-hdr-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Mobile nav */ .theme-v3 .v3-burger { display: none; } .theme-v3 .v3-mobile-nav { display: none; position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px; box-shadow: var(--shadow-md); flex-direction: column; gap: 2px; } .theme-v3 .v3-mobile-nav.open { display: flex; } .theme-v3 .v3-mobile-nav a { padding: 13px 12px; font-size: 15px; font-weight: 500; color: var(--ink-2); border-radius: var(--r-sm); } .theme-v3 .v3-mobile-nav a:hover { background: var(--surface-2); color: var(--ink); } .theme-v3 .v3-mobile-search { display: none; } /* --------------------------------------------------------------------- 7. HERO ------------------------------------------------------------------- */ .theme-v3 .v3-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; margin-bottom: 8px; } .theme-v3 .v3-hero-lead { position: relative; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; min-height: 440px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .theme-v3 .v3-hero-lead:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); } .theme-v3 .v3-hero-media { flex: 1; min-height: 240px; position: relative; background: linear-gradient(135deg, #0c2c1e, #14603f 55%, #228e5d); background-size: cover; background-position: center; } .theme-v3 .v3-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 12, 16, 0) 30%, rgba(11, 12, 16, .55)); } .theme-v3 .v3-hero-badges { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; gap: 8px; } .theme-v3 .v3-hero-body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 14px; } .theme-v3 .v3-hero-title { font-size: clamp(26px, 3vw, 36px); line-height: 1.08; } .theme-v3 .v3-hero-title a { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s var(--ease); } .theme-v3 .v3-hero-lead:hover .v3-hero-title a { background-size: 100% 2px; } .theme-v3 .v3-hero-desc { color: var(--ink-3); font-size: 15.5px; line-height: 1.6; max-width: 60ch; } .theme-v3 .v3-hero-side { display: flex; flex-direction: column; gap: 22px; } .theme-v3 .v3-hs-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; background: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .theme-v3 .v3-hs-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .theme-v3 .v3-hs-thumb { border-radius: var(--r-md); background: var(--surface-3); background-size: cover; background-position: center; aspect-ratio: 1; min-height: 92px; } .theme-v3 .v3-hs-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-self: center; } .theme-v3 .v3-hs-title { font-size: 15.5px; line-height: 1.24; } .theme-v3 .v3-hs-title a:hover { color: var(--accent); } /* --------------------------------------------------------------------- 8. TRENDING STRIP ------------------------------------------------------------------- */ .theme-v3 .v3-trending { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .theme-v3 .v3-trending-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .theme-v3 .v3-trending-head h3 { font-size: 14px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; } .theme-v3 .v3-trending-head svg { width: 16px; height: 16px; color: var(--accent); } .theme-v3 .v3-trending-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .theme-v3 .v3-trend-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); transition: background var(--dur) var(--ease); } .theme-v3 .v3-trend-item:hover { background: var(--surface-2); } .theme-v3 .v3-trend-item:nth-child(odd) { border-right: 1px solid var(--line-2); } .theme-v3 .v3-trend-num { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--accent); width: 22px; flex-shrink: 0; } .theme-v3 .v3-trend-body { min-width: 0; } .theme-v3 .v3-trend-title { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .theme-v3 .v3-trend-item:hover .v3-trend-title { color: var(--accent); } .theme-v3 .v3-trend-meta { font-size: 11.5px; color: var(--ink-4); margin-top: 3px; font-family: var(--font-mono); } /* --------------------------------------------------------------------- 9. FEED / POST CARDS ------------------------------------------------------------------- */ .theme-v3 .v3-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .theme-v3 .v3-feed--single { grid-template-columns: 1fr; } .theme-v3 .v3-post { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .theme-v3 .v3-post:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); } .theme-v3 .v3-post-media { aspect-ratio: 16 / 9; position: relative; background: var(--surface-3); background-size: cover; background-position: center; } .theme-v3 .grad-1 { background: linear-gradient(135deg, #14603f, #228e5d); } .theme-v3 .grad-2 { background: linear-gradient(135deg, #0e7490, #10b981); } .theme-v3 .grad-3 { background: linear-gradient(135deg, #b45309, #f59e0b); } .theme-v3 .grad-4 { background: linear-gradient(135deg, #9d174d, #f43f5e); } .theme-v3 .grad-5 { background: linear-gradient(135deg, #1e3a8a, #06b6d4); } .theme-v3 .grad-6 { background: linear-gradient(135deg, #5b21b6, #ec4899); } .theme-v3 .v3-post-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; } .theme-v3 .v3-post-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 11px; flex: 1; } .theme-v3 .v3-post-title { font-size: 18px; line-height: 1.24; } .theme-v3 .v3-post-title a:hover { color: var(--accent); } .theme-v3 .v3-post-desc { color: var(--ink-3); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .theme-v3 .v3-post-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-3); } .theme-v3 .v3-post-foot .v3-cat { color: var(--accent); font-weight: 600; font-size: 11px; letter-spacing: .02em; background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 3px 9px; border-radius: var(--r-full); white-space: nowrap; } /* Крапку-роздільник одразу після чипа рубрики ховаємо — чип самодостатній */ .theme-v3 .v3-post-foot .v3-cat + .v3-dot-sep { display: none; } .theme-v3 .v3-post-foot .spacer { margin-left: auto; display: inline-flex; gap: 12px; } .theme-v3 .v3-post-edit { font-size: 12px; color: var(--ink-4); margin-top: 4px; } .theme-v3 .v3-post-edit a:hover { color: var(--accent); } /* List row variant (category / list page) */ .theme-v3 .v3-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 16px; overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .theme-v3 .v3-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .theme-v3 .v3-row-media { border-radius: var(--r-md); background: var(--surface-3); background-size: cover; background-position: center; aspect-ratio: 16 / 10; min-height: 120px; } .theme-v3 .v3-row-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; align-self: center; } .theme-v3 .v3-row-title { font-size: 20px; line-height: 1.22; } .theme-v3 .v3-row-title a:hover { color: var(--accent); } .theme-v3 .v3-row-desc { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --------------------------------------------------------------------- 10. CATEGORIES / FORMATS SECTION ------------------------------------------------------------------- */ .theme-v3 .v3-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .theme-v3 .v3-cat-card { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); position: relative; overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .theme-v3 .v3-cat-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-3px); } .theme-v3 .v3-cat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--_hue, var(--accent)); opacity: 0; transition: opacity var(--dur) var(--ease); } .theme-v3 .v3-cat-card:hover::before { opacity: 1; } .theme-v3 .v3-cat-icon { width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--_hue, var(--accent)); } .theme-v3 .v3-cat-icon svg { width: 22px; height: 22px; } .theme-v3 .v3-cat-card.hue-test { --_hue: var(--c-test); } .theme-v3 .v3-cat-card.hue-poll { --_hue: var(--c-poll); } .theme-v3 .v3-cat-card.hue-question { --_hue: var(--c-question); } .theme-v3 .v3-cat-card.hue-test .v3-cat-icon, .theme-v3 .v3-cat-card.hue-poll .v3-cat-icon, .theme-v3 .v3-cat-card.hue-question .v3-cat-icon { background: color-mix(in srgb, var(--_hue) 14%, transparent); } .theme-v3 .v3-cat-card h3 { font-size: 18px; } .theme-v3 .v3-cat-card p { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; } .theme-v3 .v3-cat-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; gap: 6px; } .theme-v3 .v3-cat-count { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; } .theme-v3 .v3-cat-count small { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--ink-4); margin-left: 4px; } .theme-v3 .v3-cat-arrow { margin-left: auto; color: var(--ink-4); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-v3 .v3-cat-card:hover .v3-cat-arrow { color: var(--accent); transform: translateX(3px); } .theme-v3 .v3-cat-arrow svg { width: 18px; height: 18px; } /* --------------------------------------------------------------------- 11. SIDEBAR WIDGETS ------------------------------------------------------------------- */ .theme-v3 .v3-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: calc(var(--header-h) + 24px); } .theme-v3 .v3-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 20px; } .theme-v3 .v3-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .theme-v3 .v3-card-h h4 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .theme-v3 .v3-card-h > .v3-kicker { color: var(--ink-4); } .theme-v3 .v3-card-h a { font-family: var(--font-mono); font-size: 11px; color: var(--accent); white-space: nowrap; transition: color var(--dur) var(--ease); } .theme-v3 .v3-card-h a:hover { color: var(--accent-hover); } /* CTA / newsletter card */ .theme-v3 .v3-cta { border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: radial-gradient(120% 120% at 100% 0%, var(--accent-soft), transparent 60%), var(--surface); padding: 22px; } .theme-v3 .v3-cta h3 { font-size: 19px; margin: 10px 0 8px; } .theme-v3 .v3-cta p { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; } .theme-v3 .v3-field { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 5px 5px 5px 15px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .theme-v3 .v3-field:focus-within { border-color: var(--accent-line); box-shadow: var(--ring); } .theme-v3 .v3-field input { flex: 1; border: 0; background: transparent; outline: none; font-family: var(--font-body); font-size: 14px; color: var(--ink); min-width: 0; } /* Обрамлення дає wrapper (.v3-field:focus-within) — знімаємо власний ринг інпута, щоб не було подвійного фокуса від глобального :focus-visible. */ .theme-v3 .v3-field input:focus, .theme-v3 .v3-field input:focus-visible { box-shadow: none; border-radius: inherit; } .theme-v3 .v3-field input::placeholder { color: var(--ink-4); } .theme-v3 .v3-field .v3-btn { padding: 9px 14px; } .theme-v3 .v3-cta-note { font-size: 11.5px; color: var(--ink-4); margin-top: 10px; display: flex; align-items: center; gap: 6px; } .theme-v3 .v3-cta-ok { color: var(--success); font-weight: 500; font-size: 13.5px; display: none; align-items: center; gap: 7px; } .theme-v3 .v3-cta-ok svg { width: 16px; height: 16px; flex-shrink: 0; } .theme-v3 .v3-cta-err { display: none; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--danger); font-weight: 500; } .theme-v3 .v3-cta-err.show { display: flex; } .theme-v3 .js-v3-newsletter-btn.is-loading { opacity: .7; pointer-events: none; position: relative; } .theme-v3 .js-v3-newsletter-btn.is-loading::after { content: ""; width: 13px; height: 13px; margin-left: 2px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: v3-spin .6s linear infinite; } @keyframes v3-spin { to { transform: rotate(360deg); } } .theme-v3 .v3-cta.is-done .v3-field, .theme-v3 .v3-cta.is-done .v3-cta-note, .theme-v3 .v3-band.is-done .v3-field, .theme-v3 .v3-band.is-done .v3-cta-note { display: none; } .theme-v3 .v3-cta.is-done .v3-cta-ok, .theme-v3 .v3-band.is-done .v3-cta-ok { display: flex; } /* Ranked list (popular tests) */ .theme-v3 .v3-rank { display: flex; flex-direction: column; } .theme-v3 .v3-rank-item { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-2); } .theme-v3 .v3-rank-item:first-child { border-top: 0; padding-top: 2px; } .theme-v3 .v3-rank-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--accent); flex-shrink: 0; width: 18px; } .theme-v3 .v3-rank-link { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); transition: color var(--dur) var(--ease); } .theme-v3 .v3-rank-item:hover .v3-rank-link { color: var(--accent); } /* Category list */ .theme-v3 .v3-catlist { display: flex; flex-direction: column; gap: 1px; } .theme-v3 .v3-catlink { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-v3 .v3-catlink:hover { background: var(--surface-2); color: var(--ink); } .theme-v3 .v3-catlink .emoji { font-size: 14px; width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 8px; line-height: 1; transition: background var(--dur) var(--ease); } .theme-v3 .v3-catlink:hover .emoji { background: var(--accent-soft); } .theme-v3 .v3-catlink .c { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); transition: color var(--dur) var(--ease); } .theme-v3 .v3-catlink:hover .c { color: var(--accent); } /* Tag cloud */ .theme-v3 .v3-tags { display: flex; flex-wrap: wrap; gap: 8px; } .theme-v3 .v3-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--ink-2); transition: all var(--dur) var(--ease); } .theme-v3 .v3-tag:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); transform: translateY(-1px); } .theme-v3 .v3-tag .v3-tag-logo { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); overflow: hidden; } .theme-v3 .v3-tag .v3-tag-logo img { width: 14px; height: 14px; object-fit: contain; } .theme-v3 .v3-tag .c { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); } /* Authors */ .theme-v3 .v3-authors { display: flex; flex-direction: column; } .theme-v3 .v3-author { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-2); } .theme-v3 .v3-author:first-child { border-top: 0; padding-top: 2px; } .theme-v3 .v3-author .av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px; flex-shrink: 0; } .theme-v3 .v3-author .n { font-size: 14px; font-weight: 500; line-height: 1.2; } .theme-v3 .v3-author .n a:hover { color: var(--accent); } .theme-v3 .v3-author .r { font-size: 12px; color: var(--ink-4); margin-top: 2px; } .theme-v3 .v3-author .badge { margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: var(--r-full); flex-shrink: 0; } /* --------------------------------------------------------------------- 12. QOTD (question of the day) ------------------------------------------------------------------- */ .theme-v3 .v3-qotd { border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: radial-gradient(130% 130% at 0% 0%, var(--accent-soft), transparent 55%), var(--surface); padding: 22px; } .theme-v3 .v3-qotd-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; } .theme-v3 .v3-qotd-badge span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .theme-v3 .v3-qotd-badge b { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); } .theme-v3 .v3-qotd-q { font-size: 19px; line-height: 1.3; margin-bottom: 16px; } .theme-v3 .v3-qotd-actions { display: flex; gap: 10px; } .theme-v3 .v3-qotd-btn { flex: 1; padding: 11px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink); transition: all var(--dur) var(--ease); } .theme-v3 .v3-qotd-btn:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); } .theme-v3 .v3-qotd-after--hidden { display: none; } .theme-v3 .v3-qotd-bar { position: relative; height: 40px; border-radius: var(--r-sm); overflow: hidden; display: flex; font-size: 12.5px; font-weight: 600; } .theme-v3 .v3-qotd-bar .fill-y { background: var(--accent); color: #fff; display: flex; align-items: center; padding: 0 12px; } .theme-v3 .v3-qotd-bar .fill-n { background: var(--surface-3); color: var(--ink-2); display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; flex: 1; } .theme-v3 .v3-qotd-meta { display: flex; margin-top: 10px; font-size: 12px; color: var(--ink-4); font-family: var(--font-mono); } /* --------------------------------------------------------------------- 13. NEWSLETTER BAND (full width) ------------------------------------------------------------------- */ .theme-v3 .v3-band { margin-top: 64px; border: 1px solid var(--accent-line); border-radius: var(--r-xl); background: radial-gradient(90% 160% at 100% 0%, var(--accent-soft), transparent 55%), radial-gradient(90% 160% at 0% 100%, color-mix(in srgb, var(--c-question) 12%, transparent), transparent 50%), var(--surface); padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: center; } .theme-v3 .v3-band h2 { font-size: 28px; margin: 10px 0 10px; } .theme-v3 .v3-band p { color: var(--ink-3); font-size: 15px; line-height: 1.6; max-width: 46ch; } .theme-v3 .v3-band .v3-field { background: var(--surface); } .theme-v3 .v3-band-alt { margin-top: 12px; font-size: 13px; color: var(--ink-3); } .theme-v3 .v3-band-alt a { color: var(--accent); font-weight: 500; } /* --------------------------------------------------------------------- 14. ARTICLE PAGE ------------------------------------------------------------------- */ .theme-v3 .v3-article { padding-top: 34px; } .theme-v3 .v3-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 22px; font-family: var(--font-mono); } .theme-v3 .v3-crumb a:hover { color: var(--accent); } .theme-v3 .v3-crumb svg { width: 13px; height: 13px; color: var(--ink-4); } .theme-v3 .v3-art-head { max-width: 840px; margin: 0 auto 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .theme-v3 .v3-art-title { font-size: 34px; line-height: 1.15; } .theme-v3 .v3-art-lede { font-size: 18px; color: var(--ink-3); line-height: 1.55; max-width: 62ch; } .theme-v3 .v3-art-byline { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .theme-v3 .v3-art-cover { max-width: 1180px; margin: 0 auto 8px; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 21 / 9; background: linear-gradient(135deg, #0c2c1e, #228e5d); background-size: cover; background-position: center; } .theme-v3 .v3-art-grid { max-width: 1220px; margin: 40px auto 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) 200px; gap: 40px; align-items: start; } .theme-v3 .v3-art-grid .v3-prose { max-width: none; } .theme-v3 .v3-art-rail { position: sticky; top: calc(var(--header-h) + 30px); display: flex; flex-direction: column; gap: 8px; } .theme-v3 .v3-rail-btn { width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); display: flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease); } .theme-v3 .v3-rail-btn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-1px); } .theme-v3 .v3-rail-btn svg { width: 18px; height: 18px; } .theme-v3 .v3-rail-btn.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } /* Prose */ .theme-v3 .v3-prose { font-size: 18px; line-height: 1.75; color: var(--ink-2); max-width: 820px; } .theme-v3 .v3-prose > * + * { margin-top: 1.35em; } .theme-v3 .v3-prose h2 { font-size: 28px; margin-top: 1.8em; padding-top: .2em; scroll-margin-top: calc(var(--header-h) + 24px); } .theme-v3 .v3-prose h3 { font-size: 22px; margin-top: 1.5em; scroll-margin-top: calc(var(--header-h) + 24px); } .theme-v3 .v3-prose p { color: var(--ink-2); } .theme-v3 .v3-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur) var(--ease); } .theme-v3 .v3-prose a:hover { color: var(--accent-hover); } .theme-v3 .v3-prose img { width: 100%; height: auto; border-radius: var(--r-md); margin: 1.6em 0; border: 1px solid var(--line); } .theme-v3 .v3-prose ul, .theme-v3 .v3-prose ol { padding-left: 1.4em; } .theme-v3 .v3-prose li { margin: .5em 0; } .theme-v3 .v3-prose blockquote { border-left: 3px solid var(--accent); background: var(--surface-2); padding: 16px 22px; border-radius: 0 var(--r-md) var(--r-md) 0; font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--ink); line-height: 1.4; } .theme-v3 .v3-prose code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; } .theme-v3 .v3-prose pre { background: var(--surface-inv); color: var(--ink-inv); border-radius: var(--r-md); padding: 18px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; } .theme-v3 .v3-prose pre code { background: transparent; border: 0; padding: 0; color: inherit; } .theme-v3 .v3-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; } /* TOC */ .theme-v3 .v3-toc { position: sticky; top: calc(var(--header-h) + 30px); } .theme-v3 .v3-toc-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; } .theme-v3 .v3-toc-list { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); } .theme-v3 .v3-toc-list a { font-size: 13.5px; color: var(--ink-3); padding: 6px 14px; margin-left: -1px; border-left: 2px solid transparent; line-height: 1.4; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .theme-v3 .v3-toc-list a:hover { color: var(--ink); } .theme-v3 .v3-toc-list a.active { color: var(--accent); border-left-color: var(--accent); } /* Article tags + engagement */ .theme-v3 .v3-art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .theme-v3 .v3-engage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); } .theme-v3 .v3-engage .lead { font-size: 13px; color: var(--ink-3); font-weight: 500; } .theme-v3 .v3-engage .spacer { margin-left: auto; display: flex; gap: 10px; } /* Telegram follow CTA (article) */ .theme-v3 .v3-tg-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 36px 0 8px; padding: 22px 24px; border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: radial-gradient(130% 150% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); } .theme-v3 .v3-tg-icon { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; background: linear-gradient(135deg, #2aabee, #229ed9); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 6px 16px -6px rgba(34, 158, 217, .6); } .theme-v3 .v3-tg-icon svg { width: 28px; height: 28px; } .theme-v3 .v3-tg-body { min-width: 0; flex: 1 1 220px; } .theme-v3 .v3-tg-body h3 { font-size: 18px; margin-bottom: 5px; } .theme-v3 .v3-tg-body p { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; } .theme-v3 .v3-tg-cta .v3-btn { flex-shrink: 0; } @media (max-width: 560px) { .theme-v3 .v3-tg-cta { padding: 20px; } .theme-v3 .v3-tg-cta .v3-btn { width: 100%; } } /* Related */ .theme-v3 .v3-related { max-width: 1220px; margin: 56px auto 0; } .theme-v3 .v3-related .v3-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Comments wrapper spacing */ .theme-v3 .v3-comments { max-width: 720px; margin: 48px auto 0; } .theme-v3 .v3-comments h3 { font-size: 22px; margin-bottom: 20px; } /* --- Reactions (reused markup: .reactions / .rx-btn) --- */ .theme-v3 .reactions { display: flex; flex-wrap: wrap; gap: 10px; } .theme-v3 .rx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface); font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-2); transition: all var(--dur) var(--ease); } .theme-v3 .rx-btn:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-1px); } .theme-v3 .rx-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .theme-v3 .rx-btn .emoji { font-size: 15px; line-height: 1; } .theme-v3 .rx-btn .cnt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); } .theme-v3 .rx-btn.active .cnt { color: var(--accent); } .theme-v3 .react-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface); font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-2); transition: all var(--dur) var(--ease); cursor: pointer; } .theme-v3 .react-btn:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); } /* --- Comments (reused markup) --- */ .theme-v3 .cmts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; } .theme-v3 .cmts-head h2 { font-size: 22px; } .theme-v3 .cmts-head h2 span { color: var(--ink-4); font-weight: 400; margin-left: 4px; } .theme-v3 .sort-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface); } .theme-v3 .cmt-form { margin-bottom: 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .theme-v3 .cmt-form textarea { width: 100%; border: 0; outline: none; resize: vertical; min-height: 96px; padding: 16px 18px; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--surface); } .theme-v3 .cmt-form textarea::placeholder { color: var(--ink-4); } .theme-v3 .cmt-form-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface-2); } .theme-v3 .cmt-form-bar .tools { display: flex; gap: 4px; } .theme-v3 .cmt-form-bar .tools button { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease); } .theme-v3 .cmt-form-bar .tools button:hover { background: var(--surface); border-color: var(--line); color: var(--ink); } .theme-v3 .cmt-form .btn, .theme-v3 .cmt-form-bar .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1; padding: 11px 18px; border: 0; border-radius: var(--r-full); background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .theme-v3 .cmt-form .btn:hover, .theme-v3 .cmt-form-bar .btn:hover { background: var(--accent-hover); transform: translateY(-1px); } .theme-v3 .cmts { display: flex; flex-direction: column; } .theme-v3 .cmt { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); } .theme-v3 .cmt:first-child { border-top: 0; padding-top: 0; } .theme-v3 .cmt .av { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 14px; } .theme-v3 .cmt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .theme-v3 .cmt-head .n a { font-weight: 600; font-size: 14px; } .theme-v3 .cmt-head .n a:hover { color: var(--accent); } .theme-v3 .cmt-head .t { font-size: 12px; color: var(--ink-4); font-family: var(--font-mono); } .theme-v3 .cmt-body { font-size: 15px; line-height: 1.6; color: var(--ink-2); } .theme-v3 .cmt-body blockquote { border-left: 2px solid var(--accent); padding-left: 12px; color: var(--ink-3); font-size: 13px; margin-bottom: 8px; } .theme-v3 .cmt-actions { display: flex; gap: 18px; margin-top: 10px; } .theme-v3 .cmt-actions button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--ink-3); font-size: 13px; font-family: var(--font-body); padding: 0; cursor: pointer; transition: color var(--dur) var(--ease); } .theme-v3 .cmt-actions button:hover, .theme-v3 .cmt-actions button.active { color: var(--accent); } .theme-v3 .tag-chip { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); transition: all var(--dur) var(--ease); } .theme-v3 .tag-chip:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); } /* --------------------------------------------------------------------- 15. LIST / CATEGORY PAGE ------------------------------------------------------------------- */ .theme-v3 .v3-page-head { padding: 44px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 32px; } .theme-v3 .v3-page-head h1 { font-size: clamp(30px, 4vw, 42px); margin: 12px 0 12px; } .theme-v3 .v3-page-head p { color: var(--ink-3); font-size: 16px; max-width: 60ch; margin-bottom: 22px; } .theme-v3 .v3-filters { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 20px; } .theme-v3 .v3-filter { font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding: 8px 16px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); transition: all var(--dur) var(--ease); } .theme-v3 .v3-filter:hover { border-color: var(--line-strong); background: var(--surface-2); } .theme-v3 .v3-filter.is-active { background: var(--surface-inv); color: var(--ink-inv); border-color: var(--surface-inv); } /* --------------------------------------------------------------------- 16. FOOTER ------------------------------------------------------------------- */ .theme-v3 .v3-ft { border-top: 1px solid var(--line); background: var(--surface); margin-top: 24px; } .theme-v3 .v3-ft-in { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--gutter) 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } .theme-v3 .v3-ft-brand p { color: var(--ink-3); font-size: 14px; line-height: 1.6; max-width: 34ch; margin-top: 14px; } .theme-v3 .v3-ft-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; } .theme-v3 .v3-ft-col a { display: block; font-size: 14px; color: var(--ink-2); padding: 5px 0; transition: color var(--dur) var(--ease); } .theme-v3 .v3-ft-col a:hover { color: var(--accent); } .theme-v3 .v3-ft-bot { border-top: 1px solid var(--line); } .theme-v3 .v3-ft-bot-in { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--gutter); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-4); font-family: var(--font-mono); } /* --------------------------------------------------------------------- 17. PAGINATION (Laravel default markup) ------------------------------------------------------------------- */ .theme-v3 .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 40px 0 0; justify-content: center; } .theme-v3 .pagination .page-item .page-link, .theme-v3 .pagination li span, .theme-v3 .pagination li a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500; transition: all var(--dur) var(--ease); } .theme-v3 .pagination li a:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); } .theme-v3 .pagination .active span, .theme-v3 .pagination .page-item.active .page-link { background: var(--surface-inv); color: var(--ink-inv); border-color: var(--surface-inv); } .theme-v3 .pagination .disabled span { opacity: .4; } /* Empty state */ .theme-v3 .v3-empty { text-align: center; padding: 64px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--ink-3); } .theme-v3 .v3-empty svg { width: 40px; height: 40px; color: var(--ink-4); margin: 0 auto 14px; } /* Legacy .empty-list (спільний партіал web.includes.all.empty) у стилі v3 */ .theme-v3 .empty-list { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 60px 24px; margin: 8px 0; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); } .theme-v3 .empty-list__icon { width: 50px; height: 50px; opacity: .85; } .theme-v3 .empty-list__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink-2); margin: 0; } /* --------------------------------------------------------------------- 18. ANIMATION ------------------------------------------------------------------- */ /* Content is visible by default; only hidden-then-revealed when JS is active (html.v3-js), so no-JS / crawler / throttled-tab users always see content. */ .theme-v3 .v3-reveal { opacity: 1; transform: none; } html.v3-js .theme-v3 .v3-reveal { opacity: 0; transform: translateY(14px); } html.v3-js .theme-v3 .v3-reveal.in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); } /* --------------------------------------------------------------------- 19. RESPONSIVE ------------------------------------------------------------------- */ @media (max-width: 1080px) { .theme-v3 .v3-grid { grid-template-columns: 1fr; gap: 40px; } .theme-v3 .v3-side { position: static; } .theme-v3 .v3-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .theme-v3 .v3-related .v3-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } .theme-v3 .v3-art-grid { grid-template-columns: 64px minmax(0, 1fr); } .theme-v3 .v3-toc { display: none; } } @media (max-width: 900px) { .theme-v3 .v3-hero { grid-template-columns: 1fr; } .theme-v3 .v3-band { grid-template-columns: 1fr; padding: 30px; } .theme-v3 .v3-art-grid { grid-template-columns: 1fr; gap: 24px; } .theme-v3 .v3-art-rail { flex-direction: row; position: static; } /* Ховаємо десктопну навігацію — і одразу показуємо бургер, щоб не було «мертвої зони» 721–900px без жодного меню. */ .theme-v3 .v3-nav { display: none; } .theme-v3 .v3-burger { display: inline-flex; } } @media (max-width: 720px) { .theme-v3 { --gutter: 18px; --header-h: 60px; } .theme-v3 .v3-search { display: none; } .theme-v3 .v3-mobile-search { display: flex; margin: 4px 0 12px; max-width: none; } .theme-v3 .v3-hide-sm { display: none !important; } .theme-v3 .v3-feed { grid-template-columns: 1fr; } .theme-v3 .v3-trending-list { grid-template-columns: 1fr; } .theme-v3 .v3-trend-item:nth-child(odd) { border-right: 0; } .theme-v3 .v3-cats { grid-template-columns: 1fr; } .theme-v3 .v3-row { grid-template-columns: 1fr; } .theme-v3 .v3-related .v3-feed { grid-template-columns: 1fr; } .theme-v3 .v3-ft-in { grid-template-columns: 1fr 1fr; gap: 28px; } .theme-v3 .v3-ft-brand { grid-column: 1 / -1; } .theme-v3 .v3-sec-head h2 { font-size: 22px; } .theme-v3 .v3-hero-lead { min-height: 380px; } } @media (max-width: 420px) { .theme-v3 .v3-hs-card { grid-template-columns: 84px minmax(0, 1fr); } .theme-v3 .v3-ft-in { grid-template-columns: 1fr; } /* Компактний хедер, щоб CTA "Почати тему" + бургер вміщались без гориз. скролу */ .theme-v3 .v3-hdr-actions { gap: 6px; } .theme-v3 .v3-hdr-actions .v3-btn--sm { padding: 8px 12px; } .theme-v3 .v3-hdr-actions .v3-btn--sm svg { display: none; } .theme-v3 .v3-logo { height: 26px; } } /* --------------------------------------------------------------------- 20. REDUCED MOTION ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .theme-v3 * { animation-duration: .001ms !important; transition-duration: .001ms !important; } html.v3-js .theme-v3 .v3-reveal { opacity: 1; transform: none; } } /* --------------------------------------------------------------------- 21. LEGACY GLOBALS RESET The v3 layout still @includes a few global partials from the old theme (menu.blade = .sidebar, popup.blade = .d-none auth wrapper, the #js-quote cite button, and #cal1/#cal2 calendar helpers). Those relied on Bootstrap / the old stylesheet to stay hidden or off-canvas. Since v3 loads neither, they used to render as raw, unstyled blocks dumped at the bottom of every page. v3 has its own header nav + mobile menu, so keep them out of view. ------------------------------------------------------------------- */ .theme-v3 .d-none { display: none !important; } .theme-v3 .sidebar, .theme-v3 #js-quote.quote-btn, .theme-v3 #cal1, .theme-v3 #cal2 { display: none !important; } /* --------------------------------------------------------------------- 22. AUTH MODAL (fancybox #popup-auth) v3 loads fancybox's JS (via custom.js) but none of its CSS, so the login / registration popup had no chrome. Provide a compact fancybox-3 core plus a v3-tokened skin for the popup and its forms. Scoped to .theme-v3 so it never leaks into the other themes. ------------------------------------------------------------------- */ .theme-v3 .fancybox-container { position: fixed; inset: 0; z-index: 99993; outline: none; -webkit-tap-highlight-color: transparent; transform: translateZ(0); } .theme-v3 .fancybox-container * { box-sizing: border-box; } .theme-v3 .fancybox-bg { position: absolute; inset: 0; background: #0b0c10; opacity: 0; transition: opacity .3s cubic-bezier(.47, 0, .74, .71); } .theme-v3 .fancybox-is-open .fancybox-bg { opacity: .62; } .theme-v3 .fancybox-outer, .theme-v3 .fancybox-inner, .theme-v3 .fancybox-stage { position: absolute; inset: 0; } .theme-v3 .fancybox-outer { overflow-y: auto; -webkit-overflow-scrolling: touch; } .theme-v3 .fancybox-stage { direction: ltr; transform: translateZ(0); overflow: visible; } .theme-v3 .fancybox-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; padding: 40px 20px; overflow: auto; white-space: normal; text-align: center; } .theme-v3 .fancybox-slide::before { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; } .theme-v3 .fancybox-slide--current { display: block; } .theme-v3 .fancybox-slide > * { display: inline-block; position: relative; vertical-align: middle; text-align: left; margin: 0 auto; padding: 0; } .theme-v3 .fancybox-slide .fancybox-content { background: transparent; overflow: visible; } /* Hide fancybox's default gallery chrome (toolbar, nav arrows, infobar, caption) — v3 only needs the modal + the small close button. In this fancybox build the close button also carries .fancybox-button, so exclude it from the hide. */ .theme-v3 .fancybox-toolbar, .theme-v3 .fancybox-navigation, .theme-v3 .fancybox-infobar, .theme-v3 .fancybox-caption, .theme-v3 .fancybox-button:not(.fancybox-close-small) { display: none !important; } .theme-v3 .fancybox-close-small { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-v3 .fancybox-close-small:hover { background: var(--surface-3); color: var(--ink); } .theme-v3 .fancybox-close-small svg { width: 20px; height: 20px; } .theme-v3 .fancybox-close-small svg path { stroke: currentColor; stroke-width: 2; fill: none; } /* Popup shell + tabs */ .theme-v3 #popup-auth { width: 420px; max-width: calc(100vw - 40px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .theme-v3 #popup-auth .popup__inner { padding: 30px 28px; } .theme-v3 .popup-tabs-nav { display: flex; gap: 4px; list-style: none; margin: 0 0 22px; padding: 4px; background: var(--surface-2); border-radius: var(--r-md); } .theme-v3 .popup-tabs-nav__item { flex: 1; text-align: center; padding: 9px 10px; font-size: 14px; font-weight: 600; border-radius: var(--r-sm); cursor: pointer; color: var(--ink-3); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-v3 .popup-tabs-nav__item.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .theme-v3 .popup-tabs-content { display: none; } .theme-v3 .popup-tabs-content.active { display: block; } /* Auth forms */ .theme-v3 #popup-auth .popup__title { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 18px; } /* Flex-колонка з gap: рівні відступи між усіма полями. Потрібно, бо name/email обгорнуті в