/* Theme Name: KRV Gäu Theme URI: https://krv.swissportalsolutions.ch Description: Kavallerie- und Reitverein Gäu. Swiss International Style child theme. Author: WebEvolve Version: 0.4.8 Template: twentytwentyfive License: GPL-2.0-or-later Text Domain: krv-gaeu */ /* ============================================================ * HARD RULE — text fills its container; never `max-width` on text. * Width belongs on the container (.krv-inner @ 1120px), nowhere else. * Extend this guard whenever a new text class is added. * Reference: gontenbad.ch CLAUDE.md (Peter has corrected this many times). * ============================================================ */ .krv-hero__title, .krv-hero__sub, .krv-post__title, .krv-post__body, .krv-event__title, .krv-event__meta, .krv-footer p, .krv-footer li, .krv-footer__bottom p, .eyebrow { max-width: none !important; } /* === Foundation === */ :root { --paper: oklch(96% 0.008 80); --paper-2: oklch(88% 0.025 65); /* header + footer — saddle-toned panel */ --ink: oklch(18% 0.010 60); --ink-soft: oklch(38% 0.010 60); --rule: oklch(82% 0.018 65); --accent: oklch(42% 0.180 25); --font-sans: "Switzer", system-ui, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; --font-mono: "Geist Mono", ui-monospace, monospace; --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); scrollbar-color: var(--rule) var(--paper); scrollbar-width: thin; } /* Toggle-driven dark mode. Pre-paint script in functions.php sets data-theme before renders. */ :root[data-theme="dark"] { --paper: oklch(12% 0.012 60); /* content area — deep saddle, unified with header */ --paper-2: oklch(18% 0.022 60); /* header + footer — brownish saddle tone */ --ink: oklch(94% 0.008 80); --ink-soft: oklch(68% 0.008 80); --rule: oklch(28% 0.012 60); --accent: oklch(58% 0.180 25); } .krv-logo { transition: filter 200ms; flex-shrink: 0; } :root[data-theme="dark"] .krv-logo { filter: invert(1) brightness(1.05); } /* Brand lockup */ .krv-brand-link { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: inherit; min-width: 0; } .krv-brand-name { font-family: var(--font-sans); font-size: clamp(0.6875rem, 0.6rem + 0.45vw, 1rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1; white-space: nowrap; color: var(--ink); } /* Micro-mobile: hide long brand text, keep logo */ @media (max-width: 380px) { .krv-brand-name { display: none; } } /* Theme toggle — icon-only sun/moon */ .krv-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--rule); border-radius: 9999px; color: var(--ink); cursor: pointer; flex-shrink: 0; transition: background 200ms var(--ease-spring), border-color 200ms; } .krv-theme-toggle:hover { border-color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); } .krv-theme-toggle__icon { display: none; } :root[data-theme="light"] .krv-theme-toggle__moon, :root:not([data-theme="dark"]) .krv-theme-toggle__moon { display: block; } :root[data-theme="dark"] .krv-theme-toggle__sun { display: block; } html { font-optical-sizing: auto; text-rendering: optimizeLegibility; hanging-punctuation: first last allow-end; } body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } h1, h2, h3, h4, .wp-block-heading { text-wrap: balance; font-weight: 500; line-height: 1.15; } h1, .wp-block-heading.is-h1, h1.wp-block-heading { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; } h2, h2.wp-block-heading { font-size: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem); font-weight: 500; letter-spacing: -0.015em; margin-top: 2.5rem; } h2:first-child, h2.wp-block-heading:first-child { margin-top: 0; } h3, h3.wp-block-heading { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; } h4, h4.wp-block-heading { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); font-weight: 500; letter-spacing: -0.005em; line-height: 1.25; } p, li, figcaption, blockquote { text-wrap: pretty; } :where(:lang(de), :lang(de-CH)) { hyphens: auto; } :where(:lang(de), :lang(de-CH)) h1, :where(:lang(de), :lang(de-CH)) h2, :where(:lang(de), :lang(de-CH)) h3, :where(:lang(de), :lang(de-CH)) h4 { hyphens: auto; overflow-wrap: break-word; } .eyebrow { hyphens: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } img:not(.no-treatment) { filter: saturate(0.9) contrast(1.02); } section { content-visibility: auto; contain-intrinsic-size: 0 800px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media print { body { background: white; color: black; max-width: 65ch; margin: 0 auto; } .ambient, .grain, nav, footer, .arrow-circle { display: none; } a::after { content: ' (' attr(href) ')'; font-size: 0.85em; color: #555; } h1, h2, h3 { page-break-after: avoid; } p, li { orphans: 3; widows: 3; } } /* === Utilities === */ .eyebrow { font-family: var(--font-sans); font-size: var(--wp--preset--font-size--xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); margin-bottom: var(--wp--preset--spacing--sm); } .tabular { font-variant-numeric: tabular-nums; } .hairline { border: 0; border-top: 1px solid var(--rule); margin: 0; } /* Default WordPress button — red accent pill. All wp:button blocks inherit this. */ .wp-block-button__link, .wp-block-button .wp-block-button__link { background: var(--accent) !important; color: #fff !important; border-radius: 9999px !important; padding: 0.875rem 1.75rem; font-family: var(--font-sans); font-size: var(--wp--preset--font-size--sm); font-weight: 500; letter-spacing: 0; text-decoration: none; border: 0; transition: filter 300ms var(--ease-spring); } .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:hover { filter: brightness(1.08); } /* Arrow-in-circle CTA — adds the trailing circle to .has-arrow buttons */ .wp-block-button__link.has-arrow, a.has-arrow { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--xs); border-radius: 9999px; padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md); background: var(--accent); color: #fff; font-size: var(--wp--preset--font-size--sm); font-weight: 500; text-decoration: none; transition: filter 400ms var(--ease-spring); } .wp-block-button__link.has-arrow:hover, a.has-arrow:hover { filter: brightness(1.08); } .wp-block-button__link.has-arrow::after, a.has-arrow::after { content: "→"; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); font-size: var(--wp--preset--font-size--sm); transition: transform 400ms var(--ease-spring); } .wp-block-button__link.has-arrow:hover::after, a.has-arrow:hover::after { transform: translateX(4px) rotate(-45deg); } .wp-block-button__link.has-arrow.is-accent, a.has-arrow.is-accent { background: var(--accent); } /* Text link with growing underline */ .link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 400ms var(--ease-spring); text-decoration: none; color: inherit; } .link-underline:hover { background-size: 100% 1px; } /* Accent link — always-visible underline in regimental red */ .link-accent, .krv-post__body a:not(.has-arrow):not(.link-underline) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-thickness 200ms var(--ease-spring), color 200ms; } .link-accent:hover, .krv-post__body a:not(.has-arrow):not(.link-underline):hover { text-decoration-thickness: 2px; } /* Ambient layer */ .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 30% 40%, color-mix(in oklab, var(--accent) 100%, transparent) 0%, transparent 60%); opacity: 0.04; animation: ambient-drift 45s ease-in-out infinite alternate; } @keyframes ambient-drift { to { transform: translate(8vw, -6vh) scale(1.1); } } /* Film grain */ .grain::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: url("assets/noise.svg"); opacity: 0.03; mix-blend-mode: multiply; } :root[data-theme="dark"] .grain::before { mix-blend-mode: screen; opacity: 0.02; } /* === Header / Navigation === */ .krv-header { background: var(--paper-2); position: relative; z-index: 10; } .krv-header .wp-block-navigation { font-family: var(--font-sans); } .krv-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--ink); font-weight: 500; font-size: var(--wp--preset--font-size--sm); letter-spacing: 0; padding: 0.25rem 0; position: relative; text-decoration: none; background: transparent; border: 0; cursor: pointer; } .krv-header .wp-block-navigation .wp-block-navigation-item__content:hover, .krv-header .wp-block-navigation .wp-block-navigation-item__content:focus, .krv-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible { text-decoration: none; } .krv-header .wp-block-navigation .wp-block-navigation-submenu__toggle { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem; margin: -0.5rem -0.25rem -0.5rem 0; min-width: 24px; min-height: 24px; } .krv-header .wp-block-navigation .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--ease-spring); } .krv-header .wp-block-navigation .wp-block-navigation-item__content:hover::after, .krv-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); } /* Desktop submenu dropdown — readable in both themes */ .krv-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container { background: var(--paper-2) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; min-width: 200px; max-width: 280px; padding: var(--wp--preset--spacing--xs) 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); } .krv-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--ink); padding: 0.5rem 1rem; font-size: var(--wp--preset--font-size--sm); } .krv-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; } .krv-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--accent); } /* Hamburger — 3 thin Swiss lines, varying width. Only show below 600px. Above, WP renders inline nav. */ .krv-header .wp-block-navigation__responsive-container-open, .krv-header .wp-block-navigation__responsive-container-close { background: transparent; border: 0; color: var(--ink); padding: 0.5rem; cursor: pointer; align-items: center; justify-content: center; width: 36px; height: 36px; } .krv-header .wp-block-navigation__responsive-container-open svg, .krv-header .wp-block-navigation__responsive-container-close svg { display: none; } .krv-header .wp-block-navigation__responsive-container-open::before { content: ""; display: block; width: 24px; height: 14px; background: linear-gradient(currentColor, currentColor) 0 0 / 24px 1px no-repeat, linear-gradient(currentColor, currentColor) 0 6px / 18px 1px no-repeat, linear-gradient(currentColor, currentColor) 0 12px / 12px 1px no-repeat; } .krv-header .wp-block-navigation__responsive-container-close::before { content: ""; display: block; width: 20px; height: 20px; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; transform: rotate(45deg); } /* Visibility: hamburger ≤1040px (WP's overlayMenu="mobile" only triggers ≤600, but horizontal nav wraps badly between 600–1040px). Override both. */ @media (max-width: 1040px) { .krv-header .wp-block-navigation__responsive-container-open { display: inline-flex !important; } /* Hide the horizontal desktop nav container below breakpoint */ .krv-header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container { display: none !important; } /* When overlay opens, the responsive container holds its own copy of __container */ .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex !important; } } @media (min-width: 1041px) { .krv-header .wp-block-navigation__responsive-container-open { display: none !important; } } /* Force fullscreen overlay between 600–1040px (WP's own overlay CSS only fires ≤600). */ @media (min-width: 600px) and (max-width: 1040px) { .krv-header .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; inset: 0 !important; z-index: 100000 !important; overflow: auto !important; display: flex !important; flex-direction: column !important; } .krv-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } .krv-header .wp-block-navigation__responsive-container-close { display: inline-flex !important; } } /* Overlay menu — paper substrate, left-aligned compact column */ .krv-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--paper) !important; color: var(--ink) !important; padding: var(--wp--preset--spacing--lg) clamp(1.25rem, 6vw, 2rem) var(--wp--preset--spacing--xl) !important; } /* Defeat .items-justified-right cascading into LI align-items. UL has the class and assigns flex-end to the variable directly, beating any ancestor-level override. Set on UL inside open overlay. */ .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { --navigation-layout-justification-setting: flex-start; } .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: var(--wp--preset--spacing--lg) !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100%; } .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { gap: 0.25rem !important; align-items: flex-start !important; justify-content: flex-start !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; max-width: none !important; width: 100%; text-align: left !important; } .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; text-align: left !important; } .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 0.375rem 0 !important; display: inline-block; text-align: left !important; } .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; text-align: left !important; } .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.125rem 0 0.125rem 1rem !important; text-align: left !important; display: inline-block; } .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; } .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, .krv-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content { color: var(--accent); } .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none !important; } .krv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child { margin-bottom: 0.5rem; } /* === Event Ladder === */ .krv-events { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; } .krv-events .wp-block-group { gap: 0; } .krv-event, .wp-block-group.krv-event { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto; gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg); align-items: baseline; padding-block: var(--wp--preset--spacing--md); border-top: 1px solid var(--rule); color: var(--ink); margin: 0; } .krv-event:last-child { border-bottom: 1px solid var(--rule); } .krv-event__date, .wp-block-group .krv-event__date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--wp--preset--font-size--sm); letter-spacing: 0.04em; color: var(--ink-soft); margin: 0; line-height: 1.4; } .krv-event__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); min-width: 0; } .krv-event__title, .wp-block-heading.krv-event__title { font-size: var(--wp--preset--font-size--xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--ink); } .krv-event__meta, p.krv-event__meta { font-family: var(--font-sans); font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); margin: 0; line-height: 1.4; } .krv-event__cta, p.krv-event__cta { justify-self: end; white-space: nowrap; margin: 0; font-size: var(--wp--preset--font-size--sm); } .krv-event.is-featured .krv-event__title { color: var(--accent); } @media (max-width: 768px) { .krv-event, .wp-block-group.krv-event { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--xs); } .krv-event__cta, p.krv-event__cta { justify-self: start; margin-top: var(--wp--preset--spacing--sm); } } /* News post list (vertical, image + text) */ .krv-news { padding-block: var(--wp--preset--spacing--xl); margin-top: var(--wp--preset--spacing--xl); border-top: 1px solid var(--rule); } .krv-post, .wp-block-group.krv-post { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl); padding-block: var(--wp--preset--spacing--xl); border-top: 1px solid var(--rule); margin: 0; align-items: start; } .krv-post:first-of-type { border-top: 0; } .krv-post__media, .krv-post .wp-block-image { margin: 0; grid-column: 1; } .krv-post__media img, .krv-post .wp-block-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .krv-post__body-col { grid-column: 2; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--sm); } .krv-post__title, .wp-block-heading.krv-post__title { font-size: var(--wp--preset--font-size--2-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .krv-post__body, p.krv-post__body { font-size: var(--wp--preset--font-size--base); line-height: 1.55; margin: 0; color: var(--ink-soft); } @media (max-width: 768px) { .krv-post, .wp-block-group.krv-post { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--sm); } .krv-post__media, .krv-post__body-col { grid-column: 1; } } /* === Footer === */ .krv-footer .eyebrow { margin-bottom: var(--wp--preset--spacing--sm); } .krv-footer p { font-size: var(--wp--preset--font-size--sm); line-height: 1.55; margin: 0 0 var(--wp--preset--spacing--xs); } .krv-footer ul, .krv-footer .wp-block-list { padding: 0; margin: 0; list-style: none; } .krv-footer li { font-size: var(--wp--preset--font-size--sm); line-height: 1.6; margin: 0; list-style: none; } .krv-footer li::marker { content: none; } .krv-footer li a { font-size: var(--wp--preset--font-size--sm); font-weight: 400; } .krv-footer .wp-block-columns { gap: var(--wp--preset--spacing--lg) !important; } .krv-footer .wp-block-column { gap: 0; } /* Footer bottom row — copyright + credit, normal font, no caps */ .krv-footer__bottom { padding-top: var(--wp--preset--spacing--md); } .krv-footer__credit { color: inherit !important; text-decoration: none !important; border-bottom: 0 !important; } .krv-footer__credit:hover { color: var(--accent) !important; } .krv-footer__bottom p { margin: 0; font-family: var(--font-sans); font-size: var(--wp--preset--font-size--sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); line-height: 1.4; } /* Full-viewport sections; inner wrapper at Swiss canon width. .krv-section / .krv-hero live INSIDE .wp-block-post-content which already carries .has-global-padding — don't double-pad. Header/footer sit outside post-content and need their own padding-inline. */ .krv-section, .krv-hero { width: 100%; margin-inline: 0; max-width: none; } .krv-header, .krv-footer { width: 100%; margin-inline: 0; max-width: none; padding-inline: clamp(1rem, 5vw, 2.5rem); } .krv-footer { background: var(--paper-2); position: relative; z-index: 10; } .krv-inner { max-width: 1120px; margin-inline: auto; padding-inline: 0; } .krv-header .krv-inner { gap: 0.5rem; } /* Direct-child fallback so existing patterns without .krv-inner still constrain. Padding lives on the outer .krv-section — don't double-pad here. */ .krv-section > :where(*:not(.alignfull):not(.krv-inner)) { max-width: 1120px; margin-inline: auto; padding-inline: 0; box-sizing: border-box; } /* === Hero (image-led) === */ .krv-hero { padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl); } .krv-hero__inner { max-width: 1120px; margin-inline: auto; padding-inline: 0; display: grid; grid-template-columns: 5fr 7fr; gap: var(--wp--preset--spacing--xl); align-items: center; } .krv-hero__col { display: flex; flex-direction: column; justify-content: center; } .krv-hero__title { font-size: clamp(2.5rem, 2rem + 2.4vw, 4rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } .krv-hero__sub { margin-top: var(--wp--preset--spacing--md); font-size: var(--wp--preset--font-size--lg); color: var(--ink-soft); } .krv-hero__cta { margin-top: var(--wp--preset--spacing--lg); } .krv-hero__img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; filter: saturate(0.9) contrast(1.02); } @media (max-width: 1024px) { .krv-hero__inner { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--lg); } .krv-hero__img { min-height: 360px; max-height: 480px; } } /* Section counters removed per client review 2026-05-18 — were reading as random page numbers */ /* === Entry reveals === */ @supports (animation-timeline: view()) { [data-reveal] { animation: krv-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; } } @keyframes krv-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @supports not (animation-timeline: view()) { [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-soft), transform 600ms var(--ease-spring); } [data-reveal].is-visible { opacity: 1; transform: none; } } /* === Photo galleries (lightbox) === */ .krv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--wp--preset--spacing--sm); margin: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--xl); } .krv-gallery__item { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; } .krv-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease-spring), opacity 200ms; } .krv-gallery__item:hover img { transform: scale(1.04); opacity: 0.92; } .krv-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.94); display: none; align-items: center; justify-content: center; padding: 2rem; } .krv-lightbox.is-open { display: flex; } .krv-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; filter: none; } .krv-lightbox__btn { position: absolute; background: transparent; border: 0; color: #fff; font-size: 2rem; padding: 0.5rem 1rem; cursor: pointer; line-height: 1; } .krv-lightbox__close { top: 1rem; right: 1.5rem; font-size: 2.5rem; } .krv-lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); } .krv-lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); } .krv-lightbox__btn:hover { color: var(--accent); } .krv-lightbox__counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: #fff; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--wp--preset--font-size--sm); letter-spacing: 0.18em; } /* Dark mode: links must inherit data-theme-aware ink, not frozen WP preset. */ :root[data-theme="dark"] a:not(.wp-element-button) { color: var(--ink); } :root[data-theme="dark"] a:not(.wp-element-button):hover { color: var(--accent); } /* === Team grid (Vorstand) === */ .krv-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg); margin: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--xl); } .krv-team__card { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); margin: 0; } .krv-team__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); margin-bottom: var(--wp--preset--spacing--sm); } .krv-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .krv-team__photo--empty { background: color-mix(in oklab, var(--rule) 60%, var(--paper)); } .krv-team__role { font-family: var(--font-sans); font-size: var(--wp--preset--font-size--xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); margin: 0; } .krv-team__name { font-size: var(--wp--preset--font-size--base); font-weight: 500; margin: 0; } .krv-team__contact { font-size: var(--wp--preset--font-size--sm); margin: 0; } .krv-team__contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); } .krv-team__contact a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Left-align constrained children inside any WP layout-constrained parent. Overrides WP's `margin-left: auto !important` on these classes only. */ .is-layout-constrained > .krv-prices, .is-layout-constrained > .krv-form, .wp-block-post-content > .krv-prices, .wp-block-post-content > .krv-form { margin-left: 0 !important; margin-right: auto !important; } /* === Mitgliederbeiträge price list === */ .krv-prices { margin-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg); padding: 0; max-width: 480px; } .krv-prices__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 0.625rem 0; border-top: 1px solid var(--rule); } .krv-prices__row:last-child { border-bottom: 1px solid var(--rule); } .krv-prices dt { margin: 0; font-size: var(--wp--preset--font-size--base); color: var(--ink); } .krv-prices dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--wp--preset--font-size--base); color: var(--ink); } /* === Beitrittsgesuch form (Swiss design) === */ .krv-form { margin-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--md); max-width: 720px; } .krv-form__row { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); } .krv-form__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--md); } .krv-form label { display: flex; flex-direction: column; gap: 0.375rem; font-size: var(--wp--preset--font-size--xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); } .krv-form input, .krv-form select, .krv-form textarea { width: 100%; font-family: var(--font-sans); font-size: var(--wp--preset--font-size--base); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; padding: 0.75rem 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; transition: border-color 200ms var(--ease-spring); appearance: none; } .krv-form textarea { resize: vertical; min-height: 5rem; } .krv-form select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; } .krv-form input:focus, .krv-form select:focus, .krv-form textarea:focus { outline: none; border-bottom-color: var(--ink); } .krv-form input:focus + .krv-form__hint, .krv-form input:invalid:not(:placeholder-shown) { border-bottom-color: var(--accent); } .krv-form__submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; border-radius: 9999px; background: var(--accent); color: #fff; font-family: var(--font-sans); font-size: var(--wp--preset--font-size--sm); font-weight: 500; letter-spacing: 0; border: 0; cursor: pointer; transition: background 300ms var(--ease-spring), filter 300ms var(--ease-spring); margin-top: var(--wp--preset--spacing--sm); } .krv-form__submit:hover { background: var(--accent); filter: brightness(1.08); } .krv-form__submit::after { content: "→"; transition: transform 300ms var(--ease-spring); } .krv-form__submit:hover::after { transform: translateX(4px); } .krv-form__notice { padding: var(--wp--preset--spacing--md); border: 1px solid var(--rule); background: color-mix(in oklab, var(--accent) 6%, var(--paper)); margin-bottom: var(--wp--preset--spacing--lg); } @media (max-width: 600px) { .krv-form__row--split { grid-template-columns: 1fr; } } /* Figure helper */ .krv-figure { margin: 0 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--md); } .krv-source { font-size: var(--wp--preset--font-size--sm); color: var(--ink-soft); font-style: italic; } /* Google Calendar embed — full width, tall */ .krv-calendar { width: 100%; margin: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--xl); } .krv-calendar iframe { width: 100%; min-height: 720px; border: 1px solid var(--rule); background: #fff; display: block; }