/* ═══════════════════════════════════════════════════ DSH · dontskip.house · бренд rev. 03 (DSH/brand/book, розділ 14) Айдентика: night #0A0A0C · purple #7B2FFF (поле) neon #72FF00 (одна точка на екран) · grain 5% Unbounded display · Manrope body · IBM Plex Mono meta (обидва з повною кирилицею — UA і EN сидять в одній пластиці) ═══════════════════════════════════════════════════ */ /* ═══ ТЕМИ ═══ Світла — не інверсія темної, а окремо підібрана пара: на папері #72FF00 сліпне і провалює контраст, тому сигнал темнішає, а поле трохи глибшає. Системне налаштування — дефолт, ручний вибір — поверх нього через [data-theme] на . */ :root{ color-scheme:dark; --night:#0A0A0C; --night2:#121216; --night3:#1A1A20; --ink:#F4F3EF; --muted:#8B8B95; --rule:#26262E; --field:#7B2FFF; --field-deep:#4A12B8; --signal:#72FF00; /* знак: рама й торець — поле, стулка — field-deep, ручка — ink, світло — сигнал */ --door-glow:var(--signal); --door-frame:var(--field); --door-leaf:var(--field-deep); --door-handle:var(--ink); /* Ці чотири раніше стояли хекскодами по всьому файлу й не перемикались: на світлому тлі бліда бузкова й сірий текст падали до контрасту 1.5. Тепер це ролі, а не кольори. */ --accent:#B792FF; /* бузкова на темному: акцент, лінк-хавер, .fld */ --body-2:#C9C8C2; /* довгий текст статей і описів */ --muted-2:#8B8B95; /* дрібні службові підписи, th. У книзі #6F6F7A, але це 4.0:1 — дрібному тексту мало */ --on-field:#fff; /* текст поверх заливки --field */ --bad:#FF4D4D; /* стан помилки */ --ph:#5E5E6B; /* плейсхолдер: свідомо тихіший за --muted */ --panel-alt:#16161d; /* підсвітка рядка при хавері */ --grain:.05; --veil:10,10,12; --shade:linear-gradient(180deg,rgba(var(--veil),0) 25%,rgba(var(--veil),.55) 62%,rgba(var(--veil),.94)); --d:"Unbounded","Arial Black",sans-serif; --b:"Manrope",Arial,sans-serif; --m:"IBM Plex Mono",Consolas,monospace; --pad:clamp(20px,4vw,64px); --maxw:1320px; } /* Світла пара. Тримається на тих самих ролях: поле = дія, сигнал = стан. Сигнал темніє до #2F8500 — на папері він має читатись, а не світитись. */ :root[data-theme="light"]{ color-scheme:light; --night:#F4F3EF; --night2:#EBE9E2; --night3:#E1DED5; --ink:#12121A; --muted:#4B4B57; --rule:#D5D1C7; --field:#5F17D6; --field-deep:#4A0FB0; --signal:#1F6B00; --accent:#5A16D8; --body-2:#33333E; --muted-2:#55555F; --on-field:#fff; --panel-alt:#DFDCD3; --bad:#C40000; --ph:#7A7A86; --door-glow:#12121A; /* у світлій темі отвір дверей темний, а не сяючий */ /* на папері знак mono: рама чорнилом, стулка — виріз кольору паперу */ --door-frame:var(--ink); --door-leaf:var(--night); --door-handle:var(--ink); --grain:.035; --veil:244,243,239; --shade:linear-gradient(180deg,rgba(244,243,239,0) 20%,rgba(244,243,239,.6) 60%,rgba(244,243,239,.96)); } /* Системну схему навмисно НЕ слухаємо. Темна — дефолт для всіх, бо знак DSH це світло з відчинених дверей у темряві; світла пара вмикається тільки руками, через перемикач у повному меню. Раніше тут стояв @media(prefers-color-scheme:light) — половина відвідувачів отримувала світлу версію, ніколи про неї не просивши. */ *{box-sizing:border-box} /* тло на html теж, щоб під час згасання тіла не проглядало біле полотно */ html{scroll-behavior:smooth;overflow-x:clip;background:var(--night)} html,body{margin:0;padding:0} body{background:var(--night);color:var(--ink);font-family:var(--b); font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} ::selection{background:var(--field);color:#fff} :focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:2px} /* grain на всьому */ body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} p{margin:0 0 14px;color:var(--muted)} p:last-child{margin-bottom:0} b,strong{font-weight:600;color:var(--ink)} .sig{color:var(--signal)} /* останнє слово заголовка: малими, кольором поля — як «house.» у локапі (розділи 04, 07). Поле на night читається тільки в кеглі заголовка, тому .fld живе лише в h-display і foot-tag */ .fld{color:var(--field);text-transform:lowercase} /* ── типографіка ── */ /* ── Дисплейний кегль масштабується від КОНТЕЙНЕРА, не від вікна ── З vw заголовок у вузькій колонці (сітка, панель,半-екранний грид) отримував кегль на всю ширину вікна і слова рвались навпіл. cqw рахує від ширини свого контейнера, тому у колонці заголовок зменшується сам. Там, де контейнера немає, cqw падає назад на viewport — тобто поведінка не гірша за попередню. */ .wrap,.panel,.pk-main,.pk-side,.article,.mem,.deg-cell, .when-card,.ai-hero-body,.reach-body,.liber>div, .fw-grid>*,.g2>*,.g3>*,.g4>*,.big-links,.wp-head,.j-card,.reach>*,.ep-card, .yt-hero .grid>*,.prt{ container-type:inline-size; } /* Заголовкова колонка .sec-head — flex-item: containment забирає в неї content-based ширину, тому базис задаємо явно, інакше вона схлопується в нуль */ .sec-head>div{flex:1 1 0;min-width:min(100%,26ch);container-type:inline-size} .sec-head>p{flex:0 1 auto} .h-display{font-family:var(--d);font-weight:800;text-transform:uppercase; letter-spacing:-.015em;line-height:.96;margin:0;overflow-wrap:break-word} h1.h-display{font-size:clamp(28px,8cqw,108px)} h2.h-display{font-size:clamp(24px,5.4cqw,60px)} h3.h-display{font-size:clamp(19px,3cqw,32px);line-height:1.04} .lead{font-size:clamp(17px,1.6vw,23px);line-height:1.45;color:var(--ink);font-weight:300} .mono{font-family:var(--m);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .mono.on{color:var(--signal)} .eyebrow{display:block;margin-bottom:18px} /* ── каркас ── */ .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} section{padding:clamp(64px,9vw,140px) 0;position:relative} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px; margin-bottom:clamp(28px,4vw,56px);flex-wrap:wrap} .hr{height:1px;background:var(--rule);border:0;margin:18px 0} /* ── шапка ── */ header.site{position:fixed;top:0;left:0;right:0;z-index:100; background:linear-gradient(180deg,rgba(var(--veil),.92),rgba(var(--veil),.72) 70%,transparent); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .nav{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad); display:flex;align-items:center;gap:26px} .logo{font-family:var(--d);font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap} .logo i{font-style:normal;color:var(--field)} .nav-links{display:flex;gap:22px;align-items:center;margin-left:auto;flex-wrap:wrap} .nav-links a{font-family:var(--m);font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);transition:color .2s;padding:6px 2px} .nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)} .nav-links a.is-ai{color:var(--accent);display:inline-flex;align-items:center;gap:7px} .nav-links a.is-ai::before{content:"";width:8px;height:8px;border-radius:50%; background:var(--signal);box-shadow:0 0 8px var(--signal);animation:pulse 2.4s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .nav-cta{font-family:var(--m);font-size:12px;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--field);color:var(--ink);padding:9px 16px;transition:.2s} .nav-cta:hover{background:var(--field);color:var(--on-field);border-color:var(--field)} /* перемикач теми живе тільки в повному меню — у шапці й так тісно */ .theme-btn{display:inline-flex;align-items:center;gap:9px;background:none;border:0; padding:0;cursor:pointer;color:var(--muted);font-family:var(--b);font-weight:300; font-size:17px;line-height:1.5;transition:color .2s;text-align:left} .theme-btn:hover{color:var(--ink)} .theme-btn::before{content:"";width:26px;height:14px;flex:none;border:1px solid var(--rule); border-radius:999px;position:relative;transition:border-color .2s,background-color .2s} .theme-btn::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%; background:var(--muted);margin-left:4px;transition:transform .24s cubic-bezier(.2,.7,.2,1),background-color .2s} .theme-btn{position:relative} .theme-btn:hover::before{border-color:var(--field)} :root[data-theme="light"] .theme-btn::before{background:rgba(95,23,214,.14);border-color:var(--field)} :root[data-theme="light"] .theme-btn::after{transform:translateX(12px);background:var(--field)} /* перемикач мов */ .lang{display:inline-flex;align-items:center;border:1px solid var(--rule);flex:none} .lang a{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase; padding:8px 10px;color:var(--muted);transition:.2s;line-height:1} .lang a:hover{color:var(--ink)} .lang a[aria-current]{background:var(--field);color:var(--on-field)} /* сторінка, якої іншою мовою просто немає (журнал) — показуємо чесно, а не викидаємо читача на чужу головну */ .lang a[aria-disabled]{opacity:.4;cursor:not-allowed} .lang a[aria-disabled]:hover{color:var(--muted)} /* згасання при зміні мови; вимикається разом з рештою руху */ @media(prefers-reduced-motion:no-preference){ body{transition:opacity .2s ease} body.lang-out{opacity:0} } @media(max-width:600px){.lang a{padding:7px 8px;font-size:10px}} /* У бічній колонці меню діє #overlay .side a{display:block}, який поставив би UA і EN одне під одним і розвалив пілюлю. Тут вона лишається пілюлею. */ #overlay .side .lang{margin-top:2px} #overlay .side .lang a{display:inline-flex;align-items:center;padding:9px 13px;font-size:12px; width:auto;transform:none} #overlay .side .lang a::before{display:none} #overlay .side .lang a:hover,#overlay .side .lang a:focus-visible{color:var(--ink);transform:none} #overlay .side .lang a[aria-current]{background:var(--field);color:var(--on-field)} @media(max-width:960px){ .nav-links{display:none} .nav-cta{display:none} .menu-btn{margin-left:auto} } @media(max-width:600px){ .nav{gap:14px} /* коротке лого, щоб кнопка меню не виштовхувалась за край */ .logo>span:last-child{font-size:0;letter-spacing:0} /* короткий локап — «dsh.» малими, крапка полем (розділ 04) */ .logo>span:last-child::before,.logo>span:last-child::after{font-size:15px;font-family:var(--d);font-weight:800;letter-spacing:-.01em} .logo>span:last-child::before{content:"dsh"} .logo>span:last-child::after{content:".";color:var(--field)} } /* ── знак rev. 03: двері без порога. Стулка з філенкою, торцем і ручкою. У спокої зачинені; hover — стулка відчиняється, світло вмикається (розділ 03). Філенка — ::before, ручка — ::after, тож розмітка на 98 сторінках та сама. Нижче 24 px висоти лінія філенки зникає — тому в шапці її немає. ── */ .door-mark{width:16px;height:22px;position:relative;flex:none;perspective:60px;margin-right:2px} .door-mark .frame{position:absolute;inset:0;border:2px solid var(--door-frame);border-bottom:none} .door-mark .glow{position:absolute;inset:2px 2px 0;background:var(--door-glow);opacity:0;transition:opacity .35s} .door-mark .leaf{position:absolute;inset:2px 2px 0;background:var(--door-leaf);border-right:2px solid var(--door-frame); transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1)} .door-mark .leaf::before{content:"";position:absolute;left:14%;right:14%;top:8%;bottom:6%; border:1.5px solid var(--door-frame);display:none} .door-mark .leaf::after{content:"";position:absolute;right:12%;top:48%;width:max(1.5px,8%);height:max(3px,11%); background:var(--door-handle)} /* стулка йде ВСЕРЕДИНУ (від глядача) — кут додатний; з мінусом вона виходить назовні й вилазить за раму */ .logo:hover .door-mark .leaf,.logo:focus-visible .door-mark .leaf{transform:rotateY(72deg)} .logo:hover .door-mark .glow,.logo:focus-visible .door-mark .glow{opacity:.95} .logo{display:inline-flex;align-items:center;gap:9px} /* ── hero-локап: той самий знак дверей, що в шапці, але в масштабі H1 ── */ /* повний локап (розділ 04): знак ≈1.5 висоти капітелі, стоїть по центру рядка. Коли слова переносяться на два рядки, знак центрується по обох */ .hero-lockup{display:flex;align-items:center;gap:.36em} .door-mark--hero{display:block;position:relative;flex:none; width:.7em;height:1em;perspective:3em} .door-mark--hero .frame{border-width:.05em;border-bottom:none} .door-mark--hero .glow{inset:.05em .05em 0} .door-mark--hero .leaf{inset:.05em .05em 0;border-right-width:.05em} .door-mark--hero .leaf::before{display:block;border-width:max(1px,.012em)} /* двері відчиняються по наведенню на заголовок */ .door-mark--hero .leaf{transform:rotateY(0);transition:transform .55s cubic-bezier(.2,.7,.2,1)} .door-mark--hero .glow{opacity:0;transition:opacity .45s ease} .hero-lockup:hover .door-mark--hero .leaf, .hero-lockup:focus-within .door-mark--hero .leaf{transform:rotateY(78deg)} .hero-lockup:hover .door-mark--hero .glow, .hero-lockup:focus-within .door-mark--hero .glow{opacity:.95} @media(prefers-reduced-motion:reduce){ .door-mark--hero .leaf{transform:rotateY(78deg)} .door-mark--hero .glow{opacity:.95} } /* ── повноекранне меню-оверлей ── */ .menu-btn{background:none;border:1px solid var(--rule);color:var(--ink);cursor:pointer; font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase; padding:9px 14px;display:inline-flex;align-items:center;gap:9px;transition:.2s} .menu-btn:hover{border-color:var(--field)} .menu-btn i{width:14px;height:10px;position:relative;display:block} .menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:.3s} .menu-btn i::before{top:0}.menu-btn i::after{bottom:0} .menu-open .menu-btn i::before{top:4px;transform:rotate(45deg)} .menu-open .menu-btn i::after{bottom:4px;transform:rotate(-45deg)} #overlay{position:fixed;inset:0;z-index:150;background:rgba(var(--veil),.98);display:none;overflow:auto} .menu-open #overlay{display:block} .menu-open{overflow:hidden} .overlay-close{position:absolute;top:22px;right:var(--pad);z-index:5;background:none; border:1px solid var(--rule);color:var(--ink);cursor:pointer;width:42px;height:42px; display:flex;align-items:center;justify-content:center;transition:.2s} .overlay-close:hover{border-color:var(--field);background:rgba(123,47,255,.14)} .overlay-close i{width:16px;height:16px;position:relative;display:block} .overlay-close i::before,.overlay-close i::after{content:"";position:absolute;top:50%;left:0; width:100%;height:2px;background:var(--ink);transform-origin:center} .overlay-close i::before{transform:rotate(45deg)} .overlay-close i::after{transform:rotate(-45deg)} #overlay .inner{max-width:var(--maxw);margin:0 auto;padding:110px var(--pad) 60px; display:grid;grid-template-columns:1.4fr 1fr;gap:60px;min-height:100%} @media(max-width:820px){#overlay .inner{grid-template-columns:1fr;gap:40px;padding-top:96px}} /* Риска — ::after з position:absolute. Пункт меню це flex-контейнер, тому позиційований псевдоелемент випадає з потоку і не стає ще одним flex-item; у потоці він поїхав би вбік від тексту. Жест той самий, що в .btn::after — вертикальне витирання знизу вгору. */ #overlay .big-links a{position:relative;display:flex;align-items:baseline;gap:16px; font-family:var(--d);font-weight:800; text-transform:uppercase;font-size:clamp(28px,5.4cqw,56px);letter-spacing:-.02em;line-height:1.12; color:var(--ink);padding:6px 0;width:fit-content; /* Зсув робимо transform, а не padding-left: padding звужує контентний бокс, і довгі пункти («ЕМОЦІЙНИЙ ФУНДАМЕНТ.») перекидались на два рядки прямо під курсором. transform не чіпає розкладку взагалі. */ transition:color .22s,transform .28s cubic-bezier(.2,.7,.2,1)} /* риска стоїть на -18px, щоб після зсуву опинитись рівно там, де був лівий край */ #overlay .big-links a::after{content:"";position:absolute;left:-18px;top:4px;bottom:4px;width:3px; background:var(--signal);transform:scaleY(0);transform-origin:bottom; transition:transform .26s cubic-bezier(.2,.7,.2,1)} #overlay .big-links a:hover,#overlay .big-links a:focus-visible{color:var(--accent);transform:translateX(18px)} #overlay .big-links a:hover::after,#overlay .big-links a:focus-visible::after{transform:scaleY(1)} #overlay .big-links a .no{font-family:var(--m);font-size:12px;letter-spacing:.14em;color:var(--muted); font-weight:400;transition:color .22s} #overlay .big-links a:hover .no{color:var(--signal)} #overlay .big-links a .tag{font-family:var(--m);font-size:10px;letter-spacing:.14em;color:var(--signal);font-weight:400;text-transform:uppercase} #overlay .side .mono{display:block;margin-bottom:14px} /* Бічні лінки: та сама логіка й та сама причина — зсув через transform, риска як ::before на -20px, щоб текст не переносився під курсором */ #overlay .side a{position:relative;display:block;color:var(--muted);font-size:16px;padding:5px 0; width:fit-content;transition:color .2s,transform .26s cubic-bezier(.2,.7,.2,1)} #overlay .side a::before{content:"";position:absolute;left:-20px;top:50%;width:12px;height:1px; background:var(--field);transform:scaleX(0);transform-origin:left; transition:transform .26s cubic-bezier(.2,.7,.2,1)} #overlay .side a:hover,#overlay .side a:focus-visible{color:var(--ink);transform:translateX(20px)} #overlay .side a:hover::before,#overlay .side a:focus-visible::before{transform:scaleX(1)} #overlay .side .blockk{margin-bottom:34px} @media(prefers-reduced-motion:no-preference){ .menu-open #overlay .big-links a,.menu-open #overlay .side .blockk{animation:mrise .5s both} .menu-open #overlay .big-links a:nth-child(2){animation-delay:.04s} .menu-open #overlay .big-links a:nth-child(3){animation-delay:.08s} .menu-open #overlay .big-links a:nth-child(4){animation-delay:.12s} .menu-open #overlay .big-links a:nth-child(5){animation-delay:.16s} .menu-open #overlay .big-links a:nth-child(6){animation-delay:.2s} .menu-open #overlay .big-links a:nth-child(7){animation-delay:.24s} .menu-open #overlay .big-links a:nth-child(8){animation-delay:.28s} .menu-open #overlay .big-links a:nth-child(9){animation-delay:.32s} .menu-open #overlay .big-links a:nth-child(10){animation-delay:.36s} /* блоків стало п'ять: Почати · Міста · Мова · Вигляд · DSH */ .menu-open #overlay .side .blockk:nth-child(1){animation-delay:.2s} .menu-open #overlay .side .blockk:nth-child(2){animation-delay:.28s} .menu-open #overlay .side .blockk:nth-child(3){animation-delay:.36s} .menu-open #overlay .side .blockk:nth-child(4){animation-delay:.44s} .menu-open #overlay .side .blockk:nth-child(5){animation-delay:.52s} @keyframes mrise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} } /* ── дім: інтерактив поверхів ── */ .house-svg .floor{cursor:pointer} .house-svg .floor:focus-visible .ln{opacity:1} .house-svg .floor:hover .ln{opacity:1;stroke-width:2.5} .house-svg .floor:hover .fill{opacity:1} .house-svg .floor:hover .glyph{fill:var(--ink)} .house-svg .ground{stroke:var(--rule);stroke-width:2} .house-svg .hatch{stroke:var(--field);stroke-width:1.5;opacity:.28} .house-svg .base-slab{fill:#101015;stroke:var(--field);stroke-width:2;opacity:.9} .house-svg .beam-light{fill:var(--signal);opacity:.12} .house-svg .floor.lit .beam-light{opacity:.2} .house-svg .win{fill:rgba(123,47,255,.14);stroke:var(--field);stroke-width:1.5} .house-svg .floor.lit .win{fill:rgba(123,47,255,.4)} @media(prefers-reduced-motion:no-preference){ .house-svg .door{animation:doorglow 3.2s ease-in-out infinite} @keyframes doorglow{0%,100%{filter:drop-shadow(0 0 10px rgba(114,255,0,.55))}50%{filter:drop-shadow(0 0 22px rgba(114,255,0,.95))}} .house-svg .floor .fill,.house-svg .floor .ln{transition:opacity .35s,stroke-width .35s} } /* ── команда: гра з якістю (140p → 1080p) ── */ .person .shot{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--night3)} /* Кроп 4:5 із центру різав портретам голови — фокус зміщено вище центру. Те саме значення (--face-y) використовує канвас пікселізації в site.js, інакше піксельна і повна версії показували б різні частини кадру. */ .person .shot{--face-y:26%} .person .shot img{width:100%;height:100%;object-fit:cover;object-position:50% var(--face-y); filter:saturate(.5) contrast(1.05)} .person .shot canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;transition:opacity .18s} .person .qlabel{position:absolute;right:10px;bottom:10px;z-index:3;font-family:var(--m);font-size:11px; letter-spacing:.1em;background:rgba(var(--veil),.82);border:1px solid var(--rule);padding:4px 9px;color:var(--signal)} .person .shot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.35;mix-blend-mode:overlay; background:linear-gradient(160deg,rgba(123,47,255,.5),transparent 55%)} /* ── партнери: список, який має гідно виглядати і з одним записом ── Тому останній слот завжди вільний і працює як запрошення: ряд не зяє порожнечею, а блок сам пояснює, куди тиснути. Новий партнер = ще один перед .prt-add. */ .prt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} @media(max-width:820px){.prt-grid{grid-template-columns:1fr}} .prt{position:relative;display:flex;flex-direction:column;gap:8px; border:1px solid var(--rule);background:var(--night2); padding:clamp(22px,3vw,34px);transition:background .22s,border-color .22s} .prt::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--signal); transform:scaleY(0);transform-origin:bottom;transition:transform .26s cubic-bezier(.2,.7,.2,1)} /* картку не зсуваємо: padding на хавері переливав би абзац усередині неї */ .prt:hover,.prt:focus-visible{background:var(--panel-alt);border-color:var(--field)} .prt:hover::after,.prt:focus-visible::after{transform:scaleY(1)} .prt-no{font-family:var(--m);font-size:11px;letter-spacing:.18em;color:var(--muted)} .prt:hover .prt-no{color:var(--signal)} .prt-n{font-family:var(--d);font-weight:800;text-transform:uppercase;letter-spacing:-.02em; font-size:clamp(21px,3.4cqw,34px);line-height:1.06;color:var(--ink)} .prt-k{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} .prt p{margin:6px 0 0;font-size:15.5px;line-height:1.6} .prt-go{margin-top:auto;padding-top:16px;font-family:var(--m);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--signal)} .prt-go i{font-style:normal;display:inline-block;transition:transform .22s} .prt:hover .prt-go i{transform:translate(3px,-3px)} .prt-add{background:none;border-style:dashed} .prt-add .prt-no{font-size:22px;line-height:1;color:var(--field)} .prt-add .prt-n{color:var(--muted)} .prt-add:hover .prt-go i{transform:translateY(3px)} /* ── ЛАБОРАТОРІЯ: прототип генератора ── Два кроки в одному екрані, результат розкривається під ними. Мова та сама, що в решті дому: технічна картка, статуси як у рендер-черги. */ .lab{max-width:900px;margin:0 auto;container-type:inline-size} .lab-step{border-top:1px solid var(--rule);padding:clamp(22px,3vw,34px) 0} .lab-step:first-of-type{border-top:0;padding-top:0} .lab-k{display:flex;align-items:baseline;gap:12px;font-family:var(--m);font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px} .lab-k b{color:var(--signal);font-weight:500} .lab-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:640px){.lab-row{grid-template-columns:1fr}} /* зона для фото продукту */ .lab-drop{position:relative;display:grid;place-items:center;min-height:190px; border:1px dashed var(--rule);background:var(--night2);cursor:pointer;transition:.2s;text-align:center;padding:20px} .lab-drop:hover,.lab-drop.over{border-color:var(--field);background:var(--panel-alt)} .lab-drop input{position:absolute;inset:0;opacity:0;cursor:pointer} .lab-drop .d-mark{font-family:var(--m);font-size:26px;color:var(--field);opacity:.6;display:block;margin-bottom:8px} .lab-drop .d-t{font-size:15px;color:var(--ink)} .lab-drop .d-s{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block} .lab-prev{position:relative;border:1px solid var(--rule);background:var(--night2);overflow:hidden} .lab-prev img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--night3)} .lab-prev .rm{position:absolute;right:8px;top:8px;font-family:var(--m);font-size:10px;letter-spacing:.1em; text-transform:uppercase;background:rgba(var(--veil),.85);border:1px solid var(--rule); color:var(--ink);padding:5px 9px;cursor:pointer} .lab-prev .rm:hover{border-color:var(--field)} /* прогрес рендера */ .lab-run{border:1px solid var(--rule);background:var(--night2);padding:18px 20px;margin-top:20px} .lab-run .bar{height:2px;background:var(--rule);overflow:hidden;margin-top:12px} .lab-run .bar i{display:block;height:100%;width:0;background:var(--signal);transition:width .5s ease} .lab-run .st{display:flex;justify-content:space-between;gap:12px;font-family:var(--m);font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .lab-run .st b{color:var(--signal);font-weight:500} /* результат */ .lab-out{margin-top:clamp(26px,4vw,44px)} .lab-scripts{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:820px){.lab-scripts{grid-template-columns:1fr}} .lab-sc{border:1px solid var(--rule);background:var(--night2);padding:clamp(20px,2.6vw,28px); container-type:inline-size} .lab-sc h3{font-family:var(--d);font-weight:800;text-transform:uppercase;letter-spacing:-.02em; font-size:clamp(18px,3cqw,26px);line-height:1.08;margin:8px 0 0} .lab-sc .sc-k{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .lab-sc ol{margin:16px 0 0;padding-left:0;list-style:none;counter-reset:sc} .lab-sc li{counter-increment:sc;position:relative;padding:10px 0 10px 42px;border-top:1px solid var(--rule); font-size:15px;line-height:1.55;color:var(--body-2)} .lab-sc li::before{content:counter(sc,decimal-leading-zero);position:absolute;left:0;top:12px; font-family:var(--m);font-size:10.5px;letter-spacing:.1em;color:var(--signal)} .lab-cr{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px} @media(max-width:820px){.lab-cr{grid-template-columns:repeat(2,1fr)}} .lab-cr figure{margin:0;border:1px solid var(--rule);background:var(--night2);overflow:hidden} .lab-cr img{width:100%;aspect-ratio:1;object-fit:cover;display:block} .lab-cr figcaption{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);padding:8px 10px} .lab-note{border-left:2px solid var(--field);padding:12px 0 12px 16px;margin-top:22px; font-size:14.5px;color:var(--muted)} /* ── ВАКАНСІЇ ── Колишній блок .role-* жив тільки на join.html і en/join.html. Обидві сторінки переїхали на стікери — стилі в кінці файлу, блок «ВАКАНСІЇ · СТІКЕРИ НА ДВЕРЯХ». Тут навмисно порожньо, щоб не тримати мертвий CSS. */ /* ── магазин ── */ .shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:960px){.shop-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.shop-grid{grid-template-columns:1fr}} .product{background:var(--night2);display:flex;flex-direction:column;overflow:hidden} /* кадри мерчу з брендбука (розділ 13) — 4:5 і 1:1 вперемішку, тож рамка одна на всіх, 4:5 */ .product .ph-p{aspect-ratio:4/5;display:grid;place-items:center;background:var(--night3);position:relative;overflow:hidden} .product .ph-p img{width:100%;height:100%;object-fit:cover;display:block} .product .info{padding:18px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .product .n{font-family:var(--d);font-weight:700;font-size:18px} .product .p-row{margin-top:auto;display:flex;justify-content:space-between;align-items:center} .product .price{font-family:var(--m);font-size:13px;color:var(--ink)} .product .soon{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);padding:4px 8px} /* ── бриф ── */ .brief-tabs{display:flex;gap:8px;margin-bottom:30px} .brief-tabs button{font-family:var(--m);font-size:12px;letter-spacing:.12em;text-transform:uppercase; background:none;border:1px solid var(--rule);color:var(--muted);padding:10px 18px;cursor:pointer;transition:.2s} .brief-tabs button.on{border-color:var(--field);color:var(--on-field);background:var(--field)} .bform{display:none;max-width:760px} .bform.on{display:block} .bblock{margin-bottom:34px} .bblock>.mono{display:block;margin-bottom:16px;color:var(--accent)} .bfield{margin-bottom:16px} .bfield label{display:block;font-size:14.5px;color:var(--ink);margin-bottom:7px;font-weight:400} .bfield .hint{font-size:12.5px;color:var(--muted);margin-top:5px} .bfield input,.bfield textarea,.bfield select{width:100%;background:var(--night2);border:1px solid var(--rule); color:var(--ink);font-family:var(--b);font-size:15px;font-weight:300;padding:12px 14px;outline:none;transition:border-color .2s} .bfield textarea{min-height:74px;resize:vertical} .bfield input:focus,.bfield textarea:focus,.bfield select:focus{border-color:var(--field)} .bfield select{appearance:none;cursor:pointer} .brow{display:flex;gap:12px} .brow>.bfield{flex:1} @media(max-width:640px){.brow{flex-direction:column;gap:0}} .bnote{font-family:var(--m);font-size:11px;color:var(--muted);letter-spacing:.04em;margin-top:10px} /* ── легка форма: усе, крім розгорнутого брифу ── Менше полів, більший клік-таргет, фокус читається з відстані: ліва грань поля загорається сигналом, як індикатор запису. */ .form-lite{max-width:760px;display:flex;flex-direction:column;gap:18px} /* Партнерська форма стоїть окремою сторінкою-кроком, а не збоку від тексту, тому центруємо її і даємо кнопкам повітря — інакше вони липнуть до полів і читаються як частина останньої групи. */ .form-lite.centered{margin-inline:auto;max-width:660px} .form-lite.centered .fl-foot{margin-top:clamp(12px,2vw,20px);padding-top:clamp(18px,2.4vw,26px); border-top:1px solid var(--rule);justify-content:center} .form-lite.centered .fl-note{text-align:center;width:100%} @media(max-width:560px){.form-lite.centered .fl-foot{flex-direction:column;align-items:stretch} .form-lite.centered .fl-foot .btn{text-align:center}} .fl-group{border:1px solid var(--rule);background:var(--night2); padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:16px} .fl-k{font-family:var(--m);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);display:flex;align-items:center;gap:9px} .fl-k::after{content:"";flex:1;height:1px;background:var(--rule)} .fl-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:640px){.fl-row{grid-template-columns:1fr}} .fl-field{display:flex;flex-direction:column;gap:7px;min-width:0} .fl-field label{font-size:13.5px;color:var(--muted);letter-spacing:.01em} .fl-field input,.fl-field select,.fl-field textarea{ width:100%;background:var(--night);color:var(--ink); font-family:var(--b);font-size:16px;font-weight:300; border:1px solid var(--rule);border-left:2px solid #2E2E38; padding:13px 15px;outline:none; transition:border-color .2s,background-color .2s} .fl-field textarea{min-height:82px;resize:vertical} .fl-field select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%), linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px; background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px} .fl-field input::placeholder,.fl-field textarea::placeholder{color:var(--ph)} .fl-field input:hover,.fl-field select:hover,.fl-field textarea:hover{border-color:#3E3E4C} .fl-field input:focus,.fl-field select:focus,.fl-field textarea:focus{ border-color:var(--field);border-left-color:var(--signal);background-color:#0E0E12} /* браузерна валідація — тільки після спроби відправки, не на першому дотику */ .form-lite.tried .fl-field input:invalid, .form-lite.tried .fl-field select:invalid{border-left-color:var(--bad)} .fl-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .fl-note{font-family:var(--m);font-size:11px;letter-spacing:.04em;color:var(--muted); text-transform:none;line-height:1.6;margin:0} .fl-note.ok{color:var(--signal)} .fl-field .req{color:var(--signal)} .fl-field .hint{font-size:12.5px;color:var(--muted);line-height:1.5} /* «— необов'язково» біля підпису: тихіше за сам підпис, але це текст, який читають, тому --muted, а не колір плейсхолдера */ .fl-field label .opt{color:var(--muted);font-weight:300} /* ── відправка: запис на носій ── Форма не «показує спінер», а пише файл: статус, прогрес, підтвердження. Той самий словник, що й на решті сайту. */ .send-ov{position:fixed;inset:0;z-index:200;display:none; background:rgba(var(--veil),.97);align-items:center;justify-content:center;padding:24px} .send-ov.on{display:flex} .send-ov::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18; background:repeating-linear-gradient(180deg,rgba(0,0,0,.6) 0 1px,transparent 1px 3px)} .send-box{position:relative;z-index:2;width:min(520px,100%);border:1px solid var(--rule); background:var(--night2);padding:clamp(24px,4vw,38px);text-align:left} .send-k{font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--muted);display:block;margin-bottom:16px} .send-status{font-family:var(--d);font-weight:800;text-transform:uppercase; letter-spacing:-.01em;line-height:1.05;font-size:clamp(22px,4.4cqw,34px);margin:0;color:var(--ink)} .send-bar{height:4px;background:var(--night3);margin:22px 0 12px;position:relative;overflow:hidden} .send-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--signal); transition:width .4s cubic-bezier(.3,.7,.3,1)} .send-meta{font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);display:flex;justify-content:space-between;gap:12px} .send-box.ok{border-color:var(--signal)} .send-box.ok .send-status{color:var(--signal)} .send-box.err{border-color:var(--bad)} .send-box.err .send-status{color:var(--bad)} .send-note{font-size:14.5px;line-height:1.55;color:var(--muted);margin:16px 0 0} .send-close{margin-top:20px} /* знак відбивається від країв, поки йде запис — той самий жест, що на 404 */ .send-dvd{position:absolute;z-index:1;opacity:.45;pointer-events:none;will-change:transform} .send-dvd .in{display:flex;align-items:center;gap:8px;padding:8px 12px; border:1px solid var(--rule);background:rgba(var(--veil),.7)} .send-dvd .door-mark{width:26px;height:36px} .send-dvd .door-mark .leaf::before{display:block;border-width:1px} .send-dvd .lab{font-family:var(--d);font-weight:800;font-size:13px;color:var(--ink)} @media(prefers-reduced-motion:reduce){ .send-dvd{display:none} .send-bar i{transition:none} } /* ═══ БРИФ ПО КРОКАХ ═══ Одне питання за раз замість стіни з 19 полів: менше видно — менше страшно, і кожен крок можна поставити крупно й по центру. */ .brf{max-width:720px;margin:0 auto;container-type:inline-size} .brf-top{display:flex;align-items:center;gap:16px;margin-bottom:clamp(26px,4vw,44px)} .brf-rail{flex:1;height:2px;background:var(--rule);position:relative;overflow:hidden} .brf-rail i{position:absolute;left:0;top:0;bottom:0;background:var(--signal);width:0; transition:width .45s cubic-bezier(.3,.7,.3,1)} .brf-count{font-family:var(--m);font-size:11px;letter-spacing:.18em;color:var(--muted);white-space:nowrap} .brf-step{display:none;animation:brf-in .42s cubic-bezier(.2,.7,.2,1)} .brf-step.on{display:block} @keyframes brf-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.brf-step{animation:none}.brf-rail i{transition:none}} .brf-k{font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--signal);display:block;margin-bottom:14px} .brf-q{font-family:var(--d);font-weight:800;text-transform:uppercase;letter-spacing:-.015em; line-height:1.02;font-size:clamp(24px,5.6cqw,44px);margin:0 0 10px;color:var(--ink)} .brf-hint{font-size:15px;line-height:1.55;color:var(--muted);margin:0 0 22px;max-width:52ch} .brf-field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} .brf-field label{font-size:13.5px;color:var(--muted)} .brf-field input,.brf-field textarea{ width:100%;background:var(--night2);color:var(--ink);font-family:var(--b); font-size:clamp(17px,2.4cqw,21px);font-weight:300;line-height:1.5; border:0;border-bottom:2px solid var(--rule);padding:14px 2px;outline:none; transition:border-color .22s ease,background-color .22s ease} .brf-field textarea{min-height:104px;resize:vertical;background:var(--night2); border:1px solid var(--rule);padding:16px 18px} .brf-field input::placeholder,.brf-field textarea::placeholder{color:var(--ph)} .brf-field input:focus,.brf-field textarea:focus{border-color:var(--signal);background:var(--night3)} .brf-two{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:600px){.brf-two{grid-template-columns:1fr}} /* варіанти замість випадайок — видно всі відповіді одразу */ .brf-opts{display:grid;gap:10px;margin-bottom:14px} .brf-opt{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer; border:1px solid var(--rule);background:var(--night2);padding:15px 17px;transition:.2s} .brf-opt:hover{border-color:#3E3E4C} .brf-opt input{position:absolute;opacity:0;width:1px;height:1px} .brf-opt .mark{flex:none;width:16px;height:16px;border:1px solid var(--rule);margin-top:2px; display:grid;place-items:center;transition:.2s} .brf-opt .mark::after{content:"";width:8px;height:8px;background:var(--signal);transform:scale(0);transition:transform .18s} .brf-opt .tx{font-size:15.5px;line-height:1.45;color:var(--muted)} .brf-opt .tx b{display:block;color:var(--ink);font-weight:500;font-size:16px;margin-bottom:2px} .brf-opt:has(input:checked){border-color:var(--signal);background:var(--night3)} .brf-opt:has(input:checked) .mark{border-color:var(--signal)} .brf-opt:has(input:checked) .mark::after{transform:scale(1)} .brf-opt:has(input:focus-visible){outline:3px solid var(--signal);outline-offset:2px} .brf-nav{display:flex;align-items:center;gap:18px;margin-top:clamp(30px,4vw,44px); padding-top:clamp(18px,2.4vw,24px);border-top:1px solid var(--rule);flex-wrap:wrap} .brf-back{background:none;border:0;color:var(--muted);font-family:var(--m);font-size:12px; letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:10px 2px;transition:.2s} .brf-back:hover{color:var(--ink)} .brf-skip{margin-left:auto;font-family:var(--m);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);background:none;border:0;cursor:pointer;transition:.2s} .brf-skip:hover{color:var(--signal)} .brf-err{font-family:var(--m);font-size:11px;letter-spacing:.06em;color:#FF6B6B; margin:10px 0 0;min-height:1.2em;text-transform:none} /* фінальний крок — зведення, щоб було видно, що саме летить */ .brf-sum{border:1px solid var(--rule);background:var(--night2);padding:clamp(18px,2.6vw,26px); margin-bottom:18px;max-height:280px;overflow:auto} .brf-sum dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px} .brf-sum dt{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);padding-top:3px} .brf-sum dd{margin:0;color:var(--ink);line-height:1.45} /* ── контакт у три поля: коли бриф — це забагато ── */ .contact-lite{max-width:100%;margin-top:26px;gap:14px} .cl-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:640px){.cl-row{grid-template-columns:1fr}} .contact-lite .fl-field label{color:rgba(255,255,255,.88)} .contact-lite .fl-field input,.contact-lite .fl-field textarea{ background:rgba(var(--veil),.7);color:#fff; border-color:rgba(255,255,255,.26);border-left-color:rgba(255,255,255,.45)} .contact-lite .fl-field textarea{min-height:74px} .contact-lite .fl-field input::placeholder, .contact-lite .fl-field textarea::placeholder{color:rgba(255,255,255,.45)} .contact-lite .fl-field input:hover,.contact-lite .fl-field textarea:hover{border-color:rgba(255,255,255,.5)} .contact-lite .fl-field input:focus,.contact-lite .fl-field textarea:focus{ background:rgba(var(--veil),.9);border-color:#fff;border-left-color:var(--signal)} .contact-lite .fl-note{color:rgba(255,255,255,.72)} .contact-lite.tried .fl-field input:invalid, .contact-lite.tried .fl-field textarea:invalid{border-left-color:#FFD2D2} /* ── кнопки ── */ /* Кнопка як тумблер запису: при наведенні заливка «проявляється» зліва, текст інвертується, і зліва загоряється сигнальна грань. */ .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px; font-family:var(--m);font-size:13px;letter-spacing:.1em;text-transform:uppercase; padding:14px 24px;border:1px solid var(--field);color:#fff;background:var(--field); cursor:pointer;isolation:isolate; transition:color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .12s ease} .btn>*{position:relative;z-index:1} /* z-index:-1, а не 0: голий текстовий вузол не позиційований, тому будь-який абсолютний шар поверх нього ховає напис. isolation:isolate тримає -1 усередині кнопки й не пускає його під фон сторінки. */ .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink); transform:scaleX(0);transform-origin:left center;transition:transform .28s cubic-bezier(.2,.7,.2,1)} .btn::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2; background:var(--signal);transform:scaleY(0);transform-origin:bottom; transition:transform .22s ease .06s} .btn:hover,.btn:focus-visible{color:var(--night);border-color:var(--ink); box-shadow:0 0 0 1px rgba(244,243,239,.18),0 10px 30px rgba(0,0,0,.45)} .btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)} .btn:hover::after,.btn:focus-visible::after{transform:scaleY(1)} .btn:active{transform:translateY(1px)} .btn.ghost{background:none;color:var(--ink);border-color:var(--rule)} .btn.ghost:hover,.btn.ghost:focus-visible{color:var(--night);border-color:var(--ink)} /* стрілка в написі трохи їде вперед — рух, який видно навіть боковим зором */ .btn:hover>.arw{transform:translateX(4px)} .arw{display:inline-block;transition:transform .22s ease} @media(prefers-reduced-motion:reduce){ .btn::before{transition:none} .btn::after{transition:none} .arw{transition:none} } .btn-row{display:flex;gap:16px;flex-wrap:wrap} .fl-foot{gap:16px} /* ── hero ── */ .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; position:relative;overflow:hidden;isolation:isolate;padding-bottom:clamp(40px,6vh,80px)} /* Шари героя тримаємо на ДОДАТНИХ z-index усередині власного контексту. Раніше тут стояли -2 і -1, і це працювало лише поки не мав фону: фон body віддавався полотну, а сам body нічого не малював. Щойно на html з'явився фон (для згасання при зміні мови), body почав малювати свій — і закрив ним усе з від'ємним z-index. Відео лишалось на місці, грало, але його ніхто не бачив: чорний прямокутник на десяти сторінках. isolation:isolate робить .hero власним контекстом, тож порядок шарів тепер не залежить від того, у кого є фон. */ .hero-media{position:absolute;inset:0;z-index:0} .hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover; filter:saturate(.6) contrast(1.05) brightness(.55)} .hero-shade{position:absolute;inset:0;z-index:1;background:var(--shade); background:linear-gradient(180deg,rgba(var(--veil),.5) 0%,rgba(var(--veil),.15) 45%,rgba(var(--veil),.94) 100%)} /* .ufo-hero (ai-unit) вживає ті самі .hero-media / .hero-shade, але власного правила не мала — абсолютні шари чіплялись до випадкового предка й раніше просто ховались за фоном body. Тепер у неї свій контекст, як у .hero. */ .ufo-hero{position:relative;isolation:isolate} /* Тут навмисно НЕ .hero>.scroll-cue: цьому елементу потрібен лише z-index, а селектор із двох класів перебивав його власний position:absolute (0-2-0 проти 0-1-0). Підказка ставала flex-елементом на всю ширину, і right зсував її вліво — напис виїжджав у центр героя. */ .hero>.wrap,.ufo-hero>.wrap{position:relative;z-index:2} .hero .pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} .pill{font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase; border:1px solid rgba(244,243,239,.28);padding:8px 14px;color:var(--ink);transition:.2s} .pill:hover{border-color:var(--field);background:rgba(123,47,255,.16)} .hero-h1-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:100%;min-width:0} .hero-h1-row h1{min-width:0;max-width:100%} @media(max-width:520px){.habit-badge{font-size:11px;letter-spacing:.2em;padding:6px 10px}} .habit-badge{font-family:var(--m);font-size:13px;letter-spacing:.28em;text-transform:uppercase; color:var(--signal);border:1px solid var(--signal);padding:8px 14px;white-space:nowrap; box-shadow:0 0 16px rgba(114,255,0,.18)} /* Підказка живе в полі сторінки, а не в колонці тексту: при right:var(--pad) її бокс лягав рівно на правий край заголовка. Тепер вона притиснута до краю екрана й у текст не впирається на жодній ширині. */ .scroll-cue{position:absolute;right:clamp(10px,1.4vw,22px);bottom:28px;z-index:2; font-family:var(--m);font-size:11px; letter-spacing:.2em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl; display:flex;align-items:center;gap:10px} @media(max-width:640px){.scroll-cue{right:6px;bottom:20px;font-size:9.5px;letter-spacing:.14em} .scroll-cue::after{height:32px} /* На телефоні колонка героя йде майже на всю ширину й упирається в підказку. Звільняємо під неї смугу, інакше вертикальний напис лягає на останні літери заголовка. */ .hero>.wrap{padding-right:calc(var(--pad) + 20px)}} .scroll-cue::after{content:"";width:1px;height:48px;background:var(--signal); animation:drop 1.8s infinite} @keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ── ДІМ: sticky-сцена ── */ .house-scene{position:relative} /* дім — один екран без sticky-треку: поверхи гортає JS (авто-цикл + hover) */ .house-track{position:relative} .house-sticky{position:relative;min-height:88svh; display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center;gap:24px;max-width:var(--maxw);margin:0 auto; padding:96px var(--pad) 48px} .house-svg{width:100%;height:min(72svh,640px)} .house-svg .ln{stroke:var(--field);stroke-width:2;fill:none;opacity:.34;transition:opacity .5s} .house-svg .fill{fill:var(--night2);opacity:0;transition:opacity .5s} .house-svg .door{fill:var(--signal);filter:drop-shadow(0 0 14px rgba(114,255,0,.8))} .house-svg .floor.lit .ln{opacity:1;stroke-width:2.5} .house-svg .floor.lit .fill{opacity:1} .house-svg .glyph{font-family:var(--m);font-size:13px;letter-spacing:.2em;fill:var(--muted); text-transform:uppercase;transition:fill .4s} .house-svg .floor.lit .glyph{fill:var(--ink)} /* UFO */ .ufo{cursor:pointer} .ufo .body-el{transition:.3s} .ufo:hover .beam{opacity:.5} .ufo .beam{opacity:.22;transition:opacity .4s} @media(prefers-reduced-motion:no-preference){ .ufo{animation:hover-float 6s ease-in-out infinite} @keyframes hover-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} } .house-panel{min-width:0} /* базово всі картки видимі — якщо JS не відпрацює, панель не буде порожньою; ховаємо лише після того, як JS підтвердив, що вміє показати назад */ .house-panel .card{display:block;margin-bottom:32px} .js-house .house-panel .card{display:none;margin-bottom:0} .js-house .house-panel .card.on{display:block;animation:rise .5s ease} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .house-progress{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%); display:flex;flex-direction:column;gap:14px;z-index:5} .house-progress i{font-style:normal;font-family:var(--m);font-size:15px;line-height:1; color:var(--muted);opacity:.55;display:block;transition:.3s} .house-progress i.on{color:var(--signal);opacity:1;text-shadow:0 0 10px rgba(114,255,0,.6)} /* SVG дому: не клікабельний — лінки тільки в панелі */ .house-svg .floor{cursor:default} /* інженерні елементи фундаменту */ .house-svg .dim{stroke:var(--muted);stroke-width:1.2;opacity:.7} .house-svg .dim-t{font-family:var(--m);font-size:11px;letter-spacing:.14em;fill:var(--muted);text-transform:uppercase} .house-svg .pile{fill:#101015;stroke:var(--field);stroke-width:2} .house-svg .anchor{stroke:var(--signal);stroke-width:2} .house-svg .floor.lit .dim,.house-svg .floor:hover .dim{opacity:1;stroke:var(--field)} .house-svg .floor.lit .dim-t,.house-svg .floor:hover .dim-t{fill:var(--ink)} @media(max-width:900px){ .house-track{height:auto} /* Порядок на телефоні: спершу дім, потім перемикач, потім текст — керуючий елемент стоїть між тим, чим керує, і тим, що показує. Раніше перемикач висів над домом окремо, ні з чим не пов'язаний. */ .house-sticky{position:static;height:auto;display:flex;flex-direction:column; gap:0;padding:14px var(--pad) 34px;min-height:0} .house-svg{order:1;width:100%;height:auto;max-height:58svh;aspect-ratio:56/62;margin:0 auto} .house-progress{order:2} .house-panel{order:4;margin-top:16px} .house-progress{position:static;transform:none;flex-direction:row;justify-content:center; gap:8px;margin:10px 0 0} /* 48×44 — мінімальний комфортний тач-таргет, символ по центру */ .house-progress i{border:1px solid var(--rule);min-width:52px;height:46px; display:flex;align-items:center;justify-content:center;font-size:17px; cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.2s} .house-progress i.on{border-color:var(--signal);background:rgba(114,255,0,.1)} /* картка поверху: заголовок трохи тихіше, дія — на всю ширину під палець */ .house-panel .card .btn-row{margin-top:20px} .house-panel .card .btn{width:100%;justify-content:center} } .house-progress i[role=button]:focus-visible{outline:3px solid var(--signal);outline-offset:2px} /* ── картки робіт ── */ .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .work-grid.cols-2{grid-template-columns:repeat(2,1fr)} @media(max-width:960px){.work-grid,.work-grid.cols-2{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.work-grid,.work-grid.cols-2{grid-template-columns:1fr}} .work-card{position:relative;overflow:hidden;background:var(--night2);aspect-ratio:16/9;display:block} .work-card img,.work-card video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;filter:saturate(.6) contrast(1.06) brightness(.82);transition:.5s} .work-card video{opacity:0} .work-card:hover img{transform:scale(1.04)} .work-card.playing video{opacity:1} .work-card .meta{position:absolute;left:0;right:0;bottom:0;padding:36px 18px 14px; background:linear-gradient(transparent,rgba(var(--veil),.9));display:flex; justify-content:space-between;align-items:flex-end;gap:10px} .work-card .t{font-family:var(--d);font-weight:700;font-size:17px;line-height:1.1} .work-card .c{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--signal);white-space:nowrap} .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px} .filters button{font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase; background:none;border:1px solid var(--rule);color:var(--muted);padding:8px 14px;cursor:pointer;transition:.2s} .filters button:hover{color:var(--ink)} .filters button.on{border-color:var(--field);color:var(--on-field);background:var(--field)} /* ── house: шапка фреймворку ── */ .fw-hero{padding-top:clamp(112px,14vh,150px);padding-bottom:clamp(32px,5vw,60px)} .fw-hero h1{font-size:clamp(30px,7.6cqw,86px)} .fw-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,64px);align-items:end;margin-top:14px} @media(max-width:900px){.fw-grid{grid-template-columns:1fr;gap:30px}} .fw-floors{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)} .fw-floors li{border-bottom:1px solid var(--rule)} .fw-floors a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline; gap:16px;padding:15px 0;transition:.22s} .fw-floors a:hover{padding-left:10px} .fw-floors a:hover .n{color:var(--accent)} .fw-floors .s{font-family:var(--m);font-size:19px;color:var(--signal);line-height:1} .fw-floors .n{font-family:var(--d);font-weight:700;font-size:clamp(16px,1.7vw,21px);transition:color .22s} .fw-floors .d{font-family:var(--m);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);text-align:right} @media(max-width:520px){.fw-floors .d{display:none}} /* ── картки каналів (YouTube / TikTok) ── */ .chan{display:flex;align-items:center;gap:clamp(16px,2.2vw,26px); background:var(--night2);padding:clamp(22px,2.8vw,32px);transition:.25s; border:1px solid transparent} .chan:hover{border-color:var(--field);background:#15151b} .chan:hover .chan-arrow{color:var(--signal);transform:translateX(4px)} .chan-ico{width:clamp(46px,5vw,62px);height:auto;flex:none} .chan-ico .s{fill:none;stroke:var(--field);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .chan-ico .a{fill:none;stroke:var(--signal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .chan-ico .f{fill:var(--signal)} .chan-body{min-width:0;flex:1} .chan-t{display:block;font-family:var(--d);font-weight:700;font-size:clamp(17px,1.8vw,22px);line-height:1.15} .chan-s{display:block;margin-top:8px;color:var(--muted);font-size:15px;line-height:1.5} .chan-arrow{font-size:20px;color:var(--muted);transition:.25s;flex:none} @media(max-width:520px){.chan{flex-wrap:wrap}.chan-arrow{display:none}} /* ═══ WEBCORE: мова монітора, скан-ліній і таймкоду ═══ продовження піксельної гри зі сторінки команди — тільки на медіа */ /* скан-лінії поверх відео-контейнерів */ .wp-player::after,.yt-embed::after,.work-card::after,.ai-hero-media::after{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.16; background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 1px,transparent 1px 3px)} .work-card,.ai-hero-media{position:relative} /* кутові рамки-візири, як у видошукачі */ .wp-player::before,.vert-row video{position:relative} .framed{position:relative} .framed::before,.framed::after{content:"";position:absolute;width:18px;height:18px; z-index:4;pointer-events:none;border:2px solid var(--signal);opacity:.75} .framed::before{top:10px;left:10px;border-right:0;border-bottom:0} .framed::after{bottom:10px;right:10px;border-left:0;border-top:0} /* таймкод на картці роботи — з'являється на наведенні */ /* REC — у правому верхньому куті кадру, як індикатор камери, а не в підписі знизу: там він губився серед назви й категорії */ .work-card::before{content:"REC ●";position:absolute;top:12px;right:12px;z-index:4; font-family:var(--m);font-size:10px;letter-spacing:.16em;color:var(--signal); background:rgba(var(--veil),.72);padding:4px 8px;pointer-events:none; opacity:0;transform:translateY(-4px);transition:.28s} .work-card:hover::before,.work-card:focus-visible::before{opacity:.95;transform:none} @media(hover:none){.work-card::before{opacity:.9;transform:none}} /* монітор-бейдж на великих плеєрах */ .wp-player .sig-badge{position:absolute;right:12px;top:12px;z-index:4; font-family:var(--m);font-size:10px;letter-spacing:.14em;color:var(--signal); background:rgba(var(--veil),.78);border:1px solid var(--rule);padding:5px 9px} /* дизеринг-межа для секційних розділювачів */ .dither{height:8px;border:0;margin:0; background-image:radial-gradient(var(--rule) 1px,transparent 1px); background-size:4px 4px;opacity:.7} @media(prefers-reduced-motion:reduce){ .work-card .meta::before{transition:none} } /* ── ai unit: великий кейс ── */ .ai-hero-case{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1px;background:var(--rule);border:1px solid var(--rule)} @media(max-width:860px){.ai-hero-case{grid-template-columns:1fr}} .ai-hero-media{background:var(--night2);overflow:hidden;display:block} .ai-hero-media img{width:100%;height:100%;min-height:260px;object-fit:cover; filter:saturate(.8) contrast(1.05);transition:transform .6s ease,filter .4s ease} .ai-hero-case:hover .ai-hero-media img{transform:scale(1.04);filter:saturate(1) contrast(1.05)} .ai-hero-body{background:var(--night2);padding:clamp(26px,3.2vw,42px); display:flex;flex-direction:column;justify-content:center} .ai-hero-t{font-family:var(--d);font-weight:800;text-transform:uppercase; font-size:clamp(26px,4.3cqw,52px);letter-spacing:-.025em;line-height:1;margin:12px 0 14px} .ai-hero-d{color:var(--muted);font-size:16px;line-height:1.55;max-width:46ch} @media(max-width:860px){.ai-hero-d{max-width:100%}.ai-hero-media img{min-height:200px}} .ai-hero-more{margin-top:20px;font-family:var(--m);font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--signal);transition:.25s} .ai-hero-case:hover .ai-hero-more{letter-spacing:.2em} /* Плейсхолдер-портрет. Замість однакового квадратика в кожній картці — знак ремесла: по ньому видно, чиє це місце, поки немає фото. */ .person .shot.ph{display:grid;place-items:center; background:repeating-linear-gradient(45deg,var(--night2),var(--night2) 8px,var(--night3) 8px,var(--night3) 16px)} .person .shot.ph .ph-mark{font-family:var(--m);font-size:34px;color:var(--field);opacity:.55} .person .shot.ph svg{width:clamp(56px,32%,92px);height:auto;color:var(--field);opacity:.5; transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)} .person:hover .shot.ph svg{opacity:.9;transform:scale(1.06)} .person .shot.ph::before{content:"";position:absolute;inset:14px;border:1px solid var(--rule); pointer-events:none} /* ── кадри студії ── */ .home-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:18px} @media(max-width:700px){.home-shots{grid-template-columns:1fr}} .home-shots figure{margin:0;overflow:hidden;background:var(--night2)} .home-shots img{width:100%;aspect-ratio:16/9;object-fit:cover; filter:saturate(.72) contrast(1.06);transition:transform .6s ease,filter .4s ease} .home-shots figure:hover img{transform:scale(1.03);filter:saturate(.95) contrast(1.06)} /* ═══ TAPE: стрічка-слово поверху (media webcore) ═══ HABIT / REACH / BELONGING — біжуча стрічка як на моніторі плейбека */ .tape{position:relative;overflow:hidden;padding:clamp(20px,3vw,38px) 0 clamp(14px,2vw,24px); border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--night)} .tape::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.15; background:repeating-linear-gradient(180deg,rgba(0,0,0,.6) 0 1px,transparent 1px 3px)} .tape-track{display:flex;gap:clamp(30px,4vw,70px);width:max-content;padding-left:20px} .tape-track span{font-family:var(--d);font-weight:800;text-transform:uppercase; font-size:clamp(46px,9vw,150px);line-height:.85;letter-spacing:-.02em;white-space:nowrap; color:transparent;-webkit-text-stroke:1.5px #4A3E78;text-stroke:1.5px #4A3E78} .tape-track span.hot{color:var(--ink);-webkit-text-stroke:0;text-stroke:0} .tape-track span.neon{-webkit-text-stroke:1.5px var(--signal);text-stroke:1.5px var(--signal)} .tape-meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; max-width:var(--maxw);margin:16px auto 0;padding:0 var(--pad); font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .tape-meta .rec{color:var(--signal)} @media(prefers-reduced-motion:no-preference){ .tape-track{animation:tape-run 30s linear infinite} @keyframes tape-run{to{transform:translateX(-50%)}} .tape-meta .rec{animation:pulse 2.4s infinite} } /* ── широкий кадр-вставка ── */ .wide-shot{margin:18px 0 0;position:relative;overflow:hidden;background:var(--night2)} .wide-shot img{width:100%;aspect-ratio:21/9;object-fit:cover;margin:0; filter:saturate(.75) contrast(1.06)} .wide-shot .cap{position:absolute;left:12px;bottom:10px;z-index:4;margin:0; font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--signal);background:rgba(var(--veil),.8);border:1px solid var(--rule);padding:5px 9px} @media(max-width:600px){.wide-shot img{aspect-ratio:16/9}} /* ── вітальня: пакети з перемиканням ── */ .pk{border:1px solid var(--rule)} .pk-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule); border-bottom:1px solid var(--rule)} .pk-tabs button{background:var(--night2);border:0;cursor:pointer;text-align:left; padding:clamp(16px,2vw,22px) clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:6px; transition:background .22s;position:relative;font-family:var(--b);color:var(--ink)} .pk-tabs button:hover{background:var(--panel-alt)} .pk-tabs button.on{background:var(--panel-alt)} .pk-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--signal)} .pk-t-no{font-family:var(--m);font-size:10px;letter-spacing:.16em;color:var(--muted)} .pk-tabs button.on .pk-t-no{color:var(--signal)} .pk-t-name{font-family:var(--d);font-weight:700;font-size:clamp(15px,1.6vw,20px);text-transform:uppercase;letter-spacing:-.01em} .pk-t-price{font-family:var(--m);font-size:12px;color:var(--accent)} @media(max-width:640px){ .pk-tabs{grid-template-columns:1fr} .pk-tabs button{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap} } .pk-panel{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:1px;background:var(--rule)} .pk-panel[hidden]{display:none} .pk-main,.pk-side{background:var(--night2);padding:clamp(24px,3vw,38px)} .pk-main h3{font-family:var(--d);font-weight:800;text-transform:uppercase; font-size:clamp(22px,3.4cqw,38px);letter-spacing:-.02em;line-height:1;margin:12px 0 14px} .pk-list{list-style:none;padding:0;margin:18px 0 0} .pk-list li{position:relative;padding:11px 0 11px 24px;border-bottom:1px solid var(--rule); color:var(--muted);font-size:15.5px;line-height:1.5} .pk-list li:last-child{border-bottom:0} .pk-list li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:2px;background:var(--field)} .pk-list b{color:var(--ink)} .pk-price{font-family:var(--d);font-weight:800;font-size:clamp(30px,3.4vw,44px); color:var(--field);line-height:1;margin:12px 0 6px} .pk-tier{display:flex;justify-content:space-between;align-items:flex-start;gap:12px; padding:12px 0 12px 2px;border-bottom:1px solid var(--rule); border-left:2px solid transparent;transition:.22s} .pk-tier:hover{background:var(--panel-alt);padding-left:12px;border-left-color:var(--signal)} .pk-tier:hover .pk-tier-p{color:var(--ink);transform:scale(1.06)} .pk-tier-p{font-family:var(--m);color:var(--signal);white-space:nowrap; transition:.22s;transform-origin:right center} .pk-fit{margin:16px 0 18px;font-size:14.5px} /* .pk-side — блоковий контейнер, тому інлайнові підпис і кнопка сідали в один рядок і накладались, щойно між ними не було абзацу */ .pk-side .mono{display:block} .pk-side .btn{margin-top:18px} @media(max-width:820px){.pk-panel{grid-template-columns:1fr}} /* ── дах: картки «коли» ── */ .when-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule)} @media(max-width:960px){.when-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.when-grid{grid-template-columns:1fr}} .when-card{background:var(--night2);padding:clamp(24px,2.8vw,34px);transition:background .25s} .when-card:hover{background:var(--panel-alt)} .when-card:hover .when-mark .s{stroke:var(--accent)} .when-mark{width:40px;height:40px;display:block;margin-bottom:18px} .when-mark .s{fill:none;stroke:var(--field);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s} .when-mark .a{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .when-mark .f{fill:var(--signal)} .when-card h3{font-family:var(--d);font-weight:700;font-size:19px;margin:0 0 10px;line-height:1.15} /* ── дах: слово-якір REACH ── */ .reach{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px);align-items:center} .reach-word{font-family:var(--d);font-weight:800;text-transform:uppercase; letter-spacing:-.04em;line-height:.82;font-size:clamp(48px,15cqw,190px); color:transparent;-webkit-text-stroke:2px var(--field); text-stroke:2px var(--field);word-break:break-word} .reach-body{min-width:0} @media(max-width:820px){.reach{grid-template-columns:1fr;gap:18px} .reach-word{-webkit-text-stroke-width:1.5px}} /* ── сторінка проєкту ── */ .wp-player{position:relative;aspect-ratio:16/9;background:var(--night2);overflow:hidden} .wp-player video,.wp-player iframe{position:absolute;inset:0;width:100%;height:100%; border:0;object-fit:cover;background:#000} .wp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px; flex-wrap:wrap;margin-top:28px} .wp-head h1{font-size:clamp(21px,4.3cqw,48px)} .wp-desc{max-width:70ch;margin-top:22px} .wp-desc p{font-size:16.5px;line-height:1.62;color:var(--body-2);margin:0 0 14px} .wp-desc p:last-child{margin-bottom:0} .wp-creds{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--rule); display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .wp-creds>div{padding:16px 18px 16px 0;border-bottom:1px solid var(--rule)} .wp-creds .k{display:block;font-family:var(--m);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted-2);margin-bottom:7px} .wp-creds .v{font-size:15.5px;color:var(--ink);line-height:1.35} /* ── панелі/сітки ── */ .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}} .panel{background:var(--night2);padding:26px 28px;border:1px solid transparent} .panel.line{background:none;border-color:var(--rule)} .panel.violet{background:var(--field);color:#fff} .panel.violet p{color:rgba(255,255,255,.9)} .panel.violet .mono{color:rgba(255,255,255,.92)} /* Поле лишається фіолетовим в обох темах, тому білий тут — не «темна тема», а колір поверх заливки. Раніше він стояв інлайн у 80 місцях і в світлій темі витікав на кремовий фон, де ставав нечитабельним. */ .panel.violet h1,.panel.violet h2,.panel.violet h3,.panel.violet .thesis, .panel.violet .pk-price,.panel.violet li,.panel.violet b,.panel.violet strong{color:#fff} .panel.violet a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px} /* Кнопки на фіолетовому: раніше кольори стояли інлайн у розмітці, через що :hover з CSS не мав шансу спрацювати — тепер усе тут. */ .panel.violet .btn{background:#0A0A0C;border-color:#0A0A0C;color:#fff} .panel.violet .btn::before{background:#fff} .panel.violet .btn:hover,.panel.violet .btn:focus-visible{color:var(--field);border-color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.35)} .panel.violet .btn.ghost{background:none;border-color:rgba(255,255,255,.45);color:#fff} .panel.violet .btn.ghost:hover,.panel.violet .btn.ghost:focus-visible{color:var(--field);border-color:#fff} .panel.violet .btn:focus-visible{outline:3px solid #fff;outline-offset:3px} .panel h3{font-family:var(--d);font-weight:700;font-size:19px;margin:0 0 10px;line-height:1.15} .num{font-family:var(--d);font-weight:800;font-size:44px;color:var(--field);line-height:1} /* ── власна лінійна іконографіка (жодних бібліотек) ── */ .ico{width:42px;height:42px;display:block;margin-bottom:15px;flex:none} .ico .s{fill:none;stroke:var(--field);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ico .a{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ico .f{fill:var(--signal)} .panel.violet .ico .s{stroke:rgba(255,255,255,.92)} .panel.violet .ico .a{stroke:#0A0A0C} .panel.violet .ico .f{fill:#0A0A0C} /* таблиці */ table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:12px 14px;font-size:15.5px;font-weight:300;color:var(--muted); border-bottom:1px solid var(--rule);vertical-align:top} th{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)} td b{color:var(--ink)} tr:last-child td{border-bottom:none} td.price{font-family:var(--m);color:var(--signal);white-space:nowrap} /* вузькі екрани: nowrap-ціна рвала панель — дозволяємо перенос і тиснемо падінги */ @media(max-width:620px){ th,td{padding:10px 8px;font-size:14.5px} td.price{white-space:normal} } /* ── команда ── */ .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:960px){.team-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.team-grid{grid-template-columns:1fr}} .person{background:var(--night2);overflow:hidden} .person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 26%; filter:saturate(.5) contrast(1.05)} .person .info{padding:16px 18px} .person .n{font-family:var(--d);font-weight:700;font-size:18px;text-transform:lowercase} .person .r{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-top:5px} /* Порожній рядок ролі все одно тримає висоту: без цього картка без посади виходить нижчою за сусідні, і підпис у ряду перестає стояти на одній лінії. */ .person .r:empty{min-height:16px} /* ── журнал: мінімалістичний список-індекс ── */ .jlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)} .jlist li{border-bottom:1px solid var(--rule)} .jlist a{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline; gap:clamp(14px,2.4vw,34px);padding:clamp(20px,2.6vw,30px) 0;transition:.25s} .jlist a:hover{padding-left:12px} .jlist a:hover .j-title{color:var(--accent)} .jlist a:hover .j-arrow{color:var(--signal);transform:translateX(4px)} .j-no{font-family:var(--m);font-size:11px;letter-spacing:.14em;color:var(--muted)} .j-main{min-width:0} .j-title{display:block;font-family:var(--d);font-weight:700; font-size:clamp(18px,2.8cqw,30px);line-height:1.12;transition:color .25s} .j-sub{display:block;margin-top:8px;color:var(--muted);font-size:15px; line-height:1.5;max-width:62ch} .j-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;white-space:nowrap} .j-tag{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)} .j-time{font-family:var(--m);font-size:11px;color:var(--muted)} .j-arrow{font-size:19px;color:var(--muted);transition:.25s} @media(max-width:700px){ .jlist a{grid-template-columns:auto 1fr;gap:12px 14px} .j-meta{grid-column:2;flex-direction:row;align-items:center;gap:12px;margin-top:10px} .j-arrow{display:none} } /* ── журнал ── */ .post-card{background:var(--night2);display:flex;flex-direction:column;overflow:hidden} .post-card img{aspect-ratio:16/9;object-fit:cover;filter:saturate(.6) contrast(1.06)} .post-card .body{padding:22px 24px;display:flex;flex-direction:column;gap:10px;flex:1} .post-card h3{font-family:var(--d);font-weight:700;font-size:20px;line-height:1.15;margin:0} .post-card .more{margin-top:auto;font-family:var(--m);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--signal)} /* стаття */ .article{max-width:760px;margin:0 auto;padding:0 var(--pad)} .article h1{font-family:var(--d);font-weight:800;font-size:clamp(27px,5.5cqw,54px); line-height:.95;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 18px} .article h2{font-family:var(--d);font-weight:700;font-size:clamp(20px,2.9cqw,28px); line-height:1.1;margin:44px 0 14px} .article p,.article li{font-size:17.5px;line-height:1.65;color:var(--body-2)} .article ul,.article ol{padding-left:22px;margin:0 0 16px} .article li{margin-bottom:8px} .article b,.article strong{color:var(--ink)} .article table{margin:22px 0} /* широкі таблиці статей на вузьких екранах скролимо всередині себе, а не ріжемо */ @media(max-width:620px){ .article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} } .article .callout{background:var(--night2);border-left:3px solid var(--field); padding:20px 24px;margin:26px 0} .article .callout p{margin:0;color:var(--ink)} .article img{margin:26px 0;filter:saturate(.6) contrast(1.06)} .article .meta-row{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:34px} /* ── футер ── */ footer.site{border-top:1px solid var(--rule);padding:clamp(44px,6vw,80px) 0 40px;margin-top:40px} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px} @media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.foot-grid{grid-template-columns:1fr}} .foot-grid a{display:block;color:var(--muted);font-size:15px;padding:4px 0;transition:.2s} .foot-grid a:hover{color:var(--ink)} .foot-tag{font-family:var(--d);font-weight:800;font-size:clamp(26px,4.8cqw,52px); text-transform:uppercase;letter-spacing:-.02em;line-height:.95;margin-bottom:18px} .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:44px;padding-top:22px;border-top:1px solid var(--rule)} /* reveal-анімації — прогресивне покращення. Контент видимий за замовчуванням; ховаємо його ТІЛЬКИ якщо JS підтвердив, що зможе показати назад (клас .js-rv). Інакше збій JS = порожня сторінка. */ .rv{opacity:1;transform:none} .js-rv .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} .js-rv .rv.in{opacity:1;transform:none} /* кінцевий стан закріплюємо без переходу: якщо вкладка не малює кадри, transition не просувається і .in сам по собі лишив би контент невидимим */ .js-rv .rv.rv-done{opacity:1;transform:none;transition:none} /* ═══ мобільні запобіжники ═══ flex/grid-діти за замовчуванням не стискаються менше свого контенту — через це на 360px героям і панелям бракувало місця і текст обрізало */ .wrap{width:100%;min-width:0} .hero>.wrap,.ufo-hero>.wrap,.yt-hero>.wrap,.fw-hero>.wrap{max-width:min(var(--maxw),100%)} .hero,.ufo-hero,.yt-hero{min-width:0} .panel,.when-card,.pk-main,.pk-side,.ai-hero-body,.reach-body,.g2>*,.g3>*,.g4>*, .sec-head>*,.fw-grid>*,.yt-hero .grid>*,.reach>*,.pk-panel>*,.liber>*,.vert-row>*, .wp-head>*,.work-grid>*,.team-grid>*,.ep-grid>*,.when-grid>*,.home-shots>*{min-width:0} .fw-hero h1,.yt-hero h1,.wp-head h1,.sec-head h1,.sec-head h2{overflow-wrap:break-word} .pk-price,.pk-tier-p,td.price{white-space:nowrap} /* ═══════════════════════════════════════════════════ MEDIA LAYER · мова носія + інженерний погляд Принцип: зображення деградує, креслення — ніколи. Фото під низом може сипатись, компресуватись, інвертуватись; шар розмітки поверх нього завжди чіткий і векторний. ═══════════════════════════════════════════════════ */ /* ── 1. Інженерна розмітка поверх кадру ── */ .wide-shot{--sp:#72FF00} .spec-layer{position:absolute;inset:0;z-index:3;pointer-events:none} .spec-layer svg{width:100%;height:100%;display:block;overflow:visible} /* розміри в одиницях viewBox (2100 завширшки): масштаб до екрана ≈ 0.57, тому кегль і товщини задані з запасом, інакше розмітка тоншає до нечитомої */ .spec-layer .ln{stroke:var(--sp);stroke-width:2;fill:none;opacity:.85} .spec-layer .ln.dim{stroke:rgba(244,243,239,.5);stroke-dasharray:8 8} .spec-layer .tick{stroke:rgba(244,243,239,.5);stroke-width:2;fill:none} .spec-layer text{font-family:var(--m);font-size:23px;letter-spacing:2.4px; text-transform:uppercase;fill:var(--sp);paint-order:stroke; stroke:rgba(var(--veil),.55);stroke-width:5px} .spec-layer text.dim{fill:rgba(244,243,239,.72)} /* виноска з кружком-номером — вузол креслення */ .spec-layer .bub{fill:rgba(var(--veil),.82);stroke:var(--sp);stroke-width:2} .spec-layer .bub-t{fill:var(--sp);font-size:21px;letter-spacing:0;stroke:none} /* на вузьких екранах розмітка тільки заважає */ @media(max-width:700px){.spec-layer{display:none}} /* ── 2. Штамп креслення замість звичайного футера сторінки ── */ .stamp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule);margin-top:clamp(28px,4vw,48px)} .stamp>div{background:var(--night2);padding:12px 14px;display:flex;flex-direction:column;gap:5px} .stamp .k{font-family:var(--m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .stamp .v{font-family:var(--m);font-size:12px;letter-spacing:.08em;color:var(--ink)} .stamp .v.on{color:var(--signal)} @media(max-width:700px){.stamp{grid-template-columns:1fr 1fr}} /* ── 3. Негатив: «ще не проявлено» ── */ .undev{position:relative;filter:invert(1) hue-rotate(180deg);transition:filter .5s ease} .undev::after{content:attr(data-undev);position:absolute;left:10px;top:10px;z-index:5; font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:#0A0A0C;background:var(--signal);padding:4px 7px;filter:invert(1) hue-rotate(180deg)} .undev:hover,.undev:focus-within{filter:none} .undev:hover::after,.undev:focus-within::after{opacity:0} @media(prefers-reduced-motion:reduce){.undev{transition:none}} /* ── 4. Технічна картка дому: стріми замість специфікації матеріалів ── */ .mediainfo{border:1px solid var(--rule);background:var(--night2); font-family:var(--m);font-size:13px;overflow:hidden} .mediainfo .mi-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:14px 18px;border-bottom:1px solid var(--rule);background:var(--night3); font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .mi-row{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:baseline; padding:14px 18px;border-bottom:1px solid var(--rule);transition:background .2s} .mi-row:last-child{border-bottom:0} a.mi-row:hover{background:rgba(123,47,255,.12)} .mi-row .idx{color:var(--accent);letter-spacing:.06em} .mi-row .desc{color:var(--muted);line-height:1.5;letter-spacing:.02em} .mi-row .desc b{font-family:var(--b);font-weight:600;color:var(--ink);letter-spacing:0} .mi-row .val{color:var(--signal);font-size:11px;letter-spacing:.1em;white-space:nowrap} @media(max-width:640px){ .mi-row{grid-template-columns:1fr;gap:6px} .mi-row .val{white-space:normal} } /* ── 5. Деградація файлу: блок пам'яті ── */ .deg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule); border:1px solid var(--rule);margin-top:clamp(24px,3vw,40px)} .deg-cell{background:var(--night);padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:14px} .deg-k{font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .deg-k.on{color:var(--signal)} .deg-view{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid var(--rule)} .deg-view img,.deg-view canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .deg-view canvas{image-rendering:pixelated} .deg-view .lost{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center; background:#000;opacity:0;transition:opacity .35s; font-family:var(--m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#5A5A66} .deg-view.is-lost .lost{opacity:1} /* службова рамка поверх кадру — вона ніколи не деградує */ .deg-hud{position:absolute;inset:0;z-index:4;pointer-events:none; font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase} .deg-hud span{position:absolute;padding:4px 6px;background:rgba(10,10,12,.78)} .deg-hud .res{left:8px;top:8px;color:#F4F3EF} .deg-hud .tc{right:8px;top:8px;color:#B8B8C2} .deg-hud .st{left:8px;bottom:8px;color:#B8B8C2} .deg-hud .st.on{color:#72FF00} .deg-bar{height:3px;background:var(--night3);position:relative;overflow:hidden} .deg-bar i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--field);transition:width .3s linear} .deg-bar.on i{background:var(--signal)} .deg-cell p{font-size:14.5px;line-height:1.5;margin:0} @media(max-width:760px){.deg{grid-template-columns:1fr}} /* ── 6. Компресійний збій на перемиканні (короткий, семантичний) ── */ @media(prefers-reduced-motion:no-preference){ .pk-panel.on{animation:macroblock .18s steps(3) 1} @keyframes macroblock{ 0%{clip-path:inset(0 0 62% 0);transform:translateX(-6px);filter:saturate(2.4) contrast(1.5)} 40%{clip-path:inset(38% 0 22% 0);transform:translateX(5px)} 70%{clip-path:inset(70% 0 0 0);transform:translateX(-3px)} 100%{clip-path:inset(0 0 0 0);transform:none;filter:none} } } /* ── shop: розміри, кошик, checkout ── */ .size-row{display:flex;gap:6px;margin:10px 0 4px} .size-row button{font-family:var(--m);font-size:11px;letter-spacing:.1em;background:none; border:1px solid var(--rule);color:var(--muted);padding:6px 11px;cursor:pointer;transition:.2s} .size-row button:hover{border-color:#3E3E4C} .size-row button.on{border-color:var(--field);color:var(--ink);background:rgba(123,47,255,.16)} .btn.buy{cursor:pointer} .cart-fab{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:120; font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer; background:var(--field);border:1px solid var(--field);color:#fff;padding:14px 20px; display:inline-flex;gap:10px;align-items:center;box-shadow:0 8px 30px rgba(123,47,255,.35);transition:.2s} .cart-fab[hidden]{display:none} /* display:flex вище перебиває атрибут hidden — «кошик 0» висів на порожньому кошику */ .cart-fab:hover{background:var(--field-deep)} .cart-fab b{background:#0A0A0C;color:#fff;font-weight:600;min-width:22px;height:22px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;font-size:11px} .cart-panel{position:fixed;inset:0;z-index:160;background:rgba(var(--veil),.72);display:none} .cart-panel.open{display:block} .cart-inner{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--night2); border-left:1px solid var(--rule);padding:clamp(20px,3vw,30px);overflow:auto; display:flex;flex-direction:column;gap:16px} .cart-head{display:flex;justify-content:space-between;align-items:center} .cart-close{background:none;border:1px solid var(--rule);color:var(--ink);width:38px;height:38px; cursor:pointer;transition:.2s} .cart-close:hover{border-color:var(--field);background:rgba(123,47,255,.14)} .cart-item{display:flex;justify-content:space-between;gap:12px;align-items:center; border-bottom:1px solid var(--rule);padding:10px 0;font-size:14.5px} .cart-item .nm{color:var(--ink)} .cart-item .mono{font-size:11px} .cart-qty{display:inline-flex;align-items:center;gap:9px} .cart-qty button{background:none;border:1px solid var(--rule);color:var(--ink);width:27px;height:27px; cursor:pointer;font-family:var(--m);transition:.2s} .cart-qty button:hover{border-color:var(--field)} .cart-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:2px} .cart-total b{font-family:var(--d);font-size:24px;font-weight:800} /* поля кошика успадковують .form-lite; тут лише щільніші відступи під вузьку панель */ #cart-form{gap:13px} #cart-form .fl-field textarea{min-height:64px} #cart-form .btn{cursor:pointer;align-self:flex-start;margin-top:2px} .cart-note{text-transform:none;letter-spacing:.02em;line-height:1.5} .cart-empty{color:var(--muted);font-size:14.5px} .panel h3,.when-card h3,.pk-main h3,.ai-hero-t,.thesis,.reach-word,.j-title,.fw-floors .n{ overflow-wrap:break-word} .ai-hero-d,.chan-s,.j-sub,.pk-list li{max-width:100%} .lead,.article p,.wp-desc p{overflow-wrap:break-word} @media(max-width:520px){ .wp-creds{grid-template-columns:1fr} .home-shots{gap:12px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .rv,.js-rv .rv{opacity:1!important;transform:none!important} .hero-media video{display:none} .hero-media img.fallback{display:block} } .hero-media img.fallback{display:none} @media(prefers-reduced-motion:reduce){.hero-media img.fallback{display:block}} /* ═══════════════════════════════════════════════════ ВАКАНСІЇ · СТІКЕРИ НА ДВЕРЯХ (join.html + en/join.html) Метафора дому вже в бренді, тому вакансія тут — не картка в сітці, а друковане оголошення, наліплене на двері: криво на пару градусів, тінь щільна біля краю паперу й м'яка далі, в двох стікерів відклеївся куточок. Наведення / фокус — стікер вирівнюється й підіймається, ніби його притиснули пальцем. Кроки «як це працює» — та сама логіка, але дрібнішим форматом: ієрархія тримається на розмірі наліпки, не на кольорі. Ніяких нових кольорів: усе з наявних змінних. Тіней у файлі токенами не було — три нові живуть тут, у межах блоку, і перемикаються разом з темою. ═══════════════════════════════════════════════════ */ .stk-grid,.stk-mini-grid{ --stk-face:linear-gradient(168deg,var(--night3),var(--night2) 62%); /* контактна лінія біля краю + коротка напівтінь + довга м'яка */ --stk-sh:0 1px 1px rgba(0,0,0,.55),0 3px 6px -1px rgba(0,0,0,.4),0 16px 34px -14px rgba(0,0,0,.7); --stk-sh-up:0 2px 2px rgba(0,0,0,.5),0 10px 18px -4px rgba(0,0,0,.42),0 34px 56px -20px rgba(0,0,0,.75); --stk-sh-s:0 1px 1px rgba(0,0,0,.5),0 8px 16px -10px rgba(0,0,0,.66); --stk-fold-sh:drop-shadow(-1px -1px 2px rgba(0,0,0,.5)); } /* На папері та сама тінь чорним стає брудом — світла пара тримається на кольорі чорнила (--ink #12121A) і значно нижчій щільності. */ :root[data-theme="light"] .stk-grid,:root[data-theme="light"] .stk-mini-grid{ --stk-face:linear-gradient(168deg,var(--night2),var(--night3) 96%); --stk-sh:0 1px 1px rgba(18,18,26,.2),0 3px 6px -1px rgba(18,18,26,.13),0 16px 34px -14px rgba(18,18,26,.32); --stk-sh-up:0 2px 2px rgba(18,18,26,.18),0 10px 18px -4px rgba(18,18,26,.17),0 34px 56px -20px rgba(18,18,26,.36); --stk-sh-s:0 1px 1px rgba(18,18,26,.18),0 8px 16px -10px rgba(18,18,26,.3); --stk-fold-sh:drop-shadow(-1px -1px 2px rgba(18,18,26,.26)); } .stk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px); /* повороти виносять кути за межі рядка — лишаємо їм повітря */ padding:12px 0 16px} @media(max-width:960px){.stk-grid{grid-template-columns:1fr 1fr}} @media(max-width:640px){.stk-grid{grid-template-columns:1fr}} .stk-grid>*,.stk-mini-grid>*{min-width:0} .stk{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px; border:1px solid var(--rule);background:var(--stk-face);box-shadow:var(--stk-sh); padding:clamp(22px,2.6vw,30px);container-type:inline-size; transition:rotate .2s cubic-bezier(.2,.7,.2,1),translate .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease,border-color .2s ease} /* кут у кожного свій — рівних наліпок не буває */ .stk:nth-child(1){rotate:-2.2deg} .stk:nth-child(2){rotate:1.4deg} .stk:nth-child(3){rotate:-.9deg} .stk:nth-child(4){rotate:.7deg} .stk:nth-child(5){rotate:-1.6deg} .stk:hover,.stk:focus-visible{rotate:0deg;translate:0 -4px; box-shadow:var(--stk-sh-up);border-color:var(--field);z-index:3} /* сигнальна смуга по краю паперу — та сама мова, що й у решті сайту */ .stk::after{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px; background:var(--signal);transform:scaleY(0);transform-origin:bottom; transition:transform .26s cubic-bezier(.2,.7,.2,1)} .stk:hover::after,.stk:focus-visible::after{transform:scaleY(1)} /* ярлик угорі наліпки: 01 · КРЕАТИВ */ .stk-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:7px; font-family:var(--m);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);border:1px solid var(--rule);padding:5px 10px; transition:border-color .2s ease,color .2s ease} .stk-tag b{font-weight:500;color:var(--signal)} .stk:hover .stk-tag,.stk:focus-visible .stk-tag{border-color:var(--field);color:var(--ink)} .stk-n{font-family:var(--d);font-weight:800;text-transform:uppercase;letter-spacing:-.02em; font-size:clamp(19px,4.4cqw,30px);line-height:1.04;margin:6px 0 0;color:var(--ink); overflow-wrap:break-word} .stk p{margin:4px 0 0;font-size:15px;line-height:1.6} .stk-crit{list-style:none;margin:auto 0 0;padding:14px 0 0;display:flex;flex-wrap:wrap;gap:7px} .stk-crit li{font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);border:1px solid var(--rule);padding:5px 9px} .stk-go{margin-top:14px;font-family:var(--m);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--signal)} .stk-go i{font-style:normal;display:inline-block;transition:transform .22s} .stk:hover .stk-go i,.stk:focus-visible .stk-go i{transform:translateX(4px)} /* ── відклеєний куточок ── Ставиться розміткою (), а не на всі картки: у кожної він перетворився б на візерунок. Два трикутники: верхній правий — паперу вже немає, крізь нього видно двері; нижній лівий — сам загин, спід аркуша. drop-shadow іде після clip-path, тому тінь лягає по формі трикутника, а не по квадрату. */ .stk-fold{position:absolute;top:-1px;right:-1px;width:clamp(26px,9cqw,38px);aspect-ratio:1; pointer-events:none} .stk-fold::before,.stk-fold::after{content:"";position:absolute;inset:0} .stk-fold::before{background:var(--night);clip-path:polygon(0 0,100% 0,100% 100%)} .stk-fold::after{background:linear-gradient(225deg,var(--night3),var(--night2) 78%); clip-path:polygon(0 0,0 100%,100% 100%);filter:var(--stk-fold-sh)} /* ── режисери: не вакансія, а постійно відчинені двері ── */ .stk-wide{grid-column:1/-1;flex-direction:row;align-items:flex-start; gap:clamp(20px,4vw,54px);border-style:dashed;margin-top:22px} @media(max-width:820px){.stk-wide{flex-direction:column;gap:16px}} .stk-wide>div:first-child{flex:1 1 34%;min-width:min(100%,240px)} .stk-wide>div:last-child{flex:1 1 66%;min-width:0} .stk-wide .stk-n{font-size:clamp(22px,3.2vw,40px)} .stk-wide .stk-go{display:block;margin-top:18px} .stk-open{display:inline-flex;align-items:center;gap:8px;font-family:var(--m);font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:var(--signal)} .stk-open::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal); box-shadow:0 0 8px var(--signal);animation:pulse 2.4s infinite} /* ── штамп ── Єдиний круглий акцент на сторінці. Другого такого немає навмисно: два штампи перетворюють оголошення на стікерпак. */ .stk-stamp{display:block;width:clamp(104px,34cqw,140px);height:auto;margin:20px 0 4px; color:var(--signal);rotate:-8deg} .stk-stamp circle{fill:none;stroke:currentColor} .stk-stamp text{fill:currentColor} .stk-stamp .ring{font-family:var(--m);font-weight:500;font-size:8.6px;letter-spacing:.3em; text-transform:uppercase} .stk-stamp .core{font-family:var(--d);font-weight:800;font-size:15px;letter-spacing:-.01em} .stk-stamp .sub{font-family:var(--m);font-size:7.4px;letter-spacing:.24em;text-transform:uppercase} /* ── дрібні наліпки: як це працює ── */ .stk-mini-grid{display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,20px);padding:10px 0 14px} @media(max-width:960px){.stk-mini-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.stk-mini-grid{grid-template-columns:1fr}} /* не посилання — тому без hover-афордансу: рухається тільки те, що клікається */ .stk-mini{position:relative;background:var(--stk-face);border:1px solid var(--rule); box-shadow:var(--stk-sh-s);padding:20px 22px} .stk-mini:nth-child(1){rotate:-1.2deg} .stk-mini:nth-child(2){rotate:.9deg} .stk-mini:nth-child(3){rotate:-.6deg} .stk-mini:nth-child(4){rotate:1.1deg} .stk-mini .num{font-size:32px;display:block} .stk-mini h3{font-family:var(--d);font-weight:700;font-size:17px;line-height:1.15; margin:10px 0 8px;color:var(--ink);overflow-wrap:break-word} .stk-mini p{font-size:14.5px;line-height:1.55;margin:0} /* На 375px нахил на 2° читається як зламана верстка, а не як наліпка: кут лишаємо, але вдвічі тихіший. */ @media(max-width:640px){ .stk:nth-child(1){rotate:-1deg} .stk:nth-child(2){rotate:.8deg} .stk:nth-child(3){rotate:-.6deg} .stk:nth-child(4){rotate:.5deg} .stk:nth-child(5){rotate:-.7deg} .stk-mini:nth-child(1){rotate:-.6deg} .stk-mini:nth-child(2){rotate:.5deg} .stk-mini:nth-child(3){rotate:-.4deg} .stk-mini:nth-child(4){rotate:.6deg} .stk-stamp{width:clamp(96px,30vw,120px)} } /* Глобальний reduce вище знімає transition, але не сам поворот — тут стікери стають рівними картками. */ @media(prefers-reduced-motion:reduce){ .stk,.stk-mini,.stk-stamp{rotate:none!important;translate:none!important} } /* ═══ СТВОРЕННЯ · стадії в кадрах ═══════════════════════════════════ Смуга кадрів, яка показує роботу замість того, щоб її описувати: папір → рух → ефір. Манера кадрів навмисно різна (знімок на телефон, змазаний кадр, чиста зйомка) — так виглядає день студії, а не стокова добірка з одного пресета. Використовується на головній і скрізь, де треба показати процес. */ .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .strip figure{position:relative;margin:0;overflow:hidden;background:var(--night3)} .strip img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; filter:saturate(.94) contrast(1.03)} /* Підпис лежить НА кадрі, тому світлий у обох темах: він читається проти власного затемнення знімка, а не проти фону сторінки — те саме правило, що й для .deg-hud. */ .strip figcaption{ position:absolute;left:0;right:0;bottom:0; display:flex;gap:9px;align-items:baseline;padding:26px 12px 10px; font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:rgba(244,243,239,.92); background:linear-gradient(180deg,transparent,rgba(10,10,12,.88))} .strip figcaption b{color:var(--signal);font-weight:500} .strip--2{grid-template-columns:repeat(2,1fr)} @media(max-width:760px){ .strip{grid-template-columns:1fr} .strip img{aspect-ratio:16/10} } /* Одиночний кадр у потоці сторінки: та сама рамка, що й у смузі, але на всю ширину колонки. */ .shot-full{position:relative;margin:clamp(26px,4vw,44px) 0 0;overflow:hidden;background:var(--night3)} .shot-full img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover; filter:saturate(.94) contrast(1.03)} .shot-full figcaption{ position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px; font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:rgba(244,243,239,.92); background:linear-gradient(180deg,transparent,rgba(10,10,12,.88))} @media(max-width:760px){ .shot-full img{aspect-ratio:4/3} }