/* ========================================================= Moodswimming — Guest Theme Palette: yellow #ffcc01 · blue #02cbff · deep #08cafc Cheerful / playful / interactive. Bootstrap 5 + custom. ========================================================= */ :root { --ms-yellow: #ffcc01; --ms-yellow-soft: #ffe066; --ms-yellow-tint: #fff6d6; --ms-blue: #02cbff; --ms-blue-deep: #08cafc; --ms-navy: #123a63; --ms-navy-deep: #0d2c4d; --ms-ink: #143b5e; --ms-cream: #fff9e9; --ms-white: #ffffff; --ms-muted: #5b7690; --ms-radius: 22px; --ms-radius-lg: 34px; --ms-shadow: 0 18px 45px -20px rgba(18, 58, 99, .45); --ms-shadow-soft: 0 12px 30px -18px rgba(2, 203, 255, .5); --ms-font-head: 'Baloo 2', 'Segoe UI', system-ui, sans-serif; --ms-font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif; } * { scroll-behavior: smooth; } /* overflow-x on alone propagates to the viewport and never actually clips, so any wide child (Bootstrap .g-5 row margins, AOS parked transforms) stretches the layout and drags the fixed navbar off-screen. Setting it on too makes clip its own children for real. */ html { overflow-x: hidden; } body { font-family: var(--ms-font-body); color: var(--ms-ink); background: var(--ms-cream); overflow-x: hidden; } h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4 { font-family: var(--ms-font-head); font-weight: 800; color: var(--ms-navy); letter-spacing: -.5px; } a { text-decoration: none; } ::selection { background: var(--ms-yellow); color: var(--ms-navy); } /* ---------- Utility text ---------- */ .text-yellow { color: var(--ms-yellow) !important; } .text-blue { color: var(--ms-blue) !important; } .text-navy { color: var(--ms-navy) !important; } .text-muted-soft { color: var(--ms-muted) !important; } .fw-black { font-weight: 900 !important; } .text-gradient { background: linear-gradient(100deg, var(--ms-blue) 0%, var(--ms-navy) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-yellow { position: relative; display: inline-block; z-index: 0; } .highlight-yellow::after { content: ""; position: absolute; left: -.15em; right: -.15em; bottom: .05em; height: .42em; background: var(--ms-yellow); border-radius: 999px; z-index: -1; transform: rotate(-1.5deg); opacity: .85; } /* ---------- Backgrounds ---------- */ .bg-cream { background: var(--ms-cream) !important; } .bg-yellow-tint { background: var(--ms-yellow-tint) !important; } .bg-sky { background: linear-gradient(180deg, #e8faff 0%, #ffffff 100%) !important; } .section-navy { background: radial-gradient(120% 120% at 20% 0%, #1b4d7e 0%, var(--ms-navy-deep) 70%); color: #eaf4ff; } .section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; } .section { padding: 96px 0; position: relative; } .section-sm { padding: 64px 0; position: relative; } @media (max-width: 767px){ .section{ padding:64px 0;} .section-sm{padding:44px 0;} } /* ---------- Buttons ---------- */ .btn { font-family: var(--ms-font-head); font-weight: 700; border-radius: 999px; padding: .72rem 1.7rem; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .btn:active { transform: scale(.96); } .btn-sun { background: var(--ms-yellow); color: var(--ms-navy); box-shadow: 0 10px 22px -8px rgba(255, 204, 1, .8); border: none; } .btn-sun:hover { background: #ffd733; color: var(--ms-navy); transform: translateY(-3px); box-shadow: 0 16px 28px -8px rgba(255, 204, 1, .9); } .btn-wave { background: var(--ms-blue); color: #fff; border: none; box-shadow: 0 10px 22px -8px rgba(2, 203, 255, .8); } .btn-wave:hover { background: var(--ms-blue-deep); color: #fff; transform: translateY(-3px); } .btn-outline-navy { border: 2px solid var(--ms-navy); color: var(--ms-navy); background: transparent; } .btn-outline-navy:hover { background: var(--ms-navy); color: #fff; transform: translateY(-3px); } .btn-ghost-light { border: 2px solid rgba(255,255,255,.6); color:#fff; } .btn-ghost-light:hover { background:#fff; color: var(--ms-navy); } /* ---------- Navbar ---------- */ .ms-navbar { transition: background .3s ease, box-shadow .3s ease, padding .3s ease; padding: .9rem 0; background: transparent; } .ms-navbar.scrolled { background: rgba(255, 249, 233, .92); backdrop-filter: blur(10px); box-shadow: 0 8px 30px -18px rgba(18,58,99,.5); padding: .55rem 0; } .ms-navbar .navbar-brand img { height: 64px; width: auto; } .ms-navbar .nav-link { font-family: var(--ms-font-head); font-weight: 700; color: var(--ms-navy) !important; margin: 0 .35rem; position: relative; } .ms-navbar .nav-link::after { content:""; position:absolute; left:.6rem; right:.6rem; bottom:.3rem; height:3px; background: var(--ms-yellow); border-radius:99px; transform: scaleX(0); transform-origin:left; transition: transform .25s ease; } .ms-navbar .nav-link:hover::after, .ms-navbar .nav-link.active::after { transform: scaleX(1); } .navbar-toggler { border:none; } .navbar-toggler:focus { box-shadow:none; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 160px 0 120px; background: linear-gradient(180deg, var(--ms-yellow-tint) 0%, #fffdf5 55%, #eafaff 100%); overflow: hidden; } .hero-ghost-word { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); font-family: var(--ms-font-head); font-weight: 900; font-size: clamp(4rem, 16vw, 15rem); color: rgba(2, 203, 255, .08); letter-spacing: 4px; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; } .hero .container { position: relative; z-index: 3; } .hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:#fff; color: var(--ms-navy); border-radius:999px; padding:.4rem 1rem; font-weight:700; box-shadow: var(--ms-shadow-soft); font-family: var(--ms-font-head); } .hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.02; } .hero-lead { font-size: 1.15rem; color: var(--ms-muted); max-width: 34rem; } /* Hero art blob */ .hero-blob { position: relative; } .hero-blob .blob-bg { position:absolute; inset:-6% -4%; background: radial-gradient(circle at 30% 30%, var(--ms-blue) 0%, var(--ms-blue-deep) 60%, #0aa6e0 100%); border-radius: 46% 54% 55% 45% / 52% 44% 56% 48%; animation: blobMorph 12s ease-in-out infinite; box-shadow: var(--ms-shadow); } @keyframes blobMorph { 0%,100% { border-radius: 46% 54% 55% 45% / 52% 44% 56% 48%; } 33% { border-radius: 58% 42% 40% 60% / 45% 58% 42% 55%; } 66% { border-radius: 42% 58% 62% 38% / 60% 42% 58% 40%; } } /* Hero video (animation) — morphing blob shape, like the original art */ .hero-media { position: relative; max-width: 460px; aspect-ratio: 1 / 1; margin-inline: auto; } .hero-media .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ms-blue-soft, #eaf8ff); box-shadow: var(--ms-shadow); /* Bentuk blob dibuat STATIS. Border-radius TIDAK boleh dianimasikan di elemen