/* ====================================================================== privacy.css — Nomacool Legal Pages (Privacy) Scope: ONLY affects pages with DO NOT touch style.css — this file is dedicated to legal pages. ====================================================================== */ /* ---------------------------------------------------------------------- 00) Safety scope ---------------------------------------------------------------------- */ body.nmLegal {} /* ---------------------------------------------------------------------- 01) Base theme (reuse your CSS variables from style.css) ---------------------------------------------------------------------- */ body.nmLegal{ font-family: var(--font) !important; color: var(--fg); background: radial-gradient(1200px 560px at 10% -10%, rgba(19,153,255,.12), transparent 55%), radial-gradient(1000px 520px at 95% 0%, rgba(0,76,84,.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0)), var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.nmLegal .nmLegalWrap a{ color: inherit; text-decoration: none; } body.nmLegal .nmLegalWrap img{ max-width: 100%; height: auto; } /* Wrap */ body.nmLegal .nmLegalWrap{ max-width: 1080px; margin: 0 auto; padding: 18px; } @media (min-width: 960px){ body.nmLegal .nmLegalWrap{ padding: 26px; } } /* ---------------------------------------------------------------------- 03) Main card ---------------------------------------------------------------------- */ body.nmLegal .nmLegalMain{ padding: 18px 0 14px; } body.nmLegal .nmLegalCard{ position: relative; width: 100%; background: rgba(255,255,255,.86); border: 1px solid rgba(0,0,0,.08); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; padding: 18px; } @media (min-width: 860px){ body.nmLegal .nmLegalCard{ padding: 22px; } } body.nmLegal .nmLegalCard::before{ content: ""; position: absolute; inset: -2px; background: radial-gradient(700px 260px at 0% 0%, rgba(19,153,255,.12), transparent 60%), radial-gradient(700px 260px at 100% 0%, rgba(0,76,84,.10), transparent 62%); pointer-events: none; } body.nmLegal .nmLegalCard > *{ position: relative; } /* Header section */ body.nmLegal .nmLegalHeader{ padding: 2px 2px 10px; } body.nmLegal .nmLegalTitle{ margin: 0; font-size: clamp(22px, 3.2vw, 30px); line-height: 1.12; font-weight: 900; letter-spacing: -0.02em; color: var(--midnight); } body.nmLegal .nmLegalMeta{ margin-top: 8px; display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; color: rgba(0,0,0,.58); font-weight: 800; font-size: 13px; } body.nmLegal .nmLegalMetaLabel{ padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.65); } body.nmLegal .nmLegalMetaSep{ opacity: .55; font-weight: 900; } body.nmLegal .nmLegalIntro{ margin: 12px 0 0; color: rgba(0,0,0,.74); font-size: 15px; line-height: 1.7; font-weight: 600; max-width: 86ch; } /* ---------------------------------------------------------------------- 04) Sections grid ---------------------------------------------------------------------- */ body.nmLegal .nmLegalGrid{ margin-top: 16px; display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 880px){ body.nmLegal .nmLegalGrid{ grid-template-columns: 1fr 1fr; gap: 16px; } body.nmLegal .nmLegalSection--c, body.nmLegal .nmLegalSection--g{ grid-column: 1 / -1; } } /* ---------------------------------------------------------------------- 05) Section boxes (colored, premium) ---------------------------------------------------------------------- */ body.nmLegal .nmLegalSection{ position: relative; border-radius: 18px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 14px 28px rgba(0,0,0,.06); overflow: hidden; background: rgba(255,255,255,.72); } body.nmLegal .nmLegalSection::before{ content:""; position:absolute; inset:0; opacity: .9; pointer-events:none; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.6)); } body.nmLegal .nmLegalSection::after{ content:""; position:absolute; left: 0; top: 0; bottom: 0; width: 6px; background: rgba(0,76,84,.55); pointer-events:none; } body.nmLegal .nmLegalSection > *{ position: relative; } body.nmLegal .nmLegalSectionHead{ padding: 14px 16px 8px; } body.nmLegal .nmLegalH2{ margin: 0; font-size: 15px; line-height: 1.2; font-weight: 900; color: rgba(0,0,0,.86); letter-spacing: -0.01em; } /* List inside section */ body.nmLegal .nmLegalList{ margin: 0; padding: 0 18px 16px 40px; color: rgba(0,0,0,.76); font-size: 14px; line-height: 1.65; font-weight: 600; } body.nmLegal .nmLegalList li{ margin: 7px 0; } body.nmLegal .nmLegalList li::marker{ color: rgba(0,76,84,.70); } @media (max-width: 560px){ body.nmLegal .nmLegalSectionHead{ padding: 14px 14px 8px; } body.nmLegal .nmLegalList{ padding: 0 14px 14px 34px; } } /* ---------------------------------------------------------------------- 06) Per-section color themes ---------------------------------------------------------------------- */ body.nmLegal .nmLegalSection--a::after{ background: linear-gradient(180deg, rgba(0,76,84,.80), rgba(0,76,84,.45)); } body.nmLegal .nmLegalSection--a::before{ background: radial-gradient(420px 220px at 20% 0%, rgba(0,76,84,.12), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); } body.nmLegal .nmLegalSection--b::after{ background: linear-gradient(180deg, rgba(19,153,255,.80), rgba(19,153,255,.42)); } body.nmLegal .nmLegalSection--b::before{ background: radial-gradient(420px 220px at 20% 0%, rgba(19,153,255,.14), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); } body.nmLegal .nmLegalSection--c::after{ background: linear-gradient(180deg, rgba(11,31,41,.85), rgba(11,31,41,.42)); } body.nmLegal .nmLegalSection--c::before{ background: radial-gradient(520px 260px at 20% 0%, rgba(11,31,41,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); } body.nmLegal .nmLegalSection--d::after{ background: linear-gradient(180deg, rgba(10,109,120,.80), rgba(10,109,120,.38)); } body.nmLegal .nmLegalSection--d::before{ background: radial-gradient(420px 220px at 20% 0%, rgba(10,109,120,.12), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); } body.nmLegal .nmLegalSection--e::after{ background: linear-gradient(180deg, rgba(0,120,150,.78), rgba(0,120,150,.34)); } body.nmLegal .nmLegalSection--e::before{ background: radial-gradient(420px 220px at 20% 0%, rgba(0,120,150,.12), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); } body.nmLegal .nmLegalSection--f::after{ background: linear-gradient(180deg, rgba(0,76,84,.70), rgba(19,153,255,.28)); } body.nmLegal .nmLegalSection--f::before{ background: radial-gradient(420px 220px at 20% 0%, rgba(19,153,255,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); } body.nmLegal .nmLegalSection--g::after{ background: linear-gradient(180deg, rgba(19,153,255,.78), rgba(0,76,84,.40)); } body.nmLegal .nmLegalSection--g::before{ background: radial-gradient(520px 260px at 20% 0%, rgba(19,153,255,.12), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); } body.nmLegal .nmLegalSection--h::after{ background: linear-gradient(180deg, rgba(0,76,84,.62), rgba(0,0,0,.16)); } body.nmLegal .nmLegalSection--h::before{ background: radial-gradient(420px 220px at 20% 0%, rgba(0,76,84,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); } body.nmLegal .nmLegalSection--i::after{ background: linear-gradient(180deg, rgba(10,109,120,.74), rgba(19,153,255,.22)); } body.nmLegal .nmLegalSection--i::before{ background: radial-gradient(420px 220px at 20% 0%, rgba(10,109,120,.10), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); } /* ---------------------------------------------------------------------- 08) Make sur-footer look clean on legal pages ---------------------------------------------------------------------- */ body.nmLegal .nmSurFooter{ margin-top: 18px; } body.nmLegal .nmSurFooter__panel{ border-radius: 18px !important; overflow: hidden; } body.nmLegal .nmSurFooter__logo{ height: 28px !important; width: auto !important; max-width: 140px !important; } body.nmLegal .nmSurFooter__brandTitle{ font-weight: 900; } body.nmLegal .nmSurFooter__brandDesc{ color: rgba(0,0,0,.62); } body.nmLegal .nmSurFooter__cols{ gap: 18px; } /* ========================================================= FIX FLAGS — cercle propre (pas écrasé) ========================================================= */ body.nmLegal .footerLangs .flagLink{ width: 34px !important; height: 34px !important; border-radius: 50% !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.nmLegal .footerLangs .flagLink img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }