/* ========================================================================== Voyara — Component Wrapper page (com_wrapper, menu 351) Design hsKKR (light) / amMxS (dark) / VhWkM (mobile): a Note Bar callout above the embedded component iframe, framed to the Voyara surface. Rendered via html/com_wrapper/wrapper/default.php (filemtime cache-busted). ========================================================================== */ /* ---- Layout corrections ------------------------------------------------- */ /* D1: Hide stray T4 masthead (pen has NO masthead on this page) */ body.item-351 .t4-masthead { display: none !important; } /* D2: Hide stray T4 breadcrumbs (pen has NO breadcrumbs on this page) */ body.item-351 .t4-breadcrumbs { display: none !important; } /* D3: Remove T4 main-body top padding (blank strip below nav) */ body.item-351 #t4-main-body { padding-top: 0 !important; padding-bottom: 0 !important; } /* D4: VW-escape — Note Bar + Body are inside .t4-section-inner.container (1140px cap); break them out to full viewport width. */ .voy-component-note, .voy-component-body { margin-left: calc(50% - 50vw); width: 100vw; max-width: none; } /* ---- Page background ----------------------------------------------------- */ .voy-component-page { background: var(--voy-bg); } /* ---- Note Bar (xRO7A): elevated bg, bottom border, centered mono label --- */ .voy-component-note { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 48px; background: var(--voy-elevated); /* #F2EBE1 light / #1C1712 dark */ border-bottom: 1px solid var(--voy-border); /* #E5DCD0 light / #352C24 dark */ } .voy-component-note__ic { width: 14px; height: 14px; color: var(--voy-muted); flex: 0 0 14px; } .voy-component-note__label { font-family: var(--voy-font-mono); font-size: 11px; font-weight: 400; letter-spacing: .5px; color: var(--voy-muted); text-transform: uppercase; } /* ---- Body (X5kIam): bg, generous padding, centered frame ---------------*/ .voy-component-body { background: var(--voy-bg); padding: 56px 48px; } /* ---- Iframe frame: NO card chrome — .pen hsKKR/amMxS/VhWkM have the content flush on the cream/dark Body bg (no border, radius or shadow at any width). The frame bg is forced cream so any iframe gutter blends with the Body. NOTE: the iframe is a SEPARATE document; its own bg cannot be set from here. In dark the wrapper's JS injects the dark body bg; the LIGHT iframe body bg must be injected the same way in html/com_wrapper/wrapper/default.php (orchestrator-needed — template PHP, out of component.css scope). */ /* D6: .contentpane class in T4 optimize bundle sets bg:#FFF → beat with !important */ .voy-component-frame { max-width: 1140px; margin: 0 auto; background: var(--voy-bg) !important; /* #FAF6F0; overrides .contentpane { bg:#FFF } */ border: none; border-radius: 0; overflow: hidden; box-shadow: none; } .voy-component-frame .com-wrapper__iframe, .voy-component-frame iframe { display: block; width: 100%; border: 0; /* no second border on the iframe */ background: var(--voy-bg) !important; } /* Label variants: desktop shows full text, mobile shows short "NO CHROME" version */ .voy-component-note__label--mobile { display: none; } .voy-component-note__label--desktop { display: inline; } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 640px) { /* Note Bar: narrower padding, slightly smaller icon + label (pen VhWkM iBxPH) */ .voy-component-note { padding: 10px 20px; text-align: center; } .voy-component-note__ic { width: 13px; /* D7: pen VhWkM icon = 13×13 */ height: 13px; flex: 0 0 13px; } .voy-component-note__label { font-size: 10px; /* pen VhWkM label fs=10 */ } /* Switch to short mobile label (pen VhWkM iBxPH: "COMPONENT VIEW · NO CHROME") */ .voy-component-note__label--desktop { display: none; } .voy-component-note__label--mobile { display: inline; } /* Body: pen VhWkM v3HKF padding=[36,20,48,20] */ .voy-component-body { padding: 36px 20px 48px; /* D8: was 32px 20px */ } /* Mobile: frame has no visible card border (pen v3HKF fill=$bg, content sits flush on cream) */ .voy-component-frame { border: none; border-radius: 0; box-shadow: none; } } /* ========================================================================== Dark mode (html.t4-dark) ========================================================================== */ html.t4-dark .voy-component-page, html.t4-dark .voy-component-body { background: var(--voy-bg); } html.t4-dark .voy-component-note { background: var(--voy-elevated); /* #1C1712 dark */ border-bottom-color: var(--voy-border); /* #352C24 dark */ } html.t4-dark .voy-component-note__ic, html.t4-dark .voy-component-note__label { color: var(--voy-muted); } /* #9C9085 dark */ html.t4-dark .voy-component-frame { background: var(--voy-bg) !important; /* #15110E dark body bg */ border: none; /* .pen amMxS has no card chrome */ box-shadow: none; } html.t4-dark .voy-component-frame .com-wrapper__iframe, html.t4-dark .voy-component-frame iframe { background: var(--voy-bg) !important; }