Restore compact hero layout
This commit is contained in:
1 parent
4f03a16d25
commit
41a5958184
3 files changed
+12
-70
No files matched your search
+1
-10
@@ -70,22 +70,13 @@
|
||||
|
||||
<main>
|
||||
|
||||
<!-- ============ SIGNAL BAR ============ -->
|
||||
<section class="signal-bar" aria-label="ToolCTRL Fokus">
|
||||
<div class="wrap signal-inner">
|
||||
<strong>ToolCTRL baut Betriebssysteme für gewachsene Abläufe.</strong>
|
||||
<span>Keine Baukastenlösung. Kein Tool-Stapel. Ein System, das Arbeit weiterbringt.</span>
|
||||
<a href="#kontakt">Ablauf prüfen lassen</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ HERO ============ -->
|
||||
<section class="hero">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-copy">
|
||||
<span class="hero-kicker">Interne Software · Automatisierung · Betrieb</span>
|
||||
<h1 class="hero-title">
|
||||
Wir ersetzen Excel, WhatsApp-Chaos und Insellösungen durch ein System.
|
||||
Moderne Software für Abläufe, die zu lange in Excel und Chats festhängen.
|
||||
</h1>
|
||||
<p class="hero-lead">
|
||||
ToolCTRL baut Software für Teams, deren echte Abläufe zu speziell für
|
||||
|
||||
@@ -40,7 +40,6 @@
|
||||
var reduceMotion = window.matchMedia &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
var revealEls = Array.prototype.slice.call(document.querySelectorAll([
|
||||
".signal-inner > *",
|
||||
".hero-copy > *",
|
||||
".hero-visual",
|
||||
".trust-strip span",
|
||||
|
||||
+11
-59
@@ -308,47 +308,6 @@ p, li { text-wrap: pretty; }
|
||||
}
|
||||
.mobile-nav .btn { margin-top: 12px; }
|
||||
|
||||
/* ============================================================
|
||||
SIGNAL BAR
|
||||
============================================================ */
|
||||
.signal-bar {
|
||||
background: var(--black);
|
||||
color: var(--paper);
|
||||
border-bottom: 1px solid #2B2B2B;
|
||||
}
|
||||
.signal-inner {
|
||||
min-height: 76px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
.signal-inner strong,
|
||||
.signal-inner a {
|
||||
font-size: 12px;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
}
|
||||
.signal-inner strong {
|
||||
color: var(--paper);
|
||||
}
|
||||
.signal-inner strong::before {
|
||||
content: "+ ";
|
||||
}
|
||||
.signal-inner span {
|
||||
color: #D6D6D6;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.signal-inner a {
|
||||
color: var(--black);
|
||||
background: var(--paper);
|
||||
border: 1.5px solid var(--paper);
|
||||
padding: 12px 16px;
|
||||
box-shadow: inset 0 -2px 0 rgba(10,10,10,.14);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
HERO
|
||||
============================================================ */
|
||||
@@ -357,10 +316,10 @@ p, li { text-wrap: pretty; }
|
||||
}
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.02fr .98fr;
|
||||
gap: 64px;
|
||||
grid-template-columns: 1.05fr .95fr;
|
||||
gap: 58px;
|
||||
align-items: center;
|
||||
padding: 86px 32px 96px;
|
||||
padding: 76px 32px 82px;
|
||||
}
|
||||
.hero-kicker {
|
||||
display: inline-flex;
|
||||
@@ -381,17 +340,17 @@ p, li { text-wrap: pretty; }
|
||||
border: 1.5px solid var(--black);
|
||||
}
|
||||
.hero-title {
|
||||
font-size: clamp(42px, 6.2vw, 82px);
|
||||
line-height: .94;
|
||||
letter-spacing: -.045em;
|
||||
font-size: clamp(34px, 4.4vw, 58px);
|
||||
line-height: 1.02;
|
||||
letter-spacing: -.035em;
|
||||
font-weight: 800;
|
||||
margin: 0 0 24px;
|
||||
max-width: 9.8em;
|
||||
max-width: 11.8em;
|
||||
}
|
||||
.hero-lead {
|
||||
font-size: 18px;
|
||||
font-size: 17px;
|
||||
color: var(--gray-1);
|
||||
max-width: 35em;
|
||||
max-width: 33em;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.hero-actions {
|
||||
@@ -1371,14 +1330,7 @@ section[id] { scroll-margin-top: 92px; }
|
||||
display: flex;
|
||||
animation: mobileMenuIn .18s cubic-bezier(.2, 0, 0, 1);
|
||||
}
|
||||
.signal-inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
padding-top: 18px;
|
||||
padding-bottom: 28px;
|
||||
}
|
||||
.signal-inner a { justify-self: start; }
|
||||
.hero-grid { grid-template-columns: 1fr; gap: 48px; padding: 84px 32px 72px; }
|
||||
.hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 72px 32px 64px; }
|
||||
.mission-track { gap: 12px; }
|
||||
.product-grid { grid-template-columns: 1fr; gap: 44px; }
|
||||
.cards { grid-template-columns: 1fr 1fr; }
|
||||
@@ -1402,7 +1354,7 @@ section[id] { scroll-margin-top: 92px; }
|
||||
.mobile-nav { padding: 16px 20px 24px; }
|
||||
.section { padding: 64px 0; }
|
||||
.section-head { margin-bottom: 36px; }
|
||||
.hero-title { font-size: clamp(42px, 13vw, 58px); }
|
||||
.hero-title { font-size: clamp(38px, 11vw, 52px); }
|
||||
.hero-actions .btn { flex: 1 1 auto; }
|
||||
.trust-strip span { flex: 1 1 100%; }
|
||||
.mission-head {
|
||||
|
||||
Reference in new issue
Block a user