/* Theme Name: Spoken English Academy Theme URI: https://example.com/ Author: Sewool Author URI: https://sewool.com/ Description: A conversion-focused single-page landing theme for spoken English academies, built to the client's supplied design. Every section — text, colours, fonts, header, menu, footer and even the section order — is editable from the Customizer, and you can add brand-new sections yourself. Includes a demo-booking form (WhatsApp + email + dashboard leads). Version: 5.2.0 Requires at least: 5.8 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: spoken-english-academy */ /* ============================================================ TOKENS — overridden from the Customizer via :root in ============================================================ */ :root{ --ink-bg:#0B0529; --purple:#6625C1; --purple-deep:#2F1377; --purple-soft:#7C3AED; --yellow:#FFCC00; --gold:#FCB829; --orange:#EE6F04; --navy:#021E45; --green:#22C55E; --wa:#25D366; --bg:#F4F5F9; --card:#FFFFFF; --line:#E6EAF2; --ink:#0F172A; --muted:#5A6B85; --font-head:'Poppins',sans-serif; --font-body:'Inter',system-ui,sans-serif; --radius:18px; --maxw:1180px; --shadow:0 18px 44px -20px rgba(11,5,41,.45); --shadow-sm:0 8px 22px -12px rgba(11,5,41,.3); } *{box-sizing:border-box} html{scroll-behavior:smooth; scroll-padding-top:84px} body{margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden} h1,h2,h3,h4{font-family:var(--font-head); line-height:1.18; margin:0; font-weight:700; color:var(--ink)} p{margin:0} a{text-decoration:none; color:inherit} img{max-width:100%; display:block; height:auto} ul{margin:0; padding:0; list-style:none} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px} .hl{color:var(--gold)} .hl-o{color:var(--orange)} /* accessibility */ .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link:focus{position:fixed!important;top:10px;left:10px;width:auto;height:auto;clip:auto;background:#fff;color:var(--ink-bg);padding:10px 16px;border-radius:8px;z-index:999} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--yellow); outline-offset:2px} .sea-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* ============================================================ SECTIONS + HEADINGS ============================================================ */ .section{padding:76px 0} .section-white{background:#fff} .section-dark{background:var(--ink-bg); color:#fff} .section-purple{background:linear-gradient(165deg,var(--purple-deep),var(--purple)); color:#fff} .section-dark h2,.section-dark h3,.section-dark h4,.section-purple h2,.section-purple h3{color:#fff} .section-head{max-width:760px; margin:0 auto 46px; text-align:center} .section-head h2{font-size:clamp(1.75rem,4vw,2.7rem); margin:14px 0 12px; letter-spacing:-.01em} .section-head p{color:var(--muted); font-size:1.04rem} .section-head.on-dark h2{color:#fff} .section-head.on-dark p{color:#c9c2e0} .eyebrow{display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--orange)} /* ============================================================ BUTTONS ============================================================ */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:.97rem; padding:15px 28px; border-radius:999px; cursor:pointer; border:none; white-space:nowrap; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-block{width:100%} .btn-yellow{background:linear-gradient(135deg,var(--yellow),var(--gold)); color:#1a1005; box-shadow:0 12px 26px -12px rgba(252,184,41,.85)} .btn-white{background:#fff; color:var(--ink-bg); box-shadow:0 12px 26px -14px rgba(0,0,0,.6)} .btn-wa{background:var(--wa); color:#fff} .btn-pay{background:linear-gradient(135deg,var(--purple),var(--purple-deep)); color:#fff; border-radius:14px; box-shadow:0 12px 26px -12px rgba(102,37,193,.9)} .plan-gold .btn-pay{background:linear-gradient(135deg,#D9A017,#A9761A)} .plan-bronze .btn-pay{background:linear-gradient(135deg,#C2611C,#8E3F12)} /* ============================================================ TOP BAR + NAV ============================================================ */ .topbar{background:var(--purple-deep); color:#efe7ff; font-size:.86rem; padding:9px 16px; font-weight:600} .topbar-inner{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; text-align:center} .topbar-link{color:#fff; font-weight:800; white-space:nowrap} .nav{position:relative; z-index:60; background:var(--ink-bg); border-bottom:1px solid rgba(255,255,255,.08)} .nav.is-sticky{position:sticky; top:0} .nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px; gap:14px} .brand{display:flex; align-items:center; gap:11px; color:#fff; font-family:var(--font-head); font-weight:800; font-size:1.05rem; line-height:1.15} .brand .cap{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff; color:var(--purple); font-size:1.15rem; overflow:hidden; flex:none} .brand .cap img{width:100%; height:100%; object-fit:cover} .brand small{display:block; font-size:.6rem; letter-spacing:.22em; color:var(--gold); font-weight:700; text-transform:uppercase; margin-top:2px} .nav-wrap{display:flex; align-items:center; gap:6px} .menu{display:flex; align-items:center; gap:2px} .menu a{display:block; color:#cfc6e6; font-weight:600; font-size:.94rem; padding:9px 13px; border-radius:10px; transition:.15s} .menu a:hover{color:#fff; background:rgba(255,255,255,.09)} .nav-cta{margin-left:8px} .nav-cta .btn{padding:12px 22px; font-size:.9rem} .burger{display:none; background:none; border:none; cursor:pointer; padding:9px} .burger span{display:block; width:24px; height:2.5px; background:#fff; border-radius:2px; margin:5px 0; transition:.25s} .burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} /* ============================================================ HERO ============================================================ */ .hero{position:relative; background: radial-gradient(900px 480px at 82% 4%, rgba(102,37,193,.42), transparent 62%), radial-gradient(700px 420px at 6% 96%, rgba(47,19,119,.55), transparent 60%), var(--ink-bg); color:#fff; padding:52px 0 70px; overflow:hidden} .hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:44px; align-items:start} .hero-script{font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:1.15rem; color:#fff; margin-bottom:14px; position:relative; display:inline-block} .hero-script::after{content:""; display:block; height:2px; background:var(--gold); border-radius:2px; margin-top:5px; width:72%} .hero h1{color:#fff; font-size:clamp(2rem,4.4vw,3.15rem); font-weight:800; letter-spacing:-.015em; margin-bottom:16px} .hero .sub{color:#cdc4e6; font-size:1.03rem; max-width:620px; margin-bottom:22px} .rule-label{display:flex; align-items:center; gap:14px; margin:0 0 18px} .rule-label::before,.rule-label::after{content:""; height:1px; background:rgba(252,184,41,.55); flex:1} .rule-label span{font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.1em; color:var(--gold); white-space:nowrap} .train-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px} .train-card{background:#fff; border-radius:14px; overflow:hidden; color:var(--ink); box-shadow:var(--shadow)} .train-head{display:flex; align-items:center; justify-content:center; gap:9px; padding:12px 14px; font-family:var(--font-head); font-weight:800; font-size:.92rem; letter-spacing:.01em; text-align:center} .train-purple .train-head{background:var(--purple); color:#fff} .train-gold .train-head{background:var(--gold); color:#241703} .train-card ul{padding:14px 16px; display:grid; gap:9px} .train-card li{position:relative; padding-left:24px; font-size:.87rem; color:#26314a; line-height:1.4} .train-card li::before{content:"✔"; position:absolute; left:0; top:0; font-size:.8rem; font-weight:800} .train-purple li::before{color:var(--purple)} .train-gold li::before{color:#C9930A} .train-foot{padding:11px 14px; font-size:.82rem; font-weight:600; line-height:1.35} .train-purple .train-foot{background:var(--purple); color:#fff} .train-gold .train-foot{background:var(--gold); color:#241703} .hero-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:12px 6px; margin-bottom:22px} .hs-item{text-align:center; padding:2px 8px; border-left:1px solid rgba(255,255,255,.16)} .hs-item:first-child{border-left:none} .hs-item b{display:block; font-family:var(--font-head); font-size:.95rem; color:#fff} .hs-item span{font-size:.75rem; color:#b9aede} .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:16px} .hero-trust{display:flex; flex-wrap:wrap; gap:10px 22px; color:#bdb2e0; font-size:.87rem} .hero-trust li{position:relative; padding-left:20px} .hero-trust li::before{content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:800} .hero-side{position:relative} .hero-seal{position:absolute; top:-6px; right:-4px; z-index:4; width:118px; height:118px; border-radius:50%; background:var(--ink-bg); border:4px solid var(--gold); display:grid; place-items:center; text-align:center; padding:8px} .hero-seal span{font-family:var(--font-head); font-weight:800; font-size:.6rem; line-height:1.3; color:#fff; letter-spacing:.02em} .hero-photo{border-radius:20px; overflow:hidden; box-shadow:var(--shadow); min-height:300px} .hero-photo img{width:100%; height:100%; object-fit:cover} .hero-photo-empty{display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.25); color:#a99fd0; font-size:.85rem; text-align:center; padding:24px} .hero-points{margin-top:-56px; position:relative; z-index:3; margin-left:18px; background:rgba(47,19,119,.94); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:20px 22px; box-shadow:var(--shadow)} .hp-row{display:flex; gap:13px; padding:10px 0; align-items:flex-start} .hp-row .ic{font-size:1.2rem; flex:none; line-height:1.2} .hp-row b{display:block; font-family:var(--font-head); color:var(--gold); font-size:.98rem} .hp-row span{color:#ddd6f2; font-size:.85rem; line-height:1.45} /* ============================================================ JOURNEY BAND ============================================================ */ .journey{padding:0; background:var(--bg)} .journey-card{background:linear-gradient(160deg,var(--purple-deep),#3B189A); color:#fff; border-radius:22px; padding:34px 26px; box-shadow:var(--shadow); margin:-30px 0 0; position:relative; z-index:3} .journey-title{display:flex; align-items:center; gap:16px; color:#fff; justify-content:center; font-size:clamp(1.05rem,2.2vw,1.4rem); margin-bottom:26px; text-align:center} .journey-title .rule{height:1px; background:rgba(255,255,255,.35); flex:1; max-width:170px} .journey-title .hl{color:var(--gold)} .journey-grid{display:grid; grid-template-columns:repeat(6,1fr)} .journey-item{text-align:center; padding:6px 12px; border-left:1px solid rgba(255,255,255,.18)} .journey-item:first-child{border-left:none} .journey-item .ic{font-size:1.85rem; margin-bottom:10px; color:var(--gold)} .journey-item h4{color:#fff; font-size:1rem; margin-bottom:6px; line-height:1.28} .journey-item p{color:#cfc4ee; font-size:.82rem; line-height:1.45} .journey-banner{margin-top:26px; background:linear-gradient(135deg,var(--yellow),var(--gold)); color:#241703; font-family:var(--font-head); font-weight:800; text-align:center; padding:14px 18px; border-radius:999px; font-size:.95rem} /* ============================================================ SPOKEN ENGLISH TRAINING (about) ============================================================ */ .section-train{background:#fff} .train-wrap{display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:center} .train-title{font-size:clamp(1.9rem,4.4vw,3rem); font-weight:800; color:var(--navy); line-height:1.05; letter-spacing:-.02em} .train-title .hl{color:var(--purple)} .train-tag{font-family:var(--font-head); font-weight:800; font-size:.86rem; letter-spacing:.06em; color:var(--purple); margin:12px 0 26px} .train-points{display:grid; gap:18px} .tp-row{display:flex; gap:14px; align-items:flex-start} .tp-row .ic{width:44px; height:44px; border-radius:50%; background:var(--purple); color:#fff; display:grid; place-items:center; font-size:1.15rem; flex:none} .tp-row b{display:block; font-family:var(--font-head); color:var(--purple); font-size:1rem; letter-spacing:.01em} .tp-row span{color:var(--muted); font-size:.92rem} .train-quote{display:grid; place-items:center} .train-quote blockquote{margin:0; background:var(--purple); color:#fff; border-radius:26px; padding:34px 30px; font-family:var(--font-head); font-weight:800; font-size:1.5rem; line-height:1.25; text-align:center; position:relative; box-shadow:var(--shadow)} .train-quote blockquote::before,.train-quote blockquote::after{content:"\201C"; color:var(--gold); font-size:2.6rem; line-height:0; position:absolute} .train-quote blockquote::before{top:26px; left:16px} .train-quote blockquote::after{content:"\201D"; bottom:6px; right:18px} .train-bar{margin-top:34px; background:var(--purple); border-radius:14px; padding:16px 18px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px} .train-bar span{color:#fff; font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.04em; text-align:center; border-left:1px solid rgba(255,255,255,.28); padding:2px 8px} .train-bar span:first-child{border-left:none} /* ============================================================ CHOOSE YOUR PATH ============================================================ */ .path-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px} .path-card{background:#0F0F12; border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px; transition:transform .2s, border-color .2s} .path-card:hover{transform:translateY(-5px); border-color:var(--purple)} .path-head{display:flex; align-items:center; gap:10px} .path-head .ic{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; font-size:1.1rem; flex:none} .path-head .pill{flex:1; background:var(--purple); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.95rem; text-align:center; padding:8px 12px; border-radius:8px} .path-problem,.path-solution{background:var(--purple); color:#fff; border-radius:8px; padding:10px 12px; font-size:.87rem; line-height:1.45} .path-solution{background:rgba(102,37,193,.55)} .path-card .btn{margin-top:auto; border-radius:10px; padding:13px 18px} /* ============================================================ COURSES — poster-style plan cards ============================================================ */ .plan-group{margin-bottom:44px} .plan-group:last-child{margin-bottom:0} .plan-group-head{text-align:center; margin-bottom:24px} .tagpill{display:inline-block; background:var(--purple); color:#fff; font-family:var(--font-head); font-weight:800; font-size:.86rem; letter-spacing:.05em; padding:9px 20px; border-radius:8px} .plan-group-head p{color:var(--muted); margin-top:10px; font-size:.98rem} .plans{display:grid; gap:26px} /* per-plan palette */ .plan{--pc:#5B21B6; --pc2:#3B0F86; --pl:#EEE7FB; --pi:#F7F4FE; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm)} .plan-gold{--pc:#A9761A; --pc2:#7C5310; --pl:#FAF1DC; --pi:#FDF9F0} .plan-bronze{--pc:#B0561A; --pc2:#8E3F12; --pl:#FBEBE0; --pi:#FDF6F1} .plan-body{display:grid; grid-template-columns:1.55fr .8fr; gap:0} .plan-main{padding:24px 26px} .plan-toptag{display:inline-flex; align-items:center; gap:7px; background:var(--pc); color:#fff; font-family:var(--font-head); font-weight:800; font-size:.74rem; letter-spacing:.06em; padding:7px 15px; border-radius:8px; margin-bottom:12px} .plan-kicker{font-size:clamp(1.35rem,2.9vw,2rem); font-weight:800; color:#0B1B33; letter-spacing:-.01em; line-height:1.1} .plan-tagline{color:#3A4A63; font-size:.92rem; margin:6px 0 16px} .plan-badge{display:inline-block; background:var(--pc); color:#fff; font-family:var(--font-head); font-weight:800; font-size:.74rem; letter-spacing:.07em; padding:6px 15px; border-radius:6px} .plan-name{font-family:var(--font-head); font-weight:800; color:var(--pc); font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.05; letter-spacing:.01em; margin-top:8px} .plan-stars{color:var(--gold); letter-spacing:4px; margin:2px 0 10px; font-size:1.05rem} .plan-note{color:#3A4A63; font-size:.93rem; margin-bottom:18px; max-width:560px} .plan-block{margin-bottom:16px} .plan-label{display:inline-block; background:var(--pc); color:#fff; font-family:var(--font-head); font-weight:800; font-size:.72rem; letter-spacing:.06em; padding:7px 15px; border-radius:8px 8px 0 0} .plan-label-off{background:#1F2A3C} .plan-inc,.plan-exc{background:var(--pi); border:1px solid var(--line); border-radius:0 12px 12px 12px; padding:15px 17px; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px} .plan-inc li,.plan-exc li{position:relative; padding-left:26px; font-size:.88rem; color:#22314A; line-height:1.4} .plan-inc li::before{content:"✔"; position:absolute; left:0; top:0; width:17px; height:17px; border-radius:50%; background:var(--green); color:#fff; font-size:.62rem; display:grid; place-items:center; font-weight:800} .plan-exc li::before{content:"✕"; position:absolute; left:0; top:0; width:17px; height:17px; border-radius:50%; background:#E0523E; color:#fff; font-size:.62rem; display:grid; place-items:center; font-weight:800} .plan-exc li{color:#44536B} .plan-cnote{color:var(--pc); font-family:var(--font-head); font-weight:700; font-size:.92rem; margin-top:8px} /* right price rail */ .plan-side{background:var(--pi); border-left:1px solid var(--line); padding:20px 18px; display:flex; flex-direction:column; gap:12px} .plan-ribbon{background:linear-gradient(135deg,var(--yellow),var(--gold)); color:#241703; font-family:var(--font-head); font-weight:800; font-size:.72rem; text-align:center; padding:9px 10px; border-radius:8px; line-height:1.3} .plan-pricebox{background:linear-gradient(160deg,var(--pc),var(--pc2)); color:#fff; border-radius:12px; padding:16px 14px; text-align:center} .plan-pricebox .only{display:block; font-family:var(--font-head); font-weight:700; font-size:.74rem; letter-spacing:.16em; opacity:.92; margin-bottom:2px} .plan-pricebox .price{font-family:var(--font-head); font-weight:800; font-size:2.7rem; line-height:1.05} .plan-pricebox .old{text-decoration:line-through; opacity:.85; font-weight:700; font-size:1.05rem; text-decoration-color:#FF6B6B} .plan-specs{background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px 14px} .plan-specs li{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line)} .plan-specs li:last-child{border-bottom:none} .plan-specs .ic{width:30px; height:30px; border-radius:8px; background:var(--pl); display:grid; place-items:center; font-size:.95rem; flex:none} .plan-specs .kv{display:flex; flex-direction:column; min-width:0} .plan-specs .k{font-size:.68rem; letter-spacing:.07em; color:#7A899F; font-weight:700} .plan-specs .v{font-family:var(--font-head); font-weight:800; font-size:.88rem; color:#0B1B33; line-height:1.25} /* bottom bar */ .plan-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--pl); border-top:1px solid var(--line); padding:14px 22px} .plan-foot-cta{font-family:var(--font-head); font-weight:800; font-size:.92rem; color:var(--pc2); letter-spacing:.01em} .plan-foot .btn-pay{background:linear-gradient(135deg,var(--pc),var(--pc2)); color:#fff; border-radius:999px; padding:13px 26px; font-size:.95rem; box-shadow:0 12px 24px -14px rgba(0,0,0,.75)} .plan-foot .chev{font-weight:800; font-size:1.1rem; line-height:1} .plan-pay-wrap{display:flex; flex-direction:column; align-items:flex-end; gap:6px} .plan-pay{font-size:.72rem; color:#64748B; font-weight:600} .plan-methods{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end} .plan-methods span{background:#fff; border:1px solid var(--line); border-radius:6px; padding:4px 10px; font-size:.7rem; font-weight:800; color:#40506b; letter-spacing:.02em} /* group bottom strip */ .group-strip{margin-top:20px; border-radius:14px; padding:16px 18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px} .group-strip-group{background:linear-gradient(135deg,var(--purple),var(--purple-deep))} .group-strip-solo{background:linear-gradient(135deg,#C99215,#8E6410)} .gs-item{text-align:center; border-left:1px solid rgba(255,255,255,.28); padding:2px 10px} .gs-item:first-child{border-left:none} .gs-item b{display:block; color:#fff; font-family:var(--font-head); font-size:.78rem; letter-spacing:.03em} .gs-item span{color:rgba(255,255,255,.82); font-size:.72rem} /* ============================================================ LIVE ONLINE TRAINING ============================================================ */ .section-live{background:#0E0E11} .live-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:36px; align-items:center} .live-badge{display:inline-block; background:rgba(238,111,4,.16); border:1px solid rgba(238,111,4,.5); color:#FFA24D; font-size:.78rem; font-weight:700; padding:6px 14px; border-radius:999px; margin-bottom:16px} .live-copy h2{font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; margin-bottom:14px} .live-copy p{color:#b6b0c6; margin-bottom:22px} .live-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px} .live-card{background:#17171C; border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:7px; transition:transform .2s, border-color .2s} .live-card:hover{transform:translateY(-4px); border-color:rgba(238,111,4,.55)} .live-card .ic{width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.08); display:grid; place-items:center; font-size:1rem} .live-card b{font-family:var(--font-head); color:#fff; font-size:.98rem} .live-card .small{color:#9d97ad; font-size:.83rem} .live-card .pill{display:inline-block; background:var(--purple); color:#fff; font-size:.78rem; font-weight:700; padding:5px 11px; border-radius:6px; width:fit-content} /* ============================================================ REVIEWS ============================================================ */ .section-reviews{background:#080C0D} .rev-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px} .rev-card{background:#0E1213; border:1px solid rgba(238,111,4,.32); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:9px; transition:transform .2s, border-color .2s} .rev-card:hover{transform:translateY(-5px); border-color:var(--orange)} .rev-num{font-family:var(--font-head); font-weight:800; color:#fff; font-size:1.05rem} .rev-verified{display:flex; gap:6px; align-items:flex-start; color:#efe6dc; font-size:.63rem; font-weight:700; letter-spacing:.04em; line-height:1.35} .rev-stars{color:var(--gold); letter-spacing:2px; font-size:.95rem} .rev-card p{color:#d8d2cb; font-size:.83rem; line-height:1.55; flex:1} .rev-who{display:flex; align-items:center; gap:10px; margin-top:4px} .rev-who .av{width:38px; height:38px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:.82rem; flex:none} .rev-who b{display:block; color:#fff; font-family:var(--font-head); font-size:.88rem} .rev-who small{color:#a49c93; font-size:.76rem} /* ============================================================ ACHIEVEMENTS ============================================================ */ .section-achv{background:var(--bg)} .achv-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px} .achv-card{background:var(--navy); color:#fff; border-radius:18px; padding:26px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .2s} .achv-card:hover{transform:translateY(-5px)} .achv-card .ic{width:72px; height:72px; border-radius:50%; border:2px solid rgba(255,255,255,.35); display:grid; place-items:center; font-size:1.9rem; margin-bottom:8px} .achv-card h3{color:var(--orange); font-size:1.35rem; font-weight:800; line-height:1.2} .achv-sub{color:#fff; font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1.3} .achv-rule{display:block; width:46px; height:2px; background:var(--orange); border-radius:2px; margin:8px 0} .achv-desc{color:#c6d2e4; font-size:.88rem; line-height:1.55} .achv-strip{margin-top:20px; background:#fff; border-radius:18px; padding:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; box-shadow:var(--shadow-sm)} .as-item{display:flex; gap:12px; align-items:flex-start; border-left:1px solid var(--line); padding:2px 12px} .as-item:first-child{border-left:none} .as-item .ic{width:42px; height:42px; border-radius:50%; background:#E8EEF8; color:var(--navy); display:grid; place-items:center; font-size:1.05rem; flex:none} .as-item b{display:block; font-family:var(--font-head); color:var(--navy); font-size:.95rem; line-height:1.25} .as-item span{color:var(--muted); font-size:.82rem; line-height:1.45} .achv-banner{margin-top:20px; background:var(--navy); color:#fff; border-radius:14px; padding:16px 20px; text-align:center; font-family:var(--font-head); font-weight:800; font-size:1.02rem} .achv-banner .stars{display:block; color:var(--orange); letter-spacing:5px; margin-top:5px; font-size:.9rem} /* ============================================================ VIDEO STORIES ============================================================ */ .video-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px} .vcard{background:#13102A; border:1px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden} .vcard .frame{position:relative; padding-top:56.25%; background:#000} .vcard .frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0} .vcard .meta{padding:14px 18px} .vcard .meta b{font-family:var(--font-head); color:#fff} .vcard .meta small{display:block; color:#a99fd0} /* ============================================================ FAQ ============================================================ */ .faq-list{max-width:860px; margin:0 auto; display:grid; gap:12px} .faq{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm)} .faq button{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:18px 22px; font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px} .faq .plus{flex:none; width:28px; height:28px; border-radius:8px; background:rgba(102,37,193,.12); color:var(--purple); display:grid; place-items:center; font-size:1.2rem; transition:transform .25s} .faq.open .plus{transform:rotate(45deg)} .faq .ans{max-height:0; overflow:hidden; transition:max-height .3s ease} .faq .ans-inner{padding:0 22px 20px; color:var(--muted); font-size:.95rem} .faq .ans-inner ul{margin:8px 0 0; padding-left:20px; list-style:disc} .faq .ans-inner li{margin:5px 0} .faq .ans-inner p{margin:0 0 10px} /* ============================================================ CONTACT ============================================================ */ .contact-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:24px; align-items:start} .contact-info{background:#111015; border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:24px} .ci-title{background:var(--purple); color:#fff; display:inline-block; padding:7px 14px; border-radius:8px; font-size:.85rem; font-weight:700; margin-bottom:10px} .ci-avail{background:var(--purple); color:#fff; border-radius:8px; padding:9px 14px; font-size:.88rem; font-weight:600; margin-bottom:20px} .ci{display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.09)} .ci:last-child{border-bottom:none} .ci .ic{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; font-size:1.05rem; flex:none} .ci b{display:block; color:#cfc6e6; font-size:.78rem; font-weight:600; margin-bottom:4px} .ci span{display:inline-block; background:var(--purple); color:#fff; padding:5px 11px; border-radius:6px; font-size:.88rem; font-weight:600} .form-card{background:#111015; border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:26px} .form-card h3{color:#fff; font-size:1.35rem; text-align:center} .form-sub{color:#a89fc4; font-size:.85rem; text-align:center; margin-bottom:20px} .form-card .field{margin-bottom:14px} .form-card label{display:block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#b9b0d4; margin-bottom:6px} .form-card label.lbl-hi{display:inline-block; background:var(--purple); color:#fff; padding:5px 11px; border-radius:6px; text-transform:none; letter-spacing:0; font-size:.8rem} .form-card input,.form-card select,.form-card textarea{width:100%; padding:13px 14px; border:1px solid rgba(255,255,255,.16); border-radius:10px; font-family:inherit; font-size:.95rem; background:#1A1922; color:#fff} .form-card input::placeholder{color:#6f6890} .form-card select{color:#fff} .form-card select option{background:#1A1922; color:#fff} .form-card input:focus,.form-card select:focus{outline:none; border-color:var(--purple)} .form-actions{display:grid; gap:10px; margin-top:18px} .form-note{font-size:.78rem; color:#a89fc4; text-align:center; margin-top:12px} .form-success{background:#0f3d24; border:1px solid #1d7a48; color:#8ff0bb; padding:13px 15px; border-radius:10px; font-size:.9rem; margin-bottom:14px} .form-error{background:#40161a; border:1px solid #8e2a32; color:#ffb3b8; padding:13px 15px; border-radius:10px; font-size:.9rem; margin-bottom:14px} /* ============================================================ CUSTOM SECTIONS ============================================================ */ .sea-custom .custom-body{max-width:840px; margin:0 auto; font-size:1.02rem; color:var(--muted)} .sea-custom .custom-body p{margin:0 0 14px} .sea-custom .custom-body ul,.sea-custom .custom-body ol{margin:0 0 14px; padding-left:22px; list-style:disc} .sea-custom .custom-body li{margin:6px 0} .sea-custom .custom-body img{border-radius:var(--radius); margin:16px auto} .sea-custom .custom-cta{text-align:center; margin-top:24px} .section-dark .custom-body,.section-purple .custom-body{color:#cfc6e6} /* ============================================================ FOOTER + FLOATING ============================================================ */ .site-footer{background:var(--ink-bg); color:#b0a6cf; padding:52px 0 22px; border-top:1px solid rgba(255,255,255,.08)} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.09)} .site-footer h4{color:#fff; font-size:1rem; margin-bottom:15px} .footer-brand{margin-bottom:14px} .site-footer p{font-size:.92rem} .site-footer ul{display:grid; gap:9px} .site-footer ul a{font-size:.92rem; transition:color .15s} .site-footer ul a:hover{color:var(--gold)} .footer-widget{margin-bottom:18px} .footer-bottom{text-align:center; padding-top:20px; font-size:.85rem; color:#7f74a3} .float-right{position:fixed; right:20px; bottom:22px; z-index:70; display:flex; flex-direction:column; gap:12px} .fbtn{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff; box-shadow:0 12px 28px -8px rgba(0,0,0,.55); font-size:1.5rem; transition:transform .18s} .fbtn:hover{transform:scale(1.08)} .fbtn.wa{background:var(--wa)} .fbtn.call{background:var(--orange)} .gotop{position:fixed; left:20px; bottom:22px; z-index:70; width:50px; height:50px; border-radius:14px; background:var(--purple); color:#fff; border:1px solid rgba(255,255,255,.2); cursor:pointer; display:grid; place-items:center; font-size:1.3rem; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(12px); transition:.25s} .gotop.show{opacity:1; visibility:visible; transform:translateY(0)} /* reveal */ .reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease} .reveal.in{opacity:1; transform:none} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1100px){ .rev-grid{grid-template-columns:repeat(3,1fr)} .achv-grid{grid-template-columns:1fr 1fr} .achv-strip{grid-template-columns:1fr 1fr} .as-item:nth-child(3){border-left:none} } @media(max-width:1000px){ .hero-grid{grid-template-columns:1fr; gap:34px} .hero-side{max-width:560px; margin:0 auto; width:100%} .hero-points{margin-left:0; margin-top:-40px} .train-wrap{grid-template-columns:1fr; gap:28px} .train-quote blockquote{font-size:1.25rem; padding:26px 24px} .live-grid{grid-template-columns:1fr; gap:26px} .contact-grid{grid-template-columns:1fr} .plan{grid-template-columns:1fr} .plan-side{border-left:none; border-top:1px solid var(--line)} .journey-grid{grid-template-columns:repeat(3,1fr); row-gap:18px} .journey-item:nth-child(4){border-left:none} .path-grid{grid-template-columns:1fr 1fr} } @media(max-width:900px){ /* collapse the menu into the burger */ .burger{display:block} .nav-inner{height:64px} .nav-wrap{position:fixed; inset:auto 0 auto 0; top:var(--nav-offset,64px); background:var(--ink-bg); flex-direction:column; align-items:stretch; gap:0; padding:8px 16px 18px; transform:translateY(-150%); transition:transform .3s; box-shadow:0 22px 44px -22px rgba(0,0,0,.8); max-height:calc(100vh - 64px); overflow:auto; z-index:59} .nav-wrap.open{transform:translateY(0)} .menu{flex-direction:column; align-items:stretch; gap:0} .menu a{padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.07); font-size:1rem; border-radius:0} .nav-cta{margin:12px 0 0} .nav-cta .btn{width:100%; padding:15px 22px; font-size:.98rem} .rev-grid{grid-template-columns:1fr 1fr} .train-bar{grid-template-columns:1fr 1fr; gap:12px} .train-bar span:nth-child(3){border-left:none} /* comfortable tap targets */ .site-footer ul a{display:inline-block; padding:11px 0; min-height:44px; line-height:1.5} .site-footer ul{gap:2px} .btn{min-height:50px} } @media(max-width:760px){ .section{padding:52px 0} .section-head{margin-bottom:32px} .section-head h2{font-size:clamp(1.5rem,6.4vw,2rem)} .section-head p{font-size:.97rem} .topbar{font-size:.79rem; padding:8px 12px} .hero{padding:36px 0 54px} .hero h1{font-size:clamp(1.75rem,7.4vw,2.3rem)} .hero .sub{font-size:.98rem} .hero-script{font-size:1.02rem} .train-grid{grid-template-columns:1fr; gap:12px} .hero-strip{grid-template-columns:1fr 1fr; gap:10px 0; padding:14px 6px} .hs-item:nth-child(3){border-left:none} .hero-actions{display:grid; grid-template-columns:1fr; gap:11px} .hero-actions .btn{width:100%} .hero-seal{width:96px; height:96px; top:-4px; right:-2px; border-width:3px} .hero-seal span{font-size:.53rem} .hero-photo{min-height:230px} .hero-points{margin-top:-30px; padding:16px 16px} .journey-card{padding:24px 16px; margin-top:-22px; border-radius:18px} .journey-title{flex-direction:column; gap:8px; font-size:1.05rem} .journey-title .rule{display:none} .journey-grid{grid-template-columns:1fr 1fr; row-gap:6px} .journey-item{border-left:none; border-top:1px solid rgba(255,255,255,.16); padding:14px 8px} .journey-item:nth-child(1),.journey-item:nth-child(2){border-top:none} .journey-item .ic{font-size:1.6rem} .journey-item h4{font-size:.9rem} .journey-item p{font-size:.78rem} .journey-banner{font-size:.83rem; padding:12px 14px; border-radius:14px} .train-title{font-size:clamp(1.7rem,8vw,2.2rem)} .train-quote blockquote{font-size:1.15rem} .train-bar{grid-template-columns:1fr; gap:10px} .train-bar span{border-left:none; border-top:1px solid rgba(255,255,255,.28); padding-top:9px} .train-bar span:first-child{border-top:none; padding-top:2px} .path-grid{grid-template-columns:1fr} .plans{gap:18px} .plan-main{padding:22px 18px} .plan-main h3{font-size:1.85rem} .plan-inc,.plan-exc{grid-template-columns:1fr} .plan-side{padding:18px 16px} .plan-pricebox .price{font-size:2.2rem} .live-cards{grid-template-columns:1fr} .rev-grid{grid-template-columns:1fr} .rev-card p{font-size:.9rem} .achv-grid{grid-template-columns:1fr} .achv-strip{grid-template-columns:1fr; padding:16px} .as-item{border-left:none; border-top:1px solid var(--line); padding:12px 4px} .as-item:first-child{border-top:none} .achv-banner{font-size:.94rem} .faq button{padding:16px; font-size:.95rem} .faq .ans-inner{padding:0 16px 18px} .contact-info,.form-card{padding:20px 16px} .float-right{right:14px; bottom:16px; gap:10px} .fbtn{width:52px; height:52px} .gotop{left:14px; bottom:16px; width:46px; height:46px} } @media(max-width:420px){ .wrap{padding:0 15px} .brand{font-size:.95rem} .brand .cap{width:36px; height:36px} .journey-grid{grid-template-columns:1fr} .journey-item{border-top:1px solid rgba(255,255,255,.16)} .journey-item:nth-child(2){border-top:1px solid rgba(255,255,255,.16)} .journey-item:first-child{border-top:none} .hero-strip{grid-template-columns:1fr} .hs-item{border-left:none; border-top:1px solid rgba(255,255,255,.16); padding-top:9px} .hs-item:first-child{border-top:none; padding-top:2px} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important} .reveal{opacity:1; transform:none; transition:none} } /* ============================================================ OVERFLOW GUARDS + SMALL-SCREEN READABILITY ============================================================ */ /* grid/flex children may not shrink below their content by default */ .hero-grid > *, .contact-grid > *, .live-grid > *, .train-wrap > *, .plan > *, .plans > *, .rev-grid > *, .achv-grid > *, .path-grid > *, .journey-grid > *, .footer-grid > *, .live-cards > *, .train-grid > *{min-width:0} .ci span, .ci-avail, .rev-card p, .plan-specs .v, .footer-bottom, .hs-item b, .hs-item span, .live-card .pill{overflow-wrap:anywhere} .nav-wrap{max-width:100%} @media(max-width:760px){ .hero-seal{width:104px; height:104px} .hero-seal span{font-size:.6rem; line-height:1.25} .rev-verified{font-size:.68rem} .plan-specs .k{font-size:.75rem} .plan-pay,.form-note,.hero-trust{font-size:.82rem} .brand small{font-size:.62rem} } /* ============================================================ v3.1 — LOGO, TOP BAR, TRAINING (dark + photos), LIVE SHOWCASE ============================================================ */ /* ---------- BRAND LOGO ---------- */ .brand-logo{height:44px; width:auto; max-width:min(300px,52vw); display:block} .brand{gap:0} /* ---------- TOP BAR: always one line ---------- */ .topbar{padding:0} .topbar-inner{flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; overflow-y:hidden; justify-content:center; gap:10px; padding-top:9px; padding-bottom:9px; scrollbar-width:none; -ms-overflow-style:none} .topbar-inner::-webkit-scrollbar{display:none} .topbar-text{flex:0 0 auto} .topbar-link{flex:0 0 auto} /* ---------- SPOKEN ENGLISH TRAINING (now dark, with photos) ---------- */ .section-train{background: radial-gradient(760px 420px at 88% 12%, rgba(102,37,193,.32), transparent 62%), var(--ink-bg)} .section-train .train-title{color:#fff} .section-train .train-title .hl{color:var(--gold)} .section-train .train-tag{color:var(--gold)} .section-train .tp-row b{color:#fff} .section-train .tp-row span{color:#c2b8de} .train-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center} .train-media{position:relative} .tm-main{border-radius:22px; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.12)} .tm-main img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3} .tm-empty{display:grid; place-items:center; min-height:280px; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.25); color:#a99fd0; font-size:.85rem; text-align:center; padding:22px} .tm-small{position:absolute; left:-22px; bottom:78px; width:42%; border-radius:16px; overflow:hidden; border:4px solid var(--ink-bg); box-shadow:var(--shadow)} .tm-small img{width:100%; aspect-ratio:1/1; object-fit:cover} .section-train .train-quote{position:absolute; right:-10px; bottom:-24px; max-width:74%} .section-train .train-quote blockquote{font-size:1.15rem; padding:20px 24px; border-radius:18px} .train-bar{margin-top:56px; background:linear-gradient(135deg,var(--purple),var(--purple-deep)); border-radius:14px; padding:16px 18px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px} /* ---------- LIVE ONLINE TRAINING (centered showcase) ---------- */ .section-live{background:#0A0A0C} .live-shell{max-width:1060px; margin:0 auto; background: radial-gradient(620px 360px at 82% 18%, rgba(238,111,4,.18), transparent 64%), #121215; border:1px solid rgba(238,111,4,.34); border-radius:26px; padding:38px 34px; box-shadow:0 0 0 1px rgba(238,111,4,.08), 0 30px 70px -34px rgba(238,111,4,.5)} .live-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:34px; align-items:center} .live-badge{display:inline-flex; align-items:center; gap:7px; background:rgba(238,111,4,.14); border:1px solid rgba(238,111,4,.55); color:#FFA24D; font-size:.8rem; font-weight:700; padding:7px 16px; border-radius:999px; margin-bottom:16px} .live-copy h2{color:#fff; font-size:clamp(1.9rem,4.2vw,2.9rem); font-weight:800; margin-bottom:14px} .live-copy p{color:#b3adc0; margin-bottom:24px; font-size:1rem; max-width:480px} .btn-glow{box-shadow:0 0 0 6px rgba(255,204,0,.12), 0 16px 34px -12px rgba(255,204,0,.85); padding:17px 34px; font-size:1.05rem} .btn-glow:hover{box-shadow:0 0 0 8px rgba(255,204,0,.16), 0 20px 40px -12px rgba(255,204,0,.95)} .live-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px} .live-card{background:#1A1A1F; border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; transition:transform .2s, border-color .2s} .live-card:hover{transform:translateY(-4px); border-color:rgba(238,111,4,.6)} .live-card .ic{width:38px; height:38px; border-radius:10px; background:rgba(238,111,4,.16); display:grid; place-items:center; font-size:1.05rem} /* ---------- COURSE payment logos + group strip ---------- */ .plan-methods{display:flex; flex-wrap:wrap; gap:6px; justify-content:center} .plan-methods span{background:#fff; border:1px solid var(--line); border-radius:6px; padding:4px 9px; font-size:.7rem; font-weight:700; color:#40506b; letter-spacing:.02em} .group-strip{margin-top:18px; border-radius:14px; padding:16px 18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px} .group-strip-group{background:linear-gradient(135deg,var(--purple),var(--purple-deep))} .group-strip-solo{background:linear-gradient(135deg,#C99215,#8E6410)} .gs-item{text-align:center; border-left:1px solid rgba(255,255,255,.28); padding:2px 10px} .gs-item:first-child{border-left:none} .gs-item b{display:block; color:#fff; font-family:var(--font-head); font-size:.78rem; letter-spacing:.03em} .gs-item span{color:rgba(255,255,255,.82); font-size:.72rem} /* ---------- responsive for the new bits ---------- */ @media(max-width:1000px){ .train-wrap{grid-template-columns:1fr; gap:56px} .train-media{max-width:520px; margin:0 auto; width:100%} .section-train .train-quote{position:static; max-width:none; margin-top:18px} .tm-small{left:-12px; bottom:-26px; width:38%} .live-grid{grid-template-columns:1fr; gap:26px; text-align:center} .live-copy p{margin-left:auto; margin-right:auto} .live-badge{margin-left:auto; margin-right:auto} .live-card{align-items:center; text-align:center} } @media(max-width:760px){ .brand-logo{height:36px} .topbar-inner{justify-content:flex-start; padding-left:16px; padding-right:16px} .topbar{font-size:.76rem} .train-bar{margin-top:46px} .tm-small{display:none} .section-train .train-quote blockquote{font-size:1.05rem} .live-shell{padding:24px 18px; border-radius:20px} .live-cards{grid-template-columns:1fr} .btn-glow{width:100%} .group-strip{grid-template-columns:1fr 1fr; gap:12px} .gs-item{border-left:none} .gs-item:nth-child(odd){border-left:none} } @media(max-width:420px){ .brand-logo{height:32px} .group-strip{grid-template-columns:1fr} } /* ---------- viewport clamp: nothing may widen the page ---------- */ html{overflow-x:hidden} html,body{max-width:100%} /* ---------- top bar: full text on desktop, short text on phones ---------- */ .topbar-text-sm{display:none} @media(max-width:900px){ .topbar-text{display:none} .topbar-text-sm{display:inline; flex:0 0 auto} .topbar-inner{justify-content:center; overflow-x:visible} } /* ---------- plan cards: responsive ---------- */ @media(max-width:1000px){ .plan-body{grid-template-columns:1fr} .plan-side{border-left:none; border-top:1px solid var(--line)} .plan-specs{display:grid; grid-template-columns:1fr 1fr; gap:0 16px} .plan-specs li:nth-last-child(2){border-bottom:none} } @media(max-width:760px){ .plan-main{padding:20px 16px} .plan-kicker{font-size:1.25rem} .plan-name{font-size:2.1rem} .plan-inc,.plan-exc{grid-template-columns:1fr; padding:14px} .plan-specs{grid-template-columns:1fr} .plan-specs li{border-bottom:1px solid var(--line)} .plan-side{padding:16px 14px} .plan-pricebox .price{font-size:2.3rem} .plan-foot{flex-direction:column; align-items:stretch; text-align:center; padding:16px} .plan-foot-cta{font-size:.88rem} .plan-foot .btn-pay{width:100%; justify-content:center} .plan-pay-wrap{align-items:center} .plan-methods{justify-content:center} } /* training bottom bar: stack cleanly on phones */ @media(max-width:760px){ .train-bar{grid-template-columns:1fr !important; gap:0} .train-bar span{border-left:none; border-top:1px solid rgba(255,255,255,.28); padding:10px 6px; width:100%} .train-bar span:first-child{border-top:none} } /* ============================================================ v3.4 — MOBILE HEADER, QUICK-NAV, AND PHONE POLISH ============================================================ */ /* quick-nav is desktop-hidden; the full menu is already visible there */ .quicknav{display:none} @media(max-width:900px){ /* --- the slide-down menu: hidden with display, not transform, so nothing can ever peek at the top of the page --- */ .nav-wrap{ display:none !important; position:absolute; left:0; right:0; top:100%; background:var(--ink-bg); border-top:1px solid rgba(255,255,255,.09); flex-direction:column; align-items:stretch; gap:0; padding:6px 16px 18px; transform:none; max-height:none; overflow:visible; box-shadow:0 24px 46px -24px rgba(0,0,0,.85); z-index:59; } .nav-wrap.open{display:flex !important} .nav{position:relative} .nav.is-sticky{position:sticky; top:0} .menu{flex-direction:column; align-items:stretch; gap:0} .menu a{padding:15px 12px; border-bottom:1px solid rgba(255,255,255,.07); font-size:1.02rem; border-radius:0; min-height:52px; display:flex; align-items:center} .nav-cta{margin:14px 0 0} .nav-cta .btn{width:100%; padding:16px 22px; font-size:1rem} /* --- quick-nav pills under the logo row --- */ .quicknav{display:block; background:#120A33; border-top:1px solid rgba(255,255,255,.08)} .quicknav-inner{display:flex; gap:8px; overflow-x:auto; padding:10px 16px; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch} .quicknav-inner::-webkit-scrollbar{display:none} .quicknav-inner a{flex:0 0 auto; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#E6DFFA; font-family:var(--font-head); font-weight:600; font-size:.85rem; padding:9px 15px; border-radius:999px; white-space:nowrap; min-height:40px; display:flex; align-items:center; transition:.15s} .quicknav-inner a:active{background:var(--purple); border-color:var(--purple); color:#fff} /* header sizing */ .nav-inner{height:60px} .brand-logo{height:34px} html{scroll-padding-top:118px} } /* ---------- phone readability + spacing polish ---------- */ @media(max-width:760px){ .section{padding:46px 0} .section-head{margin-bottom:28px} .section-head h2{font-size:clamp(1.45rem,6.2vw,1.95rem); line-height:1.22} .section-head p{font-size:.96rem; line-height:1.6} .eyebrow{font-size:.7rem; letter-spacing:.14em} /* hero */ .hero{padding:30px 0 46px} .hero h1{font-size:clamp(1.65rem,7.2vw,2.15rem); line-height:1.16} .hero .sub{font-size:.96rem; line-height:1.62} .hero-script{font-size:.98rem} .rule-label span{font-size:.72rem; letter-spacing:.06em} .train-card ul{padding:14px} .train-card li{font-size:.9rem} .train-head{font-size:.88rem; padding:13px} .train-foot{font-size:.83rem; padding:12px 14px} .hero-points{padding:18px 16px; border-radius:16px} .hp-row b{font-size:.95rem} .hp-row span{font-size:.86rem} /* journey */ .journey-item h4{font-size:.92rem} .journey-item p{font-size:.8rem} /* training */ .train-title{font-size:clamp(1.6rem,7.6vw,2.1rem)} .train-tag{font-size:.8rem; margin-bottom:20px} .tp-row .ic{width:38px; height:38px; font-size:1rem} .tp-row b{font-size:.94rem} .tp-row span{font-size:.88rem} /* path cards */ .path-card{padding:16px} .path-head .pill{font-size:.92rem; padding:10px 12px} .path-problem,.path-solution{font-size:.88rem; padding:11px 13px} /* reviews */ .rev-card{padding:16px} .rev-card p{font-size:.88rem; line-height:1.6} /* achievements */ .achv-card{padding:22px 18px} .achv-card h3{font-size:1.25rem} .achv-desc{font-size:.87rem} /* faq */ .faq button{padding:15px 16px; font-size:.94rem; line-height:1.35; min-height:56px} /* contact */ .ci span{font-size:.9rem} .form-card h3{font-size:1.2rem} } @media(max-width:420px){ .quicknav-inner{padding:9px 14px; gap:7px} .quicknav-inner a{font-size:.82rem; padding:9px 13px} html{scroll-padding-top:112px} } /* ============================================================ v4.0 — COUNTDOWN BAR, BUTTON NAV, MARQUEE REVIEWS, REFERENCE-STYLE FOOTER, LIVE ANIMATIONS ============================================================ */ /* ---------- top bar with live countdown ---------- */ .topbar{background:linear-gradient(90deg,var(--purple-deep),var(--purple)); padding:0; overflow:hidden} .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 22px; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; scrollbar-width:none; -ms-overflow-style:none} .topbar-inner::-webkit-scrollbar{display:none} .countdown{display:flex; align-items:flex-start; gap:14px; flex:0 0 auto} .cd-unit{display:flex; flex-direction:column; align-items:center; line-height:1.05; min-width:34px} .cd-unit b{font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:#fff; font-variant-numeric:tabular-nums} .cd-unit span{font-size:.6rem; letter-spacing:.05em; color:#cdbdf5; margin-top:2px} .topbar-pill{flex:0 0 auto; background:linear-gradient(135deg,var(--yellow),var(--gold)); color:#241703; font-family:var(--font-head); font-weight:800; font-size:.8rem; padding:7px 16px; border-radius:8px; border:1px solid rgba(255,255,255,.5)} .topbar-right{flex:0 0 auto; background:var(--purple-soft); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.82rem; padding:8px 20px; border-radius:8px} /* blinking "live" feel, borrowed from the reference site */ @keyframes seaBlink{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(255,204,0,.55)} 50%{opacity:.92; box-shadow:0 0 0 7px rgba(255,204,0,0)}} .blink{animation:seaBlink 2.1s ease-in-out infinite} @keyframes seaGlow{0%,100%{box-shadow:0 0 0 0 rgba(238,111,4,.5)}50%{box-shadow:0 0 0 10px rgba(238,111,4,0)}} .live-badge{animation:seaGlow 2.4s ease-in-out infinite} @keyframes seaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .hero-seal{animation:seaFloat 4.5s ease-in-out infinite} /* ---------- header: logo + phone + button nav ---------- */ .nav-inner{gap:16px} .brand-logo{height:46px; width:auto; max-width:min(320px,50vw)} .nav-phone{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--yellow),var(--gold)); color:#241703; font-family:var(--font-head); font-weight:800; font-size:.85rem; padding:9px 15px; border-radius:8px; flex:0 0 auto} .nav-phone .ic{font-size:.95rem} .menu{gap:8px} .menu a{background:linear-gradient(135deg,var(--yellow),var(--gold)); color:#241703; font-family:var(--font-head); font-weight:800; font-size:.88rem; padding:11px 18px; border-radius:8px; transition:transform .15s, filter .15s} .menu a:hover{background:linear-gradient(135deg,var(--yellow),var(--gold)); transform:translateY(-2px); filter:brightness(1.06)} .nav-cta{display:flex; flex-direction:column; gap:5px; margin-left:6px} .btn-sm{padding:9px 16px; font-size:.8rem; border-radius:8px} /* ---------- reviews: single auto-scrolling line ---------- */ .rev-marquee{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .rev-track{display:flex; gap:16px; width:max-content; animation:seaMarquee 60s linear infinite} @keyframes seaMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .rev-marquee .rev-card{flex:0 0 300px; width:300px; height:auto} .rev-marquee .rev-card p{ display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden} @media(prefers-reduced-motion:reduce){ .rev-track{animation:none; width:auto; overflow-x:auto} .blink,.live-badge,.hero-seal{animation:none} } /* ---------- footer, aligned like the reference site ---------- */ .footer-grid{grid-template-columns:1.5fr 1fr 1.2fr; gap:40px} .footer-brand{margin-bottom:16px} .site-footer .footer-brand .brand-logo{height:42px} .footer-contact{display:grid; gap:14px} .footer-contact li{display:flex; align-items:flex-start; gap:11px; font-size:.92rem; line-height:1.5} .footer-contact li .ic{flex:none; font-size:1rem; line-height:1.35} .footer-contact a{display:flex; align-items:flex-start; gap:11px} .footer-social{display:flex; justify-content:center; gap:14px; padding:26px 0 4px} .footer-social a{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; font-size:1.05rem; color:#fff; transition:transform .18s, background .18s} .footer-social a:hover{transform:translateY(-3px); background:var(--orange); border-color:var(--orange)} .footer-bottom{border-top:1px solid rgba(255,255,255,.09); margin-top:14px} /* ---------- required-field styling ---------- */ .form-card input:required:invalid,.form-card select:required:invalid{border-color:rgba(255,255,255,.16)} .form-card input:required:valid,.form-card select:required:valid{border-color:rgba(34,197,94,.55)} .form-card label::after{content:" *"; color:var(--orange); font-weight:800} .form-card .sea-hp label::after{content:""} /* ---------- responsive ---------- */ @media(max-width:1180px){ .nav-phone span:not(.ic){display:none} .nav-phone{padding:10px 13px} } @media(max-width:1050px){ .menu a{font-size:.82rem; padding:10px 13px} .btn-sm{font-size:.75rem; padding:8px 12px} } @media(max-width:900px){ .nav-phone{order:2; margin-left:auto} .burger{order:3} .menu{gap:8px; padding-top:6px} .menu a{border-bottom:none; border-radius:10px; justify-content:center; text-align:center; padding:14px 12px; font-size:.95rem} .nav-cta{flex-direction:column; gap:8px; margin:10px 0 0} .nav-cta .btn{width:100%; font-size:.92rem; padding:14px 18px} .rev-marquee .rev-card{flex-basis:270px; width:270px} .footer-grid{grid-template-columns:1fr 1fr; gap:30px} .footer-grid .footer-col:first-child{grid-column:1 / -1} } @media(max-width:760px){ .topbar-inner{gap:10px; padding:8px 16px; justify-content:flex-start} .countdown{gap:10px} .cd-unit b{font-size:.95rem} .cd-unit span{font-size:.55rem} .topbar-pill{font-size:.72rem; padding:6px 12px} .topbar-right{font-size:.74rem; padding:7px 14px} .brand-logo{height:36px} .footer-grid{grid-template-columns:1fr; gap:26px} .footer-social{padding:20px 0 4px} .footer-social a{width:42px; height:42px} } @media(max-width:420px){ .brand-logo{height:32px} .cd-unit{min-width:30px} } /* ============================================================ v4.1 — REFERENCE STYLING Near-black surfaces, orange accents, no purple pills, text-link navigation, aligned buttons. ============================================================ */ :root{ --ref-bg:#0A0A0B; --ref-panel:#141416; --ref-panel-2:#1B1B1F; --ref-line:rgba(255,255,255,.09); --ref-text:#F5F5F7; --ref-muted:#A2A2AC; --accent:#F2700F; --accent-2:#D85A05; } /* ---------- BUTTONS (reference style) ---------- */ .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 10px 26px -12px rgba(242,112,15,.9)} .btn-primary:hover{filter:brightness(1.07)} .btn-outline{background:transparent; color:var(--accent); border:1.6px solid var(--accent); box-shadow:none} .btn-outline:hover{background:rgba(242,112,15,.12)} .btn-white{background:#fff; color:#141416} .btn-sm{padding:10px 18px; font-size:.82rem; border-radius:10px; min-height:0} .btn{border-radius:12px; max-width:100%} .btn span{min-width:0; overflow:hidden; text-overflow:ellipsis} /* ---------- HEADER: text links + two buttons, always aligned ---------- */ .nav{background:var(--ref-bg); border-bottom:1px solid var(--ref-line)} .nav-inner{gap:18px; flex-wrap:nowrap; min-width:0} .brand{flex:0 0 auto} .nav-wrap{flex:1 1 auto; justify-content:flex-end; gap:16px; min-width:0} .menu{gap:2px; flex-wrap:nowrap; min-width:0; overflow:hidden} .menu a{background:none !important; color:var(--ref-text); font-family:var(--font-head); font-weight:600; font-size:.92rem; padding:9px 12px; border-radius:8px; white-space:nowrap; transition:color .15s} .menu a:hover{background:none !important; color:var(--accent); transform:none} .nav-cta{flex:0 0 auto; flex-direction:row; gap:9px; margin-left:4px} .nav-cta .btn{white-space:nowrap} .nav-phone{background:transparent; border:1.6px solid var(--accent); color:var(--accent); font-size:.84rem; padding:9px 14px; border-radius:10px} /* ---------- surfaces ---------- */ body{background:var(--ref-bg); color:var(--ref-text)} .section-dark,.section-live,.section-reviews,.section-train{background:var(--ref-bg)} .section-white{background:#fff} .section-achv{background:#0F0F12} .section-head.on-dark p,.section-dark p{color:var(--ref-muted)} .section-head h2{color:var(--ref-text)} .eyebrow{color:var(--accent)} .hl-o{color:var(--accent)} /* ---------- CHOOSE YOUR PATH — reference card style, no purple pills ---------- */ .path-grid{gap:20px} .path-card{background:var(--ref-panel); border:1px solid var(--ref-line); border-radius:16px; padding:24px 22px; gap:10px} .path-card:hover{border-color:rgba(242,112,15,.55); transform:translateY(-5px)} .path-head{flex-direction:column; align-items:flex-start; gap:14px} .path-head .ic{width:48px; height:48px; border-radius:12px; background:rgba(242,112,15,.13); border:1px solid rgba(242,112,15,.28); font-size:1.25rem} .path-head .pill{background:none !important; color:var(--ref-text); font-family:var(--font-head); font-weight:700; font-size:1.15rem; text-align:left; padding:0; border-radius:0} .path-problem{background:none !important; color:var(--ref-text); font-weight:700; font-size:.96rem; padding:0; border-radius:0} .path-solution{background:none !important; color:var(--ref-muted); font-size:.92rem; padding:0; border-radius:0; line-height:1.6} .path-card .btn{margin-top:14px; border-radius:12px} /* ---------- SPOKEN ENGLISH TRAINING — orange accents ---------- */ .section-train{background: radial-gradient(760px 420px at 88% 12%, rgba(242,112,15,.16), transparent 62%), var(--ref-bg)} .section-train .train-title{color:var(--ref-text)} .section-train .train-title .hl{color:var(--accent)} .section-train .train-tag{color:var(--accent)} .tp-row .ic{background:linear-gradient(135deg,var(--accent),var(--accent-2))} .section-train .tp-row b{color:var(--ref-text)} .section-train .tp-row span{color:var(--ref-muted)} .train-bar{background:var(--ref-panel); border:1px solid var(--ref-line)} .train-bar span{color:var(--ref-text); border-left-color:var(--ref-line)} .train-quote blockquote{background:linear-gradient(135deg,var(--accent),var(--accent-2))} .train-quote blockquote::before,.train-quote blockquote::after{color:#ffd9b8} /* ---------- LIVE ONLINE TRAINING ---------- */ .live-shell{background:radial-gradient(620px 360px at 82% 18%, rgba(242,112,15,.16), transparent 64%), var(--ref-panel); border-color:rgba(242,112,15,.32)} .live-badge{background:rgba(242,112,15,.12); border-color:rgba(242,112,15,.55); color:#FFA24D; display:inline-flex; align-items:center; gap:9px} .live-dot{width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block; animation:seaLiveDot 1.4s ease-in-out infinite} @keyframes seaLiveDot{ 0%,100%{transform:scale(1); opacity:1; box-shadow:0 0 0 0 rgba(242,112,15,.75)} 50%{transform:scale(1.35); opacity:.75; box-shadow:0 0 0 8px rgba(242,112,15,0)}} .live-card{background:var(--ref-panel-2); border-color:var(--ref-line)} .live-card .ic{background:rgba(242,112,15,.14)} .live-card .pill{background:linear-gradient(135deg,var(--accent),var(--accent-2))} .live-copy p{color:var(--ref-muted)} /* ---------- REVIEWS ---------- */ .section-reviews{background:var(--ref-bg)} .rev-card{background:var(--ref-panel); border-color:rgba(242,112,15,.26)} .rev-card:hover{border-color:var(--accent)} .rev-who .av{background:linear-gradient(135deg,var(--accent),var(--accent-2))} /* ---------- ACHIEVEMENTS ---------- */ .achv-card{background:var(--ref-panel); border:1px solid var(--ref-line)} .achv-card h3{color:var(--accent)} .achv-rule{background:var(--accent)} .achv-desc{color:var(--ref-muted)} .achv-strip{background:var(--ref-panel); border:1px solid var(--ref-line)} .as-item{border-left-color:var(--ref-line)} .as-item .ic{background:rgba(242,112,15,.14); color:var(--accent)} .as-item b{color:var(--ref-text)} .as-item span{color:var(--ref-muted)} .achv-banner{background:var(--ref-panel); border:1px solid var(--ref-line); color:var(--ref-text)} .achv-banner .stars{color:var(--accent)} /* ---------- CONTACT — reference layout, no purple pills ---------- */ .contact-info{background:var(--ref-panel); border:1px solid var(--ref-line); border-radius:18px; padding:26px} .ci-title{background:none !important; color:var(--ref-text); font-family:var(--font-head); font-weight:700; font-size:1.25rem; padding:0; border-radius:0; margin-bottom:6px} .ci-avail{background:none !important; color:var(--ref-muted); font-size:.94rem; padding:0; border-radius:0; margin-bottom:22px; font-weight:400} .ci{border-bottom:1px solid var(--ref-line); padding:15px 0} .ci .ic{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border-radius:10px} .ci b{color:var(--ref-text); font-family:var(--font-head); font-weight:700; font-size:.95rem; margin-bottom:3px} .ci span{background:none !important; color:var(--ref-muted); padding:0; border-radius:0; font-size:.92rem; font-weight:400} .form-card{background:var(--ref-panel); border:1px solid var(--ref-line); border-radius:18px} .form-card h3{color:var(--ref-text)} .form-sub{color:var(--ref-muted)} .form-card label,.form-card label.lbl-hi{background:none !important; color:var(--ref-muted); font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:0; border-radius:0; display:block; margin-bottom:7px} .form-card label::after{color:var(--accent)} .form-card input,.form-card select,.form-card textarea{background:var(--ref-panel-2); border:1px solid var(--ref-line); color:var(--ref-text); border-radius:12px; padding:14px} .form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:var(--accent)} .form-card input:required:valid,.form-card select:required:valid{border-color:rgba(242,112,15,.5)} .form-card select option{background:var(--ref-panel-2)} .form-note{color:var(--ref-muted)} /* ---------- FAQ ---------- */ .faq .plus{background:rgba(242,112,15,.13); color:var(--accent)} /* ---------- FOOTER ---------- */ .site-footer{background:var(--ref-bg); border-top:1px solid var(--ref-line); color:var(--ref-muted)} .site-footer ul a:hover{color:var(--accent)} .footer-social a:hover{background:var(--accent); border-color:var(--accent)} .gotop{background:linear-gradient(135deg,var(--accent),var(--accent-2))} .fbtn.call{background:linear-gradient(135deg,var(--accent),var(--accent-2))} /* ---------- top bar keeps the brand purple, buttons do not ---------- */ .topbar-right{background:rgba(255,255,255,.14)} /* ---------- RESPONSIVE: alignment safety ---------- */ @media(max-width:1240px){ .menu a{font-size:.86rem; padding:9px 9px} .nav-cta .btn{font-size:.76rem; padding:9px 13px} .nav-phone{font-size:.78rem; padding:9px 11px} } @media(max-width:1080px){ .nav-phone{display:none} .menu a{font-size:.82rem; padding:8px 8px} .nav-cta .btn{font-size:.72rem; padding:8px 11px} } @media(max-width:900px){ /* burger opens the whole menu, buttons included */ .nav-wrap{gap:0} .menu{flex-direction:column; overflow:visible; gap:0} .menu a{font-size:1rem; padding:15px 12px; border-bottom:1px solid var(--ref-line); border-radius:0; justify-content:flex-start} .nav-cta{flex-direction:column; gap:10px; margin:14px 0 0; width:100%} .nav-cta .btn{width:100%; font-size:.95rem; padding:14px 18px} /* quick shortcuts stay pinned at the top of the page too */ .quicknav{background:var(--ref-bg); border-top:1px solid var(--ref-line)} .quicknav-inner a{background:var(--ref-panel); border:1px solid var(--ref-line); color:var(--ref-text)} .quicknav-inner a:active{background:var(--accent); border-color:var(--accent)} } @media(max-width:760px){ .path-card{padding:20px 18px} .path-head .pill{font-size:1.05rem} .contact-info,.form-card{padding:20px 16px} .ci-title{font-size:1.1rem} } /* ============================================================ v4.2 — TOP MENU ON DESKTOP TOO, AND NO MORE WHITE STRIPS ============================================================ */ /* ---------- the shortcut row now shows on every screen size ---------- */ .quicknav{display:block; background:var(--ref-bg); border-top:1px solid var(--ref-line)} .quicknav-inner{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:11px 22px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none} .quicknav-inner::-webkit-scrollbar{display:none} .quicknav-inner a{flex:0 0 auto; background:var(--ref-panel); border:1px solid var(--ref-line); color:var(--ref-text); font-family:var(--font-head); font-weight:600; font-size:.86rem; padding:9px 17px; border-radius:999px; white-space:nowrap; min-height:38px; display:flex; align-items:center; transition:background .15s, border-color .15s, color .15s} .quicknav-inner a:hover{background:rgba(242,112,15,.14); border-color:var(--accent); color:var(--accent)} .quicknav-inner a:active{background:var(--accent); border-color:var(--accent); color:#fff} /* ---------- kill the light strips: everything follows the dark theme ---------- */ :root{--bg:#0A0A0B} body{background:var(--ref-bg)} .journey{background:var(--ref-bg)} .section-white{background:var(--ref-bg)} .section-achv{background:#0F0F12} /* courses heading + copy on the dark background */ #courses .section-head h2{color:var(--ref-text)} #courses .section-head p,.plan-group-head p{color:var(--ref-muted)} .tagpill{background:linear-gradient(135deg,var(--accent),var(--accent-2))} /* the plan cards stay light, exactly like the client's posters */ .plan{background:#fff; border-color:rgba(0,0,0,.08)} /* ---------- FAQ on dark ---------- */ #faqs .section-head h2{color:var(--ref-text)} #faqs .section-head p{color:var(--ref-muted)} .faq{background:var(--ref-panel); border:1px solid var(--ref-line); box-shadow:none} .faq button{color:var(--ref-text)} .faq:hover{border-color:rgba(242,112,15,.4)} .faq .ans-inner{color:var(--ref-muted)} .faq .ans-inner strong{color:var(--ref-text)} /* ---------- custom sections keep working on dark ---------- */ .sea-custom .custom-body{color:var(--ref-muted)} .section-white .section-head h2{color:var(--ref-text)} /* ---------- responsive ---------- */ @media(max-width:900px){ .quicknav-inner{justify-content:flex-start; flex-wrap:nowrap; padding:10px 16px} } @media(max-width:420px){ .quicknav-inner{padding:9px 14px; gap:7px} .quicknav-inner a{font-size:.82rem; padding:9px 13px} } /* ============================================================ v4.3 — TOP-BAR PILL, HERO ALIGNMENT, PLAN TEXT, LIVE CARDS, REVIEW MARQUEE, PHONE POLISH ============================================================ */ /* ---------- top bar pill: no yellow, matches the bar ---------- */ .topbar-pill{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:700} .topbar-right{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff} /* ---------- hero: strip, buttons and trust line properly aligned ---------- */ .hero-copy{display:flex; flex-direction:column; align-items:flex-start} .hero-strip{width:100%; max-width:640px; align-items:stretch; padding:0; overflow:hidden} .hs-item{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px 10px; gap:3px} .hs-item b{font-size:.98rem; line-height:1.2} .hs-item span{font-size:.76rem; line-height:1.3} .hero-actions{width:100%; max-width:640px; align-items:stretch; gap:14px; margin-bottom:14px} .hero-actions .btn{flex:1 1 0; min-height:56px; font-size:1rem; padding:16px 22px} .hero-trust{width:100%; max-width:640px; justify-content:space-between; gap:8px 16px} .hero-trust li{padding-left:20px; font-size:.86rem; white-space:nowrap} /* the whole block sits centred under the copy on wide screens */ @media(min-width:1001px){ .hero-strip,.hero-actions,.hero-trust{margin-left:auto; margin-right:auto} .hero-copy .rule-label{width:100%; max-width:640px; margin-left:auto; margin-right:auto} .train-grid{width:100%; max-width:640px; margin-left:auto; margin-right:auto} } /* ---------- training photos: small inset pushed further out ---------- */ .tm-small{left:-56px; bottom:56px; width:44%; border-width:5px; border-radius:18px; box-shadow:0 26px 54px -22px rgba(0,0,0,.85)} .section-train .train-quote{right:-26px; bottom:-30px} /* ---------- PRICING CARDS: dark readable text on the white card ---------- */ .plan .plan-kicker{color:#0B1B33 !important} .plan .plan-tagline{color:#3A4A63 !important} .plan .plan-name{color:var(--pc) !important} .plan .plan-note,.plan .plan-inc li,.plan .plan-exc li{color:#22314A !important} .plan .plan-exc li{color:#44536B !important} .plan .plan-specs .v{color:#0B1B33 !important} .plan .plan-specs .k{color:#7A899F !important} .plan .plan-cnote{color:var(--pc) !important} .plan h3,.plan h4{color:inherit} /* ---------- LIVE TRAINING CARDS: no orange blocks, all four alike ---------- */ .live-card .pill{background:none !important; border:none; color:var(--ref-muted); font-weight:400; font-size:.83rem; padding:0; border-radius:0} .live-card .pill + .pill{margin-top:-4px} /* ---------- REVIEWS: always auto-scroll, never a scrollbar ---------- */ .rev-marquee{overflow:hidden !important} .rev-track{overflow:visible !important; width:max-content !important; animation:seaMarquee 60s linear infinite} .rev-marquee::-webkit-scrollbar,.rev-track::-webkit-scrollbar{display:none} @media(prefers-reduced-motion:reduce){ /* still moves, just calmly */ .rev-track{animation:seaMarquee 180s linear infinite !important; width:max-content !important; overflow:visible !important} } /* ---------- PHONE POLISH ---------- */ @media(max-width:1000px){ .tm-small{left:-18px; bottom:-30px; width:40%} .section-train .train-quote{right:0; bottom:auto} } @media(max-width:900px){ .hero-strip,.hero-actions,.hero-trust,.hero-copy .rule-label,.train-grid{max-width:none} } @media(max-width:760px){ .topbar-pill,.topbar-right{border-width:1px} .hero-copy{align-items:stretch} .hero-strip{grid-template-columns:1fr 1fr} .hs-item{padding:12px 8px} .hero-actions{flex-direction:column; gap:11px} .hero-actions .btn{width:100%; min-height:52px; font-size:.96rem} .hero-trust{justify-content:flex-start; gap:8px 14px} .hero-trust li{font-size:.82rem; white-space:normal} .tm-small{display:none} .rev-marquee .rev-card{flex-basis:250px; width:250px} .live-card{align-items:flex-start; text-align:left} } @media(max-width:420px){ .hero-strip{grid-template-columns:1fr} .hs-item{flex-direction:row; justify-content:flex-start; gap:8px; text-align:left; padding:10px 12px} } /* ============================================================ v5.0 — ABOUT SECTION, FULL POSTER, BOLD TRAINING PILLS, REVIEW ARROWS, FAQ SCROLLER, POLICY PAGES ============================================================ */ /* ---------- 1. training poster shows in full, never cropped ---------- */ .tm-main{background:#0F0F12} .tm-main img{aspect-ratio:auto !important; object-fit:contain !important; width:100%; height:auto} .tm-empty{min-height:260px} /* ---------- 2. course block headings: full width and chunky ---------- */ .plan-group-head{margin-bottom:26px} .tagpill{display:block; width:100%; text-align:center; font-size:clamp(.95rem,2vw,1.25rem); letter-spacing:.08em; padding:18px 24px; border-radius:14px; box-shadow:0 14px 30px -16px rgba(242,112,15,.9)} .plan-group-head p{margin-top:14px; font-size:1.02rem} /* ---------- 3. reviews: arrows, no numbers ---------- */ .rev-num{display:none} .rev-wrap{position:relative; display:flex; align-items:center; gap:10px} .rev-wrap .rev-marquee{flex:1 1 auto; min-width:0} .slide-btn{flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--ref-panel); border:1px solid var(--ref-line); color:var(--ref-text); font-size:1.5rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .18s, border-color .18s, transform .18s} .slide-btn:hover{background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.06)} /* ---------- 4. FAQ: fixed viewport + side slider ---------- */ .faq-shell{position:relative; display:flex; align-items:flex-start; gap:12px; max-width:900px; margin:0 auto} .faq-shell .faq-list{flex:1 1 auto; min-width:0; margin:0; overflow-y:auto; scroll-behavior:smooth; padding-right:4px; scrollbar-width:none; -ms-overflow-style:none} .faq-shell .faq-list::-webkit-scrollbar{display:none} .faq-slider{flex:0 0 auto; display:flex; flex-direction:column; gap:10px; position:sticky; top:50%; align-self:center} .faq-slider .slide-btn{transform:rotate(90deg)} .faq-slider .slide-btn:hover{transform:rotate(90deg) scale(1.06)} .faq-nofit .faq-slider{display:none} .faq-nofit .faq-list{max-height:none !important; overflow:visible} /* ---------- 5. ABOUT SPOKEN ENGLISH ACADEMY ---------- */ .section-about{background: radial-gradient(700px 400px at 8% 10%, rgba(242,112,15,.12), transparent 60%), var(--ref-bg)} .about-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:38px; align-items:start} .about-media{border-radius:18px; overflow:hidden; border:1px solid var(--ref-line); background:#0F0F12; box-shadow:var(--shadow); position:sticky; top:110px} .about-media img{width:100%; height:auto; display:block} .about-empty{display:grid; place-items:center; min-height:320px; color:#8A8A95; font-size:.86rem; text-align:center; padding:26px; border:1px dashed var(--ref-line)} .about-lead{color:var(--accent); font-size:1.2rem; margin-bottom:14px; line-height:1.35} .about-copy p{color:var(--ref-muted); font-size:.98rem; line-height:1.7; margin-bottom:14px} .about-why{color:var(--ref-text); font-size:1.15rem; margin:22px 0 14px} .about-list{display:grid; gap:12px} .about-list li{display:flex; gap:12px; align-items:flex-start; color:var(--ref-muted); font-size:.95rem; line-height:1.6} .about-list li .ic{flex:none; width:30px; height:30px; border-radius:9px; background:rgba(242,112,15,.13); border:1px solid rgba(242,112,15,.26); display:grid; place-items:center; font-size:.95rem} .about-list li b{color:var(--ref-text)} /* ---------- 6. policy pages ---------- */ .page-shell{padding-top:56px} .page-card{max-width:900px; margin:0 auto; background:var(--ref-panel); border:1px solid var(--ref-line); border-radius:18px; padding:38px 34px} .page-title{color:var(--ref-text); font-size:clamp(1.6rem,3.6vw,2.4rem); margin-bottom:20px} .page-body{color:var(--ref-muted); font-size:1rem; line-height:1.75} .page-body h2,.page-body h3{color:var(--ref-text); margin:26px 0 10px; font-size:1.15rem} .page-body p{margin-bottom:14px} .page-body ul,.page-body ol{margin:0 0 16px; padding-left:22px; list-style:disc} .page-body li{margin:7px 0} .page-body a{color:var(--accent)} .page-body strong{color:var(--ref-text)} .page-back{margin-top:26px} /* ---------- 7. always-visible CTAs in the header ---------- */ .nav-cta{flex:0 0 auto; display:flex; flex-direction:row; gap:9px; align-items:center} /* ---------- RESPONSIVE ---------- */ @media(max-width:1000px){ .about-grid{grid-template-columns:1fr; gap:26px} .about-media{position:static} } @media(max-width:900px){ /* the two action buttons sit on their own row, always on screen */ .nav-inner{flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:10px; row-gap:10px} .brand{order:1} .burger{order:2; margin-left:auto} .nav-cta{order:3; width:100%; gap:10px} .nav-cta .btn{flex:1 1 0; justify-content:center; font-size:.86rem; padding:13px 10px} .nav-wrap{order:4; top:auto} .nav-phone{display:none} } @media(max-width:760px){ .tagpill{font-size:.92rem; padding:15px 16px; letter-spacing:.05em} .faq-shell{gap:8px} .faq-slider .slide-btn{width:38px; height:38px; font-size:1.25rem} .slide-btn{width:38px; height:38px; font-size:1.25rem} .rev-wrap{gap:6px} .about-lead{font-size:1.08rem} .about-list li{font-size:.92rem} .page-card{padding:26px 20px} .nav-cta .btn{font-size:.82rem; padding:13px 8px} } @media(max-width:420px){ .nav-cta{flex-direction:column} .nav-cta .btn{width:100%} } /* review slider: manual nudge wrapper sits between the clip box and the track */ .rev-shift{display:block; will-change:transform} /* ===================================================================== CLIENT MOBILE FIXES — phone view only (added 2026-07) (1) Top bar fully visible on phones — no horizontal scroll (2) Hamburger removed; the two header buttons move up into its place (3) Menu pills wrap onto multiple rows instead of side-scrolling Appended last so these win the cascade. Desktop (>900px) is untouched. ===================================================================== */ @media(max-width:900px){ /* (1) TOP BAR — wrap so countdown + pill + message all fit on screen */ .topbar{padding:8px 12px !important; overflow:visible !important} .topbar-inner{ flex-wrap:wrap !important; overflow:visible !important; overflow-x:visible !important; white-space:normal !important; justify-content:center !important; gap:8px 12px !important; padding-left:0 !important; padding-right:0 !important; } .countdown{flex:0 0 100% !important; justify-content:center !important; gap:14px !important; overflow:visible !important} .topbar-pill,.topbar-right{ flex:0 1 auto !important; max-width:100% !important; white-space:normal !important; text-align:center !important; font-size:.72rem !important; line-height:1.3 !important; } /* (2) HEADER — drop the hamburger; bring the two buttons up beside the logo */ .burger{display:none !important} .nav-inner{ height:auto !important; flex-wrap:wrap !important; align-items:center !important; gap:10px 10px !important; padding-top:10px !important; padding-bottom:10px !important; } .brand{flex:0 0 auto !important} .nav-wrap{display:none !important} /* navigation now lives in the pills row below */ .nav-cta{ order:2 !important; margin:0 0 0 auto !important; display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; gap:8px !important; justify-content:flex-end !important; flex:0 1 auto !important; } .nav-cta .btn{ width:auto !important; flex:0 0 auto !important; padding:9px 14px !important; font-size:.8rem !important; white-space:nowrap !important; } /* (3) MENU PILLS — wrap onto as many rows as needed, no side-scroll */ .quicknav-inner{ flex-wrap:wrap !important; overflow:visible !important; overflow-x:visible !important; justify-content:center !important; row-gap:8px !important; } .quicknav-inner a{flex:0 0 auto !important} /* header grew a little (wrapped pills); keep anchor links landing correctly */ html{scroll-padding-top:165px !important} } /* smaller phones — put the two buttons on their own tidy row under the logo */ @media(max-width:480px){ .nav-inner{justify-content:center !important} .nav-cta{width:100% !important; margin:2px 0 0 !important; justify-content:center !important; flex-wrap:nowrap !important} .nav-cta .btn{flex:1 1 0 !important; text-align:center !important; padding:10px 6px !important; font-size:.76rem !important} .topbar-pill,.topbar-right{font-size:.68rem !important} .quicknav-inner a{font-size:.8rem !important; padding:8px 12px !important} html{scroll-padding-top:205px !important} } /* ===================================================================== CLIENT FIX — show the header phone number chip in phone view too (it was hidden on mobile before). Sits next to the logo; the two header buttons wrap below it. ===================================================================== */ @media(max-width:900px){ .nav-phone{ display:inline-flex !important; order:1 !important; flex:0 0 auto !important; margin:0 !important; padding:8px 12px !important; font-size:.8rem !important; white-space:nowrap !important; } .nav-phone span:not(.ic){display:inline !important} /* show the number text, not just the icon */ } @media(max-width:480px){ .nav-phone{font-size:.76rem !important; padding:7px 10px !important} }