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

16
index.html
View File

@ -5,10 +5,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ernährungsberatung für Triathleten | tri-hub</title> <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> </head>
<body> <body>
<main id="main-content">
<!-- Shahnam: Produktübersicht -->
<section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
<header class="site-header"> <header class="site-header">
<div class="container brand"> <div class="container brand">
<span class="brand__name">tri-hub<span aria-hidden="true">.</span></span> <span class="brand__name">tri-hub<span aria-hidden="true">.</span></span>
@ -16,8 +20,8 @@
</div> </div>
</header> </header>
<main> <div class="produktuebersicht__main">
<section class="hero" id="produktuebersicht" aria-labelledby="hero-title"> <div class="hero">
<img class="hero__image" <img class="hero__image"
src="images/hero-triathlon.webp" src="images/hero-triathlon.webp"
alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht" alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht"
@ -59,8 +63,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
</main> </div>
<footer> <footer>
<div class="container site-footer__inner"> <div class="container site-footer__inner">
@ -68,6 +72,8 @@
<p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p> <p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p>
</div> </div>
</footer> </footer>
</section>
</main>
</body> </body>
</html> </html>