/* ================================================================ PERFECT ELECTRICAL & CONSTRUCTION WORKS — STYLES.CSS ================================================================ BRAND COLOURS (from logo): Primary Blue: #1B4F8A (dark navy blue — dominant logo colour) Accent Orange: #E07B20 (vibrant orange — "C" shape in logo) Light Blue: #2E6DB4 (mid blue for hover states / accents) White: #FFFFFF Dark: #0F2A4A (deep navy for text and footer) TABLE OF CONTENTS 1. CSS Custom Properties (Design Tokens) 2. Reset & Base 3. Typography 4. Layout Utilities 5. Buttons 6. Header & Navigation 7. Hero Section 8. About Section 9. Services Section (Accordion) 10. Projects Section (Horizontal Scroll) 11. Team Section 12. Reviews / Testimonials Section 13. Contact Section 14. Footer 15. Animations & Scroll Reveals 16. Responsive (Mobile / Tablet) ================================================================ */ /* ================================================================ 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS) ---------------------------------------------------------------- Edit these variables to restyle the entire site instantly. Font imports are in index.html . ================================================================ */ :root { /* --- Brand Colour Palette (matches logo) --- */ --color-primary: #1B4F8A; /* navy blue — dominant logo colour */ --color-primary-dk: #0F2A4A; /* deep navy — footer / dark sections */ --color-primary-lt: #2E6DB4; /* mid blue — hovers, borders */ --color-orange: #E07B20; /* orange accent — "C" in logo */ --color-orange-dk: #C06010; /* darker orange for hover states */ /* --- Neutral / Background Colours --- */ --color-bg: #F4F6F9; /* very light blue-grey page background */ --color-surface: #EAF0F8; /* slightly tinted surface (cards, sections) */ --color-mid: #3A4A5A; /* medium text colour */ --color-muted: #7A8C9E; /* labels, secondary text */ --color-border: #CDD8E8; /* borders and dividers */ --color-light: #FFFFFF; /* pure white */ --color-dark: #0F2A4A; /* near-black (deep navy) for headings */ /* --- Typography --- */ --font-heading: 'Montserrat', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* --- Font Sizes --- */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.5rem; --text-4xl: 3.25rem; --text-5xl: 4.5rem; /* --- Spacing --- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; /* --- Layout --- */ --container-max: 1280px; --container-pad: clamp(1.5rem, 5vw, 4rem); /* --- Animation --- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration: 0.6s; /* --- Border Radius --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; } /* ================================================================ 2. RESET & BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-mid); line-height: 1.7; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font: inherit; } input, textarea { font: inherit; } /* ================================================================ 3. TYPOGRAPHY ================================================================ */ h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--color-dark); line-height: 1.15; font-weight: 700; } /* Reusable large section heading */ .section-heading { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--space-md); } /* Small caps label above section headings */ .section-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-orange); margin-bottom: var(--space-sm); } /* Light variant used on dark backgrounds */ .section-label.light { color: var(--color-orange); } /* Arrow inline link */ .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); letter-spacing: 0.02em; transition: color 0.2s; } .link-arrow:hover { color: var(--color-orange); } /* ================================================================ 4. LAYOUT UTILITIES ================================================================ */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* ================================================================ 5. BUTTONS ---------------------------------------------------------------- .btn-orange — orange fill (primary CTA) .btn-outline — outlined dark border (secondary CTA) .btn-light — white fill (on dark backgrounds) ================================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.85em 2em; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.05em; border-radius: var(--radius-sm); transition: all 0.25s var(--ease-out); white-space: nowrap; } /* Orange fill — primary CTA */ .btn-orange { background: var(--color-orange); color: var(--color-light); border: 2px solid var(--color-orange); } .btn-orange:hover { background: var(--color-orange-dk); border-color: var(--color-orange-dk); transform: translateY(-1px); } /* Dark outline */ .btn-outline { background: transparent; color: var(--color-dark); border: 2px solid var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: var(--color-light); transform: translateY(-1px); } /* Light — for dark section backgrounds */ .btn-light { background: var(--color-light); color: var(--color-primary); border: 2px solid var(--color-light); font-weight: 700; } .btn-light:hover { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-light); } /* ================================================================ 6. HEADER & NAVIGATION ---------------------------------------------------------------- Transparent at top → opaque white on scroll (.scrolled via JS) Mobile nav slides in from the right (.nav-open on body) ================================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-block: 0.9rem; transition: background 0.4s var(--ease-out), box-shadow 0.4s; } /* Scrolled state — added by JS */ .site-header.scrolled { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); box-shadow: 0 2px 0 var(--color-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } /* Logo image sizing */ .logo-img { height: 54px; /* Adjust this value to resize the logo */ width: auto; display: block; } /* Desktop nav links */ .nav-links { display: flex; align-items: center; gap: 1.75rem; } .nav-links a { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-mid); letter-spacing: 0.03em; transition: color 0.2s; } .nav-links a:hover { color: var(--color-primary); } /* CTA button in nav */ .nav-links .nav-cta { padding: 0.5em 1.25em; background: var(--color-orange); color: var(--color-light) !important; border-radius: var(--radius-sm); font-weight: 600; transition: background 0.2s, transform 0.2s; } .nav-links .nav-cta:hover { background: var(--color-orange-dk); transform: translateY(-1px); } /* Hamburger (mobile only) */ .hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; z-index: 110; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--color-primary); transition: transform 0.3s, opacity 0.3s; transform-origin: center; } .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); } /* ================================================================ 7. HERO SECTION ---------------------------------------------------------------- Two-column grid: text left, image right. Background: deep navy with a subtle diagonal stripe pattern. ================================================================ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; /* Deep navy background with subtle stripe */ background-color: var(--color-primary-dk); background-image: repeating-linear-gradient( -45deg, transparent, transparent 40px, rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 80px ); overflow: hidden; } /* Blue accent bar at top of hero */ .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-primary-lt) 100%); z-index: 3; } /* Noise grain overlay */ .hero-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; } .hero-content { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; padding-top: 8rem; padding-bottom: 4rem; position: relative; z-index: 2; } .hero-eyebrow { display: block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-orange); margin-bottom: 1.25rem; } /* Main heading — white on dark background */ .hero-heading { font-family: var(--font-heading); font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 1.5rem; color: var(--color-light); } .hero-sub { font-size: var(--text-base); line-height: 1.8; color: rgba(255,255,255,0.7); margin-bottom: 2.5rem; max-width: 44ch; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-image-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; border: 3px solid rgba(255,255,255,0.1); } /* Orange accent corner on hero image */ .hero-image-wrap::after { content: ''; position: absolute; bottom: -3px; left: -3px; width: 60px; height: 60px; background: var(--color-orange); border-radius: 0 var(--radius-md) 0 var(--radius-lg); z-index: 2; } .hero-img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease; } .hero-image-wrap:hover .hero-img { transform: scale(1.05); } /* Scroll indicator */ .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.4); z-index: 2; animation: float 2.5s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } .scroll-dot { animation: scrollDown 2s ease-in-out infinite; } @keyframes scrollDown { 0% { cy: 9; opacity: 1; } 100% { cy: 21; opacity: 0; } } /* ================================================================ 8. ABOUT SECTION ================================================================ */ .about { padding-block: var(--space-xl); border-top: 4px solid var(--color-orange); background: var(--color-light); } .about-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4rem; align-items: start; margin-bottom: var(--space-lg); } .about-right p { margin-bottom: 1.2rem; font-size: var(--text-base); line-height: 1.8; } .about-right strong { color: var(--color-primary); } /* Stats row */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding-block: var(--space-md); margin-bottom: var(--space-lg); } .stat { display: flex; flex-direction: column; gap: 0.25rem; } .stat-number { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; color: var(--color-primary); line-height: 1; } /* The + or M suffix */ .stat-plus { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-orange); font-weight: 700; display: inline; } .stat-label { font-size: var(--text-sm); color: var(--color-muted); letter-spacing: 0.02em; margin-top: 0.25rem; } /* Core Values cards */ .values-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: var(--space-lg); } .value-card { background: var(--color-surface); border-radius: var(--radius-md); padding: 1.75rem 1.5rem; border-top: 3px solid var(--color-orange); transition: transform 0.25s var(--ease-out), box-shadow 0.25s; } .value-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(27,79,138,0.1); } .value-icon { font-size: 1.75rem; margin-bottom: 0.75rem; } .value-card h4 { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--color-primary); margin-bottom: 0.5rem; } .value-card p { font-size: var(--text-sm); color: var(--color-mid); line-height: 1.7; } /* Featured / Certifications bar */ .featured-in { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; background: var(--color-surface); border-radius: var(--radius-md); border-left: 4px solid var(--color-primary); } .featured-label { font-family: var(--font-heading); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); white-space: nowrap; font-weight: 600; } .brand-logo { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); opacity: 0.7; transition: opacity 0.2s; } .brand-logo:hover { opacity: 1; } /* ================================================================ 9. SERVICES SECTION (ACCORDION) ================================================================ */ .services { padding-block: var(--space-xl); border-top: 1px solid var(--color-border); background: var(--color-surface); } .services-heading { margin-bottom: var(--space-lg); } .services-list { border-top: 1px solid var(--color-border); } .service-item { border-bottom: 1px solid var(--color-border); } .service-toggle { width: 100%; display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 2rem; padding-block: 1.5rem; text-align: left; transition: color 0.2s; } .service-toggle:hover .service-title { color: var(--color-orange); } .service-num { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-orange); font-weight: 700; } .service-title { font-family: var(--font-heading); font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl)); font-weight: 700; color: var(--color-primary); letter-spacing: -0.01em; transition: color 0.2s; } .service-icon { font-size: var(--text-2xl); color: var(--color-muted); font-weight: 300; transition: transform 0.3s var(--ease-out), color 0.2s; line-height: 1; } .service-item.open .service-icon { transform: rotate(45deg); color: var(--color-orange); } .service-body { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); } .service-item.open .service-body { max-height: 600px; } .service-body-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; padding-left: 5rem; } .service-desc p { margin-bottom: 1.2rem; color: var(--color-mid); line-height: 1.8; } .service-desc ul { display: flex; flex-direction: column; gap: 0.5rem; } .service-desc ul li { font-size: var(--text-sm); color: var(--color-mid); padding-left: 1.2em; position: relative; } .service-desc ul li::before { content: '▸'; position: absolute; left: 0; color: var(--color-orange); } .service-img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius-md); border-left: 4px solid var(--color-orange); } /* ================================================================ 10. PROJECTS SECTION (HORIZONTAL SCROLL) ================================================================ */ .projects { padding-block: var(--space-xl); border-top: 1px solid var(--color-border); background: var(--color-light); overflow: hidden; } .projects-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-lg); } .projects-track { display: flex; gap: 2rem; overflow-x: auto; padding-inline: var(--container-pad); padding-bottom: 1.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } .projects-track::-webkit-scrollbar { height: 4px; } .projects-track::-webkit-scrollbar-track { background: transparent; } .projects-track::-webkit-scrollbar-thumb { background: var(--color-primary-lt); border-radius: 2px; } .project-card { flex: 0 0 400px; scroll-snap-align: start; } .project-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-md); margin-bottom: 1.25rem; border-bottom: 3px solid var(--color-orange); } .project-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); } .project-card:hover .project-img { transform: scale(1.05); } .project-overlay { position: absolute; inset: 0; background: rgba(15, 42, 74, 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; } .project-card:hover .project-overlay { opacity: 1; } .project-view-btn { color: var(--color-light); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; padding: 0.75em 1.75em; border: 2px solid var(--color-orange); border-radius: var(--radius-sm); transition: background 0.2s; } .project-view-btn:hover { background: var(--color-orange); } .project-name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); margin-bottom: 0.5rem; } .project-meta { display: flex; gap: 1rem; margin-bottom: 0.75rem; } .project-meta span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-orange); font-weight: 600; } .project-desc { font-size: var(--text-sm); line-height: 1.7; color: var(--color-mid); } /* ================================================================ 11. TEAM SECTION ================================================================ */ .team { padding-block: var(--space-xl); border-top: 1px solid var(--color-border); background: var(--color-surface); } .team-intro { max-width: 65ch; font-size: var(--text-base); color: var(--color-mid); margin-bottom: var(--space-lg); line-height: 1.8; } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .team-card { display: flex; align-items: flex-start; gap: 1.25rem; background: var(--color-light); border-radius: var(--radius-md); padding: 1.5rem; border-left: 4px solid var(--color-primary); transition: transform 0.25s var(--ease-out), box-shadow 0.25s; } .team-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(27,79,138,0.1); } /* Avatar circle with initials — replace with if photos available */ .team-avatar { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 100%); color: var(--color-light); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: 0.05em; } .team-info h4 { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--color-primary); margin-bottom: 0.2rem; } .team-role { display: block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-orange); margin-bottom: 0.4rem; } .team-info p { font-size: var(--text-sm); color: var(--color-mid); line-height: 1.6; } .team-info strong { color: var(--color-primary); } /* ================================================================ 12. REVIEWS / TESTIMONIALS SECTION ================================================================ */ .reviews { padding-block: var(--space-xl); border-top: 1px solid var(--color-border); background: var(--color-light); } .reviews-slider { position: relative; min-height: 200px; margin-block: var(--space-lg); } .review-slide { display: none; flex-direction: column; gap: 2rem; max-width: 800px; margin-inline: auto; text-align: center; animation: fadeIn 0.5s var(--ease-out); } .review-slide.active { display: flex; } @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Opening quote mark using brand orange */ .review-quote { position: relative; font-family: var(--font-body); font-size: clamp(var(--text-base), 2.5vw, var(--text-xl)); font-weight: 400; font-style: italic; line-height: 1.6; color: var(--color-mid); quotes: none; padding: 2rem; background: var(--color-surface); border-radius: var(--radius-md); border-left: 4px solid var(--color-orange); } .review-quote::before { content: '"'; position: absolute; top: -0.5rem; left: 1.5rem; font-size: 4rem; color: var(--color-orange); line-height: 1; opacity: 0.3; font-family: Georgia, serif; } .reviewer { display: flex; align-items: center; justify-content: center; gap: 1rem; } .reviewer-info { display: flex; flex-direction: column; gap: 0.2rem; text-align: center; } .reviewer-name { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); color: var(--color-primary); } .reviewer-role { font-size: var(--text-xs); color: var(--color-orange); letter-spacing: 0.04em; font-weight: 600; text-transform: uppercase; } .slider-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; } .slider-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--color-primary); transition: all 0.2s; } .slider-btn:hover { border-color: var(--color-orange); background: var(--color-orange); color: var(--color-light); } .slider-dots { display: flex; gap: 0.5rem; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: background 0.2s, transform 0.2s; cursor: pointer; } .dot.active { background: var(--color-orange); transform: scale(1.3); } /* ================================================================ 13. CONTACT SECTION ---------------------------------------------------------------- Dark navy background (matches logo primary colour) ================================================================ */ .contact { border-top: 4px solid var(--color-orange); } .contact-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; } .contact-form-col { background: var(--color-primary-dk); padding: clamp(3rem, 6vw, 6rem); display: flex; flex-direction: column; justify-content: center; } .contact-form-col .section-heading { color: var(--color-light); } .contact-sub { color: rgba(255,255,255,0.6); font-size: var(--text-sm); line-height: 1.8; margin-bottom: 1.5rem; } /* Contact detail items (email, address) */ .contact-details { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; } .contact-detail-item { display: flex; align-items: center; gap: 0.75rem; font-size: var(--text-sm); color: rgba(255,255,255,0.7); } .contact-detail-item a:hover { color: var(--color-orange); } .contact-detail-icon { font-size: 1rem; color: var(--color-orange); } .contact-image-col { overflow: hidden; } .contact-img { width: 100%; height: 100%; object-fit: cover; } .contact-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group label { font-family: var(--font-heading); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); font-weight: 600; } .form-group input, .form-group textarea { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-sm); padding: 0.85em 1em; color: var(--color-light); font-size: var(--text-sm); transition: border-color 0.2s; resize: vertical; } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.2); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-orange); } .form-success { color: #6FCF97; font-size: var(--text-sm); margin-top: 0.5rem; } .form-error { color: #EB5757; font-size: var(--text-sm); margin-top: 0.5rem; } /* ================================================================ 14. FOOTER ================================================================ */ .site-footer { background: var(--color-primary-dk); color: rgba(255,255,255,0.5); border-top: 3px solid var(--color-orange); } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr; gap: 3rem; padding-block: var(--space-lg); align-items: start; } /* Logo in footer */ .footer-logo-img { height: 60px; width: auto; margin-bottom: 1rem; /*filter: brightness(0) invert(1); /* make logo white in footer */ } .footer-brand p { font-size: var(--text-sm); line-height: 1.8; color: rgba(255,255,255,0.5); } .footer-col h4 { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-orange); margin-bottom: 1rem; } .footer-col nav { display: flex; flex-direction: column; gap: 0.6rem; } .footer-col nav a { font-size: var(--text-sm); transition: color 0.2s; } .footer-col nav a:hover { color: var(--color-light); } .newsletter-form { display: flex; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm); overflow: hidden; } .newsletter-form input { flex: 1; background: transparent; border: none; padding: 0.75em 1em; color: var(--color-light); font-size: var(--text-sm); min-width: 0; } .newsletter-form input::placeholder { color: rgba(255,255,255,0.25); } .newsletter-form input:focus { outline: none; } .newsletter-form button { padding: 0.75em 1em; background: var(--color-orange); color: var(--color-light); font-weight: 600; transition: background 0.2s; } .newsletter-form button:hover { background: var(--color-orange-dk); } .newsletter-msg { margin-top: 0.75rem; font-size: var(--text-xs); color: #6FCF97; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-block: 1.25rem; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-legal { display: flex; gap: 1.5rem; } .footer-legal a { font-size: var(--text-xs); transition: color 0.2s; } .footer-legal a:hover { color: var(--color-light); } .footer-credit { font-size: var(--text-xs); color: rgba(255,255,255,0.3); } /* ================================================================ 15. ANIMATIONS & SCROLL REVEALS ---------------------------------------------------------------- Add class="reveal" to any element. JS IntersectionObserver adds .visible when element enters view. ================================================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.visible { opacity: 1; transform: none; } /* Stagger delays */ .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; } /* ================================================================ 16. RESPONSIVE (MOBILE & TABLET) ================================================================ */ /* Tablet */ @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; padding-top: 7rem; } .hero-image-wrap { display: none; } .values-row { grid-template-columns: 1fr 1fr; } .team-grid { grid-template-columns: 1fr 1fr; } .footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .footer-brand { grid-column: 1 / -1; } } /* Mobile */ @media (max-width: 768px) { .hamburger { display: flex; } .nav-links { position: fixed; inset: 0; background: var(--color-primary-dk); flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; transform: translateX(100%); transition: transform 0.4s var(--ease-out); z-index: 105; } .nav-links a { color: rgba(255,255,255,0.8); font-size: var(--text-xl); } .nav-links a:hover { color: var(--color-orange); } body.nav-open .nav-links { transform: translateX(0); } .about-grid { grid-template-columns: 1fr; gap: 2rem; } .stats-row { grid-template-columns: 1fr; gap: 1.5rem; } .values-row { grid-template-columns: 1fr; } .service-body-inner { grid-template-columns: 1fr; padding-left: 0; } .service-toggle { grid-template-columns: 2rem 1fr auto; gap: 1rem; } .projects-track { gap: 1.5rem; } .project-card { flex: 0 0 85vw; } .team-grid { grid-template-columns: 1fr; } .contact-inner { grid-template-columns: 1fr; } .contact-image-col { height: 280px; } .footer-top { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom-inner { flex-direction: column; text-align: center; } } /* Small mobile */ @media (max-width: 480px) { .hero-actions { flex-direction: column; } .btn { width: 100%; justify-content: center; } .projects-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } }