/* =========================================================================== theme.css - Corporate Design incendia --------------------------------------------------------------------------- Die Werte stammen 1:1 aus dem Stylesheet von incendia.ch (Tailwind-Theme): --white #fff --brand #feb813 --brand-light #fdc43e --primary-600 #405266 --primary-700 #2b3744 Karten, Fusszeile --primary-900 #202c3a Seitenhintergrund --radius .5rem Schrift Eudoxus Sans 400 / 500 / 700 / 800 site.css enthält nur Struktur und greift ausschliesslich auf die Variablen hier zu. Ändert die Hauptseite ihr Erscheinungsbild, genügt eine Anpassung in dieser Datei. ========================================================================= */ /* --------------------------------------------------------------- Schriften Die vier Dateien liegen unter public/assets/fonts/. Fehlen sie, greift die Fallback-Kette und die Seite bleibt lesbar. Siehe fonts/README.md. */ @font-face { font-family: EudoxusSans; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/EudoxusSans-Regular.woff2) format("woff2"); } @font-face { font-family: EudoxusSans; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/EudoxusSans-Medium.woff2) format("woff2"); } @font-face { font-family: EudoxusSans; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/EudoxusSans-Bold.woff2) format("woff2"); } @font-face { font-family: EudoxusSans; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/EudoxusSans-ExtraBold.woff2) format("woff2"); } :root { /* ------------------------------------------------- Grundfarben (Hausfarben) */ --white: #ffffff; --brand: #feb813; --brand-light: #fdc43e; --primary-600: #405266; --primary-700: #2b3744; --primary-900: #202c3a; /* ------------------------------------------------------------- Rollen */ --color-bg: var(--primary-900); --color-surface: var(--primary-700); /* Karten, Fusszeile */ --color-surface-2: var(--primary-600); /* Hover auf Flächen */ --color-text: var(--white); --color-text-muted: #aab4c0; /* abgeleitet, für Nebentexte */ --color-border: var(--primary-600); --color-accent: var(--brand); --color-accent-hover: var(--brand-light); /* Gold ist hell: Text darauf muss dunkel sein. */ --color-on-accent: var(--primary-900); --color-focus: var(--brand-light); /* ---------------------------------------------------------- Schrift */ --font-base: "EudoxusSans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: var(--font-base); --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 800; /* Grössen exakt wie auf der Hauptseite. Dort wachsen die Überschriften in zwei Stufen bei 64rem und 96rem, nicht fliessend. Die Stufen stehen weiter unten in den Media Queries. */ --fs-h1: 1.875rem; /* 3xl */ --fs-h2: 1.5rem; /* 2xl */ --fs-h3: 1.25rem; /* xl */ /* Der Fliesstext wächst ab 64rem auf 1.125rem. Die Hauptseite schaltet dafür body von --text-base auf --text-lg um, siehe unten. */ --fs-body: 1rem; /* base */ --fs-small: 0.875rem; /* sm */ --fs-tiny: 0.8125rem; /* Navigation: text-lg und fett, wie im Kopf der Hauptseite. */ --fs-nav: 1.125rem; --fw-nav: 700; /* Kleine goldene Auszeichnung, entspricht .subtitle der Hauptseite. */ --fs-subtitle: 0.875rem; /* Überschriften tragen auf der Hauptseite Gewicht 500, nicht 700. */ --fw-heading: 500; --lh-tight: 1.3; --lh-base: 1.5; /* text-base */ --ls-heading: 0; --ls-caps: 0.06em; /* ------------------------------------------------------------- Kopfzeile */ --header-bg: var(--primary-900); --header-text: var(--white); --header-link: var(--white); --header-link-active: var(--brand); --breadcrumb-gap: 13px; /* gemessen: Titel sonst 3px zu tief */ /* Desktop-Werte des Seitenkopfs, bei 1920px gegen die Hauptseite gemessen */ --page-head-pad-top-lg: 80px; --breadcrumb-gap-lg: 21px; /* Abstand Titel -> Einleitung. Verschmilzt mit dem 16px-Rand des Titels, ist also der ganze Abstand, kein Zuschlag. */ --title-lead-gap-lg: 39px; /* Die Hauptseite setzt im Kopf weder Linie noch Schatten. */ --header-border: 0; --header-shadow: none; /* Desktop: py-10, ab 96rem py-12. Mobil: der schlanke, klebende Kopf. */ --header-pad: 2.5rem; --header-height-sm: 64px; /* Mobil zieht die Hauptseite die Kopfzeile etwas enger an den Rand als den Inhalt: Logo bei 16px, Inhalt bei 20px. Ab 1024px gilt wieder --container-pad für beide. */ --header-pad-inline: 1rem; /* Mobiles Menü: rechtes Overlay über 5/6 der Fensterbreite, dahinter die unscharfe Seite. Masse aus den Screenshots der Hauptseite. */ --nav-panel-width: 83.3333%; --nav-panel-pad: 2.5rem; --fs-nav-mobile: 1.25rem; --nav-row-gap: 0.75rem; --nav-gap: 2.5rem; /* md:gap-10 */ --logo-height: auto; --logo-width: 120px; --logo-width-lg: 170px; /* ------------------------------------------------------------- Fusszeile */ --footer-bg: var(--primary-700); --footer-text: var(--white); --footer-heading: var(--brand); --footer-link: var(--brand); --footer-border: 1px solid rgb(255 255 255 / 0.12); /* ----------------------------------------------------------------- Layout */ --container-max: 1920px; /* --content-container-max-width */ /* --content-container-side-padding der Hauptseite: 1.25rem, ab 64rem 4.5rem */ --container-pad: 1.25rem; --radius-sm: 0.25rem; --radius: 0.5rem; /* --radius der Hauptseite */ --radius-lg: 0.5rem; --shadow-card: 0 1px 3px rgb(0 0 0 / 0.25); --shadow-lift: 0 14px 34px rgb(0 0 0 / 0.42); /* Abstandsraster, Vielfache von --spacing: .25rem */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: clamp(3rem, 6vw, 5rem); /* -------------------------------------------------------------- Galerie */ --tile-min: clamp(140px, 16vw, 300px); --tile-gap: clamp(0.375rem, 0.8vw, 0.75rem); --tile-ratio: 4 / 3; --card-min: 300px; --card-gap: clamp(1rem, 2vw, 2rem); --card-ratio: 3 / 2; /* ------------------------------------------------------------- Lightbox */ --lightbox-bg: rgb(32 44 58 / 0.98); /* primary-900, fast deckend */ --lightbox-text: var(--white); --lightbox-ui: rgb(255 255 255 / 0.85); --lightbox-ui-hover: var(--brand); /* ----------------------------------------------------------- Übergänge */ --transition: 0.15s cubic-bezier(0, 0, 0.2, 1); /* --ease-out */ } /* --------------------------------------------------------------------------- Grössenstufen der Hauptseite. Dort wachsen h1 und h2 bei 64rem und 96rem, die goldene Auszeichnung bereits bei 40rem. --------------------------------------------------------------------------- */ @media (min-width: 40rem) { :root { --fs-subtitle: 1rem; } } @media (min-width: 64rem) { :root { --fs-h1: 3.5rem; --fs-h2: 1.875rem; /* Der Seitenabstand springt hier von 20px auf 72px. */ --container-pad: 4.5rem; /* Und der gesamte Fliesstext von 16px auf 18px, samt Zeilenhöhe. Auf der Hauptseite: @media(min-width:64rem){body{font-size:var(--text-lg)}} mit --text-lg: 1.125rem und Zeilenhöhe calc(1.75/1.125). */ --fs-body: 1.125rem; --lh-base: 1.5556; } } @media (min-width: 96rem) { :root { --fs-h1: 4rem; --fs-h2: 2.25rem; --header-pad: 3rem; } }