/* === _base.css (generic) === */ /* ============================================================================ * _base.css — generic overrides applied to EVERY ported WP page. * * Loaded by `scripts/port/mirror.ts` BEFORE `.css` so per-slug files * can override anything here. Both files are scoped to `.mirror-root` via * `lib/css-scope.ts` and copied to `public/extracted//` for the * mirror layout's `` tags. * * Keep this file generic. Slug-specific tweaks (BEM ids `XX-YYY`, hero * sub-classes pinned to a single page, motion.page floating labels) * belong in `.css`. If you find yourself adding a rule keyed off * `--23-` or `--7-`, that's a per-slug rule — move it. * ========================================================================= */ /* --- Body restoration ---------------------------------------------------- * Upstream's `.breakdance { ... }` block applies font-family, color, and * line-height to . Phase B.1 (translate.ts) * drops the `.breakdance` class entirely (no project meaning), silently * stripping these three declarations. Recreate them on directly. */ body { background-color: var(--bde-background-color); color: var(--bde-body-text-color); font-family: var(--bde-body-font-family); font-size: var(--bde-body-font-size); font-weight: 200; line-height: 1.6; } /* --- Long-token safety net (Polish orphan NBSPs) ------------------------- * strip-chrome.ts / bake-orphans.ts glue single-letter words to the word * after them with a NBSP (lib/typography/orphans.ts), which creates * unbreakable tokens. `maxGlueLength` caps how long those get; this is the * belt to that pair of braces — at 320 px a pathological token can still * never push the page into horizontal scroll. */ .mirror-root .text, .mirror-root .rich-text, .mirror-root .heading, .mirror-root p, .mirror-root li, .mirror-root h1, .mirror-root h2, .mirror-root h3, .mirror-root h4, .mirror-root h5, .mirror-root h6 { overflow-wrap: break-word; } /* Tailwind v4 Preflight resets margins on p / h1-h6 to 0. Upstream relies * on the browser's default UA stylesheet (1em top + bottom on

) for * paragraph spacing inside rich-text blocks. Restore the UA default ONLY * inside `.rich-text` to avoid inflating other widgets that use

as a * structural element (e.g. counter `

`). */ .mirror-root .rich-text p { margin-block-start: 1em; margin-block-end: 1em; } /* --- Font shadowing ------------------------------------------------------ * The upstream bundle's @font-face URLs point at * `https://imprero.com/.../conthrax_*.woff2` which fail to load from * localhost (cross-origin). We have the same fonts locally under * /fonts/conthrax/. These rules SHADOW the upstream @font-face by * declaring the same family name later in the cascade so the browser * picks our URL. */ @font-face { font-family: 'Conthrax Bold Italic'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/conthrax/conthrax_bold_italic.woff2') format('woff2'); } @font-face { font-family: 'Conthrax SemiBold Italic'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/conthrax/conthrax_semibold_italic.woff2') format('woff2'); } @font-face { font-family: 'Conthrax UltraThin Italic'; font-style: italic; font-weight: 100; font-display: swap; src: url('/fonts/conthrax/conthrax_extralight_italic.woff2') format('woff2'); } @font-face { font-family: 'Conthrax Italic'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/conthrax/conthrax_regular_italic.woff2') format('woff2'); } /* --- Diff equalizer (?no-atmosphere=1) ----------------------------------- * When the flag is on, hide GradientField and flatten body bg so diff * capture compares content-only against the upstream equalizer (which * forces flat black via diff.ts EQUALIZER_CSS). Selector targets * GradientField's existing DOM signature without modifying the component * (see components/brand/GradientField.tsx). */ html[data-no-atmosphere="true"] [aria-hidden="true"].pointer-events-none.absolute.inset-0.-z-10 { display: none !important; } html[data-no-atmosphere="true"], html[data-no-atmosphere="true"] body { background: #000 !important; background-image: none !important; } /* --- Animation infrastructure ------------------------------------------- * The rough-notation library injects this @keyframes at runtime via JS, * so Phase A's static stylesheet capture missed it. Hardcoded so SVG * underline strokes draw on page load. */ @keyframes rough-notation-dash { to { stroke-dashoffset: 0; } } /* Clear entrance-state initial transforms once the element reaches its * final state. The bundled CSS contains unconditional per-element rules * (e.g. `.image--XX-YYY { transform: translateX(-10px) }`) that set the * starting frame of the upstream entrance animations. The upstream * runtime (and its Custom Code "snap-to-final" snippet) clears these via * inline `transform: none`. Mirror the same behavior in CSS scoped to * `.is-animated`. */ .mirror-root [data-entrance].is-animated { transform: none !important; } /* --- Container width sync (annotation #22) ------------------------------- * Upstream bundle defines `:root { --bde-section-width: 1480px }` but the * brand Container uses `--container-max: 1520px`. Vertical edges of the * Nav logo + body sections didn't line up. Override scoped to * `.mirror-root` so body sections widen to 1520px (matching brand * Container). The 40px horizontal padding stays the same on both sides * → 1600px total stage width on desktop. */ .mirror-root { --bde-section-width: 1520px; } /* --- Replacement underline animation (annotations #21 + #43) ------------- * Upstream's rough-notation lib draws a hand-drawn purple line under * `.dual-heading--secondary`. We don't run that JS; strip-chrome.ts * removes the captured (mispositioned) SVG. Replace with a CSS-only * pseudo-element underline that animates left → right over 2s after a 2s * delay, sitting 10px below the text baseline. Class is generic across * pages — any heading with `.dual-heading--secondary.js-annotate` gets * the underline. */ .mirror-root .dual-heading--secondary.js-annotate { position: relative; display: inline-block; } .mirror-root .dual-heading--secondary.js-annotate::after { content: ''; position: absolute; left: 0; bottom: -10px; height: 5px; /* Full width from the first frame, revealed by scaleX — NOT animated from * `width: 0`. * * Animating width made this heading the Largest Contentful Paint element at * ~2.2s on the live site: the pseudo-element sits outside the text box * (bottom: -10px), so when it grew at the 2s mark the heading's painted * rectangle grew with it, and Chrome logged a new, larger contentful paint. * FCP was already ~200ms — the page just kept re-qualifying its LCP. * * scaleX is visually identical (still draws left → right) but the element's * rect is constant from first paint, so no late LCP candidate. It is also * cheaper: transforms composite on the GPU, whereas animating width forced * layout on every frame. */ width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--bde-brand-primary-color, #7c3aed); animation: dual-underline-draw 2s ease-out 2s forwards; } @keyframes dual-underline-draw { to { transform: scaleX(1); } } /* --- product-spotlight section padding (annotation #46) ------------------ * Product-spotlight sections (FotAi, PicBot, Mosaix, PixDron, ChiMind, * GraffitX, …) currently inherit `padding-top: 200px` from the bundled * section rule. Owner wants 150px on every spotlight. Hero sections have * their own override per-page in `.css` (typical 140px). */ .mirror-root .section.product-spotlight .section-container { padding-top: 150px; } /* ============================================================================ * RESPONSIVE OVERRIDES — generic patterns * * Upstream WP pages were never optimized for narrow viewports. The bundle * ships 48 media queries but most target legacy widget-specific concerns; * the actual page-level layout (flex rows that don't wrap, fixed pixel * widths on cards, hard-coded inner paddings, sections pinned at 200px * vertical padding) stays desktop-shaped at every viewport. This block * fixes the recurring patterns. * * Constraints (owner-set): * • No `!important` — match bundle specificity via `.mirror-root` ancestor. * * Breakpoints align to brand Tailwind defaults (lg=1024, md=768, sm=480). * ========================================================================= */ /* --- Section padding scales fluidly ------------------------------------- */ @media (max-width: 1023px) { .mirror-root { --bde-section-vertical-padding: 80px; --bde-section-horizontal-padding: 24px; } .mirror-root .section.section--hero .section-container { padding-top: 110px; } .mirror-root .section.product-spotlight .section-container { padding-top: 110px; } } @media (max-width: 767px) { .mirror-root { --bde-section-vertical-padding: 60px; --bde-section-horizontal-padding: 30px; } .mirror-root .section.section--hero .section-container { padding-top: 90px; padding-bottom: 60px; } .mirror-root .section.product-spotlight .section-container { padding-top: 70px; padding-bottom: 60px; } } @media (max-width: 479px) { .mirror-root { --bde-section-horizontal-padding: 30px; } } /* --- Headings scale fluidly (no media query — clamp handles all widths) - * Bundle: h3=3.4rem, h4=1.56rem flat across all viewports. Replace with * fluid clamps anchored to the bundled values at desktop end. */ .mirror-root .heading--h3, .mirror-root h3 { font-size: clamp(1.8rem, 4.5vw, 3.4rem); } .mirror-root .heading--h4, .mirror-root h4 { font-size: clamp(1.1rem, 2.5vw, 1.56rem); } .mirror-root .heading--h1, .mirror-root h1 { font-size: clamp(1.6rem, 4vw, var(--bde-h1-font-size, 2.5rem)); } /* --- Generic block stacking at .css`. */ @media (max-width: 1279px) { .mirror-root .counter { width: 100%; max-width: 360px; } } @media (max-width: 767px) { .mirror-root .counter { max-width: 100%; } } /* --- Images respect intrinsic max-width inside narrow columns ---------- */ @media (max-width: 767px) { .mirror-root .image img, .mirror-root .image picture { max-width: 100%; height: auto; } } /* ============================================================================ * Ported content stacking containment. * * The brand