.eugn-notice {
--eugn-max-width: 620px;
--eugn-min-width: 428px;
--eugn-frame-pad: 0px;
--eugn-chrome: 0px;
box-sizing: border-box;
margin: 1.5rem 0;
width: 100%;
max-width: var(--eugn-max-width);
}
.eugn-notice *,
.eugn-notice *::before,
.eugn-notice *::after {
box-sizing: inherit;
}
.eugn-notice__frame {
position: relative;
display: block;
margin: 0;
padding: 0;
font-size: inherit;
line-height: 0;
aspect-ratio: 210 / 297;
}
.eugn-notice__img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 210 / 297;
}
.eugn-notice__link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border: 0;
background: none;
text-decoration: none;
}
.eugn-notice__link:focus-visible {
outline: 3px solid #003399;
outline-offset: 2px;
}
.eugn-notice__sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (min-width: 480px) {
.eugn-notice {
min-width: calc(var(--eugn-min-width) + var(--eugn-chrome));
}
}
@media print {
.eugn-notice {
min-width: 0;
max-width: 100%;
break-inside: avoid;
page-break-inside: avoid;
}
.eugn-notice__img {
width: 100%;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
.eugn-notice,
.eugn-notice__frame,
.eugn-notice__img {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.eugn-notice--reveal {
--eugn-line: color-mix(in srgb, currentColor 20%, transparent);
--eugn-line-hover: color-mix(in srgb, currentColor 42%, transparent);
--eugn-fill: color-mix(in srgb, currentColor 4%, transparent);
--eugn-fill-hover: color-mix(in srgb, currentColor 8%, transparent);
--eugn-frame-pad: 0.9em;
--eugn-chrome: calc(2 * var(--eugn-frame-pad) + 2px);
border: 0;
padding: 0;
}
@media (max-width: 559px) {
.eugn-notice--reveal {
--eugn-frame-pad: 0px;
}
}
@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
.eugn-notice--reveal {
--eugn-line: rgba(128, 128, 128, 0.45);
--eugn-line-hover: rgba(128, 128, 128, 0.75);
--eugn-fill: rgba(128, 128, 128, 0.07);
--eugn-fill-hover: rgba(128, 128, 128, 0.14);
}
}
.eugn-notice__trigger {
display: flex;
align-items: center;
gap: 0.65em;
box-sizing: border-box;
width: 100%;
padding: 0.75em 0.9em;
border: 1px solid var(--eugn-line);
border-radius: 8px;
background: var(--eugn-fill);
color: inherit;
font: inherit;
font-weight: 600;
line-height: 1.35;
text-align: left;
text-decoration: none;
cursor: pointer;
list-style: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.eugn-notice__trigger::-webkit-details-marker {
display: none;
}
.eugn-notice__trigger::marker {
content: '';
}
.eugn-notice__trigger::before,
.eugn-notice__trigger::after {
content: '';
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.eugn-notice__trigger::before {
width: 1.15em;
height: 1.15em;
opacity: 0.75;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.2v6.1c0 4.9 3.4 9.2 8 10.7 4.6-1.5 8-5.8 8-10.7V5.2L12 2Zm-1 13.4-3.2-3.2 1.4-1.4 1.8 1.8 4.4-4.4 1.4 1.4-5.8 5.8Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.2v6.1c0 4.9 3.4 9.2 8 10.7 4.6-1.5 8-5.8 8-10.7V5.2L12 2Zm-1 13.4-3.2-3.2 1.4-1.4 1.8 1.8 4.4-4.4 1.4 1.4-5.8 5.8Z'/%3E%3C/svg%3E");
}
.eugn-notice__trigger::after {
width: 0.85em;
height: 0.85em;
margin-left: auto;
opacity: 0.6;
transition: transform 0.18s ease;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.eugn-notice__trigger:hover,
.eugn-notice__trigger:focus-visible {
border-color: var(--eugn-line-hover);
background: var(--eugn-fill-hover);
}
.eugn-notice__trigger:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.eugn-notice--reveal[open] .eugn-notice__trigger {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.eugn-notice--reveal[open] .eugn-notice__trigger::after {
transform: rotate(180deg);
}
.eugn-notice--reveal[open] .eugn-notice__frame {
aspect-ratio: auto;
padding: var(--eugn-frame-pad);
border: 1px solid var(--eugn-line);
border-top: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.eugn-notice--reveal[open] .eugn-notice__link {
top: var(--eugn-frame-pad);
left: var(--eugn-frame-pad);
width: calc(100% - 2 * var(--eugn-frame-pad));
height: calc(100% - 2 * var(--eugn-frame-pad));
}
@media (prefers-reduced-motion: reduce) {
.eugn-notice__trigger,
.eugn-notice__trigger::after {
transition: none;
}
}
@media print {
.eugn-notice--reveal::details-content {
content-visibility: visible;
block-size: auto;
}
.eugn-notice--reveal[open] .eugn-notice__frame {
--eugn-frame-pad: 0px;
padding: 0;
border: 0;
}
.eugn-notice__trigger {
border: 0;
background: none;
padding-left: 0;
}
}