/* * motion-kit.css — layouts for effects P01…P36 + production scene system. * Effect layouts use container query units (cqw/cqh) of .mk-root, so the same markup works in a * 400px catalog card and in a 100vh sticky stage. Palazzo designs on a 1920 frame (--u = 100vw/1920); * here 1 design px = 100cqw/1920, e.g. the arch 600×760 = 31.25cqw × 39.58cqw. */ :root { --mk-paper: #ebe7e0; --mk-ink: #141112; --mk-ink2: #625b57; --mk-gold: #b4aca1; --mk-sand: #d9d3ca; --mk-wine: #401216; --mk-light: #f4f1ec; --mk-ease: cubic-bezier(.77, 0, .18, 1); --mk-caps: "Sofia XC", "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif; --mk-text: "Jost", system-ui, sans-serif; } /* ── F2. SCENE SYSTEM (production, = P01 across a page) ────────────────────────────── Each [data-mk-scene] is (k+2) screens tall and overlaps the previous by one screen; z-index grows so the later scene lies on top. Stage is sticky. JS MK.scenes() adds the curtain clip. */ @media (min-width: 1280px) { [data-mk-scene] { position: relative; height: calc((var(--k, 1) + 2) * 100vh); margin-top: -100vh; } [data-mk-scene]:first-child { margin-top: 0; } [data-mk-scene] > [data-mk-stage] { position: sticky; top: 0; height: 100vh; overflow: hidden; } } @media (max-width: 767px) { [data-mk-scene] { position: relative; height: calc((var(--k, 1) + 2) * 100svh); margin-top: -100svh; } [data-mk-scene]:first-child { margin-top: 0; } [data-mk-scene] > [data-mk-stage] { position: sticky; top: -1px; height: calc(100lvh + 1px); overflow: hidden; } } /* single-effect scroll scene made by MK.attach(el, id, "scroll") */ .mk-scene { position: relative; height: calc((var(--k, 2) + 1) * 100vh); } .mk-scene > .mk-stage { position: sticky; top: 0; height: 100vh; width: 100%; } /* ── ROOT & PRIMITIVES ─────────────────────────────────────────────────────────── */ .mk-root { position: relative; overflow: hidden; container-type: size; background: var(--mk-ink); color: var(--mk-light); font-family: var(--mk-text); } .mk-root * { box-sizing: border-box; } .mk-l { position: absolute; inset: 0; } .mk-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; } /* max-width: none — Tailwind's preflight (img { max-width: 100% }) silently capped the OVERSIZED parallax photos (.mk-ph .mk-img 120%) at 100%: the xPercent drift then opened a gap and the card showed the photo's square edge instead of its rounded corner (Riviera /v3 «Окружение», owner 23.09.2026 22:58 «скругление только слева»). */ .mk-root figure { margin: 0; } .mk-cap { position: absolute; left: 5cqw; bottom: 6cqh; margin: 0; z-index: 3; display: flex; flex-direction: column; gap: .4cqw; font-family: var(--mk-caps); text-transform: uppercase; letter-spacing: .02em; line-height: .95; text-shadow: 0 0 2cqw rgba(0,0,0,.35); } .mk-cap span { font-size: max(14px, 4.6cqw); } .mk-cap i { font-style: normal; font-family: var(--mk-text); text-transform: none; font-size: max(10px, 1.6cqw); opacity: .85; } .mk-lbl { margin: 0 0 1cqw; font-family: var(--mk-caps); text-transform: uppercase; letter-spacing: .12em; font-size: max(9px, 1.1cqw); color: var(--mk-gold); } .mk-h { margin: 0; font-family: var(--mk-caps); text-transform: uppercase; line-height: .95; font-size: max(16px, 4.2cqw); } .mk-p { margin: 1.2cqw 0 0; font-size: max(10px, 1.3cqw); line-height: 1.45; max-width: 36cqw; opacity: .85; } .mk-shade { background: linear-gradient(20deg, rgba(10,8,8,.72) 0%, rgba(10,8,8,.25) 45%, rgba(10,8,8,0) 70%); z-index: 2; pointer-events: none; } .mk-word { position: absolute; left: 3cqw; bottom: 2cqh; margin: 0; z-index: 2; white-space: nowrap; font-family: var(--mk-caps); text-transform: uppercase; font-size: 19cqw; line-height: .8; font-weight: 300; letter-spacing: -.01em; color: var(--mk-light); } .mk-word-mid { bottom: auto; top: 20cqh; color: #fff; z-index: 1; } /* P16: word sits BETWEEN sky and facade */ .mk-p16 .mk-fg { z-index: 2; } .mk-cap-r { left: auto; right: 5cqw; bottom: auto; top: 8cqh; text-align: right; align-items: flex-end; } /* P03 stepper */ .mk-p03 { background: var(--mk-paper); color: var(--mk-ink); } .mk-step-vis { position: absolute; top: 12cqh; bottom: 12cqh; left: 38cqw; width: 36cqw; overflow: hidden; } .mk-step-txt { position: absolute; left: 6cqw; top: 30cqh; width: 28cqw; } .mk-p03 .mk-big { position: absolute; top: 0; left: 0; } .mk-p03 .mk-big b { display: block; font-family: var(--mk-caps); font-size: 9cqw; line-height: .9; font-weight: 300; color: var(--mk-wine); } .mk-p03 .mk-big p { margin: .6cqw 0 0; font-family: var(--mk-caps); text-transform: uppercase; font-size: 3cqw; } .mk-rail { position: absolute; right: 5cqw; top: 22cqh; margin: 0; padding: 0 0 0 2.2cqw; list-style: none; font-size: max(9px, 1.2cqw); } .mk-rail li { margin: 0 0 1.6cqh; opacity: .45; transition: opacity .3s; white-space: nowrap; } .mk-rail li span { margin-right: .8cqw; font-family: var(--mk-caps); } .mk-rail li.on { opacity: 1; } .mk-rail .mk-rail-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(20,17,18,.15); opacity: 1; margin: 0; } .mk-rail .mk-rail-bar span { position: absolute; inset: 0; background: var(--mk-wine); transform-origin: top; margin: 0; } /* P04 flip caption */ .mk-flipbox { overflow: hidden; } /* P06 mask zoom: arch 600×760 on a 1920 frame */ .mk-p06, .mk-p10 { background: var(--mk-ink); } .mk-mask { position: absolute; left: calc(50cqw - 15.625cqw); top: calc(50cqh - 19.79cqw); width: 31.25cqw; height: 39.58cqw; overflow: hidden; border-radius: 15.625cqw 15.625cqw 0 0; will-change: transform; } .mk-mask-in { position: absolute; width: 100cqw; height: 100cqh; left: calc(15.625cqw - 50cqw); top: calc(19.79cqw - 50cqh); } /* P08 side text */ .mk-p08 { background: var(--mk-paper); color: var(--mk-ink); } .mk-side { position: absolute; left: 6cqw; top: 30cqh; width: 24cqw; z-index: 2; } .mk-side .mk-p { max-width: none; } /* P09 card row */ .mk-p09 { background: var(--mk-ink); } .mk-row { position: absolute; inset: 0; } .mk-card { position: absolute; top: calc(50cqh - 16cqw); width: 23cqw; height: 32cqw; overflow: hidden; } .mk-card0 { left: 6cqw; } .mk-card1 { left: 33cqw; border-radius: 50%; width: 23cqw; height: 23cqw; top: calc(50cqh - 11.5cqw); } .mk-card2 { left: 62cqw; border-radius: 11.5cqw 11.5cqw 0 0; } .mk-p09 .mk-big { z-index: 3; } /* photo-shaped box for the FLIP (effects.js P09 explains why): cover of the stage, centred by left/top — NOT by the CSS `translate` property: GSAP 3.12+ folds `translate` into its own transform and the explicit x/y of the FLIP wipe it */ .mk-p09 .mk-big > .mk-img.mk-ar { --bw: max(100cqw, calc(100cqh * var(--ar))); inset: auto; width: var(--bw); height: calc(var(--bw) / var(--ar)); max-width: none; left: calc(50cqw - var(--bw) / 2); top: calc(50cqh - var(--bw) / var(--ar) / 2); } /* P10 shrink to card + ribbon */ .mk-sh { overflow: hidden; z-index: 2; transform-origin: 50% 50%; } .mk-ribbon { position: absolute; left: 0; top: calc(50cqh - 14cqw); display: flex; gap: 4cqw; align-items: center; } .mk-fact { display: flex; align-items: center; gap: 2cqw; } .mk-fact p { margin: 0; display: flex; flex-direction: column; font-size: max(9px, 1.1cqw); color: var(--mk-gold); } .mk-fact b { white-space: nowrap; font-family: var(--mk-caps); font-weight: 300; font-size: 5cqw; color: var(--mk-light); } .mk-ph { position: relative; width: 22cqw; height: 28cqw; overflow: hidden; flex: none; } .mk-fact:nth-child(2) .mk-ph { border-radius: 50%; height: 22cqw; } .mk-fact:nth-child(3) .mk-ph { width: 32cqw; height: 20cqw; } .mk-ph .mk-img { width: 120%; left: -10%; } /* P12 panel */ .mk-p12 { background: var(--mk-ink); } .mk-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 45cqw; background: var(--mk-ink); z-index: 2; padding: 12cqh 5cqw; } /* P13 drum caption */ .mk-drum { position: absolute; left: 5cqw; bottom: 6cqh; margin: 0; height: 1.5em; overflow: hidden; z-index: 3; font-family: var(--mk-caps); text-transform: uppercase; font-size: max(12px, 2.4cqw); line-height: 1.5; } .mk-drum span { display: block; } /* P17 strip */ .mk-p17 { background: var(--mk-paper); } .mk-strip { position: absolute; top: calc(50cqh - 15cqw); left: 0; display: flex; gap: 3cqw; } .mk-strip .mk-ph { width: 27cqw; height: 30cqw; } .mk-strip .mk-ph:nth-child(even) { border-radius: 13.5cqw 13.5cqw 0 0; } /* P18 track */ .mk-p18 { background: var(--mk-paper); color: var(--mk-ink); } .mk-trackhead { position: absolute; left: 6cqw; top: 30cqh; z-index: 2; } .mk-track { position: absolute; top: calc(50cqh - 17cqw); left: 0; display: flex; gap: 2.5cqw; } .mk-tcard { position: relative; width: 25cqw; height: 34cqw; overflow: hidden; flex: none; } .mk-tcard figcaption { position: absolute; left: 1.5cqw; bottom: 1.5cqw; color: var(--mk-light); font-size: max(9px, 1.2cqw); display: flex; flex-direction: column; } .mk-tcard b { font-family: var(--mk-caps); font-weight: 300; font-size: 3.4cqw; } /* P19 wall */ .mk-p19 { background: var(--mk-ink); } .mk-wall { position: absolute; top: -10cqh; left: 0; display: flex; gap: 2cqw; height: 120cqh; } .mk-col { position: relative; display: flex; flex-direction: column; gap: 2cqw; width: 20cqw; flex: none; justify-content: center; } .mk-col .mk-img { position: relative; height: 44cqh; } /* P20/P29 copy */ .mk-p20 { background: var(--mk-wine); } .mk-copy { position: absolute; left: 6cqw; top: 18cqh; z-index: 3; } .mk-copy-b { top: auto; bottom: 8cqh; } .mk-nums { display: flex; gap: 4cqw; list-style: none; padding: 0; margin: 3cqh 0 0; font-size: max(9px, 1.1cqw); } .mk-nums li { display: flex; flex-direction: column; } .mk-nums b { font-family: var(--mk-caps); font-weight: 300; font-size: 5cqw; line-height: 1; } /* P21 lines */ .mk-lines { position: absolute; left: 5cqw; bottom: 8cqh; z-index: 2; } .mk-line { margin: 0; overflow: hidden; font-family: var(--mk-caps); text-transform: uppercase; font-size: max(12px, 2.6cqw); line-height: 1.05; } .mk-line span { display: inline-block; } .mk-line-xl { font-size: 13cqw; font-weight: 300; line-height: .9; } /* P22 counter */ .mk-p22 { background: var(--mk-wine); } .mk-counter { position: absolute; inset: 0; } .mk-num { position: absolute; left: 0; right: 0; top: 34cqh; text-align: center; margin: 0; } .mk-num b { display: block; font-family: var(--mk-caps); font-weight: 300; font-size: 14cqw; line-height: .9; } .mk-num span { font-size: max(10px, 1.6cqw); opacity: .8; } /* P23 split title + panel */ .mk-half { text-shadow: 0 0 3cqw rgba(0,0,0,.35); position: absolute; top: 38cqh; margin: 0; z-index: 2; font-family: var(--mk-caps); text-transform: uppercase; font-size: 11cqw; font-weight: 300; line-height: .9; } .mk-hl { left: 4cqw; } .mk-hr { right: 4cqw; } .mk-panel-b { position: absolute; left: 0; right: 0; bottom: 0; height: 26cqh; background: var(--mk-ink); z-index: 3; display: flex; justify-content: space-around; align-items: center; } .mk-panel-b p { margin: 0; display: flex; flex-direction: column; font-size: max(9px, 1.1cqw); color: var(--mk-gold); } .mk-panel-b b { font-family: var(--mk-caps); font-weight: 300; font-size: 5cqw; color: var(--mk-light); } /* P24 fan */ .mk-p24 { background: var(--mk-paper); color: var(--mk-ink); } .mk-fan { position: absolute; inset: 0; } .mk-fcard { position: absolute; left: calc(50cqw - 12cqw + (var(--i) - 1.5) * 9cqw); top: calc(50cqh - 16cqw); width: 24cqw; height: 32cqw; background: #fff; padding: 1cqw; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.18); } .mk-fcard .mk-img { position: relative; height: 72%; } .mk-fcard figcaption { font-size: max(9px, 1.1cqw); padding-top: .8cqw; display: flex; flex-direction: column; } .mk-fcard b { font-family: var(--mk-caps); font-size: 3.2cqw; font-weight: 400; } /* P25 collage */ .mk-p25 { background: var(--mk-wine); } .mk-chead { position: absolute; left: 0; right: 0; top: 40cqh; text-align: center; z-index: 2; } .mk-cc { position: absolute; width: 17cqw; height: 12cqw; overflow: hidden; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.3); } .mk-p0 { left: 5cqw; top: 8cqh; } .mk-p1 { right: 5cqw; top: 10cqh; } .mk-p2 { left: 8cqw; bottom: 10cqh; } .mk-p3 { right: 8cqw; bottom: 8cqh; } .mk-p4 { left: 40cqw; top: 3cqh; width: 14cqw; } .mk-p5 { left: 44cqw; bottom: 4cqh; width: 14cqw; } /* P26/P27 svg */ .mk-p26 { background: var(--mk-ink); } .mk-svg { position: absolute; left: 5cqw; right: 5cqw; top: 15cqh; width: 90cqw; height: 70cqh; overflow: visible; } .mk-curve-bg { fill: none; stroke: rgba(244,241,236,.12); stroke-width: 2; vector-effect: non-scaling-stroke; } .mk-curve { fill: none; stroke: var(--mk-gold); stroke-width: 2.5; vector-effect: non-scaling-stroke; } .mk-pt { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; font-size: max(9px, 1.1cqw); margin-left: 0; } .mk-pt { transform: translate(-50%, calc(-100% + .5cqw)); } .mk-pt i { width: 1cqw; height: 1cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: var(--mk-light); margin-top: .6cqw; } .mk-pt b { font-family: var(--mk-caps); font-weight: 300; font-size: 3cqw; } .mk-p27 { background: #1b1718; } .mk-map { top: 5cqh; height: 90cqh; left: 5cqw; } .mk-arc { fill: none; stroke: var(--mk-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .mk-home circle:last-of-type { fill: var(--mk-light); } .mk-ring-pulse { fill: none; stroke: var(--mk-light); stroke-width: 1; opacity: .6; transform-box: fill-box; transform-origin: center; animation: mk-pulse 2.4s ease-out infinite; } @keyframes mk-pulse { 0% { transform: scale(.4); opacity: .8 } 100% { transform: scale(1.6); opacity: 0 } } .mk-pin circle { fill: var(--mk-gold); } .mk-map text { fill: var(--mk-light); font-family: var(--mk-caps); font-size: 26px; text-transform: uppercase; } /* P28 years ribbon */ .mk-years { position: absolute; left: 0; top: 36cqh; display: flex; gap: 8cqw; margin: 0; padding: 0; list-style: none; z-index: 3; white-space: nowrap; font-size: max(10px, 1.3cqw); } .mk-years li { display: flex; flex-direction: column; } .mk-years b { font-family: var(--mk-caps); font-weight: 300; font-size: 12cqw; line-height: .9; } /* P30 menu */ .mk-menubtn { position: absolute; right: 3cqw; top: 3cqw; z-index: 5; font: inherit; font-family: var(--mk-caps); text-transform: uppercase; letter-spacing: .1em; font-size: max(10px, 1.3cqw); color: var(--mk-light); background: rgba(20,17,18,.5); border: 1px solid rgba(244,241,236,.5); border-radius: 99px; padding: .6cqw 1.6cqw; cursor: pointer; } .mk-menu { background: var(--mk-paper); color: var(--mk-ink); z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; padding: 10cqh 6cqw; } .mk-menu p { margin: 0 0 1cqw; color: var(--mk-ink2); font-size: max(9px, 1.1cqw); text-transform: uppercase; letter-spacing: .1em; } .mk-menu a { display: block; font-family: var(--mk-caps); text-transform: uppercase; font-size: 4.4cqw; line-height: 1.05; } .mk-menu-pv { position: relative; overflow: hidden; border-radius: 20cqw 20cqw 0 0; } /* P31 roll + P32 sweep (demo) */ .mk-p31, .mk-p32 { background: var(--mk-paper); color: var(--mk-ink); display: flex; align-items: center; justify-content: center; } .mk-links { display: flex; flex-direction: column; gap: 2.5cqh; align-items: flex-start; } .mk-links a { font-family: var(--mk-caps); text-transform: uppercase; letter-spacing: .06em; font-size: max(14px, 3.4cqw); position: relative; } .mk-roll-m { display: inline-block; position: relative; overflow: hidden; vertical-align: top; } .mk-roll-a, .mk-roll-b { display: inline-block; } .mk-roll-b { position: absolute; left: 0; top: 0; transform: translateY(115%); } .mk-roll-demo { border-bottom: 1px solid currentColor; } .mk-sw i { position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; opacity: .75; } /* P31/P32 PRODUCTION (pure CSS, add via MK.rollLinks() or classes) */ .mk-roll { display: inline-block; position: relative; } .mk-roll .mk-roll-a, .mk-roll .mk-roll-b { transition: transform .55s var(--mk-ease); } .mk-roll:hover .mk-roll-a { transform: translateY(-115%); } .mk-roll:hover .mk-roll-b { transform: translateY(0); } .mk-sweep { position: relative; } .mk-sweep::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; opacity: .75; transform-origin: 100%; } .mk-sweep:hover::after { animation: mk-line .9s var(--mk-ease) both; } @keyframes mk-line { 0% { transform-origin: 100%; transform: scaleX(1) } 49% { transform-origin: 100%; transform: scaleX(0) } 51% { transform-origin: 0; transform: scaleX(0) } to { transform-origin: 0; transform: scaleX(1) } } /* P33 preloader */ .mk-loader { background: var(--mk-paper); color: var(--mk-ink); z-index: 3; display: flex; align-items: center; justify-content: center; } .mk-logo { position: relative; margin: 0; font-family: var(--mk-caps); font-size: 9cqw; letter-spacing: .2em; font-weight: 300; } .mk-dim { opacity: .18; } .mk-fill { position: absolute; left: 0; top: 0; } /* P34 modal */ .mk-scrim { background: rgba(20,17,18,.55); z-index: 2; } .mk-modal { position: absolute; left: calc(50cqw - 20cqw); top: 14cqh; width: 40cqw; background: var(--mk-paper); color: var(--mk-ink); z-index: 3; padding: 3cqw; display: flex; flex-direction: column; gap: 1.2cqw; } .mk-modal .mk-h { font-size: 3cqw; } .mk-field { border-bottom: 1px solid rgba(20,17,18,.3); padding: .6cqw 0; font-size: max(9px, 1.2cqw); color: var(--mk-ink2); } .mk-btn { align-self: flex-start; background: var(--mk-wine); color: var(--mk-light); padding: .8cqw 2cqw; font-family: var(--mk-caps); text-transform: uppercase; font-size: max(9px, 1.2cqw); } /* P35 hover scrub */ .mk-scrub { position: absolute; inset: 0; cursor: ew-resize; } .mk-shotc { opacity: 0; transition: opacity .35s; } .mk-shotc.on { opacity: 1; } .mk-dots { position: absolute; left: 0; right: 0; bottom: 4cqh; display: flex; justify-content: center; gap: .8cqw; margin: 0; z-index: 2; } .mk-dots i { width: 5cqw; height: 2px; background: rgba(255,255,255,.45); } .mk-dots i.on { background: #fff; } /* P36 header */ .mk-hdrpage { position: absolute; left: 0; right: 0; top: 0; } .mk-blk { position: relative; height: 70cqh; display: flex; align-items: center; justify-content: center; margin: 0; font-family: var(--mk-caps); text-transform: uppercase; font-size: 3cqw; } .mk-paper { background: var(--mk-paper); color: var(--mk-ink); } .mk-ink { background: var(--mk-ink); color: var(--mk-light); } .mk-photo { overflow: hidden; } .mk-hdr { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: space-between; padding: 2.5cqh 3cqw; color: var(--mk-ink); font-family: var(--mk-caps); letter-spacing: .15em; font-size: max(10px, 1.6cqw); transition: color .35s; } .mk-hdr.light { color: var(--mk-light); } @media (prefers-reduced-motion: reduce) { .mk-ring-pulse { animation: none; } } /* ── E. OWN EFFECTS P37–P44 (made for «Русская Ривьера», 23.09.2026) ─────────────────────────── */ :root { --mk-champagne: #d8c3a0; } /* P37/P38 diamond window + hairline outline (svg spans the root, no viewBox: the effect draws the path in px, same as the clip) */ .mk-p37, .mk-p38 { background: #1e1517; } .mk-dia { will-change: clip-path; } .mk-dia-line { position: absolute; z-index: 2; pointer-events: none; inset: 0; width: 100%; height: 100%; overflow: visible; } .mk-dia-line :is(polygon, path) { fill: none; stroke: var(--mk-champagne); stroke-width: 1; vector-effect: non-scaling-stroke; } /* P39 horizon */ .mk-p39 { background: #1e1517; } .mk-hline { position: absolute; left: 0; right: 0; top: var(--hy, 48%); height: 1px; background: var(--mk-champagne); z-index: 3; transform-origin: 50% 50%; } /* P40 letterbox on paper */ .mk-p40 { background: var(--mk-paper); color: var(--mk-ink); } .mk-lb-t, .mk-lb-s { position: absolute; z-index: 3; margin: 0; font-family: var(--mk-caps); text-transform: uppercase; } .mk-lb-t { left: 6cqw; bottom: calc(66% + 2cqh); font-size: max(18px, 4.6cqw); font-weight: 300; line-height: .95; } .mk-lb-s { right: 6cqw; top: calc(66% + 2cqh); font-family: var(--mk-text); text-transform: none; font-size: max(10px, 1.4cqw); color: var(--mk-ink2); max-width: 34cqw; text-align: right; } /* P41 figure pop-out */ .mk-p41 { background: var(--mk-paper); color: var(--mk-ink); } .mk-fig { position: absolute; left: 50%; bottom: 14%; height: 84%; width: 60cqw; margin-left: -30cqw; z-index: 2; transform-origin: 50% 100%; pointer-events: none; } .mk-fig .mk-fig-img { object-fit: contain; object-position: 50% 100%; } .mk-side2 { position: absolute; right: 5cqw; bottom: 12cqh; z-index: 3; max-width: 17cqw; text-align: right; } /* opposite side from the figure: text never crosses the cut-out */ /* P42 tracking-in title */ .mk-shade-c { background: radial-gradient(ellipse at 50% 55%, rgba(10,8,8,.55), rgba(10,8,8,.15) 70%); } .mk-tt { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .mk-track-t { margin: 0; font-family: var(--mk-caps); font-weight: 200; text-transform: uppercase; font-size: max(22px, 8.4cqw); line-height: 1; white-space: nowrap; } .mk-ch { display: inline-block; } .mk-w { display: inline-block; white-space: nowrap; } .mk-ln { display: block; } /* P42: forced line from «|» in the title */ .mk-track-s { margin: 2cqh 0 0; font-size: max(10px, 1.5cqw); letter-spacing: .08em; opacity: .9; } /* P43 odometer */ .mk-p43 { background: #1e1517; display: flex; align-items: center; justify-content: center; } .mk-odo { display: flex; gap: 7cqw; list-style: none; margin: 0; padding: 0; } .mk-odo li { display: flex; flex-direction: column; gap: 1cqh; } .mk-odo p { margin: 0; font-family: var(--mk-caps); font-weight: 200; font-size: 10cqw; line-height: .9; font-variant-numeric: tabular-nums; white-space: nowrap; } .mk-odo em { font-style: normal; font-size: .45em; color: var(--mk-champagne); margin-left: .1em; } .mk-odo span { font-size: max(10px, 1.3cqw); letter-spacing: .12em; text-transform: uppercase; color: var(--mk-champagne); } /* P44 side-wipe series */ .mk-swc { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .mk-swn { position: absolute; right: 5cqw; bottom: 6cqh; z-index: 3; margin: 0; font-family: var(--mk-caps); letter-spacing: .12em; font-size: max(11px, 1.6cqw); color: var(--mk-light); } .mk-swn b { font-weight: 400; color: var(--mk-champagne); } /* ── F6. FILM GRAIN — one fixed layer per page (