3024588
/
trihub-ernaehrung-advinters
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Scope product styles for integration

integration/ernaehrung-review
3015418 2026-09-28 12:27:23 +02:00
parent 8535e18b41
commit b34ac27023
3 changed files with 134 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
css/style.css → css/produktuebersicht.css
View File

@ -1,4 +1,5 @@
:root {
/* Shahnam: Styles und Variablen bleiben innerhalb der Produktuebersicht. */
.produktuebersicht {
color-scheme: dark;
--background: #0d0d1a;
--text: #f8fafc;
@ -10,13 +11,16 @@
background: var(--background);
}
*,
*::before,
*::after {
.produktuebersicht,
.produktuebersicht *,
.produktuebersicht::before,
.produktuebersicht *::before,
.produktuebersicht::after,
.produktuebersicht *::after {
box-sizing: border-box;
}
body {
.produktuebersicht {
display: flex;
flex-direction: column;
min-height: 100vh;
@ -25,39 +29,39 @@ body {
line-height: 1.6;
}
p,
h1 {
.produktuebersicht p,
.produktuebersicht h1 {
margin: 0;
}
.container {
.produktuebersicht .container {
width: min(1680px, calc(100% - clamp(40px, 10vw, 192px)));
margin-inline: auto;
}
.site-header {
.produktuebersicht .site-header {
border-top: 3px solid var(--accent);
}
.brand {
.produktuebersicht .brand {
display: flex;
align-items: center;
gap: 24px;
min-height: 88px;
}
.brand__name {
.produktuebersicht .brand__name {
font-size: 30px;
font-weight: 750;
line-height: 1;
letter-spacing: -1.5px;
}
.brand__name span {
.produktuebersicht .brand__name span {
color: var(--accent);
}
.brand__label {
.produktuebersicht .brand__label {
padding-left: 24px;
border-left: 1px solid var(--border);
color: var(--muted);
@ -65,12 +69,12 @@ h1 {
letter-spacing: 0.025em;
}
main {
.produktuebersicht .produktuebersicht__main {
display: flex;
flex: 1;
}
.hero {
.produktuebersicht .hero {
position: relative;
isolation: isolate;
display: flex;
@ -79,8 +83,8 @@ main {
border-block: 1px solid var(--border);
}
.hero__image,
.hero::after {
.produktuebersicht .hero__image,
.produktuebersicht .hero::after {
position: absolute;
z-index: -1;
inset: 0;
@ -88,31 +92,31 @@ main {
height: 100%;
}
.hero__image {
.produktuebersicht .hero__image {
object-fit: cover;
object-position: center 42%;
}
.hero::after {
.produktuebersicht .hero::after {
background:
linear-gradient(0deg, rgb(13 13 26 / 96%), transparent 42%),
linear-gradient(90deg, rgb(13 13 26 / 94%) 0%, rgb(13 13 26 / 79%) 35%, rgb(13 13 26 / 38%) 72%, rgb(13 13 26 / 25%) 100%);
content: "";
}
.hero__inner {
.produktuebersicht .hero__inner {
display: flex;
flex-direction: column;
padding-block: clamp(32px, 5vh, 64px) 28px;
}
.hero__content {
.produktuebersicht .hero__content {
width: min(100%, 1000px);
margin-block: auto;
padding-block: 24px 64px;
}
.hero__eyebrow {
.produktuebersicht .hero__eyebrow {
display: flex;
align-items: center;
gap: 12px;
@ -124,7 +128,7 @@ main {
text-transform: uppercase;
}
.hero__eyebrow::before {
.produktuebersicht .hero__eyebrow::before {
width: 28px;
height: 1px;
flex-shrink: 0;
@ -132,7 +136,7 @@ main {
content: "";
}
h1 {
.produktuebersicht h1 {
max-width: 100%;
font-size: clamp(42px, 4.9vw, 88px);
font-weight: 550;
@ -142,13 +146,13 @@ h1 {
overflow-wrap: break-word;
}
h1 span {
.produktuebersicht h1 span {
display: block;
margin-top: 8px;
color: var(--accent);
}
.hero__description {
.produktuebersicht .hero__description {
max-width: 65ch;
margin-top: 30px;
color: #d1d7df;
@ -156,7 +160,7 @@ h1 span {
line-height: 1.85;
}
.hero__details {
.produktuebersicht .hero__details {
display: grid;
grid-template-columns: minmax(0, 1fr) 250px;
align-items: center;
@ -165,7 +169,7 @@ h1 span {
border-top: 1px solid var(--border);
}
.benefits {
.produktuebersicht .benefits {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
@ -174,24 +178,24 @@ h1 span {
list-style: none;
}
.benefits li {
.produktuebersicht .benefits li {
display: flex;
align-items: baseline;
gap: 14px;
}
.benefits__number {
.produktuebersicht .benefits__number {
color: #64e5b7;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.benefits p {
.produktuebersicht .benefits p {
font-size: 14px;
font-weight: 500;
}
.benefits p span {
.produktuebersicht .benefits p span {
display: block;
margin-top: 4px;
color: var(--muted);
@ -199,19 +203,19 @@ h1 span {
font-weight: 400;
}
.hero__caption {
.produktuebersicht .hero__caption {
padding-left: 24px;
border-left: 1px solid var(--border);
}
.hero__caption-label {
.produktuebersicht .hero__caption-label {
color: var(--muted);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.hero__slogan {
.produktuebersicht .hero__slogan {
margin-top: 8px;
font-size: 22px;
font-weight: 450;
@ -219,7 +223,7 @@ h1 span {
letter-spacing: -0.025em;
}
.site-footer__inner {
.produktuebersicht .site-footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
@ -229,19 +233,19 @@ h1 span {
font-size: 12px;
}
.site-footer__inner p > span {
.produktuebersicht .site-footer__inner p > span {
margin-left: 12px;
color: var(--muted);
}
.site-footer__note {
.produktuebersicht .site-footer__note {
display: flex;
align-items: center;
gap: 9px;
color: var(--muted);
}
.site-footer__note > span {
.produktuebersicht .site-footer__note > span {
width: 5px;
height: 5px;
flex-shrink: 0;
@ -250,115 +254,115 @@ h1 span {
}
@media (max-width: 1100px) {
.hero__image {
.produktuebersicht .hero__image {
object-position: 80% center;
}
.hero::after {
.produktuebersicht .hero::after {
background:
linear-gradient(0deg, rgb(13 13 26 / 96%), transparent 42%),
linear-gradient(90deg, rgb(13 13 26 / 92%), rgb(13 13 26 / 70%) 65%, rgb(13 13 26 / 48%));
}
.hero__content {
.produktuebersicht .hero__content {
max-width: 85%;
}
.hero__details {
.produktuebersicht .hero__details {
grid-template-columns: minmax(0, 1fr) 200px;
gap: 28px;
}
.benefits li {
.produktuebersicht .benefits li {
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 700px) {
.brand {
.produktuebersicht .brand {
min-height: 76px;
gap: 16px;
}
.brand__label {
.produktuebersicht .brand__label {
padding-left: 16px;
font-size: 11px;
}
.hero__image {
.produktuebersicht .hero__image {
object-position: 85% center;
}
.hero::after {
.produktuebersicht .hero::after {
background: linear-gradient(90deg, rgb(13 13 26 / 87%), rgb(13 13 26 / 65%)),
linear-gradient(0deg, var(--background), transparent 55%);
}
.hero__content {
.produktuebersicht .hero__content {
max-width: 100%;
padding-block: 12px 40px;
}
.hero__eyebrow {
.produktuebersicht .hero__eyebrow {
gap: 8px;
font-size: 10px;
letter-spacing: 0.11em;
}
.hero__eyebrow::before {
.produktuebersicht .hero__eyebrow::before {
width: 20px;
}
.hero__description {
.produktuebersicht .hero__description {
margin-top: 24px;
}
.hero__details {
.produktuebersicht .hero__details {
grid-template-columns: 1fr;
gap: 28px;
padding-top: 24px;
}
.benefits {
.produktuebersicht .benefits {
gap: 16px;
}
.benefits p {
.produktuebersicht .benefits p {
font-size: 12px;
}
.hero__caption {
.produktuebersicht .hero__caption {
padding-left: 16px;
border-left-color: var(--accent);
}
.hero__slogan {
.produktuebersicht .hero__slogan {
font-size: 20px;
}
.site-footer__inner {
.produktuebersicht .site-footer__inner {
align-items: flex-start;
flex-direction: column;
gap: 14px;
}
.site-footer__inner p > span {
.produktuebersicht .site-footer__inner p > span {
margin-left: 0;
}
.site-footer__inner > p:first-child span {
.produktuebersicht .site-footer__inner > p:first-child span {
display: block;
margin-top: 4px;
}
}
@media (max-width: 360px) {
.benefits {
.produktuebersicht .benefits {
grid-template-columns: 1fr;
}
.benefits li {
.produktuebersicht .benefits li {
flex-direction: row;
gap: 14px;
}

10
css/site.css 100644
View File

@ -0,0 +1,10 @@
:root {
color-scheme: dark;
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
color: #f8fafc;
background: #0d0d1a;
}
body {
margin: 0;
}

110
index.html
View File

@ -5,69 +5,75 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ernährungsberatung für Triathleten | tri-hub</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/produktuebersicht.css">
</head>
<body>
<header class="site-header">
<div class="container brand">
<span class="brand__name">tri-hub<span aria-hidden="true">.</span></span>
<span class="brand__label">Ernährungsberatung</span>
</div>
</header>
<main>
<section class="hero" id="produktuebersicht" aria-labelledby="hero-title">
<img class="hero__image"
src="images/hero-triathlon.webp"
alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht"
width="1920" height="1080" fetchpriority="high">
<div class="container hero__inner">
<div class="hero__content">
<p class="hero__eyebrow">Der Text wärmt sich noch auf</p>
<h1 id="hero-title">
Überschrift. Weitere Zeile.
<span>Akzentzeile.</span>
</h1>
<p class="hero__description">
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.
</p>
<main id="main-content">
<!-- Shahnam: Produktübersicht -->
<section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
<header class="site-header">
<div class="container brand">
<span class="brand__name">tri-hub<span aria-hidden="true">.</span></span>
<span class="brand__label">Ernährungsberatung</span>
</div>
</header>
<div class="hero__details">
<ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung">
<li>
<span class="benefits__number" aria-hidden="true">01</span>
<p>Erster Vorteil <span>Text folgt</span></p>
</li>
<li>
<span class="benefits__number" aria-hidden="true">02</span>
<p>Zweiter Vorteil <span>Text folgt</span></p>
</li>
<li>
<span class="benefits__number" aria-hidden="true">03</span>
<p>Dritter Vorteil <span>Text folgt</span></p>
</li>
</ul>
<div class="produktuebersicht__main">
<div class="hero">
<img class="hero__image"
src="images/hero-triathlon.webp"
alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht"
width="1920" height="1080" fetchpriority="high">
<div class="hero__caption">
<p class="hero__caption-label">Bildunterschrift folgt</p>
<p class="hero__slogan">Slogan folgt. Weitere Zeile.</p>
<div class="container hero__inner">
<div class="hero__content">
<p class="hero__eyebrow">Der Text wärmt sich noch auf</p>
<h1 id="hero-title">
Überschrift. Weitere Zeile.
<span>Akzentzeile.</span>
</h1>
<p class="hero__description">
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.
</p>
</div>
<div class="hero__details">
<ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung">
<li>
<span class="benefits__number" aria-hidden="true">01</span>
<p>Erster Vorteil <span>Text folgt</span></p>
</li>
<li>
<span class="benefits__number" aria-hidden="true">02</span>
<p>Zweiter Vorteil <span>Text folgt</span></p>
</li>
<li>
<span class="benefits__number" aria-hidden="true">03</span>
<p>Dritter Vorteil <span>Text folgt</span></p>
</li>
</ul>
<div class="hero__caption">
<p class="hero__caption-label">Bildunterschrift folgt</p>
<p class="hero__slogan">Slogan folgt. Weitere Zeile.</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container site-footer__inner">
<p>Abschlusstext folgt. <span>Ergänzender Text folgt.</span></p>
<p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p>
</div>
</footer>
</section>
</main>
<footer>
<div class="container site-footer__inner">
<p>Abschlusstext folgt. <span>Ergänzender Text folgt.</span></p>
<p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p>
</div>
</footer>
</body>
</html>