/* ════════════════════════════════════════════════════════════════════════ NECROPOLIS ARENA — site vitrine Maquette et palette du MENU PRINCIPAL du jeu (frontend/src/styles/) : - Anton pour les titres (dégradé métal du .title__name), - Oswald pour les accroches, system-ui pour le corps, - fond-titre.webp + voile radial (écran-titre), - grain.webp en overlay pour la matière des surfaces, - boutons or à pans coupés (.overlay__button), - panneaux bleu nuit grainés (.overlay__panel / .save-slots__entry). ════════════════════════════════════════════════════════════════════════ */ /* ── Polices servies localement, mêmes que le jeu (base.css) ── */ @font-face { font-family: 'Anton'; src: url('fonts/anton-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Oswald'; src: url('fonts/oswald-latin.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── La palette du jeu ── */ --bg: #0b0e14; --nuit: #05070c; --panneau-1: #1c2434; --panneau-2: #11161f; --panneau-3: #090c13; --ligne: #38415f; --texte: #e6e9ef; --muted: #8b93ad; --muted-clair: #a8b0c8; --or: #ff9f1c; --or-clair: #ffc260; --or-fonce: #c4700a; --rouge: #d13a1c; --grain: url('img/grain.webp'); --grain-taille: 256px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--texte); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── Le fond d'écran du menu principal, voile inclus (overlay--title) ── */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 85% at 50% 46%, rgba(4, 6, 11, 0.94) 0%, rgba(4, 6, 11, 0.55) 45%, rgba(4, 6, 11, 0.82) 100%), url('img/fond-titre.webp') center bottom / cover no-repeat, var(--nuit); } /* ── Bascule de langue ── Les éléments de la langue inactive portent `hidden` dans le HTML : le français s'affiche même sans CSS ni JS. En mode anglais, l'attribut `lang` du masque le français et restitue l'anglais — `revert` rend aux blocs leur affichage naturel sans casser les éléments en ligne. */ html[lang='en'] .lang-fr { display: none !important; } html[lang='en'] .lang-en { display: revert !important; } /* ═══════════ EN-TÊTE ═══════════ */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(5, 7, 12, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); } .en-tete-interne { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo { display: flex; flex-direction: column; line-height: 0.85; text-decoration: none; font-family: 'Anton', Impact, 'Arial Black', system-ui, sans-serif; font-weight: 400; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(180deg, #fff4e2 0%, #ffb03a 40%, #d13a1c 74%, #7d1a10 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .logo-ligne--courte { letter-spacing: 0.3em; text-indent: 0.3em; } .bascule-langue { display: flex; gap: 10px; align-items: center; } .bouton-langue { background: none; border: 1px solid var(--ligne); color: var(--muted); padding: 6px 14px; border-radius: 999px; font-family: 'Oswald', system-ui, sans-serif; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .bouton-langue:hover { color: var(--texte); border-color: var(--muted); } .bouton-langue.is-active { background: var(--or); border-color: var(--or); color: #241503; font-weight: 600; } .separateur { color: var(--ligne); } /* ═══════════ HERO ═══════════ */ .hero { display: flex; align-items: center; min-height: 92vh; padding: 72px 24px 96px; } .hero-interne { max-width: 1200px; margin: 0 auto; width: 100%; text-align: center; } .hero-accroche { font-family: 'Oswald', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.35em; font-size: 0.82rem; font-weight: 500; color: var(--or); margin-bottom: 20px; } /* Le titre du jeu, à l'identique de l'écran-titre (ecrans.css) */ .titre-jeu { display: flex; flex-direction: column; align-items: center; margin: 0; font-family: 'Anton', Impact, Haettenschweiler, 'Franklin Gothic Heavy', 'Helvetica Neue', 'Arial Black', system-ui, sans-serif; font-weight: 400; font-stretch: condensed; font-size: clamp(54px, 13vw, 148px); line-height: 0.82; letter-spacing: 0.01em; text-transform: uppercase; background: linear-gradient(180deg, #fff4e2 0%, #ffb03a 40%, #d13a1c 74%, #7d1a10 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 36px rgba(255, 92, 20, 0.34)); } .titre-jeu-ligne--courte { letter-spacing: 0.3em; text-indent: 0.3em; } .hero-accroche-slogan { margin: 28px auto 34px; max-width: 620px; font-size: clamp(1.05rem, 2.5vw, 1.4rem); color: var(--muted-clair); } .or { color: var(--or); } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } /* Bouton principal du jeu (socle.css — .overlay__button) */ .bouton { position: relative; display: inline-block; padding: 13px 32px; border: 0; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ); background: var(--grain) repeat, linear-gradient(180deg, #ffc260 0%, #ff9f1c 46%, #c4700a 100%); background-size: var(--grain-taille) var(--grain-taille), auto; background-blend-mode: overlay, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(90, 40, 0, 0.5); color: #241503; font: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; text-shadow: 0 1px 0 rgba(255, 220, 160, 0.45); text-decoration: none; cursor: pointer; transition: filter 110ms ease, transform 110ms ease; } .bouton:hover, .bouton:focus-visible { filter: brightness(1.08); transform: translateY(-1px); } .bouton:active { transform: translateY(1px); } .bouton--fantome { background: var(--grain) repeat, linear-gradient(180deg, #2b3550 0%, #1a2133 52%, #10151f 100%); background-size: var(--grain-taille) var(--grain-taille), auto; background-blend-mode: overlay, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(90, 102, 140, 0.55), inset 0 -3px 7px rgba(0, 0, 0, 0.55); color: #dfe5f2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } .bouton--fantome:hover, .bouton--fantome:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 159, 28, 0.75), inset 0 -3px 7px rgba(0, 0, 0, 0.5); color: #ffd9a3; } .hero-note { margin-top: 26px; color: var(--muted); font-size: 0.9rem; } /* ═══════════ SECTIONS ═══════════ */ .section { padding: 84px 24px; } .section--alterne { background: rgba(9, 12, 19, 0.6); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); } .section-interne { max-width: 1200px; margin: 0 auto; text-align: center; } .section-accroche { font-family: 'Oswald', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.75rem; font-weight: 500; color: var(--muted); margin-bottom: 8px; } .section-titre { font-family: 'Anton', Impact, 'Arial Black', system-ui, sans-serif; font-weight: 400; font-size: clamp(30px, 5vw, 46px); letter-spacing: 0.02em; text-transform: uppercase; color: var(--or); margin-bottom: 48px; } .section-titre--grand { font-size: clamp(36px, 6vw, 60px); } /* ── Cartes à la matière du jeu (.overlay__panel / .save-slots__entry) ── */ .grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; text-align: left; } .carte { border: 1px solid var(--ligne); border-radius: 10px; padding: 26px 24px; background: var(--grain) repeat, linear-gradient(168deg, var(--panneau-1) 0%, var(--panneau-2) 52%, var(--panneau-3) 100%); background-size: var(--grain-taille) var(--grain-taille), auto; background-blend-mode: overlay, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 18px 44px -22px rgba(0, 0, 0, 0.85); transition: border-color 0.18s, transform 0.18s; } .carte:hover { border-color: var(--or); transform: translateY(-3px); } .carte-icone { font-size: 2rem; margin-bottom: 14px; } .carte h3 { font-family: 'Oswald', system-ui, sans-serif; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.04em; color: var(--or-clair); margin-bottom: 10px; } .carte p { color: var(--muted-clair); font-size: 0.95rem; } /* ── Commandes ── */ .grille-commandes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 0 auto; text-align: left; } .carte--commandes ul { list-style: none; margin-top: 8px; } .carte--commandes li { padding: 7px 0; color: var(--muted-clair); border-bottom: 1px dashed var(--ligne); font-size: 0.95rem; } .carte--commandes li:last-child { border-bottom: none; } .carte--commandes li strong { color: var(--texte); } /* ── Galerie ── */ .galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .galerie img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--ligne); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.85); cursor: zoom-in; transition: border-color 0.18s, transform 0.18s; } .galerie img:hover { border-color: var(--or); transform: scale(1.015); } /* ── CTA ── */ .section--cta { text-align: center; background: radial-gradient(ellipse at center, rgba(255, 159, 28, 0.08), transparent 62%), rgba(9, 12, 19, 0.45); } .section--cta .section-titre { margin-bottom: 34px; } .bouton--grand { padding: 18px 44px; font-size: 1.15rem; } .cta-note { margin-top: 20px; color: var(--muted); font-size: 0.92rem; } /* ═══════════ PIED DE PAGE ═══════════ */ .pied-de-page { border-top: 1px solid var(--ligne); padding: 34px 24px; text-align: center; color: var(--muted); font-size: 0.85rem; } .pied-de-page p:first-child { font-family: 'Oswald', system-ui, sans-serif; color: var(--texte); letter-spacing: 0.15em; margin-bottom: 6px; } /* ═══════════ VISIONNEUSE (lightbox) ═══════════ */ .visionneuse { border: 1px solid var(--ligne); border-radius: 10px; padding: 0; background: rgba(9, 12, 19, 0.96); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8); max-width: min(1400px, 94vw); max-height: 92vh; } .visionneuse::backdrop { background: rgba(5, 7, 12, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .visionneuse img { display: block; max-width: 100%; max-height: 92vh; border-radius: 9px; } .visionneuse-fermer { position: absolute; top: 10px; right: 10px; z-index: 1; width: 38px; height: 38px; border: 1px solid var(--ligne); border-radius: 999px; background: rgba(5, 7, 12, 0.8); color: var(--texte); font-size: 15px; cursor: pointer; } .visionneuse-fermer:hover { border-color: var(--or); color: var(--or); } /* ═══════════ RESPONSIVE ═══════════ */ @media (max-width: 900px) { .grille-commandes { grid-template-columns: 1fr; } } @media (max-width: 520px) { .en-tete-interne { flex-direction: column; gap: 10px; } .section { padding: 60px 18px; } .hero { min-height: auto; padding: 56px 18px 72px; } }