/** * Topdermal Redesign — global stylesheet * * Shared rules that apply across every component, not specific to one * section. Component-specific CSS belongs in assets/css/components/, * not here. */ /* * GUTTER CHANGED 48px -> 24px, 2026-09-18. * * Georgy: "глобально отступы справа и слева у всей страницы должны быть * 24 пикселя, сейчас больше" — and the design agrees. The Home frame * (192:254) is 1200px wide and EVERY top-level block in it sits at * x=24 with width 1152: Banner, Menu, Hero, Brands, Categories, * Advantages, Catalog, Search, Contacts, Instagram, FAQ — checked one * by one, all eleven identical. 24px each side is the design's number. * * 48 was never from the design. It came out of the 2026-09-12 "option * B" decision, which chose full-bleed-with-a-gutter over the literal * 1152px centred container; the gutter itself was picked by eye at the * time and has been doubling the design's value ever since. */ /* Device visibility mechanism (Support/DeviceVisibility.php). "Mobile" breakpoint matches the project's ~390px mobile reference; the mobile-only elements become visible at the same point desktop elements hide, avoiding a dead zone between the two. */ @media (max-width: 767px) { .td-visible-desktop-only { display: none !important; } } @media (min-width: 768px) { .td-visible-mobile-only { display: none !important; } } /* Base typography reset for every td-element, so a component's own CSS only needs to declare what differs from this baseline. */ .td-element { font-family: var(--td-font-family); color: var(--td-color-text); box-sizing: border-box; } .td-element *, .td-element *::before, .td-element *::after { box-sizing: border-box; } /** * ADDED 2026-09-07 (Loyalty Program Page task) — Basel's native * `.page-title` bar (H1 + optional background image, confirmed via a * direct fetch of the live `/loyalty-program/` page's real markup) is a * normal-WP-Page-only theme element `home-test` never needed to worry * about (being the front page). TD Loyalty Intro renders its own page * title (`.td-loyalty-intro__page-title`), so the native bar must be * hidden the same way HeaderElement already hides the native * `

` — same `body.topdermal-redesign-preview` gate, generalized * here (not Header-specific) since any future non-Home redesigned page * will need this exact same rule. */ body.topdermal-redesign-preview .page-title { display: none !important; } /** * PAGE SHELL — imported page content must share the chrome's gutter. * * Georgy, 2026-09-13, after the clean import run: "Ширина контента шире, * чем хедер и футер." * * MEASURED, not reasoned (qa/align-probe.js against staging at 1440): * * header bar / promo pill / footer panel 48 .. 1392 * imported TD sections 15 .. 1425 → +33px each side * * Two separate causes stack up, which is why fixing either one alone * leaves the content misaligned in the other direction: * * 1. Header, Promo Banner and Footer render through the global rollout, * echoed on `wp_body_open` as direct children of — `width: * 100%` plus a 48px gutter. Page content instead sits inside Basel's * `.container`, measured as a FIXED `width: 1170px` (not a * `max-width`, which computes to `none` — overriding max-width alone * does nothing here). Same trap already settled for the catalogue in * category.css / product.css. * 2. The imported row is rendered by WPBakery as a "Stretch row and * content" row (`data-vc-full-width` + `data-vc-stretch-content`), * whose JS injects an inline `position: relative; left: -135px; * width: 1440px` to break out of that 1170px column. It escapes to * the full viewport and lands on WPBakery's own 15px column gutter — * a third gutter value, agreeing with neither the theme nor us. * * So the container is widened AND the breakout is switched off, leaving * WPBakery's own ±15px row-margin/column-padding pair to cancel out as * it normally does. The content box then lands on exactly 48 .. 1392 — * the chrome's own edges — at any viewport, with no dependence on * WPBakery's JS getting its arithmetic right. * * SCOPE — `topdermal-redesign-preview` only, i.e. pages the redesign * rollout actually claims. NOT the `td-header-global-active` / * `td-footer-global-active` classes: those mark a page that gets only * the new chrome and keeps its own theme template (Cart, Account, blog), * where forcing a full-bleed container would stretch ordinary body copy * to 1344px. Catalogue pages carry their own equivalent rule under * `td-catalog-redesign`. */ body.topdermal-redesign-preview .main-page-wrapper > .container { width: 100%; max-width: none; padding-left: 24px; padding-right: 24px; } @media (max-width: 1024px) { body.topdermal-redesign-preview .main-page-wrapper > .container { padding-left: 24px; padding-right: 24px; } } @media (max-width: 767px) { body.topdermal-redesign-preview .main-page-wrapper > .container { padding-left: 16px; padding-right: 16px; } } /** * `!important` throughout because WPBakery writes the breakout as an * INLINE style from JS — nothing else can answer it — and it re-runs on * every resize, so a one-time unset would be undone. `position: static` * alone would already neutralise `left`, but both are declared so the * intent survives a future WPBakery that shifts the row some other way. */ body.topdermal-redesign-preview .entry-content .vc_row[data-vc-full-width], body.topdermal-redesign-preview .entry-content .vc_row[data-vc-full-width-temp] { position: static !important; left: auto !important; width: auto !important; max-width: none !important; /* * ADDED 2026-09-17 — the rule above neutralised the breakout's * position and width but not its MARGIN, and the margin was doing * the damage on its own. * * WPBakery's JS leaves `data-vc-full-width-temp` on the row * permanently (verified: the row carries full-width, -temp, -init * and stretch-content all at once, after load and after resize), * and its stylesheet gives that attribute * `margin-left: calc(50% - 50vw)`. Against this page shell that * resolves to exactly minus our own gutter — measured −48px at * 1440, −24px at 768, −16px at 390, matching the 48/24/16 above * value for value. `margin-right` meanwhile stayed at `.vc_row`'s * own −15px, so the row was asymmetric: home page content sat at * x=15 on the left and x=1392 on the right, against chrome at * 48..1392. * * Set to a symmetric −15px — Bootstrap's own row gutter, the value * that pairs with the +15px padding `.vc_column-inner` already * carries, so content lands back on the container's 48px edge. */ margin-left: -15px !important; margin-right: -15px !important; } /** * FIXED 2026-09-17 — horizontal scroll on the catalog at 768px * (measured: scrollWidth 821 against a 768 viewport, traced to * `p.woocommerce-result-count > span.screen-reader-text` sitting at * [744..821]). * * The theme hides this text with `clip: rect(1px, 1px, 1px, 1px)` * alone. `clip` paints nothing but does NOT shrink the layout box — the * span still measured 77px wide and still counted toward the document's * scroll width. WordPress core's own `.screen-reader-text` pairs the * clip with `width: 1px; height: 1px; overflow: hidden` for exactly * this reason; those three are added back here. * * Scoped to the pages this plugin owns rather than applied sitewide: * the text stays equally invisible and equally available to screen * readers either way, so there is no reason to reach beyond our own * templates. */ body.topdermal-redesign-preview .screen-reader-text, body.td-catalog-redesign .screen-reader-text, body.td-cart-redesign .screen-reader-text, body.td-account-redesign .screen-reader-text { width: 1px; height: 1px; overflow: hidden; } /** * FIXED 2026-09-17 (Georgy: "Контакты на многих или всех страницах стоят * очень далеко от футера, не как в дизайне"). * * Measured on the About page: the last content block ended at y=3347 and * the footer began at 3407 — a 60px gap, made of two separate things, * neither of them belonging to any block's design: * * 20px — `wpautop()` wraps the blank lines between shortcodes into * empty `

` elements at the top and bottom of the content * column. They measure 0px tall, which is why they are easy to * miss, but they still carry the theme's 20px paragraph * margin. Removed from layout with `display: none` so the * margin goes with them; `:empty` matches these correctly, * including the one on Home that holds only an HTML comment. * * 40px — `.site-content` carries `margin-bottom: 40px`, which made * sense when a page ended in ordinary post content above a * native footer. These pages end in a TD block that already * owns its own bottom padding, and the footer panel is a * designed edge that should meet it. * * Measured across Loyalty (60), Privacy (64) and About (60); Home was * already at 0, and stays there. */ body.topdermal-redesign-preview .wpb_wrapper > p:empty { display: none; } /* * EXTENDED 2026-09-17 — this was scoped to preview pages only, so the * blog, the content pages and the shop templates kept the theme's 40px * and Georgy reported the footer sitting too far from the content "на * всех страницах". Measured after 0.47.0 went live: Home 0px (correct), * FAQ / blog / post / cart all 40px. * * Confirmed against Figma before changing it rather than guessed: on the * Home frame every top-level section butts directly against the next — * Hero 148..736, Brands 736..1020, Categories 1020..1468, … FAQ * 3836..4223, footer 4223..4804 — gap 0 throughout, with the breathing * room living inside each section's own padding (the footer panel itself * is 48px-padded, node 387:5). So 0 is the designed value, and every * page should match what Home already did. */ body.topdermal-redesign-preview .site-content, body.td-page-redesign .site-content, body.td-blog-redesign .site-content, body.td-cart-redesign .site-content, body.td-account-redesign .site-content, body.td-catalog-redesign .site-content { margin-bottom: 0; } /* * The text pages (Privacy, Cookies) still ended 24px above the footer * after the two fixes above: `TD Text Section` carries a 24px bottom * margin as the rhythm BETWEEN sections, and the last one has no * section after it to space away from. Zeroed for that last section * only, so the inter-section rhythm is untouched. `:last-of-type` * rather than `:last-child` because `wpautop()`'s trailing empty * paragraph is still the last child even once hidden above. */ body.topdermal-redesign-preview .wpb_wrapper > .td_text_section-element:last-of-type { margin-bottom: 0; } /** * ADDED 2026-09-17 — horizontal scroll on Home below 1024px, introduced * by restoring the two product carousels ("Популярные Товары" / "Товары * со Скидкой") that had been switched off in the editor. * * The cause is Basel's own carousel navigation: it positions the prev / * next arrows OUTSIDE the slider, which is fine at desktop where the * gutter has room for them and impossible below it. Measured at 768: * `.owl-next` sat at [719..774] and `.owl-prev` at [-6..49] against a * 768 viewport; at 390 they reached [349..404] and [-14..41]. * * Hidden below 1024 rather than pulled inward: at these widths the * carousel is a touch surface and swiping is the real affordance, so a * pair of arrows overlapping the first and last card would be worse than * no arrows at all. They stay exactly as they are at desktop. */ /* * EXTENDED 2026-09-18 — this was scoped to preview pages only, so the * single product page kept its related-products carousel arrows and * kept scrolling sideways: measured 774>768 and 405>390, the same * `.owl-prev` at [-6..49] / [-15..40] as on Home. Same cause, same * answer, one more gate. */ @media (max-width: 1024px) { body.topdermal-redesign-preview .owl-nav .owl-prev, body.topdermal-redesign-preview .owl-nav .owl-next, body.topdermal-redesign-preview .owl-carousel > .owl-prev, body.topdermal-redesign-preview .owl-carousel > .owl-next, body.td-catalog-redesign .owl-nav .owl-prev, body.td-catalog-redesign .owl-nav .owl-next, body.td-catalog-redesign .owl-carousel > .owl-prev, body.td-catalog-redesign .owl-carousel > .owl-next { display: none !important; } } /** * ADDED 2026-09-18 (Georgy: "Один заголовок гигантский") — the heading * of the restored legacy Instagram section. * * Measured at 390: 40px on a 56px line at weight 100 in Roboto, filling * six lines and 336px of height on its own. Nothing in this plugin was * styling it — `static-pages.css` covers `.vc_custom_heading`, but only * under the content-pages gate, and Home is a preview page. The legacy * sections restored to Home brought their own headings with them, and * those had never been in anyone's scope. * * Given the section-title type the redesigned blocks around them use, * so the page reads as one thing. Left-aligned to match; the theme * centred it. */ /* * `!important` on size and line-height only, and for a real reason: * WPBakery writes the custom heading's size as an INLINE style * (measured `font-size: 2.5rem` on the element itself), which no * selector can outrank. Family, weight, colour and alignment are not * inline and need no help. */ body.topdermal-redesign-preview .entry-content .vc_custom_heading { font-family: var(--td-font-family); font-weight: var(--td-fw-section-title); font-size: var(--td-fs-section-title) !important; line-height: var(--td-lh-section-title) !important; color: var(--td-color-text); text-align: left; } @media (max-width: 767px) { body.topdermal-redesign-preview .entry-content .vc_custom_heading { font-size: 24px !important; line-height: 32px !important; } }