338 lines
7.2 KiB
CSS
338 lines
7.2 KiB
CSS
/* ============================================================
|
||
Bratonien Adventskalender – POPUP.CSS
|
||
============================================================ */
|
||
|
||
/* ============================================================
|
||
OVERLAY
|
||
============================================================ */
|
||
|
||
#popup-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(247,243,232,0.88);
|
||
backdrop-filter: blur(6px) brightness(1.05);
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
}
|
||
|
||
#popup-overlay.active {
|
||
display: flex;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
/* ============================================================
|
||
POPUP-BOX – GLOBALER STANDARD (Pinyon)
|
||
============================================================ */
|
||
|
||
#popup-box {
|
||
position: relative;
|
||
width: min(95vw, 1800px);
|
||
max-height: 90vh;
|
||
|
||
background: linear-gradient(
|
||
180deg,
|
||
color-mix(in srgb, var(--ci-creamwhite) 80%, white),
|
||
color-mix(in srgb, var(--ci-gold) 15%, #fff9e6)
|
||
);
|
||
|
||
font-size: 0.96em; /* optisch passend kompensiert */
|
||
line-height: 1.35;
|
||
|
||
border: 2px solid var(--ci-gold);
|
||
border-radius: 16px;
|
||
|
||
padding: clamp(1rem, 1.5vw, 2rem);
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
box-sizing: border-box;
|
||
|
||
box-shadow:
|
||
0 0 25px color-mix(in srgb, var(--ci-gold) 40%, transparent),
|
||
inset 0 0 10px rgba(255,255,255,0.4);
|
||
|
||
animation: popIn .35s ease;
|
||
color: #333;
|
||
}
|
||
|
||
/* ============================================================
|
||
BODY – SPÄTER UMSCHALTBAR AUF LESBARE SCHRIFT
|
||
============================================================ */
|
||
|
||
.popup-body.font-readable {
|
||
font-family: "Bratonien2025 Readable", serif;
|
||
font-size: 1em;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* ============================================================
|
||
CLOSE BUTTON
|
||
============================================================ */
|
||
|
||
#popup-close {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
|
||
width: 32px;
|
||
height: 32px;
|
||
|
||
border: none;
|
||
border: 2px solid var(--ci-gold);
|
||
border-radius: 50%;
|
||
background: color-mix(in srgb, var(--ci-gold) 15%, #fff9e6);
|
||
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
line-height: 28px;
|
||
color: var(--ci-gold);
|
||
cursor: pointer;
|
||
|
||
box-shadow: 0 0 8px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
#popup-close:hover {
|
||
background: color-mix(in srgb, var(--ci-gold) 25%, #fff2cc);
|
||
}
|
||
|
||
/* ============================================================
|
||
GLOBAL CONTAINER
|
||
============================================================ */
|
||
|
||
#popup-content {
|
||
width: 100%;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: clamp(1rem, 2vw, 2.5rem);
|
||
}
|
||
|
||
/* ============================================================
|
||
HEADER
|
||
============================================================ */
|
||
|
||
.popup-header {
|
||
text-align: center;
|
||
border-bottom: 2px solid var(--ci-gold);
|
||
padding-bottom: .5rem;
|
||
}
|
||
|
||
.popup-header h2 {
|
||
margin: 0;
|
||
font-size: clamp(1.8rem, 2.4vw, 3.2rem);
|
||
color: var(--ci-darkgreen);
|
||
font-family: "Bratonien2025", serif; /* fix: Header bleibt in Pinyon */
|
||
}
|
||
|
||
/* ============================================================
|
||
STANDARD ZWEI-SPALTEN LAYOUT
|
||
============================================================ */
|
||
|
||
.popup-body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: clamp(1rem, 2vw, 2.5rem);
|
||
font-family: "Bratonien2025", serif;
|
||
|
||
}
|
||
|
||
/* Linke Spalte */
|
||
.story {
|
||
line-height: 1.6;
|
||
max-width: 70ch;
|
||
}
|
||
|
||
/* Rechte Spalte: Standard-Content */
|
||
.addon {
|
||
padding-top: 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: clamp(1rem, 1.5vw, 2rem);
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.addon img {
|
||
width: 100%;
|
||
max-width: 700px;
|
||
height: auto;
|
||
border-radius: 10px;
|
||
object-fit: contain;
|
||
background:#000;
|
||
box-shadow: 0 0 12px rgba(0,0,0,0.25);
|
||
}
|
||
|
||
/* ============================================================
|
||
REZEPTTAG – BILD SOLL TEXT UMWERBEN
|
||
============================================================ */
|
||
|
||
.popup-recipe .popup-body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: clamp(1rem, 2vw, 2.5rem);
|
||
}
|
||
|
||
/* rechte Spalte → Blockfluss */
|
||
.popup-recipe .popup-recipe-content {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Rezepttitel */
|
||
.recipe-title {
|
||
font-size: clamp(1.3rem,1.6vw,2rem);
|
||
color: var(--ci-darkgreen);
|
||
font-weight: 600;
|
||
margin-bottom: .6rem;
|
||
}
|
||
|
||
/* Bild floaten lassen */
|
||
.popup-recipe-content picture.recipe-image-wrapper {
|
||
float: left;
|
||
width: clamp(260px, 70%, 3840px);
|
||
margin: 0 1.5rem 1.2rem 0;
|
||
border-radius: 10px;
|
||
display: block;
|
||
box-shadow: 0 0 10px rgba(0,0,0,0.2);
|
||
shape-outside: inset(0 round 10px);
|
||
}
|
||
|
||
/* inneres Bild */
|
||
.popup-recipe-content .recipe-image {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
/* Zutaten/Zubereitung */
|
||
.popup-recipe-content h4 {
|
||
font-size: clamp(1rem, 1.2vw, 1.4rem);
|
||
color: var(--ci-darkgreen);
|
||
margin: 0.8rem 0 .4rem 0;
|
||
}
|
||
|
||
.popup-recipe-content ul,
|
||
.popup-recipe-content ol {
|
||
margin-left: 1.2rem;
|
||
}
|
||
|
||
/* ============================================================
|
||
MOBILE
|
||
============================================================ */
|
||
|
||
@media (max-width: 900px) {
|
||
|
||
.popup-body,
|
||
.popup-recipe .popup-body {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.popup-recipe-content picture.recipe-image-wrapper {
|
||
float: none;
|
||
margin: 0 auto 1rem auto;
|
||
width: 100%;
|
||
max-width: 360px;
|
||
shape-outside: none;
|
||
}
|
||
}
|
||
|
||
/* ============================================================
|
||
ANIMATIONEN
|
||
============================================================ */
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes popIn {
|
||
0% { transform: scale(.9); opacity: 0; }
|
||
100% { transform: scale(1); opacity: 1; }
|
||
}
|
||
|
||
/* ===========================================
|
||
TOOLS/Buttons im Header
|
||
=========================================== */
|
||
|
||
.popup-header,
|
||
.popup-header * {
|
||
position: relative;
|
||
font-family: "Bratonien2025 Readable", serif;
|
||
}
|
||
|
||
.popup-tools {
|
||
position: absolute;
|
||
left: 0; /* ← später anpassbar */
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.popup-tools button {
|
||
background: color-mix(in srgb, var(--ci-gold) 20%, #fff9e6);
|
||
border: 2px solid var(--ci-gold);
|
||
border-radius: 6px;
|
||
padding: 0.15rem 0.45rem;
|
||
|
||
font-family: var(--ci-font-readable), serif;
|
||
font-size: 1.3rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.3px;
|
||
color: var(--ci-darkgreen);
|
||
cursor: pointer;
|
||
|
||
box-shadow: 0 0 6px rgba(0,0,0,0.15);
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
.popup-tools button:hover {
|
||
background: color-mix(in srgb, var(--ci-gold) 35%, #fff2cc);
|
||
}
|
||
|
||
/* ============================================================
|
||
ADDON – PICTURE-VORLAGE
|
||
============================================================ */
|
||
|
||
.addon-picture {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.addon-picture-image {
|
||
width: 90%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
|
||
.addon-audio {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.6rem;
|
||
}
|
||
|
||
.addon-audio audio {
|
||
width: 100%;
|
||
max-width: 700px; /* gleiche Breite wie andere Addons */
|
||
}
|
||
|
||
.addon-video-wrapper {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.addon-video {
|
||
width: 90%;
|
||
height: auto;
|
||
display: block;
|
||
}
|