/*! * ADDLAR — theme-only additions. * * tokens.css and widgets.css are GENERATED from the static mockup and get * overwritten whenever the design is re-ported. Anything hand-written for the * WordPress build belongs here instead, so it survives regeneration. */ /* The mockup's reset was `*{margin:0}`, which also caught . Scoped to * `.adl *` it no longer can, so the browser's default 8px body margin would * inset every full-bleed section. Reset it here — this is a theme-level * concern, not a section one. */ body { margin: 0; } /* Hero: optional scrim, toggled per-widget in Elementor. */ .adl .hero-visual[data-noscrim]::after { display: none; } /* Elementor wraps each widget; make sure nothing clips our full-bleed sections. */ .elementor-widget-container { overflow: visible; } /* The seeder gives every container zero padding, but guard against a stray * theme/kit padding reintroducing a horizontal gap on full-bleed sections. */ .elementor-section-full_width > .elementor-container, .e-con.e-con--full > .e-con-inner { max-width: none; } /* Editor affordance: an empty repeater would otherwise render an invisible * section that is impossible to select on the canvas. */ .elementor-editor-active .adl section:empty::after { content: attr(data-empty-label); display: block; padding: 48px 32px; text-align: center; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--adl-grey-2); border: 1px dashed var(--adl-line); } /* ===== PRODUCT DATA SHEET FRAGMENTS ===== * Phase 2: the tabular PDS data (inc/products-render.php) is pre-rendered to * plain HTML and bound into Elementor via a Dynamic Tag + HTML widget — see * the Phase 2 plan's "avoiding a new paid dependency" section. Ported design * tokens have no data-table component (the mockup never needed one), so * this whole block is hand-written, matching the same visual language: * red accent rule, soft-grey surfaces, no rounded corners except buttons. */ /* tokens.css only styles h2.title (every homepage section heading is an h2 * by design); a single product's own page correctly uses h1 for its one * page title, so that variant is added here rather than touching the * generated file. */ .adl h1.title { font-size: clamp(30px, 4.4vw, 52px); color: var(--adl-ink); margin: 18px 0 14px; line-height: 1.05; letter-spacing: -.02em; font-weight: 800; } .adl .spec-description { color: var(--adl-grey); margin: 0 0 24px; } .adl .spec-description p + p { margin-top: 12px; } .adl .spec-table-note { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--adl-red); margin: 28px 0 10px; } .adl .spec-table { width: 100%; border-collapse: collapse; margin: 12px 0 28px; font-size: 14.5px; } .adl .spec-table th, .adl .spec-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--adl-line); } .adl .spec-table thead th { background: var(--adl-soft); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--adl-ink-2); border-bottom: 2px solid var(--adl-red); } .adl .spec-table tbody tr:hover { background: var(--adl-soft); } .adl .spec-table tbody td:first-child { font-weight: 700; color: var(--adl-ink); } .adl .chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 28px; } .adl .chip { background: var(--adl-soft-2); color: var(--adl-ink-2); font-size: 13.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px; } .adl .chips-approvals .chip { background: #fff; border: 1.5px solid var(--adl-line); } .adl .formulation-list { margin: 12px 0 28px; } .adl .formulation-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--adl-line); font-size: 14.5px; } .adl .formulation-row dt { color: var(--adl-grey); } .adl .formulation-row dd { font-weight: 700; color: var(--adl-ink); }