/*
* WordPress-only layer, loaded AFTER dx.css.
*
* Two jobs:
* 1. Named utilities that stand in for the inline `style=""` attributes of
* design/reference/*.html, for the places where a core block cannot carry
* them as block attributes. They live here (after dx.css) on purpose: some
* of them have to beat the container queries at the end of dx.css, exactly
* as an inline style does in the reference.
* 2. Styles for the plugin's dynamic blocks and for the editor canvas.
*
* Nothing here may change the design. Every rule maps 1:1 to a declaration in
* the reference; the comment says which element it came from.
*/
/* ---------------------------------------------------------------------------
* 1. Editor canvas. On the front, `.dx` is a group block wrapping the whole
* page, which gives container queries and `cqi` their context. Inside the
* editor the blocks are not wrapped by it, so make the canvas the container;
* without this every clamp() falls back to its minimum in the editor.
* `.editor-styles-wrapper` does not exist on the front.
* ------------------------------------------------------------------------- */
.editor-styles-wrapper {
container: dx / inline-size;
background: #edf6ee;
font-family: "DM Sans", sans-serif;
color: #1e1e2f;
font-size: 16px;
line-height: 1.5;
}
/* ---------------------------------------------------------------------------
* 2. Utilities for reference inline styles.
* Added per stage, as each page needs them.
* ------------------------------------------------------------------------- */
/* index/work/about/…: `.stats` kept at 3 columns by an inline
* `grid-template-columns`, which in the reference also overrides the container
* queries. Hence: declared after dx.css, same specificity as `.stats`. */
.dx .stats-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* `.btn-row` is the one design row that wraps (dx.css). wp-base.css resets
* core's `.is-layout-flex` to plain flex, so re-assert the wrap here, after it. */
.dx .btn-row {
flex-wrap: wrap;
}
/* Gaps the reference sets inline on flex/grid boxes that already have their
* display from a design class (`.stack`, `.row`, `.btn-row`, `.chips`…). */
.dx .gap-6 { gap: 6px; }
.dx .gap-8 { gap: 8px; }
.dx .gap-10 { gap: 10px; }
.dx .gap-12 { gap: 12px; }
.dx .gap-14 { gap: 14px; }
.dx .gap-16 { gap: 16px; }
.dx .gap-18 { gap: 18px; }
.dx .gap-20 { gap: 20px; }
.dx .gap-24 { gap: 24px; }
.dx .gap-32 { gap: 32px; }
/* Text colours the reference writes as inline `color:` (tokens of dx.css). */
.dx .c-body { color: var(--body); }
.dx .c-teal-ink { color: var(--teal-ink); }
.dx .c-teal-lt { color: var(--teal-lt); }
.dx .c-on-dark { color: var(--on-dark); }
.dx .c-on-dark-2 { color: var(--on-dark-2); }
.dx .c-white { color: #fff; }
/* 404: the Dynabot sits in a `.split` cell with its size set inline
* (design/reference/404.html). Same shape as `.case-bot`, other numbers. */
.dx .bot-404 {
width: 100%;
max-width: 380px;
height: 380px;
object-fit: contain;
justify-self: center;
}
/* The design's buttons end their label with a decorative arrow
* (`→` in the reference). core/paragraph-style
* RichText does not keep a span inside a button label, so the arrow is a
* pseudo-element: it is a flex item of `.btn` just like the span was, so it
* picks up the same `gap: 10px` and renders identically. */
.dx .btn-arrow::after {
content: "→";
}
/* Two-value gaps and odd flex bases the reference sets inline. */
.dx .gap-32-48 { gap: 32px 48px; }
.dx .flex-440 { flex: 1 1 440px; min-width: 0; }
.dx .mt-auto { margin-top: auto; }
.dx .shadow-none { box-shadow: none; }
/* Inline styles the reference puts on inline elements inside copy. Keeping them
* out of the block content lets the text stay plain RichText (a `style` or
* `class` on a / inside core/paragraph does not survive the
* editor, and the block would come back invalid). */
.dx .note-bar strong { color: #fff; }
/* Avatar colour pairs of the three home testimonials. */
.dx .avatar-mint { background: var(--mint); color: var(--teal-ink); }
.dx .avatar-teal { background: var(--teal); color: var(--night); }
.dx .avatar-night { background: var(--night); color: var(--teal); }
/* The display family, where the reference writes `font-family: Lexend` inline. */
.dx .ff-display { font-family: var(--display); }
/* Home closing CTA: the waving Dynabot, sized inline in the reference. */
.dx .bot-cta {
width: 160px;
height: 160px;
object-fit: contain;
margin-bottom: 16px;
}
/* core's flow layout emits `:root :where(.is-layout-flow) > :last-child
* { margin-block-end: 0 }`. That selector is specificity (0,2,0) — `:last-child`
* counts as a class — so it beats component rules like `.faq details p`
* (0,1,2) and silently removes the bottom margin of the last child of any block
* that supports layout. The accordion of the design needs those 22px.
*
* If a diff ever shows a block that is exactly one bottom margin too short,
* this is the first thing to check. */
.dx .faq details > p:last-child {
margin-bottom: 22px;
}
/* Pricing: two-value gap on the "every project includes" list, and the
* horizontal scroller around the rate table. */
.dx .gap-16-32 { gap: 16px 32px; }
.dx .gap-56-72 { gap: 56px 72px; }
.dx .scroll-x { overflow-x: auto; }
.dx .justify-center { justify-content: center; }
/* Work grid (SPEC §6 and §7): the paddings, sizes and covers the reference
* writes inline on dx/work-grid's markup. */
.dx .pt-56 { padding-top: 56px; }
.dx .pt-28 { padding-top: 28px; }
.dx .pb-0 { padding-bottom: 0; }
.dx .pb-88 { padding-bottom: 88px; }
.dx .pb-112 { padding-bottom: 112px; }
.dx .fs-13 { font-size: 13px; }
.dx .fs-155 { font-size: 15.5px; }
.dx .mh-32 { min-height: 32px; }
.dx .self-start { align-self: flex-start; }
.dx .m-top-only { margin-right: 0; margin-bottom: 0; margin-left: 0; }
.dx .cover-mist {
background: var(--mist);
color: var(--night);
}
.dx .cover-night {
background: var(--night);
color: var(--teal);
}
.dx .cover-plain.cover-mist:has(.mp-mock) {
padding: 0 28px;
}
.dx .mp-mock-sm {
width: 100%;
max-width: 300px;
background: #fff;
padding: 16px;
gap: 10px;
}
.dx .mp-btn-sm {
min-height: 40px;
font-size: 13px;
}
.dx .cover-word {
font-family: var(--display);
font-weight: 800;
font-size: 30px;
letter-spacing: -0.03em;
text-align: center;
padding: 0 24px;
}
/* `[hidden]` only exists as a UA rule, and ANY author `display` beats it — so
* `.work-card { display: flex }` kept the filtered-out cards on screen. The
* Work grid hides cards with the attribute, so it needs author weight. */
.dx [hidden] {
display: none;
}
/* Work: the dashed "Earlier work" box under the grid. */
.dx .note-box {
margin-top: 64px;
padding: 32px;
border-radius: 24px;
background: #fff;
border: 1px dashed #b9cdbf;
}
/* Jacana stepper (SPEC §6). */
.dx .mr-8 { margin: 0 8px 0 0; }
.dx .shadow-soft { box-shadow: 0 18px 40px rgba(30, 30, 47, 0.16); }
.dx .shadow-softer { box-shadow: 0 18px 40px rgba(30, 30, 47, 0.12); }
/* CFP: the quote avatar is the partner's logo on white. */
.dx .avatar-logo {
background: #fff;
padding: 6px;
}
/* Case studies: the bits the reference writes inline on their chrome. */
.dx .case-kicker { margin: 28px 0 20px; }
.dx .idx-ink { color: var(--teal-ink); }
.dx .list-plain { list-style: none; margin: 0; padding: 0; }
.dx .w-100 { width: 100%; }
.dx .fs-17 { font-size: 17px; }
.dx .fs-19 { font-size: 19px; line-height: 1.6; }
.dx .quote-framed {
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 48px;
}
.dx .next-label {
display: block;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 6px;
}
.dx .next-title {
font-family: var(--display);
font-weight: 700;
font-size: 24px;
}
.dx .next-arrow { font-size: 28px; }
/* Margins the reference sets inline on single elements. */
.dx .mt-8 { margin-top: 8px; }
.dx .mt-16 { margin-top: 16px; }
.dx .mt-20 { margin-top: 20px; }
.dx .mt-24 { margin-top: 24px; }
.dx .mt-32 { margin-top: 32px; }
.dx .mt-36 { margin-top: 36px; }
.dx .mt-48 { margin-top: 48px; }
.dx .mt-64 { margin-top: 64px; }
.dx .mt-72 { margin-top: 72px; }
.dx .mb-8 { margin-bottom: 8px; }
.dx .mb-10 { margin-bottom: 10px; }
.dx .mb-20 { margin-bottom: 20px; }
.dx .mb-14 { margin-bottom: 14px; }
.dx .mb-20 { margin-bottom: 20px; }
.dx .mb-28 { margin-bottom: 28px; }
/* Flex bases the reference sets inline on copy that sits next to a logo tile. */
.dx .flex-240 { flex: 1 1 240px; }
.dx .flex-420 { flex: 1 1 420px; min-width: 0; }
.dx .flex-1 { flex: 1 1 0%; }
/* Services: the illustration of an n8n workflow (SPEC §9, Services 5). */
.dx .flow-row {
gap: 14px;
padding: 14px 16px;
border-radius: 14px;
background: var(--night);
}
.dx .flow-row-on {
border: 1px solid var(--teal);
}
.dx .flow-link {
width: 2px;
height: 14px;
background: var(--teal);
margin-left: 35px;
}
.dx .ico-teal-soft {
background: rgba(0, 201, 167, 0.16);
color: var(--teal);
}
.dx .ico-teal {
background: var(--teal);
color: var(--night);
}
/* Services: the four tiles of the monthly report card. */
.dx .tile {
padding: 20px;
gap: 6px;
}
.dx .tile strong {
font-family: var(--display);
font-size: 20px;
}
/* Dynabot sizes the reference sets inline, by section. */
.dx .bot-84 { width: 84px; height: 84px; object-fit: contain; }
.dx .bot-120 { width: 120px; height: 120px; object-fit: contain; }
.dx .bot-120-130 { width: 120px; height: 130px; object-fit: contain; }
.dx .bot-160 { width: 160px; height: 160px; object-fit: contain; }
.dx .bot-200 { width: 200px; height: 200px; object-fit: contain; }
.dx .bot-280 { width: 280px; height: 280px; object-fit: contain; justify-self: center; }
/* Max-widths the reference sets inline on copy columns. */
.dx .mw-230 { max-width: 230px; }
.dx .mw-320 { max-width: 320px; }
.dx .mw-440 { max-width: 440px; }
.dx .mw-520 { max-width: 520px; }
.dx .mw-640 { max-width: 640px; }
.dx .mw-680 { max-width: 680px; }
.dx .mw-760 { max-width: 760px; }
.dx .mw-780 { max-width: 780px; }
.dx .mw-980 { max-width: 980px; }
.dx .mw-1000 { max-width: 1000px; }
/* ---------------------------------------------------------------------------
* 3. Dynamic blocks (dx/nav, dx/work-grid, dx/stepper, dx/billing-toggle,
* dx/contact-form, dx/sos-form) render reference markup and reference
* classes, so they need no styles of their own. Anything they do need goes
* here, next to the block that owns it.
* ------------------------------------------------------------------------- */
/* dx/nav and dx/sos-form: the block wrapper must not introduce a box of its
* own, so its children sit where the reference puts them. */
.dx .dx-nav,
.dx .dx-sos,
.dx .dx-stepper,
.dx .dx-work {
display: contents;
}
/* Contact form (SPEC §8). The reference form posts nowhere; these are the bits
* a working form needs, written so they add no height. */
.dx .fieldset-plain {
margin: 0;
padding: 0;
border: 0;
}
.dx .chip-btn {
min-height: 42px;
font-size: 14px;
}
.dx .sos-input {
flex: 1 1 240px;
width: auto;
border-color: var(--night);
}
.dx .form-sent {
align-items: center;
text-align: center;
padding: 48px 36px;
}
/* The honeypot and the SOS label are out of the flow: no height, still
* reachable by a bot that fills every input it finds. */
.dx .dx-hp,
.dx .dx-sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* Weights and sizes the reference sets inline. */
.dx .fw-700 { font-weight: 700; }
.dx .fs-28 { font-size: 28px; }
.dx .m-0 { margin: 0; }
/* Jumping to an anchor on the same page used to cut hard to the destination.
Now it travels, and it stops a little short of the window edge instead of
gluing the target to it.
`scroll-behavior` and `scroll-margin` only affect scrolling, never layout, so
nothing on the page moves and the parity shots are unchanged. The behaviour
goes on the scrolling element itself — on `html`, not on `.dx` — because that
is what a fragment navigation actually scrolls, and it is dropped for anyone
who asked for less motion (SPEC §5). */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* Every anchor target, not a list of them: the services sections, the form, the
SOS band and anything added later all stop the same distance from the edge. */
.dx [id] {
scroll-margin-top: 24px;
}
/* A stack chip that carries the technology's mark. `.chip` is not a flex
container in the design, so the variant is what aligns the glyph with the
word; the mark is monochrome and takes the chip's own colour, which keeps it
legible on the mist chip and on the dark-card variant alike. */
.dx .chip-tech {
display: inline-flex;
align-items: center;
gap: 7px;
}
.dx .chip-tech svg {
flex: none;
}
/* The call to action of the mobile panel, when the label is longer than the
English one it was designed around.
`.btn` is `white-space: nowrap` and a flex item's `min-width: auto` keeps it
from shrinking below that one line, so a longer label runs straight out of
the panel: "Agendar una llamada de 30 min" overflows by 92px at 390.
Scoped by document language on purpose. The English row fits by exactly one
pixel (lang switch 80 + gap 12 + button 259 = 351 against 350), so any rule
that let the button shrink would wrap the approved layout onto two lines.
Hanging it off `[lang]` puts the English design out of this rule's reach
instead of relying on it staying one pixel wide. */
html:not([lang^="en"]) .dx .mnav .btn {
white-space: normal;
line-height: 1.25;
padding-block: 12px;
}