/* ==========================================================================
IDRIS UMZUG — CENTRAL DESIGN SYSTEM
--------------------------------------------------------------------------
This is the SINGLE source of truth for the entire theme's design.
Change a value here and it updates everywhere on the website.
Contents:
1. Design Tokens (CSS Custom Properties)
1.1 Color Palette
1.2 Typography (family, sizes, weights, line-heights)
1.3 Spacing System
1.4 Container Widths
1.5 Section Padding (responsive)
1.6 Border Radius
1.7 Shadows, Borders, Transitions, Z-index
2. Responsive Token Overrides (breakpoints)
3. Base / Reset
4. Typography Base
5. Layout Helpers (container, section, grid)
6. Reusable Components (buttons, etc.)
========================================================================== */
/* rubik-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-regular.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-regular.svg#Rubik') format('svg'); /* Legacy iOS */
}
/* rubik-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Rubik';
font-style: italic;
font-weight: 400;
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-italic.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-italic.svg#Rubik') format('svg'); /* Legacy iOS */
}
/* rubik-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Rubik';
font-style: normal;
font-weight: 500;
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500.svg#Rubik') format('svg'); /* Legacy iOS */
}
/* rubik-500italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Rubik';
font-style: italic;
font-weight: 500;
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500italic.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-500italic.svg#Rubik') format('svg'); /* Legacy iOS */
}
/* rubik-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Rubik';
font-style: normal;
font-weight: 600;
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600.svg#Rubik') format('svg'); /* Legacy iOS */
}
/* rubik-600italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Rubik';
font-style: italic;
font-weight: 600;
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600italic.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/rubik/rubik-v31-latin-600italic.svg#Rubik') format('svg'); /* Legacy iOS */
}
/* inter-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-300italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: italic;
font-weight: 300;
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300italic.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-300italic.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: italic;
font-weight: 400;
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-italic.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-italic.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-500italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: italic;
font-weight: 500;
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500italic.eot'); /* IE9 Compat Modes */
src: url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('/wp-content/themes/idris-umzug/fonts/inter/inter-v20-latin-500italic.svg#Inter') format('svg'); /* Legacy iOS */
}
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* ---------------------------------------------------------------
1.1 COLOR PALETTE
--------------------------------------------------------------- */
--color-primary: #021C33; /* brand navy-blue */
--color-primary-dark: #021C33;
--color-primary-light: #0a3a5c;
--color-secondary: #E6AF39; /* gold accent / call-to-action */
--color-secondary-dark: #c8942a;
--color-secondary-light:#f0c468;
--color-dark: #021C33; /* deep navy — dark sections / headings */
--color-body: #4a5560; /* default body text */
--color-muted: #7c8893; /* secondary text */
--color-white: #ffffff;
--color-light: #f5f7fa; /* light section background */
--color-light-2: #eef1f5;
--color-cream: #fbf3df; /* warm footer background */
--color-border: #e2e7ed;
--color-success: #2e9e5b;
--color-warning: #e0a800;
--color-danger: #d64545;
/* Semantic aliases (use these in components) */
--color-text: var(--color-body);
--color-heading: var(--color-dark);
--color-bg: var(--color-white);
--color-bg-alt: var(--color-light);
--color-link: var(--color-primary);
--color-link-hover: var(--color-primary-dark);
/* ---------------------------------------------------------------
1.2 TYPOGRAPHY
--------------------------------------------------------------- */
/* Font families */
--font-primary: "Inter";
--font-heading: "Rubik";
--font-mono: "Inter";
/* Font sizes (fluid where helpful via clamp) */
--fs-base: 16px; /* root size */
--fs-xs: 0.75rem; /* 12px */
--fs-sm: 0.875rem; /* 14px */
--fs-md: 1rem; /* 16px */
--fs-lg: 1.125rem; /* 18px */
--fs-xl: 1.25rem; /* 20px */
--fs-h1: clamp(2rem, 1.4rem + 2.4vw, 2.875rem); /* ~32 -> 46 (H1 spec) */
--fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); /* ~26 -> 40 */
--fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.875rem); /* ~22 -> 30 */
--fs-h4: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); /* ~18 -> 24 */
--fs-h5: 1.25rem;
--fs-h6: 1.05rem;
/* Font weights */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* Line heights */
--lh-tight: 1.15;
--lh-heading: 1.25;
--lh-base: 1.7;
--lh-loose: 1.9;
/* Letter spacing */
--ls-tight: -0.02em;
--ls-normal: 0;
--ls-wide: 0.05em;
/* ---------------------------------------------------------------
1.3 SPACING SYSTEM (8px scale)
--------------------------------------------------------------- */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 2.5rem; /* 40px */
--space-8: 3rem; /* 48px */
--space-9: 4rem; /* 64px */
--space-10: 5rem; /* 80px */
--space-11: 6rem; /* 96px */
/* Gutter used inside the container (horizontal page padding) */
--container-gutter: 1.25rem; /* 20px each side */
/* ---------------------------------------------------------------
1.4 CONTAINER WIDTHS
(overridden per breakpoint in section 2)
--------------------------------------------------------------- */
--container-width: 1350px; /* Desktop default */
/* ---------------------------------------------------------------
1.5 SECTION PADDING (top & bottom)
(overridden per breakpoint in section 2)
--------------------------------------------------------------- */
--section-padding-y: 80px; /* Desktop default */
/* ---------------------------------------------------------------
1.6 BORDER RADIUS
--------------------------------------------------------------- */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 999px;
--radius-circle: 50%;
/* ---------------------------------------------------------------
1.7 SHADOWS / BORDERS / TRANSITIONS / Z-INDEX
--------------------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(22, 32, 43, 0.06);
--shadow-md: 0 6px 18px rgba(22, 32, 43, 0.08);
--shadow-lg: 0 16px 40px rgba(22, 32, 43, 0.12);
--border-width: 1px;
--border: var(--border-width) solid var(--color-border);
--transition-fast: 0.15s ease;
--transition-base: 0.25s ease;
--transition-slow: 0.4s ease;
--z-base: 1;
--z-dropdown: 1000;
--z-sticky: 1020;
--z-header: 1030;
--z-overlay: 1040;
--z-modal: 1050;
}
/* ==========================================================================
2. RESPONSIVE TOKEN OVERRIDES
--------------------------------------------------------------------------
Breakpoints map to the project's device tiers:
Desktop > 1500px container 1350 / padding 80
Large Laptop 1366px–1500px container 1350 / padding 80
Small Laptop 1024px–1365px container 1250 / padding 60
Tablet 768px–1023px container responsive / padding 48
Mobile < 768px container responsive / padding 35
========================================================================== */
/* Large Laptop (<= 1500px): same container & padding as desktop */
@media (max-width: 1500px) {
:root {
--container-width: 1350px;
--section-padding-y: 80px;
}
}
/* Small Laptop (<= 1365px) */
@media (max-width: 1365px) {
:root {
--container-width: 1250px;
--section-padding-y: 60px;
}
}
/* Tablet (<= 1023px): container becomes fluid */
@media (max-width: 1023px) {
:root {
--container-width: 100%;
--section-padding-y: 48px;
--container-gutter: 1.5rem; /* 24px */
}
}
/* Mobile (<= 767px): container fluid, tighter padding */
@media (max-width: 767px) {
:root {
--container-width: 100%;
--section-padding-y: 35px;
--container-gutter: 1rem; /* 16px */
}
}
/* ==========================================================================
3. BASE / RESET
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
font-size: var(--fs-base);
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 100px !important;
}
body {
margin: 0;
font-family: var(--font-primary);
font-size: var(--fs-md);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-padding-top: 80px !important;
}
img,
picture,
video,
svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
a {
color: var(--color-link);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }
/* ==========================================================================
4. TYPOGRAPHY BASE
========================================================================== */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--space-4);
font-family: var(--font-heading);
font-weight: var(--fw-medium);
line-height: var(--lh-heading);
color: var(--color-heading);
letter-spacing: var(--ls-tight);
}
h1 {
font-size: var(--fs-h1);
font-weight: var(--fw-medium); /* H1 spec: Medium (500) */
/* line-height: 1; */ /* H1 spec: 100% */
letter-spacing: 0; /* H1 spec: 0px */
text-transform: uppercase; /* H1 spec: Uppercase */
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }
p { margin: 0 0 var(--space-4); }
small { font-size: var(--fs-sm); }
.text-muted { color: var(--color-muted); }
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
/* ==========================================================================
5. LAYOUT HELPERS
========================================================================== */
/* Container — centered, capped at the responsive container width */
.container {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--container-gutter);
}
/* A full-width section with responsive top/bottom padding */
.section {
padding-top: var(--section-padding-y);
padding-bottom: var(--section-padding-y);
}
/* Background variants */
.section--alt { background-color: var(--color-bg-alt); }
.section--dark { background-color: var(--color-dark); color: var(--color-white); }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--color-white); }
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current_page_item > a,
.site-nav__menu .current-menu-ancestor > a,
.site-nav__menu .current-menu-parent > a,
.site-nav__menu .menu-item.is-active > a,
.mega-toggle.is-active,
.mega__links a.is-active {
color: #CC8D07;
}
/* Simple auto-fit grid */
.grid {
display: grid;
gap: var(--space-6);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
/* ==========================================================================
6. REUSABLE COMPONENTS
========================================================================== */
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
/* height: 55px; */
padding-top: 17px !important;
padding-bottom: 17px !important;
padding: 0 var(--space-6);
font-family: var(--font-primary);
font-size: var(--fs-md);
/* font-weight: var(--fw-semibold); */
line-height: 1;
text-align: center;
border: var(--border-width) solid transparent;
border-radius: 10px;
cursor: pointer;
transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
background-color: var(--color-primary);
color: var(--color-white);
}
.btn--primary:hover {
background-color: var(--color-primary-dark);
color: var(--color-white);
}
/* Yellow / gold buttons — white text, 10px radius */
.btn--secondary {
background-color: var(--color-secondary);
color: var(--color-white);
border-radius: 10px;
}
.btn--secondary:hover {
background-color: var(--color-secondary-dark);
color: var(--color-white);
}
.btn--outline {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--outline:hover {
background-color: var(--color-primary);
color: var(--color-white);
}
/* Outline buttons on dark backgrounds (hero / dark sections) */
.hero .btn--outline,
.section--dark .btn--outline {
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.4);
}
.hero .btn--outline:hover,
.section--dark .btn--outline:hover {
background-color: var(--color-white);
color: var(--color-dark);
border-color: var(--color-white);
}
/* Card */
.card {
background-color: var(--color-white);
border: var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
/* Section heading block */
.section-heading {
max-width: 720px;
margin: 0 auto var(--space-8);
text-align: center;
}
.section-heading .eyebrow,
.eyebrow {
display: inline-block;
margin-bottom: var(--space-2);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-secondary-dark);
}
/* Narrow container variant — for article/page reading width */
.container--narrow { max-width: 800px; }
/* ==========================================================================
7. SITE STRUCTURE (header / hero / footer)
========================================================================== */
/* --- Header --- */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background-color: var(--color-white);
border-bottom: var(--border);
box-shadow: var(--shadow-sm);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
min-height: 72px;
}
.site-title {
font-family: var(--font-heading);
font-size: var(--fs-xl);
font-weight: var(--fw-extrabold);
color: var(--color-heading);
}
.site-nav__menu {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__menu a {
font-weight: var(--fw-medium);
color: var(--color-heading);
}
.site-nav__menu a:hover { color: var(--color-primary); }
@media (max-width: 1023px) {
.site-nav { display: none; }
}
@media (max-width: 767px) {
.site-nav { display: none; }
}
/* --- Hero --- */
.hero { background-color: var(--color-dark); color: var(--color-white); }
.hero h1 { color: var(--color-white); }
.hero__inner { max-width: 760px; }
.hero__lead {
font-size: var(--fs-lg);
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--space-6);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
/* --- Cards on front page --- */
.card__title { margin-bottom: var(--space-3); }
.card__media img { border-radius: var(--radius-md); margin-bottom: var(--space-4); }
/* --- Footer --- */
.site-footer__widgets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-6);
margin-bottom: var(--space-8);
}
.site-footer .widget-title { color: var(--color-white); }
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-top: var(--space-6);
border-top: var(--border-width) solid rgba(255, 255, 255, 0.12);
}
.site-footer__copy { margin: 0; color: rgba(255, 255, 255, 0.75); }
.site-footer__menu {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__menu a { color: rgba(255, 255, 255, 0.75); }
.site-footer__menu a:hover { color: var(--color-white); }
/* ============================================================
All Blog Posts — template-all-blog.css
============================================================ */
.bl-list {
padding: 64px 0 80px;
}
.bl-list__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media (max-width: 900px) {
.bl-list__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.bl-list__grid { grid-template-columns: 1fr; }
.bl-list { padding: 40px 0 56px; }
}
/* ---------- Card ---------- */
.bl-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e7ecf3;
border-radius: 16px;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bl-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(2, 28, 51, .12);
border-color: transparent;
}
.bl-card__media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #e7ecf3;
}
.bl-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.bl-card:hover .bl-card__img {
transform: scale(1.05);
}
.bl-card__body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 22px 24px;
flex: 1;
}
.bl-card__meta {
font-size: 13px;
font-weight: 600;
color: var(--color-primary, #0e7490);
letter-spacing: .01em;
}
.bl-card__title {
margin: 0;
font-size: 19px;
line-height: 1.35;
font-weight: 700;
}
.bl-card__title a {
color: var(--color-heading, #021C33);
text-decoration: none;
transition: color .2s ease;
}
.bl-card__title a:hover {
color: var(--color-primary, #0e7490);
}
.bl-card__desc {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--color-text, #4a5b6b);
flex: 1;
}
.bl-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-size: 15px;
font-weight: 600;
color: var(--color-primary, #0e7490);
text-decoration: none;
}
.bl-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-primary, #0e7490);
color: #fff;
transition: transform .2s ease;
}
.bl-card__link:hover .bl-card__icon {
transform: translate(2px, -2px);
}
/* ---------- Empty state ---------- */
.bl-list__empty {
text-align: center;
font-size: 17px;
color: var(--color-text, #4a5b6b);
padding: 40px 0;
}
/* ---------- Pagination ---------- */
.bl-list__pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 48px;
}
.bl-list__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
border: 1px solid #e7ecf3;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
color: var(--color-heading, #021C33);
text-decoration: none;
transition: all .2s ease;
}
.bl-list__pagination .page-numbers:hover {
border-color: var(--color-primary, #0e7490);
color: var(--color-primary, #0e7490);
}
.bl-list__pagination .page-numbers.current {
background: var(--color-primary, #0e7490);
border-color: var(--color-primary, #0e7490);
color: #fff;
}
.bl-list__pagination .page-numbers.dots {
border-color: transparent;
}
/* ============================================================
Single Blog Post — single-post.css
============================================================ */
:root {
--idris-gold: #e9a83c;
--idris-gold-dark: #d4942a;
--idris-navy: #021c33;
--idris-text: #4a5b6b;
--idris-line: #e7ecf3;
}
/* ---------------- HERO (matches "Über uns" banner) ---------------- */
.bp-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 460px;
padding: 90px 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
.bp-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(2, 28, 51, .72) 0%, rgba(2, 28, 51, .82) 100%);
}
.bp-hero__inner {
position: relative;
z-index: 1;
max-width: 900px;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
/* Breadcrumb pill */
.bp-hero__crumbs {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
backdrop-filter: blur(6px);
font-size: 14px;
font-weight: 600;
max-width: 100%;
}
.bp-hero__crumbs a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #fff;
text-decoration: none;
opacity: .9;
}
.bp-hero__crumbs a:hover { opacity: 1; }
.bp-hero__sep { color: rgba(255, 255, 255, .55); }
.bp-hero__current {
display: inline-block;
max-width: 240px;
padding: 4px 12px;
background: var(--idris-gold);
color: var(--idris-navy);
border-radius: 999px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bp-hero__title {
margin: 0;
color: #fff;
font-weight: 800;
text-transform: uppercase;
line-height: 1.15;
font-size: clamp(28px, 4vw, 46px);
}
.bp-hero__meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, .82);
font-size: 15px;
font-weight: 500;
}
.bp-hero__dot { color: var(--idris-gold); }
/* ---------------- BODY GRID ---------------- */
.bp-body { padding: 64px 0 80px; }
.bp-body__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 48px;
align-items: start;
}
@media (max-width: 980px) {
.bp-body__grid { grid-template-columns: 1fr; gap: 40px; }
.bp-body { padding: 44px 0 60px; }
}
/* ---------------- CONTENT ---------------- */
.bp-content__feature {
margin: 0 0 32px;
border-radius: 16px;
overflow: hidden;
}
.bp-content__feature-img {
display: block;
width: 100%;
height: auto;
}
.bp-content__prose {
color: var(--idris-text);
font-size: 16.5px;
line-height: 1.75;
}
.bp-content__prose > *:first-child { margin-top: 0; }
.bp-content__prose h2 {
margin: 40px 0 16px;
color: var(--idris-navy);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 800;
line-height: 1.3;
}
.bp-content__prose h3 {
margin: 30px 0 12px;
color: var(--idris-navy);
font-size: 20px;
font-weight: 700;
}
.bp-content__prose p { margin: 0 0 18px; }
.bp-content__prose a {
color: var(--idris-gold-dark);
text-decoration: underline;
text-underline-offset: 2px;
}
.bp-content__prose ul,
.bp-content__prose ol {
margin: 0 0 22px;
padding-left: 0;
list-style: none;
}
.bp-content__prose ul li,
.bp-content__prose ol li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
}
.bp-content__prose ul li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--idris-gold);
}
.bp-content__prose ol { counter-reset: bp-ol; }
.bp-content__prose ol li { counter-increment: bp-ol; }
.bp-content__prose ol li::before {
content: counter(bp-ol);
position: absolute;
left: 0;
top: 2px;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--idris-navy);
color: #fff;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
}
.bp-content__prose blockquote {
margin: 24px 0;
padding: 16px 22px;
border-left: 4px solid var(--idris-gold);
background: #f7f9fc;
border-radius: 0 12px 12px 0;
font-style: italic;
}
.bp-content__prose img { max-width: 100%; height: auto; border-radius: 12px; }
/* ---------------- SIDEBAR ---------------- */
.bp-sidebar {
display: flex;
flex-direction: column;
gap: 28px;
position: sticky;
top: 24px;
}
@media (max-width: 980px) {
.bp-sidebar { position: static; }
}
.bp-widget {
background: #fff;
border: 1px solid var(--idris-line);
border-radius: 16px;
padding: 24px;
}
.bp-widget__title {
margin: 0 0 18px;
font-size: 18px;
font-weight: 800;
color: var(--idris-navy);
padding-bottom: 14px;
border-bottom: 2px solid var(--idris-line);
}
.bp-recent {
display: flex;
gap: 14px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--idris-line);
text-decoration: none;
}
.bp-recent:last-of-type { border-bottom: 0; }
.bp-recent__thumb {
flex: 0 0 64px;
width: 64px;
height: 64px;
border-radius: 10px;
overflow: hidden;
background: var(--idris-line);
}
.bp-recent__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-recent__text { display: flex; flex-direction: column; gap: 4px; }
.bp-recent__date { font-size: 12px; font-weight: 600; color: var(--idris-gold-dark); }
.bp-recent__ttl {
font-size: 14.5px;
font-weight: 600;
line-height: 1.4;
color: var(--idris-navy);
transition: color .2s ease;
}
.bp-recent:hover .bp-recent__ttl { color: var(--idris-gold-dark); }
.bp-widget__all {
display: inline-block;
margin-top: 16px;
font-size: 14px;
font-weight: 700;
color: var(--idris-gold-dark);
text-decoration: none;
}
.bp-widget__all:hover { text-decoration: underline; }
.bp-widget__empty { color: var(--idris-text); font-size: 14px; }
/* ---------------- CTA CARD ---------------- */
.bp-cta {
background: var(--idris-navy);
border-radius: 16px;
padding: 28px 24px;
text-align: center;
color: #fff;
}
.bp-cta__title { margin: 0 0 10px; font-size: 19px; font-weight: 800; line-height: 1.35; }
.bp-cta__text { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.bp-cta__btn {
display: block;
width: 100%;
padding: 13px 20px;
background: var(--idris-gold);
color: var(--idris-navy);
font-weight: 800;
font-size: 15px;
border-radius: 10px;
text-decoration: none;
transition: background .2s ease;
}
.bp-cta__btn:hover { background: #fff; }
.bp-cta__phone {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
color: #fff;
font-weight: 700;
font-size: 16px;
text-decoration: none;
}
.bp-cta__phone svg { color: var(--idris-gold); }
.bp-cta__phone:hover { color: var(--idris-gold); }
/* ==========================================================================
CATEGORIES — linked category on blog cards, category chips on the single
post, and the "Kategorien" sidebar list. Colours use the shared tokens.
========================================================================== */
/* Linked category inside a blog card's meta line */
.bl-card__cat {
color: var(--color-primary, #0e7490);
text-decoration: none;
transition: color .2s ease;
}
.bl-card__cat:hover { color: var(--color-heading, #021C33); text-decoration: underline; }
.bl-card__meta-sep { color: var(--color-text, #4a5b6b); font-weight: 600; }
/* Category chips at the top of a single blog post */
.bp-content__cats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px;
}
.bp-cat-chip {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
background: rgba(230, 175, 57, .14);
color: var(--idris-gold-dark, #a97b16);
font-size: 13px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.bp-cat-chip:hover { background: var(--idris-gold, #e6af39); color: var(--idris-navy, #021C33); }
/* "Kategorien" list in the sidebar widget.
wp_list_categories( show_count ) prints "Name (n)" — the count is a bare
text node after the link, so the row uses flex on the to push it right. */
.bp-cats { list-style: none; margin: 0; padding: 0; }
.bp-cats li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0;
border-bottom: 1px solid var(--idris-line);
font-size: 13px;
font-weight: 600;
color: var(--idris-text);
}
.bp-cats li:last-child { border-bottom: 0; }
.bp-cats li a {
flex: 1;
display: inline-flex;
align-items: center;
padding: 11px 0;
color: var(--idris-navy);
font-size: 14.5px;
font-weight: 600;
text-decoration: none;
transition: color .2s ease, padding-left .2s ease;
}
.bp-cats li a::before {
content: "\203A"; /* › marker */
color: var(--idris-gold-dark);
font-weight: 800;
margin-right: 8px;
}
.bp-cats li a:hover { color: var(--idris-gold-dark); padding-left: 4px; }
.bp-cats li.current-cat > a { color: var(--idris-gold-dark); }