/* ═══════════════════════════════════════════════════════════════════════════ Fernroot — лендинг Оформление повторяет окно магазина из игры: сверху полоса травы со свисающими кустиками, ниже — земля со слоями почвы. Рецепт взят из src/style.css один в один (.shop-header и .shop-card), не на глаз: трава — linear-gradient(grass-100 → grass-300 45% → grass-500) кустики — radial-gradient по нижнему краю, два слоя земля — #9a6b3c → #86592c + горизонтальные полосы каждые 70px Отличие от игры одно: там панель маленькая и земля везде одного тона, а здесь страница длинная — поэтому чем ниже прокрутка, тем глубже и темнее почва. Заодно это решает контраст: светлый текст на ярко-коричневом читался бы плохо. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* дерево и пергамент — из игрового UI */ --wood-900: #3a2410; --wood-800: #52351a; --wood-700: #6b4423; --wood-500: #8b5a2b; --parch-100: #fdf3d7; --parch-200: #f0deb2; --parch-300: #e2c98e; --ink-brown: #4a2f17; /* трава */ --grass-100: #8edd6a; --grass-300: #6cc94a; --grass-500: #4fae2f; --grass-700: #3a8c1e; --grass-900: #2c6f15; /* земля: верхний слой — точь-в-точь как в панели магазина */ --soil-100: #9a6b3c; --soil-200: #86592c; --soil-400: #6b4423; --soil-600: #4a2f17; --soil-800: #2e1c0c; --soil-900: #1d1207; --gold: #ffc94d; --red-400: #f2694f; --text: #fdf3d7; --text-dim: #e0cba4; --ease-out: cubic-bezier(.16, 1, .3, 1); /* Пропорции игровых записей: исходник 1920×812, кадр НЕ обрезан — по краям игровые панели (инструменты слева, выбор семян справа). */ --shot-ratio: 1280 / 540; /* высота травяной полосы наверху */ --grass-h: 74px; /* деревянный курсор — тот же, что в игре */ --cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='sd' x='-20%25' y='-20%25' width='150%25' height='150%25'%3E%3CfeDropShadow dx='1.5' dy='2' stdDeviation='1' flood-color='%23000' flood-opacity='0.6'/%3E%3C/filter%3E%3ClinearGradient id='wd' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ffe082'/%3E%3Cstop offset='45%25' stop-color='%23e69138'/%3E%3Cstop offset='100%25' stop-color='%23783f04'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter='url(%23sd)'%3E%3Cpath d='M 3,2 L 23,12 L 14,15 L 18,24 L 14,26 L 10,17 L 3,21 Z' fill='url(%23wd)' stroke='%233a2410' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M 5,5 L 19,12 L 13,14 L 10,19 Z' fill='%23fff' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E"); } * { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x на html, а не только на body: рамы окон при появлении наклонены (rotateX под perspective), и наклонённый элемент рисуется чуть шире своей раскладки — ближний край «приезжает» к зрителю. На телефоне эти лишние 2px давали боковую прокрутку, пока окно не доехало до экрана. clip, а не hidden: hidden на html создаёт контейнер прокрутки и ломает position: fixed у травяной полосы. */ html { scroll-behavior: smooth; background: var(--soil-200); overflow-x: clip; } body { color: var(--text); font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.65; overflow-x: clip; cursor: var(--cursor-default) 3 2, auto; padding-top: var(--grass-h); /* под травяную полосу наверху */ background: /* тонкая вертикальная штриховка — из .shop-card */ repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 3px, transparent 3px 56px), /* слои почвы — оттуда же, полосой каждые 70px */ repeating-linear-gradient(0deg, transparent 0 70px, rgba(0,0,0,.13) 70px 73px), /* сама земля: сверху тон магазина, ниже — глубже и темнее */ linear-gradient(180deg, var(--soil-100) 0%, var(--soil-200) 10%, var(--soil-400) 34%, var(--soil-600) 66%, var(--soil-800) 88%, var(--soil-900) 100%); background-attachment: scroll; } a { cursor: var(--cursor-default) 3 2, pointer; } h1, h2, h3, .topbar-logo, .btn-wood, .stat b { font-family: 'Nunito', 'Plus Jakarta Sans', sans-serif; font-weight: 900; line-height: 1.15; } /* ─────────────── ТРАВА НАВЕРХУ (она же шапка) ─────────────── Ровно как .shop-header в игре: градиент травы, тёмно-зелёная кромка снизу и два слоя свисающих кустиков на радиальных градиентах. Размеры увеличены — в игре полоса шириной с окошко, здесь во весь экран. */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--grass-h); display: flex; align-items: center; background: linear-gradient(180deg, var(--grass-100) 0%, var(--grass-300) 45%, var(--grass-500) 100%); border-bottom: 4px solid var(--grass-700); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.35); } .topbar::before, .topbar::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; background-repeat: repeat-x; } .topbar::before { bottom: -17px; height: 17px; background-image: radial-gradient(circle at 50% -10px, var(--grass-700) 20px, transparent 20.5px); background-size: 44px 17px; } .topbar::after { bottom: -13px; height: 14px; background-image: radial-gradient(circle at 50% -9px, var(--grass-500) 19px, transparent 19.5px); background-size: 44px 14px; } .topbar-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .topbar-logo { font-size: 1.3rem; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 rgba(44,111,21,.85); } .topbar-logo span { color: var(--gold); text-shadow: 0 2px 0 rgba(74,47,23,.6); } .topbar-cta { text-decoration: none; font-weight: 800; font-size: .92rem; padding: 9px 20px; border-radius: 12px; color: var(--wood-900); background: linear-gradient(180deg, var(--parch-100), var(--parch-300)); border: 2px solid var(--wood-800); box-shadow: 0 3px 0 var(--wood-800), inset 0 2px 0 rgba(255,255,255,.55); transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); } .topbar-cta:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--wood-800), inset 0 2px 0 rgba(255,255,255,.55); } .topbar-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-800); } /* ─────────────── ПЕРВЫЙ ЭКРАН (уже под землёй) ─────────────── */ .hero { position: relative; min-height: calc(100svh - var(--grass-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 24px 110px; overflow: hidden; /* Локальное затемнение: сразу под травой почва светлая, как в магазине, а к низу экрана уходит вглубь. Без этого светлый текст на ярком #9a6b3c читался бы на грани. */ background: linear-gradient(180deg, rgba(29,18,7,.04) 0%, rgba(29,18,7,.46) 100%); } /* Вкрапления руды в почве — расставляет app.js */ .ore-field { position: absolute; inset: 0; pointer-events: none; } .ore-field i { position: absolute; display: block; border-radius: 4px; border: 1.5px solid rgba(0,0,0,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); opacity: .5; } .hero-content { position: relative; z-index: 2; max-width: 760px; } /* Нижняя граница 2.6rem, а не 3.2rem: «Росчисть» — восемь букв, и при 3.2rem слово занимало ровно всю ширину экрана 375px, то есть на 320px уже вылезало. */ .hero-title { font-size: clamp(2.6rem, 10vw, 6.4rem); letter-spacing: 3px; color: var(--parch-100); text-shadow: 0 3px 0 var(--wood-900), 0 6px 0 rgba(29,18,7,.55), 0 10px 26px rgba(0,0,0,.5); animation: heroIn 1s var(--ease-out) both; } .hero-title span { color: var(--gold); } .hero-sub { font-size: clamp(.95rem, 2.4vw, 1.15rem); letter-spacing: 6px; text-transform: uppercase; /* parch-300 давал 4.27:1 на светлой земле — чуть ниже нормы для текста такого размера, поэтому берём тон светлее */ color: var(--parch-200); margin-top: 8px; text-shadow: 0 2px 0 rgba(29,18,7,.6); animation: heroIn 1s .1s var(--ease-out) both; } .hero-lead { margin: 26px auto 0; max-width: 580px; font-size: clamp(1rem, 2.5vw, 1.12rem); color: var(--text); text-shadow: 0 1px 2px rgba(29,18,7,.75); animation: heroIn 1s .2s var(--ease-out) both; } .hero-btn { margin-top: 34px; animation: heroIn 1s .3s var(--ease-out) both; } .hero-meta { margin-top: 16px; font-size: .85rem; color: var(--parch-300); text-shadow: 0 1px 2px rgba(29,18,7,.7); animation: heroIn 1s .4s var(--ease-out) both; } @keyframes heroIn { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } } .scroll-hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .74rem; letter-spacing: 2px; text-transform: uppercase; color: var(--parch-300); text-shadow: 0 1px 2px rgba(29,18,7,.7); animation: bob 2s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, 9px) } } /* ─────────────── ЗЕЛЁНАЯ КНОПКА (как в магазине) ─────────────── */ .btn-wood { display: inline-block; text-decoration: none; border: 0; padding: 0 0 5px; border-radius: 16px; background: var(--grass-900); box-shadow: 0 10px 24px rgba(0,0,0,.45); transition: transform .16s var(--ease-out), padding .16s var(--ease-out); } .btn-wood-face { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 34px; border-radius: 14px; font-size: 1.02rem; letter-spacing: .4px; color: #fff; background: linear-gradient(180deg, var(--grass-100), var(--grass-500)); border: 2px solid var(--grass-900); text-shadow: 0 1px 0 rgba(44,111,21,.8); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); } .btn-wood:hover { transform: translateY(-3px); padding-bottom: 8px; } .btn-wood:active { transform: translateY(2px); padding-bottom: 1px; } .btn-big .btn-wood-face { padding: 19px 46px; font-size: 1.2rem; } /* ─────────────── БЛОКИ СЦЕН ─────────────── Записи сняты в очень широком кадре (2.37:1), поэтому текст сверху, а окно во всю ширину: в раскладке «текст слева, окно справа» окно выходило 522×221 и игровые панели превращались в кашу. */ main { position: relative; z-index: 2; } .scene-block { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 24px; } .scene-text { max-width: 800px; margin-bottom: clamp(24px, 3vw, 34px); } .scene-tag { display: inline-block; margin-bottom: 14px; font-size: .72rem; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; color: #fff; background: linear-gradient(180deg, var(--grass-300), var(--grass-700)); border: 2px solid var(--grass-900); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 rgba(0,0,0,.25); text-shadow: 0 1px 0 rgba(44,111,21,.8); } .tag-red { background: linear-gradient(180deg, #f2694f, #93261a); border-color: #6d1a12; text-shadow: 0 1px 0 rgba(90,20,12,.8); } .tag-gold { background: linear-gradient(180deg, #ffd76b, #d69412); border-color: #8a6410; color: #3a2410; text-shadow: 0 1px 0 rgba(255,255,255,.4); } .tag-steel { background: linear-gradient(180deg, #aeb7c4, #6b7684); border-color: #454e59; } .tag-violet { background: linear-gradient(180deg, #b79bf0, #6d4bb0); border-color: #4a3080; } .tag-blue { background: linear-gradient(180deg, #7fc2f5, #2b6da8); border-color: #1d4a75; } .scene-text h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--parch-100); margin-bottom: 14px; text-shadow: 0 2px 0 var(--wood-900), 0 4px 12px rgba(0,0,0,.4); } /* Светлее, чем хотелось бы «приглушённому» абзацу, но иначе не хватает контраста: под самой травой земля светлая (#9a6b3c из магазина), и тускло-бежевый текст на ней даёт 3.9:1 при норме 4.5. */ .scene-text p { color: var(--parch-100); font-size: 1.03rem; text-shadow: 0 1px 2px rgba(29,18,7,.7); } .scene-facts { list-style: none; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 30px; } .scene-facts li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--parch-200); text-shadow: 0 1px 2px rgba(29,18,7,.6); } /* Маркер — росток, а не квадратик */ .scene-facts li::before { content: ''; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; background: var(--grass-300); border: 1.5px solid var(--grass-900); border-radius: 60% 0 60% 0; transform: rotate(-12deg); } .scene-facts b { color: var(--gold); } /* ─────────────── ОКНО В ИГРУ (деревянная рама) ─────────────── */ .window { perspective: 1400px; } .window-frame { position: relative; border-radius: 22px; padding: 13px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 9px), linear-gradient(160deg, var(--wood-500), var(--wood-700) 45%, var(--wood-900)); border: 3px solid var(--wood-900); box-shadow: 0 26px 54px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,225,180,.2), inset 0 -3px 0 rgba(0,0,0,.35); transition: transform .7s var(--ease-out); } .stage { position: relative; overflow: hidden; aspect-ratio: var(--shot-ratio); border-radius: 10px; background: var(--soil-900); box-shadow: inset 0 0 40px rgba(0,0,0,.5); } .window-nails { position: absolute; inset: 0; pointer-events: none; } .window-nails i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 32%, #ffe9b8, #b98a3c 60%, #6b4423); box-shadow: 0 1px 2px rgba(0,0,0,.6); } .window-nails i:nth-child(1) { top: 8px; left: 8px } .window-nails i:nth-child(2) { top: 8px; right: 8px } .window-nails i:nth-child(3) { bottom: 8px; left: 8px } .window-nails i:nth-child(4) { bottom: 8px; right: 8px } /* Без opacity: она гасит текст поверх и без того светлой земли. Приглушаем цветом, чтобы контраст оставался измеримым и достаточным. */ .window-label { margin-top: 12px; text-align: center; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; color: var(--parch-200); text-shadow: 0 1px 2px rgba(29,18,7,.7); } /* ─────────────── ЗАПИСЬ ИЗ ИГРЫ ─────────────── */ /* Постер (первый кадр) стоит атрибутом на самом