/* Theme Name: SOAB Modern Theme URI: https://soabmusic.eu/ Description: Updatefestes SOAB-Child-Theme auf Basis von Blocksy. Author: SOAB Template: blocksy Version: 1.2.1 Text Domain: soab-modern */ @import url("https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;600;700&display=swap"); :root { --soab-red: #ff3b30; --soab-red-dark: #d91f18; --soab-ink: #0b0b0c; --soab-paper: #f1eee6; --soab-paper-bright: #faf7f0; --soab-line: rgba(11, 11, 12, 0.18); --soab-heading-muted: #4c4a47; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } [id] { scroll-margin-top: 100px; } body { margin: 0; color: var(--soab-ink); background: var(--soab-paper); font-family: "DM Sans", Arial, sans-serif; } main { background: var(--soab-paper); } body.admin-bar .soab-header { top: 32px; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, textarea { font: inherit; } ::selection { background: var(--soab-red); color: #fff; } .soab-header { position: sticky; top: 0; z-index: 999; min-height: 82px; display: grid; grid-template-columns: 180px 1fr 180px; align-items: center; padding: 12px 4vw; background: rgba(11, 11, 12, 0.94); color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(16px); } .soab-brand img { width: 86px; max-height: 58px; object-fit: contain; } .soab-nav { display: flex; justify-content: center; gap: clamp(18px, 3vw, 48px); } .soab-nav a, .soab-social { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .soab-nav a:hover, .soab-social:hover { color: var(--soab-red); } .soab-social { text-align: right; } .soab-menu-toggle { display: none; } .soab-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .soab-section { padding-block: 110px; } .soab-eyebrow { margin: 0 0 16px; color: var(--soab-red); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .soab-title, .soab-h2, .soab-h3, .soab-manifesto blockquote { font-family: "Anton", Impact, sans-serif; font-weight: 400; line-height: 0.93; letter-spacing: 0.01em; text-transform: uppercase; } .soab-h2 { margin: 0; font-size: clamp(56px, 8vw, 110px); } .soab-hero { min-height: calc(100svh - 82px); position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.72fr); align-items: center; gap: 6vw; overflow: hidden; padding: 7vw max(5vw, calc((100vw - 1180px) / 2)); background: radial-gradient(circle at 75% 45%, rgba(255, 59, 48, 0.34), transparent 29%), linear-gradient(105deg, #080808 0 58%, #181011 100%); color: white; } .soab-hero::before { content: ""; position: absolute; inset: 0; opacity: 0.23; pointer-events: none; background: repeating-radial-gradient(circle at 10% 20%, transparent 0 2px, rgba(255,255,255,.08) 3px 4px), repeating-linear-gradient(115deg, transparent 0 13px, rgba(255,255,255,.025) 14px 15px); background-size: 7px 7px, 31px 31px; } .soab-hero-copy, .soab-hero-art { position: relative; z-index: 1; } .soab-hero-copy { min-width: 0; } .soab-title { margin: 0; font-size: clamp(58px, 6vw, 82px); } .soab-title span { color: var(--soab-red); white-space: nowrap; } .soab-hero-lead { max-width: 620px; margin: 28px 0 0; color: #d8d4cd; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.55; } .soab-button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .soab-button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 0 24px; border: 1px solid transparent; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: 0.2s ease; } .soab-button:hover { transform: translateY(-2px); color: white; } .soab-button-primary { background: var(--soab-red); color: white; } .soab-button-primary:hover { background: #ff554c; } .soab-button-ghost { border-color: rgba(255,255,255,.4); color: white; } .soab-button-ghost:hover { border-color: white; } .soab-button-dark { background: var(--soab-ink); color: white; } .soab-hero-art { justify-self: end; width: min(440px, 34vw); margin-right: 1vw; transform: rotate(2.5deg); } .soab-hero-art > img { position: relative; z-index: 2; width: 100%; box-shadow: 0 28px 80px rgba(0,0,0,.55); } .soab-album-shadow { position: absolute; inset: 8% -10% -7% 12%; background: var(--soab-red); transform: rotate(-6deg); } .soab-chart { position: absolute; right: -36px; bottom: -34px; z-index: 3; width: 132px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; background: white; color: var(--soab-ink); border-radius: 50%; transform: rotate(-8deg); box-shadow: 0 10px 30px rgba(0,0,0,.35); } .soab-chart strong { font-family: "Anton"; font-size: 45px; line-height: 1; color: var(--soab-red); } .soab-chart span { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .soab-ticker { overflow: hidden; background: var(--soab-red); color: white; } .soab-ticker div { width: max-content; display: flex; gap: 32px; align-items: center; padding: 16px 0; animation: soab-crawl 26s linear infinite; } .soab-ticker span { font-family: "Anton"; font-size: 24px; letter-spacing: .04em; } .soab-ticker i { font-style: normal; } @keyframes soab-crawl { from { transform: translateX(0); } to { transform: translateX(-25%); } } .soab-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 54px; } .soab-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px 28px; } .soab-text-link { padding-bottom: 7px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } #news .soab-h2 { color: var(--soab-heading-muted); } .soab-news-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; } .soab-news-card { background: var(--soab-paper-bright); border: 1px solid var(--soab-line); } .soab-news-image { position: relative; aspect-ratio: 1.45; overflow: hidden; background: #ddd; } .soab-news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .soab-news-card:hover img { transform: scale(1.025); } .soab-news-image time { position: absolute; left: 16px; bottom: 16px; padding: 8px 11px; background: var(--soab-ink); color: white; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .soab-news-copy { position: relative; padding: 30px; } .soab-news-copy .soab-h3 { max-width: 85%; margin: 0; font-size: clamp(34px, 4vw, 61px); } .soab-news-copy .soab-h3 { color: var(--soab-heading-muted); } .soab-news-copy > p:last-child { max-width: 600px; margin: 18px 0 0; color: #5e5b56; line-height: 1.6; } .soab-card-index { position: absolute; right: 24px; top: 22px; margin: 0; color: var(--soab-red); font-family: "Anton"; font-size: 20px; } .soab-shows { background: var(--soab-ink); color: white; } .soab-heading-note { max-width: 280px; margin: 0; color: #9c9993; font-size: 14px; line-height: 1.5; text-align: right; } .soab-shows-panel { min-height: 240px; padding: 10px 0; border-block: 1px solid rgba(255,255,255,.2); } .soab-shows-panel .bit-widget { font-family: "DM Sans", Arial, sans-serif !important; } .soab-shows-panel > a { display: flex; justify-content: center; padding: 50px; color: var(--soab-red); text-decoration: underline; } .soab-split { display: grid; grid-template-columns: .9fr 1fr; gap: 9vw; align-items: center; } #music .soab-h2 { color: var(--soab-heading-muted); } .soab-big-copy { max-width: 520px; font-size: clamp(20px, 2vw, 28px); line-height: 1.45; } .soab-platform-list { margin-top: 42px; border-top: 1px solid var(--soab-line); } .soab-platform-list a { display: grid; grid-template-columns: 48px 1fr auto; padding: 18px 0; border-bottom: 1px solid var(--soab-line); font-size: 18px; font-weight: 600; } .soab-platform-list span { color: var(--soab-red); font-size: 11px; } .soab-platform-list a:hover { color: var(--soab-red); } .soab-album-display { position: relative; padding: 0 42px 42px 0; } .soab-album-display::after { content: ""; position: absolute; inset: 42px 0 0 42px; z-index: -1; background: var(--soab-red); } .soab-album-display img { width: 100%; } .soab-round-link { position: absolute; right: 0; bottom: 0; width: 110px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--soab-ink); color: white; font-family: "Anton"; font-size: 21px; transform: rotate(8deg); } .soab-video { background: var(--soab-red-dark); color: white; } .soab-video .soab-eyebrow { color: var(--soab-ink); } .soab-video-frame { aspect-ratio: 16 / 9; box-shadow: 0 30px 80px rgba(0,0,0,.28); } .soab-video-frame iframe { width: 100%; height: 100%; border: 0; } #merch { color: var(--soab-ink); } #merch .soab-h2, .soab-product-copy h3 { color: var(--soab-heading-muted); } .soab-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } #merch > .soab-section-heading .soab-eyebrow { color: rgba(11, 11, 12, .62); } #merch > .soab-section-heading .soab-text-link { color: var(--soab-ink); } .soab-product-card { overflow: hidden; background: var(--soab-paper-bright); color: var(--soab-ink); border: 1px solid var(--soab-line); } .soab-product-image { aspect-ratio: 1; overflow: hidden; background: #e4e0d7; } .soab-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .soab-product-card:hover .soab-product-image img { transform: scale(1.035); } .soab-product-copy { padding: 24px; } .soab-product-copy h3 { margin: 0; font-family: "Anton"; font-size: clamp(27px, 3vw, 42px); font-weight: 400; line-height: 1; text-transform: uppercase; } .soab-product-copy p { margin: 15px 0; color: var(--soab-red); font-size: 18px; font-weight: 700; } .soab-product-copy span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .soab-section-cta { display: flex; justify-content: center; margin-top: 38px; } .soab-manifesto { text-align: center; } .soab-manifesto blockquote { max-width: 980px; margin: 20px auto; font-size: clamp(56px, 8vw, 116px); line-height: 1.08; } .soab-manifesto > p:not(.soab-eyebrow) { max-width: 650px; margin: 30px auto; color: #5a5752; font-size: 18px; line-height: 1.6; } .soab-contact { background: var(--soab-ink); color: white; } .soab-contact-grid { display: grid; grid-template-columns: .82fr 1fr; gap: 9vw; align-items: start; } .soab-contact .soab-big-copy { color: #b9b5ae; } .soab-contact-form { padding: 34px; background: #171718; border: 1px solid rgba(255,255,255,.15); } .soab-contact-form .wpforms-container { margin: 0; } .soab-contact-form .wpforms-field { padding: 0 0 18px; } .soab-contact-form .wpforms-field-label { color: white !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; } .soab-contact-form .wpforms-field-sublabel, .soab-contact-form .wpforms-field-description, .soab-contact-form .wpforms-field-label-inline, .soab-contact-form .wpforms-field-checkbox label, .soab-contact-form .wpforms-field-gdpr-checkbox label { color: #b9b5ae !important; } .soab-contact-form input[type="text"], .soab-contact-form input[type="email"], .soab-contact-form textarea { width: 100% !important; max-width: none !important; border: 1px solid #454546 !important; border-radius: 0 !important; background: #0d0d0e !important; color: white !important; } .soab-contact-form button[type="submit"] { min-height: 54px !important; padding: 0 24px !important; border: 0 !important; border-radius: 0 !important; background: var(--soab-red) !important; color: white !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } .soab-content { width: min(1100px, calc(100% - 40px)); min-height: 60vh; margin: 0 auto; padding: 80px 0 120px; } .soab-content h1, .soab-content h2, .woocommerce-products-header__title { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; } .soab-content h1 { font-size: clamp(58px, 9vw, 120px); } .soab-article { max-width: 820px; margin: 0 auto; } .soab-article-content { font-size: 18px; line-height: 1.75; } .soab-post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .woocommerce ul.products li.product, .woocommerce div.product { padding: 22px; background: var(--soab-paper-bright); border: 1px solid var(--soab-line); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: "Anton"; font-size: 28px; text-transform: uppercase; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { border-radius: 0; background: var(--soab-red); color: white; } .soab-staging-note { margin: 0 0 28px; padding: 14px 18px; background: #fff3cd; border: 1px solid #e8cf79; color: #5d4a00; font-weight: 600; } .soab-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 90px max(5vw, calc((100vw - 1180px) / 2)) 40px; background: #050505; color: white; } .soab-footer-logo img { width: 170px; } .soab-footer-logo p { color: #77746f; } .soab-footer-links { display: flex; justify-content: flex-end; gap: 100px; } .soab-footer-links div { display: grid; align-content: start; gap: 10px; } .soab-footer-links p { margin: 0 0 10px; color: var(--soab-red); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .soab-footer-links a { color: #bdb9b1; font-size: 14px; } .soab-copyright { grid-column: 1 / -1; margin-top: 60px; padding-top: 25px; border-top: 1px solid #282828; color: #666; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } @media (max-width: 900px) { body.admin-bar .soab-header { top: 46px; } .soab-header { grid-template-columns: 90px 1fr; min-height: 72px; padding: 10px 20px 12px; } .soab-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 24px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; } .soab-nav::-webkit-scrollbar { display: none; } .soab-nav a { flex: 0 0 auto; } .soab-social { display: none; } .soab-brand img { width: 67px; } .soab-hero { min-height: auto; grid-template-columns: 1fr; padding: 80px 24px 100px; } .soab-title { font-size: clamp(64px, 18vw, 110px); } .soab-hero-art { justify-self: center; width: min(76vw, 470px); margin: 30px 0 0; } .soab-section { padding-block: 76px; } .soab-news-grid, .soab-split, .soab-post-list, .soab-contact-grid { grid-template-columns: 1fr; } .soab-product-grid { grid-template-columns: repeat(2, 1fr); } .soab-section-heading { align-items: start; flex-direction: column; } .soab-heading-note { text-align: left; } .soab-album-display { margin-top: 30px; } .soab-footer { grid-template-columns: 1fr; } .soab-footer-links { justify-content: start; } } @media (max-width: 560px) { .soab-shell { width: min(100% - 30px, 1180px); } .soab-nav a { font-size: 10px; } .soab-hero { padding-inline: 17px; } .soab-title { font-size: 20vw; } .soab-hero-lead { font-size: 16px; } .soab-chart { width: 92px; right: -10px; bottom: -25px; } .soab-chart strong { font-size: 32px; } .soab-section-heading .soab-h2 { font-size: 15vw; } .soab-news-copy { padding: 22px; } .soab-news-copy .soab-h3 { max-width: 100%; font-size: 11vw; } .soab-card-index { display: none; } .soab-button-row { flex-direction: column; } .soab-button { width: 100%; } .soab-footer-links { gap: 60px; } .soab-product-grid { grid-template-columns: 1fr; } .soab-contact-form { padding: 22px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .soab-ticker div { animation: none; } *, *::before, *::after { transition-duration: .01ms !important; } } /* Bessere Lesbarkeit der Show-Chronik */
body.page-id-83 .samma-tabelle-global th,
body.page-id-83 .samma-tabelle-global th * { color: #111111 !important; opacity: 1 !important; background-color: #d8d3c8 !important; }
body.page-id-83 .samma-tabelle-global td,
body.page-id-83 .samma-tabelle-global td *,
body.page-id-83 .samma-tabelle-global td a { color: #181817 !important; opacity: 1 !important; background-color: #f1eee6 !important; }
body.page-id-83 .samma-tabelle-global tbody tr:nth-child(even) td,
body.page-id-83 .samma-tabelle-global tbody tr:nth-child(even) td * { background-color: #e7e2d8 !important; }


/* Dunklere Überschrift auf einzelnen Blogbeiträgen */
body.single-post .soab-content .soab-article > h1 { color: var(--soab-heading-muted) !important; }