/* ============================================ TOKENS ============================================ */ :root{ --bg: #fbf8f2; --bg-elev: #ffffff; --surface: rgba(33,27,14,0.035); --surface-strong: rgba(33,27,14,0.06); --border: rgba(33,27,14,0.1); --purple: #b8860b; --purple-light: #8a6415; --purple-dim: #f1e2b8; --gold: #9c6b12; --gold-dim: #6e4c0e; --text: #211c12; --text-muted: #6b5f47; --text-faint: #9c917a; --on-surface-faint: rgba(33,27,14,0.03); --on-surface-weak: rgba(33,27,14,0.055); --on-surface-hairline: rgba(33,27,14,0.05); --shadow-soft: rgba(120,95,30,0.18); --cursor-glow-color: 184,134,11; --nav-bg: rgba(255,255,255,0.7); --nav-bg-scrolled: rgba(255,255,255,0.92); --font-display: 'Space Grotesk', sans-serif; --font-body: 'Sora', sans-serif; --font-ui: 'Poppins', sans-serif; --radius-lg: 28px; --radius-md: 20px; --radius-sm: 12px; --ease: cubic-bezier(.16,.84,.44,1); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:auto; } body{ background:var(--bg); color:var(--text); font-family:var(--font-body); overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased; transition: background-color .5s var(--ease), color .5s var(--ease); cursor:none; } @media (max-width:900px), (pointer:coarse){ body{ cursor:auto; } } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:var(--font-ui); cursor:pointer; border:none; background:none; color:inherit; } ul{ list-style:none; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } } ::selection{ background:var(--purple); color:#fffaf0; } /* applied briefly to for a smooth cross-fade of colors on load */ html.theme-transition, html.theme-transition *{ transition: background-color .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease !important; } /* scrollbar */ ::-webkit-scrollbar{ width:9px; } ::-webkit-scrollbar-track{ background:var(--bg); } ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--purple), var(--gold)); border-radius:10px; } /* ============================================ UTILITIES ============================================ */ .section-inner{ max-width:1240px; margin:0 auto; padding:0 clamp(20px, 5vw, 64px); position:relative; z-index:2; } .eyebrow-pill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--purple-light); background:rgba(184,134,11,0.12); border:1px solid rgba(184,134,11,0.35); padding:8px 18px; border-radius:999px; margin-bottom:20px; } .section-title{ font-family:var(--font-display); font-size:clamp(2rem, 4.2vw, 3.4rem); font-weight:700; line-height:1.08; letter-spacing:-0.01em; margin-bottom:1rem; } .section-sub{ color:var(--text-muted); font-size:1.02rem; max-width:620px; margin-bottom:2.5rem; } .italic-accent{ font-style:italic; font-weight:600; background:linear-gradient(100deg, var(--purple-light), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; } .text-gold{ color:var(--gold); } .btn{ font-family:var(--font-ui); font-weight:600; font-size:0.92rem; padding:14px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s; } .btn-primary{ background:linear-gradient(135deg, #d4af37, #9c6b12); color:#2a2013; box-shadow:0 8px 30px rgba(184,134,11,0.35); } .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(184,134,11,0.5); } .btn-outline{ border:1.5px solid var(--gold); color:var(--gold); } .btn-outline:hover{ background:rgba(156,107,18,0.1); transform:translateY(-3px); } .btn-block{ width:100%; justify-content:center; } .chip{ font-family:var(--font-ui); font-size:0.76rem; font-weight:600; padding:7px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text-muted); backdrop-filter:blur(8px); } .chip-gold{ color:var(--gold); border-color:rgba(156,107,18,0.4); } .glass-card{ background:linear-gradient(145deg, var(--on-surface-weak), var(--on-surface-faint)); border:1px solid var(--border); border-radius:var(--radius-lg); backdrop-filter:blur(18px); box-shadow:0 20px 60px -20px var(--shadow-soft); } [data-reveal]{ opacity:0; transform:translateY(40px); } /* noise overlay */ .noise-overlay{ position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.035; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* custom cursor: ambient glow + ring + dot, all lerped from real position in JS */ .cursor-glow{ position:fixed; top:0; left:0; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(var(--cursor-glow-color),0.10), transparent 70%); transform:translate(-50%,-50%); pointer-events:none; z-index:3; will-change:transform; } .cursor-ring{ position:fixed; top:0; left:0; width:30px; height:30px; border-radius:50%; border:1.4px solid rgba(var(--cursor-glow-color),0.65); transform:translate(-50%,-50%); pointer-events:none; z-index:9997; will-change:transform, width, height, opacity; transition:width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s; mix-blend-mode:difference; } .cursor-ring.hover{ width:14px; height:14px; background:rgba(var(--cursor-glow-color),0.12); border-color:var(--gold); } .cursor-dot{ position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px rgba(156,107,18,0.8); transform:translate(-50%,-50%); pointer-events:none; z-index:9998; will-change:transform; } @media (max-width:900px), (pointer:coarse){ .cursor-glow, .cursor-ring, .cursor-dot{ display:none; } } /* scroll progress */ .scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--purple), var(--gold)); z-index:9999; box-shadow:0 0 12px rgba(184,134,11,0.8); } /* ============================================ LOADER ============================================ */ .loader{ position:fixed; inset:0; z-index:10000; background:radial-gradient(circle at 50% 45%, #fdf3d9 0%, #fbf8f2 70%); display:flex; align-items:center; justify-content:center; overflow:hidden; } .loader-glow{ position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(184,134,11,0.25), transparent 65%); animation:pulseGlow 2.6s ease-in-out infinite; } @keyframes pulseGlow{ 0%,100%{ opacity:0.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.12); } } .loader-inner{ position:relative; z-index:2; text-align:center; } /* logo "liquid fill" — a dim outline of the mark sits behind a colored copy that reveals from bottom to top in sync with the actual load progress (see script.js) */ .loader-logo-fill{ position:relative; width:clamp(92px, 20vw, 138px); aspect-ratio:1270/1239; margin:0 auto 22px; filter:drop-shadow(0 8px 26px rgba(184,134,11,0.35)); animation:logoDropIn .95s cubic-bezier(.31,1.35,.56,1) both; transform-origin:50% 0%; } @keyframes logoDropIn{ 0%{ opacity:0; transform:translateY(-140px) scale(0.9) rotate(-4deg); } 55%{ opacity:1; transform:translateY(6px) scale(1.04) rotate(1deg); } 72%{ transform:translateY(-4px) scale(0.99) rotate(-0.5deg); } 86%{ transform:translateY(2px) scale(1.01); } 100%{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); } } .loader-logo-fill::before{ content:''; position:absolute; left:50%; bottom:-6px; width:60%; height:10px; transform:translateX(-50%) scaleX(0.3); background:radial-gradient(ellipse, rgba(33,27,14,0.22), transparent 72%); border-radius:50%; opacity:0; animation:logoShadowPulse .95s cubic-bezier(.31,1.35,.56,1) both; } @keyframes logoShadowPulse{ 0%{ opacity:0; transform:translateX(-50%) scaleX(0.15); } 55%{ opacity:0.9; transform:translateX(-50%) scaleX(0.55); } 100%{ opacity:0.6; transform:translateX(-50%) scaleX(0.3); } } .logo-mask{ position:absolute; inset:0; -webkit-mask-image:url('logo1-mask.webp'); mask-image:url('logo1-mask.webp'); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; } .logo-mask-outline{ background:rgba(33,27,14,0.13); } .logo-mask-fill{ background:linear-gradient(195deg, var(--gold) 0%, var(--purple) 55%, var(--purple-light) 100%); clip-path:inset(100% 0 0 0); transition:clip-path .15s linear; overflow:hidden; } .logo-mask-fill::after{ content:''; position:absolute; inset:-50%; background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.6) 50%, transparent 58%); background-size:220% 220%; animation:logoShine 2.2s linear infinite; mix-blend-mode:overlay; } @keyframes logoShine{ 0%{ background-position:0% 0%; } 100%{ background-position:100% 100%; } } .loader-logo-fill.done{ animation:logoPop .5s var(--ease); } @keyframes logoPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.1); } 100%{ transform:scale(1); } } .loader-brand{ font-family:var(--font-display); font-weight:600; font-size:0.92rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--text); opacity:0.82; margin-bottom:24px; } .loader-status{ font-family:var(--font-ui); font-size:0.85rem; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:22px; min-height:1.2em; } .loader-bar-track{ width:min(320px, 60vw); height:6px; border-radius:99px; background:rgba(33,27,14,0.08); overflow:hidden; margin:0 auto; border:1px solid rgba(33,27,14,0.1); } .loader-bar-fill{ height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg, var(--purple), var(--gold)); box-shadow:0 0 16px rgba(156,107,18,0.6); } .loader-percent{ margin-top:14px; font-family:var(--font-display); font-size:1rem; color:var(--gold); letter-spacing:0.05em; } .loader-particles{ position:absolute; inset:0; z-index:1; } .loader-particles span{ position:absolute; width:3px; height:3px; border-radius:50%; background:var(--purple-light); opacity:0.6; animation:floatUp linear infinite; } @keyframes floatUp{ from{ transform:translateY(0); opacity:0; } 10%{ opacity:0.8; } 100%{ transform:translateY(-120vh); opacity:0; } } .loader.hide{ animation:fadeOutLoader .8s var(--ease) forwards; pointer-events:none; } @keyframes fadeOutLoader{ to{ opacity:0; visibility:hidden; } } /* ============================================ NAVIGATION ============================================ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:900; padding:18px clamp(16px,4vw,40px); transition:padding .35s var(--ease), background .35s; } .nav-inner{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; background:var(--nav-bg, rgba(255,255,255,0.7)); border:1px solid var(--border); backdrop-filter:blur(20px); padding:12px 22px; border-radius:999px; box-shadow:0 10px 40px -14px var(--shadow-soft); } .nav.scrolled .nav-inner{ background:var(--nav-bg-scrolled, rgba(255,255,255,0.92)); } .nav-logo{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; display:flex; align-items:center; } .nav-logo-img{ height:38px; width:auto; filter:drop-shadow(0 2px 6px rgba(156,107,18,0.28)); transition:transform .35s var(--ease); } .nav-logo:hover .nav-logo-img{ transform:scale(1.06); } .eye{ filter:drop-shadow(0 0 6px rgba(156,107,18,0.7)); } .nav-links{ display:flex; gap:6px; } .nav-link{ font-family:var(--font-ui); font-size:0.85rem; font-weight:500; color:var(--text-muted); padding:9px 16px; border-radius:999px; transition:color .3s, background .3s; } .nav-link:hover, .nav-link.active{ color:var(--text); background:rgba(33,27,14,0.06); } .nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; } .nav-toggle span{ height:2px; background:var(--text); border-radius:2px; transition:transform .3s, opacity .3s; } @media (max-width:900px){ .nav-links{ position:fixed; top:78px; right:16px; left:16px; flex-direction:column; background:rgba(255,255,255,0.97); border:1px solid var(--border); border-radius:20px; padding:10px; backdrop-filter:blur(20px); transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .35s var(--ease); } .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; } .nav-link{ padding:12px 16px; } .nav-toggle{ display:flex; } } /* ============================================ HERO ============================================ */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding:120px clamp(20px,5vw,64px) 60px; overflow:hidden; } .hero-canvas{ position:absolute; inset:0; z-index:0; opacity:0.7; } .aurora{ position:absolute; border-radius:50%; filter:blur(90px); z-index:0; pointer-events:none; } .aurora-1{ width:600px; height:600px; background:radial-gradient(circle, rgba(184,134,11,0.35), transparent 70%); top:-10%; left:-10%; animation:auroraMove1 16s ease-in-out infinite; } .aurora-2{ width:500px; height:500px; background:radial-gradient(circle, rgba(156,107,18,0.18), transparent 70%); bottom:-10%; right:-5%; animation:auroraMove2 18s ease-in-out infinite; } @keyframes auroraMove1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(60px,40px); } } @keyframes auroraMove2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-50px,-30px); } } .hero-grid{ position:absolute; inset:0; z-index:0; background-image: linear-gradient(var(--on-surface-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--on-surface-hairline) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%); } .hero-inner{ position:relative; z-index:2; max-width:1240px; margin:0 auto; width:100%; display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; } .hero-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; } .hero-eyebrow{ font-family:var(--font-ui); color:var(--text-muted); font-size:1rem; margin-bottom:6px; } .hero-title{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:1.02; margin-bottom:14px; } .hero-roles{ height:2em; overflow:hidden; margin-bottom:16px; } .role-text{ font-family:var(--font-ui); font-weight:600; font-size:1.15rem; color:var(--purple-light); display:inline-block; } .hero-tagline{ font-family:var(--font-body); font-size:1.15rem; color:var(--text-muted); max-width:480px; margin-bottom:30px; } .hero-cta{ display:flex; gap:16px; flex-wrap:wrap; } .hero-right{ position:relative; height:560px; display:flex; align-items:center; justify-content:center; } .portrait-glow{ position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(156,107,18,0.35), rgba(184,134,11,0.2) 55%, transparent 75%); filter:blur(40px); animation:pulseGlow 4s ease-in-out infinite; } .portrait-wrap{ position:relative; width:min(360px, 70vw); z-index:2; animation:floatY 5s ease-in-out infinite; filter:drop-shadow(0 20px 50px rgba(120,95,30,0.28)); } @keyframes floatY{ 0%,100%{ transform:translateY(0px); } 50%{ transform:translateY(-18px); } } .portrait-svg .eye-glow{ filter:drop-shadow(0 0 8px rgba(156,107,18,0.9)); animation:blinkGlow 3.2s ease-in-out infinite; } @keyframes blinkGlow{ 0%,90%,100%{ opacity:1; } 94%{ opacity:0.2; } } .float-badge{ position:absolute; width:52px; height:52px; border-radius:16px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(10px); box-shadow:0 10px 30px -8px var(--shadow-soft); z-index:3; } .float-badge img{ width:26px; height:26px; } .emoji-badge{ font-size:1.4rem; } .fb-1{ top:8%; left:2%; animation:floatBadge 6s ease-in-out infinite; } .fb-2{ top:18%; right:0%; animation:floatBadge 7s ease-in-out infinite 0.5s; } .fb-3{ bottom:22%; left:-4%; animation:floatBadge 5.5s ease-in-out infinite 1s; } .fb-4{ bottom:6%; right:8%; animation:floatBadge 6.5s ease-in-out infinite 1.5s; } .fb-5{ top:48%; left:-8%; animation:floatBadge 7s ease-in-out infinite 0.8s; } .fb-6{ top:4%; right:22%; animation:floatBadge 6s ease-in-out infinite 2s; } .fb-7{ bottom:36%; right:-6%; animation:floatBadge 6.8s ease-in-out infinite 1.2s; } .fb-8{ bottom:0%; left:30%; animation:floatBadge 5s ease-in-out infinite 0.3s; } @keyframes floatBadge{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-14px) rotate(4deg); } } .scroll-indicator{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-ui); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint); z-index:3; } .scroll-line{ width:1px; height:46px; background:var(--on-surface-weak); position:relative; overflow:hidden; } .scroll-dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); position:absolute; left:-2px; animation:scrollDot 2s ease-in-out infinite; } @keyframes scrollDot{ 0%{ top:-6px; } 100%{ top:46px; } } @media (max-width:900px){ .hero{ padding-bottom:90px; } .hero-inner{ grid-template-columns:1fr; text-align:center; row-gap:8px; } /* Reorder mobile content: badges/eyebrow/title -> image+badges -> roles/tagline/cta */ .hero-left{ display:contents; } .hero-badges{ order:1; justify-content:center; } .hero-eyebrow{ order:1; } .hero-title{ order:1; margin-bottom:6px; } .hero-right{ order:2; height:440px; margin:22px auto 26px; overflow:visible; } .hero-roles{ order:3; margin-bottom:10px; } .hero-tagline{ order:3; margin:0 auto 22px; } .hero-cta{ order:3; justify-content:center; } .float-badge{ width:44px; height:44px; border-radius:13px; } .float-badge img{ width:22px; height:22px; } .emoji-badge{ font-size:1.15rem; } .fb-1{ top:2%; left:6%; } .fb-2{ top:12%; right:4%; } .fb-3{ bottom:20%; left:4%; } .fb-4{ bottom:2%; right:12%; } .fb-5{ top:46%; left:0%; } .fb-6{ top:0%; right:24%; } .fb-7{ bottom:34%; right:2%; } .fb-8{ bottom:0%; left:30%; } .scroll-indicator{ bottom:18px; } } @media (max-width:600px){ .hero-right{ height:380px; margin:18px auto 22px; } .float-badge{ width:38px; height:38px; border-radius:11px; } .float-badge img{ width:20px; height:20px; } .emoji-badge{ font-size:1rem; } .fb-1{ top:0%; left:2%; } .fb-2{ top:10%; right:0%; } .fb-3{ bottom:22%; left:0%; } .fb-4{ bottom:0%; right:8%; } .fb-5{ display:none; } .fb-6{ top:0%; right:20%; } .fb-7{ display:none; } .fb-8{ bottom:0%; left:26%; } .scroll-indicator{ bottom:12px; } .scroll-line{ height:34px; } @keyframes scrollDot{ 0%{ top:-6px; } 100%{ top:34px; } } } @media (max-width:380px){ .hero{ padding-bottom:80px; } .hero-right{ height:340px; margin:14px auto 18px; } .float-badge{ width:32px; height:32px; border-radius:9px; } .float-badge img{ width:17px; height:17px; } .emoji-badge{ font-size:0.85rem; } .scroll-indicator{ bottom:8px; } } /* ============================================ ABOUT ============================================ */ .about{ padding:140px 0 100px; position:relative; } .about-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:24px; margin-bottom:40px; } .about-card{ padding:2.4rem; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); backdrop-filter:blur(16px); } .about-desc{ color:var(--text-muted); font-size:1.05rem; margin-top:16px; margin-bottom:26px; } .about-portrait{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; } .mini-portrait{ width:275px; } .mini-caption{ color:var(--text-faint); font-size:0.85rem; } /* portrait auto-slider */ .portrait-slider{ position:relative; width:100%; aspect-ratio:3/4; border-radius:15%; overflow:hidden; border:1px solid var(--border); box-shadow:0 20px 50px -18px var(--shadow-soft); background:var(--surface); } .portrait-slider .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.03); transition:opacity 1.1s var(--ease), transform 6s linear; pointer-events:none; } .portrait-slider .slide.active{ opacity:1; transform:scale(1); z-index:1; } .slider-dots{ position:absolute; left:0; right:0; bottom:12px; z-index:2; display:flex; justify-content:center; gap:8px; } .slider-dots .dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.55); border:1px solid rgba(33,27,14,0.25); cursor:pointer; transition:background .3s, transform .3s; } .slider-dots .dot.active{ background:var(--gold); transform:scale(1.25); box-shadow:0 0 10px rgba(184,134,11,0.7); } .social-row{ display:flex; gap:10px; flex-wrap:wrap; } .social-glass{ width:42px; height:42px; border-radius:14px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; } .social-glass img{ width:18px; height:18px; opacity:0.85; } .social-glass:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 10px 24px -6px rgba(184,134,11,0.5); border-color:var(--purple); } .stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:40px; } .stat-card{ padding:1.8rem 1.2rem; text-align:center; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); } .stat-num{ font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:var(--text); } .stat-plus{ font-family:var(--font-display); font-size:1.4rem; color:var(--gold); } .stat-infinity{ font-family:var(--font-display); font-size:2.2rem; color:var(--purple-light); } .stat-label{ display:block; font-size:0.78rem; color:var(--text-muted); margin-top:6px; letter-spacing:0.03em; } .philosophy-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; } .philosophy-card{ padding:2.2rem; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); } .tiny-badge{ display:inline-block; background:rgba(184,134,11,0.15); color:var(--purple-light); border-radius:999px; padding:5px 14px; font-size:0.72rem; margin-bottom:16px; } .philosophy-card h3{ font-family:var(--font-display); font-size:1.7rem; margin-bottom:10px; } .philosophy-card p{ color:var(--text-muted); } .philosophy-side{ display:flex; flex-direction:column; gap:16px; } .mini-stat-card{ flex:1; background:linear-gradient(135deg, rgba(184,134,11,0.28), rgba(184,134,11,0.08)); border:1px solid rgba(184,134,11,0.3); border-radius:var(--radius-md); padding:1.6rem; display:flex; flex-direction:column; justify-content:center; } .mini-stat-num{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; } .mini-stat-label{ font-size:0.75rem; color:var(--text-muted); letter-spacing:0.05em; text-transform:uppercase; margin-top:4px; } .resource-card{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.4rem; } .tiny-label{ font-size:0.68rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.1em; } .resource-logos{ display:flex; gap:10px; margin:12px 0; } .resource-logos img{ width:26px; height:26px; background:#fff; border:1px solid var(--border); border-radius:50%; padding:5px; } @media (max-width:800px){ .about-grid, .philosophy-grid{ grid-template-columns:1fr; } .stats-row{ grid-template-columns:repeat(2,1fr); } } /* ============================================ STUDENT REVIEWS ============================================ */ .reviews{ padding:80px 0; } .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .review-card{ padding:1.8rem 1.5rem; border-radius:var(--radius-md); text-align:left; background:var(--surface); border:1px solid var(--border); transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; display:flex; flex-direction:column; gap:12px; } .review-card:hover{ transform:translateY(-6px); border-color:var(--gold-dim); box-shadow:0 20px 40px -14px rgba(156,107,18,0.25); } .review-card-img{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-dim); } .review-card-stars{ color:var(--gold); font-size:1.05rem; letter-spacing:2px; } .review-card-text{ font-family:var(--font-body); color:var(--text); font-size:0.95rem; line-height:1.55; } .review-card-name{ font-family:var(--font-ui); font-weight:600; font-size:0.9rem; margin-top:auto; padding-top:4px; } @media (max-width:900px){ .reviews-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .reviews-grid{ grid-template-columns:1fr; } } /* ============================================ EDUCATION (horizontal scroll) ============================================ */ .education{ position:relative; padding:120px 0 100px; overflow:hidden; } .edu-bg-text{ position:absolute; top:20px; left:0; width:100%; text-align:center; font-family:var(--font-display); font-weight:700; font-size:clamp(5rem, 18vw, 13rem); color:transparent; -webkit-text-stroke:1px var(--on-surface-hairline); white-space:nowrap; z-index:0; pointer-events:none; letter-spacing:0.02em; } .edu-eyebrow{ position:relative; z-index:2; margin-left:clamp(20px,5vw,64px); } .edu-track-wrap{ position:relative; z-index:2; margin-top:50px; overflow:hidden; } .edu-track{ display:flex; gap:26px; padding:20px clamp(20px,5vw,64px) 40px; width:max-content; } .edu-card{ position:relative; width:min(340px, 78vw); flex-shrink:0; background:linear-gradient(160deg, var(--on-surface-weak), var(--on-surface-faint)); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.2rem; backdrop-filter:blur(14px); transition:transform .4s var(--ease), border-color .4s; } .edu-card:hover{ border-color:rgba(184,134,11,0.5); } .edu-icon{ font-size:2rem; margin-bottom:14px; } .edu-tag{ display:inline-block; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--purple-light); margin-bottom:10px; } .edu-card h3{ font-family:var(--font-display); font-size:1.35rem; margin-bottom:8px; line-height:1.25; } .edu-school{ color:var(--gold); font-size:0.88rem; font-weight:600; margin-bottom:12px; } .edu-desc{ color:var(--text-muted); font-size:0.92rem; margin-bottom:22px; } .edu-dots{ display:flex; gap:6px; margin-bottom:10px; } .edu-dots span{ width:14px; height:4px; border-radius:99px; background:var(--on-surface-weak); } .edu-dots span.active{ background:var(--gold); width:22px; } .edu-num{ position:absolute; bottom:18px; right:22px; font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--on-surface-faint); } .edu-card-final{ background:linear-gradient(160deg, rgba(184,134,11,0.22), rgba(156,107,18,0.06)); border-color:rgba(156,107,18,0.35); display:flex; flex-direction:column; justify-content:center; } .edu-hint{ text-align:center; color:var(--text-faint); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; position:relative; z-index:2; } /* Student Result Cards Styling */ .student-card { min-width: 320px; background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); border: 1px solid #eaeaea; display: flex; flex-direction: column; gap: 18px; color: #333; } .student-header { display: flex; align-items: center; gap: 14px; } .student-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #eee; } .student-title h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #1a1a1a; } .student-school { margin: 4px 0 0; font-size: 0.85rem; color: #666; } .rank-container { display: flex; justify-content: space-around; background: #f9f9fb; padding: 12px; border-radius: 12px; text-align: center; } .rank-box { display: flex; flex-direction: column; align-items: center; gap: 6px; } .rank-label { font-size: 0.75rem; color: #777; } .rank-badge { padding: 2px 14px; border-radius: 20px; font-weight: bold; font-size: 0.9rem; } .island-badge { background: #fff4d8; color: #d97706; } .inst-badge { background: #e0e7ff; color: #4338ca; } .marks-container { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .marks-label { font-size: 0.8rem; color: #666; } .marks-badge { background: #d1fae5; color: #065f46; font-size: 1.3rem; font-weight: 800; padding: 8px 30px; border-radius: 10px; width: fit-content; } .institute-footer { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.85rem; color: #555; border-top: 1px solid #f0f0f0; padding-top: 12px; } /* ============================================ telegram ============================================ */ .telegram-section { max-width: 1100px; margin: 0 auto; padding: 40px 20px; font-family: 'Sora', sans-serif; } .telegram-header { text-align: center; margin-bottom: 30px; } .telegram-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .tg-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #ffffff; border-radius: 20px; border: 1px solid #f0f0f5; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .tg-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); } .tg-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .tg-details h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #111111; } .tg-details p { margin: 4px 0 0; font-size: 0.88rem; color: #71717a; } .telegram-header { text-align: center; margin-bottom: 30px; } .telegram-header h2 { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 2.2rem; font-weight: 700; color: var(--text); } .tg-title-logo { width: 38px; height: 38px; object-fit: contain; vertical-align: middle; } /* ============================================ TOOLBOX ============================================ */ .toolbox{ padding:100px 0; } .tool-groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .tool-group{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.7rem; } .tool-group h3{ font-family:var(--font-ui); font-size:0.98rem; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border); } .tool-icons{ display:flex; flex-wrap:wrap; gap:12px; } .tool-icon{ width:74px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px; border-radius:14px; background:var(--on-surface-faint); transition:transform .35s var(--ease), background .35s, box-shadow .35s; } .tool-icon:hover{ transform:translateY(-6px) scale(1.06); background:rgba(184,134,11,0.12); box-shadow:0 12px 26px -10px rgba(184,134,11,0.5); } .tool-icon img{ width:26px; height:26px; object-fit:contain; } .tool-icon span{ font-size:0.62rem; text-align:center; color:var(--text-muted); line-height:1.2; } @media (max-width:900px){ .tool-groups{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .tool-groups{ grid-template-columns:1fr; } } @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Noto+Sans+Sinhala:wght@400;500&display=swap'); .process-section { padding: 80px 20px; font-family: 'Poppins', 'Noto Sans Sinhala', sans-serif; text-align: center; } .process-title { font-size: 4rem; font-weight: 700; color: #111827; margin-bottom: 60px; display: flex; align-items: center; justify-content: center; gap: 10px; } .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; max-width: 1100px; margin: 0 auto; } .process-card { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 10px; } .card-title { font-size: 1.05rem; font-weight: 600; color: #1f2937; margin-bottom: 12px; } .card-desc { font-size: 1 rem; line-height: 1.65; color: #6b7280; margin: 0; text-align: center; } /* Horizontal connectors for desktop view */ @media (min-width: 992px) { .process-card:not(:nth-child(3n)):after { content: ""; position: absolute; right: -20px; top: 12px; width: 25px; height: 1px; background-color: #d1d5db; } } /* Responsive Breakpoints */ @media (max-width: 991px) { .process-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; gap: 35px; } } /* ============================================ STACKED CASE STUDIES ============================================ */ .stacked-cases{ position:relative; padding:100px 0 40px; } .stacked-inner{ margin-bottom:40px; } .stack-track{ position:relative; max-width:800px; margin:0 auto; padding:0 clamp(20px,5vw,64px); } .stack-slot{ position:relative; height:78vh; min-height:420px; } .stack-card{ position:sticky; top:110px; margin:0 auto; max-width:760px; background:linear-gradient(150deg, rgba(184,134,11,0.14), rgba(255,251,240,0.94)); border:1px solid rgba(184,134,11,0.35); border-radius:var(--radius-lg); padding:2.6rem; backdrop-filter:blur(16px); box-shadow:0 30px 70px -20px var(--shadow-soft); z-index:calc(var(--i) + 1); transform-origin:top center; will-change:transform, opacity; } .stack-num{ font-family:var(--font-display); font-size:0.85rem; color:var(--gold); } .stack-card h3{ font-family:var(--font-display); font-size:1.7rem; margin:10px 0; } .stack-card p{ color:var(--text-muted); margin-bottom:14px; max-width:560px; } .stack-meta{ font-size:0.78rem; color:var(--purple-light); letter-spacing:0.03em; } /* ============================================ GALLERY (class photo slideshow) ============================================ */ .gallery{ padding:100px 0; } .gallery-slideshow{ position:relative; max-width:920px; margin:0 auto; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); border:1px solid var(--border); box-shadow:0 30px 70px -24px var(--shadow-soft); } .gallery-track{ position:relative; width:100%; height:100%; } .gallery-slide{ position:absolute; inset:0; opacity:0; z-index:1; transition:opacity 1s var(--ease); } .gallery-slide.active{ opacity:1; z-index:2; } .gallery-slide img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); animation:none; } .gallery-slide.active img{ animation:kenBurns 6s ease-in-out forwards; } @keyframes kenBurns{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.14) translate(-1%,-1%); } } .gallery-slide::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(20,15,5,0.55) 100%); pointer-events:none; } .gallery-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); background:rgba(20,15,5,0.35); color:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:background .3s, transform .3s; } .gallery-arrow:hover{ background:rgba(184,134,11,0.75); transform:translateY(-50%) scale(1.08); } .gallery-prev{ left:16px; } .gallery-next{ right:16px; } .gallery-bottom{ position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center; gap:14px; padding:14px 20px; color:#fff; } .gallery-counter{ font-family:var(--font-ui); font-size:0.8rem; letter-spacing:0.06em; min-width:64px; } .gallery-progress{ flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,0.25); overflow:hidden; } .gallery-progress-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--gold), var(--purple-light)); } .gallery-progress-fill.animating{ animation:galleryProgress 4.2s linear forwards; } @keyframes galleryProgress{ from{ width:0%; } to{ width:100%; } } .gallery-play{ width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); background:rgba(20,15,5,0.35); color:#fff; font-size:0.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s; } .gallery-play:hover{ background:rgba(184,134,11,0.75); } @media (max-width:700px){ .gallery-slideshow{ aspect-ratio:4/5; border-radius:var(--radius-md); } .gallery-arrow{ width:36px; height:36px; font-size:0.95rem; } .gallery-counter{ font-size:0.72rem; min-width:54px; } } /* ============================================ CONTACT ============================================ */ .contact{ position:relative; padding:120px 0; overflow:hidden; } .contact-particles{ position:absolute; inset:0; z-index:0; } .contact-title{ text-align:left; } .quick-connect{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px 0 40px; position:relative; z-index:1; } .connect-btn{ position:relative; display:flex; align-items:center; gap:14px; padding:1.2rem 1.4rem; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); text-decoration:none; color:var(--text); overflow:hidden; animation:connectRise .6s var(--ease) both; animation-delay:calc(var(--i) * 0.12s); transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; } @keyframes connectRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } } .connect-btn:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -16px var(--shadow-soft); } .connect-icon{ position:relative; flex-shrink:0; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; } .connect-icon img{ width:24px; height:24px; } .connect-icon::before{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid currentColor; opacity:0.5; animation:connectPulse 2.4s ease-out infinite; } .connect-text{ display:flex; flex-direction:column; gap:2px; } .connect-label{ font-family:var(--font-ui); font-weight:600; font-size:0.98rem; } .connect-sub{ font-family:var(--font-ui); font-size:0.74rem; color:var(--text-muted); } .connect-whatsapp .connect-icon{ background:#25D366; color:#25D366; } .connect-telegram .connect-icon{ background:#229ED9; color:#229ED9; } .connect-phone .connect-icon{ background:linear-gradient(135deg, var(--purple), var(--gold)); color:var(--gold); } @keyframes connectPulse{ 0%{ transform:scale(1); opacity:0.55; } 100%{ transform:scale(1.45); opacity:0; } } @media (max-width:800px){ .quick-connect{ grid-template-columns:1fr; } } .contact-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:24px; margin-top:20px; } .contact-info{ padding:2.2rem; } .contact-info h4{ font-family:var(--font-ui); margin-bottom:20px; } .info-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .info-icon{ width:38px; height:38px; border-radius:12px; background:rgba(184,134,11,0.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .info-label{ display:block; font-size:0.7rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; } .info-value{ display:block; font-weight:600; font-size:0.92rem; } .contact-form{ padding:2.4rem; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .contact-form label{ display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:16px; letter-spacing:0.04em; } .contact-form input, .contact-form textarea{ width:100%; margin-top:8px; padding:13px 16px; border-radius:12px; background:var(--on-surface-faint); border:1px solid var(--border); color:var(--text); font-family:var(--font-body); font-size:0.92rem; resize:vertical; transition:border-color .3s, box-shadow .3s, background .3s; } .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(184,134,11,0.2); } .form-note{ margin-top:14px; font-size:0.85rem; color:var(--gold); min-height:1.2em; } @media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } } /* ============================================ FOOTER ============================================ */ .footer{ position:relative; padding:60px 0 40px; border-top:1px solid var(--border); } .footer-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; } .footer-logo{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; } .footer-nav{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; } .footer-nav a{ font-size:0.85rem; color:var(--text-muted); transition:color .3s; } .footer-nav a:hover{ color:var(--gold); } .footer-copy{ font-size:0.8rem; color:var(--text-faint); line-height:1.7; } .back-to-top{ position:fixed; bottom:26px; right:26px; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--purple), #6e4c0e); color:#fff; font-size:1.2rem; display:flex; align-items:center; justify-content:center; z-index:500; box-shadow:0 12px 30px -8px rgba(184,134,11,0.6); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s, transform .3s; } .back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); } /* generic section spacing rhythm on mobile */ @media (max-width:700px){ section{ padding-left:0; padding-right:0; } .about, .reviews, .validation, .toolbox, .playground, .stacked-cases, .gallery, .contact{ padding-top:70px; padding-bottom:70px; } }