/*
Pack'Arijing Events — Static HTML Template (PRO)
===============================================
Added (per request):
- Search + tag filters (catalogue)
- Meta Pixel + GA4 hooks (see assets/js/tracking.js and assets/js/config.js)
- More documented CSS and JS
How RTL works:
- We flip direction using automatically in JS (see main.js)
- RTL-specific tweaks are handled with [dir="rtl"] selectors.
*/
/* -------------------------------------------------
1) Design tokens
-------------------------------------------------- */
:root{
--bg: #f4f1e6;
--paper: rgba(255,255,255,.55);
--paper-strong: rgba(255,255,255,.70);
--ink: #1e1c18;
--muted: rgba(30,28,24,.65);
--gold: #b08c23;
--gold-2:#d4a373;
--border: rgba(30,28,24,.10);
--shadow: 0 10px 30px rgba(0,0,0,.08);
--radius-xl: 22px;
--radius-lg: 18px;
--radius-md: 14px;
--maxw: 1120px;
}
/* -------------------------------------------------
2) Global reset + overflow fix (anti débordement)
-------------------------------------------------- */
*,
*::before,
*::after{ box-sizing: border-box; }
html, body{
width:100%;
max-width:100%;
overflow-x:hidden; /* Stop horizontal scroll */
}
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--ink);
background: radial-gradient(1200px 600px at 20% 0%, #fff 0%, var(--bg) 40%, #e9e2cf 100%);
}
img, svg, video, canvas{ max-width:100%; height:auto; }
.container{
width: min(var(--maxw), calc(100% - 24px));
margin-inline:auto;
}
/* -------------------------------------------------
3) Header
-------------------------------------------------- */
.header{
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(10px);
background: linear-gradient(to bottom, rgba(244,241,230,.88), rgba(244,241,230,.55));
border-bottom: 1px solid var(--border);
}
.header-inner{
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
}
.brand{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:inherit;
}
.brand-badge{
width: 36px; height: 36px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fff, #eadfbf 70%);
box-shadow: var(--shadow);
display:grid; place-items:center;
font-weight: 700;
border: 1px solid rgba(0,0,0,.05);
}
.brand-title{ font-weight: 750; letter-spacing: .2px; }
.header-actions{
display:flex;
align-items:center;
gap:10px;
}
/* Language pills */
.lang-pills{ display:flex; gap:8px; }
.lang-pill{
display:inline-flex;
align-items:center;
justify-content:center;
height: 34px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--paper);
text-decoration:none;
color: var(--ink);
font-weight: 600;
font-size: 13px;
}
.lang-pill.is-active{
border-color: rgba(176,140,35,.35);
background: rgba(176,140,35,.10);
}
/* Burger button */
.burger{
width: 42px; height: 42px;
border-radius: 14px;
border: 1px solid var(--border);
background: var(--paper);
display:grid; place-items:center;
cursor:pointer;
}
.burger span{
width: 18px; height: 2px;
background: var(--ink);
display:block;
border-radius:2px;
position:relative;
}
.burger span::before,
.burger span::after{
content:"";
position:absolute; left:0;
width: 18px; height: 2px;
background: var(--ink);
border-radius:2px;
}
.burger span::before{ top:-6px; }
.burger span::after { top: 6px; }
@media (max-width:720px){
.lang-pills{ display:none; }
}
/* -------------------------------------------------
4) Hero
-------------------------------------------------- */
.hero{ padding: 26px 0 10px; }
.hero-card{
border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.42));
border: 1px solid rgba(0,0,0,.06);
box-shadow: var(--shadow);
padding: 20px;
}
.hero-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-size: 13px;
color: var(--muted);
background: rgba(255,255,255,.45);
border: 1px solid rgba(0,0,0,.05);
padding: 6px 10px;
border-radius: 999px;
}
.hero-title{
margin: 14px 0 6px;
font-size: clamp(22px, 4vw, 38px);
line-height: 1.12;
letter-spacing: .2px;
}
.hero-sub{
margin:0;
color: var(--muted);
font-size: 15px;
max-width: 70ch;
}
/* -------------------------------------------------
5) Sections + Grid Cards
-------------------------------------------------- */
.section{ padding: 16px 0 26px; }
.section-title{
margin: 8px 0 12px;
font-size: 18px;
letter-spacing: .2px;
}
.grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px;
}
/* Card: min-width:0 prevents overflow inside grid */
.card{
border-radius: var(--radius-lg);
background: rgba(255,255,255,.62);
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 8px 18px rgba(0,0,0,.06);
padding: 14px 14px 12px;
min-width: 0;
}
.card h3{ margin:0 0 8px; font-size:16px; }
.card p{ margin:0 0 12px; color:var(--muted); font-size:13px; }
.badge{
display:inline-flex;
align-items:center;
justify-content:center;
height: 30px;
padding: 0 12px;
border-radius: 999px;
background: rgba(176,140,35,.10);
border: 1px solid rgba(176,140,35,.22);
color: rgba(30,28,24,.85);
font-weight: 650;
font-size: 12.5px;
}
/* Card media placeholder (works also for real images) */
.card-media{
width:100%;
aspect-ratio: 16 / 10;
border-radius: 16px;
/* ✅ fallback premium (quand pas d'image) */
background: linear-gradient(135deg, rgba(176,140,35,.18), rgba(27,38,59,.08));
border: 1px solid rgba(0,0,0,.05);
margin-bottom: 10px;
position:relative;
overflow:hidden;
/* ✅ support images via CSS classes */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Effet lumière (placeholder) */
.card-media::after{
content:"";
position:absolute; inset:-30%;
background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.55), transparent 55%);
transform: rotate(12deg);
}
/* ✅ Quand on met une vraie image (media-xxx), on enlève l'effet qui voile la photo */
.card-media[class*="media-"]::after{
content: none;
}
/* ✅ Images des packs (méthode 2) */
.media-omra{ background-image: url("../img/pack-omra-card.webp"); }
.media-mounassaba{ background-image: url("../img/pack-mounassaba-card.webp"); }
.media-naissance{ background-image: url("../img/pack-naissance-card.webp"); }
/* Corrige le style des liens à l'intérieur des cards */
.card,
.card:visited,
.card:hover,
.card:active{
text-decoration: none;
color: inherit;
}
/* Sécurité : titres et descriptions jamais soulignés */
.card h3,
.card p{
text-decoration: none;
color: inherit;
}
/* -------------------------------------------------
6) Buttons
-------------------------------------------------- */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
height: 42px;
padding: 0 14px;
border-radius: 16px;
border: 1px solid rgba(176,140,35,.25);
background: rgba(176,140,35,.12);
color: var(--ink);
text-decoration:none;
font-weight: 800;
cursor:pointer;
}
.btn-primary{
background: linear-gradient(180deg, rgba(176,140,35,.18), rgba(212,163,115,.14));
}
/* -------------------------------------------------
7) Filter bar (search + chips)
-------------------------------------------------- */
.filterbar{
display:flex;
flex-wrap: wrap;
gap: 10px;
align-items:center;
padding: 12px;
border-radius: var(--radius-lg);
background: rgba(255,255,255,.55);
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 8px 18px rgba(0,0,0,.04);
}
.search{
flex: 1 1 220px;
min-width: 0;
}
.search input{
width: 100%;
height: 42px;
border-radius: 16px;
border: 1px solid rgba(0,0,0,.10);
background: rgba(255,255,255,.75);
padding: 0 14px;
outline: none;
}
.chips{
display:flex;
flex-wrap: wrap;
gap: 8px;
}
.chip{
height: 34px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.10);
background: rgba(255,255,255,.55);
cursor:pointer;
font-weight: 700;
font-size: 13px;
}
.chip.is-active{
border-color: rgba(176,140,35,.35);
background: rgba(176,140,35,.10);
}
/* -------------------------------------------------
8) Footer
-------------------------------------------------- */
.footer{
padding: 22px 0 32px;
color: var(--muted);
font-size: 13px;
}
/* Liens du footer */
.footer a{
color: var(--ink); /* couleur marque (lisible) */
text-decoration: none; /* pas de bleu / pas souligné */
font-weight: 700;
transition: color .2s ease;
}
/* Hover élégant */
.footer a:hover{
color: var(--gold); /* or Pack'Arijing */
text-decoration: underline;
}
/* -------------------------------------------------
9) Off-canvas drawer (burger menu) — Beige premium + gold dust
-------------------------------------------------- */
.overlay{
position: fixed;
inset: 0;
background: rgba(30,28,24,.36); /* un peu plus sombre */
opacity: 0;
pointer-events:none;
transition: opacity .18s ease;
z-index: 60;
}
.overlay.is-open{ opacity:1; pointer-events:auto; }
.drawer{
position: fixed;
top:0; right:0;
height:100vh;
width: min(360px, 92vw);
/* ✅ beige un peu plus foncé (au lieu de 245/239/226) */
background: rgba(236, 226, 206, .86);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-left: 1px solid rgba(176,140,35,.22);
transform: translateX(110%);
transition: transform .22s ease;
z-index: 70;
color: rgba(30,28,24,.92);
overflow: hidden;
box-shadow:
inset 0 0 140px rgba(120, 90, 20, 0.22), /* un peu plus marqué */
inset 0 0 260px rgba(0,0,0,0.12); /* assombrit légèrement */
}
.drawer.is-open{ transform: translateX(0); }
/* Glow/texture premium derrière le contenu (un peu moins lumineux) */
.drawer::before{
content:"";
position:absolute;
inset:-40%;
background:
radial-gradient(circle at 15% 10%, rgba(255,245,215,.55), transparent 58%),
radial-gradient(circle at 90% 25%, rgba(176,140,35,.16), transparent 62%),
linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0));
transform: rotate(8deg);
pointer-events:none;
}
/* ✅ voile sombre subtil (fait ressortir la poussière) */
.drawer::after{
content:"";
position:absolute;
inset:0;
background: radial-gradient(circle at 30% 20%,
rgba(0,0,0,0.06),
rgba(0,0,0,0.14) 70%,
rgba(0,0,0,0.18) 100%);
pointer-events:none;
}
/* Canvas poussière */
.drawer-dust{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
opacity: 1;
mix-blend-mode: normal;
filter:
contrast(1.25) /* plus de présence */
saturate(1.4); /* or plus chaud */
}
/* RTL drawer from left */
[dir="rtl"] .drawer{
right:auto; left:0;
border-left:none;
border-right: 1px solid rgba(176,140,35,.22);
transform: translateX(-110%);
}
[dir="rtl"] .drawer.is-open{ transform: translateX(0); }
.drawer-head{
display:flex;
align-items:center;
justify-content: space-between;
padding: 14px 14px 10px;
position: relative;
z-index: 1; /* au-dessus */
}
.drawer-title{
font-weight: 900;
letter-spacing:.2px;
color: rgba(30,28,24,.95);
}
.drawer-close{
width:42px; height:42px;
border-radius: 14px;
border: 1px solid rgba(176,140,35,.25);
background: rgba(255,255,255,.45);
color: rgba(30,28,24,.90);
cursor:pointer;
position: relative;
z-index: 1;
}
.drawer-section{
padding: 6px 14px 14px;
position: relative;
z-index: 1;
}
.drawer-label{
font-size:12px;
margin: 10px 0 10px;
opacity: 1;
color: rgba(30,28,24,.75);
}
.drawer .lang-pills{ display:flex; gap: 8px; }
.drawer .lang-pill{
background: rgba(255,255,255,.45);
border: 1px solid rgba(176,140,35,.20);
color: rgba(30,28,24,.90);
text-decoration:none;
}
.drawer .lang-pill.is-active{
background: rgba(176,140,35,.16);
border-color: rgba(176,140,35,.35);
}
.drawer a.drawer-link{
display:flex;
padding: .75rem .9rem;
border-radius: 16px;
background: rgba(255,255,255,.44);
border: 1px solid rgba(176,140,35,.18);
color: rgba(30,28,24,.92);
text-decoration:none;
font-weight: 750;
margin-bottom: 8px;
box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
/* -------------------------------------------------
Omra page — Carousel + CTA + Lightbox
-------------------------------------------------- */
.pk-carousel{
position: relative;
display: grid;
grid-template-columns: 44px 1fr 44px;
gap: 10px;
align-items: center;
margin-top: 10px;
}
.pk-track{
display: grid;
grid-auto-flow: column;
grid-auto-columns: 78%;
gap: 12px;
overflow: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding: 6px 2px;
}
@media (min-width: 760px){
.pk-track{ grid-auto-columns: 320px; }
}
.pk-slide{
scroll-snap-align: start;
border-radius: var(--radius-lg);
background: rgba(255,255,255,.62);
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 10px 22px rgba(0,0,0,.08);
overflow: hidden;
cursor: pointer;
min-width: 0;
}
.pk-img{
width: 100%;
aspect-ratio: 1 / 1; /* ✅ carré */
background-size: cover;
background-position: center;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.pk-meta{
padding: 12px 12px 14px;
}
.pk-name{
font-weight: 850;
letter-spacing: .1px;
margin: 0 0 6px;
}
.pk-price{
color: var(--muted);
font-weight: 750;
font-size: 13px;
}
.pk-nav{
width: 44px;
height: 44px;
border-radius: 16px;
border: 1px solid rgba(176,140,35,.22);
background: rgba(255,255,255,.50);
cursor: pointer;
font-size: 22px;
line-height: 1;
}
.pk-dots{
display:flex;
gap: 8px;
justify-content:center;
margin-top: 10px;
}
.pk-dot{
width: 8px; height: 8px;
border-radius: 999px;
border: 1px solid rgba(176,140,35,.35);
background: rgba(176,140,35,.12);
}
.pk-dot.is-active{
background: rgba(176,140,35,.35);
}
/* CTA */
.pk-cta{ padding-top: 8px; }
.pk-cta-card{
border-radius: var(--radius-lg);
background: rgba(255,255,255,.62);
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 10px 22px rgba(0,0,0,.08);
padding: 16px;
}
.pk-cta-title{ margin:0 0 8px; font-size: 18px; }
.pk-cta-sub{ margin:0 0 14px; color: var(--muted); }
.pk-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
/* Lightbox */
.pk-lightbox{
position: fixed;
inset: 0;
z-index: 200;
display: none;
}
.pk-lightbox.is-open{ display:block; }
.pk-lightbox-backdrop{
position:absolute;
inset:0;
background: rgba(0,0,0,.55);
}
.pk-lightbox-dialog{
position: relative;
margin: 8vh auto 0;
width: min(92vw, 520px);
border-radius: 18px;
overflow: hidden;
background: #fff;
box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.pk-lightbox-dialog img{
display:block;
width: 100%;
height: auto;
}
.pk-lightbox-close{
position: absolute;
top: 10px; right: 10px;
width: 42px; height: 42px;
border-radius: 16px;
border: 1px solid rgba(0,0,0,.12);
background: rgba(255,255,255,.85);
cursor:pointer;
}
[dir="rtl"] .pk-lightbox-close{
right:auto; left:10px;
}
/* -------------------------------------------------
10) RTL typography tweaks
-------------------------------------------------- */
[dir="rtl"] body{
font-family: "Noto Naskh Arabic","Noto Sans Arabic", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}
[dir="rtl"] .hero-sub,
[dir="rtl"] .card p,
[dir="rtl"] .footer{ letter-spacing: 0; }
/* -------------------------------------------------
Two columns section (text + square image) + reveal + RTL swap
-------------------------------------------------- */
.two-cols-grid{
display: grid;
grid-template-columns: 1fr;
gap: 14px;
align-items: center;
}
.two-cols-text p{
color: var(--muted);
font-size: 14px;
line-height: 1.65;
}
.two-cols-actions{ margin-top: 12px; }
/* Image carrée */
.two-cols-image{
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 18px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 10px 24px rgba(0,0,0,.10);
border: 1px solid rgba(0,0,0,.06);
background-color: rgba(255,255,255,.35); /* placeholder si image pas encore chargée */
}
/* Desktop & tablet */
@media (min-width: 768px){
.two-cols-grid{
grid-template-columns: 1.1fr .9fr; /* texte | image */
gap: 24px;
}
}
/* ✅ RTL: inverser colonnes automatiquement */
[dir="rtl"] .two-cols-grid{
grid-template-columns: .9fr 1.1fr; /* image | texte */
}
@media (min-width: 768px){
[dir="rtl"] .two-cols-text{ order: 2; }
[dir="rtl"] .two-cols-media{ order: 1; }
}
/* ✅ Hide the Arabic paragraph in FR, show in AR (optional clean) */
.two-cols-ar{ display: none; }
[dir="rtl"] .two-cols-ar{ display: block; }
/* -------------------------------------------------
Reveal animation (fade + slide)
-------------------------------------------------- */
[data-reveal]{
opacity: 0;
transform: translateY(14px);
transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].is-visible{
opacity: 1;
transform: translateY(0);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
[data-reveal]{
opacity: 1;
transform: none;
transition: none;
}
}