/*
* anniversaire-page.css
* Custom styles for the anniversaire (birthday) page only.
* Loaded AFTER styles.css – all selectors are specific enough
* not to affect other pages. Works on FR / NL / EN versions.
*
* Load order in :
*
*
*/
/* ─────────────────────────────────────────────────────────────────────────
1. BODY – position context for sparkle dots + ensure opaque white bg
───────────────────────────────────────────────────────────────────────── */
body {
position: relative;
background-color: #ffffff;
}
/* ─────────────────────────────────────────────────────────────────────────
2. BANNER IMAGE
Overrides .Landingparallaxanniversaire defined in styles.css.
───────────────────────────────────────────────────────────────────────── */
.Landingparallaxanniversaire {
background: url('../img/BouncingCastleBanner.png') center top / cover no-repeat !important;
aspect-ratio: 16 / 8 !important;
border-radius: 24px !important;
box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1) !important;
position: relative !important;
overflow: hidden !important;
}
/* Subtle vignette overlay */
.Landingparallaxanniversaire::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(0,0,0,.04) 0%, rgba(0,0,0,0) 40%, rgba(255,255,255,.18) 100%),
radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.12) 100%);
border-radius: 24px;
pointer-events: none;
}
/* ─────────────────────────────────────────────────────────────────────────
3. HERO SECTION
───────────────────────────────────────────────────────────────────────── */
/* Small kicker pill above headline */
.hero-kicker {
display: inline-block;
font-family: 'Antic', sans-serif;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: #b9923f;
padding: 5px 16px;
border: 1px solid rgba(185,146,63,.35);
border-radius: 999px;
margin-bottom: 22px;
}
/* Main H2 headline */
.hero-headline-block {
font-family: 'Aboreto', sans-serif;
font-size: clamp(22px, 4vw, 40px);
font-weight: 700;
color: #1a1a1a;
line-height: 1.7;
margin-bottom: 24px;
letter-spacing: .04em;
text-transform: uppercase;
}
.hero-hl-second { display: inline; }
/* Animated highlight box shared by both variants */
.hl-box {
display: inline-block;
position: relative;
padding: 4px 16px 6px;
border-radius: 8px;
line-height: 1.25;
white-space: nowrap;
animation: hl-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.hl-box:nth-of-type(1) { animation-delay: .4s; }
.hl-box:nth-of-type(2) { animation-delay: .7s; }
@keyframes hl-pop {
from { opacity: 0; transform: scale(.85) translateY(6px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Gold shimmer box */
.hl-gold {
background-image: linear-gradient(105deg, #b9923f 30%, #e4bf72 50%, #b9923f 70%);
background-size: 200% 100%;
color: #fff;
animation: hl-pop .6s cubic-bezier(.34,1.56,.64,1) both,
hl-shimmer 3s ease-in-out 1.2s infinite;
}
@keyframes hl-shimmer {
0%,100% { background-position: 100% 0; }
50% { background-position: 0% 0; }
}
/* Dark box */
.hl-dark {
background: #1a1a1a;
color: #fff;
}
/* Body copy */
.hero-body {
font-family: 'Antic', sans-serif;
font-size: 1.05rem;
color: #444;
max-width: 640px;
margin: 0 auto 24px;
line-height: 1.7;
text-align: left;
}
.hero-body strong { color: #1a1a1a; }
/* Main CTA button */
.hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: .85rem 2rem;
border-radius: 999px;
background: #1a1a1a;
color: #fff !important;
font-family: 'Aboreto', sans-serif;
font-size: .9rem;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
border: none;
transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.hero-cta:hover {
background: #b9923f;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(185,146,63,.35);
color: #fff !important;
text-decoration: none;
}
.hero-cta .arrow { transition: transform .22s ease; }
.hero-cta:hover .arrow { transform: translateX(4px); }
/* Pulsing ring around CTA */
.visiter-btn-pulse { position: relative; }
.visiter-btn-pulse::before {
content: '';
position: absolute;
inset: -5px;
border-radius: 999px;
border: 2px solid rgba(212,175,55,.45);
animation: ring-pulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes ring-pulse {
0% { opacity: .8; transform: scale(.95); }
70% { opacity: 0; transform: scale(1.18); }
100% { opacity: 0; transform: scale(1.18); }
}
/* ─────────────────────────────────────────────────────────────────────────
4. TRUST STRIP (4 benefit pills)
───────────────────────────────────────────────────────────────────────── */
.trust-strip {
display: grid;
grid-template-columns: repeat(4, auto);
gap: 10px;
justify-content: center;
margin: 8px auto 24px;
max-width: 860px;
padding: 0 16px;
}
.trust-item {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
font-family: 'Antic', sans-serif;
font-size: .8rem;
color: #7a5c1e;
letter-spacing: .04em;
background: rgba(212,175,55,.1);
border: 1px solid rgba(212,175,55,.3);
border-radius: 999px;
padding: 8px 16px;
white-space: nowrap;
}
.trust-icon {
width: 15px; height: 15px;
color: #b9923f;
flex-shrink: 0;
}
/* ─────────────────────────────────────────────────────────────────────────
5. CASTLE SELECTOR TABS
───────────────────────────────────────────────────────────────────────── */
.castle-selector {
display: flex;
justify-content: center;
gap: 14px;
padding: 24px 16px 16px;
flex-wrap: wrap;
}
.castle-tab {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 20px 6px 0;
border-radius: 999px;
border: 2px solid #d4af37;
background: transparent;
color: #555;
font-family: 'Aboreto', sans-serif;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
transition: all .28s ease;
text-decoration: none;
white-space: nowrap;
overflow: visible;
}
.castle-tab .tab-thumb {
width: 68px;
height: 68px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #d4af37;
flex-shrink: 0;
transition: border-color .28s ease, transform .28s ease;
margin: -16px 4px -16px -2px;
box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.castle-tab .tab-dot {
width: 9px; height: 9px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.castle-tab-1 .tab-dot { background: #e05a2b; }
.castle-tab-2 .tab-dot { background: #2b70c9; }
.castle-tab.active,
.castle-tab:hover {
background: #d4af37;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(212,175,55,.32);
text-decoration: none;
}
.castle-tab.active .tab-thumb,
.castle-tab:hover .tab-thumb {
border-color: rgba(255,255,255,.8);
transform: scale(1.08);
}
/* Castle panels – fade in on switch, no translateY so no layout jump */
.castle-panel { display: none; }
.castle-panel.active {
display: block;
animation: panel-fade-in .25s ease forwards;
}
@keyframes panel-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ─────────────────────────────────────────────────────────────────────────
6. PRODUCT CARD & BADGES
───────────────────────────────────────────────────────────────────────── */
.castle-card {
background: #fafafa;
border-radius: 16px;
padding: 24px 20px;
margin-bottom: 8px;
box-shadow: 0 2px 18px rgba(0,0,0,.06);
}
.product-badge {
display: inline-block;
font-family: 'Antic', sans-serif;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 999px;
margin-bottom: 8px;
}
.badge-stella { background: rgba(224,90,43,.1); color: #c44a1e; border: 1px solid rgba(224,90,43,.25); }
.badge-bluey { background: rgba(43,112,201,.1); color: #1a5aab; border: 1px solid rgba(43,112,201,.25); }
/* Dimension colour dots */
.dim-option {
display: flex;
align-items: flex-start;
gap: 7px;
margin-bottom: 5px;
font-family: 'Antic', sans-serif;
font-size: .88rem;
line-height: 1.4;
}
.dim-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 4px;
}
.dim-dot-stella { background: #e05a2b; }
.dim-dot-bluey { background: #2b70c9; }
/* "Nouveau" shimmer badge */
.new-badge {
position: relative;
display: inline-block;
font-family: 'Aboreto', sans-serif;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
padding: 3px 12px;
border-radius: 999px;
background: linear-gradient(135deg, #2b70c9, #5fa0f0);
color: #fff;
margin-left: 8px;
vertical-align: middle;
overflow: hidden;
}
.new-badge::after {
content: '';
position: absolute;
top: 0; left: -80%;
width: 60%; height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,.55), transparent);
animation: shimmer 2.2s infinite;
}
@keyframes shimmer {
0% { left: -80%; }
60% { left: 120%; }
100% { left: 120%; }
}
/* ─────────────────────────────────────────────────────────────────────────
7. PHOTO GRID (2-column castle photos)
───────────────────────────────────────────────────────────────────────── */
.photo-outer-wrap {
width: 100%;
padding: 16px 24px 0;
box-sizing: border-box;
display: flex;
justify-content: center;
}
.photo-grid-2 {
display: flex !important;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
gap: 12px;
width: 100%;
max-width: 1040px;
margin: 0 auto;
box-sizing: border-box;
}
.photo-grid-2 > div {
flex: 1 1 0;
min-width: 0;
padding: 0;
}
/* Override styles.css .image-link which is inline-block — causes centering issues */
.photo-grid-2 .image-link {
display: block !important;
border-radius: 12px !important;
animation: none !important; /* disable floaty animation inside grid */
}
.photo-grid-2 .image-link:hover { border-radius: 12px !important; }
.photo-grid-2 img { border-radius: 12px; }
.photo-grid-2 .castle-photo {
height: 260px;
object-fit: cover;
width: 100%;
border-radius: 12px;
display: block;
}
@media (min-width: 768px) {
.photo-grid-2 .castle-photo { height: 400px; }
}
/* ─────────────────────────────────────────────────────────────────────────
8. PRICE PILLS
───────────────────────────────────────────────────────────────────────── */
.price-highlight-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 4px 0;
}
.price-pill {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: #fff;
border: 2px solid #d4af37;
border-radius: 12px;
padding: 8px 18px;
min-width: 90px;
}
.price-pill-alt {
background: #fff;
border-color: #d4af37;
}
.price-label {
font-family: 'Antic', sans-serif;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: #888;
}
.price-pill-alt .price-label { color: #888; }
.price-amount {
font-family: 'Aboreto', sans-serif;
font-size: 22px;
font-weight: 700;
color: #b9923f;
line-height: 1;
}
.price-pill-alt .price-amount { color: #b9923f; }
.price-sep {
font-family: 'Antic', sans-serif;
font-size: 12px;
color: #aaa;
text-transform: uppercase;
letter-spacing: .1em;
}
/* ─────────────────────────────────────────────────────────────────────────
9. LIVRAISON SECTION
───────────────────────────────────────────────────────────────────────── */
.livraison-container { padding-top: 8px; padding-bottom: 32px; }
.livraison-map-col { display: flex; align-items: stretch; }
.livraison-map-wrap {
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 28px rgba(0,0,0,.1);
position: relative;
}
.livraison-map-img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 280px;
display: block;
}
.livraison-text-col {
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.livraison-card {
background: #fafafa;
border-radius: 14px;
padding: 16px 20px;
border: 1px solid rgba(212,175,55,.2);
transition: box-shadow .22s ease, transform .22s ease;
}
.livraison-card:hover {
box-shadow: 0 4px 18px rgba(212,175,55,.18);
transform: translateY(-2px);
}
.livraison-icon-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.livraison-icon-circle {
font-size: 22px;
flex-shrink: 0;
line-height: 1;
margin-top: 2px;
}
.livraison-card-title {
font-family: 'Aboreto', sans-serif;
font-size: 14px;
letter-spacing: .06em;
color: #1a1a1a;
margin: 0 0 4px;
text-transform: uppercase;
}
.livraison-card-sub {
font-family: 'Antic', sans-serif;
font-size: .92rem;
color: #555;
margin: 0;
line-height: 1.5;
}
.livraison-cta { margin-top: 4px; }
/* ─────────────────────────────────────────────────────────────────────────
10. AGENDA / CALENDAR
───────────────────────────────────────────────────────────────────────── */
.castle-calendar-section { padding: 0 0 20px; }
/* ─────────────────────────────────────────────────────────────────────────
11. SPARKLE DOTS (background ambient effect)
───────────────────────────────────────────────────────────────────────── */
.sparkle-dot {
position: absolute;
border-radius: 50%;
background: #d4af37;
opacity: 0;
pointer-events: none;
z-index: -1; /* behind every page element */
animation: sparkle-pop var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes sparkle-pop {
0%,100% { transform: scale(0); opacity: 0; }
40% { transform: scale(1.5); opacity: var(--peak); }
70% { transform: scale(1.0); opacity: calc(var(--peak) * .5); }
}
/* ─────────────────────────────────────────────────────────────────────────
12. RESPONSIVE – mobile & tablet
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
/* Trust strip: 2×2 grid */
.trust-strip {
grid-template-columns: 1fr 1fr;
max-width: 400px;
gap: 8px;
}
.trust-item { white-space: normal; text-align: center; }
/* Castle tabs */
.castle-tab { font-size: 11px; padding: 5px 14px 5px 0; gap: 7px; }
.castle-tab .tab-thumb { width: 52px; height: 52px; margin: -12px 3px -12px -2px; }
/* Hero typography */
.hero-headline-block { font-size: clamp(19px, 6vw, 26px); }
.hl-box { padding: 3px 10px 4px; }
.hero-body { font-size: .95rem; }
.hero-cta { padding: .75rem 1.6rem; font-size: .82rem; }
/* Price pills */
.price-amount { font-size: 19px; }
.price-pill { min-width: 76px; padding: 6px 12px; }
}
@media (max-width: 400px) {
.castle-tab { font-size: 10px; padding: 4px 12px 4px 0; gap: 6px; }
.castle-tab .tab-thumb { width: 44px; height: 44px; margin: -10px 2px -10px -1px; }
.hero-headline-block { font-size: clamp(17px, 5.5vw, 22px); }
}