/* ========================================================== Shared design system (Bootstrap companion) - Keep overrides minimal to avoid breaking existing layout. - Prefer opt-in classes: .btn-primary-custom, .btn-outline-custom, .card-custom ========================================================== */ :root { /* ========================================================== Dark mode (default) — premium SaaS look Brand MUST be #ffc107 ========================================================== */ /* ========================================================== Theme tokens (required) ========================================================== */ --brand: #ffc107; --brand-hover: #e6ac00; --btn-text-on-brand: #000; --bg-main: #0f1115; --bg-surface: #161a22; --bg-surface-2: #1c2230; --bg-footer: #0b0e13; --border: rgba(255, 255, 255, 0.05); --text: #ffffff; --text-secondary: #b0b6c3; --text-muted: #8a90a0; --heading: #ffffff; --link: var(--brand); --link-hover: var(--brand-hover); --input-bg: #0f1115; --input-border: #2a2f3a; --focus-ring: 0 0 0 2px rgba(255, 193, 7, 0.25); /* Backward compatible aliases (used across existing CSS) */ --bg-card: var(--bg-surface); --bg-alt: var(--bg-surface-2); --border-subtle: var(--border); --text-main: var(--text); /* Shadows */ --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.40); --shadow-soft-hover: 0 14px 40px rgba(0, 0, 0, 0.55); /* Keep existing variable names (mapped) */ --color-primary: var(--brand); --color-primary-hover: var(--brand-hover); --color-secondary: var(--brand); --color-secondary-hover: var(--brand-hover); --color-white: #ffffff; --color-gray-900: #ffffff; --color-gray-800: #ffffff; --color-gray-700: var(--text-secondary); --color-gray-600: var(--text-muted); --color-gray-500: #6f7688; --color-gray-400: #3a4150; --color-gray-300: rgba(255, 255, 255, 0.12); --color-gray-200: rgba(255, 255, 255, 0.08); --color-gray-100: var(--bg-alt); /* Typography */ --font-family-base: "Cairo", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --line-height-body: 1.75; /* Type scale */ --font-size-body: 1rem; --font-size-h1: 2.5rem; --font-size-h2: 2rem; --font-size-h3: 1.75rem; --font-size-h4: 1.5rem; --font-size-h5: 1.25rem; --font-size-h6: 1rem; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Radius */ --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; /* Bootstrap variable overrides (Bootstrap 5) */ --bs-body-bg: var(--bg-main); --bs-body-color: var(--text); --bs-emphasis-color: var(--text); --bs-secondary-color: var(--text-secondary); --bs-tertiary-color: var(--text-muted); --bs-border-color: var(--border); --bs-link-color: var(--link); --bs-link-hover-color: var(--link-hover); --bs-primary: var(--brand); --bs-primary-rgb: 255, 193, 7; /* Map template "success" to brand */ --bs-success: var(--brand); --bs-success-rgb: 255, 193, 7; --bs-dark: var(--bg-footer); --bs-dark-rgb: 11, 14, 19; /* ========================================================== FolioOne template variables (override to brand + dark) ========================================================== */ --background-color: var(--bg-main); --surface-color: var(--bg-card); --default-color: var(--text); --heading-color: var(--heading); --accent-color: var(--brand); --contrast-color: var(--btn-text-on-brand); --nav-color: var(--text-secondary); --nav-hover-color: var(--brand); --nav-mobile-background-color: var(--bg-card); --nav-dropdown-background-color: var(--bg-card); --nav-dropdown-color: var(--text-secondary); --nav-dropdown-hover-color: var(--brand); } /* ========================================================== Light theme override - applied when ========================================================== */ [data-theme="light"] { --bg-main: #f7f8fa; --bg-surface: #ffffff; --bg-surface-2: #f1f3f6; --bg-footer: #0b1220; --border: rgba(17, 24, 39, 0.10); --text: #111827; --text-secondary: #374151; --text-muted: #4b5563; --heading: #0b1220; --link: #111827; --link-hover: var(--brand-hover); --input-bg: #ffffff; --input-border: rgba(17, 24, 39, 0.16); } [data-theme="dark"], [data-theme="light"] { /* Helps native form controls render correctly */ color-scheme: light dark; } /* FolioOne preset classes */ .light-background { --background-color: var(--bg-surface-2); --surface-color: var(--bg-surface); } .dark-background { --background-color: var(--bg-footer); --surface-color: var(--bg-card); --default-color: var(--text-main); --heading-color: var(--text-main); } /* Base helpers (minimal) */ body { font-family: var(--font-family-base); font-size: var(--font-size-body); line-height: var(--line-height-body); background: var(--bg-main); color: var(--text); } /* Small helpers used in migrated pages */ .text-accent { color: var(--brand) !important; } [dir="rtl"] body { font-family: "Cairo", var(--font-family-base); } [dir="ltr"] body { font-family: "Roboto", var(--font-family-base); } /* FolioOne font variables (make Arabic typography consistent) */ [dir="rtl"] { --default-font: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --heading-font: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --nav-font: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { color: var(--text-main); } a { color: var(--link); } a:hover { color: var(--link-hover); } /* Normalize common template backgrounds */ .bg-light { background-color: var(--bg-alt) !important; } .bg-dark { background-color: var(--bg-footer) !important; } .bg-black { background-color: var(--bg-footer) !important; } .bg-white { background-color: var(--bg-card) !important; } .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-dark { color: var(--text-main) !important; } /* Navbar */ .navbar.navbar-light { background: rgba(15, 17, 21, 0.85); border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(10px); } .navbar.navbar-light .navbar-toggler { border-color: var(--border-subtle); } .navbar.navbar-light .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.25); opacity: 0.95; } .navbar.navbar-light .navbar-nav .nav-link { color: var(--text-secondary); } .navbar.navbar-light .navbar-nav .nav-link:hover, .navbar.navbar-light .navbar-nav .nav-link.active { color: var(--brand); } /* Template "text-success" is used as brand accent */ .text-success { color: var(--brand) !important; } /* Bootstrap buttons used by template */ .btn-success { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-focus-shadow-rgb: 255, 193, 7; } .btn-outline-success { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: #000; --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-active-color: #000; --bs-btn-focus-shadow-rgb: 255, 193, 7; } /* Cards/containers */ .card, .modal-content, .dropdown-menu { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-subtle); } .card { border-radius: var(--radius-md); box-shadow: var(--shadow-soft); transition: transform 200ms ease, box-shadow 200ms ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-hover); } .border-light { border-color: var(--border-subtle) !important; } /* Forms */ .form-control, .form-select, .input-group-text { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); } .input-group-text { color: var(--text-secondary); } .form-control::placeholder { color: #6f7688; } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: var(--focus-ring); } .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); } /* Footer */ #tempaltemo_footer { background: var(--bg-footer); } /* FolioOne footer */ #footer.footer { background: var(--bg-footer); color: var(--text-muted); } #footer.footer a { color: var(--text); } #footer.footer a:hover { color: var(--brand); } /* RTL alignment fixes for template-specific class */ [dir="rtl"] .text-align-left { text-align: right !important; } /* Optional spacing utility (use when Bootstrap utilities are not enough) */ .py-section { padding-block: var(--space-7); } /* Buttons (opt-in) */ .btn-primary-custom { color: #000; background-color: var(--brand); border-color: var(--brand); } .btn-primary-custom:hover { color: #000; background-color: var(--brand-hover); border-color: var(--brand-hover); } .btn-primary-custom:focus, .btn-primary-custom:focus-visible { box-shadow: var(--focus-ring); } .btn-outline-custom { color: var(--brand); background-color: transparent; border-color: var(--brand); } .btn-outline-custom:hover { color: #000; background-color: var(--brand); border-color: var(--brand); } .btn-outline-custom:focus, .btn-outline-custom:focus-visible { box-shadow: var(--focus-ring); } /* Cards (opt-in) */ .card-custom { border-radius: var(--radius-md); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); background-color: var(--bg-card); } .card-custom:hover { box-shadow: var(--shadow-soft-hover); } .card-custom .card-img-top, .card-custom .card-img-bottom { border-radius: calc(var(--radius-md) - 1px); } /* ========================================================== Hero banners used on inner pages (about/gallery) ========================================================== */ .hero-banner { background: var(--bg-alt); } .hero-banner-title { color: var(--brand); } /* ========================================================== Homepage hero (carousel) ========================================================== */ .hero-title { font-weight: 800; line-height: 1.15; font-size: clamp(2rem, 3.2vw, 3.25rem); margin: 0; } .hero-subtitle { font-weight: 600; line-height: 1.5; font-size: clamp(1.1rem, 1.5vw, 1.5rem); color: var(--text-main); margin: 0; } .hero-lead { max-width: 56ch; line-height: 1.9; color: var(--text-secondary); margin: 0; margin-inline: auto; } .hero-content { text-align: center; } .hero-cta { display: grid; gap: var(--space-3); max-width: 26rem; margin-inline: auto; } .hero-cta .btn { width: 100%; } .hero-img { max-width: 520px; } @media (min-width: 992px) { [dir="rtl"] .hero-content { text-align: right; } [dir="ltr"] .hero-content { text-align: left; } [dir="rtl"] .hero-lead { margin-right: 0; margin-left: auto; } [dir="ltr"] .hero-lead { margin-left: 0; margin-right: auto; } .hero-cta { display: flex; align-items: center; max-width: none; margin-inline: 0; } [dir="rtl"] .hero-cta { justify-content: flex-end; } [dir="ltr"] .hero-cta { justify-content: flex-start; } .hero-cta .btn { width: auto; } } /* Hero image: بدون برواز (no frame / no border-radius, no shadow) */ .hero .hero-image .image-wrapper img { border-radius: 0; box-shadow: none; } .hero .hero-image .image-wrapper img:hover { transform: none; } /* About page profile photo: بدون برواز */ .about .profile-figure .profile-photo { border-radius: 0; box-shadow: none; } .about .profile-figure:hover .profile-photo { transform: none; } /* ========================================================== Homepage "Products" cards ========================================================== */ .product-card { transition: transform 180ms ease, box-shadow 180ms ease; } .product-card:hover { transform: translateY(-4px); } .product-card-img { height: clamp(180px, 22vw, 220px); object-fit: cover; } /* ========================================================== Success partners marquee ========================================================== */ .partners-marquee { position: relative; overflow: hidden; padding: var(--space-4) 0; background: var(--bg-alt); border-radius: var(--radius-md); } /* Soft edge fade */ .partners-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .partners-track { display: flex; align-items: center; gap: var(--space-6); width: max-content; padding-inline: var(--space-5); animation: partners-marquee var(--partners-duration, 36s) linear infinite; will-change: transform; } /* Pause on hover */ .partners-marquee:hover .partners-track { animation-play-state: paused; } /* RTL: reverse direction (still seamless with duplication) */ [dir="rtl"] .partners-track { animation-direction: reverse; } .partner-item { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-4); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); transition: transform 180ms ease, box-shadow 180ms ease; } .partner-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft-hover); } .partner-logo { height: 56px; width: auto; max-width: 180px; object-fit: contain; display: block; } @media (max-width: 576px) { .partners-marquee { padding: var(--space-3) 0; } .partners-track { gap: var(--space-4); padding-inline: var(--space-4); } .partner-logo { height: 40px; max-width: 140px; } } @keyframes partners-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================== Catalog UX helpers ========================================================== */ .code-badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; background: var(--bg-alt); border: 1px solid var(--border-subtle); color: var(--text-main); } .catalog-toast { position: fixed; z-index: 1090; inset-block-start: 1rem; inset-inline-end: 1rem; max-width: min(26rem, calc(100vw - 2rem)); padding: 0.65rem 0.9rem; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.78); color: var(--color-white); box-shadow: var(--shadow-soft); opacity: 0; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease; pointer-events: none; text-align: start; } [dir="rtl"] .catalog-toast { inset-inline-end: auto; inset-inline-start: 1rem; } .catalog-toast.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================== Order form page ========================================================== */ .form-section { border-radius: var(--radius-md); } .form-alert { margin-bottom: var(--space-4); } @media (max-width: 576px) { .order-submit { width: 100%; } } /* ========================================================== Gallery (filters + tiles) ========================================================== */ .gallery-filter-btn { border-radius: 999px !important; padding-inline: 1rem; } .gallery-filter-btn.active { background-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; color: #3d2817 !important; } .gallery-item { transition: opacity 180ms ease, transform 180ms ease; } .gallery-item.is-fading-out, .gallery-item.is-fading-in { opacity: 0; transform: translateY(6px); } .gallery-item[hidden] { display: none !important; } .gallery-tile { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); transition: transform 200ms ease, box-shadow 200ms ease; } .gallery-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-hover); } .gallery-img-wrap { aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: var(--bg-alt); } .gallery-img-wrap::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 250ms ease; pointer-events: none; } .gallery-tile:hover .gallery-img-wrap::after { background: rgba(0, 0, 0, 0.35); } .gallery-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 250ms ease; display: block; } .gallery-tile:hover .gallery-img { transform: scale(1.05); } .gallery-caption { padding: 0.85rem 1rem; font-weight: 700; font-size: 0.95rem; color: var(--text-main); } /* GLightbox (keep readable on dark UI) */ .glightbox-container .gslide-description { background: rgba(22, 26, 34, 0.94); border: 1px solid var(--border-subtle); border-radius: 10px; } .glightbox-container .gslide-title { color: var(--text-main); } .glightbox-container .gslide-desc { color: var(--text-secondary); } /* ========================================================== FolioOne migration helpers (RTL + brand + components) ========================================================== */ .lang-switch { padding: 0.25rem 0.6rem; border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-secondary) !important; } .lang-switch:hover { border-color: rgba(255, 193, 7, 0.35); color: var(--brand) !important; } /* Theme toggle button (navbar) */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease; margin-inline-start: 8px; } .theme-toggle-btn:hover { transform: translateY(-1px); border-color: rgba(255, 193, 7, 0.35); color: var(--brand); box-shadow: var(--shadow-soft); } .theme-toggle-btn:focus, .theme-toggle-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Buttons: enforce brand hover per spec */ .btn.btn-primary { color: #000; } .btn.btn-primary:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; color: #000 !important; } .btn.btn-outline:hover { background: var(--brand) !important; border-color: var(--brand) !important; color: #000 !important; } /* RTL nav alignment */ [dir="rtl"] #navmenu a { text-align: right; } [dir="rtl"] .navmenu .dropdown ul { left: auto; right: 0; } /* Contact map */ .map-container { height: 420px; width: 100%; border-radius: 16px; border: 1px solid var(--border-subtle); } .contact-map-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-soft); } .map-hint { margin-top: 10px; font-size: 0.95rem; } .map-hint a { color: var(--brand); } /* Contact info box (جنب الخريطة) — ألوان النص من الثيم لظهور صحيح في الدارك مود */ .contact .info-box { background-color: var(--bg-surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); } .contact .info-box h3 { color: var(--heading); } .contact .info-box > p { color: var(--text-secondary); } .contact .info-box a { color: var(--link); } .contact .info-box a:hover { color: var(--link-hover); } .contact .info-item .icon-box i { color: var(--brand); } .contact .info-item .content h4 { color: var(--heading); } .contact .info-item .content p, .contact .info-item .content a { color: var(--text); } .contact .info-item .content a:hover { color: var(--link-hover); } /* Catalog cards */ .wpc-card-shell { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; box-shadow: var(--shadow-soft); overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease; } .wpc-card-shell:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-hover); } .wpc-swatch { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); } .wpc-card-body { padding: 12px 14px; border-top: 1px solid var(--border-subtle); } .wpc-card-actions { padding: 0 14px 14px; } .wpc-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-size: 0.75rem; font-weight: 700; } .wpc-surface { background: var(--bg-alt); border: 1px solid var(--border-subtle); } /* Order form */ .form-section { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-soft); } .form-alert { margin-bottom: 1rem; } /* Multi-item order blocks */ .order-item { background: var(--bg-alt); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 14px; } .order-item .badge.text-bg-dark { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--text-main) !important; border: 1px solid var(--border-subtle); } /* Order item: door size type (standard/custom) and frame size dropdown */ .order-item .item-door-size-type-group { gap: 1rem; } .order-item .item-door-standard-wrap, .order-item .item-door-custom-wrap { transition: opacity 0.2s ease; } /* Product picker (order form) */ .product-picker { position: relative; width: 100%; } .product-picker-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; padding: 0.375rem 0.75rem; font-size: 1rem; font-family: inherit; color: var(--text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); cursor: pointer; text-align: start; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .product-picker-toggle:hover { border-color: rgba(255, 193, 7, 0.4); } .product-picker-toggle:focus, .product-picker-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .product-picker.is-invalid .product-picker-toggle { border-color: var(--bs-danger); } .product-picker .selected-product-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-picker .picker-caret { flex-shrink: 0; margin-inline-start: 0.5rem; opacity: 0.8; } .product-picker-dropdown { position: absolute; z-index: 1050; top: calc(100% + 4px); inset-inline-start: 0; inset-inline-end: 0; max-height: 280px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); display: none; } .product-picker-dropdown.open { display: block; } .product-picker-list { padding: 0.25rem; } .product-picker-item { display: flex; align-items: center; gap: 12px; padding: 0.5rem 0.75rem; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s ease; } .product-picker-item:hover, .product-picker-item:focus { background: rgba(255, 193, 7, 0.12); outline: none; } .product-picker-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .product-picker-item-text { flex: 1; min-width: 0; } .product-picker-code { font-weight: 700; color: var(--text); } .product-picker-name { font-size: 0.875rem; color: var(--text-muted); margin-top: 2px; } .product-picker .product-code-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .product-picker.is-invalid + .invalid-feedback { display: block; } /* Header logo: واضح وكبير (ضعف الحجم تقريباً) */ #header .logo img { height: 112px; max-height: 112px; width: auto; object-fit: contain; } @media (max-width: 991px) { #header .logo img { height: 88px; max-height: 88px; } } @media (max-width: 576px) { #header .logo img { height: 72px; max-height: 72px; } }