/* DexMat UI 1.5.0 (v3 layout, Application and Industry Build Brief, 2026-10-22). Row wrap rules carry [data-node] so they outrank Beaver Builder's per-breakpoint row padding (.fl-row[data-node] > .fl-row-content-wrap). Beaver Builder 2.9 renders a Heading module as one element (.fl-module.fl-heading), so heading rules are written as descendant and compound selectors. Site-wide design system for Beaver Builder pages. Source of truth: the token files in Downloads/App-Industry-Build/tokens (copied into :root below) and the build briefs. Class reference: CLASSES.md in this plugin. Classes are set in the builder's Advanced tab on rows (.fl-row), columns (.fl-col) and modules (.fl-module). Copy lives in the modules. Nothing here targets store or product markup; the store keeps dexmat-store.css. */ :root { /* ====== DESIGN TOKENS: copied verbatim from Downloads/App-Industry-Build/tokens/*.css at release time (1.5.0, 2026-10-23). Do not edit here. Change the token files, then re-run build-css.py. The release check diffs this block against those files. ====== */ /* ---- tokens/colors.css ---- */ /* Brand primaries — use freely */ --dx-black: #000000; --dx-teal: #2AD2C9; --dx-white: #FFFFFF; --dx-text: #3D3D3D; /* 85% black — body copy */ --dx-rule: #DADAD6; /* hairlines, link-list and FAQ rules (v3) */ /* Secondary — sparingly */ --dx-deep-sea: #004851; --dx-robins-egg: #69B3E7; --dx-mossy: #AADB1E; /* Tertiary — rare */ --dx-golden: #FEDB00; --dx-marigold: #FF9E1B; --dx-blush: #F1BCD5; --dx-berry: #BF4DA5; /* Web neutrals derived from the site mockup */ --dx-canvas: #E8E8E6; /* page desk / outside the frame */ --dx-surface-muted: #F4F4F2; /* alternating light band */ --dx-border-light: #E4E4E1; --dx-rule-strong: #CFCFCB; /* proof-band vertical rule (v3) */ --dx-text-muted: #8A8A86; /* v3 */ --dx-placeholder-a: #E4E4E1; --dx-placeholder-b: #EFEFEC; --dx-placeholder-ink: #8A8A86; /* Semantic aliases — prefer these in components */ --surface-page: var(--dx-white); --surface-inverse: var(--dx-black); --surface-band: var(--dx-surface-muted); --surface-scrim: rgba(0, 0, 0, 0.6); --surface-scrim-band: rgba(0, 0, 0, 0.72); /* who-it-is-for photo band (v3) */ --text-heading: var(--dx-black); --text-body: var(--dx-text); --text-muted: var(--dx-text-muted); --text-on-inverse: var(--dx-white); --text-on-inverse-body: rgba(255, 255, 255, 0.86); /* v3: 82 to 88% */ --text-on-inverse-band: rgba(255, 255, 255, 0.82); /* emphasis band body */ --text-on-inverse-tile: rgba(255, 255, 255, 0.78); /* stat tile sentence */ --text-on-inverse-lead: rgba(255, 255, 255, 0.90); /* hero subhead */ --text-on-inverse-muted: rgba(255, 255, 255, 0.62); --text-accent: var(--dx-teal); --border-hairline: var(--dx-rule); --border-on-inverse: rgba(255, 255, 255, 0.14); --border-on-inverse-strong: rgba(255, 255, 255, 0.28); --accent: var(--dx-teal); --accent-ink: var(--dx-deep-sea); /* teal that passes AA on white — links */ /* ---- tokens/typography.css ---- */ --font-display: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif; --font-body: 'Noto Sans', 'Helvetica Neue', Helvetica, sans-serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; --fw-extralight: 200; /* nav items */ --fw-light: 300; /* all display type, buttons */ --fw-regular: 400; /* eyebrows, card titles */ --fw-medium: 500; --fw-bold: 700; /* body emphasis only */ /* Display — Oswald 300 unless noted */ --type-display-xl: 76px; --lh-display-xl: 1.04; /* h1, max about 15 characters per line (v3) */ --type-display-l: 56px; --lh-display-l: 1.06; /* closing CTA h2 */ --type-display-m: 52px; --lh-display-m: 1.10; /* section hero */ --type-display-s: 48px; --lh-display-s: 1.08; /* section h2, max 16 to 17ch, balanced (v3) */ --type-pull: 28px; --lh-pull: 1.25; /* emphasis-band pull line, teal, max 28ch (v3) */ --type-heading: 38px; --lh-heading: 1.15; /* centered statements */ --type-stat: 60px; --lh-stat: 1.00; /* stat numerals, teal (v3) */ /* Titles — Oswald 400 */ --type-title-l: 25px; --lh-title-l: 1.22; --type-title-m: 24px; --type-title-s: 22px; /* tab titles, FAQ questions (Oswald 300) */ --type-tab-title-phone: 18px; --type-title-xs: 19px; /* UI — Oswald, uppercase, tracked */ --type-nav: 13px; --ls-nav: 0.14em; --type-dropdown: 13px; --ls-dropdown: 0.14em; --type-button: 15px; --ls-button: 0.15em; --type-button-sm: 13px; --type-eyebrow: 13px; --ls-eyebrow: 0.22em; --lh-eyebrow: 20px; --type-meta: 12px; --ls-meta: 0.18em; /* Body — Noto Sans */ --type-body-l: 19px; --lh-body-l: 1.62; --type-body-m: 18px; --lh-body-m: 1.65; /* body, max 58ch (v3) */ --type-body-faq: 17px; --lh-body-faq: 1.60; /* FAQ answers, max 60ch */ --type-body-s: 15px; --lh-body-s: 1.60; --type-body-xs: 13px; --lh-body-xs: 1.50; --type-caption: 14px; /* media captions, tab descriptors */ --measure-body: 58ch; --measure-faq: 60ch; --measure-h2: 17ch; --measure-pull: 28ch; --type-mono: 11px; --ls-mono: 0.08em; /* ---- tokens/spacing.css ---- */ --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px; --space-5: 14px; --space-6: 18px; --space-7: 22px; --space-8: 28px; --space-9: 32px; --space-10: 40px; --space-11: 56px; --space-12: 64px; --space-13: 84px; --space-14: 96px; /* Layout */ --page-width: 1440px; --gutter: 48px; /* left/right page padding, every band (v3) */ --nav-height: 84px; --band-pad-y: 120px; /* every content row, light or dark (v3) */ --band-pad-y-short: 96px; /* proof bands */ --band-pad-y-photo: 136px; /* who-it-is-for photo band */ --hero-pad-top: 168px; --hero-pad-bottom: 160px; --band-pad-y-dark: 120px; /* same as light (v3) */ --grid-gap: 32px; /* row gap, 32 to 48 */ --grid-col-gap: 96px; /* two-column text grid (v3) */ --grid-min-col: 440px; /* minmax(min(100%, 440px), 1fr) */ --tile-gap: 40px; --tile-min: 260px; --tiles-top: 88px; --para-gap: 22px; --eyebrow-rule-gap: 8px; --eyebrow-to-h2: 32px; --body-offset: 6px; --card-gap: 28px; --hero-height: 880px; /* ---- tokens/effects.css ---- */ --radius: 0px; /* nothing is rounded except avatars/play button */ --radius-round: 50%; --border-width: 1px; --rule-tab: 2px; /* tab top rule */ --rule-accent: 2px; /* teal/black underline under eyebrows */ --shadow-frame: 0 24px 60px rgba(0, 0, 0, 0.18); /* mockup frames only, not site chrome */ --scrim-nav: rgba(0, 0, 0, 0.6); --blur-nav: blur(6px); /* Hero: horizontal protection gradient, image stays readable on the right */ --gradient-hero: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.82) 42%, rgba(0,0,0,0.25) 78%, rgba(0,0,0,0.10) 100%); /* v3; photo positioned about 75% horizontal */ /* Edgeless nav variant: vertical fade from solid black */ --gradient-nav-fade: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 22%, rgba(0,0,0,0.82) 34%, rgba(0,0,0,0.42) 46%, rgba(0,0,0,0.12) 56%, rgba(0,0,0,0) 66%); /* Image placeholders — 45° stripes + monospace label */ --placeholder-light: repeating-linear-gradient(45deg, #E4E4E1 0 8px, #EFEFEC 8px 16px); --placeholder-dark: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 8px, rgba(255,255,255,0.09) 8px 16px); --transition: 160ms ease; /* ====== end tokens ====== */ /* dm- aliases: the names the rules below use. They point at the tokens; nothing after this block carries a literal from the brief. */ --dm-black: var(--dx-black); --dm-white: var(--dx-white); --dm-teal: var(--dx-teal); --dm-deep-sea: var(--dx-deep-sea); --dm-text: var(--dx-text); --dm-muted: var(--dx-text-muted); --dm-muted-2: #5A5A58; /* small print; unchanged from 1.1 */ --dm-band: var(--dx-surface-muted); --dm-rule: var(--dx-rule); --dm-rule-strong: var(--dx-rule-strong); --dm-oswald: var(--font-display); --dm-sans: var(--font-body); --dm-gutter: var(--gutter); --dm-header: var(--nav-height); } /* ============================================================ rows */ /* .dm-section: the standard content row. 1440px box, --gutter each side, --band-pad-y top and bottom (v3: 48 / 120). Row background colour and photo stay in the row's own settings so they can be changed in the builder. */ .fl-row[data-node].dm-section > .fl-row-content-wrap { padding: var(--band-pad-y) var(--dm-gutter); } .fl-row[data-node].dm-section--short > .fl-row-content-wrap { padding-top: var(--band-pad-y-short); padding-bottom: var(--band-pad-y-short); } /* proof band */ .fl-row[data-node].dm-section--photo > .fl-row-content-wrap { padding-top: var(--band-pad-y-photo); padding-bottom: var(--band-pad-y-photo); } /* who-it-is-for photo band */ .fl-row[data-node].dm-section--before-tiles > .fl-row-content-wrap { padding-bottom: var(--tiles-top); } /* results intro row: tiles row below is --flush-top */ .fl-row[data-node].dm-section > .fl-row-content-wrap > .fl-row-content { max-width: var(--page-width); margin-left: auto; margin-right: auto; } .fl-row[data-node].dm-section--tight > .fl-row-content-wrap { padding-top: 64px; padding-bottom: 80px; } .fl-row.dm-section .fl-module { margin: 0; } .fl-row[data-node].dm-section--flush-top > .fl-row-content-wrap { padding-top: 0; } .fl-row[data-node].dm-section--flush-bottom > .fl-row-content-wrap { padding-bottom: 0; } .fl-row[data-node].dm-section--tight-top > .fl-row-content-wrap { padding-top: 48px; } .fl-row[data-node].dm-section--tight-bottom > .fl-row-content-wrap { padding-bottom: 40px; } .fl-row[data-node].dm-section--gap-top > .fl-row-content-wrap { padding-top: 12px; } /* a split section: heading row above (flush bottom), body row below */ /* Columns keep Beaver Builder's own widths (set in the column settings). The column gap is --grid-col-gap (96px), made of half that as padding on the inner edge of each column, so widths like 50/50 or 46/54 still add up to 100%. */ .fl-row.dm-section .fl-col > .fl-col-content { padding: 0; } .fl-row.dm-section .fl-col:not(:first-child) > .fl-col-content { padding-left: calc(var(--grid-col-gap) / 2); } .fl-row.dm-section .fl-col:not(:last-child) > .fl-col-content { padding-right: calc(var(--grid-col-gap) / 2); } /* A row can hold several column groups stacked (eyebrow group above, two-column group below). Groups after the first sit --eyebrow-to-h2 lower. */ .fl-row.dm-section .fl-col-group + .fl-col-group { margin-top: var(--eyebrow-to-h2); } .fl-row.dm-section--center .fl-col-group { display: flex; align-items: center; } /* emphasis band, proof band: columns vertically centred */ .fl-row.dm-section--center .fl-col-group::before, .fl-row.dm-section--center .fl-col-group::after { display: none; } .fl-row.dm-section--center .fl-col-group > .fl-col { float: none; } .fl-row.dm-section--nogap .fl-col > .fl-col-content { padding-left: 0; padding-right: 0; } /* the right column of a two-column text row starts a little lower than the h2 so the first body line sits near its cap height (v3: 6px). Assumes the eyebrow is in its own column group above (see CLASSES.md). If the eyebrow sits inside the left column, use --offset-eyebrow instead. */ .fl-row.dm-section .fl-col.dm-col--offset > .fl-col-content { padding-top: var(--body-offset); } .fl-row.dm-section .fl-col.dm-col--offset-eyebrow > .fl-col-content { padding-top: calc(var(--lh-eyebrow) + var(--eyebrow-rule-gap) + var(--rule-accent) + var(--eyebrow-to-h2) + var(--body-offset)); } .fl-row.dm-section .fl-col.dm-col--offset-media > .fl-col-content { padding-top: 8px; } /* product-form row: media 8px lower than the h2 */ /* Vertical rhythm: Beaver Builder 2.9 column content is a flex column, so spacing comes from gap, not margins. Module classes below add a few px where the design wants more (eyebrow 22, h2 24, lead 34, buttons 28). */ .fl-row.dm-section .fl-col > .fl-col-content, .fl-row.dm-hero .fl-col > .fl-col-content { display: flex; flex-direction: column; align-items: stretch; gap: 20px; } .fl-row.dm-section .fl-col.dm-col--gap28 > .fl-col-content { gap: 28px; } /* product-form left column: h2, paragraphs, link at 28px */ .fl-row.dm-section .fl-module, .fl-row.dm-hero .fl-module { margin: 0; } /* non-flattened modules (custom modules, photo, video) wrap their output in .fl-module-content, which carries the global 20px module margin */ .fl-row.dm-section .fl-module > .fl-module-content, .fl-row.dm-hero .fl-module > .fl-module-content { margin: 0; } .fl-module.dm-btn { margin-top: 8px; } .fl-module.dm-btn + .fl-module.dm-btn { margin-top: -4px; } .fl-module.dm-btn--text + .fl-module.dm-btn--text { margin-top: -22px; } /* stacked text links: 52px pitch instead of 70 */ /* side-by-side buttons: .dm-inline on each Button module turns that column into a wrapping row */ .fl-col-content:has(> .fl-module.dm-inline) { flex-direction: row !important; flex-wrap: wrap; align-items: center; column-gap: 36px; row-gap: 20px; } .fl-col-content:has(> .fl-module.dm-inline) > .fl-module:not(.dm-inline) { flex: 0 0 100%; max-width: 100%; } .fl-col-content:has(> .fl-module.dm-inline) > .fl-module.dm-inline { flex: 0 0 auto; width: auto; margin-top: 8px; } /* .dm-dark: black row, light text. Background colour is also set here as a fallback. */ .fl-row[data-node].dm-dark > .fl-row-content-wrap { background-color: var(--dm-black); } .fl-row[data-node].dm-band > .fl-row-content-wrap { background-color: var(--dm-band); } /* ============================================================ hero */ /* First row on the page: the transparent header sits over it (84px). Photo and gradient overlay are row settings. Content starts 150px down so headlines never sit under the bar; the photo runs behind it. */ .fl-row[data-node].dm-hero > .fl-row-content-wrap { padding: var(--hero-pad-top) var(--dm-gutter) var(--hero-pad-bottom); position: relative; } .fl-row[data-node].dm-hero > .fl-row-content-wrap > .fl-row-content { max-width: var(--page-width); width: 100%; margin: 0 auto; position: relative; } .fl-row.dm-hero .fl-col-content { padding: 0; max-width: 900px; display: flex; flex-direction: column; gap: 28px; } /* Gradient and scrim overlays drawn by class, so the row's own overlay setting stays empty and the values come from the tokens. Photo position (about 75% horizontal for the hero) is still a row background setting. */ .fl-row[data-node].dm-hero--gradient > .fl-row-content-wrap::before { content: ""; position: absolute; inset: 0; background: var(--gradient-hero); pointer-events: none; } .fl-row[data-node].dm-section--scrim > .fl-row-content-wrap { position: relative; } .fl-row[data-node].dm-section--scrim > .fl-row-content-wrap::before { content: ""; position: absolute; inset: 0; background: var(--surface-scrim-band); pointer-events: none; } .fl-row[data-node].dm-section--scrim > .fl-row-content-wrap > .fl-row-content { position: relative; } .fl-row.dm-hero .fl-module { margin: 0; } /* ============================================================ type */ /* Eyebrow: Heading module (set the tag to p or h6). Oswald 400 13px / 20px, 0.22em, with a 2px rule 8px under the text, the width of the text. */ .dm-eyebrow .fl-heading, .fl-module.dm-eyebrow.fl-heading, .dm-eyebrow .fl-heading-text, .fl-module.dm-eyebrow.fl-heading-text { font-family: var(--dm-oswald); font-weight: var(--fw-regular); font-size: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; line-height: var(--lh-eyebrow); margin: 0; } .dm-eyebrow .fl-heading, .fl-module.dm-eyebrow.fl-heading { color: var(--dm-black); width: fit-content; border-bottom: var(--rule-accent) solid var(--dm-black); padding: 0 0 var(--eyebrow-rule-gap); margin: 0; } /* 32px from the rule to the h2: a following column group carries it (see rows); an eyebrow inside a column adds 12px to the column's 20px gap */ .fl-row.dm-section .fl-module.dm-eyebrow + .fl-module, .fl-row.dm-hero .fl-module.dm-eyebrow + .fl-module { margin-top: calc(var(--eyebrow-to-h2) - 20px); } .fl-row.dm-hero .fl-module.dm-eyebrow + .fl-module { margin-top: 0; } /* hero stack is 28px throughout */ /* Test results left column: 34px extra between the h2 and the first paragraph */ .fl-row.dm-section .fl-col.dm-col--results > .fl-col-content > .fl-module.dm-h2 { margin-bottom: 14px; } .dm-dark .dm-eyebrow .fl-heading, .dm-dark .fl-module.dm-eyebrow.fl-heading { color: var(--dm-white); border-bottom-color: var(--dm-white); } .dm-eyebrow--teal .fl-heading, .fl-module.dm-eyebrow--teal.fl-heading, .dm-dark .dm-eyebrow--teal .fl-heading, .dm-dark .fl-module.dm-eyebrow--teal.fl-heading { color: var(--dm-teal); border-bottom: 0; padding-bottom: 0; } .dm-eyebrow--plain .fl-heading, .fl-module.dm-eyebrow--plain.fl-heading, .dm-dark .dm-eyebrow--plain .fl-heading, .dm-dark .fl-module.dm-eyebrow--plain.fl-heading { border-bottom: 0; padding-bottom: 0; } /* Page title (h1), hero only */ .dm-h1 .fl-heading, .fl-module.dm-h1.fl-heading { font-family: var(--dm-oswald); font-weight: var(--fw-light); font-size: var(--type-display-xl); line-height: var(--lh-display-xl); color: var(--dm-white); margin: 0; max-width: 15ch; text-wrap: balance; } .dm-h1 .fl-heading sup, .fl-module.dm-h1.fl-heading sup { font-size: .4em; vertical-align: 1em; margin-left: 2px; } /* Section heading (h2). 48px / 1.08, about 17ch, balanced; --lg is 56px (closing CTA). White on dark rows. */ .dm-h2 .fl-heading, .fl-module.dm-h2.fl-heading { font-family: var(--dm-oswald); font-weight: var(--fw-light); font-size: var(--type-display-s); line-height: var(--lh-display-s); color: var(--dm-black); margin: 0; max-width: var(--measure-h2); text-wrap: balance; } .dm-h2--lg .fl-heading, .fl-module.dm-h2--lg.fl-heading { font-size: var(--type-display-l); line-height: var(--lh-display-l); } /* Pull line (emphasis band): Oswald 300 28px, teal, max 28ch. Heading module, tag p. */ .dm-pull .fl-heading, .fl-module.dm-pull.fl-heading { font-family: var(--dm-oswald); font-weight: var(--fw-light); font-size: var(--type-pull); line-height: var(--lh-pull); color: var(--dm-teal); margin: 0; max-width: var(--measure-pull); text-wrap: pretty; } .fl-module.dm-h2--wide.fl-heading { max-width: none; } /* one-line heading across a full-width column */ .dm-dark .dm-h2 .fl-heading, .dm-dark .fl-module.dm-h2.fl-heading { color: var(--dm-white); } .dm-h2 .fl-heading sup, .fl-module.dm-h2.fl-heading sup, .dm-h3 .fl-heading sup, .fl-module.dm-h3.fl-heading sup { font-size: .5em; vertical-align: .8em; } /* Sub-heading (h3), audience columns and cards */ .dm-h3 .fl-heading, .fl-module.dm-h3.fl-heading { font-family: var(--dm-oswald); font-weight: 400; font-size: 23px; line-height: 1.22; color: var(--dm-black); margin: 0; } .dm-dark .dm-h3 .fl-heading, .dm-dark .fl-module.dm-h3.fl-heading { color: var(--dm-white); } /* Body copy: Text Editor module. 18px, 1.65, 58ch measure, paragraphs 22px apart. */ .fl-module.dm-body, .fl-module.dm-body p, .fl-module.dm-body li { font-family: var(--dm-sans); font-size: var(--type-body-m); line-height: var(--lh-body-m); color: var(--dm-text); text-wrap: pretty; } .fl-module.dm-body p, .fl-module.dm-body ul, .fl-module.dm-body ol { max-width: var(--measure-body); margin: 0 0 var(--para-gap); } .fl-module.dm-body p:last-child, .fl-module.dm-body ul:last-child, .fl-module.dm-body ol:last-child { margin-bottom: 0; } .fl-module.dm-body--lg, .fl-module.dm-body--lg p { font-size: var(--type-body-l); line-height: var(--lh-body-l); } .fl-module.dm-body--lg p { max-width: 54ch; } .fl-module.dm-body--sm, .fl-module.dm-body--sm p, .fl-module.dm-body--sm li { font-size: 16px; line-height: 1.62; } .fl-module.dm-body strong { color: var(--dm-black); font-weight: 700; } .fl-module.dm-body a { color: var(--dm-deep-sea); text-decoration: underline; text-underline-offset: 3px; } .fl-module.dm-body a:hover { color: var(--dm-teal); } .dm-dark .fl-module.dm-body, .dm-dark .fl-module.dm-body p, .dm-dark .fl-module.dm-body li { color: var(--text-on-inverse-body); } .dm-dark .fl-module.dm-body--band, .dm-dark .fl-module.dm-body--band p { color: var(--text-on-inverse-band); } /* emphasis band body at 82% */ .dm-dark .fl-module.dm-body--muted, .dm-dark .fl-module.dm-body--muted p { color: rgba(255,255,255,.7); } .dm-dark .fl-module.dm-body strong { color: var(--dm-white); } .dm-dark .fl-module.dm-body a { color: var(--dm-teal); } .dm-dark .fl-module.dm-body a:hover { color: var(--dm-white); } /* Hero subhead: 19px, white at 90% */ .fl-module.dm-lead, .fl-module.dm-lead p { font-family: var(--dm-sans); font-size: var(--type-body-l); line-height: var(--lh-body-l); color: var(--text-on-inverse-lead); margin: 0; text-wrap: pretty; } .fl-module.dm-lead p { max-width: 60ch; } /* Small print / source notes. Works on a Text Editor module and on a Heading module set to tag p (caption under a video or photo). */ .fl-module.dm-note.fl-heading { font-family: var(--dm-sans); font-weight: 400; font-size: var(--type-caption); line-height: 1.5; color: var(--dm-muted-2); margin: 0; text-transform: none; letter-spacing: 0; max-width: 56ch; } .fl-module.dm-video + .fl-module.dm-note { margin-top: -8px; } .fl-module.dm-photo + .fl-module.dm-note { margin-top: -8px; } .fl-module.dm-note, .fl-module.dm-note p { font-family: var(--dm-sans); font-size: var(--type-caption); line-height: 1.5; color: var(--dm-muted-2); margin: 0; } .dm-dark .fl-module.dm-note, .dm-dark .fl-module.dm-note p { color: rgba(255,255,255,.55); } /* ============================================================ buttons */ /* Button module + .dm-btn plus one variant: --outline (the site-wide button: 1px border, fills with its colour on hover) or --text (arrow link). Oswald 400 15px, 0.15em, uppercase, right arrow. Colour follows the row: black on light rows, white on .dm-dark rows; --teal forces DexMat Teal (hero). Decision 2026-10-23 (Asena): outline buttons everywhere; there is no filled-at-rest button. */ .fl-module.dm-btn .fl-button-wrap { text-align: left; } .fl-module.dm-btn a.fl-button { display: inline-flex !important; align-items: center; gap: 10px; font-family: var(--dm-oswald) !important; font-weight: var(--fw-regular) !important; font-size: var(--type-button) !important; letter-spacing: var(--ls-button) !important; text-transform: uppercase !important; line-height: 1 !important; border-radius: 0 !important; background-image: none !important; box-shadow: none !important; text-decoration: none !important; transition: color .16s ease, background-color .16s ease, border-color .16s ease; } .fl-module.dm-btn a.fl-button .fl-button-text { font: inherit !important; color: inherit !important; } .fl-module.dm-btn a.fl-button::after { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .fl-module.dm-btn a.fl-button .fl-button-icon { display: none !important; } /* text button */ .fl-module.dm-btn--text a.fl-button { padding: 18px 0 !important; border: 0 !important; background: transparent !important; color: var(--dm-black) !important; } /* 17px padding + 1px border on the outline button, so the two labels share a baseline when side by side */ .fl-module.dm-btn--text a.fl-button:hover { color: var(--dm-teal) !important; } .dm-dark .fl-module.dm-btn--text a.fl-button { color: var(--dm-white) !important; } .dm-dark .fl-module.dm-btn--text a.fl-button:hover { color: var(--dm-teal) !important; } /* outline button */ .fl-module.dm-btn--outline a.fl-button { padding: 17px 30px !important; min-height: 44px; border: 1px solid currentColor !important; background: transparent !important; color: var(--dm-black) !important; } .fl-module.dm-btn--outline a.fl-button:hover { background: var(--dm-black) !important; color: var(--dm-white) !important; } .dm-dark .fl-module.dm-btn--outline a.fl-button { color: var(--dm-white) !important; } .dm-dark .fl-module.dm-btn--outline a.fl-button:hover { background: var(--dm-white) !important; color: var(--dm-black) !important; } .fl-module.dm-btn--teal a.fl-button, .dm-dark .fl-module.dm-btn--teal a.fl-button { color: var(--dm-teal) !important; } .fl-module.dm-btn--teal.dm-btn--outline a.fl-button:hover, .dm-dark .fl-module.dm-btn--teal.dm-btn--outline a.fl-button:hover { background: var(--dm-teal) !important; color: var(--dm-black) !important; } .fl-module.dm-btn--teal.dm-btn--text a.fl-button:hover { color: var(--dm-white) !important; } /* a row of buttons: put each Button module in its own column, or use a Button Group module with .dm-btn */ .fl-module.dm-btn .fl-button-group { display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: center; } .fl-module.dm-btn .fl-button-group .fl-button-group-button { margin: 0 !important; } /* keyboard focus */ .fl-module.dm-btn a.fl-button:focus-visible { outline: 2px solid var(--dm-teal); outline-offset: 3px; } /* ============================================================ stat tiles */ /* Row: .dm-section .dm-dark .dm-tiles .dm-section--flush-top, four columns, 40px apart. Each column holds, in order: label (Heading, p) .dm-tile__label, stat (Heading, p) .dm-tile__stat, text (Text Editor) .dm-tile__text. No icon (v3). Each tile: 1px white-at-28% top rule, 28px above the content. The previous row (intro) carries .dm-section--before-tiles (88px). */ .fl-row.dm-section.dm-tiles .fl-col > .fl-col-content { padding: 28px 0 0; border-top: 1px solid var(--border-on-inverse-strong); gap: 14px; height: 100%; } .fl-row.dm-section.dm-tiles .fl-col:not(:last-child) > .fl-col-content { margin-right: var(--tile-gap); } .dm-tiles .dm-tile__icon { display: none; } /* hidden unless the row carries dm-tiles--icons (opt-in, see below) */ .dm-tile__icon svg, .dm-tile__icon .fl-icon i, .dm-tile__icon .fl-icon { width: 34px; height: 34px; font-size: 34px; color: var(--dm-teal); stroke: var(--dm-teal); } .dm-tile__icon svg { fill: none; stroke-width: 1.5; } .dm-tile__label .fl-heading, .fl-module.dm-tile__label.fl-heading { font-family: var(--dm-oswald); font-weight: var(--fw-regular); font-size: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow); line-height: 1.5; text-transform: uppercase; color: var(--dm-white); margin: 0; } .dm-tile__stat .fl-heading, .fl-module.dm-tile__stat.fl-heading { font-family: var(--dm-oswald); font-weight: var(--fw-light); font-size: var(--type-stat); line-height: var(--lh-stat); color: var(--dm-teal); margin: 0; } .fl-module.dm-tile__text, .fl-module.dm-tile__text p { font-family: var(--dm-sans); font-size: var(--type-body-s); line-height: var(--lh-body-s); color: var(--text-on-inverse-tile); margin: 0; text-wrap: pretty; } /* light version of the tiles (white or band rows) */ .fl-row.dm-tiles:not(.dm-dark) .fl-col > .fl-col-content { border-top-color: var(--dm-rule); } .fl-row.dm-tiles:not(.dm-dark) .dm-tile__label .fl-heading, .fl-row.dm-tiles:not(.dm-dark) .fl-module.dm-tile__label.fl-heading { color: var(--dm-text); } .fl-row.dm-tiles:not(.dm-dark) .dm-tile__stat .fl-heading, .fl-row.dm-tiles:not(.dm-dark) .fl-module.dm-tile__stat.fl-heading { color: var(--dm-deep-sea); } .fl-row.dm-tiles:not(.dm-dark) .fl-module.dm-tile__text, .fl-row.dm-tiles:not(.dm-dark) .fl-module.dm-tile__text p { color: var(--dm-text); } /* Links in tile text follow body links: Deep Sea on light rows, teal on dark rows (2026-11-01, Signal page ampacity tile) */ .fl-module.dm-tile__text a { color: var(--dm-deep-sea); text-decoration: underline; text-underline-offset: 3px; } .fl-module.dm-tile__text a:hover { color: var(--dm-teal); } .dm-dark .fl-module.dm-tile__text a { color: var(--dm-teal); } .dm-dark .fl-module.dm-tile__text a:hover { color: var(--dm-white); } /* ============================================================ audience / feature columns */ /* Column with a 2px top rule, a 34px icon, an h3 and a paragraph (mockup row 9). Class on the column. */ .fl-col.dm-feature > .fl-col-content { border-top: 2px solid var(--dm-black); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; } .dm-dark .fl-col.dm-feature > .fl-col-content { border-top-color: var(--dm-white); } .dm-feature .dm-tile__icon svg, .dm-feature .dm-tile__icon .fl-icon { color: var(--dm-deep-sea); stroke: var(--dm-deep-sea); } .dm-feature .dm-h3 .fl-heading, .dm-feature .fl-module.dm-h3.fl-heading { margin-bottom: 0; } /* ============================================================ tables */ /* Text Editor module with a , class .dm-table on the module. Header row black; body on the light band. */ .fl-module.dm-table table { width: 100%; border-collapse: collapse; background: var(--dm-band); font-family: var(--dm-sans); font-size: 16px; line-height: 1.5; color: var(--dm-text); } .fl-module.dm-table thead th, .fl-module.dm-table tr:first-child th { background: var(--dm-black); color: var(--dm-white); font-family: var(--dm-oswald); font-weight: 400; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; text-align: left; padding: 16px 32px; border: 0; } .fl-module.dm-table td { padding: 22px 32px; border: 0; border-bottom: 1px solid var(--dm-rule); vertical-align: middle; } .fl-module.dm-table td:first-child { font-family: var(--dm-oswald); font-weight: 400; font-size: 19px; color: var(--dm-black); } .fl-module.dm-table td img { width: 64px; height: 64px; object-fit: cover; vertical-align: middle; margin-right: 16px; } .fl-module.dm-table a { color: inherit; text-decoration: none; } .fl-module.dm-table a:hover { color: var(--dm-deep-sea); } .dm-dark .fl-module.dm-table table { background: #111; color: rgba(255,255,255,.88); } .dm-dark .fl-module.dm-table td { border-bottom-color: rgba(255,255,255,.16); } .dm-dark .fl-module.dm-table td:first-child { color: var(--dm-white); } /* ============================================================ link list ("Read" column, related reading) */ .fl-module.dm-links ul { list-style: none; margin: 0; padding: 0; } .fl-module.dm-links li { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--dm-rule); } .fl-module.dm-links li a { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--dm-oswald); font-weight: 300; font-size: 26px; line-height: 1.25; color: var(--dm-black); text-decoration: none; text-wrap: pretty; } .fl-module.dm-links li a::after { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .fl-module.dm-links li a:hover { color: var(--dm-deep-sea); } .dm-dark .fl-module.dm-links li { border-bottom-color: rgba(255,255,255,.16); } .dm-dark .fl-module.dm-links li a { color: var(--dm-white); } .dm-dark .fl-module.dm-links li a:hover { color: var(--dm-teal); } /* ============================================================ link list, v3 (Text Editor module + .dm-linklist) */ /* A stack of full-width text links: rule above the first and below each, 18px vertical padding, label left, arrow right. Markup: . Use where a section offers three or more next steps. (.dm-links above is the blog's larger list; unchanged.) */ .fl-module.dm-linklist ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dm-rule); } .fl-module.dm-linklist li { margin: 0; padding: 0; border-bottom: 1px solid var(--dm-rule); } .fl-module.dm-linklist li a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; min-height: 44px; box-sizing: border-box; font-family: var(--dm-oswald); font-weight: var(--fw-regular); font-size: var(--type-button); letter-spacing: var(--ls-button); text-transform: uppercase; line-height: 1.2; color: var(--dm-black); text-decoration: none; transition: color .16s ease; } .fl-module.dm-linklist li a::after { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .fl-module.dm-linklist li a:hover { color: var(--dm-teal); } .dm-dark .fl-module.dm-linklist ul, .dm-dark .fl-module.dm-linklist li { border-color: var(--border-on-inverse-strong); } .dm-dark .fl-module.dm-linklist li a { color: var(--dm-white); } .dm-dark .fl-module.dm-linklist li a:hover { color: var(--dm-teal); } /* ============================================================ FAQ (Accordion module + .dm-faq) */ /* v3: rule above the first item and below each; question Oswald 300 22px with +/- on the right; answer 17px, 60ch; first open, one at a time (module settings). */ .fl-module.dm-faq .fl-accordion-item { border: 0; border-top: 1px solid var(--dm-rule); margin: 0; } .fl-module.dm-faq .fl-accordion-item:last-child { border-bottom: 1px solid var(--dm-rule); } .fl-module.dm-faq .fl-accordion-button { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .fl-module.dm-faq .fl-accordion-button-label { font-family: var(--dm-oswald); font-weight: var(--fw-light); font-size: var(--type-title-s); line-height: 1.3; color: var(--dm-black); } .fl-module.dm-faq .fl-accordion-button-icon { color: var(--dm-black); font-size: 20px; } .fl-module.dm-faq .fl-accordion-button:focus, .fl-module.dm-faq .fl-accordion-button:active { outline: 0 !important; box-shadow: none !important; } /* no ring on mouse click */ .fl-module.dm-faq .fl-accordion-button:focus-visible { outline: 2px solid var(--dm-teal) !important; outline-offset: 4px; } /* keyboard focus keeps a ring */ .fl-module.dm-faq .fl-accordion-content { padding: 0 0 26px; } .fl-module.dm-faq .fl-accordion-content, .fl-module.dm-faq .fl-accordion-content p { font-family: var(--dm-sans); font-size: var(--type-body-faq); line-height: var(--lh-body-faq); color: var(--dm-text); max-width: var(--measure-faq); margin: 0; } .fl-module.dm-faq .fl-accordion-content p + p { margin-top: 14px; } .dm-dark .fl-module.dm-faq .fl-accordion-item { border-color: rgba(255,255,255,.16); } .dm-dark .fl-module.dm-faq .fl-accordion-button-label { color: var(--dm-white); } .dm-dark .fl-module.dm-faq .fl-accordion-content, .dm-dark .fl-module.dm-faq .fl-accordion-content p { color: rgba(255,255,255,.88); } /* ============================================================ video */ .fl-module.dm-video .fl-video { background: var(--dm-black); } /* ============================================================ photos */ .fl-module.dm-photo .fl-photo, .fl-module.dm-photo .fl-photo-content, .fl-module.dm-photo img { width: 100%; } .dm-photo--gray img { filter: grayscale(1); } .dm-photo--logo .fl-photo-content img { max-width: 112px; width: 100%; } /* v3 crops: 4:3 (--cover) and 4:5 (--portrait), object-fit cover, no radius, no shadow. Add --gray for grayscale. */ .dm-photo--cover .fl-photo-content img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; } .dm-photo--portrait .fl-photo-content img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; display: block; } .dm-photo--wide .fl-photo-content img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; } .fl-module.dm-photo .fl-photo-caption { font-family: var(--dm-sans); font-size: var(--type-caption); line-height: 1.5; color: var(--dm-muted-2); padding: 12px 0 0; text-align: left; } /* Placeholder for a missing photo: HTML module with class .dm-placeholder, content is the name of the photo needed */ .fl-module.dm-placeholder { background: var(--dx-canvas); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; color: var(--dx-placeholder-ink); text-align: center; } .fl-module.dm-placeholder--portrait { aspect-ratio: 4 / 5; } /* ============================================================ proof band column (.dm-proof on the right column) */ /* Funder logo (Photo module, .dm-photo--logo) and one paragraph side by side, a 1px vertical rule between them with 40px each side, vertically centred. */ .fl-row.dm-section .fl-col.dm-proof > .fl-col-content { flex-direction: row; align-items: center; gap: 0; } .fl-row.dm-section .fl-col.dm-proof > .fl-col-content > .fl-module.dm-photo { flex: 0 0 auto; width: auto; padding-right: 40px; margin-right: 40px; border-right: 1px solid var(--dm-rule-strong); } .fl-row.dm-section .fl-col.dm-proof > .fl-col-content > .fl-module.dm-photo .fl-photo-content img { width: 112px; height: 112px; object-fit: contain; } .fl-row.dm-section .fl-col.dm-proof > .fl-col-content > .fl-module.dm-body { flex: 1 1 auto; min-width: 0; } .fl-row.dm-section .fl-module.dm-photo + .fl-module.dm-photo { margin-top: 12px; } .dm-dark .fl-module.dm-photo .fl-photo-caption { color: rgba(255,255,255,.55); } /* ============================================================ first row under the transparent header (site-wide/00, 2026-10-07) */ /* Images run up behind the 84px bar; text does not. Pages with their own hero padding opt out via the classes below. Store and product pages already handle this (store hero padding, product bar) and are excluded. */ body:not(.dexmat-store-page):not(.single-product) .fl-builder-content > .fl-row:first-child:not(.dm-hero):not(.dm-section):not(.dm-no-pad):not(.dm-footer-cols) > .fl-row-content-wrap { padding-top: 108px; } /* ============================================================ responsive */ @media (max-width: 1200px) { .dm-h1 .fl-heading, .fl-module.dm-h1.fl-heading { font-size: 60px; } } @media (max-width: 992px) { :root { --dm-gutter: 32px; --grid-col-gap: 48px; } .fl-row[data-node].dm-section > .fl-row-content-wrap { padding-top: 80px; padding-bottom: 80px; } .fl-row[data-node].dm-section--short > .fl-row-content-wrap { padding-top: 64px; padding-bottom: 64px; } .fl-row[data-node].dm-section--photo > .fl-row-content-wrap { padding-top: 96px; padding-bottom: 96px; } .dm-h1 .fl-heading, .fl-module.dm-h1.fl-heading { font-size: 52px; } .dm-h2 .fl-heading, .fl-module.dm-h2.fl-heading { font-size: 40px; } .dm-h2--lg .fl-heading, .fl-module.dm-h2--lg.fl-heading { font-size: 46px; } .dm-tile__stat .fl-heading, .fl-module.dm-tile__stat.fl-heading { font-size: 52px; } /* tiles two across, each with its own top rule */ .fl-row.dm-tiles .fl-col { width: 50% !important; clear: none; } .fl-row.dm-tiles .fl-col:nth-child(odd) { clear: left; } .fl-row.dm-section.dm-tiles .fl-col > .fl-col-content { margin-right: 0; padding: 24px 0 0; margin-bottom: 40px; } .fl-row.dm-section.dm-tiles .fl-col:nth-child(odd) > .fl-col-content { margin-right: var(--tile-gap); } .fl-row.dm-section.dm-tiles .fl-col:nth-last-child(-n+2) > .fl-col-content { margin-bottom: 0; } body:not(.dexmat-store-page):not(.single-product) .fl-builder-content > .fl-row:first-child:not(.dm-hero):not(.dm-section):not(.dm-no-pad):not(.dm-footer-cols) > .fl-row-content-wrap { padding-top: 96px; } } @media (max-width: 768px) { :root { --dm-gutter: 20px; } .fl-row[data-node].dm-section > .fl-row-content-wrap { padding-top: 64px; padding-bottom: 64px; } .fl-row[data-node].dm-section--short > .fl-row-content-wrap { padding-top: 48px; padding-bottom: 48px; } .fl-row[data-node].dm-section--photo > .fl-row-content-wrap { padding-top: 72px; padding-bottom: 72px; } .fl-row.dm-section .fl-col-group + .fl-col-group { margin-top: 24px; } .fl-row.dm-section--center .fl-col-group { display: block; } .fl-row.dm-section .fl-col.dm-col--offset-eyebrow > .fl-col-content, .fl-row.dm-section .fl-col.dm-col--offset-media > .fl-col-content { padding-top: 0; } /* proof band stacks: logo above the paragraph, the vertical rule becomes horizontal */ .fl-row.dm-section .fl-col.dm-proof > .fl-col-content { flex-direction: column; align-items: flex-start; gap: 24px; } .fl-row.dm-section .fl-col.dm-proof > .fl-col-content > .fl-module.dm-photo { padding: 0 0 24px; margin: 0; border-right: 0; border-bottom: 1px solid var(--dm-rule-strong); width: 100%; } .fl-row.dm-section .fl-col { width: 100% !important; max-width: 100% !important; } .fl-row.dm-section .fl-col > .fl-col-content { padding-left: 0 !important; padding-right: 0 !important; } .fl-row.dm-section .fl-col + .fl-col > .fl-col-content { margin-top: 32px; } .fl-row.dm-section .fl-col.dm-col--offset > .fl-col-content { padding-top: 0; } .fl-row[data-node].dm-hero > .fl-row-content-wrap { padding: 130px var(--dm-gutter) 64px; } .fl-row.dm-hero .fl-col-content { gap: 20px; } .dm-h1 .fl-heading, .fl-module.dm-h1.fl-heading { font-size: 44px; } .fl-module.dm-lead, .fl-module.dm-lead p { font-size: 17px; } .dm-h2 .fl-heading, .fl-module.dm-h2.fl-heading { font-size: 32px; } .dm-h2--lg .fl-heading, .fl-module.dm-h2--lg.fl-heading { font-size: 36px; } .dm-pull .fl-heading, .fl-module.dm-pull.fl-heading { font-size: 22px; } .fl-module.dm-body, .fl-module.dm-body p, .fl-module.dm-body li { font-size: 16px; } /* tiles in one column */ .fl-row.dm-section.dm-tiles .fl-col > .fl-col-content { padding: 24px 0 0 !important; margin: 0 0 32px !important; } .fl-row.dm-section.dm-tiles .fl-col:last-child > .fl-col-content { margin-bottom: 0 !important; } .dm-tile__stat .fl-heading, .fl-module.dm-tile__stat.fl-heading { font-size: 48px; } /* tables become stacked cards; dexmat-ui.js writes data-label from the header row */ .fl-module.dm-table thead, .fl-module.dm-table tr:first-child th { display: none; } .fl-module.dm-table table, .fl-module.dm-table tbody, .fl-module.dm-table tr, .fl-module.dm-table td { display: block; width: 100%; box-sizing: border-box; } .fl-module.dm-table tr { border-bottom: 1px solid var(--dm-rule); padding: 16px 20px; } .fl-module.dm-table td { padding: 6px 0; border: 0; } .fl-module.dm-table td::before { content: attr(data-label); display: block; font-family: var(--dm-oswald); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dm-muted); margin-bottom: 2px; } .fl-module.dm-table td:first-child::before { display: none; } .fl-module.dm-links li a { font-size: 21px; } /* photos keep their aspect ratio on phones (v3) */ .fl-col-content:has(> .fl-module.dm-inline) { flex-direction: column !important; row-gap: 16px; } .fl-col-content:has(> .fl-module.dm-inline) > .fl-module.dm-inline { margin-top: 0; } .fl-module.dm-btn .fl-button-group { flex-direction: column; align-items: flex-start; gap: 16px; } body:not(.dexmat-store-page):not(.single-product) .fl-builder-content > .fl-row:first-child:not(.dm-hero):not(.dm-section):not(.dm-no-pad):not(.dm-footer-cols) > .fl-row-content-wrap { padding-top: 88px; } } /* Padding modifiers restated with two classes so they outrank the breakpoint padding above at every width. */ .fl-row[data-node].dm-section.dm-section--flush-top > .fl-row-content-wrap { padding-top: 0; } .fl-row[data-node].dm-section.dm-section--flush-bottom > .fl-row-content-wrap { padding-bottom: 0; } .fl-row[data-node].dm-section.dm-section--before-tiles > .fl-row-content-wrap { padding-bottom: var(--tiles-top); } .fl-row[data-node].dm-section.dm-section--tight-top > .fl-row-content-wrap { padding-top: 48px; } .fl-row[data-node].dm-section.dm-section--tight-bottom > .fl-row-content-wrap { padding-bottom: 40px; } .fl-row[data-node].dm-section.dm-section--gap-top > .fl-row-content-wrap { padding-top: 12px; } @media (max-width: 992px) { :root { --tiles-top: 64px; } } @media (max-width: 768px) { :root { --tiles-top: 48px; } } /* touch targets */ @media (pointer: coarse) { .fl-module.dm-btn a.fl-button { min-height: 44px; } .fl-module.dm-links li a { min-height: 44px; } } /* ===== Site footer (Themer layout 5023). Consolidated in dexmat-ui 1.2.3. ===== Brief: Footer Build Brief option 2a. Classes set on BB rows/modules. */ /* Container (6.1) */ .dm-footer-cols.fl-row, .dm-footer-search.fl-row, .dm-footer-bottom.fl-row { background: #000; } .dm-footer-cols .fl-row-content-wrap { padding: 88px 56px 0; } .dm-footer-search .fl-row-content-wrap { padding: 64px 56px 0; } .dm-footer-bottom .fl-row-content-wrap { padding: 40px 56px 44px; } /* Builder defaults that get in the way */ .dm-footer-cols .fl-col-group::before, .dm-footer-cols .fl-col-group::after, .dm-footer-bottom .fl-col-group::before, .dm-footer-bottom .fl-col-group::after { display: none; } /* clearfix pseudo-elements would take grid/flex cells */ .dm-footer-cols .fl-col-group > .fl-drop-target { display: none; } .dm-footer-cols .fl-module, .dm-footer-search .fl-module, .dm-footer-bottom .fl-module { margin: 0 0 16px; } .dm-footer-cols .fl-module:last-child, .dm-footer-search .fl-module, .dm-footer-bottom .fl-module:last-child { margin-bottom: 0; } .dm-footer-cols .fl-module-content, .dm-footer-search .fl-module-content, .dm-footer-bottom .fl-module-content { margin: 0; } .dm-footer-cols .fl-col-content, .dm-footer-bottom .fl-col-content { min-height: 0; } .dm-footer__menu .fl-menu .menu::before, .dm-footer__menu .fl-menu .menu::after, .dm-footer__legal .fl-menu .menu::before, .dm-footer__legal .fl-menu .menu::after { display: none !important; } /* Columns row (6.2): 250px + six equal columns, 32px gap */ .dm-footer-cols .fl-col-group { display: grid; grid-template-columns: 250px repeat(6, minmax(0, 1fr)); gap: 32px; } .dm-footer-cols .fl-col { width: auto !important; min-width: 0; } /* Type (6.3) */ .dm-footer__h, .dm-footer__h .fl-heading, .dm-footer__h .fl-heading-text { font-family: Oswald, sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; line-height: 1.3; color: #fff; margin: 0; text-align: left; } .dm-footer__h a { color: inherit; text-decoration: none; } .dm-footer__h a:hover, .dm-footer__h a:focus-visible { color: #2AD2C9; } .dm-footer__h--teal .fl-heading-text, .dm-footer__h--teal a { color: #2AD2C9; } .dm-footer__h--teal a:hover, .dm-footer__h--teal a:focus-visible { color: #fff; } .dm-footer__menu .fl-menu ul { list-style: none; margin: 0; padding: 0; } .dm-footer__menu .fl-menu .menu > li { margin: 0 0 16px; padding: 0; } .dm-footer__menu .fl-menu .menu > li:last-child { margin-bottom: 0; } .dm-footer__menu .fl-menu .menu > li > a, .dm-footer__contact, .dm-footer__contact a { font-family: "Noto Sans", sans-serif; font-weight: 400; font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.6); text-decoration: none; padding: 0 !important; background: none; } .dm-footer__menu .fl-menu .menu > li > a:hover, .dm-footer__menu .fl-menu .menu > li > a:focus-visible, .dm-footer__contact a:hover, .dm-footer__contact a:focus-visible { color: #2AD2C9; } /* Contact Us (5.1) */ .dm-footer__contact { display: flex; flex-direction: column; gap: 16px; } .dm-footer__item { display: flex; align-items: flex-start; gap: 10px; } .dm-footer__item svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; color: #2AD2C9; } .dm-footer__item--address { line-height: 1.6; } .dm-footer__social { display: flex; gap: 12px; margin-top: 6px; } .dm-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.8); transition: border-color .15s, color .15s; } .dm-footer__social a:hover, .dm-footer__social a:focus-visible { border-color: #2AD2C9; outline: none; } .dm-footer__social svg { width: 17px; height: 17px; } /* Search row (6.4) */ .dm-footer__search { display: flex; align-items: center; gap: 14px; width: 360px; max-width: 100%; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.34); } .dm-footer__search:focus-within { border-bottom-color: #2AD2C9; } .dm-footer__search svg { flex: 0 0 auto; color: #2AD2C9; } .dm-footer__search .dm-footer__search-icon { width: 18px; height: 18px; } .dm-footer__search input[type="search"] { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-family: Oswald, sans-serif; font-weight: 300; font-size: 15px; letter-spacing: .15em; text-transform: uppercase; color: #fff; } .dm-footer__search input[type="search"]:focus, .dm-footer__search input[type="search"]:focus-visible { outline: none !important; box-shadow: none !important; } .woocommerce .dm-footer__search input[type="search"], .dm-footer__search input[type="search"] { background: transparent !important; color: #fff !important; border: 0 !important; padding: 0 !important; height: auto !important; } /* WooCommerce/Astra input rules win on product pages otherwise */ .dm-footer__search input::placeholder { color: rgba(255,255,255,.7); opacity: 1; } .dm-footer__search input::-webkit-search-decoration, .dm-footer__search input::-webkit-search-cancel-button { -webkit-appearance: none; } .dm-footer__search button { flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: none; color: #2AD2C9; cursor: pointer; line-height: 0; } .dm-footer__search button svg { width: 20px; height: 20px; } .dm-footer__search button:hover, .dm-footer__search button:focus-visible { color: #fff; outline: none; } .dm-footer-search .fl-row-content { padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.14); } /* Bottom bar (6.5) */ .dm-footer-bottom .fl-col-group { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .dm-footer-bottom .fl-col { width: auto !important; } .dm-footer__logo .fl-photo-img { width: 190px; height: auto; display: block; } .dm-footer__logo { margin-bottom: 18px; } .dm-footer__copy, .dm-footer__copy p { font-family: "Noto Sans", sans-serif; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.6); margin: 0; } .dm-footer__legal .fl-menu .menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 26px; max-width: 760px; margin: 0 0 0 auto; padding: 0; list-style: none; } .dm-footer__legal .fl-menu .menu > li { margin: 0; padding: 0; } .dm-footer__legal .fl-menu .menu > li > a { font-family: Oswald, sans-serif; font-weight: 300; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); text-decoration: none; padding: 0 !important; background: none; line-height: 1.4; } .dm-footer__legal .fl-menu .menu > li > a:hover, .dm-footer__legal .fl-menu .menu > li > a:focus-visible { color: #2AD2C9; } /* 921 to 1280px: seven columns are too tight; Contact + three link columns per row (to confirm with Asena) */ @media (min-width: 921px) and (max-width: 1280px) { .dm-footer-cols .fl-col-group { grid-template-columns: 220px repeat(3, minmax(0, 1fr)); gap: 40px 28px; } } /* Tablet and phone (section 7), below Astra's 921px. !important where Beaver Builder's own responsive rules win otherwise. */ @media (max-width: 920px) { .dm-footer-cols .fl-row-content-wrap { padding: 64px 24px 0 !important; } .dm-footer-search .fl-row-content-wrap { padding: 48px 24px 0 !important; } .dm-footer-bottom .fl-row-content-wrap { padding: 32px 24px 40px !important; } .dm-footer-cols .fl-col, .dm-footer-search .fl-col, .dm-footer-bottom .fl-col { max-width: none !important; margin: 0 !important; width: 100% !important; } .dm-footer-cols .fl-col-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } .dm-footer-cols .fl-col:first-child, .dm-footer-cols .fl-col:last-child { grid-column: 1 / -1; } .dm-footer-cols .fl-module, .dm-footer-bottom .fl-module { text-align: left !important; } .dm-footer__menu .fl-menu .menu, .dm-footer__legal .fl-menu .menu { display: block !important; } .dm-footer__legal .fl-menu .menu { display: flex !important; justify-content: flex-start; margin-left: 0; max-width: none; gap: 0 26px; } .dm-footer__menu .fl-menu .menu > li { margin: 0 !important; } /* 44px tap targets */ .dm-footer__menu .fl-menu .menu > li > a, .dm-footer__legal .fl-menu .menu > li > a { display: block !important; padding: 10px 0 !important; min-height: 44px; box-sizing: border-box; line-height: 1.4 !important; } .dm-footer__contact { gap: 4px; } .dm-footer__item { align-items: center; } .dm-footer__item--address { align-items: flex-start; margin-bottom: 8px; } .dm-footer__contact a { display: inline-flex; align-items: center; min-height: 44px; } .dm-footer__social a { width: 44px; height: 44px; } .dm-footer__search { width: 100%; } .dm-footer-bottom .fl-col-group { flex-direction: column; align-items: flex-start; gap: 24px; } } /* 1.2.5: Astra draws a 3px white outline on any focused link; mouse clicks leave footer links focused. Keep keyboard focus visible in teal. */ .dm-footer-cols a:focus, .dm-footer-search a:focus, .dm-footer-bottom a:focus, .dm-footer-cols button:focus, .dm-footer-search button:focus { outline: none !important; box-shadow: none !important; } .dm-footer-cols a:focus-visible, .dm-footer-search a:focus-visible, .dm-footer-bottom a:focus-visible, .dm-footer-search button:focus-visible { outline: 1px solid #2AD2C9 !important; outline-offset: 3px; } .dm-footer__social a:focus-visible { outline-offset: 2px; } /* 1.4.2: site-wide. Astra puts a 3px outline on any focused link, button or input, and a mouse click leaves the element focused, so every click drew a box. Drop the ring for mouse/touch focus only; keyboard focus (:focus-visible) keeps Astra's ring or the component's own teal one. */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), .wpgb-card:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* ================================================================ 1.7.0 Third-party test callout (brief 6.12, mockup 1b) Row: dm-section (white) or dm-section dm-band. Groups stacked in the row: eyebrow (1 col); 50/50 (left: Heading dm-keynum with , Heading p dm-keynum__basis, then a 4:3 photo; right: dm-col--results with dm-h2 and dm-body); 1 col: HTML module dm-bars (list of rows + note). Column stack gap is 20px (keynum to basis). Basis to photo 28px, grid to bars 56px. ================================================================ */ :root { --type-keynum: 184px; --type-keynum-unit: 56px; --keynum-unit-gap: 14px; --basis-to-photo: 28px; --bars-gap-top: 56px; --bars-row-pad: 22px; --bars-col-gap: 32px; --bars-label-w: 300px; --bars-value-w: 120px; --bars-height: 14px; } .fl-module.dm-keynum.fl-heading, .dm-keynum .fl-heading { font-family: var(--dm-oswald); font-weight: 200; font-size: var(--type-keynum); line-height: 0.9; letter-spacing: -0.01em; color: var(--text-heading); margin: 0; max-width: none; text-wrap: initial; } .dm-keynum__unit { font-weight: var(--fw-light); font-size: var(--type-keynum-unit); line-height: 1; letter-spacing: 0; margin-left: var(--keynum-unit-gap); } .fl-module.dm-keynum__basis.fl-heading, .dm-keynum__basis .fl-heading { font-family: var(--dm-oswald); font-weight: var(--fw-regular); font-size: 15px; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-body); max-width: 34ch; margin: 0; } .fl-row.dm-section .dm-keynum__basis + .fl-module { margin-top: calc(var(--basis-to-photo) - 20px); } .fl-row.dm-section .fl-module.dm-bars { margin-top: calc(var(--bars-gap-top) - var(--eyebrow-to-h2)); } .dm-bars__list { border-top: 1px solid var(--dm-rule); margin: 0; padding: 0; list-style: none; } .dm-bars__row { display: grid; grid-template-columns: minmax(0, var(--bars-label-w)) minmax(0, 1fr) var(--bars-value-w); gap: var(--bars-col-gap); align-items: center; padding: var(--bars-row-pad) 0; border-bottom: 1px solid var(--dm-rule); margin: 0; } .dm-bars__label { display: flex; flex-direction: column; gap: 4px; } .dm-bars__name { font-family: var(--dm-oswald); font-weight: var(--fw-regular); font-size: 20px; line-height: 1.2; color: var(--text-body); } .dm-bars__basis { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-body); } .dm-bars__track { height: var(--bars-height); background: var(--surface-band); } .dm-bars__fill { height: 100%; background: var(--dx-text-muted); } .dm-bars__value { font-family: var(--dm-oswald); font-weight: var(--fw-light); font-size: 32px; line-height: 1; color: var(--text-body); text-align: right; } .dm-bars__row--galvorn .dm-bars__name, .dm-bars__row--galvorn .dm-bars__value { color: var(--text-heading); } .dm-bars__row--galvorn .dm-bars__fill { background: var(--dm-teal); } .dm-bars__note { display: block; padding-top: 14px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-muted); } @media (max-width: 992px) { :root { --type-keynum: 120px; --type-keynum-unit: 36px; } } @media (max-width: 768px) { :root { --type-keynum: 96px; --type-keynum-unit: 29px; } .dm-bars__row { grid-template-columns: minmax(0, 1fr) var(--bars-value-w); gap: 12px var(--bars-col-gap); } .dm-bars__track { grid-column: 1 / -1; } } /* ================================================================ 1.8.0 Homepage patterns (Homepage Build Brief, mockup 3A) dm-col--bottom column content pushed to the bottom (h2 left, paragraph right, bottom-aligned) dm-stack row whose column groups sit --stack-gap apart (one section, several blocks) dm-ruled column: 1px rule above and --ruled-pad below it; put it on every column of the group dm-stat column: Heading p .dm-stat__num over Heading p .dm-stat__cap; second column gets a left rule dm-pull--ink pull line in black instead of teal dm-product-tiles row, five columns: Photo (square crop, linked) + Heading p .dm-product-tile__label (linked) dm-cards row of link cards; --app (icon, rule, title, text) or --industry (image, title, text); the title Heading is the link and stretches over the whole column dm-logo-row one column holding one Photo module per logo, laid out in equal flex columns dm-play HTML module: