/* ========================================================================== GM FOOD — stylesheet Design tokens, layout and components for all pages. Edit colors/fonts in :root below to restyle the whole site. ========================================================================== */ :root { --terracotta: #C4402E; --amber: #E98B36; --amber-lt: #F2A83E; --ink: #2A1D16; --ink-2: #3A281C; --cream: #F7EEDE; --cream-bg: #FBF6EC; --muted: #8A7A6E; --muted-dk: #B9A996; --line: #EBDFCD; --green: #7FA05A; --white: #FFFFFF; --max-width: 1200px; --side-pad: 24px; --section-pad: 80px; --radius-sm: 6px; --radius-lg: 8px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; } table { border-collapse: collapse; width: 100%; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { font-family: "Poppins", Arial, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--white); } h1, h2, h3 { font-family: "Poppins", Arial, sans-serif; color: var(--ink); } /* Arabic pages load Tajawal (see ar/*.html ) and switch the type stack here */ [lang="ar"] body, [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { font-family: "Tajawal", Arial, sans-serif; } [lang="ar"] h1 { letter-spacing: 0; } [lang="ar"] .eyebrow, [lang="ar"] .logo-text { letter-spacing: 0; } h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.5px; } h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 500; } h3 { font-size: 1.15rem; font-weight: 500; } .eyebrow { display: block; font-size: 0.7rem; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--terracotta); margin-bottom: 12px; } /* Visible focus states for accessibility */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; } /* Skip link */ .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--terracotta); color: var(--white); padding: 12px 20px; z-index: 1000; border-radius: 0 0 6px 0; } .skip-link:focus { inset-inline-start: 0; } /* ---------- Layout helpers ---------- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; } @media (min-width: 640px) { .container { padding: 0 var(--side-pad); } } section { padding: 48px 0; } @media (min-width: 900px) { section { padding: var(--section-pad) 0; } } .bg-white { background: var(--white); } .bg-cream { background: var(--cream-bg); } .bg-ink { background: var(--ink); color: var(--cream); } .bg-ink h2, .bg-ink h3 { color: var(--cream); } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; } .section-head .heading-group { max-width: 640px; } .link-arrow { color: var(--terracotta); font-weight: 500; white-space: nowrap; border-bottom: 1px solid transparent; } .link-arrow:hover { border-bottom-color: var(--terracotta); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; min-height: 44px; border-radius: var(--radius-sm); font-weight: 500; font-size: 0.95rem; border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn-primary { background: var(--terracotta); color: var(--cream); } .btn-primary:hover { background: #a83525; } .btn-dark { background: var(--ink); color: var(--cream); } .btn-dark:hover { background: #1c130d; } .btn-amber { background: var(--amber); color: var(--ink); } .btn-amber:hover { background: #d47b28; } .btn-ghost { background: transparent; border: 1px solid var(--cream); color: var(--cream); } .btn-ghost:hover { background: rgba(247, 238, 222, 0.1); } .btn-ghost-dark { background: transparent; border: 1px solid var(--line); color: var(--ink); } .btn-ghost-dark:hover { background: var(--cream-bg); } .btn-block { width: 100%; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--line); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; } .logo { display: flex; align-items: center; gap: 10px; } .logo svg { width: 34px; height: 34px; flex-shrink: 0; } .logo-text { font-size: 1.05rem; font-weight: 500; letter-spacing: 0.4px; } .logo-text .gm { color: var(--ink); } .logo-text .food { color: var(--terracotta); } .bg-ink .logo-text .gm { color: var(--cream); } .main-nav { display: flex; align-items: center; gap: 40px; } .main-nav ul { display: flex; gap: 32px; } .main-nav a:not(.btn) { font-weight: 400; color: var(--ink); padding: 4px 2px; border-bottom: 2px solid transparent; } .main-nav a:not(.btn):hover, .main-nav a[aria-current="page"] { border-bottom-color: var(--terracotta); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); } .nav-toggle span { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--ink); } .mobile-panel { display: none; border-top: 1px solid var(--line); background: var(--white); } .mobile-panel.is-open { display: block; } .mobile-panel ul { padding: 16px; display: flex; flex-direction: column; gap: 4px; } .mobile-panel a:not(.btn) { display: block; padding: 12px 8px; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--line); } .mobile-panel .btn { width: calc(100% - 32px); margin: 8px 16px 16px; } /* ---------- Language switcher ---------- */ .lang-switch { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; } .lang-switch a { padding: 6px 8px; min-height: 32px; display: inline-flex; align-items: center; border-radius: 4px; color: var(--muted); } .lang-switch a:hover { color: var(--ink); } .lang-switch a[aria-current="true"] { color: var(--terracotta); font-weight: 500; } .lang-switch .sep { color: var(--line); } .mobile-panel .lang-switch { padding: 4px 16px 16px; font-size: 0.85rem; } .mobile-panel .lang-switch a { min-height: 40px; } @media (max-width: 899px) { .main-nav ul, .main-nav .lang-switch, .main-nav .header-cta { display: none; } .nav-toggle { display: flex; } } @media (min-width: 900px) { .mobile-panel { display: none !important; } } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 900px) { .hero { grid-template-columns: 1.15fr 1fr; gap: 48px; } } .hero-content p { color: var(--muted-dk); max-width: 46ch; margin-bottom: 32px; } .hero-rule { width: 44px; height: 2px; background: var(--terracotta); border: none; margin: 20px 0; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; } .hero-media img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--radius-lg); } @media (min-width: 900px) { .hero-media img { height: 100%; min-height: 400px; } } /* ---------- Stat band ---------- */ .stat-band { background: var(--ink-2); padding: 40px 0; } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } @media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } } .stat-item { position: relative; padding-inline-start: 20px; } .stat-item::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(185, 169, 150, 0.3); } @media (max-width: 639px) { .stat-item:nth-child(odd)::before { display: none; } } .stat-value { color: var(--amber-lt); font-weight: 500; font-size: 1.4rem; margin-bottom: 6px; } .stat-label { color: var(--muted-dk); font-size: 0.75rem; line-height: 1.5; } /* ---------- Product grid (home + products page) ---------- */ .product-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } .product-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; background: var(--white); } .product-card img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 16px; } .product-card h3 { margin-bottom: 8px; } .product-card p { color: var(--muted); font-size: 0.92rem; } /* ---------- How we work ---------- */ .steps-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } } .step { border-top: 2px solid var(--line); padding-top: 20px; } .step.is-first { border-top-color: var(--terracotta); } .step-number { color: var(--terracotta); font-weight: 500; font-size: 0.85rem; margin-bottom: 10px; } .step p { color: var(--muted); font-size: 0.92rem; margin-top: 8px; } /* ---------- Closing CTA band ---------- */ .cta-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .cta-band h2 { max-width: 30ch; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: var(--cream); padding: 64px 0 0; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } } .footer-brand p { color: var(--muted-dk); margin-top: 12px; font-size: 0.92rem; max-width: 32ch; } .footer-grid h3 { color: var(--cream); font-size: 0.95rem; margin-bottom: 16px; } .footer-grid ul li { margin-bottom: 10px; } .footer-grid a { color: var(--muted-dk); } .footer-grid a:hover { color: var(--cream); } .footer-bottom { border-top: 1px solid rgba(247, 238, 222, 0.12); padding: 20px 0; font-size: 0.8rem; color: var(--muted-dk); text-align: center; } /* ---------- WhatsApp floating button ---------- */ .whatsapp-fab { position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; z-index: 200; border: none; } .whatsapp-fab svg { width: 26px; height: 26px; } @media print { .whatsapp-fab, .site-header, .mobile-panel { display: none !important; } } /* ---------- Page header (inner pages) ---------- */ .page-header { padding: 48px 0; } @media (min-width: 900px) { .page-header { padding: 64px 0 48px; } } .page-header h1 { max-width: 20ch; } .page-header .lead { color: var(--muted); max-width: 60ch; margin-top: 16px; } /* ---------- Products page: filters ---------- */ .filter-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; } .filter-pill { padding: 8px 20px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 0.9rem; } .filter-pill[aria-pressed="true"] { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); } .product-card.is-hidden { display: none; } .product-card .card-trigger { width: 100%; text-align: start; background: none; border: none; padding: 0; color: inherit; } .product-card .card-trigger h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .product-card .card-trigger .chevron { color: var(--terracotta); transition: transform 0.15s ease; flex-shrink: 0; } .product-card[aria-expanded="true"] .chevron, .product-card .card-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); } .product-detail { display: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); } .product-detail.is-open { display: block; } .gallery { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; } .gallery .main-img { border-radius: var(--radius-lg); height: 180px; object-fit: cover; } .gallery .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gallery .thumbs img { border-radius: var(--radius-lg); height: 56px; object-fit: cover; } .product-detail .desc { color: var(--muted); font-size: 0.92rem; margin-bottom: 16px; } .spec-table { margin-bottom: 16px; } .spec-table tr { border-bottom: 1px solid var(--line); } .spec-table tr:last-child { border-bottom: none; } .spec-table td { padding: 10px 0; font-size: 0.9rem; } .spec-table td:first-child { color: var(--muted); } .spec-table td:last-child { color: var(--ink); text-align: end; font-weight: 500; } .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; } .badge-green { background: #EFF5EA; color: #3B6D11; } .badge-amber { background: #FAEEDA; color: #854F0B; } .detail-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Quality page ---------- */ .icon-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 900px) { .icon-grid { grid-template-columns: repeat(2, 1fr); } } .icon-item { display: flex; gap: 16px; } .icon-item .icon { width: 48px; height: 48px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; } .icon-item .icon svg { width: 24px; height: 24px; stroke: var(--terracotta); } .icon-item p { color: var(--muted); font-size: 0.92rem; margin-top: 8px; } /* ---------- About page ---------- */ .about-grid { display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 900px) { .about-grid { grid-template-columns: 1.1fr 0.9fr; } } .about-grid img { border-radius: var(--radius-lg); width: 100%; height: 320px; object-fit: cover; } .about-copy h2 { margin-top: 32px; margin-bottom: 12px; } .about-copy h2:first-child { margin-top: 0; } .about-copy p { color: var(--muted); margin-bottom: 12px; } .region-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; } .region-list li { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; font-size: 0.9rem; } .region-list .region-name { font-weight: 500; display: block; margin-bottom: 2px; } .region-list .region-note { color: var(--muted); font-size: 0.82rem; } /* ---------- Contact page ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 3fr 2fr; } } .field { margin-bottom: 20px; } .field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 8px; } .field .req { color: var(--terracotta); } .field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); } .field textarea { min-height: 120px; resize: vertical; } .field input:invalid[data-touched="true"], .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--terracotta); } .field-error { display: none; color: var(--terracotta); font-size: 0.8rem; margin-top: 6px; } .field.has-error .field-error { display: block; } .form-status { display: none; padding: 14px 16px; border-radius: var(--radius-sm); background: #EFF5EA; color: #3B6D11; font-size: 0.9rem; margin-bottom: 20px; } .form-status.is-visible { display: block; } .contact-info h3 { margin-bottom: 8px; } .contact-info .info-block { margin-bottom: 28px; } .contact-info .info-block p { color: var(--muted); font-size: 0.92rem; } .contact-info .info-block a { color: var(--terracotta); font-weight: 500; } .form-note { font-size: 0.8rem; color: var(--muted); margin-top: -8px; margin-bottom: 20px; } /* ---------- Catalogue page ---------- */ .catalogue-actions { display: flex; flex-wrap: wrap; gap: 12px; } .pdf-viewer { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--cream-bg); } .pdf-viewer iframe { width: 100%; height: 80vh; min-height: 600px; border: 0; display: block; } .pdf-fallback { display: none; padding: 32px 24px; text-align: center; color: var(--muted); } @media (max-width: 768px) { .pdf-viewer iframe { display: none; } .pdf-fallback { display: block; } } /* ---------- Catalogue page (data-driven, js/catalogue.js) ---------- */ .catalogue-category { margin-top: 56px; } .catalogue-category:first-child { margin-top: 0; } .catalogue-category.is-hidden { display: none; } /* ---------- Utility ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }