Design: Implement CodePen-style opening envelope with Hogwarts aesthetics, central wax seal, and subtle top-left return address
This commit is contained in:
kobold-ai
+273
-357
@@ -243,214 +243,185 @@ body {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.antique-envelope-scene {
|
||||
position: relative;
|
||||
width: min(480px, 94vw);
|
||||
height: min(280px, 60vw);
|
||||
margin: 25px auto 35px;
|
||||
perspective: 1200px;
|
||||
perspective-origin: center top;
|
||||
transition: margin-top 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.antique-envelope-scene.envelope-opened {
|
||||
margin-top: 155px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.envelope-base {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
box-shadow:
|
||||
0 20px 45px rgba(0, 0, 0, 0.75),
|
||||
0 4px 14px rgba(0, 0, 0, 0.5);
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
/* Interior of envelope (visible when flap opens and letter rises) */
|
||||
.envelope-interior {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 6px;
|
||||
background-color: #d1be9b;
|
||||
background-image:
|
||||
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%),
|
||||
url('/static/img/parchment_texture.jpg');
|
||||
background-size: cover;
|
||||
border: 2px solid #7a5c36;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* The Letter inside the envelope (slides up when opened) */
|
||||
.letter-sheet {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 4%;
|
||||
width: 92%;
|
||||
height: 440px;
|
||||
max-height: 75vh;
|
||||
background-color: #f7f0df;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(140, 100, 50, 0.15) 100%),
|
||||
url('/static/img/parchment_texture.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 4px;
|
||||
border: 1.5px solid #8e6c43;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
|
||||
z-index: 2;
|
||||
/* In closed state: 100% completely hidden, invisible, non-rendered */
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(50px) scale(0.92);
|
||||
pointer-events: none;
|
||||
transition: transform 0.9s cubic-bezier(0.2, 0.85, 0.25, 1) 0.35s,
|
||||
opacity 0.6s ease 0.35s,
|
||||
visibility 0.6s ease 0.35s,
|
||||
box-shadow 0.8s ease;
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
outline: 1px dashed rgba(130, 95, 55, 0.45);
|
||||
outline-offset: -5px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #8c6838 transparent;
|
||||
}
|
||||
|
||||
.letter-sheet::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.letter-sheet::-webkit-scrollbar-thumb {
|
||||
background-color: #8c6838;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
ENVELOPE BACK WITH V-FLAP CLOSURE
|
||||
- Solid back body
|
||||
- Sender address in top-left
|
||||
- Prominent triangular V-flap
|
||||
- Sketched wax seal at apex
|
||||
CODEPEN ENVELOPE WITH HOGWARTS AESTHETICS
|
||||
- 4-Flap Envelope Back Geometry
|
||||
- Realistic Parchment Textures
|
||||
- Wax Seal in the Exact Center (Mitte)
|
||||
- Small Handwriting Return Address (Top-Left)
|
||||
- Clean Inner Letter Sheet
|
||||
========================================= */
|
||||
|
||||
/* Solid Envelope Back Body */
|
||||
.envelope-back-body {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 6px;
|
||||
background-color: #ebd8ae;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, 0.22) 0%, rgba(130, 95, 45, 0.22) 100%),
|
||||
url('/static/img/parchment_texture.jpg');
|
||||
background-size: cover;
|
||||
border: 1.5px solid #8e6c43;
|
||||
z-index: 3;
|
||||
.envelope-outer-wrap {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
margin: 15px auto 25px;
|
||||
}
|
||||
|
||||
.envelope-form {
|
||||
width: 100%;
|
||||
perspective: 1200px;
|
||||
}
|
||||
|
||||
.env-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding-top: 86%; /* Aspect ratio for envelope body + rising letter */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Absender oben links auf der Rückseite (sonst kein Text) */
|
||||
.envelope-sender-block {
|
||||
/* Interior Back Wall of the Envelope (Bottom 55%) */
|
||||
.env-body-back {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 16px;
|
||||
z-index: 8;
|
||||
text-align: left;
|
||||
font-family: 'Marck Script', 'Caveat', cursive;
|
||||
color: #0d3820; /* Authentic Hogwarts Emerald Ink */
|
||||
max-width: 48%;
|
||||
line-height: 1.25;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.envelope-opened .envelope-sender-block {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sender-label {
|
||||
display: block;
|
||||
font-size: clamp(0.72rem, 2.2vw, 0.85rem);
|
||||
font-family: 'MedievalSharp', serif;
|
||||
color: #4a6352;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sender-name {
|
||||
font-size: clamp(0.92rem, 2.9vw, 1.15rem);
|
||||
font-weight: 700;
|
||||
color: #082816;
|
||||
margin-bottom: 1px;
|
||||
text-shadow: 0 0 1px rgba(8, 40, 22, 0.35);
|
||||
}
|
||||
|
||||
.sender-location {
|
||||
font-size: clamp(0.78rem, 2.4vw, 0.95rem);
|
||||
font-style: italic;
|
||||
color: #1e4530;
|
||||
}
|
||||
|
||||
/* Distinct Triangular V-Closure Flap */
|
||||
.envelope-closing-flap.envelope-v-flap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #dfcd9b;
|
||||
height: 55%;
|
||||
background-color: #2e2014;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.35) 0%, rgba(125, 90, 40, 0.28) 100%),
|
||||
radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.8) 100%),
|
||||
url('/static/img/parchment_texture.jpg');
|
||||
background-size: cover;
|
||||
clip-path: polygon(0 0, 100% 0, 50% 56%);
|
||||
transform-origin: top center;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 6;
|
||||
border-top: 2px solid #7c5830;
|
||||
filter: drop-shadow(0 7px 14px rgba(35, 18, 5, 0.65));
|
||||
}
|
||||
|
||||
.envelope-opened .envelope-closing-flap.envelope-v-flap {
|
||||
transform: rotateX(180deg);
|
||||
border-radius: 0 0 6px 6px;
|
||||
border: 1.5px solid #6b4a24;
|
||||
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75);
|
||||
z-index: 1;
|
||||
filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4));
|
||||
}
|
||||
|
||||
.v-flap-sketch-line {
|
||||
/* Top V-Flap (Hinged at 45% Top Edge of Envelope Body) */
|
||||
.env-top {
|
||||
position: absolute;
|
||||
inset: 4px;
|
||||
clip-path: polygon(2% 2%, 98% 2%, 50% 53.5%);
|
||||
border-top: 1.5px dashed rgba(110, 75, 35, 0.45);
|
||||
width: 100%;
|
||||
height: 33%;
|
||||
top: 45%;
|
||||
z-index: 8;
|
||||
transform-origin: top center;
|
||||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.25s;
|
||||
}
|
||||
|
||||
.env-top:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ebd8ae;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.3) 0%, rgba(130, 95, 45, 0.2) 100%),
|
||||
url('/static/img/parchment_texture.jpg');
|
||||
background-size: cover;
|
||||
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||
filter: drop-shadow(0px 8px 12px rgba(35, 18, 5, 0.6));
|
||||
border-top: 1px solid #7c5830;
|
||||
}
|
||||
|
||||
/* Sketched Dashed Line on Top Flap */
|
||||
.env-top:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 4%;
|
||||
width: 92%;
|
||||
height: 94%;
|
||||
clip-path: polygon(50% 96%, 2% 2%, 98% 2%);
|
||||
border-top: 1.5px dashed rgba(110, 75, 35, 0.4);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Sketched Wax Seal placed right at the tip of the V-flap */
|
||||
/* Bottom Pocket Wrap */
|
||||
.env-bottom-wrap {
|
||||
height: 55%;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
filter: drop-shadow(0px -4px 6px rgba(30, 15, 5, 0.3));
|
||||
}
|
||||
|
||||
/* Bottom Flap */
|
||||
.env-bottom {
|
||||
clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);
|
||||
background-color: #e5cf9f;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 50% 80%, rgba(255, 255, 255, 0.25) 0%, rgba(120, 85, 40, 0.25) 100%),
|
||||
url('/static/img/parchment_texture.jpg');
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
|
||||
/* Side Flaps Inside Bottom Pocket */
|
||||
.env-bottom:before, .env-bottom:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* Left Side Flap */
|
||||
.env-bottom:before {
|
||||
left: 0;
|
||||
clip-path: polygon(100% 50%, 0 0, 0 100%);
|
||||
background-color: #dfc794;
|
||||
background-image:
|
||||
linear-gradient(135deg, rgba(0, 0, 0, 0.12) 0%, rgba(255, 255, 255, 0.15) 100%),
|
||||
url('/static/img/parchment_texture.jpg');
|
||||
box-shadow: inset -2px 0 6px rgba(60, 40, 15, 0.2);
|
||||
}
|
||||
|
||||
/* Right Side Flap */
|
||||
.env-bottom:after {
|
||||
right: 0;
|
||||
clip-path: polygon(0 50%, 100% 0, 100% 100%);
|
||||
background-color: #dbc38f;
|
||||
background-image:
|
||||
linear-gradient(-135deg, rgba(0, 0, 0, 0.12) 0%, rgba(255, 255, 255, 0.15) 100%),
|
||||
url('/static/img/parchment_texture.jpg');
|
||||
box-shadow: inset 2px 0 6px rgba(60, 40, 15, 0.2);
|
||||
}
|
||||
|
||||
/* Small Handwriting Return Address in Top Left ("Abs.: Hogwarts Schule...") */
|
||||
.env-sender-line {
|
||||
position: absolute;
|
||||
top: 47%;
|
||||
left: 14px;
|
||||
font-family: 'Caveat', 'Marck Script', cursive;
|
||||
font-size: clamp(0.76rem, 2.1vw, 0.88rem);
|
||||
color: #0d3820; /* Authentic Hogwarts Emerald Ink */
|
||||
font-weight: 600;
|
||||
z-index: 7;
|
||||
pointer-events: none;
|
||||
letter-spacing: 0.2px;
|
||||
text-shadow: 0 0 1px rgba(13, 56, 32, 0.25);
|
||||
transition: opacity 0.4s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Hand-Sketched Hogwarts Wax Seal in the Exact Mitte (Center) */
|
||||
.sketched-wax-seal {
|
||||
position: absolute;
|
||||
top: 56%;
|
||||
top: 72.5%; /* Exact point where top flap and pocket meet */
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-3deg);
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
z-index: 7;
|
||||
z-index: 9;
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.4s ease;
|
||||
box-shadow:
|
||||
0 8px 22px rgba(0, 0, 0, 0.75),
|
||||
0 2px 6px rgba(0, 0, 0, 0.45);
|
||||
0 8px 20px rgba(0, 0, 0, 0.75),
|
||||
0 2px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.sketched-wax-seal:hover {
|
||||
transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
|
||||
box-shadow:
|
||||
0 12px 28px rgba(0, 0, 0, 0.8),
|
||||
0 0 16px rgba(218, 165, 32, 0.45);
|
||||
0 12px 26px rgba(0, 0, 0, 0.85),
|
||||
0 0 16px rgba(218, 165, 32, 0.5);
|
||||
}
|
||||
|
||||
.seal-crest-img {
|
||||
@@ -459,8 +430,8 @@ body {
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border: 3px solid #4a0d0d;
|
||||
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7);
|
||||
border: 2.5px solid #4a0d0d;
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.seal-emboss-ring {
|
||||
@@ -486,162 +457,114 @@ body {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Open state: Flap opens, seal dissolves, letter slides out */
|
||||
/* Inner Letter Sheet (Clean, No Distracting Text - "Den Text lassen wir erstmal weg") */
|
||||
.env-letter-sheet {
|
||||
width: calc(100% - 2.5rem);
|
||||
left: 1.25rem;
|
||||
position: absolute;
|
||||
height: 68%;
|
||||
top: 46%; /* Tucked safely inside pocket when closed */
|
||||
background-color: #f7f0de;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.7) 0%, rgba(140, 100, 50, 0.15) 100%),
|
||||
url('/static/img/parchment_texture.jpg');
|
||||
background-size: cover;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #8e6c43;
|
||||
outline: 1px dashed rgba(130, 95, 55, 0.4);
|
||||
outline-offset: -5px;
|
||||
z-index: 3; /* Behind bottom pocket (z-index: 4), in front of interior back (z-index: 1) */
|
||||
transition: transform 0.7s cubic-bezier(0.2, 0.85, 0.25, 1) 0.15s, box-shadow 0.6s ease;
|
||||
transform: translateY(0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px 20px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.letter-crest-small {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #7c5830;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
margin-bottom: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.letter-title {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: clamp(0.95rem, 2.8vw, 1.2rem);
|
||||
color: #2b1704;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 3px;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.letter-subtitle {
|
||||
font-family: 'MedievalSharp', serif;
|
||||
font-size: clamp(0.75rem, 2vw, 0.9rem);
|
||||
color: #5a3d1e;
|
||||
font-style: italic;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.btn-launch-express {
|
||||
background: linear-gradient(135deg, #a62b2b 0%, #6e1010 100%);
|
||||
color: #ffd700;
|
||||
border: 1.5px solid #ffd700;
|
||||
border-radius: 25px;
|
||||
padding: 9px 18px;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: clamp(0.78rem, 2.2vw, 0.92rem);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-launch-express:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 215, 0, 0.6);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
OPENED STATE (via .envelope-opened class OR hover)
|
||||
========================================= */
|
||||
|
||||
.envelope-opened .env-top,
|
||||
.envelope-form:hover .env-top {
|
||||
transform: rotateX(-180deg);
|
||||
z-index: 2;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.envelope-opened .sketched-wax-seal {
|
||||
animation: breakSealAnim 0.7s forwards;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.3) rotate(25deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.envelope-opened .envelope-closing-flap.flap-top {
|
||||
transform: rotateX(180deg);
|
||||
z-index: 1;
|
||||
filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4));
|
||||
.envelope-form:hover .sketched-wax-seal {
|
||||
opacity: 0.2;
|
||||
transform: translate(-50%, -50%) scale(0.85);
|
||||
}
|
||||
|
||||
.envelope-opened .letter-sheet {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(-145px) scale(1.02);
|
||||
z-index: 25;
|
||||
box-shadow:
|
||||
0 24px 60px rgba(0, 0, 0, 0.85),
|
||||
0 0 35px rgba(201, 168, 106, 0.4);
|
||||
.envelope-opened .env-letter-sheet,
|
||||
.envelope-form:hover .env-letter-sheet {
|
||||
transform: translateY(-56%);
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(218, 165, 32, 0.35);
|
||||
}
|
||||
|
||||
@keyframes breakSealAnim {
|
||||
0% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); opacity: 1; filter: none; }
|
||||
50% { transform: translate(-50%, -50%) rotate(10deg) scale(1.2); opacity: 0.8; filter: drop-shadow(0 0 25px #ffd700); }
|
||||
100% { transform: translate(-50%, -50%) rotate(25deg) scale(0.3); opacity: 0; filter: drop-shadow(0 0 40px #ffd700); }
|
||||
}
|
||||
|
||||
/* Letter Content Styles */
|
||||
.letter-header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.letter-crest-box {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto 4px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 6px rgba(90, 60, 20, 0.25);
|
||||
border: 1px solid rgba(139, 105, 60, 0.3);
|
||||
}
|
||||
|
||||
.letter-crest-sketch {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: sepia(0.65) contrast(1.15) brightness(0.92);
|
||||
}
|
||||
|
||||
.letter-school-name {
|
||||
font-family: 'MedievalSharp', Georgia, serif;
|
||||
font-size: clamp(0.95rem, 2.8vw, 1.25rem);
|
||||
color: #2c1a0c;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.2px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.letter-headmaster {
|
||||
font-family: 'Caveat', 'Georgia', cursive;
|
||||
font-size: 0.95rem;
|
||||
color: #4a331c;
|
||||
font-style: italic;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.letter-headmaster span {
|
||||
font-size: 0.82rem;
|
||||
color: #6a4c28;
|
||||
}
|
||||
|
||||
.letter-ornament-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
color: #8c6838;
|
||||
margin: 4px auto 8px;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.ornament-rule {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #8c6838, transparent);
|
||||
}
|
||||
|
||||
.ornament-leaf, .ornament-shield {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Handwritten Body in Emerald Ink */
|
||||
.letter-body-handwritten {
|
||||
font-family: 'Marck Script', 'Caveat', cursive;
|
||||
color: #0f3d24; /* Authentic Hogwarts Emerald Ink */
|
||||
text-align: left;
|
||||
padding: 0 4px;
|
||||
line-height: 1.5;
|
||||
text-shadow: 0 0 1px rgba(15, 61, 36, 0.25);
|
||||
}
|
||||
|
||||
.letter-salutation {
|
||||
font-size: clamp(1.15rem, 3.5vw, 1.4rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
color: #0a301c;
|
||||
}
|
||||
|
||||
.letter-paragraph {
|
||||
font-size: clamp(1.0rem, 2.9vw, 1.16rem);
|
||||
margin-bottom: 8px;
|
||||
text-indent: 1.2em;
|
||||
line-height: 1.48;
|
||||
}
|
||||
|
||||
.letter-paragraph strong {
|
||||
color: #052414;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Signature Block */
|
||||
.letter-signature-block {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
font-family: 'Marck Script', 'Caveat', cursive;
|
||||
color: #0f3d24;
|
||||
}
|
||||
|
||||
.letter-closing {
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
color: #2b4533;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.letter-signature-ink {
|
||||
font-size: clamp(1.4rem, 4.2vw, 1.8rem);
|
||||
font-weight: 700;
|
||||
color: #082816;
|
||||
letter-spacing: 0.5px;
|
||||
transform: rotate(-2deg);
|
||||
display: inline-block;
|
||||
margin-bottom: 1px;
|
||||
text-shadow: 0 0 1px rgba(8, 40, 22, 0.35);
|
||||
}
|
||||
|
||||
.letter-sign-title {
|
||||
font-size: 0.88rem;
|
||||
color: #4a6352;
|
||||
font-style: italic;
|
||||
.envelope-opened .env-sender-line {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Controls Below Parchment */
|
||||
@@ -739,44 +662,37 @@ body {
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.antique-envelope-scene {
|
||||
width: min(340px, 94vw);
|
||||
height: min(215px, 60vw);
|
||||
margin: 15px auto 25px;
|
||||
}
|
||||
.antique-envelope-scene.envelope-opened {
|
||||
margin-top: 135px;
|
||||
margin-bottom: 20px;
|
||||
.envelope-outer-wrap {
|
||||
max-width: 360px;
|
||||
margin: 10px auto 20px;
|
||||
}
|
||||
.sketched-wax-seal {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
top: 56%;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
}
|
||||
.envelope-sender-block {
|
||||
top: 10px;
|
||||
left: 12px;
|
||||
max-width: 55%;
|
||||
.env-sender-line {
|
||||
font-size: 0.72rem;
|
||||
left: 10px;
|
||||
}
|
||||
.letter-sheet {
|
||||
top: 10px;
|
||||
left: 2%;
|
||||
width: 96%;
|
||||
height: 400px;
|
||||
max-height: 72vh;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.envelope-opened .letter-sheet {
|
||||
transform: translateY(-120px) scale(1.01);
|
||||
}
|
||||
.letter-paragraph {
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.42;
|
||||
.letter-crest-small {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.letter-title {
|
||||
font-size: 0.96rem;
|
||||
}
|
||||
.letter-subtitle {
|
||||
font-size: 0.76rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btn-launch-express {
|
||||
padding: 7px 14px;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
.btn-launch-quiz {
|
||||
padding: 12px 20px;
|
||||
font-size: 1.0rem;
|
||||
padding: 12px 18px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+665
-684
File diff suppressed because it is too large
Load Diff
@@ -7,8 +7,8 @@
|
||||
<link rel="icon" href="/static/favicon.ico">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Marck+Script&family=MedievalSharp&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=2.8">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Cinzel:wght@600;700&family=Marck+Script&family=MedievalSharp&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=2.9">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+31
-56
@@ -12,69 +12,44 @@
|
||||
<!-- Brief-Intro / Startmaske -->
|
||||
<div id="introCard" class="card intro-card intro-parchment-wrapper">
|
||||
<!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
|
||||
<div class="antique-envelope-scene" id="envelope">
|
||||
<div class="envelope-base">
|
||||
<!-- Dunkleres Pergament-Innenfutter -->
|
||||
<div class="envelope-interior"></div>
|
||||
<!-- Briefumschlag (CodePen-Faltarchitektur mit Hogwarts-Optik) -->
|
||||
<div class="envelope-outer-wrap">
|
||||
<div class="envelope-form" id="envelope">
|
||||
<div class="env-wrap">
|
||||
|
||||
<!-- Der darin liegende Briefbogen (gleitet beim Öffnen majestätisch hervor) -->
|
||||
<div class="letter-sheet" id="letterSheet">
|
||||
<div class="sheet-parchment-layer"></div>
|
||||
<header class="letter-header">
|
||||
<div class="letter-crest-box">
|
||||
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts Crest" class="letter-crest-sketch">
|
||||
</div>
|
||||
<h3 class="letter-school-name" id="letterSchoolTitle">Hogwarts-Schule für Hexerei und Zauberei</h3>
|
||||
<p class="letter-headmaster" id="letterHeadmaster">Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens 1. Klasse)</span></p>
|
||||
<div class="letter-ornament-line">
|
||||
<span class="ornament-leaf">❦</span>
|
||||
<span class="ornament-rule"></span>
|
||||
<span class="ornament-shield">✦</span>
|
||||
<span class="ornament-rule"></span>
|
||||
<span class="ornament-leaf">❧</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Dunklere Pergament-Innenwand (hinter dem Briefbogen) -->
|
||||
<div class="env-body-back"></div>
|
||||
|
||||
<div class="letter-body-handwritten">
|
||||
<p class="letter-salutation" id="letterSalutation">Liebe Hexe, lieber Zauberer,</p>
|
||||
<p class="letter-paragraph" id="letterParagraph1">
|
||||
die schwebenden Kerzen der Großen Halle flackern in unruhigem Schein, und der Sprechende Hut hat nach Jahrhunderten des Schweigens ein wohlbehütetes Geheimnis preisgegeben: Tief in den uralten Gewölben des Schlosses – verborgen hinter den wachsamen Wasserspeiern und den staubigen Bänden der Verbotenen Abteilung – wurde eine magische Prüfungsurkunde versiegelt.
|
||||
</p>
|
||||
<p class="letter-paragraph" id="letterParagraph2">
|
||||
Zehn arkanische Prüfungen des Scharfsinns, der Zauberkunde und der Entschlossenheit liegen vor dir. Nur wer wahren Mut beweist und die uralten Rätsel meistert, sichert sich seinen ehrenvollen Platz in den Chroniken von Hogwarts und trägt bis zu <strong>1.000 Hauspunkte</strong> für sein Haus davon!
|
||||
</p>
|
||||
<p class="letter-paragraph" id="letterParagraph3">
|
||||
Halte deinen Zauberstab bereit, besinne dich auf deine Flüche und Gegenzauber und nimm dich vor verhexten Trugschlüssen in Acht. Wir erwarten deine Eule nicht später als mit dem nächsten Glockenschlag des Uhrenturms.
|
||||
</p>
|
||||
<!-- Der innenliegende Briefbogen (ohne lange Texte, gleitet beim Öffnen heraus) -->
|
||||
<div class="env-letter-sheet" id="letterSheet">
|
||||
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen" class="letter-crest-small">
|
||||
<h3 class="letter-title" id="letterTitle">Hogwarts-Schule</h3>
|
||||
<p class="letter-subtitle" id="letterSubtitle">für Hexerei und Zauberei</p>
|
||||
<button id="startQuizBtnInLetter" class="btn-launch-express" onclick="startQuizFromLetter()">
|
||||
🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<footer class="letter-signature-block">
|
||||
<p class="letter-closing" id="letterClosing">Mit vorzüglicher Hochachtung,</p>
|
||||
<p class="letter-signature-ink" id="letterSignature">Minerva McGonagall</p>
|
||||
<p class="letter-sign-title" id="letterSignTitle">Stellvertretende Schulleiterin</p>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Obere V-Klappe (schließt von oben nach unten zur Mitte) -->
|
||||
<div class="env-top" id="envelopeFlap"></div>
|
||||
|
||||
<!-- Solide Rückseite des Briefumschlags -->
|
||||
<div class="envelope-back-body">
|
||||
<!-- Absender oben links auf der Rückseite (sonst kein Text) -->
|
||||
<div class="envelope-sender-block" id="envelopeSenderBlock">
|
||||
<span class="sender-label" id="senderLabel">Absender:</span>
|
||||
<p class="sender-name" id="envelopeSender">Hogwarts-Schule für Hexerei und Zauberei</p>
|
||||
<p class="sender-location" id="envelopeSenderLocation">Schulleitung • Schloss Hogwarts</p>
|
||||
<!-- Untere Tasche mit Seiten- und Bodenfalzen (CodePen-Taschenfalz) -->
|
||||
<div class="env-bottom-wrap">
|
||||
<div class="env-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Markante dreieckige V-Verschluss-Lasche -->
|
||||
<div class="envelope-closing-flap envelope-v-flap" id="envelopeFlap">
|
||||
<div class="v-flap-sketch-line"></div>
|
||||
</div>
|
||||
<!-- Absender oben links (dezent, klein, wie auf einem echten Brief) -->
|
||||
<div class="env-sender-line" id="envSenderLine">
|
||||
Abs.: Hogwarts Schule für Hexerei und Zauberei
|
||||
</div>
|
||||
|
||||
<!-- Handgezeichnetes Hogwarts-Wachssiegel exakt in der Mitte -->
|
||||
<div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" title="Siegel brechen & Brief öffnen">
|
||||
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen Siegel" class="seal-crest-img">
|
||||
<div class="seal-emboss-ring"></div>
|
||||
<div class="seal-glow"></div>
|
||||
</div>
|
||||
|
||||
<!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
|
||||
<div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" title="Siegel brechen & Brief öffnen">
|
||||
<img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen Siegel" class="seal-crest-img">
|
||||
<div class="seal-emboss-ring"></div>
|
||||
<div class="seal-glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -183,5 +158,5 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="/static/js/quiz.js?v=2.8"></script>
|
||||
<script src="/static/js/quiz.js?v=2.9"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user