/* ========================================= CREATOR CTRL SCAFFOLDING v2.0 ⚠️ DO NOT MODIFY THIS FILE ⚠️ This file contains protected navigation, responsive behavior, and core UI components. Only modify styles.css for template customization. ========================================= */ /* --- BASE RESET --- */ html, body { margin: 0; padding: 0; } body { background: var(--bg-body, #fff); color: var(--text-main, #000); font-family: var(--font-body, system-ui, sans-serif); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, system-ui, sans-serif); } section, header, footer, [data-block] { background-repeat: no-repeat; background-position: center; } :root { --color-bg: var(--bg-body, #fff); --color-accent: var(--color-primary, #6366f1); --border-width: 1px; --radius-main: var(--btn-radius, 4px); --tab-sidebar-rail-w: 72px; --tab-sidebar-expanded-w: 240px; --bottom-nav-height: 64px; --tablet-sidebar-blur: 20px; --tablet-item-padding: 10px 12px; --tablet-icon-size: 20px; } /* --- PER-DEVICE LAYOUT SCOPING (Plan 8) --- */ /* Wrappers with data-device-layout are hidden by default; only the wrapper matching html[data-device="X"] is shown. engine.js sets data-device on load and on resize (debounced 100ms). Legacy sites without [data-device-layout] wrappers are unaffected — selectors only activate when wrappers are present. */ [data-device-layout]{display:none;transition:opacity 100ms ease-out;} html[data-device="mobile"] [data-device-layout~="mobile"]{display:block;} html[data-device="tablet"] [data-device-layout~="tablet"]{display:block;} html[data-device="desktop"] [data-device-layout~="desktop"]{display:block;} /* --- NAV DEVICE SCOPING --- */ /* Nav blocks inject all 3 device variants (desktop/tablet/mobile) into the DOM simultaneously. Only the nav matching the active device should be visible. engine.js sets data-device on ; this CSS toggles nav visibility. */ [data-ar-nav-device]{display:none !important;} html[data-device="mobile"] [data-ar-nav-device="mobile"]{display:flex !important;} html[data-device="tablet"] [data-ar-nav-device="tablet"]{display:flex !important;} html[data-device="desktop"] [data-ar-nav-device="desktop"]{display:flex !important;} /* --- HERO DEVICE SCOPING --- */ /* Hero blocks inject all 3 device variants (desktop/tablet/mobile) into the DOM simultaneously via [data-ar-hero-device] containers. Only the container matching the active device should be visible. Follows the same pattern as nav scoping. */ [data-ar-hero-device]{display:none !important;} html[data-device="desktop"] [data-ar-hero-device="desktop"], html:not([data-device]) [data-ar-hero-device="desktop"]{display:block !important;} html[data-device="tablet"] [data-ar-hero-device="tablet"]{display:block !important;} html[data-device="mobile"] [data-ar-hero-device="mobile"]{display:block !important;} /* --- PANEL DEVICE SCOPING --- */ /* Slide panel sets are emitted as 3 sibling [data-ar-panel-device] wrappers (desktop/tablet/mobile) so each device has independent panel content. Only the active device's wrapper should be visible. Mirrors hero/nav scoping. */ /* pointer-events:none — the wrapper is a full-viewport grouping container at z-index:200 (#rnd-panel-anchor). With pe:auto it ate every click/selection on the base page when NO panel was open (desktop hero-panels: nav + text dead, only the higher-z fixed cart button worked). The wrapper must be click-through; the .ar-slide-panel children re-enable pe:auto so an open panel stays interactive, and close-on-outside still fires via the document-level listener. */ [data-ar-panel-device]{display:none !important;pointer-events:none;} html[data-device="desktop"] [data-ar-panel-device="desktop"], html:not([data-device]) [data-ar-panel-device="desktop"]{display:block !important;} html[data-device="tablet"] [data-ar-panel-device="tablet"]{display:block !important;} html[data-device="mobile"] [data-ar-panel-device="mobile"]{display:block !important;} /* --- HERO VIEWPORT MODEL (Plan E — RnD positioning) --- */ /* Hero is a relative container; children use position:absolute with pixel coordinates set by rnd-position-store per device breakpoint. engine.js section 0.5 skips scaling when hero is present (rnd + zoom replaces the old transform:scale workaround). */ /* Base hero properties (all devices) */ .hero { position: relative; width: 100%; height: 100vh; overflow: hidden; } /* Hero children — absolutely positioned via rnd inline styles. Excludes the background layer divs (.hero-bg legacy + .creatorctrl-image-bg-fill + .creatorctrl-image-bg-overlay + .creatorctrl-section-bg) so the section-bg-store's own inline positioning isn't co-opted by the rnd content rule. */ .hero > *:not(.hero-bg):not(.creatorctrl-image-bg-fill):not(.creatorctrl-image-bg-overlay):not(.creatorctrl-section-bg) { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; } /* The per-device hero wrapper must stretch to fill .hero so children inside it (which use absolute positioning from positions.json) resolve their coordinates against the full hero box, not against a shrink-wrapped wrapper. Without this the rule above gives the wrapper width:auto and variant content collapses into the top-left corner. */ .hero > [data-ar-hero-device] { inset: 0; width: 100%; height: 100%; } /* Background layer — absolute, behind content */ .hero-bg { position: absolute; inset: 0; z-index: 0; } /* Fluid typography for hero display titles */ html[data-device="desktop"] .hero .display-title { font-size: clamp(80px, 14vw, 220px); } html[data-device="tablet"] .hero .display-title { font-size: clamp(48px, 10vw, 120px); } html[data-device="mobile"] .hero .display-title { font-size: clamp(32px, 12vw, 64px); } /* --- ELASTIC CANVAS LAYERS (Hero Elastic Canvas — Phase 2 defaults) --- .rnd-bleed hosts the bleed-reveal layer (bg cover + center, runtime-sized by the rnd-autoscale script in SiteRendererService/TemplateController). .rnd-safe keeps authored pixel coords pixel-exact and centers inside bleed. These are sane defaults for non-iframe contexts and legacy pages that predate the server-injected