/* styles.css — TOEFL Prep Hub Design system "Classical" — mengikuti UI_Mockup_Toeflibt_Website-handoff. Editorial, krem hangat, aksen brass, judul Cormorant Garamond + isi Lora. Warna sebagai garis/stroke, bukan blok penuh. Kartu berbingkai tipis, tombol outline. Token CSS di bawah adalah SUMBER KEBENARAN warna/tipografi; kelas Tailwind (indigo/slate/dst di index.html) sudah diselaraskan ke nilai hex yang SAMA PERSIS dengan token ini, supaya konten yang dirender lewat JavaScript (soal latihan, dsb) tetap konsisten. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201f1d; --color-accent: #b68235; --color-accent-2: #ac803e; --color-divider: color-mix(in srgb, #201f1d 16%, transparent); --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3; --color-neutral-400: #bab6b6; --color-neutral-500: #9b9797; --color-neutral-600: #7d7979; --color-neutral-700: #605d5d; --color-neutral-800: #444141; --color-neutral-900: #2d2b2b; --color-accent-100: #fff3e4; --color-accent-200: #ffe3bf; --color-accent-300: #facb8d; --color-accent-400: #e1ad66; --color-accent-500: #c28d41; --color-accent-600: #a06f24; --color-accent-700: #7d5411; --color-accent-800: #5a3b0a; --color-accent-900: #3a270d; --color-accent-2-100: #fff3e4; --color-accent-2-200: #ffe3be; --color-accent-2-300: #f5cd96; --color-accent-2-400: #dbaf70; --color-accent-2-500: #bc8f4e; --color-accent-2-600: #9b7232; --color-accent-2-700: #79561f; --color-accent-2-800: #573d14; --color-accent-2-900: #382810; /* "Navy" diganti warna gelap hangat (bukan biru) — coklat tua/ink — dipakai untuk panel login & kartu hero dashboard, supaya tetap selaras dengan identitas krem/brass "Classical" tanpa kesan biru. */ --navy: #241f1a; --navy-darker: #17140f; --font-heading: "Cormorant Garamond", system-ui, serif; --font-heading-weight: 600; --font-body: "Lora", system-ui, serif; --space-1: 4.6px; --space-2: 9.2px; --space-3: 13.8px; --space-4: 18.4px; --space-6: 27.6px; --space-8: 36.8px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent); } /* Pengaturan tampilan: ukuran font (skala terhadap root, jadi ikut mempengaruhi semua ukuran berbasis rem termasuk kelas utility Tailwind text-*) dan tema gelap (meng-override token warna dasar, DITAMBAH override kelas Tailwind literal umum seperti bg-white/text-slate-*/border-slate-* di bawah supaya area soal/dashboard yang tidak memakai token CSS ini pun ikut berganti tema — elemen dengan warna inline yang sangat spesifik/jarang di luar daftar ini mungkin masih terlewat). Diatur lewat atribut di elemen , lihat setAppTheme()/setAppFontSize() di js/08-utils-misc.js. */ html[data-fontsize="sm"] { font-size: 15px; } html[data-fontsize="md"] { font-size: 16px; } html[data-fontsize="lg"] { font-size: 18px; } html[data-theme="dark"] { --color-bg: #17140f; --color-surface: #211c16; --color-text: #efe9e2; --color-divider: color-mix(in srgb, #efe9e2 18%, transparent); --navy: #0d0b09; --navy-darker: #060504; } /* Sebagian besar layar soal/dashboard dibangun dengan kelas utility Tailwind literal (bg-white, text-slate-900, dst) yang tidak membaca token CSS di atas — override luas di sini supaya tema gelap tetap menjangkau area tersebut juga, bukan cuma bagian yang sudah dari awal memakai var(--color-bg)/var(--color-text)/dst. */ html[data-theme="dark"] .bg-white { background-color: var(--color-surface) !important; } html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-slate-100 { background-color: color-mix(in srgb, var(--color-text) 8%, var(--color-surface)) !important; } html[data-theme="dark"] .bg-slate-200 { background-color: color-mix(in srgb, var(--color-text) 14%, var(--color-surface)) !important; } html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-slate-800 { color: var(--color-text) !important; } html[data-theme="dark"] .text-slate-700, html[data-theme="dark"] .text-slate-600 { color: color-mix(in srgb, var(--color-text) 78%, transparent) !important; } html[data-theme="dark"] .text-slate-500, html[data-theme="dark"] .text-slate-400 { color: color-mix(in srgb, var(--color-text) 55%, transparent) !important; } html[data-theme="dark"] .border-slate-100, html[data-theme="dark"] .border-slate-200, html[data-theme="dark"] .border-slate-300 { border-color: var(--color-divider) !important; } html[data-theme="dark"] .hover\:bg-slate-50:hover, html[data-theme="dark"] .hover\:bg-slate-100:hover, html[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: color-mix(in srgb, var(--color-text) 10%, var(--color-surface)) !important; } html[data-theme="dark"] .bg-indigo-50 { background-color: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)) !important; } /* text-indigo-900 dipakai di panel "Kunci Jawaban"/"Penjelasan" pada halaman review AI — warnanya coklat gelap tetap, jadi begitu latar bg-indigo-50/dst di atas ikut digelapkan, teks ini jadi gelap-di-atas-gelap tak terbaca kalau tidak ikut dibalik ke terang juga. */ html[data-theme="dark"] .text-indigo-900 { color: var(--color-text) !important; } /* Chip/kartu aksen terang lain (opsi jawaban terpilih, kotak tips, dst.) — kalau latar mereka dibiarkan terang sementara teks di dalamnya sudah dipaksa terang oleh aturan text-slate-* di atas, hasilnya teks putih-di-atas-putih tak terbaca. Digelapkan dengan pola yang sama seperti .bg-indigo-50 di atas supaya tetap kontras dengan teksnya. */ html[data-theme="dark"] .bg-amber-50 { background-color: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)) !important; } html[data-theme="dark"] .bg-sky-50 { background-color: color-mix(in srgb, var(--color-accent-2) 16%, var(--color-surface)) !important; } html[data-theme="dark"] .bg-rose-50 { background-color: color-mix(in srgb, #e11d48 16%, var(--color-surface)) !important; } html[data-theme="dark"] .bg-emerald-50 { background-color: color-mix(in srgb, #10b981 16%, var(--color-surface)) !important; } html[data-theme="dark"] .bg-yellow-50 { background-color: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)) !important; } html[data-theme="dark"] .bg-indigo-50\/50, html[data-theme="dark"] .bg-indigo-50\/40, html[data-theme="dark"] .bg-indigo-50\/30 { background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)) !important; } html[data-theme="dark"] .bg-\[linear-gradient\(150deg\,\#EEEAE8\,\#E2DDDA\)\] { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)) !important; } /* Sama seperti di atas, tapi untuk badge/ikon yang warnanya diatur lewat inline style color-mix(var(--color-accent...) N%, transparent) alih-alih kelas Tailwind — pola ini dipakai di banyak tempat (level-tag tiap section, status-badge, ikon kartu latihan, skor tile) supaya semuanya konsisten SATU warna brass yang sama. Isinya adalah ikon berwarna tetap (var(--color-accent-700)/#e11d48, BUKAN teks yang ikut dipaksa terang oleh aturan text-slate-* di atas), jadi berbeda dari chip bg-amber-50/dst di atas — di sini badge-nya sengaja dibuat TETAP TERANG/cerah di tema gelap (bukan digelapkan), supaya tetap menonjol sebagai aksen warna alih-alih melebur ke latar gelap. */ html[data-theme="dark"] .accent-tint-badge { background: color-mix(in srgb, var(--color-accent) 28%, white) !important; } html[data-theme="dark"] .timer-chip { background: color-mix(in srgb, #e11d48 18%, white) !important; } /* Testimonial auto-slider (landing page) — dua slide bertumpuk di SATU sel grid yang sama (bukan position:absolute — itu keluar dari alur normal, jadi tingginya harus ditebak manual dan gampang tumpang-tindih dengan konten berikutnya begitu teks kutipan bungkus jadi lebih banyak baris, mis. di layar sempit) lalu cross-fade lewat opacity. Karena masih grid item biasa, wrapper-nya otomatis setinggi slide TERTINGGI di ukuran layar manapun — lihat wrapper style="display:grid" di index.html. Diputar otomatis lewat goToTestimonialSlide() di js/08-utils-misc.js. */ .testimonial-slide { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease; pointer-events: none; } .testimonial-slide.is-active { opacity: 1; pointer-events: auto; } .testimonial-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--color-divider); transition: background-color .2s ease; } /* Section testimoni (kutipan + grid 4 skor) dua kolom berdampingan hanya muat di layar lebar — di mobile ditumpuk 1 kolom, kalau tidak kartu skor kanan terpotong keluar viewport (lihat class="testimonial-section" di index.html). */ @media (max-width: 760px) { .testimonial-section { grid-template-columns: 1fr !important; } } .testimonial-dot.is-active { background: var(--color-accent-700); } .profile-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius-md); font-size: 14px; color: var(--color-text); background: transparent; border: none; cursor: pointer; transition: background-color .15s ease; } .profile-menu-item:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); letter-spacing: -0.005em; } h1, h2, h3, h4, h5, h6, .font-serif { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.015em; } .mono-font, .font-mono { font-family: 'JetBrains Mono', monospace; } a { text-underline-offset: 3px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .plate { filter: sepia(0.22) saturate(0.82) contrast(1.05); box-sizing: border-box; border: 6px solid var(--color-surface); outline: 1px solid var(--color-divider); } /* — rules — */ .hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); transition: background-color .15s ease, border-color .15s ease; } .btn svg { display: block; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { color: var(--color-accent); border-color: var(--color-accent); } .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } .btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); } .btn-primary-solid { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .btn-primary-solid:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); border-color: transparent; } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-block { width: 100%; margin-top: var(--space-2); } /* — forms — */ .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 36px; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible, .input:focus { border-color: var(--color-accent); outline-offset: 0; } textarea.input { min-height: 90px; resize: vertical; } .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); } .radio:hover .dot { border-color: var(--color-accent); } .radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); } .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt.is-active, .seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } .seg-opt:not(.is-active):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } /* — cards — */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-divider); } .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; } .card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } /* — navigation — */ .nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); } .nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; } .nav a { color: inherit; text-decoration: none; font-size: 14px; } .nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } /* — tables — */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } /* — dialog — */ .dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); } .dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider); } .dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; } .dialog-body { font-size: 14px; opacity: 0.85; } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } /* — C-Test / letter-underscore input (fitur khusus TOEFL) — */ .ctest-input { letter-spacing: 0.1em; text-transform: lowercase; font-family: 'JetBrains Mono', monospace; } /* — scrollbar & animasi — */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--color-neutral-100); } ::-webkit-scrollbar-thumb { background: var(--color-neutral-300); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-400); } @keyframes spin-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 8s linear infinite; } /* — sentuhan UX: animasi halus & hover interaktif (landing, kartu) — */ @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fade-up .6s ease both; } .fade-up-1 { animation-delay: .05s; } .fade-up-2 { animation-delay: .15s; } .fade-up-3 { animation-delay: .25s; } .fade-up-4 { animation-delay: .35s; } /* Once a practice arena is active it already has its own "Keluar" exit button (which also returns to the dashboard), so the tab's "Kembali ke Dashboard" link becomes redundant on screen and is hidden until the arena closes again. */ #tab-reading:has(#reading-practice-arena:not(.hidden)) .back-to-dashboard-btn, #tab-writing:has(#writing-practice-arena:not(.hidden)) .back-to-dashboard-btn, #tab-listening:has(#listening-practice-arena:not(.hidden)) .back-to-dashboard-btn, #tab-speaking:has(#speaking-practice-arena:not(.hidden)) .back-to-dashboard-btn { display: none; } /* Halaman "Pembahasan Evaluasi" (review-arena) sudah punya tombolnya sendiri ("Simpan & Kembali ke Dashboard" di bagian bawah kartu) — review-arena ini section terpisah (bukan di dalam tab-content manapun), jadi tombol "Kembali ke Dashboard" milik tab yang masih aktif di baliknya perlu disembunyikan terpisah lewat body, tidak ke-cover oleh aturan per-tab di atas. */ body:has(#review-arena:not(.hidden)) .back-to-dashboard-btn { display: none; } /* During a full simulation the top HUD's "Hentikan Ujian" button already exits the whole test, so the per-module arena's own "Keluar" button is redundant. */ #app-main-layout:has(#full-sim-hud:not(.hidden)) .exit-practice-btn { display: none; } /* Scroll-triggered reveal — for sections below the fold, where fade-up (which only plays once at initial page load) has already finished by the time the user scrolls to it. */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .12s; } .reveal-delay-2 { transition-delay: .24s; } .pricing-layout { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 48px; align-items: start; } @media (max-width: 760px) { .pricing-layout { grid-template-columns: 1fr; } } /* Selama Tes Lengkap, startTimer() mengosongkan isi jam per-soal ini lewat innerHTML = '' (lihat js/04-practice-flow.js) — tanpa aturan ini, chip-nya tetap tampil sebagai kotak kosong berwarna karena background/padding masih berlaku walau tanpa konten. */ .timer-chip:empty { display: none; } /* Editorial polish for the dashboard and public feature surfaces. */ .dashboard-welcome { background: var(--navy) !important; border-radius: 6px !important; text-align: left !important; border-left: 4px solid var(--color-accent); } .dashboard-welcome > div:last-child { width: min(760px, 100%); margin: 0 auto !important; } .dashboard-welcome .decor-blob { display: none; } .dashboard-welcome-label { display: flex !important; width: fit-content; margin-left: auto !important; margin-right: auto !important; } .dashboard-welcome h2, .dashboard-welcome p { text-align: center !important; } .dashboard-welcome h2 { max-width: none; text-align: center !important; } .dashboard-welcome p { margin-left: auto !important; margin-right: auto !important; } .dashboard-welcome #start-full-sim-btn { margin-left: auto !important; margin-right: auto !important; border-radius: 4px !important; background: var(--color-accent) !important; border-color: var(--color-accent) !important; } .dashboard-welcome #free-trial-counter-wrapper { margin-left: auto !important; margin-right: auto !important; } .section-blueprints > .card { border-radius: 5px !important; box-shadow: none !important; border-color: var(--color-divider) !important; } .section-blueprints > .card .rounded-xl, .section-blueprints > .card .rounded-lg { border-radius: 3px !important; } .section-blueprints > .card button { border-radius: 3px !important; } .analytics-view .card { border-radius: 5px !important; box-shadow: none !important; border-color: var(--color-divider) !important; } .analytics-view .tag { border-radius: 3px !important; background: var(--color-surface) !important; color: var(--color-accent-800) !important; } .analytics-view #ai-analysis-section { border-top: 3px solid var(--color-accent) !important; } .analytics-view #ai-deficiency-container > div:first-child { border-right: 1px solid var(--color-divider); padding-right: 24px; } .analytics-view #ai-weakness-list > div, .analytics-view #ai-action-list > div { border-radius: 3px !important; box-shadow: none !important; } .public-features-grid > .card { border-radius: 5px !important; box-shadow: none !important; padding: 0 !important; overflow: hidden; } .public-features-grid > .card a { text-decoration: underline !important; text-underline-offset: 4px; } .pricing-section { position: relative; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-surface) 34%, transparent); } .pricing-heading { max-width: 760px; margin-left: auto !important; margin-right: auto !important; padding-left: 18px; padding-left: 0; text-align: center !important; } .pricing-heading .tag { border-radius: 3px !important; } .pricing-heading h2 { font-size: clamp(28px, 3.2vw, 36px) !important; line-height: 1.15; margin: 10px 0 8px !important; } .pricing-heading p { max-width: 64ch !important; margin-left: auto !important; margin-right: auto !important; font-size: 14px !important; line-height: 1.55; } .pricing-grid { align-items: stretch; } .pricing-card { min-height: 430px; border-radius: 5px !important; box-shadow: none !important; gap: 10px !important; } .pricing-card-free { background: var(--color-bg) !important; } .pricing-card-premium { color: #fff !important; background: var(--navy) !important; border: 0 !important; box-shadow: 0 12px 24px color-mix(in srgb, var(--navy) 20%, transparent) !important; transform: translateY(-10px); } .pricing-card-premium .card-body, .pricing-card-premium li, .pricing-card-premium li span:last-child { color: rgba(255,255,255,.78) !important; } .pricing-card-premium .card-title, .pricing-card-premium .mono-font { color: #fff !important; } .pricing-card-premium .mono-font { color: var(--color-accent-300) !important; } .pricing-card-premium .pricing-popular-badge { background: var(--color-accent-300) !important; color: var(--color-accent-900) !important; border-radius: 3px !important; } .pricing-card-premium .btn-primary-solid { background: var(--color-accent-400) !important; border-color: var(--color-accent-400) !important; color: var(--navy) !important; } .pricing-card-premium .btn-primary-solid:hover { background: var(--color-accent-300) !important; border-color: var(--color-accent-300) !important; } .pricing-card ul { flex: 1; } .pricing-card li { line-height: 1.5; } .pricing-card .btn { border-radius: 3px !important; } @media (max-width: 767px) { .pricing-heading { padding-left: 14px; } .pricing-card-premium { transform: none; } } @media (max-width: 767px) { .analytics-view #ai-deficiency-container > div:first-child { border-right: 0; border-bottom: 1px solid var(--color-divider); padding: 0 0 18px; } .dashboard-welcome { padding: 26px 22px !important; } } .hover-lift { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-accent-300); } .btn { transition: background-color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary-solid, .btn-primary { transition: background-color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .15s ease; } .btn-primary-solid:hover { box-shadow: var(--shadow-sm); } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-14px, 10px) scale(1.04); } } .decor-blob { animation: drift 12s ease-in-out infinite; pointer-events: none; } /* — layout utama (main + sidebar) — Ditulis sebagai CSS biasa (bukan mengandalkan utility class Tailwind Play CDN "w-full lg:w-72") karena di production kadang class responsive-nya gagal ter-generate di halaman yang sangat besar seperti index.html ini, menyebabkan sidebar melebar penuh dan mendorong konten utama menyempit/bertumpuk di desktop. Aturan di bawah dijamin selalu berlaku karena diparsing langsung oleh browser (bukan JS runtime). */ #app-sidebar { width: 100%; box-sizing: border-box; } @media (min-width: 1024px) { #app-sidebar { width: 288px; } } #app-main-layout { align-items: stretch; } @media (min-width: 1024px) { #app-main-layout { align-items: flex-start; } }