/* ============================================ كرام — KARAM GUIDE Deep Forest | Pure Gold | Premium Classic ============================================ */ :root { /* Light surfaces. --black is the page, --black-3 the cards on top of it — both were #FFFFFF, so cards had nothing to lift off and the whole screen read as one flat white sheet. Warmed to a paper beige with the card surface a step lighter, which is what gives the page depth. Kept high enough that --text-main (#1A1714) still clears AA comfortably. */ --on-gold: #1A1714; --black: #F6F2E7; --black-2: #FAF7EF; --black-3: #FFFDF7; --black-4: #F1ECDE; --black-5: #E7E0CD; --black-6: #D8D0BA; --gold: #C6A830; --gold-bright: #D4B43A; --gold-pale: #F5E9C0; --gold-dim: #A88B26; --gold-ghost: rgba(198,168,48,0.06); --gold-glow: rgba(198,168,48,0.22); --silver: #C8BFA8; --silver-mid: #8B7D6B; --silver-dim: #A89F8A; --silver-dark: #F5F1E8; --text-main: #1A1714; --text-muted: #6B6355; --text-faint: #C8BFA8; --nav-bg: #1B4228; --border-gold: rgba(198,168,48,0.20); --border-card: rgba(0,0,0,0.07); --border-silver: rgba(0,0,0,0.06); /* Hover/active surface tints. Added during the dark-mode merge: these two values were previously hardcoded, and giving them tokens keeps the light theme pixel-identical instead of approximating them with a nearby token. */ --surface-hover: #FAF5E0; --surface-cool: #F8FAFB; --border-card-strong: rgba(0,0,0,0.10); /* Accent — the deep forest green of the light identity. Tokenised during the dark merge: the dark identity is black-and-gold, not green, so this resolves to gold there. */ --accent: #1B4228; --accent-2: #2D7A45; --accent-ghost: rgba(27,66,40,0.08); --accent-border: rgba(27,66,40,0.18); --accent-hover: rgba(27,66,40,0.35); --accent-shadow: rgba(27,66,40,0.16); /* Nav scroll states. The JS toggles these by SECTION, not by theme, so they must be themed or the nav turns near-white while scrolling in dark mode. */ --nav-scroll-bg: rgba(250,248,242,0.88); --nav-scroll-fg: rgba(26,26,26,0.85); /* The bar has two states and they sit on opposite backgrounds: transparent over the hero, then solid --nav-bg once scrolled. Each needs its own foreground or one of them fails contrast. */ --nav-top-fg: rgba(26,26,26,0.88); --nav-top-fg-dim: rgba(26,26,26,0.55); --nav-solid-bg: #1B4228; --nav-solid-fg: rgba(255,255,255,0.92); --nav-solid-fg-dim: rgba(255,255,255,0.60); --nav-scroll-fg-dim: rgba(0,0,0,0.4); --nav-green-bg: rgba(27,66,40,0.88); --font-ar: 'Cairo', sans-serif; --font-display: 'Cairo', sans-serif; --font-quran: 'Scheherazade New', serif; --font-latin: 'Cairo', sans-serif; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --ease-out: cubic-bezier(0.22,1,0.36,1); } /* ══════════════════════════════════════════════════════════════════════════ DARK — the original editorial identity, recovered from commit cbb4359. This is a FULL swap, not a colour inversion: the dark mode is a different design language (Amiri serif display, sharp 3px corners) that reads as manuscript rather than modern. Colours, type and geometry all change. Applied via [data-theme="dark"] on , which an inline script in sets before first paint from localStorage or prefers-color-scheme. Doing it there rather than in a media query avoids both a flash of the wrong theme and a duplicated copy of this block. ══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --on-gold: #0A0A0A; --black: #050505; --black-2: #0A0A0A; --black-3: #111111; --black-4: #191919; --black-5: #222222; --black-6: #2A2A2A; --gold: #C49A2C; --gold-bright: #E6B84A; --gold-pale: #F2D898; --gold-dim: #7A5C1A; --gold-ghost: rgba(198,154,44,0.06); --gold-glow: rgba(198,154,44,0.22); --silver: #D0CCBF; --silver-mid: #8A8478; --silver-dim: #484440; --silver-dark: #1E1C1A; --text-main: #EAE2D2; --text-muted: #786E60; --text-faint: #3D3830; /* Derived — these three tokens postdate the dark design, so they are set here to match its geometry rather than inherited from the light theme. */ --nav-bg: #0A0A0A; --border-card: rgba(255,255,255,0.07); --radius-lg: 10px; --surface-hover: #1C1813; --surface-cool: #131313; --border-card-strong: rgba(255,255,255,0.10); --accent: #C49A2C; --accent-2: #E6B84A; --accent-ghost: rgba(198,154,44,0.10); --accent-border: rgba(198,154,44,0.24); --accent-hover: rgba(198,154,44,0.40); --accent-shadow: rgba(198,154,44,0.18); --nav-scroll-bg: rgba(17,17,17,0.88); --nav-scroll-fg: rgba(234,226,210,0.88); --nav-top-fg: rgba(234,226,210,0.90); --nav-top-fg-dim: rgba(234,226,210,0.55); --nav-solid-bg: rgba(17,17,17,0.94); --nav-solid-fg: rgba(234,226,210,0.92); --nav-solid-fg-dim: rgba(234,226,210,0.55); --nav-scroll-fg-dim: rgba(234,226,210,0.45); --nav-green-bg: rgba(10,10,10,0.88); --border-gold: rgba(198,154,44,0.14); --border-silver: rgba(200,196,188,0.1); --font-ar: 'Cairo', sans-serif; --font-display: 'Amiri', serif; --font-quran: 'Scheherazade New', serif; --font-latin: 'Playfair Display', serif; --radius-sm: 3px; --radius-md: 6px; } *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; font-size:16px; } body { background: var(--black); color: var(--text-main); font-family: var(--font-ar); font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 80px; /* تعويض الـ nav الثابت */ } body::before { content: ''; position: fixed; inset: 0; z-index: 99990; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.022; mix-blend-mode: overlay; } #scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 99999; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright), #E5C84A); transform-origin: left; transform: scaleX(0); transition: transform 0.1s linear; } /* ══ NAVIGATION ══ Was `background: rgba(13, 13, 13, 0.50)` — a hardcoded dark wash that ignored the theme. Over the white light-mode page it rendered rgb(134, 134, 134), and its own text scored 3.64:1 against that, below the 4.5 minimum. Two honest states instead: transparent while the hero is behind it, then the brand green once scrolled — the same --nav-bg the footer already uses, so the top and bottom of the page finally belong to each other. Both states read their colours from tokens, so dark mode resolves to near-black with no theme-specific branch. */ nav { position: fixed; top: 0; right: 0; left: 0; z-index: 5000; background: transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, color .35s ease; } nav::before { display: none; } /* At rest, over the hero. */ nav .nav-link, nav .lang-select-btn, nav .theme-toggle { color: var(--nav-top-fg); } nav .lang-select-btn .lang-arrow { color: var(--nav-top-fg-dim); } nav .nav-hamburger span { background: var(--nav-top-fg); } nav .nav-link:hover { color: var(--gold); } /* Scrolled: solid brand surface. */ nav.scrolled { background: var(--nav-solid-bg); border-bottom-color: rgba(255,255,255,0.08); box-shadow: 0 2px 22px rgba(0,0,0,0.18); } nav.scrolled .nav-link, nav.scrolled .lang-select-btn, nav.scrolled .theme-toggle { color: var(--nav-solid-fg); } nav.scrolled .lang-select-btn .lang-arrow { color: var(--nav-solid-fg-dim); } nav.scrolled .nav-hamburger span { background: var(--nav-solid-fg); } nav.scrolled .nav-link:hover { color: var(--gold-bright); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 56px; min-height: 80px; max-width: 1440px; margin: 0 auto; } .nav-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #FFFFFF; text-decoration: none; display: flex; align-items: center; letter-spacing: 0.02em; gap: 10px; margin-right: 24px; } .nav-logo-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 4px 8px; } .nav-logo-mark img { height: 105px; width: auto; object-fit: contain; display: block; } [dir="ltr"] .nav-logo { flex-direction: row-reverse; } [dir="ltr"] .nav-inner { flex-direction: row-reverse; } .nav-links { display: flex; align-items: center; justify-content: center; list-style: none; gap: 2px; flex: 1; } .nav-item { position: relative; display: flex; align-items: center; } /* بدون فاصل بين الروابط */ .nav-item + .nav-item:not(.nav-item--cta)::before { display: none; } .nav-link { display: flex; align-items: center; gap: 4px; padding: 8px 16px; background: transparent; border: none; border-radius: 0; color: rgba(255,255,255,0.88); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; transition: color 0.18s; position: relative; font-family: 'Tajawal', sans-serif; } .nav-link::after { display: none; } .nav-link:hover, .nav-item:hover .nav-link { color: #FFFFFF; background: transparent; } .nav-item:has(.nav-dropdown) .nav-link::before { content: '▾'; font-size: 0.6rem; opacity: 0.5; color: inherit; transition: opacity 0.2s, transform 0.2s; margin-inline-start: 3px; } .nav-item:has(.nav-dropdown):hover .nav-link::before { opacity: 0.9; transform: rotate(180deg); } .nav-item:hover .nav-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); } /* ── LANG SWITCHER ── */ /* ══ THEME TOGGLE ══ Deliberately mirrors .lang-select-btn: both are nav-level preference controls, so they should read as one system rather than two widgets. The nav is dark in both themes, so the white-alpha foreground is correct either way and needs no theming. */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-inline-start: 4px; padding: 0; background: transparent; border: none; border-radius: 7px; color: inherit; cursor: pointer; transition: color 0.22s, background 0.22s; } .theme-toggle:hover { background: rgba(128,128,128,0.14); } .theme-toggle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* Show the icon for the theme you would switch TO, not the one you are in — the control advertises its result rather than describing current state. */ .theme-toggle .icon-to-dark { display: block; } .theme-toggle .icon-to-light { display: none; } :root[data-theme="dark"] .theme-toggle .icon-to-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-to-light { display: block; } .lang-switcher { position: relative; direction: ltr; margin-inline-start: 12px; } /* ══ LANGUAGE PICKER ══ Every surface here was hardcoded dark — rgba(13, 13, 13, 0.92) panel, .97 options, white text — so in light mode a black dropdown dropped out of a white page. Same fault as the nav bar had. All of it reads tokens now, and the trigger inherits the bar's foreground so it is legible in both nav states. */ .lang-select-btn { display: flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; background: transparent; border: none; border-radius: 7px; color: inherit; font-family: var(--font-ar); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.22s; white-space: nowrap; } .lang-select-btn:hover, .lang-switcher.open .lang-select-btn { background: rgba(128,128,128,0.12); } .lang-select-btn .lang-flag { width: 20px; height: 15px; border-radius: 3px; flex-shrink: 0; background-size: cover; } .lang-select-btn .lang-label { font-size: 0.78rem; } .lang-select-btn .lang-arrow { font-size: 0.48rem; opacity: 0.8; transition: transform 0.22s; margin-left: 1px; color: inherit; } .lang-switcher.open .lang-select-btn .lang-arrow { transform: rotate(180deg); } .lang-dropdown-list { /* The trigger sits at x≈68 in both text directions — the nav control cluster is on the left either way — so a panel anchored to its right edge ran 175px off screen. Logical properties do not help here: .lang-switcher forces direction:ltr to keep flag-then-label order, which flips inline-end back to the physical right. Anchor left and open inward. */ position: absolute; top: calc(100% + 8px); left: 0; right: auto; width: min(360px, calc(100vw - 24px)); background: color-mix(in srgb, var(--black-3) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-card); box-shadow: 0 14px 44px rgba(0,0,0,0.16); border-radius: 16px; z-index: 9999; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); } @media (max-width: 768px) { .lang-dropdown-list { position: fixed; top: 65px; left: 12px; right: 12px; width: auto; transform: translateY(-10px); } .lang-switcher.open .lang-dropdown-list { transform: translateY(0); } } .lang-dropdown-list::before { display: none; } .lang-switcher.open .lang-dropdown-list { opacity: 1; pointer-events: auto; transform: translateY(0); } .lang-dropdown-header { padding: 14px 18px 10px; font-size: 0.72rem; color: var(--text-muted); font-family: 'Tajawal', sans-serif; font-weight: 500; border-bottom: 1px solid var(--border-card); text-align: right; direction: rtl; } [dir="ltr"] .lang-dropdown-header { text-align: left; direction: ltr; } /* The 1px grid gap is the divider — it must be a border colour, not white. */ .lang-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border-card); padding: 0; } .lang-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 6px; cursor: pointer; background: var(--black-3); transition: background 0.18s; position: relative; text-align: center; } .lang-option:hover { background: var(--surface-hover); } .lang-option.active { background: var(--gold-ghost); } .lang-option.active::after { content: '✓'; position: absolute; top: 6px; right: 8px; font-size: 0.6rem; color: var(--gold); } .lang-option .fi { width: 30px; height: 21px; border-radius: 3px; margin-bottom: 3px; flex-shrink: 0; } .lang-option .lang-flag { font-size: 1.6rem; line-height: 1; margin-bottom: 2px; } .lang-option .lang-name { font-size: 0.78rem; font-weight: 600; color: var(--text-main); font-family: 'Tajawal', sans-serif; } .lang-option .lang-native { font-size: 0.62rem; color: var(--text-muted); font-family: 'Tajawal', sans-serif; } .lang-dropdown-footer { padding: 10px 18px 12px; border-top: 1px solid var(--border-card); font-size: 0.65rem; color: var(--text-faint); font-family: 'Tajawal', sans-serif; text-align: center; } @media (max-width: 768px) { .lang-dropdown-list { direction: inherit; } .lang-grid { grid-template-columns: repeat(5, 1fr) !important; } .lang-option { padding: 12px 4px; gap: 3px; } .lang-option .fi { width: 26px; height: 18px; } .lang-option .lang-name { font-size: 0.7rem; } .lang-option .lang-native { font-size: 0.56rem; } .lang-option.active::after { top: 4px; right: 4px; font-size: 0.55rem; } } .nav-hamburger { display: none; flex-direction: column; gap: 5px; justify-content: center; background: none; border: none; cursor: pointer; padding: 8px; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: #C6A830; transition: all 0.3s; } /* .mobile-nav rules moved to bakkah.css — rebuilt as an animated sheet. */ #top-btn { position: fixed; bottom: 108px; right: 28px; width: 46px; height: 46px; background: linear-gradient(135deg, var(--gold-dim), var(--gold)); border: 1px solid var(--gold); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 8000; opacity: 0; pointer-events: none; transition: all 0.4s var(--ease-out); box-shadow: 0 4px 20px rgba(198,168,48,0.35); color: #FFFFFF; } #top-btn.visible { opacity: 1; pointer-events: all; } /* ══ HERO ══ */ .hero { position: relative; min-height: 700px; height: 90vw; max-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 0; margin-top: -80px; } @keyframes heroKenBurns { 0% { transform: scale(1.00) translateX(0) translateY(0); } 100% { transform: scale(1.08) translateX(-1%) translateY(-1%); } } /* موبايل */ @media (max-width: 768px) { .hero { height: auto; min-height: 420px; justify-content: flex-end; align-items: flex-end; padding-bottom: 40px; } .hero-content { padding: 0 24px; max-width: 100%; } .hero-overlay { background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.10) 100%); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollPulse { 0%,100%{opacity:0.25;} 50%{opacity:1;} } .kiswah-divider { height: 1px; background: linear-gradient(to right, transparent, var(--gold-dim) 30%, var(--gold) 50%, var(--gold-dim) 70%, transparent); opacity: 0.35; } section { position: relative; z-index: 2; } .section-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } /* ══ زخارف خلفية الأقسام ══ */ .places::before, .masarik::before, .experiences::before, .hajj-apps::before, .qibla::before, .services::after, .places::after, .masarik::after, .experiences::after, .hajj-apps::after, .qibla::after { content: ''; position: absolute; inset: 0; background-repeat: no-repeat; pointer-events: none; z-index: 0; } .places::before, .masarik::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='55' fill='none' stroke='%231B4228' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23C6A830' stroke-width='0.9'/%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%231B4228' stroke-width='0.8'/%3E%3Cpolygon points='60,12 67.3,42.4 93.9,26.1 77.6,52.7 108,60 77.6,67.3 93.9,93.9 67.3,77.6 60,108 52.7,77.6 26.1,93.9 42.4,67.3 12,60 42.4,52.7 26.1,26.1 52.7,42.4' fill='none' stroke='%231B4228' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='6' fill='%23C6A830'/%3E%3Cline x1='60' y1='5' x2='60' y2='12' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='60' y1='108' x2='60' y2='115' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='5' y1='60' x2='12' y2='60' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='108' y1='60' x2='115' y2='60' stroke='%23C6A830' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='5' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='60' cy='115' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='5' cy='60' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='115' cy='60' r='2.5' fill='%23C6A830'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='55' fill='none' stroke='%231B4228' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23C6A830' stroke-width='0.9'/%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%231B4228' stroke-width='0.8'/%3E%3Cpolygon points='60,12 67.3,42.4 93.9,26.1 77.6,52.7 108,60 77.6,67.3 93.9,93.9 67.3,77.6 60,108 52.7,77.6 26.1,93.9 42.4,67.3 12,60 42.4,52.7 26.1,26.1 52.7,42.4' fill='none' stroke='%231B4228' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='6' fill='%23C6A830'/%3E%3Cline x1='60' y1='5' x2='60' y2='12' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='60' y1='108' x2='60' y2='115' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='5' y1='60' x2='12' y2='60' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='108' y1='60' x2='115' y2='60' stroke='%23C6A830' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='5' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='60' cy='115' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='5' cy='60' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='115' cy='60' r='2.5' fill='%23C6A830'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='55' fill='none' stroke='%231B4228' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23C6A830' stroke-width='0.9'/%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%231B4228' stroke-width='0.8'/%3E%3Cpolygon points='60,12 67.3,42.4 93.9,26.1 77.6,52.7 108,60 77.6,67.3 93.9,93.9 67.3,77.6 60,108 52.7,77.6 26.1,93.9 42.4,67.3 12,60 42.4,52.7 26.1,26.1 52.7,42.4' fill='none' stroke='%231B4228' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='6' fill='%23C6A830'/%3E%3Cline x1='60' y1='5' x2='60' y2='12' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='60' y1='108' x2='60' y2='115' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='5' y1='60' x2='12' y2='60' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='108' y1='60' x2='115' y2='60' stroke='%23C6A830' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='5' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='60' cy='115' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='5' cy='60' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='115' cy='60' r='2.5' fill='%23C6A830'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='55' fill='none' stroke='%231B4228' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23C6A830' stroke-width='0.9'/%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%231B4228' stroke-width='0.8'/%3E%3Cpolygon points='60,12 67.3,42.4 93.9,26.1 77.6,52.7 108,60 77.6,67.3 93.9,93.9 67.3,77.6 60,108 52.7,77.6 26.1,93.9 42.4,67.3 12,60 42.4,52.7 26.1,26.1 52.7,42.4' fill='none' stroke='%231B4228' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='6' fill='%23C6A830'/%3E%3Cline x1='60' y1='5' x2='60' y2='12' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='60' y1='108' x2='60' y2='115' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='5' y1='60' x2='12' y2='60' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='108' y1='60' x2='115' y2='60' stroke='%23C6A830' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='5' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='60' cy='115' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='5' cy='60' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='115' cy='60' r='2.5' fill='%23C6A830'/%3E%3C/svg%3E"); background-position: top -50px right -50px, top -50px left -50px, bottom -50px right -50px, bottom -50px left -50px; background-size: 220px 220px, 220px 220px, 220px 220px, 220px 220px; opacity: 0.10; } /* زخرفة واحدة في الزاوية أسفل اليسار لقسم الخدمات */ .services::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='55' fill='none' stroke='%231B4228' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23C6A830' stroke-width='0.9'/%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%231B4228' stroke-width='0.8'/%3E%3Cpolygon points='60,12 67.3,42.4 93.9,26.1 77.6,52.7 108,60 77.6,67.3 93.9,93.9 67.3,77.6 60,108 52.7,77.6 26.1,93.9 42.4,67.3 12,60 42.4,52.7 26.1,26.1 52.7,42.4' fill='none' stroke='%231B4228' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='6' fill='%23C6A830'/%3E%3Cline x1='60' y1='5' x2='60' y2='12' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='60' y1='108' x2='60' y2='115' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='5' y1='60' x2='12' y2='60' stroke='%23C6A830' stroke-width='1.5'/%3E%3Cline x1='108' y1='60' x2='115' y2='60' stroke='%23C6A830' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='5' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='60' cy='115' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='5' cy='60' r='2.5' fill='%23C6A830'/%3E%3Ccircle cx='115' cy='60' r='2.5' fill='%23C6A830'/%3E%3C/svg%3E"); background-position: bottom 20px left 20px; background-size: 200px 200px; background-repeat: no-repeat; pointer-events: none; z-index: 0; opacity: 0.11; } .services::after, .places::after, .masarik::after, .experiences::after, .hajj-apps::after, .qibla::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='55' fill='none' stroke='%231B4228' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23C6A830' stroke-width='0.9'/%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%231B4228' stroke-width='0.8'/%3E%3Cpolygon points='60,12 67.3,42.4 93.9,26.1 77.6,52.7 108,60 77.6,67.3 93.9,93.9 67.3,77.6 60,108 52.7,77.6 26.1,93.9 42.4,67.3 12,60 42.4,52.7 26.1,26.1 52.7,42.4' fill='none' stroke='%231B4228' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='6' fill='%23C6A830'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='55' fill='none' stroke='%231B4228' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23C6A830' stroke-width='0.9'/%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%231B4228' stroke-width='0.8'/%3E%3Cpolygon points='60,12 67.3,42.4 93.9,26.1 77.6,52.7 108,60 77.6,67.3 93.9,93.9 67.3,77.6 60,108 52.7,77.6 26.1,93.9 42.4,67.3 12,60 42.4,52.7 26.1,26.1 52.7,42.4' fill='none' stroke='%231B4228' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='6' fill='%23C6A830'/%3E%3C/svg%3E"); background-position: center right 30px, center left 30px; background-size: 160px 160px, 160px 160px; opacity: 0.065; } .section-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--accent); font-family: var(--font-ar); font-weight: 700; margin-bottom: 12px; background: var(--accent-ghost); padding: 5px 16px; border-radius: 999px; border: 1px solid var(--accent-border); } .section-label::before { display: none; } .section-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 800; color: var(--text-main); line-height: 1.3; margin-bottom: 14px; } .section-desc { color: var(--text-muted); font-size: 0.92rem; line-height: 2; max-width: 540px; font-family: var(--font-ar); font-weight: 400; } /* ─── SERVICES ─── */ .services { padding: 90px 56px; background: var(--black-2); position: relative; overflow: hidden; } .services .section-inner { position: relative; z-index: 1; } .services-header .section-label { justify-content: center; } .services-header .section-desc { margin: 0 auto; } /* ─── PLACES ─── */ .places { padding: 90px 56px; background: var(--black-3); } .place-card { position: relative; overflow: hidden; cursor: pointer; border: 1px solid var(--border-gold); } .place-card.large { grid-row: span 2; } .place-card:hover .place-img { transform: scale(1.08); filter: brightness(0.65) saturate(0.75); } .place-card.large .place-overlay { padding: 32px 28px; } .place-card.large .place-name { font-size: 1.7rem; } .place-card.large .place-desc { max-height: none; opacity: 0.9; } .place-card:hover .place-desc { max-height: 60px; opacity: 0.88; } .place-card::after { content: ''; position: absolute; bottom: 0; inset-inline: 0; height: 2px; background: linear-gradient(to right, var(--gold-dim), var(--gold-bright), var(--gold-dim)); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-out); } [dir="ltr"] .place-card::after { transform-origin: left; } .place-card:hover::after { transform: scaleX(1); } /* ─── MAP ─── */ .map-explorer { padding: 90px 56px; background: var(--black-4); } .map-explorer .section-desc { max-width: 720px; } #makkah-map { width: 100%; height: 100%; min-height: 620px; background: linear-gradient(145deg, #E8F5E9, #F1F8E9); } .map-status { position: absolute; inset: 22px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.9; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); z-index: 3; border-radius: 8px; } .map-status.hidden { display: none; } /* ─── MAPBOX OVERRIDES ─── */ .mapboxgl-popup-content { background: var(--black-3) !important; color: var(--text-main) !important; border: 1px solid var(--border-card-strong) !important; border-radius: 12px !important; padding: 18px 20px !important; font-family: var(--font-ar) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important; max-width: 280px !important; } /* Must track the popup body colour, or dark mode shows a white arrow. */ .mapboxgl-popup-tip { border-top-color: var(--black-3) !important; } .mapboxgl-popup-close-button { color: var(--text-muted) !important; font-size: 18px !important; padding: 4px 8px !important; } .mapboxgl-popup-close-button:hover { color: var(--gold) !important; } .mapboxgl-ctrl-group { background: var(--black-3) !important; border: 1px solid var(--border-card-strong) !important; } .mapboxgl-ctrl-group button { background: transparent !important; } .mapboxgl-ctrl-group button span { filter: none; } .mapboxgl-ctrl-attrib { opacity: 0.6; } .route-btn.active { background: rgba(198,154,44,0.12); border-color: var(--gold); color: var(--gold-bright); } .bakkah-marker.active { transform: scale(1.4); filter: drop-shadow(0 0 12px rgba(198,154,44,0.95)); } /* ─── MAP SIDEBAR — scrollable strip showing 3 { padding: 0; display: flex; flex-direction: column; min-height: 620px; overflow: hidden; } .map-count { color: var(--text-muted); font-size: 0.76rem; letter-spacing: 0.08em; } /* The scrollable strip — shows exactly 3 items { display: flex; flex-direction: column; gap: 0; overflow-y: auto; padding: 0; scroll-snap-type: y mandatory; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.1) transparent; /* Exactly 3 items visible — each item is 100px tall */ max-height: 600px; flex-shrink: 0; } .map-location-item.active { background: var(--surface-hover); } .map-location-item.active::after { transform: scaleY(1); } @keyframes bounceArrow { 0%,100%{opacity:0.4;transform:translateY(0);} 50%{opacity:1;transform:translateY(3px);} } /* ─── YOUTUBE HARAM LIVESTREAM ─── */ .haram-live { padding: 80px 56px; background: var(--black-4); position: relative; overflow: hidden; } .haram-live::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(198,168,48,0.04), transparent 65%); } .haram-live .section-inner { position: relative; z-index: 1; } .haram-live-header { text-align: center; margin-bottom: 40px; } .haram-live-header .section-label { justify-content: center; } .live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 16px; background: rgba(220,50,50,0.12); border: 1px solid rgba(220,50,50,0.3); border-radius: 50px; font-size: 0.7rem; letter-spacing: 0.14em; color: #e05555; font-family: var(--font-ar); font-weight: 700; margin-bottom: 16px; display: inline-flex; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #e05555; animation: pulse 1.5s ease infinite; } .haram-video-frame { position: relative; width: 100%; max-width: 900px; margin: 0 auto; border: 1px solid var(--border-gold); box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(198,154,44,0.08); border-radius: 4px; overflow: hidden; background: #000; } .haram-video-frame::before { content: ''; display: block; padding-top: 56.25%; /* 16:9 */ } .haram-video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Gold corner accents */ .haram-video-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(198,154,44,0.12) 0%, transparent 15%), linear-gradient(225deg, rgba(198,154,44,0.12) 0%, transparent 15%); z-index: 2; } /* ─── HAJJ APPS ─── */ .hajj-apps { padding: 90px 56px; background: var(--black-2); position: relative; overflow: hidden; } .hajj-apps::before { display: none; } .hajj-apps .section-inner { position: relative; z-index: 1; } .hajj-apps-header { text-align: center; margin-bottom: 56px; } .hajj-apps-header .section-label { justify-content: center; } .hajj-apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; } .app-card { background: var(--black-3); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; transition: all 0.3s var(--ease-out); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .app-card::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: linear-gradient(to right, var(--gold), var(--gold-bright)); transform: scaleX(0); transition: transform 0.4s var(--ease-out); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .app-card:hover { transform: translateY(-5px); border-color: rgba(198,168,48,0.2); box-shadow: 0 12px 32px rgba(198,168,48,0.12); } .app-card:hover::before { transform: scaleX(1); } .app-icon-wrap { width: 72px; height: 72px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(198,168,48,0.20); background: rgba(198,168,48,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-icon-wrap img { width: 100%; height: 100%; object-fit: cover; } .app-icon-fallback { font-size: 2.2rem; } .app-name { font-family: var(--font-display); font-size: 1rem; color: var(--text-main); font-weight: 700; } .app-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.8; font-family: var(--font-ar); font-weight: 400; } .app-links { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } .app-link-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 1px solid var(--border-gold); border-radius: 50px; font-size: 0.68rem; color: var(--gold); text-decoration: none; font-family: var(--font-ar); font-weight: 600; letter-spacing: 0.06em; background: rgba(198,154,44,0.05); transition: all 0.25s; white-space: nowrap; } .app-link-btn:hover { background: rgba(198,154,44,0.12); border-color: var(--gold); color: var(--gold-bright); transform: scale(1.04); } .app-link-btn.web { color: var(--silver-mid); border-color: var(--border-silver); background: transparent; } .app-link-btn.web:hover { color: var(--silver); border-color: var(--silver-mid); background: rgba(220,200,140,0.05); } /* ─── MASARIK / TOURS ─── */ .masarik { padding: 90px 56px; background: var(--black-4); position: relative; overflow: hidden; } .explore-route-btn.active { background: rgba(198,154,44,0.18); border-color: var(--gold-bright); color: var(--gold-bright); } /* ─── MANASIK SECTION ─── */ .manasik { padding: 90px 56px; background: var(--black-2); position: relative; overflow: hidden; } /* ─── QIBLA COMPASS ─── */ .qibla { padding: 90px 56px; background: var(--black-3); position: relative; overflow: hidden; } .qibla::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(198,168,48,0.04) 0%, transparent 70%); pointer-events: none; } .qibla-container { display: flex; flex-direction: column; align-items: center; gap: 52px; margin-top: 60px; } @media (min-width: 820px) { .qibla-container { flex-direction: row; justify-content: center; gap: 80px; align-items: center; } } .compass-wrap { position: relative; width: 260px; height: 260px; flex-shrink: 0; filter: drop-shadow(0 0 28px rgba(198,154,44,0.18)); } .compass { width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid var(--border-gold); background: radial-gradient(circle at 50% 40%, #1e1e1e 50%, #111 100%); position: relative; box-shadow: inset 0 0 40px rgba(0,0,0,0.6); } .compass::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(198,154,44,0.12); pointer-events: none; } .compass-dir { position: absolute; font-family: var(--font-display); font-size: 0.78rem; color: var(--gold); font-weight: 700; letter-spacing: 0.05em; } .compass-dir.cn { top: 18px; left: 50%; transform: translateX(-50%); } .compass-dir.cs { bottom: 18px; left: 50%; transform: translateX(-50%); } .compass-dir.ce { right: 18px; top: 50%; transform: translateY(-50%); } .compass-dir.cw { left: 18px; top: 50%; transform: translateY(-50%); } .compass-needle-wrap { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-origin: center center; transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1); } .needle-body { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 3px; height: 110px; background: linear-gradient(to top, rgba(198,154,44,0.15), var(--gold)); border-radius: 2px 2px 0 0; transform-origin: bottom center; } .needle-kaaba { position: absolute; bottom: 112px; left: 50%; transform: translateX(-50%); font-size: 1.15rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(198,154,44,0.5)); } .needle-dot { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(198,154,44,0.5); } .qibla-info { display: flex; flex-direction: column; align-items: center; gap: 18px; } @media (min-width: 820px) { .qibla-info { align-items: flex-start; } } .qibla-btn { padding: 13px 36px; background: transparent; border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-ar); font-size: 0.9rem; cursor: pointer; transition: background 0.3s, color 0.3s; letter-spacing: 0.05em; border-radius: 2px; } .qibla-btn:hover:not(:disabled) { background: var(--gold); color: var(--black); } .qibla-btn:disabled { opacity: 0.5; cursor: not-allowed; } .qibla-degree-wrap { display: none; text-align: center; } @media (min-width: 820px) { .qibla-degree-wrap { text-align: start; } } .qibla-degree { font-family: var(--font-display); font-size: 3rem; color: var(--gold-bright); line-height: 1; } .qibla-degree-label { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.12em; margin-top: 4px; font-family: var(--font-ar); font-weight: 300; } .qibla-status { font-size: 0.82rem; color: var(--text-muted); font-family: var(--font-ar); font-weight: 300; text-align: center; max-width: 280px; line-height: 1.8; } @media (min-width: 820px) { .qibla-status { text-align: start; } } .qibla-live-badge { display: none; align-items: center; gap: 6px; font-size: 0.68rem; color: var(--gold); letter-spacing: 0.12em; } .qibla-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4caf50; animation: livePulse 1.4s ease-in-out infinite; } @keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.3} } @media (max-width: 580px) { .qibla { padding: 80px 24px; } .compass-wrap { width: 220px; height: 220px; } .needle-body { height: 90px; } .needle-kaaba { bottom: 92px; } } /* ─── CATEGORY FILTER PILLS ─── */ .filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; justify-content: center; } .filter-pill { display: flex; align-items: center; gap: 8px; padding: 10px 22px; background: var(--black-3); border: 1px solid var(--border-card-strong); border-radius: 40px; color: var(--text-muted); font-family: var(--font-ar); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .filter-pill:hover { color: var(--gold-bright); border-color: var(--gold-dim); background: var(--gold-ghost); } .filter-pill.filter-active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-ghost); box-shadow: 0 0 14px var(--accent-shadow); } .pill-icon { font-size: 1.05rem; line-height: 1; } .testimonials-header .section-label { justify-content: center; } .testimonials-header .section-desc { margin: 0 auto; } /* ─── EVENTS ─── */ .events { padding: 90px 56px; background: var(--surface-hover); } /* ─── EXPERIENCES ─── */ .experiences { padding: 90px 56px; background: var(--black-3); position: relative; overflow: hidden; } .exp-kitchen-panel.active { display: block; } /* ─── CULTURE ─── */ .culture { padding: 90px 56px; background: var(--black-4); position: relative; overflow: hidden; } .newsletter .section-inner { position: relative; z-index: 1; } .newsletter .section-label { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); } .newsletter .section-title { color: #FFFFFF; } .newsletter .section-desc { color: rgba(255,255,255,0.65); } /* ─── FOOTER ─── */ footer { background: var(--nav-bg); border-top: none; padding: 64px 56px 32px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; max-width: 1200px; margin: 0 auto 52px; } .footer-logo { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: #FFFFFF; display: block; margin-bottom: 16px; } .footer-tagline { font-size: 0.84rem; color: rgba(255,255,255,0.55); line-height: 2.1; font-family: var(--font-ar); font-weight: 400; } .footer-col-title { font-size: 0.7rem; letter-spacing: 0.15em; color: rgba(255,255,255,0.45); margin-bottom: 20px; display: block; font-family: var(--font-ar); font-weight: 700; text-transform: uppercase; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 11px; } .footer-links a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 0.84rem; transition: all 0.2s; font-family: var(--font-ar); display: inline-flex; align-items: center; gap: 6px; } .footer-links a:hover { color: var(--gold-bright); } .footer-divider { height: 1px; max-width: 1200px; margin: 0 auto; background: rgba(255,255,255,0.08); margin-bottom: 28px; } .footer-bottom { padding-top: 24px; text-align: center; color: rgba(255,255,255,0.4); font-size: 0.74rem; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ar); } .footer-ayah { color: var(--gold-bright); font-family: var(--font-quran); font-size: 0.95rem; opacity: 0.8; } @keyframes teaserIn { to { opacity: 1; transform: translateY(0); } } @keyframes teaserOut { to { opacity: 0; transform: translateY(6px); } } #chat-teaser.hidden { display: none; } @keyframes launcherPulse { 0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 0 rgba(0,0,0,0.2); } 50% { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 10px rgba(0,0,0,0); } } #chat-box.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; } @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} } .msg { display: flex; gap: 7px; align-items: flex-end; max-width: 92%; } .msg.bot { align-self: flex-end; } .msg.user { align-self: flex-start; flex-direction: row-reverse; } .msg.bot .msg-bubble { background: var(--black-3); border: 1px solid var(--border-card-strong); color: var(--text-main); border-bottom-left-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .msg.bot:has(.chat-table) { max-width: 100%; } .msg.bot .msg-bubble:has(.chat-table) { max-width: calc(100% - 32px); width: calc(100% - 32px); padding: 8px 4px; overflow-x: auto; } .msg.user .msg-bubble { background: var(--gold-bright); color: #FFFFFF; font-weight: 600; border-bottom-right-radius: 3px; } @keyframes twFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } @keyframes typeBounce{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-7px);}} #mic-btn { width: 36px; height: 36px; background: rgba(198,168,48,0.07); border: 1px solid rgba(198,168,48,0.18); border-radius: 8px; color: var(--silver-mid); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s; flex-shrink: 0; } #mic-btn:hover { border-color: var(--gold); color: var(--gold); } #mic-btn.recording { background: rgba(231,76,60,0.12); border-color: #E74C3C; color: #E74C3C; animation: micPulse 1.1s ease infinite; } @keyframes micPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(231,76,60,0.45); } 50%{ box-shadow: 0 0 0 7px rgba(231,76,60,0); } } #mic-stop-btn.visible { display: flex; } /* ─── SCROLL REVEAL ─── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(28px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); } .reveal-left.visible { opacity: 1; transform: translateX(0); } /* ─── RESPONSIVE ─── */ @media (max-width: 1024px) { .nav-links { display: none; } .nav-hamburger { display: flex; } .nav-inner { padding: 0 24px; } .section-number { display: none; } } @media (max-width: 900px) { .services, .places, .map-explorer, .masarik, .events, .experiences, .culture, .hajj-apps, .haram-live { padding: 80px 24px; } footer { padding: 52px 24px 24px; } #makkah-map { min-height: 460px; } .place-card.large { grid-column: span 2; aspect-ratio: 16/7; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-bottom { flex-direction: column; gap: 12px; } .hajj-apps-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } @media (max-width: 580px) { #makkah-map { min-height: 380px; } .place-card.large { grid-column: 1; aspect-ratio: 4/3; } .footer-grid { grid-template-columns: 1fr; } .hajj-apps-grid { grid-template-columns: 1fr 1fr; } } /* ============================================ LOCATION BACKGROUND IMAGES (from widget.css) ============================================ */ .bg-masjid-haram { background-image: url('/static/kaaba.jpg'); background-size: cover; background-position: center; filter: contrast(1.05) saturate(1.1) brightness(0.88); }