108 lines
4.1 KiB
CSS
108 lines
4.1 KiB
CSS
/* 4. Hero – Sans Serif, Original-Hintergrund und gerahmtes Foto */
|
||
.hero {
|
||
position: relative;
|
||
isolation: isolate;
|
||
display: grid;
|
||
grid-template-columns: 1.08fr 1fr;
|
||
gap: 56px;
|
||
align-items: start;
|
||
padding-block: 64px 72px;
|
||
}
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 0 calc((100vw - 100%) / -2);
|
||
pointer-events: none;
|
||
background: linear-gradient(rgb(4 14 20 / 40%), rgb(4 14 20 / 82%)),
|
||
url('../../assets/images/hero/trihub-ribbon.webp') center / cover;
|
||
opacity: .2;
|
||
}
|
||
.eyebrow {
|
||
color: var(--quiet);
|
||
font-size: .75rem;
|
||
font-weight: 600;
|
||
letter-spacing: .22em;
|
||
line-height: 1.65;
|
||
}
|
||
.hero-copy > .eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 8px 14px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 999px;
|
||
background: rgb(255 255 255 / 4%);
|
||
color: var(--muted);
|
||
font-size: .6875rem;
|
||
letter-spacing: .16em;
|
||
}
|
||
.tiny-line { width: 16px; height: 1px; flex-shrink: 0; background: var(--accent-warm); }
|
||
h1 {
|
||
margin-block: 28px;
|
||
font-size: clamp(2.75rem, 4.65vw, 4.5rem);
|
||
font-weight: 600;
|
||
letter-spacing: -.05em;
|
||
line-height: 1.06;
|
||
}
|
||
h1 em { color: inherit; font: inherit; }
|
||
.hero-intro { max-width: 510px; color: rgb(255 255 255 / 74%); font-size: 1.125rem; line-height: 1.8; }
|
||
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
|
||
.hero-note { margin-top: 26px; color: var(--quiet); font-size: .875rem; }
|
||
.check { margin-right: 7px; color: rgb(255 255 255 / 72%); }
|
||
.hero-visual {
|
||
position: relative;
|
||
height: 570px;
|
||
padding: 12px;
|
||
overflow: hidden;
|
||
border: 1px solid rgb(255 255 255 / 12%);
|
||
border-radius: 2rem;
|
||
background: var(--panel);
|
||
box-shadow: 0 24px 60px rgb(0 0 0 / 22%);
|
||
}
|
||
.hero-visual > img { width: 100%; height: 100%; border-radius: 1.4rem; object-position: center; }
|
||
.hero-visual figcaption {
|
||
position: absolute;
|
||
right: 28px;
|
||
bottom: 28px;
|
||
left: 28px;
|
||
padding: 22px 24px;
|
||
border: 1px solid rgb(255 255 255 / 14%);
|
||
border-radius: 1.4rem;
|
||
background: rgb(3 13 18 / 84%);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
}
|
||
.hero-visual figcaption span { color: var(--quiet); font-size: .75rem; letter-spacing: .19em; }
|
||
.hero-visual figcaption p { margin-top: 10px; font-size: 1.25rem; font-weight: 500; line-height: 1.5; }
|
||
.image-tag {
|
||
position: absolute;
|
||
top: 28px;
|
||
right: 28px;
|
||
padding: 10px 16px;
|
||
border: 1px solid rgb(255 255 255 / 18%);
|
||
border-radius: 1rem;
|
||
background: rgb(3 13 18 / 78%);
|
||
backdrop-filter: blur(12px);
|
||
color: var(--muted);
|
||
font-size: .6875rem;
|
||
letter-spacing: .13em;
|
||
text-align: center;
|
||
}
|
||
.image-tag b { display: block; margin-top: 2px; color: #fff; font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
|
||
.values-strip { border-block: 1px solid var(--line); background: rgb(255 255 255 / 2%); }
|
||
.values-strip .shell { display: flex; justify-content: center; align-items: center; gap: 60px; padding-block: 22px; color: var(--muted); font-size: .875rem; }
|
||
.values-strip i { color: rgb(255 255 255 / 24%); font-size: .75rem; font-style: normal; }
|
||
|
||
/* 5. Vorteile und wiederkehrende Sektionsüberschriften */
|
||
.section { padding-block: 96px; }
|
||
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; margin-bottom: 44px; }
|
||
.section-heading h2 { margin-top: 16px; font-size: clamp(2rem, 3.1vw, 3rem); }
|
||
.section-heading > p { max-width: 350px; color: var(--muted); font-size: 1rem; line-height: 1.85; }
|
||
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
|
||
.benefit-grid article { padding-top: 28px; border-top: 1px solid var(--line); }
|
||
.benefit-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: .875rem; background: rgb(255 255 255 / 4%); color: rgb(255 255 255 / 74%); font-size: 1.5rem; }
|
||
.benefit-grid h3 { margin-bottom: 14px; font-size: 1.25rem; }
|
||
.benefit-grid p { max-width: 365px; color: var(--muted); font-size: 1rem; }
|
||
|