/* ========================================================================== THEME VARIABLES — Jazzclub Wilhelmshaven-Friesland e.V. ========================================================================== */ :root { /* ── Primär: Jazz Nachtblau ────────────────────────────────────────────── */ --color-default: #001238; --color-default-dark: #000c26; --color-default-darker: #000714; --color-default-light: #0a2050; --color-default-lighter: #16346e; --color-default-tint: #0d1c3c; /* leicht aufgehellte Fläche */ --color-default-tint2: #14264a; /* Karten-/Panelfläche */ /* RGB-Kanäle für rgba()-Transparenzwerte */ --color-brand-rgb: 0, 18, 56; /* = #001238 */ --color-brand2-rgb: 244, 149, 27; /* = #f4951b */ --color-highlight-rgb: 201, 112, 10; /* = #c9700a */ --color-white-rgb: 246, 244, 239; /* Offwhite statt reinem Weiß */ --color-black-rgb: 0, 0, 0; /* ── Sekundär: Jazz Orange ─────────────────────────────────────────────── */ --color-default2: #f4951b; --color-default2-dark: #d97f0e; --color-default2-darker: #b3670a; --color-default2-light: #ffb04a; --color-default2-tint: #3a2708; /* Orange-Hauch auf dunklem Grund */ /* ── Akzent: Amber (aus Jazz Orange abgeleitet) ────────────────────────── */ --color-highlight: #c9700a; --color-highlight-dark: #a35a05; --color-highlight-light: #e28c22; --color-highlight-tint: #33200a; /* ── Papier / Offwhite (Text und helle Flächen) ────────────────────────── */ --color-paper: #f6f4ef; --color-paper-dim: #d9d6cf; --color-paper-subtle: #b3b1ab; --color-paper-muted: #8b8a86; /* ── Grautöne (nachtblau-getönt, für Rahmen auf dunklem Grund) ─────────── */ --color-gray-900: #000714; --color-gray-dark: #f6f4ef; /* Haupttext — auf Nachtblau: Offwhite */ --color-gray: #cfd4de; /* Body-Text auf Nachtblau */ --color-gray-500: #9aa4b8; --color-gray-400: #7b87a0; --color-gray-light:#243352; /* Borders, Trennlinien auf Nachtblau */ --color-gray-200: #14264a; --color-gray-100: #0d1c3c; --color-gray-50: #081832; /* ── Seitenhintergrund ─────────────────────────────────────────────────── */ --color-page-background: #001238; /* ── Button-Farben ─────────────────────────────────────────────────────── */ --color-btn-blue: #0a2050; /* Nachtblau, aufgehellt */ --color-btn-blue-dark: #16346e; --color-btn-gold: #f4951b; /* Jazz Orange */ --color-btn-gold-dark: #d97f0e; /* ── Systemfarben (auf dunklem Grund abgestimmt) ───────────────────────── */ --color-success: #4bbd7a; --color-success-light: #0c2a1b; --color-warning: #f4951b; --color-warning-light: #33200a; --color-error: #f2685c; --color-error-light: #35130f; --color-info: #6ba8e0; --color-info-light: #0c223f; } /* -------------------------------------------------------------------------- 2. SEMANTISCHE FARB-ALIASE -------------------------------------------------------------------------- */ :root { /* ── Brand ────────────────────────────────────────────────────────────── */ --color-brand: var(--color-default); --color-brand-dark: var(--color-default-dark); --color-brand-light: var(--color-default-light); --color-brand-tint: var(--color-default-tint); --color-brand2: var(--color-default2); --color-brand2-dark: var(--color-default2-dark); --color-brand2-light: var(--color-default2-light); --color-brand2-tint: var(--color-default2-tint); --color-brand3: var(--color-highlight); /* Alias für Intro-Border */ /* ── Text ─────────────────────────────────────────────────────────────── */ --color-text: var(--color-paper); --color-text-muted: var(--color-paper-subtle); --color-text-subtle: var(--color-paper-muted); --color-text--inverted: var(--color-default); /* dunkel auf hell */ --color-text-on-brand: var(--color-paper); /* Offwhite auf Nachtblau */ --color-text-on-brand2: var(--color-default); /* Nachtblau auf Orange */ /* ── Links ────────────────────────────────────────────────────────────── */ --color-links: var(--color-brand2); --color-links-hover: var(--color-paper); /* ── Buttons ──────────────────────────────────────────────────────────── */ --color-btn: var(--color-brand2); --color-btn-text: var(--color-text-on-brand2); /* ── Status ───────────────────────────────────────────────────────────── */ --color-text-success: var(--color-success); --color-text-warning: var(--color-warning); --color-text-error: var(--color-error); --color-text-info: var(--color-info); /* ── Hintergründe ─────────────────────────────────────────────────────── */ --color-bg-subtle: var(--color-default-tint); --color-bg-muted: var(--color-default-tint2); --color-bg-inverted: var(--color-paper); --color-bg-accent: var(--color-brand2-tint); /* ── Legacy-Kompatibilität ────────────────────────────────────────────── */ --main-color: var(--color-brand); --font-color: var(--color-text-on-brand); --pu-main-color: var(--color-brand2); --pu-font-color: var(--color-text-on-brand2); --shadow-color: var(--color-brand2); } /* -------------------------------------------------------------------------- 3. TYPOGRAFIE -------------------------------------------------------------------------- */ :root { /* Schriftfamilien */ --base-font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif; --headings__font-family: "Bowlby One", "Source Sans 3", Arial, sans-serif; --font--special: "Source Sans 3", Arial, sans-serif; --font--mono: "Courier New", Courier, monospace; /* Schriftgrößen */ --base-font-size--xs: 0.9375rem; --base-font-size: 1.0625rem; --base-font-size--xl: 1.1875rem; /* Zeilenhöhen */ --base-line-height: 1.6; --headings__line-height: 1.15; /* von 1.02 → 1.15: bei mehrzeiligen Überschriften wirkte es sonst gequetscht */ --line-height-tight: 1; --line-height-relaxed: 1.75; /* Laufweite */ --headings__letter-spacing: 0.04em; /* von 0.1em reduziert — wirkte bei den großen Schriftgraden zusätzlich vergrößernd */ /* Schriftgewichte */ --base-font-weight: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --headings__font-weight: 400; /* Bowlby One hat nur einen Schnitt */ /* Überschriften fluid — harmonische Skala, moderater gestuft als zuvor */ --font-size-h1: clamp(2.25rem, 5vw, 3.25rem); --font-size-h2: clamp(1.75rem, 3.4vw, 2.75rem); --font-size-h3: clamp(1.375rem, 2.2vw, 1.875rem); --font-size-h4: clamp(1.1875rem, 1.7vw, 1.375rem); --font-size-h5: clamp(1.0625rem, 1.3vw, 1.1875rem); --font-size-h6: 1.0625rem; /* Weitere Größen */ --font-size-small: 0.9375rem; --font-size-xsmall: 0.8125rem; --font-size-large: 1.1875rem; --font-size-lead: 1.3125rem; --font--special--size: 0.875rem; /* Kapitälchen-Labels, gesperrt */ /* Überschriften-Farben */ --headings__color: var(--color-text-on-brand); --headings__color-inverted: var(--color-text--inverted); /* Links im Fließtext */ --paragraph__link-color: var(--color-links); --paragraph__link-decoration: none; --paragraph__link-decoration--hover: underline; /* Code */ --code__color: var(--color-brand2); --pre__color-background: var(--color-default-tint2); --pre__color: var(--color-text); /* Textauswahl */ --selection-background: var(--color-brand2); --selection-color: var(--color-text-on-brand2); /* Trennlinien */ --hr-border: var(--color-gray-light); /* Schrift-Gradient: Orange-Verlauf */ --fontgradient-direction: right; --fontgradient-color: var(--color-default2-light); --fontgradient-color1: var(--color-default2); --fontgradient-color2: var(--color-default2-light); --fontgradient-color3: var(--color-paper); } /* -------------------------------------------------------------------------- 4. ABSTÄNDE / SPACING -------------------------------------------------------------------------- */ :root { --base-spacing-unit: 1rem; --base-spacing-unit--xs: calc(var(--base-spacing-unit) / 4); --base-spacing-unit--sm: calc(var(--base-spacing-unit) / 2); --base-spacing-unit--lg: calc(var(--base-spacing-unit) * 2); --base-spacing-unit--xl: calc(var(--base-spacing-unit) * 4); --spacing-section: clamp(3rem, 6vw, 6rem); /* leicht reduziert, passt zu den ruhigeren Überschriftgrößen */ --spacing-section--sm: clamp(1.5rem, 4vw, 3rem); --spacing-component: 1.5rem; /* von 1.75rem, für gleichmäßigeren Rhythmus zwischen Blöcken */ --spacing-component--sm: 1rem; --spacing-stack: 1.25rem; /* von 1.125rem, etwas mehr Luft zwischen Überschrift und Fließtext */ --spacing-inline: 0.625rem; --grid__gutter: 1.75rem; --grid__gutter--half: 0.875rem; --container-max-width: 78em; --container-max-width--wide: 92em; } /* -------------------------------------------------------------------------- 5. BORDER / RAHMEN -------------------------------------------------------------------------- */ :root { --base-border-radius: 2em; --base-border-radius--sm: 0; --base-border-radius--md: 0; --base-border-radius--lg: 0; --base-border-radius--pill: 999px; --base-border-width: 3px; --base-border-color: var(--color-brand2); --base-border: var(--base-border-width) solid var(--color-gray-light); /* Fokus-Ring: Orange auf Nachtblau klar sichtbar */ --focus-ring-color: var(--color-brand2); --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color); } /* -------------------------------------------------------------------------- 6. SCHATTEN / SHADOWS Auf dunklem Grund wirken Schatten kaum — daher schwarz gefärbt und flach. -------------------------------------------------------------------------- */ :root { --shadow-xs: 0 1px 3px rgba(var(--color-black-rgb), 0.20); --shadow-sm: 0 2px 6px rgba(var(--color-black-rgb), 0.26); --shadow-md: 0 6px 16px rgba(var(--color-black-rgb), 0.32); --shadow-lg: 0 12px 30px rgba(var(--color-black-rgb), 0.38); --shadow-xl: 0 20px 50px rgba(var(--color-black-rgb), 0.45); --shadow-inner: inset 0 2px 6px rgba(var(--color-black-rgb), 0.30); --shadow-brand: 0 6px 18px rgba(var(--color-black-rgb), 0.40); --shadow-brand2: 0 6px 18px rgba(var(--color-brand2-rgb), 0.30); --shadow-highlight: 0 6px 18px rgba(var(--color-highlight-rgb), 0.30); /* mmenu */ --mm-shadow: 0 0 24px rgba(var(--color-black-rgb), 0.55); } /* -------------------------------------------------------------------------- 7. TRANSITIONEN / ANIMATIONEN -------------------------------------------------------------------------- */ :root { --transition-duration--fast: 150ms; --transition-duration: 220ms; --transition-duration--slow: 400ms; --transition-easing: ease-in-out; --transition-easing--enter: ease-out; --transition-easing--leave: ease-in; --transition-base: var(--transition-duration) var(--transition-easing); --transition-fast: var(--transition-duration--fast) var(--transition-easing); --transition-slow: var(--transition-duration--slow) var(--transition-easing); } /* -------------------------------------------------------------------------- 8. Z-INDEX-SKALA (unverändert) -------------------------------------------------------------------------- */ :root { --z-index-below: -1; --z-index-base: 0; --z-index-raised: 10; --z-index-dropdown: 100; --z-index-sticky: 200; --z-index-overlay: 300; --z-index-modal: 400; --z-index-toast: 500; --z-index-tooltip: 600; } /* -------------------------------------------------------------------------- 9. FORMULAR-ELEMENTE Felder ohne Kasten: nur eine Unterlinie, Fokus in Orange. -------------------------------------------------------------------------- */ :root { --form-input-border-color: var(--color-gray-light); --form-input-border-color-focus: var(--color-brand2); --form-input-border-radius: var(--base-border-radius); --form-input-bg: transparent; --form-input-bg-disabled: var(--color-default-tint); --form-input-color: var(--color-text); --form-input-placeholder-color: var(--color-text-subtle); --form-input-font-size: var(--base-font-size--xl); --form-input-padding-y: 0.625rem; --form-input-padding-x: 0; --form-label-font-size: var(--font-size-xsmall); --form-label-font-weight: var(--font-weight-semibold); --form-label-color: var(--color-text-muted); --input-border-radius: 0; } /* -------------------------------------------------------------------------- 10. SCHALTFLÄCHEN / BUTTONS Primärbutton: Orange auf Nachtblau, Pillenform. -------------------------------------------------------------------------- */ :root { --button-border-radius: var(--base-border-radius--pill); --btn-rounded-radius: var(--base-border-radius--pill); --btn-font-size: var(--base-font-size); --btn-font-weight: var(--font-weight-bold); --btn-padding-y: 0.9rem; --btn-padding-x: 2rem; --btn-transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); /* "Blue"-Variante → Nachtblau aufgehellt */ --button-blue-bgcolor: var(--color-btn-blue); --button-blue-bgcolor-hover: var(--color-btn-blue-dark); --button-blue-color: var(--color-text-on-brand); /* "Orange"-Variante → Jazz Orange (Primäraktion, z.B. Tickets) */ --button-orange-bgcolor: var(--color-btn-gold); --button-orange-bgcolor-hover: var(--color-paper); --button-orange-color: var(--color-text-on-brand2); /* Highlight-Button → Amber */ --button-highlight-bgcolor: var(--color-highlight); --button-highlight-bgcolor-hover: var(--color-highlight-dark); --button-highlight-color: var(--color-text-on-brand); /* Back-to-Top */ --button-to-top-color: var(--color-text-on-brand2); --button-to-top-bgcolor: rgba(var(--color-brand2-rgb), 0.92); --button-to-top-bgcolor-hover: var(--color-brand2); /* Filter-Buttons */ --button-bg: var(--color-brand2); --button-bg-hover: var(--color-paper); --button-spacing: 0.6rem 1.25rem; --button-border-width: var(--base-border-width); --button-font-family: var(--base-font-family); --button-font-weight: var(--font-weight-bold); --button-line-height: var(--base-line-height); /* Toggle-Switch */ --toggle-inactive-bg: var(--color-gray-light); --toggle-inactive-color: var(--color-text-muted); --toggle-active-bg: var(--color-brand2); --toggle-handle-bg: var(--color-paper); /* Overlay-Gradient (Bild → Nachtblau, für Hero und Bildunterschriften) */ --overlay-gradient-start: rgba(var(--color-brand-rgb), 1); --overlay-gradient-end: rgba(var(--color-brand-rgb), 0); } /* -------------------------------------------------------------------------- 11. NAVIGATION / HEADER Header läuft mit dem Seitengrund, Navigation in Offwhite, Hover Orange. -------------------------------------------------------------------------- */ html { /* Header & Topbar */ --header-color-background: var(--color-page-background); --header-color-text: var(--color-text); --logo-bg-color: transparent; --ctabar-bgcolor: var(--color-brand2); --ctabar-color: var(--color-text-on-brand2); /* Top-Navigation */ --topnav-bgcolor: transparent; --topnav-bgcolor-hover: transparent; --topnav-bgcolor-submenu-trigger: var(--color-default-tint); --topnav-color: var(--color-text-on-brand); --topnav-color-hover: var(--color-brand2); --topnav-color-hover-textshadow: none; --topnav-font-size: 0.9375rem; --topnav-font-weight: var(--font-weight-semibold); /* Untermenü */ --topnav-submenu-bgcolor: var(--color-default-tint2); --topnav-submenu-width: 17rem; /* Mobile Menü */ --mobilemenu-nav-color: var(--color-paper); --mobilemenu-nav-bgcolor: var(--color-default-darker); --mobilemenu-nav-color-hover: var(--color-text-on-brand2); --mobilemenu-nav-bgcolor-hover: var(--color-brand2); } /* -------------------------------------------------------------------------- 12. MMENU-VARIABLEN -------------------------------------------------------------------------- */ :root { --mm-color-border: rgba(var(--color-white-rgb), 0.14); --mm-color-button: var(--color-brand2); --mm-color-text: var(--color-text-on-brand); --mm-color-text-dimmed: var(--color-text-muted); --mm-color-background: var(--color-default-darker); --mm-color-background-highlight: rgba(var(--color-brand2-rgb), 0.14); --mm-color-background-emphasis: rgba(var(--color-white-rgb), 0.07); } /* -------------------------------------------------------------------------- 13. FOOTER -------------------------------------------------------------------------- */ html { --footer-pre__bg-color: var(--color-page-background); --footer-pre__color: var(--color-text); --footer-pre__link-color: var(--color-brand2); --footer-sub__bg-color: var(--color-default-dark); --footer-sub__color: var(--color-text-muted); --footer-sub__link-color: var(--color-brand2); --footer-font-size: var(--font-size-small); --footer-heading-font-size: var(--font-size-xsmall); } /* -------------------------------------------------------------------------- 14. KOMPONENTEN-VARIABLEN -------------------------------------------------------------------------- */ html { /* Logo-Slider (Förderer) */ --logo-slider-bg-color: var(--color-page-background); /* Badge "Neu" */ --badge-neu-textstring: "Neu"; --badge-neu-bgcolor: var(--color-brand2); --badge-neu-textcolor: var(--color-text-on-brand2); --badge-neu-fontsize: 1.25em; /* Fancy Headline Trenner */ --fancy-headline-seperator-color: var(--color-brand2); /* Teaser-Box */ --teaserbox-default-bgcolor: var(--color-default-tint); --teaserbox-default-border: var(--base-border); --teaserbox-default-boder-radius: 0; --teaserbox-default-padding: var(--spacing-component); --teaserbox-primary-bgcolor: var(--color-brand2); --teaserbox-primary-color: var(--color-text-on-brand2); --teaserbox-secondary-bgcolor: var(--color-default-tint2); --teaserbox-secondary-color: var(--color-text-on-brand); --teaserbox-blue-bgcolor: var(--color-default-darker); --teaserbox-blue-color: var(--color-text-on-brand); --teaserbox-orange-bgcolor: var(--color-default2); --teaserbox-orange-color: var(--color-text-on-brand2); /* Teaser (ce_rsce_teaser) */ --teaser-default-color: var(--color-text); --teaser-default-bgcolor: var(--color-bg-subtle); --teaser-primary-color: var(--color-text-on-brand2); --teaser-secondary-color: var(--color-text-on-brand); --teaser-primary-bgcolor: var(--color-brand2); --teaser-secondary-bgcolor: var(--color-default-tint2); --teaser-section-radius: var(--base-border-radius); /* Icon-Box */ --icon-box__icon-bg-color: transparent; --icon-box__icon-border-color: var(--color-brand2); --icon-box__icon-color: var(--color-brand2); --icon-box__icon-border-radius: 50%; --icon-box__title-color: var(--color-text-on-brand); /* Quicknav */ --quicknav-bgcolor: var(--color-default-tint2); --quicknav-border: var(--base-border-width) solid var(--color-brand2); /* Header-Slide: Textfläche auf Nachtblau, damit Fotos durchlaufen */ --headerslide__textwrapper-bgcolor: rgba(var(--color-brand-rgb), 0.78); /* Testimonials / Quotes */ --quote__bottom--bgcolor: var(--color-brand2); --quote__bottom--textcolor: var(--color-text-on-brand2); --quote__item--bgcolor: var(--color-bg-subtle); --quote__item--textcolor: var(--color-text); /* Centered Wrapper */ --ks-centered-wrapper-border: var(--color-gray-light); --ks-centered-wrapper-color-inverted: var(--color-text-on-brand); --ks-centered-wrapper-color-highlight: var(--color-brand2); --ks-centered-wrapper-textshadow: none; /* Accordion / Toggler */ --toggler-background: var(--color-default-tint2); /* Ansprechpartner (Vorstand, Bandleitungen) */ --ansprechpartner-anzahl: 3; --ansprechpartner-spacing: var(--base-spacing-unit--lg); --ansprechpartner-minwidth: 300px; --ansprechpartner-image-height: 340px; /* Download (Presse, Beitrittsformular) */ --download-elem__border-color: var(--color-gray-light); /* Cookiebar */ --cookiebar__btn--border: var(--base-border-width) solid var(--color-brand2); --cookiebar__btn--color: var(--color-text); --cookiebar__btn--background: transparent; --cookiebar__btn--background-hover: var(--color-brand2); /* Dritte Markenfarbe */ --color-brand3: var(--color-highlight); }