mirror of
https://github.com/Sea-Haven-Industries/seahaven-site.git
synced 2026-09-30 19:23:18 +00:00
edc4f3f6b9
Some checks are pending
Deploy / deploy (push) Waiting to run
* feat(content): add sustainability page * feat(nav): add sustainability to primary nav Five links plus the CTA button no longer fit above the existing 768px breakpoint; between 769px and ~855px the Get a Quote button wrapped to two lines inside the 72px bar. Move the nav collapse to its own 900px media query so the hamburger takes over before the bar runs out of room.
481 lines
10 KiB
CSS
481 lines
10 KiB
CSS
/* ══════════════════════════════════════════════
|
|
Sea Haven Industries — Shared Styles
|
|
══════════════════════════════════════════════ */
|
|
|
|
/* ── Self-hosted fonts (latin subset) ── */
|
|
@font-face {
|
|
font-family: 'DM Serif Display';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('/assets/fonts/dm-serif-display.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'DM Serif Display';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('/assets/fonts/dm-serif-display-italic.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 100 900; /* variable */
|
|
font-display: swap;
|
|
src: url('/assets/fonts/inter.woff2') format('woff2');
|
|
}
|
|
|
|
/* ── Reset & Tokens ── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--rose: #cc3366;
|
|
--rose-dark: #a82a54;
|
|
--rose-tint: #f7edf1;
|
|
--ink: #1a1814;
|
|
--ink-mid: #3d3730;
|
|
--body-bg: #faf9f7;
|
|
--surface: #ffffff;
|
|
--warm-gray: #f0ece6;
|
|
--border: #e0dbd4;
|
|
--text: #2a2520;
|
|
--text-muted: #6b645d;
|
|
--font-display: 'DM Serif Display', Georgia, serif;
|
|
--font-body: 'Inter', system-ui, sans-serif;
|
|
--max-w: 1200px;
|
|
--gap: clamp(1.5rem, 4vw, 3rem);
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
line-height: 1.65;
|
|
color: var(--text);
|
|
background: var(--body-bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
img { display: block; max-width: 100%; }
|
|
a { color: inherit; text-decoration: none; }
|
|
|
|
/* ── Skip link (a11y) ── */
|
|
.skip-link {
|
|
position: absolute;
|
|
left: -9999px;
|
|
top: 0;
|
|
z-index: 200;
|
|
background: var(--rose);
|
|
color: #fff;
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: 0 0 3px 0;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
.skip-link:focus { left: 0; }
|
|
|
|
/* ── Visible keyboard focus (a11y) ── */
|
|
:focus-visible {
|
|
outline: 2px solid var(--rose);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.container {
|
|
max-width: var(--max-w);
|
|
margin-inline: auto;
|
|
padding-inline: clamp(1.25rem, 5vw, 2.5rem);
|
|
}
|
|
|
|
/* ── Typography ── */
|
|
.display-lg {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
line-height: 1.1;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
.display-md {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.5rem, 3vw, 2.25rem);
|
|
line-height: 1.2;
|
|
}
|
|
.label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--rose);
|
|
}
|
|
|
|
/* ── Buttons ── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
padding: 0.875rem 1.75rem;
|
|
border-radius: 2px;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
border: 1.5px solid transparent;
|
|
}
|
|
.btn-primary {
|
|
background: var(--rose);
|
|
color: #fff;
|
|
border-color: var(--rose);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--rose-dark);
|
|
border-color: var(--rose-dark);
|
|
}
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: var(--rose);
|
|
border-color: var(--rose);
|
|
}
|
|
.btn-outline:hover {
|
|
background: var(--rose);
|
|
color: #fff;
|
|
}
|
|
.btn-ghost-light {
|
|
background: transparent;
|
|
color: #fff;
|
|
border-color: rgba(255,255,255,0.5);
|
|
}
|
|
.btn-ghost-light:hover {
|
|
background: rgba(255,255,255,0.12);
|
|
border-color: #fff;
|
|
}
|
|
.btn svg { width: 1rem; height: 1rem; }
|
|
|
|
/* ── Navigation (Interior Page — always white) ── */
|
|
.site-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: rgba(255,255,255,0.97);
|
|
box-shadow: 0 1px 0 var(--border);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
transition: background 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.nav-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 72px;
|
|
}
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
}
|
|
.nav-logo img { height: 44px; width: auto; }
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
.nav-links a {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--ink-mid);
|
|
transition: color 0.15s;
|
|
}
|
|
.nav-links a:hover { color: var(--rose); }
|
|
|
|
.nav-cta {
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 2px;
|
|
border: 1.5px solid var(--rose);
|
|
color: var(--rose);
|
|
background: transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
.nav-cta:hover {
|
|
background: var(--rose);
|
|
border-color: var(--rose);
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-hamburger {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
background: none;
|
|
border: none;
|
|
color: var(--ink);
|
|
}
|
|
.nav-hamburger span {
|
|
display: block;
|
|
width: 24px;
|
|
height: 2px;
|
|
background: currentColor;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
/* ── Mobile Nav ── */
|
|
.mobile-menu {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--ink);
|
|
z-index: 99;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
}
|
|
.mobile-menu.open { display: flex; }
|
|
.mobile-menu a {
|
|
font-family: var(--font-display);
|
|
font-size: 2rem;
|
|
color: rgba(255,255,255,0.75);
|
|
transition: color 0.15s;
|
|
}
|
|
.mobile-menu a:hover { color: #fff; }
|
|
.mobile-menu-close {
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
right: 1.5rem;
|
|
background: none;
|
|
border: none;
|
|
color: rgba(255,255,255,0.5);
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ── Page Hero ── */
|
|
.page-hero {
|
|
background: var(--ink);
|
|
padding: 140px 0 60px;
|
|
}
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.8125rem;
|
|
color: rgba(255,255,255,0.4);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.breadcrumb a {
|
|
color: rgba(255,255,255,0.5);
|
|
transition: color 0.15s;
|
|
}
|
|
.breadcrumb a:hover { color: #fff; }
|
|
.breadcrumb span { color: rgba(255,255,255,0.25); }
|
|
.page-hero h1 {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2.25rem, 5vw, 3.5rem);
|
|
line-height: 1.1;
|
|
color: #fff;
|
|
}
|
|
|
|
/* ── Section Scaffolding ── */
|
|
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
|
|
.section-header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
|
|
.section-header .label { margin-bottom: 0.75rem; }
|
|
|
|
/* ── CTA Banner ── */
|
|
.cta-section {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--warm-gray);
|
|
}
|
|
.cta-inner {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 3rem;
|
|
align-items: center;
|
|
padding: clamp(3.5rem, 7vw, 6rem) 0;
|
|
}
|
|
.cta-text .label { margin-bottom: 0.75rem; }
|
|
.cta-text h2 { margin-bottom: 1rem; }
|
|
.cta-text p {
|
|
color: var(--text-muted);
|
|
font-size: 1rem;
|
|
max-width: 520px;
|
|
line-height: 1.75;
|
|
}
|
|
.cta-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
align-items: flex-start;
|
|
white-space: nowrap;
|
|
}
|
|
.cta-phone {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.cta-phone strong {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Common Form Styles ── */
|
|
.form-group {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
.form-group input,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
border: 1px solid var(--border);
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 2px;
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
color: var(--text);
|
|
background: var(--surface);
|
|
transition: border-color 0.2s ease;
|
|
outline: none;
|
|
}
|
|
.form-group input::placeholder,
|
|
.form-group textarea::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
.form-group input:focus,
|
|
.form-group textarea:focus {
|
|
border-color: var(--rose);
|
|
}
|
|
.form-group textarea {
|
|
resize: vertical;
|
|
min-height: 120px;
|
|
}
|
|
.form-submit {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* ── Footer ── */
|
|
.site-footer {
|
|
background: var(--ink);
|
|
padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
|
|
}
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.75fr 1fr 1fr 1fr;
|
|
gap: 3rem;
|
|
padding-bottom: 3rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.07);
|
|
}
|
|
.footer-brand img { height: 38px; margin-bottom: 1rem; }
|
|
.footer-brand p {
|
|
font-size: 0.875rem;
|
|
color: rgba(255,255,255,0.62);
|
|
line-height: 1.75;
|
|
max-width: 260px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.footer-social {
|
|
display: flex;
|
|
gap: 0.625rem;
|
|
}
|
|
.footer-social a {
|
|
width: 36px;
|
|
height: 36px;
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
border-radius: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(255,255,255,0.62);
|
|
font-size: 0.75rem;
|
|
transition: all 0.2s;
|
|
}
|
|
.footer-social a:hover {
|
|
border-color: var(--rose);
|
|
color: var(--rose);
|
|
}
|
|
.footer-col h4 {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: rgba(255,255,255,0.58);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.footer-col ul { list-style: none; }
|
|
.footer-col ul li { margin-bottom: 0.625rem; }
|
|
.footer-col ul li a {
|
|
font-size: 0.875rem;
|
|
color: rgba(255,255,255,0.66);
|
|
transition: color 0.15s;
|
|
}
|
|
.footer-col ul li a:hover { color: #fff; }
|
|
.footer-contact-item {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
font-size: 0.875rem;
|
|
color: rgba(255,255,255,0.66);
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.5;
|
|
}
|
|
.footer-contact-item strong { color: rgba(255,255,255,0.75); }
|
|
.footer-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: 1.75rem;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.footer-bottom p {
|
|
font-size: 0.8125rem;
|
|
color: rgba(255,255,255,0.56);
|
|
}
|
|
.footer-bottom-links {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
list-style: none;
|
|
}
|
|
.footer-bottom-links a {
|
|
font-size: 0.8125rem;
|
|
color: rgba(255,255,255,0.56);
|
|
transition: color 0.15s;
|
|
}
|
|
.footer-bottom-links a:hover { color: rgba(255,255,255,0.65); }
|
|
|
|
/* ── Shared Responsive ── */
|
|
@media (max-width: 1024px) {
|
|
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
|
|
.footer-brand { grid-column: span 2; }
|
|
}
|
|
|
|
/* Nav collapses ahead of the other breakpoints: five links plus the CTA run
|
|
out of room below ~855px and the button wraps to two lines in a 72px bar. */
|
|
@media (max-width: 900px) {
|
|
.nav-links, .nav-cta { display: none; }
|
|
.nav-hamburger { display: flex; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.cta-inner { grid-template-columns: 1fr; }
|
|
.footer-grid { grid-template-columns: 1fr; }
|
|
.footer-brand { grid-column: span 1; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.page-hero { padding: 120px 0 40px; }
|
|
}
|