/*
* Styles for the hand-built patterns — the Elementor widgets with no core block
* equivalent. Everything a core block can already express lives in theme.json
* instead; nothing here overrides a core block's own styling.
*
* Tokens only. Every colour, size and space is a theme.json preset var, so a
* change to the palette or the scale reaches these patterns without an edit.
*/
/* ------------------------------------------------------------------ reset */
/*
* The theme never set box-sizing, so it was the CSS default: content-box. That
* is not a cosmetic default — it is what broke the 50/50 grid on every split
* section on the site.
*
* A media/text band is two core/column blocks at `flex-basis: 50%`. Under
* content-box the text column's `--adsbox-col-pad` (5vw = 73.5px a side at
* 1470px) sits OUTSIDE its basis, so the row's items sum to 100% + 147px, the
* row overflows, and flex-shrink takes the overflow off both columns equally.
* Measured on /our-services/ at 1470px: 808.5 / 661.5 — a 55/45 split where
* production is exactly 735 / 735. Every padded box on the site was off by its
* own padding in the same way.
*
* border-box is also what core's own block CSS is written against, so this is
* a correction rather than an opinion.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
* Every the assembler emits now carries its INTRINSIC width and height,
* read out of the file in uploads-old/ (scripts/lib/imgdims.py). That is what
* lets the browser reserve the box before the bytes arrive, which is the CLS
* half of `Lighthouse mobile >= 90`.
*
* It is also a trap. An HTML `height` is a real presentational hint: with a CSS
* `width: 100%` and no `height: auto`, the image renders at its CSS width and
* its HTML height, and every photograph on the site squashes. The wrapper rules
* further down set `height: auto` on the images they own — this is the floor
* under the ones nobody owns.
*
* `aspect-ratio: auto / ` is what the browser derives from the two
* attributes; stating `height: auto` keeps that ratio in charge instead of the
* literal pixel height. `object-fit` wrappers (.adsbox-col-media, the flip
* photos) override this on purpose and are unaffected — they set their own
* height and this rule loses to their specificity.
*/
img {
max-width: 100%;
height: auto;
}
/* ---------------------------------------------------------------- eyebrow */
.adsbox-eyebrow {
font-size: var(--wp--preset--font-size--x-small);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wp--preset--color--accent);
margin-bottom: var(--wp--preset--spacing--20);
}
/* -------------------------------------------------------------- flip card */
/*
* Replaces Elementor's flip-box, 66 instances — the single largest non-trivial
* widget on the site, and the whole of the About page's team grid.
*
* It is NOT a flip, and calling it one is what produced fifteen empty cream
* boxes with a name in them. Measured from the widget's own settings:
* `flip_effect` is `fade`, sides A and B carry the SAME photograph, and side B
* adds `background_overlay_b: #181818CC`. So the card is a portrait that
* darkens on hover to show who it is.
*
* The overlay text is in the DOM at all times — indexable, and reachable by a
* screen reader — and the card reveals on :focus-within as well as :hover, so a
* keyboard reaches the name and the LinkedIn link. The Elementor widget did
* neither.
*/
.adsbox-flip {
position: relative;
overflow: hidden;
border-radius: 1.25rem;
background: var(--wp--preset--color--cream);
isolation: isolate;
}
.adsbox-flip:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 4px;
}
.adsbox-flip__photo,
.adsbox-flip__photo img {
display: block;
width: 100%;
margin: 0;
height: 100%;
}
.adsbox-flip__photo {
aspect-ratio: 3 / 4;
}
.adsbox-flip__photo img {
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.adsbox-flip:hover .adsbox-flip__photo img,
.adsbox-flip:focus-within .adsbox-flip__photo img {
transform: scale(1.04);
}
/* #181818CC — production's own overlay, alpha and all. */
.adsbox-flip__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--wp--preset--spacing--10);
margin: 0;
padding: var(--wp--preset--spacing--40);
background: rgba(24, 24, 24, 0.8);
color: var(--wp--preset--color--base);
opacity: 0;
transition: opacity 0.35s ease;
}
.adsbox-flip:hover .adsbox-flip__overlay,
.adsbox-flip:focus-within .adsbox-flip__overlay {
opacity: 1;
}
.adsbox-flip__overlay :is(h1, h2, h3, h4, h5, h6, p, a) {
color: inherit;
margin: 0;
}
.adsbox-flip__overlay :is(h1, h2, h3, h4, h5, h6) {
font-size: var(--wp--preset--font-size--large);
letter-spacing: -0.02em;
}
.adsbox-flip__overlay .wp-block-buttons {
margin-top: var(--wp--preset--spacing--20);
}
.adsbox-flip__link .wp-block-button__link {
background: transparent;
border: 1px solid currentColor;
color: inherit;
padding: 0.4rem 1rem;
font-size: var(--wp--preset--font-size--x-small);
}
.adsbox-flip__link .wp-block-button__link:hover,
.adsbox-flip__link .wp-block-button__link:focus-visible {
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
}
/*
* A card whose source carries no photograph — 4 of the 66, all in library
* templates. Hiding its only content behind a hover on an empty box would be a
* regression, so the panel is always on and sits on the cream ground.
*/
.adsbox-flip--nophoto {
min-height: 18rem;
}
.adsbox-flip--nophoto .adsbox-flip__overlay {
position: static;
opacity: 1;
background: transparent;
color: var(--wp--preset--color--contrast);
justify-content: center;
min-height: inherit;
}
/*
* A fade is not a rotation, but it is still motion under the pointer. With
* reduced motion requested the reveal is instant and the photograph does not
* scale; no content is lost either way, because the overlay text is always in
* the DOM.
*/
@media (prefers-reduced-motion: reduce) {
.adsbox-flip__overlay,
.adsbox-flip__photo img {
transition: none;
}
.adsbox-flip:hover .adsbox-flip__photo img,
.adsbox-flip:focus-within .adsbox-flip__photo img {
transform: none;
}
}
/* ------------------------------------------------------ before/after slider */
/*
* Replaces exad-image-comparison, 29 instances. A range input drives one CSS
* custom property; the overlay is clipped to it. The range input IS the control,
* so keyboard and screen-reader support come from the platform rather than from
* a script.
*/
/*
* `margin: 0` on every child is load-bearing, not tidying. The group renders as
* `is-layout-flow`, which gives every sibling after the first
* `margin-block-start: var(--wp--style--block-gap)` — 24px — and an absolutely
* positioned element still honours its margin. So the divider sat 24px BELOW
* the line the clip-path cut, and a 24px band of the "after" image showed above
* the handle. Computed `top` said 475.2 and `offsetTop` said 499: the gap
* between those two numbers is the whole bug.
*/
.adsbox-compare > * {
margin: 0;
}
.adsbox-compare {
--adsbox-compare-pos: 50%;
position: relative;
overflow: hidden;
border-radius: 1.25rem;
background: var(--wp--preset--color--cream);
touch-action: none;
}
.adsbox-compare img {
display: block;
width: 100%;
height: auto;
}
/*
* Both halves must be the SAME box, or the clip reveals the wrong pixels near
* the divider. The "after" layer is a core/group wrapping a core/image, and
* every one of those three elements has to be told to fill — a figure is a
* shrink-to-fit box and .wp-block-image carries a bottom margin, which is how
* the overlay ended up 480px tall inside a 504px frame and the join stopped
* lining up.
*/
.adsbox-compare__after {
position: absolute;
inset: 0;
margin: 0;
clip-path: inset(0 0 0 var(--adsbox-compare-pos));
}
.adsbox-compare > .wp-block-image,
.adsbox-compare__after > .wp-block-image {
inline-size: 100%;
block-size: 100%;
margin: 0;
}
.adsbox-compare__after img {
block-size: 100%;
inline-size: 100%;
object-fit: cover;
}
.adsbox-compare__handle {
position: absolute;
inset-block: 0;
left: var(--adsbox-compare-pos);
width: 2px;
background: var(--wp--preset--color--base);
pointer-events: none;
box-shadow: 0 0 0 1px rgba(24, 24, 24, 0.25);
}
/* The ring is the widget's own geometry: `exad_image_comparison_handler_width`
and `_height` are 35px and `_border` is 4px on every instance. */
.adsbox-compare__handle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 35px;
height: 35px;
transform: translate(-50%, -50%);
border: 4px solid var(--wp--preset--color--base);
border-radius: 50%;
background: rgba(24, 24, 24, 0.35);
}
/*
* `pointer-events: none` is load-bearing. The input covers the whole slider at
* `opacity: 0` to stay the accessible control, and while it took pointer events
* it ALSO ran its own native drag — which reads X. On a vertical slider that
* meant two handlers writing the same custom property from two different axes
* on every move, and the divider stuttered and trailed the cursor. compare.js
* owns the pointer now; the input keeps the keyboard, which pointer-events does
* not touch.
*/
.adsbox-compare__range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
pointer-events: none;
appearance: none;
-webkit-appearance: none;
background: transparent;
}
.adsbox-compare {
cursor: ew-resize;
}
.adsbox-compare--vertical {
cursor: ns-resize;
}
.adsbox-compare__range:focus-visible + .adsbox-compare__handle::after {
outline: 3px solid var(--wp--preset--color--accent);
outline-offset: 3px;
}
/*
* Vertical: the divider is horizontal and moves up and down. This is what
* production does on ALL 29 instances — `data-exad-oriantation="vertical"`,
* measured from the archived HTML, not from the exad setting, which is absent.
* The first rebuild took the widget's left/right default, so every slider on
* the site read as a different component from the one it replaced.
*
* Only the axis changes: same custom property, same range input, same handle.
*/
.adsbox-compare--vertical .adsbox-compare__after {
clip-path: inset(var(--adsbox-compare-pos) 0 0 0);
}
.adsbox-compare--vertical .adsbox-compare__handle {
inset-block: auto;
inset-inline: 0;
top: var(--adsbox-compare-pos);
width: auto;
height: 2px;
}
/* Production's handle (exad `handle-style-2`) is a ring carrying an up/down
chevron pair. On a vertical slider that arrow is the only thing telling a
visitor which way to drag, so it is not decoration. An inline SVG mask rather
than an image file: it is 200 bytes, it inherits the handle's colour, and it
is not a request. */
.adsbox-compare--vertical .adsbox-compare__handle::after {
z-index: 0;
background: rgba(24, 24, 24, 0.28);
}
.adsbox-compare--vertical .adsbox-compare__handle::before {
content: "";
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 0.85rem;
height: 1.15rem;
transform: translate(-50%, -50%);
background: var(--wp--preset--color--base);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.adsbox-compare--vertical .adsbox-compare__label--a {
inset: 0.75rem auto auto 0.75rem;
}
.adsbox-compare--vertical .adsbox-compare__label--b {
inset: auto 0.75rem 0.75rem auto;
}
/* ------------------------------------------------------- animated card video */
/*
* The 27 animated service-card GIFs are 595 MiB; the same frames as H.264 are
* 23.8 MiB. `muted` and `playsinline` are not optional — iOS refuses to autoplay
* without both. H.264 has no alpha channel, so the card paints a solid ground
* behind the video rather than relying on the GIF's transparency.
*/
.adsbox-card-video {
position: relative;
overflow: hidden;
border-radius: 1.25rem;
background: var(--wp--preset--color--cream);
}
.adsbox-card-video video,
.adsbox-card-video img {
display: block;
width: 100%;
height: auto;
background: var(--wp--preset--color--cream);
}
/*
* With reduced motion requested the video is replaced by its own poster frame.
* `autoplay` is still in the markup for browsers that ignore the query, so the
* rule also pauses via `animation-play-state`-free means: the poster image is
* shown on top and the video is hidden from the accessibility tree.
*/
@media (prefers-reduced-motion: reduce) {
.adsbox-card-video video {
display: none;
}
.adsbox-card-video .adsbox-card-video__poster {
display: block;
}
}
.adsbox-card-video .adsbox-card-video__poster {
display: none;
}
/* ------------------------------------------------------------ logo marquee */
/*
* Replaces the 14-logo client carousel, which on production is a complete
* pasted tutorial document nested inside the homepage, linking
* a stylesheet that 404s on every load (defect 13).
*
* The track is duplicated once and translated by exactly -50%, which is what
* makes the loop seamless. The duplicate is aria-hidden so a screen reader
* reads each logo once.
*/
.adsbox-marquee {
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.adsbox-marquee__track {
display: flex;
width: max-content;
align-items: center;
gap: var(--wp--preset--spacing--70);
animation: adsbox-marquee 40s linear infinite;
}
.adsbox-marquee:hover .adsbox-marquee__track {
animation-play-state: paused;
}
/* Production's logos sit directly on the band at roughly 3.5rem — the pasted
tutorial's own stylesheet 404s there, so they render at a size nothing
constrains. 2.5rem on a cream ground under an eyebrow read as a footnote. */
.adsbox-marquee img {
height: 3.5rem;
width: auto;
flex: 0 0 auto;
filter: grayscale(1);
opacity: 0.65;
transition: filter 0.2s, opacity 0.2s;
}
.adsbox-marquee img:hover {
filter: none;
opacity: 1;
}
@keyframes adsbox-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.adsbox-marquee {
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.adsbox-marquee__track {
animation: none;
}
}
/* ---------------------------------------------------------------- stats row */
/*
* Production floats three white cards ON the hero photograph: the row carries
* margin-top -180px under a 400px-tall background image, and each card is a
* shadowed white panel with an accent rule, a large INK numeral and an
* uppercase caption. The first rebuild made it a flat cream band of pink
* numbers, which loses the one composition on the page anybody would recognise.
*
* The numerals are ink (#181818), not accent: the accent is the rule.
*/
.adsbox-stats {
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--30);
}
/*
* core's grid layout emits `repeat(auto-fill, minmax(16rem, 1fr))`, and
* auto-FILL keeps the empty tracks: three cards in a 1392px band filled the
* first three of five and huddled against the left edge with a third of the
* band empty beside them. auto-fit collapses the empty tracks so the three
* stretch across the band, which is what production does.
*/
.adsbox-stats > .wp-block-group.is-layout-grid {
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/* The rule inside a card is the card's own accent, not a band separator: it
sits tight against the numeral rather than on the section's rhythm. */
.adsbox-stat .adsbox-rule {
width: 100px;
max-width: 50%;
margin-block: 0;
}
.adsbox-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--20);
min-height: 15rem;
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
background: var(--wp--preset--color--base);
border-radius: 1.5rem;
box-shadow: 0 1.5rem 3rem rgba(24, 24, 24, 0.12);
}
.adsbox-stat > * {
margin-block: 0;
}
.adsbox-stat__value {
font-size: clamp(3.5rem, 6vw, 6rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast);
font-variant-numeric: tabular-nums;
}
.adsbox-stat__label {
font-size: var(--wp--preset--font-size--small);
text-transform: uppercase;
color: var(--wp--preset--color--contrast);
}
/* ---------------------------------------------------------------- the rule */
/*
* Elementor's divider widget, 87 instances: the short thick bar under every
* heading and over every statistic on the site. Colour and geometry arrive as
* class modifiers from layout._rule(), because core/separator serialises its
* own colour and a hand-written style attribute would flag every one of them as
* invalid content the first time the page was opened in the editor.
*
* Measured across the 74 documents: 42 bark, 37 accent, 4 cream, 7 one-offs;
* 46 at 13x26px (a stub used as a bullet), 21 at 163x12px, 16 at 25% x 12px.
*/
.adsbox-rule {
width: 163px;
max-width: 60%;
height: 12px;
border: 0;
margin-inline: auto;
margin-block: var(--wp--preset--spacing--20);
background: currentColor;
opacity: 1;
}
.adsbox-rule--accent { background: var(--wp--preset--color--accent); }
.adsbox-rule--bark { background: var(--wp--preset--color--bark); }
.adsbox-rule--cream { background: var(--wp--preset--color--cream); }
.adsbox-rule--contrast { background: var(--wp--preset--color--contrast); }
.adsbox-rule--base { background: var(--wp--preset--color--base); }
.adsbox-rule--quarter { width: 25%; max-width: none; }
.adsbox-rule--stub { width: 13px; height: 26px; max-width: none; }
.adsbox-rule--left { margin-inline: 0 auto; }
.adsbox-rule--right { margin-inline: auto 0; }
/*
* Elementor's divider `gap` — the space above and below the bar. 68 of the 91
* dividers on the site declare 0 and 20 declare 2, so the rule is drawn tight
* against what follows it. The rebuild gave every one 16px of its own margin
* and then core's flow layout added another 24px of blockGap to the heading
* underneath, which is most of why the /contact/ information band stood 262px
* tall against production's ~158.
*/
.adsbox-rule--tight {
margin-block: 2px;
}
.adsbox-rule--tight + * {
margin-block-start: 0.5rem;
}
@media (max-width: 781px) {
.adsbox-rule { width: 93px; }
}
/*
* The band-level "loose content gets the measure and a gutter" rule would give
* the rule a 1200px box and centre it inside that; it is a 163px bar and needs
* neither. Kept narrow enough that it cannot swallow a real separator.
*/
.adsbox-section > .adsbox-rule {
padding-inline: 0;
}
/* ----------------------------------------------------------------- card box */
.adsbox-card {
border-radius: 1.25rem;
background: var(--wp--preset--color--shell);
padding: var(--wp--preset--spacing--40);
}
.adsbox-card--outline {
background: transparent;
border: 1px solid var(--wp--preset--color--hairline);
}
/* ---------------------------------------------------------------- accordion */
.adsbox-faq .wp-block-details {
border-bottom: 1px solid var(--wp--preset--color--hairline);
padding-block: var(--wp--preset--spacing--30);
}
.adsbox-faq .wp-block-details summary {
cursor: pointer;
font-size: var(--wp--preset--font-size--large);
font-weight: 500;
letter-spacing: -0.02em;
list-style: none;
}
.adsbox-faq .wp-block-details summary::-webkit-details-marker {
display: none;
}
.adsbox-faq .wp-block-details summary::after {
content: "+";
float: right;
font-weight: 400;
line-height: 1;
}
.adsbox-faq .wp-block-details[open] summary::after {
content: "\2013";
}
/* ------------------------------------------------------------------- header */
/*
* Production's header (elementor_library 4085): sticky to the top on every
* breakpoint, white, a soft shadow, min-height 74px, boxed at 1860px with 2%
* inline padding, and a row of four things — logo, menu, booking button,
* language flag. The first rebuild had none of the sticking, a 110px logo and
* no switcher at all.
*/
/*
* The sticky goes on the template part's own , not on the group inside
* it. A sticky element only travels within its containing block, and that
* wrapper's height IS the header — so `position: sticky` on .adsbox-header
* computed correctly, reported `sticky`, and stuck to nothing. The bar simply
* scrolled away like a static one.
*/
.wp-site-blocks > header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 99;
background: var(--wp--preset--color--base);
box-shadow: 0 1px 0 rgba(24, 24, 24, 0.08), 0 6px 18px rgba(24, 24, 24, 0.04);
}
/*
* `add_theme_support('wp-block-styles')` gives any group with a background
* `padding: 1.25em 2.375em` — the same trap `.adsbox-section.has-background`
* already opts out of. Here it added 24px above and below an 80px bar and made
* the header 128px against production's ~78. Nothing in the markup says 128.
*/
.adsbox-header,
.adsbox-header.has-background {
padding: 0;
}
/*
* The root flow layout gives every child of .wp-site-blocks a 24px
* `margin-block-start` from theme.json's blockGap, and is one of those
* children — so a 24px white stripe sat between the sticky header and the top
* of every page. On /contact/ that is a band of white above the hero
* photograph, which butts against the header on production.
*
* Zeroed on and the footer only: the gap is right *inside* a page and
* wrong between the page and its chrome.
*/
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
margin-block-start: 0;
}
.adsbox-header__bar {
max-width: 1860px;
margin-inline: auto;
min-height: 74px;
padding-inline: 2%;
gap: 2%;
}
/* 153x80, object-fit: contain — the logo file is 660x649, so a width-only rule
makes it a tall square that pushes the bar to twice its height. */
.adsbox-header .wp-block-site-logo img {
width: 153px;
height: 80px;
object-fit: contain;
object-position: left center;
}
/* The menu is the flexible middle: it takes the space the logo and the
right-hand cluster do not, and centres inside it — production's
"stretch + centre". */
.adsbox-header .adsbox-nav {
flex: 1 1 auto;
justify-content: center;
}
.adsbox-header .adsbox-nav .wp-block-navigation__container {
gap: clamp(1.5rem, 3.6vw, 70px);
}
.adsbox-header__end {
flex: 0 0 auto;
gap: var(--wp--preset--spacing--20);
}
.adsbox-header__end .wp-block-buttons {
margin: 0;
}
/*
* The header button keeps the size it had before the page buttons were raised
* to production's 18px, and that is a deliberate exception rather than an
* oversight. theme.json sets one button style for the whole site; 18px is right
* for a call to action a visitor is meant to land on, and too heavy for a chip
* sitting in a 72px bar next to the nav and the language switcher, where it
* starts crowding the logo.
*
* Scoped to .adsbox-header__end, so every button on every page keeps the new
* scale. The mobile override further down this file still wins below 782px.
*/
.adsbox-header__end .wp-block-button__link {
font-size: var(--wp--preset--font-size--small);
padding: 0.7rem 1.5rem;
}
/* Site nav. The underline theme.json puts on every link is right for body copy
and wrong here; production draws a 1px pointer under the active item. */
.adsbox-nav .wp-block-navigation-item__content {
text-decoration: none;
padding-block: 3px;
border-block-end: 1px solid transparent;
}
.adsbox-nav .wp-block-navigation-item__content:hover,
.adsbox-nav .wp-block-navigation-item__content:focus-visible {
color: var(--wp--preset--color--accent);
border-block-end-color: currentColor;
}
.adsbox-nav .current-menu-item > .wp-block-navigation-item__content {
color: var(--wp--preset--color--accent);
border-block-end-color: currentColor;
}
/* Submenu. Production's Bulgarian header nests the UGC page under Услуги —
an arrow beside the parent, a panel on hover. core/navigation ships the
behaviour and the arrow; core's default panel is a white box with a hairline
border and 0.5em padding, which reads as a browser widget rather than as
this site. Restyled to the header's own type and ink. */
.adsbox-nav .wp-block-navigation__submenu-container {
min-width: max-content;
padding: 0.75rem 0;
border: 0;
border-radius: 4px;
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
box-shadow: 0 12px 32px rgba(24, 24, 24, 0.14);
}
.adsbox-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding: 0.4rem 1.25rem;
border-block-end: 0;
white-space: nowrap;
}
/* The parent's own underline is the header's hover affordance and belongs to
the label, not to the label plus its arrow. */
.adsbox-nav .wp-block-navigation__submenu-icon {
padding: 0 0 0 0.4rem;
background: transparent;
border: 0;
color: inherit;
}
/* The overlay is a stacked list, so the panel is inline there rather than a
floating box — core handles the position; this stops it inheriting the
desktop panel's shadow and ground. */
.adsbox-nav .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container {
padding: 0;
background: transparent;
box-shadow: none;
}
/* --------------------------------------------------------- language switch */
/*
* Production's polylang widget with `hide_current: yes` and no language name:
* one flag, 4:3, linking to the translation of the page you are on. Rendered by
* [adsbox_lang_switcher] in inc/chrome.php, which is Polylang-first and falls
* back to the pairs the WXR already carries.
*/
.adsbox-langs__link {
display: inline-flex;
align-items: center;
line-height: 0;
text-decoration: none;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(24, 24, 24, 0.15);
transition: transform 0.2s ease;
}
.adsbox-langs__link:hover,
.adsbox-langs__link:focus-visible {
transform: scale(1.08);
}
.adsbox-langs__flag svg {
display: block;
width: 24px;
height: auto;
border-radius: 2px;
}
/* -------------------------------------------------------------- footer */
/*
* Production's footer (elementor_library 690) is a single row, aligned to the
* top, space-between: the mailing-list form at 48%, the INFORMATION menu, then
* "Follow us:" with five outlined circular icons. It carries no rule and no
* copyright line — the first rebuild invented both, stacked the form full width
* and put a pink submit button under it.
*/
.adsbox-footer {
padding-block: var(--wp--preset--spacing--60);
}
.adsbox-footer__bar {
max-width: 1860px;
margin-inline: auto;
padding-inline: 4%;
gap: var(--wp--preset--spacing--50);
align-items: flex-start;
}
/* 48% on production, and it must not grow into the link columns: the form is
the widest thing in the row and flex-grow lets it eat the space the two
menus need. */
.adsbox-footer__form {
flex: 0 1 48%;
min-width: min(100%, 20rem);
max-width: 40rem;
}
.adsbox-footer__col {
flex: 0 1 auto;
}
.adsbox-footer__col > h2 {
font-weight: 500;
text-transform: uppercase;
letter-spacing: -0.03em;
margin-block-end: var(--wp--preset--spacing--30);
}
/* Production stacks this column: the heading sits above the icon row, like
INFORMATION above its links. Laying it out inline made the column ~600px
wide, which wrapped the three-column bar onto two lines. */
.adsbox-footer__social .wp-block-social-links {
gap: 7px;
}
/* Production draws filled ink discs with a white glyph (Elementor's
shape-circle social-icons widget), ~26px across — the icon row is about as
wide as the "Follow us:" heading above it, which is how production scales it. Core's icon-background-color
paints the disc; only the geometry and the hover are here. */
.adsbox-social .wp-block-social-link {
border-radius: 50%;
transition: background-color 0.2s ease;
}
.adsbox-social .wp-block-social-link a {
padding: 5px;
}
.adsbox-social .wp-block-social-link:hover,
.adsbox-social .wp-block-social-link:focus-within {
background-color: var(--wp--preset--color--accent);
}
.adsbox-footer-nav {
font-weight: 500;
}
.adsbox-footer-nav .wp-block-navigation__container {
gap: var(--wp--preset--spacing--30);
}
.adsbox-footer-nav .wp-block-navigation-item__content {
text-decoration: none;
text-transform: uppercase;
letter-spacing: -0.03em;
}
.adsbox-footer-nav .wp-block-navigation-item__content:hover,
.adsbox-footer-nav .wp-block-navigation-item__content:focus-visible {
color: var(--wp--preset--color--accent);
}
/* ------------------------------------------------------------- skip to main */
.adsbox-skip-link {
position: absolute;
left: -9999px;
z-index: 999;
padding: 0.75rem 1.25rem;
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
.adsbox-skip-link:focus {
left: 1rem;
top: 1rem;
}
/* ------------------------------------------------------------ blog surface */
/*
* Phase 4b. The article surface is a deliverable, not a detail: the whole
* project exists to enable an SEO content operation, and an article that reads
* badly is a page nobody finishes.
*/
.adsbox-lead {
color: var(--wp--preset--color--contrast);
line-height: 1.4;
letter-spacing: -0.02em;
}
.adsbox-byline {
color: var(--wp--preset--color--bark);
align-items: baseline;
}
.adsbox-byline .wp-block-post-author-name a {
text-decoration: none;
}
/* Separates author from date without an extra element in the markup. */
.adsbox-byline > * + *::before {
content: "·";
margin-inline-end: 0.5em;
opacity: 0.5;
}
/*
* Measure. Article body copy is capped by single.html's 720px contentSize; this
* only relaxes the heading rhythm so an H2 is not glued to the paragraph above.
*/
.adsbox-article-head + * {
margin-top: var(--wp--preset--spacing--40);
}
.wp-block-post-content > :is(h2, h3) {
margin-top: var(--wp--preset--spacing--50);
}
.adsbox-pullquote {
border-left: 3px solid var(--wp--preset--color--accent);
padding-left: var(--wp--preset--spacing--30);
margin-block: var(--wp--preset--spacing--50);
font-size: var(--wp--preset--font-size--large);
line-height: 1.35;
}
.adsbox-pullquote p {
font-size: inherit;
}
/* ------------------------------------------------------------ post teasers */
.adsbox-teaser .wp-block-post-title a {
text-decoration: none;
}
.adsbox-teaser .wp-block-post-title a:hover,
.adsbox-teaser .wp-block-post-title a:focus-visible {
text-decoration: underline;
text-decoration-color: var(--wp--preset--color--accent);
}
.adsbox-teaser__date,
.adsbox-teaser .wp-block-post-date {
color: var(--wp--preset--color--bark);
}
/* ---------------------------------------------------------- prev/next links */
.wp-block-post-navigation-link {
color: var(--wp--preset--color--bark);
}
.wp-block-post-navigation-link a {
text-decoration: none;
}
.wp-block-post-navigation-link a:hover,
.wp-block-post-navigation-link a:focus-visible {
text-decoration: underline;
}
/* ------------------------------------------------------------------ search */
.wp-block-search__input {
border: 1px solid var(--wp--preset--color--hairline);
border-radius: 9999px;
padding: 0.8rem 1.25rem;
font-family: inherit;
font-size: var(--wp--preset--font-size--small);
}
.wp-block-search__button {
border: 0;
border-radius: 9999px;
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
padding: 0.8rem 1.75rem;
font-family: inherit;
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
cursor: pointer;
}
.wp-block-search__button:hover,
.wp-block-search__button:focus-visible {
background: var(--wp--preset--color--accent);
}
/* ------------------------------------------------ Phase 6 additions
*
* Two things the assembled pages need that no pattern file declares.
* Everything else Phase 6 emits reuses the class names above, deliberately:
* the first version of the assembler invented its own, so 26 of the 31 classes
* it wrote had no rule anywhere. The markup was valid, every structural check
* passed, and the sections rendered as unstyled body text. Structure checks do
* not see CSS.
*/
/* The comparison slider's labels. patterns/image-compare.php carries them only
* as an aria-label, which leaves a sighted visitor with no idea which half is
* which — and left the words out of post_content entirely, which check 3b
* reported as lost content. It was right on both counts. */
/*
* The labels are a hover affordance, not a caption. Production's server HTML
* carries them only as `data-exad-before_label` / `-after_label`; exad's script
* paints them into an overlay that appears when the pointer is on the slider
* (`exad_overlay_enable: on`, `exad_overlay_color: rgba(0,0,0,0.37)`), so a
* visitor looking at the page sees two photographs and a divider and nothing
* else. They stay real text in post_content — a label only a data attribute
* knows about is not a label — and they are revealed on hover and on keyboard
* focus rather than being hidden from everyone.
*/
.adsbox-compare__label {
position: absolute;
bottom: 0.75rem;
z-index: 2;
opacity: 0;
transition: opacity 150ms ease;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent);
color: var(--wp--preset--color--base);
font-size: var(--wp--preset--font-size--x-small, 0.78rem);
letter-spacing: 0.02em;
pointer-events: none;
}
.adsbox-compare__label--a { left: 0.75rem; }
.adsbox-compare__label--b { right: 0.75rem; }
.adsbox-compare:hover .adsbox-compare__label,
.adsbox-compare:focus-within .adsbox-compare__label {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.adsbox-compare__label {
transition: none;
}
}
/* --------------------------------------------------------------------- forms
*
* Fluent Forms ships its own stylesheet; these rules only make it inherit the
* theme's type, colour and spacing so a form does not read as a bolted-on
* plugin. Everything is scoped under .adsbox-form, which is the group the
* assembler wraps every [fluentform] shortcode in.
*/
/*
* The geometry below is production's own, read from the Elementor form widget
* on /contact/ (page-698) rather than invented: fields are `width: 50` two-up,
* `column_gap`/`row_gap` are 35px, the control is transparent with a single
* 1px #C8C8C8 bottom border and no radius, the label is 20px/400 uppercase at
* 1px tracking, and the submit is a black 25px pill centred under the form
* that turns accent-pink on hover. The first rebuild shipped boxed cream
* inputs in one stacked column with a pink left-aligned button — every one of
* those was a default, not a reading of the source.
*
* The section container is `padding: 0 140px`, so the form is 1160px wide at
* the 1440px desktop, not the 44rem the first cut capped it at.
*/
.adsbox-form {
margin-block: 50px;
max-width: 72.5rem;
margin-inline: auto;
padding-block-end: var(--wp--preset--spacing--60);
}
.adsbox-form .fluentform .ff-el-group {
margin-block-end: 35px;
}
/* Fluent Forms' own column container. The cells carry an inline `flex-basis: 50%`
which a stylesheet cannot outrank, so the 35px `column_gap` the widget declares
has to come from padding inside the cell, not from `gap`: Fluent Forms' own
15px gap made two 50% cells sum to 1127px inside a 1112px row, they wrapped,
and each then grew back to the full width — a two-column form that rendered as
one stacked column with every check still green. */
.adsbox-form .fluentform .ff-t-container {
display: flex;
flex-wrap: wrap;
gap: 0;
width: auto;
margin-inline: -17.5px;
}
.adsbox-form .fluentform .ff-t-container > .ff-t-cell {
padding-inline: 17.5px;
min-width: min(100%, 14rem);
flex-grow: 1;
}
.adsbox-form .fluentform .ff-el-input--label label {
font-family: inherit;
font-size: 20px;
font-weight: 400;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--wp--preset--color--contrast);
margin-block-end: 0.6rem;
display: inline-block;
}
/* `mark_required: yes` with `mark_required_color: #D57F9C` on the widget. */
.adsbox-form .fluentform .ff-el-is-required.asterisk-right label:after {
color: var(--wp--preset--color--accent);
}
.adsbox-form .fluentform .ff-el-form-control {
border: 0;
border-bottom: 1px solid #c8c8c8;
border-radius: 0;
background: transparent;
padding: 0.55rem 0;
font-family: inherit;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
color: var(--wp--preset--color--contrast);
width: 100%;
box-shadow: none;
}
.adsbox-form .fluentform textarea.ff-el-form-control {
resize: vertical;
}
/* `field_text_color: #7E7E7E`, `text-transform: capitalize` — production styles
the placeholder, not the typed value, which stays ink. */
.adsbox-form .fluentform .ff-el-form-control::placeholder {
color: #7e7e7e;
text-transform: capitalize;
opacity: 1;
}
.adsbox-form .fluentform .ff-el-form-control:focus,
.adsbox-form .fluentform .ff-el-form-control:focus-visible {
outline: 0;
border-bottom-color: var(--wp--preset--color--accent);
box-shadow: none;
}
/* The consent checkbox is the most-repeated broken link on the old site
* (defect 6: 83 http://theadsbox.com/privacy-policy-2/ across all 46 pages).
* It is rebuilt root-relative and must stay legible, not shrunk to fine print. */
.adsbox-form .fluentform .ff-el-form-check.ff-el-tc label {
display: flex;
gap: 0.6rem;
align-items: center;
font-size: var(--wp--preset--font-size--small);
line-height: 1.5;
}
/* Fluent Forms leaves the box at the browser's default 13px, which next to
16px type reads as an afterthought — on the one control that records consent.
The span is the wrapper Fluent Forms puts around the input. */
.adsbox-form .fluentform .ff-el-form-check.ff-el-tc .ff_tc_checkbox {
display: inline-flex;
flex: 0 0 auto;
}
.adsbox-form .fluentform .ff-el-form-check.ff-el-tc input[type="checkbox"] {
width: 1.1rem;
height: 1.1rem;
margin: 0;
accent-color: var(--wp--preset--color--accent);
}
/* `button_align: center` on every page form in the source. Fluent Forms writes
the alignment as a class on the wrapper; the rule is here because the wrapper
is a plain block and `ff-text-center` only sets text-align. */
.adsbox-form .fluentform .ff_submit_btn_wrapper {
text-align: center;
}
.adsbox-form .fluentform .ff-btn-submit {
border: 0;
border-radius: 25px;
background: #000000;
color: #ffffff;
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
padding: 1.15rem 3.5rem;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.adsbox-form .fluentform .ff-btn-submit:hover {
background: var(--wp--preset--color--accent);
color: #ffffff;
filter: none;
}
@media (prefers-reduced-motion: no-preference) {
/* `button_hover_animation: grow` on the widget. */
.adsbox-form .fluentform .ff-btn-submit:hover {
transform: scale(1.05);
}
}
/* ------------------------------------------------------------------ the map
*
* Production's /contact/ ends on a full-bleed maps.google.com iframe, 408px
* tall. The height comes from the widget's own `height` setting, carried in as
* --adsbox-map-h so a second map at a different size needs no new CSS.
*/
.adsbox-map {
position: relative;
margin: 0;
height: var(--adsbox-map-h, 408px);
background: var(--wp--preset--color--mist);
overflow: hidden;
}
.adsbox-map__frame {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/*
* The office address as text. The iframe renders it as pixels inside a
* cross-origin document, so this is the only place it exists on the page for a
* screen reader or a crawler. Visually hidden rather than removed — production
* shows the map alone, and inventing a caption under it would be a design
* change nobody asked for. Focusable, so a keyboard user can still reach
* directions.
*/
.adsbox-map__addr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.adsbox-map__addr a:focus {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
width: auto;
height: auto;
padding: 0.75rem 1.25rem;
clip-path: none;
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
box-shadow: 0 10px 30px rgba(24, 24, 24, 0.2);
}
/* ------------------------------------------------------------- popup dialog
*
* Elementor popup 673, rebuilt as a native