/* JFS shared base styles — tokens, reset, navbar (+ About dropdown), footer, buttons, reveal-on-scroll, section-head. Dipakai Home DAN semua halaman About (page-vision-mission, page-meet-our-team, page-learning-materials, page-why-choose-jfs, page-faq). Loaded lewat jfs_is_custom_template_page() di functions.php — jangan dobel-load bareng home.css punya token sendiri. V6 — upgrade dari Inter ke Plus Jakarta Sans + JetBrains Mono, double-bezel card architecture, ambient mesh glow. Sesuai DESIGN.md project root. */ /* ===== Self-hosted fonts (variable, single file per family) ===== */ @font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../fonts/PlusJakartaSans-Variable.woff2') format('woff2'); } @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap; src:url('../fonts/JetBrainsMono-Variable.woff2') format('woff2'); } html{scroll-behavior:smooth;} :root{ --green:#16A34A; --green-light:#ECFDF5; --green-dark:#0F7A38; --blue:#2563EB; --blue-light:#EFF6FF; --blue-dark:#1D4ED8; --gradient: linear-gradient(135deg, var(--green), var(--blue)); --navy:#0F1729; --n50:#F8FAFC; --n100:#F1F5F9; --n200:#E2E8F0; --n300:#CBD5E1; --n500:#64748B; --n700:#334155; --white:#FFFFFF; --radius:20px; --shadow: 0 10px 30px rgba(15,23,41,0.08); --shadow-lg: 0 24px 60px -12px rgba(15,23,41,0.16); --sans:'Plus Jakarta Sans', sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace; --ease-out: cubic-bezier(0.23,1,0.32,1); --ease-inout: cubic-bezier(0.77,0,0.175,1); --ease-reveal: cubic-bezier(0.16,1,0.3,1); /* Radius scale (SHAPE CONSISTENCY LOCK — pakai salah satu dari 4 ini, jangan bikin angka baru): sm = input/dropdown kecil, md = card/button, lg = shell/banner besar, full = pill/circle. */ --radius-sm:12px; --radius-md:20px; --radius-lg:28px; --radius-core:22px; --radius-full:999px; /* Spacing scale (dipakai konsisten di semua halaman, jangan px acak) */ --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px; --space-6:64px; --space-7:88px; } .jfs-home .jfs-icon{width:1.05em; height:1.05em; display:inline-block; vertical-align:-0.15em; flex-shrink:0;} .jfs-home *{box-sizing:border-box; margin:0; padding:0;} .jfs-home{font-family:var(--sans); color:var(--n700); background:var(--white); line-height:1.55;} /* AMBIENT MESH GLOW — fixed layer, pointer-events:none, TIDAK ikut scroll container (hindari repaint cost). Dipasang sekali di body via header-site.php. */ .jfs-ambient{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;} .jfs-ambient .orb{position:absolute; border-radius:50%; filter:blur(80px); opacity:.28;} .jfs-ambient .o1{width:480px; height:480px; background:radial-gradient(circle,var(--green),transparent 70%); top:-160px; left:-100px;} .jfs-ambient .o2{width:560px; height:560px; background:radial-gradient(circle,var(--blue),transparent 70%); top:15%; right:-180px;} /* Teks khusus screen reader (label tombol icon-only, caption tambahan). Tetap di accessibility tree — bukan display:none. */ .jfs-home .screen-reader-text{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;} /* SKIP LINK — keyboard user boleh lompat langsung ke konten, wajib (ui-ux-pro-max Priority 1). Disembunyikan sampai di-focus. */ .jfs-home .jfs-skip-link{position:fixed; top:-100px; left:20px; z-index:200; background:var(--navy); color:#fff; padding:12px 20px; border-radius:var(--radius-full); font-size:13.5px; font-weight:700; transition:top .25s var(--ease-out);} .jfs-home .jfs-skip-link:focus-visible{top:20px;} /* SCROLL PROGRESS — bar tipis di atas viewport, memberi feedback posisi baca di halaman panjang. Motivated: orientasi, bukan dekorasi. Lebarnya di-drive transform:scaleX dari jfs-base.js (bukan width — hindari layout). */ .jfs-home .jfs-scroll-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none; background:transparent;} .jfs-home .jfs-scroll-progress span{display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center; background:var(--gradient); border-radius:0 999px 999px 0;} /* DOUBLE-BEZEL CARD ARCHITECTURE — outer shell (tinted, hairline) wraps inner core (white, inset highlight). Dipakai semua card besar. */ .jfs-home .shell{background:rgba(15,23,41,0.035); border:1px solid rgba(15,23,41,0.06); border-radius:var(--radius-lg); padding:8px; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);} .jfs-home .shell:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);} .jfs-home .shell .core{background:#fff; border-radius:var(--radius-core); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); height:100%;} .jfs-home img,.jfs-home svg{display:block; max-width:100%;} .jfs-home a{text-decoration:none; color:inherit;} .jfs-home ul{list-style:none;} .jfs-home .container{max-width:1240px; margin:0 auto; padding:0 32px;} .jfs-home .btn{display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:14.5px; padding:13px 26px; border-radius:999px; border:none; cursor:pointer; transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s; white-space:nowrap;} .jfs-home .btn:active{transform:scale(.97);} /* Button-in-button: trailing icon nested dalam wrapper lingkaran sendiri. :has() dipakai supaya cuma tombol yang BENAR punya icon trailing yang dapat padding asimetris ini — tombol tanpa icon (contoh "Attend Info Session") tetap padding normal, tidak ikut kepotong. */ .jfs-home .btn:has(> .jfs-icon:last-child){padding:8px 8px 8px 22px;} .jfs-home .btn > .jfs-icon:last-child{width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .35s var(--ease-out); margin-left:6px;} .jfs-home .btn-secondary > .jfs-icon:last-child{background:var(--n100); color:var(--navy);} .jfs-home .btn-primary{background:var(--green); color:#fff; box-shadow:0 8px 20px rgba(22,163,74,0.28);} .jfs-home .btn-primary:hover{background:var(--green-dark); transform:translateY(-2px); box-shadow:0 14px 28px rgba(22,163,74,0.34);} .jfs-home .btn-primary:hover > .jfs-icon:last-child{transform:translate(3px,-3px);} .jfs-home .btn-secondary{background:#fff; color:var(--navy); border:1.5px solid var(--n200);} .jfs-home .btn-secondary:hover{border-color:var(--navy); transform:translateY(-2px);} .jfs-home .btn-secondary:hover > .jfs-icon:last-child{transform:translate(3px,-3px);} .jfs-home .btn-light{background:#fff; color:var(--navy);} .jfs-home .btn-light > .jfs-icon:last-child{background:var(--n100); color:var(--navy);} .jfs-home .btn-light:hover > .jfs-icon:last-child{transform:translate(3px,-3px);} .jfs-home .eyebrow{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green-dark); background:var(--green-light); padding:7px 16px; border-radius:999px; margin-bottom:18px;} .jfs-home h1,.jfs-home h2,.jfs-home h3{color:var(--navy); font-weight:800; letter-spacing:-0.02em; text-wrap:balance;} .jfs-home section{padding:68px 0;} /* section head generik (eyebrow + h2 + subtext center) dipakai tiap halaman */ .jfs-home .section-head{text-align:center; max-width:620px; margin:0 auto 52px;} .jfs-home .section-head h2{font-size:32px; margin-bottom:12px;} .jfs-home .section-head p{color:var(--n500); font-size:15px;} /* PAGE HERO (dipakai halaman About — hero kecil, bukan hero-slider Home) */ .jfs-home .page-hero{padding:64px 0 24px;} .jfs-home .page-hero-shell{background:var(--n50); border-radius:var(--radius-lg); padding:52px 48px; text-align:center; position:relative; overflow:hidden;} .jfs-home .page-hero-shell::before, .jfs-home .page-hero-shell::after{content:''; position:absolute; border-radius:50%; filter:blur(60px); opacity:.3; z-index:0; pointer-events:none;} .jfs-home .page-hero-shell::before{width:200px; height:200px; background:var(--green); top:-60px; right:40px;} .jfs-home .page-hero-shell::after{width:220px; height:220px; background:var(--blue); bottom:-70px; left:-50px;} .jfs-home .page-hero-shell > *{position:relative; z-index:1;} .jfs-home .page-hero h1{font-size:36px; margin-bottom:14px;} .jfs-home .page-hero h1 .accent{background:linear-gradient(90deg,var(--green),var(--blue),var(--green)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;} .jfs-home .page-hero p{color:var(--n500); font-size:15.5px; max-width:560px; margin:0 auto;} /* reveal-on-scroll — uses `animation`, deliberately NOT `transition`. Every card that combines .reveal with its own hover transition (e.g. .leader-card{transition:transform .3s .., box-shadow .3s ..}) would otherwise clobber .reveal's transition-property list wholesale (CSS shorthand longhands don't merge across rules — the later declaration wins outright), silently dropping `opacity` from the list. Net effect was cards popping in instantly (no fade) while only sliding, AND the stagger's transition-delay leaking into hover response (up to 500ms lag before a card would even start lifting). Using `animation` here is fully independent of each card's own `transition`, so neither problem can happen regardless of what hover CSS a card adds later. Still one-shot (fires once via IntersectionObserver in jfs-base.js, never loops) and fully covered by the prefers-reduced-motion block. */ /* Progressive enhancement: hidden state HANYA saat JS aktif (class `js` dipasang sedini mungkin di header). Tanpa ini, JS gagal/diblokir = seluruh section ikut hilang permanen. */ .js .jfs-home .reveal{opacity:0;} .jfs-home .reveal.in{animation:jfs-reveal-in .6s cubic-bezier(.16,1,.3,1) forwards;} /* stagger generik: dipakai apa aja grid kartu (kasih class "reveal-grid" di wrapper-nya) */ .jfs-home .reveal-grid .reveal.in{animation-delay:.03s;} .jfs-home .reveal-grid .reveal:nth-child(2).in{animation-delay:.09s;} .jfs-home .reveal-grid .reveal:nth-child(3).in{animation-delay:.15s;} .jfs-home .reveal-grid .reveal:nth-child(4).in{animation-delay:.21s;} .jfs-home .reveal-grid .reveal:nth-child(5).in{animation-delay:.27s;} .jfs-home .reveal-grid .reveal:nth-child(6).in{animation-delay:.33s;} .jfs-home .reveal-grid .reveal:nth-child(n+7).in{animation-delay:.38s;} @keyframes jfs-reveal-in{from{opacity:0; transform:translateY(28px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}} /* link underline-draw — replaces flat color-only hover on inline text links (Read More / Learn More style), motivated: signals interactivity. */ .jfs-home .link-draw{position:relative;} .jfs-home .link-draw::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.16,1,.3,1);} .jfs-home .link-draw:hover::after{transform:scaleX(1);} /* press feedback — subtle scale-down on click. No transition declared here on purpose: every element using .press-card already lists `transform` in its own component transition (leader-card, value-card, etc.), so it animates using that card's own easing — declaring a second, different easing here would only re-trigger the same clobbering problem the reveal fix above just solved. */ .jfs-home .press-card:active{transform:scale(.98);} /* HERO LOAD-IN — shared utility (first used on Home, see update.txt Update 24; reused here on any above-the-fold hero, e.g. page-hero on About pages) — content is always visible on page load, so it animates in immediately instead of waiting for scroll: children arrive one after another instead of popping in together. One-shot, no loop. */ .jfs-home .hero-in-stagger > *{opacity:0; animation:jfs-hero-rise .7s cubic-bezier(.16,1,.3,1) forwards;} .jfs-home .hero-in-stagger > *:nth-child(1){animation-delay:.05s;} .jfs-home .hero-in-stagger > *:nth-child(2){animation-delay:.14s;} .jfs-home .hero-in-stagger > *:nth-child(3){animation-delay:.23s;} .jfs-home .hero-in-stagger > *:nth-child(4){animation-delay:.32s;} .jfs-home .hero-in-stagger > *:nth-child(5){animation-delay:.41s;} .jfs-home .hero-in-visual{opacity:0; animation:jfs-hero-rise-scale .8s .3s cubic-bezier(.16,1,.3,1) forwards;} @keyframes jfs-hero-rise{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}} @keyframes jfs-hero-rise-scale{from{opacity:0; transform:translateY(26px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);}} @keyframes jfs-float{0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-18px) scale(1.05);}} @keyframes jfs-gradient-shift{0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;}} @keyframes jfs-badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.28);} 50%{box-shadow:0 0 0 7px rgba(22,163,74,0);}} /* CTA BANNER (reusable — Home & halaman About) */ .jfs-home .cta{background:var(--gradient); border-radius:var(--radius-lg); margin:0 32px; padding:60px 48px; text-align:center; color:#fff; position:relative; overflow:hidden;} .jfs-home .cta::before, .jfs-home .cta::after{content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.14); pointer-events:none;} .jfs-home .cta::before{width:320px; height:320px; top:-160px; right:-80px;} .jfs-home .cta::after{width:240px; height:240px; bottom:-130px; left:-60px; background:rgba(255,255,255,.10);} .jfs-home .cta h2,.jfs-home .cta p,.jfs-home .cta a{position:relative; z-index:1;} .jfs-home .cta h2{color:#fff; font-size:28px; margin-bottom:12px;} .jfs-home .cta p{color:rgba(255,255,255,0.9); margin-bottom:26px; font-size:15px;} .jfs-home .cta .btn-light{transition:transform .25s ease, box-shadow .25s ease;} .jfs-home .cta .btn-light:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.18);} .jfs-home .cta-buttons{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;} .jfs-home .btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);} /* CTA split variant — left copy / right button, used where the page wants to break out of the "everything centered" rhythm (opt-in, base .cta above stays centered for pages that haven't adopted this yet). */ .jfs-home .cta-split{display:flex; align-items:center; justify-content:space-between; gap:32px; text-align:left;} .jfs-home .cta-split h2{margin-bottom:8px;} .jfs-home .cta-split p{margin-bottom:0;} .jfs-home .cta-split .btn-light{flex-shrink:0;} @media(max-width:700px){ .jfs-home .cta-split{flex-direction:column; text-align:center;} } .jfs-home .btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.1);} /* SPLIT ROW (icon block + text block, alternating) — dipakai Programs (Course Structure, IGCSE, A & AS Level) buat baris konten Cambridge-info, reusable kalau halaman lain butuh layout sama. */ .jfs-home .split-row{display:grid; grid-template-columns:.32fr .68fr; gap:36px; align-items:center;} .jfs-home .split-row + .split-row{margin-top:40px;} .jfs-home .split-row-reverse{grid-template-columns:.68fr .32fr;} .jfs-home .split-row-reverse .split-icon{order:2;} .jfs-home .split-row-reverse .split-body{order:1;} .jfs-home .split-icon{aspect-ratio:1/1; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); background:var(--gradient); color:#fff;} .jfs-home .split-icon .jfs-icon{width:44px; height:44px;} .jfs-home .split-body h2{font-size:25px; margin-bottom:12px;} .jfs-home .split-body p{color:var(--n500); font-size:14.5px; line-height:1.75; white-space:pre-line;} @media(max-width:900px){ .jfs-home .split-row, .jfs-home .split-row-reverse{grid-template-columns:1fr;} .jfs-home .split-row-reverse .split-icon{order:1;} .jfs-home .split-row-reverse .split-body{order:2;} .jfs-home .split-icon{max-width:150px; margin:0 auto; font-size:38px;} } /* NAVBAR — floating glass pill, detached dari top (DESIGN.md: floating navbar, backdrop-blur, radius full).
jadi sticky wrapper dengan padding-top supaya pill "melayang" berjarak dari viewport top; background/blur/border/shadow dipindah ke