/* ========================================================================= ТАМАРА — НЕ ПОМИДОР Страница, которую сделали друзья Тамары. @koreanblogto — её собственный канал о корейском. Язык дизайна: российский бигтех (Yandex / T‑Bank / Sber / VK / Ozon). Правило «1 + 1»: один насыщенный акцент (томатный) + тёплый почти‑чёрный + тёплая бумага. Оконно‑рамочная модульность (T‑Bank), крупные числа (финтех), диагональная штриховка‑лента (телеком), кириллический гротеск, реальные таблицы и реестры вместо иконок‑карточек. Анти‑AI: ни фиолетовых градиентов, ни glassmorphism/blur, ни 3 иконок в ряд, ни центрированного героя с двойным CTA, ни hover‑lift со свечением, ни Inter/Roboto/системных шрифтов, ни «всё подряд скруглено + мягкая тень», ни сетки‑точек в фоне, ни пульсирующей «живой» точки, ни счётчиков‑цифр, ни шиммер‑скелетонов. Движение — только осмысленное. Контент виден БЕЗ JS. ========================================================================= */ :root{ --paper:#ffffff; /* рамочные карточки / приподнятые поверхности */ --bg:#faf7f1; /* тёплая бумага — основа страницы */ --surface:#f1ede3; /* утопленная поверхность */ --ink:#16130d; /* тёплый почти‑чёрный */ --ink-2:#5f5849; /* приглушённый текст (AA на бумаге) */ --line:#e6e0d2; /* тонкая линия на светлом */ --tomato:#ec2b18; /* доминирующий акцент */ --tomato-press:#c41f0b; /* нажатие */ --tomato-deep:#a8160a; /* акцентный текст на светлом (контраст AA) */ --leaf:#2f8a3e; /* зелёный, очень умеренно */ --dark:#16130d; /* тёмные полосы */ --on-dark:#f6f2ea; --display:'Unbounded', system-ui, sans-serif; --sans:'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; --r1:6px; --r2:12px; --r3:18px; --rp:999px; --pad:clamp(20px,5vw,68px); --maxw:1220px; --ease:cubic-bezier(.22,.72,.16,1); --spring:cubic-bezier(.34,1.26,.5,1); /* лёгкий «спринг» с дозированным перелётом — для скользящих элементов */ --hatch:repeating-linear-gradient(135deg,var(--tomato) 0 8px,transparent 8px 17px); } /* ---------- база / защита от «поломок» ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:84px; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:clamp(16px,.5vw + 15px,17px); line-height:1.62; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* CLIP, не hidden: overflow-x:hidden делает скролл-контейнером (overflow-y → auto) и ЛОМАЕТ position:sticky у .nav на ПК. clip обрезает гориз. переполнение без этого эффекта. */ overflow-x:clip; overflow-wrap:break-word; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ margin:0; font-weight:700; } p{ margin:0; } ul,ol{ margin:0; padding:0; list-style:none; } img,svg{ display:block; max-width:100%; } b,strong{ font-weight:700; } i{ font-style:italic; } ::selection{ background:var(--tomato); color:#fff; } :focus-visible{ outline:2.5px solid var(--tomato); outline-offset:3px; border-radius:3px; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } .mono{ font-family:var(--mono); font-weight:500; letter-spacing:.01em; } .lnk{ color:var(--tomato-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:rgba(168,22,10,.45); transition:text-decoration-color .18s, color .18s; } .lnk:hover{ color:var(--tomato); text-decoration-color:currentColor; } [id]{ scroll-margin-top:96px; } .progress{ position:fixed; inset:0 auto auto 0; height:3px; width:0; background:var(--tomato); z-index:100; } .skip{ position:fixed; left:50%; top:-60px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; z-index:200; border-radius:0 0 8px 8px; transition:top .2s; } .skip:focus{ top:0; } /* ---------- появление: тихое затухание (без «выезда снизу»); виден без JS ---------- */ .anim .reveal{ opacity:0; transition:opacity .55s var(--ease); } .anim .reveal.in{ opacity:1; } /* ==================== ВЕРХНЯЯ СТРОКА ==================== */ .topbar{ background:var(--ink); color:var(--on-dark); font-size:11.5px; } .topbar__row{ display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:36px; color:rgba(246,242,234,.7); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; } .topbar__row .mono{ overflow:hidden; text-overflow:ellipsis; } .topbar__tg{ color:rgba(246,242,234,.95); transition:color .18s; flex:none; } .topbar__tg:hover{ color:var(--tomato); } /* ==================== НАВИГАЦИЯ (липкая шапка) ==================== */ .nav{ position:sticky; top:0; z-index:90; background:var(--bg); border-bottom:1px solid var(--line); transition:box-shadow .25s var(--ease), border-color .25s var(--ease); } /* после прокрутки за верхнюю строку шапка слегка «приподнимается» — тень + уплотнение. Без blur/стекла: фон остаётся плотным (анти‑AI glassmorphism). */ .nav--scrolled{ border-bottom-color:transparent; box-shadow:0 1px 0 var(--line), 0 16px 30px -26px rgba(22,19,13,.6); } .nav__inner{ display:flex; align-items:center; gap:20px; min-height:66px; transition:min-height .25s var(--ease); } .nav--scrolled .nav__inner{ min-height:56px; } .brand{ position:relative; font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.02em; display:inline-flex; align-items:center; white-space:nowrap; flex:none; } .neq{ color:var(--tomato); margin:0 .24em; font-weight:700; } /* косой штамп «проект»: общий вид для шапки, героя и подвала — подчёркивает, что это маленький проект, не бренд. Сидит в левом верхнем углу знака/заголовка. */ .brand__badge, .hero__badge, .foot__badge{ position:absolute; z-index:2; transform-origin:center; font-family:var(--mono); font-weight:700; line-height:1; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; color:var(--tomato); background:var(--paper); border:1.2px solid var(--tomato); border-radius:4px; pointer-events:none; user-select:none; } .brand__badge{ left:-13px; top:-8px; font-size:9px; padding:2px 5px; transform:rotate(-9deg); box-shadow:1.5px 1.5px 0 rgba(236,43,24,.18); } .foot__badge{ left:-13px; top:-12px; font-size:clamp(11px,1.2vw,14px); padding:2.5px 7px; transform:rotate(-9deg); box-shadow:1.5px 1.5px 0 rgba(236,43,24,.22); } .hero__badge{ left:-.5em; top:-.62em; font-size:clamp(15px,2.1vw,23px); padding:.2em .52em; transform:rotate(-8deg); box-shadow:2px 2px 0 rgba(236,43,24,.16); } .anim .hero__badge{ opacity:0; animation:badgein .55s var(--ease) .36s both; } @keyframes badgein{ from{ opacity:0; } to{ opacity:1; } } /* скрытый чекбокс зафиксирован у верхнего края окна: фокус на нём при клике по бургеру больше НЕ прокручивает страницу к началу (баг sticky-шапки на мобильных). ~-селекторы работают по DOM-порядку, поэтому механика меню не меняется. */ .nav-toggle{ position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none; } .burger{ display:none; } .nav__menu{ display:flex; align-items:center; gap:clamp(16px,2.2vw,28px); margin-left:auto; } .nav__menu>a:not(.btn){ position:relative; color:var(--ink-2); font-size:15px; font-weight:500; padding:4px 0; transition:color .18s; } .nav__menu>a:not(.btn)::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--tomato); transition:right .28s var(--ease); } .nav__menu>a:not(.btn):hover{ color:var(--ink); } .nav__menu>a:not(.btn):hover::after{ right:0; } /* ==================== КНОПКИ — объёмные (жёсткая смещённая тень + «вдавливание») ==================== */ /* приём из конструктивизма/российского бигтеха: чёткая offset-тень = физическая кнопка. Цвет тени — переменная --btnsh, чтобы менять её на тёмных/цветных плашках. */ .btn{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); --btnsh:var(--ink); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:16px; line-height:1; text-align:center; padding:15px 24px; border:1.5px solid var(--bd); border-radius:var(--r2); background:var(--bg); color:var(--fg); cursor:pointer; box-shadow:4px 4px 0 var(--btnsh); transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .btn:hover{ box-shadow:2px 2px 0 var(--btnsh); transform:translate(2px,2px); } /* приём Apple: нажатие — мгновенное и чёткое, отпускание — мягко «оседает» обратно */ .btn:active{ box-shadow:0 0 0 var(--btnsh); transform:translate(4px,4px); transition-duration:.09s; } .btn--sm{ padding:10px 16px; font-size:14px; box-shadow:3px 3px 0 var(--btnsh); } .btn--sm:hover{ box-shadow:1px 1px 0 var(--btnsh); transform:translate(2px,2px); } .btn--lg{ padding:18px 30px; font-size:17px; } .btn--solid:hover{ --bg:var(--tomato); --bd:var(--tomato); } .btn--solid:active{ --bg:var(--tomato-press); --bd:var(--tomato-press); } .btn--tomato{ --bg:var(--tomato); --fg:#fff; --bd:var(--tomato); } .btn--tomato:hover{ --bg:var(--tomato-press); --bd:var(--tomato-press); } .btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--ink); } .btn--ghost:hover{ --bg:var(--ink); --fg:#fff; } .btn--white{ --bg:#fff; --fg:var(--ink); --bd:#fff; } .btn--white:hover{ --bg:transparent; --fg:#fff; --bd:#fff; } .btn[hidden]{ display:none; } .tg{ width:18px; height:18px; fill:currentColor; flex:none; } /* ==================== ОБЩИЕ: СЕКЦИЯ + ЗАГОЛОВОК ==================== */ .sec{ padding-block:clamp(54px,8vw,116px); } .kicker{ font-family:var(--mono); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--tomato-deep); margin:0 0 22px; display:inline-flex; align-items:center; gap:10px; } .kicker__dot{ width:7px; height:7px; border-radius:50%; background:var(--tomato); flex:none; } .head{ display:flex; align-items:baseline; gap:clamp(12px,2vw,22px); margin-bottom:clamp(30px,4vw,52px); } .head__no{ font-size:14px; font-weight:700; color:var(--tomato); flex:none; } .head__title{ font-family:var(--display); font-weight:700; font-size:clamp(27px,4.4vw,50px); letter-spacing:-.025em; line-height:1.02; flex:0 1 auto; min-width:0; } .head__rule{ flex:1 1 auto; min-width:20px; height:2px; align-self:center; background:linear-gradient(90deg,var(--line),transparent); } .head__tag{ flex:none; align-self:center; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); border:1px solid var(--line); border-radius:var(--rp); padding:5px 12px; } /* ==================== ГЕРОЙ ==================== */ .hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); } /* бренд‑знак «≠» как крупная типографика‑объект (конструктивизм), а не AI‑сетка точек */ .hero__mark{ position:absolute; z-index:0; top:clamp(-40px,-2vw,-6px); right:clamp(-12px,1vw,44px); font-family:var(--display); font-weight:800; font-size:clamp(190px,33vw,470px); line-height:.7; color:var(--tomato); opacity:.07; pointer-events:none; user-select:none; } .hero__inner{ position:relative; z-index:1; padding-block:clamp(46px,6.5vw,98px); } .hero__title{ position:relative; isolation:isolate; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(2.4rem,9vw,7rem); line-height:.92; letter-spacing:-.035em; margin:clamp(18px,2.5vw,28px) 0 0; overflow-wrap:break-word; word-break:keep-all; hyphens:none; max-width:14ch; } .hero__title .ln{ display:block; } .anim .hero__title .ln{ opacity:0; transform:translateY(.28em); animation:lnrise .85s var(--ease) both; } .anim .hero__title .ln:nth-child(1){ animation-delay:.08s; } .anim .hero__title .ln:nth-child(2){ animation-delay:.2s; } @keyframes lnrise{ to{ opacity:1; transform:none; } } .dot{ color:var(--tomato); font-style:normal; display:inline-block; } .hero__lead{ font-size:clamp(17px,1.4vw,20px); color:var(--ink-2); max-width:54ch; margin:clamp(26px,3vw,34px) 0 0; } .hero__lead .lnk{ color:var(--tomato-deep); font-weight:600; } .hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,3vw,34px); } .anim .hero__lead.reveal{ transition-delay:.14s; } .anim .hero__cta.reveal{ transition-delay:.22s; } /* ==================== КТО ТАКАЯ ТАМАРА ==================== */ .who__grid{ display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(32px,5vw,72px); align-items:start; } .lede{ font-size:clamp(20px,2.1vw,29px); font-weight:500; letter-spacing:-.012em; line-height:1.34; margin-bottom:22px; } .who__p{ color:var(--ink-2); font-size:17px; max-width:56ch; margin-bottom:16px; } .who__p:last-child{ margin-bottom:0; } /* словарная статья «Тамара» — отсылка к корейскому словарю (Naver 사전), вместо тегов */ .who__card{ position:relative; background:var(--paper); border:1.5px solid var(--ink); border-radius:var(--r3); padding:clamp(24px,2.6vw,34px); overflow:hidden; } .who__card::before{ content:""; position:absolute; left:24px; right:24px; top:-1.5px; height:5px; background:var(--hatch); border-radius:0 0 4px 4px; } .who__card-pos{ font-size:12px; color:var(--ink-2); letter-spacing:.02em; margin:6px 0 10px; } .who__card-word{ font-family:var(--display); font-weight:800; font-size:clamp(30px,4.2vw,44px); letter-spacing:-.03em; color:var(--ink); line-height:1; margin:0 0 18px; } .who__card-defs{ display:flex; flex-direction:column; gap:12px; margin:0 0 18px; } .who__card-defs li{ position:relative; padding-left:30px; font-size:15.5px; color:var(--ink); line-height:1.5; } .who__card-n{ position:absolute; left:0; top:0; font-family:var(--mono); font-weight:700; font-size:14px; color:var(--tomato-deep); } .who__card-anti{ display:flex; align-items:baseline; gap:10px; padding-top:16px; border-top:1px solid var(--line); font-size:15px; color:var(--ink-2); } .who__card-neq{ font-family:var(--display); font-weight:800; font-size:20px; color:var(--tomato); line-height:1; } /* ==================== ДОКАЗАТЕЛЬСТВА ==================== */ .ev__grid{ display:grid; grid-template-columns:1fr minmax(220px,290px); gap:clamp(28px,4vw,56px); align-items:start; } .ledger__item{ display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,2vw,26px); align-items:baseline; padding:22px 0; border-top:1px solid var(--line); } .ledger__item:first-child{ border-top:0; padding-top:0; } .ledger__no{ font-size:14px; font-weight:700; color:var(--tomato); flex:none; } .ledger__txt h3{ font-size:clamp(18px,1.9vw,22px); letter-spacing:-.012em; margin-bottom:6px; } .ledger__txt p{ color:var(--ink-2); font-size:16px; max-width:60ch; } .exhibit{ position:relative; margin:0; background:var(--paper); border:1.5px solid var(--ink); border-radius:var(--r3); overflow:hidden; position:sticky; top:96px; } .exhibit__tape{ display:block; height:9px; background:var(--hatch); } .exhibit__img{ padding:clamp(14px,3vw,26px) clamp(20px,3vw,30px) 4px; } .tomato{ width:100%; max-width:200px; margin-inline:auto; } .exhibit__slash{ stroke:var(--tomato); stroke-width:9; stroke-linecap:round; } .anim .exhibit__slash{ stroke-dasharray:200; stroke-dashoffset:200; } .anim .exhibit.in .exhibit__slash{ animation:strike .6s var(--ease) .3s forwards; } @keyframes strike{ to{ stroke-dashoffset:0; } } .exhibit__cap{ display:flex; flex-direction:column; gap:7px; padding:14px clamp(20px,3vw,30px) clamp(20px,3vw,26px); border-top:1px solid var(--line); } .exhibit__cap .mono{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--tomato-deep); } .exhibit__cap span:last-child{ font-size:14.5px; color:var(--ink-2); } /* ==================== ЦИФРЫ ==================== */ .stats{ background:var(--dark); color:#fff; } .stats__row{ display:grid; grid-template-columns:repeat(4,1fr); padding-block:clamp(40px,5vw,64px); } .stat{ padding-inline:clamp(14px,2vw,30px); border-left:1px solid rgba(255,255,255,.14); } .stat:first-child{ border-left:0; padding-left:0; } .stat__num{ font-family:var(--display); font-weight:700; font-size:clamp(38px,5.6vw,68px); line-height:1; letter-spacing:-.03em; display:block; font-variant-numeric:tabular-nums; } .stat__num--red{ color:var(--tomato); } .stat__cap{ display:block; margin-top:13px; font-size:13px; color:rgba(246,242,234,.66); text-transform:uppercase; letter-spacing:.04em; line-height:1.4; } /* ==================== ИСТОРИЯ / СЕГМЕНТ ==================== */ .seg__in{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } /* сегмент-контрол с «плывущей» подложкой (приём iOS): единый thumb скользит между вариантами, а не подсвечивает их по очереди. Работает без JS — на radio-кнопках. */ .seg__bar{ position:relative; isolation:isolate; display:inline-grid; grid-template-columns:1fr 1fr; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:var(--rp); margin-bottom:36px; max-width:100%; } .seg__bar::before{ content:""; position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); background:var(--ink); border-radius:var(--rp); transition:transform .42s var(--spring); } .seg__bar label{ position:relative; z-index:1; text-align:center; padding:11px 22px; border-radius:var(--rp); font-weight:600; font-size:15px; color:var(--ink-2); cursor:pointer; white-space:nowrap; transition:color .25s var(--ease); } .seg__bar label:hover{ color:var(--ink); } #seg-tomato:checked ~ .seg__bar::before{ transform:translateX(100%); } #seg-tamara:checked ~ .seg__bar label[for="seg-tamara"], #seg-tomato:checked ~ .seg__bar label[for="seg-tomato"]{ color:#fff; } .seg__in:focus-visible ~ .seg__bar{ outline:2.5px solid var(--tomato); outline-offset:2px; } .seg__panel{ display:none; } #seg-tamara:checked ~ .seg__panels #panel-tamara, #seg-tomato:checked ~ .seg__panels #panel-tomato{ display:block; } .seg__intro{ color:var(--ink-2); max-width:64ch; margin:0 0 30px; font-size:16.5px; } .tl__item{ display:grid; grid-template-columns:140px 1fr; gap:clamp(16px,3vw,44px); padding:22px 0; border-top:1px solid var(--line); } .tl__item:first-child{ border-top:0; } .tl__year{ font-weight:600; font-size:14px; color:var(--tomato-deep); padding-top:3px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; } .tl__body h4{ font-size:clamp(17px,1.7vw,21px); letter-spacing:-.01em; margin-bottom:6px; } .tl__body p{ color:var(--ink-2); font-size:16px; max-width:66ch; } .myth{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--ink-2); padding:3px 8px; border-radius:var(--r1); } /* ==================== СРАВНЕНИЕ (таблица) ==================== */ .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r3); } .ctable{ width:100%; border-collapse:collapse; min-width:480px; font-size:clamp(15px,1.3vw,17px); background:var(--paper); } .ctable th,.ctable td{ padding:15px 20px; text-align:left; border-bottom:1px solid var(--line); } .ctable tr:last-child th,.ctable tr:last-child td{ border-bottom:0; } .ctable thead th{ font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); border-bottom:2px solid var(--ink); } .ctable tbody th{ font-weight:500; } .ctable td{ text-align:center; width:24%; } .ctable .col-t{ background:rgba(236,43,24,.05); } .ctable thead .col-t{ color:var(--tomato-deep); } .ctable tbody tr:hover td,.ctable tbody tr:hover th{ background:rgba(22,19,13,.025); } .ctable tbody tr:hover .col-t{ background:rgba(236,43,24,.09); } .yes{ color:var(--tomato-deep); font-weight:700; } .no{ color:var(--ink-2); } .compare__note{ padding-top:30px; font-size:clamp(17px,1.9vw,24px); letter-spacing:-.01em; } .compare__note b{ color:var(--tomato-deep); } /* ==================== СЛОВО ДНЯ (한 단어씩) ==================== */ /* крупная корейская типографика как объект (конструктивизм: буква = форма). 사람 (человек) — это Тамара; 토마토 (помидор) — нет. Реальная польза + шутка. */ .wordday{ position:relative; background:var(--surface); border-block:1px solid var(--line); overflow:hidden; } .wordday__tape{ position:absolute; inset:0 0 auto 0; height:8px; background:var(--hatch); opacity:.85; } .wordday__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); align-items:stretch; } .wcard{ position:relative; display:flex; flex-direction:column; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r3); padding:clamp(26px,3.4vw,44px); overflow:hidden; } .wcard--yes{ border-color:var(--ink); } .wcard--no{ background:var(--surface); } .wcard__tag{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2); margin:0 0 16px; } .wcard--yes .wcard__tag{ color:var(--tomato-deep); } .wcard__ko{ font-family:var(--display); font-weight:700; font-size:clamp(64px,12vw,128px); line-height:.9; letter-spacing:-.02em; color:var(--ink); margin:0; } .wcard--yes .wcard__ko{ color:var(--tomato); } .wcard--no .wcard__ko{ color:var(--ink-2); } .wcard__rom{ font-size:14px; color:var(--ink-2); margin:12px 0 0; } .wcard__ru{ font-family:var(--display); font-weight:600; font-size:clamp(22px,2.6vw,30px); letter-spacing:-.02em; margin:14px 0 0; } .wcard__note{ color:var(--ink-2); font-size:15.5px; line-height:1.5; margin:12px 0 0; max-width:42ch; } .wcard__verdict{ position:absolute; top:clamp(22px,3vw,34px); right:clamp(22px,3vw,34px); font-family:var(--mono); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#fff; background:var(--tomato); padding:7px 14px; border-radius:var(--rp); } .wcard__verdict--no{ background:var(--ink-2); } .wordday__foot{ margin-top:clamp(22px,3vw,32px); font-size:16px; color:var(--ink-2); } /* ==================== КОРЕЙСКИЙ ==================== */ .channelcard{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px; padding:clamp(26px,4vw,46px); background:var(--surface); border:1.5px solid var(--ink); border-radius:var(--r3); margin-bottom:clamp(40px,5vw,60px); position:relative; overflow:hidden; } /* оконная «шапка» рамки вместо мягкого свечения‑шара */ .channelcard::before{ content:""; position:absolute; left:24px; right:24px; top:-1.5px; height:5px; background:var(--hatch); border-radius:0 0 4px 4px; } .channelcard__text{ min-width:min(100%,260px); } .channelcard__kick{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); margin:8px 0 8px; } .channelcard__handle{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4vw,46px); letter-spacing:-.02em; color:var(--tomato-deep); margin:0 0 12px; } .channelcard__desc{ color:var(--ink-2); max-width:50ch; margin:0; font-size:16px; } .channelcard .btn{ flex:none; position:relative; z-index:1; } .sub{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin:0 0 18px; } .korejskij .sub{ margin-top:clamp(36px,5vw,56px); } /* ресурсы */ .res{ border-top:1px solid var(--line); } .res__link{ display:grid; grid-template-columns:minmax(170px,1.1fr) 2fr auto auto; align-items:center; gap:clamp(14px,3vw,40px); padding:20px 6px; border-bottom:1px solid var(--line); transition:background .18s, padding-left .4s var(--spring); } .res__link:hover{ background:rgba(22,19,13,.025); padding-left:16px; } .res__name{ font-family:var(--display); font-weight:700; font-size:clamp(17px,1.7vw,21px); letter-spacing:-.02em; display:inline-flex; align-items:center; gap:8px; } .res__name .tg{ width:15px; height:15px; fill:var(--tomato); } .res__desc{ color:var(--ink-2); font-size:15px; } .res__tag{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); border:1px solid var(--line); border-radius:var(--rp); padding:5px 12px; white-space:nowrap; } .res__go{ font-size:19px; color:var(--ink-2); transition:transform .4s var(--spring), color .18s; } .res__link:hover .res__go{ transform:translate(3px,-3px); color:var(--tomato); } .res__row--primary .res__link{ background:rgba(236,43,24,.05); border-bottom-color:rgba(236,43,24,.22); box-shadow:inset 3px 0 0 var(--tomato); } .res__row--primary .res__link:hover{ background:rgba(236,43,24,.09); } .res__row--primary .res__tag{ color:#fff; background:var(--tomato); border-color:var(--tomato); } /* ==================== ЛЕНТА КАНАЛА (Telegram) ==================== */ /* официальный виджет Telegram, поданный в нашей рамке: реальные посты, не макет. Номера постов скрипт узнаёт сам — лента остаётся свежей без ручной правки. */ .lenta__bar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; padding-bottom:14px; margin-bottom:clamp(20px,2.6vw,30px); border-bottom:2px solid var(--ink); } .lenta__meta{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); } .lenta__dot{ width:8px; height:8px; border-radius:50%; background:var(--tomato); flex:none; } .lenta__all{ font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--tomato-deep); white-space:nowrap; transition:color .18s, transform .38s var(--spring); } .lenta__all:hover{ color:var(--tomato); } .tggrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.7vw,22px); align-items:start; } .tgpost{ min-width:0; } .tgpost iframe{ width:100% !important; margin:0 !important; } /* спокойный плейсхолдер загрузки — без шиммера (сам шиммер — это AI‑tell) */ .tgpost--loading{ min-height:210px; border:1px solid var(--line); border-radius:var(--r2); background:var(--surface); display:flex; align-items:center; justify-content:center; } .tgpost--loading::after{ content:"загрузка…"; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); } .tggrid--failed .tgpost--loading{ display:none; } .tgfeed__foot{ margin-top:clamp(24px,3.2vw,36px); display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; } .tgfeed__fail{ display:none; max-width:50ch; color:var(--ink-2); font-size:15px; } .tggrid--failed ~ .tgfeed__foot .tgfeed__fail{ display:block; } .lenta__actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; } .tgfeed__ns{ color:var(--ink-2); font-size:15px; text-align:center; } /* ==================== РЕКЛАМА / СВЯЗЬ ==================== */ /* две карточки: реклама → Тамаре в Telegram; техника сайта → webmaster@ (не Тамара) */ .contact__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(20px,2.6vw,30px); align-items:stretch; } .contact__card{ display:flex; flex-direction:column; background:var(--surface); border:1.5px solid var(--ink); border-radius:var(--r3); padding:clamp(26px,3.4vw,44px); position:relative; overflow:hidden; } .contact__card--primary::before{ content:""; position:absolute; left:24px; right:24px; top:-1.5px; height:5px; background:var(--hatch); border-radius:0 0 4px 4px; } .contact__card--site{ background:var(--paper); border-color:var(--line); } .contact__kick{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2); margin:6px 0 16px; } .contact__card--primary .contact__kick{ color:var(--tomato-deep); } .contact__lead{ font-size:clamp(18px,1.9vw,23px); font-weight:600; letter-spacing:-.015em; line-height:1.3; margin:0 0 14px; } .contact__p{ color:var(--ink-2); font-size:16px; margin:0 0 26px; } .contact__p b{ color:var(--ink); font-weight:700; } .contact__card--primary .btn{ margin-top:auto; align-self:flex-start; } .contact__site-lead{ font-size:17px; font-weight:600; margin:0 0 14px; } .contact__mail{ font-family:var(--mono); font-weight:600; font-size:clamp(15px,1.7vw,19px); color:var(--tomato-deep); word-break:break-all; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:rgba(168,22,10,.4); transition:color .18s; } .contact__mail:hover{ color:var(--tomato); text-decoration-color:currentColor; } .contact__site-note{ color:var(--ink-2); font-size:14.5px; line-height:1.55; margin:16px 0 0; padding-top:16px; border-top:1px solid var(--line); } .contact__site-note b{ color:var(--ink); } /* ==================== ЦИТАТА ==================== */ .quote{ background:var(--surface); border-block:1px solid var(--line); } .quote__in{ position:relative; padding-block:clamp(58px,8vw,112px); } .quote__in::before{ content:"«"; position:absolute; top:-.18em; left:-.03em; font-family:var(--display); font-weight:700; font-size:clamp(150px,22vw,280px); line-height:1; color:var(--tomato); opacity:.1; pointer-events:none; } .quote__in p{ position:relative; font-family:var(--display); font-weight:600; font-size:clamp(24px,4vw,50px); letter-spacing:-.025em; line-height:1.14; max-width:22ch; margin:0; } .quote__in cite{ display:block; margin-top:24px; font-style:normal; font-family:var(--mono); font-size:14px; color:var(--ink-2); } /* ==================== ВОПРОСЫ ==================== */ .faq__list{ max-width:920px; border-top:1px solid var(--line); counter-reset:qa; } .qa{ border-bottom:1px solid var(--line); } .qa summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:clamp(14px,2vw,22px); padding:24px 0; font-size:clamp(17px,1.9vw,22px); font-weight:600; letter-spacing:-.01em; } .qa summary::-webkit-details-marker{ display:none; } .qa summary::before{ counter-increment:qa; content:counter(qa,decimal-leading-zero); font-family:var(--mono); font-weight:700; font-size:14px; color:var(--tomato); flex:none; min-width:2.2ch; padding-top:.32em; } .qa__q{ flex:1 1 auto; transition:color .18s, transform .32s var(--spring); } .qa summary:hover .qa__q{ color:var(--tomato-deep); transform:translateX(3px); } .qa[open] .qa__q{ color:var(--tomato-deep); } .qa__pl{ position:relative; width:16px; height:16px; flex:none; margin-top:.42em; transition:transform .32s var(--spring); } .qa summary:hover .qa__pl{ transform:scale(1.16); } .qa__pl::before,.qa__pl::after{ content:""; position:absolute; background:var(--tomato); border-radius:2px; transition:transform .42s var(--spring); } .qa__pl::before{ inset:7px 0 auto 0; height:2px; } .qa__pl::after{ inset:0 7px 0 7px; width:2px; } .qa[open] .qa__pl::after{ transform:scaleY(0); } .qa__a{ padding-left:calc(2.2ch + clamp(14px,2vw,22px)); } .qa__a p{ padding:0 0 26px; color:var(--ink-2); max-width:64ch; font-size:16px; } .anim .qa[open] .qa__a{ animation:slide .4s var(--spring); } @keyframes slide{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} } /* ==================== КРАСНЫЙ ПРИЗЫВ ==================== */ .cta{ position:relative; background:var(--tomato); color:#fff; overflow:hidden; } .cta__tape{ position:absolute; inset:0 0 auto 0; height:10px; background:repeating-linear-gradient(135deg,rgba(0,0,0,.22) 0 8px,transparent 8px 17px); } .cta__in{ padding-block:clamp(64px,9vw,128px); } .cta__kick{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.82); margin:0 0 18px; } .cta h2{ font-family:var(--display); font-weight:800; font-size:clamp(34px,6vw,74px); letter-spacing:-.03em; line-height:.98; margin:0 0 18px; color:#fff; } .cta__lead{ color:rgba(255,255,255,.94); font-size:clamp(17px,1.7vw,20px); max-width:46ch; margin:0 0 34px; } /* ==================== ПОДВАЛ ==================== */ .foot{ position:relative; background:var(--dark); color:var(--on-dark); padding-block:clamp(52px,7vw,88px); overflow:hidden; } .foot__tape{ position:absolute; inset:0 0 auto 0; height:8px; z-index:2; background:repeating-linear-gradient(135deg,var(--tomato) 0 8px,transparent 8px 17px); opacity:.92; } /* большой бледный «≠» — тот же бренд-знак, что и в герое (конструктивизм), а не AI-«орб»/градиент */ .foot__glyph{ position:absolute; right:clamp(-24px,-1vw,4px); bottom:clamp(-58px,-4vw,-26px); z-index:0; font-family:var(--display); font-weight:800; font-size:clamp(180px,27vw,380px); line-height:.7; color:#fff; opacity:.045; pointer-events:none; user-select:none; } .foot__inner{ position:relative; z-index:1; } /* верхняя строка: бренд-знак на ОТДЕЛЬНОЙ строке (не в колонке) — больше не наезжает на ссылки */ .foot__head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 24px; } .foot__mark{ position:relative; font-family:var(--display); font-weight:800; font-size:clamp(30px,5vw,52px); letter-spacing:-.03em; line-height:1; display:inline-flex; align-items:center; min-width:0; } .foot__mark .neq{ color:var(--tomato); margin:0 .2em; } .foot__cta{ flex:none; --btnsh:#000; } .foot__about{ margin:24px 0 0; max-width:64ch; font-size:15px; color:rgba(246,242,234,.74); line-height:1.6; } .foot__cols{ display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:clamp(26px,4vw,56px); margin-top:clamp(40px,5vw,60px); padding-top:clamp(32px,4vw,44px); border-top:1px solid rgba(255,255,255,.14); } .foot__col{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0; } .foot__h{ display:inline-flex; align-items:center; gap:9px; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:rgba(246,242,234,.5); margin:0 0 6px; } .foot__h::before{ content:""; width:14px; height:3px; background:var(--tomato); flex:none; } /* конструктивистский маркер */ .foot__col>a{ color:rgba(246,242,234,.85); font-size:15px; line-height:1.35; max-width:100%; transition:color .18s var(--ease), transform .38s var(--spring); } .foot__col>a:hover{ color:#fff; transform:translateX(3px); } .foot__ext{ color:var(--tomato); } .foot__contact{ gap:14px; } .foot__mail{ font-family:var(--mono); font-weight:600; font-size:clamp(14px,1.5vw,16px); color:var(--tomato); max-width:100%; word-break:break-all; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:rgba(236,43,24,.5); transition:color .18s, text-decoration-color .18s; } .foot__mail:hover{ color:#fff; text-decoration-color:currentColor; } .foot__contact-note{ color:rgba(246,242,234,.62); font-size:13.5px; line-height:1.55; } .foot__contact-note b{ color:var(--on-dark); } .foot__contact-note a{ color:rgba(246,242,234,.92); text-decoration:underline; text-underline-offset:2px; } .foot__contact-note a:hover{ color:var(--tomato); } .foot__bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; margin-top:clamp(36px,4.5vw,52px); padding-top:26px; border-top:1px solid rgba(255,255,255,.14); } .foot__copy{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:rgba(246,242,234,.5); } .foot__love{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--tomato); } .foot__up{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:rgba(246,242,234,.7); transition:color .18s, transform .38s var(--spring); } .foot__up:hover{ color:var(--tomato); } /* ==================== АДАПТИВ ==================== */ @media (max-width:1024px){ .ev__grid{ grid-template-columns:1fr; } .exhibit{ position:static; max-width:340px; margin-inline:auto; } /* на узких — по центру */ } @media (max-width:900px){ .who__grid{ grid-template-columns:1fr; gap:34px; } .foot__cols{ grid-template-columns:1fr 1fr; gap:32px 30px; } .foot__contact{ grid-column:1 / -1; } } @media (max-width:860px){ /* мобильное меню: гамбургер + выезжающая панель (работает без JS, через checkbox) */ .burger{ display:inline-flex; align-items:center; justify-content:center; position:relative; z-index:100; margin-left:auto; width:46px; height:46px; border:1.5px solid var(--ink); border-radius:var(--r2); cursor:pointer; background:var(--paper); } .burger span{ position:relative; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:background .15s; } .burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .28s var(--ease); } .burger span::before{ top:-6px; } .burger span::after{ top:6px; } .nav-toggle:checked ~ .burger span{ background:transparent; } .nav-toggle:checked ~ .burger span::before{ transform:translateY(6px) rotate(45deg); } .nav-toggle:checked ~ .burger span::after{ transform:translateY(-6px) rotate(-45deg); } .nav__menu{ position:fixed; inset:0 0 0 auto; width:min(340px,86vw); margin-left:0; z-index:95; flex-direction:column; align-items:flex-start; gap:2px; padding:92px 28px 32px; background:var(--paper); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .34s var(--ease); overflow-y:auto; } .nav-toggle:checked ~ .nav__menu{ transform:none; box-shadow:0 0 0 100vmax rgba(22,19,13,.46); } .nav__menu>a{ width:100%; } .nav__menu>a:not(.btn){ font-size:20px; padding:15px 0; border-bottom:1px solid var(--line); } .nav__menu>a:not(.btn)::after{ display:none; } .nav__cta{ margin-top:18px; width:100%; } .contact__grid{ grid-template-columns:1fr; } } @media (max-width:720px){ .tggrid{ grid-template-columns:1fr; } .wordday__grid{ grid-template-columns:1fr; } .stats__row{ grid-template-columns:1fr 1fr; gap:36px 0; } .stat:nth-child(3){ border-left:0; padding-left:0; } .stat{ padding-inline:0; } .stat:nth-child(2),.stat:nth-child(4){ padding-left:clamp(14px,5vw,30px); border-left:1px solid rgba(255,255,255,.14); } .channelcard{ flex-direction:column; align-items:flex-start; } .channelcard .btn{ width:100%; } .res__link{ grid-template-columns:1fr auto; gap:6px 16px; padding-block:18px; } .res__desc{ grid-column:1 / -1; order:3; } .res__go{ display:none; } .hero__cta .btn{ width:100%; } .lenta__actions{ width:100%; flex-direction:column; align-items:stretch; } .lenta__actions .btn{ width:100%; } .contact__card--primary .btn{ align-self:stretch; width:100%; } .btn--tomato{ box-shadow:3px 3px 0 var(--ink); } } @media (max-width:700px){ .hero__mark{ font-size:46vw; opacity:.06; top:auto; bottom:6%; right:-5vw; } } @media (max-width:560px){ :root{ --r3:14px; } .tl__item{ grid-template-columns:1fr; gap:7px; } .tl__year{ flex-direction:row; align-items:center; } .head{ flex-wrap:wrap; } .head__rule{ display:none; } .quote__in p{ max-width:none; } .seg__bar{ display:grid; width:100%; } .seg__bar label{ padding:11px 8px; font-size:14px; } .foot__cols{ grid-template-columns:1fr; gap:30px; } .foot__head{ gap:16px; } .foot__cta{ width:100%; } .foot__mark{ font-size:clamp(24px,6.4vw,32px); } } @media (max-width:400px){ .stats__row{ grid-template-columns:1fr; gap:26px; } .stat,.stat:nth-child(2),.stat:nth-child(4){ border-left:0; padding-left:0; } } /* ============================================================ НОВЫЕ СЕКЦИИ + ПОЛИРОВКА · приёмы российского бигтеха (исследованы Beeline · Sber · Ozon · Wildberries): рамки-окна, диагональная штриховка-лента, крупные числа, кириллический гротеск, один акцент. Всё в существующих токенах — без новой палитры. ============================================================ */ /* ——— § 06 что мы делаем (проекты) ——— */ .projects__lead{ font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); max-width:60ch; margin:0 0 clamp(26px,3vw,36px); } .projects__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,22px); } .proj{ position:relative; display:flex; flex-direction:column; gap:10px; padding:clamp(22px,2.6vw,32px); background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r3); overflow:hidden; transition:border-color .2s var(--ease), background .2s var(--ease), transform .45s var(--spring), box-shadow .3s var(--ease); } a.proj:hover{ border-color:var(--ink); transform:translateY(-4px); box-shadow:7px 11px 0 -3px rgba(22,19,13,.10); } a.proj:active{ transform:translateY(-1px) scale(.992); transition-duration:.12s; } .proj__tag{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2); } .proj__name{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.2vw,27px); letter-spacing:-.02em; color:var(--ink); line-height:1.05; } .proj__desc{ color:var(--ink-2); font-size:15.5px; line-height:1.5; flex:1 1 auto; } .proj__go{ font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--tomato-deep); margin-top:6px; transition:color .18s; } a.proj:hover .proj__go{ color:var(--tomato); } .proj__go--muted{ color:var(--ink-2); } .proj--accent{ border-color:var(--ink); } .proj--accent::before{ content:""; position:absolute; left:24px; right:24px; top:-1.5px; height:5px; background:var(--hatch); border-radius:0 0 4px 4px; } .proj--accent .proj__name{ color:var(--tomato-deep); } .proj--here{ background:var(--surface); } .proj--here .proj__tag{ color:var(--tomato-deep); } .proj--soon{ border-style:dashed; background:transparent; } .proj--wide{ grid-column:1 / -1; } /* «и ещё кое-что» — полоса во всю ширину сетки */ .proj--soon .proj__name{ color:var(--ink-2); } /* ——— § 08 кто это делает (история команды) ——— */ .story{ position:relative; overflow:hidden; } /* большой бледный «한» — корейский знак (Корея + Россия), как ≠ в герое */ .story__glyph{ position:absolute; right:clamp(-12px,2vw,48px); top:clamp(-26px,0vw,12px); z-index:0; font-family:var(--display); font-weight:800; font-size:clamp(150px,23vw,300px); line-height:.8; color:var(--tomato); opacity:.05; pointer-events:none; user-select:none; } .story>.wrap{ position:relative; z-index:1; } .story__grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(30px,5vw,72px); align-items:center; } .story__p{ color:var(--ink-2); font-size:17px; max-width:54ch; margin-top:16px; } .story__geo{ position:relative; background:var(--surface); border:1.5px solid var(--ink); border-radius:var(--r3); padding:clamp(24px,3vw,34px); overflow:hidden; } .story__geo::before{ content:""; position:absolute; left:24px; right:24px; top:-1.5px; height:5px; background:var(--hatch); border-radius:0 0 4px 4px; } /* условная карта Москва → Сеул с летящим самолётиком (CSS motion-path) */ .story__map{ display:block; width:100%; height:auto; overflow:visible; margin-bottom:8px; } .story__route{ fill:none; stroke:var(--tomato); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:2 8; opacity:.9; } .anim .story__route{ animation:dashflow 1.1s linear infinite; } @keyframes dashflow{ to{ stroke-dashoffset:-10; } } .story__dot{ fill:var(--ink); } .story__dot--to{ fill:var(--tomato); } .story__pin{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:-.02em; fill:var(--ink); } .story__pin--to{ fill:var(--tomato-deep); } .story__plane{ fill:var(--ink); offset-path:path("M34 98 Q160 4 288 58"); offset-rotate:auto; offset-distance:50%; } .anim .story__plane{ animation:fly 7s ease-in-out infinite; } @keyframes fly{ 0%{ offset-distance:0%; opacity:0; } 10%{ opacity:1; } 86%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } } .story__dist{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:7px; } .story__dist b{ font-family:var(--display); font-weight:800; font-size:clamp(28px,4.2vw,42px); letter-spacing:-.03em; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; } .story__dist span{ font-size:14.5px; color:var(--ink-2); line-height:1.45; } /* ——— полировка ленты канала: оформляем как нашу рамку-«окно» ——— */ .tggrid{ position:relative; padding:clamp(14px,1.8vw,20px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); } .tggrid::before{ content:""; position:absolute; left:20px; right:20px; top:-1px; height:4px; background:var(--hatch); border-radius:0 0 3px 3px; z-index:1; } .tgpost--loading{ background:var(--paper); border-color:transparent; } .tggrid--failed{ padding:0; background:none; border:none; } /* нечего показать — рамку убираем */ .tggrid--failed::before{ display:none; } /* ——— визуальный отклик (наведение/нажатие) ——— */ .lnk{ transition:text-decoration-color .18s, color .18s, background .18s; border-radius:2px; } .lnk:hover{ background:rgba(236,43,24,.08); } .foot__up:hover, .lenta__all:hover{ transform:translateX(2px); } .res__link:active{ background:rgba(22,19,13,.05); } /* отклик на нажатие (тач) */ /* ——— копирование в один клик с подтверждением (визуальный отклик действия) ——— */ .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } .copybtn{ position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; padding:0; border:1.4px solid var(--line); border-radius:var(--r1); background:var(--paper); color:var(--ink-2); cursor:pointer; vertical-align:middle; transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .2s var(--ease); } .copybtn::before{ content:""; position:absolute; inset:-7px; } /* расширенная зона нажатия (≈46px — палец) */ .copybtn:hover{ color:var(--tomato); border-color:var(--tomato); } .copybtn:active{ transform:translateY(1px); transition-duration:.08s; } .copybtn[hidden]{ display:none; } .copybtn__ic{ width:16px; height:16px; } .copybtn__ic--ok{ display:none; } .copybtn.is-ok{ color:var(--leaf); border-color:var(--leaf); } .copybtn.is-ok .copybtn__ic--copy{ display:none; } .copybtn.is-ok .copybtn__ic--ok{ display:block; } .copybtn__msg{ position:absolute; z-index:5; top:calc(100% + 9px); left:50%; transform:translate(-50%,-5px); font-family:var(--mono); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:var(--ink); padding:4px 9px; border-radius:var(--r1); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease); } .copybtn__msg::after{ content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-bottom-color:var(--ink); } .copybtn.is-ok .copybtn__msg{ opacity:1; transform:translate(-50%,0); } /* контексты кнопки копирования */ .channelcard__handle{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; } .contact__mail-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* ——— фирменный курсор (только мышь; над текстом оставляем системный) ——— */ @media (hover:hover) and (pointer:fine){ body{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2 L3 17 L7 13.5 L9.5 19 L12 18 L9.5 12.5 L15 12.5 Z' fill='%2316130d' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto; } a, button, summary, label[for], [role="button"]{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2 L3 17 L7 13.5 L9.5 19 L12 18 L9.5 12.5 L15 12.5 Z' fill='%23ec2b18' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, pointer; } p, h1, h2, h3, h4, li, td, th, blockquote, cite, input, textarea, .lede, .hero__title, .wcard__ko{ cursor:auto; } } /* ——— адаптив новых секций ——— */ @media (max-width:760px){ .projects__grid{ grid-template-columns:1fr; } .story__grid{ grid-template-columns:1fr; gap:30px; align-items:start; } } /* ——— открытый код (GitHub): ЧЁРНАЯ плашка в стиле CTA + большой полупрозрачный логотип справа ——— */ .oss{ position:relative; background:#100e0a; color:#fff; overflow:hidden; } .oss__tape{ position:absolute; inset:0 0 auto 0; height:10px; background:var(--hatch); opacity:.92; } /* томатная штриховка — пробивает чёрный */ .oss__wm{ position:absolute; right:clamp(-44px,-2vw,28px); top:50%; transform:translateY(-50%); width:clamp(210px,34vw,470px); height:auto; fill:#fff; opacity:.05; pointer-events:none; user-select:none; z-index:0; } .oss__in{ position:relative; z-index:1; padding-block:clamp(54px,8vw,104px); } .oss__kick{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--tomato); margin:0 0 18px; } .oss__title{ font-family:var(--display); font-weight:800; font-size:clamp(30px,5vw,62px); letter-spacing:-.03em; line-height:.98; margin:0 0 18px; color:#fff; } .oss__lead{ color:rgba(246,242,234,.82); font-size:clamp(17px,1.6vw,20px); max-width:54ch; margin:0 0 32px; } .oss__btn{ --bg:#fff; --fg:var(--ink); --bd:#fff; --btnsh:var(--tomato); } /* белая кнопка, томатная объёмная тень */ .gh{ width:20px; height:20px; fill:currentColor; flex:none; } /* ============================================================ ИНДИВИДУАЛЬНОСТЬ СЕКЦИЙ — у каждой свой характер, но одна система (крупный бледный знак-объект, намеренные фоны, штриховка-лента, линия-таймлайн). Гармонично, но не одинаково. ============================================================ */ /* крупный бледный знак-«объект» за контентом (конструктивизм: буква = форма) */ .who, .compare, .korejskij, .faq{ position:relative; overflow:hidden; } .who>.wrap, .compare>.wrap, .korejskij>.wrap, .faq>.wrap{ position:relative; z-index:1; } .sec__wm{ position:absolute; z-index:0; font-family:var(--display); font-weight:800; line-height:.8; color:var(--tomato); opacity:.05; pointer-events:none; user-select:none; } .who .sec__wm{ font-size:clamp(150px,22vw,300px); top:clamp(-26px,-1vw,4px); right:clamp(-8px,1vw,28px); } .compare .sec__wm{ font-size:clamp(170px,27vw,370px); bottom:clamp(-56px,-4vw,-28px); left:clamp(-10px,0vw,8px); color:var(--ink); opacity:.04; } .korejskij .sec__wm{ font-size:clamp(150px,24vw,330px); top:clamp(-8px,1vw,22px); right:clamp(-6px,1vw,24px); } .faq .sec__wm{ font-size:clamp(190px,30vw,400px); bottom:clamp(-66px,-5vw,-38px); right:clamp(-6px,1vw,22px); color:var(--ink); opacity:.045; } /* намеренные фоны (НЕ «полосатость по индексу»): «досье» и «полка проектов» на тёплой подложке + томатная лента сверху, как у CTA/подвала */ .ev, .projects{ position:relative; background:var(--surface); } .ev::before, .projects::before{ content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--hatch); opacity:.55; } .proj--here{ background:var(--paper); border-color:var(--tomato); } /* «вы здесь» — томатная рамка, пробивает surface-секцию */ /* § 03 история — вертикальная линия-таймлайн с точками (десктоп; на мобиле остаются полоски) */ @media (min-width:561px){ .tl{ position:relative; } .tl::before{ content:""; position:absolute; left:145px; top:14px; bottom:14px; width:2px; background:var(--line); } .tl__item{ position:relative; border-top:none; padding-block:20px; } .tl__item::before{ content:""; position:absolute; left:140px; top:27px; width:11px; height:11px; border-radius:50%; background:var(--tomato); box-shadow:0 0 0 5px var(--bg); } } /* ==================== ПРИВЕТСТВЕННОЕ УВЕДОМЛЕНИЕ (как всплывашка iOS, только телефон) ==================== */ /* структура и поведение системного уведомления — иконка-приложение, заголовок, текст, «сейчас», свайп вверх / крестик / авто-скрытие — но в нашем языке: тёплая бумага, томатная плитка со знаком «≠», чёткая тень. Без стекла и блюра (анти-AI glassmorphism). */ .toast{ position:fixed; z-index:150; left:50%; top:calc(env(safe-area-inset-top,0px) + 10px); width:min(440px, calc(100% - 22px)); transform:translateX(-50%); pointer-events:none; } .toast[hidden]{ display:none; } .toast__card{ position:relative; overflow:hidden; pointer-events:auto; display:flex; align-items:flex-start; gap:13px; padding:15px 16px 14px; background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:0 12px 30px -10px rgba(22,19,13,.34), 0 4px 10px -6px rgba(22,19,13,.2); transform:translateY(calc(-100% - 26px)); opacity:0; transition:transform .56s var(--spring), opacity .34s var(--ease); } .toast.is-in .toast__card{ transform:none; opacity:1; } .toast.is-grab .toast__card{ transition:opacity .2s var(--ease); } /* во время свайпа transform ведём пальцем */ .toast__icon{ flex:none; width:42px; height:42px; border-radius:11px; background:var(--tomato); color:#fff; font-family:var(--display); font-weight:800; font-size:24px; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(168,22,10,.45); } .toast__body{ flex:1 1 auto; min-width:0; padding-right:20px; } .toast__meta{ display:flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); margin:1px 0 4px; } .toast__app{ font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .toast__dot, .toast__time{ flex:none; } .toast__title{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em; line-height:1.1; margin:0 0 3px; } .toast__text{ font-size:14px; line-height:1.45; color:var(--ink-2); margin:0; } .toast__close{ position:absolute; top:8px; right:8px; width:26px; height:26px; flex:none; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:var(--surface); color:var(--ink-2); cursor:pointer; transition:background .15s, color .15s; } .toast__close:hover{ background:var(--line); color:var(--ink); } .toast__close svg{ width:13px; height:13px; } /* полоска-таймер сверху — бежит до тех пор, пока уведомление не исчезнет (как у индикатора чтения) */ .toast__bar{ position:absolute; left:0; right:0; top:0; height:3px; background:rgba(236,43,24,.16); } .toast__bar i{ display:block; height:100%; background:var(--tomato); transform-origin:left center; transform:scaleX(1); } .toast.is-in .toast__bar i{ animation:toastbar 7000ms linear forwards; } .toast.is-grab .toast__bar i{ animation-play-state:paused; } /* пауза при удержании/свайпе */ @keyframes toastbar{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } } .toast__close::before{ content:""; position:absolute; inset:-9px; } /* увеличенная зона нажатия (палец) */ /* ——— приглашение в канал Тамары (как уведомление macOS / iOS), правый верхний угол — ПК и телефон ——— */ .toast--corner{ left:auto; right:calc(env(safe-area-inset-right,0px) + 12px); top:calc(env(safe-area-inset-top,0px) + 12px); transform:none; width:min(380px, calc(100% - 24px)); } .toast--corner .toast__card{ transform:translateX(calc(100% + 28px)); transition:transform .58s var(--spring), opacity .34s var(--ease); } .toast--corner.is-out .toast__card{ transform:translateY(calc(-100% - 30px)); opacity:0; transition:transform .44s var(--ease), opacity .3s var(--ease); } /* телефон — широкая плашка по центру сверху, как iOS (а НЕ узкий правый угол macOS) */ @media (max-width:760px){ .toast--corner{ left:50%; right:auto; transform:translateX(-50%); width:min(440px, calc(100% - 22px)); top:calc(env(safe-area-inset-top,0px) + 10px); } .toast--corner .toast__card{ transform:translateY(calc(-100% - 30px)); } } .toast__hit{ display:flex; align-items:flex-start; gap:13px; flex:1 1 auto; min-width:0; color:inherit; text-decoration:none; } .toast--tg .toast__icon{ background:#229ED9; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); } .toast--tg .toast__icon .tg{ width:24px; height:24px; fill:#fff; } @media (min-width:761px){ #welcomeToast{ display:none !important; } } /* приветствие — только для телефона */ /* ==================== МОБИЛЬНАЯ ПОЛИРОВКА ==================== */ @media (max-width:560px){ .topbar__row{ justify-content:center; gap:0; } .topbar__row .mono:first-child{ display:none; } /* на узких — оставляем только ссылку на канал */ .ctable{ min-width:0; font-size:14px; } /* таблица помещается без горизонтального скролла */ .ctable th, .ctable td{ padding:13px 11px; } } /* ==================== REDUCED MOTION ==================== */ @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .btn:hover, .btn:active{ transform:none; box-shadow:4px 4px 0 var(--btnsh); } a.proj:hover, .res__link:hover, .foot__col>a:hover, .foot__up:hover, .lenta__all:hover{ transform:none; } .story__plane{ animation:none !important; } }