/* ============================================================ MOON5 EXPORT — Premium Design System v3 World-class international fresh produce export brand Palette: Deep Forest Green + Pure Gold + Warm Ivory ============================================================ */ /* Fonts loaded via in layout head for performance */ /* ── Design Tokens ─────────────────────────────────────────── */ :root { /* Core palette */ --c-bg: #f9f7f2; --c-bg-2: #f3f0e9; --c-white: #ffffff; --c-dark: #0c1e0c; --c-dark-2: #172b17; --c-green: #1a3a1a; --c-green-2: #28582a; --c-green-3: #3c7a3e; --c-green-tint:#edf4ed; --c-green-tint2:#e0eee0; /* Gold system */ --c-gold: #c4882a; --c-gold-lt: #e6c46e; --c-gold-pale: #f7ecd8; --c-gold-dk: #9d6e20; /* Text */ --c-text: #1c1c1c; --c-text-2: #4a4a4a; --c-text-3: #8a8a8a; --c-text-4: #b8b8b8; /* Borders */ --c-border: #e0dbd2; --c-border-2: #c8c2b8; /* Typography */ --f-serif: 'Changa One', 'Playfair Display', Georgia, serif; --f-heading:'Changa One', 'Playfair Display', Georgia, serif; --f-sans: 'Plus Jakarta Sans', system-ui, sans-serif; --f-ar: 'Cairo', var(--f-sans); /* Layout */ --max-w: 1300px; --max-w-md: 920px; --max-w-sm: 680px; /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* Radii */ --radius: 5px; --radius-lg: 12px; --radius-xl: 20px; --radius-2xl:32px; /* Transitions */ --t: 240ms cubic-bezier(.4,0,.2,1); --t-slow: 500ms cubic-bezier(.4,0,.2,1); --t-spring: 380ms cubic-bezier(.34,1.56,.64,1); /* Shadows */ --shadow-1: 0 1px 3px rgba(12,30,12,.06),0 1px 2px rgba(12,30,12,.04); --shadow-2: 0 4px 16px rgba(12,30,12,.10),0 2px 6px rgba(12,30,12,.06); --shadow-3: 0 12px 40px rgba(12,30,12,.15),0 4px 12px rgba(12,30,12,.08); --shadow-4: 0 24px 80px rgba(12,30,12,.22),0 8px 24px rgba(12,30,12,.12); --shadow-gold: 0 8px 32px rgba(196,136,42,.25); /* Theme-aware surface aliases (used by components instead of raw colors) */ --surface: var(--c-white); --surface-2: var(--c-bg); --surface-card: var(--c-white); --on-surface: var(--c-text); --on-surface-2: var(--c-text-2); --border-soft: var(--c-border); } /* ── Dark mode ────────────────────────────────────────────── Toggled by [data-theme="dark"] on . Component styles should prefer the theme-aware aliases above where possible; raw --c-bg/--c-text tokens are also remapped for components that already reference them directly. ─────────────────────*/ [data-theme="dark"] { --c-bg: #0b130e; --c-bg-2: #101d15; --c-white: #15241b; --c-dark: #060c08; --c-dark-2: #0c1c0c; /* Richer, more saturated accent palette for dark mode */ --c-green: #1f4a26; --c-green-2: #3ddc7a; --c-green-3: #5eeb97; --c-green-tint: #132a1d; --c-green-tint2:#16331f; --c-gold: #ffc94d; --c-gold-lt: #ffdd8a; --c-gold-pale: #2a2310; --c-gold-dk: #e0a829; --c-text: #f3f6ef; --c-text-2: #c7d2c0; --c-text-3: #93a08c; --c-text-4: #5e6b5a; --c-border: #24382a; --c-border-2: #355042; --surface: #101d15; --surface-2: #0b130e; --surface-card: linear-gradient(160deg,#172a1d 0%,#13201a 100%); --on-surface: #f3f6ef; --on-surface-2: #c7d2c0; --border-soft: #24382a; /* Glow-style shadows replace flat black shadows for a premium feel */ --shadow-1: 0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(61,220,122,.04); --shadow-2: 0 4px 18px rgba(0,0,0,.55),0 0 0 1px rgba(61,220,122,.05); --shadow-3: 0 14px 44px rgba(0,0,0,.6),0 0 24px rgba(61,220,122,.08); --shadow-4: 0 28px 90px rgba(0,0,0,.65),0 0 48px rgba(255,201,77,.07); } /* ── Dark mode: colorful refinements ──────────────────────── */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.filter-btn):hover { color:var(--c-green-3); } [data-theme="dark"] .why-card, [data-theme="dark"] .pcard, [data-theme="dark"] .cert-card, [data-theme="dark"] .testi-card, [data-theme="dark"] .news-card { background:var(--surface-card); border-color:var(--c-border); } [data-theme="dark"] .why-card:hover, [data-theme="dark"] .pcard:hover, [data-theme="dark"] .cert-card:hover { border-color:rgba(61,220,122,.4); box-shadow:var(--shadow-3); } [data-theme="dark"] .why-icon { color:var(--c-green-2); } [data-theme="dark"] .eyebrow { color:var(--c-gold-lt); } [data-theme="dark"] .eyebrow::before,[data-theme="dark"] .eyebrow::after { background:var(--c-gold-lt); opacity:.7; } [data-theme="dark"] .btn-gold { background:linear-gradient(135deg,var(--c-gold) 0%,var(--c-gold-dk) 100%); color:#1a1404; box-shadow:0 6px 20px rgba(255,201,77,.25); } [data-theme="dark"] .btn-gold:hover { box-shadow:0 8px 28px rgba(255,201,77,.4); transform:translateY(-1px); } [data-theme="dark"] .btn-dark { background:linear-gradient(135deg,#1d3a26 0%,#102016 100%); border:1px solid var(--c-border-2); } [data-theme="dark"] .btn-dark:hover { border-color:var(--c-green-2); box-shadow:0 0 0 1px var(--c-green-2),0 8px 20px rgba(61,220,122,.15); } [data-theme="dark"] .filter-btn.active { background:linear-gradient(135deg,#2a8f55 0%,#1d6b3d 100%); border-color:transparent; color:#08160d; } [data-theme="dark"] .filter-btn:hover { border-color:var(--c-green-2); color:var(--c-green-3); } [data-theme="dark"] .product-search-input:focus, [data-theme="dark"] .field:focus { box-shadow:0 0 0 3px rgba(61,220,122,.22); border-color:var(--c-green-2); } [data-theme="dark"] .testi-stars { color:var(--c-gold-lt); } [data-theme="dark"] .testi-avatar { background:linear-gradient(135deg,#2a8f55,#1d6b3d); color:#08160d; } [data-theme="dark"] *:focus-visible { outline-color:var(--c-gold-lt); } /* ── Dark mode: fix black text becoming unreadable ─────── */ [data-theme="dark"] .sec-hd h2 { color:var(--c-text); } [data-theme="dark"] .pcard-title { color:var(--c-text); } [data-theme="dark"] .value-card h4 { color:var(--c-text); } [data-theme="dark"] .journey-content h3 { color:var(--c-text); } [data-theme="dark"] .why-card h3 { color:var(--c-text); } [data-theme="dark"] .cert-card h3 { color:var(--c-text); } [data-theme="dark"] .testi-name { color:var(--c-text); } [data-theme="dark"] .faq-q { color:var(--c-text); } [data-theme="dark"] .contact-info h2 { color:var(--c-text); } [data-theme="dark"] .contact-card h3 { color:var(--c-text); } [data-theme="dark"] .form-group label { color:var(--c-text-2); } [data-theme="dark"] .prod-detail-title { color:var(--c-text); } [data-theme="dark"] .news-title { color:var(--c-text); } [data-theme="dark"] .ind-card h3 { color:var(--c-text); } [data-theme="dark"] .legal h2 { color:var(--c-text); } [data-theme="dark"] .adm-hd h1 { color:var(--c-text); } [data-theme="dark"] .adm-card h3 { color:var(--c-text); } [data-theme="dark"] .stat-num { color:var(--c-text); } [data-theme="dark"] .adm-login-hd h1 { color:var(--c-text); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color:var(--c-text); } [data-theme="dark"] .btn-dark { color:#e8f5e9; border-color:var(--c-border-2); } [data-theme="dark"] .value-card { background:var(--surface-card); border-color:var(--c-border); } [data-theme="dark"] .process-step { background:var(--surface-card); } [data-theme="dark"] .ind-card { background:var(--surface-card); border-color:var(--c-border); } [data-theme="dark"] .ind-card h3 { color:var(--c-text); } [data-theme="dark"] .contact-card { background:var(--surface-card); } [data-theme="dark"] .adm-stat { background:var(--surface-card); border-color:var(--c-border); } [data-theme="dark"] .adm-btn { background:var(--c-green-tint); color:var(--c-green-2); border-color:var(--c-border); } [data-theme="dark"] .adm-btn:hover { background:var(--c-green-tint2); } [data-theme="dark"] .adm-btn-sec { background:var(--c-green-tint2); color:var(--c-green-3); } [data-theme="dark"] .adm-link:hover { color:var(--c-green-2); } [data-theme="dark"] .filter-btn { color:var(--c-text-2); border-color:var(--c-border); } [data-theme="dark"] .product-search-input, [data-theme="dark"] .field, [data-theme="dark"] .nl-input { background:var(--surface); border-color:var(--c-border); color:var(--c-text); } [data-theme="dark"] .pcard-desc { color:var(--c-text-2); } [data-theme="dark"] .pcard-sub { color:var(--c-text-3); } [data-theme="dark"] .spec-box .lbl { color:var(--c-text-3); } [data-theme="dark"] .spec-box .val { color:var(--c-text); } [data-theme="dark"] .variety-pill { background:var(--c-green-tint); color:var(--c-green-2); border-color:var(--c-border); } [data-theme="dark"] .prod-tag { background:var(--c-green-tint); color:var(--c-green-2); } [data-theme="dark"] .lbl-head { color:var(--c-text-2); } [data-theme="dark"] .testi-company { color:var(--c-text-3); } [data-theme="dark"] .news-date { color:var(--c-text-3); } [data-theme="dark"] .market-tag { background:var(--surface-card); border-color:var(--c-border); } [data-theme="dark"] .market-tag .region { color:var(--c-text); } [data-theme="dark"] .market-tag .countries { color:var(--c-text-2); } [data-theme="dark"] .about-imgs .img-main img, [data-theme="dark"] .about-imgs .img-sm img { filter:brightness(0.92); } [data-theme="dark"] .products-custom-order-box { background:var(--c-green-tint); } [data-theme="dark"] .products-custom-order-box h3 { color:var(--c-text); } /* ── Reset ───────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%} body{ font-family:var(--f-sans);font-size:1rem;line-height:1.7; color:var(--c-text);background:var(--c-bg); overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; transition:background-color var(--t-slow),color var(--t-slow); } body,body *{transition:background-color var(--t-slow),border-color var(--t-slow),color var(--t-slow),box-shadow var(--t-slow);} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} body,body *{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important} } [dir="rtl"] body{font-family:var(--f-ar)} [dir="rtl"]{letter-spacing:0!important} img{display:block;max-width:100%;height:auto} svg{display:block;max-width:100%;flex-shrink:0} a{color:inherit;text-decoration:none} button{cursor:pointer;font-family:inherit;border:none;background:none} ul,ol{list-style:none} input,textarea,select{font-family:inherit} /* ── Container ───────────────────────────────────────────── */ .wrap {width:100%;max-width:var(--max-w); margin-inline:auto;padding-inline:var(--sp-10)} .wrap-md {width:100%;max-width:var(--max-w-md);margin-inline:auto;padding-inline:var(--sp-10)} .wrap-sm {width:100%;max-width:var(--max-w-sm);margin-inline:auto;padding-inline:var(--sp-10)} /* ── Section spacing ─────────────────────────────────────── */ .sec {padding-block:var(--sp-24)} .sec-lg {padding-block:var(--sp-32)} .sec-sm {padding-block:var(--sp-16)} /* ── Eyebrow label ───────────────────────────────────────── */ .eyebrow { display:inline-flex;align-items:center;gap:var(--sp-3); font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--c-gold);margin-bottom:var(--sp-4); } .eyebrow::before,.eyebrow::after{content:'';width:24px;height:1px;background:currentColor;opacity:.6} /* ── Section header ──────────────────────────────────────── */ .sec-hd{margin-bottom:var(--sp-12)} .sec-hd.center{text-align:center} .sec-hd.center p{margin-inline:auto} .sec-hd h2{color:var(--c-dark);margin-bottom:var(--sp-4);line-height:1.1} .sec-hd p{color:var(--c-text-2);max-width:54ch;font-size:1.05rem;line-height:1.8} /* ── Typography ──────────────────────────────────────────── */ h1,h2,h3,h4{font-family:var(--f-serif);font-weight:400;line-height:1.2;letter-spacing:0} .t-hero {font-family:var(--f-serif);font-size:clamp(1.8rem, 4.2vw, 3.8rem);font-weight:400;line-height:1.02;letter-spacing:-.01em} .t-d1 {font-family:var(--f-serif);font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:400;line-height:1.15;letter-spacing:0} .t-d2 {font-family:var(--f-serif);font-size:clamp(1.4rem,2.4vw,2.05rem);font-weight:400;line-height:1.2;letter-spacing:0} .t-d3 {font-family:var(--f-serif);font-size:clamp(1.1rem,1.7vw,1.45rem);font-weight:400;line-height:1.3} .t-body-lg{font-size:1.08rem;line-height:1.85;color:var(--c-text-2)} .t-sm {font-size:.85rem;color:var(--c-text-3)} .t-label{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-3)} /* ── Buttons ─────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:.5rem; padding:.85rem 2.4rem;border-radius:2px; font-family:var(--f-sans);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; transition:var(--t);position:relative;overflow:hidden;white-space:nowrap; border:1.5px solid transparent;cursor:pointer; } .btn::before{ content:'';position:absolute;inset:0; background:rgba(255,255,255,.1); transform:translateX(-100%);transition:transform var(--t); } .btn:hover::before{transform:translateX(0)} .btn-gold {background:var(--c-gold);color:#fff;border-color:var(--c-gold)} .btn-gold:hover{background:var(--c-gold-dk);border-color:var(--c-gold-dk);box-shadow:var(--shadow-gold)} .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)} .btn-dark {background:transparent;color:var(--c-dark);border-color:var(--c-dark)} .btn-dark:hover{background:var(--c-dark);color:#fff} .btn-ghost {background:transparent;color:var(--c-gold);border:none;padding-inline:0;font-size:.76rem;letter-spacing:.1em} .btn-ghost .arr{transition:transform var(--t)} .btn-ghost:hover .arr{transform:translateX(5px)} [dir="rtl"] .btn-ghost:hover .arr{transform:translateX(-5px)} .btn-lg{padding:1.05rem 2.8rem;font-size:.82rem} .btn-sm{padding:.55rem 1.5rem;font-size:.72rem} .btn-full{width:100%;justify-content:center} /* ══════════════════════════════════════════════════════ NAVIGATION ══════════════════════════════════════════════════════ */ .nav{ position:fixed;top:0;inset-inline:0;z-index:900; padding-block:1.3rem; transition:background var(--t-slow),padding var(--t),box-shadow var(--t-slow); } .nav.scrolled{ background:rgba(10,25,10,.97); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px); padding-block:.85rem; box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 30px rgba(0,0,0,.25); } .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6)} .nav-links{display:flex;align-items:center;gap:var(--sp-8)} .nav-link{ font-size:.79rem;font-weight:500;letter-spacing:.04em; color:rgba(255,255,255,.7);transition:color var(--t); position:relative;padding-block:.2rem; } .nav-link::after{ content:'';position:absolute;bottom:-4px;inset-inline:0;height:1px; background:var(--c-gold);transform:scaleX(0);transform-origin:right; transition:transform var(--t); } [dir="rtl"] .nav-link::after{transform-origin:left} .nav-link:hover,.nav-link.active{color:#fff} .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left} [dir="rtl"] .nav-link:hover::after,[dir="rtl"] .nav-link.active::after{transform-origin:right} .nav-right{display:flex;align-items:center;gap:var(--sp-3)} /* Theme toggle */ .theme-toggle{ display:flex;align-items:center;justify-content:center;gap:.5rem; width:36px;height:36px;border-radius:50%; color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.18); background:transparent;transition:var(--t);position:relative;flex-shrink:0; } .theme-toggle:hover{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)} .theme-toggle .icon-moon{display:none} [data-theme="dark"] .theme-toggle .icon-sun{display:none} [data-theme="dark"] .theme-toggle .icon-moon{display:block} .theme-toggle--mob{width:auto;height:auto;border-radius:999px;padding:.5rem 1.1rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase} .theme-toggle-label{font-family:var(--f-sans)} .mob-extra{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1.5rem} .mob-lang-row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center} .gt-mob-lang{ font-size:.75rem;color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase; padding:.4rem .8rem;border:1px solid rgba(255,255,255,.18);border-radius:999px; background:none;cursor:pointer;font-family:var(--f-sans);transition:var(--t); } .gt-mob-lang:hover,.gt-mob-lang.active{color:#fff;border-color:var(--c-gold);background:rgba(196,136,42,.12)} /* Language switcher trigger button — see .gt-lang-drop / .gt-lang-opt below for the dropdown */ .lang-sw{position:relative} .gt-trigger-btn{ display:flex;align-items:center;gap:.35rem; color:rgba(255,255,255,.75);font-size:.72rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase; padding:.45rem .8rem;border:1px solid rgba(255,255,255,.18);border-radius:999px; cursor:pointer;background:transparent;transition:var(--t); } .gt-trigger-btn:hover{color:#fff;border-color:rgba(255,255,255,.5)} .gt-trigger-btn.open{color:#fff;border-color:var(--c-gold)} .gt-trigger-btn svg:last-child{transition:transform var(--t)} .gt-trigger-btn.open svg:last-child{transform:rotate(180deg)} /* Mobile toggle */ .nav-ham{display:none;flex-direction:column;gap:5px;padding:.25rem;cursor:pointer;width:30px} .nav-ham span{display:block;height:1.5px;background:#fff;border-radius:2px;transition:var(--t)} .nav-ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav-ham.open span:nth-child(2){opacity:0;transform:scaleX(0)} .nav-ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* Mobile menu */ .mob-menu{ position:fixed;inset:0;background:#0c1e0c;z-index:899; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--sp-6);opacity:0;visibility:hidden;transition:var(--t-slow); } .mob-menu.open{opacity:1;visibility:visible} .mob-menu .nav-link{font-family:var(--f-serif);font-size:1.7rem;color:rgba(255,255,255,.65)} .mob-menu .nav-link:hover{color:#fff} /* ══════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════ */ .hero{ min-height:100svh;background:var(--c-dark); display:grid;place-items:center;position:relative;overflow:hidden; } /* Atmospheric layered background */ .hero::before{ content:'';position:absolute;inset:0; background: radial-gradient(ellipse 80% 70% at 10% 80%, rgba(40,88,42,.35) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 95% 10%, rgba(196,136,42,.08) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 55% 50%, rgba(26,58,26,.2) 0%, transparent 70%); pointer-events:none;z-index:0; } /* Noise grain texture */ .hero::after{ content:'';position:absolute;inset:-50%;width:200%;height:200%; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none;opacity:.5;z-index:0; animation:grain 8s steps(2) infinite; } @keyframes grain{ 0%{transform:translate(0,0)}25%{transform:translate(-1%,1%)} 50%{transform:translate(1.5%,-1.5%)}75%{transform:translate(-1.5%,-.5%)} 100%{transform:translate(.5%,1.5%)} } .hero-content{ position:relative;z-index:2;padding-inline:var(--sp-10); max-width:var(--max-w);width:100%;padding-top:90px; display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-20);align-items:center; } .hero-left{} .hero-right{ display:flex;flex-direction:column;gap:var(--sp-8);align-items:flex-start; } .hero-eyebrow{ display:inline-flex;align-items:center;gap:.6rem; color:var(--c-gold-lt);font-size:.68rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--sp-6); } .hero-eyebrow::before{content:'';width:36px;height:1px;background:var(--c-gold)} [dir="rtl"] .hero-eyebrow{flex-direction:row-reverse} .hero-title{ color:#fff;margin-bottom:var(--sp-8); display:flex;flex-direction:column;gap:.06em; } .hero-title span{display:block} .hero-title em{font-style:normal;font-weight:700;color:var(--c-gold-lt)} .hero-title .line-accent{ position:relative;display:inline-block; } .hero-title .line-accent::after{ content:'';position:absolute;bottom:-2px;left:0;right:0; height:2px;background:linear-gradient(90deg,var(--c-gold),transparent); } .hero-sub{ font-size:clamp(.95rem,1.5vw,1.12rem);line-height:1.8; color:rgba(255,255,255,.52);max-width:46ch;margin-bottom:var(--sp-10); } .hero-actions{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap} /* Right side: feature cards */ .hero-features{ display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3); position:relative; } .hero-feature-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-lg); padding:var(--sp-6); backdrop-filter:blur(12px); transition:background var(--t),border-color var(--t); } .hero-feature-card:hover{ background:rgba(255,255,255,.09); border-color:rgba(196,136,42,.3); } .hero-feature-icon{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:var(--radius-lg); background:rgba(196,136,42,.14);color:var(--c-gold-lt); margin-bottom:var(--sp-3);transition:var(--t); } .hero-feature-card:hover .hero-feature-icon{background:rgba(196,136,42,.22);transform:translateY(-2px)} .hero-feature-title{ font-family:var(--f-serif);font-size:1.05rem;color:rgba(255,255,255,.9); margin-bottom:.3rem;font-weight:400; } .hero-feature-text{font-size:.77rem;color:rgba(255,255,255,.42);line-height:1.6} /* Stats bar at bottom */ .hero-stats{ position:absolute;bottom:0;inset-inline:0;z-index:2; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.35);backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .hero-stats-row{ display:flex;align-items:stretch;max-width:var(--max-w); margin-inline:auto;padding-inline:var(--sp-10); } .hero-stat{ flex:1;padding:var(--sp-6) var(--sp-4);border-inline-end:1px solid rgba(255,255,255,.06); text-align:center;transition:background var(--t); } .hero-stat:hover{background:rgba(196,136,42,.06)} .hero-stat:last-child{border-inline-end:none} .hero-stat-val{ display:block;font-family:var(--f-serif);font-size:clamp(1.6rem,2.5vw,2.3rem); color:#fff;line-height:1;font-weight:300;margin-bottom:.25rem; } .hero-stat-lbl{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38)} /* Scroll hint */ .hero-scroll{ position:absolute;bottom:calc(var(--sp-6) + 72px);inset-inline-end:var(--sp-10); z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5rem; color:rgba(255,255,255,.3);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; writing-mode:vertical-rl; } [dir="rtl"] .hero-scroll{inset-inline-end:auto;inset-inline-start:var(--sp-10);writing-mode:vertical-lr} .hero-scroll-line{ width:1px;height:56px; background:linear-gradient(var(--c-gold),transparent); animation:scrollPulse 2.4s ease-in-out infinite; } @keyframes scrollPulse{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.4);opacity:.25}} /* ══════════════════════════════════════════════════════ TRUST STRIP ══════════════════════════════════════════════════════ */ .trust-strip{ background:linear-gradient(90deg,var(--c-green) 0%,var(--c-dark-2) 100%); padding-block:var(--sp-4); overflow:hidden; } .trust-inner{ display:flex;align-items:center;justify-content:center; gap:var(--sp-10);flex-wrap:wrap; } .trust-item{ display:flex;align-items:center;gap:.55rem; color:rgba(255,255,255,.75);font-size:.78rem;font-weight:500;letter-spacing:.04em; white-space:nowrap; } .trust-dot{ width:6px;height:6px;border-radius:50%;background:var(--c-gold); flex-shrink:0;box-shadow:0 0 8px rgba(196,136,42,.6); } /* ══════════════════════════════════════════════════════ PRODUCTS ══════════════════════════════════════════════════════ */ .products-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--sp-6); } .pcard{ background:var(--c-white);border:1px solid var(--c-border); border-radius:var(--radius-xl);overflow:hidden; display:flex;flex-direction:column; transition:transform var(--t),box-shadow var(--t),border-color var(--t); position:relative; } .pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:rgba(196,136,42,.35)} .pcard-img{ aspect-ratio:4/3;overflow:hidden;position:relative; background:var(--c-green-tint); } .pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)} .pcard:hover .pcard-img img{transform:scale(1.08)} /* Hover overlay */ .pcard-overlay{ position:absolute;inset:0; background:linear-gradient(to top, rgba(12,30,12,.75) 0%, transparent 60%); opacity:0;transition:opacity var(--t); display:flex;align-items:flex-end;padding:var(--sp-5); } .pcard:hover .pcard-overlay{opacity:1} .pcard-overlay-text{ color:rgba(255,255,255,.9);font-size:.78rem;line-height:1.5; transform:translateY(8px);transition:transform var(--t); } .pcard:hover .pcard-overlay-text{transform:translateY(0)} .pcard-badge{ position:absolute;top:var(--sp-4);inset-inline-start:var(--sp-4); background:var(--c-gold);color:#fff;font-size:.6rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;padding:.28rem .7rem;border-radius:2px; z-index:1; } .pcard-body{padding:var(--sp-6);flex:1;display:flex;flex-direction:column} .pcard-sub{font-size:.66rem;font-weight:700;color:var(--c-green-3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem} .pcard-title{font-family:var(--f-serif);font-size:1.3rem;color:var(--c-dark);margin-bottom:.55rem;line-height:1.25} .pcard-desc{font-size:.875rem;color:var(--c-text-2);line-height:1.7;flex:1;margin-bottom:var(--sp-4)} /* Varieties pills */ .varieties{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:var(--sp-4)} .variety-pill{ font-size:.63rem;font-weight:600;padding:.2rem .65rem;border-radius:100px; background:var(--c-green-tint);color:var(--c-green-2);border:1px solid rgba(40,88,42,.15); letter-spacing:.04em; } .pcard-footer{display:flex;align-items:center;justify-content:space-between;padding-top:var(--sp-4);border-top:1px solid var(--c-border);gap:.5rem} /* Filter bar */ .products-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-8)} .filter-bar,.filter-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:0} .product-search{ position:relative;display:flex;align-items:center;flex:0 1 280px;min-width:200px; } .product-search svg{position:absolute;inset-inline-start:.9rem;color:var(--c-text-3);pointer-events:none} .product-search-input{ width:100%;padding:.6rem 1rem .6rem 2.4rem;border-radius:100px; border:1.5px solid var(--c-border);background:var(--c-white);color:var(--c-text); font-size:.85rem;transition:var(--t); } [dir="rtl"] .product-search-input{padding:.6rem 2.4rem .6rem 1rem} [dir="rtl"] .product-search svg{inset-inline-start:unset;inset-inline-end:.9rem} .product-search-input:focus{outline:none;border-color:var(--c-green-2);box-shadow:0 0 0 3px rgba(40,88,42,.15)} .product-search-input::placeholder{color:var(--c-text-3)} .product-no-results{width:100%} @media(max-width:640px){ .products-toolbar{flex-direction:column;align-items:stretch} .product-search{flex:1 1 auto;min-width:0} } .filter-btn{ padding:.5rem 1.2rem;border-radius:100px; font-size:.73rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase; border:1.5px solid var(--c-border);color:var(--c-text-2); cursor:pointer;transition:var(--t);background:transparent; } .filter-btn:hover{border-color:var(--c-green-2);color:var(--c-green-2)} .filter-btn.active{background:var(--c-dark);border-color:var(--c-dark);color:#fff} .filter-btn:focus-visible,.product-search-input:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px} /* ══════════════════════════════════════════════════════ ABOUT SECTION ══════════════════════════════════════════════════════ */ .about-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-20);align-items:center} .about-imgs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);position:relative} .about-imgs .img-main{grid-column:1/-1;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-xl)} .about-imgs .img-sm{aspect-ratio:1;overflow:hidden;border-radius:var(--radius-xl)} .about-imgs img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)} .about-imgs .img-main:hover img,.about-imgs .img-sm:hover img{transform:scale(1.04)} /* Achievement badge */ .about-badge-wrap{ position:absolute;bottom:-1.5rem;inset-inline-end:-1.5rem; background:linear-gradient(135deg,var(--c-gold) 0%,var(--c-gold-dk) 100%); color:#fff;padding:var(--sp-6) var(--sp-8); border-radius:var(--radius-xl);text-align:center;box-shadow:var(--shadow-gold); } .about-badge-wrap .num{font-family:var(--f-serif);font-size:2.8rem;display:block;line-height:1;font-weight:300} .about-badge-wrap .lbl{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85} .values-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:var(--sp-8)} .value-card{ padding:var(--sp-4) var(--sp-5);background:var(--c-green-tint); border-radius:var(--radius-lg);border-inline-start:3px solid var(--c-gold); transition:background var(--t); } .value-card:hover{background:var(--c-green-tint2)} [dir="rtl"] .value-card{border-inline-start:none;border-inline-end:3px solid var(--c-gold)} .value-card h4{font-family:var(--f-serif);font-size:1rem;color:var(--c-dark);margin-bottom:.3rem} .value-card p{font-size:.82rem;color:var(--c-text-2);line-height:1.6} /* ══════════════════════════════════════════════════════ PROCESS SECTION (new) ══════════════════════════════════════════════════════ */ .process-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; position:relative; } .process-grid::before{ content:'';position:absolute; top:3rem;left:12.5%;right:12.5%; height:1px;background:linear-gradient(90deg,transparent,var(--c-gold),var(--c-gold),var(--c-gold),transparent); opacity:.35; } [dir="rtl"] .process-grid::before{left:12.5%;right:12.5%} .process-step{ text-align:center;padding:var(--sp-8) var(--sp-6);position:relative; } .process-num{ width:60px;height:60px;border-radius:50%; background:linear-gradient(135deg,var(--c-gold) 0%,var(--c-gold-dk) 100%); display:flex;align-items:center;justify-content:center; margin-inline:auto;margin-bottom:var(--sp-6); font-family:var(--f-serif);font-size:1.3rem;color:#fff;font-weight:400; box-shadow:var(--shadow-gold);position:relative;z-index:1; transition:transform var(--t-spring); } .process-step:hover .process-num{transform:scale(1.1)} .process-step h3{font-family:var(--f-serif);font-size:1.1rem;color:var(--c-dark);margin-bottom:.4rem} .process-step p{font-size:.84rem;color:var(--c-text-2);line-height:1.65} /* ══════════════════════════════════════════════════════ MARKETS (dark section) ══════════════════════════════════════════════════════ */ .dark-sec{background:var(--c-dark);color:#fff} .dark-sec .sec-hd h2{color:#fff} .dark-sec .sec-hd p{color:rgba(255,255,255,.52)} .dark-sec .eyebrow{color:var(--c-gold-lt)} .dark-sec .eyebrow::before,.dark-sec .eyebrow::after{background:var(--c-gold-lt)} .markets-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3)} .market-tag{ display:flex;flex-direction:column;align-items:center;gap:var(--sp-3); padding:var(--sp-6);border-radius:var(--radius-xl); border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04); transition:var(--t);text-align:center; } .market-tag:hover{border-color:rgba(196,136,42,.4);background:rgba(196,136,42,.07);transform:translateY(-3px)} .market-tag .flag{font-size:1.8rem;display:block} .market-tag .region{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.9);margin-bottom:.2rem} .market-tag .countries{font-size:.7rem;color:rgba(255,255,255,.38);line-height:1.5} /* ══════════════════════════════════════════════════════ WHY CHOOSE US ══════════════════════════════════════════════════════ */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)} .why-grid.cols-4{grid-template-columns:repeat(4,1fr)} .why-card{ padding:var(--sp-8);background:var(--c-white);border:1px solid var(--c-border); border-radius:var(--radius-xl);transition:var(--t);position:relative;overflow:hidden; } .why-card::before{ content:'';position:absolute;top:0;inset-inline:0;height:3px; background:linear-gradient(90deg,var(--c-gold),var(--c-green-3)); transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow); } [dir="rtl"] .why-card::before{transform-origin:right} .why-card:hover{box-shadow:var(--shadow-2);transform:translateY(-4px)} .why-card:hover::before{transform:scaleX(1)} .why-icon{ width:52px;height:52px;border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--c-green-tint) 0%,var(--c-green-tint2) 100%); display:flex;align-items:center;justify-content:center; font-size:1.5rem;margin-bottom:var(--sp-5); } .why-card h3{font-family:var(--f-serif);font-size:1.15rem;color:var(--c-dark);margin-bottom:.5rem} .why-card p{font-size:.875rem;color:var(--c-text-2);line-height:1.7} /* ══════════════════════════════════════════════════════ CERTIFICATIONS ══════════════════════════════════════════════════════ */ .cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)} .cert-card{ display:flex;align-items:flex-start;gap:var(--sp-4); padding:var(--sp-6);background:var(--c-white);border:1px solid var(--c-border); border-radius:var(--radius-xl);transition:var(--t); } .cert-card:hover{box-shadow:var(--shadow-2);border-color:var(--c-gold-lt);transform:translateY(-2px)} .cert-icon{ width:48px;height:48px;border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--c-gold-pale),#f3e4c0); display:flex;align-items:center;justify-content:center; color:var(--c-gold-dk);flex-shrink:0; } .cert-card h3{font-family:var(--f-serif);font-size:1.05rem;color:var(--c-dark);margin-bottom:.3rem} .cert-card p{font-size:.82rem;color:var(--c-text-2);line-height:1.6} /* ══════════════════════════════════════════════════════ TESTIMONIALS ══════════════════════════════════════════════════════ */ .testi-sec{background:var(--c-bg-2)} .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)} .testi-card{ background:var(--c-white);border-radius:var(--radius-xl);padding:var(--sp-8); border:1px solid var(--c-border);display:flex;flex-direction:column; transition:var(--t);position:relative; } .testi-card::before{ content:'\201C';position:absolute;top:var(--sp-4);inset-inline-end:var(--sp-6); font-family:var(--f-serif);font-size:5rem;line-height:1;color:var(--c-green-tint); pointer-events:none; } .testi-card:hover{box-shadow:var(--shadow-2);transform:translateY(-4px)} .testi-stars{color:var(--c-gold);font-size:.9rem;letter-spacing:.15em;margin-bottom:var(--sp-4)} .testi-text{ font-family:var(--f-serif);font-size:1.02rem;font-style:normal; color:var(--c-text);line-height:1.8;flex:1;margin-bottom:var(--sp-6); } .testi-author{display:flex;align-items:center;gap:var(--sp-3)} .testi-avatar{ width:44px;height:44px;border-radius:50%;background:var(--c-green-2); display:flex;align-items:center;justify-content:center; font-family:var(--f-serif);font-size:1.15rem;color:#fff;flex-shrink:0; } .testi-name{font-size:.875rem;font-weight:600;color:var(--c-dark)} .testi-co{font-size:.73rem;color:var(--c-text-3)} /* ══════════════════════════════════════════════════════ FAQ ══════════════════════════════════════════════════════ */ .faq-list{max-width:760px;margin-inline:auto} .faq-item{border-bottom:1px solid var(--c-border);overflow:hidden} .faq-q{ width:100%;text-align:start; padding:var(--sp-6) 0; display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4); font-size:1rem;font-weight:500;color:var(--c-dark);cursor:pointer;transition:color var(--t); } .faq-q:hover{color:var(--c-green-2)} .faq-plus{ width:28px;height:28px;border-radius:50%;background:var(--c-green-tint); display:flex;align-items:center;justify-content:center; color:var(--c-green-2);font-size:.9rem;flex-shrink:0;font-weight:300; transition:var(--t); } .faq-item.open .faq-plus{transform:rotate(45deg);background:var(--c-gold);color:#fff} .faq-a{max-height:0;overflow:hidden;transition:max-height var(--t-slow)} .faq-item.open .faq-a{max-height:400px} .faq-a-in{padding-bottom:var(--sp-6);font-size:.9rem;color:var(--c-text-2);line-height:1.85} /* ══════════════════════════════════════════════════════ CTA SECTION ══════════════════════════════════════════════════════ */ .cta-sec{ background:linear-gradient(135deg,var(--c-dark) 0%,var(--c-green) 60%,#1f4a1f 100%); position:relative;overflow:hidden; } .cta-sec::before{ content:'';position:absolute;inset:0; background: radial-gradient(ellipse 55% 80% at 85% 50%,rgba(196,136,42,.12) 0%,transparent 60%), radial-gradient(ellipse 30% 40% at 15% 30%,rgba(40,88,42,.3) 0%,transparent 60%); pointer-events:none; } .cta-inner{position:relative;z-index:1;text-align:center} .cta-inner h2{color:#fff;margin-bottom:var(--sp-4)} .cta-inner p{color:rgba(255,255,255,.55);margin-bottom:var(--sp-8);max-width:52ch;margin-inline:auto} .cta-btns{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);flex-wrap:wrap} /* ══════════════════════════════════════════════════════ CONTACT ══════════════════════════════════════════════════════ */ .contact-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--sp-20);align-items:start} .contact-info h2{font-family:var(--f-serif);font-size:clamp(1.6rem,2.5vw,2.2rem);color:var(--c-dark);margin-bottom:var(--sp-4)} .contact-info .sub{color:var(--c-text-2);margin-bottom:var(--sp-8);line-height:1.8} .contact-items{display:flex;flex-direction:column;gap:var(--sp-4)} .citem{display:flex;align-items:flex-start;gap:var(--sp-4)} .citem-icon{ width:44px;height:44px;background:var(--c-green-tint);border-radius:var(--radius-lg); display:flex;align-items:center;justify-content:center;color:var(--c-green-2);flex-shrink:0; } .citem-lbl{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--c-text-3)} .citem-val{font-size:.95rem;color:var(--c-text);margin-top:.1rem} .contact-form-card{ background:var(--c-white);padding:var(--sp-10); border-radius:var(--radius-2xl);border:1px solid var(--c-border); box-shadow:var(--shadow-3); } .contact-form-card h3{ font-family:var(--f-serif);font-size:1.5rem;color:var(--c-dark); margin-bottom:var(--sp-6);padding-bottom:var(--sp-4);border-bottom:1px solid var(--c-border); } .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)} .form-group{display:flex;flex-direction:column;gap:.4rem} .form-group.full{grid-column:1/-1} .form-group label{font-size:.74rem;font-weight:600;color:var(--c-dark);letter-spacing:.05em} .form-group label .req{color:var(--c-gold);margin-inline-start:.15rem} .field{ width:100%;padding:.78rem 1.1rem; border:1.5px solid var(--c-border);border-radius:var(--radius-lg); font-size:.9rem;color:var(--c-text);background:var(--c-bg); transition:border-color var(--t),box-shadow var(--t),background var(--t);appearance:none; } .field:focus{outline:none;border-color:var(--c-green-2);box-shadow:0 0 0 3px rgba(40,88,42,.1);background:var(--c-white)} .field::placeholder{color:var(--c-text-4)} textarea.field{resize:vertical;min-height:130px} .form-msg{padding:var(--sp-4);border-radius:var(--radius-lg);font-size:.875rem;margin-top:var(--sp-4);display:none} .form-msg.success{background:rgba(40,167,69,.12);color:#1f8a3e;border:1px solid rgba(40,167,69,.35);display:block} .form-msg.error{background:rgba(220,53,69,.12);color:#d6394a;border:1px solid rgba(220,53,69,.35);display:block} [data-theme="dark"] .form-msg.success{color:#5fd98a} [data-theme="dark"] .form-msg.error{color:#ff8a96} /* ══════════════════════════════════════════════════════ PAGE HERO (inner pages) ══════════════════════════════════════════════════════ */ .page-hero{ background:var(--c-dark); padding-top:calc(80px + var(--sp-16)); padding-bottom:var(--sp-16); position:relative;overflow:hidden; } .page-hero::before{ content:'';position:absolute;inset:0; background: radial-gradient(ellipse 70% 80% at 85% 50%,rgba(40,88,42,.25) 0%,transparent 65%), radial-gradient(ellipse 40% 60% at 0% 100%,rgba(40,88,42,.15) 0%,transparent 55%); pointer-events:none; } .page-hero-inner{position:relative;z-index:1} .page-hero h1{color:#fff;margin-bottom:var(--sp-4)} .page-hero .sub{color:rgba(255,255,255,.52);max-width:60ch;font-size:1.05rem;line-height:1.8} .page-hero .eyebrow{color:var(--c-gold-lt)} .page-hero .eyebrow::before,.page-hero .eyebrow::after{background:var(--c-gold-lt)} /* Breadcrumb */ .breadcrumb{ display:flex;align-items:center;gap:.45rem;flex-wrap:wrap; font-size:.74rem;color:rgba(255,255,255,.38);margin-bottom:var(--sp-4); } .breadcrumb a{color:rgba(255,255,255,.5);transition:color var(--t)} .breadcrumb a:hover{color:var(--c-gold-lt)} .breadcrumb-sep{color:rgba(255,255,255,.18)} /* ══════════════════════════════════════════════════════ PRODUCT DETAIL ══════════════════════════════════════════════════════ */ .prod-detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:start} .prod-detail-img{ aspect-ratio:1;overflow:hidden;border-radius:var(--radius-2xl); background:var(--c-green-tint); } .prod-detail-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)} .prod-detail-img:hover img{transform:scale(1.04)} .prod-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--sp-4)} .prod-tag{ font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; padding:.22rem .68rem;border-radius:100px; background:var(--c-green-tint);color:var(--c-green-2);border:1px solid rgba(40,88,42,.2); } .prod-detail-title{font-family:var(--f-serif);font-size:clamp(1.8rem,3vw,2.8rem);color:var(--c-dark);margin-bottom:var(--sp-4);line-height:1.1} .prod-detail-desc{color:var(--c-text-2);margin-bottom:var(--sp-8);line-height:1.85;font-size:1.02rem} .varieties-sec{margin-bottom:var(--sp-6)} .varieties-sec .lbl-head{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-3);margin-bottom:.7rem} .varieties-sec .pills{display:flex;flex-wrap:wrap;gap:.4rem} .specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-8)} .spec-box{ padding:var(--sp-5);background:var(--c-green-tint);border-radius:var(--radius-lg); transition:background var(--t); } .spec-box:hover{background:var(--c-green-tint2)} .spec-box .lbl{font-size:.64rem;font-weight:700;color:var(--c-green-3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.3rem} .spec-box .val{font-size:.88rem;color:var(--c-text);display:flex;align-items:center;gap:.45rem} .spec-box .val svg{color:var(--c-gold-dk);flex-shrink:0} .prod-actions{display:flex;gap:var(--sp-4);flex-wrap:wrap} /* ── Product Image Gallery ── */ .pd-gallery { display:flex; flex-direction:column; gap:var(--sp-3); position:sticky; top:var(--sp-6); } .pd-gallery-main { aspect-ratio:1; overflow:hidden; border-radius:var(--radius-2xl); background:var(--c-green-tint); position:relative; } .pd-gallery-main img { width:100%; height:100%; object-fit:cover; transition:opacity .18s ease, transform .5s ease; } .pd-gallery-main:hover img { transform:scale(1.04); } .pd-gallery-thumbs { display:flex; gap:.55rem; flex-wrap:wrap; } .pd-thumb { width:72px; height:72px; border-radius:var(--radius-lg); overflow:hidden; border:2px solid transparent; cursor:pointer; padding:0; background:none; transition:border-color .15s, transform .15s; flex-shrink:0; } .pd-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .pd-thumb:hover { transform:translateY(-2px); border-color:var(--c-gold-dk); } .pd-thumb.active { border-color:var(--c-green-2); box-shadow:0 0 0 2px var(--c-green-tint2); } /* ── Product Packaging Section ── */ .pd-packaging-section { margin-bottom:var(--sp-8); } .pd-packaging-section .lbl-head { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-text-3); margin-bottom:var(--sp-3); } .pd-packaging-grid { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.75rem; } .pd-pkg-item { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; background:var(--c-green-tint); border-radius:var(--radius-lg); border:1px solid rgba(40,88,42,.15); font-size:.875rem; font-weight:600; color:var(--c-text); transition:background .15s, transform .15s; } .pd-pkg-item:hover { background:var(--c-green-tint2); transform:translateY(-1px); } .pd-pkg-icon { font-size:1rem; flex-shrink:0; } .pd-pkg-custom { font-size:.78rem; color:var(--c-text-3); font-style:italic; padding:.4rem .8rem; border-inline-start:2px solid var(--c-gold-dk); } /* ══════════════════════════════════════════════════════ NEWS ══════════════════════════════════════════════════════ */ .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)} .news-card{ background:var(--c-white);border:1px solid var(--c-border); border-radius:var(--radius-xl);overflow:hidden;transition:var(--t); } .news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:rgba(196,136,42,.3)} .news-img{aspect-ratio:16/9;overflow:hidden;background:var(--c-green-tint)} .news-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .news-card:hover .news-img img{transform:scale(1.06)} .news-body{padding:var(--sp-6)} .news-meta{display:flex;align-items:center;gap:.65rem;margin-bottom:var(--sp-3)} .news-cat{font-size:.66rem;font-weight:700;color:var(--c-green-3);letter-spacing:.12em;text-transform:uppercase} .news-date{font-size:.71rem;color:var(--c-text-3)} .news-title{font-family:var(--f-serif);font-size:1.15rem;color:var(--c-dark);margin-bottom:.5rem;line-height:1.3} .news-excerpt{font-size:.85rem;color:var(--c-text-2);line-height:1.7;margin-bottom:var(--sp-4)} /* ══════════════════════════════════════════════════════ GALLERY ══════════════════════════════════════════════════════ */ .gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--sp-3); } .gal-item{ aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-xl); position:relative;cursor:pointer; } .gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .gal-item:hover img{transform:scale(1.08)} .gal-cap{ position:absolute;inset-inline:0;bottom:0;padding:var(--sp-5) var(--sp-4) var(--sp-3); background:linear-gradient(transparent,rgba(0,0,0,.75)); color:#fff;font-size:.78rem;opacity:0;transition:opacity var(--t); } .gal-item:hover .gal-cap{opacity:1} /* ══════════════════════════════════════════════════════ INDUSTRIES ══════════════════════════════════════════════════════ */ .ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)} .ind-card{ padding:var(--sp-8);background:var(--c-white);border:1px solid var(--c-border); border-radius:var(--radius-xl);transition:var(--t);text-align:center; } .ind-card:hover{box-shadow:var(--shadow-2);transform:translateY(-4px);border-color:var(--c-green-tint2)} .ind-icon{ width:60px;height:60px;border-radius:var(--radius-xl); background:var(--c-green-tint);display:flex;align-items:center;justify-content:center; font-size:1.6rem;margin-inline:auto;margin-bottom:var(--sp-4); } .ind-card h3{font-family:var(--f-serif);font-size:1.15rem;color:var(--c-dark);margin-bottom:.5rem} .ind-card p{font-size:.85rem;color:var(--c-text-2);line-height:1.7} /* ══════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════ */ .footer{background:#0a180a;color:rgba(255,255,255,.6);padding-top:var(--sp-20)} .footer-grid{ display:grid;grid-template-columns:1.7fr 1fr 1fr 1.6fr; gap:var(--sp-12);padding-bottom:var(--sp-12); border-bottom:1px solid rgba(255,255,255,.06); } .footer-logo{margin-bottom:var(--sp-4)} .footer-contact-item{display:inline-flex;align-items:center;gap:.55rem} .footer-contact-item svg{flex-shrink:0;opacity:.8} .footer-tagline{font-size:.875rem;line-height:1.8;max-width:30ch;color:rgba(255,255,255,.45)} .footer-socials{display:flex;gap:.5rem;margin-top:var(--sp-6)} .fsocial{ width:36px;height:36px;border-radius:var(--radius-lg); background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.5);transition:var(--t); } .fsocial:hover{background:var(--c-gold);color:#fff;transform:translateY(-2px)} .footer-col h4{ font-size:.7rem;font-weight:700;color:#fff;letter-spacing:.14em;text-transform:uppercase; margin-bottom:var(--sp-5); } .footer-nav{display:flex;flex-direction:column;gap:.6rem} .footer-nav a{font-size:.84rem;color:rgba(255,255,255,.45);transition:color var(--t)} .footer-nav a:hover{color:var(--c-gold)} .footer-nl p{font-size:.84rem;margin-bottom:var(--sp-4);color:rgba(255,255,255,.45)} .nl-form{display:flex;gap:.4rem} .nl-input{ flex:1;padding:.65rem .95rem; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1); border-radius:2px;color:#fff;font-size:.84rem;transition:var(--t); } .nl-input::placeholder{color:rgba(255,255,255,.28)} .nl-input:focus{outline:none;border-color:var(--c-gold);background:rgba(255,255,255,.09)} .nl-btn{ padding:.65rem 1.1rem;background:var(--c-gold);color:#fff; border:none;border-radius:2px;font-size:.74rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:var(--t); white-space:nowrap; } .nl-btn:hover{background:var(--c-gold-dk)} .footer-bottom{ display:flex;align-items:center;justify-content:space-between; padding-block:var(--sp-6);flex-wrap:wrap;gap:var(--sp-4); } .footer-copy{font-size:.74rem;color:rgba(255,255,255,.28)} .footer-legal{display:flex;gap:var(--sp-6)} .footer-legal a{font-size:.74rem;color:rgba(255,255,255,.28);transition:color var(--t)} .footer-legal a:hover{color:var(--c-gold)} /* ══════════════════════════════════════════════════════ LEGAL PAGES ══════════════════════════════════════════════════════ */ .legal{max-width:760px;margin-inline:auto} .legal h2{font-family:var(--f-serif);font-size:1.5rem;color:var(--c-dark);margin-top:var(--sp-8);margin-bottom:var(--sp-3)} .legal p,.legal li{color:var(--c-text-2);line-height:1.9;margin-bottom:var(--sp-3)} .legal ul{list-style:disc;padding-inline-start:var(--sp-8)} .legal a{color:var(--c-green-2)} /* ══════════════════════════════════════════════════════ 404 ══════════════════════════════════════════════════════ */ .error-pg{min-height:100svh;background:var(--c-dark);display:grid;place-items:center} .error-inner{text-align:center;padding:var(--sp-10)} .err-num{ font-family:var(--f-serif);font-size:clamp(8rem,20vw,16rem); font-weight:300;color:rgba(255,255,255,.04);line-height:1; letter-spacing:-.05em;display:block; } .error-inner h1{font-family:var(--f-serif);font-size:2rem;color:#fff;margin-bottom:var(--sp-4)} .error-inner p{color:rgba(255,255,255,.42);margin-bottom:var(--sp-8)} .error-actions{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap} /* ══════════════════════════════════════════════════════ ADMIN ══════════════════════════════════════════════════════ */ .adm-body{font-family:var(--f-sans);background:#f0f2f5} .adm-nav{ background:var(--c-dark);color:#fff; padding:0 var(--sp-8);display:flex;align-items:center;justify-content:space-between; height:58px;position:fixed;top:0;inset-inline:0;z-index:100;box-shadow:var(--shadow-2); } .adm-logo{font-family:var(--f-serif);font-size:1.3rem;color:#fff} .adm-logo span{color:var(--c-gold)} .adm-layout{display:flex;min-height:100svh;padding-top:58px} .adm-sidebar{ width:240px;background:var(--c-white);border-inline-end:1px solid var(--c-border); padding-top:var(--sp-4);flex-shrink:0;position:sticky;top:58px; height:calc(100svh - 58px);overflow-y:auto; } .adm-sec-lbl{ font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em; color:var(--c-text-3);padding:var(--sp-3) var(--sp-6);display:block;margin-top:var(--sp-2); } .adm-link{ display:flex;align-items:center;gap:.65rem; padding:.58rem var(--sp-6);font-size:.84rem;color:var(--c-text-2); transition:var(--t);border-inline-start:3px solid transparent; } .adm-link:hover{background:var(--c-green-tint);color:var(--c-dark)} .adm-link.active{background:var(--c-green-tint);color:var(--c-green-2);border-inline-start-color:var(--c-green-2);font-weight:600} .adm-main{flex:1;padding:var(--sp-8);max-width:calc(100% - 240px)} .adm-hd{margin-bottom:var(--sp-8)} .adm-hd h1{font-family:var(--f-serif);font-size:1.8rem;color:var(--c-dark)} .adm-hd p{color:var(--c-text-2);font-size:.9rem} .adm-card{ background:var(--c-white);border-radius:var(--radius-xl);border:1px solid var(--c-border); padding:var(--sp-8);margin-bottom:var(--sp-6); } .adm-card h3{ font-family:var(--f-serif);font-size:1.1rem;color:var(--c-dark); margin-bottom:var(--sp-6);padding-bottom:var(--sp-4);border-bottom:1px solid var(--c-border); } .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-bottom:var(--sp-8)} .stat-box{ background:var(--c-white);border-radius:var(--radius-xl);padding:var(--sp-6); border:1px solid var(--c-border);display:flex;align-items:center;gap:var(--sp-4); } .stat-box-icon{ width:46px;height:46px;border-radius:var(--radius-lg);background:var(--c-green-tint); display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0; } .stat-num{font-family:var(--f-serif);font-size:1.8rem;color:var(--c-dark);line-height:1} .stat-lbl{font-size:.72rem;color:var(--c-text-3);margin-top:.15rem} .adm-table{width:100%;border-collapse:collapse;font-size:.875rem} .adm-table th{ background:var(--c-green-tint);color:var(--c-dark);font-weight:600; font-size:.72rem;letter-spacing:.07em;text-transform:uppercase; padding:.7rem 1rem;text-align:start; } .adm-table td{padding:.72rem 1rem;border-bottom:1px solid var(--c-border);color:var(--c-text)} .adm-table tr:last-child td{border-bottom:none} .adm-table tr:hover td{background:var(--c-green-tint)} .badge{display:inline-block;padding:.2rem .65rem;border-radius:100px;font-size:.68rem;font-weight:600} .badge-ok{background:#d4edda;color:#155724} .badge-warn{background:#fff3cd;color:#856404} .badge-err{background:#f8d7da;color:#721c24} .adm-btn{ display:inline-flex;align-items:center;gap:.4rem; padding:.48rem 1rem;border-radius:var(--radius); font-size:.78rem;font-weight:600;cursor:pointer;transition:var(--t);border:none; } .adm-btn-primary{background:var(--c-green-2);color:#fff} .adm-btn-primary:hover{background:var(--c-dark)} .adm-btn-danger{background:#dc3545;color:#fff} .adm-btn-danger:hover{background:#a71d2a} .adm-btn-sec{background:var(--c-green-tint);color:var(--c-dark)} .adm-btn-sec:hover{background:var(--c-border)} .adm-input{ width:100%;padding:.72rem 1rem;border:1.5px solid var(--c-border); border-radius:var(--radius);font-size:.9rem;transition:var(--t); font-family:var(--f-sans); } .adm-input:focus{outline:none;border-color:var(--c-green-2);box-shadow:0 0 0 3px rgba(40,88,42,.1)} .adm-login{min-height:100svh;background:var(--c-dark);display:grid;place-items:center} .adm-login-card{ background:var(--c-white);padding:var(--sp-12);border-radius:var(--radius-2xl); width:100%;max-width:420px;box-shadow:var(--shadow-4); } .adm-login-hd{text-align:center;margin-bottom:var(--sp-8)} .adm-login-hd h1{font-family:var(--f-serif);font-size:2rem;color:var(--c-dark)} .adm-login-hd span{color:var(--c-gold)} .adm-login-hd p{font-size:.85rem;color:var(--c-text-3);margin-top:.25rem} .adm-err{ background:#f8d7da;color:#721c24;border:1px solid #f5c6cb; padding:.72rem 1rem;border-radius:var(--radius);font-size:.85rem; margin-bottom:var(--sp-4);display:none; } .adm-err.show{display:block} /* ══════════════════════════════════════════════════════ WHATSAPP FLOAT BUTTON ══════════════════════════════════════════════════════ */ .wa-float{ position:fixed;inset-inline-end:var(--sp-8);bottom:var(--sp-8);z-index:800; width:56px;height:56px;border-radius:50%; background:#25d366; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.4),0 2px 8px rgba(0,0,0,.15); transition:transform var(--t-spring),box-shadow var(--t); cursor:pointer;text-decoration:none; } .wa-float:hover{transform:scale(1.12) translateY(-2px);box-shadow:0 8px 32px rgba(37,211,102,.5)} .wa-float svg{width:28px;height:28px;fill:#fff} [dir="rtl"] .wa-float{inset-inline-end:auto;inset-inline-start:var(--sp-8)} /* ══════════════════════════════════════════════════════ SCROLL REVEAL ══════════════════════════════════════════════════════ */ [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} [data-reveal="left"]{transform:translateX(-24px)} [data-reveal="right"]{transform:translateX(24px)} [data-reveal].in{opacity:1;transform:none} /* ══════════════════════════════════════════════════════ UTILITIES ══════════════════════════════════════════════════════ */ .hidden{display:none!important} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0} .tc{text-align:center} .flex{display:flex} .flex-center{display:flex;align-items:center;justify-content:center} .flex-between{display:flex;align-items:center;justify-content:space-between} .gap-4{gap:var(--sp-4)} .gap-6{gap:var(--sp-6)} .mt-8{margin-top:var(--sp-8)} .mt-12{margin-top:var(--sp-12)} .mb-0{margin-bottom:0!important} .c-gold{color:var(--c-gold)} /* ══════════════════════════════════════════════════════ JOURNEY / HOW WE WORK (8-step) ══════════════════════════════════════════════════════ */ .process-sec{background:var(--c-bg-2)} .journey-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; } /* Horizontal connector line across top */ .journey-grid::before{ content:'';position:absolute; top:2.8rem;left:6.25%;right:6.25%; height:1px; background:linear-gradient(90deg,transparent 0%,var(--c-gold) 15%,var(--c-gold) 85%,transparent 100%); opacity:.25;pointer-events:none; } .journey-step{ padding:var(--sp-6) var(--sp-5); position:relative;text-align:center; } .journey-icon-wrap{ position:relative;display:inline-flex; flex-direction:column;align-items:center; margin-bottom:var(--sp-5); } .journey-icon{ width:56px;height:56px;min-width:56px;min-height:56px;border-radius:50%; background:linear-gradient(135deg,var(--c-gold) 0%,var(--c-gold-dk) 100%); display:flex;align-items:center;justify-content:center; color:#fff;box-shadow:var(--shadow-gold); position:relative;z-index:1;overflow:hidden; transition:transform var(--t-spring),box-shadow var(--t); } .journey-icon svg{width:24px;height:24px;flex-shrink:0} .journey-step:hover .journey-icon{ transform:scale(1.12) translateY(-3px); box-shadow:0 12px 40px rgba(196,136,42,.45); } .journey-num{ font-size:.6rem;font-weight:700;letter-spacing:.14em; color:var(--c-gold);margin-top:.45rem; text-transform:uppercase; } .journey-content h3{ font-family:var(--f-serif);font-size:1.05rem; color:var(--c-dark);margin-bottom:.4rem;line-height:1.3; font-weight:600; } .journey-content p{ font-size:.8rem;color:var(--c-text-2);line-height:1.65; } .journey-step:hover .journey-content h3{color:var(--c-green-2)} /* Stagger reveal delays on journey steps */ .journey-step:nth-child(1){transition-delay:.05s} .journey-step:nth-child(2){transition-delay:.12s} .journey-step:nth-child(3){transition-delay:.19s} .journey-step:nth-child(4){transition-delay:.26s} .journey-step:nth-child(5){transition-delay:.33s} .journey-step:nth-child(6){transition-delay:.40s} .journey-step:nth-child(7){transition-delay:.47s} .journey-step:nth-child(8){transition-delay:.54s} /* Google Translate dropdown panel */ .gt-lang-drop{ position:absolute;top:calc(100% + .6rem);inset-inline-end:0; background:#0f1f0f;border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg);min-width:155px;overflow:hidden; opacity:0;visibility:hidden;transform:translateY(-8px); transition:var(--t);box-shadow:var(--shadow-4);z-index:10; } .gt-lang-drop.open{opacity:1;visibility:visible;transform:translateY(0)} .gt-lang-opt{ display:flex;align-items:center;gap:.6rem; padding:.62rem 1rem;font-size:.79rem; color:rgba(255,255,255,.65);transition:background var(--t);cursor:pointer; font-family:var(--f-sans);border:none;background:none;width:100%;text-align:start; } .gt-lang-opt:hover{background:rgba(255,255,255,.07);color:#fff} .gt-lang-opt.active{color:var(--c-gold)} /* ══════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════ */ @media(max-width:1200px){ .markets-wrap{grid-template-columns:repeat(3,1fr)} .hero-content{grid-template-columns:1fr;gap:var(--sp-12)} .hero-features{display:none} .hero-left{max-width:680px} } @media(max-width:1100px){ .why-grid,.cert-grid,.testi-grid{grid-template-columns:repeat(2,1fr)} .why-grid.cols-4{grid-template-columns:repeat(2,1fr)} .news-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .ind-grid{grid-template-columns:repeat(2,1fr)} .process-grid{grid-template-columns:repeat(2,1fr)} .process-grid::before{display:none} .journey-grid{grid-template-columns:repeat(4,1fr)} } @media(max-width:900px){ .about-layout,.contact-layout,.prod-detail-layout{grid-template-columns:1fr} .hero-stats{display:none} .hero-scroll{display:none} .about-badge-wrap{position:static;margin-top:var(--sp-4);display:inline-block} } @media(max-width:768px){ :root{--sp-24:3.5rem;--sp-32:5rem} .wrap,.wrap-md,.wrap-sm{padding-inline:var(--sp-6)} .nav-links,.nav-right .btn,.lang-sw{display:none} .nav-ham{display:flex} .why-grid,.cert-grid,.testi-grid,.news-grid,.ind-grid{grid-template-columns:1fr} .why-grid.cols-4{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .values-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column;text-align:center} .stat-row{grid-template-columns:repeat(2,1fr)} .adm-sidebar{display:none} .adm-main{max-width:100%} .markets-wrap{grid-template-columns:repeat(2,1fr)} .wa-float{width:50px;height:50px} .wa-float svg{width:24px;height:24px} .process-grid{grid-template-columns:1fr 1fr} .journey-grid{grid-template-columns:1fr 1fr} .journey-grid::before{display:none} } @media(max-width:480px){ .hero-actions{flex-direction:column;align-items:flex-start} .stat-row{grid-template-columns:1fr} .specs-grid{grid-template-columns:1fr} .process-grid{grid-template-columns:1fr} .journey-grid{grid-template-columns:1fr} .markets-wrap{grid-template-columns:repeat(2,1fr)} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} [data-reveal]{opacity:1;transform:none} } /* ═══════════════════════════════════════════════════════════════ MOON5 i18n — Language Switcher, RTL, Logo Fixes v2.0 ═══════════════════════════════════════════════════════════════ */ /* ── Logo: premium responsive sizing ── */ .nav-logo { display:flex; align-items:center; flex-shrink:0; text-decoration:none; } .nav-logo-img, .nav-logo img { height:28px; width:auto; max-width:280px; min-width:0; object-fit:contain; object-position:left center; display:block; flex-shrink:0; transition:opacity .2s,transform .2s; } .nav-logo:hover .nav-logo-img, .nav-logo:hover img { opacity:.82; transform:translateY(-1px); } @media(max-width:1024px){ .nav-logo-img, .nav-logo img { height:25px; max-width:250px; } } @media(max-width:768px){ .nav-logo-img, .nav-logo img { height:22px; max-width:220px; } } @media(max-width:480px){ .nav-logo-img, .nav-logo img { height:20px; max-width:200px; } } /* ── Footer logo ── */ .footer-logo { display:flex; align-items:center; } .footer-logo img { height:26px; width:auto; max-width:260px; min-width:0; object-fit:contain; object-position:left center; display:block; opacity:.9; } @media(max-width:480px){ .footer-logo img { height:22px; max-width:220px; } } /* ── Language Switcher ── */ .lang-sw { position:relative; display:flex; align-items:center; } .gt-trigger-btn { display:flex; align-items:center; gap:6px; padding:6px 12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:20px; color:rgba(255,255,255,.85); font-size:.78rem; font-weight:500; letter-spacing:.04em; cursor:pointer; transition:background .2s,border-color .2s,color .2s; white-space:nowrap; } .gt-trigger-btn:hover, .gt-trigger-btn.open { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; } .gt-trigger-btn svg:last-child { transition:transform .25s; } .gt-trigger-btn.open svg:last-child { transform:rotate(180deg); } .gt-lang-drop { position:absolute; top:calc(100% + 8px); right:0; min-width:150px; background:var(--c-dark,#1a1a1a); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:6px; box-shadow:0 12px 40px rgba(0,0,0,.4); display:none; flex-direction:column; gap:2px; z-index:9999; } .gt-lang-drop.open { display:flex; } .gt-lang-opt { display:block; width:100%; text-align:start; padding:8px 12px; border-radius:7px; background:transparent; border:none; color:rgba(255,255,255,.7); font-size:.82rem; font-family:inherit; cursor:pointer; transition:background .15s,color .15s; } .gt-lang-opt:hover { background:rgba(255,255,255,.08); color:#fff; } .gt-lang-opt.active { background:rgba(var(--c-gold-rgb,180,135,60),.15); color:var(--c-gold,#b4873c); font-weight:600; } /* Mobile language row */ .mob-lang-row { display:flex; flex-wrap:wrap; gap:6px; padding:var(--sp-4,16px) 0 var(--sp-2,8px); } .gt-mob-lang { padding:6px 14px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.7); font-size:.75rem; font-weight:600; letter-spacing:.06em; cursor:pointer; transition:background .15s,color .15s,border-color .15s; font-family:inherit; } .gt-mob-lang:hover { background:rgba(255,255,255,.14); color:#fff; } .gt-mob-lang.active { background:var(--c-gold,#b4873c); border-color:var(--c-gold,#b4873c); color:#fff; } /* ── RTL Global Rules ── */ [dir="rtl"] { text-align:right; } [dir="rtl"] .nav-inner { flex-direction:row-reverse; } [dir="rtl"] .nav-links { flex-direction:row-reverse; } [dir="rtl"] .nav-right { flex-direction:row-reverse; } [dir="rtl"] .hero-content { flex-direction:row-reverse; } [dir="rtl"] .hero-left { text-align:right; } [dir="rtl"] .hero-actions { flex-direction:row-reverse; } [dir="rtl"] .about-layout { flex-direction:row-reverse; } [dir="rtl"] .contact-layout { flex-direction:row-reverse; } [dir="rtl"] .footer-grid { direction:rtl; } [dir="rtl"] .footer-bottom { flex-direction:row-reverse; } [dir="rtl"] .footer-legal { flex-direction:row-reverse; } [dir="rtl"] .trust-inner { flex-direction:row-reverse; } [dir="rtl"] .breadcrumb { flex-direction:row-reverse; } [dir="rtl"] .pcard-footer { flex-direction:row-reverse; } [dir="rtl"] .journey-step { flex-direction:row-reverse; } [dir="rtl"] .citem { flex-direction:row-reverse; } [dir="rtl"] .testi-author { flex-direction:row-reverse; } [dir="rtl"] .hero-scroll { right:auto; left:var(--sp-12,48px); } [dir="rtl"] .gt-lang-drop { right:auto; left:0; } [dir="rtl"] .gt-lang-opt { text-align:right; } [dir="rtl"] .mob-menu { text-align:right; } [dir="rtl"] .sec-hd { text-align:center; } [dir="rtl"] .eyebrow { justify-content:center; } /* ── Arabic font tweak ── */ body.lang-ar, body.lang-ar *:not(.nav-logo-img):not(img):not(svg):not([class*="icon"]) { font-family:'Cairo','Plus Jakarta Sans',sans-serif; } body.lang-ar .t-hero, body.lang-ar .t-d1, body.lang-ar .t-d2, body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4 { font-family:'Cairo','Plus Jakarta Sans',sans-serif; font-weight:700; letter-spacing:0; } /* Fix RTL border-inline-start for contact response box */ [dir="rtl"] [style*="border-inline-start"] { border-inline-start:none; border-inline-end:3px solid var(--c-green-2); } /* ── Remove old Google Translate elements if they linger ── */ .goog-te-banner-frame, .goog-te-gadget-simple, #google_translate_element, .skiptranslate { display:none !important; } body { top:0 !important; } /* ── i18n transition ── */ [data-i18n] { transition:opacity .12s ease; } /* ── Form message states ── */ .form-msg.success { color:#2d7a45; background:rgba(45,122,69,.08); padding:.6rem 1rem; border-radius:6px; border-inline-start:3px solid #2d7a45; } .form-msg.error { color:#c0392b; background:rgba(192,57,43,.08); padding:.6rem 1rem; border-radius:6px; border-inline-start:3px solid #c0392b; } /* ═══════════════════════════════════════════════════════════════ WHO WE ARE — Premium 4-Image Gallery Layout ═══════════════════════════════════════════════════════════════ */ .wwa-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--sp-3); position: relative; } .wwa-img-wide { grid-column: 1 / -1; position: relative; } .wwa-img { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; } .wwa-img-wide { aspect-ratio: 16/7; } .wwa-img img, .wwa-img-wide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); } .wwa-img:hover img, .wwa-img-wide:hover img { transform: scale(1.04); } .wwa-img-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(6,18,8,.75) 0%, transparent 100%); color: rgba(255,255,255,.92); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1.5rem 1.25rem .85rem; border-radius: 0 0 var(--radius-xl) var(--radius-xl); } .wwa-badge { position: absolute; bottom: calc(33% + var(--sp-3) + .5rem); right: -.75rem; background: var(--c-gold); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,.18); z-index: 2; } .wwa-badge-num { font-family: var(--f-serif); font-size: 2.4rem; font-weight: 400; line-height: 1; display: block; color: #fff; } .wwa-badge-lbl { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .9; margin-top: .25rem; display: block; } .wwa-mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-6); margin-bottom: var(--sp-6); } .wwa-mission-card { padding: var(--sp-5); border-radius: var(--radius-lg); } .wwa-mission-dark { background: var(--c-dark); } .wwa-mission-green { background: var(--c-green-2); } @media(max-width:768px) { .wwa-gallery { grid-template-columns: 1fr 1fr; } .wwa-img-wide { aspect-ratio: 16/9; } .wwa-badge { right: .5rem; bottom: calc(50% + var(--sp-3) + 1rem); } .wwa-mission-grid { grid-template-columns: 1fr; } } @media(max-width:480px) { .wwa-gallery { grid-template-columns: 1fr; } .wwa-img-wide { aspect-ratio: 4/3; } .wwa-badge { position: static; margin-top: var(--sp-3); display:inline-block; } } [dir="rtl"] .wwa-badge { right: auto; left: -.75rem; } [data-theme="dark"] .wwa-mission-dark { background: rgba(255,255,255,.06); border: 1px solid var(--c-border); } [data-theme="dark"] .wwa-mission-green { background: rgba(61,220,122,.12); border: 1px solid rgba(61,220,122,.2); } /* ═══════════════════════════════════════════════════════════════ ADMIN PANEL — Full RTL Arabic Support ═══════════════════════════════════════════════════════════════ */ body.lang-ar .adm-layout { direction: rtl; } body.lang-ar .adm-sidebar { border-right: none; border-left: 1px solid var(--c-border); } body.lang-ar .adm-nav { flex-direction: row-reverse; } body.lang-ar .adm-hd { text-align: right; } body.lang-ar .adm-table th, body.lang-ar .adm-table td { text-align: right; } body.lang-ar label, body.lang-ar .admin-form-label { text-align: right; display: block; } body.lang-ar .adm-card h3 { text-align: right; } body.lang-ar .stat-row { direction: rtl; } body.lang-ar .flex-between { flex-direction: row-reverse; } body.lang-ar input, body.lang-ar textarea, body.lang-ar select { direction: rtl; text-align: right; } body.lang-ar .adm-btn { direction: rtl; } /* ─── Admin Nav Polish ─────────────────────────────────────────── */ .adm-logo-label { font-family: var(--f-sans); font-size: .75rem; font-weight: 400; color: rgba(255,255,255,.4); margin-inline-start: .5rem; } .adm-nav-right { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; } .adm-user-label { font-size: .82rem; color: rgba(255,255,255,.5); } .adm-nav-link { font-size: .75rem; color: rgba(255,255,255,.45); text-decoration: none; transition: color .2s; } .adm-nav-link:hover { color: rgba(255,255,255,.8); } .adm-nav-link-border { padding: .3rem .7rem; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); } .adm-lang-switcher { display: flex; gap: .35rem; align-items: center; } .adm-lang-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.55); padding: .22rem .6rem; border-radius: var(--radius); font-size: .72rem; font-weight: 700; letter-spacing: .05em; cursor: pointer; transition: all .2s; } .adm-lang-btn.active, .adm-lang-btn:hover { background: var(--c-green-2, #3ddc7a); border-color: transparent; color: #061508; } /* ─── Admin Form Labels ────────────────────────────────────────── */ .adm-label { display: block; font-size: .75rem; font-weight: 600; color: var(--c-text); margin-bottom: .4rem; } .adm-label-hint { font-weight: 400; color: var(--c-text-3); margin-inline-start: .3rem; } .adm-sidebar-group { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--sp-6); } /* ═══════════════════════════════════════════════════════════════ WHO WE ARE — Premium Redesign (Light + Dark Mode) ═══════════════════════════════════════════════════════════════ */ .wwa-sec { padding-block: var(--sp-24); background: var(--c-white); } [data-theme="dark"] .wwa-sec { background: var(--c-bg); } /* Layout */ .wwa-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; } /* Images column */ .wwa-images-col { display: flex; flex-direction: column; gap: var(--sp-5); } /* Image Gallery */ .wwa-gallery-grid { display: flex; flex-direction: column; gap: var(--sp-3); } .wwa-img-main { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16/9; box-shadow: 0 8px 32px rgba(0,0,0,.12); } .wwa-img-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .wwa-img-main:hover img { transform: scale(1.03); } .wwa-img-overlay-label { position: absolute; bottom: 0; inset-inline-start: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%); color: #fff; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: var(--sp-6) var(--sp-4) var(--sp-3); font-weight: 600; } .wwa-img-row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); } .wwa-img-sm { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 4px 16px rgba(0,0,0,.1); } .wwa-img-sm img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .wwa-img-sm:hover img { transform: scale(1.05); } /* ── Achievement Badge — below images ── */ .wwa-achievement-badge { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); background: linear-gradient(135deg, var(--c-dark) 0%, #1a3d22 100%); border-radius: var(--radius-xl); border: 1px solid rgba(61,220,122,.2); box-shadow: 0 8px 32px rgba(0,0,0,.15); animation: achv-glow 3s ease-in-out infinite; } @keyframes achv-glow { 0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 0 0 1px rgba(61,220,122,.15); } 50% { box-shadow: 0 8px 32px rgba(0,0,0,.2), 0 0 0 1px rgba(61,220,122,.35); } } .wwa-achv-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,201,77,.15); border: 1px solid rgba(255,201,77,.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--c-gold); } .wwa-achv-body { display: flex; flex-direction: column; gap: 2px; } .wwa-achv-num { font-family: var(--f-serif); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--c-gold); } .wwa-achv-lbl { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); } .wwa-achv-divider { width: 1px; height: 40px; background: rgba(255,255,255,.15); flex-shrink: 0; margin: 0 var(--sp-2); } .wwa-achv-stats { display: flex; gap: var(--sp-5); } .wwa-achv-stat { display: flex; flex-direction: column; gap: 2px; } .wwa-achv-stat-n { font-family: var(--f-serif); font-size: 1.3rem; font-weight: 700; color: var(--c-green-3); line-height: 1; } .wwa-achv-stat-l { font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); } /* Text column */ .wwa-text-col { display: flex; flex-direction: column; gap: var(--sp-6); } .wwa-headline { margin-bottom: var(--sp-1); line-height: 1.15; color: var(--c-text); } .wwa-body { font-size: 1rem; line-height: 1.8; color: var(--c-text-2); } /* Mission/Vision cards */ .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .mv-card { border-radius: var(--radius-xl); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); } .mv-dark { background: var(--c-dark); } .mv-green { background: var(--c-green-1); } .mv-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); flex-shrink: 0; } .mv-label { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold); } .mv-text { font-size: .82rem; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0; } /* Values list */ .wwa-values { display: flex; flex-direction: column; gap: var(--sp-3); } .wwa-value-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); background: var(--c-bg); border: 1px solid var(--c-border); transition: border-color .2s, transform .2s; } [data-theme="dark"] .wwa-value-item { background: rgba(255,255,255,.04); } .wwa-value-item:hover { border-color: var(--c-green-2); transform: translateX(4px); } body[dir="rtl"] .wwa-value-item:hover { transform: translateX(-4px); } .wwa-value-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); flex-shrink: 0; margin-top: .4rem; } .wwa-value-item strong { display: block; font-size: .82rem; font-weight: 700; color: var(--c-text); margin-bottom: .15rem; } .wwa-value-item span { font-size: .78rem; color: var(--c-text-3); line-height: 1.55; } .wwa-cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; } /* ── Why Choose Us — SVG icon containers ── */ .why-icon-wrap { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--c-green-tint); border: 1px solid rgba(61,180,74,.2); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); transition: background .25s, border-color .25s; flex-shrink: 0; } .why-svg { width: 22px; height: 22px; stroke: var(--c-green-2); } .why-card:hover .why-icon-wrap { background: var(--c-green-2); border-color: transparent; } .why-card:hover .why-svg { stroke: var(--c-dark); } [data-theme="dark"] .why-icon-wrap { background: rgba(61,220,122,.08); border-color: rgba(61,220,122,.18); } /* WWA responsive */ @media (max-width: 900px) { .wwa-layout { grid-template-columns: 1fr; gap: var(--sp-10); } .wwa-achievement-badge { flex-wrap: wrap; } } @media (max-width: 600px) { .wwa-img-row { grid-template-columns: repeat(3,1fr); gap: var(--sp-2); } .wwa-achv-stats { gap: var(--sp-4); } } /* About stats strip */ .about-stats-strip { background: linear-gradient(135deg, var(--c-green-1) 0%, var(--c-dark) 100%); padding: var(--sp-12) 0; } .about-stats-inner { display: flex; justify-content: center; gap: var(--sp-12); flex-wrap: wrap; } .about-stat { text-align: center; } .about-stat-num { display: block; font-family: var(--f-serif); font-size: 2.5rem; color: var(--c-gold); line-height: 1; font-weight: 700; } .about-stat-lbl { display: block; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: .4rem; } /* Why Choose Us grid */ .why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); margin-top: var(--sp-10); } .why-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-xl); padding: var(--sp-7); transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden; } .why-card::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--c-green-2), var(--c-gold)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } body[dir="rtl"] .why-card::before { transform-origin: right; } .why-card:hover::before { transform: scaleX(1); } .why-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); border-color: var(--c-green-2); } .why-icon { font-size: 2rem; margin-bottom: var(--sp-4); line-height: 1; } .why-card h3 { font-size: .95rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-2); } .why-card p { font-size: .82rem; color: var(--c-text-2); line-height: 1.65; margin: 0; } /* Timeline */ .timeline-sec { padding-block: var(--sp-24); } .timeline { position: relative; max-width: 700px; margin: var(--sp-12) auto 0; padding-inline-start: var(--sp-10); } .timeline::before { content: ''; position: absolute; inset-inline-start: 12px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.15); } .tl-item { position: relative; margin-bottom: var(--sp-8); padding-inline-start: var(--sp-8); } .tl-dot { position: absolute; inset-inline-start: -9px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-green-2); border: 3px solid var(--c-dark); box-shadow: 0 0 0 3px rgba(255,255,255,.15); z-index: 1; } .tl-dot-gold { background: var(--c-gold); box-shadow: 0 0 0 3px rgba(var(--c-gold-rgb, 212, 175, 55),.25); } .tl-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-xl); padding: var(--sp-5) var(--sp-6); transition: background .2s; } .tl-card:hover { background: rgba(255,255,255,.1); } .tl-card-gold { background: rgba(var(--c-gold-rgb, 212,175,55),.12); border-color: rgba(var(--c-gold-rgb, 212,175,55),.3); } .tl-year { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--sp-2); } .tl-card h4 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: var(--sp-1); } .tl-card p { font-size: .82rem; color: rgba(255,255,255,.65); line-height: 1.6; margin: 0; } /* Quality Standards Banner */ .quality-banner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: calc(var(--radius-xl) * 1.5); padding: var(--sp-12); } .quality-banner-text .eyebrow { margin-bottom: var(--sp-2); } .quality-banner-text h2 { margin-bottom: var(--sp-4); } .quality-banner-text p { color: var(--c-text-2); line-height: 1.8; font-size: .95rem; } .quality-certs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); } .cert-badge-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-xl); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; font-size: .75rem; font-weight: 700; color: var(--c-text); transition: transform .2s, border-color .2s; } .cert-badge-card:hover { transform: translateY(-3px); border-color: var(--c-gold); } .cert-badge-icon { font-size: 1.8rem; line-height: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-green-tint); color: var(--c-green-2); } .cert-badge-icon svg { width: 20px; height: 20px; } [data-theme="dark"] .cert-badge-card { background: rgba(255,255,255,.04); color: var(--c-text); } [data-theme="dark"] .quality-banner { background: rgba(255,255,255,.03); border-color: var(--c-border); } [data-theme="dark"] .quality-banner-text p { color: var(--c-text-2); } /* Responsive: Who We Are */ @media(max-width:1024px) { .wwa-layout { grid-template-columns: 1fr; gap: var(--sp-10); } .quality-banner { grid-template-columns: 1fr; gap: var(--sp-8); } .why-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:768px) { .wwa-layout { gap: var(--sp-8); } .mv-grid { grid-template-columns: 1fr; gap: var(--sp-3); } .wwa-img-row { gap: var(--sp-2); } .about-stats-inner { gap: var(--sp-8); } .about-stat-num { font-size: 2rem; } .why-grid { grid-template-columns: 1fr; } .quality-certs-grid { grid-template-columns: repeat(2,1fr); } .timeline { padding-inline-start: var(--sp-8); } .wwa-experience-badge { display: none; } } @media(max-width:480px) { .quality-certs-grid { grid-template-columns: repeat(2,1fr); } .wwa-cta-row { flex-direction: column; } } /* ═══════════════════════════════════════════════════════════════ FAQ — Premium Redesign ═══════════════════════════════════════════════════════════════ */ .faq-page-sec { padding-block: var(--sp-16); } .faq-list { display: flex; flex-direction: column; gap: 0; } .faq-item { border: 1px solid var(--c-border); border-radius: var(--radius-xl); margin-bottom: var(--sp-3); background: var(--c-white); overflow: hidden; transition: box-shadow .25s, border-color .25s; } .faq-item:hover { border-color: var(--c-green-2); } .faq-item.open { border-color: var(--c-green-2); box-shadow: 0 4px 20px rgba(0,0,0,.07); } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); width: 100%; text-align: start; background: none; border: none; cursor: pointer; padding: var(--sp-5) var(--sp-6); font-family: var(--f-sans); font-size: .95rem; font-weight: 600; color: var(--c-text); line-height: 1.5; transition: color .2s; } .faq-item.open .faq-q { color: var(--c-green-2); } .faq-q-text { flex: 1; } .faq-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg); display: flex; align-items: center; justify-content: center; transition: background .25s, transform .35s; color: var(--c-text-2); } .faq-item.open .faq-icon { background: var(--c-green-2); color: #fff; transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .3s; } .faq-item.open .faq-a { max-height: 400px; } .faq-a-in { padding: 0 var(--sp-6) var(--sp-5); font-size: .9rem; line-height: 1.8; color: var(--c-text-2); border-top: 1px solid var(--c-border); padding-top: var(--sp-4); margin-top: 0; } /* FAQ CTA Box */ .faq-cta-box { margin-top: var(--sp-12); background: linear-gradient(135deg, var(--c-green-tint) 0%, var(--c-bg) 100%); border: 1px solid var(--c-border); border-radius: calc(var(--radius-xl) * 1.5); padding: var(--sp-12) var(--sp-8); text-align: center; } .faq-cta-icon { font-size: 2.5rem; line-height: 1; margin-bottom: var(--sp-4); } .faq-cta-box h3 { font-family: var(--f-serif); font-size: 1.5rem; color: var(--c-text); margin-bottom: var(--sp-3); } .faq-cta-box p { color: var(--c-text-2); margin-bottom: var(--sp-6); font-size: .95rem; } /* ═══════════════════════════════════════════════════════════════ LOGO FIX — Ensure no cropping ═══════════════════════════════════════════════════════════════ */ .nav-logo { padding: 2px 0; } .nav-logo-img, .nav-logo img { height: 32px !important; max-width: 200px !important; object-fit: contain; object-position: left center; } @media(max-width:1024px){ .nav-logo-img,.nav-logo img { height:28px !important; max-width:180px !important; } } @media(max-width:768px){ .nav-logo-img,.nav-logo img { height:26px !important; max-width:160px !important; } } @media(max-width:480px){ .nav-logo-img,.nav-logo img { height:24px !important; max-width:150px !important; } } /* ═══════════════════════════════════════════════════════════════ DARK MODE — Comprehensive black-text audit fix Catches any remaining c-dark text colors in dark mode ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .sec-hd h2 { color: var(--c-text); } [data-theme="dark"] .pcard-title { color: var(--c-text); } [data-theme="dark"] .value-card h4 { color: var(--c-text); } [data-theme="dark"] .process-step h3 { color: var(--c-text); } [data-theme="dark"] .why-card h3 { color: var(--c-text); } [data-theme="dark"] .cert-card h3 { color: var(--c-text); } [data-theme="dark"] .testi-name { color: var(--c-text); } [data-theme="dark"] .faq-q { color: var(--c-text); } [data-theme="dark"] .contact-info h2 { color: var(--c-text); } [data-theme="dark"] .contact-card h3 { color: var(--c-text); } [data-theme="dark"] .form-group label { color: var(--c-text-2); } [data-theme="dark"] .prod-detail-title { color: var(--c-text); } [data-theme="dark"] .news-title { color: var(--c-text); } [data-theme="dark"] .ind-card h3 { color: var(--c-text); } [data-theme="dark"] .legal h2 { color: var(--c-text); } [data-theme="dark"] .adm-hd h1 { color: var(--c-text); } [data-theme="dark"] .adm-card h3 { color: var(--c-text); } [data-theme="dark"] .stat-num { color: var(--c-text); } [data-theme="dark"] .adm-login-hd h1 { color: var(--c-text); } [data-theme="dark"] .wwa-headline { color: var(--c-text); } [data-theme="dark"] .wwa-body { color: var(--c-text-2); } [data-theme="dark"] .wwa-value-item strong { color: var(--c-text); } [data-theme="dark"] .about-stat-lbl { color: rgba(255,255,255,.55); } [data-theme="dark"] .quality-banner-text h2 { color: var(--c-text); } [data-theme="dark"] .quality-banner-text p { color: var(--c-text-2); } [data-theme="dark"] .cert-badge-card { color: var(--c-text); } [data-theme="dark"] .tl-card h4 { color: rgba(255,255,255,.9); } [data-theme="dark"] .tl-card p { color: rgba(255,255,255,.6); } /* Catch all remaining c-dark heading colors globally */ [data-theme="dark"] p { color: var(--c-text-2); } /* ═══════════════════════════════════════════════════════════════ FINAL PRODUCTION AUDIT FIXES v2 1. Light Mode text visibility (Who We Are page) 2. Why Moon5 & Packaging section polish 3. Mobile responsiveness — additional breakpoints 4. Dark mode consistency ═══════════════════════════════════════════════════════════════ */ /* ── 1. LIGHT MODE: Mission/Vision cards text fix ────────────── .mv-dark and .mv-green use rgba(255,255,255) text — correct for dark cards, but must stay readable in light theme. */ .mv-dark { background: var(--c-dark); } .mv-green { background: var(--c-green-1); } .mv-label { color: var(--c-gold); } .mv-text { color: rgba(255,255,255,.82); font-size: .86rem; } .mv-icon { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); } /* Light mode: Timeline is always inside .dark-sec — always dark bg. But .tl-card h4 / p need explicit light-mode defaults too: */ .tl-card h4 { color: #fff; } .tl-card p { color: rgba(255,255,255,.68); } /* ── 2. WHO WE ARE — wwa sections light mode audit ──────────── */ /* wwa-body text must be readable in both modes */ .wwa-body { color: var(--c-text-2); line-height: 1.8; } [data-theme="dark"] .wwa-body { color: rgba(255,255,255,.72); } /* wwa-headline: was using --c-dark which is invisible in dark mode */ .wwa-headline { color: var(--c-text); } /* Achievement badge — light mode must not show white text on white */ .wwa-achievement-badge { background: var(--c-dark); border-radius: var(--radius-xl); padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .wwa-achv-icon { color: var(--c-gold); } .wwa-achv-num { color: #fff; font-size: 1.6rem; font-weight: 800; font-family: var(--f-serif); } .wwa-achv-lbl { color: rgba(255,255,255,.7); font-size: .78rem; letter-spacing: .05em; } .wwa-achv-divider { width: 1px; height: 40px; background: rgba(255,255,255,.15); } .wwa-achv-stat-n { color: #fff; font-weight: 700; font-size: 1.1rem; display: block; } .wwa-achv-stat-l { color: rgba(255,255,255,.6); font-size: .72rem; } /* About stats section */ .about-stats-row { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-block: var(--sp-8); } .about-stat { text-align: center; } .about-stat-num { font-family: var(--f-serif); font-size: 2.5rem; font-weight: 700; color: var(--c-green-2); display: block; } .about-stat-lbl { font-size: .78rem; color: var(--c-text-3); letter-spacing: .06em; text-transform: uppercase; } [data-theme="dark"] .about-stat-lbl { color: rgba(255,255,255,.5); } /* ── 3. WHY MOON5 SECTION — redesigned cards ─────────────────── */ .why-card { border-radius: var(--radius-xl); padding: var(--sp-6); background: var(--c-white); border: 1px solid var(--c-border); position: relative; overflow: hidden; transition: box-shadow .25s, transform .25s, border-color .25s; display: flex; flex-direction: column; gap: var(--sp-3); } .why-card::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; height: 3px; width: 100%; background: var(--c-green-2); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } [dir="rtl"] .why-card::before { transform-origin: right; } .why-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-5px); border-color: var(--c-green-2); } .why-card:hover::before { transform: scaleX(1); } .why-icon-wrap { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--c-green-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .25s; } .why-card:hover .why-icon-wrap { background: var(--c-green-2); } .why-svg { stroke: var(--c-green-2); width: 22px; height: 22px; flex-shrink: 0; transition: stroke .25s; } .why-card:hover .why-svg { stroke: #fff; } .why-card h3 { font-family: var(--f-serif); font-size: 1.05rem; font-weight: 700; color: var(--c-text); margin: 0; } .why-card p { font-size: .84rem; color: var(--c-text-2); line-height: 1.7; margin: 0; } [data-theme="dark"] .why-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); } [data-theme="dark"] .why-card:hover { background: rgba(255,255,255,.07); border-color: var(--c-green-2); box-shadow: 0 8px 32px rgba(0,0,0,.3); } [data-theme="dark"] .why-card h3 { color: var(--c-text); } [data-theme="dark"] .why-card p { color: rgba(255,255,255,.65); } [data-theme="dark"] .why-icon-wrap { background: rgba(61,220,122,.1); } /* ── 4. PACKAGING SECTION — visual improvements ───────────────── */ /* Packaging uses .why-card — inherits above. Only spacing tweaks: */ .why-grid.cols-4 .why-card { padding: var(--sp-5); } .why-grid.cols-4 .why-icon-wrap { width: 44px; height: 44px; } .why-grid.cols-4 h3 { font-size: 1rem; } /* ── 5. MOBILE RESPONSIVENESS AUDIT ───────────────────────────── Target: 320px, 375px, 390px, 414px, 768px No horizontal scroll anywhere. */ /* Product detail layout — stacks on mobile */ .prod-detail-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--sp-12); align-items: start; } /* Mission/Vision cards */ @media (max-width: 768px) { .mv-grid { grid-template-columns: 1fr; gap: var(--sp-3); } .prod-detail-layout { grid-template-columns: 1fr; gap: var(--sp-8); } .wwa-layout { grid-template-columns: 1fr !important; gap: var(--sp-8) !important; } .wwa-gallery-grid { gap: var(--sp-3); } .wwa-img-row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-2); } .wwa-achievement-badge { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); } .quality-banner { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6); } .about-stats-row { justify-content: center; gap: var(--sp-6); } .timeline { padding-inline-start: var(--sp-6); } .tl-item { padding-inline-start: var(--sp-5); } .prod-ctas { flex-direction: column !important; } .prod-ctas .btn { width: 100%; text-align: center; justify-content: center; } .specs-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 480px) { /* Global: no overflow */ body { overflow-x: hidden; } .wrap, .wrap-md, .wrap-sm { padding-inline: var(--sp-4); } /* Hero */ .hero-title { font-size: clamp(2rem, 10vw, 3rem) !important; } /* Cards & grids */ .why-grid, .why-grid.cols-4 { grid-template-columns: 1fr; gap: var(--sp-3); } .why-card { padding: var(--sp-4) var(--sp-4); } .mv-grid { grid-template-columns: 1fr; } .specs-grid { grid-template-columns: 1fr !important; } /* About page */ .wwa-img-row { grid-template-columns: repeat(2, 1fr); } .wwa-achievement-badge { flex-wrap: wrap; gap: var(--sp-2); } .wwa-achv-divider { display: none; } .timeline { padding-inline-start: var(--sp-4); } .tl-item { padding-inline-start: var(--sp-3); margin-bottom: var(--sp-5); } .tl-card { padding: var(--sp-4); } /* Products */ .pcard-body { padding: var(--sp-3); } .pcard-title { font-size: 1rem; } .pcard-desc { font-size: .8rem; } .prod-detail-title { font-size: 1.4rem; } .prod-detail-desc { font-size: .88rem; } /* Stats */ .stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } .stat-num { font-size: 1.8rem; } /* Typography scale down */ .t-d1 { font-size: clamp(1.8rem, 8vw, 2.5rem) !important; } .t-d2 { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; } /* Packaging */ .why-grid.cols-4 { grid-template-columns: 1fr; } /* Process steps */ .process-grid { grid-template-columns: 1fr; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .footer-bottom { flex-direction: column; gap: var(--sp-2); text-align: center; } /* Contact */ .contact-grid { grid-template-columns: 1fr; } /* Product detail page CTA buttons */ .prod-ctas { flex-direction: column !important; } .prod-ctas .btn { width: 100%; box-sizing: border-box; text-align: center; } /* Prevent images from overflowing */ img { max-width: 100%; height: auto; } .wwa-img-main img { border-radius: var(--radius-xl); } /* Who we are page on mobile */ .wwa-images-col, .wwa-text-col { width: 100% !important; } } @media (max-width: 375px) { .wrap, .wrap-md, .wrap-sm { padding-inline: var(--sp-3); } .why-card { padding: var(--sp-3); } .tl-card { padding: var(--sp-3); } .pcard-title { font-size: .95rem; } .t-d1 { font-size: clamp(1.6rem, 9vw, 2rem) !important; } .t-d2 { font-size: clamp(1.35rem, 8vw, 1.8rem) !important; } .hero-actions { flex-direction: column; width: 100%; } .hero-actions .btn { width: 100%; text-align: center; } } /* Prevent horizontal scroll globally */ html, body { max-width: 100vw; overflow-x: hidden; } * { box-sizing: border-box; } img { max-width: 100%; } /* ── 6. DARK MODE — final global catch ───────────────────────── */ [data-theme="dark"] .about { background: var(--c-bg); } [data-theme="dark"] .wwa-sec { background: var(--c-bg); } [data-theme="dark"] .story-text { color: rgba(255,255,255,.7); } [data-theme="dark"] .about-story-sec h2 { color: var(--c-text); } [data-theme="dark"] .quality-banner { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); } [data-theme="dark"] .quality-banner-text h2 { color: var(--c-text); } [data-theme="dark"] .quality-banner-text p { color: rgba(255,255,255,.65); } /* ═══════════════════════════════════════════════════════════ PATCH SET: All targeted fixes ═══════════════════════════════════════════════════════════ */ /* ── 1. About Page: Vision card fix in LIGHT MODE ─────────── */ /* mv-green uses c-green-1 bg, text must always be white (dark bg) */ .mv-dark .mv-text, .mv-green .mv-text { color: rgba(255,255,255,.82); } .mv-dark .mv-label, .mv-green .mv-label { color: var(--c-gold-lt); } .mv-dark .mv-icon, .mv-green .mv-icon { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); } /* ── 2. Contact Page: Dark mode text fixes ────────────────── */ [data-theme="dark"] .citem-lbl { color: var(--c-text-3); } [data-theme="dark"] .citem-val { color: var(--c-text); } [data-theme="dark"] .citem-val a { color: var(--c-text); } [data-theme="dark"] .contact-form-card h3 { color: var(--c-text); } [data-theme="dark"] .contact-form-card { background: var(--surface-card); border-color: var(--c-border); } [data-theme="dark"] h2[style*="color:var(--c-dark)"] { color: var(--c-text) !important; } [data-theme="dark"] p[style*="color:#fff5f5"], [data-theme="dark"] p[style*="color:#721c24"] { color: var(--c-text-2) !important; } [data-theme="dark"] .contact-layout h2 { color: var(--c-text) !important; } [data-theme="dark"] [style*="color:var(--c-dark)"] { color: var(--c-text) !important; } /* ── 3. Logo: slightly reduced size ──────────────────────── */ .nav-logo-img, .nav-logo img { height: 24px !important; max-width: 240px !important; } @media(max-width:1024px) { .nav-logo-img, .nav-logo img { height: 22px !important; max-width: 210px !important; } } @media(max-width:768px) { .nav-logo-img, .nav-logo img { height: 20px !important; max-width: 185px !important; } } @media(max-width:480px) { .nav-logo-img, .nav-logo img { height: 18px !important; max-width: 160px !important; } } /* ── 4. Homepage About Section: improved layout & spacing ── */ .about-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-16); align-items: center; } .about-layout .about-text-col { padding-inline-start: var(--sp-4); } .about-layout .t-d2 { line-height: 1.12; margin-bottom: var(--sp-5); } .about-layout .t-body-lg { line-height: 1.85; color: var(--c-text-2); margin-bottom: var(--sp-8); } .about-values { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-8); } .about-value-card { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4) var(--sp-5); background: var(--c-green-tint); border-radius: var(--radius-lg); border: 1px solid rgba(40,88,42,.1); transition: background var(--t), transform var(--t); } .about-value-card:hover { background: var(--c-green-tint2); transform: translateX(4px); } .about-value-card h4 { font-size: .875rem; font-weight: 700; color: var(--c-dark); margin-bottom: .18rem; } .about-value-card p { font-size: .8rem; color: var(--c-text-2); line-height: 1.65; margin: 0; } [data-theme="dark"] .about-value-card h4 { color: var(--c-text); } [data-theme="dark"] .about-value-card { background: rgba(255,255,255,.04); border-color: var(--c-border); } [data-theme="dark"] .about-value-card:hover { background: rgba(255,255,255,.07); } @media(max-width:900px) { .about-layout { grid-template-columns: 1fr; gap: var(--sp-10); } .about-layout .about-text-col { padding-inline-start: 0; } } /* ── 5. Product Detail: specs-grid without origin ─────────── */ .specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-6); } /* ── 6. Product gallery mobile ───────────────────────────── */ @media(max-width:768px) { .pd-gallery { position: static; } .pd-gallery-thumbs { justify-content: center; } .pd-thumb { width: 60px; height: 60px; } } @media(max-width:480px) { .pd-thumb { width: 52px; height: 52px; } } /* ── 7. Dark mode: product packaging ─────────────────────── */ [data-theme="dark"] .pd-pkg-item { background: rgba(255,255,255,.05); border-color: var(--c-border); color: var(--c-text); } [data-theme="dark"] .pd-pkg-item:hover { background: rgba(255,255,255,.09); } [data-theme="dark"] .pd-pkg-custom { color: var(--c-text-3); border-color: var(--c-gold); } /* ── 8. Dark mode: spec-box ──────────────────────────────── */ [data-theme="dark"] .spec-box { background: rgba(255,255,255,.04); border: 1px solid var(--c-border); } [data-theme="dark"] .spec-box:hover { background: rgba(255,255,255,.07); } [data-theme="dark"] .spec-box .lbl { color: var(--c-green-3); } [data-theme="dark"] .spec-box .val { color: var(--c-text); } /* ── 9. Dark mode: prod-detail-title ────────────────────── */ [data-theme="dark"] .prod-detail-title { color: var(--c-text); } /* ── 10. Response time box dark mode ─────────────────────── */ [data-theme="dark"] [style*="background:var(--c-green-tint)"] p[style*="color:var(--c-dark)"] { color: var(--c-text) !important; }