/* ========================= SCHRIFTEN Alle drei Schriften liegen als Datei im Projekt und werden hier eingebunden. Ohne diese Bloecke saehe die Seite nur der, der die Schriften auf seinem Rechner installiert hat. Bewusst lokal statt vom Google-CDN: sonst wandert bei jedem Seitenaufruf die IP-Adresse der Besucher an Google. Das ist eine Datenuebermittlung im Sinne der DSGVO und braeuchte sonst eine Rechtsgrundlage und einen Hinweis in der Datenschutzerklaerung. Lokal ausgeliefert stellt sich die Frage gar nicht erst. Format WOFF2 - dieselben Glyphen wie die frueheren TTF-Dateien, nur rund 61 % kleiner. Wird von allen aktuellen Browsern unterstuetzt (Chrome/Edge/Firefox seit 2016, Safari seit 2020). KEINE Ersatzschriften in den font-family-Angaben. Das ist Absicht: Browser weichen pro Zeichen aus, ein fehlender Buchstabe kaeme also mitten im Wort aus einer anderen Schrift. Geprueft wurde, dass alle drei Schriften jedes auf der Seite vorkommende Zeichen abdecken, inklusive Umlauten und typografischen Anfuehrungszeichen. Eine Luecke gibt es: Viking kennt kein Eurozeichen. Kommt eines in eine Ueberschrift, erscheint es in der Systemschrift. Fuer Preise also Uncial Antiqua oder Cardo verwenden. ========================= */ /* Die beiden Zierschriften stehen in den Ueberschriften und tragen den Markenauftritt. Bei font-display: swap zeigt der Browser zuerst die Ersatzschrift und tauscht sie dann aus - genau dieses Aufblitzen war beim Seitenwechsel zu sehen. Mit "block" wartet er stattdessen kurz und zeichnet gleich richtig. Das ist hier gefahrlos, weil beide Dateien winzig sind (17 bzw. 25 kB) und im vorgeladen werden. */ @font-face { font-family: 'Viking'; src: url("fonts/Viking.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'Uncial Antiqua'; src: url("fonts/UncialAntiqua-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } /* Cardo traegt den Fliesstext und ist mit 143 kB deutlich groesser. Hier bleibt es bei "swap": lesbaren Text sofort zu zeigen ist wichtiger, als den Schriftwechsel zu vermeiden. */ @font-face { font-family: 'Cardo'; src: url("fonts/Cardo-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Cardo'; src: url("fonts/Cardo-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Cardo'; src: url("fonts/Cardo-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================= GLOBAL BASE ========================= */ html { background-color: #000; scroll-behavior: smooth; /* Platz fuer den Scrollbalken immer freihalten, auch wenn die Seite kurz genug ist und keinen braucht. Sonst ist eine kurze Seite wie client_work.html 15 px breiter als die langen, und beim Klick auf einen Menuepunkt springt der gesamte Inhalt seitlich. */ scrollbar-gutter: stable; } body { background-color: #511824; color: #fff; max-width: 1920px; min-height: 100vh; margin: 0 auto; position: relative; z-index: 0; display: flex; flex-direction: column; } /* Background logo (inside the red body, bottom-right) */ body::before { content: ""; position: absolute; bottom: 0; right: 0; width: 900px; height: 900px; background-image: url("../images/logos/Logo_VCT -black-white2.png"); background-repeat: no-repeat; background-size: contain; background-position: right bottom; opacity: 0.05; pointer-events: none; z-index: 0; } /* Keep all content above the background logo */ header, nav, main, footer, .page-wrapper { position: relative; z-index: 1; } /* ========================= HEADER ========================= */ header h1:first-child { font-family: 'Viking'; /* Wichtig: Ueberschriften sind im Browser von Haus aus fett (700). Viking gibt es aber nur in einem Schnitt. Fehlt der fette, erfindet der Browser ihn und verdickt die Buchstaben kuenstlich — bei G und A sieht man das als ausgefransten Doppelstrich. font-synthesis: none verbietet dieses Nachahmen zusaetzlich. */ font-weight: normal; font-synthesis: none; font-size: 6rem; margin: 0; padding: 4rem 5rem; text-align: center; } /* ========================= FULL-WIDTH BARS (NAV + FOOTER BAR) -> Bars go to the edge of the RED body -> Inner keeps same left/right padding as content ========================= */ .bar { background-color: #AC9362; width: 100%; } .bar__inner { max-width: 1920px; margin: 0 auto; padding: 0 5rem; } .bar__inner--center { text-align: center; } /* ========================= NAVIGATION ========================= */ nav.bar { margin: 0 0 5rem; } nav.bar ul { display: flex; flex-wrap: nowrap; list-style: none; padding: 0; margin: 0; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; } nav.bar li { flex: 0 0 auto; border-left: 1px solid #fff; } nav.bar li:first-child { border-left: none; } nav.bar a { display: block; padding: 1rem 1.25rem; text-align: center; white-space: nowrap; font-family: 'Uncial Antiqua'; font-size: 22px; letter-spacing: 0.04em; color: #fff !important; text-decoration: none; text-underline-offset: 3px; } nav.bar a[aria-current="page"], nav.bar a:hover, nav.bar a:focus { background-color: #816b3f; color: #fff !important; text-decoration: underline; } /* ========================= PAGE WRAPPER (push footer down) ========================= */ .page-wrapper { flex: 1; } /* ========================= MAIN CONTENT (TYPOGRAPHY) ========================= */ main.custom_main { font-family: 'Cardo'; font-size: 20px; margin: 0; padding: 1rem 5rem; } .custom_main h2, .custom_main h3 { font-family: 'Uncial Antiqua'; /* Gleicher Grund wie bei h1: Uncial Antiqua hat nur einen Schnitt, der Browser wuerde den fetten sonst nachahmen. */ font-weight: normal; font-synthesis: none; letter-spacing: 0.02em; } .custom_main h2 { font-size: 40px; margin: 0 0 2rem; } .custom_main h3 { font-size: 28px; margin: 2rem 0 1rem; } .custom_main p { margin: 0 0 1.5rem; } .custom_main .intro-text { margin-top: 2.5rem; } .custom_main p + ul { margin-top: 2rem; } .custom_main > ul { margin: 0 0 4rem; padding-left: 1.2rem; } .custom_main > ul > li { margin-bottom: 0.5rem; } /* Links in content */ .custom_main a { color: #816b3f; text-decoration: underline; text-decoration-color: #AC9362; text-underline-offset: 3px; transition: color 0.2s ease; } .custom_main a:hover, .custom_main a:focus { color: #fff; } /* Special “calendar” mark */ .calendar-mark { font-family: 'Viking'; letter-spacing: 0.06em; font-size: 1.05em; color: inherit; } /* ========================= FOOTER (Up button + Copyright BAR at bottom) - Up button sits above the bar, right side - Copyright text is centered inside the bar ========================= */ .site-footer { margin-top: auto; padding: 0; /* important: bar touches the bottom edge */ } /* Up button (right, above the copyright bar) */ .back-to-top { position: absolute; right: 3rem; bottom: 6rem; background-color: #AC9362; color: #fff; text-decoration: none; padding: 0.4rem 0.9rem; border-radius: 999px; font-family: 'Uncial Antiqua'; font-size: 16px; letter-spacing: 0.08em; transition: background-color 0.2s ease; z-index: 10; } .back-to-top:hover, .back-to-top:focus { background-color: #816b3f; } /* Footer bar */ .bar--footer { margin: 0; /* sits at the very bottom */ } /* Copyright text centered INSIDE the bar */ .copyright-box { display: inline-block; padding: 0.9rem 0; font-family: 'Uncial Antiqua'; font-size: 16px; letter-spacing: 0.04em; color: #fff; } /* About me page */ p.email_link_margin_top { margin-top:50px; } /* image -CW */ .cw-logo-wrap { margin-top: 1.2rem; max-width: 360px; } .cw-logo { width: 50%; height: auto; display: block; opacity: 0.88; margin-top: -2.5rem; margin-left: 1.5rem; } /* ====================================== Fog Scroll Image Reveal (My equipment) Wirkt NUR innerhalb von .fog-gallery, das übrige Layout bleibt unberührt. ====================================== */ /* ---- 1. Titel + Navigation einfrieren ---------------- Gilt NUR auf der Seite my_equipment.html (body class="page-equipment"). Die Höhen --fog-header-h / --fog-nav-h misst javascript/fog-gallery.js automatisch. */ body.page-equipment > header, body.page-learning > header, body.page-witch > header { position: sticky; top: 0; z-index: 10; } body.page-equipment > nav.bar, body.page-learning > nav.bar, body.page-witch > nav.bar { position: sticky; top: var(--fog-header-h, 15rem); z-index: 10; } /* ---- 2. Textblock einfrieren ------------------------ Klebt direkt unter der Navileiste. KEIN Hintergrund: Es gibt keine deckende Fläche mehr, die etwas verdecken könnte. Die Bilder lösen sich stattdessen auf, bevor sie diese Linie erreichen. */ body.page-equipment .fog-head, body.page-learning .fog-head, body.page-witch .fog-head { position: sticky; /* nur so breit wie der Text selbst - dadurch weiß das Script, wo rechts daneben Platz für die Bilder ist */ width: max-content; max-width: 100%; /* friert exakt an seiner eigenen Position ein (--fog-head-top misst javascript/fog-gallery.js) */ top: var(--fog-head-top, calc(var(--fog-header-h, 15rem) + var(--fog-nav-h, 4rem))); z-index: 5; } /* ---- 3. Logo im Hintergrund einfrieren ---------------- Größe und Position bleiben exakt wie in deinem Layout, nur das Mitscrollen ist abgeschaltet. */ body.page-equipment::before, body.page-learning::before, body.page-witch::before { position: fixed; bottom: 0; right: max(0px, calc((100vw - 1920px) / 2)); z-index: 0; } /* ---- 4. Die Galerie ---------------------------------- */ .fog-gallery { display: grid; grid-template-columns: 1fr; /* eine Spalte, Bilder untereinander */ justify-items: center; gap: 14vh; /* Abstand: jedes Bild bekommt seinen eigenen Auftritt, ohne dass das nächste schon hereinschaut */ /* Breite: nie größer als das Original und nie höher als der freie Bereich unter dem Textblock. Den genauen Wert rechnet javascript/fog-gallery.js aus, damit ein Bild immer komplett zu sehen ist, während es sich öffnet. */ max-width: min(700px, var(--fog-img-w, 52vh)); margin: 30vh auto 8rem; /* auto = mittig; der obere Wert wird vom Script passend nachgerechnet */ position: relative; z-index: 1; /* liegt unter dem Textblock (z-index 5) */ } .fog-item { margin: 0; /*
hat sonst einen eigenen Rand */ padding: 0; width: 100%; } .fog-svg { display: block; width: 100%; height: auto; /* Seitenverhältnis 4:3 bleibt erhalten */ overflow: visible; /* ausgefranste Nebelränder nicht abschneiden */ } /* ====================================== Mondphasen-Reveal (Creative Witch) Breite je Bild rechnet javascript/moon-gallery.js aus. ====================================== */ /* Links einzeilig, damit der eingefrorene Block flach bleibt und den Bildern nicht die Höhe wegnimmt */ .fog-head .cw-links { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; list-style: none; margin: 1rem 0 0; padding: 0; } .moon-gallery { margin: 0 auto 8rem; position: relative; z-index: 1; } /* hoher Abschnitt, in dem das Bild stehen bleibt */ .moon-slot { position: relative; } .moon-frame { position: sticky; margin: 0 auto; padding: 0; } .moon-svg { display: block; width: 100%; height: auto; } /* der Rand der Mondscheibe */ .moon-ring { stroke: #AC9362; } /* ====================================== Pentakel-Reveal (Idee Creative Witch) ====================================== */ .pt-gallery { margin: 0 auto 8rem; position: relative; z-index: 1; } .pt-slot { position: relative; } .pt-frame { position: sticky; margin: 0 auto; padding: 0; } .pt-svg { display: block; width: 100%; height: auto; } .pt-mark { stroke: #AC9362; } /* ====================================== Valknut Reveal (Bildergalerie) Breite und Position rechnet javascript/valknut-gallery.js aus. ====================================== */ .vk-gallery { /* Breite und linker Rand kommen aus javascript/valknut-gallery.js; das hier ist nur der Stand, bevor das Script gerechnet hat */ width: min(700px, var(--vk-img-w, 60vh)); margin: 0 auto 8rem; position: relative; z-index: 1; } /* Jedes Bild bekommt einen hohen Abschnitt, ...*/ .vk-slot { position: relative; } /* ... in dem es stehen bleibt, während es sich öffnet */ .vk-frame { position: sticky; top: var(--vk-top, 30vh); margin: 0; padding: 0; width: 100%; } .vk-svg { display: block; width: 100%; height: auto; } /* Das Band: breiter Goldstrich mit schmalem Kern in Seitenfarbe, dazu die Lücke an den Kreuzungen */ .vk-gap { fill: none; stroke: #511824; stroke-width: 24; stroke-linejoin: miter; } .vk-band { fill: none; stroke: #AC9362; stroke-width: 15; stroke-linejoin: miter; } .vk-core { fill: none; stroke: #511824; stroke-width: 7; stroke-linejoin: miter; } /* ====================================== Runenrad / Vegvísir (Learning Journey) Die Höhe der Bühne und die Maße des Rads rechnet javascript/rune-wheel.js aus. ====================================== */ .rune-stage { position: relative; margin: 2rem 0 4rem; } /* Das Rad bleibt stehen, während die Bühne durchscrollt. Position und Höhe = der freie Bereich unter dem eingefrorenen Text (rechnet rune-wheel.js aus). */ .rune-wheel { position: sticky; top: var(--rune-top, 0px); height: var(--rune-h, 100vh); } /* Speichenkreuz in der Mitte */ .rune-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.24; pointer-events: none; overflow: visible; } .rune-hub ellipse, .rune-hub line, .rune-hub circle { fill: none; stroke: #AC9362; stroke-width: 4.5; /* die Bahn, auf der die Bilder laufen */ stroke-linecap: round; } /* Dein eigener Vegvísir in der Mitte. Das PNG ist schwarz; als Maske über einer goldenen Fläche erscheint es in der Farbe der Seite. Größe setzt javascript/rune-wheel.js. */ .rune-emblem { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; opacity: 0.42; pointer-events: none; } .rune-static .rune-emblem { display: none; } /* Ein Bild auf dem Rad */ .rune-item { position: absolute; left: 50%; top: 50%; width: var(--rune-focus, 260px); height: var(--rune-focus, 260px); margin: calc(var(--rune-focus, 260px) / -2) 0 0 calc(var(--rune-focus, 260px) / -2); will-change: transform, opacity; } .rune-item img { display: block; width: 100%; height: 100%; object-fit: contain; /* nichts wird abgeschnitten */ } /* Sicherheitsnetz: ohne JavaScript-Animation einfach ein Raster */ .rune-static .rune-wheel { position: static; height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .rune-static .rune-item { position: static; width: auto; height: auto; aspect-ratio: 1; margin: 0; transform: none; opacity: 1; } .rune-static .rune-hub { display: none; }