/** * AquaFit Sursee — front-end theme styles. * * Everything references the CSS custom properties emitted by the dynamic CSS * engine (inc/dynamic-css.php), so the dashboard controls the whole look. * * @package AquaFit_Sursee */ /* ------------------------------------------------------------------ * * 1. Base & typography * ------------------------------------------------------------------ */ /* color-scheme drives native UI (form controls, scrollbars) and cascades to all * elements. Auto exposes both so the device preference is honoured. */ body.af-skin-light { color-scheme: light; } body.af-skin-dark { color-scheme: dark; } /* Auto's color-scheme is set on :root by dynamic-css (so the user toggle's * data-theme override can flip native controls too). */ /* Light/dark user toggle (shown only in Auto mode). */ .af-theme-toggle .af-icon-sun { display: none; } .af-theme-toggle .af-icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .af-theme-toggle .af-icon-sun { display: block; } :root:not([data-theme]) .af-theme-toggle .af-icon-moon { display: none; } } :root[data-theme="dark"] .af-theme-toggle .af-icon-sun { display: block; } :root[data-theme="dark"] .af-theme-toggle .af-icon-moon { display: none; } :root[data-theme="light"] .af-theme-toggle .af-icon-sun { display: none; } :root[data-theme="light"] .af-theme-toggle .af-icon-moon { display: block; } .af-theme-toggle svg { width: 18px; height: 18px; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--af-font-body, sans-serif); font-size: var(--af-base-size, 17px); line-height: var(--af-line, 1.7); color: var(--af-text); background-color: var(--af-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--af-font-heading, serif); color: var(--af-heading); font-weight: var(--af-heading-weight, 600); letter-spacing: var(--af-heading-spacing, 0); line-height: 1.15; margin: 0 0 var(--af-heading-margin, .6em); /* Let long words (e.g. German compounds like "Öffnungszeiten") break instead * of overflowing the viewport and breaking the layout on mobile. */ overflow-wrap: break-word; word-wrap: break-word; min-width: 0; } h1 { font-size: var(--af-h1); } h2 { font-size: var(--af-h2); } h3 { font-size: var(--af-h3); } h4 { font-size: var(--af-h4); } h5 { font-size: var(--af-h5); } h6 { font-size: var(--af-h6); } p { margin: 0 0 1.2em; } a { color: var(--af-link, var(--af-primary)); text-decoration: none; transition: color .2s ease, opacity .2s ease; } a:hover { color: var(--af-link, var(--af-primary)); opacity: .82; } img { max-width: 100%; height: auto; display: block; } .af-muted { color: var(--af-muted); } .af-label, .af-eyebrow { font-size: .78rem; letter-spacing: .14em; color: var(--af-muted); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .af-skip-link { position: absolute; left: -9999px; z-index: 1000; } .af-skip-link:focus { left: 16px; top: 12px; width: auto; height: auto; clip: auto; background: var(--af-primary); color: #fff; padding: 10px 16px; border-radius: 8px; } /* Consistent, theme-coloured keyboard-focus ring on interactive elements that * would otherwise fall back to the browser default. Only for keyboard / assistive * -tech users (:focus-visible), so mouse clicks stay clean. Specialised inputs * (search, booking, CF7) keep their own :focus-within / :focus rings. */ a:focus-visible, button:focus-visible, .af-btn:focus-visible, .af-action:focus-visible, .af-nav-toggle:focus-visible, .af-menu .nav-link:focus-visible, .af-menu .dropdown-item:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--af-primary); outline-offset: 3px; border-radius: 6px; } /* Reduced-motion: neutralise all animation/transition for users who request it * (covers the infinite hero scroll-bob, the sticky-header slide, hover effects, * the off-canvas slide, etc.). Near-zero durations rather than `none`, so things * still settle at their END state; the targeted blocks elsewhere pin specific * end-states (e.g. the preloader). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .dashicons { font-family: dashicons; } /* ------------------------------------------------------------------ * * 2. Layout helpers * ------------------------------------------------------------------ */ .af-container { width: 100%; max-width: var(--af-container, 1320px); margin: 0 auto; padding: 0 24px; } .af-container-fluid { width: 100%; padding: 0 24px; } /* Elementor pages: keep content in the 1320 container with modest top/bottom room. */ .af-elementor-content { padding-block: clamp(24px, 4vw, 56px); } /* Boxed layout: neutralise Elementor's legacy "stretched" sections so they stay * inside the boxed frame (.af-site) instead of breaking out to the full viewport. * (Flexbox "Full Width" containers already respect the box — they are 100% of the * parent.) In Wide mode stretched sections keep their full-viewport behaviour. */ body.af-layout-boxed .elementor-section.elementor-section-stretched { width: auto !important; max-width: 100% !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; } .af-section { padding: clamp(48px, 7vw, 96px) 0; } /* Centred "see more" call-to-action below a section's grid. */ .af-section-cta { text-align: center; margin-top: clamp(28px, 4vw, 46px); } .af-content-col { min-width: 0; } /* Elementor flex containers are flex-direction:row with flex-wrap:nowrap by * default. On mobile Elementor sizes stacked columns to width:100%, but nowrap * keeps them cramped side-by-side instead of wrapping onto their own lines. * Enabling wrap at the mobile breakpoint makes those 100%-wide columns stack. * - Classic containers (.e-con.e-flex) read a --flex-wrap variable. * - Elementor V4 "atomic" containers (.e-flexbox-base) set flex-wrap as a * literal, so we must set the property directly. * This only sets the DEFAULT: a container with its own explicit Wrap setting * still wins (Elementor emits it at equal specificity, later in the cascade). */ @media ( max-width: 767px ) { .elementor .e-con { --flex-wrap: wrap; } .elementor .e-flexbox-base { flex-wrap: wrap; } } /* Elementor NATIVE "Nested Accordion" widget. Its defaults are hardcoded light * (title #1f2124, border #d5d8dc), so in dark mode the titles are near-invisible. * Elementor reads these CSS variables, so we just repoint them to theme tokens — * it then follows the active skin. The `.elementor` ancestor gives specificity * (0,2,0) which beats the widget default (0,1,0); an explicit colour set on the * widget in Elementor still wins. Lives in theme.css so it loads on every page. */ .elementor .elementor-widget-n-accordion { --n-accordion-title-normal-color: var(--af-heading); --n-accordion-title-hover-color: var(--af-primary); --n-accordion-title-active-color: var(--af-primary); --n-accordion-icon-normal-color: var(--af-primary); --n-accordion-icon-hover-color: var(--af-primary); --n-accordion-icon-active-color: var(--af-primary); --n-accordion-border-color: var(--af-border); } .af-section-head { margin-bottom: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .af-section-head--center { flex-direction: column; text-align: center; gap: 14px; } .af-section-title { margin: 0; } .af-section-rule { flex: 1; height: 1px; background: var(--af-border); max-width: 120px; } .af-section-rule--top { width: 60px; height: 2px; background: var(--af-primary); border-radius: 2px; } /* ------------------------------------------------------------------ * * 3. Buttons * ------------------------------------------------------------------ */ .af-btn { display: inline-flex; align-items: center; gap: 10px; padding: var(--af-btn-padding, 14px 30px); border-radius: var(--af-btn-radius, 40px); font-weight: 600; font-size: .95rem; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease; text-align: center; } .af-btn .dashicons { font-size: 18px; width: 18px; height: 18px; } .af-btn:hover { transform: translateY(-2px); } .af-btn--secondary { background: var(--af-btn-bg); color: var(--af-btn-text); } .af-btn--secondary:hover { background: var(--af-btn-bg-hover); color: var(--af-btn-text); } .af-btn--primary { background: var(--af-primary); color: #fff; } .af-btn--primary:hover { background: var(--af-primary-08); color: #fff; box-shadow: 0 12px 30px -10px var(--af-primary); } .af-btn--outline { background: transparent; border-color: var(--af-border); color: var(--af-heading); } .af-btn--outline:hover { border-color: var(--af-primary); color: var(--af-primary); } .af-btn--ghost { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(6px); } .af-btn--ghost:hover { background: rgba(255,255,255,.18); color: #fff; } .af-btn--sm { padding: 10px 20px; font-size: .85rem; } .af-btn--lg { padding: 16px 34px; font-size: 1rem; } /* Announcement top bar */ .af-topbar { position: relative; z-index: 110; font-size: .88rem; border-bottom: 1px solid var(--af-border); } .af-topbar-inner { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 42px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; } .af-topbar-text { opacity: .92; } .af-topbar-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .af-topbar-link:hover { color: inherit; opacity: .8; } .af-topbar-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; } .af-topbar-close:hover { opacity: 1; } .af-topbar.is-hidden { display: none; } .rtl .af-topbar-close { right: auto; left: 16px; } /* ------------------------------------------------------------------ * * 4. Header * ------------------------------------------------------------------ */ .af-header { position: relative; z-index: 100; background: var(--af-bg-alt); border-bottom: 1px solid var(--af-border); } /* Subtle header entrance — triggered by JS AFTER the preloader clears (via the * af:ready event) so it isn't played, unseen, behind the preloader. Opacity ONLY * (no transform): a transform would create a containing block that reposition/ * clips the mobile nav & flyouts. No-JS / reduced-motion safe: without the * .af-header-anim class the header is fully visible. */ .af-header-anim { opacity: 0; } .af-header-anim.af-header-in { opacity: 1; transition: opacity .6s ease; } @media ( prefers-reduced-motion: reduce ) { .af-header-anim { opacity: 1; } } .af-header--transparent { position: absolute; inset: 0 0 auto 0; background: transparent; border-bottom-color: transparent; } /* Transparent header sits over the dark hero, so its content is always light, * regardless of the light/dark skin. When it sticks it gets a solid background * and reverts to the normal skin colours. */ .af-header--transparent:not(.is-stuck) .af-logo-text, .af-header--transparent:not(.is-stuck) .af-menu .nav-link, .af-header--transparent:not(.is-stuck) .af-action { color: #fff; } .af-header--transparent:not(.is-stuck) .af-menu .nav-link:hover, .af-header--transparent:not(.is-stuck) .af-menu .active > .nav-link, .af-header--transparent:not(.is-stuck) .af-action:hover { color: var(--af-secondary); } .af-header--transparent:not(.is-stuck) .af-burger, .af-header--transparent:not(.is-stuck) .af-burger::before, .af-header--transparent:not(.is-stuck) .af-burger::after { background: #fff; } .af-header--transparent:not(.is-stuck) .af-nav-toggle { border-color: rgba(255,255,255,.4); } /* Department items keep their per-item colour on the transparent header too, so * the individual menu colours work at the top of the page — not only once the * header sticks. Placed after the white/gold overrides above to win on order. */ .af-header--transparent:not(.is-stuck) .af-menu .af-has-department:hover, .af-header--transparent:not(.is-stuck) .af-menu .active > .af-has-department, .af-header--transparent:not(.is-stuck) .af-menu .af-has-department[aria-current="page"] { color: var(--af-item-color); } .af-header--transparent:not(.is-stuck) .af-menu .af-has-department:hover .af-menu-icon, .af-header--transparent:not(.is-stuck) .af-menu .active > .af-has-department .af-menu-icon, .af-header--transparent:not(.is-stuck) .af-menu .af-has-department[aria-current="page"] .af-menu-icon { color: var(--af-item-color); } .af-header--sticky.is-stuck { position: fixed; inset: 0 0 auto 0; background: color-mix(in srgb, var(--af-bg-alt) 88%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--af-border); animation: afSlideDown .35s ease; box-shadow: 0 10px 30px -18px #000; } @keyframes afSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } body.af-admin-bar .af-header--sticky.is-stuck { top: 32px; } /* A stuck header's backdrop-filter/animation would make it the containing block * for the off-canvas panel (position:fixed), trapping the menu inside the short * bar. Neutralise them while the menu is open so the panel fills the viewport. */ body.af-menu-open .af-header--sticky.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; } /* The mobile admin bar is 46px (not 32px); keep the stuck header below it. */ @media screen and (max-width: 782px) { body.af-admin-bar .af-header--sticky.is-stuck { top: 46px; } } /* The header band is wider than the 1320px content container so the full * horizontal menu has room to stay open on normal laptops; below that the * auto-fit (theme.js) collapses it to the panel. */ .af-header-inner { display: flex; align-items: center; gap: 24px; min-height: 84px; max-width: min(1600px, 100%); } /* Keep header content (logo, menu, burger) clear of the screen edges in every * state — especially the full-width sticky bar. Beats the base .af-container * gutter (incl. the smaller mobile ones) via the extra `.af-header` specificity. */ .af-header .af-header-inner { padding-inline: clamp(22px, 4vw, 34px); } .af-header--centered-logo .af-nav { margin: 0 auto; } .af-header-brand { flex-shrink: 0; } .af-header-brand img { max-height: 52px; width: auto; } .custom-logo-link { display: inline-block; } .af-logo-text { font-family: var(--af-font-heading); font-size: 1.6rem; color: var(--af-heading); letter-spacing: .04em; } /* Built-in AquaFit brand mark (default when no image logo is uploaded). */ .af-logo--brand { display: inline-flex; align-items: center; margin-top: clamp(4px, 1vw, 9px); } .af-logo-svg { height: clamp(34px, 4.2vw, 44px); width: auto; max-width: 100%; display: block; } .af-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } .af-action { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer; color: var(--af-heading); font-size: .9rem; padding: 8px 10px; border-radius: 10px; } .af-action:hover { color: var(--af-primary); } .af-action .dashicons { font-size: 18px; width: 18px; height: 18px; } /* Search / account actions are icon-only to keep the header row compact. */ .af-action-label { display: none; } /* Nav */ .af-nav { padding: 0; } .af-menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; align-items: center; } .af-menu > li { flex-shrink: 0; } .af-menu .nav-link { color: var(--af-heading); font-size: .85rem; padding: 9px 9px; border-radius: 10px; opacity: .9; position: relative; white-space: nowrap; } .af-menu .nav-link:hover, .af-menu .active > .nav-link { color: var(--af-primary); opacity: 1; } .af-menu .dropdown-menu { background: var(--af-bg-alt); border: 1px solid var(--af-border); border-radius: var(--af-radius-sm); padding: 8px; min-width: 210px; box-shadow: 0 20px 40px -20px #000; margin-top: 8px; } .af-menu .dropdown-item { color: var(--af-text); border-radius: 8px; padding: 9px 12px; } .af-menu .dropdown-item:hover { background: var(--af-surface); color: var(--af-primary); } /* Department menu items: per-item color + icon, revealed on hover/active. */ .af-menu .nav-link, .af-menu .dropdown-item { display: flex; align-items: center; gap: 6px; } .af-menu .af-has-department { --af-item-color: var(--af-primary); } .af-menu-icon { font-size: 16px; width: 16px; height: 16px; color: var(--af-muted); transition: color .2s ease, transform .2s ease; flex-shrink: 0; } .af-menu-icon-svg { display: inline-block; vertical-align: middle; fill: none; } .af-menu-label { position: relative; } .af-menu .af-has-department:hover, .af-menu .active > .af-has-department, .af-menu .af-has-department[aria-current="page"] { color: var(--af-item-color); } .af-menu .af-has-department:hover .af-menu-icon, .af-menu .active > .af-has-department .af-menu-icon { color: var(--af-item-color); transform: scale(1.12); } /* Reveal: underline */ .af-menu .af-reveal-underline .af-menu-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--af-item-color); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .af-menu .af-reveal-underline:hover .af-menu-label::after, .af-menu .active > .af-reveal-underline .af-menu-label::after { transform: scaleX(1); } /* Reveal: filled background */ .af-menu .af-reveal-background { border-radius: 10px; transition: background .2s ease, color .2s ease; } .af-menu .af-reveal-background:hover, .af-menu .active > .af-reveal-background { background: var(--af-item-color); color: #fff; } .af-menu .af-reveal-background:hover .af-menu-icon, .af-menu .active > .af-reveal-background .af-menu-icon { color: #fff; } /* Reveal: color dot */ .af-menu .af-reveal-dot .af-menu-label::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 6px; height: 6px; border-radius: 50%; background: var(--af-item-color); transform: translateX(-50%) scale(0); transition: transform .2s ease; } .af-menu .af-reveal-dot:hover .af-menu-label::after, .af-menu .active > .af-reveal-dot .af-menu-label::after { transform: translateX(-50%) scale(1); } .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin: 0 0 0 6px; } .af-nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--af-border); background: transparent; border-radius: 10px; padding: 0; cursor: pointer; } /* Off-canvas overlay stack. The backdrop sits above all page content; the * header is lifted above the backdrop while the menu is open so the panel * (which lives inside the header's stacking context) stays on top and its * links remain clickable. */ .af-nav-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(4,10,15,.5); } body.af-menu-open .af-header { z-index: 1001; } /* Logo variants (only swap when the alternate logo is actually set) */ .af-logo--sticky, .af-logo--mobile { display: none; } .af-logo img, .af-logo--sticky img, .af-logo--mobile img { max-height: 52px; width: auto; } .af-header--sticky.is-stuck .has-sticky-logo .af-logo--main { display: none; } .af-header--sticky.is-stuck .has-sticky-logo .af-logo--sticky { display: inline-block; } /* Mega menu (full-width dropdown) */ .af-menu .af-mega { position: static; } .af-menu .af-mega .dropdown-menu { left: 0; right: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 8px 34px; padding: 26px clamp(24px, 5vw, 60px); } .af-menu .af-mega .dropdown-menu > li { flex: 1 1 180px; } .af-menu .af-mega .dropdown-menu .dropdown-menu { position: static; display: block; box-shadow: none; border: 0; padding: 0; background: transparent; } /* ---------- Desktop drop-downs: integrated panel, open-glow, hover mode, 3rd level ---------- * Scoped to the horizontal (non-collapsed) nav — the off-canvas mobile menu keeps * its own accordion further down. Works for BOTH triggers: * • click → Bootstrap adds .show to the toggle + panel (data-bs-toggle present) * • hover → .af-menu.af-nav-hover reveals on :hover (+ :focus-within for keyboard), * the walker omits data-bs-toggle so the toggle stays a real link. */ @keyframes afDropIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @keyframes afDropFade { from { opacity: 0; } to { opacity: 1; } } /* Panel entrance each time one opens. The CLICK-mode L1 panel is Popper-positioned * (Bootstrap sets an inline transform), so animate opacity ONLY there — animating * transform would override Popper and make it jump. The hover-mode L1 panel and any * nested L3 flyout are CSS-positioned, so they get the fuller fade + rise. */ body:not(.af-nav-collapsed) .af-menu.af-nav-click .dropdown-menu.show { animation: afDropFade .18s ease both; } body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:hover > .dropdown-menu, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:focus-within > .dropdown-menu, body:not(.af-nav-collapsed) .af-menu .dropdown-submenu:hover > .dropdown-menu, body:not(.af-nav-collapsed) .af-menu .dropdown-submenu:focus-within > .dropdown-menu { animation: afDropIn .2s ease both; } /* Hover mode: reveal the top-level panel on hover / keyboard focus. No Bootstrap * Popper runs in this mode, so position the panel explicitly (mega is already full-width). */ body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:hover > .dropdown-menu, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:focus-within > .dropdown-menu { display: block; } body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:not(.af-mega) > .dropdown-menu { top: 100%; left: 0; } /* Invisible bridge under the toggle so crossing the 8px gap doesn't drop the hover. */ body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown { position: relative; } body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown > .dropdown-toggle::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* Third level: nested submenus are hidden until hovered/focused (Bootstrap only * toggles the first level). Applies in BOTH triggers — once L1 is open you hover * an L2 item to reveal its L3 flyout. */ body:not(.af-nav-collapsed) .af-menu .dropdown-submenu > .dropdown-menu { display: none; } body:not(.af-nav-collapsed) .af-menu .dropdown-submenu:hover > .dropdown-menu, body:not(.af-nav-collapsed) .af-menu .dropdown-submenu:focus-within > .dropdown-menu { display: block; } /* Horizontal bridge covering the 6px gap between an L2 item and its L3 flyout. */ body:not(.af-nav-collapsed) .af-menu .dropdown-submenu > .dropdown-menu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 12px; } /* Submenu parents get a right chevron so the third level is discoverable. Only * the chevron is pushed to the right (margin-left:auto) — the icon + label stay * tight together (space-between would blow out the icon↔text gap). */ body:not(.af-nav-collapsed) .af-menu .dropdown-submenu > .dropdown-item::after { content: ""; width: 7px; height: 7px; margin-left: auto; flex-shrink: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .55; transition: opacity .2s ease; } body:not(.af-nav-collapsed) .af-menu .dropdown-submenu:hover > .dropdown-item::after, body:not(.af-nav-collapsed) .af-menu .dropdown-submenu:focus-within > .dropdown-item::after { opacity: 1; } /* Item micro-interaction: a small nudge + accent on hover/focus for a more * "designed" feel than a flat background swap. */ body:not(.af-nav-collapsed) .af-menu .dropdown-item { transition: background .18s ease, color .18s ease, padding-left .18s ease; } body:not(.af-nav-collapsed) .af-menu .dropdown-item:hover, body:not(.af-nav-collapsed) .af-menu .dropdown-item:focus-visible { padding-left: 16px; } /* Parent GLOWS (department colour + soft halo) while its sub-menu is open, instead * of dimming back to the resting colour. Click = .show on the toggle; hover = * :hover / :focus-within on the .dropdown. */ body:not(.af-nav-collapsed) .af-menu .dropdown-toggle.show, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:hover > .dropdown-toggle, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:focus-within > .dropdown-toggle { color: var(--af-item-color, var(--af-primary)); opacity: 1; text-shadow: 0 0 18px color-mix( in srgb, var(--af-item-color, var(--af-primary)) 55%, transparent ); } /* Same open-glow on the transparent (over-hero) header, where text is otherwise #fff. */ body:not(.af-nav-collapsed) .af-header--transparent:not(.is-stuck) .af-menu .dropdown-toggle.show, body:not(.af-nav-collapsed) .af-header--transparent:not(.is-stuck) .af-menu.af-nav-hover .dropdown:hover > .dropdown-toggle, body:not(.af-nav-collapsed) .af-header--transparent:not(.is-stuck) .af-menu.af-nav-hover .dropdown:focus-within > .dropdown-toggle { color: var(--af-item-color, var(--af-secondary)); } /* Keep the reveal indicator (underline / dot / filled) and icon lit while open. */ body:not(.af-nav-collapsed) .af-menu .dropdown-toggle.show.af-reveal-underline .af-menu-label::after, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:hover > .af-reveal-underline .af-menu-label::after, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:focus-within > .af-reveal-underline .af-menu-label::after { transform: scaleX(1); } body:not(.af-nav-collapsed) .af-menu .dropdown-toggle.show.af-reveal-dot .af-menu-label::after, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:hover > .af-reveal-dot .af-menu-label::after, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:focus-within > .af-reveal-dot .af-menu-label::after { transform: translateX(-50%) scale(1); } body:not(.af-nav-collapsed) .af-menu .dropdown-toggle.show.af-reveal-background, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:hover > .af-reveal-background, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:focus-within > .af-reveal-background { background: var(--af-item-color); color: #fff; } body:not(.af-nav-collapsed) .af-menu .dropdown-toggle.show .af-menu-icon, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:hover > .dropdown-toggle .af-menu-icon, body:not(.af-nav-collapsed) .af-menu.af-nav-hover .dropdown:focus-within > .dropdown-toggle .af-menu-icon { color: var(--af-item-color, var(--af-primary)); transform: scale(1.12); } .af-burger, .af-burger::before, .af-burger::after { display: block; width: 22px; height: 2px; background: var(--af-heading); border-radius: 2px; transition: .25s; } .af-burger { position: relative; } .af-burger::before, .af-burger::after { content: ""; position: absolute; left: 0; } .af-burger::before { top: -7px; } .af-burger::after { top: 7px; } /* Morph the three bars into an X while the off-canvas menu is open. */ .af-nav-toggle[aria-expanded="true"] .af-burger { background: transparent; } .af-nav-toggle[aria-expanded="true"] .af-burger::before { top: 0; transform: rotate(45deg); } .af-nav-toggle[aria-expanded="true"] .af-burger::after { top: 0; transform: rotate(-45deg); } /* Search flyout */ .af-search-flyout { position: absolute; inset: 100% 0 auto 0; background: var(--af-bg-alt); border-bottom: 1px solid var(--af-border); padding: 26px 0; z-index: 120; box-shadow: 0 20px 40px -24px #000; } .af-search-flyout .af-container { position: relative; display: flex; align-items: center; gap: 12px; } .af-search-form { width: 100%; } .af-search-flyout .af-search-form { flex: 1; } /* Unified pill: leading magnifier, borderless input, solid "Suchen" button. */ .af-search-field { display: flex; align-items: center; gap: 12px; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 999px; padding: 5px 6px 5px 20px; transition: border-color .2s ease, box-shadow .2s ease; } .af-search-field:focus-within { border-color: var(--af-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-primary) 20%, transparent); } .af-search-ico { flex: 0 0 auto; color: var(--af-muted); font-size: 20px; width: 20px; height: 20px; } .af-search-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--af-heading); font-size: 1.05rem; padding: 12px 0; } .af-search-input::placeholder { color: var(--af-muted); opacity: 1; } .af-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .af-search-submit { flex: 0 0 auto; background: var(--af-primary); color: #fff; border: 0; cursor: pointer; border-radius: 999px; padding: 12px 26px; font-size: .95rem; font-weight: 600; font-family: var(--af-font-heading); letter-spacing: .01em; transition: background .2s ease, transform .15s ease; } .af-search-submit:hover { background: var(--af-primary-08); } .af-search-submit:active { transform: scale(.97); } .af-search-close { flex: 0 0 auto; background: transparent; border: 0; color: var(--af-muted); font-size: 28px; line-height: 1; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; transition: color .2s ease, background .2s ease; } .af-search-close:hover { color: var(--af-heading); background: var(--af-surface); } @media (max-width: 480px) { .af-search-submit { padding: 12px 18px; } .af-search-field { gap: 8px; padding-left: 16px; } } /* ------------------------------------------------------------------ * * 5. Hero * ------------------------------------------------------------------ */ .af-hero { position: relative; min-height: 92vh; display: flex; align-items: center; background-size: cover; background-position: center; color: #fff; background-color: #0c1a26; } .af-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,16,24,.86) 0%, rgba(6,16,24,.5) 45%, rgba(6,16,24,.15) 100%), var(--af-hero-overlay); } .af-parallax { background-attachment: fixed; } .af-hero-inner { position: relative; z-index: 2; } .af-hero-content { max-width: 620px; } .af-hero-title { font-size: clamp(2.6rem, 5.2vw, 4.4rem); color: #fff; margin-bottom: .3em; } .af-hero-highlight { color: var(--af-primary); } .af-hero-subtitle { font-size: 1.2rem; color: rgba(255,255,255,.8); margin-bottom: 2em; max-width: 42ch; } /* Hero display font — set from the "Front-Page Hero Font" theme option * (--af-hero-font); a classic serif gives an elegant heritage "old money" feel. */ .af-hero-title, .af-hero-subtitle { font-family: var(--af-hero-font, "Cormorant Garamond", Georgia, "Times New Roman", serif); } .af-hero-title { font-weight: 600; letter-spacing: .005em; } .af-hero-subtitle { font-weight: 500; } .af-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } .af-hero-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255,255,255,.7); font-size: .7rem; letter-spacing: .22em; } .af-hero-scroll .dashicons { animation: afBob 1.8s ease-in-out infinite; } @keyframes afBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* Info cards over hero (optional, right side) */ .af-hero-info { position: absolute; right: 0; top: 20%; z-index: 2; } /* ------------------------------------------------------------------ * * 6. Page title bar * ------------------------------------------------------------------ */ .af-page-title { position: relative; padding: clamp(70px, 12vw, 140px) 0 clamp(40px, 6vw, 70px); background: var(--af-bg-alt); overflow: hidden; } .af-page-title.af-has-image { background-size: cover; background-position: center; } .af-page-title-overlay { position: absolute; inset: 0; background: var(--af-hero-overlay); } .af-page-title.af-has-image .af-page-title-overlay { display: block; } .af-page-title:not(.af-has-image) .af-page-title-overlay { display: none; } .af-page-title-inner { position: relative; z-index: 2; } /* Map (with pin) behind the page-title heading. */ .af-page-title-map { position: absolute; inset: 0; z-index: 0; overflow: hidden; } /* Oversize the iframe so the container clips Google's controls (zoom, logo, * fullscreen, terms) that sit in the map corners; the centred pin stays visible. */ .af-page-title-map iframe { position: absolute; top: -70px; left: -70px; width: calc(100% + 140px); height: calc(100% + 140px); border: 0; filter: grayscale(.35) contrast(1.02); pointer-events: none; } .af-page-title.af-has-map .af-page-title-overlay { display: block; z-index: 1; } .af-page-title-heading { margin: 0 0 .3em; } .af-breadcrumbs { font-size: .88rem; color: var(--af-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .af-breadcrumbs a { color: var(--af-muted); } .af-breadcrumbs a:hover { color: var(--af-primary); } .af-breadcrumbs .af-sep { opacity: .5; } /* Over an image/map backdrop the title + breadcrumbs sit on a dark overlay, so * force light text regardless of skin (plain-background title bars use the skin * heading/muted colours as normal). */ .af-page-title.af-has-image .af-page-title-heading, .af-page-title.af-has-map .af-page-title-heading { color: #fff; } .af-page-title.af-has-image .af-breadcrumbs, .af-page-title.af-has-map .af-breadcrumbs, .af-page-title.af-has-image .af-breadcrumbs a, .af-page-title.af-has-map .af-breadcrumbs a { color: rgba(255,255,255,.85); } .af-page-title.af-has-image .af-breadcrumbs a:hover, .af-page-title.af-has-map .af-breadcrumbs a:hover { color: #fff; } /* ------------------------------------------------------------------ * * 7. Areas grid (front page) * ------------------------------------------------------------------ */ /* Bereiche cards: a photo on top with a circular icon badge notched into it, * then title + description left-aligned below on a dark card. Four per row. */ .af-areas-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 22px; } .af-areas-grid > .af-area-card { flex: 0 1 calc((100% - 66px) / 4); } .af-area-card { position: relative; display: flex; flex-direction: column; text-align: left; text-decoration: none; background-color: var(--af-bg-alt); border: 1px solid var(--af-border); border-radius: 16px; padding: 12px 12px 22px; color: var(--af-text); transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1), border-color .5s ease; will-change: transform, box-shadow; } .af-area-card:hover { border-color: var(--af-item-color, var(--af-primary)); transform: translateY(-4px); box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--af-item-color, var(--af-primary)) 55%, transparent), 0 0 32px color-mix(in srgb, var(--af-item-color, var(--af-primary)) 20%, transparent); } @media (prefers-reduced-motion: reduce) { .af-area-card:hover { transform: none; } } /* Top photo — or a subtle gradient when no image is set on the card. */ .af-area-media { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: linear-gradient(135deg, color-mix(in srgb, var(--af-primary) 22%, var(--af-bg-alt)), var(--af-bg)); } /* Circular icon badge notched into the bottom-left of the photo. High specificity * keeps the badge sizing winning over the Dashicons base styles. */ .af-area-card .af-area-icon { position: relative; z-index: 2; margin: -26px 0 0 12px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--af-item-color, var(--af-primary)); background: color-mix(in srgb, var(--af-item-color, var(--af-primary)) 22%, var(--af-bg)); border: 4px solid var(--af-bg-alt); box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: transform .3s ease, background .3s ease; } .af-area-card:hover .af-area-icon { transform: scale(1.06); background: color-mix(in srgb, var(--af-item-color, var(--af-primary)) 34%, var(--af-bg)); } .af-area-icon svg { width: 24px; height: 24px; } .af-area-icon .dashicons { font-size: 22px; width: 22px; height: 22px; } .af-area-title { margin: 14px 14px 0; font-size: 1.2rem; color: var(--af-heading); } .af-area-desc { margin: 6px 14px 0; color: var(--af-muted); font-size: .9rem; line-height: 1.45; } /* "Alle entdecken" section-header link. */ .af-areas-more { display: inline-flex; align-items: center; gap: 6px; color: var(--af-primary); font-size: .95rem; text-decoration: none; white-space: nowrap; } .af-areas-more .dashicons { font-size: 18px; width: 18px; height: 18px; transition: transform .25s ease; } .af-areas-more:hover .dashicons { transform: translateX(4px); } /* ------------------------------------------------------------------ * * 8. Booking bar * ------------------------------------------------------------------ */ .af-booking-wrap { padding-top: 0; } .af-booking { display: grid; grid-template-columns: 1fr 2.4fr; gap: 26px; align-items: center; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 30px; } .af-booking-lead h2 { font-size: 1.5rem; margin: 0 0 .3em; } /* Booking section as a 3rd-party embed: stack an optional heading over a * full-width embed instead of the two-column form grid. */ .af-booking--embed { display: block; } .af-booking--embed .af-booking-lead { margin-bottom: 20px; text-align: center; } .af-booking-embed { width: 100%; } .af-booking-embed :is( iframe, embed, object, video ) { display: block; width: 100%; max-width: 100%; border: 0; } .af-booking-embed img { max-width: 100%; height: auto; } .af-booking-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; } .af-booking-field { flex: 1; min-width: 160px; margin: 0; display: flex; flex-direction: column; gap: 4px; cursor: pointer; background: var(--af-bg-alt); border: 1px solid var(--af-border); border-radius: 12px; padding: 10px 14px; transition: border-color .2s ease, box-shadow .2s ease; } .af-booking-field:focus-within { border-color: var(--af-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-primary) 16%, transparent); } .af-booking-label { font-size: .72rem; color: var(--af-muted); letter-spacing: .05em; text-transform: uppercase; } .af-booking-field select, .af-booking-field input { width: 100%; background: transparent; border: 0; color: var(--af-heading); font-family: inherit; font-size: .95rem; outline: none; } /* Custom dropdown chevron (native arrow hidden). */ .af-booking-field--select { position: relative; } .af-booking-field--select select { appearance: none; -webkit-appearance: none; padding-right: 18px; cursor: pointer; } .af-booking-field--select::after { content: ""; position: absolute; right: 14px; bottom: 15px; width: 7px; height: 7px; border-right: 2px solid var(--af-muted); border-bottom: 2px solid var(--af-muted); transform: rotate(45deg); pointer-events: none; } /* Make native popups (dropdown list, calendar, number spinners) follow the skin * so they no longer render as light panels on the dark theme. */ .af-booking-field option { background: var(--af-bg-alt); color: var(--af-text); } .af-booking-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; } .af-booking-submit { flex: 0 0 auto; } /* ------------------------------------------------------------------ * * 9. Portfolio * ------------------------------------------------------------------ */ .af-portfolio-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; } .af-filter { background: transparent; border: 1px solid var(--af-border); color: var(--af-muted); border-radius: 40px; padding: 8px 20px; cursor: pointer; font-size: .9rem; transition: .2s; } .af-filter:hover, .af-filter.is-active { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } .af-portfolio { display: grid; gap: 24px; } .af-cols-1 { grid-template-columns: 1fr; } .af-cols-2 { grid-template-columns: repeat(2, 1fr); } .af-cols-3 { grid-template-columns: repeat(3, 1fr); } .af-cols-4 { grid-template-columns: repeat(4, 1fr); } .af-cols-5 { grid-template-columns: repeat(5, 1fr); } .af-cols-6 { grid-template-columns: repeat(6, 1fr); } .af-work-item { position: relative; border-radius: var(--af-radius); overflow: hidden; } .af-work-media { position: relative; overflow: hidden; border-radius: var(--af-radius); background: var(--af-surface); } .af-work-img, .af-work-placeholder { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; } .af-portfolio--masonry .af-work-img { aspect-ratio: auto; } .af-work-placeholder { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--af-surface), var(--af-bg-alt)); } .af-work-item:hover .af-work-img { transform: scale(1.06); } .af-work-rollover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: var(--af-rollover); opacity: 0; transition: opacity .3s ease; } .af-work-item:hover .af-work-rollover { opacity: 1; } .af-work-icons { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; } .af-work-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; transform: translateY(10px); transition: .3s; } .af-work-item:hover .af-work-icon { transform: translateY(0); } .af-work-icon:hover { background: var(--af-primary); } .af-work-caption { position: relative; z-index: 2; } .af-work-title { margin: 0 0 4px; font-size: 1.2rem; } .af-work-title a { color: #fff; } .af-work-cats { color: rgba(255,255,255,.75); font-size: .85rem; } /* Classic layout adds a body under the image */ .af-portfolio--classic .af-work-rollover { justify-content: center; } .af-work-body { padding: 18px 4px 0; } .af-portfolio--classic .af-work-title a { color: var(--af-heading); } /* Text layout */ .af-portfolio--text { display: block; } .af-portfolio--text .af-work-item { border-bottom: 1px solid var(--af-border); border-radius: 0; padding: 22px 0; } .af-portfolio--text .af-work-title a { color: var(--af-heading); } .af-portfolio--text.af-cols-2, .af-portfolio--text.af-cols-3, .af-portfolio--text.af-cols-4 { display: grid; } /* Text layout — boxed variant */ .af-portfolio--text-boxed .af-work-item { border-bottom: 0; border: 1px solid var(--af-border); background: var(--af-surface); border-radius: var(--af-radius); padding: 24px 26px; } /* ------------------------------------------------------------------ * * Catalog (Angebote / Bereiche) * ------------------------------------------------------------------ */ .af-catalog-intro { max-width: 760px; margin: 0 auto 34px; text-align: center; } .af-catalog-lead { font-family: var(--af-font-heading); font-size: 1.3rem; color: var(--af-heading); } .af-catalog-subnav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; } .af-subcat { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--af-border); color: var(--af-muted); border-radius: 40px; padding: 8px 18px; font-size: .9rem; } .af-subcat .dashicons { font-size: 15px; width: 15px; height: 15px; } .af-subcat:hover, .af-subcat.is-active { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } .af-catalog { display: grid; gap: 26px; } .af-catalog-item { display: flex; flex-direction: column; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); overflow: hidden; transition: transform .25s ease, border-color .25s ease; } .af-catalog-item:hover { transform: translateY(-5px); border-color: var(--af-primary); } .af-catalog-media { position: relative; display: block; overflow: hidden; } .af-catalog-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; } .af-catalog-item:hover .af-catalog-img { transform: scale(1.05); } .af-catalog-price { position: absolute; top: 14px; right: 14px; background: var(--af-secondary); color: #10202b; font-weight: 700; border-radius: 30px; padding: 6px 14px; font-size: .85rem; } .af-catalog-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; } .af-catalog-title { font-size: 1.3rem; margin: 0 0 6px; } .af-catalog-title a { color: var(--af-heading); } .af-catalog-title a:hover { color: var(--af-primary); } .af-catalog-subtitle { margin: 0 0 12px; } .af-catalog-meta { display: flex; gap: 16px; font-size: .85rem; margin-bottom: 14px; } .af-catalog-meta .dashicons { font-size: 15px; width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; color: var(--af-primary); } .af-catalog-body .af-readmore { margin-top: auto; } .af-catalog-cats .af-catalog-cat:hover { border-color: var(--af-item-color, var(--af-primary)); background: color-mix(in srgb, var(--af-item-color, var(--af-primary)) 8%, var(--af-surface)); } .af-catalog-cats .af-catalog-cat:hover .af-area-icon { background: color-mix(in srgb, var(--af-item-color, var(--af-primary)) 18%, transparent); color: var(--af-item-color, var(--af-primary)); } /* Offering detail */ .af-angebot-lead { font-family: var(--af-font-heading); font-size: 1.3rem; color: var(--af-heading); margin-bottom: 1em; } .af-angebot-card { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 28px; position: sticky; top: 100px; } .af-angebot-pill { display: inline-block; background: var(--af-primary); color: #fff; border-radius: 30px; padding: 5px 16px; font-size: .82rem; font-weight: 600; margin-bottom: 16px; } .af-angebot-heading { font-size: 1.3rem; margin: 0 0 10px; } .af-angebot-details { margin: 0 0 22px; } .af-angebot-details dt { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--af-muted); margin-top: 14px; } .af-angebot-details dd { margin: 2px 0 0; color: var(--af-heading); font-weight: 600; } .af-angebot-price { color: var(--af-secondary) !important; font-size: 1.4rem; } .af-angebot-card .af-btn { width: 100%; justify-content: center; } @media (max-width: 991.98px) { .af-angebot-card { position: static; } } @media (max-width: 767.98px) { .af-catalog.af-cols-3, .af-catalog.af-cols-4 { grid-template-columns: 1fr; } } /* Section band shortcode */ .af-sc-section { position: relative; padding: clamp(48px, 7vw, 96px) 0; color: #fff; overflow: hidden; } .af-sc-section-overlay { position: absolute; inset: 0; z-index: 1; } .af-sc-section-inner { position: relative; z-index: 2; } /* ------------------------------------------------------------------ * * 10. Blog layouts * ------------------------------------------------------------------ */ .af-blog { display: grid; gap: 30px; } .af-blog--grid, .af-blog--masonry { grid-template-columns: repeat(var(--af-blog-cols, 2), 1fr); } .af-blog--grid.af-cols-1, .af-blog--masonry.af-cols-1 { grid-template-columns: 1fr; } .af-blog--grid.af-cols-2, .af-blog--masonry.af-cols-2 { grid-template-columns: repeat(2, 1fr); } .af-blog--grid.af-cols-3, .af-blog--masonry.af-cols-3 { grid-template-columns: repeat(3, 1fr); } .af-blog--grid.af-cols-4, .af-blog--masonry.af-cols-4 { grid-template-columns: repeat(4, 1fr); } .af-blog-item { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); overflow: hidden; } .af-post-media { position: relative; overflow: hidden; } .af-post-thumb { width: 100%; object-fit: cover; transition: transform .5s ease; } .af-blog-item:hover .af-post-thumb { transform: scale(1.04); } /* Fallback thumbnail (posts without a featured image): branded monogram. */ .af-post-media--placeholder a { display: grid; place-items: center; aspect-ratio: 72 / 56; text-decoration: none; background: linear-gradient(135deg, color-mix(in srgb, var(--af-primary) 26%, var(--af-surface)) 0%, var(--af-surface) 72%); } .af-post-media-monogram { font-family: var(--af-font-heading); font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: color-mix(in srgb, var(--af-primary) 60%, var(--af-heading)); } .af-blog--large .af-post-media--placeholder a, .af-blog--large-alternate .af-post-media--placeholder a, .af-blog--medium .af-post-media--placeholder a, .af-blog--medium-alternate .af-post-media--placeholder a { height: 100%; aspect-ratio: auto; } .af-format-badge { position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; border-radius: 50%; background: var(--af-primary); color: #fff; display: grid; place-items: center; } .af-blog-content { padding: 24px 26px 28px; } .af-post-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .82rem; margin-bottom: 12px; } .af-post-meta .dashicons { font-size: 15px; width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; color: var(--af-primary); } .af-post-meta a { color: var(--af-muted); } .af-blog-title { font-size: 1.5rem; margin: 0 0 .5em; } .af-blog-title a { color: var(--af-heading); } .af-blog-title a:hover { color: var(--af-primary); } .af-readmore { font-weight: 600; font-size: .9rem; } /* Large / medium (media beside content) */ .af-blog--large, .af-blog--large-alternate, .af-blog--medium, .af-blog--medium-alternate { grid-template-columns: 1fr; } .af-blog--large .af-blog-inner, .af-blog--large-alternate .af-blog-inner, .af-blog--medium .af-blog-inner, .af-blog--medium-alternate .af-blog-inner { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; } .af-blog--medium .af-blog-inner, .af-blog--medium-alternate .af-blog-inner { grid-template-columns: 320px 1fr; } .af-blog--large .af-post-thumb, .af-blog--large-alternate .af-post-thumb, .af-blog--medium .af-post-thumb, .af-blog--medium-alternate .af-post-thumb { height: 100%; } .af-blog-item.af-alt .af-blog-inner { direction: rtl; } .af-blog-item.af-alt .af-blog-content { direction: ltr; } /* Timeline */ .af-blog--timeline { position: relative; grid-template-columns: 1fr; padding-left: 34px; } .af-blog--timeline::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--af-border); } .af-blog--timeline .af-blog-item { position: relative; } .af-blog--timeline .af-blog-item::before { content: ""; position: absolute; left: -34px; top: 28px; width: 14px; height: 14px; border-radius: 50%; background: var(--af-primary); box-shadow: 0 0 0 4px var(--af-bg); } /* ------------------------------------------------------------------ * * 11. Single post / entry content * ------------------------------------------------------------------ */ .af-single-media { margin: 0 0 34px; border-radius: var(--af-radius); overflow: hidden; } .af-single-media--half { max-width: 640px; } /* Flyer / poster (portrait A4): fit to the content width, natural height * (page scrolls), never cropped. */ .af-single-media--flyer img { width: 100%; height: auto; display: block; } .af-entry { font-size: 1.06rem; } .af-entry h2, .af-entry h3 { margin-top: 1.6em; } .af-entry img { border-radius: var(--af-radius-sm); margin: 1em 0; } .af-entry blockquote { margin: 1.6em 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--af-primary); font-family: var(--af-font-heading); font-size: 1.3rem; color: var(--af-heading); } .af-entry a { text-decoration: underline; text-underline-offset: 3px; } .af-entry ul, .af-entry ol { padding-left: 1.3em; margin: 0 0 1.2em; } .af-tags { margin-top: 26px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .af-tags a { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 30px; padding: 5px 14px; font-size: .82rem; color: var(--af-muted); } .af-tags a:hover { border-color: var(--af-primary); color: var(--af-primary); } .af-share { display: flex; align-items: center; gap: 10px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--af-border); } .af-share-label { margin-right: 4px; } .af-share-link { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--af-surface); border: 1px solid var(--af-border); color: var(--af-muted); } .af-share-link:hover { background: var(--af-primary); color: #fff; border-color: var(--af-primary); } .af-author-profile { display: flex; gap: 26px; align-items: center; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 34px; margin-bottom: 44px; } .af-author-profile .avatar { border-radius: 50%; } .af-author-profile-name { margin: 4px 0 10px; } .af-author-profile-bio { margin: 0 0 14px; max-width: 70ch; } @media (max-width: 575.98px) { .af-author-profile { flex-direction: column; text-align: center; } } .af-related { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--af-border); } .af-related-title { margin-bottom: 26px; } /* Post format: quote / link cards (no featured image) */ .af-blog-item--quote .af-blog-content { padding: 34px 30px; } .af-blog-item--quote .af-blog-title { font-size: 1.5rem; } .af-blog-item--quote .af-blog-excerpt { font-family: var(--af-font-heading); font-size: 1.35rem; line-height: 1.5; color: var(--af-heading); border-left: 3px solid var(--af-primary); padding-left: 20px; } .af-format-badge--large { position: static; width: auto; height: auto; border-radius: 30px; padding: 4px 14px; display: inline-flex; gap: 6px; margin-bottom: 14px; font-size: .78rem; } .af-top-shortcode { margin: 0 0 10px; } .af-author-box { display: flex; gap: 20px; align-items: flex-start; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 26px; margin: 40px 0; } .af-author-box .avatar { border-radius: 50%; } .af-author-name { margin: 4px 0 8px; font-size: 1.25rem; } .af-author-name a { color: var(--af-heading); } .af-author-bio { margin: 0; } .af-post-nav { display: flex; justify-content: space-between; gap: 20px; margin: 44px 0; padding-top: 24px; border-top: 1px solid var(--af-border); } .af-post-nav a { color: var(--af-heading); } .af-nav-label { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--af-muted); } /* Project details */ .af-project-card { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 28px; position: sticky; top: 100px; } .af-project-card dl { margin: 0; } .af-project-card dt { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--af-muted); margin-top: 14px; } .af-project-card dd { margin: 2px 0 0; color: var(--af-heading); font-weight: 600; } .af-project-heading { font-size: 1.3rem; margin: 0 0 6px; } /* ------------------------------------------------------------------ * * 12. Sidebar & widgets * ------------------------------------------------------------------ */ .af-sidebar .widget, .af-footer-col .widget { margin-bottom: 34px; } .widget-title { font-size: 1.05rem; margin-bottom: 16px; position: relative; padding-bottom: 10px; } /* Standardize widget headings so sidebar/footer titles are consistent and small, * whether they come from a legacy .widget-title or a block-editor Heading block * (which would otherwise inherit the large h2/h3 sizes). */ .af-sidebar .widget :is(h1,h2,h3,h4,h5,h6), .af-footer .widget :is(h1,h2,h3,h4,h5,h6) { font-size: 1.05rem; line-height: 1.35; } .widget-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--af-primary); } .af-sidebar .widget { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 24px; } .af-sidebar .widget-title { color: var(--af-sidebar-heading, var(--af-heading)); } .af-sidebar ul { list-style: none; margin: 0; padding: 0; } .af-sidebar li { padding: 8px 0; border-bottom: 1px solid var(--af-border); } .af-sidebar li:last-child { border-bottom: 0; } .af-sidebar a { color: var(--af-text); } .af-sidebar a:hover { color: var(--af-primary); } /* Custom widgets */ .af-widget-posts { list-style: none; margin: 0; padding: 0; } .af-widget-post { display: flex; gap: 14px; align-items: center; padding: 12px 0 !important; border-bottom: 1px solid var(--af-border); } .af-widget-post:first-child { padding-top: 0 !important; } .af-widget-post:last-child { border-bottom: 0; padding-bottom: 0 !important; } .af-widget-thumb { flex: 0 0 auto; display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; } .af-widget-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .af-widget-post:hover .af-widget-thumb img { transform: scale(1.07); } .af-widget-thumb--empty { display: grid; place-items: center; background: color-mix(in srgb, var(--af-primary) 12%, var(--af-surface)); color: var(--af-primary); } .af-widget-thumb--empty .dashicons { font-size: 26px; width: 26px; height: 26px; } .af-widget-post-body { min-width: 0; } .af-widget-post-title { display: block; color: var(--af-heading); font-weight: 600; line-height: 1.35; font-size: .96rem; transition: color .2s ease; } .af-widget-post-title:hover { color: var(--af-primary); } .af-widget-post-date { display: block; font-size: .78rem; margin-top: 5px; } /* Search results — cards with a thumbnail so results don't read as plain text. */ .af-search-count { margin: 0 0 22px; } .af-search-results { display: grid; gap: 16px; } .af-search-item { display: flex; gap: 20px; align-items: stretch; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 14px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .af-search-item:hover { border-color: var(--af-primary); transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(0,0,0,.45); } .af-search-thumb { flex: 0 0 168px; display: block; border-radius: var(--af-radius-sm); overflow: hidden; } .af-search-thumb img { display: block; width: 100%; height: 100%; min-height: 118px; object-fit: cover; } .af-search-thumb--empty { display: grid; place-items: center; min-height: 118px; background: color-mix(in srgb, var(--af-primary) 12%, var(--af-surface)); color: var(--af-primary); } .af-search-thumb--empty .dashicons { font-size: 34px; width: 34px; height: 34px; } .af-search-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .af-search-title { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.25; } .af-search-title a { color: var(--af-heading); } .af-search-title a:hover { color: var(--af-primary); } .af-search-excerpt { margin: 0 0 10px; font-size: .95rem; } .af-search-body .af-readmore { margin-top: auto; align-self: flex-start; } @media (max-width: 560px) { .af-search-item { flex-direction: column; gap: 12px; } .af-search-thumb { flex-basis: auto; } .af-search-thumb img, .af-search-thumb--empty { min-height: 190px; } } /* Core "Latest Posts" block: theme its thumbnails when "Show featured image" is * enabled. (For automatic thumbnails, prefer the "AquaFit: Recent Posts" widget.) */ .wp-block-latest-posts:not(.is-grid) { list-style: none; margin: 0; padding: 0; } .wp-block-latest-posts:not(.is-grid) > li { display: flex; gap: 14px; align-items: center; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--af-border); } .wp-block-latest-posts:not(.is-grid) > li:last-child { border-bottom: 0; } .wp-block-latest-posts .wp-block-latest-posts__featured-image { flex: 0 0 auto; margin: 0; } .wp-block-latest-posts .wp-block-latest-posts__featured-image a { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; } .wp-block-latest-posts .wp-block-latest-posts__featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .wp-block-latest-posts:not(.is-grid) > li:hover .wp-block-latest-posts__featured-image img { transform: scale(1.07); } .wp-block-latest-posts .wp-block-latest-posts__post-title { color: var(--af-heading); font-weight: 600; line-height: 1.35; } .wp-block-latest-posts .wp-block-latest-posts__post-title:hover { color: var(--af-primary); } .wp-block-latest-posts .wp-block-latest-posts__post-date { color: var(--af-muted); font-size: .78rem; margin-top: 5px; } .af-widget-contact { list-style: none; margin: 0; padding: 0; } .af-widget-contact li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0 !important; border: 0 !important; } .af-widget-contact .dashicons { color: var(--af-primary); flex-shrink: 0; margin-top: 2px; } /* ------------------------------------------------------------------ * * 13. Alerts / icon boxes / map (shortcodes) * ------------------------------------------------------------------ */ .af-alert { border-radius: var(--af-radius-sm); padding: 16px 20px; margin: 0 0 1.4em; border: 1px solid var(--af-border); } .af-alert--info { background: var(--af-alert-info); } .af-alert--success { background: var(--af-alert-success); } .af-alert--warning { background: var(--af-alert-warning); } .af-alert--error { background: var(--af-alert-error); } .af-icon-box { text-align: center; padding: 24px; } .af-icon-box-icon { font-size: 34px; width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 18px; background: color-mix(in srgb, var(--af-primary) 14%, transparent); color: var(--af-primary); } .af-map { border-radius: var(--af-radius); overflow: hidden; border: 1px solid var(--af-border); } .af-map iframe { display: block; } /* ------------------------------------------------------------------ * * 14. Stats * ------------------------------------------------------------------ */ .af-stats-wrap { padding: 0 0 clamp(48px,7vw,96px); } .af-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 40px; } .af-stat { text-align: center; } .af-stat-value { display: block; font-family: var(--af-stats-font, var(--af-font-heading)); font-size: 2.4rem; color: var(--af-primary); font-weight: 600; } .af-stat-label { font-size: .9rem; } /* ------------------------------------------------------------------ * * 15. Pagination * ------------------------------------------------------------------ */ .af-pagination { margin-top: 46px; } .af-pagination ul { list-style: none; display: flex; gap: 8px; justify-content: center; padding: 0; margin: 0; flex-wrap: wrap; } .af-pagination a, .af-pagination span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--af-border); color: var(--af-text); } .af-pagination .current { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } .af-pagination a:hover { border-color: var(--af-primary); color: var(--af-primary); } /* ------------------------------------------------------------------ * * 16. Comments * ------------------------------------------------------------------ */ .af-comments { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--af-border); } .af-comment-list { list-style: none; margin: 0; padding: 0; } .af-comment-list ol.children { list-style: none; margin-left: 34px; } .af-comments .comment-body { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 22px; margin-bottom: 18px; } .af-comments .avatar { border-radius: 50%; } .af-comment-form input[type=text], .af-comment-form input[type=email], .af-comment-form input[type=url], .af-comment-form textarea { width: 100%; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 12px; padding: 12px 16px; color: var(--af-heading); } /* ------------------------------------------------------------------ * * 17. Footer * ------------------------------------------------------------------ */ .af-footer { background: var(--af-footer-bg); border-top: 1px solid var(--af-border); margin-top: 20px; font-size: var(--af-footer-size, 15px); color: var(--af-footer-text, var(--af-muted)); } .af-footer-widgets { padding: clamp(44px,6vw,72px) 0 20px; } .af-footer .widget-title { color: var(--af-footer-heading, var(--af-heading)); } .af-footer a { color: var(--af-footer-text, var(--af-muted)); } .af-copyright { color: var(--af-footer-text, var(--af-muted)); } .af-footer a:hover { color: var(--af-primary); } /* Footer Menu location — horizontal links row above the bottom bar. */ .af-footer-nav-row { border-top: 1px solid var(--af-border); } .af-footer-menu { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 0; padding: 18px 0; } .af-footer-menu a { color: var(--af-footer-text, var(--af-muted)); font-size: .95rem; } .af-footer-menu a:hover { color: var(--af-primary); } .af-footer-bottom { border-top: 1px solid var(--af-border); padding: 22px 0; } .af-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .af-copyright p { margin: 0; font-size: .9rem; } .af-legal-menu { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; } .af-socials { display: flex; gap: 10px; } .af-social { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--af-surface); border: 1px solid var(--af-border); color: var(--af-muted); overflow: hidden; transition: background .25s ease, color .25s ease, border-color .25s ease, filter .25s ease; } /* Full-colour brand logos (Facebook, Instagram, TikTok): muted by default, * colourful on hover / click. */ .af-social--logo { background: transparent; border: 0; overflow: visible; filter: grayscale(1) opacity(.72); } .af-social--logo:hover, .af-social--logo:focus-visible, .af-social--logo:active { filter: grayscale(0) opacity(1); } .af-social-img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ------------------------------------------------------------------ * * 18. Side navigation template * ------------------------------------------------------------------ */ .af-sidenav-menu { list-style: none; margin: 0; padding: 0; position: sticky; top: 100px; } .af-sidenav-menu li { border-bottom: 1px solid var(--af-border); } .af-sidenav-menu a { display: block; padding: 12px 14px; color: var(--af-text); border-radius: 8px; } .af-sidenav-menu a:hover, .af-sidenav-menu .current-menu-item > a { color: var(--af-primary); background: var(--af-surface); } .af-sidenav-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 14px; max-height: 0; overflow: hidden; transition: max-height .3s ease; } .af-sidenav-layout[data-trigger="hover"] .menu-item-has-children:hover > .sub-menu, .af-sidenav-menu .current-menu-item .sub-menu, .af-sidenav-menu .menu-item.is-open > .sub-menu { max-height: 600px; } /* ------------------------------------------------------------------ * * 19. Misc: back-to-top, preloader, 404 * ------------------------------------------------------------------ */ .af-back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 200; width: 48px; height: 48px; border: 0; cursor: pointer; border-radius: 50%; background: var(--af-primary); color: #fff; display: grid; place-items: center; opacity: 0; transform: translateY(14px); transition: .3s; box-shadow: 0 14px 30px -12px var(--af-primary); } .af-back-to-top.is-visible { opacity: 1; transform: translateY(0); } /* Preloader — AquaFit Sursee branded splash: wordmark blurs into focus above a * thin progress bar. Uses the shared .af-preloader container + .is-hidden fade. */ .af-preloader { position: fixed; inset: 0; z-index: 9999; background: var(--af-bg); display: flex; align-items: center; justify-content: center; transition: opacity .55s cubic-bezier(.4,0,.2,1), visibility .55s; } .af-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .af-preloader-group { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(260px, 62vw); } .af-preloader-logo { width: 100%; line-height: 0; opacity: 0; filter: blur(16px); transform: translateY(10px); animation: afPreLogoIn .8s cubic-bezier(.16,1,.3,1) .1s forwards; } .af-preloader-logo svg { width: 100%; height: auto; display: block; overflow: visible; } .af-preloader-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: afPreFadeIn .45s ease .3s forwards; } .af-preloader-foot span { font-size: .52rem; letter-spacing: .55em; text-indent: .55em; text-transform: uppercase; color: var(--af-muted); } .af-preloader-bar { width: 160px; height: 1px; border-radius: 1px; background: rgba(74,175,255,.12); overflow: hidden; } .af-preloader-fill { height: 100%; width: 0; border-radius: 1px; background: linear-gradient(90deg,#1863dc,#4aafff); box-shadow: 0 0 10px rgba(74,175,255,.7); animation: afPreBarFill .65s cubic-bezier(.4,0,.2,1) .3s forwards; } @keyframes afPreLogoIn { to { opacity: 1; filter: blur(0); transform: none; } } @keyframes afPreBarFill { to { width: 100%; } } @keyframes afPreFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .af-preloader-logo, .af-preloader-foot { animation: none; opacity: 1; filter: none; transform: none; } .af-preloader-fill { animation: none; width: 100%; } .af-preloader { transition: opacity .3s, visibility .3s; } } .af-404 { text-align: center; } .af-404-code { font-family: var(--af-font-heading); font-size: clamp(6rem, 18vw, 12rem); color: var(--af-primary); line-height: 1; display: block; } .af-404-inner .af-search-form { max-width: 460px; margin: 22px auto; } .af-empty, .af-none { text-align: center; color: var(--af-muted); padding: 40px 0; } /* Scroll reveal */ .af-reveal { opacity: 0; transform: translateY(52px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; } /* Gentle, movement-free fade for section wrappers (JS-added, so no-JS = visible). */ .af-reveal-soft { opacity: 0; transition: opacity 1.1s ease; will-change: opacity; } /* Lighter fade + small rise for price-table columns; layers cleanly over the * Elementor container's own reveal so the movement never doubles up. */ .af-pt-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; } .af-revealed { opacity: 1; transform: none; } /* Sticky sidebar */ .af-sidebar--sticky { position: sticky; top: 100px; align-self: flex-start; } /* Cookie notice */ .af-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: var(--af-bg-alt); border-top: 1px solid var(--af-border); transform: translateY(100%); transition: transform .4s ease; } .af-cookie.is-in { transform: translateY(0); } .af-cookie-inner { display: flex; align-items: center; gap: 18px; justify-content: space-between; padding: 14px 24px; flex-wrap: wrap; } .af-cookie-text { font-size: .9rem; color: var(--af-text); } /* ------------------------------------------------------------------ * * 20. Responsive * ------------------------------------------------------------------ */ @media (max-width: 1200px) { .af-areas-grid > .af-area-card { flex-basis: calc((100% - 44px) / 3); } .af-cols-5, .af-cols-6 { grid-template-columns: repeat(3, 1fr); } } /* The primary nav collapses to the off-canvas panel whenever it does not fit * on one line. theme.js measures the real menu width against the available * header space and toggles `body.af-nav-collapsed`, so this adapts to any label * length, font or item count — there is no fixed breakpoint to guess, and the * menu never wraps to two lines or gets clipped. Icons and full labels are kept * throughout; when there is no room the whole menu slides into the panel. */ body.af-nav-collapsed .af-nav-toggle { display: inline-flex; align-items: center; } /* When collapsed the nav is just the burger — move it to the far right, * after the header actions, instead of inheriting the centred-logo centring. */ body.af-nav-collapsed .af-nav { order: 3; margin: 0; } body.af-nav-collapsed .af-nav-collapse { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 84vw); z-index: 140; background: var(--af-bg-alt); border-left: 1px solid var(--af-border); padding: 78px 22px 22px; overflow-y: auto; transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1); display: block !important; } body.af-nav-collapsed .af-nav-collapse.is-open { transform: translateX(0); box-shadow: -20px 0 50px -24px #000; } body.af-menu-open { overflow: hidden; } body.af-nav-collapsed .af-menu { flex-direction: column; align-items: stretch; gap: 2px; } /* Header CTA: in the bar on desktop, but when the nav collapses (phones) it * hides from the bar — no room — and appears as a full-width button inside the * off-canvas menu instead. Tied to body.af-nav-collapsed so it tracks the same * adaptive breakpoint as the burger, not a fixed width. */ .af-nav-cta { display: none; } body.af-nav-collapsed .af-header-cta { display: none; } body.af-nav-collapsed .af-nav-cta { display: inline-flex; justify-content: center; width: 100%; margin-top: 16px; } /* Larger, easier-to-tap links inside the off-canvas panel. */ body.af-nav-collapsed .af-menu .nav-link { font-size: .98rem; padding: 12px 12px; } /* The panel has a solid skin background, so its links must use skin colours — * not the white forced by the transparent header for links over the hero. * (Higher specificity than `.af-header--transparent:not(.is-stuck) .nav-link`.) */ body.af-nav-collapsed .af-nav-collapse .af-menu .nav-link, body.af-nav-collapsed .af-nav-collapse .af-menu .dropdown-item { color: var(--af-heading); } body.af-nav-collapsed .af-nav-collapse .af-menu .nav-link:hover, body.af-nav-collapsed .af-nav-collapse .af-menu .active > .nav-link, body.af-nav-collapsed .af-nav-collapse .af-menu .dropdown-item:hover { color: var(--af-primary); } /* …but department items keep their own per-item colour (the rules above would * otherwise flatten every active/hovered item to --af-primary in the off-canvas * menu). Same specificity, declared later, so --af-item-color wins. */ body.af-nav-collapsed .af-nav-collapse .af-menu .af-has-department:hover, body.af-nav-collapsed .af-nav-collapse .af-menu .active > .af-has-department, body.af-nav-collapsed .af-nav-collapse .af-menu .af-has-department[aria-current="page"] { color: var(--af-item-color); } /* Off-canvas dropdowns behave as an accordion: collapsed by default, revealed * when their parent
  • gets .is-open (toggled by theme.js on tap). This keeps * the mobile menu short instead of dumping every sub-item on screen at once. */ body.af-nav-collapsed .af-menu .dropdown-menu { position: static; box-shadow: none; margin: 0 0 4px 10px; padding: 0; border: 0; background: transparent; display: none; width: auto; min-width: 0; } body.af-nav-collapsed .af-menu .af-mega .dropdown-menu { flex-direction: column; gap: 0; } body.af-nav-collapsed .af-menu .af-mega .dropdown-menu > li { flex: none; } body.af-nav-collapsed .af-menu .dropdown.is-open > .dropdown-menu, body.af-nav-collapsed .af-menu .dropdown-submenu.is-open > .dropdown-menu { display: block; } body.af-nav-collapsed .af-menu .af-mega.is-open > .dropdown-menu { display: flex; } /* Chevron affordance on expandable items (rotates when open). */ body.af-nav-collapsed .af-menu .dropdown-toggle { position: relative; } body.af-nav-collapsed .af-menu .dropdown-toggle::after { margin-left: auto; transition: transform .2s ease; } body.af-nav-collapsed .af-menu .dropdown.is-open > .dropdown-toggle::after, body.af-nav-collapsed .af-menu .dropdown-submenu.is-open > .dropdown-toggle::after { transform: rotate(180deg); } body.af-nav-collapsed.rtl .af-nav-collapse { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--af-border); transform: translateX(-100%); } body.af-nav-collapsed .has-mobile-logo .af-logo--main { display: none; } body.af-nav-collapsed .has-mobile-logo .af-logo--mobile { display: inline-block; } /* Tablet and below. */ @media (max-width: 991.98px) { .af-header-inner { min-height: 74px; } .af-header-brand img { max-height: 46px; } .af-booking { grid-template-columns: 1fr; } .af-blog--large .af-blog-inner, .af-blog--large-alternate .af-blog-inner, .af-blog--medium .af-blog-inner, .af-blog--medium-alternate .af-blog-inner { grid-template-columns: 1fr; } .af-blog-item.af-alt .af-blog-inner { direction: ltr; } .af-project-card { position: static; } /* Cap dense grids so cards stay legible on tablets. */ .af-cols-4 { grid-template-columns: repeat(3, 1fr); } .af-blog--grid.af-cols-3, .af-blog--grid.af-cols-4, .af-blog--masonry.af-cols-3, .af-blog--masonry.af-cols-4 { grid-template-columns: repeat(2, 1fr); } .af-pricing-table.af-cols-3, .af-pricing-table.af-cols-4 { grid-template-columns: repeat(2, 1fr); } } /* Phone. */ @media (max-width: 767.98px) { .af-areas-grid > .af-area-card { flex-basis: calc((100% - 22px) / 2); } .af-cols-3, .af-cols-4, .af-cols-5, .af-cols-6 { grid-template-columns: repeat(2, 1fr); } .af-blog--grid, .af-blog--masonry, .af-blog--grid.af-cols-3, .af-blog--grid.af-cols-4 { grid-template-columns: 1fr; } .af-stats { grid-template-columns: repeat(2, 1fr); padding: 28px 20px; } .af-hero { min-height: 84vh; } .af-header-cta .dashicons { display: none; } /* Compact header + tighter page gutters on phones. */ .af-header-inner { min-height: 64px; gap: 14px; } .af-container { padding: 0 18px; } .af-topbar-inner { gap: 10px; font-size: .82rem; } .af-pricing-table.af-cols-2, .af-pricing-table.af-cols-3, .af-pricing-table.af-cols-4 { grid-template-columns: 1fr; } .af-footer-bottom-inner { justify-content: center; text-align: center; } } /* Small phones. */ @media (max-width: 479.98px) { .af-cols-2, .af-cols-3, .af-cols-4 { grid-template-columns: 1fr; } .af-areas-grid > .af-area-card { flex-basis: 100%; } .af-stats { grid-template-columns: 1fr; } .af-header-cta { display: none; } .af-container { padding: 0 15px; } .af-header-brand img { max-height: 40px; } .af-logo-text { font-size: 1.35rem; } .af-header-actions { gap: 4px; } .af-action { padding: 8px 7px; } } /* On phones the header must never overflow (body has overflow-x:hidden, which * would clip the right-most item — the burger). Keep the row on one line and * let the logo yield space so the toggle and actions always stay fully visible * and inset from the edge. */ @media (max-width: 767.98px) { .af-header-inner { flex-wrap: nowrap; } .af-header-brand { flex: 0 1 auto; min-width: 0; } .af-header-brand img { max-width: 46vw; height: auto; } .af-header-actions, .af-nav, .af-nav-toggle { flex-shrink: 0; } } /* ------------------------------------------------------------------ * * 20b. Contact Form 7 — themed to match the site design * ------------------------------------------------------------------ */ .af-booking-form { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--af-border); } .af-booking-form-title { margin: 0 0 14px; font-size: 1.15rem; } .wpcf7-form p { margin: 0 0 16px; } .wpcf7-form label { display: block; font-weight: 600; font-size: .9rem; color: var(--af-heading); margin-bottom: 4px; } .wpcf7-form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=file]), .wpcf7-form textarea, .wpcf7-form select { width: 100%; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 12px; padding: 12px 16px; color: var(--af-heading); font-family: inherit; font-size: .95rem; line-height: 1.5; transition: border-color .2s ease, box-shadow .2s ease; appearance: none; -webkit-appearance: none; } .wpcf7-form textarea { min-height: 130px; resize: vertical; } .wpcf7-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238894a0' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } .wpcf7-form option { background: var(--af-bg-alt); color: var(--af-text); } .wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: var(--af-muted); opacity: 1; } .wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { outline: none; border-color: var(--af-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-primary) 16%, transparent); } .wpcf7-form input[type=checkbox], .wpcf7-form input[type=radio] { accent-color: var(--af-primary); width: auto; margin-right: 7px; } .wpcf7-form .wpcf7-list-item { display: inline-flex; align-items: center; margin: 0 16px 6px 0; } .wpcf7-form .wpcf7-list-item label { font-weight: 400; margin: 0; color: var(--af-text); } /* Submit button = theme primary button */ .wpcf7-form input[type=submit], .wpcf7-form button[type=submit] { display: inline-flex; align-items: center; justify-content: center; background: var(--af-primary); color: #fff; border: 1px solid transparent; border-radius: var(--af-btn-radius, 40px); padding: var(--af-btn-padding, 14px 30px); font-weight: 600; font-size: .95rem; line-height: 1; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .wpcf7-form input[type=submit]:hover, .wpcf7-form button[type=submit]:hover { background: var(--af-primary-08); transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--af-primary); } .af-booking-form .wpcf7-form input[type=submit], .af-booking-form .wpcf7-form button[type=submit] { width: 100%; } /* Validation + response */ .wpcf7-not-valid { border-color: #e05260 !important; } .wpcf7-not-valid-tip { color: #e05260; font-size: .82rem; margin-top: 5px; font-weight: 500; } .wpcf7-form .wpcf7-response-output { border: 1px solid var(--af-border); border-radius: 12px; padding: 12px 16px; margin: 18px 0 0; font-size: .9rem; } .wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.unaccepted .wpcf7-response-output, .wpcf7-form.spam .wpcf7-response-output { border-color: #e05260; color: #e05260; } .wpcf7-form.sent .wpcf7-response-output { border-color: var(--af-primary); color: var(--af-primary); } .wpcf7-spinner { background-color: var(--af-primary); } /* ------------------------------------------------------------------ * * 21. RTL tweaks * ------------------------------------------------------------------ */ .rtl .af-hero-overlay { background: linear-gradient(270deg, rgba(6,16,24,.86) 0%, rgba(6,16,24,.5) 45%, rgba(6,16,24,.15) 100%), var(--af-hero-overlay); } .rtl .widget-title::after { left: auto; right: 0; } .rtl .af-header-actions { margin-left: 0; margin-right: auto; } /* ------------------------------------------------------------------ * * 22. Content elements (shortcodes) * ------------------------------------------------------------------ */ /* Carousel */ .af-carousel { border-radius: var(--af-radius); overflow: hidden; } .af-carousel .carousel-item img { object-fit: cover; } .af-carousel-caption { background: linear-gradient(transparent, rgba(6,16,24,.8)); border-radius: 0; padding: 40px 20px 24px; } /* Tabs */ .af-nav-tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 20px; border-bottom: 1px solid var(--af-border); } .af-tab-btn { background: transparent; border: 0; color: var(--af-muted); cursor: pointer; padding: 12px 20px; font-weight: 600; font-size: .95rem; border-bottom: 2px solid transparent; margin-bottom: -1px; } .af-tab-btn:hover { color: var(--af-heading); } .af-tab-btn.active { color: var(--af-primary); border-bottom-color: var(--af-primary); } /* Accordion */ .af-accordion-item { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius-sm); margin-bottom: 12px; overflow: hidden; } .af-accordion-button { width: 100%; text-align: left; background: transparent; border: 0; color: var(--af-heading); font-family: var(--af-font-heading); font-size: 1.12rem; font-weight: 600; padding: 18px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .af-accordion-button::after { content: "\f347"; font-family: dashicons; transition: transform .3s ease; color: var(--af-primary); flex-shrink: 0; } .af-accordion-button.collapsed::after { transform: rotate(-90deg); } .af-accordion-body { padding: 0 22px 20px; color: var(--af-text); } /* Testimonials */ .af-testimonials { max-width: 760px; margin: 0 auto; text-align: center; } .af-tst-card { margin: 0; padding: 20px 40px 50px; } .af-tst-quote { font-family: var(--af-font-heading); font-size: 1.5rem; line-height: 1.5; color: var(--af-heading); margin: 0 0 22px; } .af-tst-quote::before { content: "\201C"; color: var(--af-primary); font-size: 2em; line-height: 0; vertical-align: -.35em; margin-right: 6px; } .af-tst-meta { display: flex; gap: 14px; align-items: center; justify-content: center; } .af-tst-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; } .af-tst-meta > div { text-align: left; } .af-tst-name { display: block; font-weight: 700; color: var(--af-heading); } .af-testimonials .carousel-control-prev, .af-testimonials .carousel-control-next { width: 44px; } /* Counter */ .af-counter { text-align: center; } .af-counter-icon { font-size: 30px; width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 16px; background: color-mix(in srgb, var(--af-primary) 14%, transparent); color: var(--af-primary); } .af-counter-value { display: block; font-family: var(--af-stats-font, var(--af-font-heading)); font-size: 2.8rem; font-weight: 600; color: var(--af-primary); line-height: 1; } .af-counter-label { display: block; margin-top: 8px; } /* Progress */ .af-progress { margin: 0 0 20px; --af-progress-color: var(--af-primary); } .af-progress-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .9rem; } .af-progress-label { color: var(--af-heading); font-weight: 600; } .af-progress-pct { color: var(--af-muted); } .af-progress-track { height: 10px; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 20px; overflow: hidden; } .af-progress-bar { height: 100%; width: 0; background: var(--af-progress-color); border-radius: 20px; transition: width 1.4s cubic-bezier(.2,.8,.2,1); } /* Pricing */ .af-pricing-table { display: grid; gap: 24px; } .af-pricing-table.af-cols-2 { grid-template-columns: repeat(2,1fr); } .af-pricing-table.af-cols-3 { grid-template-columns: repeat(3,1fr); } .af-pricing-table.af-cols-4 { grid-template-columns: repeat(4,1fr); } .af-pricing-card { position: relative; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 34px 28px; text-align: center; display: flex; flex-direction: column; } .af-pricing-card.is-featured { border-color: var(--af-primary); box-shadow: 0 20px 50px -24px var(--af-primary); transform: translateY(-6px); } .af-pricing-badge { position: absolute; top: 16px; right: 16px; background: var(--af-primary); color: #fff; font-size: .72rem; padding: 4px 12px; border-radius: 20px; letter-spacing: .05em; } .af-pricing-title { font-size: 1.3rem; } .af-pricing-amount { font-family: var(--af-font-heading); font-size: 2.8rem; color: var(--af-heading); font-weight: 600; } .af-pricing-period { display: block; } .af-pricing-features { list-style: none; padding: 20px 0; margin: 20px 0; border-top: 1px solid var(--af-border); border-bottom: 1px solid var(--af-border); text-align: left; } .af-pricing-features li { padding: 7px 0; display: flex; gap: 10px; align-items: center; } .af-pricing-features .dashicons { color: var(--af-primary); } .af-pricing-card .af-btn { margin-top: auto; justify-content: center; } /* Gallery */ .af-gallery { display: grid; gap: 14px; } .af-gallery-item { position: relative; display: block; border-radius: var(--af-radius-sm); overflow: hidden; } .af-gallery-img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s ease; } .af-gallery-item:hover .af-gallery-img { transform: scale(1.08); } .af-gallery-zoom { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--af-primary); color: #fff; opacity: 0; transition: opacity .3s ease; } .af-gallery-item:hover .af-gallery-zoom { opacity: 1; } /* Video / separators / spacer */ .af-video { border-radius: var(--af-radius); overflow: hidden; margin: 1.4em 0; } .af-separator { margin: 34px 0; height: 1px; background: var(--af-border); } .af-separator--dots { height: 6px; background: none; background-image: radial-gradient(var(--af-border) 40%, transparent 40%); background-size: 16px 6px; } .af-separator--wave { height: 12px; background: none; background-image: radial-gradient(circle at 10px -4px, transparent 12px, var(--af-border) 13px, transparent 14px); background-size: 20px 12px; } @media (max-width: 767.98px) { .af-pricing-table.af-cols-2, .af-pricing-table.af-cols-3, .af-pricing-table.af-cols-4 { grid-template-columns: 1fr; } .af-tst-quote { font-size: 1.25rem; } } /* ------------------------------------------------------------------ * * 22b. WooCommerce * ------------------------------------------------------------------ */ .af-cart { position: relative; } .af-cart-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--af-secondary); color: #10202b; border-radius: 20px; font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; } .af-cart-count.is-empty { display: none; } .woocommerce ul.products { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; } .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); } .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); } .woocommerce ul.products li.product { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: var(--af-radius); padding: 16px; margin: 0 !important; width: auto !important; float: none !important; text-align: center; } .woocommerce ul.products li.product img { border-radius: var(--af-radius-sm); margin-bottom: 14px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.1rem; color: var(--af-heading); padding: 0; } .woocommerce ul.products li.product .price { color: var(--af-heading); } .woocommerce ul.products li.product .price del { color: var(--af-muted); } .woocommerce .price, .woocommerce div.product p.price { color: var(--af-heading); } .woocommerce span.onsale { background: var(--af-secondary); color: #10202b; border-radius: 20px; min-height: 0; min-width: 0; padding: 4px 12px; line-height: 1.4; top: 12px; left: 12px; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--af-primary); color: #fff; border-radius: var(--af-btn-radius); padding: 12px 24px; font-weight: 600; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--af-primary-08); } .woocommerce .woocommerce-message, .woocommerce .woocommerce-info { border-top-color: var(--af-primary); background: var(--af-surface); color: var(--af-text); } .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--af-primary); } .woocommerce-tabs ul.tabs li.active { background: var(--af-surface); border-bottom-color: var(--af-surface); } .woocommerce table.shop_table, .woocommerce .cart-collaterals .cart_totals { border-color: var(--af-border); border-radius: var(--af-radius); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce .select2-container .select2-selection { background: var(--af-surface); border: 1px solid var(--af-border); color: var(--af-heading); border-radius: 10px; padding: 10px 14px; } @media (max-width: 991.98px) { .woocommerce ul.products.columns-3, .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .woocommerce ul.products.columns-3, .woocommerce ul.products.columns-4 { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ * * 23. Core block / entry element styling (tables, lists, embeds…) * ------------------------------------------------------------------ */ /* Tables — minimal, editorial. Content tables are wrapped in * .af-table-responsive by inc/content-tables.php so wide tables scroll on small * screens. The design is deliberately restrained: no fills or shadows, just * clean type, hairline rules, and one thin brand accent under the header. */ .af-table-responsive { margin: 2em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .af-table-responsive::-webkit-scrollbar { height: 6px; } .af-table-responsive::-webkit-scrollbar-track { background: transparent; } .af-table-responsive::-webkit-scrollbar-thumb { background: var(--af-border); border-radius: 4px; } .af-entry table, .wp-block-table table, .af-table-responsive table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.97rem; color: var(--af-text); } /* Header — no fill; heading-coloured label with a thin brand underline. */ .af-entry thead th, .wp-block-table thead th, .af-table-responsive thead th { background: none; color: var(--af-heading); font-family: var(--af-font-heading); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.09em; text-align: left; padding: 0 18px 12px; white-space: nowrap; border: 0; border-bottom: 2px solid var(--af-primary); } /* Body cells — hairline separators only. */ .af-entry td, .af-entry th, .wp-block-table td, .wp-block-table th, .af-table-responsive td, .af-table-responsive th { padding: 14px 18px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--af-border); } .af-entry tbody tr:last-child td, .af-table-responsive tbody tr:last-child td { border-bottom: 0; } /* First column reads as the row label. */ .af-entry tbody td:first-child, .af-table-responsive tbody td:first-child, .af-entry tbody th[scope="row"], .af-table-responsive tbody th[scope="row"] { color: var(--af-heading); font-weight: 500; } /* Whisper-soft hover — no zebra, keeps it calm. */ .af-entry tbody tr:hover, .af-table-responsive tbody tr:hover { background: color-mix(in srgb, var(--af-primary) 6%, transparent); } /* Full-width colspan rows become quiet in-table sub-headings (e.g. SAUNA). */ .af-entry td[colspan], .af-table-responsive td[colspan] { color: var(--af-heading); font-family: var(--af-font-heading); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; padding-top: 26px; background: none; } .af-entry td[colspan] strong, .af-table-responsive td[colspan] strong { color: var(--af-heading); font-weight: 600; } /* Caption. */ .af-entry table caption, .af-table-responsive table caption { caption-side: top; color: var(--af-muted); font-size: 0.85rem; text-align: left; padding: 0 2px 12px; } /* Tighter on phones. */ @media (max-width: 600px) { .af-entry td, .af-entry th, .af-table-responsive td, .af-table-responsive th { padding: 12px 12px; } .af-entry thead th, .af-table-responsive thead th { padding: 0 12px 10px; } } .af-entry ul li, .af-entry ol li { margin: 6px 0; } .af-entry ul { list-style: none; padding-left: 0; } .af-entry ul li { position: relative; padding-left: 26px; } .af-entry ul li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--af-primary); } .af-entry ol { padding-left: 1.3em; } .wp-block-image img, .af-entry figure img { border-radius: var(--af-radius-sm); } .wp-block-image figcaption, .wp-caption-text { color: var(--af-muted); font-size: .85rem; text-align: center; margin-top: 8px; } .wp-block-pullquote, .wp-block-quote { border-left: 3px solid var(--af-primary); padding-left: 22px; } .wp-block-button__link { background: var(--af-primary); color: #fff; border-radius: var(--af-btn-radius); padding: 12px 26px; } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 1px solid var(--af-primary); color: var(--af-primary); } .wp-block-embed, .wp-block-video, .wp-block-audio { margin: 1.4em 0; } .wp-block-embed iframe, .wp-block-video video { border-radius: var(--af-radius-sm); max-width: 100%; } .wp-block-separator { border-color: var(--af-border); } .wp-block-columns { gap: 24px; } .af-entry code, .af-entry kbd { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 6px; padding: 2px 7px; font-size: .9em; } .af-entry pre { background: var(--af-bg-alt); border: 1px solid var(--af-border); border-radius: var(--af-radius-sm); padding: 18px 20px; overflow: auto; }