/* ===================================================================== Designs (Themen) ===================================================================== Fuenf Designs, unter denen ein Verein waehlt (App\Domain\Club\Themes). Sie stehen als Attribut auf . Ein Design aendert die ganze Seite, nicht nur die Ecken: Grundflaeche hell, getoent oder dunkel Hero Farbverlauf, helles Band, Vollton oder Rahmen Karten schwebend, gerahmt, mit Akzentkante oder dunkel Abschnitte Wechsel der Flaechen, Trennlinien, Ausrichtung Tabellen Zebra, Rahmen oder nur Linien Navigation Pillen, Unterstrich oder Versalien Fuss dunkel, hell oder in der Hauptfarbe Schrift welche Familie die Titel tragen und wie sie stehen Was ein Design NIE aendert: die Farbwerte. Sie kommen aus den vier Markenfarben des Vereins (docs/farbkonzept.md) - hier steht kein einziger Farbwert, nur Tokens, Geometrie und Schriftnamen. Anders verteilt werden sie aber sehr wohl: Welche Flaeche die Hauptfarbe traegt und wo der Akzent auftaucht, entscheidet das Design. tests/themes_test.php haelt das so. ===================================================================== */ /* ===================================================================== 1 Klar - die Vorgabe Heller Grund, schwebende Karten, weiche Schatten, Pillen. Steht in site.css; hier nur die Feinheiten, die es abgrenzen. ===================================================================== */ [data-thema="klar"] { --thema-name: "Klar"; } [data-thema="klar"] .section--alt { background: var(--tcz-tint); } [data-thema="klar"] .section__head h2::after { content: ''; display: block; width: 56px; height: 4px; border-radius: var(--tcz-radius-pill); background: var(--tcz-lime); margin-top: var(--tcz-space-4); } /* ===================================================================== 2 Ruhig - heller Hero, gerade Kanten, Linien statt Schatten ===================================================================== */ [data-thema="ruhig"] { --thema-name: "Ruhig"; --tcz-radius-sm: 0px; --tcz-radius-md: 0px; --tcz-radius-lg: 0px; --tcz-radius-pill: 0px; --tcz-shadow-card: none; --tcz-shadow-soft: none; --tcz-shadow-pop: none; --tcz-shadow-btn: none; --tcz-font-head: var(--tcz-font-body); --tcz-section-y: 72px; } /* Der Hero ist hier kein dunkler Block, sondern eine helle Flaeche mit einer kraeftigen Linie in der Hauptfarbe. */ [data-thema="ruhig"] .hero { background: var(--tcz-light); color: var(--tcz-text); border-top: 6px solid var(--tcz-navy); border-bottom: 1px solid var(--tcz-border); } [data-thema="ruhig"] .hero h1 { color: var(--tcz-navy); } [data-thema="ruhig"] .hero p { color: var(--tcz-muted); } [data-thema="ruhig"] .hero__meta { border-top-color: var(--tcz-border); } [data-thema="ruhig"] .hero__meta dt { color: var(--tcz-muted); } [data-thema="ruhig"] .hero__meta dd { color: var(--tcz-navy); } [data-thema="ruhig"] .hero .btn--onnavy { border-color: var(--tcz-border); color: var(--tcz-navy); } [data-thema="ruhig"] h1, [data-thema="ruhig"] h2, [data-thema="ruhig"] h3 { letter-spacing: -0.015em; font-weight: 600; } [data-thema="ruhig"] .section--alt { background: var(--tcz-light); } [data-thema="ruhig"] .section__head { border-left: 3px solid var(--tcz-lime); padding-left: var(--tcz-space-5); } [data-thema="ruhig"] .card, [data-thema="ruhig"] .artikel, [data-thema="ruhig"] .cmkarte, [data-thema="ruhig"] .table__wrap, [data-thema="ruhig"] .formular { border: 1px solid var(--tcz-border); box-shadow: none; } [data-thema="ruhig"] .card:hover, [data-thema="ruhig"] .artikel:hover, [data-thema="ruhig"] .cmkarte:hover { transform: none; box-shadow: none; border-color: var(--tcz-navy); } [data-thema="ruhig"] .btn:hover { transform: none; } [data-thema="ruhig"] .btn--primary { background: var(--tcz-navy); color: var(--tcz-on-navy); } [data-thema="ruhig"] .btn--primary:hover { background: var(--tcz-navy-dark); color: var(--tcz-on-navy); } [data-thema="ruhig"] .nav a { border-radius: 0; padding-inline: var(--tcz-space-3); } [data-thema="ruhig"] .nav a:hover { background: transparent; box-shadow: inset 0 -2px 0 var(--tcz-lime); } [data-thema="ruhig"] .nav a.is-active { background: transparent; box-shadow: inset 0 -3px 0 var(--tcz-navy); } [data-thema="ruhig"] .eyebrow { background: transparent; color: var(--tcz-lime-text); padding: 0; letter-spacing: .18em; } [data-thema="ruhig"] .table th { border-bottom: 2px solid var(--tcz-navy); } [data-thema="ruhig"] .table tr:nth-child(even) td { background: var(--tcz-light); } [data-thema="ruhig"] .footer { background: var(--tcz-navy); } /* ===================================================================== 3 Klassisch - Serifentitel, Rahmen, Mittelachse, Vollton-Hero ===================================================================== */ [data-thema="klassisch"] { --thema-name: "Klassisch"; --tcz-radius-sm: 2px; --tcz-radius-md: 3px; --tcz-radius-lg: 4px; --tcz-radius-pill: 2px; --tcz-shadow-card: none; --tcz-shadow-soft: none; --tcz-shadow-pop: none; --tcz-shadow-btn: none; --tcz-font-head: Georgia, "Times New Roman", serif; --tcz-lh-base: 1.72; --tcz-section-y: 84px; } /* Vollton in der Hauptfarbe, kein Verlauf, dafuer ein Rahmen im Akzent. */ [data-thema="klassisch"] .hero { background: var(--tcz-navy); border-bottom: 5px solid var(--tcz-lime); text-align: center; } [data-thema="klassisch"] .hero__inner { margin-inline: auto; } [data-thema="klassisch"] .hero .row { justify-content: center; } [data-thema="klassisch"] .hero__meta { justify-content: center; text-align: center; } [data-thema="klassisch"] h1, [data-thema="klassisch"] h2, [data-thema="klassisch"] h3 { letter-spacing: 0; font-weight: 600; line-height: 1.24; } /* Abschnittsköpfe stehen mittig, mit Linie darunter - wie im Programmheft. */ [data-thema="klassisch"] .section__head { margin-inline: auto; text-align: center; border-bottom: 1px solid var(--tcz-border); padding-bottom: var(--tcz-space-5); } [data-thema="klassisch"] .section--alt { background: var(--tcz-light); } [data-thema="klassisch"] .card, [data-thema="klassisch"] .artikel, [data-thema="klassisch"] .cmkarte, [data-thema="klassisch"] .table__wrap, [data-thema="klassisch"] .formular { border: 1px solid var(--tcz-navy); box-shadow: none; } [data-thema="klassisch"] .card:hover, [data-thema="klassisch"] .artikel:hover, [data-thema="klassisch"] .cmkarte:hover { transform: none; box-shadow: none; } [data-thema="klassisch"] .btn:hover { transform: none; } [data-thema="klassisch"] .btn--primary { background: var(--tcz-navy); color: var(--tcz-on-navy); border-color: var(--tcz-navy); } [data-thema="klassisch"] .btn--outline { border-color: var(--tcz-navy); color: var(--tcz-navy); } [data-thema="klassisch"] .nav a { border-radius: 0; } [data-thema="klassisch"] .nav a:hover { background: transparent; color: var(--tcz-lime-text); } [data-thema="klassisch"] .nav a.is-active { background: transparent; box-shadow: inset 0 -2px 0 var(--tcz-lime); } [data-thema="klassisch"] .eyebrow { background: transparent; color: var(--tcz-lime-text); border-radius: 0; padding: 0; letter-spacing: .2em; font-style: italic; } [data-thema="klassisch"] .table th { border-bottom: 1px solid var(--tcz-navy); } [data-thema="klassisch"] .table td { border-bottom: 1px dotted var(--tcz-border); } [data-thema="klassisch"] .footer { background: var(--tcz-navy); border-top: 5px solid var(--tcz-lime); } /* ===================================================================== 4 Kraftvoll - dunkle Seite, Versaltitel, Akzentkanten --------------------------------------------------------------------- Das einzige Design, das die ganze Seite dunkel stellt: Die dunkle Hauptfarbe traegt alles, Karten stehen eine Stufe heller darauf. ===================================================================== */ [data-thema="kraftvoll"] { --thema-name: "Kraftvoll"; --tcz-radius-sm: 2px; --tcz-radius-md: 4px; --tcz-radius-lg: 6px; --tcz-radius-pill: 3px; --tcz-section-y: 76px; --tcz-text: var(--tcz-white); --tcz-muted: var(--tcz-on-dark-muted); --tcz-border: var(--tcz-on-dark-line); --tcz-light: var(--tcz-navy); --tcz-tint: rgba(255, 255, 255, .05); } [data-thema="kraftvoll"] body { background: var(--tcz-navy-dark); color: var(--tcz-white); } [data-thema="kraftvoll"] h1, [data-thema="kraftvoll"] h2, [data-thema="kraftvoll"] h3, [data-thema="kraftvoll"] h4 { color: var(--tcz-white); } [data-thema="kraftvoll"] h1, [data-thema="kraftvoll"] h2 { text-transform: uppercase; letter-spacing: -0.005em; font-weight: 700; } [data-thema="kraftvoll"] .header { background: var(--tcz-navy-dark); border-bottom: 1px solid var(--tcz-on-dark-line); } [data-thema="kraftvoll"] .logo { color: var(--tcz-white); } [data-thema="kraftvoll"] .logo__text span { color: var(--tcz-on-dark-muted); } [data-thema="kraftvoll"] .nav a { color: var(--tcz-on-dark); border-radius: var(--tcz-radius-sm); } [data-thema="kraftvoll"] .nav a:hover { background: rgba(255, 255, 255, .08); color: var(--tcz-white); } [data-thema="kraftvoll"] .nav a.is-active { background: var(--tcz-lime); color: var(--tcz-on-lime); } [data-thema="kraftvoll"] .hero { border-bottom: 6px solid var(--tcz-lime); } [data-thema="kraftvoll"] .hero h1 { font-size: calc(var(--tcz-size-3xl) * 1.08); } [data-thema="kraftvoll"] .section--alt { background: var(--tcz-navy); } [data-thema="kraftvoll"] .section--navy { background: var(--tcz-navy); } [data-thema="kraftvoll"] .section__head h2 { border-left: 8px solid var(--tcz-lime); padding-left: var(--tcz-space-4); } [data-thema="kraftvoll"] .card, [data-thema="kraftvoll"] .artikel, [data-thema="kraftvoll"] .cmkarte, [data-thema="kraftvoll"] .formular, [data-thema="kraftvoll"] .table__wrap, [data-thema="kraftvoll"] .empty { background: var(--tcz-navy); border: 1px solid var(--tcz-on-dark-line); border-top: 4px solid var(--tcz-lime); box-shadow: none; color: var(--tcz-white); } [data-thema="kraftvoll"] .card:hover, [data-thema="kraftvoll"] .artikel:hover, [data-thema="kraftvoll"] .cmkarte:hover { transform: none; border-color: var(--tcz-lime); box-shadow: none; } [data-thema="kraftvoll"] .card__media { background: var(--tcz-navy-dark); } [data-thema="kraftvoll"] .eyebrow { background: var(--tcz-lime); color: var(--tcz-on-lime); border-radius: var(--tcz-radius-sm); letter-spacing: .14em; } [data-thema="kraftvoll"] .btn { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: var(--tcz-size-xs); } [data-thema="kraftvoll"] .btn--primary { background: var(--tcz-lime); color: var(--tcz-on-lime); } [data-thema="kraftvoll"] .btn--outline { background: transparent; border-color: var(--tcz-on-dark-line); color: var(--tcz-white); } [data-thema="kraftvoll"] .btn--outline:hover { background: rgba(255, 255, 255, .08); } [data-thema="kraftvoll"] .table th { color: var(--tcz-on-dark-muted); border-bottom-color: var(--tcz-on-dark-line); } [data-thema="kraftvoll"] .table td { border-bottom-color: var(--tcz-on-dark-line); color: var(--tcz-white); } [data-thema="kraftvoll"] .table td.is-winner { color: var(--tcz-lime); } [data-thema="kraftvoll"] .field input, [data-thema="kraftvoll"] .field select, [data-thema="kraftvoll"] .field textarea { background: var(--tcz-navy-dark); color: var(--tcz-white); border-color: var(--tcz-on-dark-line); } [data-thema="kraftvoll"] .footer { border-top: 6px solid var(--tcz-lime); } /* ===================================================================== 5 Weich - getoenter Grund, grosse Rundungen, viel Luft ===================================================================== */ [data-thema="weich"] { --thema-name: "Weich"; --tcz-radius-sm: 16px; --tcz-radius-md: 28px; --tcz-radius-lg: 40px; --tcz-radius-pill: 999px; --tcz-lh-base: 1.72; --tcz-section-y: 104px; } /* Der Grund ist nicht weiss, sondern eine Tönung der Hauptfarbe. */ [data-thema="weich"] body { background: var(--tcz-light); } [data-thema="weich"] .section--alt { background: var(--tcz-accent-tint); border-radius: var(--tcz-radius-lg); margin-inline: var(--tcz-space-5); } /* Der Hero schwebt als runder Block: rundet er nur unten, bleiben an den Seitenraendern weisse Zwickel stehen, sobald der Abschnitt darunter ebenfalls farbig ist. */ [data-thema="weich"] .hero, [data-thema="weich"] .section--navy, [data-thema="weich"] .meisterjahr { margin: var(--tcz-space-4) var(--tcz-space-5) 0; border-radius: var(--tcz-radius-lg); overflow: hidden; } [data-thema="weich"] h1, [data-thema="weich"] h2 { letter-spacing: -0.035em; } [data-thema="weich"] .card, [data-thema="weich"] .artikel, [data-thema="weich"] .cmkarte, [data-thema="weich"] .formular, [data-thema="weich"] .table__wrap, [data-thema="weich"] .empty { background: var(--tcz-white); border-color: transparent; box-shadow: var(--tcz-shadow-card); } [data-thema="weich"] .card__body { padding: var(--tcz-space-6); } [data-thema="weich"] .btn--primary { background: linear-gradient(135deg, var(--tcz-lime), var(--tcz-lime-dark)); color: var(--tcz-on-lime); } [data-thema="weich"] .eyebrow { background: var(--tcz-accent-tint); color: var(--tcz-lime-text); } [data-thema="weich"] .table th { border-bottom: 0; } [data-thema="weich"] .table td { border-bottom: 1px solid var(--tcz-tint); } [data-thema="weich"] .footer { border-top-left-radius: var(--tcz-radius-lg); border-top-right-radius: var(--tcz-radius-lg); } /* ===================================================================== Umschalter der Demo --------------------------------------------------------------------- Nur auf Instanzen mit demo.theme_switcher = 1. Zwei Reihen: oben das Design, unten die Farbwelt. Ein Verein sieht die Leiste nie. ===================================================================== */ .themawahl { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; background: var(--tcz-navy-dark); color: var(--tcz-white); border-radius: 18px; padding: 10px 12px; box-shadow: 0 18px 44px -14px rgba(var(--tcz-navy-dark-rgb), .65); font-family: var(--tcz-font-body); font-size: var(--tcz-size-xs); max-width: calc(100vw - 20px); } .themawahl__reihe { display: flex; align-items: center; gap: 4px; overflow-x: auto; } .themawahl__titel { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .65; padding-inline: 8px; white-space: nowrap; min-width: 68px; } .themawahl a { color: var(--tcz-white); text-decoration: none; padding: 7px 13px; border-radius: 999px; white-space: nowrap; font-weight: 600; transition: background-color .15s ease, color .15s ease; } .themawahl a:hover { background: rgba(255, 255, 255, .14); } .themawahl a.is-aktiv { background: var(--tcz-lime); color: var(--tcz-on-lime); } .themawahl__punkt { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 7px; vertical-align: -1px; border: 1px solid rgba(255, 255, 255, .5); } @media (max-width: 720px) { .themawahl { font-size: 11px; padding: 8px; bottom: 8px; } .themawahl a { padding: 6px 10px; } .themawahl__titel { min-width: 52px; padding-inline: 4px; } } @media print { .themawahl { display: none; } }