/*
|--------------------------------------------------------------------------
| Customizer - Core Styles - Rework - use as new CSS file for all customizer related css entries (before scss)
|--------------------------------------------------------------------------
*/
/* A fixed header (--aos-header-type: fixed, the default) sits on top of
the page instead of pushing it down, so jumping to an in-page anchor
(#section-id, e.g. a single-page site's nav links) lands the target
right at the very top of the viewport — underneath the header, not
below it. scroll-padding-top reserves that same header height as
"already spoken for" space for ANY scroll into this document, anchor
jumps included, so the target instead stops just below the header.
Harmless when header_type is "relative" too — that header doesn't
overlap content either way, so this just adds a bit of breathing room
above the target in that case. */
html {
scroll-padding-top: var(--aos-header-height, 80px);
}
/* Default header */
#header-prime
{
width: 100%;
top: 0;
left: 0;
z-index: 100;
position: var(--aos-header-type);
background: var(--aos-header-bg);
/* --aos-header-min-height is set by js/header-logo-fit.js to the logo's
actual rendered height (plus its container's padding) whenever that
exceeds the configured header height — so a logo larger than the
header no longer gets clipped/overflows. Defaults to 0px via the
var() fallback, so max() just resolves to the normal configured
height when the logo already fits (the common case). This can't be
done as a plain CSS calc() against --aos-header-logo-height, because
that setting defaults to 'auto' — a literal value max()/calc() can't
do arithmetic with. */
height: max(var(--aos-header-height), var(--aos-header-min-height, 0px));
transition: var(--aos-header-transition);
}
#header-prime.scrolled
{
background: var(--aos-header-scrolled-bg);
}
/* WP admin toolbar is also fixed at top:0 (32px tall at >=783px, 46px
below that — WP core's own breakpoint, not a theme setting) — without
this, a fixed/sticky header renders underneath it instead of below it,
since `top:0` is relative to the viewport, not affected by the
margin-top WP adds to for the toolbar (that only pushes
normal-flow content, not fixed-position elements). Setting `top` has no
effect on a `position:relative` header, so this is safely a no-op
whichever --aos-header-type is active. */
@media screen and (min-width: 783px)
{
.admin-bar #header-prime { top: 32px; }
}
@media screen and (max-width: 782px)
{
.admin-bar #header-prime { top: 46px; }
}
/* Every header design outputs #site-description (bloginfo('description'),
marked up with itemprop="description" for schema.org) as a plain,
unstyled div — nothing in this stylesheet ever visually hid it. Harmless
on a site with no tagline set (renders empty), but the moment a real
Settings → General tagline exists it shows up as a stray line of plain
text above the header on every design. Same fix as .screen-reader-text
elsewhere in this theme: keep it in the accessibility tree, hide it
visually. */
#site-description {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* header bar logo
|--------------------------------------------------------------------------
*/
#aos-site_bar-logo-holder
{
width: 100%;
height:100%;
box-sizing: border-box;
position: absolute;
display: flex;
pointer-events: none;
align-items: center;
padding: var(--aos-header-logo-padding);
}
#aos-site_bar-logo-holder img
{
width: var(--aos-header-logo-width);
height: var(--aos-header-logo-height);
/* Width and height are independent settings — without this, a logo
whose natural aspect ratio doesn't exactly match width÷height
gets visibly stretched/squashed instead of scaled proportionally. */
object-fit: contain;
transition: var(--aos-header-logo-transition);
pointer-events: all;
cursor: pointer;
}
/* Real bug: #aos-site_bar-logo-holder sets pointer-events: none (so the
empty parts of its full-width/height box don't block clicks to
whatever's behind/beside it — same reasoning as #menu-prime/.aos-menu
below), and the rule above turns it back on for a real custom
logo image. But the text-wordmark fallback used when no custom logo
is set (site-logo--wordmark, in header-editorial.php/header-centered.php/
header-retail.php) had no equivalent — its home link was rendered but
completely unclickable on every header design that uses it. Same fix,
same pattern as .aos-menu a below. */
#aos-site_bar-logo-holder a.site-logo--wordmark
{
pointer-events: all;
cursor: pointer;
}
#aos-site_bar-logo-holder img:hover
{
filter: var(--aos-header-logo-hover-filter);
}
/* main contianer for all side menu elements
|--------------------------------------------------------------------------
*/
.aos-side_menu-container
{
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
}
/* close menu button */
.aos-mobile-menu-btn
{
height: 100%;
width: 30px;
display: flex;
align-items:center;
justify-content:center;
padding-left: var(--aos-header-mobile_menu-btn-offset);
padding-right: var(--aos-header-mobile_menu-btn-offset);
}
.aos-mobile-menu-btn::after
{
content: "☰";
pointer-events: all;
color: var(--aos-header-mobile_menu-btn-color);
font-size: var(--aos-header-mobile_menu-btn-font-size);
transition: var(--aos-header-mobile_menu-btn-transition);
}
.aos-mobile-menu-btn:hover::after
{
color: var(--aos-header-mobile_menu-btn-hover-color);
cursor:pointer;
}
#header-prime.scrolled .aos-mobile-menu-btn::after
{
color: var(--aos-header-mobile_menu-btn-color-scrolled);
}
#header-prime.scrolled .aos-mobile-menu-btn:hover::after
{
color: var(--aos-header-mobile_menu-btn-hover-color-scrolled);
}
/* Main menu
|--------------------------------------------------------------------------
*/
#menu-prime, .aos-menu-container
{
height: 100%;
width: 100%;
position: relative;
pointer-events: none;
}
.aos-menu
{
height: 100%;
width: 100%;
display: flex;
align-items:center;
justify-content:right;
box-sizing:border-box;
pointer-events: none;
padding: 0;
margin: 0;
position: relative;
}
/* .page_item is the class wp_page_menu() gives its
items when no
menu is assigned to the main-menu location (see aos_main_menu_fallback()
in custom-headers/header-default.php) — .menu-item is what a real
assigned menu uses. Both need this rule: .aos-menu above sets
pointer-events: none, and this is what turns it back on per-item: without
it, a fallback menu's links would render but be completely unclickable. */
.aos-menu .menu-item,
.aos-menu .page_item
{
padding: 0;
margin: 0;
height: 100%;
position: relative;
list-style: none;
pointer-events: all;
}
.aos-menu a
{
text-decoration: none;
pointer-events: all;
position: relative;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: var(--aos-main_menu-color);
width: var(--aos-main_menu-item_width);
height: var(--aos-main_menu-item_height);
padding: var(--aos-main_menu-item-padding);
transition: var(--aos-main_menu-item-transition);
font-family: var(--aos-main_menu-font_family);
letter-spacing: var(--aos-main_menu-letter_spacing);
font-size: var(--aos-main_menu-font_size);
}
.aos-menu a:hover
{
cursor: pointer;
color: var(--aos-main_menu-color-hover);
}
/* scrolled menu */
#header-prime.scrolled .aos-menu a
{
color: var(--aos-main_menu-color-scrolled);
}
#header-prime.scrolled .aos-menu a:hover
{
color: var(--aos-main_menu-color-hover-scrolled);
}
/* children item */
.aos-menu .menu-item.menu-item-has-children a::after
{
content: "+";
display: block;
padding: 5px;
position: absolute;
right: 3px;
transition: 0.4s;
}
.aos-menu .menu-item.menu-item-has-children:hover a::after
{
content: "\2212";
transform: rotate(180deg);
}
.aos-menu .menu-item .sub-menu
{
display: none;
position: absolute;
width: var(--aos-main_menu-sub_menu-item-width);
height: var(--aos-main_menu-sub_menu-item-height);
}
.aos-menu .menu-item:hover .sub-menu
{
display: block;
}
.aos-menu .menu-item .sub-menu .menu-item
{
height: auto;
text-wrap: nowrap;
width: 100%;
}
.aos-menu .menu-item .sub-menu .menu-item a
{
padding: var(--aos-main_menu-sub_menu-item-padding);
font-size: var(--aos-main_menu-sub_menu-item-font_size);
background-color: var(--aos-main_menu-sub_menu-bg_color);
text-align: start;
justify-content: start;
width: 100%;
color: var(--aos-main_menu-sub_menu-item-color);
}
.aos-menu .menu-item .sub-menu .menu-item a::after
{
content: "";
}
.aos-menu .menu-item .sub-menu .menu-item:hover a
{
background-color: var(--aos-main_menu-sub_menu-bg_color-hover);
color: var(--aos-main_menu-sub_menu-item-color-hover);
}
/* sube menu item - color, background, / hover */
/* background color, background color hover, width, padding, font size, color, hover color */
/* side menu
|--------------------------------------------------------------------------
*/
/* mobile menu pannel */
#side_nav_menu
{
width: 100%;
height: 100vh;
position: fixed;
z-index: 101;
top: 0;
overflow-x: hidden;
max-width: 0;
pointer-events: all;
background-color: var(--aos-mobile_menu-bg-color);
transition: var(--aos-mobile_menu-transition);
}
/* set max size when menu opened - editable via customizer */
#side_nav_menu.sideNav_opened
{
max-width: var(--aos-mobile_menu-width);
}
/* side menu close btn */
.aos-side_nav_menu-cls_btn-holder
{
width: 100%;
height: auto;
position: relative;
background-color: var(--aos-mobile_menu-close_btn-bg);
padding: var(--aos-mobile_menu-close_btn-padding);
display:flex;
justify-content:end;
}
.aos-side_nav_menu-cls_btn
{
background-color:transparent;
width: 35px;
height: 35px;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
overflow:hidden;
color: var(--aos-mobile_menu-close_btn-text_color);
font-size: var(--aos-mobile_menu-close_btn-font_size);
transition: var(--aos-mobile_menu-close_btn-transition);
}
.aos-side_nav_menu-cls_btn:hover
{
background-color: var(--aos-mobile_menu-close_btn-hover_color);
}
/* side menu items
|--------------------------------------------------------------------------
*/
.aos-side_menu_list-container
{
width: 100%;
height: 95%;
box-sizing: border-box;
scroll-behavior: smooth;
overflow-x: hidden;
overflow-y: auto;
}
.aos-side_menu_list, .aos-side_menu_list ul
{
padding: 0;
margin: 0;
}
/* items */
.aos-side_menu_list li
{
position:relative;
height: 100%;
width: 100%;
display:flex;
transform: translateX(-200px);
}
.aos-side_menu_list li a
{
text-decoration:none;
height: 32px;
width: 100%;
position:relative;
display:flex;
align-items:center;
box-sizing:border-box;
text-wrap: nowrap;
font-family: var(--aos-mobile_menu-font_family);
transition: var(--aos-mobile_menu-item-transition);
padding: var(--aos-mobile_menu-item-padding);
color: var(--aos-mobile_menu-item-color);
font-size: var(--aos-mobile_menu-font_size);
background-color: var(--aos-mobile_menu-item-bg_color);
}
.aos-side_menu_list li a:hover
{
background-color: var(--aos-mobile_menu-item-bg_color-hover);
color: var(--aos-mobile_menu-item-color-hover);
cursor: pointer;
}
.aos-side_menu_list .menu-item.menu-item-has-children
{
display: flex;
flex-direction: column;
}
.aos-side_menu_list .menu-item.menu-item-has-children a::before
{
content: '+';
position: absolute;
right: 15px;
transition: 0.2s;
color: var(--aos-mobile_menu-item-dropdown_indicator_color);
}
.aos-side_menu_list .menu-item.menu-item-has-children a.activeCLMenu
{
background-color: var(--aos-mobile_menu-item-activated-bg_color);
}
.aos-side_menu_list .menu-item.menu-item-has-children a.activeCLMenu::before
{
content: '\2212';
transform: rotate(180deg);
color: var(--aos-mobile_menu-item-dropdown_indicator_color-active);
}
/* sublist items */
.aos-side_menu_list .menu-item.menu-item-has-children ul
{
max-height: 0;
overflow: hidden;
transition: 0.2s;
}
.aos-side_menu_list .menu-item.menu-item-has-children ul li a
{
color: var(--aos-mobile_menu-child_item-color);
transition: 0.4s;
padding-left: 18px;
font-size: calc(var(--aos-mobile_menu-font_size) - 1px);
}
.aos-side_menu_list .menu-item.menu-item-has-children ul li a::before
{
content: '';
}
.aos-side_menu_list .menu-item.menu-item-has-children ul li a:hover
{
color: var(--aos-mobile_menu-child_item-color-hover);
}
/* side menu overlay
|--------------------------------------------------------------------------
*/
#SN_Overlay
{
width: 100%;
height: 100vh;
position: fixed;
z-index: 98;
top: 0;
pointer-events: all;
display: none;
background-color: var(--aos-mobile_menu-overlay-color);
opacity: var(--aos-mobile_menu-overlay-opacity);
transition: var(--aos-mobile_menu-overlay-transition);
}
#SN_Overlay.sideNav_opened
{
display:block;
}
/* side menu deco line
|--------------------------------------------------------------------------
*/
.SN_deco_line_holder
{
background-color: transparent;
width: 100%;
height: 100%;
position:absolute;
top: 0;
display: flex;
justify-content: end;
pointer-events: none;
align-items: center;
}
#SN_deco_line
{
background-color: #5d5d5d;
height: 0px;
width: 1px;
transition: 0.2s;
transition-delay:0s;
}
#SN_deco_line.line_open
{
height: 100%;
transition-delay:0.2s;
}
.sideNav_opened #menu-side_menu .menu-item
{
transform: translatex(0);
}
/*
|--------------------------------------------------------------------------
| Header: Editorial (custom-headers/header-editorial.php)
|--------------------------------------------------------------------------
| Two bespoke elements this header design adds beyond what every other
| header already gets for free from the --aos-header-*/--aos-main_menu-*
| variables above: a text wordmark (used when no custom logo image is set)
| and an optional CTA button (header_cta_text/header_cta_url). Both reuse
| --aos-main_menu-color so they stay in whatever color the Menu color
| Customizer control is already set to, rather than introducing a third
| color setting for one header design.
|--------------------------------------------------------------------------
*/
/* Selector deliberately compound (id + element + class), not just
`.site-logo--wordmark` — beats a generic `a { color: var(--color-primary); }`
rule elsewhere in the cascade regardless of stylesheet load order, same
specificity-safety reasoning as the heading-color fixes documented in
aksyva-blocks' BLOCK-SCAFFOLD.md. The var() fallback is extra insurance
in case --aos-main_menu-color isn't defined yet for some reason. */
#aos-site_bar-logo-holder a.site-logo--wordmark {
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--aos-main_menu-color, #1e293b);
text-decoration: none;
}
/* .aos-menu-container/.aos-menu right-justify their items to the header's
own right edge (see .aos-menu above) — reserve that same edge for the
CTA button instead by padding the menu container, so nav links stop
short of it rather than sitting underneath/behind it. */
.header-editorial .aos-menu-container {
padding-right: 150px;
box-sizing: border-box;
}
/* #header-prime's real content (logo, nav) is each absolutely positioned
at width:100%/height:100% with its own internal justify-content — see
#aos-site_bar-logo-holder and .aos-menu above — rather than a normal
flex row of siblings. A plain in-flow sibling here would just collapse
to the top of #header-prime's own (mostly empty) normal-flow box
instead of sitting inline with the logo/nav, so this button joins that
same absolute-overlay approach instead of flowing normally. */
.header-editorial__cta {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
white-space: nowrap;
padding: 9px 16px;
border: 1px solid var(--aos-main_menu-color);
color: var(--aos-main_menu-color);
font-size: 0.78rem;
font-weight: 700;
text-decoration: none;
transition: var(--aos-main_menu-item-transition);
}
.header-editorial__cta:hover {
color: var(--aos-main_menu-color-hover);
border-color: var(--aos-main_menu-color-hover);
}
#header-prime.scrolled .header-editorial__cta {
color: var(--aos-main_menu-color-scrolled);
border-color: var(--aos-main_menu-color-scrolled);
}
#header-prime.scrolled .header-editorial__cta:hover {
color: var(--aos-main_menu-color-hover-scrolled);
border-color: var(--aos-main_menu-color-hover-scrolled);
}
/* Same 900px breakpoint the theme's own dynamic CSS uses to swap
.aos-menu-container for the hamburger/drawer (see the "Responsive: hide
side menu" rules in inc/Customizer/core/output.php's generated output) —
below it .aos-mobile-menu-btn sits at this same right edge, so the CTA
is dropped here rather than overlapping it. The drawer's own "Kontakt"
item already reaches the same page section this button would. */
@media (max-width: 900px) {
.header-editorial__cta { display: none; }
.header-editorial .aos-menu-container { padding-right: 0; }
}
/*
|--------------------------------------------------------------------------
| Header: Centered (custom-headers/header-centered.php)
|--------------------------------------------------------------------------
| Two stacked rows (wordmark, then nav) instead of the one-row absolute-
| overlay layout every other header design uses (see
| #aos-site_bar-logo-holder/#menu-prime above) — needs its own layout
| rather than reusing that positioning. Pick a taller Header → Height
| (Layout section) for this design — 150px comfortably fits both rows;
| the default 80px is sized for one.
|--------------------------------------------------------------------------
*/
#header-prime.header-centered .header-centered__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
gap: 10px;
padding: 14px 24px;
box-sizing: border-box;
}
.header-centered #aos-site_bar-logo-holder {
position: relative;
width: auto;
height: auto;
padding: 0;
}
.header-centered #menu-prime,
.header-centered .aos-menu-container {
position: relative;
width: auto;
height: auto;
}
.header-centered .aos-menu {
height: auto;
justify-content: center;
gap: 26px;
}
.header-centered .aos-menu a {
height: auto;
width: auto;
padding: 2px 4px;
}
/*
|--------------------------------------------------------------------------
| Footer: Centered (AOS_footer_preset_centered() in inc/footer-modules.php)
|--------------------------------------------------------------------------
| .footer-menu's shared styling (src/scss/layout/_footer.scss) stacks its
| links vertically, one per row — the right call for every other preset
| that uses it (Menu/Standard/etc., a real link list), but this preset
| wants one plain inline row instead. Scoped to .footer-centered only, so
| every other preset's footer menu keeps its normal stacked look.
|--------------------------------------------------------------------------
*/
.footer-centered {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-centered .footer-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
padding: 0;
}
.footer-centered .footer-menu .menu-item,
.footer-centered .footer-menu .page_item {
display: block;
}
.footer-centered .footer-menu .menu-item a,
.footer-centered .footer-menu .page_item a {
width: auto;
border-bottom: none;
padding: 0;
}
.footer-centered .footer-menu .menu-item a:hover,
.footer-centered .footer-menu .page_item a:hover {
background: transparent;
}
/*
|--------------------------------------------------------------------------
| Header: Retail (custom-headers/header-retail.php)
|--------------------------------------------------------------------------
| Same one-row absolute-overlay layout as Header: Editorial (logo/nav each
| absolutely positioned within #header-prime), plus two bespoke elements:
| a scrolling announcement ticker sitting *above* #header-prime (its own
| fixed-height strip, not part of the header's own height/positioning),
| and a plain-text cart link reusing the same right-edge absolute slot
| Editorial's boxed CTA button uses — just unboxed, matching the "text
| link, not a button" reading in the mockup this header design is based
| on. --aos-main_menu-color drives both the wordmark and the cart link,
| same reasoning as Header: Editorial (one Menu-color Customizer setting,
| not a third color control).
|--------------------------------------------------------------------------
*/
.header-retail__ticker {
overflow: hidden;
white-space: nowrap;
padding: 10px 0;
}
.header-retail__ticker-track {
display: inline-flex;
width: max-content;
animation: aos-header-retail-ticker-scroll 22s linear infinite;
}
.header-retail__ticker-group {
font-weight: 800;
font-size: 0.82rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@keyframes aos-header-retail-ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.header-retail__ticker-track { animation: none; }
.header-retail__ticker-group:last-child { display: none; }
}
.header-retail #aos-site_bar-logo-holder a.site-logo--wordmark {
font-size: 1.3rem;
font-weight: 800;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--aos-main_menu-color, #1e293b);
text-decoration: none;
}
.header-retail .aos-menu-container {
padding-right: 140px;
box-sizing: border-box;
}
.header-retail .aos-menu a {
font-weight: 700;
text-transform: uppercase;
font-size: 0.74rem;
letter-spacing: 0.06em;
}
.header-retail__cart {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
white-space: nowrap;
font-weight: 700;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
transition: var(--aos-main_menu-item-transition);
}
.header-retail__cart:hover {
color: var(--aos-main_menu-color-hover);
}
/* Same reasoning as Header: Editorial's mobile breakpoint — once the
hamburger takes over, the cart link is dropped here rather than
overlapping the nav container; the drawer's own menu items are the
mobile equivalent of "everything the header offers". */
@media (max-width: 900px) {
.header-retail__cart { display: none; }
.header-retail .aos-menu-container { padding-right: 0; }
}
/*
|--------------------------------------------------------------------------
| Footer: Columns (AOS_footer_preset_columns() in inc/footer-modules.php)
|--------------------------------------------------------------------------
| .footer-column a has no display rule of its own (see _footer.scss) —
| every other preset that uses it wraps links in something that already
| forces one-per-line (a real