/* ========================================== HON Construction — Flowblox-inspired skin Warm cream canvas, rounded soft cards, pill buttons, curved hero image arc, fade masks. Navy + gold identity preserved. Helvetica only. ========================================== */ /* Self-hosted Helvetica (replaces Google Fonts Lato). Files live in assets/fonts/. @font-face URLs are relative to this stylesheet (assets/css/), hence '../fonts/'. */ @font-face { font-family: 'Helvetica'; src: url('../fonts/Helvetica-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url('../fonts/Helvetica.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url('../fonts/Helvetica-Oblique.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url('../fonts/Helvetica-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url('../fonts/Helvetica-BoldOblique.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } html { scroll-behavior: smooth; } /* ponytail: cream canvas is the page background; white rounded cards float on top of it */ body { -webkit-font-smoothing: antialiased; font-family: 'Helvetica', 'Arial', sans-serif; color: #868686; background: #F8F6F1; } /* Page headings — gold wide-tracked all-caps H1 is the signature */ .h-gold { color: #A0915F; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; } .h-navy { color: #061F51; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; } /* Hero Background — 3-image crossfade slideshow + navy scrim overlay. Images live in .hero-slide layers (set in index.html). To use local photos, drop assets/images/hero-1.jpg, hero-2.jpg, hero-3.jpg and point the inline style backgrounds at them (see README for the swap guide). */ .hero-bg { position: relative; overflow: hidden; background-color: #02113C; } .hero-slideshow { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; /* 3 images, 2s each visible = 6s total cycle */ animation: heroFade 6s infinite; will-change: opacity; } .hero-slide:nth-child(1) { animation-delay: 0s; } .hero-slide:nth-child(2) { animation-delay: 2s; } .hero-slide:nth-child(3) { animation-delay: 4s; } @keyframes heroFade { 0% { opacity: 0; } 10% { opacity: 1; } 33% { opacity: 1; } 43% { opacity: 0; } 100% { opacity: 0; } } /* Navy scrim overlay — even radial darkening so centered hero text stays legible regardless of which slide/photo is showing, with a slightly deeper base for depth. */ .hero-overlay { position: absolute; inset: 0; pointer-events: none; } .hero-overlay { background: radial-gradient(120% 90% at 50% 40%, rgba(2,17,60,0.55) 0%, rgba(2,17,60,0.78) 100%); } @media (max-width: 768px) { .hero-overlay { background: linear-gradient(to bottom, rgba(2,17,60,0.66) 0%, rgba(2,17,60,0.86) 100%); } } /* Hero title accent line — zoomInDown entrance then a bounce. Requires the animate.css in the page ; it ships the zoomInDown + bounce @keyframes referenced here. */ .hero-accent { display: inline-block; animation: zoomInDown 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) both, bounce 1.1s ease 0.95s; } @media (prefers-reduced-motion: reduce) { .hero-accent { animation: none; } } /* Hero highlight "Water Infrastructure" — animate.css bounceInDown (drops in with a bounce). inline-block so the transform applies; disabled under reduced-motion. */ .hero-hl-anim { display: inline-block; } @media (prefers-reduced-motion: reduce) { .hero-hl-anim { animation: none !important; } } /* Hero image arc — square cards laid along a downward-opening arc (centre highest, neighbours step down + shrink + fade). Cards are front-facing (no 3D rotation) and overlap horizontally so the row reads as a flowing curve. Driven by .active / .pos-1…3 / .neg-1…3 classes assigned by initCoverflowCarousel() in index.html. */ .coverflow-container { position: relative; perspective: 1200px; height: 250px; overflow-x: clip; padding: 0.5rem 0; cursor: grab; } .coverflow-track { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } .coverflow-slide { position: absolute; top: 50%; left: 50%; width: 13vw; height: 13vw; margin-left: -6.5vw; margin-top: -6.5vw; border-radius: 24px; overflow: hidden; box-shadow: 0 18px 40px rgba(8,37,103,0.16); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease; will-change: transform, opacity; } .coverflow-slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; } .coverflow-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1rem 0.85rem; color: #fff; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; background: linear-gradient(to top, rgba(8,37,103,0.92), rgba(8,37,103,0)); } .coverflow-slide.active { transform: translateX(0) scale(1); z-index: 7; opacity: 1; box-shadow: 0 24px 56px rgba(8,37,103,0.28); } .coverflow-slide.pos-1 { transform: translateX(14vw) rotateY(-34deg) scale(1); z-index: 6; opacity: 1; } .coverflow-slide.neg-1 { transform: translateX(-14vw) rotateY(34deg) scale(1); z-index: 6; opacity: 1; } .coverflow-slide.pos-2 { transform: translateX(28vw) rotateY(-52deg) scale(1); z-index: 5; opacity: 1; } .coverflow-slide.neg-2 { transform: translateX(-28vw) rotateY(52deg) scale(1); z-index: 5; opacity: 1; } .coverflow-slide.pos-3 { transform: translateX(42vw) rotateY(-66deg) scale(1); z-index: 4; opacity: 1; } .coverflow-slide.neg-3 { transform: translateX(-42vw) rotateY(66deg) scale(1); z-index: 4; opacity: 1; } .coverflow-slide.pos-4 { transform: translateX(56vw) rotateY(-72deg) scale(1); z-index: 3; opacity: 1; } .coverflow-slide.neg-4 { transform: translateX(-56vw) rotateY(72deg) scale(1); z-index: 3; opacity: 1; } .coverflow-slide.pos-5 { transform: translateX(70vw) rotateY(-76deg) scale(1); z-index: 2; opacity: 1; } .coverflow-slide.neg-5 { transform: translateX(-70vw) rotateY(76deg) scale(1); z-index: 2; opacity: 1; } .coverflow-slide.pos-6 { transform: translateX(84vw) rotateY(-80deg) scale(1); z-index: 1; opacity: 1; } .coverflow-slide.neg-6 { transform: translateX(-84vw) rotateY(80deg) scale(1); z-index: 1; opacity: 1; } .coverflow-slide.hidden-slide { transform: scale(0.5); z-index: 0; opacity: 0; pointer-events: none; } @media (max-width: 640px) { .coverflow-container { height: 340px; } .coverflow-slide { width: 18vw; height: 18vw; margin-left: -9vw; margin-top: -9vw; } .coverflow-slide.pos-1 { transform: translateX(19.5vw) rotateY(-34deg) scale(1); } .coverflow-slide.neg-1 { transform: translateX(-19.5vw) rotateY(34deg) scale(1); } .coverflow-slide.pos-2 { transform: translateX(39vw) rotateY(-52deg) scale(1); } .coverflow-slide.neg-2 { transform: translateX(-39vw) rotateY(52deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .coverflow-slide { transition: opacity 0.3s ease !important; } } /* Curved hero image arc (Flowblox signature) — a row of rounded portrait images set in a gentle downward-opening arc, with left/right fade masks. Items carry inline background-image in index.html. */ .fb-arc { position: relative; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .fb-arc-track { display: flex; gap: 1rem; align-items: flex-end; justify-content: center; } .fb-arc-item { flex: 1 1 0; min-width: 0; aspect-ratio: 3 / 4; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 20px 45px rgba(6,31,81,0.18); background-size: cover; background-position: center; background-color: #cdd3e0; } .fb-arc-item:nth-child(1) { transform: translateY(44px) scale(.95); } .fb-arc-item:nth-child(2) { transform: translateY(16px) scale(.98); } .fb-arc-item:nth-child(3) { transform: translateY(0) scale(1); } .fb-arc-item:nth-child(4) { transform: translateY(16px) scale(.98); } .fb-arc-item:nth-child(5) { transform: translateY(44px) scale(.95); } @media (max-width: 640px) { .fb-arc-track { overflow-x: auto; gap: .75rem; scrollbar-width: none; } .fb-arc-track::-webkit-scrollbar { display: none; } .fb-arc-item { flex: 0 0 62%; transform: none; aspect-ratio: 4/5; } } /* 3-column feature grid with subtle vertical dividers between columns */ .fb-cols > * + * { position: relative; } @media (min-width: 768px) { .fb-cols > * + *::before { content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: rgba(6,31,81,0.12); } } /* Page header — navy banner used on sub-pages */ .page-header-bg { background: linear-gradient(120deg, rgba(2,17,60,0.90) 0%, rgba(6,31,81,0.82) 100%), url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=2070&auto=format&fit=crop'); background-size: cover; background-position: center; background-color: #02113C; } /* Construction Partners & Suppliers — logo carousel. Logos are grayscale + muted by default, color on hover. */ .partner-viewport { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); } .partner-track { display: flex; width: max-content; will-change: transform; } .partner-logo { flex: 0 0 auto; box-sizing: border-box; padding: 0 0.75rem; display: flex; align-items: center; justify-content: center; height: 72px; filter: grayscale(100%); opacity: 0.55; transition: filter 0.3s ease, opacity 0.3s ease; } .partner-logo:hover { filter: grayscale(0); opacity: 1; } .partner-logo img { max-height: 56px; max-width: 80%; width: auto; object-fit: contain; } .partner-logo span { font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #475569; font-size: 0.7rem; } @media (min-width: 640px) { .partner-logo { padding: 0 1.25rem; height: 80px; } .partner-logo span { font-size: 0.85rem; } } @media (min-width: 1024px) { .partner-logo span { font-size: 0.95rem; } .partner-logo img { max-height: 64px; } } @media (prefers-reduced-motion: reduce) { .partner-track { transform: none !important; transition: none !important; } } /* Gold corner tag (About Us photo overlay) */ .gold-tag { position: absolute; background: #A0915F; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.6rem 1.1rem; font-size: 0.78rem; border-radius: 0.75rem; } /* Beige CTA strip */ .cta-strip { background: #CFC5A2; } /* Scroll Reveal */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal.visible { opacity: 1; transform: translateY(0); } /* Cards — rounded, soft shadow, white surface floating on cream. */ .service-card { background: #fff; border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(6,31,81,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(6,31,81,0.14); } .service-card img { border-radius: 0.9rem; } .feature-card { background: #fff; border-radius: 1.25rem; padding: 2rem; box-shadow: 0 10px 30px rgba(6,31,81,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(6,31,81,0.14); } .feature-card:hover .feature-icon { background: #A0915F; color: #fff; } /* Project card — rounded image + overlaid title bar */ .project-card { position: relative; overflow: hidden; display: block; border-radius: 1.25rem; box-shadow: 0 10px 30px rgba(6,31,81,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(6,31,81,0.16); } .project-card img { transition: transform 0.5s ease; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .project-card:hover img { transform: scale(1.05); } .project-card .title-bar { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(2,17,60,0.92), rgba(2,17,60,0)); color: #fff; padding: 2rem 1rem 0.9rem; font-weight: 700; font-size: 0.95rem; } /* Region group headings — grouped-by-state project sections (projects.html) */ .region-heading { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1.75rem; padding-bottom: 0.85rem; border-bottom: 2px solid rgba(160,145,95,0.22); } .region-heading h2 { display: inline-flex; align-items: center; color: #061F51; font-weight: 900; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; margin: 0; } .region-heading .region-pin { width: 1.15rem; height: 1.15rem; color: #A0915F; margin-right: 0.25rem; flex-shrink: 0; } .region-heading .region-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.5rem; padding: 0 0.55rem; border-radius: 9999px; background: #A0915F; color: #fff; font-size: 0.78rem; font-weight: 700; } @media (max-width: 640px) { .region-heading h2 { font-size: 1.25rem; } } /* Content images — round anything sitting directly inside a reveal block (about hero photos, service hero photos). Avatar/license images are nested deeper so they are untouched here. */ .reveal > img { border-radius: 1.25rem; box-shadow: 0 16px 40px rgba(6,31,81,0.12); } /* License / certification tiles — rounded cards */ .fb-tile { background: #fff; border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(6,31,81,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .fb-tile:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(6,31,81,0.14); } .fb-tile img { border-radius: 0.9rem; } /* Org / structure cards */ .fb-card { background: #fff; border-radius: 1.25rem; padding: 1.75rem; box-shadow: 0 10px 30px rgba(6,31,81,0.07); border-top: 3px solid #A0915F; } /* Pill buttons — solid gold, fully rounded */ .btn-gold { background: #A0915F; color: #fff; border-radius: 9999px; font-weight: 700; letter-spacing: 0.05em; padding: 0.9rem 2.4rem; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; display: inline-block; box-shadow: 0 10px 24px rgba(160,145,95,0.35); } .btn-gold:hover { background: #8a7c4f; color: #fff; transform: translateY(-2px); } .btn-outline-gold { border: 2px solid #A0915F; color: #A0915F; background: transparent; border-radius: 9999px; font-weight: 700; letter-spacing: 0.05em; padding: 0.8rem 2.4rem; transition: all 0.2s ease; display: inline-block; } .btn-outline-gold:hover { background: #A0915F; color: #fff; } /* Legacy button aliases */ .btn-cta, .btn-primary { transition: all 0.3s ease; background: #A0915F; color: #fff; border-radius: 9999px; } .btn-cta:hover, .btn-primary:hover { background: #8a7c4f; transform: translateY(-2px); } /* Form fields — rounded */ input[type="text"], input[type="tel"], input[type="email"], textarea, select { border-radius: 0.85rem; } /* Nav Link Underline — navy on the yellow top bar. */ .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; background: #061F51; transition: width 0.3s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link.active { color: #061F51; } /* Mobile menu styles */ #mobile-menu { border-top: 1px solid rgba(6,31,81,0.15); } #mobile-menu a { display: block; padding: 0.75rem 0; font-weight: 600; color: #061F51; transition: color 0.2s ease; } #mobile-menu a:hover { color: #A0915F; } /* Desktop dropdown flyouts (About / Services / Projects). Hidden by default, revealed on hover/focus. Dark navy panel. */ .has-dropdown { position: relative; } .has-dropdown > .dropdown-panel { position: absolute; top: 100%; left: 0; min-width: 240px; background: #02113C; border: 1px solid #061F51; border-radius: 0; box-shadow: 0 12px 30px rgba(0,0,0,0.25); padding: 0.4rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 60; } .has-dropdown:hover > .dropdown-panel, .has-dropdown:focus-within > .dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); } /* Right-edge dropdown (Projects) — align panel to the right so it doesn't overflow the nav */ .has-dropdown.dropdown-right > .dropdown-panel { left: auto; right: 0; } .dropdown-panel a { display: block; padding: 0.55rem 0.9rem; font-size: 0.875rem; font-weight: 600; color: #cdd3e0; border-radius: 0; transition: background 0.15s ease, color 0.15s ease; } .dropdown-panel a:hover { background: #061F51; color: #A0915F; } /* Mobile accordion sub-menus (collapsed by default, open on tap) */ .mobile-accordion-panel { display: none; } .mobile-accordion.open .mobile-accordion-panel { display: block; } .mobile-accordion.open .mobile-accordion-chevron { transform: rotate(180deg); } /* Status Badges (used on detail pages) */ .badge-progress { background: #DCFCE7; color: #166534; } .badge-complete { background: #DBEAFE; color: #1E40AF; } .badge-hold { background: #FEF3C7; color: #92400E; } .badge-upcoming { background: #F3E8FF; color: #6B21A8; } /* Hide scrollbar */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* Eyebrow label with gold underline divider */ .eyebrow { display: inline-block; color: #A0915F; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; padding-bottom: 0.5rem; border-bottom: 2px solid #A0915F; } /* Rounded map embed */ iframe { border-radius: 1.25rem; box-shadow: 0 10px 30px rgba(6,31,81,0.10); } /* ========================================== Modern SaaS Landing — glass nav, hero decor, entrance animations, glow CTAs, sketch notes. Brand: navy #082567, gold #B29B5B, bg #F8F6F1. ========================================== */ /* --- Glassmorphism full-width navbar (edge-to-edge) --- Tinted with the page/hero cream (#F8F6F1) so the bar blends seamlessly with the hero background instead of reading as a separate white strip. */ .hon-nav-inner { background: rgba(248,246,241,0.9); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); /* No border / no shadow at the top so the bar blends seamlessly into the hero cream; the divider + shadow only appear once the page is scrolled. */ border-bottom: 1px solid transparent; box-shadow: none; border-radius: 0; transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } #site-navbar.nav-scrolled .hon-nav-inner { background: rgba(248,246,241,0.95); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border-bottom: 1px solid rgba(8,37,103,0.08); box-shadow: 0 10px 30px rgba(8,37,103,0.10); } /* Logo — the source PNG is pre-processed (clean_logo.py: transparent bg, trimmed, re-centred), so it sits flush with the wordmark; no nudge needed. */ .nav-logo { display: block; } .hon-nav-mobile { background: rgba(255,255,255,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.5); border-radius: 16px; box-shadow: 0 10px 30px rgba(8,37,103,0.10); } /* Nav link hover — underline (from .nav-link::after) + slight lift */ .hon-nav .nav-link { transition: color 0.2s ease, transform 0.25s ease; } .hon-nav .nav-link:hover { transform: translateY(-2px); } /* --- SaaS entrance animations (play on load, above-the-fold hero) --- */ @keyframes saasFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes saasScaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes floatNote { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } .saas-up { opacity: 0; animation: saasFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards; } .saas-scale{ opacity: 0; animation: saasScaleIn 0.7s cubic-bezier(0.16,1,0.3,1) forwards; } @media (prefers-reduced-motion: reduce) { .saas-up, .saas-scale { opacity: 1; animation: none; } } /* --- Gold gradient text (headline keyword highlight) --- */ .gold-gradient { background: linear-gradient(135deg, #d3bc7a, #b29b5b); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* --- Gold pill badge (floating) --- */ .badge-gold-pill { display: inline-block; background: linear-gradient(135deg, #d3bc7a, #b29b5b); color: #fff; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; padding: 0.55rem 1.25rem; border-radius: 9999px; box-shadow: 0 8px 22px rgba(178,155,91,0.35); animation: floatY 4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .badge-gold-pill { animation: none; } } /* --- Glow CTAs (primary + outline) --- */ .btn-glow { display: inline-block; background: linear-gradient(135deg, #082567, #0a2f7a); color: #fff; font-weight: 700; letter-spacing: 0.04em; border-radius: 9999px; padding: 0.95rem 2.2rem; box-shadow: 0 14px 30px rgba(8,37,103,0.30); transition: transform 0.25s ease, box-shadow 0.25s ease; } .btn-glow:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 44px rgba(8,37,103,0.42); } .btn-glow-outline { display: inline-block; background: rgba(255,255,255,0.6); border: 1.5px solid #B29B5B; color: #082567; font-weight: 700; letter-spacing: 0.04em; border-radius: 9999px; padding: 0.9rem 2.2rem; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .btn-glow-outline:hover { transform: translateY(-3px) scale(1.03); background: #fff; box-shadow: 0 16px 32px rgba(178,155,91,0.28); } /* --- Projects hub filter buttons (pill style, matches homepage .btn-glow CTA) --- */ .proj-tab { display: inline-block; border-radius: 9999px; padding: 0.6rem 1.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; border: 1.5px solid rgba(8,37,103,0.18); background: #fff; color: #061F51; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .proj-tab:hover { transform: translateY(-2px); border-color: #082567; color: #082567; } .proj-tab.active { background: linear-gradient(135deg, #082567, #0a2f7a); color: #fff; border-color: transparent; box-shadow: 0 14px 30px rgba(8,37,103,0.30); } .proj-tab.active:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 44px rgba(8,37,103,0.42); } /* --- Hero background decorations --- */ .hero-saas { position: relative; } .hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hero-glow { position: absolute; top: -8%; left: 50%; transform: translateX(-50%); width: 80%; height: 55%; background: radial-gradient(circle, rgba(178,155,91,0.15), transparent 70%); } .hero-blob { position: absolute; border-radius: 50%; filter: blur(55px); } .hero-blob-1 { width: 340px; height: 340px; top: 6%; left: -5%; background: rgba(178,155,91,0.10); animation: floatY 7s ease-in-out infinite; } .hero-blob-2 { width: 300px; height: 300px; bottom: 8%; right: -4%; background: rgba(8,37,103,0.07); animation: floatY 8s ease-in-out infinite reverse; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(8,37,103,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(8,37,103,0.07) 1px, transparent 1px); background-size: 46px 46px; opacity: 0.4; -webkit-mask-image: radial-gradient(circle at 50% 35%, #000, transparent 72%); mask-image: radial-gradient(circle at 50% 35%, #000, transparent 72%); } @media (prefers-reduced-motion: reduce) { .hero-blob-1, .hero-blob-2 { animation: none; } } /* --- Floating handwritten sketch notes --- */ .hero-note { position: absolute; z-index: 2; font-family: 'Caveat', 'Segoe Print', cursive; color: #082567; font-size: 1.4rem; font-weight: 600; background: #fff; border: 1px solid rgba(178,155,91,0.35); box-shadow: 0 10px 24px rgba(8,37,103,0.10); padding: 0.3rem 0.95rem; border-radius: 14px; pointer-events: none; white-space: nowrap; animation: floatNote 5s ease-in-out infinite; } .hero-note-1 { top: 13%; left: 5%; transform: rotate(-7deg); } .hero-note-2 { top: 19%; right: 6%; transform: rotate(6deg); animation-delay: 0.8s; } .hero-note-3 { bottom: 1%; left: 4%; transform: rotate(5deg); animation-delay: 1.4s; } .hero-note-4 { bottom: 2%; right: 4%; transform: rotate(-6deg); animation-delay: 2.0s; } /* notes only on roomy desktop screens — avoid clutter / overlap on tablets */ @media (max-width: 1100px) { .hero-note { display: none; } } /* --- Hand-sketched arrow → sits left of the CTA button, tip points toward the button. Larger, more visible, gentle float. Desktop only (hidden on mobile). --- */ .hero-arrow { position: absolute; width: 95px; right: 100%; top: 4px; margin-right: 18px; opacity: 0.9; z-index: 2; pointer-events: none; display: none; animation: heroArrowFloat 3s ease-in-out infinite; } @keyframes heroArrowFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(1deg); } } @media (min-width: 1024px) { .hero-arrow { display: block; } } @media (prefers-reduced-motion: reduce) { .hero-arrow { animation: none; } } /* "it's free" handwritten tag → floats above the CTA arrow. Desktop only. */ .hero-arrow-label { position: absolute; right: 100%; top: -26px; margin-right: 42px; z-index: 3; font-family: 'Caveat', 'Segoe Print', cursive; color: #A0915F; font-size: 1.5rem; font-weight: 700; transform: rotate(-8deg); white-space: nowrap; pointer-events: none; display: none; animation: heroArrowFloat 3s ease-in-out infinite; } @media (min-width: 1024px) { .hero-arrow-label { display: block; } } @media (prefers-reduced-motion: reduce) { .hero-arrow-label { animation: none; } } /* Hand-sketched "Our pictures" arrow → top-right of the coverflow, tip points down at the pictures. Matches the CTA arrow's hand-drawn style and the sticky-notes' handwriting. Desktop only. */ /* Hand-written "Our pictures" flourish → anchored top-right of the hero (near the Licensed Contractor note), sweeps down to the photo carousel. Deep-navy ink, elegant flowing curve, gentle float. Desktop only. */ .hero-pics-arrow { position: absolute; top: 20%; left: 77%; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; font-family: 'Caveat', 'Segoe Print', cursive; color: #061F51; font-size: 1.4rem; font-weight: 600; transform: rotate(2deg); animation: floatNote 5s ease-in-out infinite; } .hero-pics-arrow svg { width: 240px; height: 300px; overflow: visible; } @media (max-width: 1100px) { .hero-pics-arrow { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-pics-arrow { animation: none; } } /* ========================================== Memory Lane — horizontal drag gallery (scrub the bottom strip / drag / wheel to pan) ========================================== */ /* Stability-first minimal build: native horizontal scroll + CSS snap, ONE flat image per scene, no box-shadow / rotation / promoted layers (those were crashing the GPU process on repeated scrolling). Effects to be re-added later. */ .ml-gallery { position: relative; width: 100%; height: 450px; overflow-x: auto; overflow-y: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; /* native horizontal scroll; page still scrolls vertically */ overscroll-behavior-x: contain; /* don't trigger browser back-swipe at the ends */ scroll-snap-type: x mandatory; /* snap handled entirely by the browser */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .ml-gallery::-webkit-scrollbar { display: none; } /* WebKit */ .ml-gallery.dragging { cursor: grabbing; scroll-snap-type: none; } /* free drag; snaps on release */ .ml-track { display: flex; align-items: center; height: 100%; width: max-content; } .ml-scene { position: relative; flex: 0 0 auto; height: 100%; display: flex; align-items: center; gap: 40px; padding: 0 60px; scroll-snap-align: center; } .ml-scene-text { flex: 0 0 300px; width: 300px; } .ml-scene-title { color: #061F51; font-weight: 700; font-size: 1.7rem; line-height: 1.2; letter-spacing: -0.01em; } .ml-scene-body { color: #868686; font-size: 1.05rem; line-height: 1.65; margin-top: 0.9rem; } .ml-photos { position: relative; flex: 0 0 460px; width: 460px; height: 410px; /* Decorative only — let presses fall through to the gallery so the whole area (including on top of a photo) drags, and native image-drag can't hijack it. */ pointer-events: none; } .ml-photo { position: absolute; margin: 0; box-sizing: border-box; background: #fff; padding: 8px; border-radius: 3px; box-shadow: 0 12px 26px rgba(6, 31, 81, 0.18); } .ml-photo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; } .ml-photo-a { left: 0; top: 48px; width: 190px; height: 320px; transform: rotate(-8deg); z-index: 1; } .ml-photo-b { left: 110px; top: 0; width: 220px; height: 400px; transform: rotate(2deg); z-index: 2; } .ml-photo-c { left: 250px; top: 36px; width: 190px; height: 320px; transform: rotate(9deg); z-index: 3; } .ml-annot { position: absolute; z-index: 5; font-family: 'Caveat', 'Segoe Print', cursive; color: #1a1a1a; font-size: 1.4rem; line-height: 1.15; pointer-events: none; white-space: nowrap; } .ml-annot-text { display: block; } .ml-annot-arrow { display: block; width: 70px; height: 50px; margin-top: 4px; } /* Bottom scrubber: fan-style filmstrip — every photo gets a thumbnail, the one behind the current centre photo grows tall, others taper off toward the edges (like a coverflow), all bottom-aligned. */ .ml-scrubber-wrap { margin-top: 0; display: flex; flex-direction: column; align-items: center; } .ml-caption { text-align: center; margin-bottom: 10px; min-height: 46px; } .ml-caption-title { color: #061F51; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.02em; } .ml-caption-sub { color: #868686; font-style: italic; font-size: 0.86rem; margin-top: 2px; } .ml-caption-tick { width: 1px; height: 14px; background: #cfc7ae; margin-bottom: 10px; } .ml-scrubber { position: relative; width: 460px; max-width: 86vw; height: 78px; overflow: hidden; cursor: grab; } .ml-scrubber.dragging { cursor: grabbing; } .ml-scrub-track { position: absolute; bottom: 4px; left: 0; display: flex; gap: 6px; align-items: flex-end; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* ease the per-scene re-centre */ } .ml-thumb2 { flex: 0 0 auto; width: 32px; height: 26px; border-radius: 3px; overflow: hidden; padding: 0; border: 2px solid transparent; background: #ffffff; opacity: 0.4; cursor: pointer; transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1), height 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, border-color 0.3s ease; } /* img is pointer-transparent so presses land on the button (keeps it clickable) and native image-drag can't hijack a scrubber drag started on a thumbnail. */ .ml-thumb2 img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ml-thumb2[data-d="1"] { width: 40px; height: 48px; opacity: 0.75; } .ml-thumb2[data-d="2"] { width: 36px; height: 38px; opacity: 0.55; } .ml-thumb2[data-d="0"] { width: 54px; height: 70px; opacity: 1; border-color: #061F51; box-shadow: 0 8px 18px rgba(6, 31, 81, 0.2); } @media (max-width: 720px) { .ml-gallery { height: 420px; } .ml-scene { gap: 24px; padding: 0 32px; } .ml-scene-text { flex-basis: 240px; width: 240px; } .ml-scene-title { font-size: 1.4rem; } .ml-scene-body { font-size: 0.95rem; } .ml-photos { flex-basis: 300px; width: 300px; height: 260px; } .ml-photo-a { width: 130px; height: 160px; left: 0; top: 50px; } .ml-photo-b { width: 150px; height: 200px; left: 75px; top: 0; } .ml-photo-c { width: 130px; height: 160px; left: 170px; top: 40px; } .ml-annot { font-size: 1.1rem; } .ml-annot-arrow { width: 50px; height: 36px; } .ml-scrubber { height: 66px; } .ml-thumb2 { width: 26px; height: 22px; } .ml-thumb2[data-d="1"] { width: 32px; height: 40px; } .ml-thumb2[data-d="2"] { width: 29px; height: 30px; } .ml-thumb2[data-d="0"] { width: 44px; height: 58px; } }