/* * base.css — sistem reka bentuk laman awam "Cerah Premium" (MathTitan). * Arah seni: _dev/SPEC-CERAH.md + _dev/design/rujukan-mockup.webp. Dokumentasi: _dev/DESIGN.md · panduan hidup: _dev/design/gaya.html * Mobile-first. Titik putus: 480 · 640 · 768 · 1024 (desktop) · 1200 · 1280. * Warna tema ditulis semula oleh TS.applyTheme() (store.js) — guna pemboleh ubah, jangan kod keras hex dalam CSS halaman. * Putih & latar cerah mendominasi. TIADA permukaan gelap di laman awam (satu-satunya permukaan berwarna = jalur CTA biru). * * 1 Token & reset 2 Token konteks (--t-*) 3 Tipografi 4 Susun atur & seksyen * 5 Butang & CTA 6 Label, cip, lencana 7 Kad & permukaan pastel 8 Chrome (pengumuman, header, * menu lungsur, drawer, footer, WhatsApp, bar CTA) 9 Hero & widget 10 Komponen kandungan * 11 Borang 12 Tab, jadual, penapis 13 Modal, toast, akordion, karusel 14 Animasi & utiliti */ /* ============================================================ 1. TOKEN & RESET */ :root { /* — tema (TS.applyTheme menulis semula; nilai di bawah = palet "cerah") — */ --c-primary: #1454F5; /* Biru utama: CTA, pautan, aktif (putih di atasnya 5.8:1) */ --c-primary-dark: #0D3FC2; /* hover / tekan */ --c-secondary: #2684FF; /* rakan gradien SAHAJA — jangan teks putih kecil di atas warna padu ini */ --c-soft: #D9F0FF; /* biru langit lembut: permukaan, pil, cip */ --c-softer: #F7F9FD; /* latar sekunder */ --c-accent: #C4B5FD; /* lavender: bentuk hiasan & gradien sahaja (bukan warna teks) */ --c-accent-ink: #10152F; /* teks di atas permukaan lavender/langit/pudina */ --c-lavender: #F2E9FF; /* permukaan lavender cair */ --c-mint: #E2F9E9; /* permukaan pudina */ --c-hl: #1454F5; /* perkataan sorotan di atas putih */ --c-ink: #10152F; /* teks utama / tajuk */ --c-muted: #4F5B75; /* teks sekunder (≥ 4.5:1 di atas putih, softer, soft) */ /* — neutral & fungsian (statik) — */ --c-text: #2B3350; /* teks badan */ --c-line: #E6EBF3; --c-line-strong: #D0D9E7; --c-bg: #FFFFFF; --c-spark: #C8E64A; /* aksen "percikan" limau (hiasan hero sahaja) */ --c-star: #F2A50C; --c-success: #12A06F; --c-success-ink: #0A6646; --c-success-bg: #E3F7EC; --c-warning: #D69410; --c-warning-ink: #7A5000; --c-warning-bg: #FFF4DA; --c-danger: #D64545; --c-danger-ink: #A12828; --c-danger-bg: #FDECEC; --c-info: #2F6FDE; --c-info-ink: #1D4FAF; --c-info-bg: #EAF2FF; --c-wa: #25D366; --c-wa-strong: #0D8043; /* — gradien (hanya untuk hero, butang CTA, jalur CTA & cucian latar) — */ /* Hujung gradien butang/jalur dihadkan supaya teks putih kekal ≥ 4.5:1 walaupun di hujung paling cerah, dalam KEEMPAT-EMPAT palet * (dikira: butang 72% → cerah 5.1, lavender 5.9, hijau 4.7, laut 4.6; jalur 80% → hijau 4.8, laut 4.9). Jangan naikkan bahagian secondary. */ --grad-primary: linear-gradient(120deg, var(--c-primary) 0%, color-mix(in srgb, var(--c-primary) 72%, var(--c-secondary)) 100%); --grad-primary-hover: linear-gradient(120deg, var(--c-primary-dark) 0%, var(--c-primary) 100%); --grad-text: linear-gradient(92deg, var(--c-primary) 8%, var(--c-secondary) 100%); --grad-band: linear-gradient(118deg, var(--c-primary-dark) 0%, var(--c-primary) 46%, color-mix(in srgb, var(--c-primary) 80%, var(--c-secondary)) 100%); --grad-wash: radial-gradient(60% 85% at 100% 0%, color-mix(in srgb, var(--c-soft) 85%, transparent) 0%, transparent 65%), radial-gradient(48% 70% at 88% 100%, color-mix(in srgb, var(--c-lavender) 95%, transparent) 0%, transparent 72%), linear-gradient(180deg, #FFFFFF 0%, var(--c-softer) 100%); --grad-sky: linear-gradient(140deg, color-mix(in srgb, var(--c-soft) 35%, #fff) 0%, color-mix(in srgb, var(--c-soft) 92%, #fff) 100%); --grad-lavender: linear-gradient(140deg, color-mix(in srgb, var(--c-lavender) 40%, #fff) 0%, var(--c-lavender) 100%); --grad-mint: linear-gradient(140deg, color-mix(in srgb, var(--c-mint) 40%, #fff) 0%, var(--c-mint) 100%); --grad-shape: linear-gradient(135deg, color-mix(in srgb, var(--c-soft) 90%, #fff) 0%, color-mix(in srgb, var(--c-accent) 70%, #fff) 100%); /* Nama lama dikekalkan supaya CSS halaman tidak pecah — kini semuanya cerah. */ --grad-dark: var(--grad-wash); --glow: color-mix(in srgb, var(--c-accent) 35%, transparent); --glow-strong: color-mix(in srgb, var(--c-primary) 22%, transparent); --grid-img: none; --grid-img-light: none; --glass-bg: rgba(255, 255, 255, .82); --glass-bd: rgba(255, 255, 255, .9); --glass-blur: blur(14px) saturate(150%); /* — bentuk, bayang, gerakan — */ --radius-xs: 8px; --radius-sm: 12px; --radius: 16px; --radius-lg: 20px; --radius-xl: 28px; --pill: 999px; --shadow-sm: 0 1px 2px rgba(16, 21, 47, .04), 0 6px 18px color-mix(in srgb, var(--c-primary) 6%, transparent); --shadow: 0 18px 40px color-mix(in srgb, var(--c-primary) 10%, transparent), 0 2px 6px rgba(16, 21, 47, .05); --shadow-lg: 0 30px 64px -14px color-mix(in srgb, var(--c-primary) 20%, transparent), 0 4px 12px rgba(16, 21, 47, .06); --shadow-btn: 0 10px 22px -8px color-mix(in srgb, var(--c-primary) 55%, transparent), 0 2px 4px color-mix(in srgb, var(--c-primary) 18%, transparent); --shadow-dark: 0 30px 80px rgba(16, 21, 47, .22); --ease: cubic-bezier(.2, .7, .2, 1); --dur: .2s; /* — tipografi — */ --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: var(--font); --fs-display: clamp(40px, 5.6vw, 78px); --fs-h1: clamp(34px, 4.4vw, 58px); --fs-h2: clamp(28px, 3vw, 42px); --fs-h3: clamp(18px, 1.6vw, 21px); --fs-lead: clamp(17px, 1.35vw, 19px); --fs-sm: 14px; --fs-xs: 12.5px; /* — ruang & susun atur — */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; --container: 1240px; --narrow: 760px; --gutter: 16px; --section-y: 64px; --header-h: 64px; --announce-h: 38px; --top-h: calc(var(--header-h) + 8px); color-scheme: light; } @media (min-width: 640px) { :root { --gutter: 24px; } } @media (min-width: 1024px) { :root { --section-y: 104px; --header-h: 76px; --gutter: 32px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); background: #fff; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--t-body); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } .ico { display: inline-block; flex: none; vertical-align: middle; } a { color: var(--t-link); text-decoration: none; transition: color var(--dur); } a:hover { color: var(--c-primary-dark); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } :focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--c-soft); color: var(--c-ink); } [hidden] { display: none !important; } hr { border: 0; border-top: 1px solid var(--t-line); margin: 28px 0; } html.is-locked, html.is-locked body { overflow: hidden; } code { font-size: .88em; background: var(--c-softer); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 6px; padding: 1px 6px; } .sr-only { 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 { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--c-primary); color: #fff; padding: 10px 16px; border-radius: var(--pill); font-weight: 700; transition: top .2s; } .skip-link:focus { top: 12px; color: #fff; } /* ============================================================ 2. TOKEN KONTEKS * Komponen membaca --t-* (teks) dan --btn-* (butang). Semua permukaan cerah berkongsi nilai yang sama. * Satu-satunya pengecualian: permukaan biru (.cta-band, .on-blue) — teks putih. * .on-dark / .section--dark / .hero-dark (warisan reka bentuk gelap) kini SENGAJA cerah. */ :root, .on-light, .on-dark, .section--dark, .section--primary, .hero-dark, .card, .modal__dialog, .drawer__panel, .footer { --t-head: var(--c-ink); --t-body: var(--c-text); --t-muted: var(--c-muted); --t-hl: var(--c-hl); --t-link: var(--c-primary); --t-line: var(--c-line); --t-check: var(--c-primary); --t-star: var(--c-star); --t-tile: color-mix(in srgb, var(--c-soft) 60%, #fff); --btn-pri-bg: var(--grad-primary); --btn-pri-fg: #fff; --btn-pri-hover: var(--grad-primary-hover); --btn-pri-sh: var(--shadow-btn); --btn-sec-bg: #fff; --btn-sec-fg: var(--c-ink); --btn-sec-bd: var(--c-line-strong); --btn-sec-hover: var(--c-softer); --btn-ghost-fg: var(--c-ink); --btn-ghost-bd: var(--c-line-strong); --btn-ghost-hover: var(--c-softer); --chip-bg: #fff; --chip-fg: var(--c-ink); --chip-bd: var(--c-line-strong); --chip-on-bg: var(--c-primary); --chip-on-fg: #fff; --chip-on-ico: #fff; --pill-bg: color-mix(in srgb, var(--c-soft) 55%, var(--c-lavender)); --pill-fg: var(--c-primary-dark); --pill-bd: transparent; } .cta-band, .on-blue { --t-head: #FFFFFF; /* Putih penuh: hujung paling cerah --grad-band hanya ~4.8:1 dalam palet hijau/laut — putih lutsinar jatuh bawah 4.5:1. */ --t-body: #FFFFFF; --t-muted: #FFFFFF; --t-hl: #FFFFFF; --t-link: #FFFFFF; --t-line: rgba(255, 255, 255, .22); --t-check: #FFFFFF; --t-tile: rgba(255, 255, 255, .16); --btn-pri-bg: #FFFFFF; --btn-pri-fg: var(--c-primary-dark); --btn-pri-hover: var(--c-softer); --btn-pri-sh: 0 14px 30px -12px rgba(5, 20, 70, .45); --btn-sec-bg: rgba(255, 255, 255, .14); --btn-sec-fg: #fff; --btn-sec-bd: rgba(255, 255, 255, .4); --btn-sec-hover: rgba(255, 255, 255, .22); --btn-ghost-fg: #fff; --btn-ghost-bd: rgba(255, 255, 255, .55); --btn-ghost-hover: rgba(255, 255, 255, .12); --chip-bg: rgba(255, 255, 255, .14); --chip-fg: #fff; --chip-bd: rgba(255, 255, 255, .3); --chip-on-bg: #fff; --chip-on-fg: var(--c-primary-dark); --chip-on-ico: var(--c-primary); --pill-bg: rgba(255, 255, 255, .16); --pill-fg: #fff; --pill-bd: rgba(255, 255, 255, .28); color: var(--t-body); } .cta-band :focus-visible, .on-blue :focus-visible { outline-color: #fff; } /* Kaca: HANYA untuk satu kad terapung hero (dengan sandaran padu). */ .glass, .glass--light, .card.card--glass, .widget { background: var(--glass-bg); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass, .glass--light, .card.card--glass, .widget { background: #fff; } } /* ============================================================ 3. TIPOGRAFI */ h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-family: var(--font-display); color: var(--t-head); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; } .h1, .h2, .h3, .h4 { font-family: var(--font-display); color: var(--t-head); font-weight: 800; text-wrap: balance; margin: 0 0 .5em; } h1, .h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.035em; } h2, .h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.03em; } h3, .h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; } h4, .h4 { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; } .display { font-size: var(--fs-display); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; color: var(--t-head); margin: 0 0 .35em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; color: var(--t-head); } small { font-size: 13px; } .hl { color: var(--t-hl); } /* Sorotan bergradien: hanya pada tajuk besar hero (h1 hero / .display / .text-grad). */ .text-grad, .display .hl, .page-hero__title .hl, .hero-title .hl { color: var(--c-primary); background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .04em; } /* Frasa sorotan dalam tajuk tidak dipecahkan (cth. "5 Subjek" kekal sebaris) */ .page-hero__title .hl, .section-head__title .hl { white-space: nowrap; } .hl-u .hl, .hl--u { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-accent) 80%, transparent); text-decoration-thickness: .14em; text-underline-offset: .14em; } .lead { font-size: var(--fs-lead); color: var(--t-muted); line-height: 1.6; } .muted { color: var(--t-muted); } .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .text-center { text-align: center; } .text-left { text-align: left; } .text-primary, .text-hl { color: var(--t-hl); } .text-ink { color: var(--t-head); } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .tabular { font-variant-numeric: tabular-nums; } .prose { max-width: var(--narrow); } .prose p { margin-bottom: 1.05em; } .prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; } .prose li + li { margin-top: .35em; } /* Label eyebrow: huruf besar biru berjarak ("PROGRAM KAMI"). --chip = label pil, --dot, --line, --plain (lalai tiada garis). */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--t-hl); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; } .eyebrow .ico { width: 16px; height: 16px; } .eyebrow--line::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; flex: none; } .eyebrow--dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 14%, transparent); flex: none; } .eyebrow--chip { gap: 8px; padding: 8px 16px 8px 12px; border-radius: var(--pill); background: var(--pill-bg); color: var(--pill-fg); border: 1px solid var(--pill-bd); font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; } .eyebrow--chip .ico { width: 18px; height: 18px; color: var(--c-primary); } .on-blue .eyebrow--chip .ico, .cta-band .eyebrow--chip .ico { color: #fff; } .eyebrow--plain::before { display: none; } /* ============================================================ 4. SUSUN ATUR & SEKSYEN */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .container--narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); } .container--wide { max-width: calc(1360px + var(--gutter) * 2); } .section { position: relative; padding: var(--section-y) 0; background-color: var(--c-bg); } .section--soft, .section--softer { background-color: var(--c-softer); } .section--tint, .section--sky { background: linear-gradient(180deg, color-mix(in srgb, var(--c-soft) 42%, #fff) 0%, color-mix(in srgb, var(--c-soft) 18%, #fff) 100%); } .section--lavender { background: linear-gradient(180deg, color-mix(in srgb, var(--c-lavender) 70%, #fff) 0%, #fff 100%); } .section--mint { background: linear-gradient(180deg, color-mix(in srgb, var(--c-mint) 70%, #fff) 0%, #fff 100%); } /* Cucian lembut (seperti hero). .section--dark / --primary = warisan → kini cucian cerah, teks gelap. */ .section--wash, .section--dark, .section--primary { background: var(--grad-wash); overflow: hidden; } .section--tight { padding: calc(var(--section-y) * .6) 0; } .section--lg { padding: calc(var(--section-y) * 1.2) 0; } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .section--line { border-top: 1px solid var(--c-line); } .section + .section--same { padding-top: 0; } /* Lengkung lembut di bawah blok (hero / seksyen berwarna) ke seksyen putih seterusnya. --curve-fill = warna seksyen seterusnya. */ .curve-bottom { position: relative; isolation: isolate; } .curve-bottom::after, .page-hero::after, .hero-dark::after, .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 4.2vw, 64px); z-index: 1; pointer-events: none; background: var(--curve-fill, #fff); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V46C210 74 470 78 760 52C1010 30 1230 14 1440 26V80Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V46C210 74 470 78 760 52C1010 30 1230 14 1440 26V80Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; } /* Kepala seksyen: kiri (lalai), --center, --split (tajuk kiri + tindakan kanan) */ .section-head { display: flex; flex-direction: column; margin: 0 0 36px; max-width: 760px; } .section-head__main { min-width: 0; } .section-head h2, .section-head .section-head__title { margin: 0 0 12px; } .section-head__text { color: var(--t-muted); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; margin: 0; max-width: 620px; } .section-head--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; } .section-head--center .section-head__text { margin: 0 auto; } .section-head--split { max-width: none; } .section-head__action { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } @media (min-width: 1024px) { .section-head { margin-bottom: 52px; } .section-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; } .section-head--split .section-head__main { max-width: 720px; } .section-head--split .section-head__action { margin-top: 0; flex: none; } } .sub-head { margin: 48px 0 20px; display: flex; align-items: center; gap: 12px; } .sub-head h3 { margin: 0; font-size: clamp(19px, 1.9vw, 23px); font-weight: 800; } .sub-head::after { content: ''; flex: 1; height: 1px; background: var(--t-line); } /* Grid asas */ .grid { display: grid; gap: 20px; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid { gap: 24px; } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stack > * + * { margin-top: 16px; } .stack--sm > * + * { margin-top: 8px; } .stack--lg > * + * { margin-top: 28px; } .flex { display: flex; } .flex-wrap { display: flex; flex-wrap: wrap; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } /* Split: dua lajur asimetri pada desktop. --reverse, --60/--40, --top, --sticky. */ .split { display: grid; gap: 32px; align-items: center; } @media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } .split--reverse > :first-child { order: 2; } .split--top { align-items: start; } .split--60 { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .split--40 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .split--sticky > :first-child { position: sticky; top: calc(var(--top-h) + 24px); align-self: start; } } /* Bento: grid mozek. .bento__item (+ --wide --xwide --full --tall --tint --sky --lavender --mint --media). */ .bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } .bento__item { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); color: var(--t-body); } .bento__item--tint { background: var(--c-softer); box-shadow: none; } .bento__item--sky, .bento__item--dark { background: var(--grad-sky); border-color: transparent; } .bento__item--lavender { background: var(--grad-lavender); border-color: transparent; } .bento__item--mint { background: var(--grad-mint); border-color: transparent; } .bento__item.bento__item--media { padding: 0; } .bento__item--media img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; } @media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento__item--wide, .bento__item--xwide, .bento__item--full { grid-column: span 2; } } @media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; grid-auto-flow: dense; } .bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bento__item { padding: 28px; } .bento__item--xwide { grid-column: span 3; } .bento__item--full { grid-column: 1 / -1; } .bento__item--tall { grid-row: span 2; } } /* Skrol mendatar pada telefon, grid pada desktop:
…
*/ .hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(80%, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 18px; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .hscroll::-webkit-scrollbar { display: none; } .hscroll > * { scroll-snap-align: start; min-width: 0; } @media (min-width: 640px) { .hscroll { grid-auto-columns: minmax(44%, 1fr); } } @media (min-width: 1024px) { .hscroll { grid-auto-flow: row; grid-template-columns: repeat(var(--hs-cols, 3), minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 24px; } } /* Bingkai media: sudut organik, bayang lembut. */ .media { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow); background: var(--c-soft); } .media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .media--wide img { aspect-ratio: 16 / 9; } .media--square img { aspect-ratio: 1 / 1; } .media--tall img { aspect-ratio: 4 / 5; } .media-frame { position: relative; isolation: isolate; } .media-frame::before { content: ''; position: absolute; z-index: -1; inset: 8% -5% -5% 10%; border-radius: 40px 40px 120px 40px; background: var(--grad-shape); opacity: .9; } /* Bawah 1024px bingkai biasanya selebar bekas — jangan biarkan bentuk latar terkeluar ke kanan (skrol mendatar). */ @media (max-width: 1023px) { .media-frame::before { inset: 8% 0 -5% 10%; } } .media-frame img { width: 100%; border-radius: 28px 28px 28px 96px; object-fit: cover; aspect-ratio: 4 / 3; box-shadow: var(--shadow); } .media-frame--tall img { aspect-ratio: 4 / 5; } .media-frame--blob img { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; } /* Jubin ikon: dwiton (latar langit lembut + ikon biru). --solid = gradien biru. */ .icon-tile, .icon-circle, .icon-square, .duo-icon { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; color: var(--c-primary); background: linear-gradient(145deg, color-mix(in srgb, var(--c-soft) 70%, #fff), color-mix(in srgb, var(--c-lavender) 80%, #fff)); } .icon-circle { border-radius: 50%; } .icon-tile--solid, .icon-circle--solid, .icon-square { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-btn); } .icon-tile--sm, .icon-circle--sm { width: 38px; height: 38px; border-radius: 11px; } .icon-circle--sm { border-radius: 50%; } .icon-tile--lg { width: 60px; height: 60px; border-radius: 18px; } .icon-tile--mint { background: var(--grad-mint); color: var(--c-success-ink); } .icon-tile--lavender { background: var(--grad-lavender); color: var(--c-primary-dark); } .duo-icon .ico { width: 24px; height: 24px; } /* ============================================================ 5. BUTANG & CTA */ .btn { --btn-bg: var(--btn-pri-bg); --btn-fg: var(--btn-pri-fg); --btn-bd: transparent; --btn-sh: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: var(--pill); border: 1.5px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-sh); font-family: var(--font); font-weight: 700; font-size: 15.5px; line-height: 1.2; letter-spacing: -.01em; text-align: center; text-decoration: none; cursor: pointer; white-space: normal; -webkit-tap-highlight-color: transparent; user-select: none; transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s; } .btn:hover { color: var(--btn-fg); transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.98); } .btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; transform: none; box-shadow: none; } .btn .btn__arrow { transition: transform .2s var(--ease); } .btn:hover .btn__arrow { transform: translateX(3px); } /* Utama: pil gradien biru + bayang biru lembut */ .btn--primary { --btn-bg: var(--btn-pri-bg); --btn-fg: var(--btn-pri-fg); --btn-sh: var(--btn-pri-sh); border: 0; padding: 13.5px 25.5px; } .btn--primary:hover { --btn-bg: var(--btn-pri-hover); --btn-sh: 0 16px 30px -10px color-mix(in srgb, var(--c-primary) 60%, transparent); } .cta-band .btn--primary:hover, .on-blue .btn--primary:hover { --btn-sh: 0 18px 34px -12px rgba(5, 20, 70, .5); } /* Sekunder: pil putih, sempadan cerah */ .btn--secondary { --btn-bg: var(--btn-sec-bg); --btn-fg: var(--btn-sec-fg); --btn-bd: var(--btn-sec-bd); --btn-sh: 0 2px 6px rgba(16, 21, 47, .04); } .btn--secondary:hover { --btn-bg: var(--btn-sec-hover); --btn-bd: color-mix(in srgb, var(--c-primary) 40%, var(--c-line-strong)); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--btn-ghost-fg); --btn-bd: var(--btn-ghost-bd); } .btn--ghost:hover { --btn-bg: var(--btn-ghost-hover); --btn-bd: var(--btn-ghost-fg); } .btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .55); } .btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: #fff; } .btn--light { --btn-bg: #fff; --btn-fg: var(--c-primary-dark); --btn-sh: 0 10px 24px -12px rgba(16, 21, 47, .3); } .btn--light:hover { --btn-bg: var(--c-softer); } /* --accent / --dark (warisan) = biru utama padu; tiada butang gelap. */ .btn--accent, .btn--dark { --btn-bg: var(--c-primary); --btn-fg: #fff; --btn-sh: var(--shadow-btn); border: 0; padding: 13.5px 25.5px; } .btn--accent:hover, .btn--dark:hover { --btn-bg: var(--c-primary-dark); } .btn--soft { --btn-bg: color-mix(in srgb, var(--c-soft) 70%, #fff); --btn-fg: var(--c-primary-dark); } .btn--soft:hover { --btn-bg: var(--c-soft); } .btn--wa { --btn-bg: var(--c-wa-strong); --btn-fg: #fff; --btn-sh: 0 10px 22px -10px rgba(13, 128, 67, .6); } .btn--wa:hover { --btn-bg: #0A6B38; } .btn--link { --btn-bg: transparent; --btn-fg: var(--t-link); min-height: 0; padding: 4px 0; border: 0; box-shadow: none; border-radius: 4px; } .btn--link:hover { transform: none; text-decoration: underline; text-underline-offset: 4px; } .btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; gap: 8px; } .btn--primary.btn--sm, .btn--accent.btn--sm, .btn--dark.btn--sm { padding: 9.5px 17.5px; } .btn--lg { min-height: 58px; padding: 15px 32px; font-size: 17px; } .btn--primary.btn--lg, .btn--accent.btn--lg, .btn--dark.btn--lg { padding: 16.5px 33.5px; } .btn--block { display: flex; width: 100%; } .btn--icon { width: 44px; min-height: 44px; padding: 0 !important; } .btn--icon.btn--sm { width: 40px; min-height: 40px; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; } .btn-row--center { justify-content: center; } @media (max-width: 479px) { .btn-row--stack > .btn { flex: 1 1 100%; } } /* Butang bulat putih dengan anak panah (kad pameran) */ .round-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex: none; background: #fff; color: var(--c-primary); box-shadow: 0 6px 16px rgba(16, 21, 47, .08); transition: transform .2s var(--ease), background .2s, color .2s; } a:hover > .round-btn, .round-btn:hover, a:focus-visible > .round-btn { background: var(--c-primary); color: #fff; } /* Pautan teks dengan anak panah */ .link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--t-link); font-size: 15px; } .link-more:hover { color: var(--c-primary-dark); } .link-more .ico { transition: transform .2s var(--ease); } .link-more:hover .ico { transform: translateX(3px); } /* CTA sebaris sederhana (TS.site.ctaBlock) — bukan banner. */ .cta-block { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; text-align: center; } .cta-block .btn { min-width: min(100%, 240px); } .cta-sub { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--t-muted); max-width: 440px; line-height: 1.45; } .cta-sub .ico { color: var(--t-check); flex: none; } @media (min-width: 640px) { .cta-block { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px 22px; } .cta-block .cta-sub { text-align: left; } } .cta-block--left { align-items: flex-start; text-align: left; } @media (min-width: 640px) { .cta-block--left { justify-content: flex-start; } } /* Jalur CTA akhir (TS.site.ctaBand) — gradien biru cerah, SATU setiap halaman. Teks putih ≥ 4.5:1 (gradien kekal pada biru gelap–utama). */ .section--band { padding: calc(var(--section-y) * .5) 0 var(--section-y); background: #fff; } .section--band.section--soft { background: var(--c-softer); } .cta-band { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 28px; padding: 40px 22px; border-radius: var(--radius-xl); background: var(--c-primary); background-image: var(--grad-band); box-shadow: 0 34px 70px -30px color-mix(in srgb, var(--c-primary) 75%, transparent); } .cta-band::before { content: ''; position: absolute; z-index: -1; width: 560px; height: 560px; right: -180px; top: -260px; border-radius: 50%; pointer-events: none; border: 70px solid rgba(255, 255, 255, .06); box-shadow: 0 0 0 60px rgba(255, 255, 255, .03); } .cta-band::after { content: ''; position: absolute; z-index: -1; width: 420px; height: 420px; left: -160px; bottom: -280px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 68%); opacity: .55; } .cta-band__copy, .cta-band__side { position: relative; } .cta-band__title { font-size: clamp(30px, 3.8vw, 48px); margin: 14px 0 14px; color: #fff; letter-spacing: -.035em; } .cta-band__text { font-size: var(--fs-lead); margin: 0; max-width: 560px; color: var(--t-body); } .cta-band__side { display: grid; gap: 18px; align-content: center; } .cta-band__actions { display: grid; gap: 12px; } .cta-band__points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14.5px; font-weight: 600; color: #fff; } .cta-band__points li { display: inline-flex; align-items: center; gap: 8px; } .cta-band__points .ico { color: #fff; opacity: .95; } .cta-band__sub { font-size: 13.5px; color: var(--t-muted); margin: 0; } .cta-band__more { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); } .cta-band__more:hover { color: #fff; text-decoration-color: #fff; } @media (min-width: 640px) { .cta-band { padding: 52px 44px; } .cta-band__actions { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .cta-band { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; align-items: center; padding: 72px 72px; } .cta-band__actions { grid-template-columns: 1fr; } } /* ============================================================ 6. LABEL, CIP, LENCANA, PIL STATUS */ /* .pill = label pil (latar biru/lavender sangat cair, teks biru) */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--pill); background: var(--pill-bg); color: var(--pill-fg); border: 1px solid var(--pill-bd); font-size: 13.5px; font-weight: 700; line-height: 1.4; letter-spacing: -.005em; } .pill .ico { width: 16px; height: 16px; color: var(--c-primary); } .pill--light { background: #fff; color: var(--c-ink); border-color: var(--c-line); box-shadow: var(--shadow-sm); } .pill--dark, .pill--primary { background: var(--c-primary); color: #fff; border-color: transparent; } .pill--dark .ico, .pill--primary .ico { color: #fff; } .pill--accent, .pill--lavender { background: var(--c-lavender); color: var(--c-primary-dark); border-color: transparent; } .pill--mint { background: var(--c-mint); color: var(--c-success-ink); border-color: transparent; } .pill--mint .ico { color: var(--c-success-ink); } .pill--lg { padding: 10px 20px; font-size: 15px; } .strip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--pill); border: 1px solid var(--t-line); color: var(--t-head); font-weight: 700; font-size: 14px; background: #fff; } .strip .ico { color: var(--t-check); } .trust-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: var(--pill); background: #fff; color: var(--t-head); font-weight: 600; font-size: 14px; border: 1px solid var(--t-line); box-shadow: var(--shadow-sm); } .trust-pill .ico { color: var(--t-check); } /* Baris manfaat (hero): ikon dwiton + teks, dipisahkan garis menegak nipis */ .benefit-row, .trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; font-size: 14.5px; color: var(--t-body); } .benefit-item, .trust-item { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; line-height: 1.3; color: var(--t-head); } .benefit-item__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; color: var(--c-primary); background: color-mix(in srgb, var(--c-soft) 70%, #fff); } .trust-item .ico { color: var(--t-check); } .trust-item strong { color: var(--t-head); font-weight: 800; } .benefit-sep, .trust-sep { width: 1px; height: 32px; background: var(--c-line-strong); } @media (max-width: 639px) { .benefit-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .benefit-item { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13.5px; } .benefit-item br { display: none; } .benefit-sep { display: none; } } .avatar-stack { display: inline-flex; } .avatar-stack > .avatar { width: 34px; height: 34px; font-size: 12px; box-shadow: 0 0 0 2px #fff; } .avatar-stack > .avatar + .avatar { margin-left: -10px; } /* Lencana (badge) & pil status */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--pill); font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; background: #EFF2F7; color: #44506A; border: 1px solid transparent; } .badge .ico { width: 13px; height: 13px; } .badge--green { background: var(--c-success-bg); color: var(--c-success-ink); border-color: #C6ECD9; } .badge--amber { background: var(--c-warning-bg); color: var(--c-warning-ink); border-color: #F5E0A8; } .badge--red { background: var(--c-danger-bg); color: var(--c-danger-ink); border-color: #F6CBCB; } .badge--blue { background: var(--c-info-bg); color: var(--c-info-ink); border-color: #CDDDFB; } .badge--purple { background: #F2EDFF; color: #5536B8; border-color: #DFD5FB; } .badge--gray { background: #EFF2F7; color: #44506A; border-color: #DFE5EE; } .badge--primary, .badge--dark { background: var(--c-primary); color: #fff; } .badge--accent, .badge--lavender { background: var(--c-lavender); color: var(--c-primary-dark); } .badge--mint { background: var(--c-mint); color: var(--c-success-ink); } .badge--soft { background: color-mix(in srgb, var(--c-soft) 70%, #fff); color: var(--c-primary-dark); } .badge--dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .badge--dot .ico { display: none; } .badge--lg { font-size: 13.5px; padding: 5px 14px; } /* Lencana "Contoh" — kandungan sampel mod demo */ .sample-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--pill); font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; color: var(--c-warning-ink); background: var(--c-warning-bg); border: 1px dashed #E7C677; } .sample-badge .ico { width: 13px; height: 13px; } .sample-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 24px; padding: 11px 16px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: var(--c-warning-ink); background: var(--c-warning-bg); border: 1px dashed #E7C677; } .sample-note .ico { flex: none; margin-top: 2px; } .sample-note--center { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; } /* Cip (penapis & tag) */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips--center { justify-content: center; } .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 15px; border-radius: var(--pill); background: var(--chip-bg); color: var(--chip-fg); border: 1px solid var(--chip-bd); font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; } .chip .ico { color: var(--t-hl); width: 16px; height: 16px; } .chip--sm { min-height: 28px; padding: 3px 11px; font-size: 12.5px; } .chip--white { background: #fff; border-color: var(--c-line); } .chip--soft { background: color-mix(in srgb, var(--c-soft) 65%, #fff); border-color: transparent; color: var(--c-primary-dark); } .chip--lavender { background: var(--c-lavender); border-color: transparent; color: var(--c-primary-dark); } .chip--mint { background: var(--c-mint); border-color: transparent; color: var(--c-success-ink); } .chip--success { background: var(--c-success-bg); border-color: #C6ECD9; color: var(--c-success-ink); } .chip--success .ico { color: var(--c-success-ink); } .chip--feature { background: #fff; border-color: var(--c-line); box-shadow: var(--shadow-sm); padding: 8px 16px; } .chip--feature .ico { color: var(--t-check); } button.chip, a.chip, .chip--btn { cursor: pointer; transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s; } button.chip:hover, a.chip:hover, .chip--btn:hover { border-color: var(--c-primary); color: var(--c-primary-dark); } button.chip:active, .chip--btn:active { transform: scale(.97); } .chip.is-active, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-fg); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--c-primary) 70%, transparent); } .chip.is-active:hover, .chip[aria-pressed="true"]:hover { color: var(--chip-on-fg); } .chip.is-active .ico, .chip[aria-pressed="true"] .ico, .chip[aria-selected="true"] .ico { color: var(--chip-on-ico); } .chip__count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: color-mix(in srgb, var(--c-soft) 70%, #fff); color: var(--c-primary-dark); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .chip.is-active .chip__count, .chip[aria-pressed="true"] .chip__count, .chip[aria-selected="true"] .chip__count { background: #fff; color: var(--c-primary); } /* ≥ 4.5:1 */ /* ============================================================ 7. KAD & PERMUKAAN PASTEL */ .card { position: relative; background: #fff; border: 1px solid color-mix(in srgb, var(--c-line) 80%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px; color: var(--t-body); } .card--hover { transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card--bordered { box-shadow: none; } .card--flat { box-shadow: none; border-color: transparent; background: var(--c-softer); } .card--soft { background: var(--c-softer); box-shadow: none; } /* Permukaan pastel (langit / lavender / pudina). --dark warisan = langit. */ .card--sky, .card--dark { background: var(--grad-sky); border-color: transparent; } .card--lavender { background: var(--grad-lavender); border-color: transparent; } .card--mint { background: var(--grad-mint); border-color: transparent; } .card--glass { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .card--pad-lg { padding: 28px; } @media (min-width: 1024px) { .card--pad-lg { padding: 40px; } } .card__icon { margin-bottom: 18px; } .card__title { font-size: 19px; margin: 0 0 8px; } .card__text { color: var(--t-muted); font-size: 15px; margin: 0; } .card__foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--t-line); display: flex; gap: 12px; align-items: center; justify-content: space-between; } .surface-sky { background: var(--grad-sky); } .surface-lavender { background: var(--grad-lavender); } .surface-mint { background: var(--grad-mint); } .surface-wash { background: var(--grad-wash); } /* Kad pameran subjek (gaya "Program Kami"): TS.site.subjectCard({title, text, href, tone, images}) */ .subject-cards { display: grid; gap: 18px; } @media (min-width: 768px) { .subject-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } @media (min-width: 1024px) { .subject-cards { gap: 24px; } } .subject-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; min-height: 220px; padding: 26px 24px 24px; border-radius: var(--radius-lg); color: var(--t-body); background: var(--grad-sky); border: 1px solid rgba(255, 255, 255, .7); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .subject-card:hover { color: var(--t-body); transform: translateY(-5px); box-shadow: var(--shadow-lg); } .subject-card--lavender { background: var(--grad-lavender); } .subject-card--mint { background: var(--grad-mint); } .subject-card__title { font-size: clamp(22px, 2.1vw, 28px); font-weight: 800; letter-spacing: -.03em; color: var(--c-ink); margin: 0 0 6px; max-width: 62%; } .subject-card__text { font-size: 15px; line-height: 1.5; color: var(--c-muted); margin: 0 0 22px; max-width: 58%; } .subject-card__go { margin-top: auto; } .subject-card__art { position: absolute; z-index: -1; right: -6px; bottom: -10px; width: 46%; max-width: 190px; aspect-ratio: 1; pointer-events: none; transition: transform .4s var(--ease); } .subject-card__art img { position: absolute; width: 78%; height: auto; right: 6%; bottom: 4%; filter: drop-shadow(0 18px 22px rgba(16, 21, 47, .18)); } .subject-card__art img + img { width: 46%; right: 58%; bottom: 0; transform: rotate(-10deg); } .subject-card:hover .subject-card__art { transform: translateY(-4px) rotate(-2deg); } @media (min-width: 768px) and (max-width: 1023px) { .subject-card__title, .subject-card__text { max-width: 100%; } .subject-card__art { width: 40%; opacity: .9; } .subject-card { min-height: 260px; } } /* ============================================================ 8. CHROME */ /* #site-top melekat: bar pengumuman (pilihan) skrol keluar, header kekal. */ .site-top { position: sticky; top: 0; z-index: 60; } .site-top.has-announce { top: calc(var(--announce-h) * -1); } /* Bar pengumuman (hanya bila settings.showAnnouncement === true) */ .announce { position: relative; z-index: 2; background: linear-gradient(90deg, color-mix(in srgb, var(--c-soft) 70%, #fff), var(--c-lavender)); color: var(--c-ink); font-size: 13px; font-weight: 600; } .announce__inner { display: flex; align-items: center; justify-content: center; gap: 12px; height: var(--announce-h); overflow: hidden; } .announce__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 16%, transparent); } .announce__list { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; } .announce__item { display: none; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .announce__item.is-on { display: inline-flex; animation: annIn .5s var(--ease); } .announce:not(.is-ready) .announce__item:first-child { display: inline-flex; } .announce__item.is-on ~ .announce__item.is-on::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--c-primary); margin: 0 14px; flex: none; } .announce__link { display: none; align-items: center; gap: 6px; color: var(--c-primary); font-weight: 700; white-space: nowrap; flex: none; } .announce__link:hover { color: var(--c-primary-dark); } @keyframes annIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (min-width: 1024px) { .announce__link { display: inline-flex; margin-left: 10px; } } /* Header putih melekat, garis rambut bawah */ .header { position: relative; background: rgba(255, 255, 255, .94); border-bottom: 1px solid rgba(16, 21, 47, .07); transition: box-shadow .3s var(--ease), background-color .3s; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .header { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); } } .site-top.is-scrolled .header { background: rgba(255, 255, 255, .96); box-shadow: 0 12px 30px -20px color-mix(in srgb, var(--c-primary) 45%, rgba(16, 21, 47, .5)); } .header__inner { display: flex; align-items: center; gap: 10px; height: var(--header-h); } html.is-booting .site-top, html.is-booting .site-top * { transition: none !important; } /* Jenama: tanda biru + tanda kata dwiton (atau logo dimuat naik) */ .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--c-ink); min-width: 0; margin-right: auto; border-radius: 10px; } .brand:hover { color: var(--c-ink); } /* Tanda: SVG sebaris (jubin gradien tema + "M" putih + kilauan emas) — sama seperti favicon.svg. */ .brand__mark { position: relative; display: block; width: 34px; height: 34px; flex: none; border-radius: 10px; box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--c-primary) 65%, transparent); } .brand__svg { display: block; width: 100%; height: 100%; } .brand__g1 { stop-color: var(--c-primary); } .brand__g2 { stop-color: var(--c-secondary); } .brand__logo { height: 42px; width: auto; max-width: 180px; object-fit: contain; } .brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; } .brand__name { display: block; font-weight: 800; font-size: 21px; letter-spacing: -.035em; white-space: nowrap; color: var(--c-ink); } .brand__name-b { color: var(--c-primary); background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand__tag { display: none; font-size: 11.5px; font-weight: 600; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; margin-top: 3px; letter-spacing: 0; } @media (max-width: 379px) { .brand__name { font-size: 18.5px; } .brand__mark { transform: scale(.9); transform-origin: left center; } } /* Navigasi desktop + menu lungsur */ .nav { display: none; } .header__actions { display: flex; align-items: center; gap: 8px; flex: none; } .header__portal { display: none; } .header__cta { display: none; min-height: 44px; padding: 11px 20px; font-size: 15px; gap: 8px; } .header__burger { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex: none; color: var(--c-ink); background: #fff; border: 1px solid var(--c-line-strong); transition: background-color .2s, border-color .2s; } .header__burger:hover { background: var(--c-softer); border-color: var(--c-primary); } @media (min-width: 380px) { .header__cta { display: inline-flex; flex: none; white-space: nowrap; } } @media (max-width: 479px) { .header__cta { padding: 9px 16px; font-size: 14px; min-height: 42px; } .header__cta .btn__arrow { display: none; } } @media (max-width: 429px) { .header__cta-more { display: none; } } @media (min-width: 1024px) { .header__cta { min-height: 48px; padding: 12px 22px; } } @media (min-width: 1024px) { .header__inner { gap: 20px; } .brand { margin-right: 0; } .nav { display: flex; align-items: center; justify-content: center; flex: 1; gap: 2px; min-width: 0; } .nav__item { position: relative; } .nav__link, .nav__btn { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 10px 12px; border-radius: var(--pill); font-size: 15px; font-weight: 600; color: var(--c-ink); white-space: nowrap; line-height: 1.3; transition: color .18s, background-color .18s; } .nav__btn .ico { width: 16px; height: 16px; color: var(--c-muted); transition: transform .25s var(--ease), color .2s; } .nav__link:hover, .nav__btn:hover, .nav__item.is-open > .nav__btn { color: var(--c-primary); background: color-mix(in srgb, var(--c-soft) 45%, transparent); } .nav__item.is-open > .nav__btn .ico { transform: rotate(180deg); color: var(--c-primary); } .nav__link.is-active, .nav__btn.is-active { color: var(--c-primary); } .nav__link.is-active::after, .nav__btn.is-active::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 3px; margin-left: -8px; border-radius: 3px; background: var(--grad-text); } .nav__btn.is-active::after { margin-left: -14px; } .nav__menu { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5; width: max-content; min-width: 300px; max-width: 360px; padding: 8px; background: #fff; border: 1px solid var(--c-line); border-radius: 20px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; } .nav__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .nav__item.is-open > .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav__menu-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--c-ink); transition: background-color .15s; } .nav__menu-link:hover, .nav__menu-link:focus-visible { background: var(--c-softer); color: var(--c-ink); } .nav__menu-link.is-active { background: color-mix(in srgb, var(--c-soft) 45%, #fff); } .nav__menu-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none; color: var(--c-primary); background: color-mix(in srgb, var(--c-soft) 60%, #fff); } .nav__menu-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .nav__menu-txt strong { font-size: 14.5px; font-weight: 700; color: var(--c-ink); } .nav__menu-txt small { font-size: 12.5px; color: var(--c-muted); margin-top: 2px; } .header__portal { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; border-radius: var(--pill); color: var(--c-ink); font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: color .2s, background-color .2s; } .header__portal .ico { color: var(--c-primary); } .header__portal:hover { color: var(--c-primary); background: var(--c-softer); } .header__portal-txt { display: none; } .header__burger { display: none; } } @media (min-width: 1280px) { .header__portal-txt { display: inline; } .nav { gap: 6px; } .nav__link, .nav__btn { padding: 10px 14px; } } /* Drawer mudah alih */ .drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; pointer-events: none; } .drawer.is-open { visibility: visible; pointer-events: auto; } .drawer__backdrop { position: absolute; inset: 0; background: rgba(16, 21, 47, .35); opacity: 0; transition: opacity .25s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .drawer.is-open .drawer__backdrop { opacity: 1; } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 390px); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s var(--ease); box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain; border-radius: 24px 0 0 24px; } .drawer.is-open .drawer__panel { transform: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--c-line); } .drawer__close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-softer); color: var(--c-ink); border: 1px solid var(--c-line); } .drawer__close:hover { background: color-mix(in srgb, var(--c-soft) 60%, #fff); } .drawer__label { margin: 16px 22px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); } .drawer__nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px 12px; } .drawer__link { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 10px; border-radius: 14px; color: var(--c-ink); font-weight: 600; font-size: 15.5px; } .drawer__link .ico { color: var(--c-primary); } .drawer__link-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--c-soft) 50%, #fff); flex: none; } .drawer__link:hover { background: var(--c-softer); color: var(--c-ink); } .drawer__link.is-active { background: color-mix(in srgb, var(--c-soft) 45%, #fff); color: var(--c-primary-dark); } .drawer__link.is-active .drawer__link-ico { background: var(--grad-primary); } .drawer__link.is-active .ico { color: #fff; } .drawer__link--sub { font-size: 14.5px; color: var(--c-muted); } .drawer__foot { margin-top: auto; padding: 16px 18px 22px; display: grid; gap: 10px; border-top: 1px solid var(--c-line); background: var(--c-softer); } .drawer__portal .ico { color: var(--c-primary); } .drawer__info { font-size: 13.5px; color: var(--c-muted); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-top: 4px; font-weight: 600; } .drawer__info:hover { color: var(--c-primary); } /* Footer cerah */ .footer { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 0; font-size: 15px; color: var(--c-text); background: linear-gradient(180deg, var(--c-softer) 0%, color-mix(in srgb, var(--c-soft) 22%, #fff) 100%); border-top: 1px solid var(--c-line); } .footer::before { content: ''; position: absolute; z-index: -1; width: 520px; height: 520px; right: -200px; top: -320px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--c-lavender) 90%, transparent), transparent 68%); } .footer__grid { display: grid; gap: 36px; } @media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } } @media (min-width: 1024px) { .footer { padding-top: 84px; } .footer__grid { gap: 40px; grid-template-columns: 1.35fr .8fr .9fr 1.25fr; } .footer__brand { grid-column: auto; } } .footer .brand { margin-bottom: 16px; } .footer__about { color: var(--c-muted); max-width: 340px; margin: 0 0 18px; } .footer__reg { font-size: 13px; color: var(--c-muted); margin: 0; } .footer__title { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); margin: 0 0 16px; } .footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer__links a { color: var(--c-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .footer__links a:hover { color: var(--c-primary); } .footer__links .ico { color: var(--c-primary); } .footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .footer__contact li { display: flex; gap: 12px; align-items: flex-start; } .footer__contact-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; color: var(--c-primary); background: #fff; box-shadow: var(--shadow-sm); } .footer__contact a, .footer__contact span { color: var(--c-text); font-weight: 600; word-break: break-word; padding-top: 6px; line-height: 1.45; } .footer__contact a[href^="tel:"], .footer__contact a[href*="wa.me"] { white-space: nowrap; } .footer__contact a:hover { color: var(--c-primary); } /* Nombor bernama (TS.q.contacts): nombor utama = ikon WhatsApp · "Sir Fahmy · 010-865 0799" · butang telefon bulat; nombor lain = ikon telefon · "Sir Ilmi · 014-884 1005" (pautan tel:) */ .footer__person { align-items: center !important; } .footer__contact-ico--wa { color: var(--c-wa-strong); } .footer__contact a.footer__wa, .footer__contact a.footer__tel { white-space: normal; padding-top: 0; min-width: 0; flex: 0 1 auto; } .footer__dot { color: var(--c-muted); padding-top: 0 !important; font-weight: 500; } .footer__contact .footer__wa .nowrap, .footer__contact .footer__tel .nowrap { padding-top: 0; } .footer__contact .footer__call { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; flex: none; margin-left: auto; color: var(--c-primary); background: #fff; border: 1px solid var(--c-line); transition: background .18s, color .18s, border-color .18s; } .footer__contact .footer__call:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } .drawer__contacts { display: grid; gap: 2px; justify-items: center; } .contact-list .contact-list__call { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; font-size: 13.5px; color: var(--c-primary); } .footer__hours { list-style: none; margin: 14px 0 0; padding: 14px 16px; display: grid; gap: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--c-line); } .footer__hours li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--c-muted); font-size: 13.5px; } .footer__hours span { font-weight: 700; color: var(--c-ink); } .social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .social__link { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--c-primary); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), background .18s, color .18s; } .social__link:hover { background: var(--c-primary); color: #fff; transform: translateY(-2px); border-color: var(--c-primary); } .footer__bottom { margin-top: 56px; border-top: 1px solid var(--c-line); padding: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; font-size: 13px; color: var(--c-muted); } .footer__legal { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; } .footer__bottom a { color: var(--c-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-line-strong); } .footer__bottom a:hover { color: var(--c-primary); text-decoration-color: currentColor; } .footer__logins { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; } @media (min-width: 1024px) and (max-width: 1403px) { .footer__bottom { padding-right: 70px; } } @media (max-width: 1023px) { body:not(.has-mobile-cta) .footer__bottom { padding-right: 76px; } } .footer__demo { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--pill); background: #fff; border: 1px dashed #E7C677; color: var(--c-warning-ink); font-weight: 600; } .footer__demo .ico { color: var(--c-warning-ink); } /* Telefon: nota berbilang baris → sudut bulat biasa (bukan pil) */ @media (max-width: 479px) { .footer__demo { border-radius: 12px; align-items: flex-start; } .footer__demo .ico { flex: none; margin-top: 4px; } } /* WhatsApp terapung & bar CTA mudah alih (cerah) */ .wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 58px; height: 58px; border-radius: 50%; background: var(--c-wa); color: #fff; display: none; place-items: center; box-shadow: 0 14px 30px -10px rgba(13, 128, 67, .55), 0 0 0 4px #fff; transition: transform .2s var(--ease), box-shadow .2s; } .wa-float:hover { color: #fff; transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 36px -10px rgba(13, 128, 67, .6), 0 0 0 4px #fff; } .wa-float__tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); padding: 7px 12px; border-radius: 10px; background: #fff; color: var(--c-ink); font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: var(--shadow); } .wa-float:hover .wa-float__tip, .wa-float:focus-visible .wa-float__tip { opacity: 1; transform: translate(0, -50%); } .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--c-line); box-shadow: 0 -12px 30px -18px color-mix(in srgb, var(--c-primary) 40%, rgba(16, 21, 47, .4)); transition: transform .3s var(--ease), opacity .3s; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .mobile-cta { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); } } .mobile-cta .btn { min-height: 48px; padding: 10px 18px; font-size: 15px; } .mobile-cta .btn--wa { --btn-bg: #fff; --btn-fg: var(--c-ink); --btn-bd: var(--c-line-strong); --btn-sh: none; } .mobile-cta .btn--wa .ico { color: var(--c-wa-strong); } .mobile-cta .btn--wa:hover { --btn-bg: var(--c-softer); } @media (max-width: 359px) { .mobile-cta .btn--wa { width: 50px; padding: 0; } .mobile-cta .btn--wa span { display: none; } } html.is-locked .mobile-cta { transform: translateY(140%); opacity: 0; } body.has-mobile-cta { padding-bottom: 76px; } @media (min-width: 1024px) { .mobile-cta { display: none; } body.has-mobile-cta { padding-bottom: 0; } .wa-float { display: grid; } } body:not(.has-mobile-cta) .wa-float { display: grid; } /* ============================================================ 9. HERO & WIDGET */ /* Cangkerang hero cerah generik (nama kelas warisan .hero-dark kekal — kini putih → cucian langit/lavender). */ .hero, .hero-dark { position: relative; isolation: isolate; overflow: hidden; padding: 40px 0 72px; background: var(--grad-wash); color: var(--t-body); } @media (min-width: 1024px) { .hero, .hero-dark { padding: 72px 0 120px; } } .hero-dark__grid, .hero__grid { display: grid; gap: 40px; align-items: center; } @media (min-width: 1024px) { .hero-dark__grid, .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; } } .hero .lead, .hero-dark .lead { color: var(--c-muted); } /* Percikan limau kecil (hiasan) — */ .spark { position: absolute; width: 54px; height: 54px; pointer-events: none; } .spark i { position: absolute; left: 50%; bottom: 0; width: 6px; height: 22px; margin-left: -3px; border-radius: 6px; background: var(--c-spark); transform-origin: 50% 100%; } .spark i:nth-child(1) { transform: rotate(-58deg) translateY(-6px); } .spark i:nth-child(2) { transform: rotate(-12deg) translateY(-12px); } .spark i:nth-child(3) { transform: rotate(34deg) translateY(-6px); height: 18px; } /* Pentas widget terapung:
img
…
*/ .float-stage { position: relative; } .float-stage > .widget { position: absolute; z-index: 2; } .pos-tl { top: 16px; left: 16px; } .pos-tr { top: 16px; right: 16px; } .pos-bl { bottom: 16px; left: 16px; } .pos-br { bottom: 16px; right: 16px; } .pos-ml { top: 50%; left: 16px; transform: translateY(-50%); } @media (min-width: 1024px) { .pos-tl { top: 10%; left: -40px; } .pos-tr { top: 7%; right: -24px; } .pos-bl { bottom: 12%; left: -48px; } .pos-br { bottom: 8%; right: -28px; } .pos-ml { left: -56px; } } /* Kad terapung putih (satu-satunya elemen "kaca") */ .widget { display: flex; align-items: center; gap: 12px; max-width: min(260px, calc(100% - 32px)); padding: 14px 16px 14px 14px; border-radius: 20px; box-shadow: 0 24px 50px -18px color-mix(in srgb, var(--c-primary) 35%, rgba(16, 21, 47, .3)), 0 2px 6px rgba(16, 21, 47, .05); line-height: 1.3; color: var(--c-text); } .widget__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: none; background: color-mix(in srgb, var(--c-soft) 70%, #fff); color: var(--c-primary); } .widget__icon--mint { background: var(--c-mint); color: var(--c-success-ink); } .widget__body { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .widget__label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); } .widget__value { font-size: 15px; font-weight: 800; color: var(--c-ink); line-height: 1.3; } .widget__meta { font-size: 12.5px; font-weight: 600; color: var(--c-muted); display: inline-flex; align-items: center; gap: 4px; } .widget__bar { display: block; width: 100%; height: 6px; border-radius: var(--pill); background: color-mix(in srgb, var(--c-soft) 70%, #fff); overflow: hidden; margin-top: 4px; } .widget__bar > span { display: block; height: 100%; width: var(--v, 60%); border-radius: inherit; background: var(--grad-text); } @media (max-width: 639px) { .widget { padding: 10px 12px 10px 10px; gap: 10px; border-radius: 16px; max-width: calc(100% - 24px); } .widget__icon { width: 34px; height: 34px; border-radius: 10px; } .widget__icon .ico { width: 17px; height: 17px; } .widget__value { font-size: 13px; } .widget__label { font-size: 10px; } .float-stage > .pos-tl, .float-stage > .pos-bl { left: 12px; } .float-stage > .pos-tr, .float-stage > .pos-br { right: 12px; } } /* Hero halaman dalam (TS.site.pageHero) — SENTIASA cerah: putih → cucian langit/lavender + lengkung bawah */ .page-hero { position: relative; isolation: isolate; overflow: hidden; padding: 28px 0 64px; background: var(--grad-wash); } .page-hero__deco { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; } .page-hero__deco--a { width: 420px; height: 420px; right: -140px; top: -170px; background: radial-gradient(circle, color-mix(in srgb, var(--c-soft) 95%, transparent), transparent 68%); } .page-hero__deco--b { width: 360px; height: 360px; right: 18%; bottom: -230px; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 40%, transparent), transparent 66%); } .page-hero__inner { position: relative; display: grid; gap: 32px; align-items: center; } .page-hero__copy { min-width: 0; } .page-hero__title { margin: 20px 0 14px; max-width: 18ch; font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -.04em; } .page-hero__text { color: var(--c-muted); font-size: var(--fs-lead); max-width: 600px; margin: 0; text-wrap: pretty; } .page-hero__copy > .btn-row, .page-hero__copy > .chips, .page-hero__copy > .trust-row, .page-hero__copy > .benefit-row { margin-top: 26px; } .page-hero__media { position: relative; isolation: isolate; } .page-hero__media::before { content: ''; position: absolute; z-index: -1; inset: 10% -4% -6% 8%; border-radius: 40px 40px 120px 40px; background: var(--grad-shape); transform: rotate(3deg); } .page-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px 28px 28px 96px; box-shadow: var(--shadow-lg); } .page-hero__media .spark { top: -18px; left: -6px; } @media (min-width: 1024px) { .page-hero { padding: 40px 0 104px; } .page-hero--image .page-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; } } @media (max-width: 1023px) { .page-hero__media { max-width: 560px; } .page-hero__media::before { inset: 8% -3% -5% 6%; } } .crumb { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: var(--pill); font-size: 13px; color: var(--c-muted); background: rgba(255, 255, 255, .85); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); } .crumb ol { display: contents; list-style: none; } .crumb li { display: inline-flex; align-items: center; gap: 6px; } .crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text); font-weight: 600; } .crumb a .ico { color: var(--c-primary); } .crumb a:hover { color: var(--c-primary); } .crumb__sep { color: var(--c-muted); display: inline-flex; } .crumb [aria-current] { color: var(--c-ink); font-weight: 700; } /* ============================================================ 10. KOMPONEN KANDUNGAN */ /* Statistik (bukan untuk laman utama — tiada nombor rekaan) */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .stat { position: relative; padding: 22px 18px; min-width: 0; } .stat:nth-child(2n) { border-left: 1px solid var(--t-line); } .stat:nth-child(n+3) { border-top: 1px solid var(--t-line); } .stat__value { display: block; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.04em; color: var(--c-primary); line-height: 1; font-variant-numeric: tabular-nums; } .stat__label { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 500; color: var(--t-muted); line-height: 1.4; } .stat__value .hl, .stat__accent { color: var(--t-hl); } @media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat { padding: 28px 26px; } .stat:nth-child(n) { border-top: 0; border-left: 1px solid var(--t-line); } .stat:first-child { border-left: 0; } } .stats--plain { background: transparent; border: 0; box-shadow: none; border-radius: 0; } .stats--plain .stat { padding: 4px 0 4px 18px; border: 0 !important; border-left: 2px solid var(--c-line-strong) !important; margin: 10px 0; } .stats--glass { background: rgba(255, 255, 255, .8); border-color: #fff; box-shadow: var(--shadow); } /* Senarai subjek berkumpulan */ .subject-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } @media (min-width: 768px) { .subject-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; } } .subject-group { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 22px 18px 14px; box-shadow: var(--shadow-sm); } .subject-group__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 12px; font-size: 19px; font-weight: 800; } .subject-group__title small { flex: none; padding: 4px 11px; border-radius: var(--pill); background: color-mix(in srgb, var(--c-soft) 60%, #fff); color: var(--c-primary-dark); font-size: 12.5px; font-weight: 700; letter-spacing: 0; } .subject-list { list-style: none; margin: 0; padding: 0; display: grid; } .subject-item { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 14px; transition: background-color .15s; } .subject-item + .subject-item { border-top: 1px solid var(--c-line); } .subject-item:hover { background: var(--c-softer); } .subject-item__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; background: color-mix(in srgb, var(--c-soft) 70%, #fff); color: var(--c-primary); } .subject-item:nth-child(3n+2) .subject-item__icon { background: var(--c-lavender); color: var(--c-primary-dark); } .subject-item:nth-child(3n+3) .subject-item__icon { background: var(--c-mint); color: var(--c-success-ink); } .subject-item__name { font-weight: 700; color: var(--c-ink); flex: 1; min-width: 0; font-size: 15.5px; } .subject-item__meta { font-size: 12.5px; font-weight: 600; color: var(--c-muted); white-space: nowrap; } /* Kad ciri */ .feature-grid { display: grid; gap: 16px; } @media (min-width: 640px) { .feature-grid--icon { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .feature-grid { gap: 24px; } .feature-grid--icon { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fcard { position: relative; background: #fff; border: 1px solid color-mix(in srgb, var(--c-line) 80%, transparent); border-radius: var(--radius-lg); padding: 26px; color: var(--t-body); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .fcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .fcard--check { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; } .fcard__check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--c-soft) 65%, #fff); color: var(--c-primary); } .fcard__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; margin-bottom: 20px; color: var(--c-primary); background: linear-gradient(145deg, color-mix(in srgb, var(--c-soft) 75%, #fff), color-mix(in srgb, var(--c-lavender) 85%, #fff)); } .feature-grid .fcard:nth-child(3n+2) .fcard__icon { background: var(--grad-lavender); color: var(--c-primary-dark); } .feature-grid .fcard:nth-child(3n+3) .fcard__icon { background: var(--grad-mint); color: var(--c-success-ink); } .fcard__title { font-size: 18px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; line-height: 1.35; letter-spacing: -.02em; } .fcard__text { color: var(--c-muted); font-size: 15px; margin: 0; line-height: 1.6; } .fcard__num { position: absolute; top: 22px; right: 24px; font-size: 13px; font-weight: 800; color: color-mix(in srgb, var(--c-primary) 35%, #fff); letter-spacing: .04em; } /* --dark warisan = pastel langit */ .fcard--dark { background: var(--grad-sky); border-color: transparent; box-shadow: none; } .fcard--dark:hover { box-shadow: var(--shadow); } .fcard--dark .fcard__icon { background: #fff; } .fcard--white { background: #fff; } /* Senarai tanda */ .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .check-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; color: var(--t-body); } .check-list__ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px; background: color-mix(in srgb, var(--t-check) 14%, transparent); color: var(--t-check); } .check-list > li > .ico { color: var(--t-check); margin-top: 2px; } .check-list--light { --t-check: #fff; } /* Kad pengajar + modal profil */ .tutor-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .tutor-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid color-mix(in srgb, var(--c-line) 80%, transparent); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); color: var(--t-body); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .tutor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .tutor-card__photo { position: relative; margin: 10px 10px 0; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--grad-sky); } .tutor-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .tutor-card:hover .tutor-card__photo img { transform: scale(1.04); } .tutor-card__photo .avatar { width: 100%; height: 100%; border-radius: 0; font-size: 40px; } .tutor-card__meta { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--pill); background: rgba(255, 255, 255, .92); color: var(--c-ink); font-size: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(16, 21, 47, .12); } .tutor-card__meta .ico { color: var(--c-primary); } .tutor-card__sample { position: absolute; right: 10px; top: 10px; } .tutor-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 4px; } .tutor-card__name { font-size: 17px; font-weight: 800; color: var(--c-ink); margin: 0; letter-spacing: -.02em; } .tutor-card__role { font-size: 13.5px; color: var(--c-muted); margin: 0; line-height: 1.45; } .tutor-card__subjects { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .tutor-card__more { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 18px 18px; padding: 10px 6px 10px 16px; border-radius: var(--pill); background: var(--c-softer); border: 1px solid var(--c-line); color: var(--c-ink); font-weight: 700; font-size: 14px; transition: background .2s, color .2s, border-color .2s; } .tutor-card__more .ico { display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #fff; color: var(--c-primary); box-shadow: 0 2px 6px rgba(16, 21, 47, .08); transition: transform .2s var(--ease); } .tutor-card__more:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } .tutor-card__more:hover .ico { transform: translateX(2px); } .tutor-profile { display: grid; gap: 22px; } @media (min-width: 640px) { .tutor-profile { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } } .tutor-profile__photo { width: 100%; max-width: 200px; aspect-ratio: 1; border-radius: 22px; object-fit: cover; box-shadow: var(--shadow); margin: 0 auto; } .tutor-profile__role { color: var(--c-primary); font-weight: 700; margin-bottom: 14px; } .tutor-profile dl { display: grid; gap: 12px; margin: 0 0 16px; padding: 16px; border-radius: 16px; background: var(--c-softer); border: 1px solid var(--c-line); } .tutor-profile dt { font-size: 11.5px; font-weight: 800; color: var(--c-muted); text-transform: uppercase; letter-spacing: .1em; } .tutor-profile dd { margin: 2px 0 0; font-weight: 600; color: var(--c-ink); } /* Kad tahap (jadual mini boleh kembang) */ .group-label { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; } .group-label + .level-grid { margin-bottom: 40px; } .level-grid { display: grid; gap: 16px; } @media (min-width: 768px) { .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; } } .level-card { background: #fff; border: 1px solid color-mix(in srgb, var(--c-line) 80%, transparent); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); color: var(--t-body); transition: box-shadow .25s; } .level-card:hover { box-shadow: var(--shadow); } .level-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; } .level-card__name { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.025em; } .level-card__sub { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--c-muted); } .level-card__price { text-align: right; line-height: 1; white-space: nowrap; } .level-card__price small { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); } .level-card__price strong { font-size: 26px; font-weight: 800; color: var(--c-primary); letter-spacing: -.035em; } .level-card__price span { font-size: 13px; font-weight: 600; color: var(--c-muted); } .level-card__hours { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 7px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--c-primary-dark); letter-spacing: 0; } .level-card__hours .ico { color: var(--c-primary); flex: none; } .level-card__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 18px; } .level-card__chips .chip { min-height: 28px; padding: 3px 11px; font-size: 12.5px; background: var(--c-softer); border-color: var(--c-line); } .level-card__toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 12px 22px; border-top: 1px solid var(--c-line); background: #fff; color: var(--c-ink); font-weight: 700; font-size: 14.5px; transition: background-color .2s; } .level-card__toggle:hover { background: var(--c-softer); } .level-card__toggle-l { display: inline-flex; align-items: center; gap: 10px; } .level-card__toggle-l .ico { color: var(--c-primary); } .level-card__chev { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--c-soft) 60%, #fff); color: var(--c-primary); transition: transform .25s var(--ease), background .2s, color .2s; } .level-card__toggle[aria-expanded="true"] .level-card__chev { transform: rotate(180deg); background: var(--c-primary); color: #fff; } .level-card__panel { padding: 4px 14px 16px; background: var(--c-softer); border-top: 1px solid var(--c-line); } .level-card__panel .btn { margin-top: 12px; } .mini-tt { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; } .mini-tt__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 11px 13px; border-radius: 12px; background: #fff; border: 1px solid var(--c-line); font-size: 14px; } .mini-tt__subj { font-weight: 700; color: var(--c-ink); } .mini-tt__when { grid-column: 1; color: var(--c-muted); font-size: 13px; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .mini-tt__badges { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } /* Kad pakej / harga cerah. Popular = sempadan biru + lencana gradien (bukan gelap). */ .pkg-grid { display: grid; gap: 20px; align-items: stretch; } @media (min-width: 640px) and (max-width: 1023px) { .pkg-grid { max-width: 560px; margin-left: auto; margin-right: auto; } } @media (min-width: 1024px) { .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 16px; } } /* Satu / dua pakej sahaja: grid dipusatkan (tiada lajur kosong). */ .pkg-grid--1 { max-width: 440px; margin-left: auto; margin-right: auto; } @media (min-width: 1024px) { .pkg-grid--1 { grid-template-columns: minmax(0, 1fr); } .pkg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-left: auto; margin-right: auto; } } .pkg-note { margin: 24px auto 0; } .pkg-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 30px 26px 26px; background: #fff; border: 1px solid color-mix(in srgb, var(--c-line) 80%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--t-body); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .pkg-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .pkg-card__name { font-size: 20px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.025em; } .pkg-card__tagline { font-size: 14px; color: var(--c-muted); margin: 0; line-height: 1.45; } .pkg-card__badge { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--pill); background: color-mix(in srgb, var(--c-soft) 65%, #fff); color: var(--c-primary-dark); font-size: 12px; font-weight: 800; white-space: nowrap; letter-spacing: .01em; } .pkg-card__badge .ico { width: 13px; height: 13px; fill: currentColor; } .pkg-card__price { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--c-ink); } .pkg-card__price strong { font-size: clamp(42px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--c-ink); } .pkg-card__cur { font-size: .42em; font-weight: 800; letter-spacing: -.01em; vertical-align: .9em; margin-right: 3px; color: var(--c-primary); } .pkg-card__price > span { color: var(--c-muted); font-weight: 600; font-size: 15px; } .pkg-card__limit { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 22px; padding: 6px 12px; border-radius: var(--pill); font-size: 13px; font-weight: 700; color: var(--c-primary-dark); background: color-mix(in srgb, var(--c-soft) 45%, #fff); } .pkg-card__limit .ico { color: var(--c-primary); } .pkg-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; } .pkg-card__meta .pkg-card__limit { margin: 0; } .pkg-card__levels { color: var(--t-head, var(--c-primary-dark)); background: var(--c-softer); border: 1px solid var(--c-line); } .pkg-card__extra { color: var(--c-ink); background: color-mix(in srgb, var(--c-warning-bg, #FFF6DD) 70%, #fff); } .pkg-card__extra > span { white-space: normal; } /* Jam kelas LIVE sebulan (semua subjek) — satu baris jelas di bawah harga. */ .pkg-card__hours { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--c-muted); line-height: 1.4; } .pkg-card__hours .ico { flex: none; color: var(--c-primary); } .pkg-card__hours strong { color: var(--c-ink); font-weight: 700; } .pkg-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .pkg-card__body .check-list { width: 100%; padding-top: 22px; border-top: 1px solid var(--c-line); font-size: 15px; } .pkg-card__foot { display: grid; gap: 10px; margin-top: 26px; } .pkg-card.is-popular { border: 2px solid var(--c-primary); padding: 34px 25px 25px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-soft) 40%, #fff) 0%, #fff 34%); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--c-primary) 45%, transparent), 0 2px 6px rgba(16, 21, 47, .05); } .pkg-card.is-popular .pkg-card__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 6px 16px; background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-btn); } .pkg-card.is-popular .pkg-card__price strong { color: var(--c-primary-dark); } @media (min-width: 1024px) { .pkg-card.is-popular { transform: translateY(-10px); } .pkg-card.is-popular:hover { transform: translateY(-14px); } } /* Kad testimoni */ .testi-grid { display: grid; gap: 18px; } @media (min-width: 640px) { .testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .testi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } .testi-card { position: relative; display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 26px; background: #fff; border: 1px solid color-mix(in srgb, var(--c-line) 80%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--t-body); overflow: hidden; } .testi-card__quote { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; color: var(--c-primary); background: color-mix(in srgb, var(--c-soft) 60%, #fff); } .testi-card__top { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .testi-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .testi-card__text { position: relative; flex: 1; margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--c-text); } .testi-card__result { margin-top: -4px; } .testi-card__author { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--c-line); } .testi-card__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .testi-card__name { font-weight: 800; font-size: 15px; color: var(--c-ink); } .testi-card__role { font-size: 13px; color: var(--c-muted); } .testi-card .chip { min-height: 28px; padding: 3px 10px; font-size: 12.5px; } .testi-card.is-sample { background: linear-gradient(180deg, #fff 0%, #fff 70%, var(--c-softer) 100%); } .avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; font-weight: 800; font-size: 15px; color: var(--c-primary-dark); background: linear-gradient(145deg, var(--c-soft), var(--c-lavender)); letter-spacing: .02em; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .stars { display: inline-flex; gap: 2px; color: var(--t-star); } .stars .ico { fill: currentColor; stroke: currentColor; } .stars .ico.is-off { fill: var(--c-line); stroke: var(--c-line-strong); } /* Grid pencapaian */ .results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (min-width: 1024px) { .results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } } .result-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 22px 20px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--t-body); } .result-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px; background: color-mix(in srgb, var(--c-soft) 60%, #fff); color: var(--c-primary); } .result-card__value { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.04em; color: var(--c-ink); line-height: 1.05; } .result-card__label { font-weight: 600; color: var(--c-text); font-size: 14.5px; line-height: 1.4; } .result-card__name { font-size: 12.5px; color: var(--c-muted); margin-top: 4px; } .result-card--dark { background: var(--grad-sky); border-color: transparent; } .result-card--dark .result-card__icon { background: #fff; } /* Kad promosi & hubungi */ .promo-wrap { display: grid; gap: 20px; align-items: stretch; } @media (min-width: 1024px) { .promo-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; } } .promo-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; color: var(--t-body); } .promo-card__img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; } .promo-card__bar { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 24px 24px 0; padding: 6px 13px; border-radius: var(--pill); background: var(--c-lavender); color: var(--c-primary-dark); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .promo-card__body { padding: 16px 24px 26px; } .promo-card__headline { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; margin: 0 0 10px; } .promo-card__price { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 8px 14px; border-radius: 12px; font-size: 16px; font-weight: 800; color: var(--c-ink); background: var(--c-softer); border: 1.5px dashed var(--c-line-strong); } .promo-card .check-list { margin-bottom: 4px; } .promo-card .cta-block { margin-top: 24px; justify-content: flex-start; align-items: flex-start; text-align: left; } .promo-card__note { font-size: 12.5px; color: var(--c-muted); margin: 16px 0 0; } @media (min-width: 640px) { .promo-card__body { padding: 18px 32px 32px; } .promo-card__bar { margin: 28px 32px 0; } } .contact-card { position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 26px 22px; color: var(--t-body); } @media (min-width: 640px) { .contact-card { padding: 32px 30px; } } .contact-card__title { font-size: 22px; font-weight: 800; margin: 0 0 8px; } .contact-card__text { color: var(--c-muted); font-size: 15px; margin: 0 0 20px; } .contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .contact-list li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; } .contact-list li + li { border-top: 1px solid var(--c-line); } .contact-list__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; background: color-mix(in srgb, var(--c-soft) 60%, #fff); color: var(--c-primary); } .contact-list__icon--wa { background: #E3F7EA; color: var(--c-wa-strong); } .contact-list small { display: block; font-size: 11.5px; font-weight: 800; color: var(--c-muted); text-transform: uppercase; letter-spacing: .1em; } .contact-list a, .contact-list span { color: var(--c-ink); font-weight: 600; word-break: break-word; } .contact-list a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; } .contact-card__actions { display: grid; gap: 10px; margin-top: 20px; } @media (min-width: 480px) { .contact-card__actions { grid-template-columns: 1fr 1fr; } } /* Langkah bernombor. .steps--flow = 4 langkah bersambung mendatar pada desktop. */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; } .steps__item { position: relative; display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid color-mix(in srgb, var(--c-line) 80%, transparent); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); } .steps__num { counter-increment: step; position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--grad-primary); color: #fff; font-weight: 800; box-shadow: var(--shadow-btn); } .steps__num::before { content: counter(step, decimal-leading-zero); font-size: 14px; } .steps__title { font-size: 17px; margin: 2px 0 4px; } .steps__text { margin: 0; color: var(--c-muted); font-size: 14.5px; } .steps__text a { font-weight: 700; } @media (min-width: 1024px) { .steps--flow { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 24px; } .steps--flow .steps__item { flex-direction: column; gap: 14px; padding: 26px 24px; } .steps--flow .steps__item:not(:last-child)::after { content: ''; position: absolute; top: 47px; left: calc(24px + 44px + 10px); right: -22px; height: 2px; z-index: 0; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-primary) 45%, transparent) 0 6px, transparent 6px 12px); } } /* Keadaan kosong & galeri */ .empty { text-align: center; padding: 40px 20px; color: var(--c-muted); background: #fff; border: 1.5px dashed var(--c-line-strong); border-radius: var(--radius-lg); } .empty .ico { color: var(--c-primary); margin: 0 auto 12px; } .empty__title { color: var(--c-ink); font-weight: 800; font-size: 17px; margin-bottom: 4px; } .gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1024px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } .gallery__item { position: relative; display: block; padding: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--c-soft); } .gallery__item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s var(--ease); } .gallery__item:hover img { transform: scale(1.05); } .center-row { display: flex; justify-content: center; margin-top: 32px; } /* ============================================================ 11. BORANG */ .form { display: grid; gap: 18px; } .form-grid { display: grid; gap: 16px 18px; } @media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--full, .form-grid > .form-section, .form-grid > .alert { grid-column: 1 / -1; } } .form-section { border: 0; padding: 0; margin: 0; min-width: 0; } .form-section__title { font-size: 18px; font-weight: 800; color: var(--c-ink); margin: 0 0 4px; display: flex; align-items: center; gap: 10px; padding: 0; } .form-section__title .ico { color: var(--c-primary); } .form-section__text { color: var(--c-muted); font-size: 14px; margin: 0 0 16px; } .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .label { font-weight: 700; font-size: 14px; color: var(--c-ink); } .label .req, .req { color: var(--c-danger-ink); margin-left: 2px; } .label .opt { color: var(--c-muted); font-weight: 500; font-size: 13px; } .control, .input, .select, .textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid var(--c-line-strong); border-radius: 14px; background: #fff; color: var(--c-ink); font-size: 16px; line-height: 1.4; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s, background-color .15s; } .textarea { min-height: 120px; resize: vertical; } .select { padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234F5B75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .control::placeholder, .input::placeholder, .textarea::placeholder { color: var(--c-muted); opacity: 1; } .control:hover, .input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-line-strong)); } .control:focus, .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 16%, transparent); } .control:disabled, .input:disabled, .select:disabled, .textarea:disabled { background: var(--c-softer); color: var(--c-muted); cursor: not-allowed; } .input-icon { position: relative; } .input-icon > .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; } .input-icon > .input, .input-icon > .control { padding-left: 46px; } .input-group { display: flex; } .input-group__addon { display: grid; place-items: center; padding: 0 14px; border: 1.5px solid var(--c-line-strong); border-right: 0; border-radius: 14px 0 0 14px; background: var(--c-softer); color: var(--c-muted); font-weight: 700; font-size: 14.5px; } .input-group .input { border-radius: 0 14px 14px 0; } .help { font-size: 13px; color: var(--c-muted); margin: 0; line-height: 1.5; } .error-text { font-size: 13px; color: var(--c-danger-ink); margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; } .field.is-invalid .control, .field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea, .control.is-invalid, .input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--c-danger); background-color: #FFFAFA; } .field.is-invalid .control:focus, .field.is-invalid .input:focus, .field.is-invalid .select:focus, .field.is-invalid .textarea:focus { box-shadow: 0 0 0 4px rgba(214, 69, 69, .16); } .field.is-valid .control, .field.is-valid .input, .field.is-valid .select, .field.is-valid .textarea { border-color: var(--c-success); } .field.is-invalid .label { color: var(--c-danger-ink); } /* Kotak semak & radio tersuai */ .check { display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--c-text); } .check input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; flex: none; cursor: pointer; border: 1.5px solid var(--c-line-strong); border-radius: 7px; background: #fff center / 14px no-repeat; transition: background-color .15s, border-color .15s, box-shadow .15s; } .check input[type="radio"] { border-radius: 50%; } .check input:hover { border-color: var(--c-primary); } .check input:checked { background-color: var(--c-primary); border-color: var(--c-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 5px #fff; } .check input:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; } .check input:disabled { opacity: .5; cursor: not-allowed; } .check.is-invalid input, .field.is-invalid .check input { border-color: var(--c-danger); } .check-row { display: flex; flex-wrap: wrap; gap: 12px 24px; } /* Kawalan bersegmen */ .seg { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; border-radius: var(--pill); background: var(--c-softer); border: 1px solid var(--c-line); overflow-x: auto; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } .seg__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: var(--pill); font-size: 14px; font-weight: 700; color: var(--c-muted); white-space: nowrap; transition: background-color .18s, color .18s, box-shadow .18s; } .seg__btn:hover { color: var(--c-ink); } .seg__btn.is-active, .seg__btn[aria-pressed="true"], .seg__btn[aria-selected="true"], .seg__btn[aria-checked="true"] { background: #fff; color: var(--c-primary-dark); box-shadow: 0 2px 10px color-mix(in srgb, var(--c-primary) 16%, rgba(16, 21, 47, .06)); } .seg__btn .chip__count { background: color-mix(in srgb, var(--c-soft) 60%, #fff); } .seg--block { display: flex; } .seg--block .seg__btn { flex: 1; justify-content: center; } /* Kad pilihan (checkbox/radio): */ .choice-grid { display: grid; gap: 12px; } @media (min-width: 640px) { .choice-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .choice-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 639px) { .choice-grid--xs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .choice { position: relative; display: block; cursor: pointer; } .choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .choice__box { position: relative; display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 16px 46px 16px 16px; background: #fff; border: 1.5px solid var(--c-line-strong); border-radius: 16px; transition: border-color .15s, box-shadow .15s, background-color .15s; } .choice__box::after { content: ''; position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--c-line-strong); background: #fff center / 14px no-repeat; } .choice__input[type="radio"] + .choice__box::after { border-radius: 50%; } .choice:hover .choice__box { border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-line-strong)); } .choice__input:checked + .choice__box { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-soft) 22%, #fff); box-shadow: 0 0 0 1px var(--c-primary), 0 14px 26px -18px color-mix(in srgb, var(--c-primary) 70%, transparent); } .choice__input:checked + .choice__box::after { border-color: var(--c-primary); background-color: var(--c-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .choice__input:focus-visible + .choice__box { outline: 3px solid var(--c-primary); outline-offset: 3px; } .choice__input:disabled + .choice__box { opacity: .55; cursor: not-allowed; background: var(--c-softer); } .choice.is-invalid .choice__box, .choice-grid.is-invalid .choice__box { border-color: var(--c-danger); } .choice__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; background: color-mix(in srgb, var(--c-soft) 60%, #fff); color: var(--c-primary); } .choice__input:checked + .choice__box .choice__icon { background: var(--grad-primary); color: #fff; } .choice__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .choice__title { font-weight: 700; color: var(--c-ink); line-height: 1.3; } .choice__meta { font-size: 13px; color: var(--c-muted); line-height: 1.45; } .choice__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .choice__price { font-weight: 800; color: var(--c-ink); } .choice--center .choice__box { flex-direction: column; align-items: center; text-align: center; padding: 16px 12px; } .choice--center .choice__box::after { display: none; } /* Stepper & kemajuan */ .stepper { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 8px; counter-reset: stp; } .stepper__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; position: relative; min-width: 0; } .stepper__step::before { content: ''; position: absolute; top: 19px; left: calc(-50% + 24px); right: calc(50% + 24px); height: 2px; border-radius: 2px; background: var(--c-line-strong); } .stepper__step:first-child::before { display: none; } .stepper__num { counter-increment: stp; position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1.5px solid var(--c-line-strong); color: var(--c-muted); font-weight: 800; transition: background .2s, border-color .2s, box-shadow .2s; } .stepper__num::before { content: counter(stp); } .stepper__label { font-size: 13px; font-weight: 700; color: var(--c-muted); line-height: 1.3; } .stepper__step.is-active .stepper__num { background: var(--grad-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-primary) 16%, transparent); } .stepper__step.is-active .stepper__label { color: var(--c-ink); } .stepper__step.is-done .stepper__num { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } .stepper__step.is-done .stepper__num::before { content: '\2713'; } .stepper__step.is-done::before, .stepper__step.is-active::before { background: var(--c-primary); } .progress { height: 8px; border-radius: var(--pill); background: color-mix(in srgb, var(--c-soft) 70%, #fff); overflow: hidden; } .progress__bar { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad-text); transition: width .35s var(--ease); } .form-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 8px; } .form-actions--end { justify-content: flex-end; } @media (max-width: 479px) { .form-actions .btn { flex: 1 1 100%; } } .summary-box { background: var(--c-softer); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 18px 20px; } .summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14.5px; } .summary-row + .summary-row { border-top: 1px dashed var(--c-line-strong); } .summary-row strong { color: var(--c-ink); text-align: right; } .summary-row--total { font-size: 17px; font-weight: 800; color: var(--c-ink); } .summary-row--total strong { color: var(--c-primary-dark); font-size: 20px; } /* Makluman */ .alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; border: 1px solid; line-height: 1.55; } .alert > .ico { margin-top: 2px; flex: none; } .alert--info { background: var(--c-info-bg); border-color: #CDDDFB; color: #183F8C; } .alert--success { background: var(--c-success-bg); border-color: #C6ECD9; color: #0A5139; } .alert--warning { background: var(--c-warning-bg); border-color: #F5E0A8; color: #6A4500; } .alert--error { background: var(--c-danger-bg); border-color: #F6CBCB; color: #8E2020; } .alert strong { color: inherit; } /* ============================================================ 12. TAB, JADUAL, PENAPIS */ .tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--c-line); overflow-x: auto; scrollbar-width: none; margin-bottom: 24px; } .tabs__list::-webkit-scrollbar { display: none; } .tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 12px 16px; font-size: 15px; font-weight: 700; color: var(--c-muted); white-space: nowrap; border-radius: 10px 10px 0 0; transition: color .18s, background-color .18s; } .tab:hover { color: var(--c-ink); } .tab[aria-selected="true"], .tab.is-active { color: var(--c-primary-dark); } .tab[aria-selected="true"]::after, .tab.is-active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad-text); } .tab .chip__count { margin-left: 2px; } .tabs--pill .tabs__list { display: inline-flex; max-width: 100%; border: 1px solid var(--c-line); padding: 4px; border-radius: var(--pill); background: var(--c-softer); gap: 4px; } .tabs--pill .tab { min-height: 40px; padding: 9px 18px; border-radius: var(--pill); color: var(--c-muted); } .tabs--pill .tab:hover { color: var(--c-ink); background: #fff; } .tabs--pill .tab[aria-selected="true"] { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-btn); } .tabs--pill .tab[aria-selected="true"] .chip__count { background: #fff; color: var(--c-primary); } .tabs--pill .tab::after { display: none; } .tabs__panel:focus-visible { outline-offset: 6px; } /* Jadual */ .table-wrap { width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .table th, .table td { padding: 14px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-line); } .table thead th { background: var(--c-softer); color: var(--c-muted); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .table--dark thead th, .table--primary thead th { background: color-mix(in srgb, var(--c-soft) 55%, #fff); color: var(--c-primary-dark); } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background-color .15s; } .table tbody tr:hover td { background: color-mix(in srgb, var(--c-softer) 60%, #fff); } .table--striped tbody tr:nth-child(even) td { background: #FAFBFE; } .table--compact th, .table--compact td { padding: 9px 12px; } .table .num, .table .ta-r { text-align: right; font-variant-numeric: tabular-nums; } .table .ta-c { text-align: center; } .table__sub { display: block; font-size: 12.5px; color: var(--c-muted); } .table__group td { background: color-mix(in srgb, var(--c-soft) 40%, #fff) !important; font-weight: 800; color: var(--c-primary-dark); font-size: 13px; letter-spacing: .04em; } @media (max-width: 767px) { .table--cards thead { display: none; } .table--cards, .table--cards tbody, .table--cards tr, .table--cards td { display: block; width: 100%; } .table-wrap:has(.table--cards) { background: transparent; box-shadow: none; overflow: visible; border: 0; } .table--cards tr { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 12px; padding: 8px 4px; } .table--cards td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 8px 14px; text-align: right; } .table--cards td::before { content: attr(data-label); font-weight: 700; color: var(--c-muted); text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; } .table--cards td[data-label=""]::before, .table--cards td:not([data-label])::before { display: none; } .table--cards tbody tr:hover td { background: transparent; } } /* Bar penapis */ .filter-bar { display: grid; gap: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); margin-bottom: 24px; } @media (min-width: 1024px) { .filter-bar { grid-template-columns: repeat(auto-fit, minmax(200px, auto)); align-items: end; padding: 20px 24px; } .filter-bar > .filter-group--grow { grid-column: 1 / -1; } } .filter-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .filter-group__label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); } .filter-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .filter-scroll::-webkit-scrollbar { display: none; } .filter-scroll > * { flex: none; } .filter-result { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-muted); margin: 0 0 16px; } .filter-result strong { color: var(--c-ink); } .search-box { position: relative; } .search-box .ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; } .search-box .input { padding-left: 50px; border-radius: var(--pill); min-height: 54px; } .legend { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 13.5px; color: var(--c-muted); } /* ============================================================ 13. MODAL, TOAST, AKORDION, KARUSEL */ .modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal__backdrop { position: absolute; inset: 0; background: rgba(16, 21, 47, .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s ease; } .modal__dialog { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 24px; box-shadow: var(--shadow-dark); animation: pop .26s var(--ease); overflow: hidden; color: var(--t-body); } .modal__dialog--sm { max-width: 440px; } .modal__dialog--lg { max-width: 800px; } .modal__dialog--xl { max-width: 1040px; } .modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--c-line); } .modal__title { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -.02em; } .modal__close { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--c-ink); background: var(--c-softer); border: 1px solid var(--c-line); flex: none; transition: background-color .2s; } .modal__close:hover { background: color-mix(in srgb, var(--c-soft) 60%, #fff); } .modal__body { padding: 22px; overflow-y: auto; overscroll-behavior: contain; } .modal__foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--c-line); background: var(--c-softer); } @media (max-width: 479px) { .modal { align-items: flex-end; padding: 0; } .modal__dialog { border-radius: 24px 24px 0 0; max-height: 92vh; max-height: 92dvh; animation: sheet .3s var(--ease); } .modal__foot .btn { flex: 1 1 auto; } } .modal--image .modal__dialog, .modal--image .modal__body { background: var(--c-softer); } .modal--image .modal__body { padding: 0; } .modal--image .modal__body img { width: 100%; max-height: 75vh; object-fit: contain; } .modal--video .modal__body { padding: 0; background: #0B0F1E; } /* pentas video sahaja (konvensyen) */ @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } .toasts { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 200; display: grid; gap: 10px; width: min(92vw, 420px); pointer-events: none; } @media (min-width: 1024px) { .toasts { bottom: 28px; } } .toast { display: flex; align-items: center; gap: 12px; padding: 13px 18px 13px 14px; border-radius: 16px; background: #fff; color: var(--c-ink); font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-lg); pointer-events: auto; animation: pop .25s var(--ease); line-height: 1.45; border: 1px solid var(--c-line); border-left: 4px solid var(--c-primary); } .toast .ico { flex: none; } .toast--success { border-left-color: var(--c-success); } .toast--success .ico { color: var(--c-success); } .toast--error { border-left-color: var(--c-danger); } .toast--error .ico { color: var(--c-danger); } .toast--warning { border-left-color: var(--c-warning); } .toast--warning .ico { color: var(--c-warning); } .toast--info .ico { color: var(--c-primary); } .toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; } .accordion { display: grid; gap: 12px; } .acc-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); color: var(--t-body); transition: border-color .2s, box-shadow .2s; } .acc-item:hover { border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-line)); } .acc-item.is-open { border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-line)); box-shadow: var(--shadow); } .acc-h { margin: 0; font-size: inherit; letter-spacing: 0; } .acc-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 60px; padding: 16px 20px; text-align: left; font-weight: 700; font-size: 16px; color: var(--c-ink); line-height: 1.45; border-radius: inherit; } .acc-q__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--c-soft) 55%, #fff); color: var(--c-primary); transition: transform .25s var(--ease), background .2s, color .2s; } .acc-item.is-open .acc-q__icon { transform: rotate(180deg); background: var(--c-primary); color: #fff; } .acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease), visibility .3s; visibility: hidden; } .acc-item.is-open .acc-a { grid-template-rows: 1fr; visibility: visible; } .acc-a__inner { overflow: hidden; min-height: 0; } .acc-a__content { padding: 0 20px 20px; color: var(--c-text); font-size: 15px; line-height: 1.7; } .acc-item .badge { margin-right: 8px; } .carousel { position: relative; } .car-track { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 22px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .car-track::-webkit-scrollbar { display: none; } .car-track:focus-visible { outline-offset: 4px; } .car-slide { scroll-snap-align: start; min-width: 0; } @media (min-width: 640px) { .car-track { grid-auto-columns: calc((100% - 16px) / 2); } } @media (min-width: 1024px) { .car-track { grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; } .carousel--4 .car-track { grid-auto-columns: calc((100% - 72px) / 4); } } .car-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; } .car-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--c-primary); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); transition: background .2s, color .2s, border-color .2s, opacity .2s; } .car-btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } .car-btn:disabled { opacity: .4; cursor: default; background: #fff; color: var(--c-primary); border-color: var(--c-line); } .car-dots { display: flex; gap: 8px; align-items: center; } .car-dot { width: 8px; height: 8px; border-radius: var(--pill); background: var(--c-line-strong); transition: width .25s var(--ease), background .25s; padding: 0; } .car-dot.is-active { width: 26px; background: var(--c-primary); } .carousel.is-static .car-controls { display: none; } /* ============================================================ 14. ANIMASI & UTILITI */ /* Kemunculan halus (fade + naik 14px) bila elemen [data-reveal] memasuki skrin. */ .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--reveal-delay, 0s); } .js [data-reveal].is-visible { opacity: 1; transform: none; } .js [data-reveal].is-instant { transition: none; } /* Apungan perlahan (kad hero) — dimatikan untuk gerakan dikurangkan. */ .float-anim { animation: floatY 6s ease-in-out infinite; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js [data-reveal] { opacity: 1; transform: none; } .float-anim { animation: none; } .car-track { scroll-behavior: auto; } .btn:hover, .fcard:hover, .card--hover:hover, .tutor-card:hover, .pkg-card:hover, .subject-card:hover, .social__link:hover { transform: none; } .pkg-card.is-popular:hover { transform: translateY(-10px); } } @media print { .site-top, .footer, .wa-float, .mobile-cta, .drawer, .toasts, .cta-block, .section--band { display: none !important; } body.has-mobile-cta { padding-bottom: 0; } .js [data-reveal] { opacity: 1; transform: none; } } .mt-0 { margin-top: 0 !important; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mb-0 { margin-bottom: 0 !important; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mx-auto { margin-left: auto; margin-right: auto; } .w-full { width: 100%; } .max-narrow { max-width: var(--narrow); margin-left: auto; margin-right: auto; } .nowrap { white-space: nowrap; } .rounded { border-radius: var(--radius); } .shadow { box-shadow: var(--shadow); } .divider { height: 1px; background: var(--t-line); border: 0; margin: 32px 0; } @media (max-width: 639px) { .hide-sm { display: none !important; } } @media (min-width: 640px) { .show-sm { display: none !important; } } @media (max-width: 1023px) { .hide-md { display: none !important; } } @media (min-width: 1024px) { .show-md { display: none !important; } }