/* مضغوط وشواية — One Page Website */ @font-face { font-family: 'Huwiya'; src: url('fonts/HuwiyaTypeface-Light.otf') format('opentype'); font-weight: 300; } @font-face { font-family: 'Huwiya'; src: url('fonts/HuwiyaTypeface-Regular.otf') format('opentype'); font-weight: 400; } @font-face { font-family: 'Huwiya'; src: url('fonts/HuwiyaTypeface-Medium.otf') format('opentype'); font-weight: 500; } @font-face { font-family: 'Huwiya'; src: url('fonts/HuwiyaTypeface-Bold.otf') format('opentype'); font-weight: 700; } @font-face { font-family: 'Huwiya'; src: url('fonts/HuwiyaTypeface-Black.otf') format('opentype'); font-weight: 900; } :root{ --yellow:#FEC71C; --red:#EC2C27; --black:#1A1006; --cream:#FFF8E8; --white:#ffffff; --gray:#6b6258; --radius:22px; --shadow: 0 14px 34px rgba(26,16,6,.10); --font-ar:'Huwiya','Segoe UI',Tahoma,sans-serif; --font-en:'Poppins','Segoe UI',Tahoma,Arial,sans-serif; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ background:var(--cream); color:var(--black); font-family:var(--font-en); line-height:1.6; overflow-x:hidden; } html[dir="rtl"] body{ font-family:var(--font-ar); } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} .container{ max-width:1160px; margin:0 auto; padding:0 24px; } /* language visibility (scoped to body so it never matches itself) */ body [lang="ar"]{ display:inline; } body [lang="en"]{ display:none; } html[data-lang="en"] body [lang="ar"]{ display:none; } html[data-lang="en"] body [lang="en"]{ display:inline; } html[data-lang="en"] .block-en{ display:block; } .block-en{ display:none; } html[data-lang="ar"] .block-ar{ display:block; } .block-ar{ display:none; } /* ---------- Header ---------- */ header{ position:sticky; top:0; z-index:100; background:rgba(255,248,232,.9); backdrop-filter:blur(10px); border-bottom:1px solid rgba(26,16,6,.06); } .nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; } .brand{ display:flex; align-items:center; gap:10px; } .brand img{ height:110px; width:auto; } nav.links{ display:flex; align-items:center; gap:28px; } nav.links a{ font-weight:600; font-size:15px; color:var(--black); position:relative; padding:4px 0; } nav.links a:hover{ color:var(--red); } .header-actions{ display:flex; align-items:center; gap:12px; } .lang-btn{ border:2px solid var(--black); background:transparent; border-radius:30px; padding:8px 18px; font-weight:700; font-size:14px; cursor:pointer; transition:.2s; } .lang-btn:hover{ background:var(--black); color:var(--white); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:30px; font-weight:700; font-size:15px; cursor:pointer; border:2px solid transparent; transition:.2s transform, .2s box-shadow, .2s background, .2s color; white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--red); color:var(--white); box-shadow:0 10px 24px rgba(236,44,39,.35); } .btn-primary:hover{ box-shadow:0 14px 30px rgba(236,44,39,.45); } .btn-dark{ background:var(--black); color:var(--white); } .btn-outline{ border-color:var(--black); color:var(--black); } .btn-outline:hover{ background:var(--black); color:var(--white); } .btn-whatsapp{ background:#25D366; color:#fff; } .burger{ display:none; } /* ---------- Hero ---------- */ .hero{ position:relative; background:var(--yellow); overflow:hidden; padding:70px 0 90px; } .hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(236,44,39,.18), transparent 45%), radial-gradient(circle at 10% 90%, rgba(236,44,39,.14), transparent 40%); pointer-events:none; } .hero .eyebrow{ position:relative; z-index:1; } .hero h1, .hero p.sub, .hero-ctas{ position:relative; z-index:1; } .hero h1{ color:var(--black); } .hero p.sub{ color:#3a2c17; } .btn-outline{ border-color:var(--black); color:var(--black); } .btn-outline:hover{ background:var(--black); color:#fff; } .hero-grid{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; } .eyebrow{ display:inline-block; background:var(--black); color:var(--yellow); padding:8px 18px; border-radius:30px; font-size:13px; font-weight:700; margin-bottom:22px; letter-spacing:.3px; } .hero h1{ font-family:var(--font-ar); font-weight:900; font-size:56px; line-height:1.15; color:var(--black); margin-bottom:18px; } html[data-lang="en"] .hero h1{ font-family:var(--font-en); font-size:46px; } .hero p.sub{ font-size:19px; color:#3a2c17; max-width:480px; margin-bottom:34px; } .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; } .hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; } .plate-wrap{ position:relative; width:100%; max-width:460px; aspect-ratio:1/1; z-index:5; } .plate{ width:100%; filter:drop-shadow(0 20px 30px rgba(0,0,0,.5)); } .dish-swap{ position:absolute; object-fit:contain; transition:none; } .dish-swap-1{ top:0%; left:20%; width:80%; animation:dishSwapA 9s ease-in-out infinite; } .dish-swap-2{ top:42%; left:0%; width:58%; animation:dishSwapB 9s ease-in-out infinite; } @keyframes dishSwapA{ 0%,42%{ top:0%; left:20%; width:80%; z-index:2; } 50%,92%{ top:42%; left:0%; width:58%; z-index:1; } 100%{ top:0%; left:20%; width:80%; z-index:2; } } @keyframes dishSwapB{ 0%,42%{ top:42%; left:0%; width:58%; z-index:1; } 50%,92%{ top:0%; left:20%; width:80%; z-index:2; } 100%{ top:42%; left:0%; width:58%; z-index:1; } } @media (prefers-reduced-motion: reduce){ .dish-swap-1, .dish-swap-2{ animation:none; } } .badge-price{ position:absolute; top:10px; right:0; background:var(--red); color:#fff; border-radius:50%; width:104px; height:104px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 10px 22px rgba(236,44,39,.4); transform:rotate(8deg); font-family:var(--font-ar); } .badge-price b{ font-size:30px; line-height:1; } .badge-price span{ font-size:11px; } /* ---------- Section heading ---------- */ .section{ padding:90px 0; } .section-head{ text-align:center; max-width:640px; margin:0 auto 50px; } .section-tag{ color:var(--red); font-weight:800; font-size:14px; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; display:block; } .section-head h2{ font-family:var(--font-ar); font-size:38px; font-weight:900; color:var(--black); } html[data-lang="en"] .section-head h2{ font-family:var(--font-en); font-size:32px; } .section-head p{ color:var(--gray); margin-top:12px; font-size:16px; } .bg-alt{ background:var(--white); } /* ---------- Menu ---------- */ .menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-bottom:26px; } .menu-card{ background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; } .menu-card .photo{ height:240px; overflow:hidden; background:radial-gradient(circle, var(--yellow) 0%, #fce9b0 60%, var(--white) 100%); display:flex; align-items:center; justify-content:center; padding:14px; } .menu-card .photo img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.18)); } .menu-card .info{ padding:24px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .menu-card h3{ font-family:var(--font-ar); font-size:22px; font-weight:800; margin-bottom:4px; } html[data-lang="en"] .menu-card h3{ font-family:var(--font-en); font-size:19px; } .menu-card .cal{ color:var(--gray); font-size:13px; } .price-tag{ background:var(--yellow); color:var(--black); font-weight:900; border-radius:16px; padding:10px 16px; font-size:20px; white-space:nowrap; font-family:var(--font-ar); } .list-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; } .list-card{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 28px; } .list-card h4{ font-family:var(--font-ar); font-size:20px; font-weight:800; margin-bottom:18px; display:flex; align-items:center; gap:10px; } html[data-lang="en"] .list-card h4{ font-family:var(--font-en); } .list-card h4::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--red); } .list-row{ display:flex; align-items:baseline; justify-content:space-between; padding:12px 0; border-bottom:1px dashed rgba(26,16,6,.12); } .list-row:last-child{ border-bottom:none; } .list-row .name{ font-weight:700; } .list-row .meta{ color:var(--gray); font-size:12px; } .list-row .price{ font-weight:800; color:var(--red); font-family:var(--font-ar); } .list-row-inner{ display:flex; align-items:center; gap:12px; } .thumb{ width:46px; height:46px; border-radius:12px; object-fit:cover; flex-shrink:0; box-shadow:0 4px 10px rgba(26,16,6,.15); } /* ---------- Reviews ---------- */ .rating-badge{ display:flex; align-items:center; justify-content:center; gap:14px; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 30px; max-width:460px; margin:0 auto 46px; } .rating-badge .num{ font-size:40px; font-weight:900; color:var(--black); } .rating-badge .stars{ color:#F5A623; font-size:20px; letter-spacing:2px; } .rating-badge .meta{ font-size:13px; color:var(--gray); } .rating-badge a{ color:var(--red); font-weight:700; text-decoration:underline; } .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .review-card{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; display:flex; flex-direction:column; } .review-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; } .review-avatar{ width:44px; height:44px; border-radius:50%; background:var(--yellow); color:var(--black); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px; flex-shrink:0; } .review-name{ font-weight:800; font-size:14.5px; } .review-sub{ font-size:12px; color:var(--gray); } .review-stars{ color:#F5A623; font-size:14px; margin-bottom:10px; letter-spacing:1px; } .review-text{ font-size:14.5px; color:#3a2c17; line-height:1.75; flex:1; } .review-src{ margin-top:46px; text-align:center; color:var(--gray); font-size:13px; } .review-src a{ color:var(--red); font-weight:700; } /* ---------- Gallery ---------- */ .gallery-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:251px 251px 220px; gap:18px; } .gallery-grid a{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:block; } .gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:.3s transform; } .gallery-grid a:hover img{ transform:scale(1.05); } .g-main{ grid-row:1 / 3; } .g-wide{ grid-column:1 / 4; } /* ---------- Packaging ---------- */ .pack-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center; } .pack-visual{ position:relative; } .pack-visual img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); } .pack-visual .pack-empty{ position:absolute; width:44%; bottom:-30px; left:-40px; border:6px solid var(--white); border-radius:16px; box-shadow:0 14px 26px rgba(26,16,6,.25); } .pack-features{ display:flex; flex-direction:column; gap:22px; } .pack-feature{ display:flex; gap:16px; background:var(--white); border-radius:18px; padding:20px 22px; box-shadow:var(--shadow); } .pack-feature .pf-icon{ width:48px; height:48px; border-radius:14px; background:var(--yellow); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; } .pack-feature h4{ font-size:17px; font-weight:800; margin-bottom:6px; } .pack-feature p{ font-size:14px; color:var(--gray); line-height:1.7; } .pack-vs{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--gray); margin-top:4px; } .pack-vs .x{ color:#c0392b; } .pack-vs .ok{ color:#1fa855; } .pack-fail{ position:absolute; top:-22px; right:-26px; width:34%; border-radius:14px; overflow:hidden; box-shadow:0 14px 26px rgba(26,16,6,.3); border:5px solid var(--white); } .pack-fail img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.15); } .pack-fail-x{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:900; color:#E21A2D; text-shadow:0 2px 6px rgba(0,0,0,.25); } /* ---------- Order ---------- */ .order-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:36px; } .order-card{ background:var(--black); color:#fff; border-radius:var(--radius); padding:34px 26px; text-align:center; box-shadow:var(--shadow); transition:.25s transform; } .order-card:hover{ transform:translateY(-6px); } .order-card .icon{ width:78px; height:78px; border-radius:22px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; background:#fff; padding:14px; overflow:hidden; } .order-card .icon img{ width:100%; height:100%; object-fit:contain; } .order-card h3{ font-size:19px; margin-bottom:8px; font-weight:800; } .order-card p{ color:#cfc7ba; font-size:13px; margin-bottom:20px; } .whatsapp-cta{ background:linear-gradient(120deg,#25D366,#1fb857); border-radius:var(--radius); padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:#fff; box-shadow:0 20px 40px rgba(37,211,102,.3); } .whatsapp-cta h3{ font-size:24px; font-weight:900; margin-bottom:6px; font-family:var(--font-ar); } html[data-lang="en"] .whatsapp-cta h3{ font-family:var(--font-en); } .whatsapp-cta p{ opacity:.92; } /* ---------- Location ---------- */ .location-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:stretch; } .location-card{ background:var(--black); color:#fff; border-radius:var(--radius); padding:44px; display:flex; flex-direction:column; justify-content:center; } .location-card h3{ font-family:var(--font-ar); font-size:26px; font-weight:800; margin-bottom:14px; } html[data-lang="en"] .location-card h3{ font-family:var(--font-en); } .location-card p{ color:#cfc7ba; margin-bottom:26px; font-size:16px; } .pin-row{ display:flex; align-items:flex-start; gap:12px; margin-bottom:26px; } .pin-dot{ min-width:38px; height:38px; border-radius:50%; background:var(--yellow); color:var(--black); display:flex; align-items:center; justify-content:center; font-size:16px; } .map-embed{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-height:340px; } .map-embed iframe{ width:100%; height:100%; min-height:340px; border:0; } /* ---------- Social ---------- */ .social-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .social-card{ background:var(--white); border-radius:var(--radius); padding:32px 20px; text-align:center; box-shadow:var(--shadow); transition:.25s transform,.25s background,.25s color; } .social-card:hover{ transform:translateY(-6px); background:var(--black); color:#fff; } .social-card .ic{ width:56px; height:56px; border-radius:16px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .social-card .ic svg{ width:100%; height:100%; } .social-card h4{ font-weight:800; font-size:15px; } /* ---------- Footer ---------- */ footer{ background:var(--red); color:#fff; padding:60px 0 26px; } .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.25); } .footer-logo{ height:130px; margin-bottom:16px; } .dir-ltr{ unicode-bidi:isolate; direction:ltr; display:inline-block; } footer p{ color:rgba(255,255,255,.85); font-size:14px; max-width:280px; } footer h5{ font-size:14px; margin-bottom:16px; letter-spacing:.5px; text-transform:uppercase; } footer .flinks a{ display:block; color:rgba(255,255,255,.85); font-size:14px; margin-bottom:10px; } footer .flinks a:hover{ color:#fff; } .footer-bottom{ padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; color:rgba(255,255,255,.75); } /* ---------- Responsive ---------- */ @media (max-width:960px){ nav.links{ display:none; } .hero-grid{ grid-template-columns:1fr; text-align:center; } .hero p.sub{ margin-left:auto; margin-right:auto; } .hero-ctas{ justify-content:center; } .hero h1{ font-size:40px; } .menu-grid, .list-cols, .order-grid, .social-grid{ grid-template-columns:1fr; } .location-wrap{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; } .gallery-grid{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(5,180px); height:auto; } .g-main{ grid-row:1 / 2; grid-column:1 / 3; } .g-wide{ grid-column:1 / 3; } .reviews-grid{ grid-template-columns:1fr; } .pack-wrap{ grid-template-columns:1fr; } .pack-visual .pack-empty{ display:none; } .pack-fail{ width:78px; top:-14px; right:-10px; } .pack-fail-x{ font-size:34px; } }