diff --git a/assets/site.css b/assets/site.css index c2e2555..7104e89 100644 --- a/assets/site.css +++ b/assets/site.css @@ -279,6 +279,7 @@ svg { flex: none; } .tone-3 { --tone: #234f4a; } /* Tiefes Teal */ .tone-4 { --tone: #2f5a45; } /* Moos */ .tone-5 { --tone: #3f6a4c; } /* Waldgrün */ +.tone-6 { --tone: #4a7553; } /* Blattgrün */ .tone-7 { --tone: #bcd69a; } /* Lindgrün */ .tone-8 { --tone: #d0e6a5; } /* Salbei */ .tone-9 { --tone: #e5efd1; } /* Helles Salbei */ @@ -367,20 +368,39 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); } } .statement-by { display: block; text-align: center; margin-top: 28px; font-size: 1.15rem; opacity: .7; } -/* 5 Säulen als große Wörter */ -.words { list-style: none; padding: 0; margin: 10px 0 0; } -.words li { - display: flex; align-items: baseline; gap: clamp(16px, 2vw, 32px); - padding: clamp(10px, 1.4vw, 18px) 0; - border-bottom: 1px solid rgba(255, 255, 255, .12); - font-size: clamp(2.4rem, 6vw, 6rem); +/* 5 Säulen: eine Fläche, jede Zeile in leicht anderem Grünton */ +.pillars { + list-style: none; padding: 0; margin: 0; + border-radius: var(--radius); + overflow: hidden; +} +.pillar { + display: flex; align-items: center; gap: clamp(18px, 3vw, 48px); + background: var(--tone); + color: var(--bg); + padding: clamp(22px, 2.6vw, 36px) clamp(26px, 4.2vw, 72px); + transition: padding .5s var(--ease); +} +.pillar--head { display: block; padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px); } +.pillar--head .kicker { color: var(--sage); opacity: 1; } +.pillar small { flex: none; width: 2.4em; font-size: 1rem; letter-spacing: .1em; opacity: .7; } +.pillar strong { + font-weight: 400; + font-size: clamp(2.4rem, 5.6vw, 5.6rem); line-height: 1; letter-spacing: -.03em; - transition: color .3s var(--ease), padding .4s var(--ease); } -.words li:hover { color: var(--sage); padding-left: 12px; } -.words small { font-size: 1rem; letter-spacing: .1em; color: var(--sage); width: 2.2em; flex: none; } -.words span { font-size: clamp(1.05rem, 1.4vw, 1.3rem); letter-spacing: 0; color: color-mix(in srgb, var(--bg) 70%, transparent); margin-left: auto; text-align: right; max-width: 26ch; line-height: 1.35; } +.pillar span:not(.kicker) { + margin-left: auto; + max-width: 30ch; + text-align: right; + font-size: clamp(1.1rem, 1.5vw, 1.4rem); + line-height: 1.35; + opacity: .82; +} +@media (hover: hover) { + .pillar:not(.pillar--head):hover { padding-left: clamp(40px, 5.5vw, 96px); } +} /* Schritte */ .steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); } @@ -487,7 +507,8 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); } .panel--photo { min-height: 64svh; } .panel--photo.tall { min-height: 80svh; } .plate-panel { min-height: 0; padding-block: 56px; } - .words span { display: none; } + .pillar { flex-wrap: wrap; row-gap: 8px; } + .pillar span:not(.kicker) { margin-left: 0; text-align: left; width: 100%; } } @media (max-width: 767px) { body { font-size: 18px; } diff --git a/hundeschule.html b/hundeschule.html index 45372d4..292073e 100644 --- a/hundeschule.html +++ b/hundeschule.html @@ -54,16 +54,14 @@ -
- Die 5 Säulen - -
+
Preise diff --git a/index.html b/index.html index 10bbd26..52177bf 100644 --- a/index.html +++ b/index.html @@ -105,16 +105,14 @@ — Katha
-
- Meine Philosophie · die 5 Säulen - -
+
diff --git a/tools/build_pages.py b/tools/build_pages.py index 8d0922e..4a8c16b 100644 --- a/tools/build_pages.py +++ b/tools/build_pages.py @@ -116,6 +116,19 @@ def page_hero(img, kicker, title, text, alt): def page(name, title, desc, current, body): write(name, head(title, desc) + "\n" + header(current) + '
\n' + body + footer()) + +PILLAR_TONES = [(2, ""), (3, ""), (4, ""), (5, ""), (6, "")] + +def pillars(title, items): + rows = "\n".join( + f'
  • 0{i + 1}{word}{text}
    • ' + for i, ((t, dark), (word, text)) in enumerate(zip(PILLAR_TONES, items))) + return f'''
      +
    • Meine Philosophie

      {title}

      • +{rows} +
    +''' + def write(name, html): open(os.path.join(OUT, name), "w").write(html) @@ -190,17 +203,7 @@ index = head("Schmacko Napf & Hundetraining by Katha", "Hundetraining, Ernährun — Katha
    -
    - Meine Philosophie · die 5 Säulen - -
    - +{pillars('Die 5 Säulen für Mensch und Hund.', [('Respekt', 'Den Hund als eigenständiges Wesen ernst nehmen.'), ('Ehrlichkeit', 'Klare Signale schaffen Vertrauen.'), ('Geduld', 'Jeder Hund lernt in seinem Tempo.'), ('Konsequenz', 'Klare Regeln – fair und ohne Druck.'), ('Verständnis', 'Bedürfnisse und Gefühle verstehen.')])}
    Hund in einem Laden mit Hundezubehör @@ -246,17 +249,7 @@ page("hundeschule.html", "Hundetraining – Schmacko Napf",
    -
    - Die 5 Säulen - -
    - +{pillars('Die 5 Säulen.', [('Respekt', 'Hunde wollen ernst genommen werden.'), ('Ehrlichkeit', 'Hunde lesen unsere Körpersprache sofort.'), ('Geduld', 'Lernen braucht Zeit und Wiederholung.'), ('Konsequenz', 'Klare Regeln, ganz ohne Gewalt.'), ('Verständnis', 'Realistische Erwartungen an jeden Hund.')])}
    Preise

    Fair und klar.