/* =========================================
VOEVODINS HUB SYSTEM
Mobile First CSS Architecture
Multi-level Hub Structure (HUB-1, HUB-2, HUB-3)
OpenCart Integration Ready
========================================= */
/* --- BASE RESET (SHARED) --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* --- BASE CONTAINER (SHARED FOR ALL HUBS) --- */
.hub-article {
font-family: 'Mazzard', sans-serif;
text-align: left;
font-weight: 400;
color: #2D2D2D;
background-color: var(--bg-base);
padding: 0 30px;
max-width: 100%;
}
/* --- LEVEL-SPECIFIC TYPOGRAPHY --- */
.hub-article.hub-level-1 {
font-size: 20px;
line-height: 1.65;
letter-spacing: 0.2px;
}
.hub-article.hub-level-2,
.hub-article.hub-level-3 {
font-size: 19px;
line-height: 1.6;
letter-spacing: 0.1px;
padding: 0 25px;
}
/* --- H1 ЗАГОЛОВКИ (BASE + LEVEL OVERRIDES) --- */
.hub-article h1 {
line-height: 1.18;
font-weight: 600;
margin-top: 36px;
margin-bottom: 18px;
}
.hub-level-1 h1 {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-size: 29px;
line-height: 1.4;
margin: 56px 0 36px;
background: radial-gradient(102.83% 5471.85% at 102.83% 121.25%,
#1F120B 0%,
/* Глибокий шоколад (основа контрасту) */
#3D2416 15.44%,
#5C3A28 24.8%,
#7B5A44 37.02%,
#F2E2BA 48.66%,
/* ТОЧКА ІСТИНИ: Насичений колір шампань (замість білого/сірого) */
#D4B673 57.62%,
/* М'яке благородне золото */
#B3853D 68.82%,
/* Щільний золотий тон */
#1F120B 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.from-bottom {
transform: translateY(30px);
}
.animate {
opacity: 0;
transition: all 0.7s ease-out;
}
.animate.is-visible {
opacity: 1;
transform: translateY(0);
}
.hub-level-2 h1 {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-size: 29px;
line-height: 1.4;
margin: 56px 0 36px;
background: radial-gradient(102.83% 5471.85% at 102.83% 121.25%,
#1F120B 0%,
/* Глибокий шоколад (основа контрасту) */
#3D2416 15.44%,
#5C3A28 24.8%,
#7B5A44 37.02%,
#F2E2BA 48.66%,
/* ТОЧКА ІСТИНИ: Насичений колір шампань (замість білого/сірого) */
#D4B673 57.62%,
/* М'яке благородне золото */
#B3853D 68.82%,
/* Щільний золотий тон */
#1F120B 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hub-level-3 h1 {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-size: 29px;
line-height: 1.4;
margin: 56px 0 36px;
background: radial-gradient(102.83% 5471.85% at 102.83% 121.25%,
#1F120B 0%,
/* Глибокий шоколад (основа контрасту) */
#3D2416 15.44%,
#5C3A28 24.8%,
#7B5A44 37.02%,
#F2E2BA 48.66%,
/* ТОЧКА ІСТИНИ: Насичений колір шампань (замість білого/сірого) */
#D4B673 57.62%,
/* М'яке благородне золото */
#B3853D 68.82%,
/* Щільний золотий тон */
#1F120B 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* --- H2 ЗАГОЛОВКИ --- */
.hub-article h2 {
line-height: 1.3;
font-weight: 500;
margin-top: 96px;
margin-bottom: 40px;
color: #1A1A1A;
}
.hub-level-1 h2 {
font-size: 27px;
margin-top: 140px;
margin-bottom: 40px;
}
.hub-level-2 h2,
.hub-level-3 h2 {
font-size: 24px;
margin-top: 100px;
margin-bottom: 30px;
}
/* --- H3 ЗАГОЛОВКИ --- */
.hub-article h3 {
line-height: 1.4;
font-weight: 500;
margin-top: 64px;
margin-bottom: 24px;
color: #2A2A2A;
}
.hub-level-1 h3 {
font-size: 23px;
margin-top: 64px;
}
.hub1-posle-video h3 {
font-size: 23px;
margin-top: 100px;
}
.hub-level-2 h3,
.hub-level-3 h3 {
font-size: 21px;
}
.hub-level-2 h3 {
margin-top: 64px;
margin-bottom: 20px;
}
.hub-article .h3-posle-video {
margin-bottom: 24px;
margin-top: 12px;
}
/* Підзаголовки */
.article-sub-accent-level-2 {
font-weight: 700;
font-weight: bold;
letter-spacing: 1.5px;
margin-top: 30px;
margin-bottom: 15px;
}
/* HUB-1: Subtitle under H1 (Mobile First) */
:root {
--hub-subtitle-font-size: 18px;
--hub-subtitle-line-height: 1.5;
--hub-subtitle-weight: 400;
/* use 500 if needed */
--hub-subtitle-mt: 28px;
/* 24–32px */
--hub-subtitle-mb: 44px;
/* 40–48px */
--bg-base: #fff;
/*#F7F3ED;
;*/
--bg-section: #ECEBE8;
--bg-photo: #ECEBE8;
}
.hub-subtitle,
p.hub-subtitle,
div.hub-subtitle {
font-family: inherit;
letter-spacing: 0;
text-transform: none;
color: #2F2F2F;
/* main text color */
display: block;
margin: 0;
font-size: var(--hub-subtitle-font-size);
line-height: var(--hub-subtitle-line-height);
font-weight: var(--hub-subtitle-weight);
margin-bottom: var(--hub-subtitle-mb);
}
/* Spacing relative to H1 and body flow */
h1+.hub-subtitle,
h1+p.hub-subtitle,
h1+div.hub-subtitle {
margin-top: var(--hub-subtitle-mt);
}
.hub-subtitle {
margin-bottom: var(--hub-subtitle-mb);
}
/* Optional variants */
.hub-subtitle.is-500 {
font-weight: 500;
}
.hub-subtitle.is-muted {
opacity: 0.85;
}
.hub-level-2 .hub-subtitle,
.hub-level-3 .hub-subtitle {
font-family: 'Manrope';
font-weight: 500;
color: #4A4A4A;
letter-spacing: 0.015em;
font-size: 21px;
margin-bottom: 20px;
}
.redaktsiinyi-material {
font-size: 13px;
text-transform: uppercase;
color: #8C8C8C;
letter-spacing: 0.14em;
font-weight: 400;
margin-bottom: 90px;
}
/* 85–90% of body */
/* Optional: gentle scale-up on larger screens */
@media (min-width: 768px) {
.hub-subtitle {
font-size: var(--hub-subtitle-font-size);
}
}
@media (min-width: 1024px) {
.hub-subtitle {
font-size: var(--hub-subtitle-font-size);
}
}
/* --- LEAD-БЛОК --- */
.hub-lead {
font-weight: 400;
font-style: normal;
color: #1E1E1E;
font-size: inherit;
line-height: inherit;
margin-bottom: 36px;
}
.hub-level-1 .hub-lead,
.hub-level-2 .hub-lead,
.hub-level-3 .hub-lead {
color: black;
margin-bottom: 22px;
}
.hub-lead-accent {
font-size: 21px;
font-weight: 450;
line-height: 1.5;
margin-bottom: 36px;
}
/* --- АБЗАЦИ --- */
.hub-article p {
margin-bottom: 22px;
}
.hub-fraza {
font-size: 20px;
}
.editorial-pause {
font-size: 22px;
line-height: 1.6;
letter-spacing: 0.1px;
margin: 56px 0 42px 0;
font-weight: 600;
}
.editorial-soft {
font-size: 19px;
line-height: 1.85;
letter-spacing: 0.015em;
margin: 28px 0 34px 0;
font-weight: 400;
color: #2A2A2A;
opacity: 0.92;
}
.blok-vysnovok {
line-height: 50px;
margin-top: 72px;
margin-bottom: 24px;
font-size: 21px;
}
.abzac-z-pidzagolovkom {
padding-top: 12px;
}
.hub-medium-bold {
font-weight: 450;
font-size: 20px;
margin-top: 40px;
margin-bottom: 40px;
letter-spacing: 0.01em;
padding-right: 40px;
}
.hub-bold-medium {
font-weight: 450;
}
.hub-bold-medium-vidstup {
font-weight: 450;
margin-top: 40px;
margin-bottom: 40px
}
.hub-semi-bold {
font-weight: 500;
}
.hub-semi-bold-vidstup {
font-weight: 500;
margin-top: 40px;
margin-bottom: 40px;
}
.hub-bold {
font-weight: 600;
}
.hub-callout-bold {
margin-top: 50px;
margin-bottom: 50px;
}
/* --- ПАУЗИ --- */
.hub-space-sm {
margin-top: 16px;
}
.hub-space-md {
margin-top: 24px;
}
.hub-space-lg {
margin-top: 32px;
}
/* --- ВІДЕО-БЛОК --- */
.hub-video-container {
width: 100%;
margin: 32px 0 32px;
}
.video-container {
position: relative;
padding: 0;
overflow: hidden;
background: #f4f2ef;
}
.video-container::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
box-shadow:
inset 0 1px 0 rgba(218, 213, 207, 0.10),
inset 0 0 0 1px rgba(218, 213, 207, 0.14),
inset 0 -26px 38px rgba(218, 213, 207, 0.08),
inset 10px 0 16px rgba(218, 213, 207, 0.025),
inset -10px 0 16px rgba(218, 213, 207, 0.025);
}
/* --- ВІДЕО-БЛОК МІЖ АБЗАЦАМИ --- */
.hub-video-container-in {
width: 100%;
margin: 22px 0 32px;
}
.hub-level-2 .hub-video-label {
font-size: 12.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 400;
opacity: 0.8;
margin-top: 36px;
margin-bottom: 14px;
}
.hub-level-1 .hub-video-label {
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.75;
margin-bottom: 10px;
font-weight: 500;
}
.hub-video-wrapper {
position: relative;
width: 100%;
/*padding-bottom: 125%; 4:5 aspect ratio
background: var(--bg-section);*/
overflow: hidden;
}
.hub-video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hub-video-caption {
font-size: 15px;
line-height: 1.5;
color: #6A6A6A;
opacity: 0.8;
margin-top: 14px;
}
.hub-level-2 .hub-video-caption,
.hub-level-3 .hub-video-caption {
font-size: 22px;
font-style: italic;
text-align: center;
line-height: 35px;
color: #6A6A6A;
opacity: 0.9;
margin-top: 48px;
}
.cinematic-statement {
font-family: Manrope;
font-weight: 400;
font-size: 18px;
line-height: 1.45;
text-transform: uppercase;
letter-spacing: 0.03em;
text-align: left;
margin: 100px 0 48px 0;
}
.cinematic-whisper {
font-family: Manrope;
font-weight: 400;
font-size: 19px;
line-height: 1.6;
font-style: italic;
letter-spacing: 0.01em;
opacity: 0.8;
text-align: left;
margin: 48px 0 0 0;
}
.cinematic-macro {
font-family: Manrope;
font-size: 18px;
line-height: 0.8;
letter-spacing: 0.01em;
text-align: left;
margin-top: 100px;
margin-bottom: 30px;
}
.cinematic-macro-1 {
font-weight: 400;
opacity: 1;
}
.cinematic-macro-2 {
font-weight: 500;
opacity: 1;
margin-top: 12px;
font-size: 19px;
}
.cinematic-macro-3 {
font-weight: 500;
opacity: 0.7;
margin-top: 12px;
font-size: 19px;
}
.cinematic-close {
font-family: Manrope;
font-size: 19px;
text-align: left;
line-height: 30px;
margin-top: 30px;
margin-bottom: 0;
letter-spacing: 0.003em;
}
.cinematic-close-1 {
font-weight: 400;
opacity: 0.72;
}
.cinematic-close-2 {
margin-top: 10px;
opacity: 1;
font-weight: 400;
letter-spacing: 0.005em;
}
.cinematic-close--with-pause {
padding-bottom: 24px;
}
.cinematic-close--with-pause-2 {
padding-bottom: 38px;
}
.hub-level-2 .hub-video-caption-2 {
font-size: 22px;
font-style: italic;
text-align: center;
line-height: 35px;
color: #6A6A6A;
opacity: 0.9;
margin-top: 48px;
margin-bottom: 96px;
}
.reflection-soft {
display: inline-block;
max-width: 620px;
margin-top: 32px;
font-size: 19px;
line-height: 1.45;
font-style: italic;
color: #474747;
text-align: left;
}
.hub-video-text {
margin-top: 14px;
}
.hub-video-text p {
margin-bottom: 12px;
}
.hub-video-fill {
font-size: 16px;
line-height: 1.55;
color: #5F5F5F;
}
/* --- Cinematic Aside ---*/
.cinematic-aside {
border-left: 1px solid rgba(177, 143, 92, 0.6);
padding-left: 14px;
margin: 32px 0 32px 0;
color: #333333;
}
.cinematic-aside-cue {
font-size: 20px;
font-weight: 500;
line-height: 1.3;
margin-bottom: 24px;
letter-spacing: 0.08em;
}
.cinematic-aside-cue--compact {
letter-spacing: 0.03em;
}
.cinematic-aside-text {
font-size: 19px;
font-weight: 400;
line-height: 1.7;
margin: 20px 0;
}
.cinematic-aside-tech {
font-size: 19px;
font-weight: 500;
}
/* --- АКЦЕНТНИЙ БЛОК (CALLOUT) --- */
.hub-callout {
border-left: 1px solid #B18F5C;
padding-left: 30px;
margin: 30px 0 -5px 0;
color: #333333;
font-weight: 450;
line-height: 1.2;
letter-spacing: 0.02em;
}
.hub-level-1 .hub-callout {
font-size: 21px;
}
.hub-level-2 .hub-callout,
.hub-level-3 .hub-callout {
font-size: 20px;
}
.hub-level-2 .hub-callout {
font-size: 19px;
padding-left: 20px;
margin: 48px 0;
}
.hub-level-2 .aktsentnyi-blok,
.hub-level-3 .aktsentnyi-blok {
font-size: 21px;
line-height: 1.4;
font-weight: 500;
color: #242424;
letter-spacing: normal;
text-align: left;
margin-left: 0;
margin-right: auto;
max-width: 100%;
width: 100%;
margin-top: 64px;
margin-bottom: 64px;
}
.hub-level-3 .aktsentna-fraza {
color: black;
font-style: italic;
margin: 48px 0 22px;
font-size: 21px;
}
.aktsentna-fraza-2 {
font-size: 20px;
font-weight: 450;
line-height: 1.5;
}
.aktsentna-fraza-3 {
margin-top: 80px;
font-size: 20px;
font-weight: 450;
line-height: 1.5;
}
.text-link {
font-size: 20px;
font-weight: 400;
line-height: 1.5;
}
/* --- ЦИТАТА (PULL QUOTE) --- */
.hub-quote {
border-left: 1px solid #B18F5C;
padding-left: 35px;
margin: 30px 0;
font-style: italic;
font-weight: 300; /* Робимо шрифт тоншим (Light), якщо дозволяє гарнітура */
line-height: 1.8; /* Збільшуємо міжрядковий інтервал для «повітря» */
letter-spacing: 0.03em; /* Ледь помітно розсуваємо літери між собою */
}
.hub-quote-text {
line-height: 1.6;
font-weight: 400;
color: #5A5A5A;
margin-bottom: 10px;
font-style: italic;
padding-left: 30px;
padding-right: 30px;
}
.hub-level-1 .hub-quote-text {
font-size: 25px;
}
.hub-level-2 .hub-quote-text,
.hub-level-3 .hub-quote-text {
font-size: 23px;
}
.hub-quote-author {
font-size: 15px;
opacity: 0.7;
font-weight: 400;
color: #B18F5C;
}
/* --- ПІДПИС --- */
.signature-container {
display: flex;
justify-content: flex-end;
/* Зміщуємо вправо */
margin-top: 30px;
margin-bottom: 40px;
padding-right: 20px;
}
.signature-container img {
max-width: 150px;
/* Оптимально для мобільного */
height: auto;
}
/* --- МАРКОВАНІ СПИСКИ --- */
.hub-article ul,
.hub-article ol {
padding-left: 22px;
margin: 28px 0;
}
.hub-article li {
line-height: 1.6;
margin-bottom: 10px;
}
.hub-level-2 ul {
padding-left: 20px;
margin: 20px 0;
}
.hub-level-2 li {
margin-bottom: 12px;
line-height: 1.55;
}
/* --- ТАБЛИЦЯ --- */
.hub-table-container {
width: 100%;
overflow-x: auto;
margin: 44px 0;
-webkit-overflow-scrolling: touch;
}
.hub-table {
width: 100%;
border-collapse: collapse;
font-size: 18px;
line-height: 1.5;
}
.hub-table th,
.hub-table td {
padding: 14px;
text-align: left;
border-bottom: 1.5px solid rgba(212, 196, 168, 0.4) !important;
}
.hub-table th {
font-weight: 600;
background: #F1E9DB;
color: #1A1A1A;
border-bottom: 1px solid rgba(212, 196, 168, 0.2) !important;
text-transform: uppercase;
letter-spacing: 1, 2px;
font-size: 13px;
padding: 11px 15px
}
/* тільки для Hub-2 */
.hub-level-2 .hub-table th:first-child,
.hub-level-2 .hub-table td:first-child {
position: sticky;
left: 0;
}
.hub-level-2 .hub-table th:first-child {
z-index: 3;
background: #F1E9DB;
}
.hub-level-2 .hub-table td:first-child {
z-index: 2;
background: #ffffff;
}
/* легка тінь */
.hub-level-2 .hub-table td:first-child,
.hub-level-2 .hub-table th:first-child {
box-shadow: 4px 0 8px rgba(0, 0, 0, 0.025);
}
/* --- ПОСИЛАННЯ --- */
.hub-article a {
color: #734832;
/* Насичений горіховий колір */
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid rgba(115, 72, 50, 0.3);
/* Тонка напівпрозора лінія */
transition: all 0.3s ease;
padding-bottom: 3px;
}
.hub-article a:hover,
.hub-article a:active {
color: #2D2D2D;
/* Майже чорний для чіткого акценту */
border-bottom: 1px solid #2D2D2D;
/* Лінія стає чіткою */
opacity: 0.8;
}
/* Заборона посилань у специфічних блоках */
.hub-article h1 a,
.hub-article h2 a,
.hub-article h3 a,
.hub-lead a,
.hub-callout a,
.hub-quote a,
.hub-seo a {
pointer-events: none;
text-decoration: none;
}
/* --- АВТОРСЬКИЙ ПІДПИС --- */
.hub-author {
margin-top: 15px;
margin-bottom: 36px;
}
.hub-author-name {
font-size: 18px;
font-weight: 400;
font-style: italic;
margin-bottom: -5px;
color: #222222;
padding-left: 105px;
}
.hub-author-role {
font-size: 16px;
opacity: 1;
line-height: 1.4;
color: #555555;
font-style: italic;
margin-left: 105px;
}
/* --- AI/SEO БЛОК --- */
.hub-seo {
font-size: 15px;
line-height: 1.7;
opacity: 0.85;
letter-spacing: 0.02em;
color: #8E8E93;
font-style: italic;
margin-top: 120px;
margin-bottom: 100px;
padding-top: 65px;
border-top: 1px solid #e8e8e8;
}
.hub-level-2 .hub-seo {
font-size: 14px;
margin-top: 120px;
padding-top: 40px;
}
.hub-article .zagolovok-seo {
line-height: 1.5;
font-weight: 400;
color: #2A2A2A;
opacity: 0.85;
font-size: 20px;
}
/* --- BACKGROUNDS --- */
.bg-base {
background-color: var(--bg-base);
}
.bg-section {
background-color: inherit;
/* background-color: var(--bg-section);*/
}
.bg-photo {
background-color: inherit;
/* var(--bg-photo);*/
}
/* --- INTRO BLOCKS --- */
.hub-intro-2 {
margin-top: 50px;
padding-left: 25px;
font-style: italic;
}
.hub-video-intro {
max-width: 66%;
font-size: 17px;
line-height: 1.55;
font-style: italic;
color: #6a6a6a;
}
.hub-article p.hub-video-intro {
margin-bottom: 12px;
}
/* --- VIDEO EMBED (VIMEO) --- */
.hub-video-embed {
position: relative;
padding-top: 125%;
overflow: hidden;
}
.hub-video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hub-video-poster-overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 1;
transition: opacity 400ms ease;
will-change: opacity;
}
.hub-video-poster-overlay.is-fading {
opacity: 0;
}
.premium-photo-blur {
/* Маска починається дуже низько, зберігаючи чіткість моделі */
-webkit-mask-image: linear-gradient(to bottom,
rgba(0, 0, 0, 1) 0%,
/* Повна чіткість від самого верху */
rgba(0, 0, 0, 1) 92%,
/* Чіткість зберігається до 92% висоти фото */
rgba(0, 0, 0, 0) 100%
/* Швидке, але м'яке зникнення в самому низу */
);
mask-image: linear-gradient(to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 92%,
rgba(0, 0, 0, 0) 100%);
}
.photo-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom,
rgba(0, 0, 0, 1) 0%,
/* Повна чіткість від початку */
rgba(0, 0, 0, 1) 99%,
/* Чіткість зберігається майже до самого кінця */
rgba(0, 0, 0, 0) 100%
/* Швидке розмиття лише на останніх 5% висоти */
);
mask-image: linear-gradient(to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 99%,
rgba(0, 0, 0, 0) 100%);
}
/* =========================================
DESKTOP АДАПТАЦІЯ (від 768px)
========================================= */
@media (min-width: 768px) {
.hub-video-wrapper {
max-width: 600px;
}
.hub-article {
padding: 0 40px;
max-width: min(1200px, 90vw);
margin: 0 auto;
}
.hub-article h1 {
margin-top: 48px;
margin-bottom: 24px;
}
.hub-level-1 h1 {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-size: 29px;
line-height: 40px;
background: radial-gradient(102.83% 5471.85% at 102.83% 121.25%,
#1F120B 0%,
#3D2416 15.44%,
#5C3A28 24.8%,
#7B5A44 37.02%,
#F2E2BA 48.66%,
#D4B673 57.62%,
#B3853D 68.82%,
#1F120B 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hub-level-2 h1 {
font-size: 42px;
}
.hub-level-3 h1 {
font-size: 40px;
}
.hub-level-1 .hub-lead,
.hub-level-2 .hub-lead,
.hub-level-3 .hub-lead {
font-size: inherit;
line-height: inherit;
margin-bottom: 40px;
}
.hub-article h2 {
margin-top: 104px;
margin-bottom: 44px;
}
.hub-level-1 h2 {
font-size: 32px;
}
.hub-level-2 h2,
.hub-level-3 h2 {
font-size: 30px;
}
.hub-article h3 {
margin-top: 72px;
margin-bottom: 28px;
}
.hub-level-1 h3 {
font-size: 26px;
}
.hub-level-2 h3,
.hub-level-3 h3 {
font-size: 24px;
}
.hub-video-container {
margin: 64px 0;
}
.hub-callout {
margin: 40px 0;
padding-left: 24px;
}
.hub-level-1 .hub-callout {
font-size: 23px;
}
.hub-level-2 .hub-callout,
.hub-level-3 .hub-callout {
font-size: 22px;
}
.hub-quote {
margin: 72px 0;
padding-left: 28px;
}
.hub-level-1 .hub-quote-text {
font-size: 28px;
}
.hub-level-2 .hub-quote-text,
.hub-level-3 .hub-quote-text {
font-size: 26px;
}
.hub-table-container {
margin: 56px 0;
}
.hub-table {
font-size: 19px;
}
.hub-table th,
.hub-table td {
padding: 16px;
}
}
/* =========================================
DIGITAL EDITORIAL: DESKTOP GRID SYSTEM
Цифровий глянець з 12-колонковою сіткою
========================================= */
/* Підключення типографіки */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap');
/* =========================================
DESKTOP ADAPTATION (від 1024px)
========================================= */
@media (min-width: 1024px) {
/* Контейнер та базова структура з Grid */
.hub-article {
padding: 0 60px;
padding-top: 120px;
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 30px;
row-gap: 0;
max-width: 1600px;
margin: 0 auto;
--hub-flow-column: 3 / 11;
--hub-flow-max-width: 900px;
}
/* Всі прямі діти grid - full width по замовчуванню */
.hub-article>* {
grid-column: 1 / -1;
}
/* Єдина стабільна колонка для flow-контенту */
.hub-article>h2,
.hub-article>h3,
.hub-article>p,
.hub-article>ul,
.hub-article>ol,
.hub-article>.hub-seo {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
}
/* =========================================
ТИПОГРАФІКА: SERIF + SANS-SERIF
========================================= */
/* Заголовки та цитати - Serif */
.hub-article h1,
.hub-article h2,
.hub-quote-text,
.hub-callout {
font-family: 'Playfair Display', 'Cormorant Garamond', serif;
}
/* Основний текст - Sans-serif */
.hub-article,
.hub-article p,
.hub-article li,
.hub-subtitle,
.hub-lead,
.hub-video-caption {
font-family: 'Montserrat', 'Inter', sans-serif;
line-height: 1.8;
letter-spacing: 0.02em;
}
/* =========================================
БЛОК 1: ВСТУПНИЙ МАНІФЕСТ
Текст зліва (col 2-6) + Відео справа (col 8-11)
========================================= */
/* Wrapper для першого блоку */
.hub-intro-block-1 {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 30px;
margin-bottom: 200px;
grid-column: 1 / -1;
}
/* H1 - центрований wide */
.hub-level-1 h1:first-of-type {
grid-column: 2 / 12;
font-size: 72px;
letter-spacing: -0.02em;
text-align: center;
margin: 0 auto 40px;
line-height: 1.1;
}
/* Subtitle - центрований */
.hub-intro-block-1 .hub-subtitle {
grid-column: 3 / 11;
text-align: center;
font-size: 22px;
margin-bottom: 100px;
}
/* Lead текст - ліва колонка */
.hub-intro-block-1 .hub-lead {
grid-column: 2 / 8;
position: static;
top: auto;
align-self: start;
}
/* Відео - права колонка */
.hub-intro-block-1 .hub-video-container-in {
grid-column: 8 / 12;
margin: 0;
}
/* =========================================
БЛОК 2: ЦИТАТА ЗАСНОВНИКА
Цитата по центру (col 4-9) + Підпис зміщений
========================================= */
.hub-intro-2 {
grid-column: 4 / 10;
text-align: center;
margin: 170px 0 26px;
padding: 0;
font-style: normal;
font-size: 20px;
}
.signature-container {
grid-column: 8 / 11;
display: flex;
justify-content: flex-end;
transform: translateX(22px) translateY(-16px);
margin: 0 0 180px 0;
padding: 0;
}
.signature-container img {
max-width: 200px;
height: auto;
}
/* =========================================
БЛОК 3: FULL-WIDTH PARALLAX IMAGE
========================================= */
.hub-parallax {
grid-column: 1 / -1;
width: 100%;
margin: 0 0 200px 0;
overflow: hidden;
position: relative;
left: auto;
right: auto;
margin-left: 0;
margin-right: 0;
}
.hub-parallax img {
width: 100%;
display: block;
transform: translate3d(0, var(--parallax-offset, 0), 0);
will-change: transform;
}
/* =========================================
БЛОК 5: ПАУЗА (FULL-SCREEN ЦИТАТА)
Цитата Софі Лорен - центр екрану
========================================= */
.hub-quote {
grid-column: 3 / 11;
text-align: center;
margin: 220px 0;
padding: 0;
border: none;
border-top: 1px solid rgba(177, 143, 92, 0.3);
border-bottom: 1px solid rgba(177, 143, 92, 0.3);
padding: 80px 0;
}
.hub-quote-text {
font-family: 'Playfair Display', serif;
font-size: 48px;
font-style: italic;
font-weight: 400;
line-height: 1.4;
margin: 0 0 30px;
color: #2D2D2D;
padding: 0;
}
.hub-quote-author {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
opacity: 0.7;
}
/* =========================================
БЛОК 6: ТЕХНОЛОГІЯ BIOLINE (ТЕКСТ + МАКРО ВІДЕО)
Текст зліва (col 3-6) + Відео справа (col 7-12)
========================================= */
.hub-tech-block {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 40px;
grid-column: 1 / -1;
margin: 200px 0;
align-items: start;
}
.hub-tech-block h2 {
grid-column: 3 / 7;
position: sticky;
top: 15%;
align-self: start;
}
.hub-tech-block p {
grid-column: 3 / 7;
position: sticky;
top: 25%;
}
.hub-tech-block .hub-video-container {
grid-column: 7 / 13;
margin: 0;
}
/* =========================================
БЛОК 7: ФІНАЛ (ФОТО + ТЕКСТ)
Фото зліва (col 2-5) + Цитата справа (col 7-10)
========================================= */
.hub-final-block {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 50px;
grid-column: 1 / -1;
margin: 200px 0 120px;
align-items: center;
}
.hub-final-photo {
grid-column: 2 / 6;
}
.hub-final-text {
grid-column: 7 / 11;
}
/* =========================================
CALLOUT - ЦЕНТРОВАНИЙ З РАМКАМИ
========================================= */
.hub-callout {
grid-column: 3 / 11;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 28px;
line-height: 1.4;
font-weight: 500;
margin: 180px auto 80px;
padding: 60px 40px;
border: none;
border-top: 1px solid #B18F5C;
border-bottom: 1px solid #B18F5C;
}
/* =========================================
АВТОР - ВИРІВНЮВАННЯ СПРАВА
========================================= */
.hub-author {
grid-column: 8 / 12;
text-align: right;
margin: 60px 0 120px;
}
.hub-author-name {
font-size: 20px;
margin: 0;
padding: 0;
}
.hub-author-role {
font-size: 16px;
margin: 5px 0 0;
padding: 0;
}
/* =========================================
ЗАГОЛОВКИ H2, H3 - ОБМЕЖЕНА ШИРИНА
========================================= */
.hub-article h2 {
font-family: 'Playfair Display', serif;
font-size: 42px;
line-height: 1.25;
font-weight: 600;
margin-top: 180px;
margin-bottom: 50px;
text-align: left;
}
.hub-article h3 {
font-family: 'Playfair Display', serif;
font-size: 28px;
line-height: 1.35;
font-weight: 500;
margin-top: 100px;
margin-bottom: 35px;
}
/* =========================================
ТЕКСТОВІ БЛОКИ - ЦЕНТРАЛЬНА КОЛОНКА
========================================= */
.hub-article p {
font-size: 20px;
line-height: 1.8;
margin-bottom: 28px;
}
.hub-article ul,
.hub-article ol {
padding-left: 30px;
margin: 40px auto;
}
.hub-article li {
line-height: 1.75;
margin-bottom: 18px;
font-size: 19px;
}
/* =========================================
ВІДЕО-КОНТЕЙНЕРИ (SPLIT LAYOUT)
========================================= */
.hub-video-container {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 40px;
margin: 120px 0;
align-items: start;
}
/* Default: Відео зліва, текст справа */
.hub-video-container:not(.hub-video-split--text-left) .hub-video-wrapper {
grid-column: 2 / 7;
grid-row: 1 / span 2;
}
.hub-video-container:not(.hub-video-split--text-left) .hub-video-label {
grid-column: 8 / 12;
grid-row: 1;
margin-top: 0;
}
.hub-video-container:not(.hub-video-split--text-left) .hub-video-caption {
grid-column: 2 / 7;
grid-row: 3;
margin-top: 18px;
}
.hub-video-container:not(.hub-video-split--text-left) .hub-video-text {
grid-column: 8 / 12;
grid-row: 2;
align-self: start;
margin-top: 0;
}
/* Text-left variant: Текст зліва, відео справа */
.hub-video-split--text-left .hub-video-text {
grid-column: 2 / 6;
grid-row: 2;
align-self: start;
margin-top: 0;
}
.hub-video-split--text-left .hub-video-wrapper {
grid-column: 7 / 12;
grid-row: 2;
}
.hub-video-split--text-left .hub-video-label {
grid-column: 7 / 12;
grid-row: 1;
}
.hub-video-split--text-left .hub-video-caption {
grid-column: 7 / 12;
grid-row: 3;
margin-top: 20px;
}
.hub-video-wrapper {
max-width: 100%;
position: relative;
}
.hub-video-embed {
position: relative;
padding-top: 125%;
/* 4:5 aspect ratio */
overflow: hidden;
}
.hub-video-embed-2 {
position: relative;
padding-top: 125%;
}
.hub-video-embed iframe,
.hub-video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: none;
}
.hub-video-label {
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
opacity: 0.70;
font-weight: 500;
margin-bottom: 15px;
}
.hub-video-caption {
font-size: 16px;
line-height: 1.6;
color: #6A6A6A;
opacity: 0.85;
}
.hub-video-fill {
font-size: 17px;
line-height: 1.65;
color: #5F5F5F;
}
/* =========================================
ТАБЛИЦЯ - ЦЕНТРОВАНА
========================================= */
.hub-table-container {
grid-column: 3 / 11;
max-width: 1000px;
margin: 80px auto;
overflow-x: auto;
}
.hub-table {
width: 100%;
font-size: 18px;
}
.hub-table th,
.hub-table td {
padding: 28px 35px;
text-align: left;
}
.hub-table th {
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
}
/* =========================================
SEO БЛОК - ФУТЕР
========================================= */
.hub-seo {
font-size: 15px;
line-height: 1.8;
opacity: 0.80;
margin: 180px auto 100px;
padding-top: 80px;
border-top: 1px solid #E0E0E0;
}
/* =========================================
АНІМАЦІЇ ТА ЕФЕКТИ
========================================= */
/* Fade-in для елементів з класом .animate */
.animate {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.animate.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Parallax ефект для зображень */
.hub-parallax {
position: relative;
overflow: hidden;
}
.hub-parallax img {
transform: translate3d(0, var(--parallax-offset, 0), 0);
will-change: transform;
}
/* =========================================
СЕКЦІЙНІ ВІДСТУПИ (WHITESPACE)
========================================= */
/* Великі проміжки між основними секціями */
.hub-article h2:not(:first-child) {
margin-top: 200px;
}
.hub-quote+h2,
.hub-video-container+h2 {
margin-top: 220px;
}
/* =========================================
RESPONSIVE ADJUSTMENTS (1200px+)
========================================= */
}
@media (min-width: 1200px) {
.hub-article {
max-width: 1800px;
column-gap: 40px;
}
.hub-level-1 h1:first-of-type {
font-size: 84px;
}
.hub-quote-text {
font-size: 56px;
}
.hub-callout {
font-size: 32px;
padding: 80px 60px;
}
}
.hub-intro {
margin-top: 0;
font-style: italic;
margin-bottom: 48px;
}
.hub-intro p {
font-style: normal;
color: #2D2D2D;
}
.hub-transition {
font-size: 19px;
line-height: 1.6;
letter-spacing: 0.1px;
color: #3A3A3A;
margin: 88px 0 0 0;
}
.editorial-transition {
display: inline-block;
margin-top: 32px;
margin-bottom: 0;
max-width: 23ch;
font-size: 18px;
font-style: italic;
line-height: 1.5;
font-weight: 400;
letter-spacing: 0.01em;
color: rgba(34, 34, 34, 0.66);
}
.hub-transition+h2 {
margin-top: 100px !important;
}
.hub-text-block {
margin-top: 0;
margin-bottom: 0;
}
.hub-text-block p:last-child {
margin-bottom: 0;
}
.hub-summary {
margin-top: 0;
margin-bottom: 0;
}
.hub-summary p:last-child {
margin-bottom: 0;
}
.editorial-note {
font-size: 17px;
line-height: 1.7;
color: #5C5C5C;
font-style: italic;
margin: 36px 0 0 0;
}
.cinematic-final {
font-family: 'Manrope', sans-serif;
font-size: 22px;
line-height: 1.55;
font-weight: 400;
color: #222222;
text-align: left;
margin: 120px 0 0 0;
}
/* --- CTA block --- */
.hub-cta-block {
margin: 56px 0 130px 0;
}
.hub-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 26px;
border: 1px solid #2D2D2D;
color: #2D2D2D;
text-decoration: none;
font-size: 15px;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: all 0.3s ease;
}
.hub-article a.hub-cta-button:hover {
color: #FFFFFF;
background: #2D2D2D;
border-color: #2D2D2D;
border-bottom-color: #2D2D2D;
opacity: 1;
}
/* --- Reassurance scene: warm off-white wrapper --- */
.hub-scene--offwhite {
background: #F6F5F3;
padding: 40px 18px 48px 18px;
}
/* --- Inset video container --- */
.hub-video-container--inset {
width: calc(100% - 24px);
margin-left: auto;
margin-right: auto;
}
/* =========================================
VIDEO RATIOS
Base .hub-video-embed stays vertical 4:5 by default
New modifiers only where needed
========================================== */
/* default vertical 4:5 */
.hub-video-embed--vertical {
padding-top: 125%;
}
/* horizontal 16:9 */
.hub-video-embed--horizontal {
padding-top: 56.25%;
}
/* cinematic wide 3:1 */
.hub-video-embed--cinematic {
padding-top: 33.3333%;
}
/* 3:2 */
.video-fullbleed--3x2 .video-fullbleed__media {
aspect-ratio: 3 / 2;
}
/* 5:4 */
.video-fullbleed--5x4 .video-fullbleed__media {
aspect-ratio: 5 / 4;
}
/* --- Reflection helper --- */
.reflection-caption {
margin-bottom: 0;
}
/* --- Role helpers for new video blocks --- */
.hero-proof-video,
.showroom-video,
.identity-video,
.subtle-parting-video,
.quiet-life-video {
margin-top: 0;
margin-bottom: 0;
}
.hub-article .hub-video-cue {
margin-top: 36px;
margin-bottom: 12px;
font-size: 17px;
line-height: 1.55;
font-style: normal;
letter-spacing: 0;
color: rgba(0, 0, 0, 0.68);
}
.hub-video-cue .hub-video-cue--soft {
font-size: 16px;
line-height: 1.65;
color: rgba(0, 0, 0, 0.7);
margin-top: 24px;
margin-bottom: 40px;
max-width: 420px;
font-style: italic;
}
.hub-video-reflection {
font-size: 17px;
line-height: 1.6;
font-style: italic;
font-weight: 400;
letter-spacing: 0.01em;
margin-top: 20px;
max-width: 460px;
color: rgba(0, 0, 0, 0.62);
}
.cinematic-aside-cue--soft {
font-size: 16px;
line-height: 1.6;
font-weight: 400;
letter-spacing: 0.01em;
color: rgba(0, 0, 0, 0.6);
margin-top: 24px;
margin-bottom: 12px;
max-width: 420px;
}
.hero-proof-video .reflection-soft,
.showroom-video .reflection-soft,
.identity-video .reflection-soft,
.subtle-parting-video .reflection-soft,
.quiet-life-video .reflection-soft {
margin-top: 48px;
}
.hub-link {
margin-bottom: 20px;
}
/* ===============================
ARTICLE FINAL SECTION
Mobile first
=============================== */
.article-final {
margin-top: 64px;
}
/* MANIFEST */
.article-final__manifest p {
margin: 0 0 24px 0;
}
.article-final__manifest p:last-child {
margin-bottom: 0;
}
/* BRIDGE */
.article-final__bridge-title {
margin: 0 0 32px 0;
font-size: 48px;
line-height: 1.18;
letter-spacing: -0.4px;
font-weight: 400;
}
.article-final__bridge-text {
margin: 0 0 20px 0;
}
.article-final__ritual {
margin: 24px 0 88px 0;
}
.hub-article .hub-video-bridge {
margin-top: 28px;
margin-bottom: 12px;
max-width: 66%;
font-size: 16.5px;
line-height: 1.5;
font-weight: 400;
color: #3a3a3a;
}
.hub-article .hub-video-bridge-2 {
margin-top: 70px;
margin-bottom: 12px;
font-size: 15px;
line-height: 1.7;
letter-spacing: 0.01em;
color: #2D2D2D;
opacity: 0.75;
max-width: 30ch;
}
.hub-article .hub-video-bridge-2 + h3 {
margin-top: 0;
}
/* CTA */
.article-final__cta {
margin-bottom: 110px;
}
.article-final__cta .hub-cta-button {
display: inline-flex;
justify-content: center;
align-items: center;
}
/* NAV */
.article-final__nav-title {
margin: 0 0 24px 0;
}
.article-final__nav-links {
display: flex;
flex-direction: column;
gap: 20px;
}
.vstup {
margin-bottom: 40px;
font-weight: 400;
font-size: 20px;
line-height: 1.6;
}
.waga500 {
font-weight: 500;
}
.pb18 {
padding-bottom: 18px;
}
/* FULL-BLEED VIDEO 4:5 */
.hub-video-wrapper--fullbleed {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
max-width: 100vw;
margin-top: 72px;
margin-bottom: 72px;
}
.hub-video-wrapper--fullbleed .hub-video-embed {
position: relative;
width: 100%;
overflow: hidden;
line-height: 0;
background: transparent;
}
.hub-video-wrapper--fullbleed .hub-video-embed--vertical {
aspect-ratio: 4 / 5;
}
.hub-video-wrapper--fullbleed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* =========================
WIDE FULL-BLEED VIDEO BLOCK
Editorial implementation
========================= */
.hub-video-block--wide {
margin: 35px 0;
}
/* ----- captions ----- */
.hub-video-block--wide .hub-video-caption {
max-width: var(--hub-text-width, 640px);
margin-left: auto;
margin-right: auto;
text-align: left;
}
.hub-video-caption--above {
margin-bottom: 24px;
}
.hub-video-caption--below {
margin-top: 28px;
}
/* ----- full-bleed video ----- */
.hub-video-embed--wide {
aspect-ratio: 16 / 9;
/* або інша потрібна пропорція */
}
/* 1) ultra narrow strip */
.hub-video-embed--ultra-narrow {
aspect-ratio: 12 / 5;
/* 2.4:1 */
}
/* 2) wider horizontal */
.hub-video-embed--wide-life {
aspect-ratio: 19 / 10;
/* 1.9:1 */
}
.hub3-quote {
max-width: 540px;
margin: 68px 0 68px 12%;
padding: 10px 0 10px 24px;
border-left: 1px solid #CBB37E;
}
.hub3-quote-text {
font-size: 19px;
line-height: 1.6;
font-style: italic;
font-weight: 400;
letter-spacing: 0.01em;
color: #6C6C6C;
}
.hub3-quote-author {
margin-top: 14px;
font-size: 15px;
line-height: 1.4;
font-style: italic;
font-weight: 400;
letter-spacing: 0.03em;
color: #C0A56F;
}
/* Відео на всю ширину екрану */
.video-fullbleed {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.video-fullbleed__media {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #f4f2ef;
}
.video-fullbleed__media iframe,
.video-fullbleed__media video {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.video-fullbleed__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
box-shadow:
inset 0 1px 0 rgba(210, 205, 200, 0.16),
inset 0 0 0 1px rgba(210, 205, 200, 0.12),
inset 0 -34px 60px rgba(210, 205, 200, 0.14),
inset 18px 0 28px rgba(210, 205, 200, 0.05),
inset -18px 0 28px rgba(210, 205, 200, 0.05),
inset 0 18px 36px rgba(210, 205, 200, 0.08);
}
.editorial-final-thought {
font-size: 18px;
font-weight: 400;
font-style: italic;
line-height: 1.6;
opacity: 0.8;
max-width: 28ch;
margin-top: 72px;
margin-bottom: 64px;
}
.hub-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 12px;
height: 12px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.72;
background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 7.1L5.75 9.55L10.8 4.6' stroke='%232A2A2A' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hub-list {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 56px;
}
.hub-list li {
position: relative;
margin-bottom: 18px;
padding-left: 28px;
font-size: 19px;
line-height: 1.72;
letter-spacing: 0.01em;
color: #2A2A2A;
}
.hub-list li:last-child {
margin-bottom: 0;
}
.hub-level-3.hub-technical h3 {
margin-top: 44px;
margin-bottom: 18px;
}
.hub-level-3.hub-technical h3 + p,
.hub-level-3.hub-technical h3 + ul {
margin-top: 0;
}
.hub-level-3.hub-technical p + p {
margin-top: 22px;
}
.hub-level-3.hub-technical p + .hub-list,
.hub-level-3.hub-technical ul.hub-list {
margin-top: 18px;
}
.hub-technical ul {
margin-bottom: 130px;
}
.hub-level-3.hub-technical .hub-list + p {
margin-top: 22px;
}
.hub-level-3.hub-technical .hub-list li + li {
margin-top: 14px;
}
.hub-level-3.hub-technical .hub-seo {
margin-top: 100px;
}
.hub-related-materials {
margin-top: 36px;
margin-bottom: 0;
}
.hub-related-materials li + li {
margin-top: 24px;
}
.hub-related-materials a,
.hub-related-materials span {
display: inline;
font-size: inherit;
line-height: inherit;
}
.hub-related-materials a {
text-decoration-thickness: 1px;
text-underline-offset: 0.14em;
}
.hub-related-note {
margin-top: 44px;
}
/* =========================================
ДЕСКТОП-АДАПТАЦІЯ: Ціна і цінність виробів Voevodins
Націлено тільки на .hub-level-3.hub-technical
Не чіпає мобільну версію і не впливає на інші статті
!!! ВАЖЛИВО ДЛЯ РОЗРОБНИКА !!!
Цей блок додається В САМОМУ КІНЦІ CSS-файлу,
ПІСЛЯ всіх існуючих @media-блоків.
Не вставляти всередину іншого @media.
========================================= */
/* ПОЧАТОК БЛОКУ --- не видаляти цю лінію */
@media (min-width: 1024px) {
/* --- ТИТУЛЬНА ШАПКА: H1 + subtitle + редакційний підпис --- */
/* Центруємо, щоб шапка читалась як єдиний блок над вступом */
.hub-level-3.hub-technical h1 {
text-align: center;
font-size: 52px;
line-height: 1.15;
margin-top: 40px;
margin-bottom: 24px;
}
.hub-level-3.hub-technical .hub-subtitle {
text-align: center;
margin-bottom: 16px;
}
.hub-level-3.hub-technical .redaktsiinyi-material {
text-align: center;
margin-bottom: 64px;
}
/* --- ЩІЛЬНІШИЙ РИТМ МІЖ H2 --- */
/* Базове значення 200px — це кіно-ритм для статей з відео/фото.
Для суто текстової технічної статті занадто багато повітря. */
.hub-level-3.hub-technical h2 {
font-size: 34px;
line-height: 1.3;
margin-top: 100px;
margin-bottom: 32px;
}
.hub-level-3.hub-technical h2:not(:first-child) {
margin-top: 100px;
}
/* --- ПАРАГРАФИ: щільніший вертикальний ритм --- */
.hub-level-3.hub-technical p {
font-size: 19px;
line-height: 1.75;
margin-bottom: 22px;
}
/* --- АКЦЕНТНІ ПАРАГРАФИ (hub-semi-bold) --- */
/* Додаємо невеликий вертикальний простір навколо,
щоб виділялися без зайвого декору */
.hub-level-3.hub-technical p.hub-semi-bold {
margin-top: 28px;
margin-bottom: 28px;
}
/* --- CTA БЛОК --- */
.hub-level-3.hub-technical .hub-cta-block {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
margin-top: 48px;
margin-bottom: 120px;
}
/* --- SEO БЛОК --- */
/* Вирівнюємо по тій самій центральній колонці,
щоб не зсувався відносно основного тексту */
.hub-level-3.hub-technical .hub-seo {
margin-top: 100px;
margin-bottom: 80px;
padding-top: 56px;
}
.hub-level-3.hub-technical .hub-seo h3.zagolovok-seo {
font-size: 18px;
margin-top: 0;
margin-bottom: 20px;
}
.hub-level-3.hub-technical .hub-seo p {
font-size: 15px;
line-height: 1.75;
margin-bottom: 16px;
}
}
/* КІНЕЦЬ БЛОКУ --- не видаляти цю лінію */
/* =========================================
DESKTOP-АДАПТАЦІЯ СТАТТІ ПРО Voevodins BioLine™
Працює тільки від 1024px. Мобільну версію не змінює.
========================================= */
@media (min-width: 1024px) {
/* -----------------------------------------
1. ШАПКА СТАТТІ: H1, SUBTITLE, ВСТУП
Усі елементи у тих самих колонках, що й основний текст
----------------------------------------- */
/* H1 — у flow-колонці, центрований */
.hub-article > h1 {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* На мобайлі H1 розбивається через
. На десктопі ховаємо
*/
.hub-article > h1 br {
display: none;
}
/* Subtitle — у flow-колонці, центрований */
.hub-article > .hub-subtitle {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Редакційний підпис — у flow-колонці */
.hub-article > .redaktsiinyi-material {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
}
/* Вступ (.vstup) — у flow-колонці */
.hub-article > .vstup {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
}
/* -----------------------------------------
2. ВІДЕО-БЛОКИ: ЗАГАЛЬНІ ВІДСТУПИ
----------------------------------------- */
.hub-article > .hub-video-container {
margin-top: 120px;
margin-bottom: 120px;
}
/* -----------------------------------------
3. БЛОКИ 1 і 3: ВЕРТИКАЛЬНЕ ВІДЕО + ПІДПИСИ
Композиція:
- верхній підпис (cinematic-aside / cinematic-statement) → ліворуч, верх
- вертикальне відео (hub-video-wrapper) → праворуч, на 2 рядки
- нижній підпис (reflection-soft / cinematic-whisper) → ліворуч, низ
----------------------------------------- */
/* Верхні підписи — ліва колонка, рядок 1 */
.hub-article .hub-video-split--text-left > .cinematic-aside,
.hub-article .hub-video-split--text-left > .cinematic-statement {
grid-column: 2 / 6;
grid-row: 1;
align-self: start;
margin: 0;
max-width: 360px;
}
/* Вертикальне відео — права колонка, обидва рядки */
.hub-article .hub-video-split--text-left > .hub-video-wrapper {
grid-column: 7 / 12;
grid-row: 1 / span 2;
max-width: 100%;
align-self: stretch;
}
/* Нижні підписи — ліва колонка, рядок 2 */
.hub-article .hub-video-split--text-left > .reflection-soft,
.hub-article .hub-video-split--text-left > .cinematic-whisper {
grid-column: 2 / 6;
grid-row: 2;
align-self: end;
margin: 0;
max-width: 360px;
}
/* -----------------------------------------
4. БЛОК 2: ГОРИЗОНТАЛЬНЕ ШИРОКЕ ВІДЕО
Композиція:
- верхній підпис (cinematic-macro) → центральна flow-колонка
- відео (video-fullbleed) → 85vw з обмеженням по висоті 75vh
- нижній підпис (cinematic-close) → центральна flow-колонка
----------------------------------------- */
/* Верхній підпис — у flow-колонці */
.hub-article .hub-video-split--text-left > .cinematic-macro {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin: 0 auto 48px auto;
padding: 0;
text-align: left;
justify-self: center;
}
/* Зовнішній блок: ширина 85vw, обмеження по висоті через ширину */
.hub-article .hub-video-split--text-left > .video-fullbleed {
grid-column: 1 / -1;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 85vw;
max-width: min(1400px, calc(75vh * 5 / 4));
margin: 0;
}
/* __media: aspect-ratio 5/4. Висота вираховується автоматично.
Бежевий фон і рамка через ::after лишаються (з базового CSS). */
.hub-article .hub-video-split--text-left .video-fullbleed--5x4 > .video-fullbleed__media {
width: 100%;
height: auto;
aspect-ratio: 5 / 4;
}
/* Iframe: розтягнутий на повну ширину/висоту __media,
щоб закривав бежевий фон, а рамка лишалася по краях */
.hub-article .hub-video-split--text-left .video-fullbleed > .video-fullbleed__media iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
object-fit: cover;
}
/* Нижній підпис — у flow-колонці */
.hub-article .hub-video-split--text-left > .cinematic-close {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin: 48px auto 0 auto;
padding: 0;
text-align: left;
justify-self: center;
}
/* -----------------------------------------
5. ЦИТАТА МАКСИМА ВОЄВОДІНА
Повертаємо мобільний стиль: вертикальна золотиста лінія зліва.
Перебиваємо десктопні правила .hub-quote (центр + горизонтальні лінії).
----------------------------------------- */
.hub-article > .hub-quote {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
text-align: left;
border: none;
border-left: 1px solid #B18F5C;
padding: 0 0 0 35px;
margin-top: 100px;
margin-bottom: 100px;
}
.hub-article > .hub-quote p {
font-family: 'Playfair Display', serif;
font-size: 24px;
line-height: 1.5;
font-style: italic;
font-weight: 400;
color: #5A5A5A;
text-align: left;
margin: 0 0 16px 0;
padding: 0;
}
.hub-article > .hub-quote .hub-quote-author {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
letter-spacing: 0.06em;
text-transform: none;
text-align: left;
color: #B18F5C;
opacity: 1;
font-weight: 400;
}
/* -----------------------------------------
6. SEO-БЛОК — у flow-колонці
----------------------------------------- */
.hub-article > .hub-seo {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
margin-top: 120px;
margin-bottom: 80px;
}
/* -----------------------------------------
7. СКОРОЧЕНІ ВЕРТИКАЛЬНІ ВІДСТУПИ
Базовий CSS дає 220px між відео/цитатою і H2 — це забагато.
----------------------------------------- */
.hub-article > .hub-video-container + h2 {
margin-top: 100px;
}
.hub-article > .hub-quote + h2 {
margin-top: 100px;
}
/* -----------------------------------------
8. CTA-БЛОК І ФІНАЛЬНИЙ ПІДПИС
----------------------------------------- */
/* CTA-блок — у flow-колонці, кнопка центрована */
.hub-article > .hub-cta-block {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
margin-top: 48px;
margin-bottom: 100px;
text-align: center;
}
/* Фінальний підпис — у flow-колонці */
.hub-article > .editorial-final-thought {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
}
/* -----------------------------------------
9. ФІНАЛЬНА ТИПОГРАФІЧНА ШЛІФОВКА
----------------------------------------- */
/* H1 — збільшуємо вагу і розмір, щоб домінував над H2 */
.hub-article > h1 {
font-size: 56px;
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.01em;
}
/* H2 — робимо легшими за вагою і кольором, щоб не перекрикували H1 */
.hub-article > h2 {
font-size: 34px;
line-height: 1.3;
font-weight: 500;
color: #2A2A2A;
letter-spacing: -0.005em;
}
/* Цитата — виразніша: вужча ширина, більший кегль, зміщення вправо */
.hub-article > .hub-quote {
max-width: 640px;
margin-left: 14%;
margin-right: auto;
margin-top: 100px;
margin-bottom: 100px;
}
.hub-article > .hub-quote p {
font-size: 28px;
line-height: 1.45;
}
/* Скорочення відстані між CTA і SEO-блоком */
.hub-article > .hub-cta-block {
margin-bottom: 60px;
}
.hub-article > .hub-seo {
margin-top: 80px;
}
/* -----------------------------------------
10. ФІНАЛЬНА ТИПОГРАФІЧНА ШЛІФОВКА — ЕТАП 2
----------------------------------------- */
/* Subtitle — більш вагомий, частина editorial-шапки */
.hub-article > .hub-subtitle {
font-size: 24px;
line-height: 1.45;
font-weight: 400;
color: #2D2D2D;
letter-spacing: 0.005em;
}
/* SEO-блок — курсив зберігаємо (як на мобайлі),
виправляємо тільки внутрішню ієрархію */
/* SEO заголовок — більший і вагоміший */
.hub-article > .hub-seo .zagolovok-seo {
font-size: 22px;
line-height: 1.4;
font-weight: 500;
font-style: italic;
color: #4A4A4A;
opacity: 1;
margin-top: 0;
margin-bottom: 24px;
}
/* SEO-текст — спокійніший, як пояснення */
.hub-article > .hub-seo p {
font-size: 15px;
line-height: 1.7;
font-weight: 400;
font-style: italic;
color: #8E8E93;
margin-bottom: 18px;
}
}
/* =========================================
DESKTOP-АДАПТАЦІЯ СТАТТІ «ПЕРУКА ПІСЛЯ ХІМІОТЕРАПІЇ»
Працює тільки від 1024px. Мобільну версію не змінює.
ВАЖЛИВО ДЛЯ РОЗРОБНИКА:
Цей блок додається В САМОМУ КІНЦІ CSS-файлу,
ПІСЛЯ всіх існуючих @media-блоків.
Не вставляти всередину іншого @media.
Структура статті — 4 відео-блоки:
БЛОК 1 (Природна пластика) — двоколонка з підписами зверху і знизу.
Підписи .cinematic-aside / .reflection-soft → колонки 2/5 ліворуч.
Відео .hub-video-wrapper → колонки 6/12 праворуч (велике).
БЛОК 2 (Починати не обов'язково) — двоколонка, fullbleed-вертикальне.
Підпис .hub-video-intro → колонки 2/5 ліворуч (21px italic).
Відео .video-fullbleed → колонки 6/13 праворуч (велике, до правого краю).
БЛОК 3 (Як виглядає проділ) — підпис .hub-video-label зовні зверху,
контейнер з відео, підпис .hub-video-bridge-2 зовні знизу.
БЛОК 4 (І тоді з'являється спокій) — підпис .hub-video-cue зовні зверху,
контейнер з відео, підпис .hub-video-reflection зовні знизу.
Бежевий фон і рамка .video-container переносяться з зовнішнього
контейнера всередину на .hub-video-wrapper — щоб рамка обводила
лише саме відео, а підпис ліворуч стояв на чистому білому.
========================================= */
/* =========================================
DESKTOP-АДАПТАЦІЯ HUB-2
Стаття "Перука після хіміотерапії"
Працює тільки від 1024px. Мобільну версію не змінює.
Принципи:
— без !important, без :has(), без нових класів
— Manrope для H1/H2/H3
— шапка центрована у flow-колонці
— тіло статті вирівняне ліворуч
— Відео 1 використовує універсальний шаблон
hub-video-split--vertical
— Відео 2, 3, 4 — на мобайлі лишаються широкоформатними
(video-fullbleed), на десктопі скасовуємо повноекранність
і ставимо в композицію 2/5 (підписи) + 5/12 (відео)
— Бежевий фон #e8e0cc для всіх трьох відео на білому студійному фоні
========================================= */
/* ПОЧАТОК БЛОКУ ХІМІОТЕРАПІЯ --- не видаляти */
@media (min-width: 1024px) {
/* -----------------------------------------
1. ТИПОГРАФІЧНА ІЄРАРХІЯ HUB-2
H1, H2, H3 — у Manrope (підстраховка від базового CSS).
----------------------------------------- */
.hub-article.hub-level-2 > h1,
.hub-article .hub-level-2 > h1,
.hub-article.hub-level-2 > h2,
.hub-article .hub-level-2 > h2,
.hub-article.hub-level-2 > h3,
.hub-article .hub-level-2 > h3 {
font-family: 'Manrope', sans-serif;
}
.hub-article.hub-level-2 > h1,
.hub-article .hub-level-2 > h1 {
font-size: 52px;
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.01em;
}
.hub-article.hub-level-2 > h2,
.hub-article .hub-level-2 > h2 {
font-size: 30px;
line-height: 1.3;
font-weight: 500;
letter-spacing: -0.005em;
color: #2A2A2A;
}
.hub-article.hub-level-2 > h3,
.hub-article .hub-level-2 > h3 {
font-size: 24px;
line-height: 1.35;
font-weight: 500;
color: #2A2A2A;
}
/* -----------------------------------------
2. ШАПКА СТАТТІ — ЦЕНТРОВАНА У FLOW-КОЛОНЦІ
Subtitle, редакційний підпис, hub-lead, hub-intro
явно прив'язуємо до flow-колонки 3/11.
----------------------------------------- */
.hub-article.hub-level-2 > .hub-subtitle,
.hub-article .hub-level-2 > .hub-subtitle,
.hub-article.hub-level-2 > .redaktsiinyi-material,
.hub-article .hub-level-2 > .redaktsiinyi-material,
.hub-article.hub-level-2 > .hub-lead,
.hub-article .hub-level-2 > .hub-lead,
.hub-article.hub-level-2 > .hub-intro,
.hub-article .hub-level-2 > .hub-intro {
grid-column: 3 / 11;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Зменшений відступ між шапкою (hub-intro / hub-lead)
і першим відеоблоком */
.hub-article.hub-level-2 > .hub-intro + .hub-video-container,
.hub-article .hub-level-2 > .hub-intro + .hub-video-container,
.hub-article.hub-level-2 > .hub-lead + .hub-video-container,
.hub-article .hub-level-2 > .hub-lead + .hub-video-container {
margin-top: 60px;
}
/* -----------------------------------------
3. ТІЛО СТАТТІ — ЛІВЕ ВИРІВНЮВАННЯ
H2, H3, параграфи, списки, акценти — ліворуч у flow-колонці.
----------------------------------------- */
.hub-article.hub-level-2 > h2,
.hub-article .hub-level-2 > h2,
.hub-article.hub-level-2 > h3,
.hub-article .hub-level-2 > h3,
.hub-article.hub-level-2 > p,
.hub-article .hub-level-2 > p,
.hub-article.hub-level-2 > ul,
.hub-article .hub-level-2 > ul,
.hub-article.hub-level-2 > ol,
.hub-article .hub-level-2 > ol {
margin-left: 0;
margin-right: auto;
text-align: left;
}
/* Виділення/акценти у тілі — теж ліворуч */
.hub-article.hub-level-2 > .aktsentna-fraza,
.hub-article .hub-level-2 > .aktsentna-fraza,
.hub-article.hub-level-2 > .aktsentna-fraza-2,
.hub-article .hub-level-2 > .aktsentna-fraza-2,
.hub-article.hub-level-2 > .hub-semi-bold-vidstup,
.hub-article .hub-level-2 > .hub-semi-bold-vidstup,
.hub-article.hub-level-2 > .hub-bold-medium-vidstup,
.hub-article .hub-level-2 > .hub-bold-medium-vidstup,
.hub-article.hub-level-2 > .editorial-transition,
.hub-article .hub-level-2 > .editorial-transition,
.hub-article.hub-level-2 > .editorial-soft,
.hub-article .hub-level-2 > .editorial-soft,
.hub-article.hub-level-2 > .editorial-final-thought,
.hub-article .hub-level-2 > .editorial-final-thought {
margin-left: 0;
margin-right: auto;
text-align: left;
}
/* hub-transition — курсив, обмежена ширина 460px. */
.hub-article.hub-level-2 > .hub-transition,
.hub-article .hub-level-2 > .hub-transition {
font-style: italic;
max-width: 460px;
margin-left: 0;
margin-right: auto;
}
/* -----------------------------------------
4. ВІДЕО 1 — універсальний шаблон hub-video-split--vertical
Підписи 2/5, відео 5/12. БЕЗ бежевої рамки
(відео на природі — рамка вмикається, тільки якщо стоїть
клас video-container, а у Відео 1 його немає).
Універсальні правила для hub-video-split--vertical уже
стоять у CSS-блоці HUB-1 і працюють для будь-якого hub-level.
Тут нічого додавати не треба.
----------------------------------------- */
/* -----------------------------------------
5. ВІДЕО 2 — "Перший крок може бути дуже простим"
HTML структура:
.hub-video-block.hub-video-block--wide
> .hub-video-intro (підпис зверху)
> .video-fullbleed > .video-fullbleed__media > iframe
.hub-video-bridge--chemotherapy (підпис знизу — поза блоком)
На десктопі скасовуємо повноекранність, ставимо в композицію
2/5 (підпис) + 5/12 (відео). Бежева рамка #e8e0cc.
----------------------------------------- */
.hub-article.hub-level-2 > .hub-video-block--wide,
.hub-article .hub-level-2 > .hub-video-block--wide {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 30px;
align-items: stretch;
margin-top: 100px;
margin-bottom: 100px;
}
/* Підпис .hub-video-intro — ліва колонка, рядок 1 */
.hub-article.hub-level-2 > .hub-video-block--wide > .hub-video-intro,
.hub-article .hub-level-2 > .hub-video-block--wide > .hub-video-intro {
grid-column: 2 / 5;
grid-row: 1;
align-self: start;
max-width: 360px;
margin: 0;
padding: 0 0 0 14px;
border-left: 1px solid rgba(177, 143, 92, 0.6);
font-family: 'Manrope', sans-serif;
font-size: 19px;
line-height: 1.45;
font-weight: 500;
font-style: normal;
color: #333333;
letter-spacing: 0;
text-align: left;
}
/* video-fullbleed — права колонка, скасовуємо 100vw */
.hub-article.hub-level-2 > .hub-video-block--wide > .video-fullbleed,
.hub-article .hub-level-2 > .hub-video-block--wide > .video-fullbleed {
grid-column: 5 / 12;
grid-row: 1 / span 2;
position: relative;
left: auto;
right: auto;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
aspect-ratio: 4 / 5;
background: #e8e0cc;
overflow: hidden;
}
/* Рамка-тінь по краях — фірмове обрамлення */
.hub-article.hub-level-2 > .hub-video-block--wide > .video-fullbleed::after,
.hub-article .hub-level-2 > .hub-video-block--wide > .video-fullbleed::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
box-shadow:
inset 0 1px 0 rgba(218, 213, 207, 0.10),
inset 0 0 0 1px rgba(218, 213, 207, 0.14),
inset 0 -26px 38px rgba(218, 213, 207, 0.08),
inset 10px 0 16px rgba(218, 213, 207, 0.025),
inset -10px 0 16px rgba(218, 213, 207, 0.025);
z-index: 1;
}
.hub-article.hub-level-2 > .hub-video-block--wide > .video-fullbleed > .video-fullbleed__media,
.hub-article .hub-level-2 > .hub-video-block--wide > .video-fullbleed > .video-fullbleed__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
}
.hub-article.hub-level-2 > .hub-video-block--wide > .video-fullbleed > .video-fullbleed__media iframe,
.hub-article .hub-level-2 > .hub-video-block--wide > .video-fullbleed > .video-fullbleed__media iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
object-fit: cover;
}
/* hub-video-bridge--chemotherapy — фраза-перехід під Відео 2.
Поводиться як hub-transition: вузька flow-колонка ліворуч, курсив,
без рамок. Притиснутий до відео зверху (зв'язує відео і текст нижче). */
.hub-article.hub-level-2 > .hub-video-bridge--chemotherapy,
.hub-article .hub-level-2 > .hub-video-bridge--chemotherapy {
max-width: 360px;
margin-top: 24px;
margin-bottom: 0;
margin-left: 0;
margin-right: auto;
padding: 0;
border: none;
font-size: 19px;
line-height: 1.6;
font-style: italic;
font-weight: 400;
color: #3A3A3A;
letter-spacing: 0.1px;
text-align: left;
}
/* editorial-transition БЕЗ hub-transition — фраза перед H3.
Поводиться як hub-transition: курсив, обмежена ширина 460px. */
.hub-article.hub-level-2 > p.editorial-transition:not(.hub-transition),
.hub-article .hub-level-2 > p.editorial-transition:not(.hub-transition),
.hub-article p.editorial-transition:not(.hub-transition) {
display: block;
max-width: 460px;
margin: 88px 0 0 0;
padding: 0;
border: none;
font-size: 19px;
line-height: 1.6;
font-style: italic;
font-weight: 400;
color: #3A3A3A;
letter-spacing: 0.1px;
text-align: left;
}
/* -----------------------------------------
6. ВІДЕО 3 — "Як виглядає проділ у загальному образі"
HTML структура:
.hub-video-block.hub-video-block--wide
> .hub-video-label (підпис зверху)
> .video-fullbleed > .video-fullbleed__media > iframe
.hub-video-bridge-2 (підпис знизу — поза контейнером)
hub-video-label стоїть всередині блоку — стилізуємо як ліву колонку, рядок 1.
hub-video-bridge-2 — окремий параграф у flow-колонці після, ліворуч.
----------------------------------------- */
.hub-article.hub-level-2 > .hub-video-block--wide > .hub-video-label,
.hub-article .hub-level-2 > .hub-video-block--wide > .hub-video-label {
grid-column: 2 / 5;
grid-row: 1;
align-self: start;
max-width: 360px;
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
opacity: 0.70;
font-weight: 500;
color: #333333;
text-align: left;
}
/* hub-video-bridge-2 — підпис знизу під відео.
Притискаємо до відео зверху (логічне завершення кадру),
відокремлюємо від наступного H3 знизу. */
.hub-article.hub-level-2 > .hub-video-bridge-2,
.hub-article .hub-level-2 > .hub-video-bridge-2 {
margin-top: 24px;
margin-bottom: 100px;
margin-left: 0;
margin-right: auto;
max-width: 460px;
font-family: 'Manrope', sans-serif;
font-size: 19px;
line-height: 1.45;
font-style: italic;
font-weight: 400;
color: #474747;
letter-spacing: 0;
text-align: left;
}
/* Відео 4 — підписи всередині hub-video-block--wide.
hub-video-cue — верхній підпис, ліва колонка, рядок 1.
hub-video-reflection — нижній підпис, ліва колонка, рядок 2.
Композиція аналогічна cinematic-aside / reflection-soft
у Відео 1, тільки в межах hub-video-block--wide. */
.hub-article.hub-level-2 > .hub-video-block--wide > .hub-video-cue,
.hub-article .hub-level-2 > .hub-video-block--wide > .hub-video-cue {
grid-column: 2 / 5;
grid-row: 1;
align-self: start;
max-width: 360px;
margin: 0;
padding: 0 0 0 14px;
border-left: 1px solid rgba(177, 143, 92, 0.6);
font-family: 'Manrope', sans-serif;
font-size: 19px;
line-height: 1.45;
font-weight: 500;
font-style: normal;
color: #333333;
letter-spacing: 0;
text-align: left;
}
.hub-article.hub-level-2 > .hub-video-block--wide > .hub-video-reflection,
.hub-article .hub-level-2 > .hub-video-block--wide > .hub-video-reflection {
grid-column: 2 / 5;
grid-row: 2;
align-self: end;
max-width: 360px;
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
font-size: 19px;
line-height: 1.45;
font-style: italic;
font-weight: 400;
color: #474747;
letter-spacing: 0;
text-align: left;
}
/* -----------------------------------------
8. ВІДСТУПИ ВІД ВІДЕО ДО НАСТУПНОГО H2
----------------------------------------- */
.hub-article.hub-level-2 > .hub-video-block--wide + h2,
.hub-article .hub-level-2 > .hub-video-block--wide + h2,
.hub-article.hub-level-2 > .hub-video-bridge-2 + h2,
.hub-article .hub-level-2 > .hub-video-bridge-2 + h2,
.hub-article.hub-level-2 > .hub-video-bridge--chemotherapy + h2,
.hub-article .hub-level-2 > .hub-video-bridge--chemotherapy + h2,
.hub-article.hub-level-2 > .hub-video-reflection + h2,
.hub-article .hub-level-2 > .hub-video-reflection + h2,
.hub-article.hub-level-2 > .hub-video-container + h2,
.hub-article .hub-level-2 > .hub-video-container + h2 {
margin-top: 100px;
}
/* -----------------------------------------
9. CTA-БЛОК — ЦЕНТРОВАНИЙ
Єдиний центрований елемент у тілі статті.
----------------------------------------- */
.hub-article.hub-level-2 > .hub-cta-block,
.hub-article .hub-level-2 > .hub-cta-block {
grid-column: 3 / 11;
max-width: 720px;
margin-left: auto;
margin-right: auto;
margin-top: 48px;
margin-bottom: 60px;
text-align: center;
}
/* -----------------------------------------
10. SEO-БЛОК — у flow-колонці, курсив
----------------------------------------- */
.hub-article.hub-level-2 > .hub-seo,
.hub-article .hub-level-2 > .hub-seo {
grid-column: 3 / 11;
max-width: 720px;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
margin-bottom: 80px;
}
.hub-article.hub-level-2 > .hub-seo .zagolovok-seo,
.hub-article .hub-level-2 > .hub-seo .zagolovok-seo {
font-family: 'Manrope', sans-serif;
font-size: 22px;
line-height: 1.4;
font-weight: 500;
font-style: italic;
color: #4A4A4A;
opacity: 1;
margin-top: 0;
margin-bottom: 24px;
}
.hub-article.hub-level-2 > .hub-seo,
.hub-article .hub-level-2 > .hub-seo,
.hub-article.hub-level-2 > .hub-seo p,
.hub-article .hub-level-2 > .hub-seo p {
font-size: 15px;
line-height: 1.7;
font-weight: 400;
font-style: italic;
color: #8E8E93;
}
}
/* КІНЕЦЬ БЛОКУ ХІМІОТЕРАПІЯ --- не видаляти */
/* =========================================
DESKTOP-АДАПТАЦІЯ HUB-1 +
ЗАГАЛЬНИЙ СТАНДАРТ ДЛЯ 4:5 ВЕРТИКАЛЬНИХ ВІДЕО
Працює тільки від 1024px. Мобільну версію не змінює.
Маркер для вертикальних відео: hub-video-split--vertical
Цей блок ВСТАВИТИ В САМИЙ КІНЕЦЬ CSS-ФАЙЛУ.
Жодних правок до існуючих правил вище — не потрібно.
========================================= */
@media (min-width: 1024px) {
/* -----------------------------------------
1. ГЛОБАЛЬНА ПРАВКА: H1, H2, H3 у Manrope
Замість Playfair Display, який стояв за замовчуванням
для всіх рівнів HUB-статей.
----------------------------------------- */
.hub-article h1,
.hub-article h2,
.hub-article h3 {
font-family: 'Manrope', sans-serif;
}
/* -----------------------------------------
2. ТИПОГРАФІЧНА ІЄРАРХІЯ ДЛЯ HUB-1
H1 — головний заголовок статті
H2 — секційні заголовки (зменшені відносно базового BioLine-розміру)
----------------------------------------- */
.hub-article.hub-level-1 > h1,
.hub-article .hub-level-1 > h1 {
font-size: 52px;
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.01em;
}
.hub-article.hub-level-1 > h2,
.hub-article .hub-level-1 > h2 {
font-size: 30px;
line-height: 1.3;
font-weight: 500;
letter-spacing: -0.005em;
}
/* -----------------------------------------
3. hub-transition у HUB-1 — курсив, обмежена ширина 460px.
----------------------------------------- */
.hub-article.hub-level-1 > .hub-transition,
.hub-article .hub-level-1 > .hub-transition {
font-style: italic;
max-width: 460px;
margin-left: 0;
margin-right: auto;
}
/* -----------------------------------------
4. УНІВЕРСАЛЬНИЙ СТАНДАРТ ДЛЯ ВЕРТИКАЛЬНИХ ВІДЕО 4:5
Маркер: hub-video-split--vertical
Композиція:
- підпис зверху (cinematic-aside АБО cinematic-macro) → 2/5, рядок 1
- вертикальне відео (hub-video-wrapper) → 5/12, обидва рядки
- підпис знизу (reflection-soft АБО cinematic-close) → 2/5, рядок 2
Бежеве обрамлення з'являється автоматично, якщо у HTML стоїть
клас video-container на hub-video-wrapper. Якщо не стоїть — без обрамлення.
----------------------------------------- */
/* Скасування fullbleed-поведінки на десктопі.
ВАЖЛИВО: position лишаємо relative (не static),
щоб псевдоелемент ::after від .video-container
з рамкою-тінню продовжував працювати. */
.hub-article .hub-video-split--vertical > .hub-video-wrapper--fullbleed {
position: relative;
left: auto;
right: auto;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
width: auto;
max-width: 100%;
}
/* Верхні підписи — ліва колонка, рядок 1 */
.hub-article .hub-video-split--vertical > .cinematic-aside,
.hub-article .hub-video-split--vertical > .cinematic-macro {
grid-column: 2 / 5;
grid-row: 1;
align-self: start;
margin: 0;
max-width: 360px;
}
/* Вертикальне відео — права колонка, обидва рядки */
.hub-article .hub-video-split--vertical > .hub-video-wrapper {
grid-column: 5 / 12;
grid-row: 1 / span 2;
max-width: 100%;
align-self: stretch;
}
/* Нижні підписи — ліва колонка, рядок 2 */
.hub-article .hub-video-split--vertical > .reflection-soft,
.hub-article .hub-video-split--vertical > .cinematic-close {
grid-column: 2 / 5;
grid-row: 2;
align-self: end;
margin: 0;
max-width: 360px;
}
/* -----------------------------------------
4а. УНІФІКАЦІЯ ВИГЛЯДУ ПІДПИСІВ НА ДЕСКТОПІ
На десктопі підписи cinematic-macro і cinematic-close
(які на мобайлі прямі, без лінії й курсиву)
стилізуються так само, як cinematic-aside / reflection-soft
(золотиста лінія зверху, курсив знизу).
На мобайлі ці класи лишаються своїми — не торкаємо.
----------------------------------------- */
/* Верхній підпис cinematic-macro — стилізуємо як cinematic-aside:
золотиста вертикальна лінія зліва, прямий шрифт. */
.hub-article .hub-video-split--vertical > .cinematic-macro {
border-left: 1px solid rgba(177, 143, 92, 0.6);
padding-left: 14px;
color: #333333;
line-height: normal;
}
.hub-article .hub-video-split--vertical > .cinematic-macro .cinematic-macro-2 {
font-size: 19px;
font-weight: 500;
line-height: 1.45;
margin-top: 0;
letter-spacing: 0;
}
/* Нижній підпис cinematic-close — стилізуємо як reflection-soft:
курсив, м'який сірий колір. */
.hub-article .hub-video-split--vertical > .cinematic-close {
font-size: 19px;
line-height: 1.45;
font-style: italic;
font-weight: 400;
color: #474747;
letter-spacing: 0;
text-align: left;
}
/* -----------------------------------------
4б. ТЕПЛИЙ ПІСОЧНИЙ ФОН ДЛЯ ВІДЕО НА БІЛОМУ ФОНІ
Базовий video-container використовує #f4f2ef.
На десктопі для відео в hub-video-split--vertical
робимо фон теплішим і темнішим — пісочно-бежевий,
щоб виразно контрастував з білим фоном сторінки.
На мобайлі лишається #f4f2ef, як у базовому CSS.
----------------------------------------- */
.hub-article .hub-video-split--vertical > .hub-video-wrapper.video-container {
background: #e8e0cc;
}
/* -----------------------------------------
5. БЛОК "ЧИТАЙТЕ ТАКОЖ"
Тонка золотиста лінія перед, H3 зменшений з 28px до 18px,
uppercase з letter-spacing.
Заголовок і список центровані під CTA-кнопкою —
утворюють закінчуючий блок статті.
----------------------------------------- */
.hub-article.hub-level-1 > h3,
.hub-article .hub-level-1 > h3 {
font-size: 18px;
line-height: 1.4;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #4A4A4A;
margin-top: 64px;
margin-bottom: 32px;
padding-top: 48px;
border-top: 1px solid rgba(177, 143, 92, 0.3);
text-align: center;
}
/* Список після цього H3 — центрований під заголовком */
.hub-article.hub-level-1 > h3 + .hub-list,
.hub-article .hub-level-1 > h3 + .hub-list {
margin-top: 0;
margin-left: auto;
margin-right: auto;
width: fit-content;
}
/* -----------------------------------------
6. УНІВЕРСАЛЬНЕ ЛІВЕ ВИРІВНЮВАННЯ В ОСНОВНОМУ КОНТЕНТІ HUB-1
Усі H2 і параграфи в основній частині статті — прив'язані
до лівого краю flow-колонки. Перебиваємо центрування блоку
через margin: auto з базового CSS.
H3 і списки після нього (блок "Читайте також") НЕ зачіпаються —
вони центруються (правила в пункті 5).
H1, subtitle, redaktsiinyi-material лишаються центрованими
(як шапка статті).
----------------------------------------- */
.hub-article.hub-level-1 > h2,
.hub-article .hub-level-1 > h2,
.hub-article.hub-level-1 > p,
.hub-article .hub-level-1 > p {
margin-left: 0;
margin-right: auto;
text-align: left;
}
}
@media (max-width: 767px) {
/* Робимо батьківський блок на всю ширину */
.hub-parallax {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/* Налаштування самого зображення */
.hub-parallax img.img-fluid {
width: 100% !important;
max-width: none !important;
height: auto;
display: block;
}
.mobile-break {
display: none;
}
}
/* =========================================
КОРЕКЦІЯ ВІДСТУПУ МІЖ ПІДПИСОМ І FULLBLEED-ВІДЕО
на мобайлі для блоків hub-video-split--vertical
========================================= */
@media (max-width: 1023px) {
/* Зменшуємо нижній відступ підпису перед fullbleed-відео */
.hub-article .hub-video-split--vertical > .cinematic-aside {
margin-bottom: 16px;
}
/* Зменшуємо верхній відступ fullbleed-wrapper у блоці vertical */
.hub-article .hub-video-split--vertical > .hub-video-wrapper--fullbleed {
margin-top: 20px;
margin-bottom: 40px;
}
/* Зменшуємо верхній відступ reflection-soft після fullbleed-відео */
.hub-article .hub-video-split--vertical > .reflection-soft {
margin-top: 16px;
}
}
/* =========================================
КОРЕКЦІЯ: SUBTITLE ЦЕНТРОВАНИЙ НА ДЕСКТОПІ
Виправляє перебивку від універсального лівого вирівнювання
========================================= */
@media (min-width: 1024px) {
.hub-article.hub-level-1 > .hub-subtitle,
.hub-article .hub-level-1 > .hub-subtitle {
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
.hub-divider-before::before {
content: "";
display: block;
width: 48px;
height: 1px;
background: #B18F5C;
margin-top: 0;
margin-bottom: 32px;
}
.hub-lead--editorial {
font-style: italic;
}
/* =========================================
DESKTOP-ПАТЧ СТАТТІ «HAIR-ГАРДЕРОБ ЯК НОВА СВОБОДА»
Точкові виправлення десктопної версії (від 1024px).
Мобільну версію НЕ змінює.
!!! ВАЖЛИВО ДЛЯ РОЗРОБНИКА !!!
Цей блок додається В САМОМУ КІНЦІ CSS-файлу,
ПІСЛЯ всіх існуючих @media-блоків.
Не вставляти всередину іншого @media.
Патч спирається тільки на існуючі класи. Жодних нових
класів, жодного !important, жодного :has().
Усі правила перебивають базові значення в межах @media 1024px.
Виправляє 9 пунктів:
1. H1 — зменшити з 72px до 56px
2. Вступне відео — збільшити (текст 2/7, відео 7/12)
3. Розрив перед цитатою Наталії — скоротити вдвічі
3б. hub-intro-2 — italic + ліве вирівнювання (як на мобайлі)
4. Parallax — обмежити висоту вдвічі
5. Перший H2 — менше повітря зверху (через скорочення parallax margin)
6. Фотоблок — 3 рівні колонки замість асиметрії
7. Відео Тип А — збільшити (відео 6/12)
7б. Третє відео — дзеркальне (відео ліворуч, текст праворуч)
8. Callout — прибрати верхню/нижню лінії, лишити ліву (як на мобайлі)
9. «Читайте також» — центрування (вже працює через hub-level-1)
========================================= */
/* ПОЧАТОК ПАТЧА HAIR-ГАРДЕРОБ --- не видаляти */
@media (min-width: 1024px) {
/* -----------------------------------------
1. H1 — ЗМЕНШИТИ РОЗМІР
Базове правило: .hub-level-1 h1:first-of-type { font-size: 72px }
72px завелике. Зменшуємо до 56px — виразно, але не гігантськи.
----------------------------------------- */
.hub-level-1 h1:first-of-type {
font-size: 56px;
}
/* -----------------------------------------
2. ВСТУПНЕ ВІДЕО — ЗБІЛЬШИТИ
Базово: lead → 2/8 (6 колонок), відео → 8/12 (4 колонки).
Відео замале. Робимо баланс: текст 2/7, відео 7/12.
----------------------------------------- */
.hub-intro-block-1 .hub-lead {
grid-column: 2 / 7;
}
.hub-intro-block-1 .hub-video-container-in {
grid-column: 7 / 12;
}
/* -----------------------------------------
3. РОЗРИВ ПЕРЕД ЦИТАТОЮ НАТАЛІЇ — СКОРОТИТИ ВДВІЧІ
Базово: .hub-intro-block-1 { margin-bottom: 200px }
.hub-intro-2 { margin: 170px 0 26px }
Сумарно завеликий розрив. Скорочуємо приблизно вдвічі.
----------------------------------------- */
.hub-intro-block-1 {
margin-bottom: 100px;
}
/* -----------------------------------------
3б. HUB-INTRO-2 — ITALIC + ЛІВЕ ВИРІВНЮВАННЯ
Базово на десктопі: text-align: center, font-style: normal.
Повертаємо мобільну логіку: italic + ліве вирівнювання
+ лівий відступ (як padding-left на мобайлі).
Залишаємо у flow-колонці.
----------------------------------------- */
.hub-intro-2 {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
margin-top: 80px;
margin-bottom: 26px;
text-align: left;
font-style: italic;
padding-left: 25px;
}
/* Підпис Наталії наприкінці hub-intro-2 — той самий italic,
прив'язаний до правого краю (стандарт для підпису автора). */
.hub-intro-2 .hub-author-inline {
text-align: right;
font-style: italic;
margin-top: 24px;
margin-bottom: 0;
}
/* -----------------------------------------
4 + 5. PARALLAX — ОБМЕЖИТИ ВИСОТУ + МЕНШЕ ПОВІТРЯ ПЕРЕД H2
Базово: .hub-parallax { margin: 0 0 200px 0 }
.hub-parallax img { width: 100% } (висота природна, завелика)
Обмежуємо висоту через max-height + object-fit.
Скорочуємо нижній відступ — це прибирає зайве повітря
перед першим H2 (пункт 5).
----------------------------------------- */
.hub-parallax {
margin-bottom: 100px;
max-height: 460px;
overflow: hidden;
}
.hub-parallax img {
width: 100%;
height: 460px;
object-fit: cover;
object-position: center;
}
/* -----------------------------------------
7. ВІДЕО ТИП А — ЗБІЛЬШИТИ
Друге відео «Одна жінка — кілька різних образів»:
текст ліворуч (.hub-video-split--text-left), відео праворуч.
Базово відео → 7/12 (5 колонок). Розширюємо до 6/12 (6 колонок).
Підписи лишаються у 2/6.
----------------------------------------- */
.hub-article .hub-video-split--text-left > .hub-video-wrapper {
grid-column: 6 / 12;
}
/* -----------------------------------------
7б. ТРЕТЄ ВІДЕО — ДЗЕРКАЛЬНЕ
«Рух волосся та поведінка при світлі»:
відео ЛІВОРУЧ, текст ПРАВОРУЧ.
Клас: .hub-video-split БЕЗ --text-left.
Підписи (cinematic-aside / reflection-soft) → права колонка 7/11.
Відео (hub-video-wrapper) → ліва колонка 2/8.
----------------------------------------- */
/* Верхній підпис — права колонка, рядок 1 */
.hub-article .hub-video-split:not(.hub-video-split--text-left) > .cinematic-aside,
.hub-article .hub-video-split:not(.hub-video-split--text-left) > .cinematic-statement {
grid-column: 8 / 12;
grid-row: 1;
align-self: start;
margin: 0;
max-width: 360px;
}
/* Відео — ліва колонка, обидва рядки */
.hub-article .hub-video-split:not(.hub-video-split--text-left) > .hub-video-wrapper {
grid-column: 2 / 8;
grid-row: 1 / span 2;
max-width: 100%;
align-self: stretch;
}
/* Нижній підпис — права колонка, рядок 2 */
.hub-article .hub-video-split:not(.hub-video-split--text-left) > .reflection-soft,
.hub-article .hub-video-split:not(.hub-video-split--text-left) > .cinematic-whisper {
grid-column: 8 / 12;
grid-row: 2;
align-self: end;
margin: 0;
max-width: 360px;
}
/* -----------------------------------------
8. CALLOUT — ПРИБРАТИ ВЕРХНЮ/НИЖНЮ ЛІНІЇ
Базово (BLOCK 6 старої hair-гардероб):
.hub-callout { text-align: center; border-top + border-bottom;
padding: 60px 40px; margin: 180px auto 80px }
Повертаємо мобільну логіку: ліва лінія, текст зліва,
зміщення вправо для асиметрії, без верхньої/нижньої ліній.
----------------------------------------- */
.hub-article > .hub-callout {
grid-column: var(--hub-flow-column);
max-width: 640px;
text-align: left;
font-family: 'Montserrat', 'Inter', sans-serif;
font-size: 23px;
line-height: 1.4;
font-weight: 500;
border: none;
border-left: 1px solid #B18F5C;
border-top: none;
border-bottom: none;
padding: 0 0 0 35px;
margin-top: 120px;
margin-bottom: 24px;
margin-left: 14%;
margin-right: auto;
}
/* -----------------------------------------
9. «ЧИТАЙТЕ ТАКОЖ» — ЦЕНТРУВАННЯ
Правило вже існує в CSS («Якісна перука», пункт 5):
.hub-article.hub-level-1 > h3 { text-align: center; border-top;
uppercase; ... }
Спрацьовує автоматично, ЯКЩО:
- контейнер статті має клас hub-level-1
- H3 «Читайте також» — прямий нащадок .hub-article
Якщо центрування не працює — перевірити ці дві умови в HTML.
Тут НЕ дублюємо правило.
----------------------------------------- */
}
/* КІНЕЦЬ ПАТЧА HAIR-ГАРДЕРОБ --- не видаляти */
/* =========================================
DESKTOP-ДОПРАВКА №2 СТАТТІ «HAIR-ГАРДЕРОБ»
Гасить старі правила Васильовича, які перебили перший патч.
Працює тільки від 1024px. Мобільну версію НЕ змінює.
!!! ВАЖЛИВО ДЛЯ РОЗРОБНИКА !!!
Цей блок ставиться В САМОМУ КІНЦІ CSS-файлу,
ПІСЛЯ першого патча hair-гардероб і ПІСЛЯ всіх інших @media.
Він навмисно перебиває старі значення — тому має йти останнім.
Виправляє те, що не спрацювало:
4. Parallax — реально обмежити висоту
5. Повітря перед першим H2 після фотоблоку — прибрати
6. Фотоблок — три рівні фото, більші, без висіння третього
6б. Заголовок фотоблоку — менший, не serif
8б. Менше повітря між текстом і цитатою Наталії (~ -30%)
9. «Читайте також» — центрувати напряму
========================================= */
/* ПОЧАТОК ДОПРАВКИ №2 --- не видаляти */
@media (min-width: 1024px) {
/* -----------------------------------------
4. PARALLAX — РЕАЛЬНО ОБМЕЖИТИ ВИСОТУ
Перший патч не спрацював, бо .hub-parallax img має
transform: translate3d() для parallax-ефекту, і height/object-fit
конфліктували. Обмежуємо висоту на рівні контейнера через
max-height, а зображення робимо object-fit: cover з фіксованою
висотою. transform лишаємо — він тільки зсуває по Y у межах overflow.
----------------------------------------- */
.hub-article > .hub-parallax {
max-height: 440px;
margin-top: 0;
margin-bottom: 90px;
overflow: hidden;
}
.hub-article > .hub-parallax img {
width: 100%;
height: 440px;
object-fit: cover;
object-position: center 30%;
}
/* -----------------------------------------
5. ПОВІТРЯ ПЕРЕД ПЕРШИМ H2 — ПРИБРАТИ
Старі правила, які давали забагато повітря:
.hub-article h2:not(:first-child) { margin-top: 200px }
.hub-photo-block + h2 { margin-top: 220px }
.hub-video-container + h2 { margin-top: 220px }
.hub-quote + h2 { margin-top: 220px }
Перебиваємо на спокійніший ритм.
----------------------------------------- */
.hub-article h2:not(:first-child) {
margin-top: 120px;
}
/* Після фотоблоку — H2 не має провисати */
.hub-quote + h2,
.hub-video-container + h2 {
margin-top: 120px;
}
/* Перший H2 після parallax (на початку статті) — ще менше повітря */
.hub-parallax + h2 {
margin-top: 80px;
}
/* -----------------------------------------
8б. МЕНШЕ ПОВІТРЯ МІЖ ТЕКСТОМ І ЦИТАТОЮ НАТАЛІЇ
У першому патчі .hub-callout мав margin-top: 120px.
Зменшуємо приблизно на 30% → 85px.
----------------------------------------- */
.hub-article > .hub-callout {
margin-top: 85px;
}
/* -----------------------------------------
9. «ЧИТАЙТЕ ТАКОЖ» — ЦЕНТРУВАТИ НАПРЯМУ
Старе правило через hub-level-1 не спрацювало (ймовірно H3
не прямий нащадок або немає класу). Центруємо напряму
за структурою блоку «Читайте також».
Орієнтуємось на H3 + список (hub-list або звичайний ul).
----------------------------------------- */
/* H3 «Читайте також» — центрований, з тонкою золотистою лінією */
.hub-article > h3 {
text-align: center;
font-family: 'Montserrat', 'Inter', sans-serif;
font-size: 18px;
line-height: 1.4;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #4A4A4A;
margin-top: 100px;
margin-bottom: 32px;
padding-top: 48px;
border-top: 1px solid rgba(177, 143, 92, 0.3);
}
/* Список «Читайте також» після H3 — центрований під заголовком */
.hub-article > h3 + ul,
.hub-article > h3 + .hub-list {
margin-left: auto;
margin-right: auto;
width: fit-content;
text-align: left;
}
}
/* КІНЕЦЬ ДОПРАВКИ №2 --- не видаляти */
/* =========================================
DESKTOP-ДОПРАВКА №3 СТАТТІ «HAIR-ГАРДЕРОБ»
Фінальні правки. Працює тільки від 1024px.
Мобільну версію НЕ змінює.
!!! ВАЖЛИВО ДЛЯ РОЗРОБНИКА !!!
Ставиться В САМОМУ КІНЦІ CSS-файлу,
ПІСЛЯ патчів №1 і №2 hair-гардероб.
Має йти останнім, бо перебиває попередні значення.
Виправляє:
1. Parallax — реально вдвічі нижчий (~300px)
2. Повітря між підписом Наталії і parallax — більше
3. Фотоблок — фото значно більші, на повну ширину сітки,
зі збереженням природної пропорції (варіант А)
4. «Читайте також» — центрувати (H3 у .hub-related)
========================================= */
/* ПОЧАТОК ДОПРАВКИ №3 --- не видаляти */
@media (min-width: 1024px) {
/* -----------------------------------------
1. PARALLAX — ВДВІЧІ НИЖЧИЙ
Попередні правки давали 440px, але старе .hub-parallax img
з transform: translate3d() розтягувало кадр. Тут:
— обмежуємо контейнер до 300px;
— гасимо transform на зображенні (нульовий зсув);
— height фіксований, object-fit: cover.
----------------------------------------- */
.hub-article > .hub-parallax {
max-height: 300px;
height: 300px;
margin-top: 0;
margin-bottom: 90px;
overflow: hidden;
}
/* -----------------------------------------
2. ПОВІТРЯ ПІСЛЯ ПІДПИСУ НАТАЛІЇ
Між кінцем hub-intro-2 (з підписом) і наступним блоком
(parallax) додаємо більше простору.
----------------------------------------- */
.hub-intro-2 {
margin-bottom: 120px;
}
/* -----------------------------------------
4. «ЧИТАЙТЕ ТАКОЖ» — ЦЕНТРУВАТИ
H3 загорнутий у , тому попередній
селектор .hub-article > h3 не діяв. Таргетуємо напряму
.hub-related-title і список .hub-list всередині .hub-related.
----------------------------------------- */
/* Блок «Читайте також» — у flow-колонці, центрований */
.hub-article > .hub-related {
grid-column: var(--hub-flow-column);
max-width: var(--hub-flow-max-width);
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Заголовок — центрований, з тонкою золотистою лінією зверху */
.hub-article .hub-related .hub-related-title {
text-align: center;
font-family: 'Montserrat', 'Inter', sans-serif;
font-size: 18px;
line-height: 1.4;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #4A4A4A;
margin-top: 80px;
margin-bottom: 32px;
padding-top: 48px;
border-top: 1px solid rgba(177, 143, 92, 0.3);
}
/* Список — центрований під заголовком, текст усередині зліва */
.hub-article .hub-related .hub-list {
margin-left: auto;
margin-right: auto;
width: fit-content;
max-width: 760px;
text-align: left;
}
}
/* КІНЕЦЬ ДОПРАВКИ №3 --- не видаляти */
/* =========================================================
ФОТОБЛОК «ОБРАЗ ПОЧИНАЄТЬСЯ З ВІДЧУТТЯ СЕБЕ»
Цілісний CSS. Стаття Hair-гардероб.
Замінює всі попередні правила фотоблоку.
========================================================= */
/* --- МОБІЛЬНА ВЕРСІЯ (база) --- */
.hub-photo-block {
padding: 120px 20px 0 20px;
margin-bottom: 44px;
}
.hub-photo-title {
font-size: 22px;
text-align: center;
letter-spacing: 0.03em;
font-weight: 500;
line-height: 1.2;
margin-bottom: -5px;
color: #1D1D1B;
}
.hub-photo-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.hub-photo-item {
display: block;
width: 100%;
}
.photo-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 99%,
rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 99%,
rgba(0, 0, 0, 0) 100%);
}
/* --- ДЕСКТОП (від 1024px) --- */
@media (min-width: 1024px) {
.hub-photo-block {
grid-column: 1 / -1;
padding: 0;
margin-top: 130px;
margin-bottom: 130px;
}
.hub-photo-block .hub-photo-title {
font-family: 'Montserrat', 'Inter', sans-serif;
font-size: 24px;
line-height: 1.3;
font-weight: 500;
letter-spacing: 0.01em;
text-align: center;
color: #1D1D1B;
margin-bottom: 56px;
}
/*
.hub-photo-block .hub-photo-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 30px;
gap: 30px;
grid-column: 1 / -1;
} */
.hub-photo-block .hub-photo-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 30px;
gap: 30px;
grid-column: 1 / -1;
width: calc(100vw - 120px);
max-width: 1700px;
margin-left: 50%;
transform: translateX(-50%);
}
.hub-photo-block .hub-photo-item {
width: 100%;
height: auto;
display: block;
}
.hub-photo-block + h2 {
margin-top: 120px;
}
}
/* =========================================
PARALLAX-ФОТО — РОЗТЯГНУТИ НА ШИРИНУ ФОТОБЛОКУ
========================================= */
@media (min-width: 1024px) {
.hub-article > .hub-parallax {
grid-column: 1 / -1;
height: 240px;
max-height: 240px;
/* вихід за контейнер на ширину вікна з полями 60px,
без transform і без width:100vw */
width: auto;
max-width: none;
margin-left: calc(60px - (100vw - 100%) / 2);
margin-right: calc(60px - (100vw - 100%) / 2);
margin-top: 0;
margin-bottom: 90px;
transform: none;
overflow: hidden;
}
.hub-article > .hub-parallax img {
width: 100%;
height: 240px;
object-fit: cover;
object-position: center 30%;
transform: none;
}
}
/* --- Статичне розширення картинки ТІЛЬКИ для мобільних --- */
/* Базовий хаб та HUB-1 (відступи контейнера 30px) */
.hub-article .hub-image-edge-to-edge {
width: calc(100% + 60px);
margin-left: -30px;
margin-right: -30px;
max-width: none;
margin-top: 32px;
margin-bottom: 32px;
}
/* HUB-2 та HUB-3 (відступи контейнера 25px) */
.hub-article.hub-level-2 .hub-image-edge-to-edge,
.hub-article.hub-level-3 .hub-image-edge-to-edge {
width: calc(100% + 50px);
margin-left: -25px;
margin-right: -25px;
}
/* Стилі для самої картинки всередині */
.hub-image-edge-to-edge img {
width: 100%;
display: block;
height: auto;
object-fit: cover;
}
/* =========================================
ПОЧАТОК БЛОКУ АЛОПЕЦІЯ — не видаляти
Адаптація відеоблоків hub-video-split--vertical для desktop
========================================= */
@media (min-width: 1024px) {
/* -----------------------------------------
ВІДЕОБЛОК HUB-VIDEO-SPLIT--VERTICAL: широкий 2-колонковий layout
Контейнер виходить за межі flow-колонки (кол. 2-12 з 12)
Ліва вузька колонка: підпис зверху + editorial-текст знизу
Права широка колонка: вертикальне відео 4:5
----------------------------------------- */
.hub-article .hub-video-container.hub-video-split--vertical {
/* Розгортаємо на широку область — кол. 2 до 12 */
grid-column: 2 / 12;
max-width: none;
margin-left: 0;
margin-right: 0;
/* Внутрішній грід — дві колонки */
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto auto;
column-gap: 60px;
row-gap: 0;
align-items: start;
}
/* Підпис — ліва колонка, верхній рядок */
.hub-article .hub-video-split--vertical .cinematic-aside {
grid-column: 1;
grid-row: 1;
align-self: start;
}
/* Відео — права колонка, обидва рядки */
.hub-article .hub-video-split--vertical .hub-video-wrapper {
grid-column: 2;
grid-row: 1 / 3;
}
/* Editorial-текст — ліва колонка, нижній рядок */
.hub-article .hub-video-split--vertical .reflection-soft,
.hub-article .hub-video-split--vertical .editorial-transition {
grid-column: 1;
grid-row: 2;
align-self: end;
margin-top: auto;
padding-bottom: 24px;
}
}
/* КІНЕЦЬ БЛОКУ АЛОПЕЦІЯ */