/* ========================================================== Reusable Components — buttons, cards, tags, alerts, forms ========================================================== */ /* ---------------------------------------------------------- Design Tokens — mirrors includes/tailwind_config.php so the plain-CSS rules below (which can't read Tailwind's config) stay in sync with the single source of truth. ---------------------------------------------------------- */ :root { /* قنوات RGB (تُستهلَك في tailwind_config.php بصيغة rgb(var(--x) / )) */ --background-rgb: 247 249 252; --surface-rgb: 255 255 255; --surface-container-lowest-rgb: 250 252 255; --surface-container-low-rgb: 241 245 251; --surface-container-rgb: 229 236 246; --surface-container-high-rgb: 214 226 241; --surface-container-highest-rgb: 195 210 228; --card-bg-rgb: 255 255 255; --text-primary-rgb: 15 23 42; --text-secondary-rgb: 74 85 104; --text-muted-rgb: 107 119 140; --primary-rgb: 193 12 36; --primary-container-rgb: 229 9 20; --on-primary-rgb: 255 255 255; --border-muted-rgb: 217 224 233; --success-rgb: 34 197 94; --warning-rgb: 245 158 11; --error-rgb: 222 63 67; /* نسخ hex مشتقّة (تُستهلَك في قواعد CSS العادية أدناه) */ --background: rgb(var(--background-rgb)); --surface: rgb(var(--surface-rgb)); --surface-container-lowest: rgb(var(--surface-container-lowest-rgb)); --surface-container-low: rgb(var(--surface-container-low-rgb)); --surface-container: rgb(var(--surface-container-rgb)); --surface-container-high: rgb(var(--surface-container-high-rgb)); --surface-container-highest: rgb(var(--surface-container-highest-rgb)); --card-bg: rgb(var(--card-bg-rgb)); --text-primary: rgb(var(--text-primary-rgb)); --text-secondary: rgb(var(--text-secondary-rgb)); --text-muted: rgb(var(--text-muted-rgb)); --primary: rgb(var(--primary-rgb)); --primary-container: rgb(var(--primary-container-rgb)); --on-primary: rgb(var(--on-primary-rgb)); --tertiary: #7DA8FF; --border-muted: rgb(var(--border-muted-rgb)); --success: rgb(var(--success-rgb)); --warning: rgb(var(--warning-rgb)); --error: rgb(var(--error-rgb)); --radius: 6px; --radius-lg: 12px; --radius-xl: 18px; --radius-full: 9999px; --transition: 220ms cubic-bezier(.3,.7,.4,1); --ease-standard: cubic-bezier(.3,.7,.4,1); --ease-out-ios: cubic-bezier(.16,1,.3,1); --ease-in-ios: cubic-bezier(.4,0,1,1); --shadow-elevation-1: 0 12px 30px rgba(15,23,42,.08); --shadow-lg: 0 20px 60px rgba(15,23,42,.1); } /* ---------------------------------------------------------- Light mode palette (Part 6). Applied when carries the `.light` class (toggled + persisted via assets/js/main.js). Only the color channels change; every component reads them via the CSS variables above, so nothing else needs to be rebuilt. Brand red + status colors stay identical for brand continuity. ---------------------------------------------------------- */ html.light { --background-rgb: 247 249 252; --surface-rgb: 255 255 255; --surface-container-lowest-rgb: 250 252 255; --surface-container-low-rgb: 241 245 251; --surface-container-rgb: 229 236 246; --surface-container-high-rgb: 214 226 241; --surface-container-highest-rgb: 195 210 228; --card-bg-rgb: 255 255 255; --text-primary-rgb: 15 23 42; --text-secondary-rgb: 74 85 104; --text-muted-rgb: 107 119 140; --primary-rgb: 193 12 36; --on-primary-rgb: 255 255 255; --border-muted-rgb: 217 224 233; --shadow-elevation-1: 0 12px 26px rgba(15,23,42,.08); --shadow-lg: 0 18px 50px rgba(15,23,42,.1); } html.dark { --background-rgb: 18 21 33; --surface-rgb: 22 27 42; --surface-container-lowest-rgb: 27 32 51; --surface-container-low-rgb: 33 40 63; --surface-container-rgb: 43 52 78; --surface-container-high-rgb: 58 72 103; --surface-container-highest-rgb: 74 95 129; --card-bg-rgb: 22 27 42; --text-primary-rgb: 241 245 255; --text-secondary-rgb: 173 188 215; --text-muted-rgb: 134 150 178; --primary-rgb: 255 114 118; --on-primary-rgb: 255 255 255; --border-muted-rgb: 48 62 86; --shadow-elevation-1: 0 12px 30px rgba(0,0,0,.42); --shadow-lg: 0 20px 60px rgba(0,0,0,.44); } /* Smooth, GPU-cheap cross-fade between themes (colors only). */ html.theme-ready body, html.theme-ready body * { transition: background-color .35s var(--ease-standard), border-color .35s var(--ease-standard), color .35s var(--ease-standard); } @media (prefers-reduced-motion: reduce) { html.theme-ready body, html.theme-ready body * { transition: none !important; } } /* Smooth, GPU-cheap cross-fade between themes (colors only). */ html.theme-ready body, html.theme-ready body * { transition: background-color .35s var(--ease-standard), border-color .35s var(--ease-standard), color .35s var(--ease-standard); } @media (prefers-reduced-motion: reduce) { html.theme-ready body, html.theme-ready body * { transition: none !important; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-lg); font-family: inherit; font-weight: 600; font-size: .9rem; border: 1px solid transparent; cursor: pointer; user-select: none; transition: transform var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); text-decoration: none; } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 12px 24px rgba(193,12,36,.18); } .btn-primary:hover { background: color-mix(in srgb, var(--primary) 88%, #fff 12%); color: var(--on-primary); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-muted); } .btn-ghost:hover { background: var(--surface-container); color: var(--primary); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary-container); color: var(--on-primary); border-color: var(--primary-container); } .btn-sm { padding: 7px 14px; font-size: .82rem; } .btn-lg { padding: 15px 26px; font-size: 1rem; } .btn-block { display: flex; width: 100%; } /* ---------------------------------------------------------- Register / primary auth submit button (register.php). Root cause of the old layout/spacing issues: the button was a raw utility stack (py-3 rounded-full font-bold) with no icon alignment, uneven optical padding and only an opacity hover — inconsistent with the design-system .btn family. This unifies it: proper flex alignment, balanced padding, clear typography, a lift + glow hover and an active press, fully responsive and RTL-safe (logical gap, no directional margins). ---------------------------------------------------------- */ .btn-register { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 24px; border: 1px solid transparent; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1; letter-spacing: .15px; cursor: pointer; user-select: none; box-shadow: 0 12px 30px rgba(193,12,36,.16); transition: transform .25s var(--ease-out-ios), box-shadow .25s var(--ease-out-ios), background-color .2s ease; } .btn-register:hover { background: color-mix(in srgb, var(--primary) 88%, #fff 12%); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(193,12,36,.22); } .btn-register:active { transform: translateY(0) scale(.99); box-shadow: 0 6px 18px rgba(193,12,36,.18); } .btn-register:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .btn-register .material-symbols-outlined { font-size: 20px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .btn-register { transition: background-color .2s ease; } .btn-register:hover, .btn-register:active { transform: none; } } /* ---------------------------------------------------------- Nav auth buttons (login / register) — includes/site_nav.php. Root cause of the visual imbalance: the two pills used ad-hoc utility classes with different content widths, so "حساب جديد" wrapped to two lines while "دخول" stayed on one — mismatched heights. These share one base: identical height, padding, radius, single-line (no wrap), centered icon+label, with matching hover / active / focus states. RTL-safe (logical gap). ---------------------------------------------------------- */ .nav-auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-full); font-family: inherit; font-weight: 700; font-size: .9rem; line-height: 1; white-space: nowrap; text-decoration: none; transition: transform .2s var(--ease-out-ios), background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } .nav-auth-btn .material-symbols-outlined { font-size: 18px; line-height: 1; } .nav-auth-btn--solid { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 24px rgba(193,12,36,.18); } .nav-auth-btn--solid:hover { background: color-mix(in srgb, var(--primary) 88%, #fff 12%); color: var(--on-primary); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(193,12,36,.22); } .nav-auth-btn--outline { background: var(--surface); color: var(--text-primary); border-color: var(--border-muted); } .nav-auth-btn--outline:hover { background: var(--surface-container-low); border-color: var(--primary); color: var(--primary); transform: translateY(-1px); } .nav-auth-btn:active { transform: translateY(0) scale(.97); } .nav-auth-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .nav-auth-btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .nav-auth-btn:hover, .nav-auth-btn:active { transform: none; } } .site-brand { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 9999px; background: transparent; color: #1d4ed8; } .site-brand__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: transparent; } .site-brand__title { font-weight: 800; font-size: 1rem; line-height: 1.1; color: #1d4ed8; white-space: nowrap; } .site-brand-footer { color: #1d4ed8; } html.dark .site-brand { background: transparent; color: #93c5fd; } html.dark .site-brand__title, html.dark .site-brand-footer { color: #93c5fd; } /* Tag / Chip */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--surface-container); color: var(--text-secondary); font-size: .75rem; font-weight: 500; } .tag-primary { background: rgba(229,9,20,.12); color: var(--primary); } /* Article Card */ .article-card { background: var(--card-bg); border: 1px solid var(--border-muted); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), border-color var(--transition); } .article-card:hover { transform: translateY(-4px); border-color: rgba(255,180,170,.25); } .article-card .thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-container); } .article-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .article-card:hover .thumb img { transform: scale(1.05); } .article-card .thumb .tag { position: absolute; top: 12px; inset-inline-start: 12px; backdrop-filter: blur(8px); background: rgba(0,0,0,.55); color: #fff; } .article-card .body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .article-card h3 { font-size: 1.1rem; line-height: 1.4; margin: 0; } .article-card h3 a { color: var(--text-primary); } .article-card h3 a:hover { color: var(--primary); } .article-card .excerpt { color: var(--text-secondary); font-size: .92rem; margin: 0; flex: 1; } .article-card .meta { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: .8rem; padding-top: 8px; border-top: 1px solid var(--border-muted); } .article-card .meta .material-symbols-outlined { font-size: 16px; } /* Hero Article */ .hero-article { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 460px; display: grid; align-items: end; background: var(--surface-container); } .hero-article img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; } .hero-article:hover img { transform: scale(1.03); } .hero-article::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%); } .hero-article .content { position: relative; padding: 40px; max-width: 900px; display: flex; flex-direction: column; gap: 14px; } .hero-article h1 { font-size: clamp(1.6rem, 3.4vw, 2.8rem); color: #fff; margin: 0; line-height: 1.2; } .hero-article p { color: rgba(255,255,255,.85); margin: 0; font-size: 1.05rem; } .hero-article .meta { color: rgba(255,255,255,.75); font-size: .85rem; display: flex; gap: 14px; } /* Grid of cards */ .cards-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* Sidebar widgets */ .widget { background: var(--card-bg); border: 1px solid var(--border-muted); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 24px; } .widget h4 { font-size: 1rem; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-muted); } .widget ol { padding: 0; margin: 0; list-style: none; counter-reset: w; } .widget li { counter-increment: w; position: relative; padding: 10px 0 10px 0; padding-inline-start: 38px; border-bottom: 1px dashed var(--border-muted); } .widget li:last-child { border-bottom: 0; } .widget li::before { content: counter(w, decimal); position: absolute; inset-inline-start: 0; top: 10px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--surface-container); color: var(--primary); border-radius: var(--radius-lg); font-weight: 700; font-size: .85rem; } .widget li a { color: var(--text-primary); font-size: .92rem; line-height: 1.5; } .widget li a:hover { color: var(--primary); } .widget li small { display: block; color: var(--text-muted); margin-top: 4px; } /* Forms */ .form-row { display: grid; gap: 6px; margin-bottom: 18px; } .form-row label { font-size: .9rem; color: var(--text-secondary); font-weight: 500; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-container); border: 1px solid var(--border-muted); color: var(--text-primary); font-family: inherit; font-size: .95rem; outline: none; transition: border-color var(--transition); } .form-row textarea { min-height: 140px; resize: vertical; line-height: 1.7; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--primary); } .form-row .hint { font-size: .8rem; color: var(--text-muted); } /* ========================================================== Toast Notifications — unified feedback system Renders as a floating banner at the top of the viewport, iOS-notification style. Server-rendered via ui_alert()/ flash_render() (includes/ui_helpers.php) or created on the fly via window.AppToast.show() (assets/js/main.js). ========================================================== */ .app-toast-viewport { position: fixed; top: max(12px, env(safe-area-inset-top)); inset-inline: 0; margin-inline: auto; z-index: 1100; display: flex; flex-direction: column; gap: 10px; width: min(92vw, 420px); padding: 0 4px; pointer-events: none; } .app-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 10px; background: rgba(var(--surface-rgb), .98); border: 1px solid var(--border-muted); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transform: translateY(-16px) scale(.97); transition: transform .38s var(--ease-out-ios), opacity .38s var(--ease-out-ios); will-change: transform, opacity; } .app-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); } .app-toast.is-leaving { opacity: 0; transform: translateY(-10px) scale(.98); transition-duration: .26s; transition-timing-function: var(--ease-in-ios); } .app-toast-success { border-color: rgba(34,197,94,.35); } .app-toast-error { border-color: rgba(239,68,68,.4); } .app-toast-warning { border-color: rgba(245,158,11,.35); } .app-toast-info { border-color: rgba(167,200,255,.3); } .app-toast-icon { font-size: 22px; line-height: 1; margin-top: 1px; flex-shrink: 0; } .app-toast-success .app-toast-icon { color: var(--success); } .app-toast-error .app-toast-icon { color: var(--error); } .app-toast-warning .app-toast-icon { color: var(--warning); } .app-toast-info .app-toast-icon { color: var(--tertiary); } .app-toast-msg { flex: 1; margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-primary); } .app-toast-close { flex-shrink: 0; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-full); transition: background .15s ease, color .15s ease; margin: -4px; } .app-toast-close:hover, .app-toast-close:focus-visible { background: var(--surface-container-high); color: var(--text-primary); } .app-toast-close .material-symbols-outlined { font-size: 16px; } /* ========================================================== Confirm Modal — replaces native confirm() for delete/leave- page style prompts. Triggered via data-confirm="..." on any , submit