/* Theme Name: Anvil of War Theme URI: https://anvil-of-war.com Author: Anvil of War Description: Warhammer-Community-inspiriertes Theme für anvil-of-war.com — Custom Chapter Worldbuilding. Lore · Colour · Canon. Mehrsprachig DE/EN, linkes Sidebar-Menü, wechselbares Farbschema. Version: 3.1.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later Text Domain: anvil-of-war Tags: dark, custom-menu, featured-images, translation-ready, two-columns */ /* ================================================================ COLOUR SCHEME TOKENS — Light Theme (v2.7.0: klare, kontrastreiche Neutraltöne statt der vorherigen warmen Pergament-Palette) Alle Schemata via data-scheme="" auf . Sitewert (Body/Sidebar/Header/Footer/Content) nutzt bewusst EINE einheitliche helle Basis-Palette über alle 8 Schemata hinweg — das war der Wunsch: "ein Farbschema das deutlich heller ist, für die ganze Seite". Sidebar/Header/Footer liegen eine Stufe dunkler (--lsb-bg/--hdr-bg = Karten-Ton) als der Hauptinhalt (--bg-body), für dezente Tiefenwirkung ohne zurück in "zu dunkel" zu kippen. Die Neutraltöne sind bewusst nahezu Schwarz-auf-Weiß (kein warmer/ "schmutziger" Gelbstich mehr) für maximalen Kontrast und ein klares, professionelles Erscheinungsbild. Die "Nuancen" bleiben pro Schema einstellbar: Akzent-/Goldfarbe, die farbige Kopfleisten-Unterkante (--hdr-border) und die Sidebar-Markenfarbe (--lsb-brand) unterscheiden sich weiterhin klar je Schema. --gold-hi/--accent-hi sind hier bewusst die dunkleren "-dim"-Töne aus der vorherigen dunklen Palette: Hover verdunkelt jetzt statt aufzuhellen, was auf hellem Grund richtig liest und ausreichend Kontrast zur Basisschrift hat (alle Akzent-/Goldtöne rechnerisch gegen den hellen Hintergrund geprüft, ≥ 4.8:1). ================================================================ */ /* ── Standard: Salamanders Red ── */ :root, [data-scheme="salamanders-red"] { /* Backgrounds (einheitlich hell über alle Schemata) */ --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; /* Borders — seit v3.0.0 dezent zur Akzentfarbe des Schemas getönt (vorher in allen Schemata identisch neutral-grau) */ --border: #ddbcb3; --border-hi: #c88d7f; --divider: rgba(200,60,20,.2); /* Text (einheitlich, dunkel auf hell) */ --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #83837a; --text-head: #0c0c0a; /* Accent — Nuance je Schema (kontrastgeprüft: ≥4.8:1 auf hellem Grund) */ --accent: #c63218; --accent-hi: #8f2411; --accent-dim: #8f2411; --gold: #866408; --gold-hi: #604806; --gold-dim: #604806; /* Sidebar — eine Stufe dunkler als der Inhalt, mit farbiger Marke */ --lsb-bg: #f6f6f4; --lsb-border: #c8a89d; --lsb-brand: #c63218; /* Header — gleiche helle Stufe, farbige Unterkante als Schema-Kennung */ --hdr-bg: #f6f6f4; --hdr-border: #c63218; } /* ── Salamanders Green ── */ [data-scheme="salamanders-green"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #baccb6; --border-hi: #89a983; --divider: rgba(60,180,60,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #83837a; --text-head: #0c0c0a; --accent: #287923; --accent-hi: #1d5719; --accent-dim: #1d5719; --gold: #80661f; --gold-hi: #5c4916; --gold-dim: #5c4916; --lsb-bg: #f6f6f4; --lsb-border: #a6b7a0; --lsb-brand: #287923; --hdr-bg: #f6f6f4; --hdr-border: #287923; } /* ── Ultramarines Blue ── */ [data-scheme="ultramarines-blue"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #b7bfd5; --border-hi: #8392bb; --divider: rgba(40,80,200,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #83837a; --text-head: #0c0c0a; --accent: #1a40b0; --accent-hi: #132e7f; --accent-dim: #132e7f; --gold: #80661f; --gold-hi: #5c4916; --gold-dim: #5c4916; --lsb-bg: #f6f6f4; --lsb-border: #a2abbf; --lsb-brand: #1a40b0; --hdr-bg: #f6f6f4; --hdr-border: #1a40b0; } /* ── Blood Angels Red ── */ [data-scheme="blood-angels"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #ddb5b3; --border-hi: #c97f7f; --divider: rgba(200,20,20,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #83837a; --text-head: #0c0c0a; --accent: #c81018; --accent-hi: #900c11; --accent-dim: #900c11; --gold: #8b6300; --gold-hi: #644700; --gold-dim: #644700; --lsb-bg: #f6f6f4; --lsb-border: #c9a09d; --lsb-brand: #c81018; --hdr-bg: #f6f6f4; --hdr-border: #c81018; } /* ── Space Wolves Grey ── */ [data-scheme="space-wolves"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #bec4cf; --border-hi: #909cb2; --divider: rgba(80,120,200,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #83837a; --text-head: #0c0c0a; --accent: #3a5898; --accent-hi: #2a3f6d; --accent-dim: #2a3f6d; --gold: #786a26; --gold-hi: #564c1b; --gold-dim: #564c1b; --lsb-bg: #f6f6f4; --lsb-border: #aab0ba; --lsb-brand: #3a5898; --hdr-bg: #f6f6f4; --hdr-border: #3a5898; } /* ── Dark Angels Green ── */ [data-scheme="dark-angels"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #b4c5b4; --border-hi: #7e9d7f; --divider: rgba(30,120,40,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #83837a; --text-head: #0c0c0a; --accent: #0e5a1a; --accent-hi: #0a4113; --accent-dim: #0a4113; --gold: #7d681a; --gold-hi: #5a4b13; --gold-dim: #5a4b13; --lsb-bg: #f6f6f4; --lsb-border: #a0b19e; --lsb-brand: #0e5a1a; --hdr-bg: #f6f6f4; --hdr-border: #0e5a1a; } /* ── Imperial Fists Yellow ── */ [data-scheme="imperial-fists"] { --bg-body: #ffffff; --bg-nav: #f6f6f4; --bg-card: #f6f6f4; --bg-surface: #ececea; --bg-hover: #e2e2de; --bg-content: #ffffff; --border: #cfc8ae; --border-hi: #aea175; --divider: rgba(200,160,0,.2); --text-body: #1a1a17; --text-muted: #55554e; --text-dim: #83837a; --text-head: #0c0c0a; --accent: #866600; --accent-hi: #604900; --accent-dim: #604900; --gold: #826700; --gold-hi: #5e4a00; --gold-dim: #5e4a00; --lsb-bg: #f6f6f4; --lsb-border: #bab398; --lsb-brand: #866600; --hdr-bg: #f6f6f4; --hdr-border: #866600; } /* ── Midnight (jetzt: Kontrastarmes Warmgrau statt Schwarz) ── */ [data-scheme="midnight"] { --bg-body: #f9f9f8; --bg-nav: #eeeeec; --bg-card: #eeeeec; --bg-surface: #e4e4e0; --bg-hover: #d6d6d0; --bg-content: #f9f9f8; --border: #c9c2a9; --border-hi: #aa9c73; --divider: rgba(90,90,90,.2); --text-body: #1c1c1a; --text-muted: #545249; --text-dim: #85837b; --text-head: #0a0a09; --accent: #866408; --accent-hi: #604806; --accent-dim: #604806; --gold: #866408; --gold-hi: #604806; --gold-dim: #604806; --lsb-bg: #eeeeec; --lsb-border: #b5ad93; --lsb-brand: #866408; --hdr-bg: #eeeeec; --hdr-border: #866408; } /* The hero banner (.site-hero) sits inside #content but keeps its own dramatic dark look — it has a full-bleed background photo, not body text, so the light layer above would just wash it out. This restores the original per-scheme dark values for that one subtree only. */ [data-scheme="salamanders-red"] #content .site-hero { --bg-body: #1a0a0a; --bg-surface: #2e1c1c; --bg-hover: #381e1e; --border: #4a2020; --border-hi: #7a3030; --text-body: #e8d8c8; --text-muted: #b08878; --text-dim: #7a5848; --text-head: #f0e0d0; --gold-hi: #e8b820; --accent-hi: #e8541e; } [data-scheme="salamanders-green"] #content .site-hero { --bg-body: #0a160c; --bg-surface: #182e1c; --bg-hover: #1e3820; --border: #1e3a20; --border-hi: #2e5a30; --text-body: #c8e0c0; --text-muted: #88b080; --text-dim: #506850; --text-head: #d8ecd0; --gold-hi: #e8c048; --accent-hi: #48b040; } [data-scheme="ultramarines-blue"] #content .site-hero { --bg-body: #080c1a; --bg-surface: #181e34; --bg-hover: #202840; --border: #202860; --border-hi: #303880; --text-body: #c8d8f0; --text-muted: #8090c0; --text-dim: #505880; --text-head: #d8e8ff; --gold-hi: #e8c048; --accent-hi: #2860d0; } [data-scheme="blood-angels"] #content .site-hero { --bg-body: #180808; --bg-surface: #341010; --bg-hover: #401414; --border: #501818; --border-hi: #781818; --text-body: #f0c8c8; --text-muted: #c08080; --text-dim: #805050; --text-head: #ffe0e0; --gold-hi: #f8c000; --accent-hi: #e83030; } [data-scheme="space-wolves"] #content .site-hero { --bg-body: #0c1018; --bg-surface: #202838; --bg-hover: #2a3248; --border: #2a3450; --border-hi: #3a4468; --text-body: #c8d4e8; --text-muted: #8898b8; --text-dim: #506080; --text-head: #dde8ff; --gold-hi: #e8cc58; --accent-hi: #5878c0; } [data-scheme="dark-angels"] #content .site-hero { --bg-body: #050e08; --bg-surface: #121e14; --bg-hover: #182818; --border: #143018; --border-hi: #1e4820; --text-body: #b8d4b8; --text-muted: #6a9870; --text-dim: #3a5840; --text-head: #c8e8c8; --gold-hi: #e0c040; --accent-hi: #1a7828; } [data-scheme="imperial-fists"] #content .site-hero { --bg-body: #181000; --bg-surface: #342800; --bg-hover: #403200; --border: #503c00; --border-hi: #705200; --text-body: #f0e0b0; --text-muted: #c0a060; --text-dim: #806030; --text-head: #fff0c0; --gold-hi: #ffd020; --accent-hi: #e8b800; } [data-scheme="midnight"] #content .site-hero { --bg-body: #0a0a0a; --bg-surface: #1a1a1a; --bg-hover: #222222; --border: #282828; --border-hi: #383838; --text-body: #d8d0c0; --text-muted: #988870; --text-dim: #585040; --text-head: #ece0cc; --gold-hi: #e8b820; --accent-hi: #e8b820; } /* ================================================================ DESIGN-TOGGLES (Site Options → Design) Setzen Klassen auf via ASO_Render::ui_toggle_classes(); ohne aktives Plugin greifen einfach die Standardwerte oben/unten. ================================================================ */ /* Karten-Stil: Schatten an/aus */ html.ui-card-shadow .pillar, html.ui-card-shadow .aow-card, html.ui-card-shadow .home-block, html.ui-card-shadow .newsletter-bar, html.ui-card-shadow .chapter-card { box-shadow: 0 2px 12px rgba(0,0,0,.07); } html.ui-card-flat .pillar, html.ui-card-flat .aow-card, html.ui-card-flat .home-block, html.ui-card-flat .newsletter-bar, html.ui-card-flat .chapter-card { box-shadow: none; } /* Ecken: rund/eckig -- überschreibt einfach die Radius-Variablen, auf die schon jeder border-radius im Theme verweist. */ html.ui-corner-sharp { --radius-sm: 0px; --radius-md: 0px; } html.ui-corner-rounded { --radius-sm: 4px; --radius-md: 8px; } /* Trennlinien zwischen Sektionen */ html.ui-divider-none .section-head { border-bottom: none; } /* Hero-Bild-Abdunklung (steuert die Bild-Helligkeit, nicht die Vignette) */ html.ui-hero-light .hero-bg { filter: brightness(.45) saturate(1.2); } html.ui-hero-medium .hero-bg { filter: brightness(.3) saturate(1.2); } html.ui-hero-strong .hero-bg { filter: brightness(.18) saturate(1.2); } /* ================================================================ RESET & BASE ================================================================ */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg-body); color: var(--text-body); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.65; padding-left: var(--lsb-width, 260px); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: var(--gold); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--gold-hi); } :focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; } /* ================================================================ CSS VARIABLES — LAYOUT ================================================================ */ :root { --lsb-width: 260px; --hdr-height: 62px; --content-max: 1140px; --radius-sm: 4px; --radius-md: 8px; --transition: .2s ease; } /* ================================================================ TYPOGRAPHY ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; color: var(--text-head); letter-spacing: .02em; line-height: 1.2; text-transform: uppercase; } /* Design-Toggle "Überschriften-Stil" (Site Options → Design) */ html.ui-heading-normal h1, html.ui-heading-normal h2, html.ui-heading-normal h3, html.ui-heading-normal h4, html.ui-heading-normal h5, html.ui-heading-normal h6, html.ui-heading-normal .section-title, html.ui-heading-normal .pillar-name { text-transform: none; letter-spacing: 0; } h1 { font-size: clamp(1.8rem, 4vw, 3rem); } h2 { font-size: clamp(1.3rem, 2.5vw, 1.875rem); margin: 2rem 0 .875rem; } h3 { font-size: clamp(1.1rem, 2vw, 1.375rem); margin: 1.5rem 0 .625rem; } h4 { font-size: 1.1rem; color: var(--text-muted); } p { margin-bottom: .875rem; max-width: 70ch; } .entry-content h2 { color: var(--gold); border-bottom: 1px solid var(--border-hi); padding-bottom: .5rem; } .entry-content h3 { color: var(--accent-hi); text-transform: none; letter-spacing: .02em; } blockquote { border-left: 3px solid var(--accent); background: var(--bg-card); padding: 1rem 1.5rem; margin: 1.5rem 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted); font-style: italic; font-size: 1.05rem; } blockquote cite { display: block; margin-top: .5rem; font-style: normal; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .75rem; color: var(--text-dim); letter-spacing: .06em; } blockquote cite::before { content: '— '; } code, kbd { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .85em; background: var(--bg-surface); color: var(--gold-hi); padding: .15em .45em; border-radius: 3px; border: 1px solid var(--border); } pre { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent-dim); padding: 1.25rem; overflow-x: auto; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .875rem; color: var(--text-muted); margin-bottom: 1.25rem; } hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .9rem; } thead th { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--accent-dim); padding: .6rem 1rem; text-align: left; } tbody td { padding: .5rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted); } tbody tr:hover td { background: var(--bg-surface); } /* ================================================================ SITE HEADER ================================================================ */ #site-header { position: sticky; top: 0; z-index: 500; height: var(--hdr-height); background: var(--hdr-bg); border-bottom: 2px solid var(--hdr-border); display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; /* Subtle top gradient for depth like warhammer-community */ background-image: linear-gradient(to bottom, rgba(255,255,255,.03) 0%, transparent 100%); } /* Logo / Brand */ .site-branding { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; text-decoration: none; } .site-branding img { width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--border-hi); object-fit: cover; } .site-branding .brand-name { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: block; line-height: 1; } .site-branding .brand-tagline { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; display: block; margin-top: 3px; } /* Primary nav */ #primary-navigation { display: flex; align-items: center; gap: .125rem; flex-wrap: nowrap; } #primary-navigation ul { list-style: none; display: flex; align-items: center; gap: .125rem; margin: 0; padding: 0; } #primary-navigation ul li { position: relative; margin: 0; } #primary-navigation ul li > a { display: block; height: var(--hdr-height); line-height: var(--hdr-height); padding: 0 .75rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; transition: color var(--transition), background var(--transition); position: relative; } #primary-navigation ul li > a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--transition); } #primary-navigation ul li > a:hover, #primary-navigation ul li.current-menu-item > a { color: var(--gold); } #primary-navigation ul li > a:hover::after, #primary-navigation ul li.current-menu-item > a::after { transform: scaleX(1); } /* Dropdowns */ #primary-navigation ul li ul { position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--bg-card); border: 1px solid var(--border-hi); border-top: 2px solid var(--accent); display: none; flex-direction: column; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.5); } #primary-navigation ul li:hover > ul, #primary-navigation ul li:focus-within > ul { display: flex; } #primary-navigation ul li ul li a { height: auto; line-height: 1.4; padding: .625rem 1rem; border-bottom: 1px solid var(--border); font-size: .7rem; } #primary-navigation ul li ul li:last-child a { border-bottom: none; } /* ── Header Actions ── */ .hdr-actions { display: flex; align-items: center; gap: .5rem; border-left: 1px solid var(--border); padding-left: .75rem; margin-left: auto; } /* Scheme Picker Dropdown */ .scheme-picker { position: relative; } .scheme-btn { display: flex; align-items: center; gap: .4rem; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted); padding: .35rem .6rem; border-radius: var(--radius-sm); cursor: pointer; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; transition: all var(--transition); white-space: nowrap; } .scheme-btn:hover { border-color: var(--accent); color: var(--gold); } .scheme-btn .scheme-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .scheme-btn .scheme-arrow { font-size: .55rem; transition: transform var(--transition); } .scheme-picker.open .scheme-arrow { transform: rotate(180deg); } .scheme-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 220px; background: var(--bg-card); border: 1px solid var(--border-hi); border-top: 2px solid var(--accent); box-shadow: 0 12px 32px rgba(0,0,0,.6); display: none; z-index: 600; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .scheme-picker.open .scheme-dropdown { display: block; } .scheme-dropdown-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding: .625rem 1rem .375rem; border-bottom: 1px solid var(--border); } .scheme-option { display: flex; align-items: center; gap: .625rem; padding: .625rem 1rem; cursor: pointer; transition: background var(--transition); border-bottom: 1px solid var(--border); position: relative; } .scheme-option:last-child { border-bottom: none; } .scheme-option:hover { background: var(--bg-hover); } .scheme-option.active { background: var(--bg-surface); } .scheme-option.active::before { content: '✓'; position: absolute; right: 1rem; color: var(--gold); font-size: .75rem; font-family: sans-serif; } .scheme-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); flex-shrink: 0; } .scheme-label { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .7rem; letter-spacing: .04em; color: var(--text-muted); } .scheme-option:hover .scheme-label, .scheme-option.active .scheme-label { color: var(--gold); } /* Language Switcher */ .lang-switcher { display: flex; gap: 2px; } .lang-btn { font-size: 1rem; line-height: 1; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: all var(--transition); filter: grayscale(.15); } .lang-btn:hover { border-color: var(--border-hi); filter: grayscale(0); } .lang-btn.active { background: var(--accent-dim); border-color: var(--accent); filter: grayscale(0); } /* Mobile hamburger */ .menu-toggle { display: none; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted); font-size: 1.1rem; padding: .375rem .625rem; cursor: pointer; border-radius: var(--radius-sm); margin-left: auto; transition: all var(--transition); } .menu-toggle:hover { border-color: var(--accent); color: var(--gold); } /* ================================================================ LEFT SIDEBAR ================================================================ */ #sidebar-nav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--lsb-width); background: var(--lsb-bg); border-right: 1px solid var(--lsb-border); z-index: 400; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; } #sidebar-nav::-webkit-scrollbar { width: 3px; } #sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; } /* Sidebar brand */ .lsb-brand { display: flex; align-items: center; gap: .625rem; padding: 1rem .875rem .875rem; border-bottom: 1px solid var(--lsb-brand); text-decoration: none; flex-shrink: 0; } .lsb-brand img { width: 32px; height: 32px; border-radius: var(--radius-md); border: 2px solid var(--border-hi); object-fit: cover; } .lsb-brand-name { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); display: block; font-weight: 600; } .lsb-brand-tagline { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); display: block; margin-top: 3px; } /* Social-Media-Icons (gepflegt in Anvil Site Options -> Social Media) */ .lsb-social { display: flex; align-items: center; gap: .5rem; padding: .75rem .875rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .lsb-social-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm, 4px); color: var(--text-muted); background: var(--bg-surface); border: 1px solid var(--border); transition: color .15s, border-color .15s, background .15s; text-decoration: none; } .lsb-social-icon:hover, .lsb-social-icon:focus-visible { color: var(--gold); border-color: var(--gold); background: var(--bg-hover); } .mobile-nav-overlay .lsb-social { border-bottom: 0; padding: .5rem 1.25rem 0; } /* Sidebar groups */ .lsb-group { border-bottom: 1px solid var(--border); } .lsb-group-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .625rem .875rem; background: transparent; border: none; cursor: pointer; text-align: left; transition: background var(--transition); } .lsb-group-toggle:hover { background: var(--bg-hover); } .lsb-group-icon { font-size: .9rem; flex-shrink: 0; width: 16px; text-align: center; } .lsb-group-label { flex: 1; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; } .lsb-group-arrow { font-size: .55rem; color: var(--text-dim); transition: transform .25s ease; flex-shrink: 0; } .lsb-group.open > .lsb-group-toggle .lsb-group-arrow { transform: rotate(180deg); } .lsb-group-body { overflow: hidden; max-height: 0; transition: max-height .35s ease, padding .3s ease; padding: 0 .75rem; } .lsb-group.open > .lsb-group-body { max-height: 2000px; padding: .25rem .75rem .5rem; } /* Locked group (e.g. Forge & Tools) — always expanded, no toggle affordance */ .lsb-group-toggle-static { cursor: default; } .lsb-group-toggle-static:hover { background: transparent; } .lsb-group-locked > .lsb-group-body { max-height: none; overflow: visible; } /* Sidebar links */ .lsb-link { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: var(--radius-sm); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .7rem; letter-spacing: .04em; color: var(--text-muted); text-decoration: none; margin-bottom: 2px; border: 1px solid transparent; transition: all var(--transition); } .lsb-link:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text-head); } .lsb-link.current { background: var(--bg-surface); border-color: var(--border-hi); border-left: 2px solid var(--accent); color: var(--gold); } .lsb-link .lsb-ico { font-size: .85rem; flex-shrink: 0; width: 16px; text-align: center; } /* Sub-links */ .lsb-sub { display: block; padding: .25rem .5rem .25rem 2rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .03em; color: var(--text-dim); text-decoration: none; border-radius: 3px; margin-bottom: 1px; transition: color var(--transition), background var(--transition); } .lsb-sub:hover { color: var(--text-muted); background: rgba(0,0,0,.04); } .lsb-sub::before { content: '↳ '; opacity: .4; } /* Chapter accordion groups */ .lsb-chapter { margin-bottom: 2px; } .lsb-chapter-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .375rem .5rem; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .7rem; letter-spacing: .04em; color: var(--text-muted); transition: all var(--transition); text-align: left; } .lsb-chapter-toggle:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text-head); } .lsb-chapter-toggle.open { background: var(--bg-surface); border-color: var(--border-hi); border-left: 2px solid var(--accent); color: var(--gold); } .lsb-chapter-toggle .ch-ico { font-size: .95rem; flex-shrink: 0; } .lsb-chapter-toggle .ch-arrow { margin-left: auto; font-size: .55rem; color: var(--text-dim); transition: transform .25s ease; } .lsb-chapter-toggle.open .ch-arrow { transform: rotate(180deg); } .lsb-chapter-body { overflow: hidden; max-height: 0; transition: max-height .3s ease; } .lsb-chapter-body.open { max-height: 600px; } /* Sidebar footer */ .lsb-footer { margin-top: auto; padding: .75rem; border-top: 1px solid var(--border); } /* Mini scheme picker in sidebar */ .lsb-scheme { margin-bottom: .5rem; } .lsb-scheme-label { display: block; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .375rem; } .lsb-scheme-select { width: 100%; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; padding: .375rem .5rem; border-radius: var(--radius-sm); cursor: pointer; appearance: auto; } .lsb-scheme-select:focus { outline: none; border-color: var(--accent); } .lsb-ki-note { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .58rem; letter-spacing: .03em; color: var(--text-dim); line-height: 1.5; margin-top: .375rem; } /* ================================================================ PAGE LAYOUT ================================================================ */ #page { display: flex; flex-direction: column; min-height: 100vh; } #content { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 2rem 1.5rem 4rem; background: var(--bg-content); } .content-with-sidebar { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; align-items: start; } .content-main { min-width: 0; } /* ================================================================ START-BANNER — großformatiges, optional verlinktes Bild, das den Text-Hero ersetzt, sobald in Site Options → Startseite ein Bild hinterlegt ist (siehe front-page.php). Bewusst schlicht: das Bild selbst transportiert die Botschaft, kein Text-Overlay nötig. ================================================================ */ .site-banner { width: 100%; line-height: 0; /* verhindert Sub-Pixel-Lücke unter dem Bild */ } .site-banner-link { display: block; cursor: pointer; } .site-banner-img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover; } @media (hover: hover) { .site-banner-link:hover .site-banner-img { filter: brightness(.94); } } /* ================================================================ HERO — Warhammer Community Style ================================================================ */ .site-hero { position: relative; overflow: hidden; min-height: 72vh; display: flex; align-items: flex-end; padding: 4rem 2.5rem 3rem; } .hero-bg { position: absolute; inset: 0; background: url(images/hero-bg.jpg) center / cover no-repeat; filter: brightness(.3) saturate(1.2); z-index: 0; } /* Warhammer Community's characteristic diagonal vignette */ .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-body) 0%, transparent 55%), linear-gradient(to right, var(--bg-body) 0%, transparent 40%); } /* Red accent bar across top — signature WH Community element */ .hero-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(to right, var(--accent), var(--gold), var(--accent)); z-index: 2; } .hero-content { position: relative; z-index: 2; max-width: 680px; } .hero-eyebrow { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; } .hero-eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--accent); } .hero-title { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); line-height: 1; margin-bottom: .5rem; text-shadow: 0 2px 20px rgba(0,0,0,.8); } .hero-subtitle { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; } .hero-tagline { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.2rem; font-style: italic; color: var(--text-body); max-width: 50ch; line-height: 1.6; margin-bottom: 2rem; } .hero-ctas { display: flex; gap: .875rem; flex-wrap: wrap; } /* ================================================================ BUTTONS ================================================================ */ .btn { display: inline-flex; align-items: center; gap: .4rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .625rem 1.25rem; border: 1px solid; cursor: pointer; text-decoration: none; border-radius: var(--radius-sm); transition: all var(--transition); white-space: nowrap; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; } .btn-secondary { background: var(--bg-surface); border-color: var(--border-hi); color: var(--text-body); } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); background: var(--bg-hover); } .btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; } .btn-gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: #fff; } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); padding-left: 0; } .btn-ghost:hover { color: var(--gold); } .btn-ghost::after { content: ' →'; } /* ================================================================ CARD SYSTEM — Warhammer Community Style ================================================================ */ /* Generic content card */ .aow-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition), transform var(--transition); } .aow-card:hover { border-color: var(--border-hi); transform: translateY(-2px); } .aow-card-img { aspect-ratio: 16/9; overflow: hidden; } .aow-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .aow-card:hover .aow-card-img img { transform: scale(1.04); } .aow-card-body { padding: 1.25rem 1.25rem 1rem; } .aow-card-eyebrow { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .375rem; } .aow-card-title { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-head); margin-bottom: .5rem; line-height: 1.3; } .aow-card-title a { color: inherit; } .aow-card-title a:hover { color: var(--gold); } .aow-card-excerpt { font-size: .875rem; color: var(--text-muted); line-height: 1.6; margin-bottom: .875rem; } .aow-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: .75rem; border-top: 1px solid var(--border); } .aow-card-meta { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .06em; color: var(--text-dim); } /* Post Grid */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } /* ================================================================ CHAPTER CARD — Horizontal layout ================================================================ */ .chapter-card { display: grid; grid-template-columns: 180px 1fr; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.25rem; transition: border-color var(--transition), transform var(--transition); text-decoration: none; } .chapter-card:hover { border-color: var(--border-hi); transform: translateY(-2px); } /* Coloured top-edge per chapter — WH Community style */ .chapter-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .chapter-heraldry { background: var(--bg-surface); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); padding: 1.5rem; font-size: 3rem; min-height: 160px; } .chapter-body { padding: 1.25rem 1.25rem 1rem; } .chapter-designation { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .25rem; } .chapter-name { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: .25rem; } .chapter-name-en { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .875rem; font-style: italic; color: var(--text-dim); margin-bottom: .75rem; } .chapter-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem .75rem; margin-bottom: .75rem; } .chapter-meta-item { display: flex; flex-direction: column; } .chapter-meta-label { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); } .chapter-meta-value { font-size: .875rem; color: var(--text-muted); } .chapter-battle-cry { font-style: italic; color: var(--text-muted); border-left: 2px solid var(--accent-dim); padding-left: .625rem; font-size: .9rem; margin-bottom: .75rem; } .chapter-ctas { display: flex; gap: .5rem; margin-top: .5rem; } /* ================================================================ THREE PILLARS ================================================================ */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 2rem 0; } .pillar { background: var(--bg-card); padding: 1.75rem 1.5rem; position: relative; transition: background var(--transition); } .pillar:hover { background: var(--bg-surface); } .pillar-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } .pillar-num { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: .625rem; } .pillar-icon { font-size: 1.75rem; margin-bottom: .75rem; } .pillar-name { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: .875rem; border-bottom: 1px solid var(--border); padding-bottom: .75rem; } .pillar-desc { font-size: .875rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1rem; } /* ================================================================ HOME BLOCKS — Namensgenerator + frei konfigurierbare Extra-Blöcke ================================================================ */ .home-block-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; } .home-block { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; } .home-block-heading { font-size: 1.05rem; margin: 0; } .home-block-text { font-size: .875rem; color: var(--text-muted); line-height: 1.65; margin: 0; flex-grow: 1; } /* ================================================================ HOME FOOTER GRID — frei konfigurierbare Spalten am Ende der Startseite ================================================================ */ .home-footer-grid { margin-top: 3rem; padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } .home-footer-col-heading { font-size: .8rem; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; } .home-footer-col-text { font-size: .8rem; color: var(--text-muted); line-height: 1.6; margin: 0; } .home-footer-col-link { display: inline-block; margin-top: .5rem; font-size: .75rem; color: var(--gold); text-decoration: underline; } .home-footer-col-link:hover { color: var(--gold-hi); } /* ================================================================ SECTION HEADERS — Warhammer Community style ================================================================ */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); } .section-eyebrow { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .25rem; } .section-title { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-head); } /* ================================================================ BADGES / TAGS ================================================================ */ .badge { display: inline-flex; align-items: center; gap: .3rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px .5rem; border-radius: var(--radius-sm); border: 1px solid; } .badge-canon { color: #3a782d; border-color: #2a5a1a; background: rgba(74,154,58,.12); } .badge-lore { color: var(--gold); border-color: var(--gold-dim); background: rgba(134,100,8,.12); } .badge-custom { color: #526b8b; border-color: #384868; background: rgba(74,85,128,.12); } .badge-ki { color: var(--text-dim); border-color: var(--border); background: var(--bg-surface); } .tag { display: inline-block; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .62rem; padding: 2px 8px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 99px; color: var(--text-dim); } /* ================================================================ DATASHEET SIDEBAR (Chapter pages) ================================================================ */ .datasheet { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.5rem; position: sticky; top: calc(var(--hdr-height) + 1.5rem); } .datasheet-header { background: var(--bg-surface); padding: 1.25rem; border-bottom: 1px solid var(--border); text-align: center; position: relative; } .datasheet-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--accent), var(--gold)); } .datasheet-chapter-name { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: .5rem 0 .25rem; } .datasheet-designation { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .08em; color: var(--text-dim); } .datasheet-image { width: 100%; aspect-ratio: 1; object-fit: cover; filter: brightness(.7) contrast(1.1); } .datasheet-body { padding: .25rem 0; } .datasheet-row { display: grid; grid-template-columns: 110px 1fr; border-bottom: 1px solid var(--border); padding: .4rem 1rem; } .datasheet-row:last-child { border-bottom: none; } .datasheet-label { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); align-self: center; } .datasheet-value { font-size: .875rem; color: var(--text-muted); align-self: center; } /* ================================================================ BREADCRUMB ================================================================ */ .breadcrumb { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 1.5rem; } .breadcrumb a { color: var(--text-dim); } .breadcrumb a:hover { color: var(--text-muted); } .breadcrumb .sep { color: var(--accent-dim); } .breadcrumb .crumb-current { color: var(--text-muted); } /* ================================================================ ENTRY CONTENT (Posts / Articles) ================================================================ */ .entry-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .entry-meta-top { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .875rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .06em; color: var(--text-dim); } .entry-cat-link { color: var(--accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .entry-title { margin-bottom: .5rem; color: var(--gold); } .entry-subtitle { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .7rem; letter-spacing: .08em; color: var(--text-dim); margin-bottom: .875rem; } .entry-content { font-size: 1.0625rem; line-height: 1.8; } .entry-content p { margin-bottom: 1rem; } /* Drop cap for lore articles */ .has-drop-cap .entry-content > p:first-of-type::first-letter { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 4.5em; float: left; line-height: .75; margin: .05em .1em 0 0; color: var(--accent); } /* ================================================================ PAGINATION ================================================================ */ .pagination { display: flex; justify-content: center; align-items: center; gap: .25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .pagination a, .pagination span { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .06em; padding: .375rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); transition: all var(--transition); } .pagination a:hover { border-color: var(--accent); color: var(--gold); } .pagination .current { border-color: var(--accent); color: var(--gold); background: var(--bg-surface); } /* ================================================================ SITE FOOTER ================================================================ */ #colophon { background: var(--lsb-bg); border-top: 1px solid var(--hdr-border); padding: 2.5rem 1.5rem 1.5rem; } .footer-inner { max-width: var(--content-max); margin: 0 auto; } /* ================================================================ NEWSLETTER BAR (Footer, sitewide, immer sichtbar) ================================================================ */ .newsletter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 1.75rem; margin-bottom: 2rem; background: var(--lsb-bg); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-md); } .newsletter-bar-copy { display: flex; align-items: flex-start; gap: .875rem; min-width: 240px; } .newsletter-bar-icon { font-size: 1.4rem; color: var(--gold); line-height: 1; margin-top: .1rem; } .newsletter-bar-heading { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 1rem; letter-spacing: .06em; color: var(--text-head); margin-bottom: .25rem; } .newsletter-bar-text { font-size: .8rem; color: var(--text-muted); margin: 0; max-width: 40ch; } .newsletter-bar-form { flex-shrink: 0; } .newsletter-bar-form form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .newsletter-bar-form input[type="email"], .newsletter-bar-form input[type="text"] { background: var(--bg-surface); border: 1px solid var(--border-hi); color: var(--text-body); padding: .55rem .875rem; border-radius: var(--radius-sm); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .9rem; min-width: 220px; } .newsletter-bar-form input[type="submit"], .newsletter-bar-form button[type="submit"] { background: var(--accent); border: 1px solid var(--accent); color: #fff; padding: .55rem 1.25rem; border-radius: var(--radius-sm); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: all var(--transition); } .newsletter-bar-form input[type="submit"]:hover, .newsletter-bar-form button[type="submit"]:hover { background: var(--accent-hi); border-color: var(--accent-hi); } .newsletter-bar-notice { border-left-color: var(--accent); background: var(--bg-card); } .newsletter-bar-notice p { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .7rem; color: var(--text-muted); margin: 0; } @media (max-width: 600px) { .newsletter-bar { flex-direction: column; align-items: flex-start; } .newsletter-bar-form input[type="email"] { min-width: 0; width: 100%; } } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .footer-brand-name { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .375rem; } .footer-brand-tagline { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .875rem; } .footer-brand-desc { font-size: .875rem; color: var(--text-dim); line-height: 1.6; max-width: 36ch; margin-bottom: .75rem; } .footer-col-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; padding-bottom: .375rem; border-bottom: 1px solid var(--border); } .footer-nav { list-style: none; } .footer-nav li { margin-bottom: .375rem; } .footer-nav li a { font-size: .875rem; color: var(--text-dim); transition: color var(--transition); } .footer-nav li a:hover { color: var(--text-muted); } .footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .footer-legal { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; letter-spacing: .04em; color: var(--text-dim); line-height: 1.8; } .footer-legal a { color: var(--text-dim); } .footer-legal a:hover { color: var(--text-muted); } .footer-gw { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .6rem; color: var(--text-dim); max-width: 44ch; text-align: right; line-height: 1.6; } /* ================================================================ MOBILE NAV OVERLAY ================================================================ */ .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: var(--lsb-bg); z-index: 800; flex-direction: column; padding: 1.25rem; overflow-y: auto; } .mobile-nav-overlay.open { display: flex; } .mob-nav-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; } .mob-nav-brand { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .mob-nav-close { background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 1.25rem; line-height: 1; padding: .3rem .6rem; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); } .mob-nav-close:hover { border-color: var(--accent); color: var(--gold); } .mob-nav-links { list-style: none; margin: 0; padding: 0; } .mob-nav-links li { border-bottom: 1px solid var(--border); } .mob-nav-links li a { display: block; padding: .875rem 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); transition: color var(--transition); } .mob-nav-links li a:hover { color: var(--gold); } .mob-nav-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; flex-wrap: wrap; } /* ================================================================ SIDEBAR TOGGLE (Mobile) ================================================================ */ .lsb-mob-toggle { display: none; position: fixed; top: .875rem; left: .875rem; z-index: 600; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); font-size: 1.1rem; padding: .375rem .625rem; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); } .lsb-mob-toggle:hover { border-color: var(--accent); color: var(--gold); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1100px) { #content { padding: 1.5rem 1.25rem 3rem; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .content-with-sidebar { grid-template-columns: 1fr; } .datasheet { position: static; } .pillars { grid-template-columns: 1fr; } .chapter-card { grid-template-columns: 1fr; } .chapter-heraldry { min-height: 100px; padding: 1rem; } } @media (max-width: 768px) { body { padding-left: 0; } #sidebar-nav { transform: translateX(-100%); transition: transform .3s ease; } #sidebar-nav.mob-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.6); } .lsb-mob-toggle { display: block; } #primary-navigation { display: none; } .menu-toggle { display: block; } .hdr-actions { gap: .25rem; } .scheme-btn span:not(.scheme-dot):not(.scheme-arrow) { display: none; } #site-header { padding: 0 .875rem 0 3.5rem; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } .footer-gw { text-align: left; } .post-grid { grid-template-columns: 1fr; } .hero-title { font-size: 2rem; } .site-hero { min-height: 55vh; padding: 2rem 1.25rem 2rem; } .site-banner-img { max-height: 45vh; } #content { padding: 1.25rem 1rem 2.5rem; } } @media (max-width: 480px) { .hero-ctas { flex-direction: column; } .chapter-meta-grid { grid-template-columns: 1fr; } } /* ================================================================ UTILITY ================================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: 0; background: var(--accent); color: #fff; padding: .5rem 1rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: .75rem; z-index: 9999; } .skip-link:focus { top: 0; } /* i18n */ [data-lang] { display: none; } html[lang="de"] [data-lang="de"], html[lang="en"] [data-lang="en"] { display: inline; } p[data-lang],div[data-lang],li[data-lang],h1[data-lang],h2[data-lang],h3[data-lang] { display: none; } html[lang="de"] p[data-lang="de"], html[lang="de"] div[data-lang="de"], html[lang="de"] li[data-lang="de"], html[lang="de"] h1[data-lang="de"], html[lang="de"] h2[data-lang="de"], html[lang="de"] h3[data-lang="de"], html[lang="en"] p[data-lang="en"], html[lang="en"] div[data-lang="en"], html[lang="en"] li[data-lang="en"], html[lang="en"] h1[data-lang="en"], html[lang="en"] h2[data-lang="en"], html[lang="en"] h3[data-lang="en"] { display: revert; } @media print { #sidebar-nav, #site-header, .hero-ctas, .chapter-ctas { display: none; } body { padding: 0; color: #000; background: #fff; } }