/* ============================================================ T2MEP ROBOT — โรงเรียนเทศบาล 2 ชำนาญอนุเคราะห์ Theme: Modern • Premium • Technology • Robotics • Education ============================================================ */ :root { /* Palette */ --navy-950: #030818; --navy-900: #050b1f; --navy-800: #081231; --navy-700: #0c1a45; --navy-600: #12245e; --royal: #2749d6; --royal-soft: #3b5bff; --gold: #f5b301; --gold-light: #ffd76a; --gold-deep: #c98f00; --cyan: #22d3ee; --electric: #3b82f6; --white: #ffffff; --text-main: #e8eefc; --text-dim: #9fb0d8; /* Surfaces */ --glass-bg: rgba(255, 255, 255, 0.055); --glass-bg-strong: rgba(255, 255, 255, 0.09); --glass-border: rgba(255, 255, 255, 0.12); --glass-blur: 18px; /* Effects */ --glow-cyan: 0 0 18px rgba(34, 211, 238, 0.45); --glow-gold: 0 0 18px rgba(245, 179, 1, 0.45); --shadow-soft: 0 18px 50px rgba(2, 6, 23, 0.55); --radius-lg: 1.4rem; --radius-md: 1rem; /* Fonts */ --font-head: 'Kanit', sans-serif; --font-body: 'Prompt', sans-serif; --font-tech: 'Orbitron', 'Kanit', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-body); background: var(--navy-950); color: var(--text-main); /* MUST stay `clip`, not `hidden`. `overflow-x: hidden` forces the computed overflow-y to "auto", and Bootstrap 5.3 ScrollSpy reads exactly that when choosing its IntersectionObserver root: _rootElement = getComputedStyle(el).overflowY === 'visible' ? null : el That handed it as the root — a box that never scrolls, since is the scroller — so no section ever changed intersection and the navbar stayed stuck on the first item. `clip` leaves overflow-y at "visible" (ScrollSpy uses the viewport) while still clipping horizontally. Safari < 16 ignores `clip`; the overflow-x on covers those. */ overflow-x: clip; line-height: 1.75; } ::selection { background: rgba(245, 179, 1, 0.35); color: #fff; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--navy-900); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--royal), var(--cyan)); border-radius: 20px; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); } img { max-width: 100%; } a { text-decoration: none; } /* ============ Utilities ============ */ .text-gold { color: var(--gold) !important; } .text-cyan { color: var(--cyan) !important; } .gradient-text { background: linear-gradient(92deg, var(--gold-light), var(--gold), #fff 55%, var(--cyan), var(--electric)); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientFlow 6s linear infinite; } @keyframes gradientFlow { 0% { background-position: 0% center; } 100% { background-position: 250% center; } } .section-padding { padding: 110px 0; position: relative; } .section-badge { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-head); font-size: .95rem; font-weight: 500; letter-spacing: .14em; color: var(--cyan); background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.35); padding: .45rem 1.35rem; border-radius: 100px; text-transform: uppercase; box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.08); } .section-badge i { font-size: .85rem; } .section-title { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; margin: 1.1rem 0 .6rem; color: #fff; } .section-sub { color: var(--text-dim); max-width: 720px; margin: 0 auto; font-size: 1.05rem; font-weight: 300; } .title-line { width: 96px; height: 4px; margin: 1.2rem auto 0; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--gold), var(--cyan), transparent); position: relative; overflow: hidden; } .title-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); transform: translateX(-100%); animation: shineLine 2.8s ease-in-out infinite; } @keyframes shineLine { 60%, 100% { transform: translateX(100%); } } /* Glass card base */ .glass-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-soft); transition: transform .45s cubic-bezier(.2,.9,.3,1.2), box-shadow .45s ease, border-color .45s ease, background .45s ease; position: relative; overflow: hidden; } .glass-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 42%); pointer-events: none; } .glass-card:hover { transform: translateY(-8px); border-color: rgba(34, 211, 238, 0.45); box-shadow: 0 24px 60px rgba(2, 6, 23, .7), var(--glow-cyan); background: var(--glass-bg-strong); } /* Buttons */ .btn-hero { --btn-grad: linear-gradient(120deg, var(--gold-deep), var(--gold), var(--gold-light)); position: relative; display: inline-flex; align-items: center; gap: .65rem; font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; color: #1a1a05; padding: .95rem 2.4rem; border-radius: 100px; border: none; background: var(--btn-grad); background-size: 180% auto; box-shadow: 0 12px 32px rgba(245, 179, 1, 0.32), inset 0 1px 0 rgba(255,255,255,.55); overflow: hidden; transition: all .4s ease; cursor: pointer; } .btn-hero:hover { background-position: right center; transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 42px rgba(245, 179, 1, 0.45), var(--glow-gold); color: #120f02; } .btn-hero.btn-outline-glow { background: rgba(34, 211, 238, 0.06); border: 1.5px solid rgba(34, 211, 238, 0.65); color: var(--cyan); box-shadow: inset 0 0 22px rgba(34, 211, 238, 0.10); backdrop-filter: blur(8px); } .btn-hero.btn-outline-glow:hover { background: rgba(34, 211, 238, 0.14); color: #fff; box-shadow: var(--glow-cyan), inset 0 0 26px rgba(34, 211, 238, 0.2); } /* Ripple effect */ .ripple-circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: scale(0); animation: rippleAnim .65s ease-out forwards; pointer-events: none; } @keyframes rippleAnim { to { transform: scale(4); opacity: 0; } } /* ============ Preloader ============ */ #preloader { position: fixed; inset: 0; z-index: 10000; background: radial-gradient(circle at 50% 40%, var(--navy-700), var(--navy-950) 75%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; transition: opacity .7s ease, visibility .7s ease; } #preloader.hide { opacity: 0; visibility: hidden; } .loader-ring { position: relative; width: 130px; height: 130px; display: grid; place-items: center; } .loader-ring::before, .loader-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; } .loader-ring::before { border-top-color: var(--gold); border-right-color: var(--gold); animation: spin 1.2s linear infinite; } .loader-ring::after { inset: 12px; border-bottom-color: var(--cyan); border-left-color: var(--cyan); animation: spin 1.6s linear infinite reverse; } .loader-ring img { width: 74px; filter: drop-shadow(0 0 14px rgba(34,211,238,.6)); animation: pulseLogo 1.6s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulseLogo { 50% { transform: scale(1.09); } } .loader-text { font-family: var(--font-tech); letter-spacing: .35em; font-size: .85rem; color: var(--text-dim); animation: blinkText 1.4s ease-in-out infinite; } @keyframes blinkText { 50% { opacity: .35; } } /* ============ Navbar ============ */ .navbar-t2 { padding: .9rem 0; transition: all .45s ease; background: transparent; z-index: 1050; } .navbar-t2.scrolled { background: rgba(5, 11, 31, 0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 34px rgba(2, 6, 23, 0.6); padding: .5rem 0; } .navbar-brand-t2 { display: flex; align-items: center; gap: .75rem; } .navbar-brand-t2 img { height: 54px; filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.5)); transition: transform .4s ease; } .navbar-brand-t2:hover img { transform: rotate(-6deg) scale(1.06); } .brand-name { font-family: var(--font-tech); font-weight: 800; font-size: 1.25rem; line-height: 1.1; background: linear-gradient(90deg, var(--gold-light), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand-school { display: block; font-family: var(--font-head); font-size: .7rem; font-weight: 300; letter-spacing: .05em; color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); } .navbar-t2 .nav-link { font-family: var(--font-head); font-weight: 400; font-size: .98rem; color: var(--text-main); margin: 0 .15rem; padding: .55rem 1rem !important; border-radius: 100px; position: relative; transition: color .3s ease, background .3s ease; } .navbar-t2 .nav-link::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--cyan)); transform: translateX(-50%); transition: width .35s ease; } .navbar-t2 .nav-link:hover, .navbar-t2 .nav-link.active { color: var(--gold-light); } .navbar-t2 .nav-link:hover::after, .navbar-t2 .nav-link.active::after { width: 55%; } .navbar-toggler-t2 { border: 1px solid rgba(255,255,255,.2); border-radius: .7rem; padding: .45rem .7rem; background: var(--glass-bg); color: var(--cyan); font-size: 1.25rem; } .navbar-toggler-t2:focus { box-shadow: 0 0 0 3px rgba(34,211,238,.25); } @media (max-width: 991.98px) { .navbar-collapse-t2 { margin-top: .9rem; background: rgba(8, 18, 49, 0.96); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: .8rem; backdrop-filter: blur(20px); } } /* ============ Mega menu ============ `.nav-link::after` above is the gold underline and wins on specificity, but it only overrode content/width/height — Bootstrap's caret borders survived and drew a stray triangle under the label. Clear them; the chevron is a real . */ .nav-mega .dropdown-toggle::after { border: 0; } .mega-caret { font-size: .58rem; margin-left: .45rem; vertical-align: middle; opacity: .7; transition: transform .3s ease, opacity .3s ease; } .nav-mega .dropdown-toggle[aria-expanded="true"] .mega-caret { transform: rotate(180deg); opacity: 1; } /* HUD eyebrow — a glowing diamond marker plus the section codename */ .mega-eyebrow { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; margin: 0 .35rem .6rem; font-family: var(--font-tech); font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); opacity: .75; } .mega-eyebrow::before { content: ''; width: 6px; height: 6px; flex: 0 0 auto; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 8px var(--cyan); } .mega-eyebrow::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(34, 211, 238, .35), transparent); } .mega-list { position: relative; z-index: 1; display: grid; gap: .15rem; } .mega-link { display: flex; align-items: center; gap: .75rem; padding: .65rem .7rem; border-radius: .85rem; border: 1px solid transparent; background: transparent; white-space: normal; /* Bootstrap sets nowrap on .dropdown-item */ transition: background .3s ease, border-color .3s ease, transform .3s ease; } .mega-link .mi { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; font-size: .95rem; color: var(--cyan); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3); /* clipped corners read as a HUD module rather than a rounded app icon */ clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .35s ease; } .mega-link .mi-gold { color: var(--gold); background: rgba(245, 179, 1, .1); border-color: rgba(245, 179, 1, .32); } .mega-link .mt { display: block; flex: 1 1 auto; min-width: 0; font-family: var(--font-head); font-size: .93rem; font-weight: 500; line-height: 1.35; color: #fff; } .mega-link .mt small { display: block; margin-top: .12rem; font-family: var(--font-body); font-size: .73rem; font-weight: 300; line-height: 1.5; color: var(--text-dim); } /* chevron slides in on hover — the affordance that this row goes somewhere */ .mega-go { flex: 0 0 auto; font-size: .72rem; color: var(--cyan); opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; } .mega-link:hover, .mega-link:focus-visible { background: linear-gradient(90deg, rgba(34, 211, 238, .12), rgba(34, 211, 238, .02)); border-color: rgba(34, 211, 238, .35); color: inherit; } .mega-link:hover .mi, .mega-link:focus-visible .mi { transform: translateY(-1px) scale(1.05); box-shadow: 0 0 16px rgba(34, 211, 238, .35); } .mega-link:hover .mi-gold, .mega-link:focus-visible .mi-gold { box-shadow: 0 0 16px rgba(245, 179, 1, .35); } .mega-link:hover .mt { color: var(--gold-light); } .mega-link:hover .mega-go, .mega-link:focus-visible .mega-go { opacity: 1; transform: translateX(0); } .mega-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* ScrollSpy marks the section you're reading. Keep Bootstrap's default blue for `.dropdown-item.active` out of the panel and use the site's gold instead. */ .mega-menu .dropdown-item.active, .mega-menu .dropdown-item:active { color: inherit; } .mega-link.active { background: rgba(245, 179, 1, .08); border-color: rgba(245, 179, 1, .35); } .mega-link.active .mt { color: var(--gold-light); } .mega-foot { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin: .7rem .35rem 0; padding-top: .7rem; border-top: 1px dashed rgba(255, 255, 255, .12); } .mega-foot--stats { justify-content: space-between; } .mega-foot-label { font-family: var(--font-head); font-size: .74rem; font-weight: 300; color: var(--text-dim); } .mega-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .mega-chip { display: inline-flex; align-items: center; width: auto; padding: .22rem .8rem; border: 1px solid rgba(245, 179, 1, .35); border-radius: 100px; background: rgba(245, 179, 1, .07); font-family: var(--font-head); font-size: .8rem; font-weight: 400; color: var(--gold-light); transition: background .3s ease, color .3s ease, transform .3s ease; } .mega-chip:hover, .mega-chip:focus-visible { background: var(--gold); border-color: var(--gold); color: #191302; transform: translateY(-2px); } /* Every chip points at #courses as well, so ScrollSpy will mark one of them whenever that section is on screen — it must not read as a picked grade. */ .mega-chip.active { background: rgba(245, 179, 1, .07); border-color: rgba(245, 179, 1, .35); color: var(--gold-light); } .mega-stat { font-family: var(--font-head); font-size: .78rem; font-weight: 300; color: var(--text-dim); } .mega-stat strong { font-family: var(--font-tech); font-size: 1rem; font-weight: 700; color: var(--gold); margin-right: .25rem; } @media (min-width: 992px) { /* Panels size to their content and hang off the right edge of their own toggle. Anchoring right is what keeps the last item ("ผลงาน") inside the viewport without any JS edge-detection. */ .nav-mega { position: relative; } .nav-mega .mega-menu { left: auto; right: 0; top: calc(100% + .7rem); width: var(--mega-w, 400px); max-width: calc(100vw - 2rem); margin: 0; padding: .95rem .8rem .8rem; border: 1px solid rgba(34, 211, 238, .22); border-radius: 14px; background: linear-gradient(180deg, rgba(12, 26, 69, .98), rgba(5, 11, 31, .98)); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 26px 60px rgba(2, 6, 23, .75), 0 0 0 1px rgba(34, 211, 238, .05), inset 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden; /* animate in/out — Bootstrap only toggles .show, so keep it laid out */ display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity .28s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2), visibility .28s; } .nav-mega .mega-menu.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .mega-menu--curriculum { --mega-w: 400px; } .mega-menu--results { --mega-w: 372px; } /* faint instrument grid, fading out toward the bottom-left */ .nav-mega .mega-menu::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(34, 211, 238, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, .055) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 85% 75% at 85% 0%, #000, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 85% 75% at 85% 0%, #000, transparent 72%); pointer-events: none; } /* accent sweep along the top edge */ .nav-mega .mega-menu::after { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .8; pointer-events: none; } } @media (max-width: 991.98px) { /* inside the collapsed navbar the panel is a plain indented list */ .nav-mega .mega-menu { position: static; width: 100%; margin: .1rem 0 .35rem; padding: .2rem 0 .2rem .55rem; border: 0; border-left: 2px solid rgba(34, 211, 238, .3); border-radius: 0; background: transparent; box-shadow: none; } .mega-eyebrow { display: none; } .mega-link { padding: .6rem .55rem; } .mega-link .mi { width: 34px; height: 34px; font-size: .88rem; } .mega-link .mt { font-size: .9rem; } .mega-link .mt small { font-size: .72rem; } .mega-go { display: none; } .mega-foot { margin: .5rem .1rem 0; padding-top: .7rem; gap: .45rem .7rem; } .mega-foot--stats { justify-content: flex-start; } } /* ============ Hero ============ */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(ellipse 65% 55% at 18% 8%, rgba(39, 73, 214, 0.35), transparent 60%), radial-gradient(ellipse 55% 45% at 85% 18%, rgba(34, 211, 238, 0.16), transparent 60%), radial-gradient(ellipse 60% 55% at 78% 92%, rgba(245, 179, 1, 0.10), transparent 55%), linear-gradient(160deg, var(--navy-800), var(--navy-950) 65%); padding: 130px 0 90px; } #particles-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* grid overlay */ .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(59, 130, 246, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.055) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 75%); z-index: 0; animation: gridDrift 22s linear infinite; } @keyframes gridDrift { to { background-position: 54px 54px, 54px 54px; } } .hero-content { position: relative; z-index: 5; } .hero-tag { display: inline-flex; align-items: center; gap: .6rem; background: rgba(245, 179, 1, 0.09); border: 1px solid rgba(245, 179, 1, 0.4); color: var(--gold-light); font-family: var(--font-head); font-weight: 400; font-size: .92rem; padding: .5rem 1.4rem; border-radius: 100px; box-shadow: inset 0 0 20px rgba(245, 179, 1, 0.08); } .hero-tag .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: blinkDot 1.6s ease-in-out infinite; } @keyframes blinkDot { 50% { opacity: .3; } } .hero-title { font-family: var(--font-tech); font-size: clamp(2.6rem, 7.5vw, 5.4rem); font-weight: 900; letter-spacing: .02em; line-height: 1.08; margin: 1.3rem 0 .4rem; text-shadow: 0 0 55px rgba(34, 211, 238, 0.35); } .hero-title .t2 { color: #fff; } .hero-subtitle { font-family: var(--font-head); font-size: clamp(1.15rem, 2.6vw, 1.75rem); font-weight: 500; color: var(--text-main); } .hero-motto { font-family: var(--font-tech); font-size: clamp(.95rem, 2vw, 1.2rem); letter-spacing: .3em; color: var(--cyan); text-shadow: var(--glow-cyan); margin-top: .6rem; min-height: 1.8em; } .hero-motto .type-caret { display: inline-block; width: 3px; background: var(--cyan); margin-left: 4px; animation: blinkText 0.9s step-end infinite; } .hero-desc { color: var(--text-dim); max-width: 590px; font-weight: 300; font-size: 1.06rem; margin-top: 1.2rem; } .hero-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; } /* Hero visual — robot emblem */ .hero-visual { position: relative; display: grid; place-items: center; z-index: 5; } .emblem-wrap { position: relative; width: min(430px, 82vw); aspect-ratio: 1; display: grid; place-items: center; } .emblem-wrap img.emblem { width: 76%; height: auto; max-width: 100%; filter: drop-shadow(0 22px 45px rgba(2, 6, 23, .85)) drop-shadow(0 0 32px rgba(34, 211, 238, .35)); position: relative; z-index: 3; } @keyframes floatY { 50% { transform: translateY(-22px); } } /* Emblem intro + idle motion (CSS only, so iOS never leaves it half-tweened) */ @keyframes emblemReveal { from { opacity: 0; transform: scale(.8) translateY(22px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes emblemBreathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.018); } } @keyframes floatYsm { 50% { transform: translateY(-10px); } } /* Small screens lose the 4 chips and the mouse parallax, so the halo and the sweep ring have to carry the motion on their own — they need more amplitude. */ @keyframes emblemGlowStrong { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.14); opacity: 1; } } /* Opacity-only pulse: safe to keep running under prefers-reduced-motion, because it never moves or scales anything. */ @keyframes emblemGlowFade { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } /* Lightning: irregular strike + recharge, so it never looks metronomic. */ @keyframes boltStrike { 0%, 100% { opacity: 0; } 3% { opacity: 1; } 7% { opacity: .12; } 11% { opacity: .9; } 15% { opacity: .3; } 19% { opacity: .75; } 26% { opacity: 0; } } @keyframes boltDraw { 0% { stroke-dashoffset: 120; } 20% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } /* Current running around the emblem ring. */ @keyframes currentRing { 0%, 100% { opacity: .25; box-shadow: 0 0 6px rgba(34, 211, 238, .5) inset; } 8% { opacity: .95; box-shadow: 0 0 20px rgba(34, 211, 238, .95) inset, 0 0 16px rgba(34, 211, 238, .6); } 16% { opacity: .35; box-shadow: 0 0 8px rgba(34, 211, 238, .5) inset; } 24% { opacity: .85; box-shadow: 0 0 18px rgba(245, 179, 1, .85) inset, 0 0 14px rgba(245, 179, 1, .5); } 36% { opacity: .28; box-shadow: 0 0 6px rgba(34, 211, 238, .5) inset; } } .emblem-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(39, 73, 214, 0.5), rgba(34, 211, 238, 0.12) 55%, transparent 72%); filter: blur(12px); animation: emblemGlow 8s ease-in-out infinite; will-change: transform, opacity; } @keyframes emblemGlow { 50% { transform: scale(1.055); opacity: .82; } } @keyframes pulseGlow { 50% { transform: scale(1.12); opacity: .75; } } .orbit-ring { position: absolute; border: 1.5px dashed rgba(34, 211, 238, 0.35); border-radius: 50%; animation: spin 48s linear infinite; will-change: transform; } .orbit-ring.r1 { inset: 0; } .orbit-ring.r2 { inset: 8%; border-color: rgba(245, 179, 1, 0.3); animation-duration: 64s; animation-direction: reverse; } .orbit-ring .orbit-node { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .55rem; color: var(--navy-900); background: var(--cyan); box-shadow: 0 0 14px var(--cyan); } .orbit-ring.r2 .orbit-node { background: var(--gold); box-shadow: 0 0 14px var(--gold); } /* Electric arcs around the emblem. Hard off everywhere by default — only the phone media query turns it on, so tablet/desktop rendering is byte-for-byte unchanged. */ .emblem-spark { display: none; } /* floating tech chips around emblem */ .float-chip { position: absolute; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-size: .82rem; font-weight: 400; color: var(--text-main); background: rgba(8, 18, 49, 0.75); border: 1px solid var(--glass-border); padding: .5rem 1rem; border-radius: 100px; backdrop-filter: blur(10px); box-shadow: var(--shadow-soft); z-index: 6; animation: floatY 6s ease-in-out infinite; white-space: nowrap; } .float-chip i { color: var(--gold); } .float-chip.c1 { top: 8%; left: -4%; animation-delay: .4s; } .float-chip.c2 { bottom: 16%; left: -10%; animation-delay: 1.3s; } .float-chip.c3 { top: 22%; right: -7%; animation-delay: .9s; } .float-chip.c4 { bottom: 4%; right: 2%; animation-delay: 1.8s; } .float-chip.c2 i, .float-chip.c4 i { color: var(--cyan); } /* floating shapes (gears / bolts) */ .floating-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .floating-shapes i { position: absolute; color: rgba(59, 130, 246, 0.16); animation: floatShape 12s ease-in-out infinite; } .floating-shapes i:nth-child(1) { top: 16%; left: 6%; font-size: 3.4rem; animation-duration: 13s; } .floating-shapes i:nth-child(2) { top: 66%; left: 12%; font-size: 2.1rem; color: rgba(245,179,1,.14); animation-duration: 10s; animation-delay: 1s; } .floating-shapes i:nth-child(3) { top: 24%; right: 8%; font-size: 2.7rem; color: rgba(34,211,238,.15); animation-duration: 15s; } .floating-shapes i:nth-child(4) { bottom: 12%; right: 20%; font-size: 3rem; animation-duration: 12s; animation-delay: 2s; } .floating-shapes i:nth-child(5) { bottom: 28%; left: 44%; font-size: 1.9rem; color: rgba(245,179,1,.12); animation-duration: 9s; } @keyframes floatShape { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-34px) rotate(160deg); } } /* scroll indicator */ .scroll-indicator { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--text-dim); font-size: .75rem; font-family: var(--font-head); letter-spacing: .2em; } .mouse-icon { width: 26px; height: 42px; border: 2px solid rgba(159, 176, 216, 0.6); border-radius: 20px; display: flex; justify-content: center; padding-top: 7px; } .mouse-icon span { width: 4px; height: 9px; border-radius: 4px; background: var(--cyan); animation: wheelMove 1.6s ease-in-out infinite; } @keyframes wheelMove { 50% { transform: translateY(9px); opacity: .3; } } /* The stats strip is pulled up over the hero, so its first row of cards lands *inside* the hero's bottom edge — and .stats-strip (z-index: 10) paints over the cue (z-index: 6). Lift the cue clear of that band at each breakpoint. Card top above hero bottom = |strip margin-top| - row gutter-y: >=992px : 68 - 24 = 44px -> bottom 64px leaves 20px of clearance 768-991 : 40 - 16 = 24px -> bottom 44px leaves 20px of clearance Below 768px the strip only rises 8px, so the mobile bottom: 12px is already safe. */ @media (min-width: 992px) { .scroll-indicator { bottom: 64px; } } @media (min-width: 768px) and (max-width: 991.98px) { .scroll-indicator { bottom: 44px; } } /* ============ Stats strip ============ */ .stats-strip { position: relative; z-index: 10; margin-top: -68px; } .stats-card { border-radius: var(--radius-lg); padding: 1.9rem 1.2rem; text-align: center; height: 100%; } .stats-card .icon-wrap { width: 62px; height: 62px; margin: 0 auto 0.9rem; border-radius: 1.1rem; display: grid; place-items: center; font-size: 1.5rem; color: var(--gold-light); background: linear-gradient(140deg, rgba(245,179,1,.16), rgba(39,73,214,.2)); border: 1px solid rgba(245, 179, 1, 0.3); box-shadow: inset 0 0 18px rgba(245, 179, 1, 0.12); } .stats-card h3 { font-family: var(--font-tech); font-size: 2.3rem; font-weight: 800; color: #fff; text-shadow: 0 0 24px rgba(34, 211, 238, 0.4); } .stats-card h3 .plus { color: var(--gold); } .stats-card p { color: var(--text-dim); font-family: var(--font-head); font-weight: 300; margin: 0; font-size: .95rem; } /* ============ Section backgrounds ============ */ .bg-deep { background: radial-gradient(ellipse 50% 40% at 88% 12%, rgba(39, 73, 214, 0.16), transparent 60%), radial-gradient(ellipse 45% 38% at 8% 85%, rgba(34, 211, 238, 0.07), transparent 60%), var(--navy-950); } .bg-deep-alt { background: radial-gradient(ellipse 55% 45% at 10% 15%, rgba(39, 73, 214, 0.18), transparent 60%), radial-gradient(ellipse 45% 40% at 92% 80%, rgba(245, 179, 1, 0.07), transparent 55%), var(--navy-900); } /* ============ About ============ */ .about-frame { position: relative; border-radius: var(--radius-lg); overflow: visible; } .about-frame .main-img { border-radius: var(--radius-lg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); width: 100%; object-fit: cover; } .about-frame::before { content: ''; position: absolute; inset: -16px 16px 16px -16px; border: 2px solid rgba(245, 179, 1, 0.35); border-radius: var(--radius-lg); z-index: -1; animation: borderPulse 4s ease-in-out infinite; } @keyframes borderPulse { 50% { border-color: rgba(34, 211, 238, 0.4); } } .about-frame .sub-img { position: absolute; width: 46%; right: -6%; bottom: -14%; border-radius: var(--radius-md); border: 4px solid var(--navy-800); box-shadow: var(--shadow-soft), var(--glow-cyan); animation: floatY 6s ease-in-out infinite; } .exp-badge { position: absolute; top: -24px; right: 6%; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #141001; font-family: var(--font-head); border-radius: 1.1rem; padding: .8rem 1.3rem; text-align: center; box-shadow: 0 14px 36px rgba(245, 179, 1, 0.35); z-index: 5; animation: floatY 5s ease-in-out infinite reverse; } .exp-badge strong { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1.1; } .exp-badge span { font-size: .78rem; font-weight: 500; } .about-feature { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem 1.25rem; border-radius: var(--radius-md); margin-bottom: .95rem; } .about-feature:hover { transform: translateX(8px) translateY(0); } .about-feature .ic { flex: 0 0 52px; width: 52px; height: 52px; border-radius: .95rem; display: grid; place-items: center; font-size: 1.25rem; color: var(--cyan); background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.3); } .about-feature h5 { font-size: 1.08rem; font-weight: 600; color: #fff; margin-bottom: .2rem; } .about-feature p { color: var(--text-dim); font-size: .93rem; margin: 0; font-weight: 300; } /* ============ Curriculum ============ */ .course-card { position: relative; padding: 2rem 1.7rem; height: 100%; border-radius: var(--radius-lg); } .course-step { position: absolute; top: 1rem; right: 1.25rem; display: inline-flex; align-items: center; min-height: 28px; padding: .18rem .7rem; border: 1px solid rgba(34, 211, 238, .3); border-radius: 100px; color: var(--cyan); background: rgba(34, 211, 238, .08); font-family: var(--font-head); font-size: .74rem; font-weight: 400; } .course-card .course-icon { width: 72px; height: 72px; border-radius: 1.25rem; display: grid; place-items: center; font-size: 1.85rem; margin-bottom: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--royal), var(--electric)); box-shadow: 0 12px 28px rgba(39, 73, 214, 0.45); position: relative; transition: transform .5s cubic-bezier(.2,.9,.3,1.4); } .course-card:hover .course-icon { transform: rotateY(360deg) scale(1.05); } .course-card:nth-child(odd) .course-icon {} .course-icon.gold { background: linear-gradient(135deg, var(--gold-deep), var(--gold)); box-shadow: 0 12px 28px rgba(245, 179, 1, 0.4); color: #191302; } .course-icon.cyan { background: linear-gradient(135deg, #0891b2, var(--cyan)); box-shadow: 0 12px 28px rgba(34, 211, 238, 0.4); color: #052a31; } .course-card h4 { font-size: 1.22rem; font-weight: 600; color: #fff; } .course-card .en { display: block; font-family: var(--font-tech); font-size: .72rem; letter-spacing: .18em; color: var(--cyan); margin-bottom: .7rem; text-transform: uppercase; } .course-card p { color: var(--text-dim); font-size: .94rem; font-weight: 300; margin-bottom: 1rem; } .course-tags { display: flex; flex-wrap: wrap; gap: .45rem; } .course-tags span { font-size: .74rem; font-family: var(--font-head); font-weight: 300; color: var(--gold-light); border: 1px solid rgba(245, 179, 1, 0.35); background: rgba(245, 179, 1, 0.07); border-radius: 100px; padding: .18rem .75rem; } /* ============ Curriculum by grade (ป.1–ป.6) ============ */ /* Learning path strip — the six-year arc in one glance, above the tabs. */ .grade-path { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.75rem; } .grade-path-step { flex: 1 1 150px; max-width: 200px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.05rem .7rem; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); transition: transform .4s cubic-bezier(.2, .9, .3, 1.2), border-color .4s ease; } .grade-path-step:hover { transform: translateY(-5px); border-color: rgba(34, 211, 238, .45); } .grade-path-step .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: .8rem; font-size: 1.02rem; color: var(--cyan); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3); } .grade-path-step strong { font-family: var(--font-head); font-size: .92rem; font-weight: 500; color: #fff; line-height: 1.35; } .grade-path-step small { font-family: var(--font-tech); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); } .grade-path-arrow { display: flex; align-items: center; color: rgba(159, 176, 216, .45); font-size: .8rem; } /* Tab rail — one button per grade. */ .grade-tab-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 2rem; padding: 0; list-style: none; } .grade-tab-nav .nav-item { flex: 0 1 auto; } .grade-tab { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 96px; padding: .6rem 1.15rem; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--glass-bg); color: var(--text-dim); cursor: pointer; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), border-color .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease; } .grade-tab .g { font-family: var(--font-head); font-size: 1.14rem; font-weight: 600; line-height: 1.2; } .grade-tab .c { font-family: var(--font-tech); font-size: .58rem; letter-spacing: .08em; opacity: .75; } .grade-tab:hover { color: var(--text-main); border-color: rgba(34, 211, 238, .45); background: var(--glass-bg-strong); transform: translateY(-3px); } .grade-tab.active { color: #051021; border-color: transparent; background: linear-gradient(135deg, var(--gold), var(--gold-light)); box-shadow: 0 12px 26px rgba(245, 179, 1, .3); } .grade-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } /* Grade detail panel */ .grade-panel { --g-accent: var(--cyan); --g-accent-soft: rgba(34, 211, 238, .14); position: relative; padding: 2rem 1.8rem; border-radius: var(--radius-lg); overflow: hidden; } .grade-panel--cyan { --g-accent: var(--cyan); --g-accent-soft: rgba(34, 211, 238, .14); } .grade-panel--blue { --g-accent: var(--royal-soft); --g-accent-soft: rgba(59, 91, 255, .16); } .grade-panel--gold { --g-accent: var(--gold); --g-accent-soft: rgba(245, 179, 1, .14); } .grade-panel--purple { --g-accent: #a78bfa; --g-accent-soft: rgba(167, 139, 250, .16); } .grade-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--g-accent), transparent); opacity: .85; } .grade-panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 1.1rem; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px dashed rgba(255, 255, 255, .12); } .grade-icon { flex: 0 0 auto; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 1.2rem; font-size: 1.65rem; color: var(--g-accent); background: var(--g-accent-soft); border: 1px solid var(--g-accent); } .grade-head-text { flex: 1 1 260px; min-width: 0; } .grade-head-text .code { display: block; font-family: var(--font-tech); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--g-accent); margin-bottom: .2rem; } .grade-head-text h3 { font-size: 1.42rem; font-weight: 600; color: #fff; margin: 0; } .grade-head-text .focus { margin: .3rem 0 0; font-size: .87rem; font-weight: 300; color: var(--text-dim); } .grade-head-text .focus i { color: var(--g-accent); margin-right: .35rem; font-size: .8rem; } .grade-meta { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: .45rem; } .grade-meta span { display: inline-flex; align-items: center; gap: .38rem; padding: .3rem .8rem; border: 1px solid var(--glass-border); border-radius: 100px; background: rgba(255, 255, 255, .04); font-family: var(--font-head); font-size: .74rem; font-weight: 300; white-space: nowrap; color: var(--text-main); } .grade-meta i { color: var(--g-accent); font-size: .72rem; } .grade-summary { color: var(--text-main); font-size: .98rem; font-weight: 300; margin-bottom: 1.6rem; } .grade-blocks { margin-bottom: .3rem; } .grade-block { height: 100%; padding: 1.15rem 1.15rem 1rem; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: rgba(255, 255, 255, .035); } .grade-block h5 { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 500; color: #fff; margin-bottom: .85rem; } .grade-block .bi { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: .7rem; font-size: .82rem; color: var(--cyan); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3); } .grade-block--robot .bi { color: var(--gold); background: rgba(245, 179, 1, .1); border-color: rgba(245, 179, 1, .32); } .grade-block ul { list-style: none; margin: 0; padding: 0; } .grade-block li { position: relative; padding-left: 1.35rem; margin-bottom: .6rem; color: var(--text-dim); font-size: .89rem; font-weight: 300; line-height: 1.72; } .grade-block li:last-child { margin-bottom: 0; } .grade-block li::before { content: '\f058'; /* fa-circle-check */ font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: .38rem; font-size: .78rem; line-height: 1; color: var(--g-accent); opacity: .8; } .grade-tags { margin-top: 1.5rem; } .grade-note { margin: 2.25rem auto 0; max-width: 900px; text-align: center; color: var(--text-dim); font-size: .89rem; font-weight: 300; } .grade-note i { color: var(--cyan); margin-right: .35rem; } .grade-note strong { color: var(--text-main); font-weight: 400; } @media (max-width: 991.98px) { .grade-path-arrow { display: none; } .grade-path-step { flex: 1 1 118px; padding: .85rem .5rem; } .grade-panel-head { gap: .85rem; } .grade-panel { padding: 1.5rem 1.15rem; } } @media (max-width: 575.98px) { /* 6 grades land as an even 3 x 2 grid instead of a ragged wrap */ .grade-tab-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; } .grade-tab { min-width: 0; width: 100%; padding: .55rem .5rem; } .grade-tab .g { font-size: 1.05rem; } .grade-icon { width: 54px; height: 54px; font-size: 1.35rem; } .grade-head-text h3 { font-size: 1.2rem; } /* 5 steps wrap 3 + 2; a fixed basis keeps the short last row the same size */ .grade-path-step { flex: 0 1 30%; max-width: 30%; } } /* ============ Teacher ============ */ .person-card { border-radius: var(--radius-lg); overflow: hidden; text-align: center; padding: 2.4rem 1.8rem 2rem; height: 100%; } .person-avatar { position: relative; width: 180px; height: 230px; margin: 0 auto 1.4rem; } .person-avatar .av { width: 100%; height: 100%; border-radius: 1.35rem 1.35rem 4.6rem 4.6rem; display: grid; place-items: center; font-size: 3.2rem; color: var(--gold-light); background: #f7f8fb; border: 2px solid rgba(245, 179, 1, 0.45); box-shadow: inset 0 0 30px rgba(245, 179, 1, 0.12), var(--shadow-soft); overflow: hidden; } .person-avatar .av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .person-avatar::after { content: ''; position: absolute; inset: -9px; border-radius: 1.55rem 1.55rem 4.9rem 4.9rem; border: 2px dashed rgba(34, 211, 238, 0.45); animation: spin 16s linear infinite; } .person-card h4 { color: #fff; font-weight: 600; font-size: 1.25rem; margin-bottom: .1rem; } .person-card .role { color: var(--gold); font-family: var(--font-head); font-weight: 400; font-size: .95rem; } .person-card p.bio { color: var(--text-dim); font-size: .92rem; font-weight: 300; margin-top: .8rem; } .person-card .tag-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; } .person-card .tag-row span { font-size: .74rem; color: var(--cyan); border: 1px solid rgba(34, 211, 238, 0.35); background: rgba(34, 211, 238, 0.07); border-radius: 100px; padding: .2rem .8rem; font-weight: 300; } /* Student chips */ .student-chip { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.25rem; border-radius: var(--radius-md); height: 100%; } .student-chip .no { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-tech); font-weight: 800; color: #141001; background: linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow: 0 8px 20px rgba(245, 179, 1, 0.35); } .student-chip .pic { flex: 0 0 46px; width: 46px; height: 46px; overflow: hidden; border: 2px solid rgba(34, 211, 238, .45); border-radius: 50%; background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); box-shadow: 0 8px 20px rgba(34, 211, 238, .2); } .student-chip .pic img { display: block; width: 100%; height: 100%; object-fit: cover; } .student-chip h6 { margin: 0; color: #fff; font-weight: 500; font-size: 1rem; } .student-chip small { color: var(--text-dim); font-weight: 300; } /* ============ Simulator Lab ============ */ .simulator-section { background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(34, 211, 238, .10), transparent 62%), radial-gradient(ellipse 50% 40% at 12% 90%, rgba(245, 179, 1, .07), transparent 58%), var(--navy-950); } /* faint grid so the section reads as a "lab" without stealing attention */ .simulator-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%); pointer-events: none; } .simulator-section > .container { position: relative; z-index: 1; } /* The whole card is the link — a bigger, easier tap target for students. */ .simulator-card { --sim-accent: var(--cyan); --sim-accent-soft: rgba(34, 211, 238, .16); position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.6rem 1.45rem 1.4rem; color: var(--text-main); text-decoration: none; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-soft); overflow: hidden; transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), box-shadow .45s ease, border-color .45s ease, background .45s ease; } .simulator-card--gold { --sim-accent: var(--gold); --sim-accent-soft: rgba(245, 179, 1, .16); } .simulator-card--cyan { --sim-accent: var(--cyan); --sim-accent-soft: rgba(34, 211, 238, .16); } .simulator-card--blue { --sim-accent: var(--royal-soft); --sim-accent-soft: rgba(59, 91, 255, .18); } .simulator-card--purple { --sim-accent: #a78bfa; --sim-accent-soft: rgba(167, 139, 250, .18); } /* accent bar along the top edge */ .simulator-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--sim-accent), transparent); opacity: .75; transition: opacity .4s ease; } /* accent glow that blooms from the top-left on hover */ .simulator-card::after { content: ''; position: absolute; top: -40%; left: -30%; width: 90%; height: 90%; border-radius: 50%; background: radial-gradient(circle, var(--sim-accent-soft), transparent 68%); opacity: 0; transition: opacity .45s ease; pointer-events: none; } .simulator-card:hover, .simulator-card:focus-visible { transform: translateY(-10px); border-color: var(--sim-accent); background: var(--glass-bg-strong); box-shadow: 0 26px 60px rgba(2, 6, 23, .72); color: var(--text-main); } .simulator-card:hover::before, .simulator-card:focus-visible::before { opacity: 1; } .simulator-card:hover::after, .simulator-card:focus-visible::after { opacity: 1; } .simulator-card:focus-visible { outline: 2px solid var(--sim-accent); outline-offset: 3px; } .simulator-card-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1.1rem; } .simulator-number { font-family: var(--font-tech); font-size: 1.65rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--sim-accent); opacity: .65; } .simulator-level { padding: .28rem .75rem; border: 1px solid var(--sim-accent); border-radius: 100px; font-family: var(--font-head); font-size: .68rem; font-weight: 400; white-space: nowrap; color: var(--sim-accent); background: var(--sim-accent-soft); } .simulator-icon { position: relative; z-index: 1; width: 58px; height: 58px; margin-bottom: 1rem; display: grid; place-items: center; border-radius: 1.05rem; font-size: 1.5rem; color: var(--sim-accent); background: var(--sim-accent-soft); border: 1px solid var(--sim-accent); transition: transform .45s cubic-bezier(.2, .9, .3, 1.2); } .simulator-card:hover .simulator-icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); } .simulator-card h3 { position: relative; z-index: 1; margin: 0; font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: #fff; } .simulator-subtitle { position: relative; z-index: 1; margin: .3rem 0 0; font-size: .84rem; font-weight: 400; line-height: 1.5; color: var(--sim-accent); } .simulator-desc { position: relative; z-index: 1; margin: .8rem 0 1.1rem; font-size: .87rem; font-weight: 300; line-height: 1.7; color: var(--text-dim); } .simulator-domain { position: relative; z-index: 1; display: flex; align-items: center; gap: .45rem; margin-top: auto; /* pin the footer of every card to the same line */ padding-top: .9rem; border-top: 1px dashed rgba(255, 255, 255, .12); font-family: var(--font-tech); font-size: .68rem; letter-spacing: .02em; color: var(--text-dim); word-break: break-all; } .simulator-domain i { color: var(--sim-accent); font-size: .75rem; } .simulator-launch { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .9rem; padding: .68rem 1rem; border-radius: .85rem; border: 1px solid var(--sim-accent); font-family: var(--font-head); font-size: .88rem; font-weight: 500; color: var(--sim-accent); background: var(--sim-accent-soft); transition: background .35s ease, color .35s ease, box-shadow .35s ease; } .simulator-launch i { font-size: .78rem; transition: transform .35s ease; } .simulator-card:hover .simulator-launch, .simulator-card:focus-visible .simulator-launch { color: var(--navy-950); background: var(--sim-accent); box-shadow: 0 0 22px var(--sim-accent-soft); } .simulator-card:hover .simulator-launch i { transform: translate(2px, -2px); } /* ============ Classroom / Robots ============ */ .robot-group-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; padding: 1.15rem 1.35rem; border-left: 3px solid var(--gold); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: linear-gradient(100deg, rgba(39, 73, 214, .2), rgba(34, 211, 238, .04)); } .g-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: .2rem .8rem; border: 1px solid rgba(245, 179, 1, .35); border-radius: 100px; color: var(--gold-light); background: rgba(245, 179, 1, .1); font-family: var(--font-head); font-size: .8rem; white-space: nowrap; } .robot-group-head h4 { margin: 0; color: #fff; font-size: 1.25rem; font-weight: 600; } .robot-group-head .en { margin-left: .45rem; color: var(--cyan); font-family: var(--font-tech); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .robot-group-head p { margin: .35rem 0 0; color: var(--text-dim); font-size: .92rem; font-weight: 300; } .robot-show-card { border-radius: var(--radius-lg); overflow: hidden; height: 100%; } .robot-show-card .img-wrap { position: relative; overflow: hidden; aspect-ratio: 16 / 10; isolation: isolate; background: radial-gradient(circle at 50% 40%, rgba(39,73,214,.3), rgba(3,8,24,.65)); } .robot-show-card .img-wrap img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .robot-show-card:hover .img-wrap img { transform: scale(1.09) rotate(1deg); } .robot-show-card .img-wrap.contain { background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(226,232,240,.92)); } .robot-show-card .img-wrap.contain img { object-fit: contain; padding: 1.1rem; } .robot-image-fallback { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; gap: .55rem; width: 100%; height: 100%; min-height: 190px; color: var(--text-dim); background: radial-gradient(circle at 50% 35%, rgba(34, 211, 238, .18), transparent 55%), linear-gradient(135deg, var(--navy-700), var(--navy-950)); font-family: var(--font-head); font-size: .82rem; text-align: center; } .robot-image-fallback i { color: var(--cyan); font-size: 3rem; filter: drop-shadow(0 0 14px rgba(34, 211, 238, .45)); } .robot-show-card .img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3, 8, 24, 0.75), transparent 55%); } .robot-show-card .body { padding: 1.5rem 1.6rem 1.7rem; } .robot-show-card .body h4 { color: #fff; font-size: 1.2rem; font-weight: 600; } .robot-show-card .body .en { font-family: var(--font-tech); font-size: .7rem; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; } .robot-show-card .body p { color: var(--text-dim); font-size: .93rem; font-weight: 300; margin: .6rem 0 0; } .robot-card-link { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; margin-top: 1rem; padding: .42rem .78rem; border: 1px solid rgba(34, 211, 238, .35); border-radius: 100px; color: var(--cyan); background: rgba(34, 211, 238, .08); font-family: var(--font-head); font-size: .78rem; font-weight: 400; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; } .robot-card-link:hover { color: var(--navy-950); border-color: var(--cyan); background: var(--cyan); transform: translateY(-2px); } .lab-point { display: flex; align-items: center; gap: .8rem; color: var(--text-main); font-weight: 300; padding: .55rem 0; } .lab-point i { color: var(--gold); width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; background: rgba(245, 179, 1, 0.1); border: 1px solid rgba(245, 179, 1, 0.3); border-radius: .55rem; font-size: .8rem; } /* ============ Gallery / Swiper ============ */ .gallery-swiper { padding: 1.5rem .3rem 3.4rem; } .gallery-item { display: block; position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; background: var(--navy-800); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .5s ease; } .gallery-item::after { content: '\f00e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.7rem; color: #fff; background: linear-gradient(to top, rgba(5, 11, 31, 0.75), rgba(34, 211, 238, 0.18)); opacity: 0; transition: opacity .45s ease; } .gallery-item:hover img { transform: scale(1.12); filter: saturate(1.15); } .gallery-item:hover::after { opacity: 1; } .swiper-pagination-bullet { background: var(--text-dim); opacity: .55; } .swiper-pagination-bullet-active { background: var(--gold); opacity: 1; box-shadow: 0 0 10px var(--gold); } .swiper-button-next, .swiper-button-prev { width: 46px; height: 46px; border-radius: 50%; background: rgba(8, 18, 49, 0.8); border: 1px solid rgba(34, 211, 238, 0.4); backdrop-filter: blur(8px); color: var(--cyan); transition: all .3s ease; } .swiper-button-next:hover, .swiper-button-prev:hover { background: rgba(34, 211, 238, 0.16); box-shadow: var(--glow-cyan); } .swiper-button-next::after, .swiper-button-prev::after { font-size: 1rem; font-weight: 800; } /* ============ Awards ============ */ .award-timeline { position: relative; } .award-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--royal) 12%, var(--cyan) 55%, var(--gold) 90%, transparent); border-radius: 3px; opacity: .55; } .award-node { position: relative; margin-bottom: 4.2rem; } .award-node .node-dot { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; color: #191302; background: linear-gradient(140deg, var(--gold-light), var(--gold-deep)); border: 3px solid var(--navy-950); box-shadow: 0 0 0 4px rgba(245, 179, 1, 0.25), var(--glow-gold); z-index: 5; animation: pulseGlow 3.6s ease-in-out infinite; } .award-card { border-radius: var(--radius-lg); overflow: hidden; } .award-card .cover { position: relative; aspect-ratio: 16 / 8.2; overflow: hidden; background: linear-gradient(110deg, rgba(255,255,255,.04) 8%, rgba(255,255,255,.1) 18%, rgba(255,255,255,.04) 33%), var(--navy-800); background-size: 220% 100%; animation: awardShimmer 1.8s linear infinite; } .award-card .cover img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .35s ease, transform .8s ease; } .award-card .cover img.is-loaded { opacity: 1; } .award-card .cover:has(img.is-loaded) { animation: none; } .award-card:hover .cover img { transform: scale(1.07); } .award-card .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3, 8, 24, 0.92) 8%, rgba(3, 8, 24, 0.18) 60%); } .award-card .cover .comp-no { position: absolute; top: 16px; left: 16px; z-index: 3; font-family: var(--font-head); font-size: .8rem; font-weight: 500; color: #0d1b02; background: linear-gradient(120deg, var(--gold-light), var(--gold)); padding: .3rem 1rem; border-radius: 100px; box-shadow: 0 8px 18px rgba(245, 179, 1, 0.4); } .award-card .cover .comp-title { position: absolute; left: 22px; right: 22px; bottom: 16px; z-index: 3; } .award-card .cover .comp-title h4 { color: #fff; font-weight: 700; font-size: 1.3rem; text-shadow: 0 4px 18px rgba(0,0,0,.7); margin: 0; } .award-card .cover .comp-title small { color: var(--gold-light); font-family: var(--font-head); font-weight: 300; font-size: .85rem; } .award-card .body { padding: 1.6rem 1.7rem 1.8rem; } .award-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; color: var(--text-dim); font-size: .86rem; font-weight: 300; margin-bottom: 1.1rem; } .award-meta i { color: var(--cyan); margin-right: .4rem; } .prize-row { display: flex; gap: 1rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: .7rem; transition: all .35s ease; } .prize-row:hover { border-color: rgba(245, 179, 1, 0.45); background: rgba(245, 179, 1, 0.05); transform: translateX(6px); } .prize-row .trophy { flex: 0 0 44px; width: 44px; height: 44px; border-radius: .8rem; display: grid; place-items: center; font-size: 1.15rem; } .prize-row .trophy.royal { color: #2b1f00; background: linear-gradient(140deg, var(--gold-light), var(--gold-deep)); box-shadow: 0 8px 18px rgba(245, 179, 1, 0.35); } .prize-row .trophy.honor { color: #04222a; background: linear-gradient(140deg, #7fe9fb, #0891b2); box-shadow: 0 8px 18px rgba(34, 211, 238, 0.3); } /* 'rank' = ลงแข่งแต่ไม่ได้ถ้วย — เงียบกว่าเดิม ไม่ใช้ทองหรือแสงถ้วย เพื่อไม่ให้สนามที่ได้ถ้วยพระราชทานดูด้อยค่าลง */ .prize-row .trophy.rank { color: var(--cyan); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3); box-shadow: none; } .prize-row--rank:hover { border-color: rgba(34, 211, 238, .4); background: rgba(34, 211, 238, .05); } .prize-row--rank h6 { font-weight: 500; } .prize-row--rank h6 .cup { color: var(--cyan); border-color: rgba(34, 211, 238, .4); } .prize-row h6 { margin: 0; color: #fff; font-weight: 600; font-size: 1rem; } .prize-row h6 .cup { font-size: .74rem; font-weight: 400; color: var(--gold-light); border: 1px solid rgba(245, 179, 1, 0.4); border-radius: 100px; padding: .06rem .6rem; margin-left: .45rem; white-space: nowrap; display: inline-block; vertical-align: 2px; } .prize-row .ev { color: var(--cyan); font-size: .84rem; font-weight: 300; display: block; } .prize-row .members { color: var(--text-dim); font-size: .82rem; font-weight: 300; margin: 0; } .prize-row .members i { font-size: .68rem; margin-right: .35rem; color: var(--gold); } /* ============ Facebook page CTA ============ Facebook blue is used only as an accent glow so the strip still reads as part of the site's own palette rather than a pasted-in social widget. */ .fb-cta { --fb: #1877f2; position: relative; display: flex; align-items: center; gap: 1.1rem; margin-top: 2.25rem; padding: 1.15rem 1.35rem; border: 1px solid rgba(24, 119, 242, .35); border-radius: var(--radius-lg); background: radial-gradient(ellipse 55% 130% at 8% 50%, rgba(24, 119, 242, .18), transparent 65%), var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-soft); overflow: hidden; transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), border-color .4s ease, box-shadow .4s ease; } .fb-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--fb), var(--cyan), transparent); opacity: .7; transition: opacity .4s ease; } .fb-cta:hover, .fb-cta:focus-visible { transform: translateY(-5px); border-color: var(--fb); box-shadow: 0 26px 60px rgba(2, 6, 23, .7), 0 0 30px rgba(24, 119, 242, .2); } .fb-cta:hover::before { opacity: 1; } .fb-cta:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } .fb-cta-ic { flex: 0 0 auto; width: 54px; height: 54px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: linear-gradient(140deg, #4293ff, var(--fb)); box-shadow: 0 10px 24px rgba(24, 119, 242, .4); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: transform .45s cubic-bezier(.2, .9, .3, 1.2); } .fb-cta:hover .fb-cta-ic { transform: translateY(-2px) scale(1.06); } .fb-cta-text { flex: 1 1 auto; min-width: 0; } .fb-cta-text strong { display: block; font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; color: #fff; line-height: 1.4; } .fb-cta-text small { display: block; margin-top: .15rem; font-size: .85rem; font-weight: 300; line-height: 1.55; color: var(--text-dim); } .fb-cta-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.15rem; border: 1px solid rgba(24, 119, 242, .5); border-radius: 100px; background: rgba(24, 119, 242, .12); font-family: var(--font-head); font-size: .88rem; font-weight: 400; white-space: nowrap; color: #cfe2ff; transition: background .35s ease, color .35s ease; } .fb-cta:hover .fb-cta-go { background: var(--fb); color: #fff; } .fb-cta-go i { font-size: .78rem; } @media (max-width: 767.98px) { .fb-cta { flex-wrap: wrap; gap: .85rem; padding: 1rem; } .fb-cta-ic { width: 46px; height: 46px; font-size: 1.15rem; } .fb-cta-text { flex: 1 1 60%; } .fb-cta-text strong { font-size: .96rem; } .fb-cta-go { width: 100%; justify-content: center; } } /* footer variant — same link, quieter treatment */ .footer-fb { display: inline-flex; align-items: center; gap: .7rem; margin-top: .35rem; padding: .55rem .9rem .55rem .6rem; border: 1px solid rgba(24, 119, 242, .35); border-radius: 100px; background: rgba(24, 119, 242, .1); transition: background .35s ease, border-color .35s ease, transform .35s ease; } .footer-fb i { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: .85rem; color: #fff; background: linear-gradient(140deg, #4293ff, #1877f2); } .footer-fb span { font-family: var(--font-head); font-size: .88rem; font-weight: 400; line-height: 1.3; color: var(--text-main); } .footer-fb small { display: block; font-size: .72rem; font-weight: 300; color: var(--text-dim); } .footer-fb:hover { background: rgba(24, 119, 242, .2); border-color: #1877f2; transform: translateY(-2px); } .award-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: 1.2rem; } .award-thumbs .gallery-item { aspect-ratio: 1; border-radius: .8rem; background: linear-gradient(110deg, rgba(255,255,255,.04) 8%, rgba(255,255,255,.1) 18%, rgba(255,255,255,.04) 33%), var(--navy-800); background-size: 220% 100%; animation: awardShimmer 1.8s linear infinite; } .award-thumbs .gallery-item img { opacity: .72; transition: opacity .35s ease, transform .75s cubic-bezier(.2,.8,.2,1), filter .5s ease; } .award-thumbs .gallery-item:has(img.is-loaded) { animation: none; } .award-thumbs .gallery-item img.is-loaded { opacity: 1; } .award-thumbs .gallery-item.more-link::before { content: attr(data-more); position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(5, 11, 31, 0.72); color: var(--gold-light); font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; backdrop-filter: blur(3px); } @keyframes awardShimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } } /* AOS reveals the card before it reaches the viewport, so scrolling never catches up with it. */ .award-col[data-aos] { transition-duration: .46s !important; } /* honor board */ .honor-strip { border-radius: var(--radius-lg); padding: 2.2rem 2rem; background: radial-gradient(ellipse 60% 90% at 12% 50%, rgba(245, 179, 1, 0.14), transparent 60%), radial-gradient(ellipse 60% 90% at 88% 50%, rgba(34, 211, 238, 0.12), transparent 60%), linear-gradient(120deg, var(--navy-700), var(--navy-800)); border: 1px solid rgba(245, 179, 1, 0.28); box-shadow: var(--shadow-soft); } .honor-strip .royal-cup { font-size: 3rem; color: var(--gold); filter: drop-shadow(0 0 18px rgba(245, 179, 1, 0.55)); animation: floatY 4.5s ease-in-out infinite; } .honor-strip h4 { color: #fff; font-weight: 700; } .honor-strip p { color: var(--text-dim); font-weight: 300; margin: 0; } /* ============ Footer ============ */ .footer { position: relative; background: radial-gradient(ellipse 60% 70% at 50% 115%, rgba(39, 73, 214, 0.35), transparent 65%), var(--navy-950); border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 4.2rem 0 0; overflow: hidden; } .footer h5 { color: #fff; font-weight: 600; font-size: 1.05rem; margin-bottom: 1.1rem; position: relative; padding-bottom: .6rem; } .footer h5::after { content: ''; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--cyan)); } .footer p, .footer li, .footer a { color: var(--text-dim); font-weight: 300; font-size: .92rem; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer ul li { margin-bottom: .55rem; } .footer a { transition: all .3s ease; } .footer a:hover { color: var(--gold-light); padding-left: 5px; } .footer a i { color: var(--cyan); margin-right: .5rem; font-size: .75rem; } .footer .contact-li { display: flex; gap: .8rem; margin-bottom: .9rem; } .footer .contact-li i { color: var(--gold); margin-top: .35rem; } .footer-brand img { height: 74px; filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.45)); } .footer-bottom { margin-top: 3rem; padding: 1.2rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); text-align: center; color: var(--text-dim); font-size: .84rem; font-weight: 300; } .footer-bottom .heart { color: #f43f5e; animation: pulseLogo 1.2s ease-in-out infinite; display: inline-block; } /* Back to top */ #backToTop { position: fixed; right: 22px; bottom: 22px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(34, 211, 238, 0.5); background: rgba(8, 18, 49, 0.85); color: var(--cyan); font-size: 1.05rem; display: grid; place-items: center; z-index: 1200; opacity: 0; visibility: hidden; transform: translateY(16px); transition: all .4s ease; backdrop-filter: blur(8px); cursor: pointer; } #backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); } #backToTop:hover { background: rgba(34, 211, 238, 0.18); box-shadow: var(--glow-cyan); } /* ============ Robot detail page ============ */ .robot-detail-page { min-height: 100vh; background: radial-gradient(ellipse 55% 35% at 12% 8%, rgba(39, 73, 214, .22), transparent 70%), radial-gradient(ellipse 45% 30% at 90% 18%, rgba(34, 211, 238, .08), transparent 70%), var(--navy-950); } .robot-detail-nav { position: relative; z-index: 20; padding: 1.05rem 0; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(3, 8, 24, .68); backdrop-filter: blur(18px); } .robot-detail-brand { display: inline-flex; align-items: center; gap: .7rem; color: #fff; font-family: var(--font-tech); font-size: .9rem; letter-spacing: .12em; } .robot-detail-brand:hover { color: var(--cyan); } .robot-detail-brand img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(34,211,238,.45)); } .robot-detail-brand strong { color: var(--gold-light); font-weight: 700; } .robot-detail-back { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-dim); font-size: .86rem; font-weight: 300; } .robot-detail-back:hover { color: var(--cyan); } .robot-detail-hero { padding-top: 7.5rem; padding-bottom: 5rem; } .robot-detail-kicker { margin: 1.3rem 0 .65rem; color: var(--gold-light); font-family: var(--font-tech); font-size: .75rem; letter-spacing: .2em; } .robot-detail-title { margin: 0; color: #fff; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1.05; font-weight: 800; } .robot-detail-en { margin: .8rem 0 1.4rem; color: var(--cyan); font-family: var(--font-tech); letter-spacing: .12em; font-size: .9rem; } .robot-detail-summary { max-width: 600px; color: var(--text-dim); font-size: 1.08rem; line-height: 1.9; font-weight: 300; } .robot-skill-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.7rem; } .robot-skill-list span { padding: .42rem .75rem; border: 1px solid rgba(34,211,238,.22); border-radius: 100px; color: var(--text-main); background: rgba(34,211,238,.06); font-size: .78rem; } .robot-skill-list i { margin-right: .38rem; color: var(--cyan); } .robot-detail-visual { position: relative; min-height: 440px; display: grid; place-items: center; overflow: hidden; border-radius: 2rem; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025)); box-shadow: 0 25px 70px rgba(0,0,0,.3), inset 0 0 50px rgba(34,211,238,.05); } .robot-detail-visual::before { content: ''; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; transform: rotate(-18deg) scaleX(1.2); } .robot-detail-visual::after { content: ''; position: absolute; width: 55%; height: 55%; border-radius: 50%; background: var(--detail-glow, rgba(34,211,238,.18)); filter: blur(50px); } .robot-detail-visual-gold { --detail-glow: rgba(245,179,1,.2); } .robot-detail-visual-cyan { --detail-glow: rgba(34,211,238,.2); } .robot-detail-visual-royal { --detail-glow: rgba(39,73,214,.28); } .robot-detail-visual img { position: relative; z-index: 2; width: 78%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 22px 24px rgba(0,0,0,.4)); } .robot-detail-visual-cyan img, .robot-detail-visual-royal img { border-radius: 1.2rem; } .robot-detail-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(34,211,238,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.28) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, transparent, #000 35%, transparent); } .robot-detail-orbit { position: absolute; z-index: 1; border: 1px solid rgba(245,179,1,.4); border-radius: 50%; transform: rotate(-28deg); } .orbit-one { width: 80%; height: 28%; } .orbit-two { width: 68%; height: 21%; border-color: rgba(34,211,238,.35); transform: rotate(25deg); } .robot-detail-panel { padding: 1.7rem; border-radius: 1.35rem; } .detail-panel-heading { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; } .detail-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: .85rem; color: #241900; background: linear-gradient(140deg, var(--gold-light), var(--gold-deep)); box-shadow: 0 8px 20px rgba(245,179,1,.24); } .detail-icon.cyan { color: #032a32; background: linear-gradient(140deg, #7fe9fb, #0891b2); box-shadow: 0 8px 20px rgba(34,211,238,.2); } .detail-label { color: var(--cyan); font-family: var(--font-tech); font-size: .68rem; letter-spacing: .18em; } .detail-panel-heading h2 { margin: .2rem 0 0; color: #fff; font-size: 1.3rem; font-weight: 600; } .detail-steps { display: grid; gap: .65rem; } .detail-step { display: flex; align-items: center; gap: .9rem; padding: .78rem .85rem; border-radius: .8rem; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.035); } .detail-step span { color: var(--gold-light); font-family: var(--font-tech); font-size: .75rem; } .detail-step p { margin: 0; color: var(--text-dim); font-size: .88rem; font-weight: 300; } .robot-resource-list { display: grid; gap: .65rem; } .robot-resource-link { display: flex; align-items: center; gap: .75rem; min-height: 62px; padding: .7rem .75rem; border: 1px solid rgba(255,255,255,.08); border-radius: .8rem; color: var(--text-main); background: rgba(255,255,255,.035); transition: .25s ease; } .robot-resource-link:hover { color: #fff; border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.08); transform: translateX(4px); } .resource-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: .6rem; color: var(--cyan); background: rgba(34,211,238,.1); } .robot-resource-link strong, .robot-resource-link small { display: block; } .robot-resource-link strong { font-size: .88rem; font-weight: 500; } .robot-resource-link small { margin-top: .1rem; color: var(--text-dim); font-size: .72rem; font-weight: 300; } .resource-arrow { margin-left: auto; color: var(--gold); font-size: .75rem; } .robot-detail-note { display: flex; gap: .7rem; align-items: flex-start; padding: .95rem 1.1rem; border: 1px solid rgba(245,179,1,.2); border-radius: .9rem; background: rgba(245,179,1,.05); } .robot-detail-note i { margin-top: .25rem; color: var(--gold); } .robot-detail-note p { margin: 0; color: var(--text-dim); font-size: .82rem; font-weight: 300; } /* ============ Responsive ============ */ @media (max-width: 991.98px) { .section-padding { padding: 80px 0; } .stats-strip { margin-top: -40px; } .award-timeline::before { left: 12px; } .award-node .node-dot { left: 12px; top: 0; width: 46px; height: 46px; font-size: 1.05rem; } .award-node .award-col { padding-left: 3.4rem !important; } .about-frame .sub-img { right: 2%; } .float-chip.c2 { left: -2%; } .float-chip.c3 { right: -2%; } /* Put the animated emblem before the long hero copy on stacked layouts. */ .hero { min-height: auto; align-items: flex-start; padding: 112px 0 100px; } .hero-content .row { flex-direction: column-reverse; text-align: center; } .hero-content .col-lg-7, .hero-content .col-lg-5 { width: 100%; } .hero-desc { margin-left: auto; margin-right: auto; } .hero-cta { justify-content: center; } .hero-visual { margin-bottom: 1rem; } .emblem-wrap { width: min(390px, 70vw); } } @media (max-width: 575.98px) { .hero-cta .btn-hero { width: 100%; justify-content: center; } .award-thumbs { grid-template-columns: repeat(2, 1fr); } .exp-badge { top: auto; bottom: -20px; right: 2%; } .about-frame .sub-img { display: none; } .robot-group-head { flex-direction: column; gap: .7rem; } .robot-group-head .en { display: block; margin: .25rem 0 0; } .robot-group-head h4 { font-size: 1.1rem; } } /* Mobile-first hero: the logo is the opening visual, followed immediately by highlights. */ @media (max-width: 767.98px) { .navbar-t2 { padding: .45rem 0; background: linear-gradient(180deg, rgba(5, 11, 31, .96), rgba(5, 11, 31, .82)); border-bottom: 1px solid rgba(34, 211, 238, .18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .navbar-brand-t2 { gap: .55rem; } .navbar-brand-t2 img { height: 44px; } .brand-name { font-size: .98rem; } .brand-school { font-size: .56rem; letter-spacing: .025em; } .navbar-toggler-t2 { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: .75rem; } .hero { min-height: 470px; min-height: clamp(450px, 62svh, 540px); align-items: center; padding: 78px 0 62px; overflow: hidden; } .hero-content { width: 100%; } .hero-content .row { --bs-gutter-x: 0; --bs-gutter-y: 0; width: 100%; margin: 0; } .hero-content .col-lg-7 { display: none; } .hero-content .col-lg-5 { padding: 0; } .hero-visual { min-height: 0; margin: 0; } .emblem-wrap { width: clamp(232px, 68vw, 290px); /* GSAP no longer tweens the emblem, but keep the wrapper immune to stray inline styles. */ opacity: 1 !important; visibility: visible !important; } /* The looping breathe never depends on JS — only the one-shot intro does. If main.js fails to load, the logo is still visible and still moving. */ .emblem-wrap img.emblem { width: 78%; filter: drop-shadow(0 16px 28px rgba(2, 6, 23, .78)) drop-shadow(0 0 22px rgba(34, 211, 238, .34)); animation: emblemBreathe 5s ease-in-out infinite; } body.is-ready .emblem-wrap img.emblem { animation: emblemReveal 1s cubic-bezier(.2, .8, .2, 1) .1s both, emblemBreathe 5s ease-in-out 1.1s infinite; } /* Halo + orbits are what make the logo feel alive once the chips are gone. */ .emblem-glow { inset: 9%; filter: blur(16px); animation: emblemGlowStrong 4.5s ease-in-out infinite; } /* One revolution per minute reads as "not moving" on a 375px screen. */ .orbit-ring { border-width: 1px; animation-duration: 20s; } .orbit-ring .orbit-node { width: 14px; height: 14px; top: -7px; font-size: .45rem; } /* ---- Electric arcs (phone only) ---- */ .emblem-spark { display: block; position: absolute; /* Wider than the wrap so the arcs strike in from outside the emblem rim instead of scribbling across the artwork. */ inset: -12%; z-index: 4; /* above the emblem so the arcs read as foreground */ pointer-events: none; } .emblem-spark svg { display: block; width: 100%; height: 100%; overflow: visible; } .emblem-spark .bolt { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; filter: drop-shadow(0 0 4px rgba(34, 211, 238, .95)) drop-shadow(0 0 10px rgba(59, 130, 246, .7)); opacity: 0; animation: boltStrike 3.4s steps(1, end) infinite, boltDraw 3.4s ease-out infinite; } /* Irregular timing + two gold arcs keeps it from looking like a loop. */ .emblem-spark .b2 { stroke: var(--gold); filter: drop-shadow(0 0 4px rgba(245, 179, 1, .95)) drop-shadow(0 0 10px rgba(245, 179, 1, .6)); animation-duration: 4.7s; animation-delay: .9s; } .emblem-spark .b3 { animation-duration: 2.9s; animation-delay: 1.8s; } .emblem-spark .b4 { stroke: var(--gold-light); filter: drop-shadow(0 0 4px rgba(255, 215, 106, .95)) drop-shadow(0 0 10px rgba(245, 179, 1, .55)); animation-duration: 5.3s; animation-delay: 2.6s; } /* Inner orbit doubles as the "live current" ring (keeps its reverse spin). */ .orbit-ring.r2 { animation: spin 28s linear infinite reverse, currentRing 3.1s ease-in-out infinite; border-style: solid; border-color: rgba(34, 211, 238, .45); } /* Rotating accent arc riding just outside the outer orbit. */ .emblem-wrap::before { content: ''; position: absolute; inset: -3%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 58%, rgba(34, 211, 238, .55) 74%, rgba(245, 179, 1, .6) 86%, transparent 94%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 7s linear infinite; pointer-events: none; z-index: 2; } /* Two compact chips only: enough character without crowding a 390px screen. */ .float-chip { display: inline-flex; gap: .35rem; padding: .34rem .68rem; font-size: .62rem; border-radius: 100px; background: rgba(8, 18, 49, .82); box-shadow: 0 8px 20px rgba(2, 6, 23, .5); } /* `translate` (not `transform`) so the floatY keyframes stay free to move them. */ .float-chip.c1 { top: 1%; left: 50%; translate: -74% 0; animation-name: floatYsm; } .float-chip.c3 { top: auto; right: auto; bottom: 0; left: 50%; translate: -26% 0; animation-name: floatYsm; } .float-chip.c2, .float-chip.c4 { display: none; } .scroll-indicator { bottom: 22px; gap: .25rem; color: rgba(223, 230, 255, .88); font-size: .6rem; text-decoration: none; } .scroll-indicator:hover { color: var(--cyan); } .mouse-icon { width: 20px; height: 32px; padding-top: 5px; border-width: 1.5px; } .mouse-icon span { width: 3px; height: 7px; } .stats-strip { margin-top: -18px; } .stats-strip .container { padding-left: .5rem; padding-right: .5rem; } .stats-strip .row { --bs-gutter-x: .65rem; --bs-gutter-y: .65rem; } .stats-card { min-height: 142px; padding: 1.1rem .55rem; border-radius: 1rem; } .stats-card .icon-wrap { width: 46px; height: 46px; margin-bottom: .55rem; border-radius: .8rem; font-size: 1.05rem; } .stats-card h3 { margin-bottom: .25rem; font-size: 1.75rem; line-height: 1; } .stats-card p { font-size: .76rem; line-height: 1.35; } } @media (max-width: 374.98px) { .navbar-brand-t2 img { height: 39px; } .brand-name { font-size: .85rem; } .brand-school { font-size: .5rem; } .navbar-toggler-t2 { width: 38px; height: 38px; } .emblem-wrap { width: min(225px, 66vw); } .stats-card { min-height: 136px; padding: 1rem .45rem; } } @media (min-width: 2200px) { html { font-size: 19px; } .container { max-width: 1600px; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; } } /* The blanket rule above stops *every* animation, which leaves the phone hero — where the logo is the only thing on screen — looking broken rather than calm. Give it back an opacity-only pulse: no movement, no scaling, no flashing, so it stays within what reduced motion is asking for. The arcs freeze into a static decoration instead of strobing. Specificity beats the `*` rule above, so this wins regardless of source order. */ @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .emblem-glow { animation: emblemGlowFade 6s ease-in-out infinite !important; } .emblem-spark .bolt { opacity: .3; stroke-dashoffset: 0; } }