/* ═══════════════════════════════════════════════════════════════ HOW WE WORK — Premium Black/Gold Process Timeline File: style/how-we-work.css Add to ════════════════════════════════════════════════════════════════ */ /* ── Section scaffold ─────────────────────────────────────── */ .hww-section { position: relative; overflow: hidden; padding: 100px 24px 80px; background: linear-gradient(180deg, #080808 0%, #0a0a08 50%, #080808 100%); } /* ── Ambient background particles ─────────────────────────── */ .hww-bg-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hww-particle { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%); } .hww-particle--1 { width: 500px; height: 500px; top: -100px; left: -150px; animation: hwwPulse 8s ease-in-out infinite; } .hww-particle--2 { width: 400px; height: 400px; bottom: -80px; right: -100px; animation: hwwPulse 10s ease-in-out infinite 2s; } .hww-particle--3 { width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: hwwPulse 12s ease-in-out infinite 4s; } @keyframes hwwPulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.15); } } .hww-particle--3 { animation-name: hwwPulseCenter; } @keyframes hwwPulseCenter { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); } } /* ── Header ───────────────────────────────────────────────── */ .hww-header { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto 72px; } .hww-label { letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 700; color: var(--blue); text-transform: uppercase; margin-bottom: 20px; } .hww-title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.2; color: var(--text); margin: 0 0 20px; letter-spacing: -0.02em; } .hww-subtitle { font-size: 1rem; line-height: 1.75; color: var(--text-muted); max-width: 580px; margin: 0 auto; } /* ── Cards wrapper — 7-col grid: card | arrow | card | arrow | card | arrow | card ── */ .hww-cards-wrapper { position: relative; z-index: 1; display: grid; /* Cards take equal space; arrow columns are fixed narrow slots */ grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; /* No column gap — the 40px arrow slots ARE the gap */ gap: 0; max-width: 1200px; margin: 0 auto; /* stretch: every cell fills the row height so arrow can pin by padding */ align-items: stretch; } /* ── Arrow connector column ───────────────────────────────── */ /* * The wrapper uses align-items:stretch so every arrow column is * exactly as tall as the cards. align-items:center on the arrow * flex-container places the circle at the true vertical midpoint * of the card row — no magic px offset needed, works at any height. */ .hww-arrow { display: flex; align-items: center; /* true vertical centre of the card row */ justify-content: center; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; overflow: visible; } .hww-arrow.hww-arrow-visible { opacity: 1; } /* ── Circular flow indicator ─────────────────────────────── */ .hww-arrow-btn { position: relative; width: 28px; height: 28px; border-radius: 50%; /* Softer border — premium, not heavy */ border: 1px solid rgba(212,175,55,0.28); background: rgba(8,8,5,0.95); display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* Subtle ambient glow — not a button, just a flow indicator */ box-shadow: 0 0 0 2px rgba(212,175,55,0.05), 0 0 8px rgba(212,175,55,0.12); animation: hwwArrowGlow 4s ease-in-out infinite; } @keyframes hwwArrowGlow { 0%, 100% { box-shadow: 0 0 0 2px rgba(212,175,55,0.05), 0 0 8px rgba(212,175,55,0.12); } 50% { box-shadow: 0 0 0 3px rgba(212,175,55,0.10), 0 0 14px rgba(212,175,55,0.22); } } /* ── Active / shine state — JS adds .hww-arrow-active to .hww-arrow ── */ .hww-arrow-active .hww-arrow-btn { border-color: rgba(212,175,55,0.75); box-shadow: 0 0 0 3px rgba(212,175,55,0.14), 0 0 18px rgba(212,175,55,0.45), 0 0 32px rgba(212,175,55,0.22); /* Pause the idle glow so active state has full control */ animation-play-state: paused; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .hww-arrow-active .hww-arrow-btn svg { opacity: 1; filter: drop-shadow(0 0 6px rgba(212,175,55,0.75)); transition: opacity 0.15s ease, filter 0.15s ease; } /* Short line stubs — fade in from card edge to circle edge */ .hww-arrow-btn::before, .hww-arrow-btn::after { content: ''; position: absolute; top: 50%; height: 1px; transform: translateY(-50%); /* Width exactly bridges the gap between circle edge and card border. Arrow column = 40px, circle = 28px → each stub = (40px - 28px) / 2 = 6px We overshoot by 2px so they visually touch the card border */ width: 8px; } .hww-arrow-btn::before { right: calc(100% + 0px); background: linear-gradient(to right, rgba(212,175,55,0.04), rgba(212,175,55,0.25)); } .hww-arrow-btn::after { left: calc(100% + 0px); background: linear-gradient(to right, rgba(212,175,55,0.25), rgba(212,175,55,0.04)); } /* Chevron inside the circle */ .hww-arrow-btn svg { display: block; flex-shrink: 0; opacity: 0.8; } /* ── Individual cards ─────────────────────────────────────── */ .hww-card { position: relative; background: linear-gradient(145deg, rgba(20,17,10,0.95) 0%, rgba(15,12,8,0.98) 100%); border: 1px solid rgba(212,175,55,0.15); border-radius: 20px; padding: 32px 24px 28px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.35s ease; box-shadow: 0 1px 0 rgba(212,175,55,0.08) inset, 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; /* Scroll-reveal starting state */ opacity: 0; transform: translateY(40px); } /* Inner glow on top edge */ .hww-card::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent); border-radius: 0; } /* Corner accent */ .hww-card::after { content: ''; position: absolute; inset: 0; border-radius: 20px; background: radial-gradient(ellipse at 50% -20%, rgba(212,175,55,0.05) 0%, transparent 60%); pointer-events: none; transition: opacity 0.35s ease; opacity: 0; } /* Revealed state (JS adds this) */ .hww-card.hww-revealed { opacity: 1; transform: translateY(0); } /* Hover state */ .hww-card:hover { transform: translateY(-8px) scale(1.01); border-color: rgba(212,175,55,0.45); box-shadow: 0 1px 0 rgba(212,175,55,0.15) inset, 0 0 30px rgba(212,175,55,0.12), 0 30px 80px rgba(0,0,0,0.6); } .hww-card:hover::after { opacity: 1; } .hww-card:hover .hww-step-num { color: #D4AF37; opacity: 1; } .hww-card:hover .hww-icon { color: #D4AF37; filter: drop-shadow(0 0 8px rgba(212,175,55,0.5)); } /* ── Step number ──────────────────────────────────────────── */ .hww-step-num { font-size: 3rem; font-weight: 900; line-height: 1; color: rgba(212,175,55,0.35); letter-spacing: -0.04em; margin-bottom: 16px; transition: color 0.3s ease, opacity 0.3s ease; font-family: var(--font); } /* ── Icon ─────────────────────────────────────────────────── */ .hww-icon-wrap { margin-bottom: 20px; height: 44px; display: flex; align-items: center; } .hww-icon { width: 44px; height: 44px; color: rgba(212,175,55,0.65); transition: color 0.3s ease, filter 0.3s ease; } /* ── Card divider ─────────────────────────────────────────── */ .hww-card-divider { width: 32px; height: 1px; background: linear-gradient(90deg, rgba(212,175,55,0.5), transparent); margin-bottom: 16px; } /* ── Card title ───────────────────────────────────────────── */ .hww-card-title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--text); margin: 0 0 12px; letter-spacing: -0.01em; } /* ── Card description ─────────────────────────────────────── */ .hww-card-desc { font-size: 0.875rem; line-height: 1.7; color: var(--text-muted); margin: 0; } /* ── Mobile vertical dot (used for timeline line connector) ── */ .hww-mobile-dot { display: none; } /* ── CTA buttons ──────────────────────────────────────────── */ .hww-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 56px; position: relative; z-index: 1; } .hww-btn { display: inline-flex; align-items: center; gap: 8px; } .hww-btn svg { opacity: 0.7; } /* ══════════════════════════════════════════════════════════ TABLET — clean 2×2 grid, arrows fully removed ══════════════════════════════════════════════════════════ */ @media (max-width: 1024px) and (min-width: 601px) { .hww-section { padding: 80px 20px 64px; } .hww-header { margin-bottom: 52px; } /* Collapse 7-col grid to plain 2-col — no phantom slots */ .hww-cards-wrapper { grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; } /* Completely remove arrows from flow so they don't become ghost grid cells that create blank columns or rows */ .hww-arrow { display: none; } } /* ══════════════════════════════════════════════════════════ MOBILE — vertical timeline, no overflow ══════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .hww-section { padding: 64px 16px 56px; overflow-x: hidden; } .hww-header { margin-bottom: 40px; } .hww-title { font-size: clamp(1.5rem, 6vw, 2rem); } .hww-subtitle{ font-size: 0.9rem; } /* Arrows completely out of flow — no ghost gaps */ .hww-arrow { display: none; } /* Single-column timeline layout */ .hww-cards-wrapper { grid-template-columns: 1fr; gap: 0; max-width: 440px; width: 100%; margin: 0 auto; /* Left gold timeline line (LTR) */ padding-left: 28px; border-left: 2px solid rgba(212,175,55,0.2); /* No border-right — will be set in RTL block */ border-right: none; position: relative; box-sizing: border-box; align-items: start; } .hww-card { padding: 22px 18px 20px; margin-bottom: 14px; border-radius: 14px; /* Reset desktop transform baseline for mobile */ transform: translateY(28px); opacity: 0; border-left: 1px solid rgba(212,175,55,0.15); /* Prevent card from widening beyond its column */ min-width: 0; width: 100%; box-sizing: border-box; } .hww-card.hww-revealed { opacity: 1; transform: translateY(0); } .hww-card:hover { transform: translateY(-4px) scale(1.005); } .hww-mobile-dot { display: block; position: absolute; /* Sits on the border-left timeline line */ left: -6px; /* (dot width 10px / 2) + (border 2px / 2) = 6px from inner edge */ top: 34px; width: 10px; height: 10px; border-radius: 50%; background: #D4AF37; box-shadow: 0 0 8px 2px rgba(212,175,55,0.38); z-index: 2; } .hww-step-num { font-size: 2rem; margin-bottom: 10px; } .hww-icon-wrap { height: 34px; margin-bottom: 14px; } .hww-icon { width: 34px; height: 34px; } .hww-cta { margin-top: 36px; flex-direction: column; align-items: center; } .hww-cta .hww-btn { width: 100%; max-width: 280px; justify-content: center; } } /* ══════════════════════════════════════════════════════════ RTL SUPPORT — Hebrew & Arabic ══════════════════════════════════════════════════════════ */ /* Card-internal divider flips */ [dir="rtl"] .hww-card-divider { background: linear-gradient(270deg, rgba(212,175,55,0.5), transparent); } /* Desktop: flip chevron so it points ← (right-to-left flow) */ [dir="rtl"] .hww-arrow-btn svg { transform: scaleX(-1); } /* Flip the stub gradient directions */ [dir="rtl"] .hww-arrow-btn::before { background: linear-gradient(to left, rgba(212,175,55,0.04), rgba(212,175,55,0.25)); } [dir="rtl"] .hww-arrow-btn::after { background: linear-gradient(to left, rgba(212,175,55,0.25), rgba(212,175,55,0.04)); } /* Mobile RTL: timeline line moves to the right side */ @media (max-width: 600px) { [dir="rtl"] .hww-cards-wrapper { padding-left: 0; padding-right: 28px; border-left: none; border-right: 2px solid rgba(212,175,55,0.2); } [dir="rtl"] .hww-card { border-left: none; border-right: 1px solid rgba(212,175,55,0.15); } [dir="rtl"] .hww-mobile-dot { left: auto; right: -6px; } } /* ══════════════════════════════════════════════════════════ SCROLL REVEAL — stagger animation (The JS IntersectionObserver in how-we-work-init.js adds .hww-revealed to each card in sequence) ══════════════════════════════════════════════════════════ */ /* Stagger transitions per card */ .hww-card--1 { transition-delay: 0s; transition-duration: 0.7s; } .hww-card--2 { transition-delay: 0.15s; transition-duration: 0.7s; } .hww-card--3 { transition-delay: 0.30s; transition-duration: 0.7s; } .hww-card--4 { transition-delay: 0.45s; transition-duration: 0.7s; } /* Reuse existing .reveal / .reveal-item from site CSS for header */ /* Cards use .hww-revealed instead to avoid conflict */