/* ═══════════════════════════════════════════════════════════ ARROW POINT MANAGEMENT SERVICES — style.css v5 Self-contained · All gradients + grain + transitions ═══════════════════════════════════════════════════════════ */ /* ── GOOGLE FONTS fallback already in ── */ :root { --cream: #FAF8F4; --white: #FFFFFF; --stone: #F0EDE6; --border: #E2DDD4; --ink: #1A1814; --ink2: #3D3A34; --muted: #7A766D; --accent: #1B6B45; --accent2: #D4622A; --accent-light: #E3F2EB; --accent2-light:#FAEEE7; --r: 14px; /* grain data-URI — actual PNG noise, works in all browsers */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.08'/%3E%3C/svg%3E"); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* CRITICAL: overflow-x must be on , NOT . overflow-x:hidden on body creates a scroll container which clips position:fixed elements past the first viewport — the classic bug that makes cursors/navbars vanish when scrolling. */ html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; } body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--cream); color: var(--ink); line-height: 1.6; overflow-x: visible; /* html handles horizontal overflow */ cursor: none; /* PAGE ENTER STATE — starts here, JS removes this instantly */ opacity: 0; transform: translateY(20px); transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1); } /* JS adds .loaded to body → page fades + slides in */ body.loaded { opacity: 1; transform: translateY(0); } /* JS adds .leaving to body before navigation → page fades out */ body.leaving { opacity: 0; transform: translateY(-12px); transition: opacity 0.3s ease-in, transform 0.3s ease-in; } /* ── CUSTOM CURSOR ──────────────────────────────────────────── */ /* Elements are moved to by JS (documentElement.appendChild) so they are NEVER inside any scroll container or clipped element. position:fixed is relative to the viewport — works on every page section at any scroll depth. NO transition on left/top — JS writes those every RAF frame. */ /* Custom cursor — dark green neon matching ArrowPoint logo */ #ap-cursor-dot { position: fixed; width: 10px; height: 10px; background: #14BB7A; border-radius: 50%; pointer-events: none; z-index: 2147483647; transform: translate(-50%, -50%); transition: width .18s ease, height .18s ease, background .18s ease, opacity .18s ease, box-shadow .18s ease; opacity: 0; will-change: transform, opacity; box-shadow: 0 0 5px 2px rgba(20, 187, 122, 1), 0 0 12px 4px rgba(11, 107, 69, 0.85), 0 0 24px 8px rgba(11, 61, 46, 0.6), 0 0 40px 12px rgba(11, 61, 46, 0.3); } #ap-cursor-dot.ap-hov { width: 7px; height: 7px; background: #1BFF5E; box-shadow: 0 0 7px 3px rgba(27, 255, 94, 1), 0 0 18px 6px rgba(20, 187, 122, 0.8), 0 0 36px 10px rgba(11, 107, 69, 0.5), 0 0 60px 18px rgba(11, 61, 46, 0.25); } #ap-cursor-ring { position: fixed; width: 38px; height: 38px; border: 1.5px solid rgba(20, 187, 122, 0.6); border-radius: 50%; pointer-events: none; z-index: 2147483646; transform: translate(-50%, -50%); transition: width .3s cubic-bezier(.22,1,.36,1), height .3s cubic-bezier(.22,1,.36,1), border-color .22s ease, opacity .18s ease, box-shadow .22s ease; opacity: 0; will-change: transform, opacity; box-shadow: 0 0 8px 1px rgba(20, 187, 122, 0.4), 0 0 20px 4px rgba(11, 107, 69, 0.2), inset 0 0 8px 1px rgba(20, 187, 122, 0.07); } #ap-cursor-ring.ap-hov { width: 54px; height: 54px; border-color: rgba(27, 255, 94, 0.75); background: rgba(11, 107, 69, 0.05); box-shadow: 0 0 14px 3px rgba(27, 255, 94, 0.55), 0 0 32px 8px rgba(20, 187, 122, 0.3), 0 0 60px 16px rgba(11, 107, 69, 0.15), inset 0 0 12px 2px rgba(27, 255, 94, 0.07); } /* Legacy elements — hidden */ .cursor, .cursor-ring, .cursor-trail-dot { display: none !important; } /* ── SCROLL REVEAL ──────────────────────────── */ .reveal { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .reveal-left { opacity:0; transform:translateX(-28px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .reveal-right { opacity:0; transform:translateX(28px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .reveal-scale { opacity:0; transform:scale(.93); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible { opacity:1; transform:none; } /* ── NAV ────────────────────────────────────── */ nav { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 4rem; background: rgba(250,248,244,0.92); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border-bottom: 1px solid rgba(228,224,216,0.8); transition: box-shadow 0.3s; } nav.scrolled { box-shadow: 0 4px 32px rgba(26,24,20,0.09); } .logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; transition:transform .2s; } .logo:hover { transform:translateY(-1px); } .logo-mark { width:36px; height:36px; border-radius:9px; background: linear-gradient(145deg,#27965f,#1b6b45,#0a3320); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(27,107,69,.38); position:relative; overflow:hidden; } .logo-mark::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,transparent 60%); } .logo-mark svg { width:15px; height:15px; fill:#fff; position:relative; z-index:1; } /* Image logo variant */ .logo-mark--img { background: transparent; box-shadow: none; overflow: visible; } .logo-mark--img::after { display: none; } .logo-img { width: 36px; height: 36px; object-fit: contain; display: block; position: relative; z-index: 1; filter: drop-shadow(0 2px 8px rgba(11,107,69,.45)); transition: filter .2s; } .logo:hover .logo-img { filter: drop-shadow(0 3px 14px rgba(27,255,94,.55)) drop-shadow(0 0 6px rgba(20,187,122,.4)); } /* Footer logo image */ .footer-logo .logo-mark--img .logo-img { filter: drop-shadow(0 2px 8px rgba(27,255,94,.3)); } .logo-text { font-family:'Fraunces',serif; font-weight:700; font-size:1.08rem; color:var(--ink); letter-spacing:-.02em; } .logo-text span { color:var(--accent); } .nav-links { display:flex; gap:1.8rem; list-style:none; } .nav-links a { font-size:.84rem; font-weight:500; color:var(--muted); text-decoration:none; transition:color .18s; position:relative; white-space:nowrap; } .nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.22,1,.36,1); } .nav-links a:hover, .nav-links a.active { color:var(--ink); font-weight:600; } .nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); } .nav-actions { display:flex; gap:.65rem; align-items:center; } /* ── NAV BUTTON: Request Talent (amber-coral + grain) ── */ .nav-cta-outline { position:relative; overflow:hidden; padding:.58rem 1.3rem; border:none; border-radius:9px; font-family:'DM Sans',sans-serif; font-size:.81rem; font-weight:700; color:#fff; text-decoration:none; letter-spacing:.01em; background: linear-gradient(140deg, #e08020 0%, #d4622a 45%, #b03e18 100%); box-shadow: 0 4px 16px rgba(212,98,42,.48), inset 0 1px 0 rgba(255,255,255,.22); transition: transform .2s, box-shadow .2s; } .nav-cta-outline::before { content:''; position:absolute; inset:0; pointer-events:none; background-image: var(--grain); background-size:200px 200px; mix-blend-mode:overlay; opacity:.55; } .nav-cta-outline::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.24) 0%,transparent 55%); } .nav-cta-outline:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(212,98,42,.58); } /* ── NAV BUTTON: Upload CV (forest green + grain) ── */ .nav-cta { position:relative; overflow:hidden; padding:.58rem 1.3rem; border:none; border-radius:9px; font-family:'DM Sans',sans-serif; font-size:.81rem; font-weight:700; color:#fff; text-decoration:none; letter-spacing:.01em; background: linear-gradient(140deg, #27a060 0%, #1b6b45 45%, #0a3320 100%); box-shadow: 0 4px 16px rgba(27,107,69,.48), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .2s, box-shadow .2s; } .nav-cta::before { content:''; position:absolute; inset:0; pointer-events:none; background-image: var(--grain); background-size:200px 200px; mix-blend-mode:overlay; opacity:.5; } .nav-cta::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 55%); } .nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(27,107,69,.58); } /* Hamburger */ .nav-ham { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; cursor:none; } .nav-ham span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:all .3s; } .nav-ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .nav-ham.open span:nth-child(2) { opacity:0; } .nav-ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } .mobile-menu { display: flex; position:fixed; top:60px; left:0; right:0; z-index:199; background:rgba(250,248,244,.97); backdrop-filter:blur(24px); border-bottom:1px solid var(--border); padding:1.4rem 1.8rem; flex-direction:column; gap:.9rem; opacity:0; transform:translateY(-10px); transition: opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1); pointer-events: none; visibility: hidden; } .mobile-menu.open { opacity:1; transform:none; pointer-events: auto; visibility: visible; } .mobile-menu a { font-size:.97rem; font-weight:500; color:var(--ink2); text-decoration:none; padding:.45rem 0; border-bottom:1px solid var(--border); } .mobile-menu a:last-child { border-bottom:none; } /* ── PAGE HERO 3D SCENE ──────────────────────── */ .page-hero-3d { position:relative; width:100%; pointer-events:none; z-index:0; display:flex; align-items:center; justify-content:flex-end; padding-right:1rem; overflow:hidden; opacity:0; animation:ph3dIn 0.9s 0.2s ease forwards; } @keyframes ph3dIn { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} } .page-hero-3d svg { width:100%; max-width:520px; height:auto; filter:drop-shadow(0 8px 28px rgba(27,107,69,0.08)); } /* Dark-themed talent page: slightly brighter SVG */ .page-hero-3d--talent svg { filter:drop-shadow(0 8px 28px rgba(110,231,164,0.12)); } /* On smaller screens, hide the 3D scene to keep text readable */ @media (max-width:900px) { .page-hero-3d { display:none; } .page-hero { grid-template-columns:1fr; } } .page-hero { position:relative; overflow:hidden; padding:5.5rem 4rem 4.5rem; display:grid; grid-template-columns:1fr 1fr; align-items:center; background: radial-gradient(ellipse at 20% 60%, rgba(27,107,69,.13) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(27,107,69,.07) 0%, transparent 50%), linear-gradient(160deg, #f0fdf6 0%, #dff0e8 35%, #cce5d8 60%, #eef7f1 80%, #faf8f4 100%); border-bottom:1px solid rgba(27,107,69,.12); } .page-hero::after { content:''; position:absolute; inset:0; pointer-events:none; background-image: var(--grain); background-size:280px 280px; opacity:.45; mix-blend-mode:multiply; } .page-hero-bg { position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 20% 20%,rgba(187,247,208,.35) 0%,transparent 60%), radial-gradient(ellipse at 80% 80%,rgba(214,228,210,.2) 0%,transparent 60%); pointer-events:none; } .page-hero-dots{ position:absolute; inset:0; z-index:0; background-image:radial-gradient(circle,rgba(27,107,69,.1) 1.5px,transparent 1.5px); background-size:26px 26px; opacity:.6; pointer-events:none; } .page-hero-content { position:relative; z-index:1; max-width:680px; } .page-hero-badge { display:inline-flex; align-items:center; gap:.45rem; padding:.32rem .95rem; background:linear-gradient(135deg,rgba(27,107,69,.14),rgba(27,107,69,.07)); border:1px solid rgba(27,107,69,.28); border-radius:100px; font-size:.7rem; font-weight:700; color:var(--accent); letter-spacing:.05em; margin-bottom:1.4rem; } .page-hero-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(27,107,69,.2); } .page-hero h1 { font-family:'Fraunces',serif; font-size:clamp(2.2rem,4.5vw,3.6rem); font-weight:700; line-height:1.07; letter-spacing:-.035em; color:var(--ink); margin-bottom:1rem; } .page-hero h1 em { font-style:italic; color:var(--accent); } .page-hero p { font-size:1rem; color:var(--muted); line-height:1.75; max-width:520px; } /* ── HERO (index only) ───────────────────────── */ .hero { padding:5rem 4rem; min-height:92vh; display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; position:relative; overflow:hidden; background: radial-gradient(ellipse at 15% 50%, rgba(27,107,69,.12) 0%, transparent 55%), radial-gradient(ellipse at 85% 20%, rgba(27,107,69,.07) 0%, transparent 50%), linear-gradient(155deg,#f0fdf8 0%,#daf0e4 30%,#cce8d9 55%,#e8f6ee 80%,#faf8f4 100%); border-bottom:1px solid var(--border); } .hero::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background-image:var(--grain); background-size:280px 280px; opacity:.35; mix-blend-mode:multiply; } .hero-bg-mesh { position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 20% 20%,rgba(187,247,208,.3) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(253,230,138,.12) 0%,transparent 60%); pointer-events:none; } .hero-bg-dots { position:absolute; inset:0; z-index:0; background-image:radial-gradient(circle,rgba(27,107,69,.1) 1.5px,transparent 1.5px); background-size:28px 28px; opacity:.65; pointer-events:none; } .hero-shape { position:absolute; z-index:0; border-radius:50%; pointer-events:none; filter:blur(55px); } .hero-shape-1 { width:380px; height:380px; background:rgba(27,107,69,.1); top:-70px; right:-70px; animation:floatA 8s ease-in-out infinite; } .hero-shape-2 { width:280px; height:280px; background:rgba(212,98,42,.07); bottom:0; left:32%; animation:floatB 10s ease-in-out infinite; } .hero-shape-3 { width:190px; height:190px; background:rgba(27,107,69,.07); top:42%; left:-55px; animation:floatA 12s ease-in-out infinite reverse; } @keyframes floatA { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-22px) scale(1.05)} } @keyframes floatB { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(18px) scale(.96)} } .hero-content { position:relative; z-index:1; } .hero-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.38rem 1rem; background:linear-gradient(135deg,rgba(27,107,69,.13) 0%,rgba(27,107,69,.06) 100%); border:1px solid rgba(27,107,69,.26); border-radius:100px; font-size:.74rem; font-weight:600; color:var(--accent); letter-spacing:.04em; margin-bottom:1.7rem; animation:badgePulse 3s ease-in-out infinite; } .hero-badge::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(27,107,69,.2); animation:pingDot 2s ease-in-out infinite; } @keyframes badgePulse { 0%,100%{box-shadow:0 2px 12px rgba(27,107,69,.1)} 50%{box-shadow:0 4px 20px rgba(27,107,69,.22)} } @keyframes pingDot { 0%,100%{box-shadow:0 0 0 3px rgba(27,107,69,.2)} 50%{box-shadow:0 0 0 6px rgba(27,107,69,.08)} } h1 { font-family:'Fraunces',serif; font-size:clamp(2.8rem,5vw,4.4rem); font-weight:700; line-height:1.06; letter-spacing:-.035em; color:var(--ink); margin-bottom:1.4rem; } h1 em { font-style:italic; color:var(--accent); } .hero-sub { font-size:1.03rem; font-weight:300; color:var(--muted); line-height:1.75; max-width:455px; margin-bottom:2.4rem; } .hero-btns { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.8rem; } .hero-trust { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; } .trust-item { display:flex; align-items:center; gap:.55rem; font-size:.81rem; color:var(--muted); font-weight:500; } .trust-icon { width:28px; height:28px; background:linear-gradient(135deg,#fff,var(--stone)); border:1px solid var(--border); border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.85rem; box-shadow:0 2px 8px rgba(26,24,20,.06); transition:transform .2s; } .trust-item:hover .trust-icon { transform:scale(1.12) rotate(-5deg); } /* ── HERO VISUAL — rich 3D scene ─────────────── */ .hero-visual { position:relative; z-index:1; perspective:1200px; } .hero-3d-scene { position:relative; width:100%; aspect-ratio:1/1.05; transform-style:preserve-3d; animation:heroFloat 6s ease-in-out infinite; border-radius:24px; overflow:hidden; background:linear-gradient(145deg,#e8f7ef 0%,#d0eede 40%,#b8e3cc 70%,#caeada 100%); box-shadow:0 40px 100px rgba(27,107,69,.16),0 12px 36px rgba(27,107,69,.1),inset 0 0 0 1px rgba(255,255,255,.7); } @keyframes heroFloat { 0%,100%{transform:rotateY(-4deg) rotateX(2deg) translateY(0)} 50%{transform:rotateY(-2deg) rotateX(1deg) translateY(-10px)} } /* Canvas */ .hero-canvas { position:absolute; inset:0; width:100%; height:100%; border-radius:24px; pointer-events:none; z-index:1; } /* Grid overlay */ .hero-grid-overlay { position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(rgba(27,107,69,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(27,107,69,.07) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(ellipse at 50% 50%,black 40%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse at 50% 50%,black 40%,transparent 80%); } /* Central Orb */ .hero-orb { position:absolute; top:50%; left:50%; z-index:10; transform:translate(-50%,-50%); width:120px; height:120px; } .hero-orb-inner { width:100%; height:100%; border-radius:50%; position:relative; background:linear-gradient(145deg,#27a060,#1b6b45,#0a3320); box-shadow:0 0 0 8px rgba(27,107,69,.15),0 0 0 16px rgba(27,107,69,.08),0 20px 60px rgba(27,107,69,.4); display:flex; align-items:center; justify-content:center; animation:orbPulse 4s ease-in-out infinite; } @keyframes orbPulse { 0%,100%{box-shadow:0 0 0 8px rgba(27,107,69,.15),0 0 0 16px rgba(27,107,69,.08),0 20px 60px rgba(27,107,69,.4)} 50%{box-shadow:0 0 0 12px rgba(27,107,69,.2),0 0 0 24px rgba(27,107,69,.1),0 28px 70px rgba(27,107,69,.5)} } .hero-orb-icon svg { width:44px; height:44px; position:relative; z-index:2; filter:drop-shadow(0 4px 12px rgba(0,0,0,.3)); } .hero-orb-icon img { width:52px; height:52px; position:relative; z-index:2; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)) drop-shadow(0 0 16px rgba(27,255,94,.5)); } /* Orb rings */ .orb-ring { position:absolute; border-radius:50%; border:1.5px solid rgba(27,107,69,.3); pointer-events:none; } .orb-ring-1 { inset:-18px; border-style:dashed; animation:spinCW 16s linear infinite; } .orb-ring-2 { inset:-34px; border:1px solid rgba(27,107,69,.18); animation:spinCCW 24s linear infinite; } .orb-ring-3 { inset:-52px; border:1px solid rgba(212,98,42,.15); animation:spinCW 32s linear infinite; } @keyframes spinCW { to{transform:rotate(360deg)} } @keyframes spinCCW { to{transform:rotate(-360deg)} } /* Orbiting tech nodes */ .hero-orbit { position:absolute; top:50%; left:50%; z-index:8; transform-style:preserve-3d; pointer-events:none; } .hero-orbit-1 { animation:orbit1 9s linear infinite; } .hero-orbit-2 { animation:orbit2 13s linear infinite; } .hero-orbit-3 { animation:orbit3 11s linear infinite; } .hero-orbit-4 { animation:orbit4 15s linear infinite; } @keyframes orbit1 { from{transform:rotate(0deg) translateX(155px) rotate(0deg)} to{transform:rotate(360deg) translateX(155px) rotate(-360deg)} } @keyframes orbit2 { from{transform:rotate(90deg) translateX(145px) rotate(-90deg)} to{transform:rotate(450deg) translateX(145px) rotate(-450deg)} } @keyframes orbit3 { from{transform:rotate(200deg) translateX(160px) rotate(-200deg)} to{transform:rotate(560deg) translateX(160px) rotate(-560deg)} } @keyframes orbit4 { from{transform:rotate(310deg) translateX(148px) rotate(-310deg)} to{transform:rotate(670deg) translateX(148px) rotate(-670deg)} } .orbit-node { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:800; letter-spacing:.04em; transform:translate(-50%,-50%); box-shadow:0 4px 18px rgba(0,0,0,.12); transition:transform .3s; } .on-aws { background:linear-gradient(135deg,#d0efe0,#a8d9be); color:#0a3320; border:1.5px solid rgba(27,107,69,.3); } .on-erp { background:linear-gradient(135deg,#fde8d8,#f9c9a4); color:#6b2500; border:1.5px solid rgba(212,98,42,.3); } .on-hr { background:linear-gradient(135deg,#d0efe0,#a8d9be); color:#0a3320; border:1.5px solid rgba(27,107,69,.3); } .on-sec { background:linear-gradient(135deg,#fde8d8,#f9c9a4); color:#6b2500; border:1.5px solid rgba(212,98,42,.3); } /* Stat pills */ .hero-pill { position:absolute; z-index:12; display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.88); backdrop-filter:blur(18px); border:1.5px solid rgba(255,255,255,.85); border-radius:100px; padding:.45rem .9rem .45rem .55rem; box-shadow:0 8px 28px rgba(27,107,69,.12); font-family:'DM Sans',sans-serif; white-space:nowrap; } .hp-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; } .hp-dot-green { background:#1b6b45; box-shadow:0 0 0 3px rgba(27,107,69,.18); animation:dotPing 2.2s ease-in-out infinite; } .hp-dot-orange{ background:#d4622a; box-shadow:0 0 0 3px rgba(212,98,42,.18); animation:dotPing 2.8s ease-in-out infinite; } .hp-dot-blue { background:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.18); animation:dotPing 2.5s ease-in-out infinite; } @keyframes dotPing { 0%,100%{box-shadow:0 0 0 3px rgba(27,107,69,.18)} 50%{box-shadow:0 0 0 6px rgba(27,107,69,.06)} } .hp-num { font-family:'Fraunces',serif; font-size:1rem; font-weight:700; color:var(--ink); letter-spacing:-.03em; line-height:1; } .hp-num span { color:var(--accent); } .hp-label { font-size:.65rem; font-weight:600; color:var(--muted); letter-spacing:.02em; } .hero-pill-1 { top:8%; left:-8%; animation:pillFloat1 5s ease-in-out infinite; } .hero-pill-2 { top:20%; right:-6%; animation:pillFloat2 6s ease-in-out infinite; } .hero-pill-3 { bottom:22%; left:-10%; animation:pillFloat1 7s ease-in-out infinite; } .hero-pill-4 { bottom:8%; right:-4%; animation:pillFloat2 5.5s ease-in-out infinite; } @keyframes pillFloat1 { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(1deg)} } @keyframes pillFloat2 { 0%,100%{transform:translateY(0) rotate(1deg)} 50%{transform:translateY(-10px) rotate(-1deg)} } /* Floating feature cards */ .hero-float-card { position:absolute; z-index:11; display:flex; align-items:center; gap:.65rem; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); border:1.5px solid rgba(255,255,255,.9); border-radius:14px; padding:.7rem 1rem; box-shadow:0 10px 35px rgba(27,107,69,.1),0 2px 8px rgba(0,0,0,.06); min-width:160px; } .hfc-icon { font-size:1.4rem; flex-shrink:0; } .hfc-title { font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:700; color:var(--ink); line-height:1.2; } .hfc-sub { font-size:.66rem; color:var(--muted); font-weight:500; margin-top:.1rem; } .hfc-pulse { width:8px; height:8px; border-radius:50%; background:var(--accent); margin-left:auto; flex-shrink:0; animation:hfcPing 2s ease-in-out infinite; } @keyframes hfcPing { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(0.8)} } .hfc-1 { top:6%; left:6%; animation:cardFloat1 7s ease-in-out infinite; } .hfc-2 { bottom:18%; right:4%; animation:cardFloat2 8s ease-in-out infinite; } .hfc-3 { bottom:4%; left:8%; animation:cardFloat1 6s ease-in-out infinite reverse; } .hfc-4 { top:38%; right:3%; animation:cardFloat2 9s ease-in-out infinite; } @keyframes cardFloat1 { 0%,100%{transform:translateY(0) rotateZ(-.5deg)} 50%{transform:translateY(-7px) rotateZ(.5deg)} } @keyframes cardFloat2 { 0%,100%{transform:translateY(0) rotateZ(.5deg)} 50%{transform:translateY(-9px) rotateZ(-.5deg)} } /* Corner accents */ .hero-corner { position:absolute; z-index:5; pointer-events:none; } .hc-tl { top:16px; left:16px; width:28px; height:28px; border-top:2.5px solid rgba(27,107,69,.4); border-left:2.5px solid rgba(27,107,69,.4); border-radius:4px 0 0 0; } .hc-br { bottom:16px; right:16px; width:28px; height:28px; border-bottom:2.5px solid rgba(27,107,69,.4); border-right:2.5px solid rgba(27,107,69,.4); border-radius:0 0 4px 0; } /* Remove old hero scene styles that are no longer needed */ .hero-card-main, .hero-card-main-inner, .hpf-icon-3d, .hpf-text-3d, .hero-stat-card, .hero-ring { display:none; } /* ── MARQUEE ─────────────────────────────────── */ .marquee { overflow:hidden; position:relative; padding:.85rem 0; background:linear-gradient(90deg,#071e12 0%,#1b6b45 25%,#25a05a 50%,#1b6b45 75%,#071e12 100%); } .marquee::before,.marquee::after { content:''; position:absolute; top:0; bottom:0; width:70px; z-index:2; } .marquee::before { left:0; background:linear-gradient(to right,#071e12,transparent); } .marquee::after { right:0; background:linear-gradient(to left,#071e12,transparent); } .marquee-track { display:flex; gap:2.5rem; white-space:nowrap; animation:mar 28s linear infinite; } .marquee-track:hover { animation-play-state:paused; } .mi { font-size:.73rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:1.5rem; } .mi::after { content:'◆'; font-size:.33rem; color:rgba(255,255,255,.35); } @keyframes mar { from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ── COMMON SECTION ──────────────────────────── */ section { padding:6.5rem 4rem; } .sec-label { display:inline-flex; align-items:center; gap:.55rem; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.9rem; } .sec-label::before { content:''; width:1.3rem; height:2px; background:linear-gradient(90deg,var(--accent),transparent); border-radius:2px; } h2 { font-family:'Fraunces',serif; font-size:clamp(1.9rem,3.5vw,2.95rem); font-weight:700; letter-spacing:-.035em; line-height:1.08; color:var(--ink); margin-bottom:1rem; } h2 em { font-style:italic; color:var(--accent); } .sec-lead { font-size:.98rem; font-weight:300; color:var(--muted); line-height:1.8; max-width:500px; } /* ── STATS RIBBON ────────────────────────────── */ .stats-ribbon { background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:3.5rem 4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; position:relative; overflow:hidden; } .stats-ribbon::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%,rgba(27,107,69,.05),transparent 70%); pointer-events:none; } .stat-item { text-align:center; position:relative; z-index:1; padding:1.4rem; border-radius:14px; transition:background .25s, transform .25s; } .stat-item:hover { background:linear-gradient(135deg,rgba(27,107,69,.05),rgba(27,107,69,.02)); transform:translateY(-4px); } .stat-item:not(:last-child)::after { content:''; position:absolute; right:0; top:20%; bottom:20%; width:1px; background:linear-gradient(to bottom,transparent,var(--border),transparent); } .stat-num { font-family:'Fraunces',serif; font-size:3rem; font-weight:700; letter-spacing:-.05em; line-height:1; background:linear-gradient(135deg,#27a060,#1b6b45,#0a3320); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:.35rem; } .stat-label { font-size:.8rem; color:var(--muted); font-weight:500; letter-spacing:.02em; } /* ── GREEN BUTTONS ───────────────────────────── */ .btn-green, .job-apply-btn, .btn-submit, .rt-submit-btn, .btn-cta-primary { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.45rem; padding:.88rem 2.1rem; border:none; border-radius:11px; cursor:none; font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:600; color:#fff; text-decoration:none; background:linear-gradient(140deg,#27a060 0%,#1b6b45 45%,#0a3320 100%); box-shadow:0 6px 20px rgba(27,107,69,.38), inset 0 1px 0 rgba(255,255,255,.16); transition:transform .2s, box-shadow .2s; } .btn-green::before, .job-apply-btn::before, .btn-submit::before, .rt-submit-btn::before, .btn-cta-primary::before { content:''; position:absolute; inset:0; pointer-events:none; z-index:1; background-image:var(--grain); background-size:200px 200px; mix-blend-mode:overlay; opacity:.45; } .btn-green::after, .job-apply-btn::after, .btn-submit::after, .rt-submit-btn::after, .btn-cta-primary::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:2; background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 55%); } .btn-green > *, .job-apply-btn > *, .btn-submit > *, .rt-submit-btn > *, .btn-cta-primary > * { position:relative; z-index:3; } .btn-green:hover, .job-apply-btn:hover, .btn-submit:hover, .rt-submit-btn:hover, .btn-cta-primary:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(27,107,69,.48); } .btn-border { padding:.88rem 2.1rem; background:rgba(255,255,255,.72); color:var(--ink2); border-radius:11px; font-size:.88rem; font-weight:500; text-decoration:none; border:1.5px solid var(--border); display:inline-flex; align-items:center; gap:.45rem; backdrop-filter:blur(8px); transition:border-color .2s, color .2s, transform .2s; } .btn-border:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); } .btn-cta-secondary { display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.95rem 2rem; border-radius:11px; font-size:.88rem; font-weight:500; text-decoration:none; color:rgba(255,255,255,.75); background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.15); backdrop-filter:blur(6px); transition:border-color .2s, color .2s, background .2s, transform .2s; } .btn-cta-secondary:hover { border-color:rgba(110,231,164,.4); color:#6ee7a4; background:rgba(110,231,164,.06); transform:translateY(-2px); } /* ── ABOUT ───────────────────────────────────── */ .about-section { background:linear-gradient(180deg,#fff 0%,#f7fcf9 55%,#f0faf4 100%); border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; overflow:hidden; } .about-section::before { content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px; background:radial-gradient(circle,rgba(27,107,69,.05) 0%,transparent 70%); pointer-events:none; } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } .about-photos { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:1rem; position:relative; perspective:800px; } .ap { border-radius:14px; overflow:hidden; box-shadow:0 8px 28px rgba(26,24,20,.1); transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s; } .ap:hover { transform:translateY(-6px) scale(1.02); box-shadow:0 20px 50px rgba(26,24,20,.15); } .ap-tall { grid-row:span 2; aspect-ratio:3/4; } .ap-short { aspect-ratio:4/3; } .ap-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.55rem; } .ap-f1 { background:linear-gradient(145deg,#b8d9c8,#88c4a4,#5aac82); min-height:280px; } .ap-f2 { background:linear-gradient(145deg,#f0c8a8,#e8a878,#d88850); min-height:130px; } .ap-f3 { background:linear-gradient(145deg,#b0c8e0,#8ab0cc,#6898b8); min-height:130px; } .ap-fallback span { font-size:.73rem; color:rgba(255,255,255,.88); font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.2); } .about-badge-float { position:absolute; bottom:-1.1rem; left:50%; transform:translateX(-50%); background:linear-gradient(140deg,#27a060,#1b6b45,#0a3320); color:#fff; border-radius:100px; padding:.62rem 1.65rem; font-size:.8rem; font-weight:600; white-space:nowrap; box-shadow:0 8px 24px rgba(27,107,69,.38); display:flex; align-items:center; gap:.4rem; } .about-pillars { margin-top:2rem; display:flex; flex-direction:column; gap:.95rem; } .pillar { display:flex; gap:1rem; align-items:flex-start; padding:1.05rem 1.35rem; background:var(--cream); border-radius:12px; border:1.5px solid var(--border); transition:border-color .25s,box-shadow .25s,transform .25s,background .25s; position:relative; overflow:hidden; } .pillar::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#27a060,#0a3320); border-radius:3px; transform:scaleY(0); transform-origin:bottom; transition:transform .3s cubic-bezier(.22,1,.36,1); } .pillar:hover { border-color:rgba(27,107,69,.3); box-shadow:0 6px 24px rgba(27,107,69,.1); transform:translateX(4px); background:#f4fbf7; } .pillar:hover::before { transform:scaleY(1); } .pillar-icon { width:36px; height:36px; border-radius:9px; background:linear-gradient(135deg,var(--accent-light),#c8e8d4); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; box-shadow:0 2px 8px rgba(27,107,69,.14); transition:transform .3s; } .pillar:hover .pillar-icon { transform:scale(1.15) rotate(-8deg); } .pillar-title { font-family:'Fraunces',serif; font-size:.93rem; font-weight:600; color:var(--ink); margin-bottom:.16rem; } .pillar-body { font-size:.81rem; color:var(--muted); line-height:1.58; } /* ── SERVICES ────────────────────────────────── */ .services-section { background:linear-gradient(170deg,#faf8f4 0%,#f2ede4 55%,#f6f2eb 100%); position:relative; overflow:hidden; } .services-section::before { content:''; position:absolute; bottom:-80px; left:-80px; width:400px; height:400px; background:radial-gradient(circle,rgba(212,98,42,.06) 0%,transparent 70%); pointer-events:none; } .services-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2.8rem; flex-wrap:wrap; gap:1.5rem; } .svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; } .svc-card { background:var(--white); border-radius:16px; padding:2.1rem; border:1.5px solid var(--border); transition:border-color .25s,box-shadow .25s,transform .3s; position:relative; overflow:hidden; } .svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#27a060,#1b6b45,#0a3320); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.22,1,.36,1); border-radius:3px 3px 0 0; } .svc-card:hover { border-color:rgba(27,107,69,.3); box-shadow:0 16px 48px rgba(27,107,69,.12); transform:translateY(-6px); } .svc-card:hover::before { transform:scaleX(1); } .svc-icon-wrap { width:50px; height:50px; border-radius:13px; background:linear-gradient(135deg,var(--accent-light),#c8e4d4); display:flex; align-items:center; justify-content:center; font-size:1.45rem; margin-bottom:1.35rem; box-shadow:0 4px 14px rgba(27,107,69,.14); transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s; } .svc-card:hover .svc-icon-wrap { transform:scale(1.1) rotate(-8deg); box-shadow:0 8px 22px rgba(27,107,69,.22); } .svc-num { position:absolute; top:1.4rem; right:1.5rem; font-family:'Fraunces',serif; font-size:.73rem; font-weight:600; color:var(--border); transition:color .3s; } .svc-card:hover .svc-num { color:rgba(27,107,69,.25); } .svc-title { font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; color:var(--ink); margin-bottom:.6rem; line-height:1.3; } .svc-body { font-size:.82rem; color:var(--muted); line-height:1.68; } .svc-card-3d { position:absolute; top:1rem; right:1rem; width:34px; height:34px; opacity:0; transition:opacity .3s; } .svc-card:hover .svc-card-3d { opacity:1; } .chip-svg { width:100%; height:100%; animation:chipSpin 4s ease-in-out infinite; } @keyframes chipSpin { 0%,100%{transform:rotateY(0) scale(1)} 50%{transform:rotateY(180deg) scale(1.1)} } /* ── PROCESS (dark) ──────────────────────────── */ .process-section { position:relative; overflow:hidden; background: radial-gradient(ellipse at 15% 50%, rgba(27,107,69,.2) 0%, transparent 55%), radial-gradient(ellipse at 85% 20%, rgba(27,107,69,.12) 0%, transparent 48%), radial-gradient(ellipse at 50% 90%, rgba(110,231,164,.07) 0%, transparent 40%), linear-gradient(145deg,#0b1a0e 0%,#141210 30%,#121a14 65%,#0c1a10 100%); } .process-section::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:44px 44px; pointer-events:none; } .process-section .sec-label { color:#6ee7a4; } .process-section h2 { color:#fff; } .process-section h2 em { color:#9DDBB8; } .process-section .sec-lead { color:rgba(255,255,255,.45); } .process-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1.7rem; margin-top:3.5rem; position:relative; z-index:1; } .ps-card { background:rgba(255,255,255,.038); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:2.2rem; transition:background .25s,border-color .25s,transform .3s; position:relative; overflow:hidden; } .ps-card:hover { background:rgba(255,255,255,.065); border-color:rgba(27,107,69,.4); transform:translateY(-4px); } .ps-hologram { position:absolute; top:1.1rem; right:1.1rem; width:42px; height:42px; background:linear-gradient(135deg,rgba(110,231,164,.16),rgba(27,107,69,.08)); border:1px solid rgba(110,231,164,.22); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; animation:holoPulse 3s ease-in-out infinite; } @keyframes holoPulse { 0%,100%{box-shadow:0 0 0 0 rgba(110,231,164,.18)} 50%{box-shadow:0 0 0 6px rgba(110,231,164,.04)} } .ps-step-num { font-family:'Fraunces',serif; font-size:3.5rem; font-weight:700; background:linear-gradient(135deg,rgba(27,107,69,.35),rgba(27,107,69,.1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:1rem; letter-spacing:-.05em; } .ps-dot { width:8px; height:8px; border-radius:50%; background:#6ee7a4; margin-bottom:.8rem; box-shadow:0 0 12px rgba(110,231,164,.55); } .ps-title { font-family:'Fraunces',serif; font-size:1.03rem; font-weight:600; color:#fff; margin-bottom:.5rem; } .ps-body { font-size:.82rem; color:rgba(255,255,255,.45); line-height:1.7; } .process-3d-pipe { position:absolute; left:0; right:0; top:50%; height:2px; pointer-events:none; z-index:0; background:linear-gradient(90deg,transparent,rgba(110,231,164,.2) 20%,rgba(110,231,164,.35) 50%,rgba(110,231,164,.2) 80%,transparent); } .process-pulse-dot { position:absolute; top:50%; width:8px; height:8px; border-radius:50%; background:#6ee7a4; transform:translateY(-50%); box-shadow:0 0 12px rgba(110,231,164,.8); animation:pipeFlow 3s ease-in-out infinite; } @keyframes pipeFlow { 0%{left:0%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:100%;opacity:0} } /* ── EXPERTISE ───────────────────────────────── */ .expertise-section { background:linear-gradient(175deg,#fff 0%,#f5fcf8 50%,#edf8f2 100%); border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; overflow:hidden; } .expertise-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:5rem; align-items:start; } .tag-group { margin-bottom:1.8rem; } .tg-label { font-size:.67rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.65rem; } .tag-row { display:flex; flex-wrap:wrap; gap:.45rem; } .tag { padding:.3rem .9rem; border-radius:100px; font-size:.77rem; font-weight:500; border:1.5px solid; transition:all .22s cubic-bezier(.22,1,.36,1); } .tag-g { background:var(--accent-light); color:var(--accent); border-color:rgba(27,107,69,.22); } .tag-g:hover { background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 14px rgba(27,107,69,.3); } .tag-o { background:var(--accent2-light); color:var(--accent2); border-color:rgba(212,98,42,.22); } .tag-o:hover { background:var(--accent2); color:#fff; border-color:var(--accent2); transform:translateY(-2px); box-shadow:0 4px 14px rgba(212,98,42,.3); } .tag-n { background:var(--stone); color:var(--ink2); border-color:var(--border); } .tag-n:hover { background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); } .location-card { background:linear-gradient(135deg,#f2fcf6,#e8f7ee); border:1.5px solid rgba(27,107,69,.15); border-radius:14px; padding:1.55rem; margin-top:1rem; position:relative; overflow:hidden; } .lc-title { font-family:'Fraunces',serif; font-size:.93rem; font-weight:600; color:var(--ink); margin-bottom:.45rem; } .lc-body { font-size:.81rem; color:var(--muted); line-height:1.65; margin-bottom:.95rem; } .loc-badges { display:flex; flex-wrap:wrap; gap:.45rem; } .loc-b { padding:.28rem .85rem; background:var(--white); border:1.5px solid var(--border); border-radius:100px; font-size:.72rem; font-weight:600; color:var(--ink2); transition:border-color .2s,color .2s,transform .2s; } .loc-b:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); } /* ── TESTIMONIALS ────────────────────────────── */ .testi-section { background:linear-gradient(165deg,#faf8f4 0%,#f4f0e8 55%,#faf8f4 100%); position:relative; overflow:hidden; } .testi-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:1.4rem; margin-top:3.5rem; } .tc { background:var(--white); border-radius:18px; padding:2rem; border:1.5px solid var(--border); transition:border-color .25s,box-shadow .3s,transform .3s; position:relative; overflow:hidden; } .tc::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.22,1,.36,1); } .tc:hover { border-color:rgba(27,107,69,.3); box-shadow:0 16px 40px rgba(27,107,69,.1); transform:translateY(-5px); } .tc:hover::before { transform:scaleX(1); } .tc-featured { grid-row:span 1; background:linear-gradient(145deg,#f2fcf6,#e4f5ec); border-color:rgba(27,107,69,.2); } .tc-stars { color:#f59e0b; font-size:1rem; letter-spacing:.05em; margin-bottom:1rem; } .tc-body { font-size:.83rem; color:var(--ink2); line-height:1.72; margin-bottom:1.5rem; font-style:italic; } .tc-author { display:flex; align-items:center; gap:.75rem; } .tc-av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent-light),#c4ddc8); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; color:var(--accent); flex-shrink:0; } .tc-name { font-family:'Fraunces',serif; font-size:.88rem; font-weight:600; color:var(--ink); } .tc-role { font-size:.72rem; color:var(--muted); } .testi-3d-orb { position:absolute; right:4rem; top:3rem; width:110px; height:110px; pointer-events:none; z-index:0; animation:orbFloat 6s ease-in-out infinite; } @keyframes orbFloat { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-16px) rotate(8deg)} } /* ── CONTACT ─────────────────────────────────── */ .contact-section { background:linear-gradient(175deg,#f8f5f0 0%,#faf8f4 50%,#f4f0e8 100%); position:relative; overflow:hidden; } .contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; } .ci-item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.55rem; } .ci-icon { width:38px; height:38px; background:linear-gradient(135deg,var(--accent-light),#c8e0d0); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; } .ci-label { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.22rem; } .ci-val { font-size:.88rem; font-weight:500; color:var(--ink2); line-height:1.5; } .ci-val a { color:var(--ink2); text-decoration:none; transition:color .18s; } .ci-val a:hover { color:var(--accent); } .contact-form { background:var(--white); border-radius:20px; padding:2.5rem; border:1.5px solid var(--border); box-shadow:0 8px 40px rgba(26,24,20,.08); } .cf-title { font-family:'Fraunces',serif; font-size:1.4rem; font-weight:700; color:var(--ink); margin-bottom:.3rem; } .cf-sub { font-size:.82rem; color:var(--muted); margin-bottom:1.6rem; } .form-tabs { display:flex; gap:.5rem; margin-bottom:1.75rem; padding:.3rem; background:var(--stone); border-radius:10px; } .ftab { flex:1; padding:.62rem; background:transparent; border:none; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:.81rem; font-weight:600; color:var(--muted); cursor:none; transition:background .2s,color .2s,box-shadow .2s; } .ftab.active { background:var(--white); color:var(--ink); box-shadow:0 2px 8px rgba(26,24,20,.08); } .form-panel { display:none; } .form-panel.active { display:block; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } .form-group { margin-bottom:.85rem; } .form-group label { display:block; font-size:.75rem; font-weight:600; color:var(--ink2); letter-spacing:.02em; margin-bottom:.38rem; } .form-group input, .form-group textarea, .form-group select { width:100%; padding:.75rem 1rem; background:var(--stone); border:1.5px solid var(--border); border-radius:9px; font-family:'DM Sans',sans-serif; font-size:.86rem; color:var(--ink); outline:none; transition:border-color .2s,box-shadow .2s,background .2s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(27,107,69,.1); background:#fff; } .form-group textarea { min-height:110px; resize:vertical; } .btn-submit { width:100%; padding:1rem; margin-top:.25rem; font-size:.92rem; font-weight:700; letter-spacing:.02em; justify-content:center; } .form-note { font-size:.72rem; color:var(--muted); text-align:center; margin-top:.65rem; } .cv-upload-area { border:2px dashed var(--border); border-radius:12px; padding:2.2rem; text-align:center; background:var(--stone); cursor:none; transition:border-color .2s,background .2s,box-shadow .2s; position:relative; } .cv-upload-area:hover { border-color:var(--accent); background:var(--accent-light); } .cv-upload-area input[type=file] { position:absolute; inset:0; opacity:0; cursor:none; } .cv-icon { font-size:2rem; margin-bottom:.5rem; } .cv-title { font-size:.85rem; font-weight:600; color:var(--ink2); margin-bottom:.3rem; } .cv-hint { font-size:.73rem; color:var(--muted); } .cv-hint span { color:var(--accent); font-weight:600; } #cv-filename { font-size:.8rem; color:var(--accent); margin-top:.65rem; font-weight:500; } .success-msg { display:none; text-align:center; padding:2.5rem; background:var(--accent-light); border:1.5px solid rgba(27,107,69,.2); border-radius:14px; } .success-msg.show { display:block; } .success-icon { font-size:2.5rem; margin-bottom:.75rem; } .success-title { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:700; color:var(--accent); margin-bottom:.4rem; } .success-body { font-size:.84rem; color:var(--muted); } .contact-3d-sat { position:absolute; right:3rem; top:3rem; width:95px; pointer-events:none; z-index:0; opacity:.12; animation:satOrbit 10s linear infinite; } @keyframes satOrbit { to{transform:rotate(360deg)} } /* ── JOBS ────────────────────────────────────── */ .jobs-section { background:linear-gradient(180deg,#ece8df 0%,#e8e3d9 55%,#ece8df 100%); border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; overflow:hidden; } .jobs-filter { display:flex; gap:.55rem; flex-wrap:wrap; margin-bottom:2.4rem; } .jf-btn { padding:.48rem 1.25rem; background:var(--white); border:1.5px solid var(--border); border-radius:100px; font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:600; color:var(--muted); cursor:none; transition:all .2s; } .jf-btn:hover,.jf-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(27,107,69,.3); } .jobs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; } .job-card { background:var(--white); border-radius:18px; padding:1.9rem; border:1.5px solid var(--border); transition:border-color .25s,box-shadow .3s,transform .3s; display:flex; flex-direction:column; gap:.95rem; position:relative; overflow:hidden; } .job-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#27a060,#1b6b45); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.22,1,.36,1); border-radius:3px 3px 0 0; } .job-card:hover { border-color:rgba(27,107,69,.3); box-shadow:0 16px 48px rgba(27,107,69,.12); transform:translateY(-6px); } .job-card:hover::before { transform:scaleX(1); } .job-card-top { display:flex; align-items:flex-start; justify-content:space-between; } .job-icon-wrap { width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--accent-light),#c8e4d4); display:flex; align-items:center; justify-content:center; font-size:1.35rem; flex-shrink:0; box-shadow:0 4px 12px rgba(27,107,69,.14); } .job-badges { display:flex; flex-wrap:wrap; gap:.32rem; justify-content:flex-end; } .jbadge { padding:.2rem .65rem; border-radius:100px; font-size:.67rem; font-weight:700; letter-spacing:.03em; } .jbadge-green { background:var(--accent-light); color:var(--accent); } .jbadge-blue { background:#e8f0fe; color:#1a56db; } .jbadge-orange { background:var(--accent2-light); color:var(--accent2); } .job-title { font-family:'Fraunces',serif; font-size:1.05rem; font-weight:700; color:var(--ink); line-height:1.25; } .job-meta { display:flex; flex-wrap:wrap; gap:.55rem; } .job-meta span { font-size:.74rem; color:var(--muted); font-weight:500; } .job-desc { font-size:.81rem; color:var(--ink2); line-height:1.7; flex-grow:1; } .job-tags { display:flex; flex-wrap:wrap; gap:.38rem; } .job-apply-btn { padding:.6rem 1.3rem; font-size:.81rem; font-weight:600; align-self:flex-start; } .jobs-no-results { text-align:center; padding:3.5rem 2rem; background:var(--white); border-radius:18px; border:1.5px dashed var(--border); } .jobs-cta { text-align:center; margin-top:3.2rem; } .jobs-3d-laptop { position:absolute; right:3rem; top:2rem; width:130px; pointer-events:none; z-index:0; opacity:.17; animation:laptopFloat 5s ease-in-out infinite; } @keyframes laptopFloat { 0%,100%{transform:translateY(0) rotateY(-8deg)} 50%{transform:translateY(-14px) rotateY(8deg)} } /* ── REQUEST TALENT ──────────────────────────── */ .request-talent-section { position:relative; overflow:hidden; padding:6rem 4rem; background: radial-gradient(ellipse at 10% 30%, rgba(27,107,69,.2) 0%, transparent 55%), radial-gradient(ellipse at 90% 70%, rgba(27,107,69,.12) 0%, transparent 50%), linear-gradient(145deg,#060f08 0%,#141210 30%,#0b1f0f 60%,#141210 100%); } .request-talent-section::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; } .rt-bg-mesh { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 20% 40%,rgba(27,107,69,.15) 0%,transparent 50%); } .rt-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:6rem; align-items:center; position:relative; z-index:1; } .rt-checks { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:2.3rem; } .rt-check { display:flex; align-items:center; gap:.55rem; font-size:.86rem; color:rgba(255,255,255,.7); font-weight:500; } .rt-check-icon { width:22px; height:22px; background:rgba(27,107,69,.4); border:1px solid rgba(110,231,164,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.68rem; color:#6ee7a4; flex-shrink:0; } .rt-stats { display:flex; gap:2.3rem; } .rt-stat-num { font-family:'Fraunces',serif; font-size:2.1rem; font-weight:700; color:#fff; letter-spacing:-.04em; line-height:1; } .rt-stat-num span { color:#6ee7a4; } .rt-stat-label { font-size:.7rem; font-weight:600; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:.08em; margin-top:.28rem; } .rt-form-card { background:rgba(255,255,255,.97); border-radius:22px; padding:2.6rem; box-shadow:0 32px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.1); } .rt-form-title { font-family:'Fraunces',serif; font-size:1.55rem; font-weight:700; color:var(--ink); text-align:center; letter-spacing:-.02em; margin-bottom:.32rem; } .rt-form-sub { font-size:.8rem; color:var(--muted); text-align:center; margin-bottom:1.9rem; } .rt-form-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } .rt-form-group { margin-bottom:.8rem; } .rt-form-group input, .rt-form-group textarea { width:100%; padding:.78rem 1.05rem; background:var(--stone); border:1.5px solid var(--border); border-radius:9px; font-family:'DM Sans',sans-serif; font-size:.85rem; color:var(--ink); outline:none; transition:border-color .2s,box-shadow .2s,background .2s; } .rt-form-group input:focus, .rt-form-group textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(27,107,69,.1); background:#fff; } .rt-form-group textarea { min-height:95px; resize:vertical; } .rt-label { font-size:.76rem; font-weight:600; color:var(--ink2); letter-spacing:.02em; display:block; margin-bottom:.45rem; } .rt-checkboxes { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-bottom:.2rem; } .rt-cb-label { display:flex; align-items:center; gap:.45rem; font-size:.81rem; color:var(--ink2); font-weight:500; cursor:none; padding:.42rem .7rem; border-radius:8px; border:1.5px solid var(--border); background:var(--white); transition:all .2s; } .rt-cb-label:hover { border-color:var(--accent); color:var(--accent); } .rt-cb-label input[type=checkbox] { accent-color:var(--accent); width:13px; height:13px; } .rt-submit-btn { width:100%; padding:1rem; font-size:1rem; font-weight:700; font-family:'Fraunces',serif; letter-spacing:.04em; justify-content:center; } /* ── CTA BAND ─────────────────────────────────── */ .cta-band { position:relative; overflow:hidden; z-index:0; padding:7rem 5rem; display:grid; grid-template-columns:1fr auto; align-items:center; gap:3rem; background: radial-gradient(ellipse at 20% 50%, rgba(27,107,69,.38) 0%, transparent 55%), radial-gradient(ellipse at 80% 30%, rgba(110,231,164,.1) 0%, transparent 45%), linear-gradient(145deg,#060e08 0%,#0a2518 25%,#0d3520 50%,#071a10 75%,#030d06 100%); } /* animated grid */ .cta-band::before { content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(rgba(110,231,164,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(110,231,164,.055) 1px,transparent 1px); background-size:40px 40px; animation:gridScroll 18s linear infinite; } /* grain */ .cta-band::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background-image:var(--grain); background-size:260px 260px; mix-blend-mode:overlay; opacity:.5; } @keyframes gridScroll { from{background-position:0 0} to{background-position:40px 40px} } .cta-band > * { position:relative; z-index:1; } .cta-3d-globe { position:absolute; right:360px; top:50%; transform:translateY(-50%); width:170px; height:170px; pointer-events:none; z-index:1; animation:globeSpin 20s linear infinite; opacity:.16; } @keyframes globeSpin { to{transform:translateY(-50%) rotate(360deg)} } .cta-code-float { position:absolute; font-family:'DM Mono','Fira Code',monospace; font-size:.66rem; color:rgba(110,231,164,.32); pointer-events:none; z-index:1; white-space:nowrap; } .cta-code-1 { top:18%; left:5%; animation:codeFloat1 8s ease-in-out infinite; } .cta-code-2 { bottom:20%; left:7%; animation:codeFloat2 11s ease-in-out infinite; } .cta-code-3 { top:25%; right:28%; animation:codeFloat1 9s ease-in-out infinite 2s; } @keyframes codeFloat1 { 0%,100%{transform:translateY(0);opacity:.32} 50%{transform:translateY(-10px);opacity:.58} } @keyframes codeFloat2 { 0%,100%{transform:translateY(0);opacity:.22} 50%{transform:translateY(8px);opacity:.45} } .cta-terminal { display:inline-flex; align-items:center; gap:.45rem; padding:.38rem .95rem; background:rgba(110,231,164,.08); border:1px solid rgba(110,231,164,.2); border-radius:6px; font-family:'DM Mono',monospace; font-size:.73rem; color:#6ee7a4; margin-bottom:1.4rem; letter-spacing:.06em; } .cta-terminal::before { content:'$ '; color:rgba(110,231,164,.5); } .cta-blink { animation:blink 1s step-end infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } .cta-band h2 { font-family:'Fraunces',serif; font-size:clamp(1.9rem,3.2vw,2.8rem); font-weight:700; color:#fff; line-height:1.1; letter-spacing:-.03em; margin-bottom:.95rem; } .cta-band h2 em { color:#6ee7a4; font-style:italic; } .cta-band p { color:rgba(255,255,255,.45); font-size:.97rem; max-width:480px; line-height:1.7; } .cta-action-panel { display:flex; flex-direction:column; gap:.95rem; min-width:255px; } .cta-trust-row { display:flex; align-items:center; gap:.7rem; font-size:.73rem; color:rgba(255,255,255,.28); } .cta-trust-dot { width:4px; height:4px; border-radius:50%; background:rgba(110,231,164,.45); flex-shrink:0; } /* ── 3D NODE (About) ─────────────────────────── */ .about-3d-node { position:absolute; right:-25px; top:50%; transform:translateY(-50%); width:155px; height:155px; pointer-events:none; z-index:0; } .node-svg { width:100%; height:100%; animation:nodeRotate 18s linear infinite; } @keyframes nodeRotate { to{transform:rotate(360deg)} } .svc-3d-circuit { position:absolute; right:2rem; top:2rem; width:210px; opacity:.055; pointer-events:none; z-index:0; } /* ── SCROLL TO TOP ───────────────────────────── */ .scroll-top { position:fixed; bottom:2rem; right:2rem; z-index:90; width:46px; height:46px; background:linear-gradient(140deg,#27a060,#1b6b45,#0a3320); border-radius:50%; border:none; cursor:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; box-shadow:0 6px 20px rgba(27,107,69,.4); opacity:0; transform:translateY(10px); transition:opacity .3s,transform .3s; } .scroll-top.visible { opacity:1; transform:none; } .scroll-top:hover { box-shadow:0 10px 30px rgba(27,107,69,.5); transform:translateY(-2px); } /* ── FOOTER ──────────────────────────────────── */ footer { padding:5rem 4rem 2.5rem; background: radial-gradient(ellipse at 20% 0%, rgba(27,107,69,.12) 0%, transparent 50%), linear-gradient(175deg,#121008 0%,#1a1814 40%,#0d1a0e 80%,#1a1814 100%); position:relative; overflow:hidden; } footer::after { content:''; position:absolute; inset:0; background-image:var(--grain); background-size:250px 250px; mix-blend-mode:overlay; opacity:.4; pointer-events:none; } .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3.5rem; margin-bottom:3rem; position:relative; z-index:1; } .footer-logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-bottom:1.1rem; } .footer-logo-text { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:700; color:#fff; letter-spacing:-.02em; } .footer-logo-text span { color:#6ee7a4; } .footer-desc { font-size:.8rem; color:rgba(255,255,255,.35); line-height:1.7; max-width:260px; } .footer-col-h { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:1rem; } .footer-links { list-style:none; display:flex; flex-direction:column; gap:.52rem; } .footer-links a { font-size:.82rem; color:rgba(255,255,255,.45); text-decoration:none; transition:color .18s; } .footer-links a:hover { color:rgba(255,255,255,.85); } .footer-bottom { padding-top:2rem; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; position:relative; z-index:1; } .footer-copy { font-size:.75rem; color:rgba(255,255,255,.22); } /* ── RESPONSIVE ─────────────────────────────── */ @media (max-width:1100px) { .svc-grid,.jobs-grid { grid-template-columns:repeat(2,1fr); } .testi-grid { grid-template-columns:1fr 1fr; } .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; } } @media (max-width:900px) { nav { padding:.9rem 1.5rem; } .nav-links { display:none; } .nav-ham { display:flex; } section { padding:4.5rem 1.5rem; } .page-hero { padding:4rem 1.5rem 3.2rem; } .hero { grid-template-columns:1fr; min-height:auto; padding:4rem 1.5rem; } .hero-visual { display:none; } .about-grid,.expertise-grid,.contact-grid,.rt-layout { grid-template-columns:1fr; gap:2.8rem; } .svc-grid,.jobs-grid,.process-steps,.testi-grid { grid-template-columns:1fr; } .stats-ribbon { grid-template-columns:1fr 1fr; padding:3rem 1.5rem; } .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; } .cta-band { grid-template-columns:1fr; padding:4rem 1.5rem; } .cta-3d-globe { display:none; } .rt-form-row,.rt-checkboxes,.rt-checks { grid-template-columns:1fr 1fr; } .rt-checks { grid-template-columns:1fr 1fr; } footer { padding:4rem 1.5rem 2rem; } .nav-actions { gap:.3rem; } .nav-cta-outline,.nav-cta { font-size:.7rem; padding:.45rem .8rem; } body { cursor:auto; } .cursor,.cursor-ring { display:none; } a,button { cursor:pointer; } } @media (max-width:600px) { .stats-ribbon,.footer-grid { grid-template-columns:1fr; } .form-row,.rt-form-row { grid-template-columns:1fr; } .cta-band { padding:3.5rem 1.2rem; } .jobs-filter { flex-wrap:wrap; } .rt-checks,.rt-checkboxes { grid-template-columns:1fr; } /* Better mobile tap targets */ .mobile-menu a { padding: .65rem 0; min-height: 44px; display:flex; align-items:center; } .jf-btn { min-height: 40px; } .nav-ham { padding: 10px 6px; min-width: 44px; min-height: 44px; justify-content:center; align-items:center; display:flex; } /* Hero text sizing on small screens */ .hero-headline, h1 { font-size: clamp(2rem, 8vw, 3.2rem); } /* Footer fix on small screens */ .footer-bottom { flex-direction: column; text-align: center; gap: .6rem; } /* Scroll top button safe zone */ .scroll-top { bottom: 1.2rem; right: 1.2rem; } } /* ── TOUCH / COARSE POINTER DEVICES ───────────── Use CSS media query as the authoritative method to hide cursor elements on phones/tablets. JS also checks but this is the safety net. ─────────────────────────────────────────────── */ @media (pointer: coarse) { body { cursor: auto !important; } .cursor, .cursor-ring, .cursor-trail-dot, #ap-cursor-dot, #ap-cursor-ring { display: none !important; } a, button, [role="button"], .jf-btn, .ftab, .nav-cta, .nav-cta-outline { cursor: pointer; } .nav-cta, .nav-cta-outline { min-height: 40px; display:inline-flex; align-items:center; } } /* ══════════════════════════════════════════════ MOBILE ENHANCEMENTS — comprehensive fixes for phones under 480px ══════════════════════════════════════════════ */ @media (max-width:480px) { /* Nav — show small buttons on mobile, next to hamburger */ .nav-actions { display: flex; gap: .3rem; } .nav-cta-outline, .nav-cta { font-size: .68rem !important; padding: .38rem .6rem !important; white-space: nowrap; min-height: 34px; border-radius: 6px; } /* Mobile menu CTA buttons — full width, stacked */ .mobile-menu { padding: 1rem 1.5rem 1.5rem; } .mobile-menu a { font-size: 1rem; padding: .7rem 0; min-height: 48px; } .mobile-menu a:last-child, .mobile-menu a:nth-last-child(2) { display: block; text-align: center; padding: .75rem 1rem; border-radius: 8px; margin-top: .4rem; border: none; } .mobile-menu a:last-child { background: var(--accent); color: #fff !important; font-weight: 600; } .mobile-menu a:nth-last-child(2) { background: rgba(212,98,42,.12); color: var(--accent2) !important; font-weight: 600; } /* Hero section */ .hero { padding: 2.5rem 1.2rem 2rem; min-height: auto; grid-template-columns: 1fr; gap: 1.5rem; } h1, .hero-headline { font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important; line-height: 1.15 !important; letter-spacing: -.02em !important; } .hero-sub { font-size: .88rem; line-height: 1.6; margin-bottom: 1.5rem; } .hero-visual { display: none; } .hero-btns { flex-direction: column; gap: .6rem; } .btn-green, .btn-border { width: 100%; text-align: center; padding: .8rem 1rem; font-size: .9rem; } .hero-trust { gap: .8rem; } .trust-item { font-size: .75rem; } .hero-btns { flex-direction: column; gap: .75rem; width: 100%; } .btn-green, .btn-border { width: 100%; text-align: center; padding: .85rem 1rem; font-size: .95rem; } /* Section padding */ section { padding: 3.5rem 1.2rem; } .page-hero { padding: 3rem 1.2rem 2.5rem; } /* Job cards */ .job-card { padding: 1.2rem; } .job-apply-btn { width: 100%; text-align: center; display: block; margin-top: .8rem; } .job-tags { flex-wrap: wrap; gap: .35rem; } /* Contact form tabs — stack on mobile */ .ftabs { flex-direction: column; gap: .5rem; } .ftab { width: 100%; text-align: center; padding: .75rem 1rem; font-size: .9rem; border-radius: 8px; } /* Contact form */ .contact-grid { gap: 2rem; } .btn-submit { width: 100%; padding: .9rem 1rem; font-size: .95rem; } /* Request talent form */ .rt-layout { gap: 2rem; } .rt-submit-btn { width: 100%; padding: .9rem 1rem; font-size: .95rem; letter-spacing: .03em; } .rt-form-row { grid-template-columns: 1fr; } .rt-checkboxes { grid-template-columns: 1fr; } .rt-checks { grid-template-columns: 1fr; } /* Stats ribbon */ .stats-ribbon { grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 2.5rem 1.2rem; } .stat-num { font-size: 2.2rem; } /* Service cards */ .svc-grid { grid-template-columns: 1fr; gap: 1rem; } /* Testimonial cards */ .testi-grid { grid-template-columns: 1fr; } .tc { padding: 1.2rem; } /* Footer */ footer { padding: 3rem 1.2rem 1.5rem; } .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } .footer-bottom { flex-direction: column; text-align: center; gap: .5rem; font-size: .75rem; } /* CTA band */ .cta-band { padding: 3rem 1.2rem; gap: 1.5rem; } .btn-cta-primary, .btn-cta-secondary { width: 100%; text-align: center; padding: .85rem 1rem; } .cta-action-panel { width: 100%; } /* Jobs filter pills — scrollable row */ .jobs-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; gap: .5rem; -webkit-overflow-scrolling: touch; } .jf-btn { white-space: nowrap; flex-shrink: 0; } /* Process steps */ .ps-card { padding: 1.5rem 1.2rem; } /* Page hero heading */ .page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); } } /* ── Logo image ──────────────────────────────── */ .logo-img { height: 36px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.15)); } .footer-logo-img { height: 40px; width: auto; object-fit: contain; display: block; opacity: .9; } @media (max-width: 480px) { .logo-img { height: 26px; } nav { padding: .6rem 1rem; } } /* ═══════════════════════════════════════════════════════ ENHANCEMENTS — v3 (2025) hero live jobs · client logos · referral · search bar job detail · sticky apply bar · apply progress · OG ═══════════════════════════════════════════════════════ */ /* ── HERO LIVE JOB COUNT ─────────────────────────── */ .hero-live-jobs { display: flex; align-items: center; gap: .55rem; margin-top: .9rem; flex-wrap: wrap; } .hero-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-light, #14BB7A); box-shadow: 0 0 0 3px rgba(20,187,122,.2); animation: pulse-green 2s infinite; flex-shrink: 0; } @keyframes pulse-green { 0%,100%{box-shadow:0 0 0 3px rgba(20,187,122,.2);} 50%{box-shadow:0 0 0 6px rgba(20,187,122,.05);} } .hero-live-jobs-link { text-decoration: none; font-size: .85rem; font-weight: 600; color: var(--accent-light, #14BB7A); transition: opacity .2s; } .hero-live-jobs-link:hover { opacity: .8; } .hero-live-jobs-link .hero-live-sub { color: var(--muted); font-weight: 400; } #hero-job-count-badge { color: var(--accent-light, #14BB7A); } /* ── STATS COUNTER FIX ──────────────────────────── The stats-ribbon has .reveal which hides it until scrolled. Counters fire via cntObs (threshold:0.5) but if element is hidden (opacity:0) the observer never fires. We fix by making stats always visible (override the reveal opacity before it triggers). ──────────────────────────────────────────────────── */ .stats-ribbon { opacity: 1 !important; transform: none !important; } /* ── JOB SEARCH BAR ──────────────────────────────── */ .jobs-search-wrap { width: 100%; max-width: 560px; margin: 0 auto 1.6rem; } .jobs-search-box { display: flex; align-items: center; background: var(--white); border: 1.5px solid var(--border); border-radius: 50px; padding: .5rem 1rem; gap: .5rem; transition: border-color .2s, box-shadow .2s; } .jobs-search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(27,107,69,.08); } .jobs-search-icon { font-size: 1rem; color: var(--muted); flex-shrink: 0; } .jobs-search-input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: .88rem; color: var(--ink); } .jobs-search-input::placeholder { color: var(--muted); } .jobs-search-clear { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1rem; padding: 0; line-height:1; transition: color .2s; } .jobs-search-clear:hover { color: var(--ink); } /* ── JOB CARD ACTIONS (detail + apply buttons) ──── */ .job-card-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; } .job-detail-btn { display: inline-block; padding: .5rem 1rem; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 50px; font-size: .8rem; font-weight: 600; text-decoration: none; transition: all .2s; } .job-detail-btn:hover { background: var(--accent); color: #fff; } /* ── JOB DETAIL PAGE ─────────────────────────────── */ .jd-breadcrumb { padding: 1rem 4rem; font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--border); display: flex; gap: .4rem; align-items: center; } .jd-breadcrumb a { color: var(--muted); text-decoration: none; } .jd-breadcrumb a:hover { color: var(--accent); } .jd-breadcrumb span { color: var(--border); } @media(max-width:768px){ .jd-breadcrumb { padding: .75rem 1.2rem; } } .jd-wrap { max-width: 1100px; margin: 0 auto; padding: 3rem 4rem 5rem; } @media(max-width:768px){ .jd-wrap { padding: 2rem 1.2rem 4rem; } } .jd-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6rem 2rem; gap: 1rem; color: var(--muted); font-size: .88rem; } .jd-loading-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .jd-header { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; } .jd-icon-wrap { font-size: 2.5rem; width: 68px; height: 68px; background: rgba(27,107,69,.07); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .jd-header-info { flex: 1; min-width: 200px; } .jd-title { font-size: 2rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; font-family: var(--serif); } .jd-meta { display: flex; gap: 1rem; font-size: .82rem; color: var(--muted); flex-wrap: wrap; margin-bottom: .6rem; } .jd-badges { display: flex; gap: .4rem; flex-wrap: wrap; } .jd-apply-hero-btn { white-space: nowrap; align-self: flex-start; } @media(max-width:600px){ .jd-title { font-size: 1.4rem; } .jd-apply-hero-btn { width: 100%; text-align: center; } } .jd-body { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; align-items: start; } @media(max-width:900px){ .jd-body { grid-template-columns: 1fr; } } @media(max-width:900px){ .jd-sidebar { display: none; } } .jd-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); } .jd-section:last-child { border-bottom: none; } .jd-section h2 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0 0 .9rem; font-family: var(--serif); } .jd-section p { color: var(--muted); line-height: 1.7; margin: 0 0 .75rem; font-size: .9rem; } .jd-req-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .jd-req-list li { padding: .5rem .75rem; background: rgba(27,107,69,.04); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font-size: .87rem; color: var(--ink2); line-height: 1.5; } .jd-apply-section { background: rgba(27,107,69,.03); border: 1.5px solid rgba(27,107,69,.1); border-radius: 16px; padding: 2rem; margin-top: 1rem; } .jd-sidebar-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 16px; padding: 1.5rem; position: sticky; top: 120px; } .jd-sidebar-card h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .9rem; color: var(--ink); } .jd-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; } .jd-facts li { display: flex; justify-content: space-between; font-size: .82rem; } .jdf-label { color: var(--muted); } .jdf-val { font-weight: 600; color: var(--ink); } /* ── APPLY PROGRESS INDICATOR ────────────────────── */ .apply-progress-wrap { margin-bottom: 1.5rem; padding: 1.25rem; background: rgba(27,107,69,.04); border: 1px solid rgba(27,107,69,.12); border-radius: 12px; } .apply-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: .9rem; } .apply-step { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .72rem; color: var(--muted); font-weight: 600; min-width: 60px; } .apply-step.active { color: var(--accent); } .apply-step.done { color: var(--accent); } .as-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; transition: all .3s; } .apply-step.active .as-dot { background: var(--accent); color: #fff; } .apply-step.done .as-dot { background: var(--accent); color: #fff; } .apply-step.done .as-dot::after { content: '✓'; font-size: .9rem; } .apply-step.done .as-dot { font-size: 0; } .apply-step-line { flex: 1; height: 2px; background: var(--border); margin: 0; margin-bottom: 1.1rem; min-width: 30px; transition: background .3s; } .apply-progress-bar-wrap { height: 5px; border-radius: 50px; background: var(--border); overflow: hidden; margin-bottom: .5rem; } .apply-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), #6EE7A4); border-radius: 50px; width: 0%; transition: width .5s ease; } .apply-progress-msg { text-align: center; font-size: .78rem; color: var(--muted); font-weight: 500; } /* ── STICKY APPLY BAR ─────────────────────────────── */ .sticky-apply-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1.5px solid var(--border); z-index: 999; transform: translateY(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); box-shadow: 0 -4px 24px rgba(0,0,0,.08); } .sticky-apply-bar.sticky-visible { transform: translateY(0); } .sticky-apply-inner { max-width: 900px; margin: 0 auto; padding: .75rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sticky-job-info { display: flex; align-items: center; gap: .6rem; min-width: 0; } .sticky-job-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sticky-job-logo svg { width: 14px; height: 14px; fill: #fff; } .sticky-job-title { font-weight: 700; font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-apply-cta { white-space: nowrap; font-size: .85rem; padding: .5rem 1.2rem; } @media(max-width:480px){ .sticky-apply-inner { padding: .75rem 1rem; } .sticky-job-title { font-size: .78rem; } } /* ── CLIENT LOGOS SECTION ─────────────────────────── */ .client-logos-section { padding: 5rem 4rem; background: var(--white); border-top: 1px solid var(--border); text-align: center; } @media(max-width:768px){ .client-logos-section { padding: 3.5rem 1.5rem; } } .client-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; max-width: 900px; margin: 0 auto 2.5rem; } .client-logo-card { background: var(--light); border: 1.5px solid var(--border); border-radius: 14px; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; transition: border-color .2s, transform .2s, box-shadow .2s; cursor: default; } .client-logo-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,107,69,.1); } .clc-icon { font-size: 2rem; } .clc-name { font-size: .75rem; font-weight: 600; color: var(--ink2); text-align: center; line-height: 1.3; } .client-proof-row { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; max-width: 700px; margin: 0 auto; } .cpb { display: flex; flex-direction: column; align-items: center; padding: 1rem 2rem; gap: .2rem; } .cpb-num { font-size: 2rem; font-weight: 800; color: var(--accent); font-family: var(--serif); } .cpb-label { font-size: .75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .cpb-div { width: 1px; height: 40px; background: var(--border); } @media(max-width:500px){ .cpb { padding: .75rem 1rem; } .cpb-num { font-size: 1.5rem; } .cpb-div { display: none; } } /* ── REFERRAL SECTION ─────────────────────────────── */ .referral-section { padding: 5rem 4rem; background: linear-gradient(135deg, #0B3D2E 0%, #0d4a36 60%, #0f5540 100%); } @media(max-width:768px){ .referral-section { padding: 3.5rem 1.5rem; } } .referral-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } @media(max-width:900px){ .referral-inner { grid-template-columns: 1fr; gap: 2.5rem; } } .referral-left {} .referral-perks { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-direction: column; gap: .5rem; } .referral-perks li { color: rgba(255,255,255,.85); font-size: .88rem; } .referral-form { background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12); border-radius: 20px; padding: 2rem; } .referral-form .form-group label { color: rgba(255,255,255,.8); } .referral-form .form-group input, .referral-form .form-group select, .referral-form .form-group textarea { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; } .referral-form .form-group input::placeholder { color: rgba(255,255,255,.4); } .referral-form .form-group input:focus, .referral-form .form-group select:focus, .referral-form .form-group textarea:focus { border-color: rgba(110,231,164,.5); background: rgba(255,255,255,.1); } .referral-form .form-group select option { background: #0B3D2E; color: #fff; } .referral-block { margin-bottom: 1.25rem; } .referral-block-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(110,231,164,.8); margin-bottom: .75rem; } /* ── FIRESTORE PUBLIC READ INSTRUCTIONS BOX ─────── */ .firestore-rules-notice { background: rgba(212,98,42,.08); border: 1.5px solid rgba(212,98,42,.3); border-radius: 10px; padding: 1rem 1.25rem; font-size: .8rem; color: var(--ink2); margin-bottom: 1rem; line-height: 1.6; } .firestore-rules-notice strong { color: var(--ink); } .firestore-rules-notice code { background: rgba(0,0,0,.06); padding: .1rem .4rem; border-radius: 4px; font-family: monospace; font-size: .78rem; } /* ── Job Description Formatting (v5) ── */ .jd-bullet-list { margin: .5rem 0 .5rem 1.2rem; padding: 0; } .jd-bullet-list li { color: var(--muted); font-size: .88rem; line-height: 1.75; margin-bottom: .2rem; } .jd-section-header { display: block; color: var(--ice); font-size: .92rem; font-weight: 700; margin: 1.1rem 0 .4rem; letter-spacing: .02em; }