/* Лайнер — токены и фоны секций. Мотив: белый ярусный корпус на закате. База светлая, акцент морской синий из фирменного знака, CTA закатное золото, две тёмные секции под архитектуру и доходность. */ @font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-cyrillic.woff2') format('woff2'); font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-latin.woff2') format('woff2'); font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2192,U+2212,U+2215} /* Golos Text: один файл на кириллицу и латиницу, рисован под русский текст */ @font-face{font-family:'Golos Text';src:url('../fonts/golos-cyr.woff2') format('woff2'); font-weight:400 700;font-style:normal;font-display:swap} :root{ /* база */ --white:#fbf8f3; /* тёплый белый */ --sand:#f3ede4; /* песок, чередование секций */ --card:#ffffff; /* бренд */ --sea:#1a5a76; /* морской синий, из фирменного знака #1D6281, затемнён под контраст */ --sea-soft:#e7eef2; --deep:#0f2429; /* тёмные секции */ --deep-2:#0a191d; --gold:#b8801f; /* закатное золото, ТОЛЬКО как фон CTA: тёмный текст на нём даёт 4.56:1 */ --gold-ink:#8a5e12; /* золото как ТЕКСТ на светлом, 5.37:1 (сам --gold даёт 3.23 и не годится) */ --gold-bright:#e0a635; /* золото на тёмном, 7.42:1 */ /* текст */ --ink:#16262b; --dim:#53656a; --ink-dark:#f2f6f7; /* текст на тёмном */ --dim-dark:#b6c7cc; --line:rgba(26,90,118,.16); --line-dark:rgba(255,255,255,.14); --tier:clamp(26px,4.6vw,72px); /* высота ярусной кромки, фирменный приём */ --sand-1:#f7f2ea; --sand-2:#efe6d8; /* единая шкала текста: до этого по секциям гуляли 14.5 / 15.5 / 17 */ --fs-body:17px; /* основной текст секций */ --fs-card:15.5px; /* текст внутри карточек */ --fs-note:13.5px; /* подписи, сноски, чипы */ --wrap:1240px; --r:14px; --r-lg:22px; --shadow:0 18px 44px rgba(15,36,41,.10); --shadow-hi:0 26px 60px rgba(15,36,41,.16); --f-display:'Playfair Display',Georgia,serif; --f-text:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--white);color:var(--ink); font-family:var(--f-text);font-size:17px;line-height:1.62;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:var(--sea);text-decoration:none} h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.01em} h1{font-size:clamp(34px,5.4vw,64px)} h2{font-size:clamp(27px,3.6vw,44px)} h3{font-size:clamp(19px,1.9vw,25px);line-height:1.24} p{margin:0 0 1em} p:last-child{margin-bottom:0} /* ---------- секции и фоны ---------- Полосок нет. Фон это свет и воздух, а не узор. Правило прежнее: фон живёт на ::before и задаётся только background-image, шорткат background затёр бы градиент в none при равной специфичности. */ .section{position:relative;padding:clamp(52px,6.4vw,100px) 0;isolation:isolate} /* светлая: ровный тёплый белый + верхний свет + волосок-разделитель сверху */ .section::before{ content:"";position:absolute;inset:0;z-index:-1; background-image: linear-gradient(180deg,rgba(26,90,118,.10) 0 1px,rgba(0,0,0,0) 1px), radial-gradient(58% 44% at 88% 12%,rgba(184,128,31,.10) 0%,rgba(184,128,31,0) 70%), radial-gradient(52% 40% at 4% 82%,rgba(26,90,118,.09) 0%,rgba(26,90,118,0) 72%), radial-gradient(120% 58% at 50% 0%,rgba(255,255,255,.94) 0%,rgba(255,255,255,0) 68%), linear-gradient(168deg,var(--white) 0%,#f8f4ed 46%,#f4eee4 100%); } /* песочная: тот же приём, теплее и на полтона глубже */ .section--sand::before{ background-image: radial-gradient(56% 42% at 6% 10%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 68%), radial-gradient(60% 46% at 92% 88%,rgba(184,128,31,.13) 0%,rgba(184,128,31,0) 70%), radial-gradient(120% 58% at 50% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 66%), linear-gradient(166deg,var(--sand-1) 0%,#f2eade 52%,var(--sand-2) 100%); } /* тёмная: глубина моря, закатный отсвет уходит вправо вверх */ .section--dark{color:var(--ink-dark)} .section--dark::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"), /* верхние 120px строго однотонные: иначе диагональный градиент красит ступени кромки в разные цвета, и каскад выглядит как брак */ linear-gradient(180deg,#16323a 0,#16323a 120px,rgba(0,0,0,0) 120px), radial-gradient(78% 62% at 82% 24%,rgba(224,166,53,.15) 0%,rgba(224,166,53,0) 62%), radial-gradient(125% 105% at 16% 6%,#18363f 0%,#102b32 42%,#0a191d 100%); } .section--dark h2,.section--dark h3{color:var(--ink-dark)} .section--dark .lead{color:var(--dim-dark)} .section--dark a{color:var(--gold-bright)} /* зерно только на тёмном: там реально бандинг, на светлом оно грязнит */ .section::after{display:none} /* ⭐ ФИРМЕННЫЙ ПРИЁМ: ЯРУСНАЯ КРОМКА. Силуэт корпуса, спускающегося ступенями к морю, врезан в верх каждой тёмной секции и футера. Пять ступеней, чистый clip-path, ноль картинок. Все тёмные секции идут после светлых, поэтому в вырезах виден --white. */ .section--dark,.footer{ clip-path:polygon( 0 0, 14% 0, 14% calc(var(--tier)*.22), 33% calc(var(--tier)*.22), 33% calc(var(--tier)*.46), 55% calc(var(--tier)*.46), 55% calc(var(--tier)*.70), 74% calc(var(--tier)*.70), 74% var(--tier), 100% var(--tier), 100% 100%, 0 100%); } .section--dark{padding-top:calc(clamp(52px,6.4vw,100px) + var(--tier))} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }