🍓 Berry CSS 3.0

Details typography

Details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.
Details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.
Details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.
<details open>
    <summary>Details</summary>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details>
    <summary>Details</summary>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details>
    <summary>Details</summary>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

Details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.
<details open>
<summary class="bg-pink100 t-pink600 hover-bg-pink150 pad10-tb pad20-rl" style="--summary-marker: '➕'; --summary-marker-rotate: 135deg; --summary-marker-color: #B5386B; --summary-marker-time: .9s;">Details</summary>
    <div class="bg-pink50 pad20 animation-fade">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

Details in group
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.
Details in group
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.
Details in group
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.
<details class="details-group" open>
    <summary class="bg-gray100 hover-bg-gray150 pad10-tb pad20-rl">Details in group</summary>
    <div class="bg-gray50 pad20 animation-fade">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details class="details-group">
    <summary class="bg-gray100 hover-bg-gray150 pad10-tb pad20-rl">Details in group</summary>
    <div class="bg-gray50 pad20 animation-fade">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details class="details-group">
    <summary class="bg-gray100 hover-bg-gray150 pad10-tb pad20-rl">Details in group</summary>
    <div class="bg-gray50 pad20 animation-fade">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<script>
detailsToggle('details-group'); // any class group 

function detailsToggle(groupClass) {
    const details = Array.from(document.getElementsByClassName(groupClass));

    details.forEach((targetDetail) => {
        targetDetail.addEventListener('click', () => {
            details.forEach((detail) => {
                if (detail !== targetDetail) {
                    detail.removeAttribute('open');
                }
            });
        });
    });
}
</script>