@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Caveat:wght@400..700&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); html { scroll-behavior: smooth; /* Hide the page scrollbar. Without this, the 15px scrollbar gutter reserves space on the right of , leaving a 15px strip where 's dark bg gets propagated and shows as a dark stripe next to every light section. */ scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; } :root { /* Refined Design Tokens */ --font-heading: 'Bricolage Grotesque', sans-serif; --font-labels: 'Inter Tight', sans-serif; --font-body: 'Inter', sans-serif; --font-logo: 'Caveat', cursive; --border-radius-xl: 32px; --border-radius-lg: 24px; --border-radius-md: 16px; --border-radius-sm: 12px; --transition-base: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); --transition-spring: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12); /* Spacing Scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; /* Theme Colors — Triadic Coral */ --bg-cream: #FFFBF5; /* warm off-white for alternating sections */ --bg-primary: #F0E6F0; /* soft lavender-pink */ --bg-alt: #E8D8E8; /* slightly deeper mauve */ --bg-dark: #1A1025; /* deep purple-black */ --primary-purple: #8B5CF6; --primary-purple-rgb: 139, 92, 246; --secondary-purple: #EC4899; /* hot pink / triadic accent */ --emphasis-purple: #F59E0B; /* amber gold */ --accent-pink: #EC4899; --text-main: #1A0A2E; /* very dark purple-black */ --text-muted: rgba(26, 10, 46, 0.6); /* Extra Ref Accents */ --accent-coral: #FB7185; --accent-gold: #FBBF24; --accent-teal: #2DD4BF; --accent-blue: #38BDF8; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-dark); color: var(--text-main); font-family: var(--font-body); line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Top Header Styles */ .top-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; padding: 1.5rem 0; transition: var(--transition-base); } .top-header.scrolled { padding: 1rem 0; background: rgba(240, 230, 240, 0.9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(var(--primary-purple-rgb), 0.08); } .header-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; } .header-logo { font-family: var(--font-logo); font-size: 2.1rem; color: var(--primary-purple); text-decoration: none; font-weight: 700; } .header-right { display: flex; align-items: center; gap: 40px; } .header-nav { display: flex; gap: 30px; } .header-nav a { text-decoration: none; color: var(--primary-purple); font-family: var(--font-labels); font-weight: 500; font-size: 0.95rem; transition: opacity 0.3s; } .header-nav a:hover { opacity: 0.6; } .header-cta { background: var(--primary-purple); color: white; text-decoration: none; padding: 12px 24px; border-radius: 12px; font-family: var(--font-labels); font-weight: 600; font-size: 0.95rem; transition: var(--transition-spring); } .header-cta:hover { background: var(--secondary-purple); transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 20px rgba(var(--primary-purple-rgb), 0.15); } /* === Mobile hamburger + slide-down nav === Hidden on desktop. On mobile, the floating bottom pill is also hidden in favour of a top-header hamburger that opens an inline drop panel. */ .header-burger { display: none; width: 38px; height: 38px; margin-left: 10px; background: transparent; border: none; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .header-burger span { display: block; width: 20px; height: 2px; background: var(--text-main); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .header-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .header-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { display: none; flex-direction: column; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(26, 10, 46, 0.08); overflow: hidden; max-height: 0; transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .mobile-nav.is-open { display: flex; max-height: 480px; } .mobile-nav a { padding: 16px 24px; color: var(--text-main); text-decoration: none; font-family: var(--font-labels); font-weight: 600; font-size: 1rem; border-bottom: 1px solid rgba(26, 10, 46, 0.06); transition: background 0.2s ease, color 0.2s ease; } .mobile-nav a:last-child { border-bottom: none; } .mobile-nav a:hover, .mobile-nav a:active { background: rgba(139, 92, 246, 0.08); color: var(--primary-purple); } /* ============================================ SLAB / SECTION LAYOUT — Reference Card Style Each section is a full-width card with rounded top corners, stacking over the dark body background — exactly like the reference site (unlimitedtemplate.framer.website). ============================================ */ /* ============================================ SECTION STACKING (SLABS) ============================================ */ .slab-container { padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .slab { background: var(--bg-primary); border-radius: 40px 40px 0 0; margin-top: -40px; padding: clamp(4rem, 10vw, 8rem) 5vw; width: 100%; position: relative; overflow: hidden; z-index: 1; transition: var(--transition-base); } .slab:first-child, .slab--hero { margin-top: 0; border-radius: 0; } .slab--light { background: #fff; } .slab--cream { background: var(--bg-cream); } .slab--alt { background: var(--bg-alt); } .slab--dark { background: var(--bg-dark) !important; color: #FFFFFF !important; border: none; } .slab--dark h1, .slab--dark h2, .slab--dark h3, .slab--dark h4, .slab--dark .testi-main-heading { color: #FFFFFF !important; } .slab--dark .text-muted, .slab--dark .hero-sub, .slab--dark .vault-desc, .slab--dark .service-description, .slab--dark .testi-subtitle { color: rgba(255, 255, 255, 0.75) !important; } .slab--dark .label-pill { background: rgba(255, 255, 255, 0.1); color: white; } /* Individual card stacking z-indices */ .slab:nth-child(1) { z-index: 1; } .slab:nth-child(2) { z-index: 2; } .slab:nth-child(3) { z-index: 3; } .slab:nth-child(4) { z-index: 4; } .slab:nth-child(5) { z-index: 5; } .slab:nth-child(6) { z-index: 6; } .slab:nth-child(7) { z-index: 7; } .slab:nth-child(8) { z-index: 8; } .slab:nth-child(9) { z-index: 9; } .slab:nth-child(10) { z-index: 10; } .slab--hero { background: var(--bg-cream); border-radius: 0; margin-top: 0; overflow: hidden; position: relative; padding: 0; } .hero-content { width: 100%; margin: 0 auto; } .label-pill { background: var(--bg-alt); color: var(--primary-purple); padding: 8px 16px; border-radius: 100px; font-family: var(--font-labels); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 2rem; border: 1px solid rgba(var(--primary-purple-rgb), 0.1); } /* Global h1 — hero-headline class overrides this for the hero */ h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.04em; font-weight: 800; margin-bottom: 2rem; } h2 { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; } .hero-portrait-inline { width: 90px; height: 90px; border-radius: var(--border-radius-md); display: inline-block; vertical-align: middle; margin: 0 10px; object-fit: cover; transform: rotate(-4deg); border: 3px solid white; box-shadow: var(--shadow-md); transition: var(--transition-spring); } .hero-portrait-inline:hover { transform: rotate(0deg) scale(1.1); } .hero-sub { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--text-muted); max-width: 800px; margin: 0 auto 3rem; font-family: var(--font-body); font-weight: 400; line-height: 1.6; } /* Buttons (Framer Style) */ .btn-group { display: flex; gap: 16px; justify-content: center; } .btn { padding: 14px 28px; border-radius: var(--border-radius-sm); font-family: var(--font-labels); font-weight: 600; text-decoration: none; transition: var(--transition-spring); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.95rem; border: 1px solid transparent; } .btn--primary { background: var(--primary-purple); color: white; } .btn--primary:hover { background: var(--text-main); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--secondary { background: transparent; color: var(--text-main); border: 1px solid rgba(0,0,0,0.1); } .btn--dark { background: #000000; color: white; } .btn--dark:hover { background: #252525; } .btn--minimal { background: transparent; color: var(--text-main); padding-left: 0; padding-right: 0; } .btn--minimal:hover { color: var(--primary-purple); } .btn--minimal i, .btn--minimal svg { transition: transform 0.3s ease; } .btn--minimal:hover i, .btn--minimal:hover svg { transform: translateX(5px); } /* Floating Navigation */ .floating-nav { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(var(--primary-purple-rgb), 0.9); backdrop-filter: blur(15px); padding: 10px; border-radius: 100px; display: flex; gap: 5px; z-index: 1000; border: 1px solid rgba(255, 255, 250, 0.2); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); transition: var(--transition-spring); } .floating-nav:hover { transform: translateX(-50%) translateY(-5px); } .floating-nav a { color: white; text-decoration: none; padding: 12px 24px; border-radius: 100px; font-size: 0.95rem; font-weight: 600; font-family: var(--font-labels); transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); opacity: 0.6; } .floating-nav a:hover, .floating-nav a.active { opacity: 1; background: rgba(255, 255, 250, 0.2); } /* Theme Toggle Removed */ /* About & Profile Styles */ .about-grid { display: grid; grid-template-columns: 350px 1fr; gap: 6rem; align-items: center; max-width: 1100px; margin: 0 auto; } .profile-card { background: white; padding: 1rem; border-radius: var(--border-radius-lg); border: 1px solid rgba(0,0,0,0.05); box-shadow: var(--shadow-md); transition: var(--transition-base); } .profile-card:hover { transform: rotate(-1deg) translateY(-5px); } .profile-img-inner { width: 100%; aspect-ratio: 1; border-radius: var(--border-radius-md); overflow: hidden; margin-bottom: 1.5rem; } .profile-img-inner img { width: 100%; height: 100%; object-fit: cover; } .profile-meta { padding: 0 0.5rem 0.5rem; } .status-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; margin-bottom: 1rem; } .status-dot { width: 6px; height: 6px; background: #10b981; border-radius: 50%; } .about-content p { font-size: 1.15rem; margin-bottom: 1.5rem; color: var(--text-muted); line-height: 1.7; } /* ============================================================ TESTIMONIALS — REVIEWS SPLIT LAYOUT ============================================================ */ .testi-header { text-align: center; margin-bottom: 4rem; } .testi-main-heading { font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; margin: 0 0 1.25rem; } .testi-highlight { display: inline-block; background: var(--primary-purple); color: #fff; padding: 4px 20px; border-radius: 10px; transform: rotate(-1.5deg); font-style: normal; } .testi-subtitle { font-size: 1rem; max-width: 480px; margin: 0 auto; line-height: 1.6; } #testimonials.slab { overflow: visible; padding-top: 8rem; padding-bottom: 10rem; position: relative; } /* CTA pill (kept for backward compat) */ .testi-cta-btn { display: inline-flex; align-items: center; margin-top: 1.75rem; background: #fff; color: var(--text-main); font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; padding: 12px 26px; border-radius: 100px; text-decoration: none; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .testi-cta-btn:hover { background: var(--primary-purple); color: #fff; transform: translateY(-2px); } /* === Reviews wrap === */ .reviews-wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 5; } .reviews-wrap > .reviews-card { position: relative; z-index: 1; } .reviews-card { background: #FFFBF5; border: 1.5px solid rgba(26, 10, 46, 0.08); border-radius: 36px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18); display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 0; overflow: hidden; position: relative; } /* === LEFT: wheel carousel ============================================ Items are absolutely positioned; only 3 are visible at a time, sitting on a gentle right-bulging curve. The active item is in the middle slot, indented right and scaled up. State classes (.is-prev / .is-active / .is-next / .is-leaving) are toggled by JS on every tick. ==================================================================== */ .reviews-list-side { background: linear-gradient(180deg, #FFFBF5 0%, #F5EBF7 100%); padding: 2.5rem 1.5rem 2.5rem 1.75rem; position: relative; border-right: 1px solid rgba(26, 10, 46, 0.06); overflow: hidden; min-height: 540px; } .reviews-list-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--font-labels); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary-purple); margin-bottom: 0; position: relative; z-index: 5; } .reviews-list-bar { display: inline-block; width: 28px; height: 2px; background: var(--primary-purple); border-radius: 2px; } /* Static dashed curve — items glide along this path, the curve itself doesn't move */ .reviews-curve { position: absolute; left: 1.75rem; top: 4.5rem; width: calc(100% - 3.5rem); height: 440px; color: rgba(139, 92, 246, 0.3); pointer-events: none; z-index: 1; } /* Wheel container — absolute positioning context for the items */ .reviews-list { list-style: none; margin: 0; padding: 0; position: relative; height: 460px; margin-top: 1.25rem; z-index: 2; } /* Default state: parked off-screen below, invisible. Smooth cubic-bezier "ease-out-quart" gives a gentle decelerating glide that still feels quick at the new 4s rotation cadence. */ .review-person { position: absolute; left: 0; top: 0; right: 0; display: flex; align-items: center; gap: 0.85rem; padding: 0.5rem 0.75rem; border-radius: 14px; cursor: pointer; opacity: 0; transform: translateY(540px); pointer-events: none; transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease; will-change: transform, opacity; } /* Slot 1: top visible — small, left-aligned, dimmed */ .review-person.is-prev { transform: translateY(20px) translateX(0); opacity: 0.5; pointer-events: auto; z-index: 1; } /* Slot 2: middle visible — large, indented right, full opacity */ .review-person.is-active { transform: translateY(195px) translateX(36px); opacity: 1; background: #fff; box-shadow: 0 10px 28px rgba(139, 92, 246, 0.18); pointer-events: auto; z-index: 3; } /* Slot 3: bottom visible — small, left-aligned, dimmed */ .review-person.is-next { transform: translateY(370px) translateX(0); opacity: 0.5; pointer-events: auto; z-index: 1; } /* Exiting upward (was prev last tick) — fades and slides up out of view */ .review-person.is-leaving { transform: translateY(-140px) translateX(0); opacity: 0; z-index: 0; } .review-person:hover.is-prev, .review-person:hover.is-next { opacity: 0.85; background: rgba(139, 92, 246, 0.06); } .review-person-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-alt); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1), height 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease; } .review-person-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(50%); transition: filter 0.4s ease; } .review-person.is-active .review-person-avatar { width: 64px; height: 64px; border-color: var(--primary-purple); box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4); } .review-person.is-active .review-person-avatar img { filter: grayscale(0%); } .review-person-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .review-person-meta strong { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--text-main); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-person-meta span { font-family: var(--font-labels); font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Rating-style subtitle (★ Verified · 2025) — matches reference's "4.9 on 29 Aug 2017" feel */ .review-person-rating { display: inline-flex !important; align-items: center; gap: 5px; font-size: 0.7rem !important; font-weight: 600; color: var(--primary-purple) !important; letter-spacing: 0.02em; overflow: visible !important; } .review-person-rating .star { color: #F5B400; font-size: 0.85rem; line-height: 1; display: inline-block; transform: translateY(-1px); } .slab--dark #testimonials .review-person-rating { color: var(--primary-purple) !important; } .slab--dark #testimonials .review-person-rating .star { color: #F5B400 !important; } /* Override .slab--dark { color: #FFF !important } leaks into the cream card */ .slab--dark #testimonials .reviews-card, .slab--dark #testimonials .reviews-card * { color: var(--text-main); } .slab--dark #testimonials .review-person-meta strong { color: var(--text-main) !important; } .slab--dark #testimonials .review-person-meta span { color: var(--text-muted) !important; } .slab--dark #testimonials .reviews-list-eyebrow { color: var(--primary-purple) !important; } .slab--dark #testimonials .reviews-bigquote { color: var(--primary-purple) !important; } .slab--dark #testimonials .reviews-quote-counter { color: var(--primary-purple) !important; } .slab--dark #testimonials .reviews-counter-sep { color: var(--text-muted) !important; } /* === RIGHT: quote stage === */ .reviews-quote-side { padding: 3rem 3.25rem 2.75rem; display: flex; flex-direction: column; align-items: center; /* horizontally center children */ justify-content: center; /* vertically center the whole stack */ text-align: center; position: relative; min-height: 480px; } /* Manual prev/next arrows are mobile-only — desktop uses the wheel for nav */ .reviews-arrow { display: none; } /* Active person's avatar — hidden on desktop (the wheel shows it), shown prominently on mobile where the wheel is collapsed */ .reviews-quote-avatar { display: none; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 8px 22px rgba(139, 92, 246, 0.28), 0 2px 6px rgba(0, 0, 0, 0.08); margin-bottom: 1.25rem; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .reviews-quote.is-swapping ~ .reviews-quote-avatar, .reviews-quote-avatar.is-swapping { opacity: 0; } /* Big ❝ now sits inline above the quote text, centered, no longer absolute */ .reviews-bigquote { font-family: 'Bricolage Grotesque', serif; font-size: 5rem; line-height: 0.7; color: var(--primary-purple); opacity: 0.35; pointer-events: none; user-select: none; display: block; margin-bottom: 0.5rem; position: static; } .reviews-quote { margin: 0 auto 2rem; padding: 0; border: none; max-width: 560px; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .reviews-quote.is-swapping { opacity: 0; transform: translateY(6px); } .reviews-quote p { font-family: 'Bricolage Grotesque', Georgia, serif; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.7; color: var(--text-main); font-weight: 400; margin: 0; font-style: italic; text-align: center; } .slab--dark #testimonials .reviews-quote p { color: var(--text-main); } .reviews-quote-footer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(26, 10, 46, 0.08); width: 100%; max-width: 560px; margin: 0 auto; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .reviews-quote-footer.is-swapping { opacity: 0; } .reviews-quote-author { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; } .reviews-quote-author strong { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--text-main); line-height: 1.2; } .slab--dark #testimonials .reviews-quote-author strong { color: var(--text-main); } .reviews-quote-author span { font-family: var(--font-labels); font-size: 0.8rem; color: var(--text-muted); line-height: 1.3; } .reviews-quote-counter { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; color: var(--primary-purple); letter-spacing: 0.08em; flex-shrink: 0; white-space: nowrap; } .reviews-counter-sep { margin: 0 4px; color: var(--text-muted); font-weight: 400; } .reviews-cta-row { margin-top: 1.5rem; display: flex; justify-content: flex-end; } /* === Mobile ============================================================ The vertical wheel doesn't translate to small screens, so we collapse the left side and show only the quote stage. The active person's name and role still appear in the footer, so users always know who's quoted. ====================================================================== */ /* === Mobile testimonials: polaroid postcard with ghost-deck ============ The wheel is desktop-only. On mobile we show the active testimonial as a tilted polaroid card with two "ghost" cards peeking behind it (giving that deck-of-postcards feel that fits Jasmine's playful, designer-led brand). A soft coral aura sits behind the stack to make it pop against the dark purple section. ====================================================================== */ @media (max-width: 880px) { #testimonials.slab { padding-top: 4.5rem; padding-bottom: 5.5rem; } /* Lose the card-chrome of the wheel container — let the polaroid breathe */ .reviews-card { grid-template-columns: 1fr; background: transparent; border: none; box-shadow: none; overflow: visible; } .reviews-list-side { display: none; } /* Wrap that holds the polaroid + ghost cards + aura. Use position: relative so the ghost pseudos can overlay. Top margin gives the avatar (which protrudes 42px above) breathing room from the "Book My Audit" button just above. */ .reviews-quote-side { position: relative; padding: 0 38px; /* leave horizontal room for the prev/next arrows */ min-height: auto; overflow: visible; margin-top: 3rem; } /* Prev/next arrows — mobile-only manual navigation. Sit on the left/right edges, vertically centered against the polaroid. */ .reviews-arrow { position: absolute; top: 48%; transform: translateY(-50%); z-index: 10; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(20, 8, 40, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.2s ease, transform 0.2s ease; } .reviews-arrow:hover, .reviews-arrow:active { background: var(--primary-purple); border-color: var(--primary-purple); transform: translateY(-50%) scale(1.06); } .reviews-arrow--prev { left: -2px; } .reviews-arrow--next { right: -2px; } /* Coral aura behind the stack — pops against the dark slab */ .reviews-quote-side::before { content: ''; position: absolute; z-index: 0; left: 50%; top: 8%; width: 360px; height: 360px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at center, rgba(255, 122, 89, 0.55) 0%, rgba(255, 122, 89, 0.25) 40%, transparent 72%); filter: blur(1px); pointer-events: none; } /* The actual polaroid — using the existing .reviews-quote element as the polaroid surface. Avatar above, quote inside a card with white border and slight tilt for that hand-placed feel. */ .reviews-quote { position: relative; z-index: 2; margin: 0 auto; max-width: 320px; background: #FFFBF5; border-radius: 18px; padding: 70px 1.4rem 1.5rem; /* top room for avatar overlap */ box-shadow: 0 14px 36px rgba(20, 8, 40, 0.42), 0 28px 64px rgba(20, 8, 40, 0.28); transform: rotate(-1.4deg); will-change: transform, opacity; } /* === Card swipe animation (mobile only) =========================== JS adds .is-card-out to fly the polaroid + avatar off to the left, then .is-card-in to deal a fresh card in from the right. Both card and avatar share the same animation timing for a unified motion. */ @keyframes polaroid-out { 0% { transform: rotate(-1.4deg) translate(0, 0); opacity: 1; } 100% { transform: rotate(-22deg) translate(-130%, 24px); opacity: 0; } } @keyframes polaroid-in { 0% { transform: rotate(14deg) translate(140%, 24px); opacity: 0; } 45% { opacity: 1; } 100% { transform: rotate(-1.4deg) translate(0, 0); opacity: 1; } } @keyframes avatar-out { 0% { transform: translateX(-50%) rotate(0deg) translate(0, 0); opacity: 1; } 100% { transform: translateX(-50%) translate(-180%, 18px) rotate(-22deg); opacity: 0; } } @keyframes avatar-in { 0% { transform: translateX(-50%) translate(180%, 18px) rotate(14deg); opacity: 0; } 45% { opacity: 1; } 100% { transform: translateX(-50%) rotate(0deg) translate(0, 0); opacity: 1; } } .reviews-quote-side.is-card-out .reviews-quote { animation: polaroid-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards; } .reviews-quote-side.is-card-out .reviews-quote-avatar { animation: avatar-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards; } .reviews-quote-side.is-card-in .reviews-quote { animation: polaroid-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .reviews-quote-side.is-card-in .reviews-quote-avatar { animation: avatar-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @media (prefers-reduced-motion: reduce) { .reviews-quote-side.is-card-out .reviews-quote, .reviews-quote-side.is-card-in .reviews-quote, .reviews-quote-side.is-card-out .reviews-quote-avatar, .reviews-quote-side.is-card-in .reviews-quote-avatar { animation: none !important; } } /* Two ghost polaroids peeking behind — pure decoration, hint at depth */ .reviews-quote::before, .reviews-quote::after { content: ''; position: absolute; inset: 0; background: #FFFBF5; border-radius: 18px; z-index: -1; box-shadow: 0 12px 32px rgba(20, 8, 40, 0.28); } .reviews-quote::before { transform: rotate(3.2deg) translate(8px, 6px); opacity: 0.7; } .reviews-quote::after { transform: rotate(-4.5deg) translate(-10px, 10px); opacity: 0.5; } /* Avatar — circular, large, sits at top of card overlapping the edge */ .reviews-quote-avatar { display: block; position: absolute; z-index: 3; top: -42px; left: 50%; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid #FFFBF5; box-shadow: 0 0 0 2px var(--primary-purple), 0 10px 24px rgba(139, 92, 246, 0.45); margin: 0; } /* Hide the big ❝ on mobile — the polaroid + avatar is the visual anchor, no need for an extra decorative quote mark cluttering the stack. */ .reviews-bigquote { display: none; } /* Quote text — centered italic serif */ .reviews-quote p { font-family: 'Bricolage Grotesque', Georgia, serif; font-size: 0.95rem; line-height: 1.55; font-style: italic; font-weight: 400; color: var(--text-main); margin: 0; text-align: center; } /* Footer (name + role + counter) — sits BELOW the polaroid, on the dark slab. Center-aligned, white text. Acts like a caption tag. */ .reviews-quote-footer { position: relative; z-index: 2; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.5rem 1rem 0; border-top: none; max-width: none; margin: 0; } .reviews-quote-author { gap: 2px; } /* Direct selector wins — #testimonials IS the .slab--dark element so the .slab--dark prefixed selector earlier in the file never matches */ .reviews-quote-author strong { color: #fff !important; font-size: 1rem !important; } .reviews-quote-author span { color: rgba(255, 255, 255, 0.65) !important; font-size: 0.78rem !important; } /* Counter: active number stands out in coral, total is a muted supporting role (white at low opacity). The separator sits in between the two visual weights. */ .reviews-quote-counter { font-size: 0.72rem !important; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.4rem; color: rgba(255, 255, 255, 0.5) !important; /* default = total */ } .reviews-quote-counter #reviews-counter-current { color: var(--accent-coral) !important; font-weight: 700; } .reviews-counter-sep { color: rgba(255, 255, 255, 0.3) !important; } } /* FAQ Section Header */ .faq-section-header { text-align: center; margin-bottom: 4rem; } .faq-heading-wrap { margin-bottom: 1.5rem; line-height: 1; } .faq-freq-badge { display: inline-block; background: var(--primary-purple); color: #fff; font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; padding: 8px 28px; border-radius: 14px; transform: rotate(-2deg); margin-bottom: 0.4rem; } .faq-main-heading { font-family: var(--font-heading); font-size: clamp(2.2rem, 4.5vw, 3.5rem); font-weight: 800; color: var(--text-main); margin: 0; line-height: 1.1; } .faq-subtitle { font-size: 1rem; color: var(--text-muted); max-width: 520px; margin: 0 auto; line-height: 1.65; } /* FAQ Accordion */ .faq-container { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .faq-item { background: white; border: 2px solid rgba(0,0,0,0.1); border-radius: 20px; overflow: hidden; transition: var(--transition-base); } .faq-item:hover { border-color: var(--primary-purple); } .faq-header { padding: 1.75rem 2rem; display: flex; align-items: center; gap: 1.5rem; cursor: pointer; user-select: none; } .faq-num { width: 44px; height: 44px; background: var(--text-main); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-labels); font-size: 0.8rem; font-weight: 700; flex-shrink: 0; } .faq-header h4 { flex-grow: 1; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; margin: 0; color: var(--text-main); } .faq-icon { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; color: var(--text-main); } .faq-item.active .faq-icon { background: var(--primary-purple); border-color: var(--primary-purple); color: white; transform: rotate(90deg); } .faq-content { max-height: 0; padding: 0 2rem 0 5.5rem; overflow: hidden; transition: max-height 0.4s cubic-bezier(0, 1, 0, 1); } .faq-item.active .faq-content { max-height: 1000px; padding-bottom: 2rem; transition: max-height 0.4s cubic-bezier(1, 0, 1, 0); } /* Quote Patterns */ .quote-mark { font-size: 5rem; font-family: var(--font-logo); line-height: 1; margin-bottom: -1rem; display: block; } .quote-mark--purple { color: var(--primary-purple); } .quote-mark--coral { color: var(--accent-coral); } .quote-mark--gold { color: var(--accent-gold); } /* Avatar Circle */ .avatar-circle { width: 60px; height: 60px; border-radius: 50%; background: var(--bg-alt); overflow: hidden; border: 2px solid white; box-shadow: var(--shadow-sm); } .author-meta { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; justify-content: center; } /* Work Grid (Refined) */ /* Reveal Animations & Staggering — Framer Style */ .reveal { opacity: 0; transform: translateY(40px) scale(0.98); transition: var(--transition-base); } .reveal.active { opacity: 1; transform: translateY(0) scale(1); } .reveal-child { opacity: 0; transform: translateY(20px) scale(0.96); transition: var(--transition-base); } .reveal.active .reveal-child { opacity: 1; transform: translateY(0) scale(1); } /* Automatic Staggering for Children */ .reveal.active .reveal-child:nth-child(1) { transition-delay: 0.1s; } .reveal.active .reveal-child:nth-child(2) { transition-delay: 0.2s; } .reveal.active .reveal-child:nth-child(3) { transition-delay: 0.3s; } .reveal.active .reveal-child:nth-child(4) { transition-delay: 0.4s; } .reveal.active .reveal-child:nth-child(5) { transition-delay: 0.5s; } .reveal.active .reveal-child:nth-child(6) { transition-delay: 0.6s; } .reveal.active .reveal-child:nth-child(4) { transition-delay: 0.4s; } .reveal.active .reveal-child:nth-child(5) { transition-delay: 0.5s; } .reveal.active .reveal-child:nth-child(6) { transition-delay: 0.6s; } /* Authority Optimization Styles */ .social-proof-hero { font-family: var(--font-labels); font-size: 0.85rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; } .btn--xl { padding: 16px 32px; font-size: 1.05rem; border-radius: var(--border-radius-md); } /* Editorial Freebies Vault */ .vault-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; } .vault-item { background: var(--bg-primary); padding: 1.5rem; border-radius: var(--border-radius-lg); border: 1px solid rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; transition: var(--transition-base); } .vault-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-purple); } .vault-thumb { display: block; border-radius: var(--border-radius-md); overflow: hidden; } .vault-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .vault-body { padding: 0; } .vault-tag { display: inline-block; color: var(--primary-purple); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; } .vault-title { font-family: var(--font-heading); font-size: 1.5rem; margin: 0 0 0.75rem 0; color: var(--text-main); line-height: 1.2; } .vault-desc { color: var(--text-muted); font-size: 1rem; margin-bottom: 1.5rem; } .vault-cta { font-family: var(--font-labels); color: var(--primary-purple); text-decoration: none; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; } .vault-cta:hover { text-decoration: underline; } @media (max-width: 1000px) { .vault-grid { grid-template-columns: 1fr; } } /* CTA Section Styles */ .cta-content { max-width: 1000px; margin: 0 auto; text-align: center; } .next-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 1rem; margin: 3rem 0; } .step { text-align: center; padding: 0 1rem; } .step-marker { font-family: var(--font-heading); font-size: 0.85rem; color: var(--primary-purple); font-weight: 700; margin-bottom: 1rem; background: rgba(var(--primary-purple-rgb), 0.1); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-left: auto; margin-right: auto; } .step h4 { font-family: var(--font-heading); font-size: 1.35rem; margin-bottom: 0.75rem; color: white; } .step p { font-family: var(--font-body); font-size: 0.95rem; color: rgba(255, 255, 255, 0.6); line-height: 1.5; } .step-divider { width: 60px; height: 1px; background: rgba(255, 255, 255, 0.1); } /* Process Step Refined */ .process-steps { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; position: relative; max-width: 1000px; margin: 4rem auto; } .step-node { flex: 1; text-align: center; position: relative; z-index: 2; } .step-circle { width: 50px; height: 50px; background: var(--bg-alt); border: 1px solid rgba(0,0,0,0.1); color: var(--primary-purple); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; margin: 0 auto 1.5rem; transition: var(--transition-base); } .step-node:hover .step-circle { background: var(--primary-purple); color: white; transform: scale(1.1); } .step-node h4 { font-size: 1.25rem; margin-bottom: 0.5rem; } .step-line { position: absolute; top: 25px; left: calc(50% + 25px); width: calc(100% - 50px); height: 1px; background: rgba(0,0,0,0.1); z-index: 1; } .step-node:last-child .step-line { display: none; } /* Footer CTA */ .footer-cta-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5rem; } .footer-cta-block { text-align: center; position: relative; } .footer-cta-heading-wrap { margin-bottom: 1.5rem; line-height: 1; } .footer-freq-badge { display: inline-block; background: var(--primary-purple); color: #fff; font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; padding: 8px 28px; border-radius: 14px; transform: rotate(-2deg); margin-bottom: 0.4rem; } .footer-cta-heading { font-family: var(--font-heading); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 800; color: #fff; margin: 0; line-height: 1; } .footer-cta-sub { color: rgba(255,255,255,0.65); font-size: 1.1rem; max-width: 500px; margin: 0 auto 2.5rem; line-height: 1.65; } .footer-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--text-main); font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; padding: 18px 40px; border-radius: 100px; text-decoration: none; transition: var(--transition-spring); border: none; } .footer-cta-btn:hover { background: var(--primary-purple); color: #fff; transform: translateY(-2px); } /* === Contact form ==================================================== Lives inside the dark #contact section. Uses cream-tinted inputs to pop against the dark purple slab. Submits via FormSubmit (no backend), so Jasmine just needs to confirm the receiving email on first submission. =================================================================== */ .contact-form { width: 100%; max-width: 620px; margin: 3rem auto 0; display: flex; flex-direction: column; gap: 1.25rem; background: #FFFBF5; border: 1.5px solid rgba(255, 255, 255, 0.08); border-radius: 28px; padding: 2.25rem 2rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25); position: relative; z-index: 2; } .form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form-field { display: flex; flex-direction: column; gap: 0.4rem; } .form-label { font-family: var(--font-labels); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary-purple); } /* Override the .slab--dark color leak so labels stay readable */ .slab--dark .contact-form .form-label, .slab--dark .contact-form .form-fineprint { color: var(--primary-purple); } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form select, .contact-form textarea { width: 100%; font-family: var(--font-heading); font-size: 1rem; color: var(--text-main) !important; background: #fff; border: 1.5px solid rgba(26, 10, 46, 0.12); border-radius: 12px; padding: 12px 14px; transition: border-color 0.25s ease, box-shadow 0.25s ease; -webkit-appearance: none; appearance: none; } .contact-form textarea { resize: vertical; min-height: 110px; font-family: 'Bricolage Grotesque', Georgia, serif; line-height: 1.5; } .contact-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B5CF6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; padding-right: 40px; cursor: pointer; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(26, 10, 46, 0.38); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary-purple); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); } .form-submit { margin-top: 0.5rem; align-self: stretch; text-align: center; justify-content: center; } .form-fineprint { margin: 0; font-size: 0.78rem; text-align: center; color: var(--text-muted); line-height: 1.5; } @media (max-width: 640px) { .contact-form { padding: 1.75rem 1.25rem; margin-top: 2rem; border-radius: 22px; } .form-row--split { grid-template-columns: 1fr; gap: 1.25rem; } } /* === Contact form modal ============================================= Triggered by [data-open-modal="contact"] or by any anchor whose href is "#contact". Animated in/out via the .is-open class on .modal. ================================================================== */ .modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.25s ease; } .modal-backdrop { position: absolute; inset: 0; background: rgba(20, 8, 40, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal-panel { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 3rem); overflow-y: auto; background: #FFFBF5; border-radius: 28px; padding: 2.75rem 2.25rem 2.25rem; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45); transform: translateY(20px) scale(0.97); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .modal.is-open .modal-panel { transform: translateY(0) scale(1); } .modal-close { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(26, 10, 46, 0.06); color: var(--text-main); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; } .modal-close:hover { background: var(--primary-purple); color: #fff; transform: rotate(90deg); } .modal-header { text-align: center; margin-bottom: 1.75rem; } .modal-eyebrow { display: inline-block; font-family: var(--font-labels); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary-purple); margin-bottom: 0.5rem; } .modal-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 1.95rem); font-weight: 800; line-height: 1.2; margin: 0 0 0.5rem; color: var(--text-main); } .modal-sub { font-size: 0.95rem; color: var(--text-muted); margin: 0; line-height: 1.5; } /* Form inside modal — drop the outer card chrome since the modal already provides it */ .contact-form--modal { background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; max-width: none; } /* === Success state (shown after form submission) === */ /* The [hidden] attribute alone is overridden by display:flex on the form, so make sure both states obey hidden. */ [hidden].modal-success, [hidden].contact-form, [hidden].modal-header { display: none !important; } .modal-success { text-align: center; padding: 0.5rem 0; animation: success-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes success-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .success-checkmark { width: 72px; height: 72px; border-radius: 50%; background: rgba(34, 197, 94, 0.12); color: #16a34a; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; animation: success-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes success-pop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } .modal-success .modal-eyebrow { display: block; margin-bottom: 0.5rem; } .modal-success .modal-title { margin-bottom: 0.5rem; } .modal-success .modal-sub { margin-bottom: 1.75rem; max-width: 460px; margin-left: auto; margin-right: auto; } .modal-success .form-submit { width: 100%; } .modal-secondary-link { display: block; margin: 1rem auto 0; background: none; border: none; font-family: var(--font-labels); font-size: 0.85rem; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(26, 10, 46, 0.2); transition: color 0.2s ease, text-decoration-color 0.2s ease; } .modal-secondary-link:hover { color: var(--primary-purple); text-decoration-color: var(--primary-purple); } /* Lock body scroll while modal is open (toggled by JS) */ body.modal-open { overflow: hidden; } @media (max-width: 640px) { .modal { padding: 1rem; } .modal-panel { padding: 2.5rem 1.25rem 1.5rem; border-radius: 22px; } .modal-title { font-size: 1.4rem; } } .footer-bottom-row { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,0.12); } .footer-brand { font-family: var(--font-logo); font-size: 1.35rem; color: #fff; font-weight: 600; } .footer-nav-links { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; } .footer-nav-links a { color: rgba(255,255,255,0.55); text-decoration: none; font-family: var(--font-labels); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.2s ease; } .footer-nav-links a:hover { color: #fff; } .footer-copy { font-family: var(--font-labels); font-size: 0.8rem; color: rgba(255,255,255,0.35); letter-spacing: 0.05em; text-transform: uppercase; } /* Utilities */ .text-center { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .max-w-600 { max-width: 600px !important; } .max-w-800 { max-width: 800px !important; } @media (max-width: 900px) { .next-steps { grid-template-columns: 1fr; gap: 3rem; } .step-divider { display: none; } } /* Responsiveness */ @media (max-width: 1000px) { .hero-content h1 { font-size: 3rem; } .about-grid { grid-template-columns: 1fr; gap: 3rem; text-align: center; } .vault-grid, .services-grid { grid-template-columns: 1fr; } .next-steps { grid-template-columns: 1fr; gap: 2rem; } .hero-portrait-inline { width: 70px; height: 70px; } } /* Center contact slab content (heading + copyright) */ #contact { display: flex; flex-direction: column; align-items: center; text-align: center; } /* Ensure the large heading in the contact slab is centered */ #contact h1 { text-align: center; margin-left: 0; margin-right: 0; } /* Center the copyright/footer div that directly follows the .btn-group */ #contact .btn-group+div { text-align: center; width: 100%; margin-top: 3rem; } /* THEMES DISABLED (Locking to Coral) [data-theme="analogous-cream"] { ... } ... */ /* The marquee section CSS is already defined above in the slab layout section. This duplicate block below previously fought the new design — cleaned up. */ .marquee-section { /* Values set in card-stacking section above, just adding inner padding here */ padding: 4rem 0; } .marquee-container { display: flex; white-space: nowrap; overflow: hidden; } .marquee-content { display: flex; align-items: center; gap: 4rem; animation: scroll-marquee 35s linear infinite; padding-right: 4rem; /* Buffer for seamlessness */ } .marquee-item { color: #ffffff; font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 800; display: flex; align-items: center; gap: 2rem; text-transform: uppercase; letter-spacing: 0.05em; } .marquee-icon { color: var(--primary-purple); font-size: 1.2rem; } @keyframes scroll-marquee { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } @media (max-width: 768px) { .marquee-section { padding: 2rem 0; } .marquee-content { gap: 2rem; } .marquee-item { gap: 1rem; } } /* ============================================ RESPONSIVE ADJUSTMENTS FOR CARD STACKING ============================================ */ @media (max-width: 768px) { .slab { border-radius: 24px 24px 0 0; margin-top: -24px; padding: calc(var(--space-lg) + 24px) clamp(1rem, 4vw, 2rem) var(--space-lg); } .slab--dark { border-radius: 24px 24px 0 0; margin-top: -24px; } .marquee-section { border-radius: 24px 24px 0 0; margin-top: -24px; } } /* ============================================================ HERO SPLIT LAYOUT — Reference Site Pattern ============================================================ */ /* Slab Hero Specific Header Offset */ .slab--hero { padding: 0; } .hero-split { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4rem !important; align-items: center !important; max-width: 1400px; margin: 0 auto !important; min-height: 90vh; padding: 120px 5% 4rem !important; box-sizing: border-box !important; overflow: visible !important; } .hero-left, .hero-right { min-width: 0 !important; display: flex !important; flex-direction: column !important; } .hero-left { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 2rem !important; text-align: left !important; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-labels); font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); flex-shrink: 0; animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1); } } .hero-headline { font-family: var(--font-heading) !important; font-size: clamp(2.5rem, 4.5vw, 4.5rem) !important; line-height: 1 !important; letter-spacing: -0.04em !important; font-weight: 800 !important; color: var(--text-main) !important; margin: 0 !important; text-align: left !important; } .hero-sub { margin-bottom: 2rem; line-height: 1.6; } .hero-btns { display: flex !important; justify-content: flex-start !important; align-items: center !important; flex-wrap: wrap !important; gap: 1.5rem !important; width: 100% !important; margin: 0 !important; } .btn--ghost { background: transparent; color: var(--text-main); border: 2px solid rgba(26, 10, 46, 0.2); } .btn--ghost:hover { border-color: var(--primary-purple); color: var(--primary-purple); transform: translateY(-2px); } .hero-social-proof { display: flex; align-items: center; gap: 1rem; padding-top: 0.5rem; } .proof-faces { display: flex; } .proof-face { width: 36px; height: 36px; border-radius: 50%; border: 2px solid white; object-fit: cover; margin-left: -12px; background: var(--bg-alt); box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: transform 0.2s ease, z-index 0s; position: relative; } .proof-face:first-child { margin-left: 0; } .proof-face:nth-child(1) { z-index: 6; } .proof-face:nth-child(2) { z-index: 5; } .proof-face:nth-child(3) { z-index: 4; } .proof-face:nth-child(4) { z-index: 3; } .proof-face:nth-child(5) { z-index: 2; } .proof-face:nth-child(6) { z-index: 1; } .proof-face:hover { transform: translateY(-2px) scale(1.08); z-index: 10; } .proof-text { font-family: var(--font-labels); font-size: 0.85rem; color: var(--text-muted); font-weight: 500; } /* Bento Grid */ .hero-right { position: relative; } .hero-bento { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 140px 180px; gap: 12px; height: auto; } .bento-cell { border-radius: 20px; overflow: hidden; position: relative; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; box-shadow: 0 4px 12px rgba(26, 10, 46, 0.06), 0 12px 28px rgba(26, 10, 46, 0.08); will-change: transform; } .bento-cell:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 10px 24px rgba(139, 92, 246, 0.18), 0 24px 48px rgba(26, 10, 46, 0.16); } /* Inner image zoom on hover for image cells (no layout shift — overflow:hidden on .bento-cell crops it) */ .bento-cell .bento-img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .bento-cell:hover .bento-img { transform: scale(1.06); } .bento-img { width: 100%; height: 100%; object-fit: cover; display: block; } .bento-tall { grid-column: 1; grid-row: 1 / 3; background: var(--bg-alt); } /* Anchor the hero portrait near the top so Jasmine's head/face stays in frame regardless of crop area — fixes head-cut-off on mobile */ .bento-tall .bento-img { object-position: center 18%; } .bento-stat { grid-column: 2; grid-row: 1; background: linear-gradient(135deg, #9b6cff 0%, var(--primary-purple) 50%, #6f3df0 100%); position: relative; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; isolation: isolate; } /* Pulsing radial halo behind the 100+ — adds energy to the stat card */ .bento-stat::before { content: ''; position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle at center, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 60%); z-index: -1; animation: stat-halo 4.5s ease-in-out infinite; pointer-events: none; } @keyframes stat-halo { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.12); opacity: 1; } } .bento-stat:hover { box-shadow: 0 14px 30px rgba(139, 92, 246, 0.45), 0 28px 60px rgba(26, 10, 46, 0.25); } @media (prefers-reduced-motion: reduce) { .bento-stat::before { animation: none; } } .stat-number { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; color: white; line-height: 1; } .stat-label { font-family: var(--font-labels); font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.4rem; } .bento-img-card { grid-column: 2; grid-row: 2; background: var(--bg-alt); } .bento-wide { grid-column: 1; grid-row: 3; background: var(--bg-alt); } .bento-accent { grid-column: 2; grid-row: 3; background: radial-gradient(circle at top right, rgba(139, 92, 246, 0.25), transparent 60%), var(--bg-dark); color: white; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 1.5rem; transform: rotate(1deg); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; border: 1px solid rgba(139, 92, 246, 0.18); } .bento-accent:hover { transform: rotate(0deg) translateY(-6px) scale(1.012); box-shadow: 0 16px 36px rgba(139, 92, 246, 0.35), 0 28px 60px rgba(0, 0, 0, 0.4); } .accent-quote { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: white; margin-bottom: 0.75rem; font-style: italic; } .accent-author { font-family: var(--font-labels); font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.05em; } .bento-badge { position: absolute; bottom: 12px; left: 12px; background: white; color: var(--primary-purple); font-family: var(--font-labels); font-weight: 700; font-size: 0.7rem; padding: 4px 10px; border-radius: 100px; display: flex; align-items: center; gap: 4px; } .bento-label { position: absolute; bottom: 12px; left: 12px; background: rgba(0, 0, 0, 0.6); color: white; font-family: var(--font-labels); font-weight: 600; font-size: 0.7rem; padding: 4px 10px; border-radius: 100px; backdrop-filter: blur(4px); } /* Hero grid background */ .slab--hero { background-color: var(--bg-primary); background-image: linear-gradient(rgba(139, 92, 246, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.09) 1px, transparent 1px); background-size: 52px 52px; } /* Playful accent glows on hero */ .slab--hero::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%); top: -150px; right: -100px; pointer-events: none; z-index: 0; } .slab--hero::after { content: ''; position: absolute; width: 350px; height: 350px; background: radial-gradient(circle, rgba(236, 72, 153, 0.07) 0%, transparent 70%); bottom: 40px; left: -80px; pointer-events: none; z-index: 0; } .hero-split { position: relative; z-index: 1; } /* ============================================================ LINKEDIN BANNER SHOWCASE ============================================================ */ .banner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; } .banner-card { border-radius: 16px; overflow: hidden; background: white; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: var(--shadow-sm); transition: var(--transition-base); } .banner-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .banner-placeholder { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--bg-alt); } .banner-placeholder img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .banner-card:hover .banner-placeholder img { transform: scale(1.05); } .banner-card-meta { padding: 1.25rem 1.5rem; } .banner-card-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin-top: 0.5rem; margin-bottom: 0; } .banner-item-hidden { display: none !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .hero-split { grid-template-columns: 1fr; min-height: auto; gap: 3rem; } .hero-bento { grid-template-rows: 160px 110px 150px; height: auto; } .hero-btns { justify-content: flex-start; } } @media (max-width: 768px) { .hero-split { gap: 2rem; padding: 2rem 1.5rem; } .hero-bento { height: auto; grid-template-rows: 130px 95px 120px; gap: 8px; } .stat-number { font-size: 2.2rem; } .banner-grid { grid-template-columns: 1fr; gap: 1.5rem; } .bento-accent { display: none; } .bento-illustration { grid-column: span 1; min-height: 180px; } } @media (max-width: 768px) { .section-wave { height: 60px; } } /* ======================================== MY PROCESS — ROPE WAVE + STICKY SCROLL ======================================== */ /* Section: sticky's offset parent must NOT have overflow:hidden/clip — either can break sticky pin behavior in Firefox/Safari. Horizontal bleed from the 100vw .process-scroll child is caught by overflow-x: clip on . */ section#process.slab { overflow: visible; padding-top: 0; padding-bottom: 0; position: relative; } /* Tall wrapper provides scroll runway. Stage pins inside it. */ .process-wrapper { position: relative; height: 250vh; } .process-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 4rem 0; } .process-header { text-align: center; margin-bottom: 1.5rem; position: relative; flex-shrink: 0; } /* Scroll progress dots — one per step, sits below the cards */ .process-progress { display: flex; gap: 10px; justify-content: center; margin-top: 1.5rem; flex-shrink: 0; } .process-progress-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(139, 92, 246, 0.18); transition: background 0.35s ease, transform 0.35s ease; } .process-progress-dot.active { background: var(--primary-purple); transform: scale(1.4); } /* Full-bleed scroll viewport — sized to the slab's outer box rather than 100vw so it doesn't leak into body's scrollbar gutter (which would expose the dark body bg on the right). Slab has horizontal padding of 5vw, so extending the width by 10vw + pulling left by 5vw exactly cancels the padding. No edge mask: cards clip cleanly against the slab so they read as sitting on top of the page rather than fading behind a wall of fog. */ .process-scroll { position: relative; width: calc(100% + 10vw); margin-left: -5vw; overflow: hidden; flex: 1 1 auto; display: flex; align-items: center; } .process-scroll-track { position: relative; display: flex; gap: 1.25rem; padding: 80px 100px; align-items: center; will-change: transform; isolation: isolate; } /* Curved SVG rope — JS rewrites the path d each frame */ .process-rope { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } .process-rope path { fill: none; stroke: rgba(139, 92, 246, 0.4); stroke-width: 1.5; stroke-dasharray: 5 5; stroke-linecap: round; } /* Step card — fixed 220px, GPU-composited */ .process-step-card { position: relative; overflow: hidden; width: 220px; flex-shrink: 0; min-height: 200px; border-radius: var(--border-radius-lg); padding: 1.75rem; display: flex; flex-direction: column; will-change: transform; z-index: 1; } /* Card 1: lets the gripping hand spill out of the card's bounds. isolation creates a stacking context so the hand's z-index:-1 goes behind the card body but not behind ancestor backgrounds (which would hide it entirely). */ .process-step-card--first { overflow: visible; isolation: isolate; } .process-step-card--light { background: #fff; border: 1px solid rgba(139, 92, 246, 0.15); box-shadow: var(--shadow-md); color: var(--text-main); } .process-step-card--dark { background: var(--primary-purple); color: #fff; } .process-step-watermark { position: absolute; bottom: -10px; right: 10px; font-family: var(--font-heading); font-weight: 800; font-size: 5.5rem; line-height: 1; pointer-events: none; user-select: none; } .process-step-card--light .process-step-watermark { color: rgba(139, 92, 246, 0.08); } .process-step-card--dark .process-step-watermark { color: rgba(255, 255, 255, 0.12); } /* Card 1 watermark stays inside despite overflow:visible */ .process-step-card--first .process-step-watermark { clip-path: inset(0); } .process-step-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; flex-shrink: 0; } .process-step-card--light .process-step-icon { background: rgba(139, 92, 246, 0.12); color: var(--primary-purple); } .process-step-card--dark .process-step-icon { background: rgba(255, 255, 255, 0.18); color: #fff; } .process-step-label { font-family: var(--font-labels); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; opacity: 0.7; margin-bottom: 0.4rem; } .process-step-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; position: relative; z-index: 1; } .process-step-desc { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.5; opacity: 0.85; position: relative; z-index: 1; } /* Hand grips card 1 from above-left. Inherits card 1's wave transform. Image is the sleeve/glove illustration (1058x705 natural, ~3:2). Positioned so the glove's fingertips land on card 1's top edge with sleeve off-canvas. */ .process-hand { position: absolute; top: -85px; left: -30px; width: 220px; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18)); /* z-index -1 puts the hand behind card 1's body so only the sleeve and knuckles showing past the card edge are visible — reads as a hand reaching from behind to grip the card, rather than lying palm-down on it. */ z-index: -1; transform: scaleX(-1) rotate(10deg); transform-origin: center; } @media (max-width: 768px) { /* === Mobile process: sticky stacked cards ===================== Each card position:sticky's at the top of the viewport with a progressive offset, so as the user scrolls the next card slides up and "lands" on top of the previous (which stays peeking out just above). Total section height is comfortable to scroll through — 9 cards * ~70vh of room each. The desktop scroll-jack JS already short-circuits when isNarrow, but the wave-animation loop still sets inline transforms on cards every frame, so we force transform:none here to keep sticky positioning clean. ============================================================= */ .process-wrapper { height: auto; } .process-stage { position: relative; top: auto; height: auto; padding: 3rem 0 4rem; overflow: visible; } /* Hide the elements that only make sense in the desktop horizontal layout */ .process-hand, .process-rope, .process-progress { display: none !important; } /* Kill the long dashed timeline line (designed for desktop horizontal flow) */ .process-scroll-track::before { display: none; } .process-scroll { overflow: visible; padding: 0 1.25rem; } .process-scroll-track { display: flex; flex-direction: column; gap: 0; padding: 0; max-width: 380px; margin: 0 auto; position: relative; } .process-step-card { width: 100%; position: sticky; top: 90px; /* Cards sit nearly on the same line in natural flow (just 16px visual breathing room). As you scroll, each one folds onto the previous — but because of the staggered top values below, each previous card stays peeking out above the active one, so the deck keeps building visibly instead of collapsing into a single card. */ margin: 0 0 16px 0; padding: 1.75rem 1.75rem 1.5rem; min-height: auto; /* Override the JS-set inline wave transforms — they'd break sticky */ transform: none !important; box-shadow: 0 14px 36px rgba(26, 10, 46, 0.16), 0 28px 64px rgba(26, 10, 46, 0.10); transition: box-shadow 0.4s ease; } /* Keep the last card from leaving extra trailing scroll room */ .process-step-card:last-child { margin-bottom: 0; } /* Give the section a tail of scroll-room AFTER the cards naturally end, so the last card actually has somewhere to scroll into and can complete its sticky travel (otherwise card 9 unsticks too early and falls out of the deck). */ .process-scroll-track { padding-bottom: 60vh; } /* Progressive sticky offsets — each new card lands ~10px below the previous so you see the older cards peeking above as a "deck" */ .process-step-card:nth-child(1) { top: 90px; } .process-step-card:nth-child(2) { top: 100px; } .process-step-card:nth-child(3) { top: 110px; } .process-step-card:nth-child(4) { top: 120px; } .process-step-card:nth-child(5) { top: 130px; } .process-step-card:nth-child(6) { top: 140px; } .process-step-card:nth-child(7) { top: 150px; } .process-step-card:nth-child(8) { top: 160px; } .process-step-card:nth-child(9) { top: 170px; } .process-step-watermark { font-size: 4rem; right: 18px; top: 14px; } } @media (prefers-reduced-motion: reduce) { .process-step-card, .process-hand { transform: none !important; } } /* Bento illustration cell */ .bento-illustration { grid-column: span 2; border-radius: var(--border-radius-lg); overflow: hidden; background: rgba(139, 92, 246, 0.04); border: 1px solid rgba(139, 92, 246, 0.08); min-height: 220px; position: relative; } .hero-illustration-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* ======================================== STRATEGIC SERVICES — V2 ======================================== */ .services-grid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; align-items: start; } .service-card-v2 { background: white; border-radius: var(--border-radius-xl); padding: 3rem 2rem 2.5rem; border: 1px solid rgba(0,0,0,0.05); box-shadow: var(--shadow-md); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 480px; transition: var(--transition-base); } /* Middle card elevated */ .service-card-v2:nth-child(2) { transform: translateY(-16px); } .service-card-v2:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .service-card-v2:nth-child(2):hover { transform: translateY(-24px); } /* Background accent shape */ .service-accent-shape { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; z-index: 0; transition: transform 0.6s ease; } .service-card-v2:hover .service-accent-shape { transform: scale(1.2); } .service-card--coral .service-accent-shape { background: rgba(251, 113, 133, 0.08); } .service-card--purple .service-accent-shape { background: rgba(139, 92, 246, 0.08); } .service-card--gold .service-accent-shape { background: rgba(251, 191, 36, 0.08); } /* Card number */ .service-card-num { position: absolute; top: 1.5rem; right: 1.5rem; font-family: var(--font-heading); font-weight: 800; font-size: 2.5rem; z-index: 1; line-height: 1; } .service-card--coral .service-card-num { color: var(--accent-coral); } .service-card--purple .service-card-num { color: var(--primary-purple); } .service-card--gold .service-card-num { color: var(--accent-gold); } /* Icon circle */ .service-icon-circle { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; position: relative; z-index: 1; flex-shrink: 0; } .service-card--coral .service-icon-circle { background: rgba(251, 113, 133, 0.12); } .service-card--purple .service-icon-circle { background: rgba(139, 92, 246, 0.12); } .service-card--gold .service-icon-circle { background: rgba(251, 191, 36, 0.12); } .service-icon-v2 { font-size: 2.5rem; line-height: 1; } .service-card--coral .service-icon-v2 { color: var(--accent-coral); } .service-card--purple .service-icon-v2 { color: var(--primary-purple); } .service-card--gold .service-icon-v2 { color: var(--accent-gold); } .service-name-v2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.75rem; position: relative; z-index: 1; } .service-description-v2 { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--text-muted); margin-bottom: 1.5rem; position: relative; z-index: 1; } /* What you get bullet list */ .service-bullets { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.5rem; position: relative; z-index: 1; } .service-bullets li { font-family: var(--font-labels); font-size: 0.85rem; color: var(--text-main); display: flex; align-items: center; gap: 0.5rem; } .bullet-check { font-size: 0.8rem; font-weight: 700; flex-shrink: 0; } .service-card--coral .bullet-check { color: var(--accent-coral); } .service-card--purple .bullet-check { color: var(--primary-purple); } .service-card--gold .bullet-check { color: var(--accent-gold); } /* Card CTA — sticks to card bottom */ .service-card-cta { font-family: var(--font-labels); font-size: 0.85rem; font-weight: 600; text-decoration: none; margin-top: auto; display: inline-flex; align-items: center; gap: 0.25rem; position: relative; z-index: 1; transition: var(--transition-base); } .service-card--coral .service-card-cta { color: var(--accent-coral); } .service-card--purple .service-card-cta { color: var(--primary-purple); } .service-card--gold .service-card-cta { color: var(--accent-gold); } .service-card-cta:hover { text-decoration: underline; } .cta-arrow { display: inline-block; transition: transform 0.3s ease; } .service-card-cta:hover .cta-arrow { transform: translateX(4px); } .service-card--coral:hover { border-color: rgba(251, 113, 133, 0.4); } .service-card--purple:hover { border-color: rgba(139, 92, 246, 0.4); } .service-card--gold:hover { border-color: rgba(251, 191, 36, 0.4); } @media (max-width: 900px) { .services-grid-v2 { grid-template-columns: 1fr; } .service-card-v2:nth-child(2) { transform: translateY(0); } .service-card-v2:nth-child(2):hover { transform: translateY(-8px); } .service-card-v2 { min-height: auto; } } /* ======================================== HAND ACCENT ILLUSTRATIONS Sleeved hands that reach in from off-page ======================================== */ .hand-accent { position: absolute; pointer-events: none; user-select: none; z-index: 10; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.25)); transform-origin: center center; } /* Sparkle / badge elements "carried" by a hand */ .hand-carry { position: absolute; pointer-events: none; user-select: none; z-index: 11; font-weight: 900; line-height: 1; color: var(--primary-purple, #7a4dfc); text-shadow: 0 3px 0 rgba(10, 10, 10, 0.85), 0 10px 20px rgba(122, 77, 252, 0.35); transform-origin: center center; } /* Hero stat card — pointing-down hand with cuff drops in from the top of the card */ .hand-stat { top: -60px; right: -15px; width: 115px; animation: handStatBob 4.5s ease-in-out infinite; } /* Process section — reaching hand, sleeve extends off the left edge of the viewport */ .hand-process { left: -30px; top: 30px; width: 240px; animation: handProcessBob 5s ease-in-out infinite; } .hand-carry-process { left: 190px; top: 70px; font-size: 72px; animation: sparkleSpin 6s linear infinite; } /* Services section — pointing-down hand highlights the elevated middle card */ .hand-services { top: 40px; left: calc(50% + 70px); width: 110px; animation: handServicesBob 4.5s ease-in-out infinite; } .hand-carry-services { top: 170px; left: calc(50% + 40px); font-size: 42px; color: var(--accent-coral, #ff7a59); animation: sparkleSpin 5s linear infinite reverse; } /* Testimonials — thumbs-up, sleeve extends off the right edge of the viewport */ .hand-testimonials { top: 40px; right: -40px; width: 240px; opacity: 1; animation: handTestiBob 4.8s ease-in-out infinite; } /* Footer CTA — pointing-down hand tucked in bottom-right, finger angled toward the CTA button */ .hand-cta { bottom: -15px; right: 20px; left: auto; width: 95px; animation: handCtaNudge 3.2s ease-in-out infinite; } /* Keyframes — gentle float / rotate motions */ @keyframes handStatBob { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-6px) rotate(-4deg); } } @keyframes handProcessBob { 0%, 100% { transform: translateY(0) scaleX(-1) rotate(-8deg); } 50% { transform: translateY(-8px) scaleX(-1) rotate(-12deg); } } @keyframes handServicesBob { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-6px) rotate(-4deg); } } @keyframes handTestiBob { 0%, 100% { transform: translateY(0) rotate(-15deg); } 50% { transform: translateY(-7px) rotate(-18deg); } } @keyframes handCtaNudge { 0%, 100% { transform: translate(0, 0) rotate(55deg); } 50% { transform: translate(-4px, 4px) rotate(62deg); } } @keyframes sparkleSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.18); } 100% { transform: rotate(360deg) scale(1); } } /* Section edge-clip handling: ensure the containing sections don't clip the sleeves */ #testimonials { overflow: hidden; position: relative; } #services { position: relative; } /* Respect reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .hand-accent, .hand-carry { animation: none !important; } } @media (max-width: 768px) { /* Big sleeved hands that don't fit the mobile flow — keep these hidden */ .hand-process, .hand-carry-process, .hand-carry-services { display: none; } /* Stat hand — points down into the 100+ card from above */ .hand-stat { width: 70px; top: -32px; right: -8px; } /* Services hand — smaller, tucked in top-right of section */ .hand-services { width: 70px; top: 20px; left: auto; right: -10px; } /* Testimonials thumbs-up — smaller, peeks in from top-right */ .hand-testimonials { width: 90px; top: -10px; right: -20px; } /* CTA hand — sits in the bottom-right of the dark CTA section */ .hand-cta { width: 70px; bottom: 60px; right: calc(50% - 140px); } } /* ============================================ Selected Visuals — Editorial Carousel ============================================ */ .vc-section-header { text-align: center; margin-bottom: 3.5rem; max-width: 640px; margin-left: auto; margin-right: auto; } .vc-section-eyebrow { margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; padding: 6px 16px; } .vc-section-title { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; } .vc-section-title-pill { padding: 0.08em 0.3em; margin: 0 -0.3em; border-radius: 10px; } .vc-section-sub { color: rgba(255,255,255,0.65); font-size: 1rem; max-width: 480px; margin: 0 auto; } .visuals-carousel { position: relative; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 2.5rem; align-items: stretch; } .vc-main { position: relative; display: flex; align-items: center; } .vc-stage { position: relative; width: 100%; border-radius: 24px; overflow: hidden; background: #111; border: 1px solid rgba(255,255,255,0.08); aspect-ratio: 16/10; cursor: zoom-in; outline: none; box-shadow: 0 40px 80px -40px rgba(124, 58, 237, 0.35), 0 20px 40px -20px rgba(0,0,0,0.6); } .vc-stage:focus-visible { box-shadow: 0 0 0 3px var(--primary-purple), 0 40px 80px -40px rgba(124, 58, 237, 0.35); } .vc-track { position: relative; width: 100%; height: 100%; } .vc-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.02); transition: opacity 0.6s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); pointer-events: none; } .vc-slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; } .vc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .vc-expand-hint { position: absolute; bottom: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .vc-stage:hover .vc-expand-hint, .vc-stage:focus-visible .vc-expand-hint { opacity: 1; transform: translateY(0); } /* Arrow overlays on image sides */ .vc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(20,20,28,0.8); backdrop-filter: blur(6px); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .vc-arrow:hover { background: var(--primary-purple); border-color: var(--primary-purple); transform: translateY(-50%) scale(1.08); } .vc-arrow--prev { left: -22px; } .vc-arrow--next { right: -22px; } /* Editorial side panel */ .vc-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem 1.75rem 1.75rem; border-radius: 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; min-height: 320px; } .vc-panel::before { content: ""; position: absolute; top: -40%; right: -30%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(124, 58, 237, 0.28), transparent 70%); pointer-events: none; } .vc-flourish { position: absolute; top: 1.25rem; right: 1.5rem; display: inline-block; color: var(--primary-purple); font-size: 1.4rem; transform-origin: center; animation: vcSpin 18s linear infinite; } @keyframes vcSpin { to { transform: rotate(360deg); } } .vc-counter { font-family: var(--font-heading); font-weight: 300; font-size: 2.75rem; line-height: 1; color: rgba(255,255,255,0.85); letter-spacing: 0.02em; display: flex; align-items: baseline; gap: 0.25rem; } .vc-counter-current { color: #fff; font-weight: 500; } .vc-counter-sep, .vc-counter-total { color: rgba(255,255,255,0.4); font-size: 1.75rem; } .vc-panel-body { margin-top: 1.75rem; transition: opacity 0.25s ease, transform 0.25s ease; } .vc-panel-body.is-swapping { opacity: 0; transform: translateY(8px); } .vc-badge { display: inline-block; font-size: 0.68rem; padding: 4px 12px; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.08em; } .vc-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 1.85rem); line-height: 1.15; margin: 0 0 0.85rem; color: #fff; } .vc-desc { font-size: 0.98rem; line-height: 1.55; color: rgba(255,255,255,0.65); margin: 0; } .vc-expand-link { margin-top: 1.75rem; background: none; border: none; padding: 0; color: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 0.6rem; align-self: flex-start; position: relative; transition: color 0.2s ease, gap 0.2s ease; } .vc-expand-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1.5px; background: var(--primary-purple); transform: scaleX(0.4); transform-origin: left; transition: transform 0.3s ease; } .vc-expand-link:hover { gap: 0.85rem; color: var(--primary-purple); } .vc-expand-link:hover::after { transform: scaleX(1); } /* Thumbnail strip */ .vc-thumbs { display: flex; justify-content: center; gap: 0.9rem; margin-top: 2.5rem; flex-wrap: wrap; max-width: 1100px; margin-left: auto; margin-right: auto; } .vc-thumb { position: relative; width: 116px; aspect-ratio: 16/10; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: #1a1a24; opacity: 0.55; transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .vc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .vc-thumb:hover { opacity: 1; transform: translateY(-3px); } .vc-thumb.is-active { opacity: 1; border-color: var(--primary-purple); transform: translateY(-3px); box-shadow: 0 10px 24px -10px rgba(124, 58, 237, 0.6); } @media (max-width: 900px) { .visuals-carousel { grid-template-columns: 1fr; gap: 1.5rem; } .vc-panel { min-height: auto; padding: 1.5rem 1.5rem 1.25rem; } .vc-panel-body { margin-top: 1.25rem; } .vc-counter { font-size: 2rem; } .vc-counter-sep, .vc-counter-total { font-size: 1.25rem; } } @media (max-width: 640px) { .vc-arrow { width: 40px; height: 40px; } .vc-arrow--prev { left: 8px; } .vc-arrow--next { right: 8px; } .vc-thumb { width: 80px; } } /* Lightbox */ .vc-lightbox { position: fixed; inset: 0; background: rgba(8, 8, 12, 0.92); backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 4rem 2rem; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .vc-lightbox.is-open { opacity: 1; visibility: visible; } .vc-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); transform: scale(0.96); transition: transform 0.3s ease; } .vc-lightbox.is-open .vc-lb-img { transform: scale(1); } .vc-lb-close, .vc-lb-nav { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .vc-lb-close:hover, .vc-lb-nav:hover { background: var(--primary-purple); transform: scale(1.05); } .vc-lb-close { top: 1.5rem; right: 1.5rem; } .vc-lb-nav--prev { left: 1.5rem; top: 50%; transform: translateY(-50%); } .vc-lb-nav--next { right: 1.5rem; top: 50%; transform: translateY(-50%); } .vc-lb-nav--prev:hover { transform: translateY(-50%) scale(1.05); } .vc-lb-nav--next:hover { transform: translateY(-50%) scale(1.05); } @media (max-width: 640px) { .vc-lightbox { padding: 2rem 1rem; } .vc-lb-close { top: 0.75rem; right: 0.75rem; } .vc-lb-nav { width: 40px; height: 40px; } .vc-lb-nav--prev { left: 0.5rem; } .vc-lb-nav--next { right: 0.5rem; } } /* ===================================================================== MOBILE-FIRST OPTIMIZATIONS (≤768px) Designed as a native mobile experience, not a shrunk-down desktop. - Header collapses to logo + CTA - Floating nav becomes a compact tab bar that fits 320px screens - Hero stacks vertically; bento restructured so portrait leads - Process timeline: vertical stepper (replaces horizontal scroll-jack) - Testimonial cards sized to ~80vw with peek of next - All primary CTAs full-width with 44px+ touch targets ===================================================================== */ @media (max-width: 768px) { /* ---------- Top header: logo + CTA + hamburger ---------- */ .top-header { padding: 0.85rem 0; } .top-header.scrolled { padding: 0.7rem 0; } .header-inner { padding: 0 18px; } .header-nav { display: none; } .header-logo { font-size: 1.65rem; } .header-right { gap: 0; align-items: center; } .header-cta { padding: 11px 18px; font-size: 0.85rem; border-radius: 10px; } /* Show hamburger on mobile */ .header-burger { display: flex; } /* Kill the floating bottom pill on mobile — hamburger replaces it */ .floating-nav { display: none !important; } /* ---------- Floating bottom nav: compact tab bar ---------- */ .floating-nav { bottom: 12px; padding: 5px; gap: 0; max-width: calc(100vw - 24px); border-radius: 100px; } .floating-nav a { padding: 10px 13px; font-size: 0.78rem; letter-spacing: -0.01em; } /* ---------- HERO: vertical stack, refocused bento ---------- */ .hero-split { grid-template-columns: 1fr !important; gap: 2.25rem !important; padding: 92px 1.25rem 3rem !important; min-height: auto !important; } .hero-left { gap: 1.4rem !important; align-items: flex-start !important; order: 1; } .hero-right { order: 2; } .hero-eyebrow { font-size: 0.75rem; letter-spacing: 0.06em; } .hero-headline { font-size: clamp(2.2rem, 9vw, 2.85rem) !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; } .hero-headline br { display: none; } .hero-sub { font-size: 1.02rem; margin-bottom: 0.25rem; line-height: 1.55; } .hero-btns { flex-direction: column !important; align-items: stretch !important; gap: 0.7rem !important; width: 100% !important; } .hero-btns .btn { width: 100% !important; justify-content: center !important; padding: 16px 22px !important; font-size: 1rem !important; border-radius: 14px !important; } .hero-social-proof { flex-wrap: wrap; gap: 0.85rem; } .proof-face { width: 32px; height: 32px; } .proof-text { font-size: 0.78rem; line-height: 1.4; } /* Bento — portrait leads, supporting cards below */ .hero-bento { grid-template-columns: 1fr 1fr; grid-template-rows: clamp(280px, 70vw, 360px) 130px 160px; gap: 10px; height: auto; } .bento-tall { grid-column: 1 / -1; grid-row: 1; } .bento-stat { grid-column: 1; grid-row: 2; padding: 1rem; transform: rotate(-1.5deg); } .bento-img-card { grid-column: 2; grid-row: 2; } .bento-wide { grid-column: 1 / -1; grid-row: 3; } .bento-accent { display: none; } .stat-number { font-size: 2.4rem; } .stat-label { font-size: 0.65rem; letter-spacing: 0.06em; } .bento-badge { font-size: 0.72rem; padding: 5px 11px; bottom: 14px; left: 14px; } /* Mobile hand-stat is positioned by the dedicated mobile rule below */ /* Hero grid background — tighter cells on mobile */ .slab--hero { background-size: 36px 36px; } .slab--hero::before { width: 280px; height: 280px; top: -80px; right: -60px; } .slab--hero::after { width: 220px; height: 220px; bottom: 20px; left: -40px; } /* ---------- Marquee: punchy but compact ---------- */ .marquee-section { padding: 2.25rem 0; } .marquee-content { gap: 2.5rem; animation-duration: 26s; } .marquee-item { font-size: 1.45rem; gap: 1rem; } .marquee-icon { font-size: 0.9rem; } /* ========================================================= MOBILE TYPOGRAPHY HIERARCHY & SPACING Goal: clear visual hierarchy on small screens. Pattern (consistent across sections): eyebrow → 0.55rem → heading → 0.55rem → subtitle subtitle → 1.75rem → content Heading sizes capped so they don't crowd the body text. ========================================================= */ /* All section header containers — uniform bottom margin */ .section-header, .section-intro, .vc-section-header, .testi-header, .faq-section-header, .process-header { margin-bottom: 1.75rem !important; max-width: 100% !important; } /* Eyebrow badge → heading: tight gap */ .section-header > .badge-inline, .section-intro > .badge-inline, .process-header > .badge-inline, .vc-section-eyebrow { margin-bottom: 0.55rem !important; font-size: 0.7rem !important; padding: 5px 12px !important; letter-spacing: 0.08em !important; } .about-content > .badge-inline { margin-bottom: 0.55rem !important; font-size: 0.85rem !important; padding: 7px 16px !important; letter-spacing: 0.1em !important; } /* Note:
tags inside headings are kept on mobile — hiding them with display:none collapses adjacent words (e.g. "do
half" → "dohalf"). */ /* Section H2 — punchy but not overwhelming on mobile */ .section-header h2, .section-intro h2, .vc-section-title, .testi-main-heading { font-size: 1.95rem !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; margin-bottom: 0.55rem !important; } .vc-section-title, .testi-main-heading { margin-bottom: 0.5rem !important; } /* Subtitle/description directly under heading: zero its bottom margin so the section-header's margin-bottom is the only gap to content. */ .section-header .hero-sub, .section-intro .hero-sub, .vc-section-sub, .testi-subtitle, .faq-subtitle, .process-header .hero-sub { margin-bottom: 0 !important; font-size: 0.94rem !important; line-height: 1.5 !important; max-width: 100% !important; } /* Process header — uses inline h2 styles, override */ .process-header h2 { font-size: 1.95rem !important; margin-bottom: 0.55rem !important; } /* Faq + Footer use a stacked badge + heading layout */ .faq-heading-wrap, .footer-cta-heading-wrap { margin-bottom: 0.85rem !important; } .faq-freq-badge, .footer-freq-badge { font-size: 1.6rem !important; padding: 5px 18px !important; margin-bottom: 0.25rem !important; } .faq-main-heading { font-size: 1.85rem !important; line-height: 1.1 !important; } .footer-cta-heading { font-size: 2.6rem !important; line-height: 1 !important; } /* About section — heading → paragraphs */ .about-content > .badge-inline { margin-bottom: 0.55rem !important; } .about-content h2 { font-size: 1.95rem !important; line-height: 1.1 !important; margin-bottom: 1rem !important; letter-spacing: -0.02em !important; } .about-content p { font-size: 0.98rem !important; line-height: 1.6 !important; margin-bottom: 0.85rem !important; } .about-content p:last-child { margin-bottom: 0 !important; } /* Card-level heading sizes — keep distinct from section H2 */ .vault-title, .banner-card-title, .service-name-v2, .faq-header h4, .process-step-title, .vc-title { font-family: var(--font-heading); } /* Tighten the gap from section-header to its grid/content */ .banner-grid, .vault-grid, .services-grid-v2, .visuals-carousel, .faq-container, .reviews-wrap { margin-top: 0 !important; } /* Slab vertical rhythm — same on every section */ .slab { padding: 3.5rem 1.25rem 3.25rem !important; } .slab--hero { padding: 0 !important; } /* Banner section's "show more" + final CTA buttons — tighter */ #see-more-banners-container { margin-top: 2rem !important; } section#banners > div[style*="text-align: center"]:last-of-type { margin-top: 2.5rem !important; } section#services > div[style*="text-align: center"]:last-of-type { margin-top: 2.5rem !important; } /* ---------- LinkedIn Banner Showcase ---------- */ .banner-grid { grid-template-columns: 1fr; gap: 1.1rem; max-width: 100%; } .banner-card { border-radius: 18px; } .banner-card-meta { padding: 1rem 1.25rem 1.25rem; } .banner-card-title { font-size: 1.05rem; } #see-more-banners-container { margin-top: 2.5rem !important; } #see-more-banners-btn { padding: 14px 20px; font-size: 0.95rem; } /* ---------- Vault: compact image-led cards ---------- */ .vault-grid { grid-template-columns: 1fr; gap: 1.25rem; max-width: 100%; } .vault-item { padding: 0 !important; gap: 0 !important; border-radius: 20px !important; } .vault-thumb { border-radius: 0 !important; } .vault-thumb img { aspect-ratio: 16 / 10; } .vault-body { padding: 1.5rem !important; } .vault-title { font-size: 1.3rem !important; line-height: 1.2; } .vault-desc { font-size: 0.95rem; margin-bottom: 1rem; } /* ---------- Visuals Carousel: image-first, swipe + arrows ---------- */ .visuals-carousel { grid-template-columns: 1fr; gap: 0.9rem; } /* Show arrows on mobile too — most users don't discover swipe affordance. Positioned INSIDE the stage with translucent dark pill so they don't eat layout space or get cut off at the screen edge. */ .vc-arrow { display: inline-flex; width: 40px; height: 40px; background: rgba(20, 8, 40, 0.55); border-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .vc-arrow--prev { left: 10px; right: auto; } .vc-arrow--next { right: 10px; left: auto; } .vc-stage { aspect-ratio: 4 / 3; border-radius: 18px; } .vc-expand-hint { opacity: 1; transform: none; bottom: 12px; right: 12px; font-size: 0.68rem; padding: 6px 11px; } .vc-panel { min-height: auto; padding: 1.5rem; border-radius: 18px; } .vc-panel-body { margin-top: 1rem; } .vc-counter { font-size: 1.7rem; } .vc-counter-sep, .vc-counter-total { font-size: 1.1rem; } .vc-flourish { display: none; } .vc-title { font-size: 1.25rem; line-height: 1.2; } .vc-desc { font-size: 0.92rem; line-height: 1.5; } .vc-expand-link { margin-top: 1.25rem; font-size: 0.78rem; } /* Thumbs: horizontal swipe rail */ .vc-thumbs { gap: 0.55rem; margin-top: 1.25rem; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 4px 1.25rem 4px; margin-left: -1.25rem; margin-right: -1.25rem; scrollbar-width: none; scroll-snap-type: x mandatory; } .vc-thumbs::-webkit-scrollbar { display: none; } .vc-thumb { width: 86px; flex-shrink: 0; scroll-snap-align: center; } /* ---------- Services: tight, single column ---------- */ .services-grid-v2 { grid-template-columns: 1fr; gap: 1rem; max-width: 100%; } .service-card-v2 { padding: 1.75rem 1.5rem 1.5rem; min-height: auto; border-radius: 24px; } .service-card-v2:nth-child(2) { transform: none; } .service-card-v2:nth-child(2):hover { transform: translateY(-4px); } .service-card-num { font-size: 1.85rem; top: 1.1rem; right: 1.25rem; } .service-icon-circle { width: 50px; height: 50px; margin-bottom: 1rem; } .service-icon-v2 { font-size: 1.85rem; } .service-name-v2 { font-size: 1.25rem; } .service-description-v2 { font-size: 0.95rem; margin-bottom: 1rem; line-height: 1.55; } .service-bullets { margin-bottom: 1.25rem; gap: 0.4rem; } .service-bullets li { font-size: 0.85rem; } .service-card-cta { font-size: 0.9rem; } /* ---------- About: integrated profile + centered intro ---------- */ .about-grid { grid-template-columns: 1fr; gap: 1.5rem; max-width: 100%; text-align: center; } /* Photo becomes an editorial rounded portrait with overlaid name/title */ .about-grid > aside { width: 100%; } .profile-card { position: relative !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; max-width: 320px !important; width: 70vw !important; margin: 0 auto !important; } .profile-card:hover { transform: none !important; } .profile-img-inner { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 5 !important; border-radius: 24px !important; margin: 0 !important; border: 4px solid #fff; box-shadow: 0 18px 40px rgba(26, 10, 46, 0.14); overflow: hidden; } .profile-img-inner img { border-radius: 0; } /* Overlay name + title on the bottom of the photo */ .profile-img-inner::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(15, 8, 30, 0.78) 10%, rgba(15, 8, 30, 0.35) 55%, transparent); pointer-events: none; } .profile-meta { position: absolute !important; left: 0; right: 0; bottom: 0; padding: 0 1.1rem 1rem !important; text-align: left !important; z-index: 2; } .profile-meta h3 { font-size: 1.15rem !important; font-family: var(--font-heading); color: #fff !important; margin: 0 0 0.1rem !important; text-shadow: 0 2px 12px rgba(0,0,0,0.3); } .profile-meta p { font-size: 0.78rem !important; color: rgba(255,255,255,0.85) !important; opacity: 1 !important; margin: 0 !important; letter-spacing: 0.02em; } /* Content: centered headline, left-aligned body for readability */ .about-content { text-align: center !important; } .about-content > .badge-inline { margin: 0 auto 0.55rem !important; display: inline-block !important; } .about-content h2 { font-size: 1.95rem !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; margin-bottom: 1.25rem !important; text-align: center !important; } .about-content p { font-size: 0.98rem !important; line-height: 1.65 !important; margin-bottom: 0.85rem !important; text-align: left !important; } .about-content p:last-child { margin-bottom: 0 !important; } /* ---------- Process Timeline: VERTICAL stepper ---------- */ .process-wrapper { height: auto !important; } .process-stage { position: relative !important; top: auto !important; height: auto !important; padding: 0 !important; overflow: visible !important; } .process-scroll { width: 100% !important; margin-left: 0 !important; overflow: visible !important; display: block !important; } .process-scroll-track { flex-direction: column; gap: 0.85rem; padding: 1.5rem 0; align-items: stretch; position: relative; isolation: isolate; } /* Dashed vertical connector — visible only in gaps between cards */ .process-scroll-track::before { content: ''; position: absolute; left: 31px; top: 1.5rem; bottom: 1.5rem; width: 2px; background-image: linear-gradient(to bottom, rgba(139, 92, 246, 0.5) 50%, transparent 50%); background-size: 2px 8px; background-repeat: repeat-y; z-index: 0; } .process-rope { display: none; } .process-step-card { width: 100% !important; min-height: auto !important; padding: 1.15rem 1.25rem 1.15rem 4.25rem !important; border-radius: 18px !important; transform: none !important; overflow: hidden !important; } .process-step-card--first { isolation: isolate; } .process-step-icon { position: absolute !important; left: 11px !important; top: 50% !important; transform: translateY(-50%) !important; width: 42px !important; height: 42px !important; margin: 0 !important; z-index: 2 !important; box-shadow: 0 0 0 4px var(--bg-cream); } /* Light-section variant gets cream halo so it punches over the dashed line */ .slab--light .process-step-icon { box-shadow: 0 0 0 4px #fff; } .process-step-watermark { bottom: -8px; right: 8px; font-size: 3rem; } .process-step-label { font-size: 0.62rem; margin-bottom: 0.25rem; } .process-step-title { font-size: 1.05rem; margin-bottom: 0.2rem; line-height: 1.25; } .process-step-desc { font-size: 0.85rem; line-height: 1.45; } .process-hand { display: none !important; } .process-progress { display: none !important; } /* ---------- Testimonials: phone-fit cards ---------- */ #testimonials.slab { padding-top: 4rem !important; padding-bottom: 4.5rem !important; } .testi-main-heading { font-size: clamp(2rem, 8.5vw, 2.6rem); line-height: 1.15; } .testi-subtitle { font-size: 0.95rem; } .testi-cta-btn { padding: 12px 24px; font-size: 0.88rem; } /* ---------- FAQ: tighter, no h4 wrap awkwardness ---------- */ .faq-heading-wrap { margin-bottom: 1.25rem; } .faq-freq-badge { font-size: clamp(1.7rem, 6.5vw, 2.2rem); padding: 6px 22px; } .faq-main-heading { font-size: clamp(1.9rem, 7vw, 2.4rem); } .faq-subtitle { font-size: 0.95rem; } .faq-container { gap: 0.75rem; } .faq-item { border-radius: 16px; border-width: 1.5px; } .faq-header { padding: 1.15rem 1.15rem; gap: 0.85rem; } .faq-num { width: 34px; height: 34px; font-size: 0.7rem; } .faq-header h4 { font-size: 1rem; line-height: 1.3; } .faq-icon { width: 30px; height: 30px; } .faq-icon svg { width: 13px; height: 13px; } .faq-content { padding: 0 1.15rem; } .faq-item.active .faq-content { padding-bottom: 1.15rem; } .faq-content p { font-size: 0.92rem; line-height: 1.6; } /* ---------- Footer CTA: full-width button, stacked nav ---------- */ .footer-cta-inner { gap: 3rem; } .footer-cta-heading-wrap { margin-bottom: 1.25rem; } .footer-freq-badge { font-size: clamp(1.7rem, 6.5vw, 2.2rem); padding: 6px 22px; } .footer-cta-heading { font-size: clamp(2.5rem, 11vw, 3.75rem); } .footer-cta-sub { font-size: 0.98rem; margin-bottom: 1.75rem; line-height: 1.6; } .footer-cta-btn { padding: 16px 28px; font-size: 0.95rem; width: 100%; max-width: 320px; justify-content: center; border-radius: 16px; } .footer-bottom-row { flex-direction: column; text-align: center; gap: 1.25rem; padding-top: 2rem; } .footer-nav-links { gap: 1.1rem; font-size: 0.78rem; } .footer-nav-links a { font-size: 0.78rem; } .footer-copy { font-size: 0.72rem; } /* Hand-cta repositioned so it doesn't fight the full-width button */ .hand-cta { bottom: auto !important; top: -25px !important; right: 8px !important; left: auto !important; width: 75px !important; } /* ---------- Add safe-area room for floating nav at bottom ---------- */ section#contact.slab { padding-bottom: 6.5rem !important; } } /* ============================================ Very small phones (≤380px) — extra tightening ============================================ */ @media (max-width: 380px) { .header-logo { font-size: 1.5rem; } .header-cta { padding: 9px 14px; font-size: 0.78rem; } .floating-nav a { padding: 9px 10px; font-size: 0.72rem; } .hero-headline { font-size: clamp(1.95rem, 9vw, 2.4rem) !important; } .hero-bento { grid-template-rows: clamp(260px, 72vw, 320px) 120px 140px; } .stat-number { font-size: 2rem; } .marquee-item { font-size: 1.25rem; } }