/**
* Styles supporting assets/dayta-fx.js, plus the header and logo corrections.
* Kept out of style.css so the effect layer can be reasoned about on its own.
*/
/* ------------------------------------------------------------------ header */
/*
* The logo image is a 514×609 portrait file and the header widget has no size
* control, so unconstrained it rendered at 150×178 and pushed the header to
* 809px tall. Constraining the height fixes both the oversized logo and the
* gap above the menu.
*/
.site-header .elementor-widget-ld_header_image img,
header .elementor-widget-ld_header_image img,
.lqd-head-sec .elementor-widget-ld_header_image img,
/* The mobile bar draws its logo through .navbar-brand, not the Elementor
widget, so it kept rendering at full size and made a 222px-tall header. */
.lqd-mobile-sec .navbar-brand img,
.lqd-mobile-sec .logo-default img,
.navbar-brand-inner img {
max-height: 46px;
width: auto;
height: auto;
}
@media (max-width: 767px) {
.site-header .elementor-widget-ld_header_image img,
header .elementor-widget-ld_header_image img,
.lqd-mobile-sec .navbar-brand img,
.lqd-mobile-sec .logo-default img,
.navbar-brand-inner img {
max-height: 38px;
}
}
/* The footer mark is decorative and sits above small print. */
.main-footer .elementor-widget-ld_fancy_image img,
footer .elementor-widget-ld_fancy_image img {
max-height: 54px;
width: auto;
}
/* -------------------------------------------------------------------- zoom */
.dayta-zoom-host {
position: relative;
overflow: hidden;
/* The photograph now lives on the layer, not the section. */
background-image: none !important;
perspective: 900px;
}
.dayta-zoom-layer {
position: absolute;
inset: -2%;
z-index: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
will-change: transform;
pointer-events: none;
}
/* Keep the overlay and the content above the moving layer. */
.dayta-zoom-host > .elementor-background-overlay { z-index: 1; }
.dayta-zoom-host > .elementor-container,
.dayta-zoom-host > .elementor-column-gap-default { position: relative; z-index: 2; }
/* ------------------------------------------------------------------ lights */
.dayta-lights-host { position: relative; overflow: hidden; }
.dayta-lights-canvas {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* Sits over the darkening overlay so the colour actually reads. At 0.85
under the overlay it was invisible against the photograph. */
mix-blend-mode: screen;
opacity: 1;
}
.dayta-lights-host > .elementor-background-overlay { z-index: 0; }
.dayta-lights-host > .elementor-container { position: relative; z-index: 2; }
/* --------------------------------------------------------- frames crossfade */
/*
* By default the outgoing frame slides its photograph away vertically and the
* next one slides in behind it. The client wants the opposite reading: the old
* photograph stays where it is, acting as the background, while the new one
* arrives over the top and the old one fades out underneath.
*
* GSAP writes the slide-away transform inline every frame, so neutralising it
* needs `!important` — that is the one place inline styles lose.
*/
.dayta-af-crossfade .lqd-af-slide { transition: opacity 0.85s ease; }
.dayta-af-crossfade .lqd-af-slide.lqd-af-slide--current { z-index: 2; }
/*
* The outgoing frame keeps its `--current` class until the widget's timeline
* ends, so it matches the rule above as well; without `!important` and the
* doubled class the fade never wins.
*/
.dayta-af-crossfade .lqd-af-slide.lqd-af-slide--movin-out {
z-index: 1 !important;
opacity: 0 !important;
}
.dayta-af-crossfade .lqd-af-slide.lqd-af-slide--movin-out .lqd-af-slide__img,
.dayta-af-crossfade .lqd-af-slide.lqd-af-slide--movin-out .lqd-af-slide__img__inner {
transform: none !important;
}
/* A slow drift on the outgoing photo keeps the change from feeling like a cut. */
.dayta-af-crossfade .lqd-af-slide.lqd-af-slide--movin-out .lqd-af-slide__img figure {
transform: scale(1.06) !important;
transition: transform 0.85s ease;
}
/* The arriving photograph comes up over it rather than out from under it. */
.dayta-af-crossfade .lqd-af--navigating .lqd-af-slide--current .lqd-af-slide__img,
.dayta-af-crossfade.lqd-af--navigating .lqd-af-slide--current .lqd-af-slide__img {
transform: none !important;
}
/* ------------------------------------------------------- horizontal scroll */
.dayta-hscroll { overflow: hidden; padding: 0 !important; }
/* Until the script has measured the panels the row must not be a wide strip
sitting in the page — without this the section renders four screens wide on
first paint and the layout jumps when the pin takes over. */
.dayta-hscroll:not(.dayta-hscroll-ready) .elementor-inner-section > .elementor-container {
overflow: hidden;
}
.dayta-hscroll .elementor-container,
.dayta-hscroll .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
padding: 0;
}
.dayta-hscroll-track {
display: flex !important;
flex-wrap: nowrap !important;
width: max-content !important;
max-width: none !important;
align-items: stretch;
will-change: transform;
}
/*
* The panel is one screen wide — but NOT `100vw`, which counts the scrollbar
* and so overhangs the content box by its width, pushing the whole document
* sideways. The script measures the section and writes the real number here.
*/
.dayta-hscroll-panel {
flex: 0 0 var(--dayta-panel-w, 100%);
width: var(--dayta-panel-w, 100%) !important;
max-width: none !important;
min-height: 100vh;
position: relative;
display: flex;
overflow: hidden;
}
/*
* `!important` because Elementor writes the column's own padding from the
* panel with an id-scoped selector that outranks anything written here — the
* inset silently computed to 0 and the headline sat against the screen edge.
*/
.dayta-hscroll-panel > .elementor-widget-wrap,
.dayta-hscroll-panel > .elementor-element-populated {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 9vw 12vh !important;
}
/* The oversized word the reference leans on. Persian needs a ceiling Latin
does not: joined letters at 20vw overrun the panel on a wide screen. */
.dayta-hscroll-panel .elementor-widget-hub_fancy_heading h2,
.dayta-hscroll-panel .elementor-widget-hub_fancy_heading h1 {
font-size: clamp(38px, 7vw, 104px) !important;
line-height: 1.1 !important;
will-change: transform;
}
.dayta-hscroll-count {
position: absolute;
top: 14vh;
inset-inline-start: 8vw;
font-size: clamp(60px, 12vw, 190px);
font-weight: 700;
line-height: 1;
color: rgba(255, 255, 255, 0.13);
pointer-events: none;
user-select: none;
}
/* A phone has no room for a pinned sideways track; the panels simply stack. */
@media (max-width: 767px) {
.dayta-hscroll-track { display: block !important; width: 100% !important; }
.dayta-hscroll-panel { width: 100% !important; max-width: 100% !important; min-height: 78vh; }
.dayta-hscroll-panel > .elementor-widget-wrap { padding: 0 24px 48px; }
.dayta-hscroll-count { font-size: 64px; top: 8vh; }
}
/* ---------------------------------------------------------------- bento */
/*
* The bento grid from the reference: a row of cards where two of the four run
* double width, so the block reads as an arrangement rather than a table.
* The reference is Tailwind on a React tree; here the cards are ordinary
* Elementor columns and the grid is declared once, on their container.
*/
/*
* Scoped to the card row by its own class, not to "any inner section inside
* the bento" — the cards themselves contain inner sections for their small
* label/value rows, and a descendant selector turned each of those into a
* grid too, so the section rendered twelve cards instead of four.
*/
.dayta-bento-grid > .elementor-container {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
.dayta-bento-grid > .elementor-container > .elementor-column {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
/* Cards one and four span two columns; two and three stay square. */
.dayta-bento-grid > .elementor-container > .elementor-column:nth-child(1),
.dayta-bento-grid > .elementor-container > .elementor-column:nth-child(4) {
grid-column: span 2;
}
.dayta-bento-grid > .elementor-container > .elementor-column > .elementor-element-populated {
height: 100%;
display: flex;
flex-direction: column;
/*
* Elementor's own `.elementor-widget-wrap` is `flex-wrap: wrap`. Turned on
* its side by `flex-direction: column` against a card whose height is fixed
* by `aspect-ratio`, that wraps the overflow into a SECOND column — and in
* RTL the second column lands to the left of the card, which is how the
* last stat row ended up outside it.
*/
flex-wrap: nowrap;
justify-content: space-between;
background: var(--dayta-bento-surface, #F1F3F6);
border-radius: 14px;
padding: 26px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dayta-bento-grid > .elementor-container > .elementor-column > .elementor-element-populated:hover {
transform: translateY(-4px);
box-shadow: 0 14px 34px rgba(20, 32, 42, 0.10);
}
/* The square cards want a square, but not at the cost of clipping their own
text — `height: auto` lets a card that needs more room take it. */
.dayta-bento-grid > .elementor-container > .elementor-column:nth-child(2) > .elementor-element-populated,
.dayta-bento-grid > .elementor-container > .elementor-column:nth-child(3) > .elementor-element-populated {
aspect-ratio: 1 / 1;
height: auto;
}
/*
* The label/value rows inside a card. Their widths are declared here rather
* than left to Elementor's per-element CSS: every column carries
* `elementor-col-100`, so if that generated stylesheet is missing for an id
* the two columns each take the full width, the pair adds up to 200% and the
* row leaves the card entirely.
*/
.dayta-stat { width: 100%; }
.dayta-stat > .elementor-container {
display: flex !important;
flex-wrap: nowrap !important;
align-items: baseline;
gap: 10px;
}
.dayta-stat > .elementor-container > .elementor-column {
width: auto !important;
max-width: none !important;
flex: 0 1 auto;
}
.dayta-stat > .elementor-container > .elementor-column:first-child { flex: 1 1 auto; min-width: 0; }
.dayta-stat > .elementor-container > .elementor-column > .elementor-element-populated {
padding: 0 !important;
background: none;
box-shadow: none;
}
/* Icon at the top, words at the bottom — the whole point of the layout. */
.dayta-bento .elementor-widget-ld_icon_box { margin-bottom: 0 !important; }
.dayta-bento .dayta-bento-foot { margin-top: auto; }
/*
* On a short screen the bento is what stops its section being one page.
*
* The square cards take their height from their WIDTH — `aspect-ratio: 1/1` in
* a ~1140px three-column grid makes every row 371px, so two rows plus the
* heading block plus the section padding come to 1206px. On a 1080px-tall
* display that lands almost exactly on 100vh, which is what it was tuned
* against; on a 780px laptop it is 155% and the section stops aligning to the
* viewport the way its neighbours do.
*
* So the squares are kept wherever there is room for them, and only a screen
* too short to hold them switches to height-driven rows. Gated on height, not
* width, because height is the actual constraint.
*/
@media (min-width: 1025px) and (max-height: 900px) {
/*
* The grid takes whatever the headings leave, and nothing here is told how
* much that is.
*
* Three earlier attempts all subtracted a constant — `100vh - 296px`, then
* 268px — and all of them missed, because the number is not a constant: the
* intro heading is one line at 1440px wide and three lines at 1180px, so
* the chrome moved from 268 to 352 without anything being edited. Measuring
* it once and hard-coding the answer only fixes the width it was measured
* at.
*
* So the column becomes a flex column and the grid takes `flex: 1`. The
* headings claim their natural height first, whatever the wrapping does,
* and the grid receives the remainder.
*
* A flex chain from the section down was tried here and does NOT work,
* which is worth writing down because it looks like it should.
*
* Every link stretched correctly — section, container, column and the
* populated wrapper all reported the same height — but the grid still sized
* its rows to 304px. The reason is at the top: the section's height is
* auto with `min-height: 100vh`, so flex distributes the space its CONTENT
* asks for, and the content is the grid. The grid asks for room, gets it,
* and the section grows to match. `1fr` then divides that larger box. The
* loop closes on itself and 100vh never enters the arithmetic.
*
* Sizing from the viewport instead breaks the loop: the rows read 100vh
* directly and the section follows them, rather than the other way round.
*/
.dayta-bento-grid > .elementor-container {
/*
* The floor is a number rather than `min-content` on purpose.
* `min-content` measured these rows at 304px against 182px of actual
* copy: in the block axis the browser resolves it with the item at its
* minimum WIDTH, so every line of Persian wraps far more than it does
* at the real column width, and the floor came out taller than the room
* it was meant to fit in. 224px is the tallest card's content plus its
* padding, with headroom for one more line. Below that the section
* grows past 100vh, which is the right answer — a section that cuts
* text off is worse than a section that is tall.
*
* 268px is the chrome above and below the grid: 80px section padding,
* 20px column padding, and the heading block. The 9px is half the row
* gap. It is a measured number and it does drift with the wrapping of
* the intro heading, so the rule below pins that heading to one line —
* without it the constant is wrong at every width but the one it was
* taken at.
*/
grid-auto-rows: clamp(224px, calc((100vh - 294px) / 2 - 9px), 320px);
}
/*
* The heading block is the other half of the budget, so its gaps tighten
* here. Pinning the intro to one line with `nowrap` + `ellipsis` was tried
* and taken back out: it would hold the constant steady, but at a narrower
* width it hides the client's own words behind a "…" with nothing to say
* it happened. A section that runs 11% long is a smaller problem than copy
* that silently disappears.
*/
.dayta-bento > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget {
margin-bottom: 6px !important;
}
/*
* Heading type steps down on a short screen only — the full size is intact
* on anything 900px or taller. This is the 84px the section was over by:
* the clamp below now assumes 294px of chrome and gets it.
*/
.dayta-bento > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget h2 {
font-size: 34px;
line-height: 1.15;
}
.dayta-bento > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget p {
font-size: 16px;
line-height: 1.6;
}
.dayta-bento-grid > .elementor-container > .elementor-column:nth-child(2) > .elementor-element-populated,
.dayta-bento-grid > .elementor-container > .elementor-column:nth-child(3) > .elementor-element-populated {
aspect-ratio: auto;
}
.dayta-bento-grid > .elementor-container > .elementor-column > .elementor-element-populated {
padding: 16px 22px;
}
/* The heading block above the grid gives back the rest. */
.dayta-bento > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget {
margin-bottom: 12px !important;
}
}
@media (max-width: 1024px) {
.dayta-bento-grid > .elementor-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dayta-bento-grid > .elementor-container > .elementor-column:nth-child(1),
.dayta-bento-grid > .elementor-container > .elementor-column:nth-child(4) { grid-column: span 2; }
}
@media (max-width: 767px) {
.dayta-bento-grid > .elementor-container { grid-template-columns: 1fr; }
.dayta-bento-grid > .elementor-container > .elementor-column:nth-child(n) { grid-column: span 1; }
.dayta-bento-grid > .elementor-container > .elementor-column > .elementor-element-populated { aspect-ratio: auto; }
}
/* ------------------------------------------------------------------ rotate */
/*
* Eight small marks in one thin row, each tumbling on its own axis, read as
* noise. Give them room: real tiles with a card behind them, four to a row on
* a desktop and two on a phone, so each logo has a surface that can turn.
*/
.dayta-rotate .elementor-widget-ld_fancy_image {
will-change: transform;
transform-style: preserve-3d;
background: #FFFFFF;
border: 1px solid rgba(28, 28, 30, 0.08);
border-radius: 14px;
padding: 26px 18px;
margin: 10px 0;
box-shadow: 0 8px 24px rgba(20, 32, 42, 0.06);
display: flex;
align-items: center;
justify-content: center;
min-height: 104px;
}
.dayta-rotate .elementor-widget-ld_fancy_image img {
max-height: 46px;
width: auto;
}
.dayta-rotate .elementor-inner-section > .elementor-container {
perspective: 1400px;
flex-wrap: wrap;
row-gap: 6px;
}
.dayta-rotate .elementor-inner-section .elementor-column {
width: 25%;
padding-inline: 8px;
}
@media (max-width: 1024px) {
.dayta-rotate .elementor-inner-section .elementor-column { width: 33.333%; }
}
@media (max-width: 767px) {
.dayta-rotate .elementor-inner-section .elementor-column { width: 50%; }
.dayta-rotate .elementor-widget-ld_fancy_image { min-height: 84px; padding: 18px 12px; }
}
.dayta-rotate-names {
width: 100%;
overflow: hidden;
margin-top: 26px;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.dayta-rotate-names__inner {
display: inline-block;
white-space: nowrap;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.4px;
/* #5A5A5F on white measures 7:1 — safe at this size. */
color: #5A5A5F;
will-change: transform;
}
/* ----------------------------------------------------------- icon side */
/*
* On a right-to-left page the icon belongs on the RIGHT of the words, which is
* where the reading starts. `ld_icon_box` in side layout puts it on the left
* unless told otherwise, so it is corrected once here for every screen rather
* than per widget.
*/
.rtl .elementor-widget-ld_icon_box .iconbox,
.rtl .elementor-widget-ld_icon_box .lqd-iconbox,
.rtl .elementor-widget-ld_icon_box .iconbox-side,
.rtl .elementor-widget-ld_icon_box [class*="iconbox"][class*="side"] {
flex-direction: row !important;
text-align: right;
}
.rtl .elementor-widget-ld_icon_box .iconbox-icon-container,
.rtl .elementor-widget-ld_icon_box .lqd-iconbox-icon,
.rtl .elementor-widget-ld_icon_box [class*="icon-container"] {
margin-inline-end: 18px;
margin-inline-start: 0;
order: -1;
flex: 0 0 auto;
}
/* An icon whose glyph never loaded still holds its circle open; a box with no
icon at all should not leave a gap where one would have been. */
.elementor-widget-ld_icon_box [class*="icon-container"]:empty { display: none; }
/* -------------------------------------------------------------- marquee */
.dayta-marquee { overflow: hidden; }
.dayta-marquee .elementor-inner-section > .elementor-container {
display: flex !important;
flex-wrap: nowrap !important;
width: max-content !important;
max-width: none !important;
align-items: center;
will-change: transform;
/* See the note in marquee(): forcing LTR here is what makes "negative x"
reliably mean "travels right to left" on an RTL page. */
direction: ltr;
}
.dayta-marquee .elementor-inner-section > .elementor-container > .elementor-column {
width: auto !important;
max-width: none !important;
flex: 0 0 auto;
padding-inline: 30px;
}
.dayta-marquee .elementor-widget-ld_fancy_image img {
max-height: 52px;
width: auto;
}
/* The strip fades at both ends rather than being cut off by the section edge. */
.dayta-marquee-ready {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* ----------------------------------------------------------------- tone */
/*
* A section that warms from dark to light as it passes. The script drives one
* number, `--dayta-tone`, from 0 to 1; everything visible is mixed from it, so
* the surface and the text move together and never cross in the middle.
*/
/*
* It is the OVERLAY that warms, not the section. Fading the overlay out
* instead would uncover the photograph at full strength — brighter, but not
* lighter, and the text would be sitting on raw picture. The script mixes both
* colours and writes them here; a plain `var()` substitution is all this needs,
* and unlike `color-mix()` it tracks every change.
*/
.dayta-tone-ready { --dayta-ink: #FFFFFF; }
.dayta-tone-ready > .elementor-background-overlay { opacity: 1 !important; }
.dayta-tone-ready .ld-fh-element,
.dayta-tone-ready h1, .dayta-tone-ready h2, .dayta-tone-ready h3,
.dayta-tone-ready h4, .dayta-tone-ready h5, .dayta-tone-ready h6, .dayta-tone-ready p {
color: var(--dayta-ink) !important;
}
/* The button keeps its own fill; only its label follows the surface. */
.dayta-tone-ready .elementor-button.btn-naked { color: var(--dayta-ink) !important; }
/* ------------------------------------------------------ category lists */
/*
* The catalogue accordion: 58 categories under eight brands. Inside a panel
* they run as a multi-column list so a brand with a dozen entries stays one
* glance rather than one scroll.
*/
/* Two columns inside the panel now, not three — the accordion sits in the
narrower half of a split layout. */
.dayta-cats .dayta-cat-list {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 26px;
text-align: right;
}
.dayta-cats .dayta-cat-list li {
break-inside: avoid;
padding: 7px 0;
border-bottom: 1px solid rgba(28, 28, 30, 0.07);
}
.dayta-cats .dayta-cat-list a {
color: #3A3A3E;
font-size: 15px;
text-decoration: none;
display: block;
transition: color 0.18s ease, transform 0.18s ease;
}
.dayta-cats .dayta-cat-list a:hover,
.dayta-cats .dayta-cat-list a:focus-visible {
/* #8A6200 on #F7F8FA measures 5.2:1 — the bright brand gold does not. */
color: #8A6200;
transform: translateX(-4px);
}
.dayta-cats .accordion-title,
.dayta-cats [class*="accordion"] h3 { text-align: right; }
@media (max-width: 1024px) { .dayta-cats .dayta-cat-list { columns: 2; } }
@media (max-width: 767px) { .dayta-cats .dayta-cat-list { columns: 1; } }
/* --------------------------------------------------------- brand tabs */
/*
* The client's own `ld_tabs` element (style 13, vertical nav) carrying the
* eight-brand catalogue.
*
* The brand logos that used to sit on each tab edge were REMOVED at the
* client's request, 2026-08-14. They were painted here as `::before`
* background images because the widget gives no way to put a PNG on a tab —
* its icon control is `Controls_Manager::ICONS` (Font Awesome name or SVG
* only) and the title runs through `wp_kses_data()`, which strips ``
* silently. Painting them in CSS worked, but it put them outside the Elementor
* panel, so the client could not change them where they change everything
* else. That is the reason they are gone, and the reason not to reinstate
* them the same way: the logos belong in an element with its own controls.
*
* What remains here is layout and colour for the nav and the panels only.
*/
/*
* The nav is a column of eight and the panel beside it is one short list, so
* the two never match in height. The panel is centred against the column
* rather than pinned to its top, which is what left ~660px of white under it.
*/
.dayta-brand-tabs .lqd-tabs-content {
align-self: center;
}
.dayta-brand-tabs .lqd-tabs-nav > li > a {
display: flex;
align-items: center;
padding: 9px 12px;
border-radius: 10px;
transition: background-color 0.18s ease;
/* The name and the count are siblings in this flex box, not nested blocks,
so the count reaches its own row by wrapping — see `.lqd-tabs-nav-ext`. */
flex-wrap: wrap;
/* Wrapped rows stack from the top instead of sharing out any spare height,
which is what kept the eight tabs at different heights. */
align-content: flex-start;
}
.dayta-brand-tabs .lqd-tabs-nav > li.active > a,
.dayta-brand-tabs .lqd-tabs-nav > li > a:hover {
background-color: rgba(249, 180, 0, 0.09);
}
.dayta-brand-tabs .lqd-tabs-nav .lqd-tabs-nav-txt {
font-size: 15px;
font-weight: 600;
color: #2C2C2E;
line-height: 1.4;
/* Takes the rest of the row so the name stays on one line. Left to share
the row with the count it was squeezed to 76px and wrapped to three. */
flex: 1 1 auto;
min-width: 0;
}
/*
* The count goes on its own row under the name. `flex: 1 0 100%` is what
* breaks the row — the anchor is a flex box and these two spans are siblings
* inside it, not a nested block.
*
* `display: block !important` because the widget shows this only on the ACTIVE
* tab, which made that one tab 89px tall against 56px for the other seven. The
* count is on every tab, so every tab is the same height.
*/
.dayta-brand-tabs .lqd-tabs-nav .lqd-tabs-nav-ext {
display: block !important;
flex: 1 0 100%;
margin-top: 1px;
font-size: 12px;
font-weight: 400;
color: #6B6B70;
opacity: 1;
}
/* The tab panels reuse the catalogue list the accordion already styles. */
.dayta-brand-tabs .dayta-cat-list {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 26px;
text-align: right;
}
.dayta-brand-tabs .dayta-cat-list li {
break-inside: avoid;
padding: 7px 0;
border-bottom: 1px solid rgba(28, 28, 30, 0.07);
}
.dayta-brand-tabs .dayta-cat-list a {
color: #3A3A3E;
font-size: 15px;
text-decoration: none;
display: block;
transition: color 0.18s ease, transform 0.18s ease;
}
.dayta-brand-tabs .dayta-cat-list a:hover,
.dayta-brand-tabs .dayta-cat-list a:focus-visible {
color: #8A6200;
transform: translateX(-4px);
}
@media (max-width: 1024px) {
.dayta-brand-tabs .dayta-cat-list { columns: 2; }
}
@media (max-width: 767px) {
.dayta-brand-tabs .dayta-cat-list { columns: 1; }
}
/* --------------------------------------------------------- brand card */
/*
* One saved section template per brand, under Templates -> Saved Templates.
*
* The section is built entirely from core Elementor widgets — image, heading,
* text-editor, button, icon-list — so every word, link, colour and size opens
* in the panel. What lives here is only what the panel has no control for: the
* category list arranged as a grid of cells instead of a stacked list, and the
* chrome on those cells. Deliberately nothing about the card frame itself —
* its background, border, radius and padding are section controls, so the
* client changes them where they change everything else.
*
* Height budget: the card has to fit a phone screen. Header row ~96px, section
* padding 34px, and two columns of ~40px rows puts the longest catalogue
* (ROCKER, twelve) around 400px on a 375x667 screen.
*/
.dayta-brand-card__logo img {
/* The marks are 500x309 and of mixed weight; a height cap is what makes
eight different logos sit at the same optical size. */
max-height: 64px;
width: auto;
object-fit: contain;
}
.dayta-cat-grid .elementor-icon-list-items {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
/* The widget's own `space_between` control writes a bottom margin on each
item. The grid `gap` owns spacing here — it has to, since that control sets
the vertical value only and a grid needs both — so the margin is cleared. */
.dayta-cat-grid .elementor-icon-list-item {
margin: 0 !important;
/* Flex so the cell inside can stretch. Grid stretches the