/* ════════════════════════════════════════════════════════════════════ REMONT theme3 — productionisation layer (loaded LAST). The Claude Design files are fixed-canvas artboards shown side-by-side in a mockup viewer: `.artboard.desktop` (1440px) and `.artboard.mobile` (390px), wrapped in `#sizer > #stage` with zoom controls. This file turns that into one real responsive site WITHOUT touching the design CSS: • desktop canvas centred and shown ≥768px, • mobile canvas shown ≤767px, • viewer scaffolding (labels, zoom bar, dev annotations) hidden, • mobile drawer / bottom bar re-anchored to the viewport. No legacy main.css is involved — this is the only override layer. ════════════════════════════════════════════════════════════════════ */ html, body { margin: 0; background: var(--paper); } /* ---------- hide mockup-viewer scaffolding & dev annotations ---------- */ .artboard-label, #zoombar, .zoombar, .tweaks-panel, .anno, .block-placeholder, .fx-note { display: none !important; } /* .fx-note = dev note explaining the floating side panel */ /* ---------- artboards → real responsive site (full-bleed bands + centred content) ---------- The design is a fixed 1440 canvas. On a real site the COLOURED BANDS must bleed edge-to-edge while the CONTENT stays on the design's 1440 module (48px gutters). So: the canvas is full-width, and every content row (*-in / .d-navband / the fortune .wrap) is capped at 1440 and centred. Backgrounds live on the full-width band elements (.d-header / .d-utility / .d-ticker / .d-hero / .sec / .cta-band / .cn-band / .d-footer / .fortune), so they fill the viewport — no more 1440 column floating in the middle with big paper gutters. */ .artboard { background: transparent !important; box-shadow: none !important; position: relative; overflow-x: clip; /* clip stray horizontal decor; 'clip' (not hidden) keeps the sticky header working */ overflow-y: visible; /* the design CSS sets .artboard{overflow:hidden}; force y visible so the sticky header isn't trapped in a scroll container */ } .artboard.desktop { width: 100%; max-width: none; margin: 0; } .artboard.mobile { display: none; } /* content rows centred on the 1440 module; their own padding keeps the 48px gutters. .d-main = header logo/phone/CTA row; .d-navband = nav row; .d-utility-in = top bar — all three must align with the page content on the 1440 module. */ .d-utility-in, .d-main, .d-navband, .d-ticker-in, .d-hero-in, .sec-in, .cta-band-in, .cn-in, .page-head-in, .d-footer-in { max-width: 1440px; margin-left: auto; margin-right: auto; position: relative; /* positioning context for content-level absolute decor */ } /* fortune block: cream band bleeds full-width, card stays on the 1440 module (overrides the design's desktop rule `.rm-fortune-scope .wrap{max-width:none}`) */ .rm-fortune-scope .wrap { max-width: 1440px !important; margin-left: auto; margin-right: auto; } @media (max-width: 767px) { .artboard.desktop { display: none !important; } .artboard.mobile { display: block; width: 100%; max-width: 430px; margin: 0 auto; } } /* ---------- positioning context: keep absolutely-placed decor inside its block ---------- */ .sec, .d-hero, .m-hero, .m-sec, .cn-band, .fortune { position: relative; } /* ---------- bottom CTA bar re-anchored to the viewport + scroll lock ---------- The design positions the CTA bar inside the 390px artboard; on a real phone it must pin to the viewport. body.rm-lock freezes the page behind the open drawer. (The drawer itself is .m-screen2/.m-drawer2, styled in remont-site.css.) */ @media (max-width: 767px) { .m-ctabar { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 55; } body.rm-lock { overflow: hidden; } } /* ---------- images never overflow their slot ---------- */ img { max-width: 100%; height: auto; } /* ---------- to-top button (productionised) ---------- The design ships this inside a static demo strip (.fx-strip). The .fx-side action buttons were removed per user request; only the to-top remains. Pin it to the viewport bottom-LEFT so it never covers the bottom-right scroll toast. JS in front-page.php reveals it after scrolling past the hero. */ .fx-strip { display: block !important; background: transparent !important; padding: 0 !important; } .fx-top { position: fixed; z-index: 59; left: 26px; bottom: 26px; transition: opacity .25s ease; } /* ---------- smart sticky header (hide on scroll-down, show on scroll-up) ---------- Desktop .d-header is already position:sticky (design CSS). The mobile header is two separate elements (.m-utility + .m-header); chrome.js now wraps them in .m-headbar, which we make sticky here. chrome.js toggles .rm-head-compact (dark utility bar collapses once scrolled) and .rm-head-hidden (whole bar slides up when scrolling down, slides back when scrolling up). */ /* Reserve the mobile header's height on the empty [data-chrome="m-top"] slot so that when chrome.js injects the header on DOMContentLoaded the page does not shift down (the "header появляется и прыгает" jump). 99px = m-utility 34 + m-header 65, measured live. The slot is replaced by outerHTML on inject; its natural height then matches. */ @media (max-width: 767px) { [data-chrome="m-top"] { min-height: 99px; } } /* Same for the DESKTOP header slot: chrome.js injects the 177px header on load, so without a reserved height the page paints with no header and then jumps down when it appears ("хедер не сразу, бликом, резко" on PC). 177px = d-utility 40 + d-main + d-navband, measured live at 1440. Slot is replaced by outerHTML on inject; the real header then matches. */ @media (min-width: 768px) { [data-chrome="d-header"] { min-height: 177px; } } .m-headbar { position: sticky; top: 0; z-index: 50; background: var(--white); } .d-header, .m-headbar { transition: transform .32s ease; will-change: transform; } /* compact (scrolled but shown): slide the dark utility bar up out of view; main+nav stay. TRANSFORM ONLY — the header's flow height stays constant, so collapsing the bar never reflows the page. (A height change here jumps scrollY by ~40px and the up/down detector reads that as "scrolled up", which made the header pop back.) Heights: d-utility 40, m-utility 34. */ .d-header.rm-head-compact { transform: translateY(-40px); } .m-headbar.rm-head-compact { transform: translateY(-34px); } /* hidden (scrolling down): the whole bar slides up. Declared AFTER .rm-head-compact so it wins when both classes are present. */ .d-header.rm-head-hidden, .m-headbar.rm-head-hidden { transform: translateY(-100%); } /* ---------- iOS button colour + quiz answer wrapping ---------- iOS Safari renders