Improve hero layout, gallery grid, and anchor scroll offset.
Stack hero actions in a row, center the fifth gallery item, and offset in-page navigation for the sticky header.
This commit is contained in:
+43
-22
@@ -1,4 +1,3 @@
|
||||
|
||||
:root {
|
||||
--brand: #f78f1e;
|
||||
--brand-deep: #d96f12;
|
||||
@@ -13,6 +12,9 @@
|
||||
--muted: #8b9298;
|
||||
--max-width: 72rem;
|
||||
--header-height: 5rem;
|
||||
--notice-bar-height: 1.875rem;
|
||||
--site-header-height: calc(var(--header-height) + var(--notice-bar-height));
|
||||
--sticky-offset: calc((var(--site-header-height) + 0.5rem) * 0.5);
|
||||
--radius: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
}
|
||||
@@ -27,6 +29,10 @@ html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
main > section[id] {
|
||||
scroll-margin-top: var(--sticky-offset);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
@@ -35,7 +41,11 @@ html {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text);
|
||||
@@ -68,7 +78,6 @@ a:hover {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
|
||||
.site-notice {
|
||||
padding-block: 0.375rem;
|
||||
text-align: center;
|
||||
@@ -145,7 +154,6 @@ a:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -157,7 +165,10 @@ a:hover {
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
transition:
|
||||
background 0.15s,
|
||||
border-color 0.15s,
|
||||
color 0.15s;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
@@ -184,7 +195,6 @@ a:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
padding-block: clamp(3rem, 8vw, 6rem);
|
||||
@@ -196,8 +206,16 @@ a:hover {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 50% -20%, rgba(247, 143, 30, 0.18), transparent),
|
||||
radial-gradient(ellipse 50% 40% at 100% 50%, rgba(0, 154, 218, 0.1), transparent);
|
||||
radial-gradient(
|
||||
ellipse 80% 60% at 50% -20%,
|
||||
rgba(247, 143, 30, 0.18),
|
||||
transparent
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse 50% 40% at 100% 50%,
|
||||
rgba(0, 154, 218, 0.1),
|
||||
transparent
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -243,7 +261,7 @@ a:hover {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 0.75rem;
|
||||
margin: 0 0 1.25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@@ -267,13 +285,13 @@ a:hover {
|
||||
}
|
||||
|
||||
.hero__sub {
|
||||
margin: 0 0 2rem;
|
||||
margin: 2rem 0 2rem;
|
||||
font-size: clamp(1rem, 2vw, 1.125rem);
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
.hero__actions-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
@@ -304,7 +322,6 @@ a:hover {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.section {
|
||||
padding-block: clamp(3rem, 6vw, 5rem);
|
||||
}
|
||||
@@ -326,7 +343,6 @@ a:hover {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
|
||||
.about p {
|
||||
margin: 0 0 1rem;
|
||||
max-width: 42rem;
|
||||
@@ -337,7 +353,6 @@ a:hover {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.pillars {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -382,7 +397,6 @@ a:hover {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -404,7 +418,12 @@ a:hover {
|
||||
|
||||
.feature-card--lead {
|
||||
border-color: rgba(247, 143, 30, 0.4);
|
||||
background: linear-gradient(135deg, rgba(247, 143, 30, 0.08), rgba(0, 154, 218, 0.05), var(--surface));
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(247, 143, 30, 0.08),
|
||||
rgba(0, 154, 218, 0.05),
|
||||
var(--surface)
|
||||
);
|
||||
}
|
||||
|
||||
.feature-card__icon {
|
||||
@@ -441,7 +460,6 @@ a:hover {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@@ -493,7 +511,6 @@ a:hover {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
|
||||
.roadmap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@@ -529,7 +546,6 @@ a:hover {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -542,6 +558,14 @@ a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 40.01rem) {
|
||||
.gallery__item--last {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: center;
|
||||
width: calc((100% - 1.25rem) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery__item {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -640,7 +664,6 @@ body:has(.lightbox:target) {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
|
||||
.cta-block {
|
||||
text-align: center;
|
||||
padding: 2.5rem 1.5rem;
|
||||
@@ -669,7 +692,6 @@ body:has(.lightbox:target) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -711,7 +733,6 @@ body:has(.lightbox:target) {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
|
||||
.site-footer {
|
||||
padding-block: 2rem 2.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
|
||||
Reference in New Issue
Block a user