s; this layer makes those wrappers TRANSPARENT (display:contents) so the design's elements sit in the DOM exactly as authored — keeping main.css rules such as `.eyebrow + h2` adjacency and `>` combinators intact. Scope: `.katori-page` — added to by the theme (see functions.php body_class filter), so nothing here leaks to unrelated Elementor output. Load order: enqueued AFTER main.css, so it wins ties. ===================================================================== */ /* 0 — Container class bridge (Elementor 4.x drops container _css_classes) -- */ /* Markers are hidden; assets/js/katori-classes.js copies each marker's class onto its container, then removes the marker. The visibility guard prevents a flash of un-laid-out content until that runs (with a JS safety timeout, so content is never permanently hidden). */ .katori-page .katori-cls, .katori-page .katori-img { display: none !important; } .katori-page .elementor { visibility: hidden; } .katori-page.katori-classed .elementor { visibility: visible; } /* 1 — Make Elementor structural wrappers transparent -------------------- */ .katori-page .elementor-widget-container, .katori-page .elementor-widget-wrap, .katori-page .e-con-inner, .katori-page .elementor-widget-text-editor, .katori-page .elementor-widget-html, .katori-page .elementor-widget-image, .katori-page .elementor-widget-button, .katori-page .elementor-button-wrapper { display: contents; } /* Elementor adds a default 20px block-end gap + column padding; our layout spacing comes entirely from main.css, so neutralise Elementor's. */ .katori-page .elementor-widget:not(:last-child) { margin-block-end: 0; --kit-widget-spacing: 0px; } .katori-page .e-con, .katori-page .e-con-inner { --gap: 0px; } /* Keep fixed / sticky chrome (kanji-rail) from being clipped by a wrapper. */ .katori-page .e-con:not(.kata-track), .katori-page .elementor { overflow: visible; } .katori-page .kanji-rail { z-index: 90; } .katori-page .site-header { z-index: 100; } /* Elementor forces every container to flex-direction:column (via --flex-direction). The design's flex containers assume the CSS default (row); restore it for those that need it — most importantly the Chapter Two kata-track, which must be a horizontal carousel. main.js drives the prev/next, drag and snap once the track scrolls. */ .katori-page .kata-track, .katori-page .kata-showcase__counter, .katori-page .kata-controls, .katori-page .kata-nav, .katori-page .kata-card__num, .katori-page .hero-v2__actions, .katori-page .hero-v2__crest, .katori-page .hero-v2__scroll-cue, .katori-page .cta-banner-v2__actions, .katori-page .plan-v2__tag, .katori-page .plan-v2__price, .katori-page .editorial-card__index, .katori-page .bento__eyebrow { flex-direction: row !important; } /* The carousel track itself: horizontal, scrollable, snapping. */ .katori-page .kata-track { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; } .katori-page .kata-card { flex: 0 0 clamp(280px, 32vw, 420px) !important; } /* 1b — Mobile nav fix -------------------------------------------------- */ /* The header's backdrop-filter makes .site-header the containing block for the position:fixed .nav__menu, so the design's `inset:64px 0 0` only fills the ~64px header (not the viewport) and the slide-in menu peeks over the page. Pin the menu to the full viewport so it hides completely off-screen and covers the screen when the hamburger is tapped. (Bug exists in the original static site too.) */ @media (max-width: 920px) { .katori-page .nav__menu { top: 0 !important; bottom: auto !important; height: 100vh !important; height: 100dvh !important; padding-top: calc(64px + var(--s-4)) !important; transform: translateY(-100%) !important; } .katori-page.menu-open .nav__menu, body.menu-open .nav__menu { transform: translateY(0) !important; } } /* 2 — Re-skin native Button widgets (a + submit) to the design's .btn ---- */ /* `background/color/border` use !important so Elementor's global kit (default primary #61ce70) can never win the cascade. Scoped to .katori-page, so nothing else on the site is affected. */ .katori-page .elementor-button { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.6rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1; background: var(--fg) !important; color: var(--bg) !important; border: 1px solid var(--fg) !important; border-radius: 0 !important; text-decoration: none; cursor: pointer; text-align: left; width: auto; fill: currentColor; box-shadow: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), gap var(--dur) var(--ease); } .katori-page .elementor-button:hover, .katori-page .elementor-button:focus { gap: 1.2rem; background: var(--accent) !important; border-color: var(--accent) !important; color: var(--paper-50) !important; } .katori-page .btn--inverse .elementor-button { background: transparent !important; color: var(--fg) !important; border-color: var(--fg) !important; } .katori-page .btn--inverse .elementor-button:hover, .katori-page .btn--inverse .elementor-button:focus { background: var(--fg) !important; color: var(--bg) !important; } .katori-page .btn--ghost .elementor-button { background: transparent !important; color: var(--paper-50) !important; border-color: rgba(255,255,255,0.4) !important; } .katori-page .btn--ghost .elementor-button:hover, .katori-page .btn--ghost .elementor-button:focus { background: var(--paper-50) !important; color: var(--ink-900) !important; border-color: var(--paper-50) !important; } .katori-page .elementor-button-content-wrapper, .katori-page .elementor-button-text { display: inline; } /* 3 — Style the native Form widget to the design's contact form --------- */ .katori-page .katori-form .elementor-form-fields-wrapper { row-gap: var(--s-3); } .katori-page .katori-form .elementor-field-group { margin: 0; } .katori-page .katori-form .elementor-field-label { font-size: var(--t-xxs); letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 0.5rem; padding: 0; } .katori-page .katori-form .elementor-field-textual { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.65rem 0; font-size: var(--t-md); color: var(--fg); font-family: var(--font-body); box-shadow: none; transition: border-color var(--dur) var(--ease); } .katori-page .katori-form .elementor-field-textual:focus { border-bottom-color: var(--accent); } .katori-page .katori-form textarea.elementor-field-textual { min-height: 130px; resize: vertical; } .katori-page .katori-form .elementor-field-type-submit { margin-top: 0.5rem; }