/*! * 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-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); } /* Chips read as deliberate UI rather than incidental grey pills — squared * off and left-accented in red, matching the homepage's `.map` spec chips * and the Finder's result pills. */ .adl .chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; } .adl .chip { font-size: 14px; font-weight: 700; color: var(--adl-ink-2); background: #fff; border: 1px solid var(--adl-line); border-left: 3px solid var(--adl-red); padding: 12px 18px; border-radius: 4px; transition: .2s; } .adl .chip-list .chip:hover { border-color: var(--adl-line); border-left-color: var(--adl-red); background: var(--adl-soft); } .adl .chips-solid .chip { background: var(--adl-ink); border-color: var(--adl-ink); border-left-color: var(--adl-red); color: #fff; } .adl .chips-solid .chip:hover { background: var(--adl-ink-2); border-color: var(--adl-ink-2); border-left-color: var(--adl-red); } /* ===== PRODUCT PAGE ===== * Built from the homepage's own component vocabulary rather than lookalikes * — the hex-icon cards (.pkg/.phex), certification strip (.trust) and * big-number band (.nums/.numgrid) are reused as-is by the product page's * widgets, so the two pages match by construction rather than by eye. * Only the pieces the homepage has no equivalent for are defined here. */ /* Small sections (one table, a chip row) don't need the homepage's full * 104px rhythm — that mismatch is what read as dead whitespace in review. */ .adl .section-tight { padding: 44px 0; } /* Stat Band ships with 5 fixed columns for the homepage; a product's "at a * glance" band only ever has 2–4 real counts. */ .adl .numgrid-2 { grid-template-columns: repeat(2, 1fr); } .adl .numgrid-3 { grid-template-columns: repeat(3, 1fr); } .adl .numgrid-4 { grid-template-columns: repeat(4, 1fr); } /* Package Grid is 3-up on the homepage; spec cards may be 2-up. */ .adl .pkg-grid-2 { grid-template-columns: repeat(2, 1fr); } .adl .pkg-grid-3 { grid-template-columns: repeat(3, 1fr); } /* ----------------------------------------------------------- breadcrumb * * The site header is `position: fixed` at 78px, and the homepage hero * clears it with its own `margin-top: 78px`. Any page whose first element * is a breadcrumb needs the same offset or it renders *underneath* the * header and is invisible — which is exactly what happened on the first * cut of the product page. */ .adl .crumbs { margin-top: 78px; border-bottom: 1px solid var(--adl-line); background: #fff; } /* Inside the product hero the breadcrumb is not the page's first element * (the hero itself carries the header offset), so it needs no margin, * border or background of its own. */ .adl .crumbs-bare { margin-top: 0; border-bottom: 0; background: transparent; } .adl .prod-hero-crumbs { position: relative; z-index: 3; margin-bottom: 26px; } .adl .prod-hero-crumbs .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; } .adl .crumbs .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding-top: 14px; padding-bottom: 14px; font-size: 13px; font-weight: 600; } .adl .crumbs a { color: var(--adl-grey); transition: .2s; } .adl .crumbs a:hover { color: var(--adl-red); } .adl .crumbs .sep { color: var(--adl-grey-2); } .adl .crumbs .cur { color: var(--adl-ink); font-weight: 800; } .adl .crumbs-dark { background: transparent; border-bottom-color: rgba(255,255,255,.14); } .adl .crumbs-dark a { color: rgba(255,255,255,.68); } .adl .crumbs-dark a:hover { color: #fff; } .adl .crumbs-dark .cur { color: #fff; } .adl .crumbs-dark .sep { color: rgba(255,255,255,.4); } /* --------------------------------------------------------- product hero * * Same visual weight as the homepage hero: full-bleed dark ground, red * accent geometry, oversized headline. */ .adl .prod-hero { position: relative; background: var(--adl-ink); color: #fff; overflow: hidden; /* Clears the fixed 78px header, same as the homepage hero does. */ margin-top: 78px; padding: 54px 0 84px; } .adl .prod-hero-wedge { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: linear-gradient(150deg, var(--adl-red) 0%, var(--adl-red-dark) 100%); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); opacity: .9; } .adl .prod-hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; } .adl .prod-hero-copy .eyebrow { color: #fff; } .adl .prod-hero-copy .eyebrow::before { background: #fff; } .adl .prod-hero-copy h1 { font-size: clamp(34px, 5vw, 60px); color: #fff; margin: 16px 0 14px; } .adl .prod-hero-copy .lead { color: rgba(255,255,255,.82); max-width: 520px; } .adl .prod-hero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; } .adl .prod-hero-chips .hchip { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-left: 3px solid var(--adl-red); padding: 9px 15px; backdrop-filter: blur(3px); } .adl .prod-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .adl .prod-hero-doc { margin-top: 26px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); } .adl .prod-hero-media { position: relative; } .adl .prod-hero-media .prod-hero-img { width: 100%; height: auto; display: block; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 70px rgba(0,0,0,.42); } @media (max-width: 900px) { .adl .prod-hero { padding: 64px 0 60px; } .adl .prod-hero-wedge { display: none; } .adl .prod-hero-grid { grid-template-columns: 1fr; gap: 36px; } .adl .prod-hero-media { order: -1; max-width: 420px; } } /* ---------------------------------------------------------- data tables */ .adl .spec-table-title { font-size: clamp(24px, 3vw, 34px); margin: 10px 0 20px; } .adl .spec-table-wrap { overflow-x: auto; } /* ===== IMAGE GRID ===== (About Us "industries we serve" band, and the * product page's "tile" style — bordered cards with the title overlaid, * matching the reference competitor page's 4-tile row) */ .adl .image-grid { display: grid; gap: 16px; } .adl .image-grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .adl .image-grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .adl .image-grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .adl .image-grid-cols-6 { grid-template-columns: repeat(6, 1fr); } .adl .image-grid-item { position: relative; display: block; overflow: hidden; background: var(--adl-soft); } .adl .image-grid-item img:not(.cmark) { width: 100%; height: 100%; object-fit: cover; display: block; } .adl .image-grid-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.65), transparent); } .adl .image-grid-caption .image-grid-item { aspect-ratio: 1; } .adl .image-grid-tile .image-grid-item { aspect-ratio: 4 / 3; border: 1px solid var(--adl-line); transition: .2s; } .adl .image-grid-tile .image-grid-item:hover { border-color: var(--adl-red); } .adl .image-grid-tile .image-grid-caption { font-size: 15px; font-weight: 800; line-height: 1.3; padding: 18px 20px; background: linear-gradient(0deg, rgba(20,20,18,.88), rgba(20,20,18,.1) 70%, transparent); } @media (max-width: 860px) { .adl .image-grid-cols-4, .adl .image-grid-cols-6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .adl .image-grid-cols-3, .adl .image-grid-cols-4, .adl .image-grid-cols-6 { grid-template-columns: repeat(2, 1fr); } } /* ===== IMAGE BANNER (full-bleed background-photo band) ===== */ .adl .img-banner { position: relative; overflow: hidden; background: var(--adl-ink); color: #fff; display: flex; align-items: center; } .adl .img-banner-tall { min-height: 480px; } .adl .img-banner-short { min-height: 280px; } .adl .img-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; } .adl .img-banner-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(20,20,18,.78), rgba(226,35,26,.32)); } .adl .img-banner > .wrap { position: relative; z-index: 3; width: 100%; } .adl .img-banner-text.align-center { text-align: center; max-width: 720px; margin: 0 auto; } .adl .img-banner-text .eyebrow { color: #fff; } .adl .img-banner-text .eyebrow::before { background: #fff; } .adl .img-banner-text .title { color: #fff; } .adl .img-banner-text .lead { color: rgba(255,255,255,.88); max-width: none; } .adl .img-banner-text.align-center .lead { margin-left: auto; margin-right: auto; } .adl .img-banner .cmark { z-index: 4; } /* ===== CONTACT CARDS ===== (reuses .pkg / .pkg-grid from Package Grid) */ .adl .contact-cards.pkg-grid { margin-top: 0; } .adl .contact-card .contact-value { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--adl-ink); word-break: break-word; } .adl a.contact-card .contact-value, .adl .contact-card a.contact-value:hover { color: var(--adl-red); } /* ===== HEX ICON BOXES (.phex) ===== */ .adl .phex { width: 48px; height: 48px; min-width: 48px; border-radius: 8px; background: rgba(211, 47, 47, 0.08); border: 1px solid rgba(211, 47, 47, 0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: background .22s, border-color .22s; } .adl .phex svg { width: 24px; height: 24px; stroke: var(--adl-red, #D32F2F); flex-shrink: 0; transition: stroke .22s; } .adl .pkg:hover .phex { background: var(--adl-red, #D32F2F); border-color: var(--adl-red, #D32F2F); } .adl .pkg:hover .phex svg { stroke: #fff; } /* ===== CONTACT FORM ===== */ .adl .contact-form { margin-top: 8px; } .adl .form-row { margin-bottom: 18px; } .adl .form-row label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--adl-ink-2); margin-bottom: 6px; } .adl .form-row input, .adl .form-row textarea { width: 100%; border: 1.5px solid var(--adl-line); border-radius: 4px; padding: 13px 16px; font-size: 15px; font-family: var(--adl-sans); color: var(--adl-ink); background: #fff; transition: .2s; } .adl .form-row input:focus, .adl .form-row textarea:focus { outline: none; border-color: var(--adl-red); } .adl .form-row textarea { resize: vertical; } .adl .contact-form .btn { border: 0; } /* Honeypot: kept in normal flow (not display:none) so spam bots that skip * hidden fields still fill it, but positioned off-screen for real visitors. */ .adl .form-hp { position: absolute; left: -9999px; top: -9999px; } .adl .form-success { border: 2px solid var(--adl-red); padding: 24px 28px; font-size: 15px; font-weight: 700; color: var(--adl-ink); } .adl .form-error { background: #fdeceb; border: 1.5px solid var(--adl-red); color: var(--adl-red-dark); padding: 14px 18px; font-size: 14px; font-weight: 700; margin-bottom: 18px; } /* ===== RICH TEXT (About Us body copy) ===== */ .adl .rich-text { color: var(--adl-ink-2); font-size: 16px; line-height: 1.75; } .adl .rich-text p { margin-bottom: 18px; } .adl .rich-text h2 { font-size: 26px; margin: 34px 0 14px; color: var(--adl-ink); } .adl .rich-text h3 { font-size: 20px; margin: 26px 0 12px; color: var(--adl-ink); } .adl .rich-text ul { margin: 0 0 18px 22px; } .adl .rich-text li { margin-bottom: 8px; } .adl .rich-text strong { color: var(--adl-ink); } .adl .rich-text-image { margin: 24px 0; } .adl .rich-text-image img { width: 100%; height: auto; display: block; border: 1px solid var(--adl-line); } .adl .formulation-row dd { font-weight: 700; color: var(--adl-ink); } /* Icon List reuses the homepage Applications `.applist` (a 1-column grid * there); a product's applications list reads better multi-column. */ .adl .applist-2 { grid-template-columns: repeat(2, 1fr); gap: 2px 22px; } .adl .applist-3 { grid-template-columns: repeat(3, 1fr); gap: 2px 22px; } @media (max-width: 860px) { .adl .applist-2, .adl .applist-3 { grid-template-columns: 1fr; } } /* Stat Band with a hexagon stage: the numbers sit beside the hexagon * rather than spanning the band, so they need their own compact grid. * Used on product pages that have no Applications section, so the * hexagon treatment still appears somewhere on the page. */ .adl .nums .appwrap { margin-top: 44px; } .adl .numgrid-staged { margin-top: 0; } .adl .numgrid-staged .nstat { padding: 26px 18px; } @media (max-width: 860px) { .adl .numgrid-staged { grid-template-columns: repeat(2, 1fr); } } /* ===== WORDPRESS ADMIN BAR ===== * WP adds `html { margin-top: 32px }` and pins its toolbar at viewport * top. Our site header is `position: fixed; top: 0`, which ignores that * html margin — so when logged in it sits *behind* the toolbar. (Logged * out, and in incognito, there is no toolbar and nothing looks wrong, * which is why this only showed up for admins.) * * The breakpoints mirror WordPress's own admin-bar.css: 32px tall above * 782px, 46px below it, and below 600px the bar switches to * `position: absolute` and scrolls away — so the header goes back to 0 * there rather than leaving a permanent 46px gap. */ .admin-bar .adl header { top: 32px; } .admin-bar .adl .mobnav { top: 110px; } @media screen and (max-width: 782px) { .admin-bar .adl header { top: 46px; } .admin-bar .adl .mobnav { top: 124px; } } @media screen and (max-width: 600px) { .admin-bar .adl header { top: 0; } .admin-bar .adl .mobnav { top: 78px; } } /* ===== BLOG ===== */ .adl .post-meta { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); } .adl .post-meta .sep { margin: 0 8px; } /* WordPress content can contain any block, so the article body needs real * element styling rather than the fixed section components used elsewhere. */ .adl .post-body { font-size: 17px; line-height: 1.8; color: var(--adl-ink-2); } .adl .post-body > * + * { margin-top: 22px; } .adl .post-body h2 { font-size: 30px; margin-top: 44px; color: var(--adl-ink); } .adl .post-body h3 { font-size: 22px; margin-top: 34px; color: var(--adl-ink); } .adl .post-body a { color: var(--adl-red); text-decoration: underline; } .adl .post-body ul, .adl .post-body ol { margin-left: 22px; } .adl .post-body li + li { margin-top: 8px; } .adl .post-body img { height: auto; } .adl .post-body blockquote { border-left: 3px solid var(--adl-red); padding: 6px 0 6px 24px; font-size: 19px; color: var(--adl-ink); } .adl .post-body code { background: var(--adl-soft); padding: 2px 6px; font-size: .92em; } .adl .post-body table { width: 100%; border-collapse: collapse; } .adl .post-body th, .adl .post-body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--adl-line); } .adl .post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--adl-line); font-size: 14px; font-weight: 700; } .adl .post-nav a { color: var(--adl-ink-2); transition: .2s; } .adl .post-nav a:hover { color: var(--adl-red); } /* Pagination — WordPress markup, styled to the theme's squared language. */ .adl .navigation.pagination { margin-top: 48px; } .adl .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .adl .nav-links .page-numbers { min-width: 44px; padding: 11px 15px; text-align: center; border: 1px solid var(--adl-line); border-radius: 4px; font-size: 14px; font-weight: 700; color: var(--adl-ink-2); transition: .2s; } .adl .nav-links a.page-numbers:hover { border-color: var(--adl-red); color: var(--adl-red); } .adl .nav-links .page-numbers.current { background: var(--adl-red); border-color: var(--adl-red); color: #fff; } .adl .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } /* ===== BLOG BANDS ===== * The blog page carries two different kinds of thing — LinkedIn posts that * leave the site, and articles published here. Each band gets an eyebrow * label, a heading and (for articles) a soft ground, so the distinction is * readable rather than something the visitor has to infer from the cards. */ .adl .band-title { margin: 14px 0 10px; } .adl .band-note { font-size: 14.5px; color: var(--adl-grey); margin-bottom: 6px; } .adl .band-empty { background: #fff; border: 1px solid var(--adl-line); border-left: 3px solid var(--adl-red); padding: 22px 26px; margin-top: 22px; font-size: 15px; } /* li-grid carries its own top margin for the homepage's centred heading; * these bands set their own rhythm above it. */ .adl .band-title + .band-note + .li-grid, .adl .band-title + .li-grid { margin-top: 30px; }