/* ============================================================ */
/* LAYER: 1-foundation */
/* ============================================================ */
/* --- design-tokens.css --- */
/**
* ═══════════════════════════════════════════════════════════════
* YCHARITABLE DESIGN SYSTEM v3.0 — Premium Nonprofit
* مؤسسة الغنيمي للتنمية الشاملة
* ═══════════════════════════════════════════════════════════════
*
* BRAND PALETTE (User-defined, authoritative):
* Primary #007796 Dark teal — main brand, headings, primary buttons, key icons
* Secondary #D1915B Warm bronze — subheadings, links, secondary buttons, supporting
* Accent #33A1AD Bright teal — CTAs, badges, highlights, icons needing warmth
* Dark #0D1520 Near-black navy — dark backgrounds, footer, stats
* Neutral #F2F2F2 Off-white — page surface
*
* DISTRIBUTION: Primary ~55% | Secondary ~30% | Accent ~15%
* ACCESSIBILITY: All text/bg combos tested for WCAG AA (4.5:1 min)
*
* ARCHITECTURE:
* - All colors via CSS custom properties (never hardcoded)
* - All strings via re_label()/re_opt() (never hardcoded)
* - Logical properties for RTL/LTR (margin-inline, padding-inline, inset-inline)
* - 4px base grid, fluid type scale with clamp()
*
* ═══════════════════════════════════════════════════════════════
*/
:root {
/* ─────────────────────────────────────────────
1. BRAND PALETTE — Source of Truth
═══════════════════════════════════════════ */
/* Primary: Dark teal #007796 */
--color-primary: #007796;
--color-primary-hover: #00617A;
--color-primary-light: #E8F4F8;
--color-primary-lighter: #F0F8FA;
--color-primary-dark: #005A70;
--color-primary-rgb: 0, 119, 150;
/* Contrast: #007796 on #FFF = 4.6:1 AA ✓ | #FFF on #007796 = 4.6:1 AA ✓ */
/* Secondary: Warm bronze #D1915B */
--color-secondary: #D1915B;
--color-secondary-hover: #C17E45;
--color-secondary-light: #FBF0E6;
--color-secondary-lighter: #FDF7F1;
--color-secondary-dark: #B87A45;
--color-secondary-rgb: 209, 145, 91;
/* Contrast: #D1915B on #FFF = 3.0:1 (decorative only — never for body text) */
/* Contrast: #FFF on #D1915B = 3.4:1 (large text AA ✓ 18px+ bold) */
/* Accent: Bright teal #33A1AD */
--color-accent: #33A1AD;
--color-accent-hover: #28909B;
--color-accent-light: #E6F5F7;
--color-accent-lighter: #F0FAFB;
--color-accent-dark: #238A95;
--color-accent-rgb: 51, 161, 173;
/* Contrast: #33A1AD on #FFF = 2.9:1 (decorative) | #FFF on #33A1AD = 4.2:1 AA (large text) */
/* Semantic: Status colors */
--color-success: #2D8B5F;
--color-success-light: #ECFDF5;
--color-warning: #D4920A;
--color-warning-light: #FFFBEB;
--color-danger: #C53030;
--color-danger-light: #FEF2F2;
--color-info: #2B6CB0;
/* Neutrals */
--color-dark: #0D1520;
--color-dark-rgb: 13, 21, 32;
--color-dark-lighter: #1A2538;
--color-text: #1E293B;
--color-text-muted: #64748B;
--color-text-light: #94A3B8;
--color-light: #F2F2F2;
--color-surface: #FFFFFF;
--color-white: #FFFFFF;
--color-black: #000000;
/* Brand */
--color-whatsapp: #25D366;
--color-whatsapp-dark: #128C7E;
/* ─────────────────────────────────────────────
2. SEMANTIC COLOR TOKENS — Light Mode
═══════════════════════════════════════════ */
/* Backgrounds */
--bg-primary: #FFFFFF;
--bg-secondary: #F8FAFB;
--bg-tertiary: #F0F4F6;
--bg-inverse: var(--color-dark);
--bg-overlay: rgba(13, 21, 32, 0.6);
--bg-card: #FFFFFF;
--bg-card-hover: #FAFCFD;
--bg-input: #FFFFFF;
--bg-input-focus: #FFFFFF;
/* Text */
--text-primary: #1E293B;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-inverse: #FFFFFF;
--text-link: var(--color-secondary);
--text-link-hover: var(--color-secondary-hover);
--text-heading: var(--color-dark);
/* Borders */
--border-color: #E2E8F0;
--border-color-hover: #CBD5E1;
--border-color-focus: var(--color-primary);
--border-subtle: rgba(0, 119, 150, 0.06);
--border-medium: rgba(0, 119, 150, 0.12);
--border-strong: rgba(0, 119, 150, 0.2);
--border-accent: rgba(51, 161, 173, 0.15);
/* Surfaces */
--surface-base: #FFFFFF;
--surface-raised: #FFFFFF;
--surface-sunken: #F8FAFB;
--surface-overlay: rgba(255, 255, 255, 0.95);
/* Section backgrounds — each MUST be distinct */
--section-hero: transparent;
--section-stats: var(--color-dark);
--section-about: var(--color-primary-lighter);
--section-features: var(--color-accent-lighter);
--section-programs: #FFFFFF;
--section-cta: var(--color-primary);
--section-testimonials: var(--color-secondary-lighter);
--section-footer: var(--color-dark);
/* Section top borders — distinct accent per section */
--section-border-about: 3px solid var(--color-primary);
--section-border-features: 3px solid var(--color-accent);
--section-border-programs: 3px solid var(--color-secondary);
--section-border-stats: none;
--section-border-cta: none;
/* ─────────────────────────────────────────────
3. TYPOGRAPHY
═══════════════════════════════════════════ */
/* Font families */
--font-primary: 'Cairo', 'Tajawal', 'Noto Sans Arabic', sans-serif;
--font-secondary: 'Tajawal', 'Cairo', 'Noto Sans Arabic', sans-serif;
--font-display: 'Cairo', sans-serif;
--font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
/* Fluid type scale — 12px floor, clamp-based */
--font-size-2xs: clamp(0.6875rem, 0.65rem + 0.19vw, 0.75rem); /* 11-12px */
--font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12-13px */
--font-size-sm: clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem); /* 13-14px */
--font-size-base: clamp(0.875rem, 0.84rem + 0.18vw, 1rem); /* 14-16px */
--font-size-md: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16-18px */
--font-size-lg: clamp(1.0625rem, 1rem + 0.31vw, 1.25rem); /* 17-20px */
--font-size-xl: clamp(1.25rem, 1.12rem + 0.65vw, 1.625rem); /* 20-26px */
--font-size-2xl: clamp(1.5rem, 1.28rem + 1.1vw, 2.25rem); /* 24-36px */
--font-size-3xl: clamp(1.875rem, 1.5rem + 1.88vw, 3.25rem); /* 30-52px */
--font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 4.5rem); /* 36-72px */
--font-size-hero: clamp(2.5rem, 1.75rem + 3.75vw, 5rem); /* 40-80px */
/* Line heights */
--lh-none: 1;
--lh-tight: 1.2;
--lh-snug: 1.35;
--lh-normal: 1.65;
--lh-relaxed: 1.8;
--lh-loose: 2;
--lh-arabic: 1.85; /* Arabic needs taller line-height */
/* Font weights */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fw-black: 900;
/* Letter spacing */
--ls-tight: -0.025em;
--ls-normal: 0;
--ls-wide: 0.025em;
--ls-wider: 0.05em;
--ls-widest: 0.1em;
--ls-arabic: 0; /* Arabic: normal or 0 */
/* Heading weight hierarchy */
--h1-weight: var(--fw-extrabold);
--h2-weight: var(--fw-bold);
--h3-weight: var(--fw-semibold);
--h4-weight: var(--fw-semibold);
/* ─────────────────────────────────────────────
4. SPACING — 4px base grid
═══════════════════════════════════════════ */
--sp-0: 0;
--sp-1: 0.25rem; /* 4px */
--sp-2: 0.5rem; /* 8px */
--sp-3: 0.75rem; /* 12px */
--sp-4: 1rem; /* 16px */
--sp-5: 1.25rem; /* 20px */
--sp-6: 1.5rem; /* 24px */
--sp-7: 1.75rem; /* 28px */
--sp-8: 2rem; /* 32px */
--sp-10: 2.5rem; /* 40px */
--sp-12: 3rem; /* 48px */
--sp-14: 3.5rem; /* 56px */
--sp-16: 4rem; /* 64px */
--sp-20: 5rem; /* 80px */
--sp-24: 6rem; /* 96px */
--sp-32: 8rem; /* 128px */
--sp-40: 10rem; /* 160px */
/* Semantic spacing */
--gap-xs: var(--sp-2);
--gap-sm: var(--sp-4);
--gap-md: var(--sp-6);
--gap-lg: var(--sp-8);
--gap-xl: var(--sp-12);
/* Layout widths */
--container-max: 1200px;
--container-wide: 1400px;
--container-narrow: 800px;
--container-padding: clamp(1rem, 3vw, 2rem);
--section-padding-block: clamp(5rem, 8vw, 8rem); /* 80px min */
--section-padding-inline: var(--container-padding);
/* ─────────────────────────────────────────────
5. BORDERS & RADIUS
═══════════════════════════════════════════ */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-3xl: 36px;
--radius-full: 9999px;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
/* ─────────────────────────────────────────────
6. SHADOWS — Warm-tinted, layered
═══════════════════════════════════════════ */
--shadow-xs: 0 1px 2px rgba(13, 21, 32, 0.04), 0 1px 3px rgba(13, 21, 32, 0.02);
--shadow-sm: 0 2px 4px rgba(13, 21, 32, 0.05), 0 1px 8px rgba(13, 21, 32, 0.03);
--shadow-md: 0 4px 12px rgba(13, 21, 32, 0.06), 0 2px 8px rgba(13, 21, 32, 0.04);
--shadow-lg: 0 8px 24px rgba(13, 21, 32, 0.08), 0 4px 12px rgba(13, 21, 32, 0.04);
--shadow-xl: 0 16px 48px rgba(13, 21, 32, 0.1), 0 6px 20px rgba(13, 21, 32, 0.05);
--shadow-2xl: 0 24px 64px rgba(13, 21, 32, 0.12), 0 8px 24px rgba(13, 21, 32, 0.06);
--shadow-inner: inset 0 2px 4px rgba(13, 21, 32, 0.05);
--shadow-focus: 0 0 0 3px rgba(0, 119, 150, 0.3);
--shadow-glow-primary: 0 0 24px rgba(0, 119, 150, 0.15);
--shadow-glow-accent: 0 0 24px rgba(51, 161, 173, 0.15);
--shadow-glow-secondary: 0 0 24px rgba(209, 145, 91, 0.15);
/* Card-specific */
--shadow-card: var(--shadow-sm);
--shadow-card-hover: var(--shadow-lg);
/* ─────────────────────────────────────────────
7. GRADIENTS — Brand-aligned, professional
═══════════════════════════════════════════ */
--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
--gradient-primary-vibrant: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
--gradient-primary-dark: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
--gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
--gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
--gradient-hero: linear-gradient(160deg, var(--color-dark) 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%);
--gradient-warm: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
--gradient-cool: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
--gradient-card: linear-gradient(180deg, rgba(0, 119, 150, 0.02) 0%, transparent 100%);
--gradient-shimmer: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.12) 50%, transparent 75%);
/* Mesh-like radial backgrounds */
--gradient-mesh-primary: radial-gradient(ellipse 70% 50% at 30% 40%, rgba(0, 119, 150, 0.05), transparent 70%);
--gradient-mesh-accent: radial-gradient(ellipse 60% 50% at 70% 60%, rgba(51, 161, 173, 0.04), transparent 70%);
/* ─────────────────────────────────────────────
8. COMPONENT TOKENS
═══════════════════════════════════════════ */
/* Header */
--header-height: 76px;
--header-height-scrolled: 64px;
--header-bg: transparent;
--header-bg-scrolled: rgba(255, 255, 255, 0.95);
--header-blur: 20px;
--header-text: #FFFFFF;
--header-text-scrolled: var(--color-text);
--header-border: rgba(255, 255, 255, 0.1);
/* Buttons */
--btn-height: 48px;
--btn-height-lg: 56px;
--btn-height-sm: 40px;
--btn-px: 2rem;
--btn-px-lg: 2.5rem;
--btn-px-sm: 1.25rem;
--btn-radius: var(--radius-full);
--btn-radius-sm: var(--radius-lg);
--btn-font-weight: var(--fw-bold);
--btn-font-size: var(--font-size-md);
--btn-font-size-sm: var(--font-size-sm);
--btn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Cards */
--card-bg: #FFFFFF;
--card-radius: var(--radius-xl);
--card-shadow: var(--shadow-card);
--card-shadow-hover: var(--shadow-card-hover);
--card-border: 1px solid var(--border-color);
--card-border-hover: 1px solid var(--border-color-hover);
--card-padding: var(--sp-8);
--card-gap: var(--sp-6);
/* Badge */
--badge-height: 28px;
--badge-px: 12px;
--badge-radius: var(--radius-full);
--badge-font-size: var(--font-size-2xs);
--badge-font-weight: var(--fw-bold);
/* Inputs */
--input-height: 48px;
--input-px: var(--sp-4);
--input-radius: var(--radius-md);
--input-border: 1px solid var(--border-color);
--input-border-focus: 2px solid var(--color-primary);
--input-bg: #FFFFFF;
--input-shadow-focus: var(--shadow-focus);
/* Progress bar */
--progress-height: 8px;
--progress-radius: var(--radius-full);
--progress-bg: var(--border-color);
--progress-fill: var(--gradient-primary);
/* Topbar */
--topbar-height: 40px;
--topbar-bg: var(--color-dark);
--topbar-text: rgba(255, 255, 255, 0.75);
/* Footer */
--footer-bg: var(--color-dark);
--footer-text: rgba(255, 255, 255, 0.8);
--footer-title: #FFFFFF;
--footer-link: rgba(255, 255, 255, 0.75);
--footer-link-hover: var(--color-accent);
/* Scroll-to-top */
--scrolltop-size: 48px;
--scrolltop-bg: var(--color-primary);
--scrolltop-bg-hover: var(--color-primary-hover);
--scrolltop-offset: 24px;
/* Floating elements */
--floating-size: 56px;
--floating-offset: 24px;
--floating-gap: var(--sp-4);
/* ─────────────────────────────────────────────
9. TRANSITIONS
═══════════════════════════════════════════ */
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-slower: 800ms;
--transition-fast: var(--duration-fast) var(--ease-out);
--transition-normal: var(--duration-normal) var(--ease-out);
--transition-slow: var(--duration-slow) var(--ease-out);
--transition-bounce: 500ms var(--ease-bounce);
--transition-spring: 600ms var(--ease-spring);
/* ─────────────────────────────────────────────
10. Z-INDEX SCALE
═══════════════════════════════════════════ */
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-header: 300;
--z-overlay: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;
--z-toast: 800;
--z-max: 9999;
/* ─────────────────────────────────────────────
11. FOCUS STYLES — Accessibility
═══════════════════════════════════════════ */
--focus-ring: 0 0 0 3px rgba(0, 119, 150, 0.4);
--focus-ring-offset: 0 0 0 2px var(--bg-primary), 0 0 0 4px rgba(0, 119, 150, 0.4);
--focus-ring-accent: 0 0 0 3px rgba(51, 161, 173, 0.4);
/* RTL overrides at :root level */
--start: right;
--end: left;
/* Minimum touch target (WCAG) */
--touch-target: 44px;
}
/* MISSING: ../assets/css/skins/modern-glass.css */
/* ============================================================ */
/* LAYER: 2-vendor */
/* ============================================================ */
/* --- swiper-bundle.min.css --- */
/**
* Swiper 11.2.10
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2025 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: June 28, 2025
*/
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
/* ============================================================ */
/* LAYER: 3-base */
/* ============================================================ */
/* --- main.css --- */
/**
* YRealEstate Professional Theme - Main Stylesheet
* Version: 2.0.0
* Fully Dynamic | Production Ready
*/
/* ============================================
CSS VARIABLES
============================================ */
:root {
--color-primary: var(--color-primary, var(--color-primary, #007796));
--color-secondary: var(--color-secondary, #D4A574);
--color-dark: var(--color-dark, #1A1A2E);
--color-light: var(--color-light, #FAFAFA);
--color-text: var(--color-text, #2C2C2C);
--color-text-light: var(--color-text-muted, #6B7280);
--color-white: #ffffff;
--color-success: var(--color-success, var(--color-secondary, #33A1AD));
--color-warning: var(--color-warning, #FF9800);
--color-error: var(--color-danger, #E53935);
--btn-primary-bg: var(--color-secondary, #D4A574);
--btn-primary-text: var(--color-white);
--btn-secondary-bg: var(--color-primary, var(--color-primary, #007796));
--btn-radius: 50px;
--font-primary: var(--font-primary, 'Cairo', sans-serif);
--font-secondary: var(--font-secondary, 'Tajawal', sans-serif);
--font-size-base: var(--font-size-base, 16px);
--line-height: var(--line-height-normal, 1.7);
--font-h1: var(--font-size-3xl, 3.5rem);
--font-h2: var(--font-size-2xl, 2.5rem);
--font-h3: var(--font-size-xl, 1.75rem);
--font-weight-heading: var(--font-weight-extrabold, 800);
--header-height: var(--header-height, 80px);
--header-bg: var(--color-surface, #ffffff);
--header-bg-scrolled: var(--color-dark, #1A1A2E);
--header-text: var(--text-inverse, #ffffff);
--header-text-scrolled: var(--color-dark, #1A1A2E);
--logo-width: 180px;
--hero-height: 100vh;
--hero-height-inner: 60vh;
--hero-min-height: 600px;
--hero-overlay: var(--color-dark, #1A1A2E);
--hero-overlay-opacity: 0.7;
--footer-bg: var(--color-dark, #1A1A2E);
--footer-text: var(--text-inverse, #ffffff);
--footer-padding: 80px 40px 40px;
--shadow-sm: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.08));
--shadow-md: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.12));
--shadow-lg: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.2));
--shadow-xl: var(--shadow-xl, 0 40px 80px rgba(0, 0, 0, 0.3));
--transition-fast: var(--transition-fast, 0.15s ease);
--transition-normal: var(--transition-normal, 0.3s ease);
--transition-slow: var(--transition-slow, 0.5s ease);
--border-radius-sm: var(--radius-sm, 8px);
--border-radius-md: var(--radius-md, 12px);
--border-radius-lg: var(--card-radius, 20px);
--border-radius-xl: var(--radius-2xl, 30px);
}
/* ============================================
BASE STYLES
============================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-primary);
font-size: var(--font-size-base);
line-height: var(--line-height);
color: var(--color-text);
background-color: var(--color-light);
direction: inherit;
text-align: start;
overflow-x: hidden !important;
max-width: 100% !important;
}
html[dir="rtl"] body {
direction: rtl;
}
html[dir="ltr"] body {
direction: ltr;
}
html {
max-width: 100% !important;
overflow-x: hidden !important;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-secondary);
}
img {
max-width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.5s ease;
}
ul,
ol {
list-style: none;
}
/* ============================================
TYPOGRAPHY
============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-primary);
font-weight: var(--font-weight-heading);
line-height: 1.3;
margin-bottom: 1rem;
}
h1 {
font-size: var(--font-h1);
}
h2 {
font-size: var(--font-h2);
}
h3 {
font-size: var(--font-h3);
}
/* Header */
body .header-container {
width: 100% !important;
padding: 0 2rem !important;
}
.yre-title-gradient {
background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.yre-highlight {
position: relative;
display: inline;
}
.yre-highlight::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 30%;
background: color-mix(in srgb, var(--color-secondary) 30%, transparent);
z-index: -1;
}
[dir="rtl"] span.header-hotline-icon,
[dir="rtl"] .cta-icon,
[dir="rtl"] .contact-icon-box {
transform: scaleX(-1);
}
/* ============================================
LAYOUT
============================================ */
.container {
width: 100%;
max-width: var(--container-max, 1200px);
margin: 0 auto;
padding-inline: var(--container-padding, clamp(1rem, 3vw, 2rem));
}
.section {
padding: var(--section-padding, clamp(5rem, 8vw, 8rem)) 0;
}
.section-header {
text-align: center;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary), var(--color-secondary)));
color: var(--color-white);
padding: 6px 20px;
border-radius: var(--radius-full, 9999px);
font-size: var(--font-size-xs, 0.8125rem);
font-weight: var(--font-weight-bold, 700);
letter-spacing: var(--letter-spacing-wider, 0.05em);
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.section-badge svg {
width: 16px;
height: 16px;
}
.section-title {
font-size: var(--font-size-3xl, clamp(2rem, 3vw, 3rem));
font-weight: var(--font-weight-extrabold, 800);
color: var(--color-dark);
margin-bottom: 1rem;
letter-spacing: var(--letter-spacing-tight, -0.02em);
line-height: var(--line-height-tight, 1.25);
}
.section-header .section-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary), var(--color-secondary)));
border-radius: var(--radius-full, 9999px);
margin: 1rem auto 0;
}
.section-subtitle {
color: var(--color-text-muted, #64748B);
font-size: var(--font-size-lg, 1.125rem);
font-weight: var(--font-weight-normal, 400);
max-width: 640px;
margin: 0 auto;
line-height: var(--line-height-normal, 1.7);
}
/* ============================================
BUTTONS — Premium
============================================ */
.yre-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 36px;
font-family: var(--font-primary);
font-size: var(--font-size-md, 1rem);
font-weight: var(--font-weight-bold, 700);
letter-spacing: var(--letter-spacing-wide, 0.02em);
border-radius: var(--radius-full, 9999px);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-normal, 300ms ease);
text-decoration: none;
position: relative;
overflow: hidden;
}
.yre-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.yre-btn-primary {
background: linear-gradient(135deg, var(--color-primary, #007aa1), var(--color-secondary, #c67c55));
color: var(--color-white);
box-shadow: 0 4px 20px rgba(var(--color-primary-rgb, 0,119,150), 0.25);
}
.yre-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(var(--color-primary-rgb, 0,119,150), 0.35);
color: var(--color-white);
}
.yre-btn-secondary {
background: linear-gradient(135deg, var(--color-primary, #007aa1), var(--color-secondary, #c67c55));
color: var(--color-white);
box-shadow: 0 4px 20px rgba(var(--color-accent-rgb, 209,145,91), 0.25);
}
.yre-btn-secondary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(var(--color-accent-rgb, 209,145,91), 0.35);
color: var(--color-white);
}
.yre-btn-outline {
background: transparent;
border-color: var(--color-white);
color: var(--color-white);
}
.yre-btn-outline:hover {
background: var(--color-white);
color: var(--color-dark);
}
.yre-btn-dark {
background: var(--color-dark);
color: var(--color-white);
}
.yre-btn-lg {
padding: 18px 40px;
font-size: 1.125rem;
}
.yre-btn-sm {
padding: 10px 20px;
font-size: 0.875rem;
}
/* ============================================
HEADER
============================================ */
.yre-header {
position: fixed;
top: 0;
right: 0;
left: 0;
height: var(--header-height);
z-index: 1000;
transition: all var(--transition-normal);
}
.yre-header.transparent {
background: transparent;
}
.yre-header.scrolled {
background: var(--header-bg-scrolled);
box-shadow: var(--shadow-md);
}
.yre-header.scrolled .yre-nav a {
color: var(--header-text);
}
.yre-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.yre-logo img {
width: var(--logo-width);
height: auto;
}
.yre-logo-text {
font-size: 1.5rem;
font-weight: 800;
color: var(--color-white);
}
.yre-nav {
display: flex;
align-items: center;
gap: 40px;
}
.yre-nav a {
color: var(--header-text);
font-weight: 500;
position: relative;
}
.yre-nav a::after {
content: '';
position: absolute;
bottom: -5px;
right: 0;
width: 0;
height: 2px;
background: var(--color-secondary);
transition: width var(--transition-fast);
}
.yre-nav a:hover::after {
width: 100%;
}
/* ============================================
HERO SECTION
============================================ */
.yre-hero {
position: relative;
min-height: var(--hero-height);
display: flex;
align-items: center;
overflow: hidden;
}
.yre-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.yre-hero-video {
position: absolute;
inset: 0;
object-fit: cover;
width: 100%;
height: 100%;
}
.yre-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
}
.yre-hero-content {
position: relative;
z-index: 2;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
padding-top: var(--header-height);
}
.yre-hero[data-align="center"] .yre-hero-content {
justify-content: center;
text-align: center;
}
.yre-hero[data-align="center"] .yre-hero-text {
max-width: 800px;
}
.yre-hero-text {
flex: 1;
max-width: 650px;
}
.yre-hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: var(--border-radius-xl);
margin-bottom: 25px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.yre-hero-title {
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(--color-white);
margin-bottom: 25px;
line-height: 1.2;
}
.yre-hero-description {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
line-height: 1.8;
}
.yre-hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.yre-hero-form-wrapper {
width: 420px;
flex-shrink: 0;
}
.yre-hero-form-white {
background: var(--color-white);
padding: 35px;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-xl);
}
.yre-hero-form-dark {
background: var(--color-dark);
padding: 35px;
border-radius: var(--border-radius-lg);
color: var(--color-white);
}
.yre-hero-form-glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
padding: 35px;
border-radius: var(--border-radius-lg);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--color-white);
}
.yre-hero-scroll {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--color-white);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateX(-50%) translateY(-10px);
}
60% {
transform: translateX(-50%) translateY(-5px);
}
}
/* ============================================
STATS SECTION — Premium Design
============================================ */
.yre-stats::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 50% at 20% 50%, rgba(var(--color-accent-rgb, 209,145,91), 0.08) 0%, transparent 70%),
radial-gradient(ellipse 40% 40% at 80% 30%, rgba(var(--color-secondary-rgb, 51,161,173), 0.06) 0%, transparent 60%);
pointer-events: none;
}
.yre-stats::after {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
background-size: 40px 40px;
pointer-events: none;
}
.yre-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
z-index: 1;
max-width: var(--container-max, 1280px);
margin-inline: auto;
}
.yre-stat-item {
text-align: center;
color: var(--color-white);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl, 24px);
padding: 2.5rem 1.5rem;
transition: all var(--transition-normal, 300ms ease);
}
.yre-stat-item:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
}
.yre-stat-icon {
width: 64px !important;
height: 64px !important;
margin-inline: auto;
margin-bottom: var(--sp-4);
background: linear-gradient(135deg, #d65231, #006e91) !important;
border-radius: var(--radius-lg) !important;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.yre-stat-icon svg {
width: 32px;
height: 32px;
color: #007aa1;
}
.yre-stat-item:hover .yre-stat-icon {
background: linear-gradient(135deg, #d65231, #006e91);
transform: scale(1.08);
}
.yre-stat-number {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: var(--font-weight-black, 900);
background: linear-gradient(135deg, var(--color-white), var(--color-accent-light, #E0AD80));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
margin-bottom: 0.75rem;
}
.yre-stat-label {
font-size: var(--font-size-md, 1.0625rem);
font-weight: var(--font-weight-medium, 500);
color: rgba(255, 255, 255, 0.75);
letter-spacing: var(--letter-spacing-wide, 0.02em);
}
/* ============================================
PROJECTS SECTION
============================================ */
.yre-projects {
background-color: var(--section-bg-primary);
padding: var(--section-padding, clamp(5rem, 8vw, 8rem)) 0;
}
.yre-projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.yre-project-card {
background: var(--color-white);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
}
.yre-project-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.yre-project-image {
position: relative;
height: 250px;
overflow: hidden;
}
.yre-project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.yre-project-card:hover .yre-project-image img {
transform: scale(1.1);
}
.yre-project-status {
position: absolute;
top: 15px;
right: 15px;
padding: 6px 15px;
border-radius: var(--border-radius-xl);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.yre-project-status.new {
background: var(--color-success);
color: var(--color-white);
}
.yre-project-status.ready {
background: var(--color-secondary);
color: var(--color-white);
}
.yre-project-status.construction {
background: var(--color-warning);
color: var(--color-dark);
}
.yre-project-content {
padding: 25px;
}
.yre-project-location {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-text-light);
font-size: 0.875rem;
margin-bottom: 10px;
}
.yre-project-location svg {
width: 16px;
height: 16px;
}
.yre-project-title {
font-size: 1.25rem;
color: var(--color-dark);
margin-bottom: 15px;
}
.yre-project-excerpt {
color: var(--color-text-light);
margin-bottom: 20px;
line-height: 1.6;
}
.yre-project-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid var(--border-color, #eee);
}
.yre-project-price {
font-size: 1.125rem;
font-weight: 700;
color: var(--color-secondary);
}
.yre-project-link {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-primary);
font-weight: 600;
}
.yre-project-link svg {
width: 18px;
height: 18px;
transition: transform var(--transition-fast);
}
.yre-project-link:hover svg {
transform: translateX(-5px);
}
/* ============================================
FEATURES SECTION
============================================ */
/* ============================================
FEATURES SECTION — Premium Cards
============================================ */
.yre-features {
background: var(--section-bg-alt);
padding: var(--section-padding);
position: relative;
}
.yre-features::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 60% at 65% 55%, rgba(var(--color-secondary-rgb, 51,161,173), 0.04) 0%, transparent 70%);
pointer-events: none;
}
.yre-features .section-header {
color: var(--color-text);
position: relative;
z-index: 1;
}
.yre-features .section-title {
color: var(--color-dark);
}
.yre-features .section-subtitle {
color: var(--text-secondary);
}
.yre-features-grid {
display: grid;
grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
gap: 24px;
position: relative;
z-index: 1;
}
.yre-feature-card {
padding: 2.5rem 2rem;
border-radius: var(--radius-xl, 24px);
text-align: center;
transition: all var(--transition-normal, 300ms ease);
position: relative;
overflow: hidden;
}
/* Premium top-border accent */
.yre-feature-card::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 3px;
background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary), var(--color-secondary)));
transform: scaleX(0);
transition: transform var(--transition-normal, 300ms ease);
transform-origin: center;
}
.yre-feature-card:hover::before {
transform: scaleX(1);
}
.yre-feature-card.glass {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.yre-feature-card.solid {
background: var(--color-white);
border: 1px solid var(--border-subtle, rgba(0,119,150,0.06));
box-shadow: var(--shadow-sm);
}
.yre-feature-card.outline {
border: 2px solid var(--border-medium, rgba(0,119,150,0.12));
}
.yre-feature-card:hover {
transform: translateY(-6px);
}
.yre-feature-card.solid:hover {
box-shadow: var(--shadow-lg);
border-color: rgba(var(--color-primary-rgb, 0,119,150), 0.12);
}
.yre-feature-card.glass:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(var(--color-primary-rgb, 0,119,150), 0.2);
}
.yre-feature-icon {
width: 72px;
height: 72px;
margin: 0 auto 1.5rem;
padding: 16px;
background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.12), rgba(var(--color-secondary-rgb), 0.08));
border-radius: var(--radius-xl, 20px);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-normal, 300ms ease);
}
.yre-feature-icon svg {
width: 30px;
height: 30px;
color: #ffffff;
}
.yre-feature-card:hover .yre-feature-icon {
background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary), var(--color-secondary)));
transform: scale(1.08);
box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.3);
}
.yre-feature-card:hover .yre-feature-icon svg {
color: var(--color-white);
}
.yre-feature-title {
font-size: var(--font-size-xl, 1.25rem);
font-weight: var(--font-weight-bold, 700);
color: var(--color-dark);
margin-bottom: 0.75rem;
}
.yre-feature-card.glass .yre-feature-title {
color: var(--color-white);
}
.yre-feature-desc {
color: var(--color-text-muted, #64748B);
line-height: var(--line-height-normal, 1.7);
font-size: var(--font-size-sm, 0.875rem);
}
.yre-feature-card.glass .yre-feature-desc {
color: rgba(255, 255, 255, 0.75);
}
.yre-feature-card.solid .yre-feature-desc {
color: var(--color-text-muted, #64748B);
}
/* ============================================
TESTIMONIALS SECTION
============================================ */
.yre-testimonials {
background-color: var(--section-bg-primary);
padding: var(--section-padding, clamp(5rem, 8vw, 8rem)) 0;
}
.yre-testimonials-grid {
display: grid;
grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
gap: 24px;
}
.yre-testimonial-card {
background: var(--color-white);
padding: 40px;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
position: relative;
}
.yre-testimonial-card::before {
content: '';
position: absolute;
top: 20px;
right: 30px;
width: 60px;
height: 60px;
background: url('data:image/svg+xml,') no-repeat;
opacity: 0.1;
}
.yre-testimonial-stars {
display: flex;
gap: 5px;
margin-bottom: 20px;
}
.yre-testimonial-stars svg {
width: 20px;
height: 20px;
color: var(--color-secondary);
fill: var(--color-secondary);
}
.yre-testimonial-text {
font-size: 1.125rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 25px;
font-style: italic;
}
.yre-testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.yre-testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
display: flex;
align-items: center;
justify-content: center;
}
.yre-testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.yre-testimonial-avatar svg {
width: 30px;
height: 30px;
color: var(--color-white);
}
.yre-testimonial-name {
font-weight: 700;
color: var(--color-card-title);
margin-bottom: 5px;
}
.yre-testimonial-role {
font-size: 0.875rem;
color: var(--color-card-text);
}
/* ============================================
CTA SECTION
============================================ */
.yre-cta {
background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.9) 0%, rgba(var(--color-secondary-rgb), 0.48) 100%);
padding: var(--section-padding, clamp(5rem, 8vw, 8rem)) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.yre-cta::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, color-mix(in srgb, var(--color-secondary) 10%, transparent) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.yre-cta-content {
position: relative;
z-index: 1;
max-width: 700px;
margin: 0 auto;
}
.yre-cta-title {
font-size: 2.5rem;
color: var(--color-white);
margin-bottom: 20px;
}
.yre-cta-description {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
}
/* Contact page */
.contact-info {
color: var(--color-primary)
}
/* ============================================
FOOTER
============================================ */
.yre-footer {
background: var(--footer-bg);
color: var(--footer-text);
padding: var(--footer-padding);
}
.yre-footer-main {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 50px;
margin-bottom: 60px;
}
.yre-footer-logo {
margin-bottom: 20px;
}
.yre-footer-logo img {
max-width: 180px;
}
.yre-footer-about {
color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
margin-bottom: 25px;
}
.yre-footer-social {
display: flex;
gap: 15px;
}
.yre-footer-social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: var(--color-white);
transition: all var(--transition-fast);
}
.yre-footer-social a:hover {
background: var(--color-secondary);
transform: translateY(-3px);
}
.yre-footer-social svg {
width: 20px;
height: 20px;
}
.yre-footer-title {
font-size: 1.25rem;
color: var(--color-white);
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
}
.yre-footer-title::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 3px;
background: var(--color-secondary);
}
.yre-footer-links {
display: flex;
flex-direction: column;
gap: 15px;
}
.yre-footer-links a {
color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
gap: 10px;
transition: all var(--transition-fast);
}
.yre-footer-links a:hover {
color: var(--color-secondary);
padding-right: 10px;
}
.yre-footer-links svg {
width: 16px;
height: 16px;
}
.yre-footer-contact-item {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.8);
}
.yre-footer-contact-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 3px;
color: var(--color-secondary);
}
.yre-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.yre-footer-copyright {
color: rgba(255, 255, 255, 0.7);
}
/* ============================================
FLOATING ELEMENTS
============================================ */
/* ============================================
ULTRA-MODERN FLOATING ELEMENTS
============================================ */
.yre-floating-elements {
position: fixed;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 15px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.yre-floating-left {
left: 30px;
bottom: 30px;
}
.yre-floating-right {
right: 30px;
bottom: 30px;
}
/* Glassmorphism Classes - Applied to popups/buttons, not containers */
.yre-floating-elements.glass-effect {
background: transparent !important;
border: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.glass-effect:not(.yre-floating-elements) {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
body.light-mode .glass-effect {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}
/* Floating Buttons */
.yre-floating-btn {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.yre-floating-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
opacity: 0;
transition: 0.3s;
z-index: 1;
pointer-events: none;
}
.yre-floating-btn:hover::after {
opacity: 1;
}
.yre-floating-btn:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
.yre-floating-btn svg {
width: 26px;
height: 26px;
z-index: 3;
position: relative;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Ensure stroke/fill icons inherit button color on every template (no “empty circle” on inner pages). */
.yre-floating-btn svg,
.yre-floating-btn svg *,
.yre-mobile-dock .dock-item svg,
.yre-mobile-dock .dock-item svg * {
vector-effect: non-scaling-stroke;
}
/* Outline message icon: non-scaling-stroke + overflow hidden can hide strokes; use normal stroke scaling. */
.yre-floating-btn.contact svg,
.yre-floating-btn.contact svg *,
.dock-item.contact-trigger svg,
.dock-item.contact-trigger svg * {
vector-effect: none;
}
.yre-floating-btn.contact svg,
.yre-floating-btn.contact svg *,
.dock-item.contact-trigger svg,
.dock-item.contact-trigger svg * {
stroke: var(--color-white, #fff) !important;
fill: none !important;
}
.yre-floating-btn.contact svg path,
.dock-item.contact-trigger svg path {
display: block !important;
opacity: 1 !important;
stroke: var(--color-white, #fff) !important;
stroke-width: 2.25 !important;
fill: none !important;
}
/* Slight inset so stroke is not clipped by overflow:hidden on the circular button. */
.yre-floating-btn.contact svg,
.dock-item.contact-trigger svg {
transform: scale(0.9);
transform-origin: center center;
}
/* Floating WhatsApp: JS replaces with filled glyph. */
.yre-floating-btn.whatsapp svg,
.yre-floating-btn.whatsapp svg * {
fill: currentColor !important;
stroke: none !important;
}
/* Mobile dock WhatsApp: keeps theme outline icon (stroke). */
.dock-item.whatsapp svg,
.dock-item.whatsapp svg * {
stroke: currentColor !important;
fill: none !important;
}
.yre-floating-btn.call svg,
.yre-floating-btn.call svg * {
stroke: currentColor !important;
fill: none !important;
}
.yre-floating-btn.contact {
background: linear-gradient(135deg, var(--color-secondary), var(--color-tertiary));
color: var(--color-white, #fff) !important;
}
.yre-floating-btn.whatsapp {
background: var(--color-whatsapp, #25D366);
color: white;
}
.yre-floating-btn.call {
background: var(--color-primary);
color: white;
}
/* Pulse Animation for WhatsApp */
.pulse {
animation: yre-pulse 2s infinite;
}
@keyframes yre-pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
/* Popup Glass UI */
.yre-floating-popup {
position: absolute;
bottom: 80px;
width: 380px;
border-radius: 24px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.95);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 2001;
box-shadow: var(--shadow-xl);
}
.yre-floating-left .yre-floating-popup {
left: 0;
transform-origin: left bottom;
}
.yre-floating-right .yre-floating-popup {
right: 0;
transform-origin: right bottom;
}
.yre-floating-form-btn.active .yre-floating-popup {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.yre-floating-popup-header {
padding: 25px;
background: rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.yre-floating-popup-header h4 {
margin: 0;
font-size: 1.25rem;
color: white;
}
body.light-mode .yre-floating-popup-header h4 {
color: var(--color-dark);
}
.close-popup {
background: none;
border: none;
color: white;
font-size: 2rem;
cursor: pointer;
line-height: 1;
opacity: 0.6;
transition: 0.3s;
}
body.light-mode .close-popup {
color: var(--color-dark);
}
.close-popup:hover {
opacity: 1;
transform: rotate(90deg);
}
.yre-floating-popup-body {
padding: 25px;
}
/* Mobile Docked Bar */
.yre-mobile-dock {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 75px;
z-index: 9999;
align-items: center;
justify-content: space-around;
padding: 10px 15px;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
background: var(--color-dark) !important;
}
body.light-mode .yre-mobile-dock {
background: var(--color-surface) !important;
}
.dock-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-decoration: none;
transition: 0.3s;
}
.dock-item svg {
width: 24px;
height: 24px;
color: var(--color-white, #fff);
}
.dock-item span {
font-size: 12px;
font-weight: 600;
color: var(--color-white, #fff);
}
body.light-mode .dock-item svg,
body.light-mode .dock-item span {
color: var(--color-dark) !important;
}
.dock-item.whatsapp svg {
color: var(--color-whatsapp, #25D366);
}
body.light-mode .dock-item.whatsapp svg {
color: var(--color-whatsapp-dark, #128C7E);
}
/* Responsive adjustments */
@media (max-width: 768px) {
section.hp1.hp1--rtl {
padding: 0 !important;
}
.behavior-dock .hide-on-mobile:not(.active) {
display: none !important;
}
.yre-floating-form-btn.active {
display: block !important;
position: fixed;
z-index: 9999;
}
.behavior-dock.yre-floating-elements {
bottom: 90px;
}
.yre-mobile-dock {
display: flex;
}
.yre-floating-popup {
width: calc(100vw - 40px);
left: 20px !important;
right: 20px !important;
bottom: 90px;
}
}
/* SCROLL TO TOP (Legacy check - already handled below) */
/* ============================================
SCROLL TO TOP
============================================ */
.yre-scroll-top {
position: fixed;
bottom: 30px;
width: 50px;
height: 50px;
background: var(--color-primary);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all var(--transition-normal);
z-index: 998;
border: none;
box-shadow: var(--shadow-md);
}
.yre-scroll-top.visible {
opacity: 1;
visibility: visible;
}
.yre-scroll-top:hover {
background: var(--color-secondary);
transform: translateY(-5px);
}
.yre-scroll-top svg {
width: 24px;
height: 24px;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1200px) {
.yre-features-grid,
.yre-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.yre-footer-main {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 992px) {
.yre-projects-grid,
.yre-testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.yre-hero-content {
flex-direction: column;
text-align: center;
}
.yre-hero-form-wrapper {
width: 100%;
max-width: 500px;
}
}
@media (max-width: 768px) {
.yre-projects-grid,
.yre-testimonials-grid,
.yre-features-grid,
.yre-stats-grid {
grid-template-columns: 1fr !important;
}
.yre-footer-main {
grid-template-columns: 1fr;
text-align: center;
}
.yre-footer-title::after {
right: 50%;
transform: translateX(50%);
}
.yre-footer-social {
justify-content: center;
}
.yre-footer-bottom {
flex-direction: column;
gap: 20px;
}
.yre-nav {
display: none;
}
.yre-mobile-menu-btn {
display: flex;
}
.section {
padding: clamp(3rem, 6vw, 5rem) 0;
}
.yre-hero {
min-height: auto;
padding: 120px 0 80px;
}
.yre-hero-title {
font-size: 2rem;
}
.yre-cta-title {
font-size: 1.75rem;
}
}
/* ============================================
UTILITY CLASSES
============================================ */
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.mt-0 {
margin-top: 0;
}
.mb-0 {
margin-bottom: 0;
}
.my-0 {
margin-top: 0;
margin-bottom: 0;
}
.hidden {
display: none;
}
.visible {
display: block;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Project Card Image & Avatar Refinement */
.project-card,
.project-card-inner,
.project-image-link {
padding: 0 !important;
margin: 0 !important;
}
.project-image {
width: 100% !important;
height: 320px !important;
object-fit: cover !important;
}
.yre-testimonial-avatar img {
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
object-fit: cover !important;
}
.yre-feature-icon img,
.yre-feature-icon svg {
object-fit: contain !important;
}
/* ===== Hero Video Performance Optimization ===== */
/* Video Poster (background image while video loads) */
.yre-video-poster {
position: absolute;
inset: 0;
z-index: -2;
transition: opacity 0.5s ease;
}
/* Hide poster when video is playing */
.yre-hero-video.playing~.yre-video-poster {
opacity: 0;
}
/* ===== Floating Form Enhancements ===== */
.yre-floating-popup-header h4 {
display: flex;
align-items: center;
margin: 0;
font-size: 16px;
font-weight: 600;
}
.popup-title-icon {
margin-inline-end: 8px;
}
/* Single project specs: see assets/css/project-specs.css (enqueued on singular projects). */
/* Google reCAPTCHA v3 floating badge — remove from layout (fixed bottom-right).
Per Google: if the badge is hidden, show reCAPTCHA text near affected forms, e.g.
“This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.” */
.grecaptcha-badge {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
overflow: hidden !important;
position: fixed !important;
inset-inline-end: -9999px !important;
bottom: 0 !important;
}
/* ============================================
PROGRAM CARDS — Icon-based Service Cards
============================================ */
.program-card-wrapper {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.program-card {
background: var(--color-white, #FFFFFF);
border-radius: var(--radius-xl, 24px);
overflow: hidden;
border: 1px solid var(--border-subtle, rgba(0,119,150,0.06));
box-shadow: var(--shadow-sm);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
display: flex;
flex-direction: column;
}
.program-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(var(--color-primary-rgb, 0,119,150), 0.12);
}
/* Top accent border on hover */
.program-card::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 3px;
background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary), var(--color-secondary)));
transform: scaleX(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.program-card:hover::before {
transform: scaleX(1);
}
.program-card {
position: relative;
}
.program-card-content {
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
}
.program-card-icon {
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-xl, 20px);
background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1), rgba(var(--color-secondary-rgb), 0.06));
color: #007aa1;
margin-bottom: 1.25rem;
transition: all 0.3s ease;
}
.program-card:hover .program-card-icon {
background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary), var(--color-secondary)));
color: var(--color-white, #FFFFFF);
transform: scale(1.08);
box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.25);
}
.program-card-title {
font-size: var(--font-size-lg, 1.125rem);
font-weight: var(--font-weight-bold, 700);
margin: 0 0 0.75rem 0;
line-height: 1.4;
color: var(--color-dark, #0D1520);
}
.program-card-title a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.program-card-title a:hover {
color: #007aa1;
}
.program-card-desc {
font-size: var(--font-size-sm, 0.875rem);
color: var(--color-text-muted, #64748B);
line-height: 1.7;
margin: 0 0 1.25rem 0;
flex: 1;
}
.program-card-footer {
margin-top: auto;
width: 100%;
}
.ych-program-learn-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 20px;
font-family: var(--font-primary);
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-bold, 700);
color: #007aa1;
background: rgba(var(--color-primary-rgb, 0,119,150), 0.06);
border: 1px solid rgba(var(--color-primary-rgb, 0,119,150), 0.12);
border-radius: var(--radius-lg, 16px);
text-decoration: none;
transition: all 0.3s ease;
}
.ych-program-learn-btn:hover {
background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary), var(--color-secondary)));
color: var(--color-white, #FFFFFF);
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(var(--color-primary-rgb, 0,119,150), 0.2);
}
.ych-program-learn-btn svg {
transition: transform 0.3s ease;
}
.ych-program-learn-btn:hover svg {
transform: translateX(4px);
}
@media (max-width: 768px) {
.program-card-content { padding: 1.5rem; }
}
/* === Program Card Image === */
.program-card-image {
position: relative;
overflow: hidden;
aspect-ratio: 16/10;
}
.program-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.program-card:hover .program-card-image img {
transform: scale(1.08);
}
.program-card-image a {
display: block;
width: 100%;
height: 100%;
}
.program-card-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(13,21,32,0.6) 0%, transparent 60%);
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 16px;
opacity: 0;
transition: opacity 0.3s ease;
}
.program-card:hover .program-card-image-overlay {
opacity: 1;
}
.program-card-image-overlay svg {
color: #007aa1;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
/* --- components.css --- */
.yre-section {
position: relative;
padding: clamp(56px, 7vw, 110px) 0;
}
.section-header {
margin-bottom: clamp(28px, 4vw, 60px);
text-align: center;
}
.section-title {
color: var(--text-primary);
font-size: clamp(1.7rem, 4vw, 2.75rem);
line-height: 1.2;
margin: 0 0 12px;
}
.section-subtitle {
color: var(--text-secondary);
}
.section-badge,
.project-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--badge-bg);
color: var(--badge-text);
border: 1px solid var(--border-subtle);
}
.yre-btn,
.hp1-btn-primary,
.hp1-btn-secondary,
.hp2-btn,
.hp3-btn,
.hp4-btn,
.hp5-btn {
border-radius: var(--radius-full);
font-weight: 700;
transition: all 0.3s ease;
}
.yre-btn-primary,
.hp1-btn-primary,
.hp2-btn,
.hp4-btn,
.hp5-btn-primary {
background: var(--gradient-secondary);
color: var(--text-inverse);
border: 1px solid transparent;
}
.yre-btn-primary:hover,
.hp1-btn-primary:hover,
.hp2-btn:hover,
.hp4-btn:hover,
.hp5-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(var(--color-secondary-rgb), 0.26);
}
.yre-btn-outline,
.hp1-btn-secondary,
.hp3-btn,
.hp5-btn-outline {
background: transparent;
color: var(--text-inverse);
border: 1px solid var(--border-subtle);
}
.hp1-btn-secondary:hover,
.hp3-btn:hover,
.hp5-btn-outline:hover {
background: var(--surface-elevated);
border-color: var(--border-hover);
}
/* HP1 hero: comfortable touch targets + vertical rhythm (WCAG ~44px, UI/UX Pro Max spacing) */
.hp1-btn-primary,
.hp1-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.85rem;
min-height: 48px;
box-sizing: border-box;
line-height: 1.25;
font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
text-decoration: none;
}
.hp1-btn-primary svg,
.hp1-btn-secondary svg {
flex-shrink: 0;
width: 20px;
height: 20px;
stroke: currentColor !important;
fill: none !important;
}
.hp1-btn-primary svg *,
.hp1-btn-secondary svg * {
stroke: currentColor !important;
fill: none !important;
}
.project-card:hover,
.yre-stat-item:hover,
.yre-feature-card:hover,
.footer-contact-card:hover {
border-color: var(--border-hover);
}
.project-title,
.yre-feature-title,
.yre-testimonial-name,
.hp4-card-title,
.hp5-feature-title {
color: var(--text-primary);
}
.project-location,
.yre-feature-desc,
.yre-testimonial-role,
.yre-testimonial-text,
.hp4-card-meta,
.hp5-feature-text {
color: var(--text-secondary);
}
.hp1,
.hp2,
.hp3,
.hp4,
.hp5 {
--home-accent: var(--color-secondary);
--home-accent-contrast: var(--text-inverse);
}
.hp1-badge,
.hp2-badge,
.hp4-card-badge,
.hp5-pretitle {
background: var(--home-accent);
color: var(--home-accent-contrast);
}
.hp1-title span,
.hp2-search-title,
.hp3-title strong,
.hp3-label,
.hp5-title span {
color: var(--home-accent);
}
.hp2-input,
.filter-control,
.toggle-btn {
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
}
.hp2-input::placeholder {
color: var(--text-secondary);
}
/* ============================================================ */
/* LAYER: 4-sections */
/* ============================================================ */
/* --- sections.css --- */
/*
* Section base colours
* --section-bg-primary / --section-bg-alt are set by dynamic-styles.php
* to deeply-darkened, brand-tinted near-blacks in dark mode,
* or white/near-white in light mode.
* All colours reference design-tokens.css custom properties.
*/
.yre-section,
.ych-section {
color: var(--text-primary);
padding-block: var(--section-padding, clamp(5rem, 8vw, 8rem));
padding-inline: var(--container-padding, clamp(1rem, 3vw, 2rem));
}
.yre-section:nth-of-type(odd),
.ych-section:nth-of-type(odd) {
background-color: var(--section-bg-primary);
}
.yre-section:nth-of-type(even),
.ych-section:nth-of-type(even) {
background-color: var(--section-bg-alt);
}
.yre-section .section-title,
.yre-section h1,
.yre-section h2,
.yre-section h3,
.ych-section .section-title,
.ych-section h1,
.ych-section h2,
.ych-section h3 {
color: var(--color-title-section, var(--text-primary));
}
.yre-section .section-subtitle,
.yre-section p,
.yre-section .yre-about-text,
.yre-section .yre-about-text p,
.ych-section .section-subtitle,
.ych-section p {
color: var(--color-subtitle-section, var(--text-secondary));
}
/* Stats accent section keeps its own gradient surface */
.yre-stats {
background: linear-gradient(
135deg,
var(--section-bg-primary) 0%,
color-mix(in srgb, var(--color-secondary) 12%, transparent) 100%
);
}
/* CTA — bold brand gradient for maximum impact */
.yre-cta {
background: linear-gradient(
135deg,
var(--color-primary-dark) 0%,
var(--color-primary) 50%,
var(--color-secondary) 100%
);
color: var(--text-inverse);
}
.hp1-hero,
.hp2-hero,
.hp3-hero,
.hp5-hero {
min-height: min(100vh, 920px);
position: relative;
overflow: hidden;
}
/* HP1: column flex so title block is vertically centered; tint color comes from dynamic CSS */
.hp1-hero {
display: flex;
flex-direction: column;
justify-content: stretch;
}
.hp1-video,
.hp1-image-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hp1-video {
object-fit: cover;
}
.hp1-image-bg {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/*
* Fallback hero background when no video/image is set.
* Uses a deep near-black with a subtle primary tint and a secondary shimmer
* so it always has visual depth regardless of brand colour choice.
*/
.hp1-fallback-bg {
background:
radial-gradient(ellipse 70% 60% at 65% 55%, color-mix(in srgb, var(--color-secondary) 10%, transparent) 0%, transparent 70%),
radial-gradient(ellipse 55% 45% at 30% 30%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 65%),
linear-gradient(160deg, var(--color-dark) 0%, var(--color-dark) 60%, var(--color-dark) 100%);
}
.hp1-overlay,
.hp3-hero::before,
.hp5-overlay,
.hp2-image-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* .hp1-overlay fill color/opacity: options panel → inc/dynamic-styles.php (avoid overriding here) */
.hp1-content,
.hp2-content,
.hp3-content,
.hp5-content {
position: relative;
z-index: 2;
}
.hp1-content {
box-sizing: border-box;
width: min(920px, 92%);
margin: 0 auto;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: clamp(120px, 15vh, 220px) 0 clamp(90px, 12vh, 150px);
text-align: center;
}
.hp1-title,
.hp2-title,
.hp3-title,
.hp4-title,
.hp5-title {
color: var(--text-inverse);
margin: 0;
line-height: 1.15;
}
.hp1-title {
font-size: clamp(2rem, 5.5vw, 4.2rem);
margin-bottom: 14px;
text-shadow: 0 10px 30px color-mix(in srgb, var(--surface-base) 70%, transparent);
}
.hp1-subtitle,
.hp2-subtitle,
.hp3-text,
.hp4-subtitle,
.hp5-subtitle {
color: color-mix(in srgb, var(--text-inverse) 92%, #000);
font-size: clamp(1rem, 2vw, 1.2rem);
line-height: 1.75;
margin: 0 auto;
max-width: 74ch;
text-shadow: 0 2px 14px color-mix(in srgb, var(--surface-base) 65%, transparent);
}
.hp1-subtitle {
margin-bottom: clamp(1.25rem, 3.5vw, 2.25rem);
}
.hp1-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-inline: auto;
margin-bottom: 1rem;
max-width: 100%;
padding: 0.625rem 1.35rem;
min-height: 44px;
box-sizing: border-box;
line-height: 1.35;
border-radius: 999px;
}
/* HP1 RTL: centered block, logical button order, arrow follows reading direction */
.hp1[dir="rtl"] .hp1-content {
text-align: center;
align-items: center;
margin-inline: auto;
width: 100%;
}
.hp1[dir="rtl"] .hp1-title,
.hp1[dir="rtl"] .hp1-subtitle {
text-align: center;
margin-inline: auto;
}
.hp1[dir="rtl"] .hp1-buttons {
flex-direction: row-reverse;
}
.hp1[dir="rtl"] .hp1-btn-primary .hp1-btn-icon {
transform: scaleX(-1);
}
.hp1-buttons {
margin-top: clamp(28px, 4vw, 48px);
display: inline-flex;
flex-wrap: wrap;
gap: clamp(12px, 2vw, 18px);
justify-content: center;
}
.hp2-hero {
display: grid;
grid-template-columns: 1fr 1fr;
background: linear-gradient(135deg, var(--section-bg-primary), var(--surface-subtle));
}
.hp2-image {
position: relative;
min-height: 100%;
}
.hp2-image img,
.hp4-card img,
.hp5-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hp2-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(24px, 4vw, 64px);
}
.hp2-title {
font-size: clamp(1.9rem, 4.2vw, 3.3rem);
margin-bottom: 10px;
}
.hp2-subtitle {
margin-bottom: 20px;
}
.hp2-search {
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: 18px;
padding: clamp(18px, 2.5vw, 30px);
backdrop-filter: blur(8px);
}
.hp3-hero {
display: flex;
align-items: center;
background-position: center;
background-size: cover;
}
.hp3-content {
max-width: 700px;
padding: 0 clamp(20px, 5vw, 60px);
}
.hp3-title {
font-size: clamp(2rem, 5vw, 3.8rem);
margin-bottom: 12px;
}
.hp3-text {
margin-bottom: clamp(20px, 3vw, 30px);
}
.hp3-stats,
.hp5-features {
position: absolute;
inset-inline: 0;
bottom: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
background: color-mix(in srgb, var(--surface-base) 72%, transparent);
border-top: 1px solid var(--border-subtle);
backdrop-filter: blur(12px);
}
.hp3-stat,
.hp5-feature {
padding: 24px 18px;
text-align: center;
border-inline-start: 1px solid var(--border-subtle);
}
.hp3-stat:first-child,
.hp5-feature:first-child {
border-inline-start: 0;
}
.hp4-hero {
background: linear-gradient(180deg, var(--section-bg-primary) 0%, var(--section-bg-alt) 100%);
padding: clamp(72px, 10vw, 120px) 20px clamp(50px, 7vw, 84px);
}
.hp4-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 2vw, 25px);
max-width: 1200px;
margin: 0 auto;
}
.hp4-card {
position: relative;
overflow: hidden;
border-radius: 20px;
aspect-ratio: 4 / 3;
border: 1px solid var(--border-subtle);
}
.hp4-card:first-child {
grid-column: span 2;
aspect-ratio: 21 / 9;
}
.hp4-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, color-mix(in srgb, var(--surface-base) 86%, transparent), transparent);
}
.hp4-card-content {
position: absolute;
inset-inline: 0;
bottom: 0;
padding: 24px;
}
.hp4-title {
font-size: clamp(1.9rem, 4.6vw, 3.4rem);
margin-bottom: 10px;
text-align: center;
}
.hp4-subtitle {
text-align: center;
margin-bottom: clamp(26px, 4vw, 42px);
}
.hp4-cta {
margin-top: clamp(24px, 4vw, 40px);
text-align: center;
}
.hp5-content {
width: min(900px, 92%);
margin: 0 auto;
padding: clamp(120px, 14vh, 210px) 0 clamp(110px, 14vh, 170px);
text-align: center;
}
.hp5-title {
font-size: clamp(2rem, 5.2vw, 4rem);
margin-bottom: 12px;
}
.hp5-subtitle {
margin-bottom: 22px;
}
.hp5-buttons {
display: inline-flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.about-content,
.yre-about-text,
.video-placeholder p,
.video-error p {
color: var(--text-secondary);
}
.yre-about-text {
margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}
.yre-about-text p:last-child {
margin-bottom: 0;
}
.yre-about-cta {
margin-top: clamp(1rem, 2.5vw, 1.5rem);
}
.yre-about-cta__btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.yre-about-cta__icon {
flex-shrink: 0;
margin-inline-start: 0.15rem;
}
[dir="rtl"] .yre-about .yre-about-cta__icon {
transform: scaleX(-1);
}
.yre-video-section {
background: transparent;
}
.video-wrapper {
border: 1px solid var(--border-subtle);
}
.video-placeholder,
.video-error {
background: var(--surface-elevated);
border: 1px dashed var(--border-subtle);
}
.yre-about-grid {
display: grid;
gap: clamp(2rem, 4vw, 4rem);
align-items: center;
}
.yre-about-right,
.yre-about-left {
grid-template-columns: 1fr 1fr;
}
.yre-about-left .yre-about-gallery,
.yre-about-left .yre-about-image {
order: 2;
}
.yre-about-left .yre-about-content {
order: 1;
}
.yre-about-image-wrapper {
border-radius: var(--radius-2xl, 32px);
overflow: hidden;
box-shadow: var(--shadow-xl);
position: relative;
}
.yre-about-image-wrapper::before {
content: '';
position: absolute;
inset: -6px;
border-radius: calc(var(--radius-2xl, 32px) + 6px);
background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary), var(--color-secondary)));
z-index: -1;
opacity: 0.3;
}
.yre-about-image-wrapper::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 2px solid rgba(var(--color-primary-rgb, 0,119,150), 0.1);
pointer-events: none;
}
.yre-about-image-wrapper img {
width: 100%;
height: auto;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.yre-about-image-wrapper:hover img {
transform: scale(1.05);
}
.yre-gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
min-height: 320px;
}
.yre-gallery-item {
border-radius: var(--radius-md, 12px);
overflow: hidden;
}
.yre-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.yre-gallery-item-1 {
grid-row: span 2;
}
.projects-grid,
.projects-grid-large {
display: grid;
grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
gap: 28px;
}
.projects-masonry {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.masonry-item.large {
grid-column: span 2;
grid-row: span 2;
}
.masonry-item.wide {
grid-column: span 2;
}
.projects-showcase {
display: grid;
gap: 24px;
}
.showcase-featured .project-card-inner {
display: grid;
grid-template-columns: 1.5fr 1fr;
min-height: 380px;
}
.showcase-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
/* --------------------------------------------------------------------------
Homepage projects carousel — track row + pagination row (dots never share row with arrows)
-------------------------------------------------------------------------- */
.projects-carousel-wrapper {
position: relative;
width: 100%;
max-width: 100%;
margin-inline: 0;
padding-block: clamp(8px, 1.5vw, 20px);
overflow: visible;
display: flex;
flex-direction: column;
align-items: stretch;
gap: clamp(12px, 2vw, 22px);
isolation: isolate;
}
/* Desktop / tablet: prev | swiper | next */
.projects-carousel-track-row {
display: grid;
grid-template-columns: minmax(40px, 48px) minmax(0, 1fr) minmax(40px, 48px);
align-items: center;
column-gap: clamp(10px, 2vw, 18px);
width: 100%;
min-width: 0;
}
.projects-carousel-track-row .projects-carousel-nav--prev {
grid-column: 1;
grid-row: 1;
justify-self: center;
}
.projects-carousel-track-row .projects-carousel.swiper {
grid-column: 2;
grid-row: 1;
min-width: 0;
width: 100%;
overflow: hidden;
padding-block: 4px 8px;
border-radius: clamp(12px, 2vw, 20px);
}
.projects-carousel-track-row .projects-carousel-nav--next {
grid-column: 3;
grid-row: 1;
justify-self: center;
}
/* Pagination: always full width under the track row; LTR keeps index order 1→2→3 */
.projects-carousel-wrapper .projects-carousel-pagination {
position: relative !important;
bottom: auto !important;
left: auto !important;
top: auto !important;
right: auto !important;
transform: none !important;
width: 100%;
max-width: 100%;
margin: 0;
padding: clamp(4px, 1vw, 8px) 0 0;
display: flex !important;
flex-wrap: wrap;
justify-content: center !important;
align-items: center;
align-self: center;
gap: 0;
min-height: 28px;
direction: ltr;
text-align: center;
box-sizing: border-box;
}
.projects-carousel .swiper-slide {
width: auto;
height: auto;
box-sizing: border-box;
display: flex;
align-items: stretch;
padding-inline: clamp(4px, 1vw, 10px);
}
.projects-carousel .swiper-slide > .project-card,
.projects-carousel .swiper-slide > .program-card-wrapper,
.projects-carousel .swiper-slide > .program-card-wrapper .program-card {
width: 100%;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
.projects-carousel .swiper-slide .project-card-inner {
height: 100%;
}
/* Carousel-only: center text block (location, title, developer, price, CTA) */
.projects-carousel .project-content {
text-align: center;
align-items: center;
}
.projects-carousel .project-location {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
text-align: center;
color: color-mix(in srgb, var(--color-title-section, var(--text-primary)) 55%, transparent);
}
.projects-carousel .project-title,
.projects-carousel .project-title a {
text-align: center;
justify-content: center;
}
.projects-carousel .project-developer {
text-align: center;
width: 100%;
}
.projects-carousel .project-price-wrap {
width: 100%;
display: flex;
justify-content: center;
}
.projects-carousel .project-price-wrap .price {
align-items: center;
text-align: center;
}
.projects-carousel .project-footer {
display: flex;
justify-content: center;
width: 100%;
}
.projects-carousel .details-btn {
justify-content: center;
max-width: min(100%, 22rem);
margin-inline: auto;
}
/* Nav buttons: sit in gutter columns, not over slides */
.projects-carousel-track-row .projects-carousel-nav,
.projects-carousel-wrapper .projects-carousel-nav {
z-index: 2;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
color: var(--text-inverse, #fff);
background: color-mix(in srgb, var(--color-primary) 88%, transparent);
border: 1px solid color-mix(in srgb, var(--text-inverse) 22%, transparent);
border-radius: 50%;
box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 35%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.projects-carousel-track-row .projects-carousel-nav::after,
.projects-carousel-wrapper .projects-carousel-nav::after {
font-size: 16px;
font-weight: 700;
}
.projects-carousel-track-row .projects-carousel-nav:hover,
.projects-carousel-track-row .projects-carousel-nav:focus-visible,
.projects-carousel-wrapper .projects-carousel-nav:hover,
.projects-carousel-wrapper .projects-carousel-nav:focus-visible {
background: color-mix(in srgb, var(--color-primary) 72%, var(--color-tertiary) 28%);
box-shadow: 0 8px 26px color-mix(in srgb, var(--color-tertiary) 38%, transparent);
color: var(--text-inverse, #fff);
outline: none;
}
.projects-carousel-track-row .projects-carousel-nav:focus-visible,
.projects-carousel-wrapper .projects-carousel-nav:focus-visible {
outline: 2px solid var(--color-tertiary);
outline-offset: 2px;
}
.projects-carousel-wrapper .swiper-button-disabled,
.projects-carousel-track-row .swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
.projects-carousel-wrapper .projects-carousel-pagination .swiper-pagination-bullet {
width: 9px;
height: 9px;
margin: 0 6px !important;
opacity: 0.45;
background: var(--color-title-section, var(--text-primary));
transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
vertical-align: middle;
}
.projects-carousel-wrapper .projects-carousel-pagination .swiper-pagination-bullet-active {
opacity: 1;
transform: scale(1.2);
background: var(--color-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
/* Narrow viewports: swiper full width; nav row symmetric; dots on separate row below */
@media (max-width: 639px) {
.projects-carousel-track-row {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
column-gap: clamp(20px, 10vw, 48px);
row-gap: 12px;
justify-items: stretch;
}
.projects-carousel-track-row .projects-carousel.swiper {
grid-column: 1 / -1;
grid-row: 1;
}
.projects-carousel-track-row .projects-carousel-nav--prev {
grid-column: 1;
grid-row: 2;
justify-self: center;
}
.projects-carousel-track-row .projects-carousel-nav--next {
grid-column: 2;
grid-row: 2;
justify-self: center;
}
}
@media (max-width: 480px) {
.projects-carousel-track-row {
column-gap: clamp(16px, 8vw, 36px);
}
.projects-carousel-track-row .projects-carousel-nav,
.projects-carousel-wrapper .projects-carousel-nav {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
}
@media (prefers-reduced-motion: reduce) {
.projects-carousel-wrapper .projects-carousel-pagination .swiper-pagination-bullet,
.projects-carousel-track-row .projects-carousel-nav,
.projects-carousel-wrapper .projects-carousel-nav {
transition: none;
}
}
.video-wrapper {
position: relative;
height: 0;
overflow: hidden;
border-radius: 12px;
padding-bottom: 56.25%;
}
.video-iframe,
.video-player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Homepage heroes: constrain inline SVGs (prevents full-width “giant icon” blowups) */
.hp1-hero svg,
.hp2-hero svg,
.hp3-hero svg,
.hp4-hero svg,
.hp5-hero svg {
width: 1.25rem;
height: 1.25rem;
max-width: 32px;
max-height: 32px;
flex-shrink: 0;
}
.hp1-badge svg,
.hp2-badge svg {
width: 1rem;
height: 1rem;
max-width: 22px;
max-height: 22px;
}
.hp1-scroll {
position: relative;
z-index: 2;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding-block: 1rem;
color: var(--text-inverse);
font-size: 0.85rem;
text-shadow: 0 2px 12px color-mix(in srgb, var(--surface-base) 80%, transparent);
}
.hp1-scroll svg {
width: 1.5rem;
height: 1.5rem;
max-width: 28px;
max-height: 28px;
}
@media (max-width: 992px) {
.hp1-content,
.hp5-content {
padding-top: clamp(96px, 12vh, 150px);
padding-bottom: clamp(82px, 10vh, 120px);
}
.hp2-image {
min-height: 320px;
}
}
/* CTA / bright green sections: keep headings readable */
.yre-cta .section-title,
.yre-cta .section-subtitle,
.yre-cta .yre-btn {
color: var(--text-inverse);
text-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.yre-cta .section-subtitle {
opacity: 0.95;
}
body.light-mode .yre-cta .section-subtitle {
color: color-mix(in srgb, var(--text-inverse) 92%, #000);
}
/* Extra readability pass for bright/contrast-heavy sections */
.yre-section .section-title,
.yre-section .project-title,
.yre-section .hp4-card-title {
text-shadow: 0 1px 1px color-mix(in srgb, var(--surface-base) 26%, transparent);
}
.yre-section .section-subtitle,
.yre-section .project-location,
.yre-section .hp4-card-meta,
.yre-section .hp5-feature-text,
.ych-section .section-subtitle {
color: color-mix(in srgb, var(--text-primary) 78%, var(--text-secondary));
}
/* =============================================
yCharitable — CHARITY SECTION STYLES
============================================= */
.ych-section {
padding-block: var(--section-padding);
padding-inline: var(--container-padding);
}
.ych-section .section-header {
text-align: center;
margin-block-end: var(--space-2xl);
}
.ych-section .section-title {
font-family: var(--font-primary);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-extrabold);
color: var(--color-title-section, var(--text-primary));
margin-block-end: var(--space-sm);
}
.ych-section .section-subtitle {
font-family: var(--font-secondary);
font-size: var(--font-size-md);
color: var(--color-subtitle-section, var(--text-secondary));
max-width: 65ch;
margin-inline: auto;
line-height: var(--line-height-normal);
}
/* -------------------------------------------
Donation CTA
------------------------------------------- */
.ych-donation-cta {
background: linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-primary-light) 100%
);
color: var(--text-inverse);
padding-block: var(--space-3xl);
padding-inline: var(--container-padding);
text-align: center;
position: relative;
overflow: hidden;
}
.ych-donation-cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle at 30% 50%,
color-mix(in srgb, var(--color-tertiary) 15%, transparent),
transparent 60%
);
pointer-events: none;
}
.ych-donation-cta .cta-title {
font-family: var(--font-primary);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin-block-end: var(--space-md);
position: relative;
}
.ych-donation-cta .cta-description {
font-size: var(--font-size-md);
opacity: 0.9;
margin-block-end: var(--space-xl);
max-width: 55ch;
margin-inline: auto;
position: relative;
}
.ych-donation-cta .cta-amount-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
margin-block-end: var(--space-lg);
position: relative;
}
.ych-donation-cta .cta-amount-btn {
padding: var(--space-sm) var(--space-lg);
border: 2px solid color-mix(in srgb, var(--text-inverse) 30%);
border-radius: var(--button-radius);
background: transparent;
color: var(--text-inverse);
font-family: var(--font-primary);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ych-donation-cta .cta-amount-btn:hover,
.ych-donation-cta .cta-amount-btn.active {
background: var(--color-tertiary);
border-color: var(--color-tertiary);
color: var(--color-primary-dark);
}
/* -------------------------------------------
Orphans / Sponsorship Section
------------------------------------------- */
.ych-orphans-section {
background: var(--section-bg-alt);
}
.sponsorship-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
gap: var(--space-lg);
}
.sponsorship-card {
background: var(--color-card-bg);
border: 1px solid var(--border-color);
border-radius: var(--card-radius);
overflow: hidden;
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.sponsorship-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.sponsorship-card .card-image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.sponsorship-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.sponsorship-card:hover .card-image img {
transform: scale(1.08);
}
.sponsorship-card .card-urgent-badge {
position: absolute;
inset-block-start: var(--space-sm);
inset-inline-end: var(--space-sm);
background: var(--color-danger);
color: var(--text-inverse);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
}
.sponsorship-card .card-body {
padding: var(--space-lg);
}
.sponsorship-card .card-name {
font-family: var(--font-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-block-end: var(--space-xs);
}
.sponsorship-card .card-age {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-block-end: var(--space-sm);
}
.sponsorship-card .card-monthly {
display: flex;
align-items: center;
justify-content: space-between;
padding-block-start: var(--space-sm);
border-block-start: 1px solid var(--border-color);
}
.sponsorship-card .card-monthly .amount {
font-weight: var(--font-weight-bold);
color: var(--color-primary);
font-size: var(--font-size-md);
}
.sponsorship-card .sponsor-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
background: var(--color-primary);
color: var(--text-inverse);
border: none;
border-radius: var(--button-radius);
font-family: var(--font-primary);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.sponsorship-card .sponsor-btn:hover {
background: var(--color-primary-light);
transform: translateY(-2px);
}
/* -------------------------------------------
Volunteer Section
------------------------------------------- */
.ych-volunteer-section {
background: var(--section-bg-primary);
}
.ych-volunteer-section .volunteer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.volunteer-form {
background: var(--color-card-bg);
border: 1px solid var(--border-color);
border-radius: var(--card-radius);
padding: var(--space-xl);
}
.volunteer-form .form-title {
font-family: var(--font-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-block-end: var(--space-lg);
}
.volunteer-form .form-group {
margin-block-end: var(--space-md);
}
.volunteer-form label {
display: block;
font-family: var(--font-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
margin-block-end: var(--space-xs);
}
.volunteer-form input,
.volunteer-form select,
.volunteer-form textarea {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border-color);
border-radius: var(--input-radius);
font-family: var(--font-primary);
font-size: var(--font-size-sm);
color: var(--text-primary);
background: var(--surface-base);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.volunteer-form input:focus,
.volunteer-form select:focus,
.volunteer-form textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.volunteer-form textarea {
min-height: 120px;
resize: vertical;
}
.volunteer-form .submit-btn {
width: 100%;
padding: var(--space-sm) var(--space-xl);
background: var(--color-primary);
color: var(--text-inverse);
border: none;
border-radius: var(--button-radius);
font-family: var(--font-primary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.volunteer-form .submit-btn:hover {
background: var(--color-primary-light);
transform: translateY(-2px);
}
/* -------------------------------------------
Partners Section
------------------------------------------- */
.ych-partners-section {
background: var(--section-bg-alt);
}
.partner-logo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-lg);
align-items: center;
justify-items: center;
}
.partner-logo-grid .partner-item {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
background: var(--color-card-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
transition: box-shadow var(--transition-normal), transform var(--transition-normal);
aspect-ratio: 16 / 9;
width: 100%;
}
.partner-logo-grid .partner-item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.partner-logo-grid .partner-item img {
max-width: 120px;
max-height: 60px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.6;
transition: filter var(--transition-normal), opacity var(--transition-normal);
}
.partner-logo-grid .partner-item:hover img {
filter: grayscale(0%);
opacity: 1;
}
/* -------------------------------------------
News Section
------------------------------------------- */
.ych-news-section {
background: var(--section-bg-primary);
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
gap: var(--space-lg);
}
.news-card {
background: var(--color-card-bg);
border: 1px solid var(--border-color);
border-radius: var(--card-radius);
overflow: hidden;
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.news-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.news-card .card-image {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.news-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.news-card:hover .card-image img {
transform: scale(1.08);
}
.news-card .card-body {
padding: var(--space-lg);
}
.news-card .card-date {
font-size: var(--font-size-xs);
color: var(--text-secondary);
margin-block-end: var(--space-xs);
}
.news-card .card-title {
font-family: var(--font-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-block-end: var(--space-sm);
}
.news-card .card-excerpt {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: var(--line-height-normal);
margin-block-end: var(--space-md);
}
.news-card .card-link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
transition: color var(--transition-fast);
}
.news-card .card-link:hover {
color: var(--color-primary-light);
}
/* -------------------------------------------
Zakat Section
------------------------------------------- */
.ych-zakat-section {
background: linear-gradient(
135deg,
var(--color-primary-dark) 0%,
var(--color-primary) 100%
);
color: var(--text-inverse);
position: relative;
overflow: hidden;
}
.ych-zakat-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle at 70% 30%,
color-mix(in srgb, var(--color-tertiary) 12%, transparent),
transparent 50%
);
pointer-events: none;
}
.ych-zakat-section .section-title {
color: var(--text-inverse);
}
.ych-zakat-section .section-subtitle {
color: color-mix(in srgb, var(--text-inverse) 85%, transparent);
}
.zakat-calculator {
background: color-mix(in srgb, var(--text-inverse) 10%);
backdrop-filter: blur(10px);
border: 1px solid color-mix(in srgb, var(--text-inverse) 15%);
border-radius: var(--card-radius);
padding: var(--space-xl);
max-width: 500px;
margin-inline: auto;
}
.zakat-calculator .calc-group {
margin-block-end: var(--space-md);
}
.zakat-calculator label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin-block-end: var(--space-xs);
color: color-mix(in srgb, var(--text-inverse) 90%, transparent);
}
.zakat-calculator input {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid color-mix(in srgb, var(--text-inverse) 20%);
border-radius: var(--input-radius);
background: color-mix(in srgb, var(--text-inverse) 8%);
color: var(--text-inverse);
font-family: var(--font-primary);
font-size: var(--font-size-base);
transition: border-color var(--transition-fast);
}
.zakat-calculator input:focus {
outline: none;
border-color: var(--color-tertiary);
}
.zakat-calculator input::placeholder {
color: color-mix(in srgb, var(--text-inverse) 40%);
}
/* -------------------------------------------
Program Cards (with Progress Bar)
------------------------------------------- */
.programs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: var(--space-lg);
}
.program-card {
background: var(--color-card-bg);
border: 1px solid var(--border-color);
border-radius: var(--card-radius);
overflow: hidden;
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.program-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.program-card .card-image {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.program-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.program-card:hover .card-image img {
transform: scale(1.08);
}
.program-card .card-category {
position: absolute;
inset-block-start: var(--space-sm);
inset-inline-start: var(--space-sm);
background: var(--color-primary);
color: var(--text-inverse);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
}
.program-card .card-body {
padding: var(--space-lg);
}
.program-card .card-title {
font-family: var(--font-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-block-end: var(--space-xs);
}
.program-card .card-description {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: var(--line-height-normal);
margin-block-end: var(--space-md);
}
.program-card .card-progress {
margin-block-end: var(--space-md);
}
.program-card .progress-info {
display: flex;
justify-content: space-between;
font-size: var(--font-size-xs);
color: var(--text-secondary);
margin-block-end: var(--space-xs);
}
.program-card .progress-info .progress-percent {
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.donation-progress-bar {
width: 100%;
height: var(--progress-bar-height);
background: var(--border-color);
border-radius: var(--progress-bar-radius);
overflow: hidden;
}
.donation-progress-bar .progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
border-radius: var(--progress-bar-radius);
transition: width var(--transition-slow);
}
.program-card .card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-block-start: var(--space-md);
border-block-start: 1px solid var(--border-color);
}
.program-card .card-goal {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.program-card .card-goal .goal-amount {
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.program-card .donate-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
background: var(--color-primary);
color: var(--text-inverse);
border: none;
border-radius: var(--button-radius);
font-family: var(--font-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.program-card .donate-btn:hover {
background: var(--color-primary-light);
transform: translateY(-2px);
}
/* -------------------------------------------
Charity Section Responsive (Mobile-first)
------------------------------------------- */
@media (max-width: 768px) {
.ych-volunteer-section .volunteer-grid {
grid-template-columns: 1fr;
}
.partner-logo-grid {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.sponsorship-grid,
.programs-grid,
.news-grid {
grid-template-columns: 1fr;
}
.ych-donation-cta .cta-amount-grid {
gap: var(--space-xs);
}
.zakat-calculator {
padding: var(--space-lg);
}
}
@media (max-width: 480px) {
.ych-section {
padding-block: var(--space-xl);
}
.ych-donation-cta .cta-amount-btn {
flex: 1 1 calc(50% - var(--space-xs));
text-align: center;
}
}
/* -------------------------------------------
prefers-reduced-motion
------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.sponsorship-card,
.program-card,
.news-card,
.partner-logo-grid .partner-item,
.program-card .card-image img,
.sponsorship-card .card-image img,
.news-card .card-image img {
transition: none;
}
.sponsorship-card:hover,
.program-card:hover,
.news-card:hover,
.partner-logo-grid .partner-item:hover {
transform: none;
}
.sponsorship-card:hover .card-image img,
.program-card:hover .card-image img,
.news-card:hover .card-image img {
transform: none;
}
.donation-progress-bar .progress-fill {
transition: none;
}
}
/* ============================================
HERO SLIDER (Swiper)
============================================ */
.hp1-swiper {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hp1-swiper .swiper-slide {
position: relative;
overflow: hidden;
}
.hp1-swiper .swiper-slide .hp1-image-bg {
position: absolute;
inset: 0;
}
.hp1-slider-pagination {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 10px;
}
.hp1-slider-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.4);
opacity: 1;
border-radius: 9999px;
transition: all 0.3s ease;
cursor: pointer;
}
.hp1-slider-pagination .swiper-pagination-bullet-active {
background: var(--color-tertiary, #D1915B);
width: 32px;
}
.hp1-slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.hp1-slider-nav::after {
content: '';
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
.hp1-slider-prev {
left: 24px;
}
.hp1-slider-prev::after {
transform: rotate(-135deg);
}
.hp1-slider-next {
right: 24px;
}
.hp1-slider-next::after {
transform: rotate(45deg);
}
[dir="rtl"] .hp1-slider-prev {
right: 24px;
left: auto;
}
[dir="rtl"] .hp1-slider-next {
left: 24px;
right: auto;
}
.hp1-slider-nav:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-50%) scale(1.08);
}
@media (max-width: 768px) {
.hp1-slider-nav {
width: 40px;
height: 40px;
}
.hp1-slider-prev { left: 12px; }
.hp1-slider-next { right: 12px; }
[dir="rtl"] .hp1-slider-prev { right: 12px; left: auto; }
[dir="rtl"] .hp1-slider-next { left: 12px; right: auto; }
.hp1-slider-pagination { bottom: 24px; }
}
/* ═══════════════════════════════════════════════════════════════
HOMEPAGE SECTION BACKGROUND MODES
Each section reads bg_mode from options via inline style/class.
COLOR DISTRIBUTION:
┌─────────────────────────────────────────────────┐
│ Hero: Dark overlay (gradient-hero) │
│ Stats: Dark bg, PRIMARY glow numbers │
│ About: Light bg, PRIMARY eyebrow & CTA │
│ Features: White bg, SECONDARY accent icons │
│ Programs: White bg, PRIMARY cards, TERTIARY nav│
│ CTA: Dark bg, SECONDARY gradient text │
│ Testimonials: TERTIARY tinted bg │
└─────────────────────────────────────────────────┘
═══════════════════════════════════════════════════════════════ */
/* ── Section bg mode classes ── */
.ych-section-bg--default { background: transparent; }
.ych-section-bg--light { background: var(--color-neutral-100, #f5f3f0); }
.ych-section-bg--dark { background: var(--color-dark, #121a2e); color: #fff; }
.ych-section-bg--custom { /* inline style */ }
.ych-section-bg--is-dark { color: #fff; }
.ych-section-bg--is-dark .section-title,
.ych-section-bg--is-dark .yre-section-title,
.ych-section-bg--is-dark h2,
.ych-section-bg--is-dark h3 { color: #fff; }
.ych-section-bg--is-dark p,
.ych-section-bg--is-dark .section-subtitle { color: rgba(255,255,255,0.7); }
.ych-section-bg--is-light { color: var(--color-text, #121a2e); }
/* ── STATS: Primary glow on dark ── */
.yre-stats-section .yre-stat-item .stat-number,
.yre-stats-section .stat-number,
.yre-stats-section .yre-stat-number {
color: var(--color-primary, #007aa1);
text-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.2);
}
.yre-stats-section .stat-label,
.yre-stats-section .yre-stat-label {
color: var(--color-neutral-600, #868e96);
}
.ych-section-bg--dark .yre-stats-section .stat-number,
.ych-section-bg--dark .yre-stats-section .yre-stat-number {
color: #fff;
text-shadow: 0 0 60px rgba(var(--color-primary-rgb), 0.35);
}
.ych-section-bg--dark .yre-stats-section .stat-label {
color: rgba(255,255,255,0.6);
}
/* ── ABOUT: Primary accent ── */
.yre-about-section .yre-about-title,
.yre-about-section .about-title {
color: var(--color-dark, #121a2e);
}
.yre-about-section .about-eyebrow,
.yre-about-section .yre-about-eyebrow {
color: var(--color-primary, #007aa1);
}
.yre-about-section .about-content,
.yre-about-section .yre-about-content {
color: var(--color-neutral-700, #495057);
}
/* ── FEATURES: Secondary accent ── */
.yre-features-section .feature-icon,
.yre-features-section .yre-feature-icon {
color: var(--color-secondary, #c67c55);
background: rgba(var(--color-secondary-rgb, 198,124,85), 0.08);
}
.yre-features-section .feature-title,
.yre-features-section .yre-feature-title {
color: var(--color-dark, #121a2e);
}
.yre-features-section .feature-text,
.yre-features-section .yre-feature-text {
color: var(--color-neutral-700, #495057);
}
/* ── PROGRAMS: Primary cards, Tertiary filter ── */
.yre-programs-section .programs-filter-nav .filter-btn.active,
.yre-programs-section .filter-btn.active {
background: var(--gradient-primary);
color: #fff;
}
.yre-programs-section .programs-filter-nav .filter-btn {
color: var(--color-neutral-600, #868e96);
border: 1px solid var(--border-subtle);
}
.yre-programs-section .program-card .program-title {
color: var(--color-dark, #121a2e);
}
.yre-programs-section .program-card .program-category {
color: var(--color-secondary, #c67c55);
}
.yre-programs-section .program-card:hover {
box-shadow: 0 8px 30px rgba(var(--color-primary-rgb), 0.12);
border-color: rgba(var(--color-primary-rgb), 0.15);
}
/* ── CTA: Secondary gradient text on dark ── */
.yre-cta-section .cta-title,
.yre-cta-section .yre-cta-title {
color: #fff;
}
.yre-cta-section .cta-subtitle,
.yre-cta-section .yre-cta-subtitle {
color: rgba(255,255,255,0.75);
}
.yre-cta-section .cta-btn,
.yre-cta-section .yre-cta-btn {
background: var(--color-secondary, #c67c55);
color: #fff;
box-shadow: 0 4px 20px rgba(var(--color-secondary-rgb), 0.3);
}
.yre-cta-section .cta-btn:hover {
background: var(--color-secondary-hover, #b06d49);
box-shadow: 0 8px 30px rgba(var(--color-secondary-rgb), 0.4);
transform: translateY(-2px);
}
/* ── TESTIMONIALS: Tertiary tint ── */
.yre-testimonials-section {
background: var(--color-tertiary-50, #f0faf8);
}
/* ── DARK MODE SECTION ADJUSTMENTS ── */
[data-theme="dark"] .ych-section-bg--light {
background: var(--color-neutral-100, #1a1a1a);
}
[data-theme="dark"] .ych-section-bg--default {
background: transparent;
}
[data-theme="dark"] .yre-features-section .feature-icon {
background: rgba(var(--color-secondary-rgb), 0.12);
}
[data-theme="dark"] .yre-features-section .feature-title {
color: #f0f0f0;
}
[data-theme="dark"] .yre-features-section .feature-text {
color: #a0a0a0;
}
[data-theme="dark"] .yre-about-section .yre-about-title,
[data-theme="dark"] .yre-about-section .about-title {
color: #f0f0f0;
}
[data-theme="dark"] .yre-about-section .about-content {
color: #b0b0b0;
}
[data-theme="dark"] .yre-programs-section .program-card {
background: #1e1e1e;
border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .yre-programs-section .program-card .program-title {
color: #f0f0f0;
}
[data-theme="dark"] .yre-programs-section .program-card .program-text {
color: #a0a0a0;
}
[data-theme="dark"] .yre-cta-section .cta-btn {
background: var(--color-secondary, #daa07a);
color: var(--color-dark, #121a2e);
}
/* ── LTR/RTL section fixes ── */
[dir="ltr"] .yre-about-grid,
.ltr .yre-about-grid {
direction: ltr;
}
[dir="rtl"] .yre-about-grid,
.rtl .yre-about-grid {
direction: rtl;
flex-direction: row-reverse;
}
[dir="ltr"] .yre-features-grid { direction: ltr; }
[dir="rtl"] .yre-features-grid { direction: rtl; }
[dir="ltr"] .yre-stats-grid { direction: ltr; }
[dir="rtl"] .yre-stats-grid { direction: rtl; }
/* --- footer.css --- */
/* ============================================
ULTRA-MODERN PREMIUM FOOTER
============================================ */
.realestate-footer {
position: relative;
border-top: 1px solid var(--footer-border);
padding-top: 0;
overflow: hidden;
background-color: var(--footer-bg) !important;
}
/* Footer Top Contact Cards */
.footer-top {
padding: 60px 0;
border-bottom: 1px solid var(--footer-border);
}
.footer-contact-cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
}
.footer-contact-card {
display: flex;
align-items: center;
gap: 20px;
padding: 25px;
background: var(--stats-card-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--footer-border);
border-radius: 20px;
transition: all 0.3s ease;
}
.footer-contact-card:hover {
transform: translateY(-5px);
border-color: var(--color-primary);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.contact-card-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
flex-shrink: 0;
}
.contact-card-icon svg {
width: 24px;
height: 24px;
}
.contact-card-info h5 {
font-size: 0.9rem;
color: var(--color-text-muted);
margin: 0 0 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-card-info a,
.contact-card-info span {
font-size: 1.1rem;
font-weight: 700;
color: var(--footer-title);
text-decoration: none;
}
/* Footer Main Interior */
.footer-main {
padding: 100px 0;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 60px;
}
@media (min-width: 1025px) {
.footer-grid.cols-4 {
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
}
.footer-grid.cols-3 {
grid-template-columns: 1.5fr 1fr 1.5fr;
}
.footer-grid.cols-2 {
grid-template-columns: 1.5fr 1fr;
}
}
.footer-widget-title {
color: var(--footer-title) !important;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 30px;
position: relative;
padding-bottom: 15px;
}
.footer-widget-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: var(--color-primary);
border-radius: 2px;
}
[dir="rtl"] .footer-widget-title::after {
left: auto;
right: 0;
}
.footer-bio {
color: var(--footer-text) !important;
line-height: 1.8;
margin: 25px 0 30px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
}
.footer-logo .logo-icon {
color: var(--color-primary);
}
.footer-logo .logo-text {
font-size: 1.5rem;
font-weight: 800;
color: var(--footer-title) !important;
letter-spacing: -0.5px;
}
/* Social Icons */
.footer-social-wrap {
display: flex;
gap: 12px;
}
.footer-social-link {
width: 44px;
height: 44px;
background: var(--stats-card-bg);
border: 1px solid var(--footer-border);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--footer-text);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.footer-social-link:hover {
background: var(--color-primary);
color: #FFFFFF;
transform: translateY(-5px) scale(1.1);
box-shadow: 0 10px 20px rgba(var(--color-primary-rgb), 0.3);
border-color: var(--color-primary);
}
/* Nav & Lists */
.footer-nav {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nav li {
margin-bottom: 15px;
}
.footer-nav a {
color: var(--footer-text);
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
}
.footer-nav a:hover {
color: var(--color-primary);
transform: translateX(8px);
}
[dir="rtl"] .footer-nav a:hover {
transform: translateX(-8px);
}
/* Project List - Ultra Modern */
.footer-projects-modern {
display: flex;
flex-direction: column;
gap: 15px;
}
.footer-project-card a {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
padding: 10px;
border-radius: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
border: 1px solid transparent;
}
.footer-project-card a:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
transform: translateX(10px);
}
body.light-mode .footer-project-card a:hover {
background: rgba(0, 75, 107, 0.05);
border-color: rgba(0, 75, 107, 0.1);
}
.project-card-thumb {
width: 64px;
height: 64px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.project-card-thumb::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
opacity: 0;
transition: opacity 0.3s ease;
}
.footer-project-card a:hover .project-card-thumb::after {
opacity: 1;
}
.project-card-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.project-card-title {
display: block;
color: var(--footer-title) !important;
font-weight: 600;
font-size: 0.9rem;
line-height: 1.5;
transition: all 0.3s ease;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.footer-project-card a:hover .project-card-title {
color: var(--color-primary) !important;
}
.project-card-date {
font-size: 0.75rem;
color: var(--footer-text) !important;
opacity: 0.6;
font-weight: 400;
}
[dir="rtl"] .footer-project-card a:hover {
transform: translateX(-10px);
}
/* Newsletter */
.footer-newsletter p {
color: var(--footer-text) !important;
margin-bottom: 25px;
line-height: 1.7;
opacity: 0.8;
}
.newsletter-input-group {
display: flex;
background: var(--stats-card-bg);
border: 1px solid var(--footer-border);
border-radius: 15px;
padding: 5px;
transition: all 0.3s ease;
}
.newsletter-input-group:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1);
}
.newsletter-input-group input {
flex: 1;
background: transparent;
border: none;
padding: 12px 15px;
color: var(--footer-title);
outline: none;
}
.newsletter-input-group button {
width: 48px;
height: 48px;
background: var(--color-primary) !important;
border: none;
border-radius: 12px;
color: #FFFFFF !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.newsletter-input-group button svg {
stroke: #FFFFFF !important;
width: 20px;
height: 20px;
}
.newsletter-input-group button:hover {
filter: brightness(1.1);
transform: scale(1.05);
}
/* Footer Bottom */
.footer-bottom {
padding: 30px 0;
border-top: 1px solid var(--footer-border);
color: var(--color-text-muted);
font-size: 0.9rem;
}
.footer-bottom-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-bottom-links {
display: flex;
gap: 25px;
}
.footer-bottom-links a {
color: var(--color-text-muted);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-bottom-links a:hover {
color: var(--color-primary);
}
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
@media (max-width: 768px) {
.footer-contact-cards {
grid-template-columns: 1fr;
gap: 20px;
}
.footer-main {
padding: 60px 0;
}
.footer-grid {
grid-template-columns: 1fr !important;
gap: 40px;
}
.footer-bottom-flex {
flex-direction: column;
gap: 20px;
text-align: center;
}
}
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================ */
/* LAYER: 5-premium */
/* ============================================================ */
/* --- premium.css --- */
/* ============================================
PREMIUM LUXURY DESIGN SYSTEM - FINAL
Charity Edition — all colours from tokens
============================================ */
/* No :root overrides — design-tokens.css is the single source of truth */
/* Body styles handled by theme — no override */
.container {
max-width: var(--container-wide, 1400px);
margin: 0 auto;
padding: 0 var(--container-padding, clamp(16px, 3vw, 40px));
}
/* HEADER */
.realestate-header {
height: 90px;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
border-bottom: 1px solid var(--border-subtle);
}
.realestate-header.transparent {
background: transparent;
border-bottom: none;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.header-logo a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--text-inverse) !important;
}
.logo-icon svg {
color: var(--color-accent);
width: 35px;
height: 35px;
}
.logo-name {
font-size: 1.6rem;
font-weight: 900;
letter-spacing: -0.5px;
}
.header-nav .nav-menu {
display: flex;
gap: 35px;
list-style: none;
margin: 0;
padding: 0;
}
.header-nav a {
color: var(--text-inverse) !important;
font-weight: 700;
font-size: 1.05rem;
text-decoration: none;
transition: color 0.3s;
}
.header-nav a:hover {
color: var(--color-accent) !important;
}
.header-cta {
background: var(--color-accent);
color: var(--text-inverse) !important;
padding: 12px 30px;
border-radius: 50px;
font-weight: 800;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
transition: background 0.3s;
}
.header-cta:hover {
background: var(--color-accent-dark);
}
button.header-cta,
button.mobile-cta {
border: none;
cursor: pointer;
font: inherit;
appearance: none;
-webkit-appearance: none;
text-align: inherit;
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.header-hotline {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text-inverse);
border: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
backdrop-filter: blur(10px);
border-radius: 999px;
padding: 8px 14px;
min-height: 44px;
transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.header-hotline:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--color-accent) 70%, white 30%);
background: color-mix(in srgb, var(--bg-primary) 60%, transparent);
}
.header-hotline-icon {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gradient-accent);
color: #fff;
flex-shrink: 0;
}
.header-hotline-content {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.header-hotline-label {
font-size: 0.68rem;
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.header-hotline-number {
font-size: 0.92rem;
font-weight: 800;
color: #fff;
}
/* ULTRA MODERN THEME TOGGLE */
.theme-toggle-item {
display: flex;
align-items: center;
margin-right: 20px;
}
.theme-toggle {
background: transparent;
border: 1px solid var(--border-subtle);
color: var(--text-inverse);
width: 40px;
height: 40px;
border-radius: 50%;
/* Circle for ultra modern look */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
backdrop-filter: blur(5px);
}
/* PURE JS GALLERY */
.yre-pure-gallery {
position: relative;
width: 100%;
margin-bottom: 40px;
overflow: hidden;
}
.gallery-main {
position: relative;
height: 500px;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.gallery-track {
display: flex;
height: 100%;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
flex-direction: row;
/* Simplest for translation math */
}
.gallery-slide {
min-width: 100%;
height: 100%;
position: relative;
}
.gallery-slide img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: zoom-in;
transition: transform 0.5s ease;
}
.gallery-slide:hover img {
transform: scale(1.05);
}
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
border-radius: 50%;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
}
.gallery-nav:hover {
background: var(--color-primary);
transform: translateY(-50%) scale(1.1);
}
.gallery-nav.prev {
left: 20px;
}
.gallery-nav.next {
right: 20px;
}
/* RTL Overrides for Arrows */
.yre-pure-gallery[dir="rtl"] .gallery-nav.prev,
.rtl .yre-pure-gallery .gallery-nav.prev {
left: auto;
right: 20px;
}
.yre-pure-gallery[dir="rtl"] .gallery-nav.next,
.rtl .yre-pure-gallery .gallery-nav.next {
right: auto;
left: 20px;
}
.gallery-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.gallery-dots .dot {
width: 10px;
height: 10px;
background: rgba(var(--color-primary-rgb), 0.2);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
.gallery-dots .dot.active {
background: var(--color-primary);
width: 30px;
border-radius: 10px;
}
@media (max-width: 768px) {
.yre-pure-gallery {
margin-bottom: 30px;
width: auto !important;
margin-left: -20px !important;
margin-right: -20px !important;
overflow: hidden;
}
.gallery-main {
height: 300px !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.gallery-track {
display: flex !important;
flex-wrap: nowrap !important;
flex-direction: row !important;
}
.gallery-nav,
.zoom-hint {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.gallery-dots {
margin-top: 15px;
gap: 6px;
}
.gallery-dots .dot {
width: 6px;
height: 6px;
}
.gallery-dots .dot.active {
width: 15px;
}
}
.zoom-hint {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
border-radius: 50%;
pointer-events: none;
opacity: 0;
transform: scale(0.8);
transition: all 0.3s ease;
}
.gallery-slide:hover .zoom-hint {
opacity: 1;
transform: scale(1);
}
/* PURE JS LIGHTBOX */
/* ADVANCED PURE JS LIGHTBOX */
.yre-pure-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(15px);
z-index: 10000;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.yre-pure-lightbox.active {
display: flex;
opacity: 1;
}
.lightbox-toolbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10100;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
}
.lb-counter {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
}
.lb-actions {
display: flex;
align-items: center;
gap: 12px;
}
.lb-action-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.lb-action-btn:hover {
background: var(--color-primary);
transform: scale(1.1);
}
.lightbox-close {
font-size: 38px;
color: #fff;
cursor: pointer;
margin-left: 10px;
line-height: 1;
transition: 0.3s;
}
.lightbox-close:hover {
color: var(--color-primary);
}
.lightbox-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
padding: 60px 40px;
}
.lightbox-img-wrapper {
position: relative;
max-width: 90%;
max-height: 90%;
transition: transform 0.1s ease-out;
cursor: grab;
}
.lightbox-img-wrapper:active {
cursor: grabbing;
}
.lightbox-img-wrapper img {
max-width: 100%;
max-height: 100%;
height: auto;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
pointer-events: none;
user-select: none;
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
width: 60px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
z-index: 10050;
transition: all 0.3s ease;
}
.lightbox-nav:hover {
background: var(--color-primary);
width: 70px;
}
.lightbox-nav.prev {
left: 0;
border-radius: 0 8px 8px 0;
}
.lightbox-nav.next {
right: 0;
border-radius: 8px 0 0 8px;
}
@media (max-width: 768px) {
.yre-pure-lightbox {
z-index: 1000000 !important;
}
.lightbox-toolbar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
padding: calc(15px + env(safe-area-inset-top, 0px)) 20px 15px !important;
background: #000 !important;
/* Solid black for maximum contrast */
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
z-index: 1000020 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
height: auto !important;
min-height: 75px !important;
}
.lb-actions {
display: flex !important;
flex-wrap: nowrap !important;
gap: 12px !important;
align-items: center !important;
}
.lb-action-btn {
width: 46px !important;
height: 46px !important;
background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--color-white) !important;
}
.lb-action-btn svg {
width: 24px !important;
height: 24px !important;
stroke: var(--color-white) !important;
stroke-width: 3px !important;
display: block !important;
}
.lightbox-close {
font-size: 44px !important;
color: var(--color-white) !important;
line-height: 1 !important;
margin-left: 15px !important;
font-weight: bold !important;
display: block !important;
}
.lb-counter {
color: var(--color-white) !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 1px !important;
}
.lightbox-content {
padding: 100px 10px 40px !important;
height: 100% !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.lightbox-img-wrapper {
max-width: 95% !important;
max-height: 75vh !important;
/* Force smaller height to leave room for toolbar */
}
.lightbox-img-wrapper img {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}
.lightbox-nav {
display: flex !important;
z-index: 1000030 !important;
width: 50px !important;
height: 80px !important;
background: rgba(0, 0, 0, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
}
.theme-toggle::before {
content: '';
position: absolute;
inset: 0;
background: rgba(var(--color-primary-rgb), 0.05);
opacity: 0.5;
z-index: -1;
transition: opacity 0.3s;
}
.theme-toggle:hover {
border-color: var(--color-accent);
transform: rotate(15deg) scale(1.1);
box-shadow: 0 0 15px rgba(240, 90, 40, 0.3);
}
.theme-toggle:hover::before {
opacity: 1;
}
.theme-toggle svg {
width: 18px;
height: 18px;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
}
.theme-toggle .icon-sun {
position: absolute;
transform: translateY(30px);
opacity: 0;
}
.theme-toggle .icon-moon {
position: absolute;
transform: translateY(0);
opacity: 1;
}
body.light-mode .theme-toggle .icon-sun {
transform: translateY(0);
opacity: 1;
}
body.light-mode .theme-toggle .icon-moon {
transform: translateY(-30px);
opacity: 0;
}
/* MOBILE MENU HIDE BY DEFAULT */
.mobile-menu {
display: none;
position: fixed;
inset: 0;
background: var(--bg-primary);
z-index: 9998;
padding: 120px 40px;
}
.mobile-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
flex-direction: column;
gap: 6px;
}
.mobile-toggle span {
width: 30px;
height: 3px;
background: white;
border-radius: 3px;
}
.mobile-hotline {
margin-top: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text-inverse);
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 12px 14px;
min-height: 44px;
}
/* Mobile drawer: primary links + language + theme + CTA + hotline */
@media (max-width: 1024px) {
.mobile-menu-inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 420px;
margin-inline: auto;
padding: 1rem 1.25rem 2rem;
padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
}
.mobile-nav-menu {
display: flex;
flex-direction: column;
gap: 0.4rem;
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav-menu > li {
margin: 0;
padding: 0;
border: 0;
}
.mobile-nav-menu > li:not(.trp-language-switcher-container):not(.theme-toggle-item) .menu-link {
display: flex;
align-items: center;
min-height: 48px;
padding: 0.65rem 1rem;
border-radius: 12px;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-inverse);
text-decoration: none;
background: rgba(var(--color-primary-rgb), 0.05);
border: 1px solid transparent;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.mobile-nav-menu > li:not(.trp-language-switcher-container):not(.theme-toggle-item) .menu-link:hover,
.mobile-nav-menu > li:not(.trp-language-switcher-container):not(.theme-toggle-item) .menu-link:focus-visible {
background: rgba(255, 255, 255, 0.08);
border-color: var(--border-subtle);
outline: none;
}
.mobile-nav-menu > li.current-menu-item:not(.trp-language-switcher-container) .menu-link {
background: linear-gradient(135deg, rgba(240, 90, 40, 0.2) 0%, rgba(240, 90, 40, 0.08) 100%);
border-color: rgba(240, 90, 40, 0.45);
color: var(--color-accent);
}
.mobile-nav-menu .trp-language-switcher-container .menu-link {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 48px;
padding: 0.5rem 1rem;
margin-top: 0.25rem;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.03);
border: 1px dashed var(--border-subtle);
}
.mobile-nav-menu .trp-language-switcher-container .trp-flag-image {
border-radius: 2px;
flex-shrink: 0;
}
.mobile-nav-menu li.theme-toggle-item {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 0.35rem 0;
margin-top: 0.25rem;
border-top: 1px solid var(--border-subtle);
}
.mobile-nav-menu .menu-theme-toggle,
.mobile-nav-menu .theme-toggle {
margin-inline-start: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--border-subtle);
background: rgba(var(--color-primary-rgb), 0.05);
color: var(--text-inverse);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.mobile-nav-menu .menu-theme-toggle:hover,
.mobile-nav-menu .theme-toggle:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(240, 90, 40, 0.4);
}
.mobile-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
margin: 0;
padding: 0.9rem 1.25rem;
border: none;
border-radius: 14px;
font-family: inherit;
font-size: 1rem;
font-weight: 800;
color: #fff;
background: var(--gradient-accent);
box-shadow: 0 12px 28px rgba(240, 90, 40, 0.35);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.mobile-cta:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(240, 90, 40, 0.45);
}
.mobile-cta .cta-icon {
display: inline-flex;
}
.mobile-hotline {
margin-top: 0;
width: 100%;
justify-content: flex-start;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.04);
}
}
body.light-mode .mobile-nav-menu > li:not(.trp-language-switcher-container):not(.theme-toggle-item) .menu-link {
color: var(--color-dark, #0d1b2a);
background: rgba(13, 27, 42, 0.06);
}
body.light-mode .mobile-nav-menu > li.current-menu-item:not(.trp-language-switcher-container) .menu-link {
color: var(--color-accent);
background: rgba(240, 90, 40, 0.12);
}
body.light-mode .mobile-nav-menu .trp-language-switcher-container .menu-link {
color: var(--color-text-light, #6c757d);
background: rgba(13, 27, 42, 0.04);
}
@media (max-width: 1024px) {
.header-nav,
.header-cta,
.header-hotline {
display: none;
}
.mobile-toggle {
display: flex;
}
.container {
padding: 0 20px;
}
}
html[dir="ltr"] .header-hotline-content {
text-align: left;
}
/* HERO */
.realestate-hero,
.single-hero {
min-height: 50vh;
padding-top: 150px;
padding-bottom: 80px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-overlay,
.single-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, var(--bg-primary) 0%, rgba(0, 0, 0, 0.6) 100%);
z-index: 1;
}
.hero-content-wrap {
position: relative;
z-index: 2;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.section-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 900;
margin-bottom: 20px;
}
.section-subtitle {
font-size: 1.25rem;
color: var(--color-accent);
font-weight: 700;
}
.section-subtitle-description {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
max-width: 800px;
margin: 0 auto;
}
/* ARCHIVE RESPONSIVE */
/* ============================================
ULTRA MODERN ARCHIVE & FILTERS
============================================ */
.archive-layout {
display: grid;
grid-template-columns: 360px 1fr;
gap: 50px;
padding: 80px 0;
align-items: start;
}
@media (max-width: 1200px) {
.archive-layout {
grid-template-columns: 320px 1fr;
gap: 24px;
}
}
@media (max-width: 1100px) {
.archive-layout {
grid-template-columns: 1fr;
}
.filters-sidebar {
margin-bottom: 40px;
position: relative !important;
top: 0 !important;
}
}
.filters-sidebar {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 40px;
padding: 45px 35px;
position: sticky;
top: 120px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
z-index: 100;
}
.filter-group-title {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.6rem;
font-weight: 900;
margin-bottom: 40px;
color: var(--text-inverse);
}
.filter-group-title svg {
color: var(--color-accent);
filter: drop-shadow(0 0 8px rgba(240, 90, 40, 0.5));
}
.filter-group {
margin-bottom: 35px;
}
.stat-label {
display: block;
font-size: 0.95rem;
font-weight: 800;
color: var(--text-secondary);
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ============================================
ULTRA MODERN FILTER SIDEBAR
============================================ */
.filters-sidebar {
background: #17172B !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 24px !important;
padding: 30px !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
color: var(--text-inverse) !important;
}
.filter-group-title {
color: var(--text-inverse) !important;
font-size: 1.5rem !important;
font-weight: 800 !important;
margin-bottom: 30px !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
}
.filter-group-title svg {
color: var(--color-accent) !important;
}
.stat-label {
display: block !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.6) !important;
margin-bottom: 12px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
/* SEARCH & DROPDOWNS */
.filter-control {
width: 100% !important;
padding: 4px 20px !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 14px !important;
color: var(--text-inverse) !important;
font-family: var(--font-secondary, 'Tajawal'), var(--font-primary, 'Cairo'), sans-serif !important;
font-size: 1rem !important;
font-weight: 600 !important;
outline: none !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: left 15px center !important;
}
.filter-control:focus {
border-color: rgba(255, 255, 255, 0.4) !important;
}
.filter-control option {
background: #17172B !important;
color: var(--text-inverse) !important;
}
/* TOGGLE BUTTONS - MODERN NEUTRAL */
.filter-toggle-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
margin-bottom: 25px !important;
}
.toggle-btn {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
color: rgba(255, 255, 255, 0.5) !important;
padding: 12px 5px !important;
border-radius: 10px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
font-size: 0.85rem !important;
text-align: center !important;
}
.toggle-btn:hover {
background: rgba(255, 255, 255, 0.08) !important;
color: var(--text-inverse) !important;
}
.toggle-btn.active {
background: white !important;
color: #17172B !important;
border-color: var(--text-inverse) !important;
}
/* PRICE SLIDER */
.price-slider-wrap {
padding: 20px 0 !important;
}
.price-range-input {
width: 100% !important;
background: rgba(255, 255, 255, 0.1) !important;
height: 6px !important;
border-radius: 10px !important;
appearance: none !important;
}
.price-labels {
display: flex !important;
justify-content: space-between !important;
margin-top: 15px !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.4) !important;
}
/* ACTIONS */
.filter-actions {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
margin-top: 30px !important;
}
.apply-filter-btn {
background: var(--color-accent) !important;
color: var(--text-inverse) !important;
padding: 16px !important;
border: none !important;
border-radius: 14px !important;
font-weight: 800 !important;
cursor: pointer !important;
transition: transform 0.3s !important;
}
.apply-filter-btn:hover {
transform: translateY(-3px) !important;
}
.reset-filter-btn {
background: transparent !important;
color: rgba(255, 255, 255, 0.4) !important;
padding: 12px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
}
/* ============================================
PROJECT CARDS - ULTRA MODERN UI/UX
============================================ */
/* Respect options panel columns via --columns / --yre-project-columns (plugin inline + section markup). */
.projects-grid,
.projects-grid-large {
display: grid;
grid-template-columns: repeat(var(--columns, var(--yre-project-columns, 3)), minmax(0, 1fr));
gap: clamp(18px, 2.5vw, 35px);
width: 100%;
align-items: stretch;
}
.project-card {
background: rgba(255, 255, 255, 0.03) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 30px !important;
overflow: hidden !important;
height: 100% !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
/* Critical: Remove all padding */
margin: 0 !important;
/* Static premium look, no hover effects */
transition: none !important;
transform: none !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
.project-card:hover {
transform: none !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
.project-image {
width: 100% !important;
height: 320px !important;
position: relative !important;
overflow: hidden !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: #0D1117 !important;
padding: 0 !important;
margin: 0 !important;
}
.project-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: none !important;
transform: none !important;
}
.project-image::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%) !important;
z-index: 1 !important;
transition: none !important;
}
.project-card:hover .project-image::before,
.project-card:hover .project-image img {
inset: 0 !important;
border: none !important;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%) !important;
transform: none !important;
}
.project-content {
padding: 30px !important;
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
background: transparent !important;
}
.project-title {
font-size: 1.6rem !important;
font-weight: 900 !important;
color: var(--text-inverse) !important;
margin-bottom: 15px !important;
letter-spacing: -0.5px !important;
}
.project-location {
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: rgba(255, 255, 255, 0.5) !important;
font-size: 0.95rem !important;
margin-bottom: 25px !important;
font-weight: 600 !important;
}
.project-price {
font-size: 1.5rem !important;
font-weight: 900 !important;
background: var(--gradient-accent) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 0 !important;
}
.project-badge {
position: absolute !important;
top: 25px !important;
right: 25px !important;
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #f8f9fa !important;
/* Truly neutral off-white for all modes */
padding: 8px 20px !important;
border-radius: 50px !important;
font-weight: 800 !important;
font-size: 0.8rem !important;
z-index: 10 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
@media (max-width: 991px) {
.archive-layout {
display: block !important;
}
.filters-sidebar {
margin-bottom: 50px !important;
}
}
@media (max-width: 768px) {
.projects-grid,
.projects-grid-large {
grid-template-columns: minmax(0, 1fr);
gap: 25px;
}
.project-card {
border-radius: 24px !important;
}
}
/* ============================================
ULTRA-MODERN STATS SECTION
============================================ */
.yre-stats {
position: relative;
padding: 60px 0 !important;
overflow: hidden;
background: var(--color-dark) !important;
color: var(--text-inverse);
}
.yre-stats::before {
content: '';
position: absolute;
inset: 0;
background: var(--stats-mesh-bg);
z-index: 0;
}
.yre-stats .container {
position: relative;
z-index: 1;
}
.yre-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.yre-stat-item {
background: var(--stats-card-bg) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--stats-card-border) !important;
border-radius: 30px;
padding: 28px 20px;
text-align: center;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative;
}
.yre-stat-item:hover {
transform: translateY(-6px) scale(1.01) !important;
background: rgba(255, 255, 255, 0.1) !important;
border-color: transparent;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2) !important;
}
body.light-mode .yre-stat-item:hover {
background: var(--color-white) !important;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1) !important;
}
.yre-stat-icon {
width: 64px !important;
height: 64px !important;
background: linear-gradient(135deg, #d65231, #006e91) !important;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
position: relative;
}
.yre-stat-icon svg {
width: 28px;
height: 28px;
color: #ffffff !important;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.yre-stat-number {
font-size: 2.25rem !important;
font-weight: 800 !important;
background: linear-gradient(135deg, #ffffff, #E0AD80);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
display: block;
line-height: 1;
letter-spacing: -2px;
}
body.light-mode .yre-stat-number {
background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
-webkit-background-clip: text;
}
.yre-stat-label {
font-family: var(--font-primary);
font-size: 1.125rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.5px;
text-transform: uppercase;
}
@keyframes yreFloat {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(5deg);
}
}
@media (max-width: 1024px) {
.yre-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.yre-stats-grid {
grid-template-columns: 1fr;
}
.yre-stat-item {
padding: 40px 20px;
}
}
/* --- premium-visual-layer.css --- */
/**
* ═══════════════════════════════════════════════════════════════
* PREMIUM VISUAL TRANSFORM — Nonprofit Excellence Layer v2.0
* ═══════════════════════════════════════════════════════════════
*
* Clean rewrite. Uses proper specificity, no pseudo-element conflicts.
* All colors via design-tokens.css custom properties — never hardcoded.
* Respects existing main.css / sections.css / premium-standalone.css.
*
* Architecture:
* 1. Section backgrounds (distinct, no overlap with sections.css)
* 2. Stat cards (glassmorphism)
* 3. Feature cards (solid premium)
* 4. Program cards (image + overlay)
* 5. Section headers & badges
* 6. Hero enhancements
* 7. CTA enhancements
* 8. Buttons & interactions
* 9. Swiper carousel
* 10. Animations
* 11. Responsive
* 12. Reduced motion
* ═══════════════════════════════════════════════════════════════
*/
/* ─────────────────────────────────────────────
1. SECTION BACKGROUNDS
Distinct backgrounds per section — override sections.css nth-of-type
═══════════════════════════════════════════ */
/* Stats: Dark premium with mesh gradient + dot grid */
.yre-stats {
background:
radial-gradient(ellipse 80% 60% at 20% 40%, rgba(var(--color-primary-rgb), 0.12) 0%, transparent 50%),
radial-gradient(ellipse 60% 80% at 80% 60%, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 50%),
radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
var(--color-dark) !important;
background-size: 100% 100%, 100% 100%, 48px 48px, 100% !important;
position: relative;
overflow: hidden;
}
/* About: Warm tinted */
.yre-about {
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-white)) !important;
position: relative;
}
/* About image decorative offset frame — override sections.css basic gradient */
.yre-about-image-wrapper::before {
content: '';
position: absolute;
inset: -8px;
border-radius: calc(var(--radius-2xl, 32px) + 8px);
background: var(--gradient-primary);
z-index: -1;
opacity: 0.25;
}
/* About section — decorative corner accent */
.yre-about .container::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.06) 0%, transparent 70%);
top: -80px;
inset-inline-end: -100px;
z-index: 0;
pointer-events: none;
}
/* Features: Accent tinted with subtle mesh gradient */
.yre-features {
background:
radial-gradient(ellipse 50% 50% at 10% 20%, rgba(var(--color-primary-rgb), 0.04) 0%, transparent 50%),
radial-gradient(ellipse 40% 40% at 85% 70%, rgba(var(--color-accent-rgb), 0.04) 0%, transparent 50%),
color-mix(in srgb, var(--color-accent) 4%, var(--color-white)) !important;
position: relative;
}
/* CTA: Bold gradient */
.yre-cta {
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, var(--color-accent)) 100%) !important;
position: relative;
}
/* Programs: Clean white with subtle dot grid */
.yre-programs {
background:
radial-gradient(circle, rgba(var(--color-primary-rgb), 0.03) 1px, transparent 1px),
var(--color-white) !important;
background-size: 32px 32px, 100% 100% !important;
position: relative;
}
/* ─────────────────────────────────────────────
2. STAT CARDS — Glassmorphism on dark
═══════════════════════════════════════════ */
.yre-stat-item {
background: rgba(255, 255, 255, 0.06) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: var(--radius-xl) !important;
padding: 1.5rem 1rem !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background 0.4s ease;
}
.yre-stat-item:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.yre-stat-icon {
width: 64px !important;
height: 64px !important;
margin-inline: auto;
margin-bottom: var(--sp-4);
background: linear-gradient(135deg, #d65231, #006e91) !important;
border-radius: var(--radius-lg) !important;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.yre-stat-item:hover .yre-stat-icon {
transform: scale(1.1) rotate(-3deg);
box-shadow: 0 8px 24px rgba(var(--color-secondary-rgb), 0.25);
}
.yre-stat-number {
font-size: clamp(2rem, 4vw, 3rem) !important;
font-weight: var(--fw-extrabold) !important;
color: transparent;
line-height: 1.1 !important;
margin-bottom: var(--sp-2);
letter-spacing: -0.02em;
}
.yre-stat-label {
color: rgba(255, 255, 255, 0.75) !important;
font-size: var(--font-size-sm) !important;
font-weight: var(--fw-medium) !important;
}
/* ─────────────────────────────────────────────
3. FEATURE CARDS — Solid premium
═══════════════════════════════════════════ */
.yre-feature-card {
position: relative;
z-index: 1;
background: var(--color-white) !important;
border-radius: var(--radius-xl) !important;
padding: var(--sp-10) var(--sp-8) !important;
border: 1px solid rgba(var(--color-primary-rgb), 0.06) !important;
box-shadow: 0 4px 24px rgba(var(--color-primary-rgb), 0.06) !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.4s ease;
overflow: hidden;
text-align: center;
}
/* Top gradient accent line on hover */
.yre-feature-card::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
}
.yre-feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 48px rgba(var(--color-primary-rgb), 0.12) !important;
border-color: rgba(var(--color-accent-rgb), 0.15) !important;
}
.yre-feature-card:hover::before {
transform: scaleX(1);
}
.yre-feature-icon {
width: 72px !important;
height: 72px !important;
margin: 0 auto var(--sp-6);
background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1), rgba(var(--color-accent-rgb), 0.08)) !important;
border-radius: var(--radius-xl) !important;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary) !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background 0.4s ease,
color 0.4s ease;
}
.yre-feature-card:hover .yre-feature-icon {
background: var(--gradient-primary) !important;
color: var(--color-white) !important;
transform: scale(1.1) rotate(-3deg);
box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.25);
}
.yre-feature-title {
font-size: var(--font-size-lg) !important;
font-weight: var(--fw-bold) !important;
color: var(--color-dark) !important;
margin-bottom: var(--sp-3) !important;
}
.yre-feature-desc {
color: var(--text-secondary) !important;
font-size: var(--font-size-sm) !important;
line-height: var(--lh-relaxed) !important;
}
/* ─────────────────────────────────────────────
4. PROGRAM CARDS — Premium with image hover
═══════════════════════════════════════════ */
.program-card {
position: relative;
z-index: 1;
background: var(--color-white) !important;
border-radius: var(--radius-xl) !important;
overflow: hidden;
border: 1px solid rgba(var(--color-primary-rgb), 0.06) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.4s ease;
display: flex;
flex-direction: column;
}
/* Animated top border */
.program-card::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 3;
}
.program-card:hover {
transform: translateY(-10px);
box-shadow: 0 24px 56px rgba(var(--color-primary-rgb), 0.12), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
border-color: rgba(var(--color-accent-rgb), 0.12) !important;
}
.program-card:hover::before {
transform: scaleX(1);
}
/* Card image */
.program-card-image {
position: relative;
overflow: hidden;
aspect-ratio: 16/10;
}
.program-card-image img {
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
height: 100%;
object-fit: cover;
}
.program-card:hover .program-card-image img {
transform: scale(1.08);
}
.program-card-image-overlay {
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4) 100%) !important;
}
/* Card content */
.program-card-content {
padding: var(--sp-8) !important;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.program-card-icon {
width: 60px !important;
height: 60px !important;
background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1), rgba(var(--color-accent-rgb), 0.06)) !important;
color: var(--color-primary) !important;
border-radius: var(--radius-lg) !important;
margin-bottom: var(--sp-5) !important;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, background 0.3s ease;
}
.program-card:hover .program-card-icon {
background: var(--gradient-primary) !important;
color: var(--color-white) !important;
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.2);
}
.program-card-content h3 {
font-size: var(--font-size-lg) !important;
font-weight: var(--fw-bold) !important;
color: var(--color-dark) !important;
margin-bottom: var(--sp-3) !important;
line-height: 1.4 !important;
}
.program-card-content p {
color: var(--text-secondary) !important;
font-size: var(--font-size-sm) !important;
line-height: var(--lh-relaxed) !important;
margin-bottom: var(--sp-5) !important;
flex: 1;
}
/* Learn More button */
.program-card .ych-program-learn-btn,
.program-card-footer a {
padding: 12px 24px !important;
background: rgba(var(--color-primary-rgb), 0.06) !important;
border: 1px solid rgba(var(--color-primary-rgb), 0.1) !important;
border-radius: var(--radius-lg) !important;
color: var(--color-primary) !important;
font-weight: var(--fw-bold) !important;
font-size: var(--font-size-sm) !important;
transition: all 0.3s ease !important;
width: 100%;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: auto;
}
.program-card .ych-program-learn-btn:hover,
.program-card-footer a:hover {
background: var(--gradient-primary) !important;
color: var(--color-white) !important;
border-color: transparent !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.2);
}
/* ─────────────────────────────────────────────
5. SECTION HEADERS & BADGES
═══════════════════════════════════════════ */
/* Section badge — warm accent pill (section context only) */
.yre-about .section-badge,
.yre-features .section-badge,
.yre-cta .section-badge,
.yre-programs .section-badge {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 8px 22px !important;
background: rgba(var(--color-secondary-rgb), 0.1) !important;
color: var(--color-secondary);
border-radius: var(--radius-full) !important;
font-size: var(--font-size-2xs) !important;
font-weight: var(--fw-bold) !important;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--sp-5) !important;
border: 1px solid rgba(var(--color-secondary-rgb), 0.15) !important;
}
/* Badge SVG icon must inherit color */
.yre-about .section-badge svg,
.yre-features .section-badge svg,
.yre-cta .section-badge svg,
.yre-programs .section-badge svg {
color: inherit;
fill: currentColor;
flex-shrink: 0;
}
/* Section title */
.yre-section .section-title {
font-size: var(--font-size-3xl) !important;
font-weight: var(--fw-extrabold) !important;
color: var(--color-dark) !important;
line-height: 1.25 !important;
margin-bottom: var(--sp-4) !important;
letter-spacing: -0.02em !important;
}
/* Decorative gradient line under section titles */
.section-header > .section-title::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-full);
margin: var(--sp-5) auto 0;
}
/* White titles for dark sections */
.yre-stats .section-title,
.yre-cta .section-title,
.yre-cta .yre-cta-title {
color: var(--color-white) !important;
}
/* Subtitle */
.yre-section .section-subtitle {
font-size: var(--font-size-lg) !important;
color: var(--text-secondary) !important;
max-width: 640px !important;
margin-inline: auto !important;
line-height: var(--lh-relaxed) !important;
}
/* ─────────────────────────────────────────────
6. HERO ENHANCEMENTS
═══════════════════════════════════════════ */
/* Hero badge — glass style (only inside hero) */
.hp1-hero .hp1-badge,
.hp1-hero .section-badge,
.hp1-hero [class*="badge"] {
background: rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18) !important;
padding: 10px 24px !important;
border-radius: var(--radius-full) !important;
color: var(--color-white) !important;
font-weight: var(--fw-semibold) !important;
font-size: var(--font-size-sm) !important;
letter-spacing: 0.03em;
}
/* Hero title */
.hp1-hero h1 {
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
line-height: 1.2 !important;
font-weight: var(--fw-extrabold) !important;
}
/* Hero subtitle */
.hp1-hero .hero-subtitle,
.hp1-hero .hp1-description {
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
max-width: 640px;
margin-inline: auto;
}
/* ─────────────────────────────────────────────
7. CTA ENHANCEMENTS
═══════════════════════════════════════════ */
.yre-cta-title {
font-size: var(--font-size-3xl) !important;
color: var(--color-white) !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.yre-cta-description {
color: rgba(255, 255, 255, 0.85) !important;
max-width: 800px;
margin-inline: auto;
line-height: var(--lh-relaxed);
}
/* CTA — decorative circle glow */
.yre-cta .container::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
top: -150px;
inset-inline-start: -150px;
z-index: 0;
pointer-events: none;
}
/* ─────────────────────────────────────────────
8. BUTTONS — Shimmer micro-interaction
═══════════════════════════════════════════ */
.yre-btn {
position: relative;
overflow: hidden;
}
.yre-btn::after {
content: '';
position: absolute;
top: 0;
inset-inline-start: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
transition: inset-inline-start 0.6s ease;
pointer-events: none;
}
.yre-btn:hover::after {
inset-inline-start: 100%;
}
.yre-btn-primary {
box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.3) !important;
}
.yre-btn-primary:hover {
box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), 0.4) !important;
transform: translateY(-3px) !important;
}
/* ─────────────────────────────────────────────
9. SWIPER CAROUSEL
═══════════════════════════════════════════ */
.swiper-button-next,
.swiper-button-prev {
width: 48px !important;
height: 48px !important;
background: var(--color-white) !important;
border-radius: var(--radius-full) !important;
box-shadow: var(--shadow-md) !important;
transition: all 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
background: var(--color-primary) !important;
color: var(--color-white) !important;
box-shadow: var(--shadow-lg) !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 18px !important;
font-weight: bold;
}
.swiper-pagination-bullet {
width: 10px !important;
height: 10px !important;
background: rgba(var(--color-primary-rgb), 0.3) !important;
opacity: 1 !important;
transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
background: var(--color-primary) !important;
width: 28px !important;
border-radius: var(--radius-full) !important;
}
/* ─────────────────────────────────────────────
10. ANIMATIONS
═══════════════════════════════════════════ */
@keyframes premium-fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes premium-float {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}
/* Scroll reveal — elements are visible by default, animate when revealed */
.yre-reveal.reveal-fade-up {
opacity: 1;
}
.yre-reveal.reveal-fade-up.yre-revealed {
animation: premium-fadeInUp 0.6s ease forwards;
}
/* Scroll indicator float */
.hp1-scroll,
[class*="hero-scroll"] {
animation: premium-float 2.5s ease-in-out infinite;
}
/* ─────────────────────────────────────────────
11. RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
.yre-stat-item {
padding: var(--sp-6) var(--sp-4) !important;
}
.yre-feature-card {
padding: 1.5rem 1rem !important;
}
}
@media (max-width: 768px) {
.yre-stat-item {
padding: var(--sp-5) !important;
}
.yre-stat-icon {
width: 52px !important;
height: 52px !important;
}
.yre-stat-number {
font-size: clamp(1.5rem, 3vw, 2rem) !important;
}
}
@media (max-width: 375px) {
.yre-feature-card {
padding: var(--sp-6) var(--sp-4) !important;
}
}
/* ─────────────────────────────────────────────
12. REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.yre-reveal.reveal-fade-up {
opacity: 1 !important;
animation: none !important;
}
.hp1-scroll,
[class*="hero-scroll"] {
animation: none !important;
}
.yre-btn::after {
display: none;
}
* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* --- premium-standalone.css --- */
/**
* ═══════════════════════════════════════════════════════════════
* PREMIUM STANDALONE — Canvas/Plugin Mode
* Full design for standalone header/footer (bypasses Astra)
* ═══════════════════════════════════════════════════════════════
*
* Class names MATCH the actual template HTML:
* header-standalone.php & footer-standalone.php
*
* Uses design-tokens.css variables exclusively.
* RTL-ready with logical properties.
* ═══════════════════════════════════════════════════════════════
*/
/* ─────────────────────────────────────────────
TOP BAR
═══════════════════════════════════════════ */
.yre-topbar {
background: var(--color-dark);
color: rgba(255, 255, 255, 0.7);
font-size: var(--font-size-2xs, 12px);
padding-block: 6px;
position: relative;
z-index: var(--z-header, 100);
}
.yre-topbar-inner {
max-width: var(--container-max, 1280px);
margin-inline: auto;
padding-inline: var(--container-padding, 2rem);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.yre-topbar-left {
display: flex;
align-items: center;
gap: var(--sp-6, 24px);
}
.yre-topbar-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: inherit;
text-decoration: none;
transition: color var(--transition-fast, 150ms);
}
.yre-topbar-link:hover {
color: var(--color-accent, #33A1AD);
}
.yre-topbar-link svg {
flex-shrink: 0;
}
.yre-topbar-right {
display: flex;
align-items: center;
gap: var(--sp-3, 12px);
}
.yre-topbar-social {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.5);
transition: color var(--transition-fast, 150ms);
min-height: 28px;
min-width: 28px;
}
.yre-topbar-social:hover {
color: var(--color-accent, #33A1AD);
}
/* ─────────────────────────────────────────────
HEADER — Glassmorphism Fixed Nav
Template class: .yre-standalone-header
═══════════════════════════════════════════ */
.yre-standalone-header {
position: fixed;
top: 0;
inset-inline: 0;
height: 80px;
z-index: var(--z-header, 100);
transition: all var(--transition-normal, 300ms);
background: rgba(255, 255, 255, 0.05);
}
.yre-standalone-header.scrolled {
height: 64px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
.yre-header-container {
max-width: var(--container-max, 1280px);
margin-inline: auto;
padding-inline: var(--container-padding, 2rem);
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Brand / Logo */
.yre-header-brand {
display: flex;
align-items: center;
flex-shrink: 0;
}
.yre-logo-link {
display: flex;
align-items: center;
text-decoration: none;
}
.yre-logo-img {
height: 48px;
width: auto;
max-height: 48px;
object-fit: contain;
transition: height var(--transition-normal, 300ms);
}
.yre-standalone-header.scrolled .yre-logo-img {
height: 38px;
max-height: 38px;
}
.yre-logo-text {
font-size: var(--font-size-xl, 20px);
font-weight: var(--fw-bold, 700);
color: var(--color-white);
transition: color var(--transition-fast, 150ms);
}
.yre-standalone-header.scrolled .yre-logo-text {
color: var(--color-dark, #0D1520);
}
/* Navigation */
.yre-header-nav {
display: flex;
align-items: center;
}
.yre-nav-list {
display: flex;
align-items: center;
gap: var(--sp-8, 32px);
list-style: none;
margin: 0;
padding: 0;
}
.yre-nav-list a {
color: rgba(255, 255, 255, 0.9);
font-weight: var(--fw-semibold, 600);
font-size: var(--font-size-sm, 15px);
text-decoration: none;
position: relative;
padding-block: 4px;
min-height: var(--touch-target, 44px);
display: flex;
align-items: center;
transition: color var(--transition-fast, 150ms);
}
.yre-nav-list a::after {
content: '';
position: absolute;
bottom: 0;
inset-inline-start: 0;
width: 0;
height: 2px;
background: var(--color-accent, #33A1AD);
border-radius: var(--radius-full, 9999px);
transition: width var(--transition-normal, 300ms);
}
/* Hover underline — brand copper */
.yre-nav-list a::after {
background: var(--color-secondary, #ce8d58);
}
.yre-nav-list a:hover::after,
.yre-nav-list a.current-menu-item::after,
.yre-nav-list a.active::after {
width: 100%;
}
.yre-nav-list a:hover {
color: var(--color-accent, #33A1AD);
}
.yre-standalone-header.scrolled .yre-nav-list a {
color: var(--text-primary, #1a1a2e);
}
.yre-standalone-header.scrolled .yre-nav-list a:hover {
color: var(--color-primary, #007aa1);
}
/* Header Actions */
.yre-header-actions {
display: flex;
align-items: center;
gap: var(--sp-4, 16px);
}
.yre-btn-cta {
display: inline-flex;
align-items: center;
gap: var(--sp-2, 8px);
padding: 10px 24px;
background: var(--gradient-secondary, linear-gradient(135deg, #D1915B, #e8a968));
color: var(--color-white) !important;
border-radius: var(--btn-radius, 12px);
font-weight: var(--fw-bold, 700);
font-size: var(--font-size-sm, 15px);
text-decoration: none;
transition: all var(--transition-normal, 300ms);
box-shadow: 0 4px 16px rgba(209, 145, 91, 0.3);
min-height: var(--touch-target, 44px);
}
.yre-btn-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(209, 145, 91, 0.4);
color: var(--color-white) !important;
}
.yre-standalone-header.scrolled .yre-btn-cta {
background: linear-gradient(135deg, #d79651, #d65231) !important;
box-shadow: 0 4px 16px rgba(0, 119, 150, 0.25);
}
.yre-standalone-header.scrolled .yre-btn-cta:hover {
box-shadow: 0 6px 24px rgba(0, 119, 150, 0.35);
}
/* Mobile Toggle */
/* hamburger — primary definition merged into end block */
/* ─────────────────────────────────────────────
MOBILE MENU — Slide-in Overlay
═══════════════════════════════════════════ */
.yre-mobile-menu-overlay {
position: fixed;
inset: 0;
background: rgba(13, 21, 32, 0.6);
z-index: var(--z-modal, 200);
opacity: 0;
visibility: hidden;
transition: all var(--transition-normal, 300ms);
backdrop-filter: blur(4px);
}
.yre-mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.yre-mobile-menu-panel {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
width: min(85vw, 380px);
background: var(--color-white);
box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
z-index: calc(var(--z-modal, 200) + 1);
transform: translateX(100%);
transition: transform var(--transition-normal, 300ms);
padding: var(--sp-8, 32px);
display: flex;
flex-direction: column;
overflow-y: auto;
}
html[dir="rtl"] .yre-mobile-menu-panel {
transform: translateX(-100%);
}
.yre-mobile-menu-overlay.active .yre-mobile-menu-panel {
transform: translateX(0);
}
.yre-mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--sp-8, 32px);
padding-block-end: var(--sp-4, 16px);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.yre-mobile-logo {
height: 40px;
width: auto;
max-height: 40px;
object-fit: contain;
}
/*** ═══ CLOSE BUTTON ═══ ***/
.yre-mobile-close {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f4;
border: none;
cursor: pointer;
color: #1a1a2e;
border-radius: 50%;
transition: background 0.2s, color 0.2s, transform 0.15s;
flex-shrink: 0;
}
.yre-mobile-close svg {
width: 22px;
height: 22px;
color: #1a1a2e;
}
.yre-mobile-close:hover {
background: #d65231;
color: #ffffff;
}
.yre-mobile-close:hover svg {
color: #ffffff;
}
.yre-mobile-close:active {
transform: scale(0.88);
}
.yre-mobile-nav {
flex: 1;
}
.yre-mobile-nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.yre-mobile-nav-list a {
display: flex;
align-items: center;
padding: 14px 16px;
color: var(--text-primary, #1a1a2e);
font-weight: var(--fw-semibold, 600);
font-size: var(--font-size-lg, 18px);
text-decoration: none;
border-radius: var(--radius-md, 12px);
transition: all var(--transition-fast, 150ms);
min-height: var(--touch-target, 44px);
}
.yre-mobile-nav-list a:hover {
background: rgba(0, 119, 150, 0.06);
color: #007aa1;
}
.yre-mobile-cta {
margin-block-start: var(--sp-6, 24px);
padding-block-start: var(--sp-6, 24px);
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.yre-btn-block {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 24px;
background: linear-gradient(135deg, #d79651, #d65231) !important;
color: var(--color-white);
border-radius: var(--btn-radius, 12px);
font-weight: var(--fw-bold, 700);
font-size: var(--font-size-base, 16px);
text-decoration: none;
text-align: center;
min-height: var(--touch-target, 44px);
transition: all var(--transition-normal, 300ms);
}
.yre-btn-block:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0, 119, 150, 0.3);
color: var(--color-white);
}
/* ─────────────────────────────────────────────
DISTINCT SECTION BACKGROUNDS
═══════════════════════════════════════════ */
/* These provide FALLBACK backgrounds. premium-visual-layer.css
overrides them with richer patterns/gradients. */
/* Stats: Dark */
.yre-stats {
background: var(--color-dark, #0D1520);
}
/* About: Primary tint */
.yre-about-section,
.yre-about {
background: color-mix(in srgb, var(--color-primary, #007796) 5%, white);
}
/* Features: Accent tint */
.yre-features {
background: color-mix(in srgb, var(--color-accent, #33A1AD) 4%, white);
}
/* Programs: Clean white */
.yre-projects,
.yre-programs-section,
.yre-programs {
background: var(--color-white, #FFFFFF);
}
/* CTA: Primary */
.yre-cta {
background: var(--color-primary, #007796);
}
/* Footer: Dark */
.yre-premium-footer {
background: var(--color-dark, #0D1520);
}
/* ─────────────────────────────────────────────
FOOTER — Premium 4-Column
Template class: .yre-premium-footer
═══════════════════════════════════════════ */
/* Wave divider */
.yre-footer-wave {
line-height: 0;
color: var(--color-dark, #0D1520);
}
.yre-footer-wave svg {
width: 100%;
height: auto;
display: block;
}
.yre-premium-footer {
color: rgba(255, 255, 255, 0.65);
padding-block-start: var(--sp-16, 64px);
padding-block-end: 0;
position: relative;
}
.yre-footer-inner {
max-width: var(--container-max, 1280px);
margin-inline: auto;
padding-inline: var(--container-padding, 2rem);
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: var(--sp-10, 40px);
margin-block-end: var(--sp-12, 48px);
}
/* Footer Columns */
.yre-footer-col {
display: flex;
flex-direction: column;
}
/* Footer About Column */
.yre-footer-logo-wrap {
margin-block-end: var(--sp-4, 16px);
}
.yre-footer-logo {
height: 56px;
width: auto;
max-height: 56px;
object-fit: contain;
}
.yre-footer-desc {
color: rgba(255, 255, 255, 0.55);
font-size: var(--font-size-sm, 15px);
line-height: var(--lh-relaxed, 1.8);
margin-block-end: var(--sp-6, 24px);
}
/* Footer Social */
.yre-footer-social {
display: flex;
gap: var(--sp-3, 12px);
}
.yre-social-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md, 12px);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.5);
transition: all var(--transition-normal, 300ms);
text-decoration: none;
}
.yre-social-icon:hover {
background: linear-gradient(135deg, #d79651, #d65231) !important;
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 119, 150, 0.3);
}
/* Footer Headings */
.yre-footer-heading {
font-size: var(--font-size-base, 16px);
font-weight: var(--fw-bold, 700);
color: var(--color-white);
margin-block-end: var(--sp-6, 24px);
position: relative;
padding-block-end: var(--sp-3, 12px);
}
.yre-footer-heading::after {
content: '';
position: absolute;
bottom: 0;
inset-inline-start: 0;
width: 36px;
height: 3px;
background: linear-gradient(135deg, #d79651, #d65231) !important;
border-radius: var(--radius-full, 9999px);
}
/* Footer Links */
.yre-footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.yre-footer-links li {
margin: 0;
}
.yre-footer-links a {
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
font-size: var(--font-size-sm, 15px);
transition: all var(--transition-fast, 150ms);
display: flex;
align-items: center;
gap: var(--sp-2, 8px);
min-height: 36px;
padding: 4px 0;
}
.yre-footer-links a:hover {
color: var(--color-accent, #33A1AD);
padding-inline-start: var(--sp-2, 8px);
}
/* Footer Contact */
.yre-footer-contact {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-4, 16px);
}
.yre-footer-contact li {
display: flex;
align-items: flex-start;
gap: var(--sp-3, 12px);
color: rgba(255, 255, 255, 0.55);
font-size: var(--font-size-sm, 15px);
}
.yre-footer-contact li svg {
flex-shrink: 0;
margin-block-start: 3px;
color: var(--color-accent, #33A1AD);
}
.yre-footer-contact a {
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
transition: color var(--transition-fast, 150ms);
}
.yre-footer-contact a:hover {
color: var(--color-accent, #33A1AD);
}
/* Footer Bottom */
.yre-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-block: var(--sp-5, 20px);
}
.yre-footer-bottom-inner {
max-width: var(--container-max, 1280px);
margin-inline: auto;
padding-inline: var(--container-padding, 2rem);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-3, 12px);
}
.yre-footer-bottom p {
color: rgba(255, 255, 255, 0.35);
font-size: var(--font-size-xs, 13px);
margin: 0;
}
.yre-footer-credit {
font-size: var(--font-size-xs, 13px);
color: rgba(255, 255, 255, 0.35);
margin: 0;
}
.yre-footer-credit a {
color: var(--color-secondary, #D1915B);
text-decoration: none;
font-weight: var(--fw-semibold, 600);
transition: color var(--transition-fast, 150ms);
}
.yre-footer-credit a:hover {
color: var(--color-accent, #33A1AD);
}
/* ─────────────────────────────────────────────
BACK TO TOP
Template class: .yre-back-to-top
═══════════════════════════════════════════ */
.yre-back-to-top {
position: fixed;
inset-inline-end: 24px;
bottom: 32px;
width: 48px;
height: 48px;
background: linear-gradient(135deg, #d79651, #d65231) !important;
color: var(--color-white);
border-radius: var(--radius-full, 9999px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: all var(--transition-normal, 300ms);
z-index: var(--z-sticky, 50);
border: none;
box-shadow: 0 4px 20px rgba(0, 119, 150, 0.3);
min-height: var(--touch-target, 44px);
min-width: var(--touch-target, 44px);
}
.yre-back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.yre-back-to-top:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 119, 150, 0.4);
}
/* ─────────────────────────────────────────────
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
.yre-footer-inner {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
/* Hide topbar on mobile */
.yre-topbar {
display: none;
}
/* Header: show mobile toggle, hide nav */
.yre-header-nav {
display: none;
}
.yre-mobile-toggle {
display: flex;
}
/* Footer: single column */
.yre-footer-inner {
grid-template-columns: 1fr;
text-align: center;
}
.yre-footer-heading::after {
inset-inline-start: 50%;
transform: translateX(-50%);
}
.yre-footer-social {
justify-content: center;
}
.yre-footer-bottom-inner {
flex-direction: column;
text-align: center;
}
.yre-back-to-top {
inset-inline-end: 16px;
bottom: 80px;
}
}
@media (max-width: 375px) {
:root {
--container-padding: 0.75rem;
}
}
/* ─────────────────────────────────────────────
REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.yre-standalone-header,
.yre-mobile-menu-panel,
.yre-mobile-menu-overlay,
.yre-back-to-top,
.yre-social-icon,
.yre-btn-cta,
.yre-btn-block {
transition-duration: 0.01ms !important;
}
}
/* ============================================================ */
/* LAYER: 6-features */
/* ============================================================ */
/* --- hero-premium.css --- */
/**
* Hero Premium Enhancement Styles
* Scroll-reveal animations, grain overlay, animated stats, scroll indicator
*
* UI/UX Pro Max compliant:
* - Focus visible styles for keyboard navigation
* - Minimum 44px touch targets
* - Logical properties for RTL
* - Reduced motion support
* - WCAG contrast ratios
*
* @package yRealestate
* @since 1.0.0
*/
/* ── Grain overlay ── */
.re-hero__grain {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.03;
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)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
}
/* ── Stats bar ── */
.re-hero__stats-bar {
display: flex;
gap: 2.5rem;
margin-block-start: 3rem;
padding-block-start: 2rem;
border-block-start: 1px solid rgba(255, 255, 255, 0.12);
direction: rtl;
}
.re-hero__stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
min-width: 56px;
}
.re-hero__stat-number {
font-family: var(--re-font-primary, 'Cairo', sans-serif);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 800;
color: var(--re-color-primary, #2E8B57);
line-height: 1;
direction: ltr;
}
.re-hero__stat-suffix {
font-size: clamp(1rem, 2vw, 1.5rem);
font-weight: 700;
color: var(--re-color-primary, #2E8B57);
}
.re-hero__stat-label {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.65);
font-weight: 500;
text-align: center;
white-space: nowrap;
letter-spacing: 0.01em;
}
/* ── Scroll indicator ── */
.re-hero__scroll-indicator {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.re-hero__scroll-indicator:hover {
opacity: 1;
}
.re-hero__scroll-text {
font-size: 0.6875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.2em;
writing-mode: horizontal-tb;
}
.re-hero__scroll-line {
width: 1px;
height: 60px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
position: relative;
overflow: hidden;
}
.re-hero__scroll-dot {
width: 3px;
height: 12px;
background: var(--re-color-primary, #2E8B57);
border-radius: 2px;
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
animation: reScrollDot 2.5s ease-in-out infinite;
}
@keyframes reScrollDot {
0% { top: -12px; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { top: 60px; opacity: 0; }
}
/* ── Badge ── */
.re-hero__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 100px;
margin-block-end: 1.5rem;
animation: reBadgeGlow 3s ease-in-out infinite;
}
@keyframes reBadgeGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0); }
50% { box-shadow: 0 0 20px 0 rgba(46, 139, 87, 0.15); }
}
.re-hero__badge-dot {
width: 8px;
height: 8px;
background: var(--re-color-secondary, #D2691E);
border-radius: 50%;
animation: reBadgeDot 2s ease-in-out infinite;
}
@keyframes reBadgeDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.8); }
}
.re-hero__badge-text {
font-size: 0.875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.02em;
}
/* ── Hero button shimmer ── */
.re-btn--hero {
position: relative;
overflow: hidden;
min-height: 48px;
min-width: 48px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.re-btn--hero::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
transition: left 0.6s ease;
}
.re-btn--hero:hover::before {
left: 100%;
}
/* Focus visible for keyboard navigation */
.re-btn--hero:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* ── Data reveal animations ── */
[data-reveal] {
opacity: 0;
transform: translateY(25px);
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-reveal].revealed {
opacity: 1;
transform: translateY(0);
}
/* ── Responsive ── */
@media (max-width: 768px) {
.re-hero__stats-bar {
gap: 1.25rem;
flex-wrap: wrap;
justify-content: center;
}
.re-hero__stat-item {
min-width: 65px;
}
.re-hero__scroll-indicator {
bottom: 1.5rem;
}
.re-hero__scroll-line {
height: 40px;
}
}
@media (max-width: 480px) {
.re-hero__stats-bar {
gap: 1rem;
}
.re-hero__stat-number {
font-size: 1.5rem;
}
.re-hero__stat-label {
font-size: 0.6875rem;
}
}
/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.re-hero__scroll-dot,
.re-hero__badge-dot,
.re-hero__badge {
animation: none;
}
.re-btn--hero::before {
display: none;
}
}
/* Homepage template 1 (hp1): scroll hint + stats alignment */
.hp1-hero .hp1-scroll.re-hero__scroll-indicator {
position: absolute;
inset-inline-start: 50%;
bottom: 2.5rem;
transform: translateX(-50%);
z-index: 10;
padding-block: 0;
}
.hp1-hero .hp1-content {
z-index: 3;
}
/* --- modal-contact.css --- */
/**
* Global contact modal (CF7) — premium, RTL, accessible focus.
*
* @package yRealestate
*/
#yreModalBackdrop {
display: none;
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.62);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 2147483640;
}
#yreGlobalModal {
display: none;
position: fixed;
inset: 0;
width: min(100%, 480px);
max-width: 92vw;
max-height: min(92vh, 720px);
margin: auto;
padding: clamp(2.25rem, 4.5vw, 2.8rem) clamp(1.25rem, 3.6vw, 2.05rem) clamp(1.5rem, 3vw, 2.05rem);
background: #ffffff;
border-radius: 20px;
z-index: 2147483647;
overflow-y: auto;
box-shadow: 0 28px 64px -16px rgba(0, 0, 0, 0.45);
box-sizing: border-box;
direction: inherit;
/* let the document (html[dir]) decide RTL/LTR (fallback) */
text-align: start;
animation: yreModalIn 0.28s ease-out;
max-height: max-content;
}
html[dir="rtl"] #yreGlobalModal {
direction: rtl;
text-align: start;
}
html[dir="ltr"] #yreGlobalModal {
direction: ltr;
text-align: start;
}
@keyframes yreModalIn {
from {
opacity: 0;
transform: scale(0.96) translateY(8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
body.dark-mode #yreGlobalModal {
background: #12121e;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #f3f4f6;
}
#yreGlobalModal .yre-modal-close {
position: absolute;
top: 14px;
inset-inline-start: 14px;
width: 44px;
height: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.06);
color: #333;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
z-index: 10;
}
#yreGlobalModal .yre-modal-close:hover {
background: rgba(0, 0, 0, 0.1);
}
#yreGlobalModal .yre-modal-close:focus-visible {
outline: 3px solid var(--color-secondary, #c9a227);
outline-offset: 2px;
}
body.dark-mode #yreGlobalModal .yre-modal-close {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
#yreGlobalModal .yre-modal-header {
text-align: center;
margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
#yreGlobalModal .yre-modal-title {
margin: 0 0 0.35rem;
font-size: clamp(1.25rem, 3vw, 1.6rem);
font-weight: 800;
color: #111;
line-height: 1.25;
}
body.dark-mode #yreGlobalModal .yre-modal-title {
color: #fff;
}
#yreGlobalModal .yre-modal-subtitle {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: #5c6570;
}
body.dark-mode #yreGlobalModal .yre-modal-subtitle {
color: rgba(255, 255, 255, 0.65);
}
#yreGlobalModal .wpcf7-form {
--yre-cf7-radius: 14px;
text-align: start;
direction: inherit;
}
#yreGlobalModal .wpcf7-form,
#yreGlobalModal .wpcf7-form .wpcf7-form-control-wrap,
#yreGlobalModal .wpcf7-form p {
box-sizing: border-box;
}
/* CF7 usually wraps each control in . Normalize spacing and use a single gap system. */
#yreGlobalModal .wpcf7-form p {
margin: 0;
}
#yreGlobalModal .wpcf7-form-control-wrap {
width: 100%;
margin: 0;
}
#yreGlobalModal .wpcf7-form {
display: flex;
flex-direction: column;
gap: 0.95rem;
}
#yreGlobalModal .wpcf7-form-control:not(.wpcf7-submit) {
width: 100%;
box-sizing: border-box;
min-height: 48px;
border-radius: 14px;
padding-block: 0.875rem;
padding-inline: 1.125rem;
border: 1px solid rgba(15, 20, 25, 0.12);
background: #f8f9fb;
color: #0f1419;
font-size: 1rem;
font-family: inherit;
margin-bottom: 0;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
text-align: start;
direction: inherit;
}
html[dir="rtl"] #yreGlobalModal .wpcf7-form-control:not(.wpcf7-submit) {
text-align: right !important;
direction: rtl !important;
}
html[dir="ltr"] #yreGlobalModal .wpcf7-form-control:not(.wpcf7-submit) {
text-align: left !important;
direction: ltr !important;
}
#yreGlobalModal .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
color: rgba(15, 20, 25, 0.55);
}
html[dir="rtl"] #yreGlobalModal .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
text-align: right !important;
}
html[dir="ltr"] #yreGlobalModal .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
text-align: left !important;
}
body.dark-mode #yreGlobalModal .wpcf7-form-control:not(.wpcf7-submit) {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.14);
color: #fff;
}
body.dark-mode #yreGlobalModal .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
color: rgba(255, 255, 255, 0.6);
}
#yreGlobalModal .wpcf7-form textarea.wpcf7-textarea {
min-height: 8.5rem;
resize: vertical;
text-align: start;
direction: inherit;
}
html[dir="rtl"] #yreGlobalModal .wpcf7-form textarea.wpcf7-textarea {
text-align: right !important;
direction: rtl !important;
}
html[dir="ltr"] #yreGlobalModal .wpcf7-form textarea.wpcf7-textarea {
text-align: left !important;
direction: ltr !important;
}
#yreGlobalModal .wpcf7-form-control:not(.wpcf7-submit):focus-visible {
outline: none;
border-color: var(--color-secondary, #c9a227);
box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22);
}
#yreGlobalModal .wpcf7-submit {
width: 100%;
min-height: 48px;
margin-top: 0;
padding-block: 0.875rem;
padding-inline: 1.25rem;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, var(--color-secondary, #e07a2c) 0%, color-mix(in srgb, var(--color-secondary, #e07a2c) 85%, #000) 100%);
color: #fff !important;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
box-sizing: border-box;
box-shadow: 0 12px 28px rgba(224, 122, 44, 0.28);
transition: filter 0.2s ease, transform 0.2s ease;
text-align: center;
direction: inherit;
}
#yreGlobalModal .wpcf7-submit:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
#yreGlobalModal .wpcf7-form .wpcf7-response-output {
border-radius: 12px;
margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
#yreGlobalModal {
animation: none;
}
#yreGlobalModal .wpcf7-submit:hover {
transform: none;
}
}
/* --- brand-distribution.css --- */
/* ═══════════════════════════════════════════════════════════════
BRAND COLOR DISTRIBUTION — UI/UX Pro Max v4
Works WITH the data-scheme theming engine.
Primary #007aa1 Teal Blue (60%) — CTAs, links, nav, trust
Secondary #c67c55 Warm Copper (30%) — Icons, badges, warmth
Tertiary #3a9e8f Sage Green (10%) — Mission, success, nature
Dark #121a2e Navy Black — Text, dark sections
Neutral #f5f3f0 Warm White — Light backgrounds
═══════════════════════════════════════════════════════════════ */
/* ═══ GLOBAL DEFAULTS (outside data-scheme context) ═══ */
/* Links — primary trust color */
a { color: var(--brand-primary); }
a:hover { color: var(--brand-secondary); }
/* Headings — dark for readability */
h1, h2, h3, h4, h5, h6 { color: var(--brand-dark); }
/* Program filter — active state */
.programs-filter-nav .filter-btn.active {
background: var(--brand-primary);
color: #fff;
}
/* Card hover */
.yre-card:hover,
.project-card:hover,
.program-card:hover {
box-shadow: 0 8px 30px rgba(var(--brand-primary-rgb), 0.12);
}
/* Board card gradient bar */
.about-board-card::before {
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
}
/* Section title divider */
.section-title::after,
.yre-section-title::after {
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
}
/* Swiper brand colors */
.swiper-pagination-bullet-active {
background: var(--brand-primary);
}
/* Progress bars — primary→tertiary */
.progress-bar-fill,
.yre-progress-fill {
background: linear-gradient(90deg, var(--brand-primary), var(--brand-tertiary));
}
/* ═══ RESPONSIVE & ACCESSIBILITY ═══ */
@media (prefers-reduced-motion: reduce) {
[data-scheme] * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus visible for accessibility */
[data-scheme] a:focus-visible,
[data-scheme] button:focus-visible,
[data-scheme] input:focus-visible,
[data-scheme] .yre-btn-primary:focus-visible {
outline: 2px solid var(--s-icon, var(--brand-primary));
outline-offset: 2px;
}
/* RTL support */
[dir="rtl"] .yre-about-grid { direction: rtl; flex-direction: row-reverse; }
[dir="ltr"] .yre-about-grid { direction: ltr; }
/* --- accessibility.css --- */
/**
* ═══════════════════════════════════════════════════════════════
* ACCESSIBILITY — WCAG 2.1 AA Compliance
* Focus styles, skip links, screen reader helpers
* ═══════════════════════════════════════════════════════════════
*/
/* ─────────────────────────────────────────────
SKIP TO CONTENT LINK (first focusable element)
═════════════════════════════════════════════ */
.yre-skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
background: var(--color-primary);
color: var(--color-white);
padding: 12px 24px;
border-radius: 0 0 var(--radius-md) var(--radius-md);
font-size: var(--font-size-md);
font-weight: var(--fw-bold);
z-index: var(--z-max);
text-decoration: none;
transition: top var(--transition-fast);
box-shadow: var(--shadow-lg);
}
.yre-skip-link:focus {
top: 0;
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
/* ─────────────────────────────────────────────
FOCUS INDICATORS — Custom styled (not browser default)
═══════════════════════════════════════════ */
/* Default focus ring for interactive elements */
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: 2px;
}
/* Buttons: subtle glow */
.yre-btn:focus-visible,
button:focus-visible,
.ych-program-learn-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* Inputs: clean underline */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--input-shadow-focus);
}
/* Links: bottom indicator */
a:focus-visible {
outline: none;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
text-decoration-color: var(--color-primary);
}
/* Nav links */
.yre-nav a:focus-visible {
outline: none;
box-shadow: inset 0 -2px 0 var(--color-primary);
}
/* Cards */
.yre-feature-card:focus-visible,
.program-card:focus-visible,
.yre-project-card:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--card-radius);
}
/* Floating buttons */
.yre-floating-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 0 5px var(--color-primary);
}
/* ─────────────────────────────────────────────
SCREEN READER HELPERS
═══════════════════════════════════════════ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Show on focus (for skip links etc.) */
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
padding: inherit;
margin: inherit;
overflow: visible;
clip: auto;
white-space: normal;
}
/* ─────────────────────────────────────────────
TOUCH TARGETS — Minimum 44x44px (WCAG)
═══════════════════════════════════════════ */
.yre-nav a,
.yre-btn,
.yre-floating-btn,
.yre-footer-social a,
.ych-program-learn-btn,
.yre-scroll-top {
min-width: var(--touch-target);
min-height: var(--touch-target);
}
/* Ensure small icons have adequate hit area */
.yre-footer-social a,
.yre-lang-switcher {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ─────────────────────────────────────────────
REDUCED MOTION — Respect user preferences
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.yre-hero-scroll {
animation: none;
}
.pulse {
animation: none;
}
.program-card-wrapper {
animation: none;
opacity: 1;
}
}
/* ─────────────────────────────────────────────
COLOR NOT THE ONLY CONVEYOR
Add icons/text alongside color status
═══════════════════════════════════════════ */
.yre-project-status::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-inline-end: 6px;
}
.yre-project-status.new::before { background: var(--color-success); }
.yre-project-status.ready::before { background: var(--color-accent); }
.yre-project-status.construction::before { background: var(--color-warning); }
.yre-project-status.urgent::before { background: var(--color-danger); }
/* ============================================================ */
/* LAYER: 7-responsive */
/* ============================================================ */
/* --- responsive.css --- */
@media (max-width: 1200px) {
.hp4-grid {
grid-template-columns: 1fr;
}
.hp4-card:first-child {
grid-column: auto;
aspect-ratio: 16 / 9;
}
}
@media (max-width: 992px) {
.hp2-hero,
.projects-archive-section .projects-grid,
.showcase-grid,
.yre-testimonials-grid,
.yre-features-grid {
grid-template-columns: 1fr;
}
/* Homepage projects: tablet = 2 columns unless user chose 1 column (see data-columns on markup). */
#projects .projects-grid[data-columns="1"],
#projects .projects-grid-large[data-columns="1"] {
grid-template-columns: minmax(0, 1fr);
}
#projects .projects-grid:not([data-columns="1"]),
#projects .projects-grid-large:not([data-columns="1"]) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.archive-layout,
.single-content-layout {
grid-template-columns: 1fr;
gap: 28px;
}
.yre-about-right,
.yre-about-left,
.showcase-featured .project-card-inner {
grid-template-columns: 1fr;
}
.projects-masonry {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.showcase-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.filters-sidebar {
position: static;
top: auto;
}
.hp3-stats,
.hp5-features {
grid-template-columns: 1fr;
position: relative;
}
.hp3-stat,
.hp5-feature {
border-inline-start: 0;
border-top: 1px solid var(--border-subtle);
}
}
@media (max-width: 768px) {
.container {
padding-inline: clamp(16px, 4vw, 24px);
}
.hp1-buttons,
.hp5-buttons,
.yre-hero-buttons {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.hp1-btn-primary,
.hp1-btn-secondary,
.hp3-btn,
.hp5-btn,
.yre-btn {
width: 100%;
justify-content: center;
min-height: 44px;
}
.project-image,
.gallery-main,
.masonry-item.large .project-media,
.showcase-featured .project-media {
height: 260px;
min-height: 260px;
}
.yre-gallery-grid,
.projects-masonry,
.showcase-grid {
grid-template-columns: 1fr;
}
.masonry-item.large,
.masonry-item.wide {
grid-column: span 1;
grid-row: span 1;
}
#projects .projects-grid,
#projects .projects-grid-large {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 480px) {
.section-title,
.yre-hero-title,
.hp1-title,
.hp2-title,
.hp3-title,
.hp4-title,
.hp5-title {
font-size: clamp(1.5rem, 8vw, 2rem);
}
.hp2-content,
.hp3-content,
.hp4-card-content {
padding-inline: 14px;
}
.project-content,
.yre-testimonial-card,
.yre-feature-card {
padding: 18px;
}
}
/* Global modal */
@media (max-width: 600px) {
#yreGlobalModal {
width: min(100%, 100vw);
max-width: 94vw;
margin-inline: auto;
padding: clamp(2rem, 5.5vw, 2.55rem) clamp(1.05rem, 3.4vw, 1.85rem) clamp(1.4rem, 3vw, 1.9rem);
border-radius: 16px;
}
}
/* --- rtl-ltr.css --- */
/**
* ═══════════════════════════════════════════════════════════════
* RTL/LTR BILINGUAL ARCHITECTURE
* Arabic (RTL) / English (LTR) — Automatic switching
* ═══════════════════════════════════════════════════════════════
*
* Architecture:
* 1. HTML set by TranslatePress
* 2. CSS logical properties used throughout (margin-inline-start, etc.)
* 3. This file provides RTL-specific overrides for:
* - Letter-spacing (Arabic needs none)
* - Line-height (Arabic needs slightly taller)
* - Icon mirroring (arrows, chevrons)
* - Font fallbacks
* - Float/clear overrides
*
* WCAG 2.1 AA: All text remains readable in both directions
* ═══════════════════════════════════════════════════════════════
*/
/* ─────────────────────────────────────────────
RTL-SPECIFIC OVERRIDES
═══════════════════════════════════════════ */
/* Arabic typography adjustments */
html[dir="rtl"] {
--ls-normal: 0;
--ls-tight: 0;
--ls-wide: 0;
--ls-wider: 0;
}
html[dir="rtl"] body {
font-family: var(--font-primary);
line-height: var(--lh-arabic, 1.85);
letter-spacing: 0;
}
/* Arabic headings: slightly more weight */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
letter-spacing: 0;
line-height: 1.4;
}
/* Fix text-align assumptions */
html[dir="rtl"] .text-right { text-align: left; }
html[dir="rtl"] .text-left { text-align: right; }
/* Float overrides */
html[dir="rtl"] .float-right { float: left; }
html[dir="rtl"] .float-left { float: right; }
/* ─────────────────────────────────────────────
ICON MIRRORING — RTL
═══════════════════════════════════════════ */
/* Mirror directional icons in RTL */
html[dir="rtl"] .yre-nav a::after {
right: auto;
left: 0;
}
/* Arrow icons should flip in RTL */
html[dir="rtl"] .icon-arrow,
html[dir="rtl"] .icon-chevron,
html[dir="rtl"] .icon-back,
html[dir="rtl"] .icon-next,
html[dir="rtl"] .icon-forward,
html[dir="rtl"] svg .arrow-right,
html[dir="rtl"] svg .chevron-right,
html[dir="rtl"] .yre-project-link svg,
html[dir="rtl"] .ych-program-learn-btn svg,
html[dir="rtl"] .yre-btn svg {
transform: scaleX(-1);
}
/* Don't mirror non-directional icons */
html[dir="rtl"] .icon-phone,
html[dir="rtl"] .icon-mail,
html[dir="rtl"] .icon-location,
html[dir="rtl"] .icon-heart,
html[dir="rtl"] .icon-shield,
html[dir="rtl"] .icon-check,
html[dir="rtl"] .icon-close,
html[dir="rtl"] .icon-search,
html[dir="rtl"] .icon-menu,
html[dir="rtl"] .social-icon {
transform: none;
}
/* Footer underline position */
html[dir="rtl"] .yre-footer-title::after {
right: auto;
left: 0;
}
html[dir="rtl"] .section-header .section-title::after {
margin-inline: auto;
}
/* Stat icon containers — no mirror needed */
html[dir="rtl"] .yre-stat-icon {
direction: rtl;
}
/* Swiper RTL — already handled by Swiper's rtl parameter */
html[dir="rtl"] .swiper-button-next { right: auto; left: 10px; }
html[dir="rtl"] .swiper-button-prev { left: auto; right: 10px; }
/* ─────────────────────────────────────────────
LTR-SPECIFIC (English)
═══════════════════════════════════════════ */
html[dir="ltr"] body {
font-family: 'Tajawal', 'Cairo', sans-serif;
line-height: var(--lh-normal, 1.65);
}
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] h4,
html[dir="ltr"] h5,
html[dir="ltr"] h6 {
font-family: 'Cairo', 'Tajawal', sans-serif;
letter-spacing: var(--ls-tight, -0.025em);
}
/* ─────────────────────────────────────────────
LANGUAGE SWITCHER STYLES
═══════════════════════════════════════════ */
.yre-lang-switcher {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
color: inherit;
text-decoration: none;
transition: all var(--transition-fast);
cursor: pointer;
min-height: var(--touch-target);
}
.yre-lang-switcher:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.yre-lang-switcher img {
width: 18px;
height: 14px;
border-radius: 2px;
object-fit: cover;
}
/* Scrolled header variant */
.yre-header.scrolled .yre-lang-switcher {
background: rgba(0, 119, 150, 0.08);
border-color: rgba(0, 119, 150, 0.12);
color: var(--color-text);
}
.yre-header.scrolled .yre-lang-switcher:hover {
background: rgba(0, 119, 150, 0.15);
}
/* --- skeleton-ui.css --- */
/**
* Optional shimmer on project cards until images load.
*
* @package yRealestate
*/
.yre-skeleton-enabled .project-card.yre-skeleton-active .project-media {
position: relative;
overflow: hidden;
background: linear-gradient(
110deg,
rgba(var(--color-primary-rgb, 0, 75, 107), 0.08) 0%,
rgba(var(--color-primary-rgb, 0, 75, 107), 0.18) 45%,
rgba(var(--color-primary-rgb, 0, 75, 107), 0.08) 90%
);
background-size: 200% 100%;
animation: yreSkeletonShimmer 1.1s ease-in-out infinite;
}
.yre-skeleton-enabled .project-card.yre-skeleton-active .project-media img {
opacity: 0;
transition: opacity 0.35s ease;
}
.yre-skeleton-enabled .project-card.yre-skeleton-done .project-media img {
opacity: 1;
}
@keyframes yreSkeletonShimmer {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.yre-skeleton-enabled .project-card.yre-skeleton-active .project-media {
animation: none;
background: rgba(var(--color-primary-rgb, 0, 75, 107), 0.12);
}
}
/* Hide Astra back-to-top */
#ast-scroll-top { display: none !important; }
/* Fix our back-to-top gradient */
.yre-back-to-top {
background: linear-gradient(135deg, #d79651, #d65231) !important;
}
/* Fix back-to-top icon visibility */
.yre-back-to-top svg {
color: #ffffff;
stroke: #ffffff;
}
/* ═══════════════════════════════════════════
/* ═══════════════════════════════════════════
DROPDOWN MENU — Brand Colors
═══════════════════════════════════════════ */
/* Parent item */
.yre-nav-list .menu-item-has-children { position: relative; }
.yre-nav-list .menu-item-has-children > a { gap: 6px; cursor: pointer; }
/* Hide Astra toggle artifacts */
.yre-nav-list .ast-menu-toggle,
.yre-nav-list .dropdown-menu-toggle { display: none !important; }
/* Dropdown arrow */
.yre-nav-list .menu-item-has-children > a::before {
content: '';
display: inline-block;
width: 0; height: 0;
border-inline-start: 4px solid transparent;
border-inline-end: 4px solid transparent;
border-top: 5px solid currentColor;
margin-inline-start: 6px;
transition: transform 0.2s ease;
order: 1;
}
.yre-nav-list .menu-item-has-children:hover > a::before,
.yre-nav-list .menu-item-has-children.open > a::before { transform: rotate(180deg); }
/* Sub-menu dropdown */
.yre-nav-list .sub-menu {
position: absolute;
top: 100%;
inset-inline-start: 0;
transform: translateY(4px);
min-width: 230px;
list-style: none;
margin: 0;
padding: 8px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
z-index: 100;
}
.yre-nav-list .menu-item-has-children:hover > .sub-menu,
.yre-nav-list .menu-item-has-children.open > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Sub-menu items */
.yre-nav-list .sub-menu li { margin: 0; padding: 0; }
.yre-nav-list .sub-menu a {
display: flex;
align-items: center;
padding: 10px 16px;
border-radius: 10px;
color: #1a1a2e;
font-weight: 500;
font-size: 0.88rem;
min-height: 40px;
transition: background 0.15s, color 0.15s;
}
.yre-nav-list .sub-menu a::after { display: none; }
.yre-nav-list .sub-menu a:hover {
background: rgba(0, 122, 161, 0.08);
color: #007aa1;
}
/* Scrolled header dropdown */
.yre-standalone-header.scrolled .sub-menu a { color: #1a1a2e; }
.yre-standalone-header.scrolled .sub-menu a:hover { background: rgba(0,122,161,0.08); color: #007aa1; }
/* Active menu item highlight — secondary brand color */
.yre-nav-list .current-menu-item > a,
.yre-nav-list .current-menu-ancestor > a { color: var(--color-secondary, #ce8d58); }
.yre-nav-list .current-menu-item > a::after,
.yre-nav-list .current-menu-ancestor > a::after {
width: 100%;
background: var(--color-secondary, #ce8d58);
}
/* CTA button — primary brand gradient */
.yre-btn-accent,
.yre-btn-cta {
background: linear-gradient(135deg, #d79651, #d65231) !important;
color: #ffffff !important;
border: none;
border-radius: 999px;
padding: 10px 24px;
font-weight: 700;
font-size: 0.88rem;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.yre-btn-accent:hover,
.yre-btn-cta:hover {
transform: translateY(-2px);
filter: brightness(1.08);
color: #ffffff !important;
}
/* Nav link brand colors */
.yre-nav-list a {
color: rgba(255,255,255,0.88);
transition: color 0.15s;
}
.yre-nav-list a:hover {
color: var(--color-secondary, #ce8d58) !important;
}
.yre-standalone-header.scrolled .yre-nav-list a {
color: rgba(26,26,46,0.8);
}
.yre-standalone-header.scrolled .yre-nav-list a:hover {
color: var(--color-primary, #007aa1) !important;
}
/* ── Mobile Menu Enhancements ── */
/* Mobile panel sub-menu support */
.yre-mobile-nav-list .menu-item-has-children > a {
justify-content: space-between;
}
.yre-mobile-nav-list .menu-item-has-children > a::after {
content: '';
display: inline-block;
width: 0; height: 0;
border-inline-start: 5px solid transparent;
border-inline-end: 5px solid transparent;
border-top: 5px solid currentColor;
transition: transform 0.2s;
flex-shrink: 0;
}
.yre-mobile-nav-list .menu-item-has-children.open > a::after {
transform: rotate(180deg);
}
.yre-mobile-nav-list .sub-menu {
display: none;
list-style: none;
padding: 0;
margin: 0 0 4px 0;
background: rgba(0,122,161,0.04);
border-radius: 10px;
padding: 4px 0;
}
.yre-mobile-nav-list .sub-menu.open { display: block; }
.yre-mobile-nav-list .sub-menu a {
font-size: 0.92rem;
font-weight: 500;
padding: 10px 16px 10px 24px;
color: #555;
}
.yre-mobile-nav-list .sub-menu a:hover {
background: rgba(0,122,161,0.06);
color: #007aa1;
}
/* Mobile hamburger show */
.yre-mobile-toggle {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
cursor: pointer;
padding: 10px;
z-index: 10000;
width: 44px;
height: 44px;
}
.yre-standalone-header.scrolled .yre-mobile-toggle {
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.08);
}
.yre-mobile-toggle span {
display: block;
width: 24px;
height: 2.5px;
min-height: 2.5px;
background: #ffffff;
border-radius: 2px;
transition: transform 0.3s, opacity 0.3s;
flex-shrink: 0;
}
.yre-standalone-header.scrolled .yre-mobile-toggle span {
background: #121a2e;
}
@media (max-width: 1024px) {
.yre-header-nav { display: none; }
.yre-header-actions .yre-btn-cta { display: none; }
.yre-mobile-toggle { display: flex; }
}
/* ═══ GLOBAL BUTTON OVERRIDE — All Buttons ═══ */
.yre-btn,
.yre-btn-primary,
.yre-btn-accent,
.yre-btn-cta,
.yre-btn-lg,
.yre-btn-block,
.yre-btn-secondary,
.hp1-btn-primary,
.hp1-btn-secondary,
.program-donate-btn,
.pr-donate-btn,
.pr-donate-btn--sidebar,
.ych-program-learn-btn,
.yre-back-to-top,
.arch-filter__btn.active,
.programs-filter .filter-btn.active,
.filter-btn.active,
.wpforms-submit,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
background: linear-gradient(135deg, #d79651, #d65231) !important;
color: #ffffff !important;
border: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.yre-btn:hover,
.yre-btn-primary:hover,
.yre-btn-accent:hover,
.yre-btn-cta:hover,
.hp1-btn-primary:hover,
.program-donate-btn:hover,
.pr-donate-btn:hover,
.yre-back-to-top:hover,
.wpforms-submit:hover,
.wp-block-button__link:hover {
filter: brightness(1.1) !important;
transform: translateY(-2px);
}
/* Back to Top — Premium */
.yre-back-to-top {
position: fixed;
inset-inline-end: 24px;
bottom: 32px;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
cursor: pointer;
border: none;
background: linear-gradient(135deg, #d79651, #d65231) !important;
color: #fff !important;
}
.yre-back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.yre-back-to-top:hover {
filter: brightness(1.1);
transform: translateY(-3px);
}
.yre-back-to-top svg { flex-shrink: 0; }
.yre-btt-label { display: none; }
/* Hide Astra's back to top */
#ast-scroll-top { display: none !important; }
.yre-feature-icon {
background-color: var(--color-secondary) !important;
}
/* ============================================================
RESPONSIVE FIX — Full Coverage
Version: 4.6.2 | yCharityHub
============================================================ */
/* ── 1. HOMEPAGE STATS GRID — 2×2 on mobile ── */
@media (max-width: 768px) {
.yre-stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.yre-stat-item {
padding: 1.25rem 0.75rem !important;
}
.yre-stat-icon {
width: 48px !important;
height: 48px !important;
padding: 10px !important;
}
.yre-stat-icon svg {
width: 22px !important;
height: 22px !important;
}
.yre-stat-number {
font-size: clamp(1.5rem, 5vw, 2rem) !important;
}
.yre-stat-label {
font-size: 0.8rem !important;
}
}
@media (max-width: 400px) {
.yre-stats-grid {
gap: 8px !important;
}
.yre-stat-item {
padding: 1rem 0.5rem !important;
}
}
/* ── 2. FEATURE CARDS — Better mobile padding ── */
@media (max-width: 768px) {
.yre-features-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
.yre-feature-card {
padding: 1.5rem 1rem !important;
}
.yre-feature-icon {
width: 56px !important;
height: 56px !important;
padding: 12px !important;
margin-bottom: 1rem !important;
}
.yre-feature-icon svg {
width: 24px !important;
height: 24px !important;
}
.yre-feature-title {
font-size: 1rem !important;
margin-bottom: 0.4rem !important;
}
.yre-feature-desc {
font-size: 0.85rem !important;
line-height: 1.5 !important;
}
}
@media (max-width: 480px) {
.yre-features-grid {
grid-template-columns: 1fr !important;
}
}
/* ── 3. HERO — Mobile optimized ── */
@media (max-width: 768px) {
.yre-hero-section {
min-height: 70vh !important;
}
.yre-hero-content h1,
.yre-hero-title {
font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
line-height: 1.3 !important;
}
.yre-hero-subtitle {
font-size: clamp(1rem, 3.5vw, 1.25rem) !important;
}
.yre-hero-buttons {
flex-direction: column !important;
gap: 10px !important;
}
.yre-hero-buttons .yre-btn {
width: 100% !important;
text-align: center !important;
}
}
/* ── 4. CTA SECTION — Mobile ── */
@media (max-width: 768px) {
.yre-cta {
padding: clamp(3rem, 6vw, 5rem) 1rem !important;
}
.yre-cta-title {
font-size: clamp(1.5rem, 5vw, 2rem) !important;
}
.yre-cta-description {
font-size: 1rem !important;
margin-bottom: 24px !important;
}
}
/* ── 5. PROGRAM SINGLE — Breadcrumb + hero fix ── */
@media (max-width: 768px) {
.program-hero__breadcrumb {
font-size: 0.8rem !important;
margin-bottom: 1rem !important;
}
.program-hero__title {
font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
margin-top: 0.25rem !important;
}
.program-info-bar__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem !important;
}
.program-info-item {
padding: 0.75rem !important;
}
}
@media (max-width: 400px) {
.program-info-bar__grid {
grid-template-columns: 1fr !important;
}
}
/* ── 6. ZAKAT CALCULATOR — Mobile inputs ── */
@media (max-width: 768px) {
.zakat-calculator {
padding: 1.5rem !important;
margin: 0 8px !important;
}
.zakat-calculator .zakat-step {
padding: 1rem !important;
}
.zakat-calculator input {
padding: 0.6rem 0.75rem !important;
font-size: 0.95rem !important;
}
.zakat-calculator .zakat-step-title {
font-size: 0.95rem !important;
}
.zakat-result-card {
padding: 1.25rem !important;
}
.zakat-result-amount {
font-size: 1.75rem !important;
}
}
@media (max-width: 400px) {
.zakat-calculator {
padding: 1rem !important;
margin: 0 4px !important;
border-radius: 12px !important;
}
}
/* ── 7. FOOTER — Mobile column balance ── */
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
padding: 0 1rem !important;
}
.footer-widget-title {
font-size: 1.1rem !important;
margin-bottom: 1rem !important;
}
.footer-widget-title::after {
content: none !important;
}
.footer-bottom {
flex-direction: column !important;
text-align: center !important;
gap: 0.75rem !important;
padding: 1.5rem 1rem !important;
}
.footer-about-text {
font-size: 0.9rem !important;
}
.footer-links-list a {
font-size: 0.9rem !important;
}
}
/* ── 8. PROGRAMS ARCHIVE — Mobile cards ── */
@media (max-width: 768px) {
.programs-archive-hero {
min-height: 35vh !important;
}
.programs-archive-hero h1 {
font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
}
.programs-filter-bar {
flex-wrap: wrap !important;
gap: 8px !important;
padding: 0.75rem !important;
}
.programs-grid {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
.program-card {
border-radius: 12px !important;
}
}
/* ── 9. ABOUT PAGE — Mobile refinements ── */
@media (max-width: 599px) {
.yre-about-stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.yre-about-stats__number {
font-size: clamp(1.5rem, 6vw, 2rem) !important;
}
.yre-about-stats__label {
font-size: 0.8rem !important;
}
.yre-about-intro__grid {
gap: 1.5rem !important;
}
.yre-about-board__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
}
}
@media (max-width: 400px) {
.yre-about-board__grid {
grid-template-columns: 1fr !important;
}
}
/* ── 10. CONTACT PAGE — Mobile ── */
@media (max-width: 768px) {
.contact-page-grid {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
}
.contact-info-card {
padding: 1.25rem !important;
}
.contact-map-wrapper {
height: 300px !important;
}
}
/* ── 11. SECTION PADDING — Mobile uniform ── */
@media (max-width: 768px) {
section[class] {
padding-left: 16px !important;
padding-right: 16px !important;
}
.yre-section {
padding-top: clamp(2.5rem, 6vw, 4rem) !important;
padding-bottom: clamp(2.5rem, 6vw, 4rem) !important;
}
}
/* ── 12. HEADER / NAV — Mobile ── */
@media (max-width: 768px) {
.yre-header-cta-btn {
font-size: 0.85rem !important;
padding: 0.5rem 1rem !important;
}
.mobile-menu-inner {
padding: 1.5rem !important;
}
.mobile-nav-menu > li .menu-link {
padding: 0.75rem 0 !important;
font-size: 1rem !important;
}
.mobile-nav-menu .sub-menu {
padding-inline-start: 1rem !important;
}
.mobile-nav-menu .sub-menu .menu-link {
font-size: 0.9rem !important;
padding: 0.5rem 0 !important;
}
}
/* ── 13. BACK TO TOP — Mobile position ── */
@media (max-width: 768px) {
.yre-back-to-top,
#yre-back-to-top {
width: 44px !important;
height: 44px !important;
bottom: 20px !important;
inset-inline-end: 16px !important;
}
.yre-back-to-top svg,
#yre-back-to-top svg {
width: 20px !important;
height: 20px !important;
}
}
/* ── 14. SWIPER / CAROUSEL — Mobile ── */
@media (max-width: 768px) {
.swiper-slide {
padding: 0 2px !important;
}
.swiper-button-next,
.swiper-button-prev {
display: none !important;
}
.swiper-pagination {
bottom: 8px !important;
}
}
/* ── 15. SECTION BADGE / SUBTITLE — Mobile ── */
@media (max-width: 768px) {
.section-badge,
.yre-section-badge {
font-size: 0.8rem !important;
padding: 0.3rem 0.8rem !important;
}
.section-title,
.yre-section-title {
font-size: clamp(1.4rem, 5vw, 2rem) !important;
}
.section-subtitle,
.yre-section-subtitle {
font-size: 0.95rem !important;
}
}
/* ==========================================================================
ABOUT PAGE — Pro Max Responsive Refinement
Viewports: 1440 / 1024 / 768 / 414 / 390
========================================================================== */
/* ════════════════════════════════════════════════════════════════
0. CSS Custom Properties for About Page Responsive
════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
1. HERO — Fluid Typography & Spacing
════════════════════════════════════════════════════════════════ */
.yre-about-hero {
padding: clamp(4rem, 12vw, 7.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}
.yre-about-hero__title {
font-size: clamp(1.75rem, 6vw, 3.65rem);
line-height: 1.12;
margin-bottom: clamp(0.5rem, 2vw, 1rem);
}
.yre-about-hero__subtitle {
font-size: clamp(0.9rem, 2.5vw, 1.2rem);
line-height: 1.7;
max-width: min(36rem, 90vw);
padding-inline: 1rem;
}
.yre-about-hero__kicker {
font-size: clamp(0.6rem, 1.8vw, 0.72rem);
margin-bottom: 0.5rem;
}
.yre-about-hero__rule {
margin-top: clamp(1rem, 3vw, 1.5rem);
}
/* ════════════════════════════════════════════════════════════════
2. INTRO SECTION — Fluid Grid & Image
════════════════════════════════════════════════════════════════ */
.yre-about-intro {
padding: clamp(2.5rem, 7vw, 5.5rem) 0;
}
.yre-about-intro__grid {
gap: clamp(1.5rem, 4vw, 3.5rem);
}
.yre-about-intro__heading {
font-size: clamp(1.4rem, 4vw, 2.45rem);
margin-bottom: clamp(0.75rem, 2vw, 1.1rem);
}
.yre-about-intro__prose {
font-size: clamp(0.9rem, 2vw, 1.08rem);
line-height: 1.8;
}
.yre-about-intro__eyebrow {
font-size: clamp(0.65rem, 1.8vw, 0.72rem);
margin-bottom: 0.4rem;
}
/* ════════════════════════════════════════════════════════════════
3. STATS BAND — Always Readable
════════════════════════════════════════════════════════════════ */
.yre-about-stats {
padding: clamp(1.5rem, 4vw, 3.5rem) 0;
}
.yre-about-stats__grid {
gap: clamp(0.5rem, 2vw, 1.25rem);
}
.yre-about-stats__item {
padding: clamp(0.9rem, 2.5vw, 1.85rem) clamp(0.6rem, 1.5vw, 1.25rem);
border-radius: clamp(12px, 2.5vw, 26px);
}
.yre-about-stats__number {
font-size: clamp(1.5rem, 5vw, 2.85rem);
margin-bottom: 0.3rem;
gap: 0.1rem;
}
.yre-about-stats__suffix {
font-size: 0.5em;
}
.yre-about-stats__label {
font-size: clamp(0.75rem, 2vw, 1.05rem);
line-height: 1.4;
}
/* ════════════════════════════════════════════════════════════════
4. VISION & MISSION — Card Proportions
════════════════════════════════════════════════════════════════ */
.about-vm-section {
padding: clamp(3rem, 8vw, 100px) 0;
}
.about-vm-header {
margin-bottom: clamp(2rem, 5vw, 60px);
}
.about-vm-title {
font-size: clamp(1.5rem, 4.5vw, 2.4rem);
margin-bottom: clamp(10px, 2vw, 16px);
}
.about-vm-grid {
gap: clamp(1rem, 3vw, 32px);
}
.about-vm-card {
padding: clamp(1.75rem, 4vw, 44px) clamp(1.25rem, 3vw, 36px);
border-radius: clamp(14px, 3vw, 20px);
}
.about-vm-card__icon {
width: clamp(48px, 10vw, 72px);
height: clamp(48px, 10vw, 72px);
border-radius: clamp(12px, 3vw, 18px);
margin-bottom: clamp(1rem, 3vw, 24px);
}
.about-vm-card__icon svg {
width: clamp(24px, 5vw, 40px);
height: clamp(24px, 5vw, 40px);
}
.about-vm-card__label {
font-size: clamp(0.9rem, 2.5vw, 1.1rem);
margin-bottom: clamp(8px, 2vw, 12px);
}
.about-vm-card__text {
font-size: clamp(0.85rem, 2vw, 1rem);
line-height: 1.8;
}
/* ════════════════════════════════════════════════════════════════
5. PHILOSOPHY SECTION — Pillar Cards
════════════════════════════════════════════════════════════════ */
.about-philosophy-section {
padding: clamp(3rem, 8vw, 100px) 0;
}
.about-philosophy-header {
max-width: min(700px, 90vw);
margin-bottom: clamp(2rem, 5vw, 60px);
padding-inline: 1rem;
}
.about-philosophy-eyebrow {
font-size: clamp(0.7rem, 2vw, 0.85rem);
margin-bottom: clamp(8px, 2vw, 12px);
}
.about-philosophy-title {
font-size: clamp(1.4rem, 4vw, 2rem);
margin-bottom: clamp(12px, 3vw, 20px);
line-height: 1.4;
}
.about-philosophy-desc {
font-size: clamp(0.88rem, 2vw, 1.05rem);
line-height: 1.75;
}
.about-philosophy-grid {
gap: clamp(1rem, 3vw, 32px);
padding-inline: 0.5rem;
}
.about-philosophy-card {
padding: clamp(1.5rem, 4vw, 40px) clamp(1.25rem, 3vw, 32px);
border-radius: clamp(14px, 3vw, 20px);
}
.about-philosophy-card__icon {
width: clamp(48px, 10vw, 64px);
height: clamp(48px, 10vw, 64px);
border-radius: clamp(12px, 3vw, 16px);
margin-bottom: clamp(1rem, 3vw, 24px);
}
.about-philosophy-card__icon svg {
width: clamp(22px, 5vw, 36px);
height: clamp(22px, 5vw, 36px);
}
.about-philosophy-card__title {
font-size: clamp(1rem, 2.8vw, 1.25rem);
margin-bottom: clamp(8px, 2vw, 14px);
}
.about-philosophy-card__text {
font-size: clamp(0.82rem, 2vw, 0.95rem);
line-height: 1.75;
}
/* ════════════════════════════════════════════════════════════════
6. BOARD OF TRUSTEES — Card Grid
════════════════════════════════════════════════════════════════ */
.about-board-section {
padding: clamp(3rem, 8vw, 100px) 0;
}
.about-board-header {
margin-bottom: clamp(2rem, 5vw, 60px);
padding-inline: 1rem;
}
.about-board-title {
font-size: clamp(1.5rem, 4.5vw, 2.2rem);
margin-bottom: clamp(10px, 2vw, 16px);
}
.about-board-subtitle {
font-size: clamp(0.88rem, 2vw, 1rem);
line-height: 1.75;
margin-bottom: clamp(12px, 3vw, 20px);
}
.about-board-grid {
gap: clamp(1rem, 3vw, 32px);
}
.about-board-card {
padding: clamp(1.5rem, 4vw, 40px) clamp(1.25rem, 3vw, 28px) clamp(1.25rem, 3vw, 36px);
border-radius: clamp(14px, 3vw, 20px);
}
.about-board-card__photo-wrap {
width: clamp(72px, 15vw, 110px);
height: clamp(72px, 15vw, 110px);
margin-bottom: clamp(1rem, 3vw, 24px);
border-width: clamp(2px, 0.4vw, 3px);
}
.about-board-card__name {
font-size: clamp(0.95rem, 2.5vw, 1.15rem);
margin-bottom: 4px;
}
.about-board-card__role {
font-size: clamp(0.78rem, 2vw, 0.88rem);
margin-bottom: clamp(8px, 2vw, 12px);
}
.about-board-card__bio {
font-size: clamp(0.8rem, 1.8vw, 0.9rem);
line-height: 1.65;
}
/* ════════════════════════════════════════════════════════════════
7. LEGACY TIMELINE (yre-co) — Compact on Mobile
════════════════════════════════════════════════════════════════ */
.yre-co {
padding: clamp(2.5rem, 8vw, 6.5rem) 0;
}
.yre-co__heading {
font-size: clamp(1.4rem, 4vw, 2.5rem);
}
.yre-co__title {
font-size: clamp(1.05rem, 2.5vw, 1.55rem);
margin-bottom: 0.6rem;
}
.yre-co__prose {
font-size: clamp(0.85rem, 1.8vw, 1.06rem);
line-height: 1.8;
}
/* ════════════════════════════════════════════════════════════════
8. VIEWPORT-SPECIFIC BREAKPOINTS
════════════════════════════════════════════════════════════════ */
/* ── Tablet Landscape (1024px) ── */
@media (max-width: 1024px) {
.about-board-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* ── Tablet Portrait (768px) ── */
@media (max-width: 768px) {
/* Stats: 2×2 grid */
.yre-about-stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Vision & Mission: stacked */
.about-vm-grid {
grid-template-columns: 1fr !important;
}
/* Philosophy: responsive columns */
.about-philosophy-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Board: 2-column */
.about-board-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Intro: stack */
.yre-about-intro__grid {
grid-template-columns: 1fr !important;
}
.yre-about-intro__body {
order: -1;
}
/* Legacy timeline */
.yre-co__row-inner {
gap: 0.75rem;
}
.yre-co__body {
padding-block: 0.1rem 1rem;
padding-inline: 0 clamp(1rem, 3vw, 3.25rem);
}
}
/* ── Large Phone (414px) ── */
@media (max-width: 414px) {
/* Stats: still 2×2 */
.yre-about-stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
}
.yre-about-stats__item {
padding: 0.75rem 0.5rem !important;
}
.yre-about-stats__number {
font-size: 1.35rem !important;
}
.yre-about-stats__suffix {
font-size: 0.45em !important;
}
.yre-about-stats__label {
font-size: 0.7rem !important;
line-height: 1.35 !important;
}
/* VM cards */
.about-vm-card {
padding: 1.5rem 1.25rem !important;
}
.about-vm-card__icon {
width: 48px !important;
height: 48px !important;
margin-bottom: 1rem !important;
}
/* Philosophy: 1-column if 3+ pillars */
.about-philosophy-grid {
grid-template-columns: 1fr !important;
}
/* Board: 1-column */
.about-board-grid {
grid-template-columns: 1fr !important;
max-width: 360px;
margin-inline: auto;
}
.about-board-card {
padding: 1.5rem 1.25rem 1.25rem !important;
}
.about-board-card__photo-wrap {
width: 80px !important;
height: 80px !important;
}
/* Legacy: compact */
.yre-co {
--co-dot-size: 2.5rem;
--co-aside-w: 3.5rem;
}
.yre-co__body {
padding-inline-end: 0 !important;
}
}
/* ── Small Phone (375px and below) ── */
@media (max-width: 375px) {
.yre-about-hero__title {
font-size: 1.5rem !important;
}
.yre-about-hero__subtitle {
font-size: 0.85rem !important;
}
/* Stats: super compact */
.yre-about-stats__item {
padding: 0.6rem 0.35rem !important;
border-radius: 10px !important;
}
.yre-about-stats__number {
font-size: 1.2rem !important;
}
.yre-about-stats__label {
font-size: 0.65rem !important;
}
/* Philosophy cards */
.about-philosophy-card {
padding: 1.25rem 1rem !important;
}
.about-philosophy-card__icon {
width: 44px !important;
height: 44px !important;
margin-bottom: 0.75rem !important;
}
/* Board card */
.about-board-card__photo-wrap {
width: 68px !important;
height: 68px !important;
}
/* VM cards */
.about-vm-card {
padding: 1.25rem 1rem !important;
}
}
/* ════════════════════════════════════════════════════════════════
9. TOUCH & INTERACTION IMPROVEMENTS
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Disable hover transforms on touch — prevents sticky hover */
.yre-about-stats__item:hover {
transform: none;
}
.about-vm-card:hover,
.about-philosophy-card:hover,
.about-board-card:hover {
transform: none;
}
/* Board card top-bar always visible on mobile */
.about-board-card::before {
width: 60% !important;
}
/* Larger touch targets */
.yre-about-intro__cta .yre-btn {
padding: 0.75rem 2rem !important;
font-size: 0.95rem !important;
}
}
/* ════════════════════════════════════════════════════════════════
10. CONTAINER PADDING — Edge-to-Edge Safe
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.yre-about-page .container {
padding-inline: clamp(12px, 4vw, 24px) !important;
}
}
/* ════════════════════════════════════════════════════════════════
11. ORB ANIMATIONS — Reduce on Mobile (Performance)
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.yre-about-hero__orb--a,
.yre-about-hero__orb--b,
.yre-co__orb--a,
.yre-co__orb--b {
animation-duration: 30s !important;
opacity: 0.3 !important;
}
.yre-about-hero__orb--a {
width: min(55vw, 280px) !important;
height: min(55vw, 280px) !important;
}
.yre-about-hero__orb--b {
width: min(45vw, 220px) !important;
height: min(45vw, 220px) !important;
}
}
/* ════════════════════════════════════════════════════════════════
12. SECTION TRANSITIONS — Smooth Between Sections
════════════════════════════════════════════════════════════════ */
.yre-about-page > section + section {
margin-top: 0;
}
/* Dark-to-light transition helper */
.about-bg--dark + .about-bg--light,
.about-bg--dark + .about-bg--default {
position: relative;
}
/* ════════════════════════════════════════════════════════════════
13. PRINT STYLES
════════════════════════════════════════════════════════════════ */
@media print {
.yre-about-hero__orb,
.yre-about-hero__mesh,
.yre-about-hero__gridline,
.yre-co__bg,
.yre-about-stats__glow,
.about-philosophy-bg {
display: none !important;
}
.yre-about-hero {
background: #f5f5f5 !important;
padding: 2rem 0 !important;
}
.yre-about-hero__title {
-webkit-text-fill-color: #000 !important;
color: #000 !important;
}
.about-philosophy-section {
background: #fff !important;
}
.about-philosophy-card {
background: #f9f9f9 !important;
border: 1px solid #ddd !important;
}
.about-philosophy-card__title,
.about-philosophy-title {
-webkit-text-fill-color: #000 !important;
color: #000 !important;
}
}