/* ============================================================================ ACST — feuille de styles complète À placer dans : static/css/acst.css Inclut : tokens light + dark, animations, composants (countdown, etc.) ============================================================================ */ :root { /* Palette historique (préservée) */ --camii-cream: #FBF8F1; --camii-parchment: #F5EFE3; --camii-sage: #E8EDE6; --camii-line: #E2D9C6; --camii-green: #0E5E4E; --camii-green-deep: #0A4A3D; --camii-gold: #B8915A; --camii-gold-soft: #D9C29A; --camii-ink: #1C2A24; --camii-ink-soft: #3A4A42; --camii-ink-mute: #6B776F; /* Tokens sémantiques (utilisés partout) */ --bg: var(--camii-parchment); --surface: var(--camii-cream); --surface-elev: #FFFFFF; --surface-deep: var(--camii-green-deep); --surface-deep-2: var(--camii-green); --line: var(--camii-line); --line-soft: rgba(184, 145, 90, 0.18); --accent: var(--camii-gold); --accent-soft: var(--camii-gold-soft); --green: var(--camii-green); --green-deep: var(--camii-green-deep); --on-deep: var(--camii-cream); --on-deep-soft: var(--camii-gold-soft); --ink: var(--camii-ink); --ink-soft: var(--camii-ink-soft); --ink-mute: var(--camii-ink-mute); --shadow-soft: 0 1px 2px rgba(28,42,36,0.04), 0 6px 24px -8px rgba(28,42,36,0.08); --shadow-card: 0 1px 2px rgba(28,42,36,0.06), 0 10px 32px -12px rgba(28,42,36,0.10); --shadow-deep: 0 8px 32px -8px rgba(10,74,61,0.22); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease2: cubic-bezier(0.65, 0, 0.35, 1); } /* Thème sombre — activé via [data-theme="dark"] sur */ [data-theme="dark"] { --bg: #0B1614; --surface: #122220; --surface-elev: #1A2E2A; --surface-deep: #061211; --surface-deep-2: #0F2521; --line: rgba(217, 194, 154, 0.14); --line-soft: rgba(217, 194, 154, 0.08); --accent: #D4AC78; --accent-soft: #E6D2A8; --green: #1F8A73; --green-deep: #062E27; --on-deep: #F5EFE3; --on-deep-soft: #D9C29A; --ink: #F5EFE3; --ink-soft: #C5BDA8; --ink-mute: #8A8474; --shadow-soft: 0 1px 2px rgba(0,0,0,0.3), 0 6px 24px -8px rgba(0,0,0,0.5); --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 10px 32px -12px rgba(0,0,0,0.6); --shadow-deep: 0 8px 32px -8px rgba(0,0,0,0.55); color-scheme: dark; } html, body { background: var(--bg); color: var(--ink); transition: background-color 320ms var(--ease), color 320ms var(--ease); } /* ─────── Animations ─────── */ @keyframes fadeUp { from { transform: translateY(14px); } to { transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0.001; } to { opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.94); } to { transform: scale(1); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.08); opacity: 0.85; } } @keyframes slowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .anim-fade-up { animation: fadeUp 720ms var(--ease) both; } .anim-fade-in { animation: fadeIn 600ms var(--ease) both; } .anim-scale-in { animation: scaleIn 600ms var(--ease) both; } .delay-1 { animation-delay: 80ms; } .delay-2 { animation-delay: 160ms; } .delay-3 { animation-delay: 240ms; } .delay-4 { animation-delay: 320ms; } .delay-5 { animation-delay: 400ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ─────── Mihrab arch draw-on ─────── */ .mihrab-draw > path:first-of-type { stroke-dasharray: 1 1.05; stroke-dashoffset: 1; animation: mihrabDraw 1400ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards; } @keyframes mihrabDraw { to { stroke-dashoffset: 0; } } /* ─────── Star field (visible en thème sombre) ─────── */ .star-field { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease); } .star-field circle { animation: breathe 4s ease-in-out infinite; transform-origin: center; } [data-theme="dark"] .star-field { opacity: 1; } /* ─────── Theme toggle ─────── */ .theme-toggle { position: relative; width: 52px; height: 28px; background: rgba(255,255,255,0.10); border: 1px solid rgba(217,194,154,0.30); border-radius: 999px; display: flex; align-items: center; padding: 2px; cursor: pointer; flex-shrink: 0; } .theme-toggle-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; transition: transform 320ms var(--ease), background 320ms var(--ease); color: var(--green-deep); } [data-theme="dark"] .theme-toggle-thumb { transform: translateX(24px); background: var(--accent); color: var(--bg); } .theme-toggle[data-mode="auto"]::after { content: ''; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--surface-deep); } /* ─────── Lang switch ─────── */ .lang-switch { display: flex; background: rgba(255,255,255,0.06); border-radius: 999px; padding: 3px; border: 1px solid rgba(217,194,154,0.25); flex-shrink: 0; } .lang-switch a { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border: none; background: transparent; color: var(--on-deep); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; transition: background 240ms var(--ease), color 240ms var(--ease); text-decoration: none; white-space: nowrap; } .lang-switch a.active { background: var(--on-deep); color: var(--green-deep); } /* ─────── Circular countdown ─────── */ .circle-countdown { position: relative; margin: 0 auto; } .circle-countdown svg { display: block; } .circle-countdown .progress-track { fill: none; stroke: var(--line); stroke-width: 2; } .circle-countdown .progress-bar { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 800ms var(--ease); } .circle-countdown .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* ─────── Tabular nums for prayer times ─────── */ .tnum { font-variant-numeric: tabular-nums; } /* ─────── Card hover lift (remplace les onmouseover= inlines pour CSP enforce) ─────── */ .card-hover { transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease); } .card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); } .card-hover.card-hover-bordered:hover { border-color: var(--accent-soft); } /* ─────── Prayer card "active now" pulse ─────── */ .prayer-active::before { content: ''; position: absolute; top: 8px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: breathe 1.4s ease-in-out infinite; } /* ─────── Mobile bottom tab bar ─────── */ .bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 8px 4px max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; z-index: 50; backdrop-filter: blur(12px); } .bottom-bar.bottom-bar-5 { grid-template-columns: repeat(5, 1fr); } .bottom-bar.bottom-bar-5 a { font-size: 9.5px; padding: 6px 2px; } @media (min-width: 768px) { .bottom-bar { display: none; } body { padding-bottom: 0 !important; } } body { padding-bottom: 76px; } .bottom-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; min-height: 44px; color: var(--ink-mute); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; position: relative; transition: color 240ms var(--ease); text-decoration: none; } .bottom-bar a.active { color: var(--green); font-weight: 600; } .bottom-bar a.active::before { content: ''; position: absolute; top: -2px; width: 24px; height: 2.5px; background: var(--accent); border-radius: 2px; } /* ─────── Floating next-prayer pill (mobile) ─────── */ .next-prayer-pill { position: fixed; bottom: calc(76px + max(8px, env(safe-area-inset-bottom))); left: 50%; transform: translateX(-50%); background: var(--green-deep); color: var(--on-deep); border: 1px solid var(--accent); border-radius: 999px; padding: 8px 16px 8px 12px; display: flex; align-items: center; gap: 10px; font-size: 12px; box-shadow: var(--shadow-card); z-index: 40; text-decoration: none; animation: fadeUp 600ms var(--ease) 400ms both; } @media (min-width: 768px) { .next-prayer-pill { display: none; } } /* ─────── Crescent breathe ─────── */ .crescent-breathe { animation: breathe 4s ease-in-out infinite; transform-origin: center; } /* ─────── Hide on mobile / desktop helpers ─────── */ @media (max-width: 767px) { .hide-mobile { display: none !important; } } @media (min-width: 768px) { .hide-desktop { display: none !important; } } /* ─────── A11y ─────── */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--camii-green-deep); color: var(--camii-cream); padding: 8px 16px; z-index: 100; text-decoration: none; } .skip-link:focus { left: 8px; top: 8px; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }