/* =============================================
VANTAGE SYDNEY WASTE MANAGEMENT
Master Stylesheet — style.css
Apply to all pages with:
============================================= */
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── DESIGN TOKENS (change colours here) ── */
:root {
--green-dark: #3F704D;
--green-mid: #2d6a35;
--green-bright: #4caf50;
--green-light: #a8d5ab;
--cream: #f5f0e8;
--cream-dark: #eee8da;
--amber: #e8a020;
--dark: #111;
--text-muted: #5a5a5a;
}
/* ── BASE ── */
body {
font-family: 'DM Sans', sans-serif;
background: var(--cream);
color: var(--dark);
overflow-x: hidden;
}
/* ── GOOGLE FONTS — add this in every page ──
── */
/* =============================================
NAVIGATION
============================================= */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; justify-content: space-between; align-items: center;
padding: 1.2rem 4rem;
background: rgba(26,58,31,0.97);
backdrop-filter: blur(8px);
}
.nav-logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.6rem; color: var(--green-light);
letter-spacing: 2px; line-height: 1; text-decoration: none;
}
.nav-logo span { color: var(--amber); }
.nav-logo small {
display: block; font-family: 'DM Sans', sans-serif;
font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase;
color: rgba(255,255,255,0.4); font-weight: 400; margin-top: 2px;
}
nav ul { display: flex; gap: 2.5rem; list-style: none; align-items: center; }
nav ul a {
color: rgba(255,255,255,0.75); text-decoration: none;
font-size: 0.82rem; font-weight: 500; letter-spacing: 1px;
text-transform: uppercase; transition: color 0.2s;
}
nav ul a:hover { color: var(--green-light); }
.nav-cta {
background: var(--amber) !important;
color: var(--dark) !important;
padding: 0.5rem 1.4rem; border-radius: 2px;
}
/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after { content: '▾'; font-size: 0.7rem; margin-left: 0.3rem; }
.dropdown-menu {
position: absolute; top: calc(100% + 0.5rem); left: 50%;
transform: translateX(-50%) translateY(-6px);
background: var(--green-dark); border: 1px solid rgba(255,255,255,0.1);
border-top: 3px solid var(--amber); border-radius: 2px;
min-width: 220px; opacity: 0; pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.nav-dropdown:hover .dropdown-menu {
opacity: 1; pointer-events: all;
transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.85rem 1.25rem; color: rgba(255,255,255,0.7) !important;
text-decoration: none; font-size: 0.8rem; letter-spacing: 0.5px;
text-transform: none !important; font-weight: 400 !important;
border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 0.15s;
}
.dropdown-menu a:last-child { border-bottom: none; }
.dropdown-menu a:hover { background: rgba(76,175,80,0.12); color: #fff !important; }
.d-icon { font-size: 1rem; width: 1.2rem; text-align: center; }
.nav-dropdown::before {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 1rem;
}
/* =============================================
PAGE HERO (service pages)
============================================= */
.page-hero {
min-height: 55vh; background: var(--green-dark);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 8rem 4rem 4rem; position: relative; overflow: hidden;
}
.page-hero::before {
content: ''; position: absolute; top: -80px; right: -80px;
width: 500px; height: 500px; border-radius: 50%;
border: 70px solid rgba(76,175,80,0.07);
}
.page-hero::after {
content: ''; position: absolute; bottom: -150px; right: 200px;
width: 300px; height: 300px; border-radius: 50%;
border: 50px solid rgba(76,175,80,0.05);
}
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.breadcrumb a {
color: rgba(255,255,255,0.4); text-decoration: none;
font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--green-light); }
.breadcrumb span { color: rgba(255,255,255,0.2); font-size: 0.78rem; }
.breadcrumb .current { color: var(--green-light); font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; }
.hero-tag {
display: inline-block; background: rgba(76,175,80,0.15);
color: var(--green-light); padding: 0.35rem 1rem; border-radius: 2px;
font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase;
margin-bottom: 1.2rem; border: 1px solid rgba(168,213,171,0.2); width: fit-content;
}
.page-hero h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.5rem, 7vw, 6rem);
line-height: 0.95; color: #fff; letter-spacing: 1px; max-width: 700px;
}
.page-hero h1 em { font-style: normal; color: var(--green-bright); }
.page-hero-sub {
color: rgba(255,255,255,0.55); font-size: 1rem;
font-weight: 300; line-height: 1.7; max-width: 600px; margin-top: 1.2rem;
}
/* =============================================
HOMEPAGE HERO
============================================= */
.hero {
min-height: 100vh; background: var(--green-dark);
display: grid; grid-template-columns: 1fr 1fr;
align-items: center; padding: 8rem 4rem 4rem;
position: relative; overflow: hidden;
}
.hero::before {
content: ''; position: absolute; top: -100px; right: -100px;
width: 600px; height: 600px; border-radius: 50%;
border: 80px solid rgba(76,175,80,0.08);
}
.hero::after {
content: ''; position: absolute; bottom: -200px; right: 80px;
width: 400px; height: 400px; border-radius: 50%;
border: 60px solid rgba(76,175,80,0.05);
}
.hero h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.5rem, 7vw, 6.5rem);
line-height: 0.95; color: #fff; margin-bottom: 1.5rem; letter-spacing: 1px;
}
.hero h1 em { font-style: normal; color: var(--green-bright); }
.hero-sub {
color: rgba(255,255,255,0.6); font-size: 1.05rem;
font-weight: 300; line-height: 1.7; max-width: 440px; margin-bottom: 0.75rem;
}
.hero-domain { color: rgba(232,160,32,0.7); font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 2rem; }
.hero-btns { display: flex; gap: 1rem; align-items: center; }
.hero-visual { display: flex; flex-direction: column; gap: 1rem; padding-left: 4rem; position: relative; z-index: 1; }
.stat-card {
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
border-radius: 4px; padding: 1.5rem; backdrop-filter: blur(4px);
}
.stat-card:nth-child(2) {
margin-left: 3rem; border-color: rgba(76,175,80,0.3);
background: rgba(76,175,80,0.08);
}
.stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: #fff; line-height: 1; }
.stat-num span { color: var(--green-bright); }
.stat-label { color: rgba(255,255,255,0.5); font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 0.3rem; }
/* =============================================
BUTTONS
============================================= */
.btn-primary {
background: var(--amber); color: var(--dark);
padding: 0.9rem 2rem; font-family: 'DM Sans', sans-serif;
font-weight: 500; font-size: 0.9rem; border: none; cursor: pointer;
letter-spacing: 0.5px; border-radius: 2px;
transition: transform 0.15s, opacity 0.15s;
text-decoration: none; display: inline-block;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-ghost {
background: transparent; color: rgba(255,255,255,0.7);
padding: 0.9rem 2rem; font-family: 'DM Sans', sans-serif;
font-weight: 400; font-size: 0.9rem;
border: 1px solid rgba(255,255,255,0.2); cursor: pointer;
border-radius: 2px; transition: border-color 0.2s, color 0.2s;
text-decoration: none; display: inline-block;
}
.btn-ghost:hover { border-color: var(--green-light); color: var(--green-light); }
.btn-submit {
background: var(--green-dark); color: #fff; padding: 0.9rem 2rem;
border: none; cursor: pointer; font-family: 'DM Sans', sans-serif;
font-weight: 500; font-size: 0.9rem; border-radius: 2px;
transition: background 0.2s; letter-spacing: 0.5px; width: 100%;
}
.btn-submit:hover { background: var(--green-mid); }
/* =============================================
SECTION UTILITIES
============================================= */
.section-label {
font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase;
color: var(--green-mid); font-weight: 500; margin-bottom: 0.75rem;
}
.section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(--green-dark); line-height: 1; margin-bottom: 3.5rem; max-width: 500px;
}
.section-title em { font-style: normal; color: var(--green-bright); }
/* =============================================
INTRO GRID (used on service pages)
============================================= */
.intro {
padding: 5rem 4rem; background: var(--cream);
display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.intro h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
color: var(--green-dark); line-height: 1.05; margin-bottom: 1.2rem;
}
.intro p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.75; margin-bottom: 1rem; }
.intro-features { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.feature-row { display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; color: var(--green-dark); font-weight: 500; }
.feature-dot { width: 8px; height: 8px; background: var(--green-bright); border-radius: 50%; flex-shrink: 0; }
.intro-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.i-stat { background: var(--green-dark); padding: 2rem; border-radius: 2px; }
.i-stat.amber { background: var(--amber); }
.i-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; color: #fff; line-height: 1; }
.i-num span { color: var(--green-bright); }
.i-stat.amber .i-num { color: var(--dark); }
.i-stat.amber .i-num span { color: var(--dark); }
.i-label { color: rgba(255,255,255,0.5); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 0.3rem; }
.i-stat.amber .i-label { color: rgba(0,0,0,0.5); }
/* =============================================
SERVICES GRID (homepage)
============================================= */
.services { padding: 6rem 4rem; background: var(--cream); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: #c8c0b0; }
.service-item {
background: var(--cream); padding: 2.5rem;
transition: background 0.3s; text-decoration: none;
display: block; position: relative; overflow: hidden;
}
.service-item::after {
content: 'View Service →'; position: absolute; bottom: 1.5rem; right: 1.5rem;
font-size: 0.75rem; color: var(--amber); opacity: 0;
transition: opacity 0.3s; font-weight: 500; letter-spacing: 0.5px;
}
.service-item:hover { background: var(--green-dark); }
.service-item:hover::after { opacity: 1; }
.service-item:hover .service-name,
.service-item:hover .service-desc { color: #fff; }
.service-item:hover .service-icon { color: var(--green-light); }
.service-icon { font-size: 2rem; color: var(--green-mid); margin-bottom: 1.2rem; display: block; transition: color 0.3s; }
.service-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 1px; color: var(--green-dark); margin-bottom: 0.75rem; transition: color 0.3s; }
.service-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; transition: color 0.3s; }
/* =============================================
IMPACT STRIP
============================================= */
.impact {
background: var(--green-dark); padding: 4rem;
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 3px solid var(--amber);
}
.impact-item { padding: 2rem; border-right: 1px solid rgba(255,255,255,0.08); text-align: center; }
.impact-item:last-child { border-right: none; }
.impact-num { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: var(--amber); line-height: 1; }
.impact-label { color: rgba(255,255,255,0.5); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 0.4rem; }
/* =============================================
PROCESS STEPS
============================================= */
.process { padding: 5rem 4rem; background: var(--cream); }
.process h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 5vw, 3.5rem);
color: var(--green-dark); line-height: 1; margin-bottom: 3rem;
}
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5px; background: #c8c0b0; }
.step { background: var(--cream); padding: 2.5rem 2rem; position: relative; }
.step-num {
font-family: 'Bebas Neue', sans-serif; font-size: 4rem;
color: rgba(26,58,31,0.07); line-height: 1; position: absolute; top: 1rem; right: 1.5rem;
}
.step-icon { font-size: 1.8rem; margin-bottom: 1rem; display: block; }
.step-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--green-dark); letter-spacing: 1px; margin-bottom: 0.5rem; }
.step-desc { font-size: 0.83rem; color: var(--text-muted); line-height: 1.6; }
/* =============================================
WARNING STRIP
============================================= */
.warning-strip { background: var(--amber); padding: 2rem 4rem; display: flex; align-items: center; gap: 2rem; }
.warning-icon { font-size: 2.5rem; flex-shrink: 0; }
.warning-text h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--dark); letter-spacing: 1px; margin-bottom: 0.3rem; }
.warning-text p { font-size: 0.88rem; color: rgba(0,0,0,0.65); line-height: 1.5; }
/* =============================================
CONTACT / CTA SECTION
============================================= */
.cta-section {
padding: 5rem 4rem; background: var(--cream);
display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
border-top: 3px solid var(--amber);
}
.cta-section h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 5vw, 3.5rem);
color: var(--green-dark); line-height: 1;
}
.cta-section p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-top: 1rem; }
.contact-detail { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.2rem; color: var(--green-dark); font-weight: 500; }
.contact-detail a { color: var(--green-dark); text-decoration: none; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form input,
.contact-form select,
.contact-form textarea {
background: #fff; border: 1px solid #d8d0c0; border-radius: 2px;
padding: 0.85rem 1rem; font-family: 'DM Sans', sans-serif;
font-size: 0.88rem; color: var(--dark); width: 100%; outline: none; transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--green-mid); }
.contact-form textarea { resize: vertical; min-height: 100px; }
/* =============================================
OTHER SERVICES BAR (bottom of service pages)
============================================= */
.other-services { padding: 4rem; background: var(--green-dark); }
.other-services .section-label { color: rgba(255,255,255,0.4); margin-bottom: 1.5rem; }
.services-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5px; background: rgba(255,255,255,0.06); }
.other-service { background: var(--green-dark); padding: 1.5rem; text-decoration: none; transition: background 0.2s; }
.other-service:hover { background: rgba(76,175,80,0.12); }
.os-icon { font-size: 1.4rem; margin-bottom: 0.5rem; display: block; }
.os-name { font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.4; }
.os-arrow { color: var(--green-light); font-size: 0.75rem; margin-top: 0.5rem; display: block; opacity: 0; transition: opacity 0.2s; }
.other-service:hover .os-arrow { opacity: 1; }
/* =============================================
FOOTER
============================================= */
footer { background: #0d1f10; padding: 2.5rem 4rem; }
.footer-top {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 1.5rem; padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: var(--green-light); letter-spacing: 2px; }
.footer-logo span { color: var(--amber); }
.footer-logo small {
display: block; font-family: 'DM Sans', sans-serif;
font-size: 0.58rem; letter-spacing: 3px; text-transform: uppercase;
color: rgba(255,255,255,0.3); font-weight: 400; margin-top: 2px;
}
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.4); text-decoration: none; font-size: 0.8rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--green-light); }
.footer-bottom { display: flex; justify-content: space-between; }
footer p { color: rgba(255,255,255,0.3); font-size: 0.75rem; }
.footer-domain { color: rgba(232,160,32,0.5); font-size: 0.75rem; }
/* =============================================
ANIMATIONS
============================================= */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-content > * { animation: fadeUp 0.6s ease both; }
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.25s; }
.hero-content > *:nth-child(3) { animation-delay: 0.4s; }
.hero-content > *:nth-child(4) { animation-delay: 0.5s; }
.hero-content > *:nth-child(5) { animation-delay: 0.6s; }
.stat-card:nth-child(1) { animation: fadeUp 0.6s 0.5s ease both; }
.stat-card:nth-child(2) { animation: fadeUp 0.6s 0.7s ease both; }
.stat-card:nth-child(3) { animation: fadeUp 0.6s 0.9s ease both; }
.page-hero > * { animation: fadeUp 0.5s ease both; }
.page-hero > *:nth-child(1) { animation-delay: 0.1s; }
.page-hero > *:nth-child(2) { animation-delay: 0.2s; }
.page-hero > *:nth-child(3) { animation-delay: 0.3s; }
.page-hero > *:nth-child(4) { animation-delay: 0.4s; }