/* ========================================================================= Theme «uni» — Hochschulseite Ein aufsetzendes Theme: site.css bleibt die Grundlage, diese Datei ändert Tokens und legt darüber. Geladen wird sie automatisch, weil sie public/assets/css/uni.css heisst und der Tenant das Theme «uni» trägt (siehe themes/base/partials/head.blade.php). Die Gestaltungsidee in drei Sätzen: 1. Eine Hochschulseite sortiert, sie verkauft nicht. Also grosse Flächen statt kleiner Kacheln — jede Zielgruppe bekommt eine. 2. Die Flächen sind halbe Ellipsen. Das ist die eine Form, die sich durch die ganze Seite zieht, und sie ersetzt jede zweite Verzierung. 3. Überschriften stehen in Versalien mit einem kurzen Strich darüber. Der Strich ist die Sektionsmarke; er ersetzt Rahmen und Schatten. Die Farben kommen wie überall aus den Einstellungen des Tenants und stehen als --color-primary, --color-secondary und --color-accent im . Diese Datei nennt keinen einzigen Farbwert, der nicht daraus abgeleitet ist — sonst liesse sich das Theme kein zweites Mal verwenden. Achtung bei Abständen: die Skala in site.css kennt 1, 2, 3, 4, 6, 8, 12, 16 und 24 — kein --space-5. Eine Regel mit einer nicht vorhandenen Variablen verwirft der Browser stillschweigend. ========================================================================= */ .uni-body { /* Der helle Aufguss der Hauptfarbe trägt die Bühnen und die getönten Bänder. Die erste Zeile ist der Rückfall für Browser ohne color-mix; sie steht bewusst darüber und nicht darunter. */ --uni-tint: #eef2f7; --uni-tint: color-mix(in oklab, var(--color-primary) 10%, #fff); --uni-tint-strong: #dde5ef; --uni-tint-strong: color-mix(in oklab, var(--color-primary) 18%, #fff); --uni-blob: 50%; --header-height: 7.5rem; font-feature-settings: "kern" 1; } /* ---- Kopfbereich ---------------------------------------------------------- Zwei Zeilen: die dunkle Servicezeile und der weisse Balken darunter. Beide bleiben beim Scrollen stehen. Bei einer Seite, auf der man sich durch fünf Bereiche liest, spart das jedes Mal den Weg nach oben. --------------------------------------------------------------------------- */ .uni-header { position: sticky; top: 0; z-index: 90; background: var(--color-bg); box-shadow: 0 1px 0 rgba(16, 24, 40, 0.08); } .uni-service { background: var(--color-primary); color: var(--color-primary-contrast); } .uni-service__inner { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-block: 0.4rem; } .uni-service__link { color: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .uni-service__link:hover, .uni-service__link:focus-visible { text-decoration: underline; } .uni-header__inner { position: relative; display: flex; align-items: center; gap: var(--space-8); padding-block: var(--space-3); } .uni-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-secondary); text-decoration: none; } .uni-brand__logo { display: block; width: auto; height: 3.4rem; } /* Das Signet für den Fall, dass noch kein Logo hochgeladen ist: das Anfangszeichen des Namens auf der Akzentfarbe. Kein Platzhaltergrau — eine Hochschule ohne Zeichen sieht aus wie eine Seite im Bau. */ .uni-brand__mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--color-accent); color: #fff; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1; } .uni-brand__name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; line-height: 1.2; } /* ---- Hauptnavigation ------------------------------------------------------ Die Punkte stehen in Versalien und rechts. Ein Punkt mit Unterpunkten klappt sie als breite Fläche über die ganze Kopfzeile auf — daher das position: static auf dem Listenpunkt: das Flyout aus site.css richtet sich sonst an ihm aus und wird schmal. --------------------------------------------------------------------------- */ .uni-nav { margin-left: auto; } .uni-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0; padding: 0; list-style: none; } .uni-nav__list > .menu__item > a, .uni-nav__list .menu__summary { color: var(--color-secondary); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .uni-nav__list > .menu__item > a:hover, .uni-nav__list .menu__summary:hover, .uni-nav__list .menu__dropdown[open] > .menu__summary, .uni-nav__list > .menu__item > a[aria-current="page"] { color: var(--color-primary); } @media (min-width: 62rem) { .uni-nav__list > .menu__item--has-children { position: static; } .uni-nav__list .menu__dropdown[open] > .menu__children { top: 100%; left: 0; right: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 var(--space-12); min-width: 0; /* Die Flaeche laeuft ueber die ganze Kopfzeile, die Spalten darin beginnen aber dort, wo auch die Navigation beginnt -- sonst steht der erste Unterpunkt am Bildschirmrand. */ padding: var(--space-8) var(--space-6); border: 0; border-radius: 0; box-shadow: 0 18px 32px rgba(16, 24, 40, 0.14); } .uni-nav__list .menu__children a { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); color: var(--color-secondary); font-size: var(--text-base); font-weight: 600; white-space: normal; } .uni-nav__list .menu__children a:hover, .uni-nav__list .menu__children a:focus-visible { color: var(--color-primary); } } /* Die Schaltfläche für schmale Bildschirme. Drei Striche, gezeichnet aus einem Element plus seinen beiden Pseudoelementen. */ .uni-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-left: auto; border: 1px solid var(--color-border); background: transparent; color: var(--color-secondary); cursor: pointer; } .uni-nav-toggle__bars, .uni-nav-toggle__bars::before, .uni-nav-toggle__bars::after { display: block; width: 1.25rem; height: 2px; background: currentColor; } .uni-nav-toggle__bars { position: relative; } .uni-nav-toggle__bars::before, .uni-nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .uni-nav-toggle__bars::before { top: -6px; } .uni-nav-toggle__bars::after { top: 6px; } @media (min-width: 62rem) { .uni-nav-toggle { display: none; } } @media (max-width: 61.99rem) { .uni-nav { display: none; order: 3; width: 100%; margin-left: 0; } .uni-header[data-nav-open="true"] .uni-nav { display: block; } .uni-header__inner { flex-wrap: wrap; } .uni-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--space-4); } .uni-nav__list > .menu__item { border-top: 1px solid var(--color-border); padding-block: var(--space-3); } .uni-nav__list .menu__children { padding-left: var(--space-4); } } /* ---- Aufmacher ------------------------------------------------------------ Die farbige Fläche trägt den Text, das Bild steht daneben. Bewusst keine Bildwand mit Text darüber: wer das Foto später austauscht, entscheidet sonst per Zufall darüber, ob die Überschrift noch lesbar ist. --------------------------------------------------------------------------- */ .uni-hero { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--color-primary); } .uni-hero__panel { display: flex; padding: var(--space-8) var(--space-6); } .uni-hero__inner { width: 100%; max-width: 34rem; margin-inline: auto; color: #fff; } .uni-hero__kicker { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .uni-hero__heading { /* h1 bis h3 tragen in site.css die Sekundaerfarbe. Auf der roten Flaeche waere das ein dunkles Wort auf dunklem Grund — die Farbe kommt hier vom Umschlag und nicht vom Element. */ color: inherit; margin: 0; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; } .uni-hero__text { margin: var(--space-4) 0 0; font-size: var(--text-lg); line-height: 1.6; } .uni-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; } .uni-button { display: inline-block; padding: 0.8rem 1.3rem; background: #fff; color: var(--color-secondary); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; } .uni-button:hover, .uni-button:focus-visible { background: var(--color-accent); color: #fff; } .uni-button--outline { background: transparent; border: 2px solid currentColor; color: inherit; } .uni-hero__media { position: relative; min-height: 16rem; } .uni-hero__media picture { display: block; height: 100%; } .uni-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; } .uni-hero__credit { position: absolute; right: 0; bottom: 0; padding: 0.2rem 0.5rem; background: rgba(255, 255, 255, 0.85); color: var(--color-secondary); font-size: 0.75rem; } @media (min-width: 62rem) { .uni-hero:not(.uni-hero--textonly) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 32rem; } /* Die halbe Ellipse — die Form, die sich durch die ganze Seite zieht. Sie liegt auf dem blauen Grund und lässt ihn oben, unten und links stehen; genau das ergibt den Bogen. */ .uni-hero__panel { margin: var(--space-4) 0 var(--space-4) var(--space-12); padding: var(--space-16) var(--space-12); background: var(--color-accent); border-radius: var(--uni-blob) 0 0 var(--uni-blob); align-items: center; } .uni-hero__inner { margin-inline: 0; } .uni-hero__heading { font-size: var(--text-4xl); } } /* ---- Bänder --------------------------------------------------------------- Jeder Block der Seite ist ein Band über die volle Breite. Kein Rahmen und kein Schatten: bei zehn Bändern untereinander wären zehn Rahmen eine Wand. Getrennt wird über Weissraum und, jedes zweite Mal, über einen hellen Grund. --------------------------------------------------------------------------- */ .uni-band { padding-block: var(--space-16); } .uni-band--tinted { background: var(--uni-tint); } /* Die Bühne bringt ihre eigene Fläche mit und darf den Rand berühren. */ .uni-band--flush { padding-block: 0; } .uni-band--flush > .container { max-width: none; padding-inline: 0; } .uni-band__head { margin-bottom: var(--space-8); } /* Die Sektionsmarke: ein kurzer Strich über der Überschrift. Er ersetzt Rahmen, Schatten und jede weitere Verzierung — und er ist der Grund, warum diese Seite ohne eine einzige Trennlinie auskommt. */ .uni-band__heading, .showcase__heading { color: inherit; position: relative; margin: 0; padding-top: var(--space-6); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; letter-spacing: 0.03em; line-height: 1.2; text-transform: uppercase; text-wrap: balance; } .uni-band__heading::before, .showcase__heading::before { content: ""; position: absolute; top: 0; left: 0; width: 5rem; height: 4px; background: var(--color-primary); } .uni-band__body { font-size: var(--text-lg); line-height: 1.7; /* prose steht am selben Element und bringt eine Lesebreite von 68 Zeichen mit. Fuer einen Textblock ist das richtig, fuer ein Kachelraster nicht — deshalb hier weg und unten nur dort wieder hin, wo tatsaechlich nur Text steht. */ max-width: none; } .uni-band--text .uni-band__body, .uni-band--accordion .uni-band__body { max-width: var(--measure); } .uni-band__body > .prose > :first-child, .uni-band__body > :first-child { margin-top: 0; } /* ---- Bühne ---------------------------------------------------------------- Die Fassung des Themes: die Farbe sitzt nicht auf dem ganzen Block, sondern nur hinter dem Text — und dort als halbe Ellipse. Das Bild füllt die andere Hälfte bis zum Rand des Fensters. --------------------------------------------------------------------------- */ .uni-body .showcase { border-radius: 0; overflow: visible; background: transparent; color: inherit; } .uni-body .showcase__body { padding: var(--space-12) var(--space-6); background: var(--uni-tint); color: var(--color-text); } .uni-body .showcase--primary .showcase__body { background: var(--color-primary); color: var(--color-primary-contrast); } .uni-body .showcase--accent .showcase__body { background: var(--color-accent); color: #fff; } .uni-body .showcase--plain .showcase__body { background: transparent; color: var(--color-text); } /* Auf gefüllter Fläche zeigt der Strich über der Überschrift die Hauptfarbe nicht mehr — dort steht er weiss, sonst verschwindet er im Grund. */ .uni-body .showcase--primary .showcase__heading::before, .uni-body .showcase--accent .showcase__heading::before { background: currentColor; } .uni-body .showcase__text { font-size: var(--text-base); line-height: 1.7; } .uni-body .showcase__action { border: 0; border-radius: 0; background: var(--color-bg); color: var(--color-secondary); letter-spacing: 0.04em; text-transform: uppercase; } .uni-body .showcase__action:hover, .uni-body .showcase__action:focus-visible { background: var(--color-secondary); color: #fff; } .uni-body .showcase__media { min-height: 18rem; } @media (min-width: 62rem) { .uni-body .showcase__body { padding: var(--space-16) var(--space-16); } .uni-body .showcase--image-right .showcase__body { border-radius: 0 0 0 var(--uni-blob); padding-left: var(--space-24); } .uni-body .showcase--image-left .showcase__body { border-radius: 0 var(--uni-blob) 0 0; padding-right: var(--space-24); } .uni-body .showcase--plain .showcase__body { padding-inline: var(--space-16); border-radius: 0; } } /* ---- Kennzahlen, Meldungen, Termine --------------------------------------- Das Markup ist dasselbe wie im Basis-Theme, nur die Anmutung folgt der Seite: Versalien in den Rubriken, kein Rahmen um die Kacheln, der Strich als einziges Trennelement. --------------------------------------------------------------------------- */ .uni-body .stat { border-top-width: 4px; } .uni-body .stat__value { font-size: var(--text-4xl); letter-spacing: -0.02em; } .uni-body .event { border: 0; border-radius: 0; background: var(--color-bg); } .uni-band--tinted .event { background: var(--color-bg); } .uni-body .event__date { border-radius: 0; letter-spacing: 0.02em; } .uni-body .event__image, .uni-body .news__image { border-radius: 0; } .uni-body .block-more { text-align: right; font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; } /* ---- Kopf einer Unterseite ------------------------------------------------ */ .uni-pagehead { background: var(--uni-tint-strong); } .uni-pagehead picture { display: block; } .uni-pagehead__image { display: block; width: 100%; /* Hoehe aus dem Bild und nicht aus einer Zahl: die Kopfbilder sind breite Streifen, und ein fester Ausschnitt schneidet ihnen die Koepfe ab. Die Obergrenze faengt den Fall, dass jemand ein hochkantes Foto einsetzt -- dort greift dann object-fit. */ height: auto; max-height: 26rem; object-fit: cover; } .uni-page { padding-block: var(--space-12) 0; } .uni-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-8); color: var(--color-text-muted); font-size: var(--text-sm); } .uni-crumbs a { color: inherit; } .uni-crumbs__sep { color: var(--color-primary); } .uni-page__header { max-width: 46rem; } .uni-page__heading { margin: 0; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; } .uni-page__lead { margin: var(--space-4) 0 0; font-size: var(--text-lg); line-height: 1.7; color: var(--color-text-muted); } /* ---- Fußbereich ----------------------------------------------------------- */ .uni-footer__meta { background: var(--color-bg); border-top: 1px solid var(--color-border); } .uni-footer__meta-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); font-size: var(--text-sm); } .uni-footer__copy { margin: 0; color: var(--color-text-muted); } .uni-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-6); } .uni-footer__main { padding-block: var(--space-16); background: var(--color-primary); color: var(--color-primary-contrast); } .uni-footer__brand { max-width: 44rem; margin-bottom: var(--space-12); } .uni-footer__name { margin: 0; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .uni-footer__claim { margin: var(--space-3) 0 0; font-size: var(--text-lg); line-height: 1.6; opacity: 0.9; } .uni-footer__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-8); } .uni-footer__column-title { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; } .uni-footer__list { margin: 0; padding: 0; list-style: none; } .uni-footer__list li { margin: 0 0 var(--space-2); padding: 0; } .uni-footer__list li::before { content: none; } .uni-footer a { color: inherit; } .uni-footer__main a { text-decoration: none; } .uni-footer__main a:hover, .uni-footer__main a:focus-visible { text-decoration: underline; }