/* ========================================================================== Tesha — shared stylesheet Used across: index.html, card.html, why.html, roadmap.html, terms.html ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #080807; --ink2: #0D0C0A; --ink3: #141210; --panel: #1A1814; --lime: #B5F23D; --lime2: #CAFF50; --lime3: #DEFF85; --cream: #F0EBE3; --cream2: #FBF8F4; --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.60); --soft: rgba(255,255,255,0.35); --faint: rgba(255,255,255,0.07); --glass: rgba(255,255,255,0.055); --gb: rgba(255,255,255,0.10); --t-caption: 0.75rem; --t-sm: 0.875rem; --t-body: 1rem; --t-lg: 1.125rem; --t-sub: 1.25rem; --t-h3: 1.5rem; --t-h2: 2rem; --t-h1: 2.5rem; --f: 'DM Sans', system-ui, sans-serif; --fi: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif; --r: 14px; --rl: 22px; --rx: 30px; --pill: 100px; } html { scroll-behavior: smooth; } body { font-family: var(--f); background: var(--ink); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.65; } body::before { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* ── GLASS CARD UTILITY ── */ .card-glass { background: var(--glass); border: 1px solid var(--faint); border-radius: var(--rx); position: relative; overflow: hidden; transition: border-color 0.3s, background 0.3s, transform 0.3s; } .card-glass::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,rgba(181,242,61,0.30),rgba(181,242,61,0.06)); border-radius:var(--rx) var(--rx) 0 0; } .card-glass:hover { border-color: rgba(181,242,61,0.18); background: rgba(181,242,61,0.04); transform: translateY(-4px); } /* ── SHARED ── */ .eyebrow { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: var(--t-caption); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(160,220,40,0.82); margin-bottom: 0.9rem; } .eyebrow-line { width: 18px; height: 1.5px; background: var(--lime); flex-shrink: 0; } .eyebrow.gold { color: rgba(160,220,40,0.90); } .eyebrow.gold .eyebrow-line { background: var(--lime2); } .serif { font-family: var(--fi); font-style: italic; font-weight: 400; letter-spacing: 0; line-height: 1.15; } .serif-light { font-family: var(--fi); font-style: italic; font-weight: 300; letter-spacing: 0; } .gold-serif { font-family: var(--fi); font-style: italic; font-weight: 400; color: var(--lime2); letter-spacing: 0; } .w { max-width: 1160px; margin: 0 auto; } /* ── NAV ── */ nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: min(1160px, calc(100% - 28px)); z-index: 100; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 1.4rem; background: rgba(11,10,8,0.82); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; backdrop-filter: blur(28px); transition: background 0.4s; } nav.scrolled { background: rgba(7,7,6,0.96); box-shadow: 0 4px 32px rgba(0,0,0,0.40); } .logo { display: flex; align-items: center; gap: 0.45rem; text-decoration: none; } .logo-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #8FCC1A, var(--lime2)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem; color: var(--ink); } .logo-text { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.03em; color: var(--lime2); } .nav-links { display: flex; gap: 1.6rem; list-style: none; } .nav-links a { text-decoration: none; color: var(--muted); font-size: var(--t-sm); font-weight: 500; transition: color 0.2s; } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-links a.active { color: var(--lime2); } .nav-cta { background: var(--lime); color: var(--ink); padding: 0.5rem 1.1rem; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: var(--t-sm); transition: all 0.2s; } .nav-cta:hover { background: var(--lime2); transform: scale(1.03); } /* Hamburger toggle (mobile only) */ .nav-toggle { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--text); } .nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; margin: 4px 0; border-radius: 1px; transition: transform 0.25s, opacity 0.25s; } nav.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } nav.open .nav-toggle span:nth-child(2) { opacity: 0; } nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ── HERO (animated home hero) ── */ #hero { position: relative; height: 100vh; min-height: 700px; overflow: hidden; display: flex; align-items: flex-end; } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease; background-size: cover; background-position: center; } .hero-slide.active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; animation: kenburns 14s ease-in-out infinite alternate; opacity: 0; transition: opacity 0.6s ease; } .hero-slide img.loaded { opacity: 1; } .hero-slide:nth-child(odd) img { animation-name: kenburns-alt; } @keyframes kenburns { 0%{transform:scale(1) translate(0,0)} 100%{transform:scale(1.06) translate(-0.8%,-1.2%)} } @keyframes kenburns-alt { 0%{transform:scale(1.04) translate(-0.5%,0)} 100%{transform:scale(1) translate(0.5%,-0.8%)} } .hero-slide:nth-child(1) img{object-position:center 35%;} .hero-slide:nth-child(2) img{object-position:center 60%;} .hero-slide:nth-child(3) img{object-position:center 40%;} .hero-slide:nth-child(4) img{object-position:center 55%;} .hero-slide:nth-child(5) img{object-position:center 50%;} .hero-slide:nth-child(6) img{object-position:center 30%;} .mood-veil { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 2s ease; } .mood-veil.active { opacity: 1; } .mv-cinematic{background:linear-gradient(to top,#080807 0%,rgba(8,8,7,0.65) 38%,rgba(8,8,7,0.12) 68%),linear-gradient(to right,rgba(8,8,7,0.85) 0%,rgba(8,8,7,0.2) 55%,transparent 100%);} .mv-statement{background:radial-gradient(ellipse at 50% 45%,rgba(8,8,7,0.35) 0%,rgba(8,8,7,0.88) 70%);} .mv-nightshift{background:radial-gradient(ellipse at 55% 50%,rgba(8,8,7,0.25) 0%,rgba(8,8,7,0.88) 65%),linear-gradient(to top,rgba(8,8,7,0.92) 0%,transparent 50%);} .mv-aspiration{background:linear-gradient(to top,#080807 0%,rgba(8,8,7,0.68) 32%,rgba(8,8,7,0.08) 70%);} .mv-movement{background:linear-gradient(to top,#080807 0%,rgba(8,8,7,0.6) 35%,rgba(8,8,7,0.15) 65%),linear-gradient(to right,rgba(8,8,7,0.88) 0%,rgba(8,8,7,0.3) 50%,transparent 100%);} .mv-editorial{background:linear-gradient(to top,#080807 0%,rgba(8,8,7,0.65) 30%,rgba(8,8,7,0.1) 65%),linear-gradient(to right,rgba(8,8,7,0.85) 0%,rgba(8,8,7,0.15) 60%,transparent 100%);} .hero-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(240,235,227,0.06) 0%, transparent 70%); top: -120px; right: -80px; pointer-events: none; z-index: 1; } .hero-glow2 { position: absolute; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(181,242,61,0.08) 0%, transparent 68%); bottom: -280px; left: -180px; pointer-events: none; z-index: 1; } .hero-inner { position: relative; z-index: 10; width: 100%; padding: 0 6vw 4rem; max-width: 780px; } .hero-eyebrow { display: flex; align-items: center; gap: 8px; font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime2); margin-bottom: 1.4rem; overflow: hidden; height: 18px; } .hero-eb-text { display: inline-block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), opacity 0.6s ease; } .hero-eb-text.out { transform: translateY(-100%); opacity: 0; } .hero-eb-text.in { transform: translateY(0); opacity: 1; } .eb-line { width: 28px; height: 1px; background: var(--lime); opacity: 0.5; flex-shrink: 0; } .hero-headlines { position: relative; min-height: clamp(200px, 26vw, 340px); margin-bottom: 1.2rem; } .hh { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s cubic-bezier(0.22,1,0.36,1); pointer-events: none; } .hh.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .hh.exit { opacity: 0; transform: translateY(-28px); } .hh h1 { font-weight: 800; font-size: clamp(3rem, 6.5vw, 6rem); line-height: 0.9; letter-spacing: -0.04em; color: #fff; } .hero-sub-wrap { min-height: 60px; margin-bottom: 2rem; overflow: hidden; } .hero-sub { font-size: var(--t-lg); color: var(--muted); line-height: 1.72; max-width: 500px; transition: opacity 0.7s ease, transform 0.7s ease; } .hero-sub.out { opacity: 0; transform: translateY(10px); } .hero-actions { display: flex; gap: 0.7rem; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; } .hero-indicator { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; height: 3px; background: rgba(255,255,255,0.06); } .hero-indicator-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--lime), var(--lime2)); border-radius: 0 2px 2px 0; will-change: width; } .btn-lime { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--lime); color: var(--ink); padding: 0.82rem 1.6rem; border-radius: var(--r); text-decoration: none; font-weight: 700; font-size: var(--t-body); transition: all 0.22s; } .btn-lime:hover { background: var(--lime2); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(181,242,61,0.45); } .btn-ghost { color: var(--muted); text-decoration: none; font-size: var(--t-sm); font-weight: 500; display: inline-flex; align-items: center; gap: 0.3rem; transition: color 0.2s; } .btn-ghost:hover { color: var(--text); } .trust-row { display: flex; gap: 0.6rem; flex-wrap: wrap; } .ti { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--t-caption); font-weight: 600; color: var(--muted); background: var(--glass); border: 1px solid var(--faint); padding: 0.4rem 0.85rem; border-radius: var(--pill); backdrop-filter: blur(8px); transition: border-color 0.25s, background 0.25s; letter-spacing: 0.02em; } .ti:hover { border-color: rgba(181,242,61,0.18); background: rgba(181,242,61,0.04); } .ti-icon { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; } .ti-icon svg { display: block; width: 14px; height: 14px; } /* ── PAGE HERO (shorter inner-page hero) ── */ .page-hero { position: relative; min-height: 64vh; padding: 7.5rem 5vw 4rem; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); } .page-hero-img { position: absolute; inset: 0; z-index: 0; } .page-hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; } .page-hero-img img.loaded { opacity: 1; } .page-hero-img::after { content:''; position:absolute; inset:0; background: linear-gradient(to top,#080807 0%,rgba(8,8,7,0.78) 30%,rgba(8,8,7,0.45) 60%,rgba(8,8,7,0.65) 100%); } .page-hero-inner { position: relative; z-index: 1; max-width: 760px; } .page-hero h1 { font-weight: 800; font-size: clamp(2.6rem, 5.5vw, 4.5rem); line-height: 0.93; letter-spacing: -0.045em; color: #fff; margin-bottom: 0.8rem; } .page-hero p.lede { font-size: var(--t-lg); color: var(--muted); max-width: 560px; line-height: 1.65; margin-bottom: 1.5rem; } /* ── MARQUEE ── */ .marquee { background: var(--lime2); padding: 0.65rem 0; overflow: hidden; } .mq-t { display: flex; gap: 3rem; white-space: nowrap; animation: mq 32s linear infinite; } .mq-t:hover { animation-play-state: paused; } @keyframes mq { to { transform: translateX(-50%); } } .mq-i { font-weight: 700; font-size: var(--t-caption); letter-spacing: 0.15em; text-transform: uppercase; color: rgba(8,8,7,0.55); display: inline-flex; align-items: center; gap: 0.7rem; } .mq-s { color: rgba(8,8,7,0.22); font-weight: 300; } /* ─── BENTO STATS ───────────────────────────────── */ #bento-stats { background: var(--ink2); padding: 3.5rem 5vw; } .bento-grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } .bs { background: var(--glass); border: 1px solid var(--faint); border-radius: var(--rx); padding: 1.8rem 1.6rem; backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 0.4rem; transition: border-color 0.3s, background 0.3s; position: relative; overflow: hidden; } .bs::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,rgba(181,242,61,0.30),rgba(181,242,61,0.06)); border-radius:var(--rx) var(--rx) 0 0; } .bs:hover { border-color: rgba(181,242,61,0.18); background: rgba(181,242,61,0.04); transform: translateY(-4px); } .bs:first-child { border-color: rgba(181,242,61,0.18); background: rgba(181,242,61,0.06); } .bs-icon { height: 40px; margin-bottom: 0.3rem; display: flex; align-items: center; } .bs-icon svg { display: block; } .bs-n { font-weight: 800; font-size: clamp(2.8rem, 4vw, 3.6rem); letter-spacing: -0.06em; color: var(--lime2); line-height: 1; } .bs-label { font-size: var(--t-body); font-weight: 600; color: var(--text); } .bs-sub { font-size: var(--t-body); color: var(--muted); line-height: 1.5; } /* ─── HOW MONEY MOVES ────────────────────────────── */ #flow-section { background: #0B0B0B; padding: 5rem 5vw; border-top: 1px solid var(--faint); } .flow-top { display: grid; grid-template-columns: 1fr auto; align-items: flex-start; gap: 2rem; margin-bottom: 2.5rem; } .flow-top h2 { font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 0.95; letter-spacing: -0.05em; color: #fff; } .flow-top p { font-size: var(--t-body); color: var(--muted); max-width: 280px; line-height: 1.65; text-align: right; } .flow-scene { display:flex; align-items:flex-start; padding:2.5rem 2.5rem; background:linear-gradient(135deg,#100F0C 0%,#080807 55%,#0D0C0A 100%); border:1px solid rgba(255,255,255,0.06); border-radius:20px; position:relative; overflow:hidden; } .flow-scene::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 65% 90% at 50% 50%,rgba(181,242,61,0.055) 0%,transparent 68%),radial-gradient(ellipse 32% 65% at 11% 50%,rgba(255,255,255,0.018) 0%,transparent 70%),radial-gradient(ellipse 32% 65% at 89% 50%,rgba(240,235,227,0.018) 0%,transparent 70%); pointer-events:none; } .flow-scene::after { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,0.038) 0.8px,transparent 0.8px); background-size:20px 20px; pointer-events:none; } .fn-node { flex:0 0 auto; width:150px; display:flex; flex-direction:column; align-items:center; gap:0.65rem; padding-top:1rem; position:relative; z-index:1; } .fn-card-node { width:234px; padding-top:21px; } .fn-ring { width:96px; height:96px; border-radius:50%; background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 8px rgba(255,255,255,0.006),inset 0 1px 0 rgba(255,255,255,0.04); } .fn-ring-d { background:rgba(240,235,227,0.025); border-color:rgba(240,235,227,0.10); box-shadow:0 0 0 8px rgba(240,235,227,0.006),inset 0 1px 0 rgba(240,235,227,0.04); } .fn-label { font-size:var(--t-caption); font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:rgba(255,255,255,0.34); text-align:center; } .fn-label-c { color:rgba(181,242,61,0.72); } .fn-sub { font-size:0.72rem; color:rgba(255,255,255,0.30); text-align:center; line-height:1.5; margin:0; } .fn-plat-group { display:flex; align-items:flex-start; flex:0 0 auto; position:relative; z-index:1; } .fn-node-plat { width:182px; padding-top:0; } .fn-ring-plat { width:156px; height:156px; background:rgba(255,255,255,0.028); border:1px solid rgba(255,255,255,0.11); box-shadow:0 0 0 1px rgba(255,255,255,0.04),0 0 28px rgba(255,255,255,0.04),inset 0 1px 0 rgba(255,255,255,0.07); } .fn-streams { display:flex; flex-direction:column; gap:10px; padding-top:34px; padding-right:4px; flex:0 0 120px; } .fni-row { display:flex; align-items:center; gap:6px; } .fni-lbl { font-size:0.60rem; font-weight:600; letter-spacing:0.04em; color:rgba(255,255,255,0.30); text-align:right; flex:0 0 48px; white-space:nowrap; } .fni-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.14)); position:relative; overflow:hidden; } .fni-dot { position:absolute; top:-2px; left:-6px; width:5px; height:5px; border-radius:50%; background:#B5F23D; box-shadow:0 0 6px rgba(181,242,61,0.55); animation:fni-travel 2.8s linear infinite; } .fni-d2 { animation-delay:0.70s; } .fni-d3 { animation-delay:1.40s; } .fni-d4 { animation-delay:2.10s; } @keyframes fni-travel { 0%{left:-6px;opacity:0} 6%{opacity:1} 88%{opacity:0.9} 100%{left:100%;opacity:0} } .fp-cluster { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:18px; } .fp-tile { width:49px; height:49px; border-radius:13px; background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; overflow:hidden; } .fn-card-wrap { perspective:700px; } .fn-card { width:177px; height:114px; border-radius:16px; background:linear-gradient(148deg,#1D1B16 0%,#0B0A08 100%); border:1px solid rgba(181,242,61,0.22); position:relative; overflow:hidden; animation:fn-card-float 6s ease-in-out infinite; } .fnc-topedge { position:absolute; top:0; left:12%; right:12%; height:1px; background:linear-gradient(90deg,transparent,rgba(181,242,61,0.55) 50%,transparent); } .fnc-chip { position:absolute; top:22px; left:17px; width:29px; height:21px; border-radius:4.5px; background:linear-gradient(135deg,#CAFF50,#7AB820); animation:fnc-chip-pulse 3s ease-in-out infinite; } .fnc-chip::before { content:''; position:absolute; inset:0; border-left:1px solid rgba(0,0,0,0.22); border-right:1px solid rgba(0,0,0,0.18); margin:0 9px; } .fnc-chip::after { content:''; position:absolute; left:0; right:0; top:7px; bottom:7px; border-top:1px solid rgba(0,0,0,0.18); border-bottom:1px solid rgba(0,0,0,0.14); } .fnc-balance { position:absolute; bottom:16px; left:17px; display:flex; flex-direction:column; gap:2px; } .fnc-lbl { font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(181,242,61,0.50); } .fnc-amt { font-size:1.14rem; font-weight:700; color:rgba(181,242,61,0.90); letter-spacing:-0.02em; line-height:1; } .fnc-brand{ position:absolute; bottom:16px; right:16px; font-size:0.68rem; font-weight:700; letter-spacing:0.04em; color:rgba(181,242,61,0.38); } .fnc-shimmer { position:absolute; top:-20%; bottom:-20%; width:200%; left:0; background:linear-gradient(108deg,transparent 42%,rgba(255,255,255,0.05) 48%,rgba(181,242,61,0.10) 50%,rgba(255,255,255,0.05) 52%,transparent 58%); transform:translateX(-100%); pointer-events:none; transition:none; } .fn-card:hover .fnc-shimmer { animation:fnc-shimmer-sweep 0.8s ease-out forwards; } @keyframes fn-card-float { 0%,100% { transform:perspective(700px) rotateX(5deg) rotateY(-3deg) translateY(0); box-shadow:0 0 0 1px rgba(181,242,61,0.05),0 4px 28px rgba(181,242,61,0.22),0 16px 44px rgba(0,0,0,0.60),inset 0 1px 0 rgba(181,242,61,0.14); } 50% { transform:perspective(700px) rotateX(5deg) rotateY(-3deg) translateY(-6px); box-shadow:0 0 0 1px rgba(181,242,61,0.08),0 4px 36px rgba(181,242,61,0.32),0 22px 50px rgba(0,0,0,0.55),inset 0 1px 0 rgba(181,242,61,0.20); } } @keyframes fnc-chip-pulse { 0%,100% { box-shadow:0 0 8px rgba(181,242,61,0.28); } 50% { box-shadow:0 0 20px rgba(181,242,61,0.55); } } @keyframes fnc-shimmer-sweep { 0% { transform:translateX(-100%); } 100% { transform:translateX(50%); } } .fn-node-driver { width:148px; padding-top:10px; gap:0.5rem; } .fn-driver-illu { width:100%; display:block; filter:drop-shadow(0 0 20px rgba(181,242,61,0.07)); } .fc-right-wrap { position:relative; width:100%; } .fc-track-r { background:linear-gradient(90deg,rgba(181,242,61,0.06) 0%,rgba(181,242,61,0.50) 55%,rgba(181,242,61,0.85) 100%); height:2.5px; } .fc-arrive-dot { position:absolute; right:-1px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:rgba(181,242,61,0.78); box-shadow:0 0 12px rgba(181,242,61,0.62); animation:dn-flicker 1.8s ease-in-out infinite; } @keyframes dn-flicker { 0%,100%{opacity:0.88} 50%{opacity:0.10} } .flow-connector { flex:1; position:relative; z-index:1; padding-top:78px; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:48px; } .fc-track { width:100%; height:2px; background:linear-gradient(90deg,rgba(181,242,61,0.06),rgba(181,242,61,0.40),rgba(181,242,61,0.06)); border-radius:2px; position:relative; overflow:hidden; } .fc-pulse { position:absolute; top:-1px; left:-12px; width:12px; height:4px; border-radius:2px; background:#B5F23D; animation:fc-run 2.4s linear infinite; } .fc-pulse2 { animation-delay:1.2s; } @keyframes fc-run { 0%{left:-12px;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:100%;opacity:0} } .fc-badge { font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:rgba(181,242,61,0.42); white-space:nowrap; text-align:center; } .flow-repay { display:flex; align-items:center; gap:0.75rem; margin-top:1rem; position:relative; z-index:1; } .flow-repay::before,.flow-repay::after { content:''; flex:1; height:0; border-top:1px dashed rgba(181,242,61,0.16); } .flow-repay-lbl { font-size:0.62rem; letter-spacing:0.07em; text-transform:uppercase; color:rgba(181,242,61,0.36); white-space:nowrap; } /* ─── MANIFESTO ───────────────────────────────────── */ #manifesto { background: var(--ink); padding: 7rem 5vw; position: relative; overflow: hidden; } #manifesto::before { content: 'TESHA'; position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: clamp(6rem, 15vw, 18rem); line-height: 1; letter-spacing: -0.05em; color: rgba(255,255,255,0.02); pointer-events: none; white-space: nowrap; user-select: none; } .mf-wrap { position: relative; z-index: 1; } .mf-headline { font-weight: 800; font-size: clamp(3.2rem, 6vw, 6.8rem); line-height: 0.91; letter-spacing: -0.05em; color: #fff; margin-bottom: 4rem; max-width: 820px; } .mf-text { max-width: 680px; margin-bottom: 1rem; } .mf-text p { font-size: var(--t-lg); line-height: 1.85; color: var(--muted); } .mf-text p strong { color: var(--text); font-weight: 600; } .mf-billboard { border-left: 3px solid var(--lime); padding: 0.4rem 0 0.4rem 1.6rem; margin: 0 0 3rem 0; max-width: 680px; } .mf-billboard p { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.5; color: var(--text); margin-bottom: 0; } .mf-billboard p .gold-serif { font-size: 1em; } .mf-convictions { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.75rem; margin-bottom: 2.5rem; } .mf-conv-card { background: var(--glass); border: 1px solid var(--faint); border-radius: var(--rx); padding: 2rem 1.8rem; transition: border-color 0.3s, background 0.3s, transform 0.3s; position: relative; overflow: hidden; } .mf-conv-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,rgba(181,242,61,0.30),rgba(181,242,61,0.06)); border-radius:var(--rx) var(--rx) 0 0; } .mf-conv-card:hover { border-color: rgba(181,242,61,0.18); background: rgba(181,242,61,0.04); transform: translateY(-4px); } .mf-conv-illus { height: 110px; margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: center; position: relative; } .mf-conv-illus svg { display: block; position: relative; z-index: 1; } .mf-conv-illus::before { content:''; position:absolute; width:100px; height:100px; border-radius:50%; background:rgba(181,242,61,0.35); filter:blur(30px); opacity:0.5; animation: iconPulse 3s ease-in-out infinite; } .mf-conv-card h3 { font-weight: 700; font-size: var(--t-sub); color: var(--text); margin-bottom: 0.5rem; letter-spacing: -0.03em; line-height: 1.2; } .mf-conv-card p { font-size: var(--t-body); color: var(--muted); line-height: 1.70; margin: 0; } .mf-close { font-weight: 600; font-size: var(--t-lg); color: var(--text); text-align: center; } /* ── IDENTITY BAND ── */ #identity { background: var(--lime2); padding: 5rem 5vw; position: relative; overflow: hidden; } #identity::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(8,8,7,0.04) 0, rgba(8,8,7,0.04) 1px, transparent 1px, transparent 16px); } #identity::after { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(181,242,61,0.4), transparent 65%); top: -200px; right: -100px; pointer-events: none; } .id-inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .id-pre { font-weight: 600; font-size: var(--t-caption); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(8,8,7,0.40); margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: center; gap: 0.7rem; } .id-rule { width: 18px; height: 1.5px; background: rgba(8,8,7,0.25); } .id-h { font-weight: 800; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.1; letter-spacing: -0.04em; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 0; } .id-h .serif-light { opacity: 0.65; } .id-line { padding: 0.6rem 0; } .id-line + .id-line { border-top: 1px solid rgba(8,8,7,0.12); padding-top: 0.7rem; } /* ─── PROBLEM ────────────────────────────────────── */ #problem { background: var(--ink2); padding: 7rem 5vw; } .problem-h { font-weight: 800; font-size: clamp(2.8rem, 5.5vw, 5.5rem); line-height: 0.92; letter-spacing: -0.05em; color: #fff; margin-bottom: 3.5rem; max-width: 700px; } .pb-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.75rem; margin-bottom: 2.5rem; } .pb-card { padding: 2rem 1.8rem; } .pb-illus { height: 110px; margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: center; position: relative; } .pb-illus svg { display: block; } .pb-illus::before { content:''; position:absolute; width:100px; height:100px; border-radius:50%; filter:blur(30px); opacity:0.5; animation: iconPulse 3s ease-in-out infinite; } .pb-card:nth-child(1) .pb-illus::before { background: rgba(220,60,60,0.45); } .pb-card:nth-child(2) .pb-illus::before { background: rgba(220,60,60,0.40); } .pb-card:nth-child(3) .pb-illus::before { background: rgba(181,242,61,0.35); } @keyframes iconPulse { 0%,100%{ opacity:0.45; transform:scale(1); } 50%{ opacity:0.7; transform:scale(1.12); } } .pb-card h3 { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.3; color: #fff; margin-bottom: 0.6rem; } .pb-fix { font-size: var(--t-body); color: var(--lime); line-height: 1.70; margin: 0; font-weight: 500; } .pb-billboard { border-left: 3px solid var(--lime); padding: 0.4rem 0 0.4rem 1.6rem; margin: 0 0 2.5rem 0; max-width: 680px; } .pb-billboard blockquote { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.5; color: var(--text); margin: 0; } .pb-billboard blockquote span { color: var(--lime2); } /* ─── CARD SECTION ───────────────────────────────── */ #card-section { background: var(--ink3); padding: 7rem 5vw; position: relative; overflow: hidden; } #card-section::before { content: ''; position: absolute; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(240,235,227,0.07) 0%, transparent 65%); top: -300px; right: -200px; pointer-events: none; } #card-section::after { content: ''; position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(181,242,61,0.08) 0%, transparent 65%); bottom: -200px; left: -150px; pointer-events: none; } .cs-wrap { position: relative; z-index: 1; } .cs-title { text-align: center; margin-bottom: 3.5rem; } .cs-title h2 { font-weight: 800; font-size: clamp(3rem, 6vw, 6rem); line-height: 0.92; letter-spacing: -0.05em; color: #fff; } .cs-title p { font-size: var(--t-lg); color: var(--muted); margin-top: 1rem; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.72; } .cs-hero-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: center; margin-bottom: 2.5rem; } .cs-card-showcase { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } .phone-mock { width: 280px; margin: 0 0 0 auto; background: #0A0A09; border: 2px solid rgba(255,255,255,0.10); border-radius: 38px; padding: 12px 14px 10px; box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); position: relative; overflow: hidden; } .phone-mock::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100px; height:28px; background:#0A0A09; border-radius:0 0 16px 16px; z-index:10; border:1px solid rgba(255,255,255,0.06); border-top:none; } .pm-status { display:flex; justify-content:space-between; align-items:center; padding:8px 6px 6px; font-size:10px; font-weight:600; color:rgba(255,255,255,0.5); font-family:system-ui; } .pm-nav { display:flex; justify-content:space-between; align-items:center; padding:10px 4px 12px; } .pm-nav-brand { font-weight:800; font-size:15px; color:var(--lime2); letter-spacing:-0.02em; display:flex; align-items:center; gap:5px; } .pm-nav-brand::before { content:'✦'; font-size:10px; color:var(--lime); } .pm-nav-icon { font-size:16px; color:rgba(255,255,255,0.35); cursor:default; } .pm-services { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:0 2px 14px; } .pm-svc { display:flex; flex-direction:column; align-items:center; gap:5px; } .pm-svc-icon { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:14px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.5); transition:all 0.2s; } .pm-svc:last-child .pm-svc-icon { background:linear-gradient(135deg,rgba(181,242,61,0.25),rgba(181,242,61,0.10)); border-color:rgba(181,242,61,0.25); color:var(--lime); } .pm-svc-label { font-size:8.5px; color:rgba(255,255,255,0.4); font-weight:500; text-align:center; line-height:1.2; } .pm-card { background:linear-gradient(145deg,rgba(18,16,10,0.95),rgba(10,10,8,0.95)); border:1px solid rgba(181,242,61,0.20); border-radius:16px; padding:14px 14px 12px; margin:0 2px 12px; position:relative; overflow:hidden; } .pm-card::after { content:''; position:absolute; top:-20%; right:-10%; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(181,242,61,0.12),transparent 65%); pointer-events:none; } .pm-card-chip { width:28px; height:18px; background:linear-gradient(135deg,#8FCC1A,#B5F23D); border-radius:4px; margin-bottom:12px; box-shadow:0 2px 6px rgba(0,0,0,0.4); } .pm-card-num { font-size:8.5px; color:rgba(255,255,255,0.22); letter-spacing:0.14em; margin-bottom:1px; } .pm-card-name { font-size:9px; font-weight:600; color:rgba(255,255,255,0.45); letter-spacing:0.05em; margin-bottom:10px; } .pm-card-row { display:flex; justify-content:space-between; align-items:flex-end; } .pm-card-bal-label { font-size:7px; color:rgba(255,255,255,0.22); text-transform:uppercase; letter-spacing:0.10em; margin-bottom:1px; } .pm-card-bal { font-weight:800; font-size:18px; color:var(--lime2); letter-spacing:-0.03em; } .pm-card-bal .pm-bal-cents { font-size:11px; color:var(--muted); font-weight:600; } .pm-card-brand { font-size:10px; font-weight:700; color:rgba(181,242,61,0.35); } .pm-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 2px 12px; } .pm-stat-box { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:10px 10px 8px; text-align:center; } .pm-stat-bars { display:flex; gap:2px; justify-content:center; margin-bottom:6px; height:28px; align-items:flex-end; } .pm-stat-bar { width:4px; border-radius:2px; background:rgba(181,242,61,0.30); } .pm-stat-bar.hi { background:rgba(181,242,61,0.65); } .pm-stat-label { font-size:8px; color:rgba(255,255,255,0.3); font-weight:500; margin-bottom:2px; } .pm-stat-val { font-size:12px; font-weight:700; color:var(--cream); letter-spacing:-0.02em; } .pm-bottom { display:flex; justify-content:space-around; padding:10px 0 4px; border-top:1px solid rgba(255,255,255,0.06); } .pm-bottom-icon { font-size:16px; color:rgba(255,255,255,0.2); } .pm-bottom-icon.active { color:var(--lime); } .physical-card { background: linear-gradient(145deg, rgba(22,18,10,0.96), rgba(14,11,6,0.96)); border: 1px solid rgba(181,242,61,0.18); border-radius: 20px; padding: 1.8rem; max-width: 320px; width: 100%; box-shadow: 0 32px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(181,242,61,0.08); position: relative; overflow: hidden; z-index: 1; } .physical-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.35), transparent); } .physical-card::after { content: ''; position: absolute; top: -30%; right: -15%; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(181,242,61,0.10), transparent 65%); pointer-events: none; } .pc-chip { width: 36px; height: 24px; background: linear-gradient(135deg,#8FCC1A,#B5F23D); border-radius: 5px; margin-bottom: 1.6rem; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } .pc-dots { font-size: var(--t-caption); letter-spacing: 0.15em; color: rgba(255,255,255,0.22); margin-bottom: 0.22rem; } .pc-name { font-weight: 600; font-size: var(--t-caption); color: rgba(255,255,255,0.48); margin-bottom: 1.4rem; letter-spacing: 0.05em; } .pc-row { display: flex; justify-content: space-between; align-items: flex-end; } .pc-lbl { font-size: 0.50rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.22); margin-bottom: 0.1rem; } .pc-bal { font-weight: 800; font-size: 1.6rem; color: var(--lime2); letter-spacing: -0.04em; } .pc-brand { font-weight: 700; font-size: var(--t-sm); color: rgba(181,242,61,0.32); } .cs-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; } .cs-step-card { padding: 1.5rem 1.2rem; } .cs-n { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--t-caption); background: rgba(240,235,227,0.10); border: 1px solid rgba(240,235,227,0.20); color: var(--cream); margin-bottom: 0.8rem; transition: all 0.2s; } .cs-n.live { background: var(--lime); color: var(--ink); border-color: var(--lime); animation: tg 2.5s ease-in-out infinite; } @keyframes tg { 0%,100%{box-shadow:0 0 0 0 rgba(181,242,61,0.25)} 50%{box-shadow:0 0 0 8px rgba(181,242,61,0)} } .cs-step-card strong { display: block; font-weight: 700; font-size: var(--t-body); color: var(--text); margin-bottom: 0.3rem; letter-spacing: -0.02em; } .cs-step-card span { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; } .cs-stat-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } .cs-stat { background: var(--glass); border: 1px solid var(--faint); border-radius: var(--rx); padding: 1rem 1.2rem; text-align: center; transition: all 0.25s; } .cs-stat:hover { border-color: rgba(240,235,227,0.18); } .cs-stat-label { font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; } .cs-stat-value { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.04em; color: var(--lime2); } .cs-stat-sub { font-size: var(--t-caption); color: var(--muted); margin-top: 0.15rem; } /* ─── REPAYMENT ───────────────────────────────────── */ #repayment { background: var(--ink2); padding: 6rem 5vw; } .rep-header { margin-bottom: 3rem; } .rep-header h2 { font-weight: 800; font-size: clamp(2.4rem, 4.5vw, 4.2rem); line-height: 0.93; letter-spacing: -0.05em; color: #fff; max-width: 600px; } .rep-header p { font-size: var(--t-lg); color: var(--muted); margin-top: 0.9rem; max-width: 460px; line-height: 1.72; } .rep-flow-panel { background: rgba(8,8,7,0.80); border: 1px solid var(--faint); border-radius: var(--rx); padding: 3rem 2rem; margin-bottom: 2rem; position: relative; overflow: hidden; } .rep-flow-panel::before { content:''; position:absolute; width:500px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(181,242,61,0.07),transparent 65%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; } .rep-flow { display:flex; align-items:flex-start; justify-content:center; gap:0; position:relative; z-index:1; } .rep-flow-step { display:flex; flex-direction:column; align-items:center; gap:0.5rem; width:180px; } .rep-flow-icon { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(181,242,61,0.16); background:rgba(181,242,61,0.03); position:relative; transition:all 0.3s; } .rep-flow-icon::before { content:''; position:absolute; inset:-10px; border-radius:50%; background:radial-gradient(circle,rgba(181,242,61,0.08),transparent 70%); pointer-events:none; } .rep-flow-step.active .rep-flow-icon { border-color:rgba(181,242,61,0.45); background:rgba(181,242,61,0.08); } .rep-flow-step.active .rep-flow-icon::before { background:radial-gradient(circle,rgba(181,242,61,0.18),transparent 70%); } .rep-flow-num { font-size:0.6rem; font-weight:700; color:var(--lime); text-transform:uppercase; letter-spacing:0.12em; opacity:0.6; } .rep-flow-label { font-weight:700; font-size:var(--t-body); color:var(--text); text-align:center; line-height:1.2; } .rep-flow-sub { font-size:var(--t-caption); color:var(--muted); text-align:center; line-height:1.4; max-width:140px; } .rep-flow-connector { flex:0 1 100px; display:flex; align-items:center; justify-content:center; padding-top:10px; margin-bottom:3.2rem; } .rep-flow-connector svg { display:block; } .rep-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .rep-card { padding: 2rem 1.8rem; position:relative; transition: border-color 0.3s; } .rep-card.featured { border-color: rgba(181,242,61,0.30); } .rep-card.featured::after { content:''; position:absolute; top:-1px; left:20%; right:20%; height:2px; background:linear-gradient(90deg,transparent,var(--lime),transparent); border-radius:2px; } .rep-icon-slot { width:48px; height:48px; margin-bottom:1.2rem; display:flex; align-items:center; justify-content:center; border-radius:14px; background:rgba(181,242,61,0.05); border:1px solid rgba(181,242,61,0.10); } .rep-card h3 { font-weight: 700; font-size: var(--t-sub); color: var(--text); margin-bottom: 0.45rem; letter-spacing: -0.03em; line-height: 1.2; } .rep-card .rep-desc { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; margin: 0; } .rep-tag { display: inline-flex; align-items: center; background: rgba(181,242,61,0.08); border: 1px solid rgba(181,242,61,0.22); color: var(--lime); font-size: var(--t-caption); font-weight: 700; padding: 0.22rem 0.6rem; border-radius: var(--pill); margin-top: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; } /* ─── ROADMAP ─────────────────────────────────────── */ #roadmap { background: var(--ink); padding: 7rem 5vw; } .rm-header { margin-bottom: 4rem; } .rm-header h2 { font-weight: 800; font-size: clamp(2.8rem, 5vw, 5rem); line-height: 0.92; letter-spacing: -0.05em; color: #fff; max-width: 640px; } .rm-header p { font-size: var(--t-lg); color: var(--muted); margin-top: 0.9rem; max-width: 480px; line-height: 1.72; } .rm-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; position: relative; } .rm-col { position: relative; z-index: 1; } .rm-card { padding: 2rem 1.6rem; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .rm-card-illus { height: 160px; overflow: hidden; border-radius: var(--rx) var(--rx) 0 0; margin: -2rem -1.6rem 1.2rem; position: relative; } .rm-card-illus img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease, filter 0.55s ease; } .rm-card-illus::after { content:''; position:absolute; inset:0; background: linear-gradient(to bottom, transparent 30%, rgba(7,7,6,0.85) 100%); pointer-events: none; z-index: 1; } .rm-col:nth-child(1) .rm-card-illus img { filter: brightness(0.55) saturate(0.8); } .rm-col:nth-child(2) .rm-card-illus img { filter: brightness(0.65) saturate(0.85); } .rm-col:nth-child(3) .rm-card-illus img { filter: brightness(0.75) saturate(0.9); } .rm-col:nth-child(4) .rm-card-illus img { filter: brightness(0.85) saturate(1); } .rm-col:nth-child(1):hover .rm-card-illus img { filter: brightness(0.65) saturate(0.9); transform: scale(1.06); } .rm-col:nth-child(2):hover .rm-card-illus img { filter: brightness(0.75) saturate(0.9); transform: scale(1.06); } .rm-col:nth-child(3):hover .rm-card-illus img { filter: brightness(0.85) saturate(0.95); transform: scale(1.06); } .rm-col:nth-child(4):hover .rm-card-illus img { filter: brightness(0.95) saturate(1); transform: scale(1.06); } #roadmap .rm-col.reveal { transition-duration: 0.8s; } #roadmap .d1 { transition-delay: 0.28s; } #roadmap .d2 { transition-delay: 0.56s; } #roadmap .d3 { transition-delay: 0.84s; } .rm-col .card-glass::before { transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); } .rm-col.reveal.in .card-glass::before { transform: scaleX(1); } .rm-col.d1.in .card-glass::before { transition-delay: 0.28s; } .rm-col.d2.in .card-glass::before { transition-delay: 0.56s; } .rm-col.d3.in .card-glass::before { transition-delay: 0.84s; } @keyframes rmFlash { 0%{box-shadow:0 0 0 rgba(181,242,61,0)} 45%{box-shadow:0 0 35px rgba(181,242,61,0.18),0 0 70px rgba(181,242,61,0.06)} 100%{box-shadow:0 0 0 rgba(181,242,61,0)} } .rm-col.reveal.in .rm-card { animation: rmFlash 1.1s ease-out; } .rm-col.d1.in .rm-card { animation-delay: 0.28s; } .rm-col.d2.in .rm-card { animation-delay: 0.56s; } .rm-col.d3.in .rm-card { animation-delay: 0.84s; } @keyframes rmPulse { 0%,100%{box-shadow:0 0 40px rgba(181,242,61,0.07),0 0 80px rgba(181,242,61,0.03)} 50%{box-shadow:0 0 55px rgba(181,242,61,0.14),0 0 100px rgba(181,242,61,0.06)} } .rm-col:nth-child(4).reveal.in .rm-card { animation: rmFlash 1.1s 0.84s ease-out, rmPulse 3.5s 2s ease-in-out infinite; } .rm-col:nth-child(1) .rm-card { border-color: rgba(181,242,61,0.15); background: rgba(181,242,61,0.03); } .rm-col:nth-child(2) .rm-card { border-color: rgba(181,242,61,0.20); background: rgba(181,242,61,0.05); } .rm-col:nth-child(3) .rm-card { border-color: rgba(181,242,61,0.28); background: rgba(181,242,61,0.07); } .rm-col:nth-child(4) .rm-card { border-color: rgba(181,242,61,0.38); background: rgba(181,242,61,0.10); } .rm-col:nth-child(1) .card-glass::before { background: linear-gradient(90deg,rgba(181,242,61,0.18),rgba(181,242,61,0.04)); } .rm-col:nth-child(2) .card-glass::before { background: linear-gradient(90deg,rgba(181,242,61,0.28),rgba(181,242,61,0.08)); } .rm-col:nth-child(3) .card-glass::before { background: linear-gradient(90deg,rgba(181,242,61,0.40),rgba(181,242,61,0.12)); } .rm-col:nth-child(4) .card-glass::before { background: linear-gradient(90deg,rgba(181,242,61,0.60),rgba(181,242,61,0.25)); } .rm-col:hover .rm-card { transform: translateY(-6px); } .rm-col:nth-child(1):hover .rm-card { box-shadow: 0 0 28px rgba(181,242,61,0.10); border-color: rgba(181,242,61,0.28); } .rm-col:nth-child(2):hover .rm-card { box-shadow: 0 0 32px rgba(181,242,61,0.14); border-color: rgba(181,242,61,0.34); } .rm-col:nth-child(3):hover .rm-card { box-shadow: 0 0 40px rgba(181,242,61,0.18); border-color: rgba(181,242,61,0.44); } .rm-col:nth-child(4):hover .rm-card { box-shadow: 0 0 55px rgba(181,242,61,0.24), 0 0 110px rgba(181,242,61,0.08); border-color: rgba(181,242,61,0.58); } .rm-col:nth-child(1) .rm-year { color: rgba(181,242,61,0.50); } .rm-col:nth-child(2) .rm-year { color: rgba(181,242,61,0.65); } .rm-col:nth-child(3) .rm-year { color: rgba(181,242,61,0.82); } .rm-col:nth-child(4) .rm-year { color: var(--lime); } .rm-col:nth-child(1) .rm-title { color: rgba(240,235,227,0.78); } .rm-col:nth-child(2) .rm-title { color: rgba(240,235,227,0.88); } .rm-col:nth-child(3) .rm-title { color: rgba(255,255,255,0.95); } .rm-col:nth-child(4) .rm-title { color: #fff; } .rm-col:nth-child(1) .rm-desc { color: rgba(240,235,227,0.40); } .rm-col:nth-child(2) .rm-desc { color: rgba(240,235,227,0.48); } .rm-col:nth-child(3) .rm-desc { color: rgba(240,235,227,0.56); } .rm-col:nth-child(4) .rm-desc { color: rgba(240,235,227,0.65); } .rm-year { font-weight: 600; font-size: var(--t-caption); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.4rem; } .rm-title { font-weight: 700; font-size: var(--t-body); line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 0.4rem; } .rm-desc { font-size: var(--t-sm); line-height: 1.62; margin-bottom: 0.85rem; } .rm-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; } .rm-tag-y1 { background: rgba(181,242,61,0.07); border: 1px solid rgba(181,242,61,0.14); border-radius: var(--pill); padding: 0.14rem 0.5rem; font-size: 0.60rem; font-weight: 700; color: rgba(181,242,61,0.60); white-space: nowrap; } .rm-tag-y2 { background: rgba(181,242,61,0.10); border: 1px solid rgba(181,242,61,0.22); border-radius: var(--pill); padding: 0.14rem 0.5rem; font-size: 0.60rem; font-weight: 700; color: rgba(181,242,61,0.72); white-space: nowrap; } .rm-tag-y3 { background: rgba(181,242,61,0.14); border: 1px solid rgba(181,242,61,0.30); border-radius: var(--pill); padding: 0.14rem 0.5rem; font-size: 0.60rem; font-weight: 700; color: rgba(181,242,61,0.85); white-space: nowrap; } .rm-tag-y4 { background: rgba(181,242,61,0.18); border: 1px solid rgba(181,242,61,0.40); border-radius: var(--pill); padding: 0.14rem 0.5rem; font-size: 0.60rem; font-weight: 800; color: var(--lime); white-space: nowrap; } /* ─── FEATURES ───────────────────────────────────── */ #features { background: var(--ink2); padding: 7rem 5vw; } .feat-header { margin-bottom: 3.4rem; } .feat-header h2 { font-weight: 800; font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 0.93; letter-spacing: -0.05em; color: #fff; max-width: 560px; } .feat-header p { font-size: var(--t-lg); color: var(--muted); margin-top: 1rem; max-width: 460px; line-height: 1.72; } .feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .feat-card { padding: 2.4rem 2rem 2.2rem; } .feat-illus { height: 72px; margin-bottom: 1.1rem; display: flex; align-items: center; } .feat-illus svg { display: block; } .feat-card h3 { font-weight: 700; font-size: var(--t-sub); color: var(--text); margin-bottom: 0.45rem; letter-spacing: -0.03em; line-height: 1.2; } .feat-card p { font-size: var(--t-body); color: var(--muted); line-height: 1.70; margin: 0; } /* ─── TESTIMONIALS ───────────────────────────────── */ #voices { background: var(--ink2); padding: 7rem 5vw; } .voices-head { margin-bottom: 2.8rem; } .voices-head h2 { font-weight: 800; font-size: clamp(2rem, 3.2vw, 3rem); letter-spacing: -0.05em; color: #fff; } .tg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .tc { padding: 2rem 1.6rem; display: flex; flex-direction: column; } .tc-avatar { width: 48px; height: 48px; border-radius: 50%; margin-bottom: 1.2rem; overflow: hidden; } .tc-avatar svg { display: block; width: 48px; height: 48px; } .tc-stars { font-size: var(--t-sm); color: var(--lime2); letter-spacing: 0.06em; margin-bottom: 0.65rem; } .tc-quote { font-family: var(--fi); font-style: italic; font-weight: 300; font-size: 1.05rem; line-height: 1.72; color: var(--muted); flex: 1; } .tc-who { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--faint); } .tc-name { font-weight: 700; font-size: var(--t-body); color: var(--text); } .tc-meta { font-size: var(--t-sm); color: var(--muted); margin-top: 0.1rem; } /* ─── PLATFORMS ──────────────────────────────────── */ #platforms { background: var(--ink3); padding: 3rem 5vw; border-top: 1px solid var(--faint); } .plat-row { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .plat-lbl { font-weight: 600; font-size: var(--t-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .plat-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; } .pp { background: var(--glass); border: 1px solid var(--gb); border-radius: var(--pill); padding: 0.44rem 1rem; font-weight: 600; font-size: var(--t-sm); color: var(--muted); backdrop-filter: blur(8px); transition: all 0.2s; cursor: default; } .pp:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); } /* ─── COMMUNITY STRIP (full-bleed image band) ────── */ #community-strip { position:relative; height:60vh; min-height:380px; overflow:hidden; } #community-strip img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.4s ease; } #community-strip img.loaded { opacity:1; } #community-strip::after { content:''; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(8,8,7,0.55) 0%, rgba(8,8,7,0.20) 40%, rgba(8,8,7,0.85) 100%); } .community-overlay { position:absolute; inset:0; z-index:1; display:flex; align-items:flex-end; padding:5rem 6vw; } .community-overlay h2 { font-weight:800; font-size:clamp(2rem,4vw,3.5rem); line-height:0.95; letter-spacing:-0.04em; color:#fff; max-width:720px; } .community-overlay h2 .gold-serif { display:block; } /* ─── CTA ────────────────────────────────────────── */ #cta { position: relative; padding: 7rem 5vw; background: var(--ink); overflow: hidden; text-align: center; } #cta::before { content: ''; position: absolute; top: -350px; left: 50%; transform: translateX(-50%); width: 900px; height: 900px; background: radial-gradient(circle, rgba(181,242,61,0.08) 0%, transparent 62%); pointer-events: none; } #cta::after { content: ''; position: absolute; bottom: -250px; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(240,235,227,0.05) 0%, transparent 65%); pointer-events: none; } .cta-inner { position: relative; z-index: 1; background: var(--glass); border: 1px solid var(--faint); border-radius: var(--rx); padding: 5rem 3rem; max-width: 780px; margin: 0 auto; overflow: hidden; } .cta-inner::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,rgba(181,242,61,0.30),rgba(181,242,61,0.06)); border-radius:var(--rx) var(--rx) 0 0; } #cta h2 { font-weight: 800; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 0.92; letter-spacing: -0.05em; color: #fff; margin-bottom: 1.3rem; } #cta p { color: var(--muted); font-size: var(--t-lg); max-width: 380px; margin: 0 auto 2.4rem; line-height: 1.78; } .cta-btns { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; } .btn-outline { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid rgba(255,255,255,0.10); color: var(--muted); padding: 0.82rem 1.6rem; border-radius: var(--r); text-decoration: none; font-weight: 600; font-size: var(--t-body); transition: all 0.24s; backdrop-filter: blur(8px); background: var(--glass); } .btn-outline:hover { border-color: var(--lime2); color: var(--lime2); } .cta-ncr { margin-top: 2rem; font-size: var(--t-caption); color: rgba(255,255,255,0.18); } .cta-ncr a { color: rgba(255,255,255,0.30); text-decoration: none; } /* ─── FOOTER ──────────────────────────────────────── */ footer { background: var(--ink2); border-top: 1px solid rgba(181,242,61,0.08); padding: 1.8rem 5vw; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .f-logo { font-weight: 700; font-size: var(--t-body); color: rgba(255,255,255,0.36); text-decoration: none; } .f-logo b { color: var(--lime2); } .f-logo a { color: inherit; text-decoration: none; transition: color 0.25s ease; } .f-logo a:hover { color: rgba(255,255,255,0.82); } .f-logo .f-link-bfs:hover { color: var(--lime2); } .f-links { display: flex; gap: 1.8rem; list-style: none; flex-wrap: wrap; } .f-links a { font-size: var(--t-sm); color: rgba(255,255,255,0.20); text-decoration: none; transition: color 0.2s; } .f-links a:hover { color: rgba(255,255,255,0.55); } .f-copy { font-size: var(--t-caption); color: rgba(255,255,255,0.12); } /* ─── ANIMATION ──────────────────────────────────── */ /* ─── Reveal-on-scroll: smooth, choreographed entrance for content as it enters viewport. Fast-resolve so users scrolling quickly still see fully-rendered content by the time it reaches their gaze. ─── */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: translateY(0); } .d1{transition-delay:0.03s} .d2{transition-delay:0.07s} .d3{transition-delay:0.11s} .d4{transition-delay:0.15s} .d5{transition-delay:0.19s} .d6{transition-delay:0.23s} /* ─── Hero entrance — runs on first paint, no observer needed. Shortened so first paint resolves quickly even on slow connections; stagger compressed for the same reason. ─── */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .cine-frame .cf-content > * { opacity: 0; animation: heroFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .cine-frame .cf-content > .section-eb { animation-delay: 0.04s; } .cine-frame .cf-content > .eb-row { animation-delay: 0.04s; } .cine-frame .cf-content > .cine-h1, .cine-frame .cf-content > .cine-h2 { animation-delay: 0.09s; } .cine-frame .cf-content > .cine-cap { animation-delay: 0.15s; } .cine-frame .cf-content > .hv-actions { animation-delay: 0.21s; } .cine-frame .cf-content > .cf-ribbon { animation-delay: 0.28s; } /* Ribbon parent appears, individual rib stagger continues from there (already wired) */ /* ─── Reduced motion: kill all reveal/entrance animations ─── */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal.in, .cine-frame .cf-content > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } } /* ─── RESPONSIVE ──────────────────────────────────── */ @media(max-width:980px){ nav{width:calc(100% - 24px); padding: 0 1rem;} .nav-links{display:none} .nav-toggle{display:block} nav.open .nav-links{display:flex; position:absolute; top:60px; left:0; right:0; flex-direction:column; gap:0; background:rgba(7,7,6,0.97); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:0.5rem 0; backdrop-filter:blur(28px); box-shadow:0 16px 40px rgba(0,0,0,0.55);} nav.open .nav-links li{display:block;} nav.open .nav-links a{display:block; padding:0.85rem 1.4rem; font-size:var(--t-body); border-bottom:1px solid rgba(255,255,255,0.04);} nav.open .nav-links li:last-child a{border-bottom:none;} #hero{height:100vh;min-height:600px} .hero-slide img{object-position:65% center!important} .hero-inner{max-width:100%;padding:0 5vw 3rem} .hero-headlines{min-height:200px} .hh h1{font-size:clamp(2.4rem,10vw,3.6rem)} .page-hero{min-height:54vh; padding: 6rem 5vw 3rem;} .bento-grid-stats{grid-template-columns:1fr 1fr} .mf-convictions{grid-template-columns:1fr} .pb-grid{grid-template-columns:1fr} .cs-hero-dual{grid-template-columns:1fr;gap:2rem} .cs-card-showcase{order:-1;align-items:center} .phone-mock{margin:0 auto} .cs-steps-grid{grid-template-columns:1fr 1fr} .cs-stat-bar{grid-template-columns:1fr 1fr} .rep-bento{grid-template-columns:1fr} .rep-flow{flex-direction:column;align-items:center;gap:0.5rem} .rep-flow-connector{transform:rotate(90deg);margin-bottom:0;padding-top:0;flex:0 0 auto} .rep-flow-step{width:auto;max-width:220px} .rm-bento{grid-template-columns:1fr 1fr} .feat-grid{grid-template-columns:1fr 1fr} .tg{grid-template-columns:1fr 1fr} .flow-top{grid-template-columns:1fr} .flow-top p{text-align:left;max-width:none} .flow-scene{flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 1.25rem} .fn-plat-group{flex-direction:column;align-items:center} .fn-streams{padding-top:0;padding-right:0;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 12px;flex:none;width:100%} .fni-lbl{flex:none;width:auto} .fni-line{width:40px;flex:none} .fn-node,.fn-card-node,.fn-node-plat,.fn-node-driver{width:auto;padding-top:0} .flow-connector{padding-top:0;flex-direction:row;width:80%;min-width:0;gap:8px} .fc-track{width:60px} /* Tighter section padding for less endless mobile scroll */ #manifesto, #problem, #card-section, #features, #voices, #cta, #roadmap { padding: 4rem 5vw; } #flow-section { padding: 3rem 5vw; } #identity { padding: 3.5rem 5vw; } #repayment { padding: 4rem 5vw; } .mf-headline { margin-bottom: 2rem; } .rm-header, .rep-header, .feat-header { margin-bottom: 2rem; } .cs-title { margin-bottom: 2rem; } .cta-inner { padding: 3rem 1.6rem; } #community-strip { height: 50vh; min-height: 320px; } .community-overlay { padding: 2.5rem 5vw; } } @media(max-width:600px){ .bento-grid-stats{grid-template-columns:1fr 1fr} .feat-grid{grid-template-columns:1fr} .cs-steps-grid{grid-template-columns:1fr} .phone-mock{width:260px} .cs-stat-bar{grid-template-columns:1fr 1fr} .rm-bento{grid-template-columns:1fr} .rm-card-illus{height:200px} .tg{grid-template-columns:1fr} .trust-row{gap:0.4rem} .ti{padding:0.32rem 0.7rem; font-size:0.7rem;} footer{flex-direction:column; align-items:flex-start; text-align:left;} } /* ========================================================================== v2 — Distinct page layout utilities (inspired by Bidvest deck) ========================================================================== */ /* ── Section eyebrow with line + label (inline form) ── */ .section-eb { display:flex; align-items:center; gap:0.7rem; font-size:0.7rem; font-weight:700; letter-spacing:0.20em; text-transform:uppercase; color:rgba(160,220,40,0.85); margin-bottom:1.4rem; } .section-eb::before { content:''; width:42px; height:2px; background:linear-gradient(90deg, var(--lime2), rgba(181,242,61,0.20)); border-radius:1px; flex-shrink:0; } /* Big italic Fraunces stat number */ .stat-fraunces { font-family: var(--fi); font-style: italic; font-weight: 400; line-height: 0.95; letter-spacing: -0.03em; } .stat-fraunces.lime { color: var(--lime2); } .stat-fraunces.red { color: rgba(240,80,80,0.95); } .stat-fraunces.cream { color: var(--cream); } .stat-fraunces.huge { font-size: clamp(3.5rem, 7vw, 6rem); } .stat-fraunces.big { font-size: clamp(2.5rem, 5vw, 4rem); } .stat-fraunces.med { font-size: clamp(2rem, 3.5vw, 2.6rem); } /* ── Glass tile (refined) ── */ .gtile { position:relative; background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)); border:1px solid rgba(255,255,255,0.085); border-radius: 18px; padding: 1.6rem 1.4rem; backdrop-filter: blur(14px); overflow:hidden; transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s; } .gtile::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(181,242,61,0.55), transparent); opacity:0.55; } .gtile:hover { border-color: rgba(181,242,61,0.32); transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0,0,0,0.45), 0 0 0 1px rgba(181,242,61,0.06); } .gtile.highlight { border-color: rgba(181,242,61,0.32); background: linear-gradient(145deg, rgba(181,242,61,0.075), rgba(181,242,61,0.020)); } .gtile.highlight::before { background: linear-gradient(90deg, transparent, rgba(202,255,80,0.85), transparent); opacity: 0.85; } .gtile.warn { border-color: rgba(240,80,80,0.32); background: linear-gradient(145deg, rgba(240,80,80,0.060), rgba(240,80,80,0.015)); } .gtile.warn::before { background: linear-gradient(90deg, transparent, rgba(240,80,80,0.7), transparent); } .gtile-eb { font-size:0.65rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(160,220,40,0.85); margin-bottom:0.6rem; } .gtile-eb.warn { color: rgba(240,100,100,0.85); } .gtile-num { font-size:0.66rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:rgba(181,242,61,0.55); margin-right:0.4rem; } /* ── KPI pill (hero bottom row) ── */ .kpi-row { display:flex; gap:0.5rem; flex-wrap:wrap; } .kpi-pill { display:inline-flex; align-items:center; gap:0.55rem; padding:0.55rem 1rem; background: rgba(15,15,12,0.65); border:1px solid rgba(181,242,61,0.18); border-radius: var(--pill); backdrop-filter: blur(12px); font-size: var(--t-sm); font-weight:600; color:var(--text); } .kpi-pill::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--lime2); box-shadow: 0 0 8px rgba(181,242,61,0.85); flex-shrink:0; } /* ── Hero v2 (bottom-aligned, full-bleed photo, KPI pills) ── */ .hero-v2 { position:relative; min-height: 88vh; padding: 7rem 5vw 3rem; display:flex; align-items:flex-end; overflow:hidden; } .hero-v2 .hv-img { position:absolute; inset:0; z-index:0; } .hero-v2 .hv-img img { width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity 0.4s ease; } .hero-v2 .hv-img img.loaded { opacity:1; } .hero-v2 .hv-img::after { content:''; position:absolute; inset:0; background: linear-gradient(105deg, rgba(8,8,7,0.88) 0%, rgba(8,8,7,0.42) 48%, transparent 90%), linear-gradient(to top, rgba(8,8,7,0.78) 0%, rgba(8,8,7,0.18) 38%, rgba(8,8,7,0.10) 70%); } .hero-v2 .hv-inner { position:relative; z-index:1; max-width: 880px; width:100%; } .hero-v2 h1 { font-weight:800; font-size: clamp(2.8rem, 5.8vw, 5.2rem); line-height:0.92; letter-spacing:-0.045em; color:#fff; margin-bottom: 1rem; } .hero-v2 .lede-serif { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height:1.5; color: var(--cream); max-width: 660px; margin-bottom: 1.6rem; } .hero-v2 .lede-serif b { font-style: normal; font-family: var(--f); font-weight: 600; color: var(--lime2); } .hero-v2 .hv-actions { display:flex; gap:0.7rem; flex-wrap:wrap; margin-bottom: 1.8rem; } /* Confidential / brand pill (top-right of hero) */ .hv-badge { position:absolute; top: 88px; right: 5vw; z-index: 2; display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background: rgba(15,15,12,0.55); border:1px solid rgba(181,242,61,0.20); border-radius: var(--pill); font-size:0.72rem; font-weight:600; color:var(--lime2); letter-spacing:0.06em; backdrop-filter: blur(12px); } .hv-badge svg { width:13px; height:13px; } /* ── Story photo cards (driver/rider/courier voices, with header pill) ── */ .story-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .story-card { position:relative; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); border: 1px solid rgba(255,255,255,0.07); border-radius: 22px; overflow:hidden; transition: transform 0.35s, border-color 0.35s; } .story-card:hover { transform: translateY(-4px); border-color: rgba(181,242,61,0.22); } .story-card .sc-img { position:relative; aspect-ratio: 4/3; overflow:hidden; } .story-card .sc-img img { width:100%; height:100%; object-fit:cover; transition: transform 0.6s ease; } .story-card:hover .sc-img img { transform: scale(1.04); } .story-card .sc-img::after { content:''; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(8,8,7,0.18) 0%, rgba(8,8,7,0.50) 100%); } .story-card .sc-pill { position:absolute; top: 14px; left: 14px; z-index:1; padding: 0.36rem 0.85rem; background: rgba(15,15,12,0.78); border:1px solid rgba(181,242,61,0.30); border-radius: var(--pill); font-size:0.66rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color: var(--lime2); backdrop-filter: blur(8px); } .story-card .sc-body { padding: 1.4rem 1.4rem 1.5rem; } .story-card .sc-attr { display:flex; align-items:center; gap:0.5rem; font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: rgba(181,242,61,0.85); margin-bottom: 0.7rem; } .story-card .sc-attr::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--lime2); box-shadow: 0 0 6px rgba(181,242,61,0.85); } .story-card .sc-quote { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: 1.05rem; line-height: 1.55; color: var(--text); margin-bottom: 0.9rem; } .story-card .sc-source { font-size:0.74rem; color: rgba(255,255,255,0.40); line-height:1.5; } .story-card .sc-source b { color: rgba(255,255,255,0.65); font-weight: 600; } /* ── Billboard banner (lime border, italic centered) ── */ .billboard { background: rgba(181,242,61,0.06); border: 1px solid rgba(181,242,61,0.30); border-radius: 18px; padding: 1.4rem 2rem; text-align: center; position: relative; overflow: hidden; } .billboard::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:60%; height:1px; background: linear-gradient(90deg, transparent, var(--lime2), transparent); } .billboard p { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--text); margin: 0; } .billboard p .em { color: var(--lime2); } /* ── Asymmetric bento ── */ .bento-asym { display:grid; grid-template-columns: 1.55fr 1fr; gap: 0.75rem; } .bento-asym .bt-hero { grid-row: span 3; padding: 2.4rem; display:flex; flex-direction:column; justify-content: space-between; min-height: 380px; } .bento-asym .bt-side { padding: 1.6rem 1.4rem; min-height: 0; } .bento-asym .bt-side-row { display:flex; align-items:center; gap: 0.9rem; } .bento-asym .bt-side-icon { flex-shrink:0; width:42px; height:42px; border-radius:12px; background: rgba(181,242,61,0.12); border:1px solid rgba(181,242,61,0.28); display:flex; align-items:center; justify-content:center; } /* ── Numbered step row (left number circle, right copy) ── */ .numstep-list { display:flex; flex-direction:column; gap: 0.85rem; } .numstep { display:flex; align-items:flex-start; gap: 1rem; padding: 1.2rem 1.4rem; background: rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius: 14px; transition: border-color 0.3s, background 0.3s; } .numstep:hover { border-color: rgba(181,242,61,0.25); background: rgba(181,242,61,0.04); } .numstep.active { border-color: rgba(181,242,61,0.36); background: rgba(181,242,61,0.07); } .numstep .ns-circle { flex-shrink:0; width:32px; height:32px; border-radius:50%; background: rgba(181,242,61,0.12); border: 1.5px solid rgba(181,242,61,0.40); display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; color: var(--lime2); } .numstep.active .ns-circle { background: var(--lime); color: var(--ink); border-color: var(--lime); } .numstep .ns-body strong { display:block; font-size: var(--t-body); font-weight: 700; color: var(--text); margin-bottom: 0.18rem; letter-spacing: -0.015em; } .numstep .ns-body span { display:block; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; } /* ── Vehicle class tiles (icon, label, sub, monthly fee) ── */ .veh-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap: 0.6rem; } .veh-tile { background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 1.1rem 0.9rem 1.1rem; text-align:center; transition: border-color 0.3s, background 0.3s; } .veh-tile:hover { border-color: rgba(181,242,61,0.26); background: rgba(181,242,61,0.05); } .veh-tile.active { border-color: rgba(181,242,61,0.45); background: rgba(181,242,61,0.10); } .veh-tile .vi { display:flex; align-items:center; justify-content:center; height: 28px; margin-bottom: 0.45rem; color: rgba(181,242,61,0.85); } .veh-tile .vl { font-size:0.85rem; font-weight: 700; color: var(--text); margin-bottom: 0.1rem; letter-spacing: -0.01em; } .veh-tile .vs { font-size:0.7rem; color: var(--muted); margin-bottom: 0.55rem; } .veh-tile .vp { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--lime2); letter-spacing: -0.01em; } /* ── Phase timeline (horizontal connected dots) ── */ .phase-timeline { position:relative; padding: 0.5rem 0 1rem; margin-bottom: 1.4rem; } .phase-line { position:absolute; top: 28px; left: 6%; right: 6%; height: 1.5px; background: linear-gradient(90deg, rgba(181,242,61,0.15), rgba(181,242,61,0.55)); } .phase-dots { display:grid; grid-template-columns: repeat(5, 1fr); position:relative; } .phase-dot { display:flex; flex-direction:column; align-items:center; gap:0.6rem; } .phase-dot .pd-circle { width:42px; height:42px; border-radius:50%; background: rgba(8,8,7,0.85); border:1.5px solid rgba(181,242,61,0.36); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--lime2); font-size:0.95rem; position:relative; z-index:1; transition: all 0.3s; } .phase-dot.active .pd-circle { background: var(--lime); color:var(--ink); border-color: var(--lime); box-shadow: 0 0 24px rgba(181,242,61,0.45); } .phase-card { padding: 1.2rem 1.1rem; } .phase-card .pc-eb { font-size:0.62rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(160,220,40,0.78); margin-bottom: 0.3rem; } .phase-card h4 { font-size: var(--t-body); font-weight:700; color: var(--text); margin-bottom: 0.4rem; letter-spacing: -0.015em; } .phase-card p { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; margin: 0; } /* ── Capital stack 4-up cards (Y0/Y1/Y2/Y3) ── */ .stack-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem; } .stack-card { padding: 1.4rem 1.3rem; } .stack-eb { font-size:0.62rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(160,220,40,0.85); margin-bottom: 0.35rem; } /* ── Two-column split (today vs tomorrow) ── */ .split-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; align-items: stretch; } .split-2 .split-card { padding: 1.8rem 1.6rem; } .split-2 .split-eb { font-size:0.68rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(160,220,40,0.85); margin-bottom: 0.45rem; } .split-2 h3 { font-family: var(--fi); font-style:italic; font-weight: 400; font-size: 1.3rem; color: var(--lime2); margin-bottom: 1rem; line-height:1.25; } .split-2 ul { list-style: none; padding: 0; } .split-2 ul li { display:flex; align-items:flex-start; gap:0.7rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: var(--t-sm); color: var(--muted); line-height:1.5; } .split-2 ul li:last-child { border-bottom: none; } .split-2 ul li b { color: var(--text); font-weight: 600; } .split-2 ul li::before { content:''; flex-shrink:0; width: 16px; height:16px; margin-top: 3px; border-radius:50%; background: rgba(181,242,61,0.12); border:1px solid rgba(181,242,61,0.32); } /* ── 3-phone showcase strip ── */ .phone-strip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: end; padding: 2.5rem 1rem 0; position:relative; } .phone-strip .ps-col { display:flex; flex-direction:column; align-items:center; gap: 1rem; } .phone-strip .ps-cap { text-align:center; } .phone-strip .ps-cap-eb { font-size:0.68rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color: rgba(160,220,40,0.85); margin-bottom: 0.2rem; } .phone-strip .ps-cap p { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: 1rem; color: var(--cream); margin: 0; } .phone-strip .ps-col.featured .phone-mock { transform: scale(1.05); } /* ── Driver attribution row (Sipho · Uber driver · JHB) ── */ .driver-attr { display:flex; align-items:center; gap: 0.55rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(181,242,61,0.85); } .driver-attr::before { content:''; width: 18px; height: 1.5px; background: var(--lime2); flex-shrink:0; } /* ── Final closing tag ── */ .closing-tag { padding: 1rem 1.5rem; background: rgba(181,242,61,0.04); border-top: 1px solid rgba(181,242,61,0.18); border-bottom: 1px solid rgba(181,242,61,0.18); text-align: center; font-family: var(--fi); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--text); } .closing-tag .em { color: var(--lime2); } /* ── Photo grid (closing "this is what it's for") ── */ .photo-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .photo-grid .pg-cell { position:relative; aspect-ratio: 4/3; border-radius: 16px; overflow:hidden; border: 1px solid rgba(255,255,255,0.07); } .photo-grid .pg-cell.tall { grid-row: span 2; aspect-ratio: 4/5; } .photo-grid .pg-cell.wide { grid-column: span 2; aspect-ratio: 16/7; } .photo-grid .pg-cell img { width:100%; height:100%; object-fit:cover; transition: transform 0.6s ease; } .photo-grid .pg-cell:hover img { transform: scale(1.04); } .photo-grid .pg-cell .pg-caption { position:absolute; bottom:0; left:0; right:0; padding: 0.9rem 1rem; background: linear-gradient(to top, rgba(8,8,7,0.85), transparent); font-family: var(--fi); font-style:italic; font-size: 0.95rem; color: var(--lime2); } /* ── Numbered chip (alt for stats — Bidvest deck "01 · CREDIT" style) ── */ .chip-num { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: 1.6rem; color: rgba(181,242,61,0.55); margin-right: 0.5rem; letter-spacing: -0.02em; } /* Mobile adjustments for v2 */ @media (max-width: 980px) { .hero-v2 { min-height: 78vh; padding: 6rem 5vw 2.5rem; } .hero-v2 h1 { font-size: clamp(2.2rem, 8vw, 3.4rem); } .hv-badge { display:none; } .story-grid { grid-template-columns: 1fr; } .veh-grid { grid-template-columns: repeat(3, 1fr); } .phase-dots { grid-template-columns: 1fr; gap: 0.7rem; } .phase-line { display: none; } .phase-dot { flex-direction: row; justify-content: flex-start; gap: 0.9rem; } .stack-grid { grid-template-columns: 1fr 1fr; } .split-2 { grid-template-columns: 1fr; } .bento-asym { grid-template-columns: 1fr; } .bento-asym .bt-hero { min-height: 280px; padding: 1.8rem; } .phone-strip { grid-template-columns: 1fr; gap: 2.5rem; padding: 1.5rem 0 0; } .photo-grid { grid-template-columns: 1fr 1fr; } .photo-grid .pg-cell.tall, .photo-grid .pg-cell.wide { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; } .kpi-pill { font-size: 0.78rem; padding: 0.42rem 0.8rem; } } @media (max-width: 600px) { .veh-grid { grid-template-columns: repeat(2, 1fr); } .photo-grid { grid-template-columns: 1fr; } } /* ========================================================================== v3 — Cinematic glass system (replaces dash/em-rule eyebrows + adds story-spine) ========================================================================== */ /* ─── Override: section-eb (old dash version → glass shimmer chip) ─── */ .section-eb { display:inline-flex; align-items:center; gap:0.55rem; padding: 0.42rem 0.95rem 0.42rem 0.65rem; background: linear-gradient(135deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.025) 50%, rgba(181,242,61,0.045) 100%), rgba(15,15,12,0.55); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--pill); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(220,255,180,0.92); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.20) inset, 0 6px 22px rgba(0,0,0,0.30), 0 0 0 1px rgba(181,242,61,0.04); position: relative; overflow: hidden; margin-bottom: 1.4rem; } .section-eb::before { /* dot */ content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lime2); box-shadow: 0 0 0 2px rgba(181,242,61,0.18), 0 0 12px rgba(181,242,61,0.85); flex-shrink: 0; animation: chipPulse 2.4s ease-in-out infinite; /* override original ::before line */ width: 7px !important; height: 7px !important; background: var(--lime2) !important; } .section-eb::after { /* shimmer sweep across glass */ content: ''; position:absolute; top: -50%; bottom: -50%; left: -30%; width: 50%; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.10) 48%, rgba(181,242,61,0.18) 50%, rgba(255,255,255,0.10) 52%, transparent 70%); transform: skewX(-20deg); animation: chipShimmer 5s ease-in-out infinite; pointer-events: none; } @keyframes chipPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(181,242,61,0.18), 0 0 12px rgba(181,242,61,0.85); } 50% { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(181,242,61,0.10), 0 0 18px rgba(181,242,61,1); } } @keyframes chipShimmer { 0%, 100% { left: -30%; } 50% { left: 130%; } } .section-eb.center { display:inline-flex; } /* Centered eyebrow row helper */ .eb-row { display:flex; justify-content:center; } .eb-row.left { justify-content:flex-start; } /* ─── Glass panel (heavy, cinematic) ─── */ .gpanel { position:relative; isolation:isolate; background: linear-gradient(140deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.04) 100%), rgba(12,11,9,0.45); border:1px solid rgba(255,255,255,0.10); border-radius: 22px; backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 24px 60px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25); overflow: hidden; } .gpanel::before { /* edge highlight */ content:''; position:absolute; top:0; left:8%; right:8%; height:1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.55), transparent); z-index: 1; } .gpanel::after { /* moving sheen */ content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.04) 50%, transparent 62%); transform: translateX(-100%); transition: transform 1.2s ease; } .gpanel:hover::after { transform: translateX(100%); } /* ─── Cinematic full-bleed frame ─── */ .cine-frame { position:relative; width: 100%; min-height: 100vh; height: 100vh; overflow: hidden; display:flex; align-items: flex-end; } .cine-frame.short { min-height: 78vh; height: 78vh; } .cine-frame.tall { min-height: 110vh; height: 110vh; } .cine-frame > .cf-img { position:absolute; inset:0; z-index:0; } /* Original single-image fade-in (skipped for carousel — it has its own logic) */ .cine-frame > .cf-img:not(.cf-carousel) img { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition: opacity 1s ease, transform 18s ease; transform: scale(1.03); } .cine-frame > .cf-img:not(.cf-carousel) img.loaded { opacity:1; transform: scale(1); } .cine-frame > .cf-img.kenburns:not(.cf-carousel) img.loaded { animation: cfKen 18s ease-in-out infinite alternate; } @keyframes cfKen { 0% { transform: scale(1.04) translate(-0.5%, 0); } 100% { transform: scale(1.10) translate(0.8%, -1.2%); } } /* ─── Hero carousel — 4 slides, staggered crossfade so there's never a dark gap ─── How it works: • Incoming slide gets .is-active → fades 0→1 over 2.5s with NO delay and lifts to z-index 2 so it sits ON TOP of the previous slide. • Outgoing slide loses .is-active → fades 1→0 over 2.5s but with a 2.5s DELAY, so the previous photo stays fully visible until the new one is fully on top. • Result: at every frame, at least one fully-opaque image fills the frame. */ .cf-carousel { position: relative; width: 100%; height: 100%; } .cf-carousel .cf-slide { /* Override the global `picture { display: contents }` for slides only */ display: block; position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 1; /* Outgoing state — fade out AFTER the incoming has finished fading in */ transition: opacity 2.5s cubic-bezier(0.45, 0, 0.55, 1) 2.5s; } .cf-carousel .cf-slide.is-active { opacity: 1; z-index: 2; /* Incoming state — fade in immediately */ transition: opacity 2.5s cubic-bezier(0.45, 0, 0.55, 1) 0s; } .cf-carousel .cf-slide img { width: 100%; height: 100%; object-fit: cover; display: block; /* !important to defend against any global .cf-img img rules that try to set opacity:0 / animations. The carousel needs the IMG itself fully opaque — opacity is controlled at the .cf-slide level. */ opacity: 1 !important; transform: scale(1.04); transition: none !important; animation: none !important; } /* Ken Burns runs ONLY on the active slide so the others aren't burning CPU */ .cf-carousel.kenburns .cf-slide.is-active img { animation: cfKen 22s ease-in-out infinite alternate !important; } /* Reduced motion — pin the first slide visible, no Ken Burns, no transition */ @media (prefers-reduced-motion: reduce) { .cf-carousel .cf-slide { transition: none; } .cf-carousel.kenburns .cf-slide.is-active img { animation: none; transform: none; } } .cine-frame .cf-veil { position:absolute; inset:0; z-index:1; pointer-events:none; background: /* Edge vignette — pulls focus to the subject */ radial-gradient(ellipse 110% 80% at 50% 50%, transparent 55%, rgba(8,8,7,0.45) 100%), /* Bottom-up dark wash for text legibility */ linear-gradient(180deg, rgba(8,8,7,0.25) 0%, transparent 28%, transparent 55%, rgba(8,8,7,0.92) 100%), /* Side wash for left-aligned text */ linear-gradient(95deg, rgba(8,8,7,0.62) 0%, rgba(8,8,7,0.18) 45%, transparent 80%), /* Subtle warm cast — empathetic golden hour tone */ linear-gradient(180deg, rgba(212,172,42,0.05), rgba(0,0,0,0) 40%); } .cine-frame .cf-veil.center { background: /* Vignette */ radial-gradient(ellipse 130% 110% at 50% 50%, transparent 35%, rgba(8,8,7,0.50) 80%, rgba(8,8,7,0.92) 100%), /* Soft warm spotlight where the text sits */ radial-gradient(ellipse 60% 50% at 50% 55%, rgba(212,172,42,0.10) 0%, transparent 70%); } /* Text legibility — soft dark halo so headlines read on any photo */ .cine-frame .cf-content .cine-h1, .cine-frame .cf-content .cine-h2 { text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.45); } .cine-frame .cf-content .cine-cap { text-shadow: 0 1px 8px rgba(0,0,0,0.65); } .cine-frame .cf-content .section-eb { text-shadow: 0 1px 6px rgba(0,0,0,0.55); } .cine-frame .cf-content { position:relative; z-index:2; width:100%; padding: 0 6vw 4.5rem; max-width: 1200px; margin: 0 auto; } .cine-frame.center .cf-content { padding: 0 6vw; align-self: center; text-align: center; } /* Cinematic copy: oversized, generous */ .cine-h1 { font-weight: 800; font-size: clamp(3rem, 7.5vw, 7rem); line-height: 0.88; letter-spacing: -0.05em; color: #fff; margin-bottom: 1.4rem; } .cine-h2 { font-weight: 800; font-size: clamp(2.4rem, 5.5vw, 5rem); line-height: 0.9; letter-spacing: -0.045em; color: #fff; } .cine-cap { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.45; color: var(--cream); max-width: 640px; margin-top: 0.6rem; } .cine-cap b { font-style: normal; font-family: var(--f); font-weight: 600; color: var(--lime2); } /* Floating glass overlay tile (sits on cinematic frame) */ .cf-tile { position: absolute; z-index: 3; background: linear-gradient(140deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.025) 60%, rgba(181,242,61,0.05) 100%), rgba(10,9,7,0.55); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 1.2rem 1.4rem; backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 24px 50px rgba(0,0,0,0.45); max-width: 320px; } .cf-tile.tl { top: 28%; left: 6vw; } .cf-tile.tr { top: 22%; right: 6vw; } .cf-tile.br { bottom: 6rem; right: 6vw; } .cf-tile .ct-eb { font-size:0.6rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color: var(--lime2); margin-bottom: 0.35rem; } .cf-tile .ct-num { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--lime2); line-height:1; letter-spacing:-0.03em; margin-bottom: 0.25rem; } .cf-tile .ct-l { font-size: 0.72rem; color: var(--muted); line-height:1.5; } /* ─── Story spine: chapter container with anchored caption ─── */ .chapter { position:relative; min-height: 90vh; display:flex; align-items: center; justify-content: center; padding: 6rem 6vw; background: var(--ink); } .chapter.alt { background: var(--ink2); } .chapter.bleed { padding: 0; min-height: 100vh; } .chapter-inner { width:100%; max-width: 1280px; } .chapter-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 3vw; align-items: center; } .chapter-grid.flip { grid-template-columns: 1fr 1fr; } .chapter-grid.flip .ch-photo { order: 2; } .ch-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 30px 80px rgba(0,0,0,0.5); } .ch-photo img { width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity 0.4s ease, transform 12s ease; transform: scale(1.04); } .ch-photo img.loaded { opacity:1; transform: scale(1); } .ch-photo::after { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, transparent 50%, rgba(8,8,7,0.55) 100%); } .ch-photo .ch-stamp { position:absolute; top:16px; left:16px; z-index:2; padding: 0.35rem 0.85rem; background: rgba(15,15,12,0.70); border:1px solid rgba(181,242,61,0.30); border-radius: var(--pill); font-size:0.66rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--lime2); backdrop-filter: blur(12px); } .ch-photo.wide { aspect-ratio: 16/10; } .ch-copy h2 { font-weight:800; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 0.92; letter-spacing:-0.045em; color: #fff; margin-bottom: 1.2rem; } .ch-copy h2 em { font-family: var(--fi); font-style: italic; font-weight: 400; color: var(--lime2); letter-spacing: 0; } .ch-copy .ch-lede { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--muted); line-height: 1.7; max-width: 480px; margin-bottom: 1.4rem; } .ch-copy .ch-pull { font-family: var(--fi); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: var(--cream); line-height:1.45; max-width: 460px; } /* Inline floating stat (sits on a photo) */ .ch-photo .ch-floating { position:absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2; min-width: 78%; background: linear-gradient(140deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 0.85rem 1.1rem; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); display:flex; align-items:center; justify-content: space-between; gap: 0.85rem; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 12px 30px rgba(0,0,0,0.4); } .ch-photo .ch-floating .cf-l { font-size:0.7rem; color:var(--muted); font-weight:600; letter-spacing:0.04em; } .ch-photo .ch-floating .cf-v { font-family: var(--fi); font-style: italic; font-weight:400; font-size: 1.5rem; color: var(--lime2); letter-spacing:-0.02em; line-height:1; } /* ─── Diptych / Triptych frames ─── */ .dip { display:grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .trip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; } .dip > .ch-photo, .trip > .ch-photo { aspect-ratio: 3/4; border-radius: 18px; } /* ─── Big quote panel ─── */ .bigquote { position:relative; padding: 5rem 6vw; background: var(--ink2); text-align: center; isolation: isolate; overflow: hidden; } /* Optional photo background — adds emotional anchor under the manifesto text */ .bigquote .bq-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .bigquote .bq-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; filter: saturate(0.95); } .bigquote .bq-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 75% at 50% 50%, rgba(13,12,10,0.52) 28%, rgba(13,12,10,0.92) 100%), linear-gradient(180deg, rgba(13,12,10,0.40) 0%, transparent 30%, transparent 70%, rgba(13,12,10,0.55) 100%); } .bigquote blockquote { position: relative; z-index: 1; font-family: var(--fi); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.32; color: var(--text); max-width: 920px; margin: 0 auto; text-shadow: 0 2px 14px rgba(0,0,0,0.55); } .bigquote blockquote em { font-style: italic; color: var(--lime2); } .bigquote .bq-attr { position: relative; z-index: 1; margin-top: 1.4rem; font-size: 0.74rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color: var(--lime2); display:flex; align-items:center; justify-content:center; gap:0.7rem; text-shadow: 0 1px 8px rgba(0,0,0,0.55); } .bigquote .bq-attr::before, .bigquote .bq-attr::after { content:''; width: 28px; height:1px; background: rgba(181,242,61,0.35); } /* ─── Hero ribbon pills (icon + label, lift on hover, per-icon micro-animations) ─── */ .cf-ribbon { display:flex; gap: 0.55rem; flex-wrap: wrap; margin-top: 1.4rem; } .cf-ribbon .rib { display:inline-flex; align-items:center; gap: 0.5rem; padding: 0.5rem 0.95rem 0.5rem 0.55rem; background: rgba(15,15,12,0.55); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--pill); font-size: 0.78rem; font-weight: 600; color: var(--text); backdrop-filter: blur(16px); cursor: default; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease, background 0.32s ease, box-shadow 0.32s ease; /* Entrance reveal: fade up, staggered via nth-child */ opacity: 0; transform: translateY(8px); animation: ribIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .cf-ribbon .rib:nth-child(1) { animation-delay: 0.10s; } .cf-ribbon .rib:nth-child(2) { animation-delay: 0.18s; } .cf-ribbon .rib:nth-child(3) { animation-delay: 0.26s; } .cf-ribbon .rib:nth-child(4) { animation-delay: 0.34s; } @keyframes ribIn { to { opacity: 1; transform: translateY(0); } } /* Pills without an icon (legacy) keep the dot */ .cf-ribbon .rib:not([data-rib])::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--lime2); box-shadow: 0 0 8px rgba(181,242,61,0.85); animation: chipPulse 2.4s ease-in-out infinite; } /* Icon */ .cf-ribbon .rib-ico { width: 18px; height: 18px; flex-shrink: 0; display: block; filter: drop-shadow(0 0 4px rgba(202,255,80,0.45)); transition: filter 0.32s ease, transform 0.32s ease; transform-origin: center; } /* Hover state — lift, lime border glow, brighter ring */ .cf-ribbon .rib:hover { transform: translateY(-2px); border-color: rgba(202,255,80,0.55); background: rgba(202,255,80,0.08); box-shadow: 0 8px 22px rgba(202,255,80,0.20); } .cf-ribbon .rib:hover .rib-ico { filter: drop-shadow(0 0 8px rgba(202,255,80,0.95)); } /* ── Per-icon hover animations ── */ /* Drop — gentle slosh, slower so it feels like liquid not a shiver */ @keyframes ribDropWobble { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.05, 0.96); } } .cf-ribbon .rib[data-rib="drop"]:hover .rib-ico { animation: ribDropWobble 1.6s var(--ease-smooth) infinite; } /* Loop — slow continuous rotate */ @keyframes ribLoopSpin { to { transform: rotate(360deg); } } .cf-ribbon .rib[data-rib="loop"]:hover .rib-ico { animation: ribLoopSpin 2.2s linear infinite; } /* Shield — soft breathing scale */ @keyframes ribShieldPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .cf-ribbon .rib[data-rib="shield"]:hover .rib-ico { animation: ribShieldPulse 1.6s var(--ease-smooth) infinite; } /* Card — gentle tilt arc, no flick */ @keyframes ribCardFlick { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } } .cf-ribbon .rib[data-rib="card"]:hover .rib-ico { animation: ribCardFlick 1.6s var(--ease-smooth) infinite; } /* Live — continuous outward pulse rings (idle, intensifies on hover) */ @keyframes ribLivePulse { 0% { transform: scale(0.7); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } } .cf-ribbon .rib[data-rib="live"] .rib-pulse { transform-box: fill-box; transform-origin: center; animation: ribLivePulse 2.4s var(--ease-smooth) infinite; } .cf-ribbon .rib[data-rib="live"] .rib-pulse-2 { animation-delay: 0s; } .cf-ribbon .rib[data-rib="live"] .rib-pulse-3 { animation-delay: 0.6s; } .cf-ribbon .rib[data-rib="live"]:hover .rib-pulse { animation-duration: 1.6s; } /* Circles — slow rotate */ @keyframes ribCirclesSpin { to { transform: rotate(360deg); } } .cf-ribbon .rib[data-rib="circles"]:hover .rib-ico { animation: ribCirclesSpin 6s linear infinite; } /* Vehicle — gentle nudge forward, no rapid tic */ @keyframes ribVehicleDrive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } } .cf-ribbon .rib[data-rib="vehicle"]:hover .rib-ico { animation: ribVehicleDrive 1.6s var(--ease-smooth) infinite; } /* Institution — slow glow breathing */ @keyframes ribInstGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(202,255,80,0.45)); } 50% { filter: drop-shadow(0 0 10px rgba(202,255,80,0.95)); } } .cf-ribbon .rib[data-rib="institution"]:hover .rib-ico { animation: ribInstGlow 2s var(--ease-smooth) infinite; } /* Reduced motion — disable rib animations */ @media (prefers-reduced-motion: reduce) { .cf-ribbon .rib { animation: none; opacity: 1; transform: none; } .cf-ribbon .rib-ico, .cf-ribbon .rib[data-rib] .rib-ico, .cf-ribbon .rib[data-rib="live"] .rib-pulse { animation: none !important; transform: none !important; } } /* Nav update — make navlinks active also use chip-style accent */ .nav-links a.active { color: var(--lime2); position:relative; } /* ─── Responsive grid overrides for sections that use inline grid-template-columns ─── */ /* Tablet — collapse 4-up to 2-up, side-by-side to stacked */ @media (max-width: 980px) { .how-it-works-grid { grid-template-columns: 1fr !important; gap: 2.4rem !important; } .app-mosaic-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.7rem !important; } .path-tier-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.85rem !important; } /* The how-it-works photo card sits at end on desktop, justify-self: end. Reset on mobile. */ .how-it-works-grid .photo-card { max-width: none !important; justify-self: stretch !important; } } /* Phones — single column for everything */ @media (max-width: 600px) { .app-mosaic-grid { grid-template-columns: 1fr !important; } .path-tier-grid { grid-template-columns: 1fr !important; } } /* ─── Mobile nav: more inner breathing room around the pill ─── */ @media (max-width: 980px) { nav { padding: 0 1.1rem 0 1.2rem; height: 56px; width: min(1160px, calc(100% - 20px)); top: 12px; } .logo-text { font-size: 0.92rem; } .nav-cta { padding: 0.55rem 1rem; font-size: 0.78rem; } } /* ─── Mobile footer: clear vertical spacing between logo / links / copy ─── */ @media (max-width: 600px) { footer { padding: 2.4rem 6vw 2.6rem; gap: 1.6rem; } .f-links { gap: 1.4rem 1.4rem; /* row + column gap */ width: 100%; line-height: 1.6; } .f-links a { padding: 0.25rem 0; } .f-copy { margin-top: 0.4rem; line-height: 1.55; } } /* ─── CTA action group (hv-actions) — proper flex with gap so buttons never touch ─── */ .hv-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; } @media (max-width: 600px) { .hv-actions { gap: 0.85rem; width: 100%; } /* Stack the buttons full-width on phones so they're never crammed */ .hv-actions > .btn-lime, .hv-actions > .btn-outline, .hv-actions > .btn-ghost { width: 100%; text-align: center; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE AUDIT FIXES — small-viewport polish across the whole site ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Photo strip: single column on phones for proper readability ─── */ @media (max-width: 600px) { .photo-strip { grid-template-columns: 1fr !important; gap: 0.7rem; } .photo-strip .ps-frame:nth-child(3) { grid-column: span 1; aspect-ratio: 4/5; } } /* ─── Hero pill ribbon: tighter wrapping, smaller pills on phones ─── */ @media (max-width: 600px) { .cf-ribbon { gap: 0.4rem; margin-top: 1.2rem; } .cf-ribbon .rib { font-size: 0.72rem; padding: 0.42rem 0.78rem 0.42rem 0.45rem; } .cf-ribbon .rib-ico { width: 16px; height: 16px; } } /* ─── Cinematic content padding: tighter on phones so headlines don't crowd edges ─── */ @media (max-width: 600px) { .cine-frame .cf-content { padding: 0 5vw 3rem; } .cine-frame.center .cf-content { padding: 0 5vw; } .cine-h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); margin-bottom: 1.1rem; } .cine-cap { font-size: clamp(1rem, 3.6vw, 1.15rem); } } /* ─── Big quote: tighter on phones ─── */ @media (max-width: 600px) { .bigquote { padding: 4rem 6vw !important; } .bigquote blockquote { font-size: clamp(1.4rem, 5.6vw, 1.8rem); line-height: 1.34; } .bigquote .bq-attr { font-size: 0.66rem; gap: 0.5rem; } .bigquote .bq-attr::before, .bigquote .bq-attr::after { width: 18px; } } /* ─── Coming-soon badge: smaller + safer corner placement on phones ─── */ @media (max-width: 600px) { .photo-card .coming-soon { top: 10px; left: 10px; font-size: 0.56rem; padding: 0.3rem 0.65rem; letter-spacing: 0.16em; } } /* ─── Chapter copy padding so text never crashes the screen edge ─── */ @media (max-width: 600px) { .chapter { padding: 3.5rem 5vw !important; } .chapter-grid { gap: 1.6rem !important; } .ch-copy { padding: 0; } .ch-copy h2 { font-size: clamp(1.8rem, 7.8vw, 2.4rem); line-height: 1.05; } .ch-copy .ch-lede { font-size: clamp(0.96rem, 3.8vw, 1.05rem); line-height: 1.65; } .ch-copy .ch-pull { font-size: clamp(1rem, 3.8vw, 1.15rem); margin-top: 1rem; } /* Smaller chip overlay on small screens */ .ch-illus { width: 64px; height: 64px; top: 10px; right: 10px; border-radius: 14px; } .ch-stamp { font-size: 0.58rem; padding: 0.32rem 0.7rem; } } /* ─── Floating card on chapter photos: clearer scale on phones ─── */ @media (max-width: 600px) { .ch-floating { bottom: 12px; left: 12px; right: 12px; padding: 0.7rem 0.9rem; font-size: 0.78rem; } } /* ─── Section padding on phones for the inline-styled grid wrappers (works without :has() — uses class targeting on the grids inside) ─── */ @media (max-width: 600px) { .how-it-works-grid { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } /* The wrapping
usually inherits via the parent's inline style. Add specific selectors that wrap these grids + reset the heaviest paddings: */ .app-mosaic-grid, .path-tier-grid { padding-left: 0 !important; padding-right: 0 !important; } } /* Tighten section padding on mobile — desktop uses 10rem/6rem which crushes phone screens */ @media (max-width: 980px) { .how-it-works-grid { padding-top: 0; padding-bottom: 0; } /* Reach the parent
via the grid as a layout proxy. Sections that wrap the responsive grids get a saner mobile pad. */ .how-it-works-grid:first-child, body section:has(.how-it-works-grid), body section:has(.app-mosaic-grid), body section:has(.path-tier-grid) { padding-top: 4rem !important; padding-bottom: 4rem !important; padding-left: 5vw !important; padding-right: 5vw !important; } } /* Mobile cinematic */ @media (max-width: 980px) { .cine-frame { min-height: 92vh; height: 92vh; } .cine-frame.short { min-height: 75vh; height: 75vh; } .cine-frame .cf-content { padding: 0 5vw 3.5rem; } .cine-h1 { font-size: clamp(2.4rem, 11vw, 3.6rem); } .cine-h2 { font-size: clamp(2rem, 9vw, 3rem); } .cf-tile { position: relative; max-width: none; margin-top: 1rem; left: auto; right: auto; top: auto; bottom: auto; } .chapter { min-height: auto; padding: 4rem 5vw; } .chapter-grid, .chapter-grid.flip { grid-template-columns: 1fr; gap: 2rem; } .chapter-grid.flip .ch-photo { order: 0; } .ch-photo { aspect-ratio: 4/5; max-height: 70vh; } .dip, .trip { grid-template-columns: 1fr; } .bigquote { padding: 3.5rem 5vw; } } /* ========================================================================== v4 — Bulletproof image fade-in (CSS-only, no JS dependency) Replaces the .loaded-class trigger so cached images don't stay invisible. ========================================================================== */ .cine-frame > .cf-img:not(.cf-carousel) img, .ch-photo img, .page-hero-img img, #community-strip img { opacity: 0; animation: imgFadeIn 1.2s ease 0.05s forwards; } @keyframes imgFadeIn { to { opacity: 1; } } /* Ken Burns continues if applied — but the entry fade no longer waits for JS. Skip for carousel (it has its own active-slide-only Ken Burns). */ .cine-frame > .cf-img.kenburns:not(.cf-carousel) img { animation: imgFadeIn 1.2s ease 0.05s forwards, cfKen 18s ease-in-out 1.4s infinite alternate; } /* Belt-and-braces: any element that previously got "loaded" still works */ .cine-frame > .cf-img:not(.cf-carousel) img.loaded, .ch-photo img.loaded, .page-hero-img img.loaded, #community-strip img.loaded { opacity: 1; } /* ========================================================================== v4 — Instrument Serif tuning (replaces Fraunces visual feel) Instrument Serif is light by default, sharper terminals, more modern. ========================================================================== */ .cine-cap, .ch-pull, .ch-copy h2 em, .cine-h1 em, .cine-h2 em, .gold-serif, .serif, .serif-light, .bigquote blockquote, .bigquote blockquote em, [style*="font-family:var(--fi)"], [style*="font-family: var(--fi)"] { letter-spacing: -0.01em; } .cine-h1 em, .cine-h2 em, .ch-copy h2 em, .cine-cap b ~ em { font-weight: 400; } /* Italic accent — give it a touch more weight presence at large sizes */ .bigquote blockquote em { font-style: italic; } .gold-serif { font-weight: 400; } /* Floating-tile italic price needs a hair more breathing room with new font */ .cf-tile .ct-num, .ch-photo .ch-floating .cf-v, .stat-fraunces { font-feature-settings: "lnum" 1; } /* ========================================================================== v5 — Brand reset: kill all italic accent, single type voice (DM Sans) ========================================================================== */ /* --- KILL the italic serif treatment everywhere --- */ .gold-serif, .serif, .serif-light, .cine-h1 em, .cine-h2 em, .ch-copy h2 em, .bigquote blockquote em, .bigquote blockquote, .cine-cap, .cine-cap b, .ch-pull, .cine-frame em, .chapter em, .cf-tile .ct-num, .ch-photo .ch-floating .cf-v, .veh-tile .vp, .stack-card .stat-fraunces, .stat-fraunces { font-family: var(--f) !important; font-style: normal !important; } /* --- ACCENT word: ultra-bold lime, NO italic (Q3-c) --- */ .accent, em.accent, .cine-h1 em, .cine-h2 em, .ch-copy h2 em, .bigquote blockquote em, .gold-serif { font-family: var(--f) !important; font-style: normal !important; font-weight: 800 !important; color: var(--lime2) !important; letter-spacing: -0.05em !important; font-variant: normal !important; } /* --- Cinematic copy: tighter, more confident, sans only --- */ .cine-h1 { font-family: var(--f); font-weight: 800; font-style: normal !important; font-size: clamp(3rem, 7.8vw, 7.4rem); line-height: 0.86; letter-spacing: -0.055em; color: #fff; } .cine-h2 { font-family: var(--f); font-weight: 800; font-style: normal !important; font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: 0.88; letter-spacing: -0.05em; color: #fff; } .cine-cap { font-family: var(--f) !important; font-style: normal !important; font-weight: 400; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 620px; margin-top: 0.6rem; letter-spacing: -0.005em; } .cine-cap b, .cine-cap strong { font-weight: 700; color: var(--lime2); } /* Chapter copy — sans only */ .ch-copy h2 { font-family: var(--f); font-weight: 800; font-style: normal; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 0.9; letter-spacing: -0.045em; color: #fff; margin-bottom: 1.1rem; } .ch-copy .ch-lede { font-family: var(--f); font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.1rem); color: rgba(255,255,255,0.72); line-height: 1.65; max-width: 480px; margin-bottom: 1.2rem; } .ch-copy .ch-pull { font-family: var(--f); font-style: normal !important; font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--cream); line-height: 1.45; max-width: 480px; margin: 0; padding: 1rem 0 0; border-top: 1px solid rgba(255,255,255,0.08); } /* Big quote: sans, oversized, weight 800 */ .bigquote { padding: 6rem 6vw; } .bigquote blockquote { font-family: var(--f) !important; font-style: normal !important; font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.04em; color: var(--text); max-width: 1080px; margin: 0 auto; } .bigquote blockquote em, .bigquote blockquote .accent { font-family: var(--f) !important; font-style: normal !important; font-weight: 800; color: var(--lime2); } .bigquote .bq-attr { margin-top: 1.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime2); display: inline-flex; align-items: center; gap: 0.6rem; } .bigquote .bq-attr::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime2); box-shadow: 0 0 8px rgba(181,242,61,0.85); animation: chipPulse 2.4s ease-in-out infinite; } .bigquote .bq-attr::after { display: none; } /* Stamps and small caps anywhere — sans, no italic */ .ch-photo .ch-stamp { font-family: var(--f); font-style: normal; } /* Floating tile values — sans, tight tabular */ .ch-photo .ch-floating .cf-v { font-family: var(--f) !important; font-style: normal !important; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--lime2); font-variant-numeric: tabular-nums; } .cf-tile .ct-num { font-family: var(--f) !important; font-style: normal !important; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } /* Glass tile titles — sans only, no italic anywhere */ .gpanel h3, .gpanel h4 { font-family: var(--f); font-style: normal; } .gpanel .stack-eb { font-family: var(--f); } /* Stack-card stat — sans 800 */ .stack-card .stat-fraunces, .stack-card div[class*="stat"] { font-family: var(--f) !important; font-style: normal !important; font-weight: 800 !important; letter-spacing: -0.04em; } /* Buttons stay clean DM Sans */ .btn-lime, .btn-ghost, .btn-outline { font-family: var(--f); font-style: normal; } /* ========================================================================== v5 — Glass nav v2 (airy default → denser when scrolled) ========================================================================== */ nav { background: rgba(15,15,12,0.28); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 28px rgba(0,0,0,0.30); transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } nav.scrolled { background: rgba(8,8,7,0.72); border-color: rgba(255,255,255,0.10); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(181,242,61,0.05); } /* subtle lime hairline at the bottom edge when scrolled */ nav.scrolled::after { content:''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.45), transparent); pointer-events: none; } /* ========================================================================== v5 — THESHA etymology card (the brand spine) ========================================================================== */ .thesha { position: relative; background: var(--ink); padding: 7rem 6vw; overflow: hidden; } .thesha::before { content:''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(181,242,61,0.08), transparent 70%); } .thesha-card { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 4rem 4vw; background: linear-gradient(155deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 60%, rgba(181,242,61,0.04) 100%), rgba(10,9,7,0.55); border: 1px solid rgba(255,255,255,0.10); border-radius: 28px; backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 30px 80px rgba(0,0,0,0.50); overflow: hidden; } .thesha-card::before { content:''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.55), transparent); } .thesha-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime2); margin-bottom: 1.6rem; } .thesha-meta::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: var(--lime2); box-shadow: 0 0 0 2px rgba(181,242,61,0.18), 0 0 12px rgba(181,242,61,0.85); animation: chipPulse 2.4s ease-in-out infinite; } .thesha-meta .pron { font-family: var(--f); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; color: rgba(255,255,255,0.60); } .thesha-word { font-family: var(--f); font-weight: 800; font-size: clamp(4rem, 11vw, 9rem); line-height: 0.85; letter-spacing: -0.06em; color: #fff; margin-bottom: 1.4rem; } .thesha-def { font-family: var(--f); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--cream); max-width: 760px; margin-bottom: 2rem; } .thesha-def .accent { font-weight: 800; color: var(--lime2); } .thesha-divide { width: 60px; height: 2px; background: var(--lime2); margin: 2.4rem 0; opacity: 0.7; } .thesha-example-eb { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(181,242,61,0.78); margin-bottom: 0.7rem; } .thesha-example { font-family: var(--f); font-weight: 400; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 820px; margin-bottom: 0.8rem; } .thesha-example b { font-weight: 700; color: var(--lime2); } .thesha-trans { font-family: var(--f); font-weight: 400; font-size: 0.92rem; color: var(--soft); max-width: 820px; letter-spacing: 0.005em; } /* ========================================================================== v5 — Photo strip / grid: a row of unique images between chapters ========================================================================== */ .photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 0; } .photo-strip .ps-frame { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,0.06); } .photo-strip .ps-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .photo-strip .ps-frame:hover img { transform: scale(1.04); } .photo-strip .ps-frame::after { content:''; position: absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, transparent 60%, rgba(8,8,7,0.50) 100%); } .photo-strip .ps-cap { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--cream); /* Glass pill */ background: rgba(11,10,8,0.55); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--pill); padding: 0.36rem 0.78rem; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 8px 18px rgba(0,0,0,0.32), 0 0 0 1px rgba(0,0,0,0.18) inset; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, background 0.4s ease; max-width: calc(100% - 28px); } .photo-strip .ps-frame:hover .ps-cap { transform: translateY(-2px); border-color: rgba(202,255,80,0.35); background: rgba(11,10,8,0.65); } /* Tiny lime dot at the start of each pill — picks up the brand */ .photo-strip .ps-cap::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime2); box-shadow: 0 0 8px rgba(181,242,61,0.85); margin-right: 0.55rem; flex-shrink: 0; } @media (max-width: 980px) { .thesha { padding: 5rem 5vw; } .thesha-card { padding: 2.6rem 1.6rem; border-radius: 22px; } .thesha-word { font-size: clamp(3rem, 16vw, 5rem); } .photo-strip { grid-template-columns: 1fr 1fr; } .photo-strip .ps-frame:nth-child(3) { grid-column: span 2; aspect-ratio: 16/10; } } /* ========================================================================== v6 — Illustrated glass panels (inspired by remittance reference) Two-tone lime + cream illustrations on heavy glass, 2-3 word titles ========================================================================== */ /* Illustrated glass panel — feature card with hero illustration on top */ .illus-panel { position: relative; background: linear-gradient(155deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 55%, rgba(181,242,61,0.045) 100%), rgba(10,9,7,0.55); border: 1px solid rgba(255,255,255,0.10); border-radius: 22px; backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 24px 50px rgba(0,0,0,0.42), 0 4px 10px rgba(0,0,0,0.20); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s, box-shadow 0.4s; } .illus-panel::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.55), transparent); z-index: 2; } .illus-panel:hover { transform: translateY(-4px); border-color: rgba(181,242,61,0.22); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 32px 70px rgba(0,0,0,0.50), 0 0 0 1px rgba(181,242,61,0.06), 0 8px 24px rgba(181,242,61,0.06); } .illus-panel-head { padding: 1.6rem 1.6rem 0.6rem; } .illus-panel-head h3 { font-family: var(--f); font-weight: 800; font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -0.03em; color: #fff; margin: 0 0 0.5rem; line-height: 1.05; } .illus-panel-head p { font-family: var(--f); font-size: 0.88rem; font-weight: 400; color: rgba(255,255,255,0.62); line-height: 1.55; margin: 0; } /* Stage area where the illustration lives — soft gradient + dot grid background */ .illus-stage { position: relative; margin: 1.2rem 1rem 1.4rem; border-radius: 16px; background: radial-gradient(ellipse 60% 80% at 50% 60%, rgba(181,242,61,0.10) 0%, transparent 70%), linear-gradient(180deg, rgba(15,15,12,0.55), rgba(8,8,7,0.30)); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 -1px 0 rgba(0,0,0,0.30) inset; aspect-ratio: 16/11; overflow: hidden; display: flex; align-items: center; justify-content: center; } .illus-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,0.045) 0.6px, transparent 0.6px); background-size: 16px 16px; opacity: 0.6; } .illus-stage::after { /* faint glow halo behind the illustration */ content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 35% 55% at 50% 60%, rgba(181,242,61,0.16) 0%, transparent 65%); } .illus-stage svg { position: relative; z-index: 1; width: 60%; height: auto; max-height: 70%; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.40)); } /* Stage variant: smaller, tile-style */ .illus-stage.compact { aspect-ratio: 16/9; margin: 1rem 0.85rem 1rem; } .illus-stage.compact svg { width: 50%; } /* Illustration ornament: a small floating glass chip with $ or icon in it */ .illus-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: linear-gradient(140deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.22); border-radius: 9px; backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 20px rgba(0,0,0,0.30), 0 0 18px rgba(181,242,61,0.20); color: var(--lime2); } .illus-chip svg { width: 16px; height: 16px; filter: none; } /* Flag-network ornament — circles with hairlines connecting them */ .flag-network { position: relative; width: 100%; height: 100%; } .flag-network .fn-flag { position: absolute; width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center; border: 1.5px solid rgba(181,242,61,0.50); box-shadow: 0 0 0 2px rgba(8,8,7,0.85), 0 0 12px rgba(181,242,61,0.30); } .flag-network .fn-line { position: absolute; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(181,242,61,0.40), rgba(181,242,61,0.10)); z-index: 0; } /* Illustrated panel grid containers */ .illus-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; } .illus-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; } /* ========================================================================== v6 — Photo overlay illustrations (sit ON TOP of existing path photo cards) ========================================================================== */ .photo-illus-overlay { position: absolute; z-index: 3; bottom: 14px; right: 14px; width: 84px; height: 84px; background: linear-gradient(140deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 60%, rgba(181,242,61,0.10) 100%); border: 1px solid rgba(255,255,255,0.20); border-radius: 16px; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 26px rgba(0,0,0,0.40), 0 0 28px rgba(181,242,61,0.18); display: flex; align-items: center; justify-content: center; overflow: hidden; } .photo-illus-overlay::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.65), transparent); } .photo-illus-overlay svg { width: 60%; height: 60%; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.30)); } /* Bigger overlay for 4-up path cards */ .photo-illus-overlay.lg { width: 96px; height: 96px; } .photo-illus-overlay.lg svg { width: 65%; height: 65%; } /* 2-3 word nudge tag (sits as a small overlay label on photo cards) */ .nudge-tag { position: absolute; z-index: 3; top: 14px; right: 14px; padding: 0.42rem 0.85rem; background: linear-gradient(140deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)); border: 1px solid rgba(181,242,61,0.32); border-radius: var(--pill); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--lime2); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 8px 18px rgba(0,0,0,0.35); } @media (max-width: 980px) { .illus-grid-3 { grid-template-columns: 1fr 1fr; } .illus-grid-4 { grid-template-columns: 1fr 1fr; } .photo-illus-overlay { width: 68px; height: 68px; bottom: 10px; right: 10px; } .photo-illus-overlay.lg { width: 76px; height: 76px; } .nudge-tag { top: 10px; right: 10px; padding: 0.32rem 0.7rem; font-size: 0.6rem; } } @media (max-width: 600px) { .illus-grid-3, .illus-grid-4 { grid-template-columns: 1fr; } } /* ========================================================================== v7 — Polish pass: restraint, breathing room, restricted lime Lifts the baseline from "amateur dense" to "world-class fintech editorial" ========================================================================== */ /* --- Heavier negative space across all chapter sections --- */ .chapter { padding: 9rem 6vw; } .bigquote { padding: 9rem 6vw; } .thesha { padding: 9rem 6vw; } /* --- Headlines: smaller maxes, tighter, more elegant. NEVER shouty. --- */ .cine-h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); letter-spacing: -0.05em; line-height: 0.92; text-wrap: balance; } .cine-h2 { font-size: clamp(2rem, 4.4vw, 4rem); letter-spacing: -0.045em; line-height: 0.95; text-wrap: balance; } .ch-copy h2 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.04em; line-height: 0.96; margin-bottom: 1.4rem; text-wrap: balance; } /* --- Body copy: more editorial breathing --- */ .cine-cap { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7; color: rgba(255,255,255,0.72); max-width: 540px; } .ch-copy .ch-lede { line-height: 1.7; color: rgba(255,255,255,0.68); } .ch-copy .ch-pull { border-top: none; /* remove the divider line — too many separators */ padding: 0; margin-top: 1.6rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); font-weight: 500; color: rgba(255,255,255,0.85); line-height: 1.5; } /* DM Sans refined number / letter shapes */ body { font-feature-settings: "ss01", "cv11"; } /* --- Glass tiles: dial intensity down ~35% --- */ .gpanel { box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 40px rgba(0,0,0,0.30); } .gpanel::before { background: linear-gradient(90deg, transparent, rgba(181,242,61,0.30), transparent); } .illus-panel { box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 36px rgba(0,0,0,0.28); } .illus-panel::before { background: linear-gradient(90deg, transparent, rgba(181,242,61,0.32), transparent); } .illus-panel:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 22px 48px rgba(0,0,0,0.34); } .illus-stage { background: radial-gradient(ellipse 60% 80% at 50% 60%, rgba(181,242,61,0.05) 0%, transparent 70%), linear-gradient(180deg, rgba(15,15,12,0.55), rgba(8,8,7,0.30)); } .illus-stage::after { background: radial-gradient(ellipse 35% 55% at 50% 60%, rgba(181,242,61,0.10) 0%, transparent 65%); } .illus-stage svg { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.30)); } .thesha-card { box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 22px 60px rgba(0,0,0,0.36); } .thesha-card::before { background: linear-gradient(90deg, transparent, rgba(181,242,61,0.40), transparent); } /* Quieter section eyebrow chip — less neon-pulse, more editorial */ .section-eb { background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), rgba(15,15,12,0.45); border-color: rgba(255,255,255,0.08); color: rgba(220,255,180,0.78); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 14px rgba(0,0,0,0.20); } .section-eb::before { box-shadow: 0 0 0 2px rgba(181,242,61,0.12), 0 0 8px rgba(181,242,61,0.55); } /* --- LIME RESTRAINT: kill lime in low-priority surfaces --- */ /* Photo card stamps and pills no longer use lime — neutral cream instead */ .ch-photo .ch-stamp { color: rgba(240,235,227,0.92); border-color: rgba(255,255,255,0.18); background: rgba(15,15,12,0.62); } .story-card .sc-pill { color: rgba(240,235,227,0.90); border-color: rgba(255,255,255,0.16); background: rgba(15,15,12,0.72); } .story-card .sc-attr { color: rgba(240,235,227,0.85); } .story-card .sc-attr::before { background: rgba(240,235,227,0.85); box-shadow: none; } .photo-strip .ps-cap { color: rgba(240,235,227,0.92); } /* Ribbon pills lose lime — quieter, more confident */ .cf-ribbon .rib { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.10); } .cf-ribbon .rib::before { background: rgba(255,255,255,0.55); box-shadow: none; animation: none; } /* Quieter accent: keep the weight but reduce brightness slightly + tracking */ .accent, em.accent, .cine-h1 em, .cine-h2 em, .ch-copy h2 em, .bigquote blockquote em, .gold-serif { color: var(--lime2) !important; letter-spacing: -0.04em !important; } /* Hero photo veil: more editorial, photo breathes more, copy zone is darker */ .cine-frame .cf-veil { background: linear-gradient(180deg, rgba(8,8,7,0.10) 0%, transparent 30%, transparent 65%, rgba(8,8,7,0.92) 100%), linear-gradient(95deg, rgba(8,8,7,0.62) 0%, rgba(8,8,7,0.05) 50%, transparent 80%); } .cine-frame .cf-veil.center { background: radial-gradient(ellipse 75% 85% at 50% 50%, transparent 35%, rgba(8,8,7,0.50) 75%, rgba(8,8,7,0.85) 100%); } /* Thesha word slightly tighter */ .thesha-word { font-size: clamp(3.2rem, 9vw, 7rem); letter-spacing: -0.07em; } /* Bigquote toned down */ .bigquote blockquote { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.18; font-weight: 700; } /* Mobile tighten */ @media (max-width: 980px) { .chapter, .thesha, .bigquote { padding: 5.5rem 5vw; } .cine-h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); } .cine-h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); } } /* ========================================================================== v8 — Overlay-on-photo card system (universal illustration treatment) Photo = depth container. Illustration = glass overlay anchored bottom-right. Caption sits below the photo. Standardized aspect ratios + paddings. ========================================================================== */ .photo-card { position: relative; background: linear-gradient(155deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 60%, rgba(181,242,61,0.030) 100%), rgba(10,9,7,0.45); border: 1px solid rgba(255,255,255,0.07); border-radius: 22px; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 36px rgba(0,0,0,0.28); overflow: hidden; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s, box-shadow 0.4s; display: flex; flex-direction: column; } /* Coming-soon badge — sits over the photo, top-left */ .photo-card .coming-soon { position: absolute; top: 14px; left: 14px; z-index: 4; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); background: rgba(11,10,8,0.72); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--pill); padding: 0.34rem 0.78rem; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 6px 16px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.18) inset; } /* Coming-soon cards get a softer photo + slightly muted overall — to signal "later" */ .photo-card.has-coming-soon .pc-photo img { filter: brightness(0.62) saturate(0.85); } .photo-card.has-coming-soon:hover .pc-photo img { filter: brightness(0.72) saturate(0.90); } .photo-card.has-coming-soon .pc-body h3 { color: rgba(255,255,255,0.78); } .photo-card::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.32), transparent); z-index: 4; } .photo-card:hover { transform: translateY(-3px); border-color: rgba(181,242,61,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 22px 48px rgba(0,0,0,0.34); } .photo-card .pc-photo { position: relative; aspect-ratio: 16 / 11; overflow: hidden; } .photo-card .pc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; filter: brightness(0.78); } .photo-card:hover .pc-photo img { transform: scale(1.03); filter: brightness(0.85); } /* Picture wrapping with WebP source — make it transparent to layout so existing img-targeted CSS (object-fit, scale, etc.) continues to work as it always has. */ picture { display: contents; } .photo-card .pc-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgba(8,8,7,0.40) 100%), linear-gradient(95deg, rgba(8,8,7,0.10) 0%, transparent 50%); } /* Bottom-right glass overlay, fixed 24px from edges, square */ .photo-card .pc-overlay { position: absolute; z-index: 3; right: 24px; bottom: 24px; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 60%, rgba(181,242,61,0.10) 100%); border: 1px solid rgba(255,255,255,0.20); border-radius: 18px; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 24px rgba(0,0,0,0.40); } .photo-card .pc-overlay::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.65), transparent); } .photo-card .pc-overlay svg { width: 60px; height: 60px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.30)); } /* Body / caption sits below the photo, BossMoney pattern */ .photo-card .pc-body { padding: 1.6rem 1.7rem 1.7rem; } .photo-card .pc-body h3 { font-family: var(--f); font-weight: 800; font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -0.025em; color: #fff; margin: 0 0 0.4rem; line-height: 1.15; } .photo-card .pc-body p { font-family: var(--f); font-size: 0.92rem; font-weight: 400; color: rgba(255,255,255,0.62); line-height: 1.6; margin: 0; } /* Grid container shared with .illus-grid-3 for layout */ .photo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; } /* Compact overlay variant for already-existing path cards (smaller, refined) */ .photo-illus-overlay { width: 88px; height: 88px; right: 18px; bottom: 18px; top: auto; left: auto; } .photo-illus-overlay.lg { width: 100px; height: 100px; } .photo-illus-overlay svg { width: 58%; height: 58%; } @media (max-width: 980px) { .photo-grid-3 { grid-template-columns: 1fr 1fr; } .photo-card .pc-overlay { width: 84px; height: 84px; right: 16px; bottom: 16px; } .photo-card .pc-overlay svg { width: 48px; height: 48px; } } @media (max-width: 600px) { .photo-grid-3 { grid-template-columns: 1fr; } } /* ========================================================================== v9 — Small feature glyph: 36px chip with backdrop, used in roadmap "All in one app" ========================================================================== */ .feat-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 0.95rem; border-radius: 11px; background: linear-gradient(140deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 60%, rgba(181,242,61,0.08) 100%); border: 1px solid rgba(202,255,80,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 6px 14px rgba(0,0,0,0.35), 0 0 16px rgba(181,242,61,0.10); position: relative; overflow: hidden; } .feat-icon::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.55), transparent); } .feat-icon svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.30)); } .gpanel:hover .feat-icon { border-color: rgba(202,255,80,0.32); box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 8px 18px rgba(0,0,0,0.40), 0 0 24px rgba(181,242,61,0.18); } /* ========================================================================== v9 — Chapter-side floating illustration tile (sits above ch-floating stat) Shows up on why.html problem chapters and other chapter scenes ========================================================================== */ .ch-illus { position: absolute; top: 18px; right: 18px; z-index: 3; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; /* Layered fill: dark wash so the chip stays legible on light photos, plus the original glass highlight + lime tint */ background: linear-gradient(140deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 60%, rgba(181,242,61,0.10) 100%), rgba(11,10,8,0.42); border: 1px solid rgba(255,255,255,0.22); border-radius: 18px; backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(0,0,0,0.20) inset, 0 12px 26px rgba(0,0,0,0.45), 0 0 28px rgba(181,242,61,0.16); overflow: hidden; } .ch-illus::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.65), transparent); } .ch-illus svg { width: 64%; height: 64%; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.30)); } @media (max-width: 980px) { .ch-illus { width: 72px; height: 72px; top: 12px; right: 12px; } } /* ========================================================================== v10 — Polish pass: focus-visible indicators + reduced-motion support ========================================================================== */ /* Visible focus ring for keyboard users on every interactive element. Mouse clicks won't show it (focus-visible); only keyboard / programmatic focus. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lime2); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 4px rgba(202,255,80,0.18); } /* CTAs already have rounded shapes — match the focus ring to their pill shape */ .btn-lime:focus-visible, .btn-outline:focus-visible, .btn-ghost:focus-visible, .nav-cta:focus-visible { outline-offset: 4px; border-radius: 999px; } /* Photo cards and gpanels are clickable surfaces — give them a softer ring */ .photo-card:focus-visible, .gpanel:focus-visible { outline: 2px solid var(--lime2); outline-offset: 4px; } /* Respect prefers-reduced-motion — disable looping / decorative animations. Keep transitions for state changes (hover, focus) since they convey UI feedback, but cut their duration so nothing feels sluggish. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.05s !important; scroll-behavior: auto !important; } /* Kenburns: hold the start frame instead of slow-zooming */ .cf-img.kenburns img, .hero-slide img, .kenburns img { animation: none !important; transform: none !important; } /* Marquee: lock to a static position, drop overflow visual */ .mq-t { animation: none !important; transform: none !important; } .marquee { overflow: hidden; } } /* ========================================================================== v11 — Illustration motion layer (icon-design + svg-animation + interaction-design) Tiers: 1. Universal lift + glow on all overlay containers when their parent hovers 2. Always-on idle motion (very subtle): halos breathe, sparks twinkle 3. Hover-only morphs per illustration (nozzle wiggle, coin spin, etc.) 4. Entrance reveal (works alongside existing .reveal IntersectionObserver) Easings come from the interaction-design skill's standard set: --ease-out-quart for entering motion (cubic-bezier(0.16, 1, 0.3, 1)) --ease-spring for playful overshoots (cubic-bezier(0.34, 1.56, 0.64, 1)) All effects are scoped so they automatically disappear under prefers-reduced-motion via the @media block above. ========================================================================== */ :root { --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Smoother easings introduced for the "no erratic motion" pass */ --ease-smooth: cubic-bezier(0.45, 0, 0.55, 1); /* gentle in-out, no overshoot */ --ease-gentle: cubic-bezier(0.65, 0, 0.35, 1); /* slightly more decisive in-out */ --ease-soft-spring: cubic-bezier(0.34, 1.20, 0.64, 1); /* spring without the bounce — replaces ease-spring where overshoot was too much */ } /* ── Tier 1: container hover lift ─────────────────────────────────────────── */ .pc-overlay, .photo-illus-overlay, .ch-illus, .feat-icon { transition: transform 0.45s var(--ease-out-quart), border-color 0.32s ease-out, box-shadow 0.45s var(--ease-out-quart); will-change: transform; } .pc-overlay svg, .photo-illus-overlay svg, .ch-illus svg, .feat-icon svg { transition: transform 0.55s var(--ease-out-quart); transform-origin: center center; } /* Photo card hover amplifies its overlay */ .photo-card:hover .pc-overlay { transform: translateY(-3px) scale(1.05); border-color: rgba(202,255,80,0.45); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 22px 44px rgba(0,0,0,0.55), 0 0 36px rgba(181,242,61,0.32); } .photo-card:hover .pc-overlay svg { transform: scale(1.08); } /* gpanel hover lifts its photo-illus-overlay (the path tier cards) */ .gpanel:hover .photo-illus-overlay { transform: translateY(-3px) scale(1.05); border-color: rgba(202,255,80,0.45); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 18px 38px rgba(0,0,0,0.50), 0 0 32px rgba(181,242,61,0.30); } .gpanel:hover .photo-illus-overlay svg { transform: scale(1.10); } /* Chapter photo hover scales its ch-illus */ .ch-photo { transition: filter 0.4s ease-out; } .ch-photo:hover .ch-illus { transform: translateY(-2px) scale(1.06); border-color: rgba(202,255,80,0.45); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 18px 36px rgba(0,0,0,0.50), 0 0 32px rgba(181,242,61,0.30); } .ch-photo:hover .ch-illus svg { transform: scale(1.10); } /* Feature icon chips already get hover via .gpanel — add a small SVG twist */ .gpanel:hover .feat-icon svg { transform: scale(1.10) rotate(-4deg); } /* ── Tier 2: idle keyframes ───────────────────────────────────────────────── */ @keyframes anim-halo-breathe { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.06); } } @keyframes anim-spark-twinkle { 0%, 100% { opacity: 0.7; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.18) rotate(15deg); } } @keyframes anim-pulse-ring { 0% { stroke-opacity: 0.45; r: 22; } 60% { stroke-opacity: 0.04; r: 28; } 100% { stroke-opacity: 0; r: 28; } } @keyframes anim-coin-spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.1); } 100% { transform: scaleX(1); } } @keyframes anim-nozzle-wiggle { 0%, 100% { transform: rotate(0deg) translate(0, 0); } 30% { transform: rotate(-4deg) translate(-0.6px, -0.4px); } 70% { transform: rotate(4deg) translate(0.6px, 0.4px); } } @keyframes anim-umbrella-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3.5deg); } 75% { transform: rotate(3.5deg); } } @keyframes anim-spiral-spin { to { transform: rotate(360deg); } } @keyframes anim-needle-sweep { 0% { transform: rotate(80deg); } 100% { transform: rotate(-72deg); } } @keyframes anim-stamp-drop { 0% { transform: scale(2.4) rotate(20deg); opacity: 0; } 60% { transform: scale(0.92) rotate(-2deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes anim-bar-grow { from { transform: scaleY(0.08); } to { transform: scaleY(1); } } @keyframes anim-draw-line { from { stroke-dashoffset: var(--len, 200); } to { stroke-dashoffset: 0; } } /* ── Always-on idle motion (very subtle) ─────────────────────────────────── */ [data-anim="halo"] { transform-box: view-box; transform-origin: center; animation: anim-halo-breathe 4.6s ease-in-out infinite; } [data-anim="spark"] { transform-box: fill-box; transform-origin: center; animation: anim-spark-twinkle 2.8s ease-in-out infinite; } /* ── Hover-only choreography ──────────────────────────────────────────────── */ /* Speed up halos and sparks on hover for amplified life */ .photo-card:hover .pc-overlay [data-anim="halo"], .gpanel:hover .photo-illus-overlay [data-anim="halo"], .ch-photo:hover .ch-illus [data-anim="halo"] { animation-duration: 1.6s; } .photo-card:hover .pc-overlay [data-anim="spark"], .gpanel:hover .photo-illus-overlay [data-anim="spark"], .ch-photo:hover .ch-illus [data-anim="spark"] { animation-duration: 1.0s; } /* Pump nozzle wiggles on hover */ .photo-card:hover [data-anim="nozzle"] { transform-box: fill-box; transform-origin: 0% 50%; animation: anim-nozzle-wiggle 1.4s ease-in-out infinite; } /* Umbrella canopy sways */ .photo-card:hover [data-anim="umbrella"] { transform-box: fill-box; transform-origin: 50% 100%; animation: anim-umbrella-sway 2s ease-in-out infinite; } /* Rain streaks: each contains a sitting above the umbrella canopy. On hover, they fall through the canopy and disappear (deflected), then loop. Streaks stay at full opacity for most of the cycle so they read clearly. */ @keyframes anim-rain-fall { 0% { transform: translateY(-3px); opacity: 0; } 10% { transform: translateY(-1px); opacity: 1; } 85% { transform: translateY(6px); opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } } .po3-rain > g { opacity: 0; } .photo-card:hover .po3-rain > g { animation: anim-rain-fall 1.3s linear infinite !important; animation-iteration-count: infinite !important; } .photo-card:hover [data-anim="rain-1"] { animation-delay: 0s !important; } .photo-card:hover [data-anim="rain-2"] { animation-delay: 0.45s !important; } .photo-card:hover [data-anim="rain-3"] { animation-delay: 0.15s !important; } .photo-card:hover [data-anim="rain-4"] { animation-delay: 0.65s !important; } .photo-card:hover [data-anim="rain-5"] { animation-delay: 0.30s !important; } .photo-card:hover [data-anim="rain-6"] { animation-delay: 0.85s !important; animation-duration: 1.1s !important; } .photo-card:hover [data-anim="rain-7"] { animation-delay: 0.55s !important; animation-duration: 1.5s !important; } /* Top lime coin "spins" via horizontal scaleX flip */ .photo-card:hover [data-anim="coin-top"] { transform-box: fill-box; transform-origin: center; animation: anim-coin-spin 2.4s ease-in-out infinite; } /* Pulse rings ripple outward */ .photo-card:hover [data-anim="pulse-ring"], .gpanel:hover [data-anim="pulse-ring"] { animation: anim-pulse-ring 2s ease-out infinite; } /* Debt spiral spins inward (why.html problem 01) */ .ch-photo:hover [data-anim="spiral"] { transform-box: view-box; transform-origin: 32px 32px; animation: anim-spiral-spin 6s linear infinite; } /* Fuel gauge needle sweeps from F to E (index.html chapter 1) */ .ch-photo:hover [data-anim="needle"] { transform-box: view-box; transform-origin: 32px 32px; animation: anim-needle-sweep 1.4s var(--ease-spring) forwards; } /* Passport stamp drops in (why.html problem 02) */ .ch-photo:hover [data-anim="stamp"] { transform-box: fill-box; transform-origin: center; animation: anim-stamp-drop 0.7s var(--ease-spring) forwards; } /* Live earnings sparkline + dot pulse on hover */ .photo-card:hover [data-anim="sparkline-dot"] { transform-box: fill-box; transform-origin: center; animation: anim-spark-twinkle 1.2s ease-in-out infinite; } /* Bars grow on hover for the chart icon and roadmap month-3 */ .gpanel:hover [data-anim="bar"], .ch-photo:hover [data-anim="bar"] { transform-box: fill-box; transform-origin: 50% 100%; animation: anim-bar-grow 0.7s var(--ease-out-quart) forwards; } /* ── Redesigned why.html / index.html motifs ─────────────────────────── */ /* Vortex spiral (Problem 01): each ring rotates at different speed. On hover the spin accelerates dramatically — sucks viewer in. */ @keyframes anim-rotate { to { transform: rotate(360deg); } } @keyframes anim-rotate-rev { to { transform: rotate(-360deg); } } [data-anim="spiral"] { transform-box: view-box; transform-origin: 32px 32px; } [data-anim="spiral"] > circle:nth-child(1) { transform-origin: 32px 32px; animation: anim-rotate 16s linear infinite; } [data-anim="spiral"] > circle:nth-child(2) { transform-origin: 32px 32px; animation: anim-rotate-rev 11s linear infinite; } [data-anim="spiral"] > circle:nth-child(3) { transform-origin: 32px 32px; animation: anim-rotate 7s linear infinite; } .ch-photo:hover [data-anim="spiral"] > circle:nth-child(1) { animation-duration: 3s; } .ch-photo:hover [data-anim="spiral"] > circle:nth-child(2) { animation-duration: 2s; } .ch-photo:hover [data-anim="spiral"] > circle:nth-child(3) { animation-duration: 1.2s; } /* Key + lock (Problem 04): on hover the key slides right toward the keyhole, then snaps back. The red ✕ flashes in. */ @keyframes anim-key-insert { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(8px); } 55% { transform: translateX(8px); } 70% { transform: translateX(-1px); } 85% { transform: translateX(0); } } @keyframes anim-reject-flash { 0%, 100% { opacity: 1; transform: scale(1); } 45% { opacity: 0.4; transform: scale(0.85); } 55% { opacity: 1; transform: scale(1.18); } 70% { opacity: 1; transform: scale(1); } } [data-anim="key"] { transform-box: view-box; transform-origin: 14px 32px; transition: transform 0.4s var(--ease-out-quart); } [data-anim="reject"]{ transform-box: view-box; transform-origin: 43px 32px; transition: transform 0.4s var(--ease-out-quart); } .ch-photo:hover [data-anim="key"] { animation: anim-key-insert 1.6s ease-in-out infinite; } .ch-photo:hover [data-anim="reject"] { animation: anim-reject-flash 1.6s ease-in-out infinite; } /* Bridge + bolt (Problem 05): bridge dashes draw across, then the red bolt "snaps" the connection. Idle: bolt pulses softly. Hover: bridge tries to draw fully then snaps in a loop. */ @keyframes anim-bridge-draw { 0% { stroke-dashoffset: 24; opacity: 0.2; } 45% { stroke-dashoffset: 0; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 72% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 24; opacity: 0.2; } } @keyframes anim-bolt-snap { 0%, 60% { transform: scale(1); opacity: 0.85; } 62% { transform: scale(1.4); opacity: 1; } 72% { transform: scale(0.9); opacity: 0.7; } 85% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0.85; } } [data-anim="bridge"] { stroke-dasharray: 4 2; stroke-dashoffset: 0; transition: stroke-dashoffset 0.4s ease-out, opacity 0.3s; } [data-anim="bolt"] { transform-box: fill-box; transform-origin: center; animation: anim-bolt-snap 3s ease-in-out infinite; } .ch-photo:hover [data-anim="bridge"] { stroke-dasharray: 4 2; animation: anim-bridge-draw 2s ease-in-out infinite; } .ch-photo:hover [data-anim="bolt"] { animation-duration: 1.4s; } /* AUTO orbit ring: dashed ring rotates around card; on hover spins faster */ [data-anim="orbit"] { transform-box: view-box; transform-origin: 32px 32px; animation: anim-rotate 14s linear infinite; } .photo-card:hover [data-anim="orbit"] { animation-duration: 3s; } /* ── Magnetic hover glow ring (draws viewer in) ──────────────────────── */ .pc-overlay::after, .photo-illus-overlay::after, .ch-illus::after, .feat-icon::after { content: ''; position: absolute; inset: -8px; border-radius: inherit; pointer-events: none; border: 2px solid rgba(202,255,80,0); transition: border-color 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart), opacity 0.6s var(--ease-out-quart); opacity: 0; } .photo-card:hover .pc-overlay::after, .gpanel:hover .photo-illus-overlay::after, .ch-photo:hover .ch-illus::after, .gpanel:hover .feat-icon::after { inset: -14px; border-color: rgba(202,255,80,0.55); opacity: 1; transform: scale(1.02); animation: anim-magnet-ring 1.6s ease-out infinite; } @keyframes anim-magnet-ring { 0% { inset: -8px; border-color: rgba(202,255,80,0.55); opacity: 1; } 100% { inset: -22px; border-color: rgba(202,255,80,0); opacity: 0; } } /* ── New simplified motif animations ─────────────────────────────────── */ /* Liquid gold fill — realistic rise + idle slosh. Default: liquid sits low (mostly empty, glass droplet shows through). Hover: smoothly fills up. Idle: gentle horizontal slosh suggesting real fluid. */ @keyframes anim-liquid-slosh { 0%, 100% { transform: translate(-2px, 30px); } 50% { transform: translate(2px, 30.5px); } } @keyframes anim-liquid-rise { 0% { transform: translate(-2px, 30px); } 60% { transform: translate(0px, -2px); } 75% { transform: translate(1px, 1px); } /* tiny overshoot bob */ 90% { transform: translate(-1px, -0.5px); } 100% { transform: translate(0px, 0px); } } @keyframes anim-liquid-slosh-full { 0%, 100% { transform: translate(-1.5px, 0px); } 50% { transform: translate(1.5px, -0.5px); } } [data-anim="liquid"] { transform-box: fill-box; transform-origin: center; /* Idle: liquid sits low, gently sloshing */ animation: anim-liquid-slosh 3.2s ease-in-out infinite; } .photo-card:hover [data-anim="liquid"] { /* On hover: smooth realistic rise (1.4s) then continue gentle slosh on top */ animation: anim-liquid-rise 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards, anim-liquid-slosh-full 2.6s ease-in-out 1.4s infinite; } /* Star spin */ @keyframes anim-star-spin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.18); } 100% { transform: rotate(360deg) scale(1); } } .photo-card:hover [data-anim="star"] { transform-box: fill-box; transform-origin: center; animation: anim-star-spin 2.4s var(--ease-out-quart) infinite; } /* Gold coin: idle = gentle bob with glint pulse. Hover = flips around the vertical axis (scaleX trick simulates 3D rotation, compresses to an edge view, then expands to back, then back to face). Brightness flash at the edge view sells the metallic shimmer. */ @keyframes anim-coin-bob { 0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 4px rgba(232,179,61,0.45)); } 50% { transform: translateY(-1.5px) scale(1.02); filter: drop-shadow(0 0 8px rgba(255,221,128,0.65)); } } @keyframes anim-coin-flip { 0% { transform: scaleX(1) scaleY(1); filter: drop-shadow(0 0 6px rgba(232,179,61,0.55)); } 25% { transform: scaleX(0.05) scaleY(1.05); filter: drop-shadow(0 0 14px rgba(255,224,138,1)) brightness(1.6); } 50% { transform: scaleX(-1) scaleY(1); filter: drop-shadow(0 0 6px rgba(232,179,61,0.55)); } 75% { transform: scaleX(-0.05) scaleY(1.05); filter: drop-shadow(0 0 14px rgba(255,224,138,1)) brightness(1.6); } 100% { transform: scaleX(1) scaleY(1); filter: drop-shadow(0 0 6px rgba(232,179,61,0.55)); } } [data-anim="coin-flip"] { transform-box: view-box; transform-origin: 32px 32px; animation: anim-coin-bob 2.4s ease-in-out infinite; } .photo-card:hover [data-anim="coin-flip"] { animation: anim-coin-flip 2s var(--ease-smooth) infinite; } /* Passport stamp slam: idle = stamp hovers slightly (poised). Hover = stamp SLAMS down — quick scale crash + brightness flash on impact + slight rotation. */ @keyframes anim-stamp-poise { 0%, 100% { transform: translateY(-1.5px) scale(1.03); } 50% { transform: translateY(0px) scale(1); } } @keyframes anim-stamp-slam { 0% { transform: translateY(-12px) scale(1.4) rotate(-8deg); opacity: 0.85; filter: drop-shadow(0 0 0 rgba(251,248,244,0)); } 35% { transform: translateY(0) scale(0.92) rotate(0); opacity: 1; filter: drop-shadow(0 0 16px rgba(251,248,244,0.65)); } 50% { transform: translateY(0) scale(1.06) rotate(2deg); } 100% { transform: translateY(0) scale(1) rotate(0); filter: drop-shadow(0 0 8px rgba(251,248,244,0.30)); } } [data-anim="stamp-slam"] { transform-box: view-box; transform-origin: 32px 32px; animation: anim-stamp-poise 2.6s ease-in-out infinite; } .photo-card:hover [data-anim="stamp-slam"] { animation: anim-stamp-slam 1.6s var(--ease-soft-spring) infinite; } /* Stamp morphs into Tesha brand mark on hover: lime fill fades in, cream T cross-fades out, black T cross-fades in. */ .po5-brand-fill { opacity: 0; transition: opacity 0.45s var(--ease-out-quart) 0.15s; } .po5-t-brand { opacity: 0; transition: opacity 0.35s var(--ease-out-quart) 0.25s; } .po5-t-cream { opacity: 1; transition: opacity 0.30s var(--ease-out-quart) 0.10s; } .photo-card:hover .po5-brand-fill { opacity: 1; } .photo-card:hover .po5-t-brand { opacity: 1; } .photo-card:hover .po5-t-cream { opacity: 0; } /* ========================================================================== v12 — Tier ladder (Card.html "Four tiers" section) Ascending heights = literal "ladder", progression line connects them, each card has a tier-specific illustration with meaningful hover motion. ========================================================================== */ .tier-ladder { padding: 9rem 6vw; } .tier-ladder .chapter-inner { max-width: 1280px; margin: 0 auto; } .tier-ladder .tier-intro { max-width: 820px; margin-bottom: 4rem; } /* Grid is positioned relative so the line can sit behind the cards. align-items: end so cards line up at the BOTTOM and only the tops differ in height. */ .tier-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; align-items: end; padding-top: 2rem; } /* Progression line behind cards (between tier illustrations) */ .tier-line { position: absolute; left: 12%; right: 12%; top: 64px; /* aligned with the lower-half of the illustration */ height: 2px; background: rgba(255,255,255,0.06); border-radius: 2px; z-index: 0; pointer-events: none; } .tier-line-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(220,150,60,0.55), rgba(180,180,200,0.55) 33%, var(--lime2) 66%, #FFD466); border-radius: 2px; box-shadow: 0 0 12px rgba(202,255,80,0.45); transition: width 1.6s var(--ease-out-quart) 0.2s; } .tier-ladder:hover .tier-line-fill, .tier-grid.in-view .tier-line-fill { width: 100%; } /* Always animate to full on page load — simpler than IntersectionObserver here */ .tier-line-fill { animation: tier-line-grow 2s var(--ease-out-quart) 0.4s forwards; } @keyframes tier-line-grow { from { width: 0%; } to { width: 100%; } } /* Card base */ .tier-card { position: relative; z-index: 1; padding: 2.4rem 1.6rem 2rem; border-radius: 22px; background: linear-gradient(155deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 60%, rgba(181,242,61,0.030) 100%), rgba(10,9,7,0.50); border: 1px solid rgba(255,255,255,0.07); backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 36px rgba(0,0,0,0.30); transition: transform 0.45s var(--ease-out-quart), border-color 0.32s ease-out, box-shadow 0.45s var(--ease-out-quart); } /* Ascending heights — literal ladder: 240 → 280 → 320 → 360 */ .tier-card.t1 { min-height: 240px; } .tier-card.t2 { min-height: 280px; } .tier-card.t3 { min-height: 320px; } .tier-card.t4 { min-height: 360px; } /* Featured tier has a stronger lime treatment */ .tier-card.featured { border-color: rgba(181,242,61,0.32); background: linear-gradient(155deg, rgba(181,242,61,0.12) 0%, rgba(181,242,61,0.02) 50%, rgba(255,255,255,0.04) 100%), rgba(12,11,9,0.50); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 22px 44px rgba(0,0,0,0.40), 0 0 32px rgba(181,242,61,0.18); } /* Tier illustration: big, bold, sits above content */ .tier-illus { width: 84px; height: 84px; margin-bottom: 1.6rem; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 60%, rgba(181,242,61,0.08) 100%); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 8px 18px rgba(0,0,0,0.40); position: relative; overflow: hidden; transition: transform 0.45s var(--ease-out-quart), border-color 0.32s, box-shadow 0.45s var(--ease-out-quart); } .tier-illus::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,242,61,0.55), transparent); } .tier-illus svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.30)); } /* Per-tier illustration tinting for the chip border */ .tier-card.t1 .tier-illus { border-color: rgba(232,179,61,0.32); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 8px 18px rgba(0,0,0,0.40), 0 0 16px rgba(232,179,61,0.14); } .tier-card.t2 .tier-illus { border-color: rgba(180,184,200,0.28); } .tier-card.t3 .tier-illus { border-color: rgba(202,255,80,0.45); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 8px 18px rgba(0,0,0,0.40), 0 0 22px rgba(181,242,61,0.32); } .tier-card.t4 .tier-illus { border-color: rgba(232,179,61,0.45); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 8px 20px rgba(0,0,0,0.40), 0 0 22px rgba(232,179,61,0.32); } .tier-num { font-family: var(--f); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.45rem; } .tier-card.t1 .tier-num { color: rgba(232,179,61,0.92); } .tier-card.t2 .tier-num { color: rgba(180,184,200,0.85); } .tier-card.t3 .tier-num { color: var(--lime2); } .tier-card.t4 .tier-num { color: rgba(232,179,61,0.92); } .tier-h { font-family: var(--f); font-weight: 800; font-size: clamp(1.35rem, 1.6vw, 1.55rem); letter-spacing: -0.03em; color: var(--text); line-height: 1.05; margin: 0 0 0.7rem; } .tier-p { font-family: var(--f); font-size: 0.84rem; color: var(--muted); line-height: 1.6; margin: 0 0 1.4rem; } .tier-meter { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: auto; } .tier-meter > span { display: block; height: 100%; border-radius: 2px; transform-origin: left center; transform: scaleX(0); animation: tier-meter-fill 1.4s var(--ease-out-quart) 0.6s forwards; } .tier-card.t1 .tier-meter > span { background: linear-gradient(90deg, rgba(232,179,61,0.85), rgba(180,116,12,1)); } .tier-card.t2 .tier-meter > span { background: linear-gradient(90deg, rgba(232,232,240,0.85), rgba(124,130,148,1)); } .tier-card.t3 .tier-meter > span { background: linear-gradient(90deg, var(--lime3), var(--lime)); box-shadow: 0 0 8px rgba(202,255,80,0.55); } .tier-card.t4 .tier-meter > span { background: linear-gradient(90deg, #FFE89E, #E8B33D); box-shadow: 0 0 10px rgba(232,179,61,0.55); } @keyframes tier-meter-fill { to { transform: scaleX(1); } } /* Hover: card lifts + glow intensifies + illustration scales */ .tier-card:hover { transform: translateY(-6px); border-color: rgba(202,255,80,0.32); box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 24px 48px rgba(0,0,0,0.45), 0 0 36px rgba(181,242,61,0.22); } .tier-card:hover .tier-illus { transform: scale(1.06); border-color: rgba(202,255,80,0.55); } /* ── Per-tier hover motion ─────────────────────────────────────────────── */ /* T1 STARTER — sprout COMES TO LIFE on hover: stem rises from soil, then left leaf unfurls, then right leaf unfurls. Sequence: 0.0s: stem starts growing 0.6s: stem full, left leaf emerges with spring overshoot 0.95s: right leaf emerges with spring overshoot */ @keyframes anim-stem-grow { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } @keyframes anim-leaf-pop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } [data-anim="sprout-stem"] { transform-box: fill-box; transform-origin: 50% 100%; } [data-anim="sprout-leaf-l"] { transform-box: fill-box; transform-origin: 100% 50%; } [data-anim="sprout-leaf-r"] { transform-box: fill-box; transform-origin: 0% 50%; } .tier-card.t1:hover [data-anim="sprout-stem"] { animation: anim-stem-grow 0.6s var(--ease-out-quart) both; } .tier-card.t1:hover [data-anim="sprout-leaf-l"] { animation: anim-leaf-pop 0.5s var(--ease-spring) 0.55s both; } .tier-card.t1:hover [data-anim="sprout-leaf-r"] { animation: anim-leaf-pop 0.5s var(--ease-spring) 0.85s both; } /* T2 MOVER — bars: regrow in stagger sequence on hover */ .tier-card.t2:hover [data-anim="bar-1"] { transform-box: fill-box; transform-origin: 50% 100%; animation: anim-bar-grow-slow 0.6s var(--ease-out-quart) 0s forwards; } .tier-card.t2:hover [data-anim="bar-2"] { transform-box: fill-box; transform-origin: 50% 100%; animation: anim-bar-grow-slow 0.6s var(--ease-out-quart) 0.1s forwards; } .tier-card.t2:hover [data-anim="bar-3"] { transform-box: fill-box; transform-origin: 50% 100%; animation: anim-bar-grow-slow 0.6s var(--ease-out-quart) 0.2s forwards; } .tier-card.t2:hover [data-anim="bar-4"] { transform-box: fill-box; transform-origin: 50% 100%; animation: anim-bar-grow-slow 0.6s var(--ease-out-quart) 0.3s forwards; } /* T3 BUILDER — blocks: pop in from bottom up on hover */ @keyframes anim-block-pop { 0% { transform: translateY(8px) scale(0.94); opacity: 0.4; } 60% { transform: translateY(-2px) scale(1.04); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } [data-anim^="block-"] { transform-box: fill-box; transform-origin: 50% 100%; } .tier-card.t3:hover [data-anim="block-3"] { animation: anim-block-pop 0.5s var(--ease-spring) 0s forwards; } .tier-card.t3:hover [data-anim="block-2"] { animation: anim-block-pop 0.5s var(--ease-spring) 0.12s forwards; } .tier-card.t3:hover [data-anim="block-1"] { animation: anim-block-pop 0.5s var(--ease-spring) 0.24s forwards; } /* T4 OWNER — coronation moment: crown rises with spring bounce, golden aura ring expands outward, jewels light up in sequence (left → top → right). */ @keyframes anim-crown-rise { 0% { transform: translateY(20px) scale(0.7) rotate(-12deg); opacity: 0.3; } 60% { transform: translateY(-3px) scale(1.06) rotate(2deg); opacity: 1; } 85% { transform: translateY(1px) scale(0.98) rotate(-0.5deg); } 100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; } } @keyframes anim-aura-burst { 0% { transform: scale(0.55); opacity: 0; stroke-width: 4; } 35% { opacity: 0.85; } 100% { transform: scale(1.5); opacity: 0; stroke-width: 0.5; } } @keyframes anim-jewel-light { 0%, 100% { fill: #0B0A08; filter: drop-shadow(0 0 0 rgba(255,212,102,0)); } 35% { fill: #FFE89E; filter: drop-shadow(0 0 6px rgba(255,212,102,0.95)); } } [data-anim="crown"] { transform-box: fill-box; transform-origin: 50% 100%; } [data-anim="aura"] { transform-box: view-box; transform-origin: 32px 36px; opacity: 0; } [data-anim^="jewel-"] { transform-box: fill-box; transform-origin: center; } .tier-card.t4:hover [data-anim="crown"] { animation: anim-crown-rise 1s var(--ease-spring) both; } .tier-card.t4:hover [data-anim="aura"] { animation: anim-aura-burst 1.1s var(--ease-out-quart) 0.5s both; } .tier-card.t4:hover [data-anim="jewel-1"] { animation: anim-jewel-light 0.9s ease-in-out 0.6s both; } .tier-card.t4:hover [data-anim="jewel-2"] { animation: anim-jewel-light 0.9s ease-in-out 0.75s both; } .tier-card.t4:hover [data-anim="jewel-3"] { animation: anim-jewel-light 0.9s ease-in-out 0.9s both; } @media (max-width: 980px) { .tier-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; } .tier-card.t1, .tier-card.t2, .tier-card.t3, .tier-card.t4 { min-height: 280px; } .tier-line { display: none; } } @media (max-width: 600px) { .tier-grid { grid-template-columns: 1fr; } } /* Orbit ring counter-rotation */ [data-anim="ring-cw"] { transform-box: view-box; transform-origin: 32px 32px; animation: anim-rotate 14s linear infinite; } [data-anim="ring-ccw"] { transform-box: view-box; transform-origin: 32px 32px; animation: anim-rotate-rev 18s linear infinite; } .photo-card:hover [data-anim="ring-cw"] { animation-duration: 4s; } .photo-card:hover [data-anim="ring-ccw"] { animation-duration: 5s; } /* Cross pulse — for hospital cross */ @keyframes anim-cross-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .photo-card:hover [data-anim="cross"] { transform-box: fill-box; transform-origin: center; animation: anim-cross-pulse 1.4s ease-in-out infinite; } /* Sparkline draw-on */ [data-anim="sparkline"] { stroke-dasharray: 64 64; stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--ease-out-quart); } .photo-card:hover [data-anim="sparkline"] { stroke-dashoffset: -128; } /* Bars staggered grow */ @keyframes anim-bar-grow-slow { 0% { transform: scaleY(0.2); } 100% { transform: scaleY(1); } } .gpanel:hover [data-anim="bar-1"], .ch-photo:hover [data-anim="bar-1"] { transform-box: fill-box; transform-origin: 50% 100%; animation: anim-bar-grow-slow 0.5s var(--ease-out-quart) forwards; animation-delay: 0s; } .gpanel:hover [data-anim="bar-2"], .ch-photo:hover [data-anim="bar-2"] { transform-box: fill-box; transform-origin: 50% 100%; animation: anim-bar-grow-slow 0.5s var(--ease-out-quart) forwards; animation-delay: 0.08s; } .gpanel:hover [data-anim="bar-3"], .ch-photo:hover [data-anim="bar-3"] { transform-box: fill-box; transform-origin: 50% 100%; animation: anim-bar-grow-slow 0.5s var(--ease-out-quart) forwards; animation-delay: 0.16s; } .gpanel:hover [data-anim="bar-4"], .ch-photo:hover [data-anim="bar-4"] { transform-box: fill-box; transform-origin: 50% 100%; animation: anim-bar-grow-slow 0.5s var(--ease-out-quart) forwards; animation-delay: 0.24s; } /* Tick draw-on for the Day 1 check */ @keyframes anim-tick-draw { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } } [data-anim="tick"] { stroke-dasharray: 32; stroke-dashoffset: 0; } .ch-photo:hover [data-anim="tick"] { animation: anim-tick-draw 0.8s var(--ease-out-quart) forwards; } /* Vault hub "lock" — twists open */ @keyframes anim-vault-twist { 0% { transform: rotate(0deg); } 60% { transform: rotate(45deg); } 100% { transform: rotate(45deg); } } .gpanel:hover [data-anim="vault"] { transform-box: fill-box; transform-origin: center; animation: anim-vault-twist 1s var(--ease-out-quart) forwards; } /* Crown jewels glint */ @keyframes anim-jewel-glint { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: 0.4; } } .gpanel:hover [data-anim="jewel"] { animation: anim-jewel-glint 1.2s ease-in-out infinite; } /* Emergency alert: aggressive shake + flash for the empty fuel droplet */ @keyframes anim-alert-shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 10% { transform: translate(-1.5px, 0.5px) rotate(-2deg); } 20% { transform: translate(1.5px, -0.5px) rotate(2deg); } 30% { transform: translate(-1.5px, 0.5px) rotate(-2deg); } 40% { transform: translate(1.5px, -0.5px) rotate(2deg); } 50% { transform: translate(-0.5px, 0.5px) rotate(-1deg); } 60% { transform: translate(0.5px, -0.5px) rotate(1deg); } } @keyframes anim-alert-flash { 0%, 100% { filter: drop-shadow(0 0 10px rgba(199,61,31,0.55)); } 50% { filter: drop-shadow(0 0 18px rgba(255,107,71,1)); } } [data-anim="alert"] { transform-box: view-box; transform-origin: 32px 32px; animation: anim-alert-flash 1.6s ease-in-out infinite; } .ch-photo:hover [data-anim="alert"] { animation: anim-alert-shake 1.2s var(--ease-smooth) infinite, anim-alert-flash 1.2s var(--ease-smooth) infinite; } /* Problem 02 — Hourglass. Idle: a single grain falls through the neck (years quietly slipping). Subtle pulse glow. Hover: hourglass flips 180° (the reset), grain falls faster, sand pile rebuilds. */ @keyframes anim-hourglass-flip { 0% { transform: rotate(0deg); } 40%, 60% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes anim-hourglass-flash { 0%, 100% { filter: drop-shadow(0 0 8px rgba(199,61,31,0.55)); } 50% { filter: drop-shadow(0 0 20px rgba(255,107,71,1)); } } @keyframes anim-grain-fall { 0% { transform: translateY(0); opacity: 1; } 85% { transform: translateY(14px); opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } } [data-anim="hourglass"] { transform-box: view-box; transform-origin: 32px 32px; animation: anim-hourglass-flash 1.8s ease-in-out infinite; } [data-anim="grain"] { transform-box: view-box; transform-origin: 32px 34px; animation: anim-grain-fall 1.4s ease-in infinite; } .ch-photo:hover [data-anim="hourglass"] { animation: anim-hourglass-flip 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite, anim-hourglass-flash 1.2s ease-in-out infinite; } .ch-photo:hover [data-anim="grain"] { animation: anim-grain-fall 0.6s ease-in infinite; } /* Problem 03 — Price tag SHAKES NO (refusing to discount). */ @keyframes anim-tag-shake-no { 0%, 100% { transform: translateX(0) rotate(-3deg); } 20% { transform: translateX(-3px) rotate(-7deg); } 40% { transform: translateX(3px) rotate(1deg); } 60% { transform: translateX(-2px) rotate(-5deg); } 80% { transform: translateX(2px) rotate(0deg); } } [data-anim="tag-shake"] { transform-box: view-box; transform-origin: 46px 32px; /* pivot at the tag hole */ transform: rotate(-3deg); } .ch-photo:hover [data-anim="tag-shake"] { animation: anim-tag-shake-no 1.4s var(--ease-smooth) infinite; } /* Problem 04 — Padlock JIGGLES (trying to unlock) but stays locked. Idle: subtle red flash. Hover: aggressive horizontal jiggle + brighter flash. */ @keyframes anim-lock-jiggle { 0%, 100% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-2px) rotate(-2deg); } 30% { transform: translateX(2px) rotate(2deg); } 45% { transform: translateX(-2px) rotate(-2deg); } 60% { transform: translateX(2px) rotate(2deg); } 75% { transform: translateX(-1px) rotate(-1deg); } } @keyframes anim-lock-flash { 0%, 100% { filter: drop-shadow(0 0 8px rgba(199,61,31,0.55)); } 50% { filter: drop-shadow(0 0 18px rgba(255,107,71,1)); } } [data-anim="lock-jiggle"] { transform-box: view-box; transform-origin: 32px 40px; animation: anim-lock-flash 1.6s ease-in-out infinite; } .ch-photo:hover [data-anim="lock-jiggle"] { animation: anim-lock-jiggle 1.4s var(--ease-smooth) infinite, anim-lock-flash 1.4s var(--ease-smooth) infinite; } /* Problem 05 — Heart halves try to mend, then SNAP apart with red flash. Idle: halves gapped (~2.5px each side), soft static glow. Hover: halves close (mended at 35-45%), then SNAP apart at 55%, settle. */ @keyframes anim-heart-l { 0%, 100% { transform: translateX(-2.5px); filter: drop-shadow(0 0 8px rgba(199,61,31,0.55)); } 35% { transform: translateX(0); } 45% { transform: translateX(0); filter: drop-shadow(0 0 22px rgba(255,107,71,1)); } 55% { transform: translateX(-6px); } 70% { transform: translateX(-2.5px); } } @keyframes anim-heart-r { 0%, 100% { transform: translateX(2.5px); filter: drop-shadow(0 0 8px rgba(199,61,31,0.55)); } 35% { transform: translateX(0); } 45% { transform: translateX(0); filter: drop-shadow(0 0 22px rgba(255,107,71,1)); } 55% { transform: translateX(6px); } 70% { transform: translateX(2.5px); } } [data-anim="heart-l"] { transform-box: view-box; transform-origin: 32px 32px; transform: translateX(-2.5px); } [data-anim="heart-r"] { transform-box: view-box; transform-origin: 32px 32px; transform: translateX(2.5px); } .ch-photo:hover [data-anim="heart-l"] { animation: anim-heart-l 1.8s var(--ease-out-quart) infinite; } .ch-photo:hover [data-anim="heart-r"] { animation: anim-heart-r 1.8s var(--ease-out-quart) infinite; } /* Loan-shark jaws — open + close. Idle: jaws breathe slowly open (predator anticipating). Hover: jaws SNAP SHUT — the bite — fast, repeating. */ @keyframes anim-jaw-top-breathe { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(-3px); } } @keyframes anim-jaw-bot-breathe { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(3px); } } @keyframes anim-jaw-top-snap { 0% { transform: translateY(-3px); } 20% { transform: translateY(-6px); } /* wind-up: jaw opens wider */ 45% { transform: translateY(8px) scaleX(1.02); } /* SNAP shut */ 55% { transform: translateY(7px) scaleX(0.98); } /* impact ringing */ 100% { transform: translateY(-3px); } } @keyframes anim-jaw-bot-snap { 0% { transform: translateY(3px); } 20% { transform: translateY(6px); } 45% { transform: translateY(-8px) scaleX(1.02); } 55% { transform: translateY(-7px) scaleX(0.98); } 100% { transform: translateY(3px); } } @keyframes anim-jaw-flash { 0%, 100% { filter: drop-shadow(0 0 10px rgba(199,61,31,0.55)); } 45% { filter: drop-shadow(0 0 22px rgba(255,107,71,1)); } } [data-anim="jaw-top"] { transform-box: view-box; transform-origin: 32px 14px; animation: anim-jaw-top-breathe 3s ease-in-out infinite; } [data-anim="jaw-bot"] { transform-box: view-box; transform-origin: 32px 50px; animation: anim-jaw-bot-breathe 3s ease-in-out infinite; } .ch-photo:hover [data-anim="jaw-top"] { animation: anim-jaw-top-snap 1.4s var(--ease-soft-spring) infinite, anim-jaw-flash 1.4s var(--ease-smooth) infinite; } .ch-photo:hover [data-anim="jaw-bot"] { animation: anim-jaw-bot-snap 1.4s var(--ease-soft-spring) infinite, anim-jaw-flash 1.4s var(--ease-smooth) infinite; } /* ── Tier 4: entrance reveal hooked into existing .reveal observer ─────── */ .pc-overlay, .photo-illus-overlay, .ch-illus, .feat-icon { opacity: 0; transform: translateY(10px) scale(0.94); transition: opacity 0.55s var(--ease-out-quart) 0.08s, transform 0.55s var(--ease-out-quart) 0.08s, border-color 0.32s ease-out, box-shadow 0.45s var(--ease-out-quart); } /* Once page-loaded (no IntersectionObserver dependence — these elements live inside containers that are visible by the time the user scrolls past), show them. Use a tiny JS-driven body class once DOM is parsed, or fall back to simply being visible on page load. */ .pc-overlay, .photo-illus-overlay, .ch-illus, .feat-icon { opacity: 1; transform: translateY(0) scale(1); } /* ═══════════════════════════════════════════════════════════════════════════ ROADMAP REVAMP — single bold motifs with meaningful hover (v=35) Day 1: stamp slams onto page · Month 3: bulb flashes on · Month 12: key turns App icons: contactless waves, seal stamps, members orbit, heartbeat scrolls, traveling dot on route, plane glides, medal rays sweep Path tiers: coins bob, pillars light up sequentially, T-emblem pulses ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Day 1 — bold lime fingerprint, the "first record" identity motif ─── */ @keyframes anim-fp-glow-idle { 0%, 100% { filter: drop-shadow(0 0 6px rgba(202,255,80,0.55)); } 50% { filter: drop-shadow(0 0 14px rgba(202,255,80,0.85)); } } @keyframes anim-fp-confirmed { 0%, 65%, 100% { filter: drop-shadow(0 0 6px rgba(202,255,80,0.55)); } 78% { filter: drop-shadow(0 0 24px rgba(255,255,255,0.95)) drop-shadow(0 0 32px rgba(202,255,80,0.95)); } } @keyframes anim-scan-travel { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(-54px); opacity: 0; } } [data-anim="fingerprint"] { animation: anim-fp-glow-idle 3s ease-in-out infinite; } [data-anim="scan-line"] { filter: drop-shadow(0 0 4px rgba(202,255,80,0.95)); } .ch-photo:hover [data-anim="fingerprint"] { animation: anim-fp-confirmed 1.8s ease-in-out infinite; } .ch-photo:hover [data-anim="scan-line"] { animation: anim-scan-travel 1.8s linear infinite; } /* ─── Month 3 — bold lime sunburst, single iconic "lights on" motif ─── */ @keyframes anim-sun-glow-idle { 0%, 100% { filter: drop-shadow(0 0 6px rgba(202,255,80,0.55)); } 50% { filter: drop-shadow(0 0 14px rgba(202,255,80,0.85)); } } @keyframes anim-sun-flash { 0%, 100% { filter: drop-shadow(0 0 8px rgba(202,255,80,0.65)); } 50% { filter: drop-shadow(0 0 26px rgba(255,255,200,1)) drop-shadow(0 0 36px rgba(202,255,80,0.95)); } } @keyframes anim-sun-rays-burst { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.10); } } [data-anim="sun"] { animation: anim-sun-glow-idle 3s ease-in-out infinite; } [data-anim="sun-rays"] { transform-box: view-box; transform-origin: 32px 32px; animation: anim-sun-rays-burst 3s ease-in-out infinite; } .ch-photo:hover [data-anim="sun"] { animation: anim-sun-flash 0.9s ease-in-out infinite; } .ch-photo:hover [data-anim="sun-rays"] { animation: anim-sun-rays-burst 0.9s ease-in-out infinite; } /* ─── Month 12 — T-key turns 90° to unlock ─── */ @keyframes anim-key-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } } @keyframes anim-key-turn { 0%, 12% { transform: rotate(0deg); } 50%, 62% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } } [data-anim="key"] { transform-box: view-box; transform-origin: 20px 32px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); animation: anim-key-float 3s ease-in-out infinite; } .ch-photo:hover [data-anim="key"] { animation: anim-key-turn 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; } /* ─── B1: Virtual + physical card — contactless waves pulse ─── */ @keyframes anim-wave-pulse-1 { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.65); } } @keyframes anim-wave-pulse-2 { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 0.25; transform: scale(0.65); } } @keyframes anim-card-lift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-0.8px, -0.6px); } } .gpanel:hover [data-anim="wave-1"] { transform-box: fill-box; transform-origin: 0 50%; animation: anim-wave-pulse-1 0.7s ease-in-out infinite; } .gpanel:hover [data-anim="wave-2"] { transform-box: fill-box; transform-origin: 0 50%; animation: anim-wave-pulse-2 0.7s ease-in-out infinite 0.18s; } .gpanel:hover [data-anim="card-front"] { transform-box: fill-box; transform-origin: center; animation: anim-card-lift 1.6s ease-in-out infinite; } /* ─── B2: Earnings — sparkline already covered for .photo-card; add .gpanel ─── */ [data-anim="sparkline"] { stroke-dasharray: 100; stroke-dashoffset: 100; } .gpanel:hover [data-anim="sparkline"] { animation: anim-spark-draw 0.9s var(--ease-out-quart) forwards; } @keyframes anim-spark-draw { to { stroke-dashoffset: 0; } } @keyframes anim-spark-tip-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } } .gpanel:hover [data-anim="spark-tip"] { transform-box: fill-box; transform-origin: center; animation: anim-spark-tip-pulse 0.9s ease-in-out infinite 0.9s; } /* ─── B3: Tesha Comply — seal stamps & check draws ─── */ @keyframes anim-seal-stamp { 0% { transform: scale(1.18); } 35% { transform: scale(0.94); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } } @keyframes anim-seal-check-draw { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } } [data-anim="seal-check"] { stroke-dasharray: 14; stroke-dashoffset: 14; } .gpanel:hover [data-anim="seal"] { transform-box: fill-box; transform-origin: center; animation: anim-seal-stamp 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .gpanel:hover [data-anim="seal-check"] { animation: anim-seal-check-draw 0.5s var(--ease-out-quart) forwards 0.5s; } /* ─── B4: Tesha Circle — members orbit & pool pulses ─── */ @keyframes anim-member-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } } @keyframes anim-circle-rotate { to { transform: rotate(360deg); } } @keyframes anim-pool-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .gpanel:hover [data-anim="circle-outer"] { transform-box: fill-box; transform-origin: center; animation: anim-circle-rotate 8s linear infinite; } [data-anim~="member"] { transform-box: fill-box; transform-origin: center; } .gpanel:hover [data-anim~="member"] { animation: anim-member-pulse 1.4s ease-in-out infinite; } .gpanel:hover [data-anim~="m-1"] { animation-delay: 0s; } .gpanel:hover [data-anim~="m-2"] { animation-delay: 0.16s; } .gpanel:hover [data-anim~="m-3"] { animation-delay: 0.32s; } .gpanel:hover [data-anim~="m-4"] { animation-delay: 0.48s; } .gpanel:hover [data-anim~="m-5"] { animation-delay: 0.10s; } .gpanel:hover [data-anim~="m-6"] { animation-delay: 0.40s; } .gpanel:hover [data-anim~="m-7"] { animation-delay: 0.55s; } .gpanel:hover [data-anim~="m-8"] { animation-delay: 0.25s; } .gpanel:hover [data-anim="circle-pool"] { transform-box: fill-box; transform-origin: center; animation: anim-pool-pulse 1.2s ease-in-out infinite; } /* ─── B5: Tesha Protect — heartbeat scrolls horizontally ─── */ @keyframes anim-heartbeat-scroll { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } } @keyframes anim-shield-pulse { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 4px rgba(202,255,80,0.85)); } } @keyframes anim-cross-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.10); } } [data-anim="heartbeat"] { stroke-dasharray: 6 4; } .gpanel:hover [data-anim="heartbeat"] { animation: anim-heartbeat-scroll 1.6s linear infinite; } .gpanel:hover [data-anim="shield"] { animation: anim-shield-pulse 1.6s ease-in-out infinite; } .gpanel:hover [data-anim="cross"] { transform-box: fill-box; transform-origin: center; animation: anim-cross-pulse 1.0s ease-in-out infinite; } /* ─── B6: Tesha Track — pin bobs, route dashes scroll, dot travels ─── */ @keyframes anim-pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } @keyframes anim-route-dash { to { stroke-dashoffset: -30; } } [data-anim="pin"] { transform-box: fill-box; transform-origin: bottom center; } .gpanel:hover [data-anim="pin"] { animation: anim-pin-bob 1.0s ease-in-out infinite; } .gpanel:hover [data-anim="route"] { animation: anim-route-dash 1.6s linear infinite; } .gpanel:hover [data-anim="travel-dot"] { opacity: 1; filter: drop-shadow(0 0 2px rgba(255,255,255,0.85)); } /* ─── B7: Send money home — plane glides, heart pulses ─── */ @keyframes anim-plane-glide { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2.5px, -1.5px); } } @keyframes anim-trail-march { to { stroke-dashoffset: -26; } } @keyframes anim-home-heart-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.30); } 60% { transform: scale(0.95); } } [data-anim="plane"] { transform-box: fill-box; transform-origin: center; } .gpanel:hover [data-anim="plane"] { animation: anim-plane-glide 1.4s ease-in-out infinite; } .gpanel:hover [data-anim="trail"] { animation: anim-trail-march 1.4s linear infinite; } [data-anim="home-heart"] { transform-box: fill-box; transform-origin: center; } .gpanel:hover [data-anim="home-heart"] { animation: anim-home-heart-beat 0.9s ease-in-out infinite; } /* ─── B8: Rewards — rays sweep around, medal pulses, star scales ─── */ @keyframes anim-rays-sweep { to { transform: rotate(360deg); } } @keyframes anim-medal-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(202,255,80,0.85)); } } @keyframes anim-star-twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .gpanel:hover [data-anim="reward-rays"] { transform-box: fill-box; transform-origin: 16px 14px; animation: anim-rays-sweep 4s linear infinite; } .gpanel:hover [data-anim="medal"] { transform-box: fill-box; transform-origin: 16px 14px; animation: anim-medal-pulse 1.4s ease-in-out infinite; } .gpanel:hover [data-anim="medal-star"] { transform-box: fill-box; transform-origin: center; animation: anim-star-twinkle 1.0s ease-in-out infinite 0.3s; } /* ─── C2: Path tier 2027 — coins bob in stagger ─── */ @keyframes anim-coin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.8px); } } @keyframes anim-coin-r-glow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 6px rgba(202,255,80,0.85)); } } @keyframes anim-member-ring-spin { to { transform: rotate(360deg); } } [data-anim~="coin"] { transform-box: fill-box; transform-origin: center; } .gpanel:hover [data-anim~="coin"] { animation: anim-coin-bob 1.6s ease-in-out infinite; } .gpanel:hover [data-anim~="coin-5"] { animation-delay: 0s; } .gpanel:hover [data-anim~="coin-4"] { animation-delay: 0.1s; } .gpanel:hover [data-anim~="coin-3"] { animation-delay: 0.2s; } .gpanel:hover [data-anim~="coin-2"] { animation-delay: 0.3s; } .gpanel:hover [data-anim~="coin-r"] { animation: anim-coin-bob 1.6s ease-in-out infinite 0.3s, anim-coin-r-glow 1.6s ease-in-out infinite 0.3s; } .gpanel:hover [data-anim="member-ring"] { transform-box: view-box; transform-origin: 32px 14px; animation: anim-member-ring-spin 6s linear infinite; } /* ─── C4: Path tier 2029+ — pillars light up sequentially, T pulses ─── */ @keyframes anim-pillar-light { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 6px rgba(202,255,80,0.85)); } } @keyframes anim-t-emblem-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(202,255,80,0.95)); } } .gpanel:hover [data-anim~="pillar"] { animation: anim-pillar-light 1.8s ease-in-out infinite; } .gpanel:hover [data-anim~="pillar-l"] { animation-delay: 0s; } .gpanel:hover [data-anim~="pillar-cl"] { animation-delay: 0.2s; } .gpanel:hover [data-anim~="pillar-cr"] { animation-delay: 0.4s; } .gpanel:hover [data-anim~="pillar-r"] { animation-delay: 0.6s; } .gpanel:hover [data-anim="t-emblem"] { transform-box: view-box; transform-origin: 32px 14px; animation: anim-t-emblem-pulse 1.8s ease-in-out infinite 0.45s; } /* ═════════════════════════════════════════════════════════════════════════ PATH TIER ELABORATIONS (v=38) — richer scenes per tier with hover storytelling ═════════════════════════════════════════════════════════════════════════ */ /* ─── C1: 2026 NCR Live — LIQUID GOLD droplet, sheen sweep, pulse rings ─── */ @keyframes anim-gold-glow-idle { 0%, 100% { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(212,172,42,0.65)); } 50% { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 16px rgba(251,229,136,0.95)); } } @keyframes anim-gold-wobble { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.04, 0.96); } 50% { transform: scale(0.97, 1.03); } 75% { transform: scale(1.03, 0.97); } } @keyframes anim-gold-sheen-sweep { 0% { transform: translate(-3px, -3px); opacity: 0.45; } 40% { transform: translate(2px, 4px); opacity: 0.95; } 100% { transform: translate(10px, 18px); opacity: 0; } } @keyframes anim-gold-glint-twinkle { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.6); opacity: 0.55; } } @keyframes anim-signal-ring-pulse { 0% { transform: scale(0.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } } [data-anim="gold-droplet"] { transform-box: view-box; transform-origin: 32px 30px; animation: anim-gold-glow-idle 3s ease-in-out infinite; } [data-anim="gold-shape"] { transform-box: fill-box; transform-origin: center; } [data-anim="gold-sheen"] { transform-box: view-box; transform-origin: 26px 24px; } [data-anim~="signal-ring"] { transform-box: view-box; transform-origin: 32px 34px; } .gpanel:hover [data-anim="gold-droplet"] { animation: anim-gold-glow-idle 1.4s ease-in-out infinite; } .gpanel:hover [data-anim="gold-shape"] { animation: anim-gold-wobble 1.6s ease-in-out infinite; } .gpanel:hover [data-anim="gold-sheen"] { animation: anim-gold-sheen-sweep 1.8s ease-in-out infinite; } [data-anim="gold-glint"], [data-anim="gold-glint-tiny"] { transform-box: fill-box; transform-origin: center; } .gpanel:hover [data-anim="gold-glint"] { animation: anim-gold-glint-twinkle 1.4s ease-in-out infinite; } .gpanel:hover [data-anim="gold-glint-tiny"] { animation: anim-gold-glint-twinkle 1.4s ease-in-out infinite 0.4s; } .gpanel:hover [data-anim~="signal-ring"] { animation: anim-signal-ring-pulse 2.4s ease-out infinite; } .gpanel:hover [data-anim~="r1"] { animation-delay: 0s; } .gpanel:hover [data-anim~="r2"] { animation-delay: 0.6s; } /* ─── C2: 2027 Co-op Financial — pot + 3 coins falling in stagger sequence ─── */ @keyframes anim-coin-drop { 0%, 10% { transform: translateY(-8px) scale(1); opacity: 0; } 20% { opacity: 1; } 60% { transform: translateY(12px) scale(0.9); opacity: 1; } 72% { transform: translateY(14px) scale(0.7); opacity: 0.4; } 100% { transform: translateY(14px) scale(0.7); opacity: 0; } } @keyframes anim-pot-heart-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(202,255,80,0.65)); } 50% { transform: scale(1.18); filter: drop-shadow(0 0 8px rgba(202,255,80,0.95)); } } @keyframes anim-pot-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.4px); } } [data-anim~="drop-coin"] { transform-box: fill-box; transform-origin: center; opacity: 0; } .gpanel:hover [data-anim~="drop-coin"] { animation: anim-coin-drop 1.6s cubic-bezier(0.55, 0, 0.55, 1) infinite; } .gpanel:hover [data-anim~="dc1"] { animation-delay: 0s; } .gpanel:hover [data-anim~="dc2"] { animation-delay: 0.4s; } .gpanel:hover [data-anim~="dc3"] { animation-delay: 0.8s; } [data-anim="pot-heart"] { transform-box: fill-box; transform-origin: center; } .gpanel:hover [data-anim="pot-heart"] { animation: anim-pot-heart-pulse 1.6s ease-in-out infinite 0.5s; } [data-anim="pot-body"] { transform-box: fill-box; transform-origin: center bottom; } .gpanel:hover [data-anim="pot-body"] { animation: anim-pot-bounce 1.6s ease-in-out infinite 0.5s; } /* ─── C3: 2028 Co-op Bank — SAFE: dial spins, door swings open, gold revealed ─── */ @keyframes anim-safe-dial-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes anim-safe-dial-spin-reverse { 0% { transform: rotate(0deg); } 100% { transform: rotate(-180deg); } } @keyframes anim-safe-door-open { 0%, 5% { transform: rotateY(0deg); } 50%, 70% { transform: rotateY(-72deg); } 95%, 100%{ transform: rotateY(0deg); } } @keyframes anim-safe-interior-reveal { 0%, 25% { opacity: 0; } 50%, 70% { opacity: 1; } 90%, 100% { opacity: 0; } } @keyframes anim-safe-handle-turn { 0%, 30% { transform: rotate(0deg); } 45%, 65% { transform: rotate(-25deg); } 80%, 100%{ transform: rotate(0deg); } } [data-anim="safe-dial"] { transform-box: fill-box; transform-origin: center; } .gpanel:hover [data-anim="safe-dial"] { animation: anim-safe-dial-spin 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; } [data-anim="safe-door"] { transform-box: fill-box; transform-origin: left center; perspective: 200px; transform-style: preserve-3d; } .gpanel:hover [data-anim="safe-door"] { animation: anim-safe-door-open 4s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-delay: 1s; } [data-anim="safe-interior"] { opacity: 0; } .gpanel:hover [data-anim="safe-interior"] { animation: anim-safe-interior-reveal 4s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-delay: 1s; } [data-anim="safe-handle"] { transform-box: fill-box; transform-origin: left center; } .gpanel:hover [data-anim="safe-handle"] { animation: anim-safe-handle-turn 4s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-delay: 1s; } /* ─── C4: 2029+ Mutual Bank — TOWER lights up floor-by-floor + T sign signals ─── */ @keyframes anim-floor-light-up { 0%, 10% { fill-opacity: 0.15; filter: none; } 20%, 100% { fill-opacity: 1; filter: drop-shadow(0 0 4px rgba(202,255,80,0.85)); } } @keyframes anim-tower-glow { 0%, 100% { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.65)); } 50% { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.65)) drop-shadow(0 0 12px rgba(202,255,80,0.65)); } } @keyframes anim-tsign-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(202,255,80,0.85)); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(202,255,80,1)); } } @keyframes anim-tower-signal-pulse { 0% { transform: scale(0.5); stroke-opacity: 0; } 20% { stroke-opacity: 0.85; } 100% { transform: scale(2.2); stroke-opacity: 0; } } [data-anim="tower"] { animation: anim-tower-glow 4s ease-in-out infinite; } .gpanel:hover [data-anim="tower"] { animation: anim-tower-glow 2s ease-in-out infinite; } /* Floors start dim, light up sequentially top-to-bottom */ [data-anim~="floor"] rect { fill-opacity: 0.15; } .gpanel:hover [data-anim~="floor"] rect { animation: anim-floor-light-up 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .gpanel:hover [data-anim~="floor-1"] rect { animation-delay: 0s; } .gpanel:hover [data-anim~="floor-2"] rect { animation-delay: 0.25s; } .gpanel:hover [data-anim~="floor-3"] rect { animation-delay: 0.50s; } .gpanel:hover [data-anim~="floor-4"] rect { animation-delay: 0.75s; } /* T sign at top pulses brightly */ [data-anim="tower-tsign"] { transform-box: view-box; transform-origin: 32px 5.5px; } .gpanel:hover [data-anim="tower-tsign"] { animation: anim-tsign-pulse 1.2s ease-in-out infinite 1s; } /* Signal pulse rings emanate from T sign on hover */ [data-anim~="tower-signal"] { transform-box: view-box; transform-origin: 32px 5.5px; } .gpanel:hover [data-anim~="tower-signal"] { animation: anim-tower-signal-pulse 2s ease-out infinite; } .gpanel:hover [data-anim~="ts1"] { animation-delay: 1s; } .gpanel:hover [data-anim~="ts2"] { animation-delay: 1.5s; } /* Reduced motion: extend disable list */ @media (prefers-reduced-motion: reduce) { [data-anim="gold-droplet"], [data-anim="gold-shape"], [data-anim="gold-sheen"], [data-anim~="signal-ring"], [data-anim~="drop-coin"], [data-anim="pot-heart"], [data-anim="pot-body"], [data-anim="safe-dial"], [data-anim="safe-door"], [data-anim="safe-interior"], [data-anim="safe-handle"], [data-anim="tower"], [data-anim~="floor"] rect, [data-anim="tower-tsign"], [data-anim~="tower-signal"] { animation: none !important; transform: none !important; fill-opacity: 1 !important; } } /* ─── Reduced motion: disable decorative animations ─── */ @media (prefers-reduced-motion: reduce) { [data-anim="fingerprint"], [data-anim="scan-line"], [data-anim="sun"], [data-anim="sun-rays"], [data-anim="key"], [data-anim~="coin"], [data-anim~="pillar"], [data-anim="t-emblem"], [data-anim="member-ring"], [data-anim="circle-outer"], [data-anim~="member"], [data-anim="circle-pool"], [data-anim="heartbeat"], [data-anim="shield"], [data-anim="cross"], [data-anim="pin"], [data-anim="route"], [data-anim="travel-dot"], [data-anim="plane"], [data-anim="trail"], [data-anim="home-heart"], [data-anim="reward-rays"], [data-anim="medal"], [data-anim="medal-star"], [data-anim="seal"], [data-anim="seal-check"], [data-anim="card-front"], [data-anim~="wave"] { animation: none !important; transform: none !important; } }