/* ============================================================
AEGIS REAL ESTATE & INVESTMENTS -- Master Stylesheet
============================================================ */
/* --- Google Fonts ---
Loaded via tags in HTML for non-blocking performance.
Fallback: system fonts defined in --font-heading and --font-body variables.
--- */
/* --- CSS Custom Properties --- */
:root {
--color-bg-primary: #1E3A3F;
--color-bg-dark: #162E32;
--color-bg-card: #234549;
--color-bg-card-hover: #2A5258;
--color-gold: #C5A55A;
--color-gold-light: #D4B96E;
--color-gold-dark: #A8893E;
--color-text: #E8E4DC;
--color-text-bright: #FFFFFF;
--color-text-muted: #8FA5A8;
--color-overlay: rgba(22, 46, 50, 0.7);
--color-overlay-heavy: rgba(22, 46, 50, 0.85);
--font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
--nav-height: 80px;
--section-padding: clamp(60px, 8vw, 120px);
--container-width: 1200px;
--container-padding: clamp(20px, 4vw, 40px);
--border-radius: 4px;
--transition: 0.3s ease;
}
/* --- Reset --- */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
background-color: var(--color-bg-primary);
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-gold);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--color-gold-light);
}
ul, ol {
list-style: none;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
border: none;
outline: none;
background: none;
}
/* --- Utility --- */
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.section {
padding: var(--section-padding) 0;
}
.text-center {
text-align: center;
}
.text-gold {
color: var(--color-gold);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
color: var(--color-text-bright);
}
h1 {
font-size: clamp(2.2rem, 5vw, 3.8rem);
margin-bottom: 0.5em;
}
h2 {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
margin-bottom: 0.6em;
}
h3 {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
margin-bottom: 0.5em;
}
h4 {
font-size: clamp(1.1rem, 2vw, 1.4rem);
margin-bottom: 0.4em;
}
p {
margin-bottom: 1em;
}
.section-label {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 15px;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-gold);
}
.section-label::before,
.section-label::after {
content: '';
flex: 1;
max-width: 200px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-gold));
}
.section-label::after {
background: linear-gradient(90deg, var(--color-gold), transparent);
}
.section-subtitle {
max-width: 700px;
margin: 0 auto 2em;
text-align: center;
color: var(--color-text);
font-size: 1.05rem;
line-height: 1.8;
}
/* --- Buttons --- */
.btn {
display: inline-block;
padding: 14px 36px;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
border-radius: var(--border-radius);
cursor: pointer;
transition: all var(--transition);
}
.btn-gold {
background-color: var(--color-gold);
color: var(--color-bg-dark);
}
.btn-gold:hover {
background-color: var(--color-gold-light);
color: var(--color-bg-dark);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(197, 165, 90, 0.3);
}
.btn-gold:active {
background-color: var(--color-gold-dark);
transform: translateY(0);
}
.btn-outline {
border: 1px solid var(--color-gold);
color: var(--color-gold);
background: transparent;
}
.btn-outline:hover {
background-color: var(--color-gold);
color: var(--color-bg-dark);
transform: translateY(-2px);
}
/* ============================================================
NAVIGATION
============================================================ */
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--nav-height);
z-index: 1000;
transition: background-color var(--transition), box-shadow var(--transition);
}
.nav.transparent {
background-color: transparent;
}
.nav.scrolled {
background-color: var(--color-bg-dark);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--container-padding);
}
.nav-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.nav-logo img {
height: 50px;
width: auto;
}
.nav-logo span {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text-bright);
letter-spacing: 0.05em;
display: none;
}
.nav-links {
display: flex;
align-items: center;
gap: clamp(16px, 2.5vw, 32px);
}
.nav-links a {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text);
text-decoration: none;
position: relative;
padding: 4px 0;
transition: color var(--transition);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-gold);
transition: width var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
color: var(--color-gold);
}
.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 5px;
z-index: 1001;
}
.hamburger span {
display: block;
width: 28px;
height: 2px;
background-color: var(--color-text-bright);
transition: all var(--transition);
}
.hamburger.open span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Mobile Menu */
.mobile-menu {
display: none;
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background-color: var(--color-bg-dark);
padding: 100px 40px 40px;
transition: right var(--transition);
z-index: 999;
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
}
.mobile-menu.open {
right: 0;
}
.mobile-menu a {
display: block;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text);
padding: 15px 0;
border-bottom: 1px solid rgba(197, 165, 90, 0.15);
transition: color var(--transition), padding-left var(--transition);
}
.mobile-menu a:hover,
.mobile-menu a.active {
color: var(--color-gold);
padding-left: 10px;
}
.mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 998;
opacity: 0;
transition: opacity var(--transition);
}
.mobile-overlay.open {
opacity: 1;
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* Default hero background — homepage. Pages without a hero override this with their own class.
Browsers select the best supported format natively; no JS swap required. */
background-image: url('beach-front-luxury-home.png');
background-image: -webkit-image-set(
url('beach-front-luxury-home.webp') type('image/webp') 1x,
url('beach-front-luxury-home.png') type('image/png') 1x
);
background-image: image-set(
url('beach-front-luxury-home.webp') type('image/webp') 1x,
url('beach-front-luxury-home.png') type('image/png') 1x
);
}
/* Mobile hero — serve the 768px-wide WebP (52K vs 168K desktop) */
@media (max-width: 768px) {
.hero-bg {
background-image: url('beach-front-luxury-home.png');
background-image: -webkit-image-set(
url('beach-front-luxury-home-768.webp') type('image/webp') 1x,
url('beach-front-luxury-home.png') type('image/png') 1x
);
background-image: image-set(
url('beach-front-luxury-home-768.webp') type('image/webp') 1x,
url('beach-front-luxury-home.png') type('image/png') 1x
);
}
}
.hero-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
rgba(22, 46, 50, 0.4) 0%,
rgba(22, 46, 50, 0.6) 50%,
rgba(30, 58, 63, 0.9) 100%
);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
padding: 0 var(--container-padding);
}
.hero h1 {
font-size: clamp(2.4rem, 5.5vw, 4.2rem);
font-weight: 700;
color: var(--color-text-bright);
margin-bottom: 0.3em;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.hero .hero-tagline {
font-family: var(--font-body);
font-size: clamp(0.85rem, 1.5vw, 1.05rem);
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text);
margin-bottom: 0.5em;
}
.hero .hero-sub {
font-family: var(--font-heading);
font-size: clamp(1.1rem, 2vw, 1.5rem);
font-weight: 500;
color: var(--color-text-bright);
margin-bottom: 1.5em;
}
.hero .hero-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin: 2em auto;
}
.hero .hero-divider::before,
.hero .hero-divider::after {
content: '';
width: clamp(80px, 20vw, 200px);
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-gold));
}
.hero .hero-divider::after {
background: linear-gradient(90deg, var(--color-gold), transparent);
}
/* Page Hero (inner pages) */
.page-hero {
position: relative;
height: 45vh;
min-height: 350px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--color-bg-dark);
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-primary) 100%);
opacity: 0.9;
}
.page-hero-content {
position: relative;
z-index: 2;
padding-top: var(--nav-height);
}
.page-hero h1 {
font-size: clamp(2rem, 4.5vw, 3.5rem);
margin-bottom: 0.3em;
}
.page-hero .hero-tagline {
font-family: var(--font-body);
font-size: clamp(0.85rem, 1.5vw, 1rem);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-gold);
}
/* ============================================================
CONTENT SECTIONS
============================================================ */
/* --- Two Column Layout --- */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(30px, 5vw, 60px);
align-items: center;
}
.two-col img {
border-radius: var(--border-radius);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
/* --- Checkmark List --- */
.check-list {
list-style: none;
}
.check-list li {
position: relative;
padding-left: 35px;
margin-bottom: 14px;
font-weight: 500;
color: var(--color-text-bright);
}
.check-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 1px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
color: var(--color-bg-dark);
background-color: var(--color-gold);
border-radius: 50%;
}
/* --- Icon Grid (Strategy / Services) --- */
.icon-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
}
.icon-card {
padding: 30px 20px;
transition: transform var(--transition);
}
.icon-card:hover {
transform: translateY(-5px);
}
.icon-card img {
width: 140px;
height: 140px;
object-fit: contain;
margin: 0 auto 20px;
}
.icon-card h4 {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: 12px;
}
.icon-card p {
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.6;
}
/* --- Service Cards --- */
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.service-card {
background-color: var(--color-bg-card);
border: 1px solid rgba(197, 165, 90, 0.15);
border-radius: var(--border-radius);
padding: 40px 30px;
transition: all var(--transition);
}
.service-card:hover {
background-color: var(--color-bg-card-hover);
border-color: rgba(197, 165, 90, 0.3);
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.service-card .card-icon {
font-size: 2.5rem;
margin-bottom: 20px;
color: var(--color-gold);
}
.service-card h3 {
font-size: 1.3rem;
margin-bottom: 12px;
}
.service-card p {
color: var(--color-text-muted);
font-size: 0.95rem;
}
/* --- Stats Bar --- */
.stats-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
text-align: center;
padding: 50px 0;
border-top: 1px solid rgba(197, 165, 90, 0.2);
border-bottom: 1px solid rgba(197, 165, 90, 0.2);
}
.stat-item .stat-number {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--color-gold);
display: block;
}
.stat-item .stat-label {
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: 5px;
}
/* --- CTA Banner --- */
.cta-banner {
background: linear-gradient(135deg, var(--color-bg-dark) 0%, #1a3538 100%);
border-top: 1px solid rgba(197, 165, 90, 0.2);
border-bottom: 1px solid rgba(197, 165, 90, 0.2);
text-align: center;
padding: var(--section-padding) 0;
}
.cta-banner h2 {
margin-bottom: 0.4em;
}
.cta-banner p {
max-width: 600px;
margin: 0 auto 2em;
color: var(--color-text);
}
/* --- Team Grid --- */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.team-card {
text-align: center;
padding: 30px 20px;
background-color: var(--color-bg-card);
border: 1px solid rgba(197, 165, 90, 0.1);
border-radius: var(--border-radius);
transition: all var(--transition);
}
.team-card:hover {
border-color: rgba(197, 165, 90, 0.3);
transform: translateY(-3px);
}
.team-card .team-photo {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 20px;
border: 2px solid var(--color-gold);
background-color: var(--color-bg-primary);
}
.team-card h4 {
font-family: var(--font-heading);
margin-bottom: 4px;
}
.team-card .team-role {
font-size: 0.85rem;
color: var(--color-gold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ============================================================
LISTINGS
============================================================ */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-bottom: 40px;
padding: 25px;
background-color: var(--color-bg-card);
border: 1px solid rgba(197, 165, 90, 0.15);
border-radius: var(--border-radius);
}
.filter-bar select,
.filter-bar input {
padding: 10px 16px;
background-color: var(--color-bg-primary);
border: 1px solid rgba(197, 165, 90, 0.3);
border-radius: var(--border-radius);
color: var(--color-text);
font-size: 0.9rem;
min-width: 180px;
}
.filter-bar select:focus,
.filter-bar input:focus {
border-color: var(--color-gold);
box-shadow: 0 0 0 2px rgba(197, 165, 90, 0.15);
}
.listing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 30px;
}
.listing-card {
background-color: var(--color-bg-card);
border: 1px solid rgba(197, 165, 90, 0.1);
border-radius: var(--border-radius);
overflow: hidden;
transition: all var(--transition);
}
.listing-card:hover {
border-color: rgba(197, 165, 90, 0.3);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.listing-card .listing-img {
width: 100%;
height: 240px;
object-fit: cover;
background-color: var(--color-bg-primary);
}
.listing-card .listing-info {
padding: 24px;
}
.listing-card .listing-price {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-gold);
margin-bottom: 6px;
}
.listing-card .listing-address {
font-size: 0.95rem;
color: var(--color-text);
margin-bottom: 12px;
}
.listing-card .listing-details {
display: flex;
gap: 20px;
font-size: 0.85rem;
color: var(--color-text-muted);
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(197, 165, 90, 0.1);
}
.listing-card .listing-details span {
display: flex;
align-items: center;
gap: 5px;
}
.listing-card .listing-type {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold);
background-color: rgba(197, 165, 90, 0.1);
padding: 4px 12px;
border-radius: 20px;
display: inline-block;
}
/* ============================================================
MORTGAGE CALCULATOR
============================================================ */
.calculator-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: start;
}
.calc-form {
background-color: var(--color-bg-card);
border: 1px solid rgba(197, 165, 90, 0.15);
border-radius: var(--border-radius);
padding: 40px;
}
.calc-form h3 {
margin-bottom: 25px;
color: var(--color-gold);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin-bottom: 6px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px 16px;
background-color: var(--color-bg-primary);
border: 1px solid rgba(197, 165, 90, 0.25);
border-radius: var(--border-radius);
color: var(--color-text-bright);
font-size: 1rem;
transition: border-color var(--transition);
}
.form-group input:focus,
.form-group select:focus {
border-color: var(--color-gold);
box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.1);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.calc-results {
background-color: var(--color-bg-card);
border: 1px solid rgba(197, 165, 90, 0.15);
border-radius: var(--border-radius);
padding: 40px;
text-align: center;
}
.calc-results h3 {
margin-bottom: 30px;
color: var(--color-gold);
}
.monthly-total {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--color-text-bright);
margin-bottom: 5px;
}
.monthly-label {
font-size: 0.85rem;
color: var(--color-text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 30px;
}
.breakdown-list {
text-align: left;
margin-bottom: 30px;
}
.breakdown-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(197, 165, 90, 0.1);
font-size: 0.95rem;
}
.breakdown-item .breakdown-label {
color: var(--color-text-muted);
}
.breakdown-item .breakdown-value {
font-weight: 600;
color: var(--color-text-bright);
}
/* Donut Chart */
.chart-container {
width: 200px;
height: 200px;
margin: 0 auto 30px;
position: relative;
}
.chart-container canvas {
width: 100%;
height: 100%;
}
/* --- Pre-Qualification Form --- */
.prequal-form {
background-color: var(--color-bg-card);
border: 1px solid rgba(197, 165, 90, 0.15);
border-radius: var(--border-radius);
padding: 50px 40px;
max-width: 800px;
margin: 0 auto;
}
.prequal-form h3 {
margin-bottom: 10px;
color: var(--color-gold);
}
.prequal-form .form-subtitle {
color: var(--color-text-muted);
margin-bottom: 30px;
font-size: 0.95rem;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-grid .full-width {
grid-column: 1 / -1;
}
/* ============================================================
CONTACT
============================================================ */
.contact-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 50px;
align-items: start;
}
.contact-form {
background-color: var(--color-bg-card);
border: 1px solid rgba(197, 165, 90, 0.15);
border-radius: var(--border-radius);
padding: 40px;
}
.contact-form textarea {
width: 100%;
padding: 12px 16px;
background-color: var(--color-bg-primary);
border: 1px solid rgba(197, 165, 90, 0.25);
border-radius: var(--border-radius);
color: var(--color-text-bright);
font-size: 1rem;
resize: vertical;
min-height: 140px;
transition: border-color var(--transition);
}
.contact-form textarea:focus {
border-color: var(--color-gold);
box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.1);
}
.contact-sidebar {
display: flex;
flex-direction: column;
gap: 30px;
}
.contact-info-card {
background-color: var(--color-bg-card);
border: 1px solid rgba(197, 165, 90, 0.15);
border-radius: var(--border-radius);
padding: 30px;
}
.contact-info-card h4 {
color: var(--color-gold);
margin-bottom: 15px;
font-size: 1rem;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.contact-info-card p {
color: var(--color-text-muted);
font-size: 0.95rem;
margin-bottom: 8px;
}
.map-placeholder {
width: 100%;
height: 250px;
background-color: var(--color-bg-card);
border: 1px solid rgba(197, 165, 90, 0.15);
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: 0.9rem;
}
/* ============================================================
FOOTER
============================================================ */
.footer {
background-color: var(--color-bg-dark);
padding: 60px 0 0;
border-top: 1px solid rgba(197, 165, 90, 0.15);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 40px;
}
.footer-brand img {
height: 60px;
margin-bottom: 15px;
}
.footer-brand p {
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.6;
max-width: 280px;
}
.footer h5 {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: 20px;
}
.footer-links a {
display: block;
font-size: 0.9rem;
color: var(--color-text-muted);
padding: 5px 0;
transition: color var(--transition), padding-left var(--transition);
}
.footer-links a:hover {
color: var(--color-gold);
padding-left: 5px;
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(197, 165, 90, 0.3);
border-radius: 50%;
color: var(--color-text-muted);
font-size: 1rem;
transition: all var(--transition);
}
.footer-social a:hover {
background-color: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-bg-dark);
}
.footer-bottom {
border-top: 1px solid rgba(197, 165, 90, 0.1);
padding: 20px 0;
text-align: center;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.footer-bottom strong {
color: var(--color-text);
}
.footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 22px;
padding: 14px 0 6px;
font-size: 0.82rem;
}
.footer-legal a {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition);
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
color: var(--color-gold);
}
.footer-legal .sep {
color: rgba(143, 165, 168, 0.4);
user-select: none;
}
/* ============================================================
SCROLL ANIMATIONS
============================================================ */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.icon-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.calculator-wrap {
grid-template-columns: 1fr;
}
.contact-grid {
grid-template-columns: 1fr;
}
.two-col {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
:root {
--nav-height: 65px;
--container-padding: 20px;
}
/* Hide desktop nav, show hamburger */
.nav-links {
display: none !important;
}
.hamburger {
display: flex !important;
}
.mobile-menu {
display: block;
}
.mobile-overlay {
display: block;
}
/* Hero adjustments */
.hero {
min-height: 85vh;
}
.hero h1 {
font-size: clamp(1.8rem, 7vw, 2.8rem);
}
.hero .hero-tagline {
font-size: 0.75rem;
letter-spacing: 0.15em;
}
.hero .hero-sub {
font-size: 1.1rem;
}
.hero .hero-divider {
flex-direction: column;
gap: 15px;
}
.hero .hero-divider::before,
.hero .hero-divider::after {
width: 120px;
}
.hero-bg {
background-size: cover;
background-position: center center;
}
.page-hero {
min-height: 250px;
height: 35vh;
}
.page-hero h1 {
font-size: clamp(1.6rem, 6vw, 2.5rem);
}
/* Section spacing */
.section {
padding: clamp(40px, 6vw, 80px) 0;
}
.section-subtitle {
font-size: 0.95rem;
padding: 0 10px;
}
/* Grid layouts */
.icon-grid {
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.icon-card {
padding: 20px 12px;
}
.icon-card img {
width: 100px;
height: 100px;
margin-bottom: 12px;
}
.icon-card h4 {
font-size: 0.7rem;
letter-spacing: 0.1em;
}
.icon-card p {
font-size: 0.82rem;
line-height: 1.5;
}
.listing-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.listing-card .listing-img {
height: 200px;
}
.listing-card .listing-info {
padding: 18px;
}
/* Forms */
.form-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
/* Stats */
.stats-bar {
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 35px 0;
}
/* Filter */
.filter-bar {
flex-direction: column;
padding: 20px;
}
.filter-bar select,
.filter-bar input {
min-width: 100%;
}
/* Footer */
.footer {
padding: 40px 0 0;
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
gap: 30px;
}
.footer-brand {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-brand img {
margin: 0 auto 15px;
}
.footer-brand p {
max-width: 100%;
}
.footer-social {
justify-content: center;
}
.footer-bottom {
padding: 15px 0;
font-size: 0.75rem;
}
/* Buttons */
.btn {
padding: 12px 28px;
font-size: 0.8rem;
}
/* Two-col */
.two-col img {
max-width: 100%;
}
/* CTA Banner */
.cta-banner {
padding: clamp(40px, 6vw, 80px) 0;
}
.cta-banner p {
font-size: 0.95rem;
padding: 0 10px;
}
/* Service cards */
.service-card {
padding: 30px 20px;
}
/* Team */
.team-grid {
grid-template-columns: 1fr;
}
/* Calculator */
.calculator-wrap {
gap: 30px;
}
/* Contact */
.contact-grid {
gap: 30px;
}
.contact-info-card {
padding: 24px;
}
}
/* Small mobile (iPhone SE, older phones) */
@media (max-width: 480px) {
:root {
--container-padding: 16px;
}
.icon-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.icon-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
text-align: left;
padding: 16px;
background-color: var(--color-bg-card);
border-radius: var(--border-radius);
border: 1px solid rgba(197, 165, 90, 0.1);
}
.icon-card img {
width: 70px;
height: 70px;
margin: 0;
flex-shrink: 0;
}
.icon-card h4 {
margin-bottom: 4px;
}
.icon-card p {
font-size: 0.8rem;
margin-bottom: 0;
}
.stats-bar {
grid-template-columns: 1fr;
}
.hero {
min-height: 80vh;
}
.hero h1 {
font-size: clamp(1.6rem, 8vw, 2.2rem);
}
.hero .hero-tagline {
font-size: 0.7rem;
}
.page-hero {
min-height: 220px;
}
.calc-form,
.calc-results,
.prequal-form,
.contact-form {
padding: 20px 16px;
}
.section-label {
font-size: 0.75rem;
gap: 12px;
}
.section-label::before,
.section-label::after {
max-width: 80px;
}
.listing-card .listing-img {
height: 180px;
}
.listing-card .listing-details {
flex-wrap: wrap;
gap: 10px;
}
/* Ensure all images scale properly */
img {
max-width: 100%;
height: auto;
}
.nav-logo img {
height: 40px;
}
}
/* Extra small (iPhone SE 1st gen, 320px) */
@media (max-width: 360px) {
:root {
--container-padding: 12px;
}
.hero h1 {
font-size: 1.5rem;
}
.btn {
padding: 10px 20px;
font-size: 0.75rem;
}
.mobile-menu {
width: 260px;
padding: 90px 30px 30px;
}
.footer-grid {
gap: 24px;
}
}
/* ==========================================================
ACCESSIBILITY — WCAG 2.1 AA additions
========================================================== */
/* Bump muted text from #8FA5A8 (3.6:1 on #1E3A3F) to #B8C8CB (4.7:1 AA pass).
Override the token so every existing usage benefits without HTML edits. */
:root {
--color-text-muted: #B8C8CB;
}
/* Skip-to-content link — visible only on keyboard focus */
.skip-link {
position: absolute;
top: -100px;
left: 0;
background: var(--color-gold);
color: var(--color-bg-dark);
padding: 12px 20px;
text-decoration: none;
font-weight: 700;
z-index: 9999;
border-radius: 0 0 4px 0;
transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 0;
outline: 3px solid var(--color-text-bright);
outline-offset: 2px;
}
/* Universal :focus-visible — clear, high-contrast keyboard focus ring on every
interactive element. Uses focus-visible so mouse clicks don't show the ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.icon-card:focus-visible,
.listing-card:focus-visible {
outline: 3px solid var(--color-gold-light);
outline-offset: 3px;
border-radius: 2px;
}
/* Hamburger as