/* ═══════════════════════════════════════════════════════════ TrollLand · Сезон IV — общая тема сайта Подключается последней строкой в каждого раздела, поэтому правила отсюда перекрывают встроенные стили страниц того же веса. Что здесь живёт: 1. шрифты и токены сезона (фон, свечение, заголовочный шрифт); 2. общий «слой глубины»: карточки, кнопки, поля, шапки, вкладки — по классам, которые повторяются во всех разделах; 3. правила для раздела внутри портала (класс sf-embed на ). Цвета самих разделов лежат в их :root — палитра уже сезонная. Акцент игрок может сменить в Настройках: всё, что светится, берёт его из --accent-rgb / --green, поэтому перекрашивается разом. ═══════════════════════════════════════════════════════════ */ @import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700;800&display=swap"); html:root{ --display:"Unbounded","Onest",system-ui,sans-serif; --season-glow:rgba(var(--accent-rgb,232,64,82),.13); --edge:rgba(255,236,240,.055); /* волосяная рамка карточек */ --edge-hi:rgba(255,236,240,.085); /* верхний блик */ color-scheme:dark; } /* ——— фон: тёплый графит и алое зарево сверху ——— Рисуем на , а тело делаем прозрачным — так зарево не перекрывает содержимое и не ломает разделы с собственным фоном. */ html{ background: radial-gradient(1100px 520px at 88% -8%, var(--season-glow), transparent 62%), radial-gradient(900px 480px at -8% 108%, rgba(var(--accent-rgb,232,64,82),.05), transparent 60%), var(--bg,#0C0A0B); background-attachment:fixed; min-height:100%; } body{background:transparent !important} /* мелкая «пиксельная» сетка — отсылка к блокам, еле заметная */ html::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:-1; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size:32px 32px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 70% 0%, #000 0%, transparent 75%); mask-image:radial-gradient(ellipse 80% 60% at 70% 0%, #000 0%, transparent 75%); } ::selection{background:rgba(var(--accent-rgb,232,64,82),.9);color:#fff} /* полосы прокрутки одинаковые везде */ ::-webkit-scrollbar { width: 10px; height: 10px } ::-webkit-scrollbar-thumb { background: #2A2226; border-radius: 9px; border:2px solid transparent; background-clip:padding-box } ::-webkit-scrollbar-thumb:hover { background: #3B3137; background-clip:padding-box } ::-webkit-scrollbar-track { background: transparent } html{scrollbar-color:#2A2226 transparent} :focus-visible { outline: 2px solid var(--green, #E84052); outline-offset: 2px } /* ═══════════ типографика ═══════════ */ body{ font-family:"Onest",var(--f,system-ui),system-ui,sans-serif; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* Заголовки экранов — фирменный шрифт сезона. Unbounded шире Onest, поэтому кегль чуть меньше, чем был, и трекинг не такой плотный. */ h1{ font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:1.08; font-size:clamp(28px,3.1vw,40px); text-wrap:balance; } h1 em{ font-style:normal; background:linear-gradient(100deg,var(--green,#E84052) 10%,#FF9A8B 95%); -webkit-background-clip:text;background-clip:text;color:transparent; } h2,h3{text-wrap:balance} p{text-wrap:pretty} /* ═══════════ шапки разделов ═══════════ */ body > header, body > .wrap > header, body > .top{ background:rgba(12,10,11,.72) !important; -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 1px 0 rgba(255,236,240,.05); } /* ═══════════ карточки ═══════════ Цвет фона берём у раздела, сверху кладём лёгкий блик и волосяную рамку тенью — размеры блоков от этого не меняются. */ .card,.box,.gate .card,.pane,.post,.dcard,.shop,.order,.prod,.person, .farm,.house,.zone,.tile,.stat,.ucard,.chero,.fine,.lic,.sec-card,.admcard, .it,.sent,.cand,.pet,.visa,.room,.sheet,.excard,.stock,.case,.composer,.modal-in{ background-image:linear-gradient(180deg,rgba(255,236,240,.022),rgba(255,236,240,0) 42%); box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 0 1px var(--edge), 0 24px 48px -32px rgba(0,0,0,.9); } /* карточки-ссылки и плитки реагируют на курсор */ a.card:hover,a.tile:hover,.tile:hover,.shop:hover,.prod:hover,.person:hover, .house:hover,.farm:hover,.case:hover,.ucard:hover{ box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 0 1px rgba(var(--accent-rgb,232,64,82),.28), 0 26px 50px -30px rgba(var(--accent-rgb,232,64,82),.45); } /* ═══════════ кнопки ═══════════ Главная кнопка — объёмная: светлый верх, внутренний блик и алое свечение снизу. Второстепенные (soft/ghost/warn/line) не трогаем. */ .btn:not(.soft):not(.ghost):not(.warn):not(.line):not(.plain):not(:disabled), button.big:not(.ghost){ background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.18), 0 10px 22px -16px rgba(var(--accent-rgb,232,64,82),.85); transition:transform .14s, filter .14s, box-shadow .2s; } .btn:not(.soft):not(.ghost):not(.warn):not(.line):not(.plain):not(:disabled):hover{ filter:brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.18), 0 14px 28px -16px rgba(var(--accent-rgb,232,64,82),.95); } .btn:active{transform:translateY(1px) scale(.992)} .btn.soft,.btn.ghost{box-shadow:inset 0 0 0 1px var(--edge)} /* ═══════════ поля ввода ═══════════ */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):focus, select:focus,textarea:focus{ box-shadow:0 0 0 4px rgba(var(--accent-rgb,232,64,82),.16); } input::placeholder,textarea::placeholder{opacity:.9} /* ═══════════ вкладки и переключатели ═══════════ */ .tabs button.on,.tab.on,.seg button.on,.tbtn.on,.hact .on{ box-shadow:0 8px 22px -12px rgba(var(--accent-rgb,232,64,82),.9); } /* ═══════════ экран «введите ПИН» в разделах ═══════════ */ #lock.on{ background: radial-gradient(700px 380px at 50% 0%, rgba(var(--accent-rgb,232,64,82),.16), transparent 70%), rgba(12,10,11,.94) !important; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } /* ═══════════ появление экрана ═══════════ */ @keyframes s4-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* fill-mode backwards, а не both: после анимации на элементе не должно оставаться transform — иначе всё position:fixed внутри (окна, корзина, быстрый просмотр) считается от страницы, а не от экрана */ body > main,body > .wrap > main,.view.on{animation:s4-rise .38s cubic-bezier(.2,.7,.2,1) backwards} /* ——— раздел внутри портала ——— */ body.sf-embed { background: transparent !important } html.sf-embed-html{background: radial-gradient(900px 420px at 92% -10%, rgba(var(--accent-rgb,232,64,82),.10), transparent 62%), var(--bg,#0C0A0B)} /* шапку раздела рисует портал — своя больше не нужна */ body.sf-embed > header, body.sf-embed > .wrap > header { display: none !important } /* без шапки верхний отступ можно ужать */ body.sf-embed > main { padding-top: 18px } body.sf-embed > .wrap { padding-top: 18px } /* мессенджер считал высоту от своей шапки — пересчитываем */ body.sf-embed .app { height: calc(100vh - 42px) } /* заголовок первого экрана в разделе не нужен дважды */ body.sf-embed main > .view.on > h1:first-child { margin-top: 4px } /* ═══════════ рынок ═══════════ У рынка в шапке живут не только логотип, но и переключатель лавок с корзиной — без них не открыть «Мои лавки» и не оплатить заказ. Рынок сам переносит панель и корзину внутрь страницы (см. market.html, блок «панель внутри портала»), а шапка прячется общим правилом. */ @media (max-width: 900px) { body.sf-embed > main { padding-top: 12px } body.sf-embed > .wrap { padding-top: 12px } body.sf-embed .app { height: calc(100vh - 34px) } h1{font-size:clamp(26px,7vw,32px)} } @media (prefers-reduced-motion: reduce){ body > main,body > .wrap > main,.view.on{animation:none} }