tknuth/southernmonsarysupply
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Implement initial home and contact pages with global styling.

Browse Source
This commit is contained in:
Timo Knuth
2026-03-11 10:29:36 +01:00
parent 0fbfae29d9
commit 3ef4f6b2ad
3 changed files with 159 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
app/globals.css
View File

@@ -121,11 +121,11 @@ img {
}
.section {
padding: 5rem 0;
padding: 3rem 0;
}
.section-tight {
padding: 3rem 0;
padding: 2rem 0;
}
.section-soft {
@@ -149,15 +149,15 @@ img {
/* Typography Scale */
h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-size: clamp(2rem, 4vw, 3.25rem);
}
h2 {
font-size: clamp(2rem, 4vw, 2.75rem);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
h3 {
font-size: clamp(1.5rem, 3vw, 1.75rem);
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}
p {
@@ -170,14 +170,14 @@ p {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 2.25rem;
padding: 0.55rem 1.25rem;
font-weight: 700;
border-radius: var(--radius);
transition: var(--transition);
cursor: pointer;
border: none;
gap: 0.5rem;
font-size: 1rem;
font-size: 0.85rem;
}
.button-primary {
@@ -227,8 +227,8 @@ main {
.site-utility-bar {
background: var(--secondary-dark);
color: var(--white);
padding: 0.625rem 0;
font-size: 0.8125rem;
padding: 0.2rem 0;
font-size: 0.75rem;
font-weight: 500;
}
@@ -255,7 +255,7 @@ main {
/* Header */
.site-header {
background: var(--white);
padding: 1.25rem 0;
padding: 0.4rem 0;
position: sticky;
top: 0;
z-index: 100;
@@ -305,7 +305,7 @@ main {
clip-path: none;
border-radius: 0;
overflow: visible;
width: clamp(220px, 24vw, 360px);
width: clamp(140px, 15vw, 220px);
}
.brand-logo {
@@ -336,7 +336,7 @@ main {
font-family: 'Comfortaa', 'Nunito', sans-serif;
font-weight: 700;
color: #1a8c8c;
font-size: clamp(1.05rem, 2.3vw, 1.65rem);
font-size: clamp(0.95rem, 2vw, 1.4rem);
line-height: 1;
white-space: nowrap;
letter-spacing: 0px;
@@ -378,7 +378,7 @@ main {
.main-nav {
display: flex;
gap: 2.25rem;
gap: 1.75rem;
}
.nav-link {
@@ -712,19 +712,20 @@ main {
.contact-layout {
display: grid;
grid-template-columns: 1fr 400px;
gap: 4rem;
gap: 2.5rem;
align-items: start;
}
.contact-card {
background: white;
padding: 3rem;
padding: 2rem;
border-radius: 12px;
border: 1px solid var(--border);
box-shadow: var(--shadow-xl);
}
.card-heading {
margin-bottom: 3rem;
margin-bottom: 1.25rem;
}
.contact-sidebar {
@@ -773,6 +774,59 @@ main {
border-radius: 12px;
}
.contact-next-steps {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
}
.contact-next-steps .eyebrow {
display: block;
margin-bottom: 1rem;
}
.contact-steps-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.contact-step-item {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.contact-step-num {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: rgba(244, 127, 32, 0.12);
color: var(--primary);
font-size: 0.7rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.15rem;
}
.contact-step-item strong {
display: block;
font-size: 0.875rem;
font-weight: 700;
margin-bottom: 0.2rem;
}
.contact-step-item p {
font-size: 0.8125rem;
color: var(--text-muted);
line-height: 1.5;
margin: 0;
}
.detail-list {
list-style: none;
padding: 0;
@@ -796,19 +850,19 @@ main {
/* --- Forms --- */
.form-grid {
display: grid;
gap: 2rem;
gap: 1.25rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
gap: 1rem;
}
.field {
display: flex;
flex-direction: column;
gap: 0.75rem;
gap: 0.5rem;
}
.field label {
@@ -822,7 +876,7 @@ main {
.field input,
.field select,
.field textarea {
padding: 1rem;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: 8px;
font-family: inherit;
@@ -839,7 +893,7 @@ main {
}
.field textarea {
min-height: 150px;
min-height: 100px;
resize: vertical;
}
@@ -884,7 +938,7 @@ main {
/* --- Page Heroes --- */
.page-hero {
padding: 6rem 0 5rem;
padding: 3rem 0 2.5rem;
background-color: var(--bg-contrast);
color: white;
position: relative;
@@ -957,16 +1011,16 @@ main {
}
.page-hero-copy h1 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.1;
margin-bottom: 1.5rem;
margin-bottom: 1.25rem;
}
.hero-copy {
font-size: 1.25rem;
font-size: 1.125rem;
opacity: 0.9;
max-width: 600px;
margin-bottom: 2rem;
margin-bottom: 1.5rem;
}
.page-hero-meta {
@@ -990,7 +1044,7 @@ main {
.page-hero-visual {
position: relative;
height: 450px;
height: 380px;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-2xl);
@@ -1026,14 +1080,14 @@ main {
/* --- Material Catalog --- */
.catalog-intro {
margin-bottom: 4rem;
margin-bottom: 2rem;
max-width: 800px;
}
.material-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2.5rem;
gap: 2rem;
}
.material-card {
@@ -1046,7 +1100,7 @@ main {
.material-card-media {
position: relative;
height: 240px;
height: 180px;
background: #f8f9fa;
overflow: hidden;
}
@@ -1060,7 +1114,12 @@ main {
}
.material-card-content {
padding: 2rem;
padding: 1.5rem;
}
.material-card-content p {
font-size: 0.8125rem;
line-height: 1.5;
}
.material-card-tag {
@@ -1074,8 +1133,8 @@ main {
}
.material-card h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
font-size: 1rem;
margin-bottom: 0.75rem;
}
.material-card-meta {
@@ -1273,7 +1332,7 @@ main {
.home-hero {
position: relative;
padding: 8rem 0;
padding: 6rem 0;
background: var(--secondary);
color: var(--white);
overflow: hidden;
@@ -1298,8 +1357,8 @@ main {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.5rem;
margin-bottom: 2.5rem;
margin-top: 1rem;
margin-bottom: 1.25rem;
padding: 0.5rem 0.25rem;
border-radius: 8px;
}
@@ -1338,12 +1397,12 @@ main {
/* Service Band */
.quick-service-band {
background: var(--primary);
padding: 2.5rem 0;
padding: 1.25rem 0;
color: white;
box-shadow: 0 10px 30px rgba(244, 127, 32, 0.2);
position: relative;
z-index: 10;
margin-top: -3rem;
margin-top: 0;
}
.quick-service-grid {
@@ -1491,7 +1550,7 @@ main {
.home-hero {
display: grid;
grid-template-columns: minmax(0, 60%) minmax(0, 40%);
min-height: 90vh;
min-height: 48vh;
overflow: hidden;
background: var(--secondary);
padding: 0 !important;
@@ -1502,8 +1561,8 @@ main {
.home-hero-left {
display: flex;
align-items: center;
padding: 6rem max(2rem, calc((100vw - 1280px) / 2 + 1.5rem));
padding-right: 6rem;
padding: 2.5rem max(2rem, calc((100vw - 1280px) / 2 + 1.5rem));
padding-right: 3.5rem;
position: relative;
}
@@ -1618,10 +1677,10 @@ main {
/* ── Floating video card ── */
.hc-video-card {
position: absolute;
bottom: 3rem;
right: 3rem;
bottom: 2rem;
right: 2rem;
z-index: 20;
width: clamp(280px, 24vw, 390px);
width: clamp(240px, 20vw, 320px);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 1.5px rgba(255, 255, 255, 0.15);
@@ -1697,16 +1756,17 @@ main {
.home-hero-copy h1 {
color: var(--white);
font-size: clamp(2.5rem, 3.5vw, 4rem);
line-height: 1.1;
margin-bottom: 1.5rem;
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1.05;
font-weight: 800;
margin-bottom: 1.25rem;
}
.home-hero-copy p {
color: rgba(224, 225, 221, 0.85);
font-size: 1.2rem;
line-height: 1.6;
font-size: clamp(1rem, 2vw, 1.15rem);
color: rgba(255, 255, 255, 0.85);
margin-bottom: 2.5rem;
line-height: 1.6;
}
.hero-actions {
@@ -1985,14 +2045,14 @@ main {
.about-story {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
gap: 4rem;
align-items: start;
}
.about-story-copy {
display: flex;
flex-direction: column;
gap: 3rem;
gap: 1.75rem;
}
.story-block h2 {
@@ -2316,7 +2376,7 @@ main {
.stats-band {
background: var(--secondary);
padding: 3.5rem 0;
padding: 2.5rem 0;
border-top: 3px solid var(--primary);
}
@@ -2534,28 +2594,28 @@ main {
.home-cta-section {
background: var(--secondary);
padding: 6rem 0;
padding: 3.5rem 0;
color: white;
}
.home-cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
gap: 3rem;
align-items: center;
}
.home-cta-copy h2 {
color: white;
font-size: clamp(1.75rem, 3vw, 2.75rem);
margin-bottom: 1.25rem;
font-size: clamp(1.5rem, 3vw, 2.25rem);
margin-bottom: 1rem;
}
.home-cta-copy>p {
color: rgba(255, 255, 255, 0.7);
font-size: 1.0625rem;
line-height: 1.7;
margin-bottom: 2rem;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.home-cta-contact-items {
@@ -2598,7 +2658,7 @@ a.home-cta-contact-item:hover {
.home-cta-form-card {
background: white;
border-radius: 16px;
padding: 2.5rem;
padding: 2rem;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}
@@ -2712,15 +2772,15 @@ a.home-cta-contact-item:hover {
.inventory-overview-media {
position: relative;
min-height: 280px;
min-height: 200px;
}
.inventory-overview-copy {
padding: 2rem;
padding: 1.5rem;
}
.inventory-overview-copy h2 {
margin-bottom: 1rem;
margin-bottom: 0.5rem;
}
.inventory-chip-list {
@@ -2860,7 +2920,7 @@ a.home-cta-contact-item:hover {
}
.inventory-overview-media {
min-height: 220px;
min-height: 160px;
}
}