/* ============================================================================ IM-TEK Exam — frontend dark theme. View'lar Tailwind utility klasslari bilan yozilgan, shuning uchun dark rejim shu klasslarni ostida qayta bo'yaydi. Bitta joyda turgani uchun har bir view'ga `dark:` variantlarini qo'shish shart emas. ========================================================================== */ :root { --im-bg: #f8fafc; --im-surface: #ffffff; --im-border: #e2e8f0; --im-text: #0f172a; --im-muted: #64748b; } [data-theme="dark"] { --im-bg: #0b1220; --im-surface: #111a2e; --im-surface-2: #172136; --im-border: #263349; --im-text: #e6edf7; --im-muted: #94a3b8; color-scheme: dark; } /* ── Asosiy yuza ──────────────────────────────────────────────────────── */ [data-theme="dark"] body { background: var(--im-bg) !important; color: var(--im-text) !important; } [data-theme="dark"] .bg-slate-50 { background-color: var(--im-bg) !important; } [data-theme="dark"] .bg-white { background-color: var(--im-surface) !important; } [data-theme="dark"] .bg-white\/90 { background-color: rgba(17, 26, 46, 0.9) !important; } [data-theme="dark"] .bg-slate-100 { background-color: var(--im-surface-2) !important; } [data-theme="dark"] .bg-slate-800 { background-color: #0b1220 !important; } [data-theme="dark"] .hover\:bg-slate-50:hover { background-color: var(--im-surface-2) !important; } [data-theme="dark"] .hover\:bg-slate-50\/60:hover { background-color: rgba(23, 33, 54, 0.6) !important; } [data-theme="dark"] .bg-slate-50\/60 { background-color: rgba(23, 33, 54, 0.6) !important; } /* ── Chegaralar ───────────────────────────────────────────────────────── */ [data-theme="dark"] .border-slate-100 { border-color: #1d2942 !important; } [data-theme="dark"] .border-slate-200 { border-color: var(--im-border) !important; } [data-theme="dark"] .border-slate-300 { border-color: #33415c !important; } [data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1d2942 !important; } /* ── Matn ─────────────────────────────────────────────────────────────── */ [data-theme="dark"] .text-slate-900 { color: #f1f5f9 !important; } [data-theme="dark"] .text-slate-800 { color: #e6edf7 !important; } [data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; } [data-theme="dark"] .text-slate-600 { color: #a9b6c9 !important; } [data-theme="dark"] .text-slate-500 { color: var(--im-muted) !important; } [data-theme="dark"] .text-slate-400 { color: #7c8da6 !important; } [data-theme="dark"] .text-slate-300 { color: #55637a !important; } [data-theme="dark"] .hover\:text-indigo-600:hover { color: #a5b4fc !important; } [data-theme="dark"] .group:hover .group-hover\:text-indigo-600 { color: #a5b4fc !important; } [data-theme="dark"] .text-indigo-600 { color: #a5b4fc !important; } [data-theme="dark"] .text-indigo-700 { color: #c7d2fe !important; } [data-theme="dark"] .text-indigo-800 { color: #c7d2fe !important; } /* ── Yumshoq (pastel) fon + matn juftliklari ──────────────────────────── */ [data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.14) !important; } [data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.20) !important; } [data-theme="dark"] .bg-indigo-50\/40 { background-color: rgba(99, 102, 241, 0.10) !important; } [data-theme="dark"] .bg-indigo-50\/70 { background-color: rgba(99, 102, 241, 0.14) !important; } [data-theme="dark"] .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.26) !important; } [data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.14) !important; } [data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.20) !important; } [data-theme="dark"] .text-emerald-700 { color: #6ee7b7 !important; } [data-theme="dark"] .text-emerald-600 { color: #34d399 !important; } [data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.20) !important; } [data-theme="dark"] .text-amber-700 { color: #fcd34d !important; } [data-theme="dark"] .text-amber-600 { color: #fbbf24 !important; } [data-theme="dark"] .text-amber-900 { color: #fde68a !important; } [data-theme="dark"] .text-amber-800\/80 { color: rgba(253, 230, 138, 0.8) !important; } [data-theme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, 0.35) !important; } [data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.14) !important; } [data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.20) !important; } [data-theme="dark"] .text-red-700 { color: #fca5a5 !important; } [data-theme="dark"] .text-red-600 { color: #f87171 !important; } [data-theme="dark"] .border-red-100 { border-color: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .bg-purple-50 { background-color: rgba(168, 85, 247, 0.14) !important; } [data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.20) !important; } [data-theme="dark"] .text-purple-700 { color: #d8b4fe !important; } [data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.20) !important; } [data-theme="dark"] .text-blue-700 { color: #93c5fd !important; } /* Gradient kartochkalar (statistika ikonkalari) */ [data-theme="dark"] .from-indigo-50 { --tw-gradient-from: rgba(99, 102, 241, 0.18) !important; } [data-theme="dark"] .to-indigo-100 { --tw-gradient-to: rgba(99, 102, 241, 0.28) !important; } [data-theme="dark"] .from-emerald-50 { --tw-gradient-from: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .to-emerald-100 { --tw-gradient-to: rgba(16, 185, 129, 0.28) !important; } [data-theme="dark"] .from-amber-50 { --tw-gradient-from: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .to-amber-100 { --tw-gradient-to: rgba(245, 158, 11, 0.28) !important; } [data-theme="dark"] .from-purple-50 { --tw-gradient-from: rgba(168, 85, 247, 0.18) !important; } [data-theme="dark"] .to-purple-100 { --tw-gradient-to: rgba(168, 85, 247, 0.28) !important; } [data-theme="dark"] .from-slate-200 { --tw-gradient-from: #334155 !important; } [data-theme="dark"] .to-slate-400 { --tw-gradient-to: #475569 !important; } /* ── Forma elementlari ────────────────────────────────────────────────── */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="number"], [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--im-surface-2) !important; border-color: #33415c !important; color: var(--im-text) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748b !important; } [data-theme="dark"] select option { background-color: var(--im-surface-2); color: var(--im-text); } /* ── Bootstrap alert (common\widgets\Alert) ───────────────────────────── */ [data-theme="dark"] .alert-success { background-color: rgba(16,185,129,0.16) !important; border-color: rgba(16,185,129,0.35) !important; color: #6ee7b7 !important; } [data-theme="dark"] .alert-danger, [data-theme="dark"] .alert-error { background-color: rgba(239,68,68,0.16) !important; border-color: rgba(239,68,68,0.35) !important; color: #fca5a5 !important; } [data-theme="dark"] .alert-warning { background-color: rgba(245,158,11,0.16) !important; border-color: rgba(245,158,11,0.35) !important; color: #fcd34d !important; } [data-theme="dark"] .alert-info { background-color: rgba(59,130,246,0.16) !important; border-color: rgba(59,130,246,0.35) !important; color: #93c5fd !important; } /* ── Sahifalash (LinkPager) ───────────────────────────────────────────── */ [data-theme="dark"] .pagination .page-link { background: var(--im-surface-2); border-color: var(--im-border); color: var(--im-text); } [data-theme="dark"] .pagination .active .page-link { background: #4f46e5; border-color: #4f46e5; color: #fff; } /* ── Shadow'lar qorong'uda kuchsiz ko'rinadi ──────────────────────────── */ [data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.45) !important; } [data-theme="dark"] .shadow-lg { box-shadow: 0 10px 28px rgba(0,0,0,0.5) !important; } /* Sertifikat har doim oq qog'ozda — chop etishga mo'ljallangan */ [data-theme="dark"] .im-certificate, [data-theme="dark"] .im-certificate .bg-white { background: #ffffff !important; color: #0f172a !important; } [data-theme="dark"] .im-certificate .text-slate-900 { color: #0f172a !important; } [data-theme="dark"] .im-certificate .text-slate-700 { color: #334155 !important; } [data-theme="dark"] .im-certificate .text-slate-600 { color: #475569 !important; } [data-theme="dark"] .im-certificate .text-slate-500 { color: #64748b !important; } [data-theme="dark"] .im-certificate .text-slate-400 { color: #94a3b8 !important; } [data-theme="dark"] .im-certificate .border-slate-200 { border-color: #e2e8f0 !important; } /* ============================================================================ IM-TEK — ambient fon, shisha yuzalar va mikro-animatsiyalar. Bu blok public sahifalar (bosh sahifa, kirish) uchun zamonaviy fon beradi. Barcha ranglar light/dark uchun alohida yozilgan. ========================================================================== */ /* ── Sahifa orqa foni: bitta tekis rang + kichik kvadratchalar to'ri ──── */ .im-canvas { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--im-bg); } /* * Kvadratcha to'r — ikkita chiziqli gradient kesishib katakcha hosil qiladi. * Chiziq rangi bitta: --im-grid-line. Pastga tomon sekin so'niydi. */ .im-canvas__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--im-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--im-grid-line) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%); } :root { --im-grid-line: rgba(15, 23, 42, .07); } [data-theme="dark"] { --im-grid-line: rgba(148, 163, 184, .10); } /* ── Shisha (glass) yuzalar ───────────────────────────────────────────── */ .im-glass { background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 36px -16px rgba(15, 23, 42, .22); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); } .im-glass--soft { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .6); } [data-theme="dark"] .im-glass { background: rgba(17, 26, 46, .68) !important; border-color: rgba(148, 163, 184, .14) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -18px rgba(0, 0, 0, .75); } [data-theme="dark"] .im-glass--soft { background: rgba(17, 26, 46, .5) !important; } /* Header/footer uchun yarim shaffof yuza */ [data-theme="dark"] .bg-white\/70 { background-color: rgba(17, 26, 46, .7) !important; } [data-theme="dark"] .bg-white\/60 { background-color: rgba(17, 26, 46, .6) !important; } [data-theme="dark"] .bg-white\/5 { background-color: rgba(255, 255, 255, .05) !important; } /* ── Gradient matn ────────────────────────────────────────────────────── */ .im-grad-text { background-image: linear-gradient(100deg, #4f46e5, #0ea5e9 42%, #a855f7 72%, #4f46e5); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: im-grad-pan 11s linear infinite; } [data-theme="dark"] .im-grad-text { background-image: linear-gradient(100deg, #a5b4fc, #67e8f9 42%, #f0abfc 72%, #a5b4fc); } @keyframes im-grad-pan { to { background-position: -260% 0; } } /* ── Gradient kontur (1px) ────────────────────────────────────────────── */ .im-ring { position: relative; } .im-ring::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(99, 102, 241, .6), rgba(34, 211, 238, .38) 45%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } [data-theme="dark"] .im-ring::before { background: linear-gradient(140deg, rgba(129, 140, 248, .55), rgba(34, 211, 238, .3) 45%, transparent 70%); } /* ── Hover ko'tarilish ────────────────────────────────────────────────── */ .im-lift { transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease; } .im-lift:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -20px rgba(79, 70, 229, .42); } [data-theme="dark"] .im-lift:hover { box-shadow: 0 22px 48px -20px rgba(0, 0, 0, .8); } /* ── Kirish animatsiyasi ──────────────────────────────────────────────── */ .im-rise { animation: im-rise .75s cubic-bezier(.2, .7, .3, 1) both; } @keyframes im-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ── Sekin suzuvchi element (hero mokapi) ─────────────────────────────── */ .im-hover-float { animation: im-hover-float 7s ease-in-out infinite; } @keyframes im-hover-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ── Progress "to'lish" animatsiyasi ──────────────────────────────────── */ .im-bar-fill { animation: im-bar-fill 1.6s cubic-bezier(.2, .7, .3, 1) both; } @keyframes im-bar-fill { from { width: 0; } } @media (prefers-reduced-motion: reduce) { .im-grad-text, .im-hover-float, .im-rise, .im-bar-fill { animation: none !important; } } /* ── Bosh sahifa / kirish uchun qo'shimcha ranglar ────────────────────── */ [data-theme="dark"] .bg-cyan-50 { background-color: rgba(34, 211, 238, .14) !important; } [data-theme="dark"] .text-cyan-600 { color: #67e8f9 !important; } [data-theme="dark"] .bg-fuchsia-50 { background-color: rgba(232, 121, 249, .14) !important; } [data-theme="dark"] .text-fuchsia-600{ color: #f0abfc !important; } [data-theme="dark"] .border-indigo-300 { border-color: rgba(129, 140, 248, .45) !important; } [data-theme="dark"] .bg-slate-200\/80 { background-color: rgba(148, 163, 184, .22) !important; } [data-theme="dark"] .bg-slate-50\/70 { background-color: rgba(23, 33, 54, .7) !important; } [data-theme="dark"] .border-slate-200\/70 { border-color: rgba(148, 163, 184, .16) !important; } [data-theme="dark"] .border-slate-200\/80 { border-color: rgba(148, 163, 184, .16) !important; } [data-theme="dark"] .text-slate-900\/\[0\.05\] { color: rgba(226, 232, 240, .07) !important; } /* ── To'liq logotip (exam-logo-full.png) ──────────────────────────────── */ /* * Logotip matni to'q ko'k — qorong'i fonda kontrast yetmaydi, shuning uchun * dark rejimda yorqinlashtiramiz. Doim qorong'i yuzada turgan joylar uchun * (masalan login'ning gradient paneli) `--on-dark` modifikatori bor. */ .im-logo-full { display: block; width: auto; max-width: 100%; object-fit: contain; } [data-theme="dark"] .im-logo-full { filter: brightness(1.6) saturate(1.1) drop-shadow(0 0 22px rgba(99, 102, 241, .22)); } .im-logo-full--on-dark { filter: brightness(1.6) saturate(1.1) drop-shadow(0 0 22px rgba(99, 102, 241, .22)); } /* ── Kabinet (dashboard) uchun qo'shimcha ranglar ─────────────────────── */ [data-theme="dark"] .bg-orange-50 { background-color: rgba(249, 115, 22, .14) !important; } [data-theme="dark"] .text-orange-600 { color: #fdba74 !important; } [data-theme="dark"] .text-cyan-700 { color: #67e8f9 !important; } [data-theme="dark"] .text-cyan-700\/70 { color: rgba(103, 232, 249, .7) !important; } [data-theme="dark"] .text-indigo-700\/70 { color: rgba(199, 210, 254, .7) !important; } /* ============================================================================ Savol matni (.im-qbody) — adminkadagi ko'rinish bilan bir xil. Ichida LaTeX (KaTeX), rasm va kod bloklari bo'lishi mumkin. ========================================================================== */ .im-qbody { line-height: 1.7; } .im-qbody > *:first-child { margin-top: 0; } .im-qbody > *:last-child { margin-bottom: 0; } .im-qbody p { margin: .55em 0; } .im-qbody ul { list-style: disc; padding-left: 1.35em; margin: .55em 0; } .im-qbody ol { list-style: decimal; padding-left: 1.35em; margin: .55em 0; } .im-qbody li { margin: .2em 0; } .im-qbody b, .im-qbody strong { font-weight: 700; } .im-qbody i, .im-qbody em { font-style: italic; } .im-qbody u { text-decoration: underline; } .im-qbody a { color: #4f46e5; text-decoration: underline; } .im-qbody sub { vertical-align: sub; font-size: .78em; } .im-qbody sup { vertical-align: super; font-size: .78em; } .im-qbody table { border-collapse: collapse; margin: .6em 0; } .im-qbody th, .im-qbody td { border: 1px solid var(--im-border); padding: .35em .6em; } .im-qbody img { max-width: 100%; height: auto; border-radius: .6rem; border: 1px solid var(--im-border); margin: .5em 0; } .im-qbody pre { position: relative; overflow-x: auto; border-radius: .6rem; padding: .85em 1em; margin: .6em 0; background: var(--im-code-bg); border: 1px solid var(--im-border); } .im-qbody code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; } .im-qbody :not(pre) > code { padding: .12em .38em; border-radius: .3rem; background: var(--im-code-bg); } /* KaTeX blok formulasi matn oqimini buzmasin */ .im-qbody .katex { font-size: 1.06em; } .im-qbody .katex-display { margin: .7em 0; overflow-x: auto; overflow-y: hidden; } :root { --im-code-bg: #f1f5f9; } [data-theme="dark"] { --im-code-bg: #0d1729; } /* Qorong'ida KaTeX joriy matn rangini oladi */ [data-theme="dark"] .im-qbody .katex, [data-theme="dark"] .im-qbody .katex * { color: inherit; } [data-theme="dark"] .im-qbody a { color: #a5b4fc; } /* highlight.js light mavzusi qorong'ida ko'rinmaydi — fonini moslashtiramiz */ [data-theme="dark"] .im-qbody .hljs { background: transparent !important; color: #cbd5e1 !important; } /* Kattalashtiriladigan rasm */ .im-zoomable { cursor: zoom-in; transition: transform .2s ease, box-shadow .2s ease; } .im-zoomable:hover { transform: scale(1.01); box-shadow: 0 10px 26px -12px rgba(15, 23, 42, .45); } /* ── Imtihon varianti (label) ─────────────────────────────────────────── */ /* * Radio/checkbox `sr-only` — tanlanganini o'ng tomondagi belgi va harf doirasi * ko'rsatadi. Chegara/fon klasslarini JS almashtiradi (border-indigo-500, * bg-indigo-50), shuning uchun bu yerda faqat tuzilish va holat bezaklari. */ .im-opt { display: flex; align-items: flex-start; gap: .85rem; padding: .9rem 1rem; border-width: 1px; border-style: solid; border-radius: .85rem; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } .im-opt:hover { border-color: #a5b4fc; transform: translateX(2px); } .im-opt:focus-within { outline: 2px solid #6366f1; outline-offset: 2px; } .im-opt__letter { flex: none; width: 1.85rem; height: 1.85rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; background: var(--im-surface-2, #f1f5f9); color: var(--im-muted); transition: background-color .18s ease, color .18s ease; } .im-opt__check { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: transparent; color: transparent; border: 2px solid var(--im-border); transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .im-opt:has(input:checked) .im-opt__letter { background: #4f46e5; color: #fff; } .im-opt:has(input:checked) .im-opt__check { background: #4f46e5; border-color: #4f46e5; color: #fff; } [data-theme="dark"] .im-opt:hover { border-color: rgba(129, 140, 248, .55); } /* ── Filtr chipi (imtihonlar/natijalar ro'yxati) ──────────────────────── */ .im-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: .6rem; border: 1px solid var(--im-border); font-size: .82rem; font-weight: 600; color: var(--im-muted); background: transparent; cursor: pointer; transition: all .18s ease; } .im-chip:hover { color: #4f46e5; border-color: #a5b4fc; } .im-chip.is-on { background: #4f46e5; border-color: #4f46e5; color: #fff; box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .8); } .im-chip__n { font-size: .7rem; font-weight: 700; padding: .05rem .35rem; border-radius: .35rem; background: var(--im-surface-2, #f1f5f9); color: var(--im-muted); } .im-chip.is-on .im-chip__n { background: rgba(255, 255, 255, .22); color: #fff; } [data-theme="dark"] .im-chip:hover { color: #a5b4fc; border-color: rgba(129, 140, 248, .5); } /* ── Imtihon holati ranglari (sky / rose) ─────────────────────────────── */ [data-theme="dark"] .bg-sky-100 { background-color: rgba(14, 165, 233, .18) !important; } [data-theme="dark"] .text-sky-700 { color: #7dd3fc !important; } [data-theme="dark"] .bg-sky-400 { background-color: #0ea5e9 !important; } [data-theme="dark"] .bg-rose-100 { background-color: rgba(244, 63, 94, .18) !important; } [data-theme="dark"] .text-rose-700 { color: #fda4af !important; } [data-theme="dark"] .bg-rose-400 { background-color: #f43f5e !important; } [data-theme="dark"] .bg-slate-50\/60 { background-color: rgba(23, 33, 54, .6) !important; } /* ── Imtihon ishlash: fan tab lari ────────────────────────────────────── */ .im-subtab { padding: .5rem .9rem; font-size: .85rem; white-space: nowrap; } .im-subtab__dot { flex: none; width: .5rem; height: .5rem; border-radius: 9999px; background: #6366f1; } .im-subtab.is-on .im-subtab__dot { background: #fff; } /* Tab qatori gorizontal siljiydi — scrollbar ko'rinmasin */ .im-noscroll { scrollbar-width: none; -ms-overflow-style: none; } .im-noscroll::-webkit-scrollbar { display: none; } /* ── Yig'iladigan blok (natijadagi fan guruhlari) ─────────────────────── */ .im-acc { overflow: hidden; } .im-acc__head { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; transition: background-color .18s ease; } .im-acc__head::-webkit-details-marker { display: none; } .im-acc__head:hover { background: rgba(99, 102, 241, .06); } .im-acc__chev { transition: transform .22s ease; } .im-acc[open] .im-acc__chev { transform: rotate(180deg); } [data-theme="dark"] .im-acc__head:hover { background: rgba(129, 140, 248, .1); } @media (prefers-reduced-motion: reduce) { .im-acc__chev { transition: none; } }