diff --git a/public/index.html b/public/index.html
index bdac8ba..1f67e80 100644
--- a/public/index.html
+++ b/public/index.html
@@ -80,8 +80,9 @@
Keine US-Cloud-Pflicht. Kein Agentur-Bullshit. ToolCTRL baut
- individuelle SaaS-Systeme schnell, bezahlbar und passend zu echten
- Abläufen.
+ individuelle SaaS-Systeme für Mittelständler, bei denen Anfragen,
+ Termine, Daten und Freigaben nicht länger in Tabellen, Postfächern
+ und halbfertigen Tools hängen bleiben.
Ablauf prüfen lassen
diff --git a/public/styles.css b/public/styles.css
index 084f235..8c340cf 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -58,12 +58,18 @@
html {
scroll-padding-top: 86px;
+ background:
+ linear-gradient(90deg, rgba(10,10,10,.032) 1px, transparent 1px),
+ linear-gradient(0deg, rgba(10,10,10,.032) 1px, transparent 1px),
+ var(--paper);
+ background-size: 72px 72px;
+ background-attachment: fixed;
}
body {
font-family: var(--grotesk);
color: var(--ink);
- background: var(--paper);
+ background: transparent;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
@@ -544,14 +550,33 @@ p, li { text-wrap: pretty; }
HERO
============================================================ */
.hero {
- min-height: 0;
+ display: flex;
+ position: relative;
+ isolation: isolate;
+ min-height: calc(100svh - var(--header-h));
+ overflow: hidden;
+}
+.hero::before {
+ content: "CTRL";
+ position: absolute;
+ left: -0.18em;
+ bottom: -0.36em;
+ z-index: -1;
+ color: rgba(10,10,10,.028);
+ font-size: clamp(180px, 26vw, 420px);
+ line-height: .78;
+ font-weight: 900;
+ letter-spacing: 0;
+ pointer-events: none;
}
.hero-grid {
+ flex: 1;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 64px;
- align-items: start;
- padding: clamp(42px, 5vh, 62px) 32px clamp(44px, 6vh, 72px);
+ align-items: center;
+ align-content: start;
+ padding: clamp(96px, 18svh, 190px) 32px clamp(44px, 6vh, 72px);
}
.hero-copy,
.hero-visual {
@@ -943,7 +968,11 @@ p, li { text-wrap: pretty; }
HALTUNG
============================================================ */
.section.stance-section {
- background: var(--black);
+ background:
+ linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
+ linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px),
+ var(--black);
+ background-size: 72px 72px;
color: var(--paper);
padding: 86px 0 96px;
}
@@ -1103,9 +1132,7 @@ p, li { text-wrap: pretty; }
/* ============================================================
PRODUKTWIRKUNG
============================================================ */
-.product-section {
- background: var(--paper);
-}
+.product-section { background: transparent; }
.product-grid {
display: grid;
grid-template-columns: .86fr 1.14fr;
@@ -1338,7 +1365,7 @@ p, li { text-wrap: pretty; }
.section { padding: var(--section-y) 0; }
section[id] { scroll-margin-top: 92px; }
.site-footer { scroll-margin-top: 92px; }
-.section-alt { background: var(--paper-2); }
+.section-alt { background: transparent; }
.section-head { max-width: 620px; margin-bottom: 56px; }
.section-title {
font-size: var(--type-section-title);
@@ -1508,9 +1535,7 @@ section[id] { scroll-margin-top: 92px; }
}
/* ---------- Industries ---------- */
-.industry-section {
- background: var(--paper-2);
-}
+.industry-section { background: transparent; }
.industry-section > .wrap {
display: grid;
grid-template-columns: .62fr .38fr;
@@ -1820,7 +1845,7 @@ section[id] { scroll-margin-top: 92px; }
EVENTS
============================================================ */
.event-section {
- background: var(--paper);
+ background: transparent;
color: var(--black);
min-height: var(--viewport-section-h);
display: flex;
@@ -1985,7 +2010,11 @@ section[id] { scroll-margin-top: 92px; }
KONTAKT
============================================================ */
.section-dark {
- background: var(--black);
+ background:
+ linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
+ linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px),
+ var(--black);
+ background-size: 72px 72px;
color: var(--paper);
}
.kontakt-grid {
@@ -2147,7 +2176,11 @@ section[id] { scroll-margin-top: 92px; }
FOOTER
============================================================ */
.site-footer {
- background: var(--black);
+ background:
+ linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
+ linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px),
+ var(--black);
+ background-size: 72px 72px;
color: var(--paper);
padding: 22px 0;
}
@@ -2229,6 +2262,12 @@ section[id] { scroll-margin-top: 92px; }
}
.hero {
min-height: 0;
+ background: transparent;
+ overflow: visible;
+ }
+ .hero::before,
+ .hero::after {
+ content: none;
}
.hero-grid {
grid-template-columns: 1fr;
@@ -2236,6 +2275,7 @@ section[id] { scroll-margin-top: 92px; }
align-items: start;
min-height: 0;
padding: 64px 32px;
+ transform: none;
}
.hero-actions { margin-top: 36px; }
.stance-grid { grid-template-columns: 1fr; }