/* ---------- CSS Variables (light/dark) ---------- */ :root { --primary: #005B96; --accent: #FFC107; --bg-light: #F5F5F5; --bg-dark: #111827; --text-light: #333333; --text-dark: #F5F5F5; --card-light: #FFFFFF; --card-dark: #1F2937; --border-light: #E5E7EB; --border-dark: #374151; --radius: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.1); --shadow-md: 0 6px 18px rgba(0,0,0,.08); --container-max: 1120px; } html { direction: rtl; } body { margin: 0; font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg-light); color: var(--text-light); } /* Material Symbols setup */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 1em; /* inherits nicely; adjust if needed */ line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Choose weights/sizes as you like */ font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; } /* Dark mode support if you toggle .dark on or */ .dark body { background: var(--bg-dark); color: var(--text-dark); } /* ---------- Utilities (minimal replacements) ---------- */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: 16px; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 10px; font-weight: 800; background: var(--accent); color: var(--primary); text-decoration: none; transition: filter .2s ease, opacity .2s ease; } .btn:hover { filter: brightness(0.95); } /* Headings */ .h2 { font-size: 1.875rem; /* 30px */ font-weight: 800; letter-spacing: -0.015em; margin: 0 0 12px; } .h1 { font-size: clamp(1.875rem, 1.2rem + 2vw, 2.25rem); /* 30→36 */ font-weight: 900; letter-spacing: -0.033em; line-height: 1.2; margin: 0 0 10px; } /* Paragraph */ .lead { font-size: clamp(1rem, .9rem + .5vw, 1.125rem); color: #6B7280; /* gray-500 */ } .dark .lead { color: #9CA3AF; } /* Cards / sections */ .card { background: var(--card-light); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .dark .card { background: var(--card-dark); border-color: var(--border-dark); } .section { padding: 2rem; } .section-lg { padding: clamp(1.5rem, 1rem + 2vw, 3rem); } /* ---------- Layout: Hero ---------- */ .challenge-hero { display: grid; grid-template-columns: 1fr; min-height: 480px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } @media (min-width: 1024px) { .challenge-hero { grid-template-columns: 1fr 1fr; } } .challenge-hero .hero-image { background-size: cover; background-position: center; min-height: 240px; } .challenge-hero .hero-content { display: flex; align-items: center; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); text-align: center; } @media (min-width: 1024px) { .challenge-hero .hero-content { text-align: right; } } .hero-inner { width: 100%; display: grid; gap: 1.25rem; } /* Countdown box */ .countdown { border: 1px solid var(--border-light); border-radius: 10px; padding: 16px; background: var(--bg-light); display: inline-grid; justify-items: center; gap: .75rem; } .dark .countdown { border-color: var(--border-dark); background: var(--bg-dark); } .countdown h3 { margin: 0; font-size: 2rem; font-weight: 800; color: var(--primary); } .dark .countdown h3 { color: var(--accent); } .countdown .row { display: inline-grid; grid-auto-flow: column; align-items: end; gap: 16px; } .countdown .cell { text-align: center; } .countdown .num { font-size: clamp(1.5rem, 1.2rem + 1vw, 3rem); font-weight: 800; } .countdown .label { font-size: 12px; color: #6B7280; } .dark .countdown .label { color: #9CA3AF; } /* ---------- “Mubadara” section ---------- */ .center { text-align: center; } .icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); margin-bottom: .5rem; } .dark .icon-circle { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); } /* ---------- Why section + features grid ---------- */ .features { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .features { grid-template-columns: 1fr 1fr 1fr; } } .feature-card { border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--card-light); padding: 24px; display: grid; gap: 8px; } .dark .feature-card { background: var(--card-dark); border-color: var(--border-dark); } .feature-card .feat-icon { font-size: 32px; color: var(--primary); } .dark .feature-card .feat-icon { color: var(--accent); } .feature-card h3 { margin: 0; font-weight: 800; font-size: 18px; } .feature-card p { margin: 0; color: #6B7280; font-size: 14px; } .dark .feature-card p { color: #9CA3AF; } /* ---------- Past challenges ---------- */ .past-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .past-grid { grid-template-columns: 1fr 1fr; } } .past-card { border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--card-light); box-shadow: var(--shadow-sm); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; transition: box-shadow .2s ease; } .past-card:hover { box-shadow: var(--shadow-md); } .dark .past-card { background: var(--card-dark); border-color: var(--border-dark); } .past-card img { width: 100%; height: 192px; object-fit: cover; display: block; } .past-card .content { padding: 24px; } .past-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; } .past-card p { margin: 0; color: #6B7280; } .dark .past-card p { color: #9CA3AF; } .past-card .link { display: block; text-align: center; padding: 14px 16px; font-weight: 800; color: var(--primary); text-decoration: none; background: var(--bg-light); border-top: 1px solid var(--border-light); transition: background .2s ease; } .past-card .link:hover { background: color-mix(in srgb, var(--primary) 10%, var(--bg-light)); } .dark .past-card .link { color: var(--accent); background: var(--bg-dark); border-top-color: var(--border-dark); } .dark .past-card .link:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg-dark)); } /* ---------- Spacing helpers for sections ---------- */ .section-gap { margin-top: 40px; }