/*
Theme Name: Enfold Child - Bull BBQ EU
Theme URI: https://bullbbq.eu/
Description: Enfold child theme for bullbbq.eu. Carries over every function of the Domestica child theme (shortcodes, dealer & distributor areas, media library, WooCommerce tweaks, Gravity Forms filters, region redirect) and applies the Bull BBQ US design system used on bullbbq.com — condensed uppercase headings, Bull red #d11d23, angled buttons and panels, white sticky header, black footer.
Author: M7Alpha
Author URI: https://m7alpha.com/
Version: 1.0.0
Template: enfold
*/
/* ===========================================================================
CONTENTS
1. Design tokens
2. Typography
3. Buttons
4. Sections & angled panels
5. Headings (av_heading)
6. Images, sliders, tabs
7. Header
8. Footer
9. Forms
10. WooCommerce
11. Our own shortcode output (recipes, dealers, media library)
12. Responsive
---------------------------------------------------------------------------
Enfold prints a lot of its own CSS late and at high specificity, so most
rules here are prefixed with #top (Enfold's own body-level id) — that is the
documented way for a child theme to win without !important everywhere.
Class names starting `bull-` are emitted by the Avia shortcode generator
(analysis/to_avia.py). Class names starting `qodef-` are emitted by our own
shortcodes in functions.php and are kept as-is so no PHP had to change.
======================================================================== */
/* ===========================================================================
1. DESIGN TOKENS — from the bullbbq.com theme.json palette
======================================================================== */
:root {
--bull-red: #d11d23;
--bull-red-brown: #6e0d0e;
--bull-black: #000000;
--bull-dark-gray: #231f20;
--bull-light-gray: #e8e7e3;
--bull-mid-gray: #6f6f6f;
--bull-white: #ffffff;
--bull-font-head: "din-2014-narrow", "Barlow Semi Condensed", "Archivo Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
--bull-font-body: "trade-gothic-next", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--bull-fs-x-small: 16px;
--bull-fs-small: 18px;
--bull-fs-medium: clamp(17px, 0.95rem + 0.25vw, 20px);
--bull-fs-large: clamp(20px, 1.1rem + 0.4vw, 24px);
--bull-fs-h4: clamp(20px, 1.1rem + 0.5vw, 26px);
--bull-fs-h3: clamp(24px, 1.2rem + 1vw, 36px);
--bull-fs-h2: clamp(30px, 1.4rem + 1.8vw, 48px);
--bull-fs-h1: clamp(36px, 1.6rem + 2.8vw, 64px);
--bull-angle: -15deg;
--bull-pad-large: clamp(70px, 9vw, 130px);
--bull-pad-med: clamp(45px, 6vw, 80px);
--bull-pad-small: clamp(28px, 4vw, 45px);
}
/* ===========================================================================
2. TYPOGRAPHY
======================================================================== */
#top,
#top body,
#top .avia_textblock,
#top p,
#top li,
#top .entry-content-wrapper {
font-family: var(--bull-font-body);
font-size: var(--bull-fs-medium);
line-height: 1.7;
color: var(--bull-black);
}
body { background-color: var(--bull-white); -webkit-font-smoothing: antialiased; }
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
#top .av-special-heading-tag,
#top .post-title,
#top .widgettitle,
#top .av-masonry-entry .av-masonry-entry-title,
#top .slide-entry-title {
font-family: var(--bull-font-head);
font-weight: 700;
font-style: normal;
text-transform: uppercase;
line-height: 1.1;
letter-spacing: 0;
color: var(--bull-black);
text-wrap: pretty;
}
#top h1, #top .av-special-heading-tag h1 { font-size: var(--bull-fs-h1); }
#top h2, #top .av-special-heading-tag h2 { font-size: var(--bull-fs-h2); }
#top h3, #top .av-special-heading-tag h3 { font-size: var(--bull-fs-h3); }
#top h4, #top .av-special-heading-tag h4 { font-size: var(--bull-fs-h4); }
#top h5 { font-size: var(--bull-fs-large); }
#top h6 { font-size: var(--bull-fs-small); }
/* the US site puts the second line of a headline in red */
#top h1 strong, #top h2 strong, #top h3 strong,
#top .av-special-heading-tag strong,
#top h1 em, #top h2 em, #top h3 em {
color: var(--bull-red);
font-style: normal;
font-weight: inherit;
}
#top a { color: var(--bull-red); text-decoration: none; transition: color .2s ease-out; }
#top a:hover { color: var(--bull-red-brown); }
::selection { color: var(--bull-white); background-color: var(--bull-red-brown); }
/* content lists get the skewed red dash used on bullbbq.com */
#top .avia_textblock ul:not(.products):not(.tabcontainer) li,
#top .entry-content-wrapper .bull-text ul li {
position: relative;
list-style: none;
padding-left: 24px;
margin: 8px 0;
}
#top .avia_textblock ul:not(.products):not(.tabcontainer) li::before,
#top .entry-content-wrapper .bull-text ul li::before {
content: '';
position: absolute;
top: 0.62em;
left: 0;
width: 12px;
height: 3px;
background-color: var(--bull-red);
transform: skewX(var(--bull-angle));
}
/* ===========================================================================
3. BUTTONS — the Bull parallelogram
---------------------------------------------------------------------------
Enfold renders [av_button] as .avia-button-wrap > a.avia-button, with the
label in a span. The slant comes from a skewed ::before shell so the text
itself stays upright; form controls use clip-path instead because
they cannot carry pseudo-elements.
======================================================================== */
/* Enfold renders [av_button] as:
.avia-button-wrap. > a.avia-button > span.avia_iconbox_title
custom_class lands on the WRAPPER, and Enfold paints the anchor with its own
generated custom_bg rule — both verified against the staging build. So the
skewed shell goes on the anchor, the anchor's own background is cleared, and
the wrapper gets no pseudo-element of its own. */
#top .avia-button-wrap { display: inline-block; margin: 6px 14px 6px 0; }
#top .avia-button-wrap::before,
#top .avia-button-wrap::after { content: none; }
#top .avia-button,
#top .bull-btn > .avia-button {
position: relative;
isolation: isolate;
display: inline-block;
padding: 11px 32px;
font-family: var(--bull-font-body);
font-size: var(--bull-fs-x-small);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
text-transform: none;
text-decoration: none;
color: var(--bull-white) !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: color .2s ease-out;
}
#top .avia-button::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--bull-red);
transform: skewX(var(--bull-angle));
transition: background-color .2s ease-out, border-color .2s ease-out;
}
#top .avia-button:hover { color: var(--bull-white) !important; background-color: transparent !important; }
#top .avia-button:hover::before { background-color: var(--bull-red-brown); }
/* Enfold's own icon slot and hover underline */
#top .avia-button .avia_button_icon,
#top .avia-button::after { display: none; }
/* --- variants (the class sits on the wrapper, so reach through to the anchor) */
#top .bull-btn--black .avia-button::before { background-color: var(--bull-black); }
#top .bull-btn--black .avia-button:hover::before { background-color: var(--bull-dark-gray); }
#top .bull-btn--outline .avia-button { color: var(--bull-black) !important; }
#top .bull-btn--outline .avia-button::before { background-color: transparent; border: 2px solid currentColor; }
#top .bull-btn--outline .avia-button:hover { color: var(--bull-white) !important; }
#top .bull-btn--outline .avia-button:hover::before{ background-color: var(--bull-red); border-color: var(--bull-red); }
/* outline sitting on a photo or a dark panel */
#top .bull-section--image .bull-btn--outline .avia-button,
#top .bull-fill-red .bull-btn--outline .avia-button,
#top .bull-fill-black .bull-btn--outline .avia-button,
#top .bull-btn--outline-light .avia-button { color: var(--bull-white) !important; }
/* a plain .bull-btn on a non-Avia link (our own shortcode output) */
#top a.bull-btn:not(.avia-button-wrap) {
position: relative; isolation: isolate; display: inline-block;
padding: 11px 32px; color: var(--bull-white); text-decoration: none;
}
#top a.bull-btn:not(.avia-button-wrap)::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background-color: var(--bull-red); transform: skewX(var(--bull-angle));
transition: background-color .2s ease-out;
}
#top a.bull-btn:not(.avia-button-wrap):hover::before { background-color: var(--bull-red-brown); }
/* real form controls */
#top input[type="submit"],
#top button[type="submit"],
#top .avia_ajax_form .button,
#top .gform_wrapper .gform_button,
#top .woocommerce button.button,
#top .woocommerce input.button {
padding: 12px 38px;
font-family: var(--bull-font-body);
font-size: var(--bull-fs-x-small);
font-weight: 600;
line-height: 1.3;
text-transform: none;
color: var(--bull-white);
background-color: var(--bull-red);
border: 0;
border-radius: 0;
cursor: pointer;
clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
transition: background-color .2s ease-out;
}
#top input[type="submit"]:hover,
#top button[type="submit"]:hover,
#top .avia_ajax_form .button:hover,
#top .gform_wrapper .gform_button:hover,
#top .woocommerce button.button:hover,
#top .woocommerce input.button:hover {
background-color: var(--bull-red-brown);
color: var(--bull-white);
}
#top .gform_wrapper .gform_previous_button { background-color: var(--bull-dark-gray); }
#top .gform_wrapper .gform_previous_button:hover { background-color: var(--bull-black); }
/* ===========================================================================
4. SECTIONS & ANGLED PANELS
======================================================================== */
#top .avia-section.bull-section { border: 0; }
/* Avia's padding presets, retuned to the US site's rhythm.
Class names verified against the staging build. */
#top .avia-section.avia-section-huge .content,
#top .avia-section.avia-section-large .content { padding-top: var(--bull-pad-large); padding-bottom: var(--bull-pad-large); }
#top .avia-section.avia-section-default .content { padding-top: var(--bull-pad-med); padding-bottom: var(--bull-pad-med); }
#top .avia-section.avia-section-small .content { padding-top: var(--bull-pad-small); padding-bottom: var(--bull-pad-small); }
#top .avia-section.avia-section-no-padding .content { padding-top: 0; padding-bottom: 0; }
#top .bull-section--tinted { background-color: var(--bull-light-gray); }
/* --- full width -----------------------------------------------------------
Staging renders every section with `sidebar_right`, which squeezes the
content column to ~500px. The proper fix is Enfold → Layout → Sidebar, set to
"no sidebar" sitewide; this is the belt-and-braces version for any page that
slips through with the old setting. */
#top .container_wrap .template-page.content,
#top .container_wrap .content.av-content-full {
width: 100%;
float: none;
margin: 0;
border-right-width: 0;
padding-left: 0;
padding-right: 0;
}
#top .avia-section .container { max-width: 1310px; }
/* The front page does not want Enfold's title bar.
NOTE: in Enfold `#top` is the element itself, so page-specific rules
are written `#top.page-id-x`, never `body.page-id-x #top`. */
#top.home .title_container,
#top.page-id-418 .title_container,
#top.page-id-14982 .title_container { display: none; }
/* full-bleed photo bands get a scrim so white type stays readable */
#top .bull-section--image { position: relative; background-size: cover; background-position: center; }
#top .bull-section--image > .av-section-color-overlay-wrap::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 100%);
pointer-events: none;
}
#top .bull-section--image .av-special-heading-tag,
#top .bull-section--image .avia_textblock,
#top .bull-section--image p { color: var(--bull-white); position: relative; }
/* --- angled colour panel (.com's signature) ---------------------------- */
/* add bull-angle-left + bull-fill-red to a column in the Avia editor */
#top .bull-angle-left,
#top .bull-angle-right,
#top .bull-angle-both {
position: relative;
z-index: 1;
padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 64px);
}
#top .bull-angle-left::before,
#top .bull-angle-both::before {
content: '';
position: absolute;
top: 0;
left: -100px;
z-index: -1;
width: calc(100% + 100px);
height: 100%;
background-color: var(--bull-fill, var(--bull-red));
transform: skewX(var(--bull-angle));
}
#top .bull-angle-right::after,
#top .bull-angle-both::after {
content: '';
position: absolute;
top: 0;
right: -100px;
z-index: -1;
width: calc(100% + 100px);
height: 100%;
background-color: var(--bull-fill, var(--bull-red));
transform: skewX(var(--bull-angle));
}
#top .bull-fill-red { --bull-fill: var(--bull-red); }
#top .bull-fill-brown { --bull-fill: var(--bull-red-brown); }
#top .bull-fill-black { --bull-fill: var(--bull-black); }
#top .bull-fill-dark { --bull-fill: var(--bull-dark-gray); }
#top .bull-fill-gray { --bull-fill: var(--bull-light-gray); }
#top .bull-fill-white { --bull-fill: var(--bull-white); }
#top .bull-fill-red, #top .bull-fill-red .av-special-heading-tag, #top .bull-fill-red p,
#top .bull-fill-brown, #top .bull-fill-brown .av-special-heading-tag, #top .bull-fill-brown p,
#top .bull-fill-black, #top .bull-fill-black .av-special-heading-tag, #top .bull-fill-black p,
#top .bull-fill-dark, #top .bull-fill-dark .av-special-heading-tag, #top .bull-fill-dark p {
color: var(--bull-white);
}
/* ===========================================================================
5. HEADINGS — Avia's av_heading element
---------------------------------------------------------------------------
Enfold markup: .av-special-heading > .av-special-heading-tag (the h1-h6)
and .av-subheading (the eyebrow / sub line).
======================================================================== */
#top .av-special-heading { margin: 0 0 18px; padding: 0; }
#top .av-special-heading .av-special-heading-tag {
font-family: var(--bull-font-head);
font-weight: 700;
font-style: normal;
text-transform: uppercase;
line-height: 1.1;
margin: 0;
}
/* Enfold's decorative rule next to headings — the US site has none */
#top .av-special-heading .special-heading-border,
#top .av-special-heading .special-heading-inner-border { display: none; }
/* eyebrow above the title, in Bull red */
#top .av-special-heading .av-subheading,
#top .av-special-heading .av-subheading p {
font-family: var(--bull-font-head);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bull-red);
margin: 0 0 6px;
}
#top .bull-heading--light .av-special-heading-tag { color: var(--bull-white); }
#top .av-align-center { text-align: center; }
#top .av-align-center .av-special-heading-tag,
#top .av-align-center .av-subheading { text-align: center; }
#top .av-align-right { text-align: right; }
/* optional skewed rule under a heading — add .bull-rule in the editor */
#top .bull-rule .av-special-heading-tag::after {
content: '';
display: block;
width: 46px;
height: 4px;
margin-top: 14px;
background-color: var(--bull-red);
transform: skewX(var(--bull-angle));
}
/* ===========================================================================
6. IMAGES, SLIDERS, TABS
======================================================================== */
#top .avia-image-container.bull-image .avia-image-container-inner,
#top .avia-image-container.bull-image img { border-radius: 0; }
#top .avia-image-container img { height: auto; }
#top .avia-slideshow.bull-slider,
#top .avia-slideshow li { border-radius: 0; }
#top .avia-slideshow-arrows a { background-color: rgba(0,0,0,.55); border-radius: 0; color: var(--bull-white); }
#top .avia-slideshow-arrows a:hover { background-color: var(--bull-red); }
#top .avia-slideshow-dots a.active { background-color: var(--bull-red); }
/* --- tabs ------------------------------------------------------------- */
#top .tabcontainer { border: 0; }
#top .tabcontainer .tab {
font-family: var(--bull-font-head);
font-weight: 700;
font-size: var(--bull-fs-small);
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--bull-black);
background: transparent;
border: 0;
border-bottom: 3px solid var(--bull-light-gray);
border-radius: 0;
padding: 12px 22px;
transition: color .2s ease, border-color .2s ease;
}
#top .tabcontainer .tab:hover,
#top .tabcontainer .tab.active_tab {
color: var(--bull-red);
background: transparent;
border-bottom-color: var(--bull-red);
}
#top .tabcontainer .tab_content {
background: transparent;
border: 0;
border-top: 1px solid var(--bull-light-gray);
padding: 30px 0 0;
}
/* --- blog / masonry grids --------------------------------------------- */
#top .bull-blog .slide-entry,
#top .av-masonry-entry {
background-color: var(--bull-light-gray);
}
#top .bull-blog .slide-entry-title,
#top .av-masonry-entry-title {
font-family: var(--bull-font-head);
font-weight: 700;
text-transform: uppercase;
color: var(--bull-black);
}
#top .bull-blog .slide-entry:hover .slide-entry-title { color: var(--bull-red); }
#top .bull-blog .slide-meta,
#top .av-masonry-date {
font-family: var(--bull-font-body);
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bull-mid-gray);
}
/* ===========================================================================
7. HEADER — solid white, sticky, black uppercase nav, red hover
======================================================================== */
#top #header,
#top #header_main,
#top #header_main_alternate,
#top .header_bg {
background-color: var(--bull-white);
opacity: 1;
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
#top #header .av-main-nav > li > a,
#top #header .av-main-nav > li > a .avia-menu-text {
font-family: var(--bull-font-head);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--bull-black);
transition: color .2s ease-out;
}
#top #header .av-main-nav > li > a:hover .avia-menu-text,
#top #header .av-main-nav > li.current-menu-item > a .avia-menu-text,
#top #header .av-main-nav > li.current-menu-ancestor > a .avia-menu-text {
color: var(--bull-red);
}
/* Enfold's active-item underline, squared off and in Bull red */
#top #header .av-main-nav > li > a::before { background-color: var(--bull-red); height: 3px; }
/* drop-downs */
#top #header .av-main-nav ul {
background-color: var(--bull-white);
border: 0;
border-top: 3px solid var(--bull-red);
box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
#top #header .av-main-nav ul li a .avia-menu-text {
font-family: var(--bull-font-head);
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
color: var(--bull-black);
}
#top #header .av-main-nav ul li a:hover .avia-menu-text { color: var(--bull-red); }
/* header CTA menu items — give the menu item the class in Appearance > Menus */
#top #header .av-main-nav > li.main_cta > a,
#top #header .av-main-nav > li.secondary_cta > a { padding: 0 10px; }
#top #header .av-main-nav > li.main_cta > a .avia-menu-text,
#top #header .av-main-nav > li.secondary_cta > a .avia-menu-text {
position: relative;
isolation: isolate;
display: inline-block;
padding: 9px 26px;
color: var(--bull-white);
}
#top #header .av-main-nav > li.main_cta > a .avia-menu-text::before,
#top #header .av-main-nav > li.secondary_cta > a .avia-menu-text::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--bull-red);
transform: skewX(var(--bull-angle));
transition: background-color .2s ease-out;
}
#top #header .av-main-nav > li.secondary_cta > a .avia-menu-text::before { background-color: var(--bull-black); }
#top #header .av-main-nav > li.main_cta > a:hover .avia-menu-text::before { background-color: var(--bull-red-brown); }
#top #header .av-main-nav > li.secondary_cta > a:hover .avia-menu-text::before { background-color: var(--bull-dark-gray); }
#top #header .av-main-nav > li.main_cta > a:hover .avia-menu-text,
#top #header .av-main-nav > li.secondary_cta > a:hover .avia-menu-text { color: var(--bull-white); }
/* search + burger */
#top #header .av-burger-menu-main span,
#top #header #menu-item-search > a { color: var(--bull-black); }
#top #header .av-burger-menu-main span { background-color: var(--bull-black); }
/* page title bar — the US site's red angled banner */
#top .title_container .main-title,
#top .title_container .main-title a,
#top .title_container.alternate_color .main-title,
#top .title_container.alternate_color .main-title a {
position: relative;
isolation: isolate;
display: inline-block;
padding: 14px 44px 16px;
font-family: var(--bull-font-head);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(28px, 1.4rem + 2.4vw, 54px);
line-height: 1.05;
color: var(--bull-white) !important;
}
#top .title_container .main-title::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--bull-red);
transform: skewX(var(--bull-angle));
}
#top .title_container { background-color: transparent; border: 0; }
#top .title_container .breadcrumb { display: none; }
/* ===========================================================================
8. FOOTER — solid black, white type, red hover
======================================================================== */
#top #footer {
background-color: var(--bull-black);
color: var(--bull-white);
border: 0;
}
#top #footer,
#top #footer p,
#top #footer li,
#top #footer .widget { font-family: var(--bull-font-body); color: var(--bull-white); }
#top #footer a { color: var(--bull-white); }
#top #footer a:hover { color: var(--bull-red); }
#top #footer .widgettitle,
#top #footer h1, #top #footer h2, #top #footer h3,
#top #footer h4, #top #footer h5, #top #footer h6 {
font-family: var(--bull-font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--bull-white);
}
#top #socket {
background-color: var(--bull-black);
border-top: 1px solid rgba(255,255,255,.15);
color: var(--bull-white);
font-size: 14px;
}
#top #socket a { color: var(--bull-white); }
#top #socket a:hover { color: var(--bull-red); }
#top #scroll-top-link { background-color: var(--bull-red); color: var(--bull-white); border-radius: 0; }
/* ===========================================================================
9. FORMS — underline-only fields, red focus, red accents
======================================================================== */
#top input[type="text"],
#top input[type="email"],
#top input[type="tel"],
#top input[type="url"],
#top input[type="number"],
#top input[type="password"],
#top input[type="search"],
#top input[type="date"],
#top textarea,
#top select,
#top .gform_wrapper.gravity-theme input:not([type="submit"]),
#top .gform_wrapper.gravity-theme textarea,
#top .gform_wrapper.gravity-theme select {
font-family: var(--bull-font-body);
font-size: var(--bull-fs-x-small);
color: var(--bull-black);
background: transparent;
border: 0;
border-radius: 0;
box-shadow: inset 0 -2px 0 var(--bull-black);
padding: 0.55em 0.4em;
transition: box-shadow .2s ease;
}
#top input:focus,
#top textarea:focus,
#top select:focus {
outline: 0;
box-shadow: inset 0 -3px 0 var(--bull-red);
}
#top input[type="checkbox"],
#top input[type="radio"],
#top input[type="range"],
#top progress { accent-color: var(--bull-red); }
#top label,
#top .gform_wrapper.gravity-theme .gfield_label {
font-family: var(--bull-font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--bull-black);
}
#top .gsection_title {
font-family: var(--bull-font-head);
font-weight: 700;
text-transform: uppercase;
color: var(--bull-red);
}
#top .gform_wrapper.gravity-theme .gf_progressbar { background-color: var(--bull-light-gray); border-radius: 0; }
#top .gform_wrapper.gravity-theme .gf_progressbar_percentage { background-color: var(--bull-red); border-radius: 0; }
#top .gform_wrapper .validation_message,
#top .wpcf7-not-valid-tip { font-family: var(--bull-font-body); color: var(--bull-red); }
#top .ginput_container_consent {
display: grid;
gap: 4px;
align-items: flex-start;
grid-template-columns: max-content 1fr max-content;
}
/* ===========================================================================
10. WOOCOMMERCE — light-gray tile, black condensed title, red button
======================================================================== */
#top.woocommerce ul.products li.product,
#top .woocommerce ul.products li.product {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: var(--bull-light-gray);
padding: 26px 22px 30px;
text-align: center;
border: 0;
transition: background-color .25s ease;
}
#top .woocommerce ul.products li.product:hover { background-color: #dedcd7; }
#top .woocommerce ul.products li.product img { mix-blend-mode: multiply; }
#top .woocommerce ul.products li.product h2,
#top .woocommerce ul.products li.product .woocommerce-loop-product__title,
#top .woocommerce div.product .product_title {
font-family: var(--bull-font-head);
font-weight: 700;
text-transform: uppercase;
font-size: var(--bull-fs-large);
line-height: 1.15;
color: var(--bull-black);
transition: color .2s ease-out;
}
#top .woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--bull-red); }
#top .woocommerce div.product .price,
#top .woocommerce ul.products li.product .price {
font-family: var(--bull-font-head);
font-weight: 700;
color: var(--bull-red);
}
#top .woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: var(--bull-font-head);
font-weight: 700;
text-transform: uppercase;
color: var(--bull-black);
}
#top .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--bull-red); }
/* ===========================================================================
11. OUR OWN SHORTCODE OUTPUT
---------------------------------------------------------------------------
These class names are printed by functions.php (recipes, dealer finder,
featured products, distributor media library). They were written for the
Domestica theme but the markup is ours, so it carries over unchanged and
only needs restyling.
======================================================================== */
/* recipes */
#top .latest-recipe-cont { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 16px; }
#top .recipe-1 { grid-area: 1 / 1 / 7 / 3; height: 670px; }
#top .recipe-2 { grid-area: 4 / 5 / 7 / 7; }
#top .recipe-3 { grid-area: 1 / 3 / 4 / 7; }
#top .recipe-4 { grid-area: 4 / 3 / 7 / 5; }
#top .single-recipe-cont {
width: 100%; height: 100%;
background-repeat: no-repeat; background-position: center; background-size: cover;
display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
gap: 14px; padding: 26px; overflow: hidden; text-decoration: none;
}
#top .recipe-title {
font-family: var(--bull-font-head);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(20px, 1.1rem + 0.8vw, 30px);
color: var(--bull-white);
transition: all .4s;
}
#top .recipe-title::after {
content: ''; display: block; width: 10px; height: 3px; margin-top: 4px;
background-color: var(--bull-red); transform: skewX(var(--bull-angle)); transition: all .4s;
}
#top .single-recipe-cont:hover .recipe-title::after { width: 30px; }
#top .all-recipes-cont { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
#top .all-recipes-cont .single-recipe-cont { height: 350px; }
#top .all-recipe-cont { display: grid; grid-template-columns: 1fr 4fr; gap: 10px; }
#top .other-recipes-cont { display: flex; flex-direction: column; gap: 30px; }
#top .other-recipes-cont .all-recipes-cont { grid-template-columns: 1fr 1fr 1fr; }
#top .single-detail { font-family: var(--bull-font-body); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--bull-white); display: flex; align-items: center; gap: 6px; flex-direction: row-reverse; }
#top .single-recipe-extra-details { display: flex; gap: 22px; flex-wrap: wrap; }
#top .bull-sep { width: 1px; height: 26px; display: block; background-color: var(--bull-red); }
/* featured product / category cards */
#top .featured-products-cont { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; row-gap: 46px; }
#top .single-feat-product-img { background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 240px; }
#top .single-feat-product-inner { background-color: var(--bull-light-gray); padding: 0 0 26px; text-align: center; }
#top .qodef-e-title,
#top .qodef-e-title-link {
font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase;
font-size: var(--bull-fs-large); color: var(--bull-black); transition: color .2s ease-out;
}
#top .single-feat-product-cont:hover .qodef-e-title-link { color: var(--bull-red); }
/* dealer finder */
#top .dealers-cont .accordion { display: grid; gap: 20px; }
#top .accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; cursor: pointer; border-bottom: 2px solid var(--bull-light-gray); transition: border-color .4s; }
#top .accordion-header h4 { font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase; margin: 0; font-size: var(--bull-fs-h4); }
#top .accordion-header:hover, #top .accordion-header.active { border-color: var(--bull-red); }
#top .accordion-header:hover h4, #top .accordion-header.active h4 { color: var(--bull-red); }
#top .accordion-content { display: none; padding: 40px 0; }
#top .accordion-content-dealer { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
#top .dealer-flag { background-position: center; background-repeat: no-repeat; background-size: contain; width: 46px; height: 30px; }
#top .dealer-logo { width: 250px; height: 120px; background-position: left; background-repeat: no-repeat; background-size: contain; }
#top .dealer-logo-cont { display: grid; grid-template-columns: max-content max-content; align-items: center; gap: 20px; }
#top .dealer-single-inner { display: grid; gap: 10px; }
#top .dealer-title { font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase; font-size: var(--bull-fs-h4); margin: 0; }
#top .findadealer-cont a { position: relative; isolation: isolate; display: inline-block; padding: 11px 32px; color: var(--bull-white); text-align: center; }
#top .findadealer-cont a::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--bull-black); transform: skewX(var(--bull-angle)); transition: background-color .2s ease; }
#top .findadealer-cont a:hover::before { background-color: var(--bull-red); }
/* distributor media library */
#top .clientmedia_folderholder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; }
#top .clientmedia_folder { border: 1px solid var(--bull-light-gray); background-color: var(--bull-white); min-height: 130px; display: grid; justify-content: center; align-items: center; justify-items: center; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
#top .clientmedia_folder:hover { background-color: var(--bull-light-gray); border-color: var(--bull-red); transform: scale(1.05); }
#top .clientmedia_foldericon { background-image: url(imgassets/folder_icon.svg); width: 60px; height: 80px; background-size: contain; background-repeat: no-repeat; background-position: center; }
#top .clientmedia_foldername { font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase; text-align: center; cursor: pointer; }
#top .media_file_row { display: grid; grid-template-columns: 60px 1fr 160px; align-items: center; border-bottom: 1px solid var(--bull-light-gray); padding: 0 10px; column-gap: 15px; height: 60px; }
#top .media_file_row:hover { background-color: var(--bull-light-gray); }
#top .media_file_thumb img { width: 60px; height: 50px; object-fit: cover; }
#top .media_file_title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bull-black); }
#top .media_file_row:hover .media_file_title { color: var(--bull-red); }
#top a.media_file_download { background-image: url(imgassets/download_icon.svg); background-size: 24px; background-repeat: no-repeat; background-position: left center; padding-left: 30px; line-height: 60px; font-size: .85em; }
#top a.media_file_download:hover { color: var(--bull-red); }
#top .mediacat_breadcrumbs { background-color: var(--bull-light-gray); width: 100%; margin-bottom: 50px; padding: 10px 20px; font-family: var(--bull-font-head); text-transform: uppercase; }
#top .mediacat_breadcrumbs strong { color: var(--bull-red); }
#top .restricted_area { font-family: var(--bull-font-head); text-transform: uppercase; font-size: 32px; width: 100%; text-align: center; padding: 100px; }
#top table.dist_table { font-size: 12px; width: 100%; }
#top table.dist_table th { font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase; background-color: var(--bull-light-gray); }
#top a.export-csv.button { position: relative; isolation: isolate; display: inline-block; padding: 9px 26px; color: var(--bull-white); float: right; margin-bottom: 30px; }
#top a.export-csv.button::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--bull-red); transform: skewX(var(--bull-angle)); }
/* product PDFs / warranty badge on single product */
#top .product-pdfs-cont { display: grid; grid-template-columns: 1fr; gap: 6px; padding-top: 10px; margin-bottom: 26px; }
#top .product-pdfs-cont p { margin: 0; }
#top .product-pdfs-cont p a { position: relative; isolation: isolate; display: block; width: fit-content; min-width: 260px; padding: 10px 30px; text-align: center; color: var(--bull-black); }
#top .product-pdfs-cont p a::before { content: ''; position: absolute; inset: 0; z-index: -1; border: 2px solid currentColor; transform: skewX(var(--bull-angle)); transition: background-color .2s ease; }
#top .product-pdfs-cont p a:hover { color: var(--bull-white); }
#top .product-pdfs-cont p a:hover::before { background-color: var(--bull-red); border-color: var(--bull-red); }
#top .product-warranty-btn { position: relative; isolation: isolate; display: block; width: fit-content; font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase; color: var(--bull-white); padding: 8px 14px 8px 76px; }
#top .product-warranty-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--bull-black); transform: skewX(var(--bull-angle)); }
#top .warranty-logo { background-image: url(/wp-content/uploads/2023/03/warranty.png); background-position: center; background-size: contain; background-repeat: no-repeat; width: 60px; height: 60px; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 8px; }
/* gallery tabs */
#top .gallery_tabs_cont .gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
#top .gallery_tabs_cont .gallery br { display: none; }
#top .gallery_tabs_cont .gallery-item { margin-top: 0 !important; width: 100% !important; }
#top .gallery_tabs_cont .gallery-item img { width: 100%; height: 300px; object-fit: cover; }
/* --- custom single templates (single-recipe.php, single-furniture.php) ----
These templates print their own markup. The qodef-* names in them are ours,
not the old theme's, so they carry over untouched and only need styling. */
#top .bull-template { width: 100%; }
#top .single-furniture-cont { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
#top .single-recipe .single-furniture-cont { grid-template-columns: 1fr 1.2fr; padding-bottom: 50px; }
#top .furniture-gallery-cont ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; list-style: none; margin: 0; padding: 0; }
#top .furniture-gallery-cont ul li:first-child { grid-column: 1 / -1; }
#top .furniture-gallery-cont ul img { width: 100%; height: 204px; object-fit: cover; }
#top .furniture-gallery-cont ul li:first-child img { height: 600px; }
#top .furniture-gallery-cont.doors-cont ul img { object-fit: contain; }
#top .single-recipe .furniture-gallery-cont ul { grid-template-columns: 1fr; }
#top .single-recipe .furniture-gallery-cont ul img { height: 500px; }
#top .single-furniture-details .qodef-woo-product-title,
#top .single-furniture-details .product_title {
font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase;
font-size: var(--bull-fs-h2); line-height: 1.1; margin: 0 0 12px; color: var(--bull-black);
}
#top .cat-name {
font-family: var(--bull-font-body); font-size: 13px; letter-spacing: .06em;
text-transform: uppercase; color: var(--bull-mid-gray);
}
#top .single-recipe-attribute-cont { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 20px 0; }
#top .qodef-woo-meta-label {
font-family: var(--bull-font-head); font-weight: 700; font-size: 14px;
letter-spacing: .04em; text-transform: uppercase; color: var(--bull-black); margin-right: 6px;
}
#top .qodef-woo-meta-value { font-family: var(--bull-font-body); color: var(--bull-mid-gray); }
#top .single-recipe-desc { margin-bottom: 40px; }
#top .single-recipe-desc ul { list-style: none; padding: 0; }
#top .single-recipe-desc ul li { border-left: 2px solid var(--bull-red); padding-left: 16px; margin: 10px 0; }
#top .single-recipe-desc ul li::before { content: none; }
/* social share row */
#top .qodef-social-share .qodef-shortcode-list { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
#top .qodef-social-title {
font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; margin-right: 8px;
}
#top .qodef-social-share.qodef-layout--text { display: flex; align-items: center; }
#top .qodef-shortcode-list a {
display: grid; place-content: center; width: 34px; height: 34px;
background-color: var(--bull-black); color: var(--bull-white);
font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase; font-size: 13px;
transition: background-color .2s ease;
}
#top .qodef-shortcode-list a:hover { background-color: var(--bull-red); color: var(--bull-white); }
/* "other recipes" band at the foot of a recipe */
#top .bull-recipe-sect { background-color: var(--bull-light-gray); padding: var(--bull-pad-med) 0; margin-top: var(--bull-pad-med); }
#top .bull-recipe-sect-inner { max-width: 1310px; margin: 0 auto; padding: 0 30px; }
/* furniture / door technical details */
#top .technical-title { font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase; font-size: var(--bull-fs-h4); }
#top .single-tech-title { text-transform: uppercase; font-size: 14px; letter-spacing: .04em; color: var(--bull-mid-gray); }
#top .single-tech-detail { color: var(--bull-black); }
#top .tech-sep { grid-column: 1 / -1; height: 1px; width: 100%; background-color: var(--bull-light-gray); margin: 6px 0 10px; }
#top .dimensions-cont { display: grid; }
#top .doors-detials-attributes-cont { display: flex; gap: 10px; margin-bottom: 10px; }
#top .doors-detials-attributes-cont.single-colour,
#top .doors-detials-attributes-cont.single-jamb { width: 40px; height: 40px; cursor: pointer; position: relative; background-position: center; background-repeat: no-repeat; background-size: contain; }
#top .doors-detials-attributes-cont.single-solution { width: 50px; height: 50px; cursor: pointer; position: relative; background-position: center; background-repeat: no-repeat; background-size: contain; }
#top .active-detail::after { content: ''; display: block; width: 100%; position: absolute; bottom: -6px; border-bottom: 2px solid var(--bull-red); }
#top .doors-detials-attributes-cont-grid { display: grid; grid-template-columns: max-content max-content; column-gap: 20px; margin-top: 10px; }
#top .download-documentation-btn { display: grid; grid-template-columns: max-content max-content; gap: 10px; align-items: center; line-height: 1; margin: 20px 0; text-decoration: underline; color: var(--bull-red); }
#top .download-documentation-btn svg { width: 20px; height: 20px; fill: var(--bull-red); }
/* related products under a furniture / recipe single */
#top .related-furniture-cont { margin-top: 100px; }
#top .related-furniture-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; row-gap: 40px; }
#top .related-festured-cont { background-color: var(--bull-light-gray); padding: 0 0 24px; text-align: center; }
#top .related-festured-img { background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 310px; margin-bottom: 20px; }
#top .related-festured-inner .qodef-woo-product-title { font-size: var(--bull-fs-large); margin-bottom: 10px; }
#top .single_schdule_btn { position: relative; isolation: isolate; display: inline-block; padding: 11px 32px; color: var(--bull-black); text-transform: none; margin: 14px 0 20px; }
#top .single_schdule_btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border: 2px solid currentColor; transform: skewX(var(--bull-angle)); transition: background-color .2s ease; }
#top .single_schdule_btn:hover { color: var(--bull-white); }
#top .single_schdule_btn:hover::before { background-color: var(--bull-red); border-color: var(--bull-red); }
@media only screen and (max-width: 1100px) {
#top .single-furniture-cont,
#top .single-recipe .single-furniture-cont { grid-template-columns: 1fr; }
#top .related-furniture-inner { grid-template-columns: repeat(2, 1fr); }
#top .furniture-gallery-cont ul img { height: 150px; }
#top .furniture-gallery-cont ul li:first-child img { height: 300px; }
}
@media only screen and (max-width: 600px) {
#top .related-furniture-inner { grid-template-columns: 1fr; }
#top .furniture-gallery-cont ul { grid-template-columns: 1fr 1fr; }
#top .doors-detials-attributes-cont-grid { grid-template-columns: 1fr; }
}
/* region redirect overlay (printed by functions.php) */
#region-overlay .overlay-content { background: var(--bull-dark-gray); border-top: 5px solid var(--bull-red); border-radius: 0; }
#region-overlay h2 { font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase; color: var(--bull-red); }
/* kitchen configurator entry banner */
#top a.kitchen_config_banner { border: 0; font-family: var(--bull-font-head); font-weight: 700; text-transform: uppercase; color: var(--bull-white); box-shadow: inset 0 0 0 9999px rgba(0,0,0,.45); }
#top a.kitchen_config_banner:hover { box-shadow: inset 0 0 0 9999px rgba(209,29,35,.55); }
#top .kitchen_conf_open { width: fit-content; height: auto; border-radius: 0; background-color: var(--bull-red); color: var(--bull-white); padding: 10px 26px; }
/* ===========================================================================
12. RESPONSIVE
======================================================================== */
@media only screen and (max-width: 1100px) {
#top #header .av-main-nav > li > a .avia-menu-text { font-size: 15px; }
#top .featured-products-cont { grid-template-columns: 1fr 1fr; }
#top .clientmedia_folderholder { grid-template-columns: repeat(3, 1fr); gap: 24px; }
#top .latest-recipe-cont { grid-template-columns: 1fr 1fr; grid-template-rows: unset; }
#top .latest-recipe-cont a { grid-area: unset; height: 300px; }
#top .recipe-1 { height: 300px; }
}
@media only screen and (max-width: 767px) {
#top .bull-angle-left::before,
#top .bull-angle-right::after,
#top .bull-angle-both::before,
#top .bull-angle-both::after { transform: none; left: 0; right: 0; width: 100%; }
#top .bull-angle-left,
#top .bull-angle-right,
#top .bull-angle-both { padding: 28px 24px; }
#top .title_container .main-title { padding: 10px 26px 12px; font-size: 30px; }
#top .avia-button,
#top .bull-btn { padding: 10px 26px; font-size: 15px; }
#top .featured-products-cont,
#top .all-recipes-cont,
#top .other-recipes-cont .all-recipes-cont,
#top .all-recipe-cont,
#top .latest-recipe-cont,
#top .accordion-content-dealer,
#top .gallery_tabs_cont .gallery { grid-template-columns: 1fr; }
#top .clientmedia_folderholder { grid-template-columns: repeat(2, 1fr); gap: 18px; }
#top .media_file_row { grid-template-columns: 50px 1fr; grid-template-rows: auto auto; height: auto; padding: 10px; }
#top .dealer-logo-cont { grid-template-columns: 1fr; gap: 0; }
#top .restricted_area { font-size: 22px; padding: 50px 20px; }
}