:root { --paper: #FAF5EA; --cream: #F1E8D8; --cream-deep: #E7DAC0; --bg: #F1E8D8; --card: #FBF7EE; --card2: #F1E7D3; --border: #DFCFAE; --ink: #3A2E22; --text: #3A2E22; --muted: #8A7860; --burgundy: #A03B54; --burgundy-light: #C2637C; --burgundy-deep: #6E2438; --emerald: #62804F; --emerald-light: #869F6E; --grey-accent: #9C8D74; --gold: #B48A4C; --sidebar-w: 240px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-script: 'Mrs Saint Delafield', cursive; --font-heading: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --font-arabic: 'Aref Ruqaa', serif; --font-arabic-clear: 'Noto Naskh Arabic', 'Aref Ruqaa', serif; } /* ─── Dark mode ─── Toggled by setting data-theme="dark" on (see theme-toggle in app.js). Every rule elsewhere in this file already reads color via var(--*), so overriding the tokens here re-themes the whole site with no per-rule edits. */ :root[data-theme="dark"] { --paper: #1B160F; --cream: #211A12; --cream-deep: #291F15; --bg: #17120C; --card: #221B14; --card2: #2B221A; --border: #43362470; --ink: #F1E6D3; --text: #F1E6D3; --muted: #C2AD8C; --burgundy: #DC7E97; --burgundy-light: #E6A0B2; --burgundy-deep: #C46583; --emerald: #93B87C; --emerald-light: #AFCB99; --grey-accent: #C2AD8C; --gold: #E0B876; } :root[data-theme="dark"] body { font-size: 18.5px; background: radial-gradient(1200px 600px at 10% -10%, rgba(220,126,151,0.06), transparent), radial-gradient(1000px 700px at 100% 0%, rgba(147,184,124,0.07), transparent), var(--bg); } :root[data-theme="dark"] img, :root[data-theme="dark"] .logo-pattern, :root[data-theme="dark"] .logo-branch { filter: brightness(0.92) contrast(1.05); } /* ─── High-contrast mode ─── A separate, independent switch (not a third state of the light/dark pill) for visitors with color blindness or low vision: true black background, pure sharp-white text, and every accent color collapsed to white/yellow only — deliberately dropping the burgundy/emerald red-green pairing this site otherwise leans on for section colors, since that exact hue pair is the hardest to distinguish for the most common forms of color blindness. */ :root[data-theme="contrast"] { --paper: #000000; --cream: #000000; --cream-deep: #000000; --bg: #000000; --card: #000000; --card2: #0D0D0D; --border: #FFFFFF; --ink: #FFFFFF; --text: #FFFFFF; --muted: #F2F2F2; --burgundy: #FFFFFF; --burgundy-light: #FFFFFF; --burgundy-deep: #FFFFFF; --emerald: #FFFFFF; --emerald-light: #FFFFFF; --grey-accent: #FFFFFF; --gold: #FFD700; } :root[data-theme="contrast"] body { font-size: 19px; font-weight: 500; background: #000000; } :root[data-theme="contrast"] * { text-shadow: none !important; } :root[data-theme="contrast"] img, :root[data-theme="contrast"] .logo-pattern, :root[data-theme="contrast"] .logo-branch { filter: grayscale(1) contrast(1.6) brightness(1.4); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: radial-gradient(1200px 600px at 10% -10%, rgba(160,59,84,0.05), transparent), radial-gradient(1000px 700px at 100% 0%, rgba(98,128,79,0.06), transparent), var(--bg); color: var(--text); font-family: var(--font-serif); font-size: 16.5px; min-height: 100vh; display: flex; flex-direction: column; position: relative; } a { color: inherit; text-decoration: none; } /* hand-laid paper grain — a fixed, very faint noise layer over the whole page */ body::before { content: ''; position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── CUSTOM CURSOR (pointer devices only — untouched on mobile/tablets) ── */ @media (hover: hover) and (pointer: fine) { body { cursor: none; } a, button, .quiz-choice, .nav-btn, .book-card, .qa-btn { cursor: none; } .xn-cursor { position: fixed; top: 0; left: 0; z-index: 3000; pointer-events: none; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 1.4px solid var(--burgundy); box-shadow: 0 0 10px -3px color-mix(in srgb, var(--burgundy) 55%, transparent); /* transform is driven by JS every frame (rAF) — no CSS transition on it, or fast mouse movement would queue/stack transitions and feel laggy */ transition: border-color 0.25s, background 0.25s, width 0.25s, height 0.25s, margin 0.25s, border-radius 0.3s, box-shadow 0.25s; will-change: transform; } .xn-cursor::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: var(--burgundy); border-radius: 50%; transform: translate(-50%, -50%); transition: background 0.25s; } .xn-cursor.is-hover { width: 32px; height: 32px; margin: -16px 0 0 -16px; border-color: var(--emerald); background: color-mix(in srgb, var(--emerald) 10%, transparent); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; box-shadow: 0 0 16px -3px color-mix(in srgb, var(--emerald) 55%, transparent); } .xn-cursor.is-hover::after { background: var(--emerald); } .xn-cursor.is-down { border-color: var(--gold); } .xn-cursor.is-down::after { background: var(--gold); } } /* ── HEADER ── */ .header-topbar { background: var(--paper); border-bottom: 1px solid var(--border); padding: 6px 20px; display: flex; align-items: center; justify-content: space-between; } .header-topbar-left { display: flex; align-items: center; gap: 8px; } .header-topbar-right { display: flex; align-items: center; gap: 10px; } .header-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--burgundy); animation: dotPulse 2.4s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--burgundy) 45%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--burgundy) 0%, transparent); } } .header-topbar span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--burgundy); font-weight: 600; } .header-topbar .sep { color: var(--muted); } .header-topbar .right-label { font-size: 9px; color: var(--muted); opacity: 0.7; letter-spacing: 0.1em; } .discord-link { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); padding: 4px 11px; border-radius: 20px; transition: all 0.25s var(--ease); } .discord-link:hover { color: var(--emerald); border-color: var(--emerald-light); background: color-mix(in srgb, var(--emerald) 10%, transparent); } .discord-icon { width: 14px; height: 14px; flex-shrink: 0; } /* ─── Mode switch — three little icon buttons: ☀️ light · ⭐ dark (brown/pink) · 🌙 high-contrast (black & white) ─── */ .mode-switch { display: flex; align-items: center; gap: 3px; background: var(--card2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .mode-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: none; border: 1px solid transparent; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0.5; filter: grayscale(0.4); transition: all 0.25s var(--ease); } .mode-btn:hover { opacity: 0.85; transform: translateY(-1px); } .mode-btn[aria-pressed="true"] { opacity: 1; filter: none; transform: scale(1.05); } /* Each button hints at its own destination color, regardless of the currently active theme */ #mode-btn-light[aria-pressed="true"] { background: color-mix(in srgb, #B48A4C 22%, transparent); border-color: #B48A4C; box-shadow: 0 0 10px -3px color-mix(in srgb, #B48A4C 60%, transparent); } #mode-btn-dark[aria-pressed="true"] { background: linear-gradient(135deg, color-mix(in srgb, #6E4B2A 45%, transparent), color-mix(in srgb, #DC7E97 35%, transparent)); border-color: #DC7E97; box-shadow: 0 0 10px -3px color-mix(in srgb, #DC7E97 55%, transparent); } #mode-btn-contrast[aria-pressed="true"] { background: #000000; border-color: #FFFFFF; box-shadow: 0 0 10px -3px rgba(255,255,255,0.5); } /* ─── Sign-in widget (Discord / Google) ─── */ .auth-widget { position: relative; } .auth-trigger { display: flex; align-items: center; gap: 6px; font-family: var(--font-serif); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--border); padding: 3px 11px 3px 4px; border-radius: 20px; cursor: pointer; transition: all 0.25s var(--ease); } .auth-trigger:hover { color: var(--burgundy); border-color: var(--burgundy-light); background: color-mix(in srgb, var(--burgundy) 8%, transparent); } .auth-widget.is-signed-in .auth-trigger { color: var(--ink); border-color: var(--gold); } .auth-trigger-avatar { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; background: var(--card2); flex-shrink: 0; line-height: 1; } .auth-trigger-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .auth-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 230px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 14px 32px -14px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s; } .auth-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .auth-panel-hint { font-size: 11px; color: var(--muted); margin-bottom: 10px; line-height: 1.4; } .auth-provider-btn { width: 100%; display: flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-size: 12.5px; color: var(--ink); background: var(--card2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s var(--ease); } .auth-provider-btn:last-child { margin-bottom: 0; } .auth-provider-btn:hover { transform: translateY(-1px); border-color: var(--gold); box-shadow: 0 6px 16px -10px rgba(0,0,0,0.3); } .auth-provider-btn:disabled { opacity: 0.6; cursor: default; transform: none; } .auth-signed-in-name { font-size: 12px; color: var(--ink); line-height: 1.4; margin-bottom: 10px; } .auth-signout-btn { width: 100%; font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.03em; color: var(--burgundy); background: none; border: 1px solid var(--burgundy-light); border-radius: 9px; padding: 7px 12px; cursor: pointer; transition: all 0.2s var(--ease); } .auth-signout-btn:hover { background: color-mix(in srgb, var(--burgundy) 10%, transparent); } /* Best-score badge shown above a quiz when a signed-in visitor has a saved result */ .quiz-best-badge { display: inline-block; font-size: 11.5px; color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 20px; padding: 3px 12px; margin: 6px 0 10px; } .header-main { background: var(--paper); border-bottom: 1px solid var(--border); padding: 20px 20px 18px; position: relative; overflow: hidden; } /* faint 8-point star lattice, a nod to Islamic geometric pattern, very subtle */ .header-main::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23A03B54' stroke-width='0.6' opacity='0.16'%3E%3Cpath d='M45 4 L54 22 L74 18 L66 37 L86 45 L66 53 L74 72 L54 68 L45 86 L36 68 L16 72 L24 53 L4 45 L24 37 L16 18 L36 22 Z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 130px 130px; opacity: 0.55; pointer-events: none; } .header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-start; gap: 18px; position: relative; } /* ── LOGO MARK ── */ .logo-mark { flex-shrink: 0; position: relative; overflow: hidden; width: 74px; height: 74px; border-radius: 14px; background: var(--cream); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .logo-mark:hover { transform: scale(1.05) rotate(-1deg); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--burgundy) 45%, transparent); } .logo-pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; } .logo-branch { position: absolute; bottom: -6px; right: -8px; width: 46px; height: 46px; opacity: 0.9; } .logo-text { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; } .logo-script { font-family: var(--font-script); font-size: 22px; color: var(--ink); letter-spacing: 0.02em; } .logo-arabic { font-family: var(--font-arabic); font-size: 15px; color: var(--burgundy); margin-top: 1px; } .header-content { flex: 1; } .header-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .header-eyebrow-text { font-family: var(--font-script); font-size: 18px; color: var(--burgundy); letter-spacing: 0.02em; } .header-badge { font-size: 9px; background: color-mix(in srgb, var(--emerald) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--emerald) 35%, transparent); color: var(--emerald); padding: 2px 9px; border-radius: 20px; letter-spacing: 0.08em; text-transform: uppercase; } .header-title { font-size: clamp(18px, 3.5vw, 27px); font-weight: 600; color: var(--ink); line-height: 1.25; margin-bottom: 4px; } .header-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; font-style: italic; } .header-tags { display: flex; gap: 5px; flex-wrap: wrap; } .header-tag { font-size: 9px; background: var(--card); border: 1px solid var(--border); color: var(--muted); padding: 2px 9px; border-radius: 20px; letter-spacing: 0.05em; } .header-arabic-bg { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-arabic); font-size: 74px; color: var(--burgundy); opacity: 0.07; line-height: 1; user-select: none; pointer-events: none; } .gold-bar { height: 2px; border-radius: 2px; max-width: 220px; margin-top: 8px; opacity: 0.85; background: linear-gradient(90deg, var(--burgundy), var(--gold), var(--emerald), var(--gold), var(--burgundy)); background-size: 300% 100%; animation: goldShift 7s ease-in-out infinite; } @keyframes goldShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } body.view-library .header-main { display: none; } /* ── HAMBURGER ── */ .hamburger { display: none; background: var(--card2); border: 1px solid var(--border); color: var(--text); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-family: var(--font-serif); font-size: 13px; gap: 8px; align-items: center; } /* ── LAYOUT ── */ .layout { display: flex; flex: 1; max-width: 1200px; margin: 0 auto; width: 100%; } body.view-library .layout { max-width: 880px; } body.view-library .sidebar { display: none; } /* ── SIDEBAR ── */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; border-right: 1px solid var(--border); padding: 16px 0; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; background: var(--bg); } .back-to-library { display: block; margin: 0 14px 14px; font-size: 11px; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--border); transition: color 0.2s; } .back-to-library:hover { color: var(--burgundy); } .sidebar-label { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 13px; color: var(--burgundy); padding: 0 14px; margin-bottom: 8px; } .nav-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 14px; background: transparent; border: none; border-left: 3px solid transparent; color: var(--muted); cursor: pointer; text-align: left; font-family: var(--font-serif); font-size: 12.5px; line-height: 1.3; transition: all 0.18s var(--ease); } .nav-btn:hover { background: var(--card2); color: var(--ink); } .nav-btn.active { background: var(--card); border-left-color: var(--accent, var(--burgundy)); color: var(--ink); } .nav-btn.active .nav-main { font-weight: 600; } .nav-icon { font-size: 14px; flex-shrink: 0; } .nav-labels { display: flex; flex-direction: column; } .nav-main { font-size: 12.5px; } .nav-sub { font-size: 10px; opacity: 0.65; } .sidebar-footer { margin: 20px 14px 0; padding-top: 14px; border-top: 1px solid var(--border); } .sidebar-footer-name { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 12.5px; color: var(--burgundy); margin-bottom: 2px; } .sidebar-footer-desc { font-size: 9px; color: var(--muted); opacity: 0.7; line-height: 1.5; } /* ── MAIN ── */ .main { flex: 1; padding: 26px 28px 56px; overflow-y: auto; min-width: 0; } /* fade-in on section change */ .fade-in { animation: fadeUp 0.4s var(--ease); } @keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } /* ── SECTION HEADER ── */ .section-hdr { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); position: relative; } .section-hdr-row { display: flex; align-items: center; gap: 11px; } .section-icon-badge { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; border: 1px solid transparent; transition: transform 0.25s var(--ease); } .section-icon-badge:hover { transform: rotate(-6deg) scale(1.08); } .section-title { font-size: clamp(17px, 3vw, 23px); font-weight: 600; color: var(--ink); } .section-subtitle { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-style: italic; } /* ── INTRO CARD ── */ .intro-card { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--burgundy); border-radius: 4px 10px 10px 4px; padding: 14px 17px; font-size: 16.5px; line-height: 1.8; color: var(--ink); margin-bottom: 22px; } /* ── BULLETS GRID ── */ .bullets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-bottom: 28px; } .bullet-card { background: var(--card); border: 1px solid var(--border); border-top: 2px solid var(--border); border-radius: 8px; padding: 12px 14px; opacity: 0; animation: fadeUp 0.45s var(--ease) forwards; animation-delay: calc(var(--stagger, 0) * 55ms); transition: transform 0.2s var(--ease), box-shadow 0.2s; } .bullet-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px -12px rgba(58,46,34,0.25); } .bullet-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 6px; } .bullet-text { font-size: 15.5px; color: var(--ink); line-height: 1.6; white-space: pre-line; } /* Themed emphasis for key terms (Tawḥīd, Allāh, named principles) marked up with / inside prose fields — a warm gold-burgundy accent rather than plain browser bold, applied everywhere prose renders as HTML. */ .intro-card b, .intro-card strong, .bullet-text b, .bullet-text strong, .qa-answer b, .qa-answer strong, .xn-acc-body b, .xn-acc-body strong, .xn-flow-node-body b, .xn-flow-node-body strong, .claim-response-block b, .claim-response-block strong { color: var(--burgundy); font-weight: 700; } /* ── QA SECTION ── */ .qa-label { font-family: var(--font-heading); font-weight: 700; font-size: 19px; letter-spacing: 0.01em; color: var(--burgundy); margin-bottom: 10px; } .qa-item { background: var(--card); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; } .qa-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; background: transparent; border: none; color: var(--ink); cursor: pointer; text-align: left; font-family: var(--font-serif); font-size: 15.5px; line-height: 1.5; transition: background 0.2s; } .qa-btn:hover { background: var(--card2); } .qa-btn.open { font-weight: 600; } .qa-arrow { color: var(--muted); font-size: 17px; flex-shrink: 0; transition: transform 0.3s var(--ease); display: inline-block; } .qa-btn.open .qa-arrow { transform: rotate(90deg); color: var(--burgundy); } .qa-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease); } .qa-item:has(.qa-btn.open) .qa-answer-wrap { border-top: 1px solid var(--border); } .qa-answer { min-height: 0; overflow: hidden; padding: 0 16px; font-size: 16px; color: var(--ink); line-height: 1.8; } .qa-item:has(.qa-btn.open) .qa-answer { padding: 14px 16px; } /* ── QUIZ ── */ .quiz-label { font-family: var(--font-heading); font-weight: 700; font-size: 20px; letter-spacing: 0.01em; color: var(--emerald); margin: 6px 0 12px; } .quiz-item { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; } .quiz-q { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 11px; line-height: 1.5; } .quiz-choices { display: flex; flex-direction: column; gap: 6px; } .quiz-choice { text-align: left; background: var(--card2); border: 1px solid var(--border); color: var(--ink); font-family: var(--font-serif); font-size: 14.5px; padding: 9px 13px; border-radius: 6px; cursor: pointer; transition: all 0.2s var(--ease); } .quiz-choice:hover:not(:disabled) { border-color: var(--burgundy-light); transform: translateX(2px); } .quiz-choice:disabled { cursor: default; } .quiz-choice.correct { background: color-mix(in srgb, var(--emerald) 22%, var(--card2)); border-color: var(--emerald); color: var(--emerald); font-weight: 600; } .quiz-choice.incorrect { background: color-mix(in srgb, var(--burgundy) 16%, var(--card2)); border-color: var(--burgundy); color: var(--burgundy); } .quiz-explain-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); } .quiz-explain { overflow: hidden; font-size: 13.5px; color: var(--muted); font-style: italic; line-height: 1.65; } .quiz-item.answered .quiz-explain { padding-top: 10px; } .quiz-score { text-align: center; font-size: 12px; color: var(--muted); padding: 8px 0 2px; font-style: italic; } /* ── INTERACTIVE DIAGRAMS (accordion / tab-switcher / flow map) ── */ .xn-diagram-wrap { margin-top: 18px; } .xn-diagram-title { font-family: var(--font-heading); font-weight: 700; font-size: 19px; letter-spacing: 0.01em; color: var(--burgundy); margin-bottom: 10px; } /* accordion */ .xn-accordion { display: flex; flex-direction: column; gap: 8px; } .xn-acc-item { background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .xn-acc-item summary { cursor: pointer; padding: 12px 16px; font-family: var(--font-serif); font-weight: 600; font-size: 14.5px; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: background 0.2s; } .xn-acc-item summary:hover { background: var(--card2); } .xn-acc-item summary::-webkit-details-marker { display: none; } .xn-acc-marker { font-size: 18px; color: var(--muted); transition: transform 0.25s var(--ease), color 0.25s; flex-shrink: 0; } .xn-acc-item[open] .xn-acc-marker { transform: rotate(45deg); color: var(--burgundy); } .xn-acc-body { padding: 2px 16px 14px; font-size: 14px; line-height: 1.75; color: var(--ink); border-top: 1px solid var(--border); } /* claim / Atharī-response scheme (used by the Refutations section) — each item opens into two side-marked panels rather than one plain body, so a claim and its response read as visually distinct without leaving the accordion pattern used everywhere else on the site. */ .xn-refute-list { display: flex; flex-direction: column; gap: 8px; } .xn-refute-item { background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .xn-refute-item summary { cursor: pointer; padding: 12px 16px; list-style: none; display: flex; align-items: center; gap: 10px; transition: background 0.2s; } .xn-refute-item summary:hover { background: var(--card2); } .xn-refute-item summary::-webkit-details-marker { display: none; } .xn-refute-item[open] .xn-acc-marker { transform: rotate(45deg); color: var(--burgundy); } .xn-refute-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--card2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 11.5px; font-weight: 700; color: var(--muted); } .xn-refute-q { flex: 1; font-family: var(--font-serif); font-weight: 600; font-size: 13.5px; color: var(--ink); font-style: italic; line-height: 1.4; } .xn-refute-body { padding: 2px 16px 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .xn-refute-claim, .xn-refute-answer { padding: 10px 13px; border-radius: 6px; font-size: 13.5px; line-height: 1.7; } .xn-refute-claim { background: color-mix(in srgb, var(--grey-accent) 14%, var(--card2)); border-left: 3px solid var(--grey-accent); color: var(--muted); } .xn-refute-answer { background: color-mix(in srgb, var(--emerald) 10%, var(--card2)); border-left: 3px solid var(--emerald); color: var(--ink); } .xn-refute-tag { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 4px; opacity: 0.75; } .xn-refute-claim .xn-refute-tag { color: var(--muted); } .xn-refute-answer .xn-refute-tag { color: var(--emerald); } @media (max-width: 720px) { .xn-refute-q { font-size: 12.5px; } } /* radio-hack tab switcher */ .xn-tabs { position: relative; } .xn-tab-radio { position: absolute; opacity: 0; pointer-events: none; } .xn-tab-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .xn-tab-label { cursor: pointer; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--card2); font-size: 12.5px; font-family: var(--font-serif); color: var(--muted); transition: all 0.2s var(--ease); user-select: none; } .xn-tab-label:hover { border-color: var(--burgundy-light); } .xn-tab-panels { position: relative; } .xn-tab-panel { display: none; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; font-size: 14px; line-height: 1.75; color: var(--ink); animation: fadeUp 0.3s var(--ease); } .xn-tab-panel-title { font-weight: 700; color: var(--burgundy); margin-bottom: 6px; font-size: 13.5px; } .xn-tab-radio:nth-of-type(1):checked ~ .xn-tab-nav label:nth-of-type(1), .xn-tab-radio:nth-of-type(2):checked ~ .xn-tab-nav label:nth-of-type(2), .xn-tab-radio:nth-of-type(3):checked ~ .xn-tab-nav label:nth-of-type(3), .xn-tab-radio:nth-of-type(4):checked ~ .xn-tab-nav label:nth-of-type(4), .xn-tab-radio:nth-of-type(5):checked ~ .xn-tab-nav label:nth-of-type(5) { background: color-mix(in srgb, var(--burgundy) 16%, var(--card2)); border-color: var(--burgundy); color: var(--burgundy); font-weight: 600; } .xn-tab-radio:nth-of-type(1):checked ~ .xn-tab-panels .xn-tab-panel:nth-of-type(1), .xn-tab-radio:nth-of-type(2):checked ~ .xn-tab-panels .xn-tab-panel:nth-of-type(2), .xn-tab-radio:nth-of-type(3):checked ~ .xn-tab-panels .xn-tab-panel:nth-of-type(3), .xn-tab-radio:nth-of-type(4):checked ~ .xn-tab-panels .xn-tab-panel:nth-of-type(4), .xn-tab-radio:nth-of-type(5):checked ~ .xn-tab-panels .xn-tab-panel:nth-of-type(5) { display: block; } /* term / flow map */ .xn-flow-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; } .xn-flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .xn-flow-row:last-child { margin-bottom: 0; } .xn-flow-node { background: var(--card2); border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; overflow: hidden; } .xn-flow-node summary { cursor: pointer; font-family: var(--font-serif); font-weight: 600; font-size: 13px; color: var(--ink); list-style: none; white-space: nowrap; } .xn-flow-node summary::-webkit-details-marker { display: none; } .xn-flow-node[open] { background: color-mix(in srgb, var(--burgundy) 8%, var(--card2)); border-color: var(--burgundy-light); } .xn-flow-node-body { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 6px; max-width: 260px; white-space: normal; } .xn-flow-arrow { color: var(--muted); font-size: 15px; flex-shrink: 0; } .xn-flow-trigger { font-size: 10.5px; color: var(--muted); font-style: italic; white-space: nowrap; } /* ── SECTS TABLE ── */ .sects-table-wrap { overflow-x: auto; margin-bottom: 24px; border-radius: 8px; border: 1px solid var(--border); } .sects-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .sects-table th { padding: 8px 12px; text-align: left; color: var(--burgundy); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; border-bottom: 2px solid var(--burgundy-deep); background: var(--card2); } .sects-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); } .sects-table tr:nth-child(even) td { background: var(--card2); } .sects-table tr:nth-child(odd) td { background: var(--card); } .sects-table tr:hover td { background: color-mix(in srgb, var(--burgundy) 8%, var(--card)); } .sect-name { color: var(--burgundy); font-weight: 700; white-space: nowrap; } .sect-error { color: var(--muted); } .sect-correct { color: var(--emerald); } /* ── PREV/NEXT NAV ── */ .pn-nav { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); gap: 10px; } .pn-btn { background: var(--card); border: 1px solid var(--border); color: var(--muted); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-family: var(--font-serif); font-size: 11.5px; transition: all 0.2s var(--ease); } .pn-btn:hover { background: var(--card2); color: var(--ink); } .pn-btn.next { background: color-mix(in srgb, var(--accent, var(--emerald)) 14%, var(--card)); border-color: color-mix(in srgb, var(--accent, var(--emerald)) 40%, transparent); color: var(--ink); } .pn-btn.next:hover { background: color-mix(in srgb, var(--accent, var(--emerald)) 24%, var(--card)); } /* ── LIBRARY HOME ── */ .library-hdr { text-align: center; padding: 46px 10px 26px; position: relative; } .library-title { font-family: var(--font-script); font-size: clamp(38px, 8vw, 58px); color: var(--burgundy); margin-bottom: 4px; opacity: 0; animation: fadeUp 0.6s var(--ease) forwards; } .library-sub { font-size: 13px; color: var(--muted); margin-bottom: 22px; font-style: italic; opacity: 0; animation: fadeUp 0.6s var(--ease) 0.1s forwards; } .search-box { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); color: var(--ink); font-family: var(--font-serif); font-size: 13.5px; padding: 10px 17px; border-radius: 24px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; opacity: 0; animation: fadeUp 0.6s var(--ease) 0.2s forwards; } .search-box:focus { border-color: var(--burgundy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--burgundy) 16%, transparent); } .search-box::placeholder { color: var(--muted); } /* ── NAMES OF ALLAH ── */ .names-section { max-width: 640px; margin: 0 auto 34px; opacity: 0; animation: fadeUp 0.6s var(--ease) 0.3s forwards; } .names-hero { text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; position: relative; box-shadow: 0 10px 28px -18px rgba(58,46,34,0.3); opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .names-hero::before { content: ''; position: absolute; inset: 5px; border-radius: 10px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); } .names-hero.is-visible { opacity: 1; transform: translateY(0); } .names-hero-label { font-family: var(--font-serif); font-style: italic; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .names-hero-ar { font-family: var(--font-arabic); font-size: 26px; color: var(--burgundy); margin-bottom: 4px; } .names-hero-tr { font-family: var(--font-serif); font-weight: 700; font-style: italic; font-size: 19px; letter-spacing: 0.01em; color: var(--burgundy); margin-bottom: 8px; } .names-hero-meaning { font-size: 12.5px; color: var(--muted); line-height: 1.65; font-style: italic; max-width: 440px; margin: 0 auto; } .names-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 9px; background: transparent; border: none; color: var(--muted); font-family: var(--font-serif); font-style: italic; font-size: 12px; cursor: pointer; transition: color 0.2s; } .names-toggle:hover { color: var(--burgundy); } .names-toggle-arrow { display: inline-block; transition: transform 0.3s var(--ease); } .names-toggle.open .names-toggle-arrow { transform: rotate(90deg); } .names-grid-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); } .names-grid-wrap.open { grid-template-rows: 1fr; } .names-grid { overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding-top: 6px; } .name-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 8px; text-align: center; cursor: pointer; font-family: var(--font-serif); opacity: 0; animation: fadeUp 0.4s var(--ease) forwards; animation-delay: calc(var(--stagger, 0) * 30ms); transition: border-color 0.2s, transform 0.2s; } .name-card:hover { border-color: var(--burgundy-light); transform: translateY(-2px); } .name-card-ar { font-family: var(--font-arabic); font-size: 17px; color: var(--burgundy); } .name-card-tr { font-size: 10.5px; color: var(--muted); margin-top: 2px; } .name-card-meaning-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); } .name-card.open .name-card-meaning-wrap { grid-template-rows: 1fr; } .name-card-meaning { overflow: hidden; font-size: 10px; color: var(--ink); line-height: 1.5; padding-top: 0; } .name-card.open .name-card-meaning { padding-top: 7px; } /* ── ḤURŪF (ARABIC ALPHABET) ── */ .huroof-section { max-width: 640px; margin: 0 auto 34px; opacity: 0; animation: fadeUp 0.6s var(--ease) 0.4s forwards; } .huroof-hero { text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 24px 18px; position: relative; cursor: pointer; box-shadow: 0 10px 28px -18px rgba(58,46,34,0.3); opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.2s; } .huroof-hero:hover { border-color: var(--gold); } .huroof-hero::before { content: ''; position: absolute; inset: 5px; border-radius: 10px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--emerald) 35%, transparent); } .huroof-hero.is-visible { opacity: 1; transform: translateY(0); } .huroof-hero-label { font-family: var(--font-serif); font-style: italic; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald); margin-bottom: 4px; } .huroof-hero-letter { font-family: var(--font-arabic-clear); font-weight: 600; font-size: 76px; line-height: 1.1; color: var(--burgundy); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .huroof-hero-name { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--muted); margin-top: 2px; } .huroof-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 9px; background: transparent; border: none; color: var(--muted); font-family: var(--font-serif); font-style: italic; font-size: 12px; cursor: pointer; transition: color 0.2s; } .huroof-toggle:hover { color: var(--emerald); } .huroof-toggle-arrow { display: inline-block; transition: transform 0.3s var(--ease); } .huroof-toggle.open .huroof-toggle-arrow { transform: rotate(90deg); } .huroof-panel-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); } .huroof-panel-wrap.open { grid-template-rows: 1fr; } .huroof-panel { overflow: hidden; padding-top: 6px; } .huroof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; direction: rtl; } .huroof-letter-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 6px 11px; text-align: center; cursor: pointer; font-family: var(--font-serif); opacity: 0; animation: fadeUp 0.4s var(--ease) forwards; animation-delay: calc(var(--stagger, 0) * 25ms); transition: border-color 0.2s, transform 0.2s, background 0.2s; } .huroof-letter-card:hover { border-color: var(--emerald); transform: translateY(-2px) scale(1.04); background: color-mix(in srgb, var(--emerald) 6%, var(--card)); } .huroof-letter-card-ar { font-family: var(--font-arabic-clear); font-weight: 600; font-size: 32px; line-height: 1.3; color: var(--burgundy); display: block; } .huroof-letter-card-name { font-family: var(--font-serif); font-size: 9.5px; color: var(--muted); margin-top: 7px; display: block; } /* Detail view — replaces the grid once a letter is tapped; visually "bigger" */ .huroof-detail { opacity: 0; transform: scale(0.97); animation: huroofDetailIn 0.35s var(--ease) forwards; } @keyframes huroofDetailIn { to { opacity: 1; transform: scale(1); } } .huroof-detail-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .huroof-back { background: none; border: none; color: var(--muted); font-family: var(--font-serif); font-style: italic; font-size: 11.5px; cursor: pointer; padding: 4px 0; transition: color 0.2s; } .huroof-back:hover { color: var(--burgundy); } .huroof-letter-nav { display: flex; align-items: center; gap: 10px; } .huroof-nav-arrow { background: var(--card2); border: 1px solid var(--border); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--burgundy); font-size: 14px; cursor: pointer; transition: border-color 0.2s, transform 0.15s; } .huroof-nav-arrow:hover { border-color: var(--emerald); transform: scale(1.08); } .huroof-detail-hero { text-align: center; background: color-mix(in srgb, var(--emerald) 5%, var(--card)); border: 1px solid var(--border); border-radius: 14px; padding: 20px 10px 16px; margin-bottom: 14px; box-shadow: 0 10px 28px -18px rgba(58,46,34,0.3); } .huroof-detail-letter { font-family: var(--font-arabic-clear); font-weight: 600; font-size: 68px; color: var(--burgundy); line-height: 1.2; display: block; } .huroof-detail-name { font-family: var(--font-serif); font-style: italic; font-size: 13.5px; color: var(--muted); margin-top: 8px; display: block; } .huroof-detail-word { font-family: var(--font-serif); font-size: 11.5px; color: var(--emerald); margin-top: 3px; display: block; } .huroof-detail-word .huroof-detail-word-ar { font-family: var(--font-arabic-clear); font-size: 16px; color: var(--burgundy); margin-right: 5px; } .huroof-deck-tabs { display: flex; gap: 6px; margin-bottom: 12px; } .huroof-deck-tab { flex: 1; background: var(--card2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 4px; font-family: var(--font-serif); font-size: 11px; color: var(--muted); cursor: pointer; text-align: center; transition: border-color 0.2s, color 0.2s, background 0.2s; } .huroof-deck-tab.active { border-color: var(--emerald); color: var(--emerald); background: color-mix(in srgb, var(--emerald) 8%, var(--card2)); font-weight: 600; } .huroof-forms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 7px; direction: rtl; opacity: 0; transform: translateX(10px); animation: huroofFormsIn 0.3s var(--ease) forwards; } @keyframes huroofFormsIn { to { opacity: 1; transform: translateX(0); } } .huroof-form-card { background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 10px 4px 7px; text-align: center; } .huroof-form-ar { font-family: var(--font-arabic-clear); font-weight: 600; font-size: 26px; color: var(--burgundy); direction: rtl; } .huroof-form-label { font-family: var(--font-serif); font-size: 9.5px; color: var(--muted); margin-top: 6px; letter-spacing: 0.02em; display: block; } .huroof-forms-empty { grid-column: 1 / -1; text-align: center; font-family: var(--font-serif); font-style: italic; color: var(--muted); font-size: 12px; padding: 18px 8px; } .huroof-swipe-hint { text-align: center; font-size: 10px; color: var(--muted); font-style: italic; margin-top: 12px; opacity: 0.75; } @media (max-width: 720px) { .huroof-hero-letter { font-size: 60px; } .huroof-detail-letter { font-size: 54px; } .huroof-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); } .huroof-forms-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); } } .category-group { margin-bottom: 6px; } .category-label { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 14px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--burgundy); margin: 26px 4px 12px; display: flex; align-items: center; gap: 10px; opacity: 0; animation: fadeUp 0.5s var(--ease) 0.3s forwards; } .category-label::after { content: ''; flex: 1; height: 1px; min-width: 24px; background: linear-gradient(90deg, var(--burgundy-light), transparent); opacity: 0.5; } .category-group:first-child .category-label { margin-top: 0; } .book-grid { display: flex; flex-direction: column; gap: 11px; padding-bottom: 22px; } .book-card { display: flex; align-items: center; gap: 15px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 17px 19px; transition: all 0.25s var(--ease); opacity: 0; animation: fadeUp 0.45s var(--ease) forwards; animation-delay: calc(var(--stagger, 0) * 60ms); } .book-card:hover { transform: translateY(-3px); border-color: var(--burgundy-light); box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--burgundy) 45%, transparent); } .book-card-icon { font-size: 26px; width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--card2); border-radius: 10px; border: 1px solid var(--border); transition: transform 0.3s var(--ease); } .book-card:hover .book-card-icon { transform: rotate(-6deg) scale(1.1); } .book-card-body { flex: 1; min-width: 0; } .book-card-title { font-size: 15.5px; font-weight: 600; color: var(--ink); } .book-card-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-style: italic; } .book-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; } .book-card-tags .tag { font-size: 9px; background: var(--card2); border: 1px solid var(--border); color: var(--muted); padding: 2px 9px; border-radius: 20px; } .book-card-arrow { font-size: 18px; color: var(--muted); transition: transform 0.25s var(--ease), color 0.25s; flex-shrink: 0; } .book-card:hover .book-card-arrow { transform: translateX(4px); color: var(--emerald); } .empty-state { text-align: center; color: var(--muted); font-size: 13px; padding: 40px 0; font-style: italic; } /* ── DUA CARD ── */ .dua-card { max-width: 640px; margin: 12px auto 40px; text-align: center; position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 32px 26px 26px; box-shadow: 0 12px 32px -18px rgba(58,46,34,0.3); opacity: 0; animation: fadeUp 0.6s var(--ease) 0.4s forwards; } .dua-card::before { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 10px; pointer-events: none; } .dua-ornament { font-family: var(--font-arabic); color: var(--gold); font-size: 15px; opacity: 0.75; margin-bottom: 8px; letter-spacing: 8px; } .dua-arabic { font-family: var(--font-arabic); font-size: 19px; line-height: 2.2; color: var(--ink); margin-bottom: 14px; } .dua-translit { font-size: 12px; font-style: italic; color: var(--muted); line-height: 1.75; margin-bottom: 13px; } .dua-translation { font-size: 13px; color: var(--ink); line-height: 1.8; margin-bottom: 12px; } .dua-footnote { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--burgundy); } .dua-footnote-ar { font-family: var(--font-arabic); font-style: normal; } /* ── CHARITY CORNER ── */ .charity-corner { position: fixed; right: 16px; bottom: 18px; z-index: 80; display: flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--border); padding: 8px 15px 8px 11px; border-radius: 30px; box-shadow: 0 8px 20px -10px rgba(58,46,34,0.35); font-family: var(--font-serif); font-size: 11px; color: var(--muted); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.2s, border-color 0.2s; } .charity-corner:hover { transform: translateY(-3px); color: var(--burgundy); border-color: var(--burgundy-light); box-shadow: 0 14px 28px -12px rgba(160,59,84,0.35); } .charity-heart { font-size: 15px; color: var(--burgundy); display: inline-block; animation: charityBeat 1.8s ease-in-out infinite; } .charity-corner:hover .charity-heart { animation-duration: 0.9s; } @keyframes charityBeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.28); } 28% { transform: scale(1); } 42% { transform: scale(1.18); } 56% { transform: scale(1); } } @media (max-width: 720px) { .charity-corner { bottom: 14px; right: 12px; padding: 8px 11px; } .charity-label { display: none; } } /* ── WINNERS CORNER ── */ .winners-corner { position: fixed; left: 16px; bottom: 18px; z-index: 80; padding: 4px 8px; overflow: visible; font-family: var(--font-serif); transition: transform 0.25s var(--ease); } body.view-book .winners-corner { display: none; } .winners-corner:hover { transform: translateY(-3px); } .winners-confetti { position: absolute; inset: -18px -14px; pointer-events: none; overflow: visible; } .confetti-piece { position: absolute; top: -8px; width: 6px; height: 6px; border-radius: 1px; opacity: 0; animation: confettiFall 3.4s ease-in var(--cf-delay, 0s) infinite; } .confetti-piece.c1 { left: 8%; background: var(--burgundy); --cf-delay: 0s; } .confetti-piece.c2 { left: 24%; background: var(--gold); border-radius: 50%; --cf-delay: 0.55s; } .confetti-piece.c3 { left: 45%; background: var(--emerald); --cf-delay: 1.1s; } .confetti-piece.c4 { left: 63%; background: var(--burgundy-light); border-radius: 50%; --cf-delay: 1.65s; } .confetti-piece.c5 { left: 81%; background: var(--gold); --cf-delay: 2.2s; } .confetti-piece.c6 { left: 93%; background: var(--emerald-light); border-radius: 50%; --cf-delay: 0.85s; } .confetti-piece.c7 { left: 36%; background: var(--gold); border-radius: 50%; --cf-delay: 1.9s; } .confetti-piece.c8 { left: 70%; background: var(--burgundy); --cf-delay: 2.6s; } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 0.95; } 85% { opacity: 0.55; } 100% { transform: translateY(64px) rotate(230deg); opacity: 0; } } .winners-sparkle { position: absolute; font-size: 11px; opacity: 0; pointer-events: none; animation: winnersSparkle 2.6s ease-in-out var(--sp-delay, 0s) infinite; } .winners-sparkle.s1 { top: -12px; left: 2%; --sp-delay: 0s; } .winners-sparkle.s2 { top: -6px; left: 52%; --sp-delay: 0.9s; } .winners-sparkle.s3 { top: -16px; left: 88%; --sp-delay: 1.7s; } @keyframes winnersSparkle { 0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); } 50% { opacity: 0.9; transform: scale(1.15) rotate(25deg); } } .winners-header { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; position: relative; z-index: 1; } .winners-trophy { font-size: 16px; display: inline-block; animation: winnersBob 2.4s ease-in-out infinite; } @keyframes winnersBob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-2px) rotate(6deg); } } .winners-title { font-style: italic; font-weight: 700; font-size: 13px; color: var(--burgundy); letter-spacing: 0.04em; text-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 30%, transparent); } .winners-cycle { position: relative; z-index: 1; min-height: 30px; min-width: 168px; display: flex; align-items: center; gap: 7px; white-space: nowrap; opacity: 0; transform: translateY(6px) scale(0.9) rotate(var(--enter-rotate, -2deg)); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .winners-cycle.is-visible { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } .winner-accent { font-size: 15px; display: inline-block; animation: winnersAccentPulse 1.8s ease-in-out infinite; } @keyframes winnersAccentPulse { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.18) rotate(-8deg); } } .winner-medal { font-size: 14px; } .winner-cycle-label { font-family: var(--font-serif); font-style: italic; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .winner-name { color: var(--ink); font-weight: 600; font-size: 12.5px; } @media (max-width: 720px) { .winners-corner { left: 12px; bottom: 14px; padding: 10px 12px 8px; } .winners-cycle { min-width: 130px; } .winner-cycle-label { font-size: 9px; } .winner-name { font-size: 11px; } } /* ── QUOTE RAILS (wide desktop, library home only) ── */ .quote-rail { display: none; position: fixed; top: 50%; transform: translateY(-50%); width: 188px; z-index: 60; pointer-events: none; } .quote-rail.left { left: 22px; } .quote-rail.right { right: 22px; } @media (min-width: 1420px) { body.view-library .quote-rail { display: block; } } .quote-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 16px; text-align: center; pointer-events: auto; box-shadow: 0 12px 30px -18px rgba(58,46,34,0.32); opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .quote-card.is-visible { opacity: 1; transform: translateY(0); } .quote-arabic { font-family: var(--font-arabic); font-size: 15.5px; line-height: 2; margin-bottom: 10px; background: linear-gradient(100deg, var(--ink) 42%, var(--gold) 50%, var(--ink) 58%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: quoteShimmer 6s linear infinite; } .quote-en { font-size: 11px; color: var(--muted); font-style: italic; line-height: 1.65; margin-bottom: 7px; } .quote-ref { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 12px; color: var(--burgundy); } @keyframes quoteShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } } /* ── FOOTER ── */ .footer { border-top: 1px solid var(--border); padding: 11px 20px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; width: 100%; flex-wrap: wrap; gap: 8px; } .footer-left { font-size: 10px; color: var(--muted); } .footer-right { font-family: var(--font-script); font-size: 14px; color: var(--burgundy); } /* ── MOBILE ── */ @media (max-width: 720px) { .sidebar { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 100; padding-top: 60px; } .sidebar.open { display: block; } .hamburger { display: flex; } .layout { flex-direction: column; } .main { padding: 16px 14px 48px; } .header-arabic-bg { display: none; } } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--burgundy-light); } /* Mobile close button */ .sidebar-close { display: none; } @media (max-width: 720px) { .sidebar-close { display: block; position: absolute; top: 12px; right: 14px; background: var(--card); border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; border-radius: 5px; cursor: pointer; font-family: var(--font-serif); font-size: 12px; } } .mobile-controls { display: none; padding: 10px 14px; } @media (max-width: 720px) { .mobile-controls { display: block; } } body.view-library .mobile-controls { display: none; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }