/* ═══════════════════════════════════════════════════════════ ARCH CONSTRUCTIONS — style.css Professional Website Stylesheet ═══════════════════════════════════════════════════════════ */ /* ─── CSS Custom Properties ─── */ :root { /* Matches .nav-container / .hero-layout max width for edge alignment */ --content-max: 1200px; --navy: #0A1628; --navy-mid: #1C3557; --navy-light: #2C4A72; --gold: #F2F2F2; --gold-light: #FFFFFF; --gold-deep: #D0D0D0; --gold-pale: #F9F9F9; /* ── Brand accent: icons & indicators on light-bg sections. Change ONE variable here → pillars, why-us, nav active, service-list icons all update together. */ --accent: #1C3557; /* = navy-mid: visible on cream/stone/white */ --accent-bg: rgba(28,53,87,.08); /* subtle tint for icon containers */ --white: #FFFFFF; --cream: #FAFAF6; --stone: #F4F1EB; --sage: #3A7D5C; --sage-pale: #EBF5EF; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-700: #374151; --gray-900: #111827; --text-primary: #1A1F2E; --text-muted: #4A5568; --green: #16A34A; --red: #DC2626; --font-head: 'Poppins', sans-serif; --font-body: 'Poppins', sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --shadow-sm: 0 1px 2px rgba(26,31,46,.06), 0 1px 3px rgba(26,31,46,.08); --shadow-md: 0 4px 12px rgba(26,31,46,.08), 0 2px 4px rgba(26,31,46,.06); --shadow-lg: 0 12px 40px rgba(26,31,46,.14); --shadow-card: 0 0 0 1px rgba(26,31,46,.04), 0 8px 24px rgba(26,31,46,.08); --shadow-gold: 0 8px 30px rgba(143,171,184,.30); --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Fixed #navbar; used for in-section padding (content clears nav) */ --nav-anchor-offset: clamp(88px, 11vh, 118px); /* Fallback before main.js runs; JS replaces --scroll-padding-top with measured #navbar height + 8px (+ optional extra below). */ --scroll-align-extra: 0px; --scroll-padding-top: calc(var(--nav-anchor-offset) + var(--scroll-align-extra)); /* Content starts below the overlapping fixed nav (hero + full-height sections) */ --section-top-inset: max(40px, calc(var(--nav-anchor-offset) + 8px)); /* One full "screen" per main section (stable viewport; avoids mobile URL bar jump) */ --panel-height: 100vh; } @supports (height: 100svh) { :root { --panel-height: 100svh; } } /* ══════════════════════════════════════════════════ THEMES — set data-theme on to switch Default (no attribute) = warm data-theme="yellow" = classic gold ══════════════════════════════════════════════════ */ /* Warm theme (default — navy accent, off-white highlights) */ :root, [data-theme="warm"] { --gold: #F2F2F2; --gold-light: #FFFFFF; --gold-deep: #D0D0D0; --gold-pale: #F9F9F9; --gold-rgb: 242,242,242; /* used in rgba(var(--gold-rgb), alpha) */ --accent: #1C3557; --accent-rgb: 28,53,87; --accent-bg: rgba(28,53,87,.08); --shadow-gold: 0 8px 30px rgba(143,171,184,.30); } /* Yellow theme — set data-theme="yellow" on to activate */ [data-theme="yellow"] { --gold: #C9A227; --gold-light: #E0BA45; --gold-deep: #B8921A; --gold-pale: #FDF4DC; --gold-rgb: 201,162,39; --accent: #C9A227; /* gold IS the accent on light bg too */ --accent-rgb: 201,162,39; --accent-bg: rgba(201,162,39,.12); --shadow-gold: 0 8px 30px rgba(201,162,39,.30); } /* Yellow theme: override all per-card service icons to gold */ [data-theme="yellow"] .service-icon { background: rgba(201,162,39,.14) !important; color: #C9A227 !important; } [data-theme="yellow"] .service-list li i { color: #C9A227 !important; } /* ─── Reset & Base ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--scroll-padding-top); /* Root scroll-snap was nudging scroll after anchor jumps — left a ~few–9px sliver of the prior section under #navbar */ font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--text-primary); background: var(--white); line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; } input, select, textarea { font-family: inherit; font-size: 1rem; } /* ─── Utility ─── */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; } .section { padding: 96px 0; } .section-dark { background: var(--navy); } .section-sky { background: #D6EAF8; } .section-sky .section-eyebrow { color: var(--accent); } .section-sky .section-title { color: var(--text-primary); } .section-sky .section-desc { color: var(--text-muted); } .section-light{ background: var(--cream); } #about.about { background: var(--cream); } section.why-us { background: var(--stone); } /* Light-bg sections: eyebrow uses accent so it's visible in both themes */ #about .section-eyebrow, section.why-us .section-eyebrow, #gallery .section-eyebrow { color: var(--accent); } /* About section DDA badge */ .about-dda-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--sage-pale); border: 1.5px solid rgba(58,125,92,.35); border-radius: var(--radius-sm); padding: 10px 16px; margin-top: 20px; font-size: .82rem; font-weight: 600; color: var(--sage); } .about-dda-badge i { font-size: 1rem; color: var(--sage); } /* Full-viewport "pages": one screen height minimum, snap to section starts */ #home.hero, #about.about, #services.services, section.why-us, #gallery.gallery-section, section.clients-section, #contact.contact-section { min-height: var(--panel-height); } #about.about.section, #services.services.section, section.why-us.section, section.clients-section.section { padding-top: var(--section-top-inset); padding-bottom: 48px; } #contact.contact-section.section { padding-top: var(--section-top-inset); padding-bottom: 28px; } .section-header { text-align: center; margin-bottom: 60px; } .carousel-indicator { display: none; } /* ── Carousel dot indicators ── */ .carousel-dots { display: none; /* shown only on mobile via media query */ justify-content: center; gap: 10px; margin-top: 20px; } .carousel-dot { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(var(--accent-rgb), .20); background: transparent; color: rgba(var(--accent-rgb), .35); display: flex; align-items: center; justify-content: center; font-size: .78rem; cursor: pointer; transition: var(--transition); padding: 0; flex-shrink: 0; } .carousel-dot svg { width: 14px; height: 14px; } .carousel-dot.active { background: var(--accent); border-color: var(--accent); color: var(--white); box-shadow: 0 4px 14px rgba(var(--accent-rgb), .30); } .section-eyebrow { display: inline-block; font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .section-eyebrow.light { color: var(--gold-light); } .section-title { font-family: var(--font-head); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.2; color: var(--gray-900); margin-bottom: 16px; } .section-title.light { color: var(--white); } .section-desc { font-size: 1.05rem; color: var(--gray-500); max-width: 560px; margin: 0 auto; } .section-desc.light { color: var(--gray-400); } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: var(--radius-md); font-family: var(--font-head); font-weight: 600; font-size: .95rem; transition: var(--transition); white-space: nowrap; } .btn-gold { background: var(--gold); color: var(--navy); box-shadow: var(--shadow-gold); } .btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(var(--gold-rgb),.40); } .btn-outline { border: 2px solid rgba(255,255,255,.35); color: var(--white); background: transparent; } .btn-outline:hover { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb),.08); } .btn-ghost { border: 2px solid rgba(var(--gold-rgb),.30); color: var(--gold-light); background: transparent; } .btn-ghost:hover { border-color: var(--gold-light); background: rgba(var(--gold-rgb),.08); } .full-btn { width: 100%; justify-content: center; } .btn-text { font-family: var(--font-head); font-size: .85rem; font-weight: 600; color: var(--gold-light); padding: 6px 12px; border-radius: var(--radius-sm); transition: var(--transition); } .btn-text:hover { background: rgba(var(--gold-rgb),.12); } .btn-text:disabled { opacity: .4; cursor: not-allowed; } /* ─── Reveal Animations ─── */ .reveal-up, .reveal-left, .reveal-right { opacity: 0; transition: opacity .7s ease, transform .7s ease; } .reveal-up { transform: translateY(32px); } .reveal-left { transform: translateX(-40px); } .reveal-right { transform: translateX(40px); } .reveal-up.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; } /* ══════════════════════════════════════════════════ NAVIGATION ══════════════════════════════════════════════════ */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 12px 0; padding-top: max(12px, env(safe-area-inset-top, 12px)); transition: background var(--transition), box-shadow var(--transition); } #navbar.scrolled { background: rgba(10,22,40,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0,0,0,.4); } .nav-container { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } /* Logo */ .logo { display: flex; align-items: center; gap: 12px; } /* Light disc: navy-on-navy logo needs separation from the header (transparent PNG) */ .logo-img-frame { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .logo-img-frame--footer { width: 40px; height: 40px; } .logo-img-frame .logo-img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; } .logo-img { display: block; } .logo-mark { width: 42px; height: 42px; background: var(--gold); color: var(--navy); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; flex-shrink: 0; } .logo-text { display: flex; flex-direction: column; } .logo-name { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--white); line-height: 1.2; } .logo-tagline { font-size: .72rem; color: var(--gold); font-weight: 500; letter-spacing: .04em; } .footer-logo .logo-name { color: var(--white); } /* Nav Links */ .nav-overlay-brand { display: none; } .nav-links { display: flex; align-items: center; gap: 8px; } .nav-link { font-family: var(--font-head); font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.80); padding: 8px 14px; border-radius: var(--radius-sm); transition: var(--transition); } .nav-link:hover, .nav-link.active { color: var(--white); } .nav-link:not(.cta-nav) { position: relative; } .nav-link:not(.cta-nav).active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold); } .nav-link.cta-nav { background: var(--gold); color: var(--navy); font-weight: 600; padding: 10px 22px; border-radius: var(--radius-md); } .nav-link.cta-nav:hover { background: var(--gold-light); transform: translateY(-1px); } .nav-link.cta-nav::after { display: none; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ══════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════ */ /* One viewport tall; cards are absolutely positioned on the wallpaper (no extra page height) */ .hero { position: relative; box-sizing: border-box; height: var(--panel-height); min-height: var(--panel-height); max-height: var(--panel-height); display: flex; flex-direction: column; align-items: stretch; overflow: hidden; background: var(--navy); } .hero-media { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding-top: var(--section-top-inset); padding-bottom: 12px; overflow: hidden; } /* Full-bleed pitch photo + readable left column */ .hero-bg { position: absolute; inset: 0; z-index: 0; background-color: var(--navy); background-image: url('../images/pitch_wallpaper.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(10, 22, 40, 0.94) 0%, rgba(10, 22, 40, 0.72) 38%, rgba(10, 22, 40, 0.28) 68%, rgba(10, 22, 40, 0.06) 100% ); } .hero-layout { /* Static so .hero-cards (position:absolute) uses full-width .hero-media for right edge math */ z-index: 2; align-self: stretch; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 24px; flex: 1 1 0; min-height: 0; overflow: hidden; } .hero-copy { position: relative; z-index: 2; max-width: 620px; padding: 4px 24px 12px 0; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--gold-rgb),.10); border: 1px solid rgba(var(--gold-rgb),.40); color: var(--gold-light); font-family: var(--font-head); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; border-radius: 100px; margin-bottom: clamp(12px, 2vh, 24px); animation: fadeInDown .8s ease forwards; } .hero-title { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; color: var(--white); margin-bottom: clamp(12px, 2vh, 22px); animation: fadeInUp .9s ease .1s both; } .hero-title .highlight { color: var(--gold); position: relative; } .hero-sub { font-size: clamp(.88rem, 1.35vw, 1.05rem); color: rgba(255,255,255,.78); max-width: 560px; line-height: 1.65; margin-bottom: clamp(16px, 2.5vh, 28px); animation: fadeInUp .9s ease .2s both; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; animation: fadeInUp .9s ease .3s both; } .hero-actions .btn i { font-size: 0.9em; } /* CTA reassurance micro-copy */ .cta-reassurance { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .74rem; color: rgba(255,255,255,.45); margin-top: 14px; animation: fadeInUp .9s ease .45s both; } .cta-reassurance i { color: var(--gold); font-size: .68rem; } .cta-reassurance span { color: rgba(255,255,255,.35); margin: 0 2px; } .serif-em { font-style: normal; } /* Trust credential bar */ .trust-bar { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 11px 24px; background: rgba(255,255,255,.04); border-top: 1px solid rgba(var(--gold-rgb),.18); border-bottom: 1px solid rgba(var(--gold-rgb),.18); font-size: .75rem; font-weight: 500; color: rgba(255,255,255,.65); letter-spacing: .07em; text-transform: uppercase; flex-shrink: 0; } .trust-bar i { color: var(--gold); margin-right: 5px; font-size: .72rem; } .trust-bar-divider { width: 1px; height: 14px; background: rgba(var(--gold-rgb),.25); flex-shrink: 0; } /* Hero cards: flush to viewport right (tiny gutter); max-width keeps strip off the headline column */ .hero-cards { position: absolute; z-index: 3; top: auto; bottom: clamp(10px, 2vh, 22px); right: max(10px, env(safe-area-inset-right, 0px)); left: auto; transform: none; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-end; gap: clamp(10px, 1.5vw, 16px); width: auto; max-width: min(780px, max(280px, calc(100% - 640px))); margin: 0; padding: 0; pointer-events: none; } .hero-cards .hero-service-card { pointer-events: auto; } .hero-service-card { position: relative; /* Slightly wider cards so the row fills space to the right of the headline block */ flex: 0 0 clamp(128px, 18.5vw, 228px); width: clamp(128px, 18.5vw, 228px); aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38); border: none; background: var(--navy); transition: transform var(--transition), box-shadow var(--transition); } .hero-service-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.48); } .hero-service-card--pitch .hero-service-card__bg { object-position: 62% center; } .hero-service-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .hero-service-card__gradient { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(10, 22, 40, 0.05) 0%, rgba(10, 22, 40, 0.15) 45%, rgba(10, 22, 40, 0.82) 100% ); pointer-events: none; } .hero-service-card__icon { position: absolute; top: 14px; left: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } .icon-cricket { display: block; flex-shrink: 0; } .hero-service-card__icon .icon-cricket { width: 22px; height: 22px; } .service-icon .icon-cricket { width: 28px; height: 28px; } .hero-service-card__title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 20px 16px 18px; font-family: var(--font-head); font-weight: 700; color: var(--white); text-align: left; line-height: 1.2; font-size: clamp(0.82rem, 1.1vw, 0.95rem); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); } .hero-service-card__title-line { display: block; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @media (max-height: 780px) { .hero-title { font-size: clamp(1.65rem, 4.2vw, 2.5rem); } .hero-sub { line-height: 1.5; } .hero .stat-item { padding: 10px 8px; } .hero .stat-number { font-size: 1.65rem; } .hero .stat-label { font-size: .65rem; } } /* ══════════════════════════════════════════════════ STATS BAR ══════════════════════════════════════════════════ */ .stats-bar { flex-shrink: 0; width: 100%; background: var(--gold); padding: 0; } .stats-bar .container { display: flex; align-items: stretch; } .hero .stat-item { padding: clamp(14px, 2.2vh, 24px) clamp(10px, 1.5vw, 18px); } .stat-item { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: start; column-gap: clamp(12px, 1.8vw, 18px); row-gap: 6px; padding: 22px 18px; text-align: left; } .stat-icon { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; width: auto; min-width: 2.85rem; color: var(--navy); font-size: clamp(1.65rem, 2.6vw, 2.35rem); line-height: 1; opacity: 0.92; align-self: center; } .stat-value { grid-column: 2; grid-row: 1; display: inline-flex; flex-direction: row; align-items: baseline; justify-content: flex-start; line-height: 1; } .stat-number { font-size: 2.2rem; font-weight: 700; color: var(--navy); line-height: 1; } .stat-plus { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--navy); line-height: 1; } .stat-label { grid-column: 2; grid-row: 2; font-family: var(--font-head); font-size: .78rem; font-weight: 600; color: rgba(10,22,40,.65); letter-spacing: .04em; text-transform: uppercase; margin-top: 0; text-align: left; } .stat-label--stack { text-transform: none; letter-spacing: 0.02em; font-size: 0.72rem; max-width: 160px; line-height: 1.35; } .stat-label-detail { display: block; margin-top: 4px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10, 22, 40, 0.5); } .stat-divider { width: 1px; background: rgba(10,22,40,.15); align-self: stretch; margin: 16px 0; } /* ══════════════════════════════════════════════════ ABOUT ══════════════════════════════════════════════════ */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-image-wrap { position: relative; } .about-img-placeholder { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: rgba(255,255,255,.35); border: 2px dashed rgba(var(--gold-rgb),.30); font-size: .85rem; text-align: center; padding: 24px; } .about-img-placeholder i { font-size: 3rem; color: var(--gold); opacity: .5; } /* When user adds a real image, this replaces the placeholder */ .about-image-wrap img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); } .about-badge-float { position: absolute; bottom: -20px; right: -20px; background: var(--gold); color: var(--navy); border-radius: var(--radius-md); padding: 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--shadow-lg); min-width: 130px; text-align: center; } .about-badge-float i { font-size: 1.4rem; margin-bottom: 4px; } .about-badge-float strong { font-family: var(--font-head); font-size: 1rem; font-weight: 700; } .about-badge-float span { font-size: .78rem; opacity: .75; } .about-lead { font-size: 1.1rem; color: var(--gray-700); line-height: 1.75; margin-bottom: 16px; } .about-content > p { color: var(--gray-500); margin-bottom: 28px; line-height: 1.75; } .about-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 36px; } .pillar { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--gray-700); font-weight: 500; } .pillar i { color: var(--accent); font-size: 1rem; flex-shrink: 0; } /* ══════════════════════════════════════════════════ SERVICES ══════════════════════════════════════════════════ */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .service-card { background: #172A43; border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg); padding: 28px; position: relative; overflow: hidden; transition: var(--transition); transition-delay: var(--delay, 0s); } .service-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--gold-rgb),.04) 0%, transparent 60%); opacity: 0; transition: var(--transition); } .service-card:hover { border-color: rgba(var(--gold-rgb),.30); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.3); } .service-card:hover::before { opacity: 1; } /* ── Per-card colour themes (light pastels on light section bg) ── */ .service-card--cricket { background: linear-gradient(145deg, #F0FAF3 0%, #FAFDF9 100%); border-color: rgba(34,139,70,.08); } .service-card--netting { background: linear-gradient(145deg, #EFF6FC 0%, #F8FBFE 100%); border-color: rgba(37,99,235,.08); } .service-card--tracks { background: linear-gradient(145deg, #FCF2F2 0%, #FEF8F8 100%); border-color: rgba(185,28,28,.08); } .service-card--civil { background: linear-gradient(145deg, #F1F3F6 0%, #F7F8FA 100%); border-color: rgba(71,85,105,.08); } .service-card--horticulture { background: linear-gradient(145deg, #EBF6EF 0%, #F5FBF7 100%); border-color: rgba(22,101,52,.08); } .service-card--amc { background: linear-gradient(145deg, #FBF6E9 0%, #FDFAF3 100%); border-color: rgba(161,98,7,.08); } /* Icon tints — darker for legibility on light cards */ .service-card--cricket .service-icon { background: rgba(34,139,70,.15); color: #22853A; } .service-card--netting .service-icon { background: rgba(37,99,235,.12); color: #2563EB; } .service-card--tracks .service-icon { background: rgba(185,28,28,.12); color: #B91C1C; } .service-card--civil .service-icon { background: rgba(71,85,105,.12); color: #475569; } .service-card--horticulture .service-icon { background: rgba(22,101,52,.15); color: #166534; } .service-card--amc .service-icon { background: rgba(161,98,7,.12); color: #A16207; } /* Text — dark on light cards */ .service-card--cricket h3, .service-card--netting h3, .service-card--tracks h3, .service-card--civil h3, .service-card--horticulture h3, .service-card--amc h3 { color: var(--text-primary) !important; } .service-card--cricket p, .service-card--netting p, .service-card--tracks p, .service-card--civil p, .service-card--horticulture p, .service-card--amc p { color: #3D4A5C !important; } .service-card--cricket .service-list li, .service-card--netting .service-list li, .service-card--tracks .service-list li, .service-card--civil .service-list li, .service-card--horticulture .service-list li, .service-card--amc .service-list li { color: var(--text-muted) !important; } .service-card--cricket .service-list li i { color: #22853A; } .service-card--netting .service-list li i { color: #2563EB; } .service-card--tracks .service-list li i { color: #B91C1C; } .service-card--civil .service-list li i { color: #475569; } .service-card--horticulture .service-list li i { color: #166534; } .service-card--amc .service-list li i { color: #A16207; } /* Hover border tint per card */ .service-card--cricket:hover { border-color: rgba(34,139,70,.40); } .service-card--netting:hover { border-color: rgba(37,99,235,.40); } .service-card--tracks:hover { border-color: rgba(185,28,28,.40); } .service-card--civil:hover { border-color: rgba(71,85,105,.40); } .service-card--horticulture:hover { border-color: rgba(22,101,52,.40); } .service-card--amc:hover { border-color: rgba(161,98,7,.40); } .service-icon { width: 56px; height: 56px; background: rgba(var(--gold-rgb),.10); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--gold); margin-bottom: 20px; transition: var(--transition); } .service-card:hover .service-icon { background: var(--gold); color: var(--navy); } .service-card h3 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 12px; } .service-card p { font-size: .9rem; color: rgba(255,255,255,.6); line-height: 1.65; margin-bottom: 20px; } .service-list { display: flex; flex-direction: column; gap: 8px; } .service-list li { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; color: rgba(255,255,255,.55); } .service-list li i { color: var(--gold); margin-top: 3px; flex-shrink: 0; } /* ══════════════════════════════════════════════════ WHY US ══════════════════════════════════════════════════ */ .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .why-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 32px 24px; transition: var(--transition); transition-delay: var(--delay, 0s); } .why-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .why-icon { width: 52px; height: 52px; background: var(--accent-bg); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--accent); margin-bottom: 20px; transition: var(--transition); } .why-card:hover .why-icon { background: var(--accent); color: var(--white); } .why-card h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: 10px; } .why-card p { font-size: .88rem; color: var(--gray-500); line-height: 1.65; } /* ══════════════════════════════════════════════════ GALLERY ══════════════════════════════════════════════════ */ .gallery-filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; } .filter-btn { font-family: var(--font-head); font-size: .85rem; font-weight: 600; padding: 9px 22px; border-radius: 100px; border: 2px solid var(--gray-200); color: var(--gray-500); background: var(--white); transition: var(--transition); } .filter-btn:hover { border-color: var(--accent); color: var(--accent); } .filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); box-shadow: var(--shadow-md); } .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 16px; } .gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); } .gallery-item.large { grid-column: span 2; } .gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); } .gallery-item.hidden { display: none; } .gallery-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,.7); font-size: .8rem; text-align: center; padding: 16px; } .gallery-placeholder i { font-size: 2.2rem; } .cricket-bg { background: linear-gradient(135deg, #1a3a1a 0%, #2d5a2d 100%); } .cricket-bg2 { background: linear-gradient(135deg, #0d2e0d 0%, #1e4d1e 100%); } .athletics-bg { background: linear-gradient(135deg, #1a1a3a 0%, #2d2d6e 100%); } .athletics-bg2 { background: linear-gradient(135deg, #0d0d2e 0%, #1e1e5a 100%); } .civil-bg { background: linear-gradient(135deg, #2a1a0d 0%, #5a3a1e 100%); } .civil-bg2 { background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%); } .horticulture-bg { background: linear-gradient(135deg, #0d2a0d 0%, #1e5a1e 100%); } /* When real photos are added, style the img tag */ .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .gallery-item:hover img { transform: scale(1.06); } /* ── Gallery carousel (multi-image items) ── */ .gallery-carousel { position: absolute; inset: 0; overflow: hidden; } .gallery-carousel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; } .gallery-carousel-img.active { opacity: 1; } .gallery-item:hover .gallery-carousel-img.active { transform: scale(1.06); } .gallery-carousel-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 4; } .gallery-carousel-dot { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.25); border: 1.5px solid rgba(255,255,255,.55); color: rgba(255,255,255,.8); font-size: .62rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; padding: 0; } .gallery-carousel-dot.active { background: var(--white); color: var(--navy); border-color: var(--white); } .gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,22,40,.90) 0%, transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 18px; opacity: 0; transition: var(--transition); } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay p { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--white); margin-bottom: 2px; } .gallery-overlay span { font-size: .78rem; color: var(--gold-light); } /* Gallery fits exactly one viewport; grid rows fill the remaining height */ #gallery.gallery-section.section { padding-top: max(40px, calc(var(--nav-anchor-offset) + 8px)); padding-bottom: 16px; } #gallery.gallery-section > .container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } #gallery.gallery-section .section-header { margin-bottom: clamp(6px, 1.2vh, 16px); } #gallery.gallery-section .section-title { margin-bottom: 6px; } #gallery.gallery-section .section-desc { margin-bottom: 0; max-width: 42rem; margin-left: auto; margin-right: auto; font-size: clamp(.82rem, 1.1vw, .98rem); } #gallery.gallery-section .gallery-filters { margin-bottom: clamp(6px, 1vh, 14px); gap: 6px; } #gallery.gallery-section .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); /* Row height scales so all 3 rows fit within one viewport. 415px accounts for: nav offset (88) + padding-top (96) + section-header (118) + header-mb (10) + filters (43) + filters-mb (8) + padding-bottom (16) + gaps (24) + buffer (12) */ grid-auto-rows: clamp(80px, calc((var(--panel-height) - 415px) / 3), 220px); gap: clamp(6px, 1vw, 12px); } #gallery.gallery-section .gallery-item { min-height: 0; } /* Desktop: balance row 3 by spanning the last two items across 2 columns each */ @media (min-width: 769px) { #gallery.gallery-section .gallery-grid .gallery-item:nth-child(7), #gallery.gallery-section .gallery-grid .gallery-item:nth-child(8) { grid-column: span 2; } } /* ── Services: compact vertical rhythm on desktop so all 6 cards fit in one viewport ── */ @media (min-width: 769px) { #services.services.section { padding-top: 36px; padding-bottom: 8px; } #services .section-header { margin-bottom: 12px; } #services .section-eyebrow { color: var(--accent); } /* Row height: panel - nav-offset - padding-top(36) - header(~159) - headerMb(12) - 2×gap(16) - padBottom(8) = remaining / 2 */ #services .services-grid { gap: 16px; grid-auto-rows: clamp(240px, calc((var(--panel-height) - var(--scroll-padding-top) - 36px - 211px) / 2), 420px); } /* Icon + title on the same row; p and list span full width below */ #services .service-card { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; padding: clamp(16px, 1.8vw, 22px); overflow: hidden; } #services .service-icon { grid-column: 1; grid-row: 1; width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: 0; align-self: center; } #services .service-card h3 { grid-column: 2; grid-row: 1; font-size: clamp(.9rem, 1.05vw, 1rem); margin-bottom: 0; line-height: 1.3; } #services .service-card p { grid-column: 1 / -1; grid-row: 2; font-size: clamp(.78rem, .88vw, .86rem); line-height: 1.5; margin-top: clamp(8px, 1vh, 12px); margin-bottom: clamp(6px, .8vh, 10px); } #services .service-list { grid-column: 1 / -1; grid-row: 3; gap: clamp(4px, .5vh, 6px); } #services .service-list li { font-size: clamp(.74rem, .83vw, .82rem); } } /* ══════════════════════════════════════════════════ CLIENTS ══════════════════════════════════════════════════ */ .clients-strip { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .client-logo-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 36px; background: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius-lg); transition: var(--transition); min-width: 180px; text-align: center; } .client-logo-box:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-md); } .client-logo-box i { font-size: 2rem; color: var(--gold); margin-bottom: 6px; } .client-logo-box span { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--navy); } .client-logo-box small { font-size: .76rem; color: var(--gray-400); } /* ══════════════════════════════════════════════════ CONTACT SECTION ══════════════════════════════════════════════════ */ /* Compact "Get in Touch" — smaller type + spacing so one viewport fits (body scroll only) */ #contact.contact-section .section-header { margin-bottom: clamp(14px, 2.2vh, 28px); } #contact.contact-section .section-eyebrow { font-size: .68rem; margin-bottom: 6px; letter-spacing: .1em; } #contact.contact-section .section-title { font-size: clamp(1.35rem, 2.8vw, 2.1rem); margin-bottom: 6px; line-height: 1.15; } #contact.contact-section .section-desc { font-size: clamp(.8rem, 1.35vw, .92rem); line-height: 1.45; max-width: 520px; margin-inline: auto; } #contact.contact-section .contact-info h3 { font-size: 1.25rem; margin-bottom: 4px; } #contact.contact-section .contact-tagline { font-size: .78rem; margin-bottom: 12px; line-height: 1.45; } #contact.contact-section .contact-detail { margin-bottom: 10px; gap: 10px; } #contact.contact-section .contact-icon { width: 36px; height: 36px; font-size: .92rem; background: rgba(8, 18, 36, 0.55); border: 1px solid rgba(201, 162, 39, 0.22); } #contact.contact-section .contact-detail strong { font-size: .74rem; } #contact.contact-section .contact-detail span { font-size: .72rem; } #contact.contact-section .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: clamp(24px, 4vw, 48px); align-items: stretch; max-width: 920px; margin-inline: auto; } #contact.contact-section .contact-wa-card { padding: 40px 32px; } #contact.contact-section .contact-wa-card__title { font-size: 1.25rem; } #contact.contact-section .contact-wa-card__lead { font-size: clamp(.78rem, 1.2vw, .88rem); margin-bottom: 22px; } #contact.contact-section .contact-wa-card .btn-wa { padding: 14px 24px; font-size: .95rem; } @media (max-height: 820px) { #contact.contact-section .section-header { margin-bottom: 12px; } #contact.contact-section .contact-detail { margin-bottom: 8px; } } /* ── Contact + Footer merged: compact on desktop so everything fits one viewport ── */ @media (min-width: 769px) { #contact.contact-section.section { padding-bottom: 0; display: flex; flex-direction: column; /* Section starts at scroll-padding-top (nav height) below viewport top, so shrink height by that offset so the bottom aligns with viewport bottom */ min-height: calc(var(--panel-height) - var(--scroll-padding-top)); } /* Contact content expands to fill space, footer stays pinned to bottom */ #contact.contact-section > .container { flex: 1; } /* Hide desc — the contact-tagline in the left column covers the same info */ #contact.contact-section .section-desc { display: none; } #contact.contact-section .section-header { margin-bottom: 12px; } /* Footer nested inside contact section */ #contact .footer { padding: 40px 0 12px; border-top: 1px solid rgba(255,255,255,.08); } #contact .footer-grid { gap: 20px; margin-bottom: 10px; } #contact .logo-img-frame--footer { width: 36px; height: 36px; } #contact .logo-img-frame--footer .logo-img { width: 36px; height: 36px; } #contact .footer-brand p { font-size: .74rem; margin-top: 6px; max-width: 220px; } #contact .footer-col h4 { font-size: .7rem; margin-bottom: 8px; } #contact .footer-col ul { gap: 5px; } #contact .footer-col ul li a { font-size: .74rem; } #contact .footer-col p { font-size: .72rem; margin-bottom: 4px; } #contact .footer-dda-note { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: .7rem !important; padding: 7px 10px; margin-top: 8px; line-height: 1.5 !important; } #contact .footer-bottom { padding-top: 10px; } #contact .footer-bottom p { font-size: .7rem; } } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; } .contact-info { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-xl); padding: 40px 32px; } .contact-info h3 { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--white); margin-bottom: 8px; } .contact-tagline { color: rgba(255,255,255,.55); font-size: .9rem; margin-bottom: 32px; line-height: 1.6; } .contact-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .contact-detail { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 0; } .contact-icon { width: 48px; height: 48px; background: rgba(var(--gold-rgb),.12); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.2rem; flex-shrink: 0; } .contact-detail div { display: flex; flex-direction: column; gap: 3px; } .contact-detail strong { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--white); } .contact-detail span { font-size: .95rem; color: rgba(255,255,255,.5); } .contact-link { color: rgba(255, 255, 255, 0.65); text-decoration: none; border-bottom: 1px solid rgba(201, 162, 39, 0.35); transition: color var(--transition), border-color var(--transition); } .contact-link:hover { color: var(--gold-light); border-bottom-color: var(--gold); } /* WhatsApp CTA card (replaces enquiry form) */ .contact-wa-card { text-align: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-xl); padding: 40px 32px; } .contact-wa-card__badge { width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: rgba(8, 18, 36, 0.65); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: #25d366; font-size: 1.75rem; } .contact-wa-card__title { font-family: var(--font-head); font-size: 1.28rem; font-weight: 700; color: var(--white); margin: 0 0 10px; line-height: 1.25; } .contact-wa-card__lead { margin: 0 0 28px; font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.58); } .contact-wa-card__btn { width: 100%; justify-content: center; padding: 16px 24px; font-size: 1.02rem; border-radius: var(--radius-md); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.35), 0 0 0 1px rgba(37, 211, 102, 0.15); } .contact-wa-card__btn:hover { box-shadow: 0 10px 36px rgba(37, 211, 102, 0.45), 0 0 0 1px rgba(37, 211, 102, 0.2); } .hidden { display: none !important; } .btn-wa { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: #25d366; color: #fff; border-radius: var(--radius-md); font-family: var(--font-head); font-weight: 700; font-size: 1rem; transition: var(--transition); box-shadow: 0 6px 24px rgba(37, 211, 102, 0.3); text-decoration: none; } .btn-wa i { font-size: 1.2rem; } .btn-wa:hover { background: #1ebe5a; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(37, 211, 102, 0.4); } /* Loading spinner on buttons */ .btn.loading { opacity: .8; pointer-events: none; position: relative; } .btn.loading::after { content: ''; width: 16px; height: 16px; border: 2px solid rgba(10,22,40,.3); border-top-color: var(--navy); border-radius: 50%; animation: spin .7s linear infinite; margin-left: 8px; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════ */ .footer { background: #060E1A; border-top: 1px solid rgba(255,255,255,.06); padding: 72px 0 32px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 56px; } .footer-brand p { font-size: .88rem; color: rgba(255,255,255,.45); line-height: 1.7; margin-top: 16px; max-width: 280px; } .footer-col h4 { font-family: var(--font-head); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col ul li a { font-size: .88rem; color: rgba(255,255,255,.5); transition: var(--transition); } .footer-col ul li a:hover { color: var(--white); padding-left: 4px; } .footer-col p { font-size: .88rem; color: rgba(255,255,255,.5); display: flex; gap: 8px; margin-bottom: 8px; } .footer-col p i { color: var(--gold); margin-top: 3px; flex-shrink: 0; } .footer-dda-note { margin-top: 16px; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; background: rgba(58,125,92,.15); border: 1.5px solid rgba(58,125,92,.5); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .8rem !important; font-weight: 600 !important; color: #7ECBA3 !important; line-height: 1.6 !important; } .footer-dda-note i { color: #7ECBA3 !important; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-bottom p { font-size: .8rem; color: rgba(255,255,255,.3); } .footer-credit { font-size: .78rem; color: var(--gold) !important; opacity: .7; } /* ─── Back to Top ─── */ .back-to-top { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; background: var(--gold); color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(16px); transition: var(--transition); z-index: 900; } .back-to-top.visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { background: var(--gold-light); transform: translateY(-3px); } /* ─── Floating WhatsApp CTA (mobile only) ─── */ .wa-float { display: none; position: fixed; bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 12px)); left: 20px; width: 48px; height: 48px; background: #25d366; color: #fff; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 4px 20px rgba(37,211,102,.50); z-index: 900; transition: transform var(--transition), box-shadow var(--transition); text-decoration: none; } .wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.65); } .wa-float.wa-hide { display: none !important; } /* Fade floating buttons when idle */ .wa-float, .back-to-top { transition: opacity .4s ease, transform var(--transition), box-shadow var(--transition); } .scroll-idle .wa-float:not(.wa-hide), .scroll-idle .back-to-top { opacity: 0.35; } /* ══════════════════════════════════════════════════ RESPONSIVE — TABLET (≤ 1024px) ══════════════════════════════════════════════════ */ @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } #contact.contact-section .contact-grid { grid-template-columns: 1fr; } .contact-info { order: 1; } .contact-wa-card { order: 2; } .contact-details-grid { grid-template-columns: 1fr; } .about-grid { gap: 48px; } .hero-copy { max-width: none; padding-right: 20px; /* Clearance above bottom-right card strip when copy is full-width */ padding-bottom: clamp(110px, 22vh, 190px); } .hero-cards { top: auto; bottom: 10px; right: max(10px, env(safe-area-inset-right, 0px)); left: auto; transform: none; justify-content: flex-end; width: auto; max-width: min(720px, max(260px, calc(100% - 48vw))); } .hero-service-card { flex: 0 0 clamp(92px, 26vw, 168px); width: clamp(92px, 26vw, 168px); } } /* ══════════════════════════════════════════════════ RESPONSIVE — MOBILE (≤ 768px) ══════════════════════════════════════════════════ */ @media (max-width: 768px) { .section { padding: 56px 0 48px; } .trust-bar { gap: 12px; font-size: .68rem; padding: 10px 16px; flex-wrap: wrap; justify-content: center; } .trust-bar-divider { display: none; } .cta-reassurance { font-size: .7rem; gap: 6px; } /* Remove full-viewport lock on non-hero sections so content dictates height */ #about.about, #services.services, section.why-us, #gallery.gallery-section, section.clients-section, #contact.contact-section { min-height: auto; } /* Nav */ .hamburger { display: flex; } .logo-img-frame { width: 38px; height: 38px; } .logo-img-frame--footer { width: 36px; height: 36px; } /* Mobile nav overlay — full screen, brand inside at top */ .nav-links { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--navy); flex-direction: column; align-items: center; justify-content: flex-start; padding: 0 24px 48px; gap: 0; overflow-y: auto; transform: translateX(100%); transition: transform .35s cubic-bezier(0.4,0,0.2,1); box-shadow: none; } .nav-links.open { transform: translateX(0); } /* Brand header row inside overlay */ .nav-overlay-brand { display: flex; width: 100%; padding: 16px 8px 20px; border-bottom: 1px solid rgba(var(--gold-rgb),.2); margin-bottom: 12px; } .nav-overlay-logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; } .logo-img-frame--overlay { width: 40px; height: 40px; flex-shrink: 0; } .logo-img-frame--overlay .logo-img { width: 40px; height: 40px; object-fit: contain; } .nav-overlay-brand .logo-name { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--white); line-height: 1.2; } .nav-overlay-brand .logo-tagline { font-size: .68rem; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; } /* Nav links — centered like solarlandscape */ .nav-links > li:not(.nav-overlay-brand):not(:has(.cta-nav)) { width: 100%; border-bottom: 1px solid rgba(255,255,255,.07); } .nav-link { display: block; font-size: 1.3rem; font-weight: 600; padding: 18px 16px; width: 100%; text-align: center; color: rgba(255,255,255,.7); border-radius: 0; background: transparent !important; letter-spacing: .01em; transition: color .2s; } .nav-link:hover { color: var(--white); } .nav-link.active { color: var(--gold); } .nav-links li:has(.cta-nav) { width: 100%; padding: 28px 0 0; } .nav-link.cta-nav { display: block; width: 100%; font-size: 1rem; font-weight: 700; padding: 18px 24px; background: var(--gold) !important; color: var(--navy); border-radius: var(--radius-xl); letter-spacing: .06em; text-transform: uppercase; text-align: center; } .nav-link.cta-nav:hover { background: var(--gold-light) !important; color: var(--navy); } /* Hide underline active indicator inside overlay */ .nav-link:not(.cta-nav).active::after { display: none; } /* Hero — hide overlapping service cards */ .hero-cards { display: none; } .hero-media { padding-top: var(--section-top-inset); padding-bottom: 16px; } .hero-layout { padding-left: 20px; padding-right: 20px; } .hero-copy { padding-top: 8px; padding-right: 0; padding-bottom: 16px; padding-left: 0; } /* Top-to-bottom gradient improves readability on full-width mobile text */ .hero-overlay { background: linear-gradient( 180deg, rgba(10,22,40,.72) 0%, rgba(10,22,40,.52) 45%, rgba(10,22,40,.82) 100% ); } .hero-actions { flex-direction: column; } .hero-actions .btn { justify-content: center; text-align: center; } /* Stats — 2×2 grid instead of vertical stack */ .stats-bar .container { display: grid; grid-template-columns: 1fr 1fr; } .stat-item { flex: none; } .stat-divider { display: none; } .hero .stat-item { padding: 14px 12px; row-gap: 4px; column-gap: 10px; } .hero .stat-icon { min-width: 2.1rem; font-size: 1.35rem; } .hero .stat-number { font-size: 1.5rem; } .hero .stat-plus { font-size: 1.05rem; } .hero .stat-label { font-size: 0.62rem; } .hero .stat-label--stack { font-size: 0.62rem; line-height: 1.25; max-width: none; } .hero .stat-label-detail { font-size: 0.58rem; margin-top: 2px; } /* About */ .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-badge-float { right: 0; bottom: -16px; } .about-image-wrap img { aspect-ratio: 3/2; max-height: 260px; } .about-pillars { grid-template-columns: 1fr; } /* Services — horizontal scroll carousel */ #services.services { overflow-x: clip; } .services-grid { grid-template-columns: unset; display: flex; flex-direction: row; overflow-x: auto; overflow-y: clip; /* clip without creating a vertical scroll container */ scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; /* break out of container padding so cards reach viewport edges */ margin-left: -24px; margin-right: -24px; padding-left: 9vw; padding-right: 9vw; padding-top: 10px; /* clearance so lifted cards aren't clipped */ padding-bottom: 8px; scrollbar-width: none; } .services-grid::-webkit-scrollbar { display: none; } .service-card { flex: 0 0 82vw; max-width: 340px; height: auto; scroll-snap-align: center; transition-delay: 0s !important; overflow: visible; } /* Why Us — horizontal scroll carousel */ section.why-us { overflow-x: clip; } .why-grid { grid-template-columns: unset; display: flex; overflow-x: auto; overflow-y: clip; /* clip without creating a vertical scroll container */ scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; margin-left: -24px; margin-right: -24px; padding-left: 9vw; padding-right: 9vw; padding-top: 10px; /* clearance so lifted cards aren't clipped */ padding-bottom: 8px; scrollbar-width: none; } .why-grid::-webkit-scrollbar { display: none; } .why-card { flex: 0 0 82vw; max-width: 340px; height: auto; scroll-snap-align: center; transition-delay: 0s !important; overflow: visible; } /* Hide old progress bar, show dot indicators */ .carousel-indicator { display: none; } .carousel-dots { display: flex; } .carousel-indicator-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--gold); border-radius: 2px; transition: left .1s, width .1s; will-change: left, width; } /* Gallery: 2 columns */ #gallery.gallery-section .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(140px, 200px); } #gallery.gallery-section .gallery-item.large { grid-column: span 2; } /* Gallery filters — horizontal scroll, no wrapping */ .gallery-filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; margin-bottom: 28px; } .gallery-filters::-webkit-scrollbar { display: none; } .filter-btn { flex-shrink: 0; font-size: .8rem; padding: 8px 16px; } /* Clients */ .clients-strip { gap: 16px; } .client-logo-box { min-width: 140px; padding: 20px 24px; } /* Contact — compress to fit one viewport */ #contact.contact-section.section { padding: 40px 0 0; } #contact.contact-section .section-header { margin-bottom: 16px; } #contact.contact-section .section-title { font-size: 1.7rem; } #contact.contact-section .section-desc { font-size: .82rem; line-height: 1.5; } #contact.contact-section .contact-info h3 { display: none; } #contact.contact-section .contact-tagline { display: none; } #contact.contact-section .contact-grid { gap: 16px; } #contact.contact-section .contact-detail { gap: 10px; padding: 10px 0; } #contact.contact-section .contact-icon { width: 36px; height: 36px; font-size: .9rem; flex-shrink: 0; } #contact.contact-section .contact-detail strong { font-size: .82rem; } #contact.contact-section .contact-detail span { font-size: .78rem; } .contact-wa-card { padding: 20px 18px; } #contact.contact-section .contact-wa-card { padding: 18px 16px; } #contact.contact-section .contact-wa-card__badge { width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: 10px; } #contact.contact-section .contact-wa-card__title { font-size: 1.1rem; margin-bottom: 6px; } #contact.contact-section .contact-wa-card__lead { font-size: .8rem; margin-bottom: 14px; } /* Footer — fills its own viewport on mobile */ #contact .footer { border-top: 1px solid rgba(255,255,255,.08); min-height: 100svh; display: flex; flex-direction: column; } #contact .footer > .container { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-top: 48px; padding-bottom: 32px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 16px; } .footer-grid .footer-brand { grid-column: 1 / -1; } .footer-dda-note--bottom { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--sage, #3A7D5C); background: rgba(58,125,92,.08); border: 1px solid rgba(58,125,92,.25); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; } .footer-dda-note--bottom i { color: var(--sage, #3A7D5C); } .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } .footer-col ul li a { font-size: .8rem; } /* Back to top */ .back-to-top { bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 12px)); right: 20px; } /* Floating WhatsApp CTA */ .wa-float { display: flex; } } @media (max-width: 480px) { #gallery.gallery-section .gallery-grid { grid-auto-rows: minmax(130px, 180px); } #gallery.gallery-section .gallery-item.large { grid-column: span 2; } .stat-icon { min-width: 2.4rem; font-size: clamp(1.35rem, 5vw, 1.85rem); } .hero .stat-item { padding: 10px 10px; column-gap: 8px; } .hero .stat-number { font-size: 1.4rem; } .hero .stat-plus { font-size: 1rem; } .service-card { flex: 0 0 88vw; } .why-card { flex: 0 0 88vw; } }