@import 'tailwindcss'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; @theme { --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-display: 'Fraunces', ui-serif, Georgia, serif; /* Identite visuelle deduite des visuels reels du projet (drapeau RDC, portraits institutionnels) : bleu Congo, or, rouge d'accent. */ --color-congo-950: #050b18; --color-congo-900: #0a1a33; --color-congo-800: #0f2a52; --color-congo-700: #14386c; --color-congo-600: #1c4c8f; --color-congo-500: #2563ab; --color-gold-100: #faf1d8; --color-gold-300: #edd08a; --color-gold-500: #d9a52a; --color-gold-600: #b8871c; --color-accent-red: #c8102e; --color-accent-red-dark: #8f0b21; --color-ink-900: #12141a; --color-ink-700: #363a45; --color-ink-500: #5b606d; --color-paper: #f8f6f0; --color-paper-dim: #f0ece2; } @layer base { body { background-color: var(--color-paper); color: var(--color-ink-900); } :focus-visible { outline: 2px solid var(--color-gold-600); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /* ========================================================================== Direction artistique — signature visuelle ========================================================================== */ @layer components { /* Typographie premium : titres tres grands, respiration genereuse. Les tailles utilisent clamp() pour rester elegantes du mobile au grand ecran sans media queries repetees. */ .h-signature { font-family: var(--font-display); font-size: clamp(2.75rem, 4.5vw + 1.25rem, 6rem); line-height: 1.02; letter-spacing: -0.01em; } .h-section { font-family: var(--font-display); font-size: clamp(1.75rem, 1.6vw + 1.25rem, 2.75rem); line-height: 1.08; } .devise-mark { font-family: var(--font-display); font-style: italic; } /* Filigrane du logo : tres faible opacite, jamais interactif, jamais repete plus d'une fois par section. Le fichier source est deja une silhouette monochrome (voir GenerateBrandAssets::generateWatermark) — pas de couleur supplementaire introduite dans la palette. */ .brand-watermark { display: block; opacity: 0.05; pointer-events: none; user-select: none; } /* Reveal au scroll : par defaut tout est visible (pas de JS = pas de contenu cache). Seul app.js, apres avoir confirme prefers-reduced-motion: false ET la disponibilite d'IntersectionObserver, ajoute la classe reveal-ready sur — le meme script se charge alors aussi de reveler chaque .reveal, pour ne jamais laisser du contenu masque sans script pour le reveler (voir resources/js/app.js). */ html.reveal-ready .reveal { opacity: 0; transform: translateY(1.1rem); transition: opacity 0.7s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.7s cubic-bezier(0.16, 0.8, 0.24, 1); } html.reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } html.reveal-ready .reveal-delay-1 { transition-delay: 0.1s; } html.reveal-ready .reveal-delay-2 { transition-delay: 0.2s; } html.reveal-ready .reveal-delay-3 { transition-delay: 0.3s; } } /* Introduction cinematographique : ecran de signature joue une seule fois par session (voir sessionStorage dans le script inline du ), jamais sur les navigations suivantes. Duree totale ~1.6s. */ #intro-splash { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--color-congo-950); } html.intro-skip #intro-splash { display: none; } #intro-splash .intro-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, rgba(217, 165, 42, 0.35), transparent 60%); opacity: 0; animation: introGlow 0.7s ease 0.75s forwards; } #intro-splash .intro-logo { opacity: 0; transform: scale(0.86); animation: introLogoIn 0.55s cubic-bezier(0.16, 0.8, 0.24, 1) 0.1s forwards; } #intro-splash .intro-tagline { opacity: 0; transform: translateY(10px); animation: introTaglineIn 0.5s ease 0.5s forwards; } #intro-splash.is-leaving { animation: introFadeOut 0.4s ease forwards; pointer-events: none; } @keyframes introLogoIn { to { opacity: 1; transform: scale(1); } } @keyframes introTaglineIn { to { opacity: 1; transform: translateY(0); } } @keyframes introGlow { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0; } } @keyframes introFadeOut { to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { #intro-splash { display: none !important; } } /* Compteurs animes : la valeur finale est toujours presente dans le HTML (data-target sur le noeud texte lui-meme) — sans JS ou avec prefers-reduced-motion, le chiffre correct s'affiche simplement sans compter, aucune information n'est jamais cachee. */ [data-counter] { font-variant-numeric: tabular-nums; } @layer components { .container-page { @apply mx-auto w-full max-w-7xl px-5 sm:px-8; } .eyebrow { @apply font-sans text-xs font-semibold uppercase tracking-[0.2em] text-gold-600; } .h-display { font-family: var(--font-display); } .badge-confidence { @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium; } .badge-confirmed { @apply bg-congo-800/5 text-congo-800 ring-1 ring-inset ring-congo-800/15; } .badge-probable { @apply bg-gold-500/10 text-gold-600 ring-1 ring-inset ring-gold-500/30; } .badge-undated, .badge-unconfirmed { @apply bg-ink-500/5 text-ink-500 ring-1 ring-inset ring-ink-500/15; } .btn-primary { @apply inline-flex items-center justify-center gap-2 rounded-full bg-congo-800 px-6 py-3 font-sans text-sm font-semibold text-paper transition hover:bg-congo-700 focus-visible:outline-gold-500; } .btn-secondary { @apply inline-flex items-center justify-center gap-2 rounded-full border border-ink-900/15 bg-transparent px-6 py-3 font-sans text-sm font-semibold text-ink-900 transition hover:border-ink-900/30 hover:bg-ink-900/[0.03]; } .btn-gold { @apply inline-flex items-center justify-center gap-2 rounded-full bg-gold-500 px-6 py-3 font-sans text-sm font-semibold text-congo-950 transition hover:bg-gold-600; } }