diff --git a/css/design-tokens.css b/css/design-tokens.css new file mode 100644 index 0000000..83d7c2b --- /dev/null +++ b/css/design-tokens.css @@ -0,0 +1,23 @@ +:root { + --tri-bg: #0d0d1a; + --tri-surface: #1a1a2e; + --tri-accent: #10b981; + --tri-white: #ffffff; + --tri-text: #f8fafc; + --tri-muted: #94a3b8; + --tri-border: rgb(148 163 184 / 20%); + --tri-font-body: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; + --tri-font-heading: var(--tri-font-body); + --tri-content-width: 1240px; +} + +body { + font-family: var(--tri-font-body); +} + +button, +input, +select, +textarea { + font-family: inherit; +} diff --git a/css/produktuebersicht.css b/css/produktuebersicht.css new file mode 100644 index 0000000..cfd16c7 --- /dev/null +++ b/css/produktuebersicht.css @@ -0,0 +1,240 @@ +.produkt-hero, +.produkt-hero * { + box-sizing: border-box; +} + +.produkt-hero { + background: var(--tri-bg); + color: var(--tri-text); + font-family: var(--tri-font-body); + line-height: 1.6; + border-top: 4px solid var(--tri-accent); +} + +.produkt-hero__container { + width: min(var(--tri-content-width), calc(100% - 96px)); + margin-inline: auto; +} + +.produkt-hero__brand { + display: flex; + align-items: center; + gap: 20px; + padding-block: 28px; + border-bottom: 1px solid var(--tri-border); +} + +.produkt-hero__wordmark { + color: var(--tri-white); + font-size: 28px; + font-weight: 750; + line-height: 1; + letter-spacing: -1.4px; +} + +.produkt-hero__wordmark span { + color: var(--tri-accent); +} + +.produkt-hero__brand-label { + padding-left: 20px; + border-left: 1px solid var(--tri-border); + color: var(--tri-muted); + font-size: 13px; + letter-spacing: 0.035em; +} + +.produkt-hero__layout { + display: grid; + grid-template-columns: 1.15fr 1fr; + gap: clamp(32px, 5vw, 72px); + align-items: center; + padding-block: clamp(36px, 5vw, 64px); +} + +.produkt-hero__content { + min-width: 0; +} + +.produkt-hero__eyebrow { + margin: 0 0 22px; + color: var(--tri-accent); + font-size: 11px; + font-weight: 650; + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.produkt-hero__title { + margin: 0; + color: var(--tri-white); + font-family: var(--tri-font-heading); + font-size: clamp(38px, 4.2vw, 59px); + font-weight: 500; + line-height: 1.14; + letter-spacing: -0.04em; + overflow-wrap: break-word; +} + +.produkt-hero__title span { + color: var(--tri-accent); +} + +.produkt-hero__description { + max-width: 51ch; + margin: 26px 0 0; + color: var(--tri-muted); + font-size: 16px; + line-height: 1.8; +} + +.produkt-hero__benefits { + display: grid; + gap: 12px; + margin: 27px 0 0; + padding: 0; + list-style: none; + font-size: 13px; + line-height: 1.65; +} + +.produkt-hero__benefits li { + position: relative; + padding-left: 22px; +} + +.produkt-hero__benefits li::before { + position: absolute; + top: 0.7em; + left: 0; + width: 9px; + height: 2px; + background: var(--tri-accent); + content: ""; +} + +.produkt-hero__visual { + position: relative; + isolation: isolate; + display: grid; + align-items: end; + aspect-ratio: 1 / 1.12; + min-width: 0; + margin: 0; + overflow: hidden; + border: 1px solid var(--tri-border); + border-radius: 3px; + background: var(--tri-surface); +} + +.produkt-hero__image { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: 80% center; +} + +.produkt-hero__caption { + position: relative; + z-index: 1; + padding: 48px 32px 30px; + background: linear-gradient(transparent, rgb(13 13 26 / 92%) 45%); +} + +.produkt-hero__caption-label { + display: block; + padding-left: 12px; + border-left: 2px solid var(--tri-accent); + color: var(--tri-text); + font-size: 10px; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.produkt-hero__slogan { + margin: 16px 0 0; + color: var(--tri-white); + font-family: var(--tri-font-heading); + font-size: clamp(28px, 2.8vw, 39px); + line-height: 1.2; + letter-spacing: -0.025em; +} + +.produkt-hero__footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + padding-block: 22px 28px; + border-top: 1px solid var(--tri-border); + font-size: 12px; +} + +.produkt-hero__footer p { + margin: 0; +} + +.produkt-hero__footer p span, +.produkt-hero__footer-note { + color: var(--tri-muted); +} + +@media (max-width: 900px) { + .produkt-hero__container { + width: calc(100% - 48px); + } + + .produkt-hero__layout { + grid-template-columns: 1fr; + gap: 36px; + } + + .produkt-hero__title { + font-size: clamp(36px, 6.4vw, 56px); + } + + .produkt-hero__description { + max-width: 60ch; + } + + .produkt-hero__visual { + aspect-ratio: 4 / 3; + min-height: 300px; + } +} + +@media (max-width: 480px) { + .produkt-hero__container { + width: calc(100% - 36px); + } + + .produkt-hero__brand { + gap: 14px; + padding-block: 24px; + } + + .produkt-hero__brand-label { + padding-left: 14px; + font-size: 11px; + } + + .produkt-hero__description { + font-size: 15px; + } + + .produkt-hero__visual { + aspect-ratio: 1; + } + + .produkt-hero__caption { + padding: 48px 24px 26px; + } + + .produkt-hero__footer { + align-items: flex-start; + flex-direction: column; + gap: 12px; + } +} diff --git a/images/hero-triathlon.webp b/images/hero-triathlon.webp new file mode 100644 index 0000000..239ac6d Binary files /dev/null and b/images/hero-triathlon.webp differ diff --git a/index.html b/index.html index c8edbe7..8987bf8 100644 --- a/index.html +++ b/index.html @@ -4,26 +4,68 @@ - Ernährungsberater + Ernährungsberatung für Triathleten | tri-hub + + - -
+ +
-
-
+
-
- -
+ +
-
- -
+ +
+
+
+ tri-hub + Ernährungsberatung +
+
+
+

Der Text wärmt sich noch auf

+

+ Überschrift.
+ Weitere Zeile.
+ Akzentzeile. +

+

+ Hier folgt eine kurze Beschreibung der Ernährungsberatung. + Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt, + sobald die Inhalte vorliegen. +

+ +
    +
  • Erster Vorteil – Text folgt
    • +
  • Zweiter Vorteil – Text folgt
    • +
  • Dritter Vorteil – Text folgt
    • +
+
+ +
+ Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht +
+ Bildunterschrift folgt +

Slogan folgt.
Weitere Zeile.

+
+
+
+ +
+

Abschlusstext folgt.
Ergänzender Text folgt.

+ Kurzhinweis folgt. +
+
- \ No newline at end of file + diff --git a/script.js b/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/style.css b/style.css deleted file mode 100644 index e69de29..0000000