@charset "utf-8";
/* CSS Document */
/*
------------------------------------
Put this Script in the
------------------------------------
-----------------------------------------
Example of Accordion in the
-----------------------------------------
Item 1
Content 1
Item 2
Content 2
Item 3
Content 3
*/
/* =========================
SHARED ACCORDION BASE
========================= */
details.acc1,
details.acc2 {
margin: 18px auto;
padding: 0 12px; /* inner horizontal breathing room */
}
@media (min-width: 900px) {
details.acc1,
details.acc2 {
padding: 0 16px;
}
}
/* Remove default marker */
details.acc1 > summary,
details.acc2 > summary {
list-style: none;
}
details.acc1 > summary::-webkit-details-marker,
details.acc2 > summary::-webkit-details-marker {
display: none;
}
/* Shared header geometry */
.acc__btn {
position: relative;
text-align: center;
cursor: pointer;
user-select: none;
padding: 14px 42px 14px 14px; /* identical height */
border-radius: 10px;
font-weight: 600;
letter-spacing: 0.4px;
line-height: 1.35;
max-width: 960px; /* MATCH your content width */
margin: 0 auto 10px auto;
transition:
background-color 180ms ease,
box-shadow 180ms ease,
transform 120ms ease,
border-color 180ms ease;
}
.acc__btn:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
transform: translateY(-1px);
}
/* Lines inside summary */
.acc__line {
display: block;
margin: 6px 0;
line-height: 2;
}
/* Chevron */
.acc__chev {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
transition: transform 180ms ease;
}
.acc__btn:hover .acc__chev {
transform: translateY(-50%) scale(1.15);
}
.acc__btn:hover {
outline: none;
}
/* Rotate chevron when open */
details[open] .acc__chev {
transform: translateY(-50%) rotate(180deg);
}
/* Panel */
.acc__panel {
max-width: 960px; /* SAME as header */
margin: 0 auto 16px auto;
padding: 14px;
background: #FFFFFF;
border-radius: 10px;
}
/* =========================
ACC1 — Brownish
========================= */
details.acc1 > summary.acc__btn {
background: linear-gradient(to bottom, #f7f2ec, #efe6dc);
color: #4a3b2a;
border: 1px solid #c7b299;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
details.acc1 > summary.acc__btn:hover {
background: linear-gradient(to bottom, #f3eadf, #e6d8c8);
border-color: #b89b7a;
box-shadow:
0 0 0 2px rgba(107,79,58,0.25),
0 4px 12px rgba(0,0,0,0.18);
}
details.acc1 .acc__chev {
border-top: 9px solid #6b4f3a;
}
details.acc1 .acc__panel {
border: 1px solid #e6d8cb;
}
/* =========================
ACC2 — Reddish (Spotlight)
========================= */
details.acc2 > summary.acc__btn {
background: #FDECEC;
color: #8B0000;
border: 2px solid #8B0000; /* visually heavier, same padding */
box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
details.acc2 > summary.acc__btn:hover {
background: #f9dede;
border-color: #a40000;
box-shadow:
0 0 0 2px rgba(139,0,0,0.25),
0 4px 12px rgba(0,0,0,0.18);
}
details.acc2 .acc__chev {
border-top: 9px solid #8B0000;
}
details.acc2 .acc__panel {
border: 1px solid #f1c6c6;
}