/* ============================================================ СЕРДЦЕ ВЕРЫ — стили прелоадера и первой сцены ============================================================ */ @font-face { font-family: "Geometria"; src: url("fonts/geometria/geometria_light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Geometria"; src: url("fonts/geometria/geometria_lightitalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } :root { --black: #050506; --text-soft: rgba(243, 240, 234, 0.92); --text-dim: rgba(243, 240, 234, 0.55); --gold: #d9c08a; --ease: cubic-bezier(0.6, 0.05, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: var(--black); color: var(--text-soft); font-family: "Manrope", system-ui, sans-serif; /* clip, а НЕ hidden: hidden на делает корень scroll-контейнером и ломает прокрутку в Android Chrome (на iOS работало). clip скрывает горизонтальное переполнение, не создавая scroll-контейнер. */ overflow-x: clip; overscroll-behavior-y: none; /* убираем «резинку» по вертикали */ -webkit-font-smoothing: antialiased; } /* Второй блок — сплошной чёрный. Лежит ПОВЕРХ фиксированной сцены и наезжает на неё при скролле, перекрывая нижние артефакты параллакса. */ .block-2 { position: relative; z-index: 10; margin-top: 135vh; /* запас прокрутки для параллакса — но без длинного чёрного «зазора» */ min-height: 100vh; /* верхняя кромка мягко проявляется из прозрачности — без строгой линии перехода */ background: linear-gradient(180deg, transparent 0, #000 18vh); background-color: transparent; /* внутри — реклама вопросами; верхний отступ выводит контент в зону под переходом */ padding: clamp(3rem, 12vh, 7rem) 6vw clamp(3rem, 8vh, 6rem); } /* ============ БЛОК 1: ПРЕЛОАДЕР ============ */ .preloader { position: fixed; inset: 0; z-index: 100; background: transparent; /* чёрный экран дают «веки»; за ними — сцена */ display: flex; align-items: center; justify-content: center; transition: opacity 1.6s var(--ease); } .preloader.is-hidden { opacity: 0; pointer-events: none; } .dust-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; /* над «веками», чтобы пыль была видна */ transition: opacity 1.6s var(--ease); } .preloader.is-opening .dust-canvas { opacity: 0; } .preloader__content { position: relative; z-index: 4; /* над «веками» и пылью */ text-align: center; padding: 0 8vw; transition: opacity 1.8s var(--ease), transform 1.8s var(--ease); } .preloader.is-opening .preloader__content { opacity: 0; transform: scale(1.06); } /* Заголовок книги */ .preloader__title { font-family: "Geometria", "Playfair Display", serif; font-style: normal; font-weight: 300; font-size: clamp(2rem, 5.6vw, 4rem); line-height: 1.18; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.94); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); } /* появление слово за словом — медленно из блюра */ .preloader__title span { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(6px); animation: wordIn 2s var(--ease) forwards; } .preloader__title span:nth-of-type(1) { animation-delay: 0.7s; } .preloader__title span:nth-of-type(2) { animation-delay: 1.5s; } /* Подзаголовок — приглашение в путь */ .preloader__subtitle { margin-top: clamp(1.4rem, 3.4vh, 2.4rem); font-family: "Onest", sans-serif; font-weight: 400; font-size: clamp(1rem, 2vw, 1.32rem); line-height: 1.6; letter-spacing: 0.01em; color: rgba(247, 219, 184, 0.88); /* тёплый пастельный тон */ opacity: 0; filter: blur(10px); animation: wordIn 2.2s var(--ease) 2.4s forwards; } @keyframes wordIn { to { opacity: 1; filter: blur(0); transform: none; } } /* кнопка входа — появляется только после загрузки ассетов */ .preloader__enter { position: relative; display: inline-flex; align-items: center; justify-content: center; margin: clamp(2.4rem, 5vh, 3.6rem) auto 0; padding: 1em 2.6em; font-family: "Onest", "Manrope", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243, 240, 234, 0.95); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(243, 240, 234, 0.35); border-radius: 999px; cursor: pointer; visibility: hidden; opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease), visibility 0s linear 1.4s; pointer-events: none; } .preloader__enter::before { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 1px solid rgba(243, 240, 234, 0.18); opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; } .preloader.is-ready .preloader__enter { visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; /* небольшая задержка, чтобы кнопка появилась ПОСЛЕ того, как заголовок и подзаголовок полностью проявятся (~4.6s суммарно) */ transition: opacity 1.6s var(--ease) 2.6s, transform 1.6s var(--ease) 2.6s, border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease), visibility 0s linear 2.6s; } .preloader.is-ready .preloader__enter::before { opacity: 1; animation: enterPulse 3.6s ease-out infinite; animation-delay: 3.6s; transition: opacity 0.8s var(--ease) 3.6s; } .preloader__enter:hover { border-color: rgba(247, 219, 184, 0.9); background: rgba(247, 219, 184, 0.10); color: #fff; box-shadow: 0 0 36px rgba(247, 219, 184, 0.22); } @keyframes enterPulse { 0% { box-shadow: 0 0 0 0 rgba(243, 240, 234, 0.22); } 70% { box-shadow: 0 0 0 18px rgba(243, 240, 234, 0); } 100% { box-shadow: 0 0 0 0 rgba(243, 240, 234, 0); } } @keyframes quoteIn { to { opacity: 1; filter: blur(0); } } @keyframes breathe { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } } @keyframes cuePulse { 0% { box-shadow: 0 0 0 0 rgba(243,240,234,0.45); } 70% { box-shadow: 0 0 0 18px rgba(243,240,234,0); } 100% { box-shadow: 0 0 0 0 rgba(243,240,234,0); } } /* «Веки» — открытие глаз */ .eyelid { position: absolute; left: 0; width: 100%; height: 52%; background: var(--black); z-index: 2; pointer-events: none; transform: translateY(0); transition: transform 3s var(--ease), opacity 2.6s var(--ease); } .eyelid--top { top: 0; } .eyelid--bottom { bottom: 0; } .preloader.is-opening .eyelid--top { transform: translateY(-100%); opacity: 0; } .preloader.is-opening .eyelid--bottom { transform: translateY(100%); opacity: 0; } /* ============ БЛОК 2: СЦЕНА ============ */ .scene { position: fixed; top: 0; left: 0; right: 0; height: var(--app-h, 100vh); /* зафиксированная высота — не дёргается от тулбара iOS */ z-index: 1; overflow: hidden; opacity: 0; transition: opacity 3s var(--ease); } .scene.is-visible { opacity: 1; } .parallax { position: absolute; top: -10%; left: -6%; right: -6%; bottom: -10%; /* запас под сдвиг */ filter: brightness(0.85) saturate(1.04); /* сама картинка чуть темнее (мягко) */ } .layer { position: absolute; inset: 0; /* полная высота — без жёстких обрезов */ background-position: center bottom; background-size: cover; background-repeat: no-repeat; will-change: transform; } .layer--sky { background-position: center top; overflow: hidden; } /* Слои масштабируются по ШИРИНЕ экрана (vw) и привязаны к нижнему краю. Так композиция одинакова на экранах любой высоты, а offset (тоже в vw, см. JS) сдвигает слой пропорционально → расположение стабильно на всех экранах. */ /* ГОРЫ (2.webp) — широкая панорама, чуть шире вьюпорта. */ .layer--mount { background-size: 116vw auto; background-position: center bottom; } /* ПЕРЕДНИЙ ПЛАН (4.webp) — арки и «сердце»: ровно по ширине, без боковой обрезки. */ .layer--front { background-size: 100vw auto; background-position: center bottom; } /* две видео-дорожки внутри слоя неба — кросс-фейд для бесшовного цикла */ .sky-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; /* никаких кликов/контролов */ transition: opacity 1.2s linear; } /* прячем любые нативные контролы плеера (выглядывали из-за гор) */ .sky-video::-webkit-media-controls, .sky-video::-webkit-media-controls-enclosure, .sky-video::-webkit-media-controls-panel, .sky-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none !important; } /* Картинка-слой лежит ПОВЕРХ градиента-плейсхолдера. Нет файла → 404 → браузер показывает градиент. Положишь файл → виден он. */ .layer--sky { background-image: var(--img, none), linear-gradient(180deg, #1a2436 0%, #2e3a4d 35%, #6b6377 70%, #b89a86 100%); } .layer--mount { background-image: var(--img, none), linear-gradient(180deg, transparent 45%, rgba(40,46,62,0.85) 62%, rgba(28,32,44,0.95) 100%); } .layer--mid { background-image: var(--img, none), linear-gradient(180deg, transparent 58%, rgba(18,26,20,0.9) 80%, rgba(12,18,14,1) 100%); } .layer--front { background-image: var(--img, none), linear-gradient(180deg, transparent 70%, rgba(6,10,8,0.95) 92%, #060a08 100%); } /* Атмосфера поверх слоёв */ .scene__fog { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 80%, rgba(220,210,190,0.12), transparent 55%), linear-gradient(180deg, rgba(255,250,240,0.06) 0%, transparent 40%); animation: fogDrift 18s ease-in-out infinite alternate; } @keyframes fogDrift { from { transform: translateX(-2%) scale(1.02); opacity: 0.8; } to { transform: translateX(2%) scale(1.06); opacity: 1; } } .scene__rays { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: conic-gradient(from 200deg at 60% -10%, transparent 0deg, rgba(255,240,210,0.10) 14deg, transparent 30deg); opacity: 0.7; animation: rays 12s ease-in-out infinite alternate; } @keyframes rays { from { opacity: 0.45; } to { opacity: 0.85; } } /* fade-оверлей: затемняет сцену при скролле — мягкий переход ко 2-му блоку */ .scene__fadeout { position: fixed; inset: 0; z-index: 8; background: #000; opacity: 0; pointer-events: none; } .scene__content { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* текст уходит вверх, к открытому небу */ text-align: center; padding: 15vh 6vw 0; } /* лёгкое затемнение сверху видео — контраст под текст, мягко (без жёстких краёв) */ .scene__shade { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.16) 30%, rgba(0, 0, 0, 0) 58%); } /* ===== Двухслойный заголовок ===== */ .scene__title { position: relative; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(22px); } .scene.is-visible .scene__title { animation: riseIn 2.2s var(--ease) 0.6s forwards; } /* ГЛАВНЫЙ заголовок — Geometria Light Italic, белый 90% */ .title-ghost { font-family: "Geometria", "Playfair Display", serif; font-weight: 300; font-style: normal; font-size: clamp(2.3rem, 5.2vw, 4.4rem); /* чуть меньше */ line-height: 1.08; letter-spacing: 0.08em; /* трекинг ~8% */ text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, 0.9); text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.35); } /* ПОДЗАГОЛОВОК — чистый гротеск Onest, заметно меньше, мягкий пастельно-оранжевый */ .title-main { margin-top: clamp(1.6rem, 3vh, 2.6rem); /* «воздух» между заголовком и подзаголовком */ white-space: nowrap; font-family: "Onest", sans-serif; font-weight: 500; font-size: clamp(1.1rem, 2.1vw, 1.7rem); /* чуть больше */ line-height: 1.3; letter-spacing: 0.01em; text-transform: none; color: rgba(247, 219, 184, 0.9); /* пастельный тон неба у солнца */ text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4); } /* плотная светлая кнопка — чёткий призыв, «приземляет» композицию */ .btn-path { margin-top: clamp(2.4rem, 5vh, 3.4rem); padding: 1.05em 3em; font-family: "Onest", "Manrope", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.09em; /* ~9% */ text-transform: uppercase; color: #2a2018; /* тёмно-коричневый, как самые тёмные деревья */ background: rgba(255, 255, 255, 0.94); border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); opacity: 0; transform: translateY(22px); transition: background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); } .scene.is-visible .btn-path { animation: riseIn 2.2s var(--ease) 1.4s forwards; } .btn-path:hover { background: #ffffff; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); } @keyframes riseIn { to { opacity: 1; transform: translateY(0); } } /* ============ КОНТРОЛЛЕР ЗВУКА ============ */ .sound-toggle { position: fixed; top: 1.6rem; right: 1.6rem; z-index: 200; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 1s var(--ease), border-color 0.4s; } .sound-toggle.is-shown { opacity: 0.8; } .sound-toggle:hover { border-color: var(--gold); opacity: 1; } .sound-toggle__bars { display: flex; align-items: center; gap: 2px; height: 16px; } .sound-toggle__bars i { width: 2px; background: var(--text-soft); border-radius: 2px; animation: eq 1s ease-in-out infinite; } .sound-toggle__bars i:nth-child(1) { height: 6px; animation-delay: 0s; } .sound-toggle__bars i:nth-child(2) { height: 14px; animation-delay: 0.2s; } .sound-toggle__bars i:nth-child(3) { height: 9px; animation-delay: 0.4s; } .sound-toggle__bars i:nth-child(4) { height: 12px; animation-delay: 0.1s; } @keyframes eq { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } } .sound-toggle.is-muted .sound-toggle__bars i { animation-play-state: paused; transform: scaleY(0.35); opacity: 0.5; } /* ссылка-пилюля на страницу для читателей — слева от кнопки звука */ .nav-pill { position: fixed; top: 1.6rem; right: calc(1.6rem + 44px + 12px); z-index: 200; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--gold); text-decoration: none; font-family: "Onest", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(217, 192, 138, 0.35); border-radius: 999px; opacity: 0; transition: opacity 1s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease); } .nav-pill.is-shown { opacity: 0.85; } .nav-pill:hover { opacity: 1; border-color: var(--gold); background: rgba(217, 192, 138, 0.12); color: #f0dcae; } .nav-pill__icon { width: 18px; height: 18px; flex: none; } .nav-pill__label { white-space: nowrap; } @media (max-width: 680px) { /* на мобильных — компактная круглая иконка без подписи */ .nav-pill { padding: 0; width: 44px; justify-content: center; gap: 0; } .nav-pill__label { display: none; } } /* на узких экранах однострочный заголовок переносим, чтобы не вылезал */ @media (max-width: 680px) { .title-main { white-space: normal; } .title-ghost { font-size: clamp(1.8rem, 9vw, 3rem); } /* Портретные варианты слоёв: если в HTML задан data-img-mobile (JS кладёт его в --img-m) — берём его; иначе откат на обычный --img. Пока портретных файлов нет, поведение мобилки не меняется. */ .layer--mount { background-image: var(--img-m, var(--img, none)), linear-gradient(180deg, transparent 45%, rgba(40,46,62,0.85) 62%, rgba(28,32,44,0.95) 100%); } .layer--front { background-image: var(--img-m, var(--img, none)), linear-gradient(180deg, transparent 70%, rgba(6,10,8,0.95) 92%, #060a08 100%); } } /* ============================================================ БЛОК 3: РЕКЛАМА ВОПРОСАМИ ============================================================ */ .questions__inner { max-width: 940px; margin: 0 auto; } /* ----- ВИДЕО: главный акцент ----- */ .video-figure { margin: 0 0 clamp(2.6rem, 7vh, 5rem); } .video-figure__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; /* кинематографичный плейсхолдер — виден, пока нет файла видео */ background: radial-gradient(120% 130% at 50% 0%, rgba(70, 62, 52, 0.55), transparent 58%), linear-gradient(180deg, #15171c 0%, #0a0b0e 100%); box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(217, 192, 138, 0.14); } .video-figure__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; opacity: 1; /* показываем постер-превью до запуска */ transition: opacity 0.6s var(--ease); } .video-figure.is-playing .video-figure__media { opacity: 1; } .video-figure__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36)); border: none; cursor: pointer; transition: opacity 0.5s var(--ease); } .video-figure.is-playing .video-figure__play { opacity: 0; pointer-events: none; } .video-figure__play::before { content: ""; position: absolute; width: clamp(72px, 9vw, 92px); height: clamp(72px, 9vw, 92px); border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(217, 192, 138, 0.5); box-shadow: 0 0 44px rgba(217, 192, 138, 0.22); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .video-figure__play:hover::before { transform: scale(1.08); box-shadow: 0 0 64px rgba(217, 192, 138, 0.42); } .video-figure__triangle { position: relative; z-index: 1; width: 0; height: 0; margin-left: 6px; /* оптическая центровка треугольника */ border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--text-soft); } .video-figure__caption { margin-top: 1rem; text-align: center; font-family: "Onest", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); transition: opacity 0.5s var(--ease); } .video-figure.is-playing .video-figure__caption { opacity: 0; } /* ----- ТЕКСТ ВОПРОСОВ ----- */ .questions__text p { font-family: "Onest", sans-serif; font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.85; letter-spacing: 0.004em; color: var(--text-soft); margin: 0; } /* первые два абзаца — две колонки на десктопе */ .questions__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3.6vw, 2.8rem); } .questions__cols > p + p { margin-top: 0; } .questions__cta { display: flex; justify-content: center; margin-top: clamp(2.2rem, 5vh, 3.2rem); } @media (max-width: 760px) { .questions__cols { grid-template-columns: 1fr; gap: 1.5em; } } /* третий абзац — отдельный смысловой акцент */ .questions__accent { position: relative; margin-top: clamp(2.6rem, 6vh, 4rem); padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.6rem, 4vw, 2.6rem); border-radius: 14px; border: 1px solid rgba(217, 192, 138, 0.18); border-left: 3px solid var(--gold); background: radial-gradient(130% 150% at 0% 0%, rgba(217, 192, 138, 0.10), transparent 55%), linear-gradient(180deg, rgba(255, 250, 240, 0.035), rgba(255, 250, 240, 0.012)); } .questions__accent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 192, 138, 0.5), transparent); } .questions__accent p { margin: 0; font-family: "Onest", sans-serif; font-weight: 400; font-size: clamp(1.1rem, 1.6vw, 1.34rem); line-height: 1.85; color: var(--text-soft); } .questions__accent .lead { font-family: "Geometria", "Playfair Display", serif; font-style: italic; font-weight: 300; color: var(--gold); letter-spacing: 0.01em; } /* ============================================================ БЛОК 4: СОДЕРЖАНИЕ — КАРТОЧКИ С ИКОНКАМИ ============================================================ */ .contents { position: relative; z-index: 10; background: var(--black); padding: clamp(2rem, 6vh, 4rem) 6vw clamp(6rem, 16vh, 11rem); overflow: hidden; } .contents::before { content: ""; position: absolute; inset: 0; background: url("../assets/images/window.webp") center / cover no-repeat; opacity: 0.1; pointer-events: none; z-index: 0; } .contents__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; } .contents__head { text-align: center; } .contents__kicker { font-family: "Onest", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); opacity: 0.85; } .contents__title { margin-top: 1.1rem; font-family: "Geometria", "Playfair Display", serif; font-weight: 300; font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.22; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.92); } /* сетка карточек */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.2vw, 1.6rem); margin-top: clamp(3rem, 7vh, 5rem); } .card { position: relative; display: flex; flex-direction: column; gap: clamp(1rem, 2.4vw, 1.4rem); padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: 16px; overflow: hidden; background: radial-gradient(140% 120% at 0% 0%, rgba(217, 192, 138, 0.06), transparent 55%), linear-gradient(180deg, rgba(255, 250, 240, 0.04), rgba(255, 250, 240, 0.013)); border: 1px solid rgba(217, 192, 138, 0.16); transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } /* крупный полупрозрачный номер-водяной знак (целиком внутри карточки) */ .card::before { content: attr(data-num); position: absolute; top: clamp(0.7rem, 1.6vw, 1.1rem); right: clamp(0.9rem, 2vw, 1.4rem); font-family: "Geometria", "Playfair Display", serif; font-weight: 300; font-size: clamp(3rem, 4.4vw, 4rem); line-height: 1; color: rgba(217, 192, 138, 0.10); pointer-events: none; } .card:hover { border-color: rgba(217, 192, 138, 0.42); transform: translateY(-4px); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.42), 0 0 32px rgba(217, 192, 138, 0.08); } .card__icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: clamp(46px, 6vw, 56px); height: clamp(46px, 6vw, 56px); border-radius: 13px; color: var(--gold); background: radial-gradient(circle at 50% 32%, rgba(217, 192, 138, 0.18), rgba(217, 192, 138, 0.04)); border: 1px solid rgba(217, 192, 138, 0.28); box-shadow: inset 0 0 16px rgba(217, 192, 138, 0.08); transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); } .card__icon svg { width: 56%; height: 56%; } .card:hover .card__icon { border-color: rgba(217, 192, 138, 0.6); box-shadow: inset 0 0 18px rgba(217, 192, 138, 0.14), 0 0 22px rgba(217, 192, 138, 0.2); transform: scale(1.05); } .card__text { position: relative; z-index: 1; margin: 0; font-family: "Onest", sans-serif; font-weight: 400; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.55; color: var(--text-soft); } .card__text b { font-weight: 600; color: var(--gold); } /* ----- появление при скролле ----- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (max-width: 680px) { .cards { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.2s !important; } .reveal { opacity: 1; transform: none; } } /* ============================================================ БЛОКИ 5–9: ОБЩИЕ ЭЛЕМЕНТЫ ============================================================ */ .kicker { font-family: "Onest", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); opacity: 0.85; } .section-title { margin: 1rem 0 0; font-family: "Geometria", "Playfair Display", serif; font-weight: 300; font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.22; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.92); } /* акцентная карточка (повторно используемый паттерн) */ .accent-card { position: relative; margin-top: clamp(2rem, 5vh, 3rem); padding: clamp(1.8rem, 4vw, 2.6rem); border-radius: 14px; border: 1px solid rgba(217, 192, 138, 0.18); border-left: 3px solid var(--gold); background: radial-gradient(130% 150% at 0% 0%, rgba(217, 192, 138, 0.10), transparent 55%), linear-gradient(180deg, rgba(255, 250, 240, 0.035), rgba(255, 250, 240, 0.012)); } .accent-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 192, 138, 0.5), transparent); } .accent-card p { margin: 0; font-family: "Onest", sans-serif; font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.8; color: var(--text-soft); } /* кнопки */ .btn-gold { display: inline-block; padding: 1em 2.4em; font-family: "Onest", "Manrope", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2a2018; background: linear-gradient(180deg, #e6cf9c, #d9c08a); border: none; border-radius: 999px; cursor: pointer; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30), inset 0 0 0 1px rgba(217, 192, 138, 0.4); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), filter 0.35s var(--ease); } .btn-gold:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), 0 0 26px rgba(217, 192, 138, 0.3); } .btn-gold:disabled { opacity: 0.55; cursor: default; transform: none; filter: none; } .btn-outline { display: inline-block; padding: 0.85em 1.8em; font-family: "Onest", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--gold); text-decoration: none; background: rgba(217, 192, 138, 0.06); border: 1px solid rgba(217, 192, 138, 0.4); border-radius: 999px; cursor: pointer; transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease); } .btn-outline:hover { background: rgba(217, 192, 138, 0.14); border-color: rgba(217, 192, 138, 0.7); color: #f0dcae; transform: translateY(-2px); } /* ============ БЛОК 5: ЦИТАТА ============ */ .quote-block { position: relative; z-index: 10; background: var(--black); padding: clamp(4rem, 12vh, 8rem) 6vw; } .bookquote { max-width: 880px; margin: 0 auto; text-align: center; } .bookquote__photo { display: block; width: clamp(150px, 26vw, 240px); height: auto; margin: 0 auto clamp(1.6rem, 4vh, 2.6rem); border-radius: 16px; border: 1px solid rgba(217, 192, 138, 0.25); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .bookquote__mark { display: block; font-family: "Geometria", "Playfair Display", serif; font-size: clamp(4rem, 10vw, 7rem); line-height: 0.5; color: rgba(217, 192, 138, 0.35); } .bookquote__text { margin: 0; font-family: "Geometria", "Playfair Display", serif; font-weight: 300; font-style: italic; font-size: clamp(1.3rem, 2.8vw, 2rem); line-height: 1.6; letter-spacing: 0.01em; color: var(--text-soft); } .bookquote__src { margin-top: 1.8rem; font-family: "Onest", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); opacity: 0.8; } /* ============ БЛОК 6: УНИКАЛЬНОСТЬ ============ */ .unique { position: relative; z-index: 10; background: var(--black); padding: clamp(3rem, 9vh, 6rem) 6vw; } .unique__inner { max-width: 880px; margin: 0 auto; } .unique__head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.5rem); } .unique__body > p { font-family: "Onest", sans-serif; font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.8; color: var(--text-soft); margin: 0; } .unique__body > p + p { margin-top: 1.4em; } /* ============ БЛОК 7: ОБ АВТОРЕ ============ */ .author { position: relative; z-index: 10; background: var(--black); padding: clamp(3rem, 9vh, 6rem) 6vw; } .author__inner { max-width: 960px; margin: 0 auto; } .author__head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3rem); } .author__grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } .author__photo { margin: 0; } .author__photo img { width: 100%; height: auto; /* иначе атрибут height="1024" игнорирует aspect-ratio */ aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; border: 1px solid rgba(217, 192, 138, 0.25); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); display: block; } .author__name { margin: 0 0 1.2rem; font-family: "Geometria", "Playfair Display", serif; font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.94); } .author__bio p { margin: 0; font-family: "Onest", sans-serif; font-weight: 400; font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.75; color: var(--text-soft); } /* ============ БЛОК 8: ЧИТАТЬ ФРАГМЕНТ ============ */ .cta-read { position: relative; z-index: 10; background: radial-gradient(120% 80% at 50% 0%, rgba(217, 192, 138, 0.07), transparent 60%), var(--black); padding: clamp(4rem, 11vh, 7rem) 6vw; } .cta-read__inner { max-width: 760px; margin: 0 auto; text-align: center; } .cta-read__photo { margin: 0 auto clamp(2rem, 5vh, 3rem); max-width: 340px; } .cta-read__photo img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(217, 192, 138, 0.22); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .cta-read .section-title { margin-bottom: clamp(2rem, 5vh, 3rem); } /* ============ БЛОК 9: ЗАКАЗАТЬ ============ */ .order { position: relative; z-index: 10; background: var(--black); padding: clamp(3rem, 9vh, 6rem) 6vw clamp(6rem, 14vh, 10rem); } .order__inner { max-width: 900px; margin: 0 auto; } .order__head { text-align: center; margin-bottom: clamp(2.5rem, 6vh, 4rem); } .order__list { display: flex; flex-direction: column; gap: clamp(1rem, 2.4vw, 1.6rem); } .order-opt { display: flex; gap: clamp(1rem, 2.5vw, 1.6rem); padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 250, 240, 0.04), rgba(255, 250, 240, 0.013)); border: 1px solid rgba(217, 192, 138, 0.16); transition: border-color 0.4s var(--ease); } .order-opt:hover { border-color: rgba(217, 192, 138, 0.34); } .order-opt__badge { flex: 0 0 auto; width: clamp(40px, 7vw, 48px); height: clamp(40px, 7vw, 48px); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: "Geometria", "Playfair Display", serif; font-size: 1.1rem; text-transform: uppercase; color: var(--gold); background: radial-gradient(circle at 50% 35%, rgba(217, 192, 138, 0.16), rgba(217, 192, 138, 0.04)); border: 1px solid rgba(217, 192, 138, 0.3); } .order-opt__main { flex: 1; min-width: 0; } .order-opt__title { margin: 0 0 0.3rem; font-family: "Onest", sans-serif; font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: #f1e7d3; } .order-opt__price { margin: 0 0 1.1rem; font-family: "Onest", sans-serif; font-size: 0.98rem; color: var(--gold); } .order-opt__links { display: flex; flex-wrap: wrap; gap: 0.7rem; } .order-opt__hint { margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--text-dim); } .order-form { display: flex; flex-direction: column; gap: 0.7rem; max-width: 420px; } .order-form input { width: 100%; padding: 0.85em 1.1em; font-family: "Onest", sans-serif; font-size: 0.98rem; color: var(--text-soft); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(217, 192, 138, 0.2); border-radius: 10px; outline: none; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .order-form input::placeholder { color: rgba(243, 240, 234, 0.4); } .order-form input:focus { border-color: rgba(217, 192, 138, 0.5); background: rgba(255, 255, 255, 0.06); } .order-form__select { width: 100%; padding: 0.85em 2.4em 0.85em 1.1em; font-family: "Onest", sans-serif; font-size: 0.98rem; color: var(--text-soft); background-color: rgba(255, 255, 255, 0.04); background-image: linear-gradient(45deg, transparent 50%, rgba(217,192,138,0.7) 50%), linear-gradient(135deg, rgba(217,192,138,0.7) 50%, transparent 50%); background-position: calc(100% - 1.15em) 50%, calc(100% - 0.78em) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; border: 1px solid rgba(217, 192, 138, 0.2); border-radius: 10px; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); } .order-form__select:focus { border-color: rgba(217, 192, 138, 0.5); background-color: rgba(255, 255, 255, 0.06); } .order-form__select option { background: #15151a; color: var(--text-soft); } .order-form__select:invalid { color: rgba(243, 240, 234, 0.4); } .order-form .btn-gold { align-self: flex-start; margin-top: 0.3rem; } .order-form__note { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.5; } .order-form__note.is-ok { color: #9fd6a0; } .order-form__note.is-err { color: #e4bd92; } @media (max-width: 680px) { .order-opt { flex-direction: column; } .order-form, .order-form .btn-gold { max-width: none; } .order-form .btn-gold { align-self: stretch; text-align: center; } } /* ============ ФУТЕР ============ */ .site-footer { position: relative; z-index: 10; background: var(--black); border-top: 1px solid rgba(217, 192, 138, 0.12); padding: clamp(2.5rem, 6vh, 4rem) 6vw; text-align: center; } .site-footer__title { font-family: "Geometria", "Playfair Display", serif; font-weight: 300; font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.9); } .site-footer__author { margin-top: 0.5rem; font-family: "Onest", sans-serif; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--gold); } .site-footer__copy { margin-top: 1.3rem; font-family: "Onest", sans-serif; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--text-dim); } /* ============ МОБИЛЬНЫЕ ПРАВКИ (блоки 4–9, переход, заголовки) ============ */ @media (max-width: 680px) { /* короче «чёрный» переход к блоку с видео: раньше margin-top:240vh давал огромный чёрный экран после раннего затемнения */ .block-2 { margin-top: 115vh; padding: clamp(4rem, 14vh, 8rem) 6vw clamp(2.5rem, 6vh, 4rem); } /* заголовки чуть меньше — иначе некрасиво переносятся (напр. блок «Содержание») */ .section-title, .contents__title { font-size: clamp(1.35rem, 6.4vw, 1.65rem); letter-spacing: 0.02em; } .author__name { font-size: clamp(1.3rem, 5.6vw, 1.6rem); } .bookquote__text { font-size: clamp(1.15rem, 5vw, 1.45rem); } /* блок «Об авторе»: на мобилке колонкой, иначе текст уезжал за кадр */ .author__grid { grid-template-columns: 1fr; gap: 1.8rem; text-align: center; } .author__photo { max-width: 240px; margin: 0 auto; } } /* ============ ОРНАМЕНТЫ / РАЗДЕЛИТЕЛИ ============ */ .ornament-divider { display: flex; justify-content: center; margin: clamp(2.4rem, 6vh, 4rem) auto 0; color: rgba(217, 192, 138, 0.45); max-width: 460px; } .ornament-divider svg { width: 100%; height: auto; max-height: 28px; } .ornament-divider--lg { max-width: 560px; margin-top: clamp(3rem, 7vh, 4.5rem); color: rgba(217, 192, 138, 0.55); } .ornament-divider--lg svg { max-height: 38px; } .ornament-mini { display: flex; justify-content: center; margin-top: clamp(1.2rem, 2.8vh, 1.8rem); color: rgba(217, 192, 138, 0.45); } .ornament-mini svg { width: clamp(120px, 22vw, 180px); height: auto; } /* ============ ФОТО В РАЗДЕЛЕ «УНИКАЛЬНОСТЬ» ============ */ .unique__photo { margin: clamp(2.4rem, 6vh, 3.6rem) 0 clamp(0.5rem, 1vh, 1rem); } .unique__photo img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(217, 192, 138, 0.2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .unique__cta { display: flex; justify-content: center; margin-top: clamp(2rem, 5vh, 3rem); } /* ============================================================ СТРАНИЦА ДЛЯ ПРОЧИТАВШИХ КНИГУ (readers.html) ============================================================ */ .readers-page { background: var(--black); } /* верхняя панель: ссылка «на главную» + кнопка звука */ .readers-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.2rem, 4vw, 2rem); background: linear-gradient(180deg, rgba(5, 5, 6, 0.85), rgba(5, 5, 6, 0)); pointer-events: none; } .readers-topbar > * { pointer-events: auto; } .readers-back { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; color: var(--gold); text-decoration: none; font-family: "Onest", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(217, 192, 138, 0.35); border-radius: 999px; opacity: 0.85; transition: opacity 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease); } .readers-back:hover { opacity: 1; border-color: var(--gold); background: rgba(217, 192, 138, 0.12); color: #f0dcae; } .readers-back svg { width: 16px; height: 16px; flex: none; } /* на этой странице кнопка звука не «выезжает», а видна сразу */ .readers-topbar .sound-toggle { position: static; opacity: 0.85; } .readers-main { max-width: 1080px; margin: 0 auto; padding: clamp(6rem, 16vh, 9rem) clamp(1.5rem, 5vw, 3rem) clamp(4rem, 10vh, 7rem); } .readers-hero { text-align: center; margin-bottom: clamp(3rem, 9vh, 6rem); } .readers-hero .section-title { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); } /* абзацы приветствия держим в комфортной для чтения ширине */ .readers-hero .readers-text { max-width: 760px; margin: 0 auto; } .readers-section { margin: clamp(3rem, 9vh, 6rem) 0; } /* заголовок секции (кикер + тайтл) — по центру */ .readers-section > header { text-align: center; margin-bottom: clamp(2rem, 5vh, 3rem); } .readers-section > .kicker { display: block; text-align: center; } .readers-section .section-title { text-align: center; } /* абзацы страницы */ .readers-text p { font-family: "Onest", sans-serif; font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.85; color: var(--text-soft); margin: 0; } .readers-text p + p { margin-top: 1.4em; } /* пронумерованные способы связи */ .connect-list { list-style: none; margin: clamp(2.4rem, 6vh, 3.6rem) 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.2rem, 3vw, 1.8rem); } .connect-item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2.4vw, 1.6rem); padding: clamp(1.5rem, 3.5vw, 2.2rem); border-radius: 16px; border: 1px solid rgba(217, 192, 138, 0.18); background: radial-gradient(130% 150% at 0% 0%, rgba(217, 192, 138, 0.06), transparent 55%), linear-gradient(180deg, rgba(255, 250, 240, 0.03), rgba(255, 250, 240, 0.01)); } .connect-item__num { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; font-family: "Geometria", "Playfair Display", serif; font-size: 1.15rem; color: var(--gold); border: 1px solid rgba(217, 192, 138, 0.4); border-radius: 50%; } .connect-item__body p { margin: 0; font-family: "Onest", sans-serif; font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.8; color: var(--text-soft); } .connect-item__links { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; } /* карточки представленных людей */ .friends { display: flex; flex-direction: column; gap: clamp(1.4rem, 3vw, 2rem); margin-top: clamp(1.6rem, 4vh, 2.4rem); } .friend-card { display: grid; grid-template-columns: 132px 1fr; gap: clamp(1.2rem, 3vw, 2rem); align-items: start; padding: clamp(1.4rem, 3vw, 2rem); border-radius: 16px; border: 1px solid rgba(217, 192, 138, 0.16); background: linear-gradient(180deg, rgba(255, 250, 240, 0.03), rgba(255, 250, 240, 0.008)); } .friend-card__photo { margin: 0; width: 132px; height: 132px; } .friend-card__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; border: 1px solid rgba(217, 192, 138, 0.25); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); display: block; } .friend-card__name { margin: 0 0 0.8rem; font-family: "Geometria", "Playfair Display", serif; font-weight: 300; font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.94); } .friend-card__body p { margin: 0 0 1.2rem; font-family: "Onest", sans-serif; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.75; color: var(--text-soft); } .readers-outro { margin-top: clamp(2.4rem, 6vh, 3.6rem); text-align: center; font-family: "Onest", sans-serif; font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.75; color: var(--text-dim); } @media (max-width: 560px) { .connect-item { grid-template-columns: 1fr; } .connect-item__num { margin-bottom: 0.2rem; } .friend-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } .friend-card__body { text-align: left; } }