/* style.css — Southern Landscape & Construction Co. — brand system + components */ /* ============ FONTS ============ */ /* Cormorant Garamond (display/serif) + Manrope (body) — loaded via in */ :root, [data-theme='light'] { /* Surfaces — warm cream, sampled/derived from the brand mark's parchment background */ --color-bg: #f8f1e2; --color-surface: #fdf9f0; --color-surface-2: #ffffff; --color-surface-offset: #f0e5cc; --color-surface-offset-2: #e8d9b8; --color-surface-dynamic: #e2d1ab; --color-divider: #e3d4b3; --color-border: #d8c49a; /* Text — deep espresso brown */ --color-text: #2a2015; --color-text-muted: #6d5d47; --color-text-faint: #a5936f; --color-text-inverse: #f8f1e2; /* Primary accent — forest green, from the logo's tree canopy */ --color-primary: #2f4a2e; --color-primary-hover: #24391f; --color-primary-active: #1a2a17; --color-primary-highlight: #dbe3d2; /* Secondary accent — terracotta brick, from the logo's paver path */ --color-accent: #b54b30; --color-accent-hover: #963c26; --color-accent-active: #782f1d; --color-accent-highlight: #ecd6c8; /* Tertiary — aged bronze, premium detailing */ --color-bronze: #9c7a3e; --color-bronze-hover: #7f6330; --color-bronze-highlight: #e9dcbd; --color-success: #3f6b34; --color-error: #a33b2c; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.625rem; --radius-xl: 1.25rem; --radius-full: 9999px; --shadow-sm: 0 1px 3px rgba(42, 32, 21, 0.08); --shadow-md: 0 8px 24px rgba(42, 32, 21, 0.1); --shadow-lg: 0 24px 56px rgba(42, 32, 21, 0.16); --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; --font-body: 'Manrope', 'Segoe UI', sans-serif; } [data-theme='dark'] { --color-bg: #12140e; --color-surface: #171a10; --color-surface-2: #1c1f14; --color-surface-offset: #202414; --color-surface-offset-2: #272c19; --color-surface-dynamic: #313721; --color-divider: #2a2e1b; --color-border: #3a3f26; --color-text: #ece4d0; --color-text-muted: #a89e83; --color-text-faint: #6c6650; --color-text-inverse: #17190f; --color-primary: #82ab72; --color-primary-hover: #9dc28c; --color-primary-active: #b3d6a3; --color-primary-highlight: #2a3624; --color-accent: #e08361; --color-accent-hover: #ec9a7a; --color-accent-active: #f2b199; --color-accent-highlight: #3a2a20; --color-bronze: #cbaa66; --color-bronze-hover: #ddc084; --color-bronze-highlight: #362c17; --color-success: #7cae6c; --color-error: #d97c66; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --color-bg: #12140e; --color-surface: #171a10; --color-surface-2: #1c1f14; --color-surface-offset: #202414; --color-surface-offset-2: #272c19; --color-surface-dynamic: #313721; --color-divider: #2a2e1b; --color-border: #3a3f26; --color-text: #ece4d0; --color-text-muted: #a89e83; --color-text-faint: #6c6650; --color-text-inverse: #17190f; --color-primary: #82ab72; --color-primary-hover: #9dc28c; --color-primary-active: #b3d6a3; --color-primary-highlight: #2a3624; --color-accent: #e08361; --color-accent-hover: #ec9a7a; --color-accent-active: #f2b199; --color-accent-highlight: #3a2a20; --color-bronze: #cbaa66; --color-bronze-hover: #ddc084; --color-bronze-highlight: #362c17; } } /* ============ TYPE ============ */ h1, h2, h3, h4, .font-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } em, .italic-display { font-style: italic; } .eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); } .lede { font-size: var(--text-lg); color: var(--color-text-muted); font-weight: 400; max-width: 42ch; } a { color: inherit; text-decoration: none; } /* ============ LAYOUT ============ */ .wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); } @media (min-width: 900px) { .wrap { padding-inline: var(--space-10); } } section, .section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); } .section-tight { padding-block: clamp(var(--space-10), 5vw, var(--space-16)); } main { display: block; overflow-x: clip; } /* ============ HEADER / NAV ============ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; height: var(--space-20); background: color-mix(in oklab, var(--color-bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s, background 0.35s; } .site-header.is-scrolled { border-bottom-color: var(--color-border); height: var(--space-16); } .site-header.is-hidden { transform: translateY(-100%); } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } .brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); flex-shrink: 0; } .brand-mark { width: 40px; height: 40px; flex-shrink: 0; } .brand-name { display: flex; flex-direction: column; line-height: 1.1; } .brand-name span:first-child { font-size: var(--text-lg); } .brand-name span:last-child { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); } .main-nav { display: none; } @media (min-width: 900px) { .main-nav { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-sm); font-weight: 600; } .main-nav a { position: relative; padding-block: var(--space-1); color: var(--color-text-muted); } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-text); } .main-nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--color-accent); border-radius: var(--radius-full); } } .header-actions { display: flex; align-items: center; gap: var(--space-3); } .theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); color: var(--color-text); border: 1px solid var(--color-border); } .theme-toggle:hover { background: var(--color-surface-offset); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); white-space: nowrap; border: 1px solid transparent; } .btn-primary { background: var(--color-primary); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-accent { background: var(--color-accent); color: #fff; } .btn-accent:hover { background: var(--color-accent-hover); transform: translateY(-1px); } .btn-outline { border-color: var(--color-border); color: var(--color-text); background: color-mix(in oklab, var(--color-surface) 60%, transparent); } .btn-outline:hover { border-color: var(--color-text); background: var(--color-surface-offset); } .btn-ghost { color: var(--color-text); padding-inline: var(--space-2); } .btn-ghost:hover { color: var(--color-accent); } .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); } .btn[hidden] { display: none; } .nav-cta { display: none; } @media (min-width: 900px) { .nav-cta { display: inline-flex; } } .menu-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text); } @media (min-width: 900px) { .menu-toggle { display: none; } } .mobile-menu { position: fixed; inset: var(--space-20) 0 0 0; z-index: 90; background: var(--color-bg); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.3s, transform 0.3s, visibility 0.3s; } .mobile-menu.is-open { opacity: 1; transform: translateY(0); visibility: visible; } .mobile-menu a { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; } @media (min-width: 900px) { .mobile-menu { display: none; } } /* ============ HERO / 3D CANVAS ============ */ .hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 14%, var(--color-bg)) 0%, var(--color-bg) 78%); } #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .hero-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, color-mix(in oklab, var(--color-bg) 38%, transparent) 0%, transparent 22%, transparent 40%, color-mix(in oklab, var(--color-bg) 94%, transparent) 88%), linear-gradient(100deg, color-mix(in oklab, var(--color-bg) 58%, transparent) 0%, color-mix(in oklab, var(--color-bg) 30%, transparent) 32%, transparent 62%); pointer-events: none; } .hero-content { position: relative; z-index: 3; width: 100%; padding-bottom: clamp(var(--space-16), 8vw, var(--space-24)); } .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); } .hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--color-accent); } .hero-title { font-size: var(--text-hero); max-width: 16ch; color: var(--color-text); } .hero-title em { color: var(--color-primary); font-style: italic; } [data-theme='dark'] .hero-title em, [data-theme='dark'] .hero-title { color: var(--color-text); } .hero-sub { margin-top: var(--space-6); font-size: var(--text-lg); color: var(--color-text-muted); max-width: 44ch; } .hero-actions { margin-top: var(--space-10); display: flex; gap: var(--space-4); flex-wrap: wrap; } .hero-scroll-cue { position: absolute; bottom: var(--space-8); right: var(--space-6); z-index: 3; display: none; align-items: center; gap: var(--space-2); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); } @media (min-width: 900px) { .hero-scroll-cue { display: flex; } .hero-title { max-width: 20ch; } } .hero-scroll-cue .line { width: 1px; height: 40px; background: linear-gradient(var(--color-text-muted), transparent); animation: scrollpulse 2s ease-in-out infinite; } @keyframes scrollpulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } } /* Small inner-page hero (no 3D) */ .page-hero { padding-top: clamp(var(--space-24), 16vw, var(--space-32)); padding-bottom: clamp(var(--space-10), 6vw, var(--space-16)); } .page-hero-title { font-size: var(--text-3xl); max-width: 18ch; } /* ============ SECTION HEADERS ============ */ .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); flex-wrap: wrap; } .section-title { font-size: var(--text-2xl); max-width: 18ch; } .section-head .lede { margin-top: var(--space-3); } /* ============ INTRO STATEMENT ============ */ .statement { max-width: 52rem; } .statement p { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.35; color: var(--color-text); } .statement .accent-word { color: var(--color-accent); font-style: italic; } /* ============ ASYMMETRIC SERVICES OVERVIEW ============ */ .services-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 760px) { .services-grid { grid-template-columns: repeat(6, 1fr); } .services-grid .service-card:nth-child(1) { grid-column: span 4; } .services-grid .service-card:nth-child(2) { grid-column: span 2; } .services-grid .service-card:nth-child(3) { grid-column: span 2; } .services-grid .service-card:nth-child(4) { grid-column: span 4; } .services-grid .service-card:nth-child(5) { grid-column: span 4; } .services-grid .service-card:nth-child(6) { grid-column: span 2; } } .service-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-8); isolation: isolate; border: 1px solid var(--color-border); } .service-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); } .service-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(20,15,8,0.86) 100%); pointer-events: none; } .service-card:hover > img { transform: scale(1.06); } /* Service card variant that embeds a before/after compare slider instead of a static image */ .service-card-compare .compare { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; border: none; } .service-card-compare .compare-tag { font-size: 10px; } .service-card-compare .service-card-num, .service-card-compare h3, .service-card-compare p { pointer-events: none; } .service-card-compare .card-link { pointer-events: auto; } .service-card-num { font-family: var(--font-display); font-size: var(--text-sm); color: rgba(255,255,255,0.65); margin-bottom: var(--space-2); } .service-card h3 { color: #fdf9f0; font-size: var(--text-xl); } .service-card p { color: rgba(253,249,240,0.82); margin-top: var(--space-2); max-width: 32ch; font-size: var(--text-sm); } .service-card .card-link { margin-top: var(--space-4); color: #fdf9f0; font-size: var(--text-sm); font-weight: 700; display: inline-flex; align-items: center; gap: var(--space-2); } .service-card .card-link svg { transition: transform 0.25s; } .service-card:hover .card-link svg { transform: translateX(4px); } /* ============ PROCESS STEPS ============ */ .process-list { display: flex; flex-direction: column; } .process-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); padding-block: var(--space-8); border-top: 1px solid var(--color-divider); } .process-item:first-child { border-top: 1px solid var(--color-divider); } .process-num { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text-faint); } .process-item h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; } .process-item p { color: var(--color-text-muted); margin-top: var(--space-2); max-width: 56ch; } @media (min-width: 760px) { .process-item { grid-template-columns: 120px 1fr 1fr; align-items: start; } } /* ============ TRANSFORMATION SLIDER ============ */ .compare { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; cursor: ew-resize; user-select: none; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); } .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .compare .compare-before { z-index: 1; } .compare .compare-after-wrap { position: absolute; inset: 0; z-index: 2; overflow: hidden; width: 50%; } .compare .compare-after-wrap img { width: var(--compare-w, 100vw); max-width: none; height: 100%; } .compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3; width: 3px; background: #fdf9f0; transform: translateX(-50%); pointer-events: none; } .compare-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%; background: #fdf9f0; transform: translate(-50%,-50%); box-shadow: var(--shadow-md); } .compare-handle::before { content: '\2194'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-58%); z-index: 4; font-size: 18px; color: var(--color-text); } .compare-tag { position: absolute; z-index: 3; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: rgba(20,15,8,0.55); color: #fdf9f0; backdrop-filter: blur(4px); } .compare-tag.before-tag { top: var(--space-4); right: var(--space-4); } .compare-tag.after-tag { top: var(--space-4); left: var(--space-4); } .showcase-caption { margin-top: var(--space-5); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; } .showcase-caption h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; } .showcase-caption span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-faint); } .showcase-nav { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); } .showcase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); } .showcase-dot.is-active { background: var(--color-accent); width: 24px; border-radius: var(--radius-full); } /* ============ SPOTLIGHT / FULL BLEED ============ */ .spotlight { position: relative; min-height: 90vh; display: flex; align-items: center; } .spotlight img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .spotlight::before { content:''; position: absolute; inset:0; z-index: -1; background: linear-gradient(90deg, rgba(15,12,7,0.86) 0%, rgba(15,12,7,0.42) 55%, rgba(15,12,7,0.1) 100%); } .spotlight-content { position: relative; z-index: 1; max-width: 34rem; color: #fdf9f0; } .spotlight .eyebrow { color: #e3b98c; } .spotlight h2 { color: #fdf9f0; font-size: var(--text-2xl); } .spotlight p { color: rgba(253,249,240,0.85); margin-top: var(--space-5); font-size: var(--text-base); max-width: 42ch; } /* ============ TRUST / STATS ============ */ .trust-band { background: var(--color-surface-offset); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); } .trust-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-8); } @media (min-width: 760px) { .trust-grid { grid-template-columns: repeat(4,1fr); } } .trust-item h3 { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); } [data-theme='dark'] .trust-item h3 { color: var(--color-primary); } .trust-item p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); } /* ============ VALUE / EXPERIENCE CARDS ============ */ .value-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 700px) { .value-grid { grid-template-columns: repeat(3,1fr); } } .value-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); background: var(--color-surface); } .value-card svg { width: 28px; height: 28px; color: var(--color-accent); } .value-card h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; margin-top: var(--space-5); } .value-card p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); } /* ============ CTA BAND ============ */ .cta-band { border-radius: var(--radius-xl); background: var(--color-primary); color: var(--color-text-inverse); padding: clamp(var(--space-10), 6vw, var(--space-16)); display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); flex-wrap: wrap; } .cta-band h2 { color: var(--color-text-inverse); font-size: var(--text-2xl); max-width: 20ch; } .cta-band p { color: color-mix(in oklab, var(--color-text-inverse) 78%, transparent); margin-top: var(--space-3); max-width: 42ch; } .cta-band .btn-primary { background: #fdf9f0; color: var(--color-primary); } .cta-band .btn-primary:hover { background: #fff; } /* ============ FOOTER ============ */ .site-footer { border-top: 1px solid var(--color-divider); padding-block: clamp(var(--space-12), 6vw, var(--space-20)); background: var(--color-surface-offset); } .footer-grid { display: grid; gap: var(--space-10); grid-template-columns: 1fr; } @media (min-width: 800px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer-brand { display: flex; gap: var(--space-3); align-items: flex-start; } .footer-brand svg, .footer-brand img { width: 44px; height: 44px; flex-shrink: 0; } .footer-brand p { color: var(--color-text-muted); margin-top: var(--space-3); max-width: 32ch; font-size: var(--text-sm); } .footer-col h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-faint); margin-bottom: var(--space-4); } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); } .footer-col a:hover { color: var(--color-accent); } .footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); } .footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); } .footer-social a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .footer-bottom { margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text-faint); flex-wrap: wrap; } /* ============ REVEAL ANIMATION ============ */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); } /* ============ MISC UTILITIES ============ */ .two-col { display: grid; gap: var(--space-10); grid-template-columns: 1fr; align-items: center; } @media (min-width: 860px) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-16); } } .two-col.reverse .two-col-media { order: -1; } @media (min-width: 860px) { .two-col.reverse .two-col-media { order: 1; } } .two-col-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .two-col-media.compare-media { border-radius: 0; overflow: visible; box-shadow: none; } .two-col-media.compare-media .compare { aspect-ratio: 4/3.2; } .two-col-media img { aspect-ratio: 4/3.2; object-fit: cover; width: 100%; } .pill-list { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .pill { font-size: var(--text-xs); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); } .check-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); } .check-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-muted); } .check-list svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; margin-top: 3px; } .skip-link { position: absolute; left: -9999px; top: var(--space-4); z-index: 200; background: var(--color-primary); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); } .skip-link:focus { left: var(--space-4); } /* ============ GALLERY / PORTFOLIO GRID ============ */ .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); } .filter-btn { font-size: var(--text-sm); font-weight: 600; padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text-muted); background: transparent; } .filter-btn:hover { border-color: var(--color-text); color: var(--color-text); } .filter-btn.is-active { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); } .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } @media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; display: block; border: 1px solid var(--color-border); isolation: isolate; } .gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); } .gallery-item::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 55%, rgba(20,15,8,0.82) 100%); opacity: 0; transition: opacity 0.35s; } .gallery-item:hover img { transform: scale(1.08); } .gallery-item:hover::before { opacity: 1; } .gallery-item-label { position: absolute; left: var(--space-4); bottom: var(--space-4); right: var(--space-4); z-index: 1; color: #fdf9f0; font-size: var(--text-sm); font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; } .gallery-item:hover .gallery-item-label { opacity: 1; transform: translateY(0); } .gallery-item-label span { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(253,249,240,0.75); } /* ============ LIGHTBOX ============ */ .lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(12,10,6,0.92); display: flex; align-items: center; justify-content: center; padding: var(--space-6); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox-inner { position: relative; max-width: 1100px; width: 100%; } .lightbox img { width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--radius-md); margin-inline: auto; } .lightbox-caption { color: #fdf9f0; text-align: center; margin-top: var(--space-4); font-size: var(--text-sm); } .lightbox-close { position: absolute; top: -48px; right: 0; color: #fdf9f0; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(253,249,240,0.3); border-radius: 50%; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fdf9f0; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(253,249,240,0.3); border-radius: 50%; background: rgba(12,10,6,0.4); } .lightbox-prev { left: -8px; } .lightbox-next { right: -8px; } @media (min-width: 900px) { .lightbox-prev { left: -60px; } .lightbox-next { right: -60px; } } /* ============ CONTACT FORM ============ */ .form-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 640px) { .form-row-2 { grid-template-columns: 1fr 1fr; display: grid; gap: var(--space-5); } } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); } .field input, .field select, .field textarea { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: var(--text-base); width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); } .field textarea { resize: vertical; min-height: 140px; } .form-status { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-highlight); color: var(--color-text); font-size: var(--text-sm); } /* ============ CONTACT INFO CARDS ============ */ .contact-info-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 640px) { .contact-info-grid { grid-template-columns: repeat(2,1fr); } } .contact-info-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--color-surface); display: flex; gap: var(--space-4); align-items: flex-start; } .contact-info-card svg { width: 22px; height: 22px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; } .contact-info-card h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; } .contact-info-card p { color: var(--color-text-muted); margin-top: var(--space-1); font-size: var(--text-sm); } .contact-info-card a:hover { color: var(--color-accent); } /* ============ CLIENT EXPERIENCE / ABOUT ============ */ .commitment-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 700px) { .commitment-grid { grid-template-columns: repeat(2,1fr); } } .commitment-item { display: flex; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--color-divider); } .commitment-item svg { width: 24px; height: 24px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; } .commitment-item h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; } .commitment-item p { color: var(--color-text-muted); margin-top: var(--space-2); font-size: var(--text-sm); } .stat-strip { display: flex; flex-wrap: wrap; gap: var(--space-10); } .stat-strip .stat h3 { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-primary); } .stat-strip .stat p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); } /* ============ SERVICES PAGE — DETAIL ROWS ============ */ .service-detail { padding-block: clamp(var(--space-16), 8vw, var(--space-28)); border-top: 1px solid var(--color-divider); } .service-detail:first-of-type { border-top: none; } .service-detail-index { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text-faint); margin-bottom: var(--space-4); }