/* Ortus · презентация /prezentaciya/: экраны-сторис по КП. Карта — «6 Сайт/Карта сцен — презентация.md», канон — «6 Сайт/КАНОН.md». Плоско: без теней, свечения, стекла и скруглений (кроме точки); одна янтарная вещь на экране. Сцена .dk-stage — контейнер размеров (cqw/cqh): на телефоне весь экран, на широком окне кадр 16:9 по центру. data-o="p" — вертикальная раскладка, data-o="l" — горизонтальная. Стили экранов — src/deck/screens/NN.css. */ /* ── тона экранов (свет по часам) ─────────────────────────────────────────────────────── */ .dk-s, .dk { --bg:#0E1116; --fg:#F4F5F6; --soft:#B8C0CC; --mute:#8A93A3; --line:#2A323E; --line2:#3A4350; --acc:#FFB23F; --cell:#1B212B; } [data-tone="graph"] { --bg:#1B212B; --fg:#F4F5F6; --soft:#B8C0CC; --mute:#8A93A3; --line:#2F3845; --line2:#46505E; --acc:#FFB23F; --cell:#131820; } [data-tone="day"] { --bg:#F4F5F6; --fg:#0E1116; --soft:#3A404A; --mute:#5A616C; --line:#DDE1E6; --line2:#C3C9D1; --acc:#C97A00; --cell:#E7EAEE; } [data-tone="photo"] { --bg:#0E1116; --fg:#F4F5F6; --soft:#C9D0DA; --mute:#9AA3B2; --line:rgba(244,245,246,.18); --line2:rgba(244,245,246,.32); --acc:#FFB23F; } /* ── страница ─────────────────────────────────────────────────────────────────────────── */ .dkb { margin:0; background:#0E1116; color:#F4F5F6; } .js .dkb { position:fixed; inset:0; overflow:hidden; overscroll-behavior:none; } .dk { --ease:cubic-bezier(.22,.8,.2,1); --io:cubic-bezier(.65,0,.35,1); } .js .dk { position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); transition:background-color .5s var(--ease); -webkit-tap-highlight-color:transparent; } .dk-stage { position:relative; flex:none; width:var(--sw,100vw); height:var(--sh,100dvh); container:dk / size; } .js .dk-stage { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transform-origin:50% 50%; } .js .dk-stage img { -webkit-touch-callout:none; -webkit-user-drag:none; } .js .dk-stage { overflow:hidden; touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; } .js .dk-stage a, .js .dk-stage button, .js .dk-stage input, .js .dk-stage textarea { user-select:auto; -webkit-user-select:auto; } /* ── экраны ───────────────────────────────────────────────────────────────────────────── */ .dk-s { position:relative; background:var(--bg); color:var(--fg); overflow:hidden; } .js .dk-s { position:absolute; inset:0; visibility:hidden; opacity:0; transform:translateX(var(--from,3%)); transition:opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .6s; } .js .dk-s.is-cur { visibility:visible; opacity:1; transform:none; transition:opacity .45s var(--ease), transform .6s var(--ease), visibility 0s; z-index:2; } .js .dk-s.is-out { transform:translateX(var(--to,-3%)); z-index:1; } .js .dk-s.no-tr, .js .dk-s.no-tr * { transition:none !important; } html:not(.js) .dk-s { min-height:100vh; border-bottom:1px solid #2A323E; } /* поле экрана: под шапкой и над шкалой дня */ .dk-in { position:absolute; inset:0; display:flex; flex-direction:column; padding:calc(var(--uit) + 2cqh) var(--pad) calc(var(--uib) + 2cqh); } .dk-stage { --pad:6.2cqw; --uit:calc(env(safe-area-inset-top,0px) + 58px); --uib:calc(env(safe-area-inset-bottom,0px) + 50px); } .dk-stage[data-o="l"] { --pad:5.2cqw; --uit:max(64px,8.6cqh); --uib:max(54px,8.4cqh); } html:not(.js) .dk-in { position:relative; min-height:100vh; padding:72px 6vw 56px; } /* ── типографика: «в свете» — главное освещено, контекст приглушён ─────────────────── */ .dk-s { font-family:var(--sans); } .dk-h { font-weight:500; font-size:7.4cqw; line-height:1.08; letter-spacing:-.035em; text-wrap:balance; color:var(--fg); } .dk-hx { font-weight:500; font-size:11.4cqw; line-height:.98; letter-spacing:-.045em; text-wrap:balance; } .dk-h .dk-mute, .dk-hx .dk-mute { color:var(--mute); } .dk-lead { font-size:max(16px,4.2cqw); line-height:1.45; color:var(--soft); text-wrap:pretty; } .dk-t { font-size:max(15px,3.85cqw); line-height:1.45; color:var(--soft); text-wrap:pretty; } .dk-t b, .dk-lead b { font-weight:500; color:var(--fg); } .dk-m { font-family:var(--mono); font-size:max(11px,3.05cqw); line-height:1.4; color:var(--mute); font-variant-numeric:tabular-nums; letter-spacing:0; } .dk-num { font-weight:500; font-size:13cqw; line-height:.95; letter-spacing:-.045em; font-variant-numeric:tabular-nums; color:var(--fg); } .dk-note { font-family:var(--sans); font-size:max(12.5px,3.2cqw); line-height:1.4; color:var(--mute); letter-spacing:0; } [data-o="l"] .dk-h { font-size:3.25cqw; } [data-o="l"] .dk-hx { font-size:5.4cqw; } [data-o="l"] .dk-lead { font-size:max(18px,1.4cqw); } [data-o="l"] .dk-t { font-size:max(17px,1.18cqw); } [data-o="l"] .dk-m { font-size:max(11px,.82cqw); } [data-o="l"] .dk-num { font-size:5.2cqw; } [data-o="l"] .dk-note { font-size:max(13px,.9cqw); } /* ── элементы Ortus ───────────────────────────────────────────────────────────────────── */ .dk-hz { display:block; height:1px; background:var(--line2); } .dk-dot { display:block; width:var(--ds,11px); height:var(--ds,11px); border-radius:50%; background:var(--acc); } [data-o="l"] .dk-dot { --ds:max(11px,.78cqw); } /* рамка с разрывом в верхней грани и точкой над разрывом (кольцо знака) */ .dk-gap { position:relative; border:1px solid var(--acc); border-top:0; } .dk-gap::before { content:""; position:absolute; left:-1px; right:-1px; top:0; height:1px; background:linear-gradient(to right, var(--acc) calc(50% - 13px), transparent calc(50% - 13px) calc(50% + 13px), var(--acc) calc(50% + 13px)); } .dk-gap::after { content:""; position:absolute; left:50%; top:-15px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--acc); } /* скриншот демо-панели: тонкая рамка, без теней и скруглений */ .dk-shot { position:relative; display:block; border:1px solid var(--line); background:var(--cell); overflow:hidden; } .dk-shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--op,left top); } .dk-cap { margin-top:8px; font-family:var(--sans); font-size:max(12.5px,3.2cqw); line-height:1.35; color:var(--mute); } [data-o="l"] .dk-cap { font-size:max(13px,.9cqw); } /* строки с волосяными линиями */ .dk-rows > li { border-top:1px solid var(--line); padding:1.15cqh 0; } .dk-rows > li:last-child { border-bottom:1px solid var(--line); } /* фото мудборда фоном, плоское затемнение */ .dk-ph { position:absolute; inset:0; z-index:0; } .dk-ph picture { display:block; width:100%; height:100%; } .dk-ph img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--op,center); } .dk-ph::after { content:""; position:absolute; inset:0; background:rgba(14,17,22,var(--dim,.35)); } .dk-ph + .dk-in, .dk-in.over { z-index:1; } .dk-vis { position:absolute; z-index:1; right:var(--pad); bottom:calc(var(--uib) - 6px); font-family:var(--sans); font-size:12px; color:rgba(244,245,246,.6); } /* кнопки */ .dk-btns { display:flex; flex-wrap:wrap; gap:10px; } .dk-b1, .dk-b2 { display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:0 20px; font:500 max(15px,3.9cqw)/1 var(--sans); letter-spacing:-.01em; text-decoration:none; cursor:pointer; border:1px solid var(--fg); } .dk-b1 { background:var(--fg); color:var(--bg); } .dk-b2 { background:transparent; color:var(--fg); border-color:var(--line2); } .dk-b2 small { font:400 12px/1 var(--mono); color:var(--mute); } .dk-b1:hover { background:var(--soft); border-color:var(--soft); } .dk-b2:hover { border-color:var(--fg); } [data-o="l"] .dk-b1, [data-o="l"] .dk-b2 { font-size:max(15px,1.1cqw); min-height:max(48px,4.6cqh); } /* ── появление на экране: [data-a] + --d (задержка). Без JS всё видно сразу ───────────── */ .js .dk-s [data-a] { opacity:0; transition:opacity .7s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s), clip-path 1s var(--ease) var(--d,0s); } .js .dk-s [data-a="rise"] { transform:translateY(14px); } .js .dk-s [data-a="left"] { transform:translateX(-14px); } .js .dk-s [data-a="right"] { transform:translateX(14px); } .js .dk-s [data-a="draw"] { opacity:1; transform:scaleX(0); transform-origin:left center; } .js .dk-s [data-a="drawr"] { opacity:1; transform:scaleX(0); transform-origin:right center; } .js .dk-s [data-a="drawy"] { opacity:1; transform:scaleY(0); transform-origin:center top; } .js .dk-s [data-a="wipe"] { opacity:1; clip-path:inset(0 100% 0 0); } .js .dk-s [data-a="pop"] { transform:scale(.4); } .js .dk-s.is-on [data-a] { opacity:1; transform:none; } .js .dk-s.is-on [data-a="wipe"] { clip-path:inset(0 0 0 0); } /* слова заголовка поднимаются из-под маски: data-words на элементе, deck.js оборачивает слова */ .dk-wm { display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .14em; margin:0 -.04em -.14em; } .js .dk-w { display:inline-block; transform:translateY(112%); transition:transform .85s var(--ease) calc(var(--d,0s) + var(--i,0) * 42ms); } .js .dk-s.is-on .dk-w { transform:none; } /* набор текста: data-type, буквы открывает deck.js */ .js [data-type] .dk-c { visibility:hidden; } .js [data-type] .dk-c.is-v { visibility:visible; } /* ── интерфейс поверх экранов ─────────────────────────────────────────────────────────── */ .dk-ui { --uf:#F4F5F6; --um:rgba(244,245,246,.62); --ud:rgba(244,245,246,.2); position:absolute; inset:0; z-index:5; pointer-events:none; color:var(--uf); } .dk[data-tone="day"] .dk-ui { --uf:#0E1116; --um:rgba(14,17,22,.6); --ud:rgba(14,17,22,.16); } html:not(.js) .dk-ui { display:none; } .dk-bar { position:absolute; left:var(--pad); right:var(--pad); top:calc(env(safe-area-inset-top,0px) + 12px); display:flex; gap:3px; } .dk-bar i { flex:1; height:2px; background:var(--ud); transition:background-color .3s; } .dk-bar i.is-past { background:var(--um); } .dk-bar i.is-cur { background:var(--uf); } .dk-bar i.ch { margin-left:5px; } .dk-top { position:absolute; left:var(--pad); right:var(--pad); top:calc(env(safe-area-inset-top,0px) + 24px); display:flex; align-items:center; gap:10px; font-size:13px; line-height:1; } .dk-logo { pointer-events:auto; display:block; width:58px; color:var(--uf); margin-right:auto; } .dk-logo svg { width:100%; height:auto; display:block; } .dk-logo .dot { fill:#FFB23F; } .dk-top .dk-ui-ch { color:var(--um); letter-spacing:-.005em; } .dk-top .dk-ui-num, .dk-top .dk-ui-t { font-size:11.5px; color:var(--um); } .dk-top .dk-ui-t { color:var(--uf); min-width:5ch; text-align:right; } [data-o="l"] .dk-top { font-size:14px; } [data-o="l"] .dk-logo { width:66px; } /* шкала дня внизу: 00:00–24:00, момент экрана */ .dk-scale { position:absolute; left:var(--pad); right:var(--pad); bottom:calc(env(safe-area-inset-bottom,0px) + 22px); height:1px; background:var(--ud); } .dk-scale-l i { position:absolute; top:0; width:1px; height:5px; background:var(--ud); } .dk-scale-l b { position:absolute; top:9px; transform:translateX(-50%); font:400 9.5px/1 var(--mono); color:var(--um); } .dk-scale-l b:first-of-type { transform:none; } .dk-scale-l b:last-of-type { transform:translateX(-100%); } .dk-now { position:absolute; top:-9px; left:var(--now,0%); width:1px; height:9px; background:var(--uf); transition:left .7s var(--ease), opacity .3s; } .dk-now span { position:absolute; bottom:12px; left:0; transform:translateX(-50%); font-size:10.5px; color:var(--uf); white-space:nowrap; } .dk-scale.is-none .dk-now { opacity:0; } /* края «Назад / Дальше» на широком экране с мышью */ .dk-edge { position:absolute; top:50%; padding:8px 0; font:400 12px/1 var(--mono); color:var(--um); opacity:0; transition:opacity .25s; } .dk-edge-p { left:calc(var(--pad) * .35); } .dk-edge-n { right:calc(var(--pad) * .35); } @media (hover:hover) and (pointer:fine) { .dk-stage.h-p .dk-edge-p, .dk-stage.h-n .dk-edge-n { opacity:1; } .js .dk-stage { cursor:pointer; } } .dk-stage.is-first .dk-edge-p, .dk-stage.is-last .dk-edge-n { display:none; } /* кнопки для клавиатуры: видны при фокусе */ .dk-nav { position:fixed; left:16px; bottom:16px; z-index:20; display:flex; gap:8px; } .dk-btn { position:absolute; left:-9999px; padding:10px 14px; background:#F4F5F6; color:#0E1116; border:0; font:500 14px/1 var(--sans); } .dk-btn:focus-visible { position:static; } html:not(.js) .dk-nav { display:none; } .dk-live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* ── вступление: ночное табло → точка → знак ──────────────────────────────────────────── */ .dki { position:absolute; inset:0; z-index:8; background:#0E1116; color:#F4F5F6; pointer-events:none; } html:not(.js) .dki, .dki[hidden] { display:none; } .dki-b { position:absolute; left:var(--pad); right:var(--pad); top:calc(var(--uit) + 13cqh); display:grid; gap:0; margin:0; padding:0; list-style:none; } .dki-r { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"t s" "e e"; column-gap:12px; row-gap:6px; padding:10px 0 12px; border-top:1px solid #2A323E; opacity:0; } .dki-r:last-child { border-bottom:1px solid #2A323E; } .dki-t { grid-area:t; display:flex; gap:2px; align-items:center; font-size:max(16px,5cqw); color:#F4F5F6; } .dki-t b { display:inline-grid; place-items:center; width:1.18em; height:1.5em; background:#1B212B; font-weight:400; position:relative; } .dki-t b::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#0E1116; } .dki-t i { font-style:normal; color:#8A93A3; padding:0 1px; } .dki-src { grid-area:s; align-self:center; font-size:max(11px,3.1cqw); color:#8A93A3; } .dki-e { grid-area:e; font-size:max(15px,4.2cqw); line-height:1.3; color:#B8C0CC; letter-spacing:-.01em; } .dki-lit .dki-t, .dki-lit .dki-src, .dki-lit .dki-e { transition:color .2s; } .dki.lit .dki-lit .dki-t, .dki.lit .dki-lit .dki-src, .dki.lit .dki-lit .dki-e { color:#FFB23F; } .dki.lit .dki-lit .dki-e { font-weight:500; } .dki-hz { position:absolute; left:0; right:0; top:var(--hzy,58%); height:1px; background:#3A4350; transform:scaleX(0); transform-origin:var(--hzx,50%) 50%; } .dki-dot { position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#FFB23F; opacity:0; } [data-o="l"] .dki-b { left:22cqw; right:22cqw; top:calc(var(--uit) + 6cqh); } [data-o="l"] .dki-r { grid-template-columns:auto 11cqw 1fr; grid-template-areas:"t s e"; padding:1.2cqh 0; } [data-o="l"] .dki-t { font-size:max(16px,1.55cqw); } [data-o="l"] .dki-src { font-size:max(11px,.85cqw); } [data-o="l"] .dki-e { font-size:max(15px,1.35cqw); align-self:center; } /* ── лист с формой («Оставить контакт») ───────────────────────────────────────────────── */ .dk-sheet { position:fixed; inset:0; z-index:60; display:grid; align-items:end; justify-items:center; background:rgba(14,17,22,.72); } .dk-sheet[hidden] { display:none; } .dk-sheet-in { position:relative; width:min(640px,100%); max-height:92dvh; overflow:auto; background:#0E1116; border-top:1px solid #2A323E; padding:52px 0 calc(env(safe-area-inset-bottom,0px) + 8px); } .dk-sheet .lf { border-width:1px 0 0; } .dk-sheet-x { position:absolute; right:16px; top:14px; padding:8px 0; background:none; border:0; color:#B8C0CC; font:400 13px/1 var(--mono); cursor:pointer; } @media (min-width:700px) { .dk-sheet { align-items:center; } .dk-sheet-in { border:1px solid #2A323E; padding-top:52px; } } @media (prefers-reduced-motion:reduce) { .js .dk-s, .js .dk-s [data-a], .js .dk-w, .dk-now, .js .dk { transition:none !important; } .js .dk-s [data-a] { opacity:1; transform:none; clip-path:none; } .js .dk-w { transform:none; } } /* обложка: свой большой знак, поэтому маленький в шапке скрыт; во время вступления интерфейс спрятан */ .dk-stage.is-first .dk-logo { visibility:hidden; } .dk-ui { transition:opacity .6s var(--ease, ease); } .dk-stage.is-intro .dk-ui { opacity:0; } /* плашка cookie на презентации: компактная, над шкалой дня; во время вступления не показывается */ .dkb .ck { left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom,0px) + 10px); width:auto; max-width:520px; margin:0 auto; gap:10px; padding:12px 14px; font-size:12.5px; line-height:1.45; } .dkb .ck p { font-size:12.5px; } .dkb .ck-b button { min-height:36px; padding:0 14px; font-size:13px; } .dkb.dk-introing .ck, .dkb.dk-ck-off .ck { display:none; } /* без JS картинки с data-src не показываем (рядом лежит