/* ============================================================ assets/css/custom.css Custom styles that complement Tailwind CSS utilities. Anything that Tailwind's utility classes can't handle easily: animations, pseudo-elements, complex transitions, etc. ============================================================ */ /* ── Base typography: apply custom fonts as page defaults ───── */ body { font-family: 'Jost', sans-serif; color: #1C2B3A; } h1, h2, h3, h4, .font-display { font-family: 'Cormorant Garamond', serif; } /* ── Smooth scrolling for all anchor links ───────────────────── */ html { scroll-behavior: smooth; } /* ── Navbar: transparent → white on scroll ─────────────────────── The 'scrolled' class is toggled by JavaScript (main.js). CSS transition handles the smooth animation between states. ─── */ #navbar { transition: background-color 0.35s ease, box-shadow 0.35s ease; } #navbar.scrolled { background-color: #ffffff; box-shadow: 0 2px 24px rgba(28, 43, 58, 0.08); } /* ── Hero section ──────────────────────────────────────────────── Full-viewport height with a dark overlay gradient layered over a background image to ensure text is always readable. background-attachment: fixed creates a subtle parallax effect on desktop. ─── */ .hero-section { min-height: 100vh; position: relative; background-image: linear-gradient( to bottom right, rgba(28, 43, 58, 0.88) 0%, rgba(59, 110, 140, 0.55) 100% ), url('/assets/images/hero-bg.jpg'); background-size: cover; background-position: center; background-attachment: fixed; /* parallax effect — disabled on mobile via media query below */ } /* Disable parallax on mobile: background-attachment:fixed causes performance issues and visual glitches on iOS Safari */ @media (max-width: 768px) { .hero-section { background-attachment: scroll; } } /* ── Keyframe: elements slide up and fade in ─────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { opacity: 0; animation: fadeInUp 0.85s ease forwards; } /* Staggered delays for sequential entrance of hero text elements */ .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.25s; } .delay-300 { animation-delay: 0.45s; } .delay-400 { animation-delay: 0.65s; } /* ── Scroll-reveal: used by IntersectionObserver (main.js) ─────── IMPORTANT PATTERN — Progressive Enhancement: Elements are VISIBLE by default (no opacity:0 here). The hiding only activates once JS adds 'js-reveal-ready' to . This means: if JS fails or is slow, ALL content remains visible. Never reverse this — the JS class must gate the CSS hiding. ─── */ body.js-reveal-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in-view { opacity: 1 !important; transform: translateY(0) !important; } /* Stagger children inside a reveal-stagger parent */ .reveal-stagger > *:nth-child(1) { transition-delay: 0s; } .reveal-stagger > *:nth-child(2) { transition-delay: 0.12s; } .reveal-stagger > *:nth-child(3) { transition-delay: 0.24s; } /* ── Card lift on hover: subtle elevation change ─────────────── */ .card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(28, 43, 58, 0.12); } /* ── Image zoom on hover wrapper ───────────────────────────────── Parent clips the image; the img itself scales on hover. ─── */ .img-zoom-wrap { overflow: hidden; } .img-zoom-wrap img { transition: transform 0.55s ease; width: 100%; height: 100%; object-fit: cover; display: block; } .img-zoom-wrap:hover img { transform: scale(1.07); } /* ── Section accent line: small coloured rule above section titles */ .section-line { display: block; width: 48px; height: 3px; background-color: #3B6E8C; margin: 0 auto 1.25rem; border-radius: 2px; } /* Left-aligned variant for split-header layouts */ .section-line.left { margin: 0 0 1.25rem; } /* ── Mobile navigation menu: max-height transition for open/close */ #mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } #mobile-menu.open { max-height: 440px; } /* ── Stat numbers: large display figures in the stats bar ─────── */ .stat-number { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: #3B6E8C; line-height: 1; } /* ── Portfolio items: image with hover overlay label ─────────── */ .portfolio-item { overflow: hidden; position: relative; cursor: pointer; } .portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; } .portfolio-item:hover img { transform: scale(1.07); } .portfolio-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,43,58,0.75) 0%, transparent 60%); display: flex; align-items: flex-end; padding: 1.25rem; opacity: 0; transition: opacity 0.35s ease; } .portfolio-item:hover .overlay { opacity: 1; } /* ── Testimonial card: large decorative quotation mark ─────────── Pure CSS pseudo-element — no extra HTML needed. ─── */ .testimonial-card { position: relative; overflow: hidden; } .testimonial-card::before { content: '\201C'; /* Unicode left double quotation mark */ font-family: 'Cormorant Garamond', serif; font-size: 8rem; line-height: 1; color: #3B6E8C; opacity: 0.07; position: absolute; top: -0.5rem; left: 1rem; pointer-events: none; /* doesn't block clicks */ } /* ── CTA section: diagonal gradient from dark navy to steel blue */ .cta-section { background: linear-gradient(135deg, #1C2B3A 0%, #2F5870 50%, #3B6E8C 100%); } /* ── Process step connector line (desktop only) ────────────────── A horizontal rule drawn between the numbered circles. Positioned absolutely, only visible on md+ screens. ─── */ .step-connector { position: absolute; top: 2.35rem; left: calc(16.666% + 2.5rem); right: calc(16.666% + 2.5rem); height: 1px; background: linear-gradient(to right, #D4E5EF, #A9CCE0, #D4E5EF); } /* ── Hamburger line animation ─────────────────────────────────── */ .hamburger-line { transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.35s ease; } /* ── Nav link active indicator ───────────────────────────────── */ .nav-link-active { border-bottom: 2px solid #3B6E8C; padding-bottom: 2px; } /* ── Scroll indicator bounce (hero bottom arrow) ─────────────── */ @keyframes subtleBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); animation: subtleBounce 2s ease infinite; } /* ── Admin panel: utility classes (used in /admin/ pages only) ── */ /* These are here to avoid a separate admin CSS file for now. If the admin panel grows, extract these to assets/css/admin.css */ .admin-sidebar-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: #4B5563; transition: background-color 0.2s, color 0.2s; } .admin-sidebar-link:hover, .admin-sidebar-link.active { background-color: #EEF4F8; color: #3B6E8C; }