, jadi * pita berlatar warna akan ikut terkotak. Bagian ber-latar dipaksa keluar dari * container itu, lalu .bmc-wrap mengembalikan lebar bacanya di dalam. */ .bmc-page .bmc-section { padding-block: var(--wp--preset--spacing--60); } .bmc-page .bmc-section--bleed { margin-inline: calc(50% - 50vw); } /* 50vw ikut menghitung lebar scrollbar, jadi pita di atas melebihi lebar dokumen beberapa piksel. Dipangkas di — bukan di leluhur yang lebih dekat, sebab overflow di situ justru memotong pitanya. Kelas bmc-careers dipasang inc/modules/careers-page.php dan hanya ada di halaman ini. */ body.bmc-careers { overflow-x: hidden; } /* Latar selang-seling memberi batas bagian tanpa garis pemisah. */ .bmc-page .bmc-section--tint { background: var(--wp--preset--color--tint); } .bmc-page .bmc-wrap { box-sizing: border-box; width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; } .bmc-page .bmc-section > .bmc-wrap > h2 { margin-top: 0; margin-bottom: var(--wp--preset--spacing--40); } /* Garis aksen pendek di bawah judul bagian: satu sinyal warna per bagian. */ .bmc-page .bmc-section > .bmc-wrap > h2::after { content: ""; display: block; width: 3rem; height: 4px; margin-top: .75rem; border-radius: 2px; background: var(--wp--preset--color--aksen); } /* * Bekal minimal kelas blok inti. Markup hasil port memakai nama kelas blok * WordPress, sementara Eduma tidak menjamin wp-block-library ikut dimuat di * konten halaman — jadi yang benar-benar dipakai halaman ini ditulis di sini. */ .bmc-page .wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40); } .bmc-page .wp-block-column { flex: 1 1 0; min-width: 0; } @media (max-width: 781px) { .bmc-page .wp-block-column { flex-basis: 100%; } } .bmc-page .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; } .bmc-page .wp-element-button { display: inline-block; padding: .8rem 1.6rem; border: 0; border-radius: .5rem; background-color: var(--wp--preset--color--utama); color: var(--wp--preset--color--putih); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .bmc-page .wp-element-button:hover, .bmc-page .wp-element-button:focus { background-color: var(--wp--preset--color--utama-tua); color: var(--wp--preset--color--putih); } /* Kelas bawaan WordPress untuk teks yang hanya terbaca pembaca layar. */ .bmc-page .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important; } /* ------------------------------------------------------------------- hero */ .bmc-page .bmc-hero { position: relative; isolation: isolate; padding-block: var(--wp--preset--spacing--70); background-color: var(--wp--preset--color--utama); color: var(--wp--preset--color--putih); overflow: hidden; text-align: center; } /* z-index 0, bukan -1: lapisan negatif jatuh ke belakang latar elemen induknya sendiri, dan polanya tidak pernah terlihat. */ .bmc-page .bmc-hero > * { position: relative; z-index: 1; } .bmc-page .bmc-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; /* Scrim gelap di tengah menjaga kontras teks putih; tepi dibiarkan memperlihatkan polanya. */ background-image: linear-gradient(90deg, rgb(16 48 95 / .15) 0%, rgb(16 48 95 / .8) 30%, rgb(16 48 95 / .8) 70%, rgb(16 48 95 / .15) 100%), var(--bmc-hero-gambar); background-size: cover, cover; background-position: center, center; /* Pola pengganti sudah bernada navy sendiri; ketika diganti foto, turunkan nilainya ke sekitar .5 supaya teks putih tetap lolos kontras. */ opacity: .9; } .bmc-page .bmc-hero h1 { max-width: 20ch; margin-block: 0 var(--wp--preset--spacing--30); margin-inline: auto; color: var(--wp--preset--color--putih); } .bmc-page .bmc-hero p { max-width: 60ch; margin-block: 0 var(--wp--preset--spacing--50); margin-inline: auto; color: var(--wp--preset--color--putih); font-size: 1.125rem; opacity: .92; } .bmc-page .bmc-hero .wp-block-buttons { justify-content: center; } /* Tombol utama di atas pita navy dibalik: putih dengan teks navy. */ .bmc-page .bmc-hero .wp-element-button { background-color: var(--wp--preset--color--putih); color: var(--wp--preset--color--utama); } .bmc-page .bmc-hero .wp-element-button:hover, .bmc-page .bmc-hero .wp-element-button:focus { background-color: var(--wp--preset--color--tint); color: var(--wp--preset--color--utama-tua); } /* ---------------------------------------------------------------- tentang */ .bmc-page .bmc-tentang__kartu { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); } .bmc-page .bmc-tentang__ringkasan { margin-bottom: var(--wp--preset--spacing--50); font-size: 1.125rem; } .bmc-page .bmc-tentang__unit { position: relative; padding: var(--wp--preset--spacing--50); padding-top: calc(var(--wp--preset--spacing--50) + 4px); border: 1px solid var(--wp--preset--color--garis); border-radius: 12px; background: var(--wp--preset--color--latar); box-shadow: var(--bmc-bayang); } /* Pita warna unit: hijau Brainmatics, navy Braindevs. */ .bmc-page .bmc-tentang__unit::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 12px 12px 0 0; background: var(--wp--preset--color--utama); } .bmc-page .bmc-tentang__unit--brainmatics::before { background: #288038; } .bmc-page .bmc-tentang__unit--braindevs::before { background: #184080; } .bmc-page .bmc-tentang__nama { margin-block: 0 .25rem; } .bmc-page .bmc-tentang__legal { margin-block: 0 .5rem; opacity: .75; } .bmc-page .bmc-tentang__fokus { margin-block: 0 .75rem; } .bmc-page .bmc-tentang__deskripsi { margin-block: 0; } @media (min-width: 783px) { .bmc-page .bmc-tentang__kartu { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------ budaya (prinsip) */ .bmc-page .bmc-prinsip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); list-style: none; margin: 0; padding: 0; counter-reset: none; } .bmc-page .bmc-prinsip__sel { padding: var(--wp--preset--spacing--40); border: 1px solid var(--wp--preset--color--garis); border-radius: 12px; background: var(--wp--preset--color--latar); box-shadow: 0 1px 2px rgb(17 17 17 / .04); transition: box-shadow .2s ease, border-color .2s ease; } .bmc-page .bmc-prinsip__sel:hover { border-color: var(--wp--preset--color--aksen); box-shadow: 0 2px 4px rgb(17 17 17 / .06), 0 10px 28px rgb(24 64 128 / .1); } .bmc-page .bmc-prinsip__judul { display: flex; gap: .625rem; align-items: baseline; font-weight: 600; font-size: 1rem; } .bmc-page .bmc-prinsip__nomor { flex: 0 0 auto; color: var(--wp--preset--color--aksen); font-size: 1.125rem; font-variant-numeric: tabular-nums; } .bmc-page .bmc-prinsip__deskripsi { margin-top: .5rem; font-size: .9375rem; color: var(--wp--preset--color--teks-redup, #5b6472); } @media (min-width: 783px) { .bmc-page .bmc-prinsip { grid-template-columns: repeat(3, 1fr); } /* Desktop: deskripsi tampil langsung. display:block saja tidak cukup — Chrome menyembunyikan isi

tertutup lewat ::details-content. */ .bmc-page .bmc-prinsip__disclosure > div { display: block; } .bmc-page .bmc-prinsip__disclosure::details-content { content-visibility: visible; block-size: auto; overflow: visible; } .bmc-page .bmc-prinsip__disclosure > summary { list-style: none; } .bmc-page .bmc-prinsip__disclosure > summary::-webkit-details-marker { display: none; } } /* -------------------------------------------------------- career journey */ /* Dua jalur berdampingan di atas 640px, bertumpuk di bawahnya — tidak mengecil sampai label tak terbaca. */ .bmc-page .bmc-journey, .bmc-page .bmc-journey__jalur-grup { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); } .bmc-page .bmc-journey__pengantar { margin: 0; max-width: 68ch; } .bmc-page .bmc-journey__jalur { margin: 0; padding: var(--wp--preset--spacing--40); border: 1px solid var(--wp--preset--color--garis); border-radius: 12px; background: var(--wp--preset--color--latar); box-shadow: var(--bmc-bayang); flex: 1 1 0; } .bmc-page .bmc-journey__judul { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--wp--preset--color--garis); font-weight: 700; font-size: 1.125rem; text-align: center; } .bmc-page .bmc-journey__untuk { margin: 0 0 1rem; font-size: .875rem; color: var(--wp--preset--color--teks-redup, #5b6472); text-align: center; } .bmc-page .bmc-journey__svg { width: 100%; height: auto; } /* Catatan penutup: pita di kiri membedakannya dari kartu jalur di atasnya. */ .bmc-page .bmc-journey__catatan { padding: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--40, 1.5rem); border-left: 3px solid var(--wp--preset--color--aksen, #288038); border-radius: 0 8px 8px 0; background: var(--wp--preset--color--tint, #f2f5fa); } .bmc-page .bmc-journey__catatan-judul { margin: 0 0 .375rem; font-weight: 700; font-size: 1rem; } .bmc-page .bmc-journey__catatan-teks { margin: 0; font-size: .9375rem; color: var(--wp--preset--color--teks-redup, #5b6472); } /* Nilai cadangan dituliskan eksplisit: token yang hilang membuat fill jatuh ke hitam, dan node pernah tampil hitam-di-atas-hitam karenanya. */ .bmc-page .bmc-journey__node rect { fill: var(--wp--preset--color--putih, #ffffff); stroke: var(--wp--preset--color--utama, #184080); stroke-width: 1.5; } .bmc-page .bmc-journey__node text { fill: var(--wp--preset--color--teks, #111111); font-size: 13px; font-family: inherit; } .bmc-page .bmc-journey__node--awal rect { fill: var(--wp--preset--color--tint, #f2f5fa); } .bmc-page .bmc-journey__node--terminal rect { fill: var(--wp--preset--color--utama, #184080); stroke: var(--wp--preset--color--utama, #184080); } .bmc-page .bmc-journey__node--terminal text { fill: var(--wp--preset--color--putih, #ffffff); font-weight: 700; } .bmc-page .bmc-journey__panah { stroke: var(--wp--preset--color--utama, #184080); opacity: .45; } .bmc-page .bmc-journey__svg marker path { fill: var(--wp--preset--color--utama, #184080); fill-opacity: .45; } @media (min-width: 641px) { /* Jalur Study punya empat langkah, Specialist enam. align-items:start mencegah kartu yang pendek diregangkan dan menyisakan ruang kosong. */ .bmc-page .bmc-journey__jalur-grup { flex-direction: row; align-items: flex-start; } } /* ------------------------------------------------------- bidang karier/tab */ /* Radio diklip, bukan display:none, supaya tetap dapat fokus: tombol panah berpindah antar radio secara native, dan ring fokus tampil pada labelnya. */ .bmc-page .bmc-tab__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } .bmc-page .bmc-tab__nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--wp--preset--spacing--40); } .bmc-page .bmc-tab__label { padding: .6rem 1.25rem; border: 1px solid var(--wp--preset--color--garis); border-radius: 999px; background: var(--wp--preset--color--latar); color: var(--wp--preset--color--teks-redup, #5b6472); font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .bmc-page .bmc-tab__label:hover { border-color: var(--wp--preset--color--utama); } /* Status aktif: satu-satunya penanda tab mana yang sedang dibuka. */ .bmc-page .bmc-tab__input:checked + .bmc-tab__label { border-color: var(--wp--preset--color--utama); background: var(--wp--preset--color--utama); color: var(--wp--preset--color--putih); } .bmc-page .bmc-tab__input:focus-visible + .bmc-tab__label { outline: 3px solid var(--wp--preset--color--aksen); outline-offset: 2px; } .bmc-page .bmc-tab__panel { display: none; } /* Panel ke-N tampil ketika radio ke-N tercentang. Enam pasang cukup: unit bisnis hari ini berjumlah dua, dan daftar ini tidak perlu tumbuh cepat. */ .bmc-page .bmc-bidang:has(.bmc-tab__input:nth-of-type(1):checked) .bmc-tab__panels > :nth-child(1), .bmc-page .bmc-bidang:has(.bmc-tab__input:nth-of-type(2):checked) .bmc-tab__panels > :nth-child(2), .bmc-page .bmc-bidang:has(.bmc-tab__input:nth-of-type(3):checked) .bmc-tab__panels > :nth-child(3), .bmc-page .bmc-bidang:has(.bmc-tab__input:nth-of-type(4):checked) .bmc-tab__panels > :nth-child(4), .bmc-page .bmc-bidang:has(.bmc-tab__input:nth-of-type(5):checked) .bmc-tab__panels > :nth-child(5), .bmc-page .bmc-bidang:has(.bmc-tab__input:nth-of-type(6):checked) .bmc-tab__panels > :nth-child(6) { display: block; } .bmc-page .bmc-bidang__grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); } .bmc-page .bmc-bidang__kartu { position: relative; padding: var(--wp--preset--spacing--40); padding-top: calc(var(--wp--preset--spacing--40) + 4px); border: 1px solid var(--wp--preset--color--garis); border-radius: 12px; background: var(--wp--preset--color--latar); box-shadow: var(--bmc-bayang); } /* Pita warna bidang di tepi atas kartu. */ .bmc-page .bmc-bidang__kartu::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 12px 12px 0 0; background: var(--bmc-bidang-warna, var(--wp--preset--color--utama)); } .bmc-page .bmc-bidang__nama { margin-block: 0 .5rem; } .bmc-page .bmc-bidang__kutipan { margin: 0 0 .75rem; padding-left: 1rem; border-left: 3px solid var(--bmc-bidang-warna, var(--wp--preset--color--aksen)); font-style: italic; color: var(--wp--preset--color--teks-redup, #5b6472); } .bmc-page .bmc-bidang__detail > summary { cursor: pointer; font-size: .9375rem; font-weight: 600; color: var(--wp--preset--color--utama); } .bmc-page .bmc-bidang__detail > ul { margin-block: .5rem 0; padding-left: 1.25rem; font-size: .9375rem; color: var(--wp--preset--color--teks-redup, #5b6472); } /* Warna jalur belajar dari mind map brainmatics.id, satu per bidang. */ .bmc-page .bmc-bidang--software-engineering { --bmc-bidang-warna: #184080; } .bmc-page .bmc-bidang--data-science { --bmc-bidang-warna: #288038; } .bmc-page .bmc-bidang--strategic-governance { --bmc-bidang-warna: #b86830; } .bmc-page .bmc-bidang--organization-management { --bmc-bidang-warna: #2080a0; } .bmc-page .bmc-bidang--enterprise-architecture { --bmc-bidang-warna: #683028; } .bmc-page .bmc-bidang--training-management { --bmc-bidang-warna: #501868; } .bmc-page .bmc-bidang--marketing { --bmc-bidang-warna: #a03080; } /* Desktop: disclosure dibuka, program studi tampil langsung. display:block saja tidak cukup — Chrome menyembunyikan isi

tertutup lewat ::details-content, bukan lewat display, sehingga daftar jurusan sempat tidak pernah tampil di desktop. */ @media (min-width: 783px) { .bmc-page .bmc-bidang__grid { grid-template-columns: repeat(2, 1fr); } .bmc-page .bmc-bidang__detail > ul { display: block; } .bmc-page .bmc-bidang__detail::details-content { content-visibility: visible; block-size: auto; overflow: visible; } .bmc-page .bmc-bidang__detail > summary { list-style: none; } .bmc-page .bmc-bidang__detail > summary::-webkit-details-marker { display: none; } } @media (min-width: 1100px) { .bmc-page .bmc-bidang__grid { grid-template-columns: repeat(3, 1fr); } /* Braindevs punya empat bidang: dua kolom dua baris terbaca lebih rapi daripada tiga kolom dengan satu kartu menggantung di baris kedua. */ .bmc-page .bmc-tab__panel--braindevs .bmc-bidang__grid { grid-template-columns: repeat(2, 1fr); } } /* --------------------------------------------------------------- lowongan */ /* Baris meta kartu lowongan: redup dan lebih kecil, patah antar bagian pada layar sempit. */ .bmc-page .bmc-lowongan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; margin: .25rem 0 .75rem; font-size: .8125rem; color: var(--wp--preset--color--teks-redup, #5b6472); } .bmc-page .bmc-lowongan-meta__pemisah { opacity: .6; } /* Dua kolom tipe: Study Internship kiri, Specialist Internship kanan. */ .bmc-page #lowongan .wp-block-column > .wp-block-heading { margin-block: 0 var(--wp--preset--spacing--30); padding-bottom: .5rem; border-bottom: 2px solid var(--wp--preset--color--utama); font-size: 1.25rem; } /* Tinggi kartu disamakan lintas kolom: kolom diregangkan, lalu daftar ikut memanjang sehingga kartu Study dan Specialist berakhir pada garis yang sama meski panjang ringkasannya berbeda. */ .bmc-page #lowongan .wp-block-column { display: flex; flex-direction: column; } .bmc-page #lowongan .wp-block-post-template { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: 1fr; grid-auto-rows: 1fr; flex: 1 1 auto; margin: 0; padding: 0; list-style: none; } .bmc-page #lowongan .wp-block-post { display: flex; flex-direction: column; /* Tata letak alur WordPress memberi margin atas pada tiap anak kecuali yang pertama; di dalam grid itu menurunkan kartu kedua sendirian. */ margin-block: 0; padding: var(--wp--preset--spacing--40); border: 1px solid var(--wp--preset--color--garis); border-radius: var(--bmc-radius); background: var(--wp--preset--color--latar); box-shadow: var(--bmc-bayang); transition: box-shadow .2s ease, transform .2s ease; } .bmc-page #lowongan .wp-block-post:hover { box-shadow: var(--bmc-bayang-naik); transform: translateY(-2px); } .bmc-page #lowongan .wp-block-post-title { margin-block: 0 .25rem; font-size: 1.375rem; } .bmc-page #lowongan .wp-block-post-title a { color: var(--wp--preset--color--teks); text-decoration: none; } .bmc-page #lowongan .wp-block-post-title a:hover { color: var(--wp--preset--color--utama); } .bmc-page #lowongan .wp-block-post p { margin-block: 0 var(--wp--preset--spacing--40); } /* Ringkasan mendorong deretan tombol ke dasar kartu supaya tinggi tombol sejajar antar kartu meski panjang ringkasannya berbeda. */ .bmc-page #lowongan .wp-block-post > p:last-of-type { flex: 1 1 auto; } .bmc-page #lowongan .wp-block-buttons { gap: .5rem; } .bmc-page #lowongan .wp-element-button { padding: .7rem 1.25rem; font-size: .9375rem; } /* Detail = tombol sekunder, Apply = tombol utama. */ .bmc-page #lowongan .wp-block-read-more { display: inline-block; padding: .7rem 1.25rem; border: 1px solid var(--wp--preset--color--utama); border-radius: .5rem; color: var(--wp--preset--color--utama); font-size: .9375rem; font-weight: 600; text-decoration: none; } .bmc-page #lowongan .wp-block-read-more:hover { background: var(--wp--preset--color--tint); } /* -------------------------------------------------------------- rekrutmen */ /* Peringatan penipuan rekrutmen dibedakan dari paragraf biasa: kandidat harus menemukannya tanpa membaca seluruh bagian. */ .bmc-page .bmc-waspada { padding: var(--wp--preset--spacing--40); border: 1px solid var(--wp--preset--color--garis); border-left: 4px solid var(--wp--preset--color--aksen); border-radius: var(--bmc-radius); background: var(--wp--preset--color--latar); } /* -------------------------------------------------------------------- cta */ /* Bagian penutup tidak dibuat melebar: kartu navy bersudut membulat. */ .bmc-page #cta { margin-block: var(--wp--preset--spacing--60); padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); border-radius: var(--bmc-radius); background: var(--wp--preset--color--utama); color: var(--wp--preset--color--putih); text-align: center; } .bmc-page #cta h2 { color: var(--wp--preset--color--putih); } .bmc-page #cta h2::after { margin-inline: auto; background: var(--wp--preset--color--putih); opacity: .5; } .bmc-page #cta p { max-width: 56ch; margin-inline: auto; opacity: .92; } /* ------------------------------------------- tombol WhatsApp mengambang */ /* Tidak dilingkupi .bmc-page: markup dicetak di wp_footer, di luar wadah isi. Berkas ini hanya dimuat pada halaman karier, jadi tombol tetap tidak bocor ke halaman lain. */ .bmc-cta { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 9990; display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; } .bmc-cta__ikon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #25D366; box-shadow: 0 2px 10px rgb(0 0 0 / .25); flex: 0 0 auto; } .bmc-cta__panel { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: 999px; background: #075E54; font-size: .8125rem; line-height: 1.3; /* Menyusut, bukan display:none — transisi lebar tidak memicu layout shift pada konten di belakangnya karena elemennya position:fixed. */ max-width: 15rem; overflow: hidden; transition: max-width .25s ease, padding .25s ease, opacity .25s ease; } .bmc-cta__teks { display: flex; flex-direction: column; white-space: nowrap; } .bmc-cta__teks em { font-style: normal; opacity: .8; font-size: .75rem; } /* Indikator fokus terlihat. */ .bmc-cta:focus-visible { outline: 3px solid #111111; outline-offset: 3px; } /* Eduma can override link color. Force CTA content to preserve contrast. */ .bmc-cta, .bmc-cta:visited, .bmc-cta:hover, .bmc-cta:focus, .bmc-cta__panel, .bmc-cta__teks, .bmc-cta__teks strong, .bmc-cta__teks em, .bmc-cta__ikon { color: #fff !important; text-decoration: none !important; } .bmc-cta__teks strong { font-size: .875rem; font-weight: 700; letter-spacing: .01em; } .bmc-cta__teks em { color: rgb(255 255 255 / .78) !important; font-size: .6875rem; font-weight: 500; } .bmc-cta__ikon { color: #fff !important; } .bmc-cta__ikon svg { display: block; width: 29px; height: 29px; fill: currentColor; } @media (min-width: 783px) { /* Desktop: panel tertutup, terbuka saat kursor menyentuh atau fokus masuk. */ .bmc-cta__panel { max-width: 0; padding-inline: 0; opacity: 0; } .bmc-cta:hover .bmc-cta__panel, .bmc-cta:focus-visible .bmc-cta__panel { max-width: 15rem; padding-inline: .75rem; opacity: 1; } } @media (max-width: 782px) { .bmc-cta { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .bmc-cta__ikon { width: 54px; height: 54px; } /* Ponsel: terbuka tiga detik pertama lalu menyusut menjadi ikon. */ .bmc-cta__panel { animation: bmc-cta-susut .3s ease 3s forwards; } } @keyframes bmc-cta-susut { to { max-width: 0; padding-inline: 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { /* Animasi dimatikan, tetapi status akhirnya tetap dipakai: mematikan animasi saja membuat panel menetap terbuka selamanya di ponsel dan menutupi konten. */ .bmc-cta__panel { transition: none; animation: none; } @media (max-width: 782px) { .bmc-cta__panel { max-width: 0; padding-inline: 0; opacity: 0; } .bmc-cta:focus-within .bmc-cta__panel { max-width: 15rem; padding-inline: .75rem; opacity: 1; } } }