Update as-styleguide/index.html
Update as-styleguide/styles.css Update koru.ai
This commit is contained in:
BIN
as-styleguide/assets/fonts/Corinthia-Bold.ttf
Normal file
BIN
as-styleguide/assets/fonts/Corinthia-Bold.ttf
Normal file
Binary file not shown.
BIN
as-styleguide/assets/fonts/Corinthia-Regular.ttf
Normal file
BIN
as-styleguide/assets/fonts/Corinthia-Regular.ttf
Normal file
Binary file not shown.
5
as-styleguide/assets/img/icon.svg
Normal file
5
as-styleguide/assets/img/icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.52 130.27">
|
||||
<path d="M121.79,2.75h8.73v124.78h-8.73v-33.44c-4.99,10.98-12.56,19.76-22.71,26.33-10.15,6.57-21.55,9.86-34.19,9.86-17.97,0-33.28-6.28-45.92-18.84C6.32,98.87,0,83.44,0,65.14S6.32,31.41,18.97,18.84C31.61,6.28,46.92,0,64.89,0c12.64,0,24.04,3.29,34.19,9.86,10.15,6.57,17.72,15.35,22.71,26.33V2.75ZM25.08,105.44c10.9,10.9,24.25,16.35,40.06,16.35s29.2-5.45,40.18-16.35c10.98-10.89,16.47-24.33,16.47-40.3s-5.49-29.41-16.47-40.31c-10.98-10.9-24.38-16.35-40.18-16.35s-29.16,5.45-40.06,16.35-16.35,24.33-16.35,40.31,5.45,29.41,16.35,40.3Z"/>
|
||||
<path d="M45.78,47.25c0,3.92,1.61,6.99,4.84,9.2,3.22,2.21,7.08,3.87,11.58,4.97,4.49,1.11,9.04,2.23,13.63,3.36,4.59,1.13,8.48,3.17,11.68,6.11,3.2,2.94,4.8,6.9,4.8,11.88,0,6.03-2.44,11.04-7.33,15.04-4.89,4-11.19,6-18.89,6-14.62,0-23.9-5.38-27.85-16.15l4.3-2.52c3.06,9.09,10.91,13.63,23.56,13.63,6.02,0,11.01-1.45,14.96-4.36,3.95-2.91,5.93-6.78,5.93-11.61,0-4.04-1.61-7.2-4.82-9.47-3.21-2.27-7.07-3.96-11.56-5.06-4.49-1.11-9.04-2.23-13.62-3.36-4.59-1.13-8.49-3.13-11.7-5.99-3.21-2.86-4.82-6.72-4.82-11.56,0-5.93,2.3-10.89,6.89-14.89,4.59-4,10.64-6,18.15-6,5.83,0,10.89,1.31,15.19,3.93,4.3,2.62,7.38,6.15,9.26,10.59l-4.3,2.52c-1.58-3.85-4.15-6.82-7.7-8.89-3.56-2.07-7.7-3.11-12.44-3.11-5.73,0-10.45,1.45-14.15,4.34-3.7,2.89-5.56,6.7-5.56,11.41Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
11
as-styleguide/assets/img/koru.svg
Normal file
11
as-styleguide/assets/img/koru.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213.06 383.93">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #eb825e;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M40.62,148.72c20.55,8.16,46.32,3.12,61.89-12.55,18.38-18.51,19.15-54.19-7.08-66.1-4.69-2.13-9.5-3.15-14.14-3.16.92-.77,1.77-1.64,2.52-2.61,4.87-6.34,3.61-14.91-1.4-20.7-5.81-6.71-16.38-4.29-21.23,2.04-.77,1.01-1.34,2.08-1.76,3.18-2.16-8.28,2.39-16.88,9.71-21.15,16.95-6.05,36.05-6.31,53.53-1.82,5.38,1.38,10.51,3.27,15.39,5.57-3.85-.45-7.91-.2-12.18.95-16.27,4.37-24.69,24.78-13.26,38.12,5.26,6.14,14.35,9.77,21.14,4.16,7.07-5.84,5.58-16.35.49-22.65-1.72-2.13-4.19-3.63-6.81-4.36,1.11-.79,2.3-1.43,3.51-1.88,12.56-4.76,27.04,4.03,37.67,9.85.17.09.33.15.5.19,11.06,13.45,18.34,29.92,20.62,47.2-9.42-17.81-31.01-25.1-49.2-16.53-9.82,4.63-16.56,15.85-14.94,26.64,1.57,10.46,13.04,18.76,23.42,14.87,10.41-3.91,15.13-18.48,6.87-26.92-.1-.1-.2-.19-.3-.29,3.06-.31,6.13.2,9.14,1.16,9.06,2.86,15.05,12.85,17.73,21.35,2.76,8.75,2.37,18.24.83,27.4-5.53,14.23-13.78,27.37-23.44,39.66,1.38-4.35,2.23-8.83,2.4-13.36.7-19.34-14-37.2-33.66-37.97-10.8-.42-19.4,6.07-23.43,15.66-4.32,10.28,2.58,21.18,12.24,24.57,9.99,3.51,20.48-3.82,21.74-13.83.08-.66.11-1.32.09-1.98.83.75,1.52,1.49,2.02,2.15,6.24,8.28,5.95,18.59,4.23,28.31-1.64,9.23-7.02,17.23-11.72,25.3-7.44,7.4-15.01,14.49-22.33,21.35-2.01,1.88-4,3.8-5.97,5.73,2.42-7.29,3.58-15.02,3.64-22.68.13-16.87-9.65-39.01-30.07-36.36-8.83,1.14-15.68,6.59-18.57,15.04-2.86,8.36,1.99,17.8,9.04,22.22,8.39,5.27,19.18.64,23.7-7.36,2.48,7.2,2.16,16.18,1.62,23.36-.35,4.57-1.45,9.15-2.65,13.56-.72,2.65-1.46,5.67-2.37,8.49-8.11,8.91-15.82,18.18-23.09,27.78,1.04-6.6,1.19-13.42.26-19.85-2.92-20.2-17.32-37.2-39.11-34.09-9.41,1.35-16.81,10.09-18.99,18.89-2.41,9.72,1.67,19.98,11.02,23.89,8.39,3.51,19.43-1.45,20.78-10.88.72-5.04-.69-9.84-3.59-13.39,2.89.73,5.77,2.45,7.81,4.38,7.22,6.84,9.3,19.19,9.8,28.64.3,5.79-.47,11.56-1.74,17.19-.79,3.49-2.61,7.7-3.26,11.58-7.26,14.03-12.48,29.28-14.59,44.61-.94,6.86-1.15,13.76-.74,20.67.16,2.71,4.14,2.74,4.23,0,1.59-50.5,41.17-88.03,76.84-118.95,36.33-31.49,75.09-65,91.46-111.73,16.97-48.47-1.84-103.27-43.97-132.13C121.33-9.37,61.27-5.98,24.76,29.1,7.48,45.71-2.25,69.69.45,93.66c2.77,24.62,16.85,45.79,40.17,55.05ZM22.86,79.22c.83-9.05,5.57-18.99,11.68-27.27,4.14-5.62,9.77-10.53,15.91-14.68-1.51,3.65-2.27,7.73-2.07,12.03.4,8.51,5.32,16.58,13.13,20.17,1.53.7,3.13,1.18,4.76,1.44-5.68,3.36-10.28,8.76-12.85,16.01-5.67,15.97,5.1,34.65,22.57,34.87,4.3.05,8.73-1.27,12.61-3.48-4.32,5.7-10.4,8.81-17.25,10.63-4.49,1.19-7.09,1.28-12.49,1.02-2.59-.12-2.29-.12-5.37-.78-1.18-.25-2.34-.59-3.5-.92-.41-.12-3.56-1.26-3.14-1.04-9.23-4.01-14.9-10.24-19.53-19.31-4.33-8.47-5.41-18.41-4.47-28.69Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
11
as-styleguide/assets/img/koru_Zeichenfläche 1.svg
Normal file
11
as-styleguide/assets/img/koru_Zeichenfläche 1.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213.06 383.93">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #eb825e;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M40.62,148.72c20.55,8.16,46.32,3.12,61.89-12.55,18.38-18.51,19.15-54.19-7.08-66.1-4.69-2.13-9.5-3.15-14.14-3.16.92-.77,1.77-1.64,2.52-2.61,4.87-6.34,3.61-14.91-1.4-20.7-5.81-6.71-16.38-4.29-21.23,2.04-.77,1.01-1.34,2.08-1.76,3.18-2.16-8.28,2.39-16.88,9.71-21.15,16.95-6.05,36.05-6.31,53.53-1.82,5.38,1.38,10.51,3.27,15.39,5.57-3.85-.45-7.91-.2-12.18.95-16.27,4.37-24.69,24.78-13.26,38.12,5.26,6.14,14.35,9.77,21.14,4.16,7.07-5.84,5.58-16.35.49-22.65-1.72-2.13-4.19-3.63-6.81-4.36,1.11-.79,2.3-1.43,3.51-1.88,12.56-4.76,27.04,4.03,37.67,9.85.17.09.33.15.5.19,11.06,13.45,18.34,29.92,20.62,47.2-9.42-17.81-31.01-25.1-49.2-16.53-9.82,4.63-16.56,15.85-14.94,26.64,1.57,10.46,13.04,18.76,23.42,14.87,10.41-3.91,15.13-18.48,6.87-26.92-.1-.1-.2-.19-.3-.29,3.06-.31,6.13.2,9.14,1.16,9.06,2.86,15.05,12.85,17.73,21.35,2.76,8.75,2.37,18.24.83,27.4-5.53,14.23-13.78,27.37-23.44,39.66,1.38-4.35,2.23-8.83,2.4-13.36.7-19.34-14-37.2-33.66-37.97-10.8-.42-19.4,6.07-23.43,15.66-4.32,10.28,2.58,21.18,12.24,24.57,9.99,3.51,20.48-3.82,21.74-13.83.08-.66.11-1.32.09-1.98.83.75,1.52,1.49,2.02,2.15,6.24,8.28,5.95,18.59,4.23,28.31-1.64,9.23-7.02,17.23-11.72,25.3-7.44,7.4-15.01,14.49-22.33,21.35-2.01,1.88-4,3.8-5.97,5.73,2.42-7.29,3.58-15.02,3.64-22.68.13-16.87-9.65-39.01-30.07-36.36-8.83,1.14-15.68,6.59-18.57,15.04-2.86,8.36,1.99,17.8,9.04,22.22,8.39,5.27,19.18.64,23.7-7.36,2.48,7.2,2.16,16.18,1.62,23.36-.35,4.57-1.45,9.15-2.65,13.56-.72,2.65-1.46,5.67-2.37,8.49-8.11,8.91-15.82,18.18-23.09,27.78,1.04-6.6,1.19-13.42.26-19.85-2.92-20.2-17.32-37.2-39.11-34.09-9.41,1.35-16.81,10.09-18.99,18.89-2.41,9.72,1.67,19.98,11.02,23.89,8.39,3.51,19.43-1.45,20.78-10.88.72-5.04-.69-9.84-3.59-13.39,2.89.73,5.77,2.45,7.81,4.38,7.22,6.84,9.3,19.19,9.8,28.64.3,5.79-.47,11.56-1.74,17.19-.79,3.49-2.61,7.7-3.26,11.58-7.26,14.03-12.48,29.28-14.59,44.61-.94,6.86-1.15,13.76-.74,20.67.16,2.71,4.14,2.74,4.23,0,1.59-50.5,41.17-88.03,76.84-118.95,36.33-31.49,75.09-65,91.46-111.73,16.97-48.47-1.84-103.27-43.97-132.13C121.33-9.37,61.27-5.98,24.76,29.1,7.48,45.71-2.25,69.69.45,93.66c2.77,24.62,16.85,45.79,40.17,55.05ZM22.86,79.22c.83-9.05,5.57-18.99,11.68-27.27,4.14-5.62,9.77-10.53,15.91-14.68-1.51,3.65-2.27,7.73-2.07,12.03.4,8.51,5.32,16.58,13.13,20.17,1.53.7,3.13,1.18,4.76,1.44-5.68,3.36-10.28,8.76-12.85,16.01-5.67,15.97,5.1,34.65,22.57,34.87,4.3.05,8.73-1.27,12.61-3.48-4.32,5.7-10.4,8.81-17.25,10.63-4.49,1.19-7.09,1.28-12.49,1.02-2.59-.12-2.29-.12-5.37-.78-1.18-.25-2.34-.59-3.5-.92-.41-.12-3.56-1.26-3.14-1.04-9.23-4.01-14.9-10.24-19.53-19.31-4.33-8.47-5.41-18.41-4.47-28.69Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 14 KiB |
BIN
as-styleguide/assets/img/person-an-tafel.webp
Normal file
BIN
as-styleguide/assets/img/person-an-tafel.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>AS Styleguide – Coaching & Beratung</title>
|
||||
<meta name="description" content="Styleguide (HTML/CSS/JS) für Coaching & Beratung – Typografie, Komponenten, Layout-Grids." />
|
||||
<link rel="preload" href="assets/fonts/have-heart-one.otf" as="font" type="font/otf" crossorigin>
|
||||
<link rel="preload" href="assets/fonts/gilroy/Gilroy-SemiBoldItalic.ttf" as="font" type="font/ttf" crossorigin>
|
||||
<link rel="preload" href="assets/fonts/gilroy/Gilroy-Regular.ttf" as="font" type="font/ttf" crossorigin>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
@@ -16,7 +16,7 @@
|
||||
<header class="site-header" data-header>
|
||||
<div class="container header-inner">
|
||||
<a class="brand" href="#top" aria-label="Start">
|
||||
<img class="brand-logo" src="assets/img/logo.png" alt="AS – Coaching und Beratung" />
|
||||
<img class="brand-logo" src="assets/img/logo.svg" alt="AS – Coaching und Beratung" />
|
||||
</a>
|
||||
|
||||
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" data-nav-toggle>
|
||||
@@ -66,21 +66,26 @@
|
||||
<a class="btn btn--secondary btn--lg" href="#produkte">Workbook & Minikurse</a>
|
||||
</div>
|
||||
|
||||
<ul class="hero-proof" role="list">
|
||||
<li><span class="icon-dot" aria-hidden="true"></span> CV-Check & Profil-Optimierung</li>
|
||||
<li><span class="icon-dot" aria-hidden="true"></span> Interview-Training (realistische Simulation)</li>
|
||||
<li><span class="icon-dot" aria-hidden="true"></span> Storytelling & Argumentationslinien</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero-card">
|
||||
<div class="hero-side">
|
||||
<figure class="hero-visual" aria-label="Atmosphärisches Hero-Bild">
|
||||
<img src="assets/img/person-an-tafel.webp" alt="Coach vor einer Tafel im Workshop-Kontext" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="quickstart-segment" aria-labelledby="quickstart-title">
|
||||
<div class="container">
|
||||
<div class="hero-card quickstart-card-wrap">
|
||||
<div class="hero-card-top">
|
||||
<div class="pill">Styleguide</div>
|
||||
<div class="badge">WP-ready</div>
|
||||
</div>
|
||||
|
||||
<div class="card card--elevated">
|
||||
<h2 class="h3">Schnellstart-Komponenten</h2>
|
||||
<div class="card card--elevated quickstart-card">
|
||||
<h2 class="h3" id="quickstart-title">Schnellstart-Komponenten</h2>
|
||||
<p class="muted">Buttons, Cards, Formulare, Grids, Sektionen – bereits so aufgebaut, dass du daraus ein WP-Template werden kann.</p>
|
||||
|
||||
<div class="stack-sm">
|
||||
@@ -93,14 +98,13 @@
|
||||
<dl class="kv">
|
||||
<div><dt>Primärfarbe</dt><dd><code>#EB825E</code></dd></div>
|
||||
<div><dt>Text</dt><dd><code>#353535</code></dd></div>
|
||||
<div><dt>Background</dt><dd><code>#FAF7F2</code></dd></div>
|
||||
<div><dt>Fonts</dt><dd><code>HaveHeartOne</code> + <code>Gilroy</code></dd></div>
|
||||
<div><dt>Background</dt><dd><code>#FFFFFF</code></dd></div>
|
||||
<div><dt>Fonts</dt><dd><code>Gilroy</code> (<code>SemiBold Italic</code> für Headlines)</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="farben">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
@@ -119,9 +123,19 @@
|
||||
<div class="swatch-meta"><div class="swatch-title">Ink</div><code>#353535</code></div>
|
||||
</div>
|
||||
|
||||
<div class="swatch">
|
||||
<div class="swatch-color" style="background:#FFFFFF"></div>
|
||||
<div class="swatch-meta"><div class="swatch-title">Canvas</div><code>#FFFFFF</code></div>
|
||||
</div>
|
||||
|
||||
<div class="swatch">
|
||||
<div class="swatch-color" style="background:#FAF7F2"></div>
|
||||
<div class="swatch-meta"><div class="swatch-title">Canvas</div><code>#FAF7F2</code></div>
|
||||
<div class="swatch-meta"><div class="swatch-title">Surface / Card</div><code>#FAF7F2</code></div>
|
||||
</div>
|
||||
|
||||
<div class="swatch">
|
||||
<div class="swatch-color swatch-color--verlauf"></div>
|
||||
<div class="swatch-meta"><div class="swatch-title">Verlauf / Hero Tile</div><code>#25201E (82% - 72%)</code></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -135,14 +149,14 @@
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2 class="h2">Typografie</h2>
|
||||
<p class="muted">HaveHeartOne nur für große, prägnante Statements. Gilroy für Struktur, UI und Fließtext.</p>
|
||||
<p class="muted">Nur Gilroy: SemiBold Italic für Hero-/Display-Statements, reguläre Schnitte für Struktur, UI und Fließtext.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<p class="label">Display / Hero (HaveHeartOne)</p>
|
||||
<p class="label">Display / Hero (Gilroy SemiBold Italic)</p>
|
||||
<p class="type-sample display-sample">Souverän auftreten. Wirkung erzielen.</p>
|
||||
<p class="muted small">Regel: HaveHeartOne nur H1 + evtl. emotionales H2. Keine Navigation, keine Forms, keine Tabellen.</p>
|
||||
<p class="muted small">Regel: Gilroy SemiBold Italic nur für Hero/Display-Statements. UI, Navigation, Forms und Tabellen in regulären Gilroy-Schnitten.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
||||
@@ -1,22 +1,34 @@
|
||||
/* (same CSS as earlier, trimmed? keep full enough) */
|
||||
@font-face{font-family:"HaveHeartOne";src:url("assets/fonts/have-heart-one.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
|
||||
/* ==========================================================================
|
||||
Fonts
|
||||
========================================================================== */
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-RegularItalic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-SemiBoldItalic.ttf") format("truetype");font-weight:600;font-style:italic;font-display:swap;}
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
|
||||
|
||||
/* ==========================================================================
|
||||
Global Tokens (Farben, Spacing, Containerbreite, Shadows)
|
||||
========================================================================== */
|
||||
:root{
|
||||
--accent:#EB825E;--ink:#353535;--canvas:#FAF7F2;
|
||||
--line-soft:rgba(53,53,53,.12);
|
||||
--line:rgba(53,53,53,.16);
|
||||
--accent:#EB825E;--ink:#353535;--canvas:#FFFFFF;
|
||||
--surface:#FAF7F2;
|
||||
--verlauf-start:rgba(37,32,30,.82);
|
||||
--verlauf-end:rgba(37,32,30,.72);
|
||||
--verlauf:linear-gradient(180deg,var(--verlauf-start),var(--verlauf-end));
|
||||
--line-soft:rgba(53,53,53,.09);
|
||||
--line:rgba(53,53,53,.12);
|
||||
--ink-80:color-mix(in srgb,var(--ink) 80%,transparent);
|
||||
--ink-60:color-mix(in srgb,var(--ink) 60%,transparent);
|
||||
--display-white:#fff;
|
||||
--display-plate:var(--verlauf-start);
|
||||
--display-plate-soft:var(--verlauf-end);
|
||||
--radius-md:18px;--radius-lg:26px;
|
||||
--shadow-1:0 10px 30px rgba(0,0,0,.06);
|
||||
--shadow-2:0 18px 60px rgba(0,0,0,.10);
|
||||
--container:1160px;
|
||||
--font-display:"HaveHeartOne",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
|
||||
--container:1380px;
|
||||
--font-display:"Gilroy",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
|
||||
--font-sans:"Gilroy",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
|
||||
|
||||
--step--1:clamp(.92rem,.85rem + .3vw,1.02rem);
|
||||
@@ -30,6 +42,9 @@
|
||||
--space-1:8px;--space-2:12px;--space-3:16px;--space-4:22px;--space-5:30px;--space-6:44px;--space-7:64px;--space-8:92px;
|
||||
--focus:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent);
|
||||
}
|
||||
/* ==========================================================================
|
||||
Base / Resets
|
||||
========================================================================== */
|
||||
*{box-sizing:border-box;}html{scroll-behavior:smooth;}
|
||||
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-sans);font-size:var(--step-0);line-height:1.6;letter-spacing:.01em;}
|
||||
h1,h2,h3,h4,p,ul,ol,dl{margin-top:0;}
|
||||
@@ -38,14 +53,19 @@ p:last-child{margin-bottom:0;}
|
||||
a,a:visited{color:inherit;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:.16em;text-decoration-thickness:.08em;}
|
||||
a:hover{text-decoration-color:var(--accent);}
|
||||
img{max-width:100%;height:auto;display:block;}
|
||||
.container{width:min(var(--container),calc(100% - 2*var(--space-5)));margin-inline:auto;}
|
||||
.container{width:min(var(--container),calc(100% - 2*clamp(14px,2.6vw,36px)));margin-inline:auto;}
|
||||
.skip-link{position:absolute;left:-999px;top:10px;background:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-1);z-index:9999;}
|
||||
.skip-link:focus{left:10px;outline:none;box-shadow:var(--focus),var(--shadow-1);}
|
||||
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
|
||||
/* Prevent rounded borders from visually disappearing at corners on light surfaces */
|
||||
:where(.hero-grid,.hero-copy .eyebrow,.hero-proof,.hero-card .card,.hero-card .kv,.card,.feature,.note,.accordion,.swatch,.btn--secondary,.btn--ghost,.badge--soft,.pill,.tag,.nav-toggle,.site-nav.is-open){background-clip:padding-box;}
|
||||
|
||||
.display{font-family:var(--font-display);font-size:var(--step-5);line-height:.95;margin:0 0 var(--space-4);font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:0;}
|
||||
/* ==========================================================================
|
||||
Type Utilities / Display Styles
|
||||
- `--font-display`, `--step-*`, und die Marker/Plate-Werte sind die
|
||||
wichtigsten Stellschrauben für den Hero-Look.
|
||||
========================================================================== */
|
||||
.display{font-family:var(--font-display);font-size:var(--step-5);line-height:.95;margin:0 0 var(--space-4);font-weight:600;font-style:italic;font-synthesis:none;letter-spacing:-.02em;color:var(--display-white);text-shadow:0 3px 14px rgba(0,0,0,.14);}
|
||||
.display-accent{position:relative;display:inline-block;}
|
||||
.display-accent::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.22em;background:color-mix(in srgb,var(--accent) 75%,transparent);border-radius:999px;z-index:-1;transform:rotate(-1.3deg);}
|
||||
.h2{font-size:var(--step-3);line-height:1.12;margin:0 0 10px;font-weight:600;letter-spacing:-.01em;}
|
||||
@@ -56,19 +76,41 @@ img{max-width:100%;height:auto;display:block;}
|
||||
.label{font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);margin:0 0 var(--space-2);font-weight:600;}
|
||||
.eyebrow{margin:0 0 var(--space-3);font-weight:600;color:var(--ink-80);}
|
||||
.type-sample{margin:0 0 var(--space-3);}
|
||||
.display-sample{font-family:var(--font-display);font-size:clamp(2.15rem,1.45rem + 2.2vw,3.2rem);line-height:.95;font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:0;padding-bottom:.12em;}
|
||||
.display-sample{
|
||||
font-family:var(--font-display);
|
||||
font-size:clamp(2.15rem,1.45rem + 2.2vw,3.2rem);
|
||||
line-height:.95;
|
||||
font-weight:600;
|
||||
font-style:italic;
|
||||
font-synthesis:none;
|
||||
letter-spacing:-.02em;
|
||||
color:var(--display-white);
|
||||
text-shadow:0 3px 14px rgba(0,0,0,.16);
|
||||
padding:.18em .24em .24em;
|
||||
border-radius:18px;
|
||||
border:1px solid rgba(255,255,255,.16);
|
||||
background:
|
||||
radial-gradient(circle at 82% 18%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 48%),
|
||||
linear-gradient(180deg,var(--display-plate),var(--display-plate-soft));
|
||||
box-shadow:0 12px 26px rgba(0,0,0,.10);
|
||||
}
|
||||
.body-sample{font-size:var(--step-1);line-height:1.55;color:var(--ink-80);}
|
||||
|
||||
/* Normalize internal rhythm for major content containers */
|
||||
:where(.section-head,.block-head,.card,.feature,.note,.hero-card .card,.accordion-panel,.cta > div:first-child) > :last-child{margin-bottom:0;}
|
||||
|
||||
.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--canvas) 85%,transparent);border-bottom:1px solid rgba(53,53,53,.10);}
|
||||
/* ==========================================================================
|
||||
Header / Navigation
|
||||
- Logo-Größe: `.brand-logo`
|
||||
- Abstand Navigation: `.header-inner`, `.site-nav`
|
||||
========================================================================== */
|
||||
.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--canvas) 92%,transparent);border-bottom:1px solid rgba(53,53,53,.07);}
|
||||
.header-inner{display:flex;align-items:center;gap:var(--space-3);padding:10px 0;min-height:78px;}
|
||||
.brand{display:inline-flex;align-items:center;line-height:0;text-decoration:none;color:var(--ink);}
|
||||
.brand{display:inline-flex;align-items:center;line-height:0;text-decoration:none;color:var(--ink);flex:0 0 auto;}
|
||||
.brand-logo{
|
||||
width:auto;
|
||||
height:54px;
|
||||
max-width:clamp(72px,14vw,120px);
|
||||
width:clamp(156px,19vw,232px);
|
||||
height:auto;
|
||||
max-height:none;
|
||||
object-fit:contain;
|
||||
object-position:left center;
|
||||
display:block;
|
||||
@@ -85,112 +127,287 @@ img{max-width:100%;height:auto;display:block;}
|
||||
@media (max-width:920px){
|
||||
.site-nav,.header-cta{display:none;}
|
||||
.nav-toggle{display:inline-flex;}
|
||||
.brand-logo{height:46px;max-width:96px;}
|
||||
.brand-logo{width:clamp(132px,34vw,176px);height:auto;max-height:none;}
|
||||
.site-nav.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;position:absolute;right:var(--space-5);top:66px;width:min(320px,calc(100vw - 2*var(--space-5)));background:#fff;border:1px solid rgba(53,53,53,.12);border-radius:16px;box-shadow:var(--shadow-2);}
|
||||
}
|
||||
|
||||
.hero{position:relative;padding:clamp(28px,4vw,56px) 0 clamp(26px,4vw,44px);overflow:clip;}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:-1;}
|
||||
/* ==========================================================================
|
||||
Hero Band (Full Width)
|
||||
- Gesamthöhe/Weißraum: `padding`
|
||||
- Farbstimmung: `background` Gradients
|
||||
========================================================================== */
|
||||
.hero{
|
||||
position:relative;
|
||||
padding:clamp(42px,6vw,94px) 0 clamp(46px,7vw,96px);
|
||||
overflow:clip;
|
||||
background:
|
||||
radial-gradient(circle at 12% 18%, color-mix(in srgb,var(--accent) 10%,var(--surface)), transparent 42%),
|
||||
radial-gradient(circle at 88% 14%, color-mix(in srgb,var(--accent) 7%,#fff), transparent 50%),
|
||||
linear-gradient(180deg,
|
||||
color-mix(in srgb,var(--surface) 82%,#fff) 0%,
|
||||
color-mix(in srgb,var(--surface) 64%,#fff) 56%,
|
||||
#fff 100%);
|
||||
border-top:1px solid rgba(53,53,53,.05);
|
||||
border-bottom:1px solid rgba(53,53,53,.06);
|
||||
}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
|
||||
.hero-orb{position:absolute;border-radius:999px;filter:blur(18px);opacity:.80;}
|
||||
.hero-orb--1{width:520px;height:520px;left:-180px;top:-140px;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 42%,#fff),transparent 62%);opacity:.6;}
|
||||
.hero-orb--2{width:620px;height:620px;right:-230px;top:-190px;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 18%,#fff),transparent 68%);opacity:.5;}
|
||||
.hero-wave{display:none;position:absolute;left:0;right:0;bottom:-1px;height:180px;}
|
||||
.hero-wave path{fill:color-mix(in srgb,var(--accent) 10%,var(--canvas));}
|
||||
|
||||
/* Hero layout:
|
||||
- `grid-template-columns` verschiebt Verhältnis Text/Bild
|
||||
- `gap` steuert den Leerraum zwischen linker und rechter Hero-Spalte */
|
||||
.hero-grid{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
|
||||
gap:clamp(20px,3.2vw,34px);
|
||||
grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr);
|
||||
gap:clamp(28px,4vw,48px);
|
||||
align-items:start;
|
||||
padding:clamp(20px,3vw,34px);
|
||||
border-radius:30px;
|
||||
border:1px solid var(--line-soft);
|
||||
background:
|
||||
radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--accent) 10%,#fff), transparent 42%),
|
||||
linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
|
||||
box-shadow:0 22px 70px rgba(0,0,0,.06);
|
||||
padding:clamp(8px,1vw,14px) 0;
|
||||
border:0;
|
||||
border-radius:0;
|
||||
background:transparent;
|
||||
box-shadow:none;
|
||||
}
|
||||
.hero-copy{max-width:680px;padding:4px clamp(4px,1vw,12px) 4px 2px;display:grid;align-content:start;}
|
||||
.hero-copy .eyebrow{display:inline-flex;justify-self:start;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid var(--line-soft);box-shadow:0 8px 24px rgba(0,0,0,.04);margin:0 0 18px;}
|
||||
.hero-copy{max-width:680px;padding:6px clamp(6px,1.2vw,14px) 6px 2px;display:grid;align-content:start;}
|
||||
.hero-copy .eyebrow{display:inline-flex;justify-self:start;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,#f3f3f3 42%,#fff);border:1px solid var(--line-soft);box-shadow:0 8px 24px rgba(0,0,0,.03);margin:0 0 22px;}
|
||||
.hero-copy .eyebrow::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent);}
|
||||
|
||||
/* Hero headline:
|
||||
- Größe: `.hero-copy .display` font-size
|
||||
- Braune Flächenform: `.display-line::before` (inset, radius)
|
||||
- Textmarker: `.display-accent::after` (left/right/bottom/height) */
|
||||
.hero-copy .display{
|
||||
max-width:none;
|
||||
display:grid;
|
||||
justify-items:start;
|
||||
gap:.02em;
|
||||
font-size:clamp(3.05rem,2.1rem + 4vw,4.85rem);
|
||||
font-size:clamp(2.2rem,1.65rem + 2.35vw,3.35rem);
|
||||
line-height:1.02;
|
||||
margin:0 0 14px;
|
||||
margin:0 0 18px;
|
||||
padding:0 0 .12em;
|
||||
}
|
||||
.hero-copy .display .display-line{display:inline-block;justify-self:start;width:fit-content;position:relative;z-index:1;}
|
||||
.hero-copy .display .display-line{
|
||||
display:inline-block;
|
||||
justify-self:start;
|
||||
width:fit-content;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
isolation:isolate;
|
||||
padding:.12em .26em .14em;
|
||||
margin-left:-.08em;
|
||||
border-radius:.42em;
|
||||
}
|
||||
.hero-copy .display .display-line::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:.06em -.02em -.03em -.01em;
|
||||
z-index:-2;
|
||||
border-radius:.48em;
|
||||
border:1px solid rgba(255,255,255,.14);
|
||||
background:
|
||||
radial-gradient(circle at 12% 14%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 54%),
|
||||
linear-gradient(180deg,var(--display-plate),var(--display-plate-soft));
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.14);
|
||||
transform:rotate(-.45deg);
|
||||
}
|
||||
.hero-copy .display .display-line:nth-child(2){
|
||||
padding-top:.14em;
|
||||
padding-bottom:.18em;
|
||||
}
|
||||
.hero-copy .display .display-line:nth-child(2)::before{
|
||||
inset:.07em -.02em -.04em -.01em;
|
||||
transform:rotate(.32deg);
|
||||
}
|
||||
.hero-copy .display .display-line + .display-line{margin-top:.04em;}
|
||||
.hero-copy .display .display-accent::after{
|
||||
left:.12em;
|
||||
right:.14em;
|
||||
bottom:.45em;
|
||||
height:.35em;
|
||||
border-radius:.82em .60em .94em .56em / .44em .38em .52em .46em;
|
||||
background:
|
||||
radial-gradient(circle at 10% 48%, rgba(255,255,255,.20), transparent 38%),
|
||||
radial-gradient(circle at 88% 58%, rgba(255,255,255,.10), transparent 46%),
|
||||
radial-gradient(circle at 94% 54%, rgba(0,0,0,.10), transparent 56%),
|
||||
linear-gradient(180deg,
|
||||
color-mix(in srgb,var(--accent) 78%,#fff) 0%,
|
||||
color-mix(in srgb,var(--accent) 88%,transparent) 35%,
|
||||
color-mix(in srgb,var(--accent) 94%,transparent) 68%,
|
||||
color-mix(in srgb,var(--accent) 80%,transparent) 100%);
|
||||
box-shadow:
|
||||
0 .03em 0 color-mix(in srgb,var(--accent) 42%,transparent),
|
||||
0 .01em .18em color-mix(in srgb,var(--accent) 18%,transparent);
|
||||
opacity:.92;
|
||||
transform:rotate(-.9deg) skewX(-1.5deg);
|
||||
}
|
||||
/* Hero Text + CTA */
|
||||
.hero-copy .lead{
|
||||
max-width:35ch;
|
||||
font-size:clamp(1.02rem,.96rem + .34vw,1.2rem);
|
||||
line-height:1.55;
|
||||
margin:0 0 22px;
|
||||
line-height:1.62;
|
||||
margin:0 0 34px;
|
||||
}
|
||||
.hero-actions{display:flex;gap:12px;row-gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;}
|
||||
.hero-proof{
|
||||
padding:14px 16px;
|
||||
margin:2px 0 0;
|
||||
display:grid;
|
||||
gap:10px;
|
||||
list-style:none;
|
||||
color:var(--ink-80);
|
||||
font-weight:500;
|
||||
max-width:46ch;
|
||||
border-radius:18px;
|
||||
border:1px solid var(--line-soft);
|
||||
background:rgba(255,255,255,.55);
|
||||
}
|
||||
.hero-proof li{display:flex;align-items:flex-start;gap:10px;padding:0;border:0;background:transparent;line-height:1.4;}
|
||||
.icon-dot{width:10px;height:10px;border-radius:999px;background:var(--accent);display:inline-block;flex:0 0 auto;translate:0 .38em;}
|
||||
.hero-card{
|
||||
.hero-actions{display:flex;gap:14px;row-gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:0;}
|
||||
/* Hero rechte Spalte (Bild steht bewusst für sich, ohne Overlays) */
|
||||
.hero-side{
|
||||
position:relative;
|
||||
display:grid;
|
||||
gap:12px;
|
||||
gap:16px;
|
||||
align-content:start;
|
||||
justify-self:stretch;
|
||||
align-self:stretch;
|
||||
margin:0;
|
||||
padding-left:clamp(6px,1vw,12px);
|
||||
padding-left:0;
|
||||
}
|
||||
.hero-side::before{display:none;content:"";}
|
||||
.hero-card{
|
||||
position:relative;
|
||||
display:grid;
|
||||
gap:22px;
|
||||
align-content:start;
|
||||
justify-self:start;
|
||||
width:min(100%,780px);
|
||||
margin:0;
|
||||
padding-left:0;
|
||||
}
|
||||
.hero-card::before{display:none;content:"";}
|
||||
.hero-card-top{display:flex;justify-content:flex-start;gap:8px;padding-left:2px;}
|
||||
.hero-card-top{display:flex;justify-content:flex-start;gap:8px;padding-left:0;}
|
||||
.hero-card .pill,.hero-card .badge{box-shadow:var(--shadow-1);}
|
||||
.hero-card-top .pill,
|
||||
.hero-card-top .badge{
|
||||
flex:0 0 auto;
|
||||
width:auto;
|
||||
height:42px;
|
||||
min-height:0;
|
||||
padding:0 16px;
|
||||
border-radius:999px;
|
||||
line-height:1;
|
||||
font-size:.86rem;
|
||||
white-space:nowrap;
|
||||
}
|
||||
/* Hero Bild:
|
||||
- `min-height` und `object-position` sind die wichtigsten Bild-Stellschrauben */
|
||||
.hero-visual{
|
||||
position:relative;
|
||||
margin:0;
|
||||
border-radius:30px;
|
||||
overflow:hidden;
|
||||
border:1px solid var(--line-soft);
|
||||
background:color-mix(in srgb,var(--surface) 94%,#fff);
|
||||
box-shadow:0 18px 42px rgba(0,0,0,.06);
|
||||
aspect-ratio:auto;
|
||||
min-height:420px;
|
||||
height:100%;
|
||||
}
|
||||
.hero-visual > img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
object-position:center 42%;
|
||||
display:block;
|
||||
filter:saturate(.95) contrast(.98);
|
||||
transform:scale(1.01);
|
||||
}
|
||||
.hero-visual::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:0;
|
||||
background:
|
||||
radial-gradient(circle at 82% 18%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 48%),
|
||||
linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.18));
|
||||
pointer-events:none;
|
||||
}
|
||||
/* Quickstart card (separat unter dem Hero, nutzt dieselben Card-Bausteine) */
|
||||
.hero-card .card{
|
||||
height:100%;
|
||||
padding:26px;
|
||||
background:rgba(255,255,255,.92);
|
||||
padding:30px;
|
||||
background:#fff;
|
||||
backdrop-filter:blur(8px);
|
||||
border-color:var(--line-soft);
|
||||
box-shadow:0 18px 52px rgba(0,0,0,.08);
|
||||
box-shadow:0 18px 44px rgba(0,0,0,.06);
|
||||
}
|
||||
.hero-card .h3{margin-bottom:8px;}
|
||||
.hero-card .muted{margin-top:0;}
|
||||
.hero-card .stack-sm{margin-top:14px;}
|
||||
.hero-card .kv{padding:12px 14px;border-radius:16px;background:rgba(250,247,242,.85);border:1px solid var(--line-soft);}
|
||||
.hero-card .kv{padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--surface) 82%,#fff);border:1px solid var(--line-soft);}
|
||||
.hero-card .kv div{padding:4px 0;}
|
||||
/* ==========================================================================
|
||||
Segment direkt unter dem Hero (Schnellstart)
|
||||
========================================================================== */
|
||||
.quickstart-segment{
|
||||
position:relative;
|
||||
padding:clamp(24px,4vw,42px) 0 clamp(34px,5vw,58px);
|
||||
background:var(--canvas);
|
||||
border-bottom:1px solid rgba(53,53,53,.05);
|
||||
}
|
||||
.quickstart-card-wrap{
|
||||
width:100%;
|
||||
max-width:none;
|
||||
justify-self:stretch;
|
||||
gap:16px;
|
||||
}
|
||||
.quickstart-card{
|
||||
width:100%;
|
||||
max-width:none;
|
||||
}
|
||||
@media (max-width:920px){
|
||||
/* Mobile Hero: hier zuerst Hero-Spacing und Bildradius anpassen */
|
||||
.hero{padding-top:var(--space-6);}
|
||||
.hero-grid{grid-template-columns:1fr;align-items:start;padding:18px;border-radius:24px;}
|
||||
.hero-grid{grid-template-columns:1fr;align-items:start;padding:0;gap:18px;}
|
||||
.hero-copy{max-width:none;padding-block:0;}
|
||||
.hero-copy .display{max-width:100%;font-size:clamp(2.45rem,9vw,4rem);line-height:1.02;}
|
||||
.hero-copy .lead,.hero-proof{max-width:none;}
|
||||
.hero-card{max-width:none;justify-self:stretch;margin-top:8px;padding-left:0;border-top:1px solid rgba(53,53,53,.08);padding-top:14px;}
|
||||
.hero-copy .display{max-width:100%;font-size:clamp(1.95rem,7.2vw,2.95rem);line-height:1.02;}
|
||||
.hero-copy .lead{max-width:none;}
|
||||
.hero-side{margin-top:10px;padding-top:0;gap:12px;}
|
||||
.hero-side{align-self:start;}
|
||||
.hero-card{max-width:none;justify-self:stretch;margin-top:10px;padding-left:0;border-top:1px solid rgba(53,53,53,.08);padding-top:18px;gap:16px;}
|
||||
.quickstart-segment{padding:20px 0 38px;}
|
||||
.quickstart-segment .hero-card{width:100%;max-width:none;margin-top:0;border-top:0;padding-top:0;gap:14px;}
|
||||
.hero-card-top{justify-content:flex-start;padding-left:0;}
|
||||
.hero-visual{border-radius:22px;aspect-ratio:16 / 11;min-height:0;}
|
||||
}
|
||||
|
||||
.section{padding:clamp(52px,7vw,76px) 0;}
|
||||
.section-head{margin-bottom:clamp(20px,3vw,32px);max-width:78ch;}
|
||||
/* ==========================================================================
|
||||
Sections / Rhythmus (weiß-beige-weiß ...)
|
||||
- Alternation läuft über `main > section:nth-of-type(...)`
|
||||
========================================================================== */
|
||||
.section{padding:clamp(68px,8vw,112px) 0;}
|
||||
main > section:not(.hero){
|
||||
background:var(--canvas);
|
||||
}
|
||||
main > section:nth-of-type(2n+1):not(.hero){
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
color-mix(in srgb,var(--surface) 58%,#fff) 0%,
|
||||
color-mix(in srgb,var(--surface) 46%,#fff) 100%);
|
||||
}
|
||||
main > section:nth-of-type(2n+1):not(.hero) .card{
|
||||
background:#fff;
|
||||
}
|
||||
main > section:nth-of-type(2n+1):not(.hero) .card--elevated{
|
||||
background:#fff;
|
||||
box-shadow:0 16px 36px rgba(0,0,0,.05);
|
||||
}
|
||||
main > section:nth-of-type(2n+1):not(.hero) .card--bordered{
|
||||
background:color-mix(in srgb,#fff 94%,var(--surface));
|
||||
border-color:rgba(53,53,53,.10);
|
||||
}
|
||||
main > section:nth-of-type(2n+1):not(.hero) :is(.feature,.accordion,.swatch,.note){
|
||||
background:#fff;
|
||||
}
|
||||
.section-head{margin-bottom:clamp(28px,4vw,44px);max-width:80ch;}
|
||||
.section-head .h2,.section-head .h3{margin-bottom:10px;}
|
||||
.section-head .muted{max-width:66ch;}
|
||||
.section-block{margin-top:var(--space-6);}
|
||||
.section-block + .section-block{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid rgba(53,53,53,.08);}
|
||||
.section-block{margin-top:clamp(42px,5vw,58px);}
|
||||
.section-block + .section-block{margin-top:clamp(56px,7vw,84px);padding-top:clamp(28px,4vw,40px);border-top:1px solid rgba(53,53,53,.07);}
|
||||
.block-head{margin-bottom:var(--space-4);max-width:72ch;}
|
||||
.block-head .h2,.block-head .h3{margin-bottom:8px;}
|
||||
.block-head .muted{margin-bottom:0;}
|
||||
.grid{display:grid;gap:var(--space-4);}
|
||||
.grid{display:grid;gap:clamp(20px,2.6vw,30px);}
|
||||
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
|
||||
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
|
||||
@media (max-width:920px){.grid-2,.grid-3{grid-template-columns:1fr;}}
|
||||
@@ -199,15 +416,26 @@ img{max-width:100%;height:auto;display:block;}
|
||||
.inline{display:flex;gap:10px;align-items:center;}
|
||||
.wrap{flex-wrap:wrap;}
|
||||
.stack-sm{display:grid;gap:10px;}
|
||||
.note{margin-top:var(--space-5);padding:var(--space-4);border-radius:var(--radius-md);border:1px dashed rgba(53,53,53,.22);background:rgba(255,255,255,.55);}
|
||||
.note{margin-top:var(--space-6);padding:clamp(18px,2.2vw,24px);border-radius:20px;border:1px dashed rgba(53,53,53,.16);background:color-mix(in srgb,#f2f2f2 36%,#fff);}
|
||||
|
||||
.card{background:rgba(255,255,255,.70);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:var(--space-5);}
|
||||
.card--elevated{background:#fff;box-shadow:var(--shadow-1);border-color:var(--line-soft);}
|
||||
.card--bordered{background:rgba(255,255,255,.55);border-color:var(--line);}
|
||||
/* ==========================================================================
|
||||
Cards / Panels (globale UI-Flächen)
|
||||
- Form: `border-radius`
|
||||
- Luft innen: `padding`
|
||||
- Hell/Dunkelwirkung: `background` + `border-color`
|
||||
========================================================================== */
|
||||
.card{background:color-mix(in srgb,var(--surface) 78%,#fff);border:1px solid var(--line-soft);border-radius:28px;padding:clamp(22px,3vw,34px);}
|
||||
.card--elevated{background:color-mix(in srgb,var(--surface) 92%,#fff);box-shadow:0 14px 34px rgba(0,0,0,.05);border-color:var(--line-soft);}
|
||||
.card--bordered{background:color-mix(in srgb,#f3f3f3 34%,#fff);border-color:rgba(53,53,53,.10);}
|
||||
.card > .label + *{margin-top:0;}
|
||||
.card > * + .inline{margin-top:12px;}
|
||||
.card > * + .stack-sm{margin-top:12px;}
|
||||
|
||||
/* ==========================================================================
|
||||
Buttons / Pills / Badges
|
||||
- Button-Höhe vor allem über `padding`
|
||||
- Pill-Höhe vor allem über `padding` + `font-size`
|
||||
========================================================================== */
|
||||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:999px;border:1px solid transparent;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;}
|
||||
.btn:focus-visible{outline:none;box-shadow:var(--focus);}
|
||||
.btn:active{transform:translateY(1px);}
|
||||
@@ -232,7 +460,10 @@ img{max-width:100%;height:auto;display:block;}
|
||||
.kv div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
|
||||
.kv dt{font-weight:700;color:var(--ink-80);} .kv dd{margin:0;text-align:right;}
|
||||
|
||||
.feature{padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--line-soft);background:rgba(255,255,255,.60);}
|
||||
/* ==========================================================================
|
||||
Components (Feature, Product, Accordion)
|
||||
========================================================================== */
|
||||
.feature{padding:clamp(20px,2.7vw,30px);border-radius:28px;border:1px solid var(--line-soft);background:color-mix(in srgb,#f4f4f4 28%,#fff);}
|
||||
.feature .h3{margin-bottom:8px;}
|
||||
.feature p{margin-bottom:0;line-height:1.45;}
|
||||
.feature-icon{width:42px;height:42px;border-radius:16px;background:color-mix(in srgb,var(--accent) 18%,#fff);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:12px;}
|
||||
@@ -244,14 +475,14 @@ img{max-width:100%;height:auto;display:block;}
|
||||
.product-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-4);gap:14px;padding-top:2px;}
|
||||
.price{font-size:var(--step-2);font-weight:800;}
|
||||
|
||||
.accordion{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);background:rgba(255,255,255,.55);}
|
||||
.accordion-item{width:100%;text-align:left;background:transparent;border:0;padding:18px;font:inherit;font-weight:700;line-height:1.35;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;}
|
||||
.accordion{border-radius:28px;overflow:hidden;border:1px solid var(--line-soft);background:color-mix(in srgb,#f4f4f4 24%,#fff);}
|
||||
.accordion-item{width:100%;text-align:left;background:transparent;border:0;padding:20px 22px;font:inherit;font-weight:700;line-height:1.35;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;}
|
||||
.accordion-item:first-child{border-top-left-radius:calc(var(--radius-lg) - 1px);border-top-right-radius:calc(var(--radius-lg) - 1px);}
|
||||
.accordion-item:focus{outline:none;}
|
||||
.accordion-item:focus:not(:focus-visible){box-shadow:none;}
|
||||
.accordion-item:focus-visible{outline:none;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);}
|
||||
.accordion-item + .accordion-panel{border-top:1px solid rgba(53,53,53,.10);}
|
||||
.accordion-panel{padding:0 18px 18px;}
|
||||
.accordion-panel{padding:0 22px 22px;}
|
||||
.accordion-panel .muted{line-height:1.5;}
|
||||
.accordion-icon{width:16px;height:16px;position:relative;}
|
||||
.accordion-icon::before,.accordion-icon::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--ink);}
|
||||
@@ -260,27 +491,60 @@ img{max-width:100%;height:auto;display:block;}
|
||||
|
||||
.cta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);}
|
||||
.cta > div:first-child{max-width:38ch;}
|
||||
.cta-title{font-family:var(--font-display);font-size:var(--step-4);line-height:1;margin:0 0 10px;font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:0;}
|
||||
.cta-title{
|
||||
font-family:var(--font-display);
|
||||
font-size:var(--step-4);
|
||||
line-height:1;
|
||||
margin:0 0 10px;
|
||||
font-weight:600;
|
||||
font-style:italic;
|
||||
font-synthesis:none;
|
||||
letter-spacing:-.02em;
|
||||
color:var(--display-white);
|
||||
text-shadow:0 3px 14px rgba(0,0,0,.14);
|
||||
display:inline-block;
|
||||
padding:.04em .18em .14em;
|
||||
border-radius:.40em;
|
||||
border:1px solid rgba(255,255,255,.14);
|
||||
background:
|
||||
radial-gradient(circle at 85% 15%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 45%),
|
||||
linear-gradient(180deg,var(--display-plate),var(--display-plate-soft));
|
||||
box-shadow:0 10px 24px rgba(0,0,0,.10);
|
||||
}
|
||||
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
|
||||
@media (max-width:920px){.cta{flex-direction:column;align-items:flex-start;} .cta-actions{justify-content:flex-start;}}
|
||||
|
||||
/* ==========================================================================
|
||||
Footer
|
||||
========================================================================== */
|
||||
.site-footer{padding:var(--space-6) 0;border-top:1px solid rgba(53,53,53,.10);}
|
||||
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
|
||||
.footer-links{display:flex;gap:14px;align-items:center;}
|
||||
.footer-links a{text-decoration:none;color:var(--ink);font-weight:700;}
|
||||
.footer-links a:hover{text-decoration:underline;text-decoration-color:var(--accent);}
|
||||
|
||||
/* Swatches (only for styleguide) */
|
||||
.swatch{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);background:rgba(255,255,255,.60);}
|
||||
/* ==========================================================================
|
||||
Swatches (nur Styleguide-Demo)
|
||||
========================================================================== */
|
||||
.swatch{border-radius:24px;overflow:hidden;border:1px solid var(--line-soft);background:color-mix(in srgb,#f4f4f4 24%,#fff);}
|
||||
.swatch-color{height:90px;}
|
||||
.swatch-meta{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;line-height:1.3;}
|
||||
.swatch-color--verlauf{
|
||||
background:
|
||||
var(--verlauf),
|
||||
var(--surface);
|
||||
}
|
||||
.swatch-meta{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;line-height:1.3;}
|
||||
.swatch-title{font-weight:800;}
|
||||
|
||||
/* ==========================================================================
|
||||
Responsive (global)
|
||||
- Haupt-Breakpoint: 920px
|
||||
========================================================================== */
|
||||
@media (max-width:920px){
|
||||
.section{padding:48px 0;}
|
||||
.section-head{margin-bottom:22px;}
|
||||
.section-block{margin-top:34px;}
|
||||
.section-block + .section-block{margin-top:42px;padding-top:26px;}
|
||||
.section{padding:56px 0;}
|
||||
.section-head{margin-bottom:26px;}
|
||||
.section-block{margin-top:38px;}
|
||||
.section-block + .section-block{margin-top:50px;padding-top:30px;}
|
||||
.kv{grid-template-columns:1fr;gap:8px;}
|
||||
.kv div{justify-content:flex-start;gap:10px;flex-wrap:wrap;}
|
||||
.kv dd{text-align:left;}
|
||||
|
||||
Reference in New Issue
Block a user