/* ========================================================================== Мама Рядом — desktop landing Design canvas: 1280 px wide. 1rem === 1 design pixel. ========================================================================== */ @font-face { font-family: 'Roca'; src: url('../assets/fonts/roca-light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Roca'; src: url('../assets/fonts/roca.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../assets/fonts/inter.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- scaling */ :root { --bl-inter: 0.3637; --bl-roca: 0.275; --bl: var(--bl-inter); } * { box-sizing: border-box; } /* --------------------------------------------------------------- cover */ #cover { position: fixed; inset: 0; z-index: 1000; background: #0a3069; display: flex; align-items: center; justify-content: center; overflow: hidden; /* the cover only paints over the page, it doesn't stop it moving. On a phone a flick during the intro scrolls several sections by underneath before the reveal observer is watching them. The observer now handles already-passed elements, but swallowing pan gestures for the ~2 s the cover is up keeps the intro from being scrolled through in the first place. */ touch-action: none; } #cover-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* sized in design px, so it scales with the canvas rem on both breakpoints and matches v7 exactly (the logo box was 120x100 on both the 1280 and 540 canvas). height is explicit — the SVG carries no intrinsic size, so `auto` would collapse to 0 until it decodes */ #cover-duck { width: calc(120 * 1rem); height: calc(100 * 1rem); will-change: transform; } html { font-size: calc(100vw / 1280); /* The canvas is only ever seen in the overscroll (rubber-band) strips, and the two ends want opposite colours: white above §1, dark below §8. So paint the page white and hang a single dark plate off the bottom edge of the document. A root background's *painting* area covers the whole canvas while its images are still positioned against the root box, so `bottom -100vh` parks the plate entirely below the document — invisible until you rubber-band past the end. The band between §7 and the footer is handled on #footer-space, not here. */ background-color: #fff; /* matches the top edge of §1's art */ background-image: linear-gradient(#002155, #002155); background-repeat: no-repeat; background-size: 100% 100vh; background-position: left 0 bottom -100vh; /* iOS Safari auto-inflates any text it judges too small to read (WebKit's "idempotent text autosizing", on by default since iOS 13). Every label here is absolutely placed by its baseline at 8–11 CSS px, so boosting even one of them shifts and overlaps the whole layout. 100% pins text to the authored size; desktop browsers don't autosize, which is why this only showed on the phone. Must stay. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { position: relative; margin: 0; /* transparent so the fixed §8 footer (z-index:-1) shows through the spacer. Must stay transparent: a background here would propagate to the canvas when has none, and would paint over both negative-z-index layers. */ background: transparent; color: #1e1e1e; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; } a { text-decoration: none; color: inherit; } /* --------------------------------------------------------------- sections */ .sec { position: relative; width: 100%; --sech: var(--sh); height: calc(var(--sech) * 1rem); } .sec__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .abs { position: absolute; left: calc(var(--ax) * 1rem); top: calc(var(--ay) * 1rem); width: calc(var(--aw) * 1rem); height: calc(var(--ah) * 1rem); --ax: var(--x); --ay: var(--y); --aw: var(--w); --ah: var(--h); } /* text placed by its first baseline (--y), exactly as in the source SVG. --tx/--ty/--tfs/--tlh indirect through so the mobile layer can rebind them */ .t { position: absolute; margin: 0; white-space: nowrap; --tx: var(--x); --ty: var(--y); --tfs: var(--fs); --tlh: var(--lh); left: calc(var(--tx) * 1rem); top: calc((var(--ty) - var(--tlh) / 2) * 1rem - var(--bl) * var(--tfs) * 1rem); font-size: calc(var(--tfs) * 1rem); line-height: calc(var(--tlh) * 1rem); font-weight: 400; } .t.c { transform: translateX(-50%); text-align: center; } /* viewport switches -------------------------------------------------------- !important because several component rules (.corner-wa svg, .sec__art …) set display with a higher specificity than a bare utility class */ .only-m { display: none !important; } .roca { font-family: 'Roca', Georgia, serif; font-weight: 300; /* stylistic set 1 — the alternate д (and matching а в ж к п т у …) */ font-feature-settings: 'ss01' 1; --bl: var(--bl-roca); } .b { font-weight: 700; } /* --------------------------------------------------------------- header */ /* tall, transparent container so the nav pins while scrolling and then lands on §7 — exactly like the sticky corner icons (its bottom matches .corners) */ .hdr { position: absolute; left: 0; top: 0; width: 100%; height: calc(5346 * 1rem); padding-top: calc(34 * 1rem); z-index: 50; pointer-events: none; } .hdr > * { pointer-events: auto; } .nav { position: -webkit-sticky; position: sticky; top: calc(34 * 1rem); margin: 0 auto; /* centered in the 1280 canvas → left 385 */ width: calc(510 * 1rem); height: calc(32 * 1rem); border-radius: calc(16 * 1rem); background: rgba(252, 250, 248, 0.55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); transition: background-color .3s; } .nav::before { content: ''; position: absolute; inset: 0; border: calc(1 * 1rem) solid #f7f3f2; border-radius: calc(16 * 1rem); transition: border-color .3s; pointer-events: none; } .nav__i { position: absolute; top: calc(4 * 1rem); height: calc(24 * 1rem); left: calc(var(--l) * 1rem); width: calc(var(--w) * 1rem); border-radius: calc(12 * 1rem); display: flex; align-items: center; justify-content: center; font-size: calc(11 * 1rem); line-height: 1; color: #033d8b; transition: background-color .3s, color .3s; } .nav__i.is-active { background: #ddf4ff; } /* sliding blue chip (GSAP-driven) — sits behind the link text and moves to the hovered link, returning to the active one on mouse-leave */ .nav__chip { position: absolute; top: calc(4 * 1rem); left: 0; width: 0; height: calc(24 * 1rem); border-radius: calc(12 * 1rem); background: #ddf4ff; pointer-events: none; transition: background-color .3s; } /* once the chip is live, the per-link active fill is redundant */ .nav--chip .nav__i.is-active { background: transparent; } /* dark scheme over the deep-blue sections */ .hdr--dark .nav { background: rgba(3, 33, 85, 0.35); } .hdr--dark .nav::before { border-color: #0550ae; } .hdr--dark .nav__i { color: #fff; } .hdr--dark .nav__i.is-active { background: #033d8b; } .hdr--dark .nav__chip { background: #033d8b; } .hdr--dark .nav--chip .nav__i.is-active { background: transparent; } /* --------------------------------------------------- sticky corner icons */ /* live from section 2 (about) to section 7 (contacts); pinned while between */ .corners { position: absolute; left: 0; width: 100%; top: calc(826 * 1rem); height: calc(4520 * 1rem); z-index: 40; pointer-events: none; } .corner-row { position: -webkit-sticky; position: sticky; top: calc(26 * 1rem); width: 100%; height: calc(40 * 1rem); } .corner-row > * { position: absolute; pointer-events: auto; } .corner-logo { left: calc(190 * 1rem); top: 0; width: calc(40 * 1rem); height: calc(40 * 1rem); display: block; } .corner-logo img { width: 100%; height: 100%; display: block; } .corner-wa { left: calc(1060 * 1rem); top: calc(9 * 1rem); width: calc(30 * 1rem); height: calc(30 * 1rem); } .corner-wa svg { width: 100%; height: 100%; display: block; } /* «Меню» pill — mobile only; geometry + gradient straight from the design */ .corner-menu { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; } .corner-menu svg { width: 100%; height: 100%; display: block; } /* --------------------------------------------------------------- buttons */ .btn { position: absolute; --bx: var(--x); --by: var(--y); left: calc(var(--bx) * 1rem); top: calc(var(--by) * 1rem); width: calc(var(--w) * 1rem); height: calc(var(--h) * 1rem); display: block; transition: filter .25s; } .btn > svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* same as the §7 cards, minus the movement */ .btn:hover { filter: brightness(1.15); } .btn--flat { background: #f7f3f2; border-radius: calc(25 * 1rem); transition: background-color .25s; } /* gold on hover (the footer "Мама рядом" gold), not brightened white */ .btn--flat:hover { background: #fdd4a0; filter: none; } /* --------------------------------------------------------------- hero */ .sec--hero { z-index: 8; } /* --------------------------------------------------- 3. services carousel */ .sec--services { overflow: hidden; } .row { position: absolute; left: 0; --ry: var(--y); top: calc(var(--ry) * 1rem); width: 100%; height: calc(360 * 1rem); overflow: hidden; cursor: grab; touch-action: pan-y; } .row.is-dragging { cursor: grabbing; } .row__track { position: absolute; left: 0; top: 0; height: 100%; display: flex; gap: calc(10 * 1rem); will-change: transform; } .card { position: relative; flex: 0 0 auto; width: calc(225 * 1rem); height: calc(360 * 1rem); -webkit-user-select: none; user-select: none; } .card > svg { position: absolute; inset: 0; width: 100%; height: 100%; } .card img { -webkit-user-drag: none; } /* --------------------------------------------------- 4. programs accordion */ .progs { position: absolute; left: calc(190 * 1rem); top: calc(360 * 1rem); width: calc(900 * 1rem); height: calc(360 * 1rem); display: flex; gap: 0; } .prog { position: relative; flex: 0 0 auto; width: calc(50 * 1rem); height: 100%; overflow: hidden; cursor: pointer; transition: width .45s cubic-bezier(.4, 0, .2, 1); } .prog.is-open { width: calc(420 * 1rem); cursor: default; } .prog--photo { width: calc(260 * 1rem); margin: 0 calc(10 * 1rem); cursor: default; overflow: visible; } .prog--photo svg { position: absolute; inset: 0; width: 100%; height: 100%; } .prog__bg { position: absolute; inset: 0; background: var(--fill); clip-path: polygon( calc(15 * 1rem) 0, calc(100% - 15 * 1rem) 0, 100% calc(15 * 1rem), 100% calc(100% - 15 * 1rem), calc(100% - 15 * 1rem) 100%, calc(15 * 1rem) 100%, 0 calc(100% - 15 * 1rem), 0 calc(15 * 1rem) ); } .rot { position: absolute; left: calc(var(--x) * 1rem); top: calc(var(--y) * 1rem); transform: rotate(90deg); transform-origin: 0 0; } .rot > .t { --x: 0; --y: 0; } .prog__flat { display: none; } /* mobile-only flat label, see @media */ .prog__closed { opacity: 1; transition: opacity .2s; } .prog__open { opacity: 0; transition: opacity .3s; pointer-events: none; } .prog.is-open .prog__closed { opacity: 0; pointer-events: none; } .prog.is-open .prog__open { opacity: 1; transition-delay: .12s; pointer-events: auto; } /* ---------------------------------------------------- 6. pricing plans */ /* one transparent layer holding all three plans, so mobile can slide them */ .plans { position: absolute; inset: 0; } .plans__art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } /* --------------------------------------------------------------- contacts */ .ccard { position: absolute; --cx: var(--x); --cy: var(--y); left: calc(var(--cx) * 1rem); top: calc(var(--cy) * 1rem); width: calc(225 * 1rem); height: calc(160 * 1rem); display: block; transition: transform .25s, filter .25s; } .ccard > svg { position: absolute; inset: 0; width: 100%; height: 100%; } .ccard:hover { transform: translateY(calc(-4 * 1rem)); filter: brightness(1.15); } /* --------------------------------------------------- footer reveal (§8) */ /* footer is pinned to the viewport bottom and uncovered as §7 scrolls up */ #footer { position: fixed; left: 0; bottom: 0; width: 100%; z-index: -1; } /* The spacer used to be fully transparent and let the dark canvas stand in for any band of it the fixed footer failed to cover (iOS Safari resolves `bottom:0` against the *layout* viewport, so a collapsing URL bar can drop the footer and expose a strip above it). The canvas is white now, so the spacer owns that colour itself. z-index -2 keeps it below the footer's -1, so the footer still shows through exactly as before — this only backfills the strip. */ #footer-space { height: calc(400 * 1rem); position: relative; z-index: -2; background: #002155; } /* ========================================================================== MOBILE — design canvas 540 px wide. 1rem === 1 mobile design pixel. Geometry transcribed from assets/design/mobile/*.svg ========================================================================== */ @media (max-width: 900px) { html { font-size: calc(100vw / 540); } .only-d { display: none !important; } .only-m { display: block !important; } /* rebind the positioning variables to their mobile counterparts */ .sec { --sech: var(--msh, var(--sh)); } #footer-space { height: calc(800 * 1rem); } .t { --tx: var(--mx, var(--x)); --ty: var(--my, var(--y)); --tfs: var(--mfs, var(--fs)); --tlh: var(--mlh, var(--lh)); } .abs { --ax: var(--mx, var(--x)); --ay: var(--my, var(--y)); --aw: var(--mw, var(--w)); --ah: var(--mh, var(--h)); } /* containers use their own names: --mx/--my would inherit into the .t children that sit inside them and drag those out of place */ .btn { --bx: var(--bmx, var(--x)); --by: var(--bmy, var(--y)); } .ccard { --cx: var(--cmx, var(--x)); --cy: var(--cmy, var(--y)); } .row { --ry: var(--rmy, var(--y)); } /* headings that are flush-left on desktop but centered on mobile */ .t.m-c { transform: translateX(-50%); text-align: center; } /* ------------------------------------------------------------- header */ /* logo · «Меню» · WhatsApp — pinned from §2 (about) through §7 (contacts) */ /* same 40 top-margin at both ends: container top = §2top(1080)+40, container bottom = §7top(6400)+40+rowHeight(60) → height 5380 */ .corners { top: calc(1120 * 1rem); height: calc(5380 * 1rem); } .corner-row { top: calc(40 * 1rem); height: calc(60 * 1rem); } .corner-logo { left: calc(40 * 1rem); top: 0; width: calc(60 * 1rem); height: calc(60 * 1rem); } .corner-menu { left: calc(120 * 1rem); top: 0; width: calc(300 * 1rem); height: calc(60 * 1rem); } .corner-wa { left: calc(440 * 1rem); top: 0; width: calc(60 * 1rem); height: calc(60 * 1rem); } /* ------------------------------------------------- 3. services carousel */ /* unchanged card metrics — only the two rows move down */ /* ------------------------------------------------ 4. programs accordion */ /* the strip turns on its side: bars stack, the photo rides off the right */ .progs { left: calc(40 * 1rem); top: calc(420 * 1rem); width: calc(460 * 1rem); height: calc(600 * 1rem); flex-direction: column; gap: calc(10 * 1rem); } .prog { width: 100%; height: calc(50 * 1rem); transition: height .45s cubic-bezier(.4, 0, .2, 1); } .prog.is-open { width: 100%; height: calc(360 * 1rem); } /* the design drops the photo panel on mobile — bars stack full width */ .prog--photo { display: none; } /* closed bars read horizontally on mobile */ .prog__closed .rot { display: none; } .prog__flat { display: block; } /* --------------------------------------------------- 6. pricing slider */ /* the design places «Комфорт» in the middle: desktop layout − 370 / + 60 */ .sec--pricing { overflow: hidden; } .plans { transform: translate(calc((var(--pd, 0) - 370) * 1rem), calc(60 * 1rem)); will-change: transform; cursor: grab; touch-action: pan-y; } .plans.is-dragging { cursor: grabbing; } .plans__art { width: calc(1280 * 1rem); height: calc(840 * 1rem); } .plans .t { -webkit-user-select: none; user-select: none; } } /* ---------------------------------------------------- mobile: full menu */ /* everything inside is absolutely placed in the 540×1200 canvas, so the whole overlay scales with device width through the mobile rem (100vw / 540) */ .menu { position: fixed; inset: 0; z-index: 900; background: #0a3069; overflow: hidden; } .menu[hidden] { display: none; } /* duck tile — assets/logos/2.svg at the design's clip box (220,80) 100×120 */ .menu__logo { position: absolute; left: calc(220 * 1rem); top: calc(80 * 1rem); width: calc(100 * 1rem); height: calc(120 * 1rem); display: block; } .menu__logo img { width: 100%; height: 100%; display: block; } /* the anchor is its own baseline-positioned label (.t.c); widen the hit area horizontally only, so the baseline math is untouched */ .menu__i { padding: 0 calc(24 * 1rem); cursor: pointer; } /* touch feedback where there is no hover to lean on */ .corner-menu:active, .menu__i:active { filter: brightness(1.12); }