/* --- Global Styles & Variables --- */ :root { /* Dynamic via inline style in , Fallbacks: */ --primary-accent: #f39c12; --primary-accent-hover: #e68a00; /* --- End Dynamic --- */ --black: #1a1a1a; --white: #ffffff; --silver-light-bg: #f0f0f0; --silver-medium: #777777; --silver-dark: #444444; --silver-border: #dddddd; --silver-text-on-dark: #cccccc; --dark-grey: var(--silver-dark); --medium-grey: var(--silver-medium); --light-grey-bg: var(--silver-light-bg); --silver: var(--silver-border); --hero-overlay-start: rgba(0, 0, 0, 0.75); --hero-overlay-end: rgba(0, 0, 0, 0.35); --font-primary: 'Lato', sans-serif; --font-secondary: 'Montserrat', sans-serif; --container-width: 1140px; --spacing-unit: 1rem; } /* --- Reset & Basic Setup --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-primary); font-size: 16px; line-height: 1.7; color: var(--dark-grey); background-color: var(--white); overflow-x: hidden; } body.modal-active { overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-secondary); font-weight: 600; color: var(--black); margin-bottom: calc(var(--spacing-unit) * 1.2); line-height: 1.3; } h1 { font-size: 2.8rem; font-weight: 700; } h2 { font-size: 2.2rem; font-weight: 700; } h3 { font-size: 1.5rem; } h4 { font-size: 1.2rem; } p { margin-bottom: var(--spacing-unit); } a { color: var(--primary-accent); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--primary-accent-hover); text-decoration: none; } ul { list-style: none; padding-left: 0; } /* Default padding-left reset */ img { max-width: 100%; height: auto; display: block; border-radius: 4px; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--spacing-unit); } /* --- Buttons --- */ .btn { display: inline-block; padding: calc(var(--spacing-unit)*0.8) calc(var(--spacing-unit)*1.8); border: 1px solid transparent; border-radius: 5px; font-family: var(--font-secondary); font-weight: 600; font-size: 0.95rem; cursor: pointer; text-align: center; transition: all 0.3s ease; text-decoration: none !important; letter-spacing: 0.5px; } .btn-primary { background-color: var(--primary-accent); color: var(--white); border-color: var(--primary-accent); } .btn-primary:hover { background-color: var(--primary-accent-hover); border-color: var(--primary-accent-hover); color: var(--white); transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .btn-secondary { background-color: transparent; color: var(--black); border: 1px solid var(--medium-grey); } .btn-secondary:hover { background-color: var(--black); color: var(--white); border-color: var(--black); transform: translateY(-2px); } .btn .icon-after { margin-left: 8px; font-size: 0.8em; } /* Default LTR */ /* --- Utility Classes --- */ .text-light { color: var(--white) !important; } .text-light h1, .text-light h2, .text-light h3, .text-light h4 { color: var(--white); } .text-light p, .text-light span, .text-light li { color: var(--silver-text-on-dark); } .text-light a { color: var(--white); } .text-light a:hover { color: var(--silver-text-on-dark); } .dark-bg { background-color: var(--black); } .light-bg { background-color: var(--light-grey-bg); } .subtitle { display: block; font-size: 0.9rem; font-weight: 600; color: var(--primary-accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: calc(var(--spacing-unit) * 0.7); } .split-layout { display: flex; gap: calc(var(--spacing-unit) * 3); align-items: center; } .split-layout > div { flex: 1; } .text-center { text-align: center !important; } .max-width-800 { max-width: 800px; margin-left: auto; margin-right: auto; } .icon-before { margin-right: 8px; font-size: 0.9em; } /* Default LTR */ .text-accent { color: var(--primary-accent); } /* --- Sections --- */ section { padding: calc(var(--spacing-unit) * 4.5) 0; position: relative; overflow: hidden; min-height: 50vh; } section.hero-section, section.cta-section { min-height: auto; } /* --- Header --- */ .main-header { background-color: var(--white); padding: calc(var(--spacing-unit)*0.8) 0; border-bottom: 1px solid var(--silver); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: padding 0.3s ease, box-shadow 0.3s ease; } .main-header.scrolled { padding: calc(var(--spacing-unit)*0.5) 0; box-shadow: 0 3px 8px rgba(0,0,0,0.1); } .main-header .container { display: flex; justify-content: space-between; align-items: center; } .main-header .logo img { max-height: 50px; border-radius: 0; } .main-header .main-nav ul { display: flex; list-style: none; margin: 0; padding: 0; } .main-header .main-nav ul li { margin-left: calc(var(--spacing-unit) * 1.8); } /* Default LTR */ .main-header .main-nav ul li a { color: var(--black); text-decoration: none; font-weight: 600; padding-bottom: 5px; border-bottom: 2px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; font-size: 0.95rem; } .main-header .main-nav ul li a:hover, .main-header .main-nav ul li a.active { color: var(--primary-accent); border-bottom-color: var(--primary-accent); } .mobile-menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--black); padding: 5px; } .header-quote-btn { white-space: nowrap; } /* --- Hero Section --- */ .hero-section { position: relative; background-size: cover; background-position: center center; color: var(--white); padding: calc(var(--spacing-unit) * 9) 0; min-height: 85vh; display: flex; align-items: center; text-align: left; } /* Default LTR alignment */ .hero-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--hero-overlay-start), var(--hero-overlay-end) 70%); z-index: 1; pointer-events: none; } .hero-section .container { position: relative; z-index: 3; } .homepage-hero { background-image: url('9556907.jpg'); } /* Default BG */ .hero-content { max-width: 700px; } .hero-section h1 { font-size: 3.5rem; color: var(--white); margin-bottom: calc(var(--spacing-unit) * 1.5); text-shadow: 2px 2px 5px rgba(0,0,0,0.3); font-weight: 800; position: relative; padding-bottom: calc(var(--spacing-unit)*1); } .hero-section h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 80px; height: 4px; background-color: var(--primary-accent); border-radius: 2px; } /* Default LTR */ .hero-section p { font-size: 1.25rem; color: var(--silver-text-on-dark); margin-bottom: calc(var(--spacing-unit) * 2.5); max-width: 600px; line-height: 1.6; } .hero-btn { padding: calc(var(--spacing-unit)*1) calc(var(--spacing-unit)*2.2); font-size: 1.05rem; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .hero-btn:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 20px rgba(0,0,0,0.25); } .hero-btn .icon-after { transition: transform 0.3s ease; } .hero-btn:hover .icon-after { transform: translateX(5px); } /* Default LTR */ .hero-section::after { content: ''; position: absolute; width: 300px; height: 300px; background-color: var(--primary-accent); border-radius: 50%; z-index: 0; opacity: 0.1; bottom: -150px; right: -100px; animation: subtle-pulse 6s infinite alternate ease-in-out; pointer-events: none; animation-delay: 1s; } /* Default LTR */ .enhanced-hero .container::before { content: ''; position: absolute; width: 150px; height: 150px; background-color: var(--silver); border-radius: 50%; z-index: 2; opacity: 0.08; top: 50px; left: -50px; animation: subtle-pulse 5s infinite alternate ease-in-out; pointer-events: none; } /* Default LTR */ @keyframes subtle-pulse { 0% { transform: scale(1); opacity: 0.1; } 100% { transform: scale(1.05); opacity: 0.05; } } /* --- Trusted Supplier Section --- */ .trusted-supplier-section .split-layout { align-items: flex-start; } .supplier-image { position: relative; padding: 5px; flex-basis: 45%; } .supplier-image img { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); aspect-ratio: 5/4; object-fit: cover; border: 3px solid var(--white); } .supplier-content { flex-basis: 55%; display: flex; flex-direction: column; } .supplier-content h2.section-heading-accent { margin-bottom: calc(var(--spacing-unit)*1.8); position: relative; padding-bottom: calc(var(--spacing-unit) * 0.8); } .supplier-content h2.section-heading-accent::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 60px; background-color: var(--primary-accent); } /* Default LTR */ .supplier-text-wrapper { position: relative; max-height: 10em; overflow: hidden; margin-bottom: calc(var(--spacing-unit) * 1.5); transition: max-height 0.5s ease-out; } .supplier-text-wrapper::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3em; background: linear-gradient(to bottom, transparent, var(--light-grey-bg)); pointer-events: none; } .btn-read-more { margin-top: auto; align-self: flex-start; border-color: var(--primary-accent); color: var(--primary-accent); } /* Default LTR */ .btn-read-more:hover { background-color: var(--primary-accent); color: var(--white); } /* --- Values Section --- */ .values-section-playful { background-color: var(--white); } .values-section-playful .intro-paragraph { margin-bottom: calc(var(--spacing-unit) * 3); color: var(--medium-grey); } .values-grid-playful { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(var(--spacing-unit) * 2.5); align-items: stretch; } .value-card-playful { background-color: var(--white); border-radius: 10px; padding: calc(var(--spacing-unit) * 2.5); text-align: center; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; border: 1px solid var(--silver); } .value-card-playful:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); } .value-icon-wrapper { width: 80px; height: 80px; border-radius: 50%; background-image: linear-gradient(135deg, var(--primary-accent), var(--primary-accent-hover)); color: var(--white); display: inline-flex; align-items: center; justify-content: center; margin-bottom: calc(var(--spacing-unit) * 1.8); box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; } .value-icon-wrapper i { font-size: 2.5rem; } .value-card-playful:hover .value-icon-wrapper { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 20px rgba(243, 156, 18, 0.6); } .value-card-playful h3 { font-size: 1.4rem; color: var(--black); margin-bottom: calc(var(--spacing-unit) * 0.8); } .value-card-playful p { font-size: 0.95rem; color: var(--medium-grey); margin-bottom: 0; flex-grow: 1; } .card-accent-line { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 4px; background-color: var(--primary-accent); border-radius: 2px; transition: width 0.4s ease 0.1s; } /* Centered, direction independent */ .value-card-playful:hover .card-accent-line { width: 50px; } /* --- About Section (REVISED) --- */ .about-section { background-color: var(--white); } .about-section .split-layout { align-items: flex-start; gap: calc(var(--spacing-unit) * 4); } .about-image-container-restored { position: relative; flex: 0 0 45%; max-width: 45%; } .about-image-container-restored img { border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); width: 100%; height: auto; aspect-ratio: 4/3.5; object-fit: cover; } .about-badge-restored { position: absolute; bottom: 20px; right: 20px; background-color: var(--primary-accent); color: var(--white); padding: calc(var(--spacing-unit) * 0.6) calc(var(--spacing-unit) * 1.2); border-radius: 6px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); } /* Default LTR */ .about-content-container-restored { flex: 1; padding-left: var(--spacing-unit); display: flex; flex-direction: column; } /* Default LTR */ .about-content-container-restored .subtitle { margin-bottom: calc(var(--spacing-unit) * 0.5); } .about-content-container-restored h2 { margin-bottom: calc(var(--spacing-unit) * 1.5); font-size: 2rem; } /* Text Wrapper for About */ .about-text-wrapper { position: relative; max-height: 10em; overflow: hidden; margin-bottom: calc(var(--spacing-unit) * 1.5); } .about-text-wrapper p { margin-bottom: 0; color: var(--medium-grey); line-height: 1.8; } /* Apply styling to p inside */ .about-text-wrapper::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3em; background: linear-gradient(to bottom, transparent, var(--white)); pointer-events: none; } /* Buttons for About */ .about-buttons { margin-top: auto; /* Pushes buttons to bottom */ display: flex; gap: var(--spacing-unit); align-items: center; flex-wrap: wrap; padding-top: var(--spacing-unit); /* Space above buttons */ } .about-buttons .btn { margin: 0; } /* Reset potential margins */ .about-buttons .btn-read-more { border-color: var(--primary-accent); color: var(--primary-accent); } /* Style read more */ .about-buttons .btn-read-more:hover { background-color: var(--primary-accent); color: var(--white); } /* --- Services Section --- */ .services-section-playful { background-color: var(--black); } .services-section-playful .intro-paragraph { color: var(--silver-text-on-dark); margin-bottom: calc(var(--spacing-unit) * 3); } .services-grid-playful { display: grid; /* Force 2 columns on wider screens */ grid-template-columns: repeat(2, 1fr); /* Creates exactly two equal columns */ gap: calc(var(--spacing-unit) * 2.5); } .service-card-playful { background-color: var(--white); color: var(--dark-grey); border-radius: 10px; padding: calc(var(--spacing-unit) * 2); text-align: center; box-shadow: 0 5px 15px rgba(0,0,0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--silver); } .service-card-playful:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0,0,0, 0.15); } .service-icon-wrapper { width: 70px; height: 70px; border-radius: 50%; background-color: rgba(243, 156, 18, 0.15); display: inline-flex; align-items: center; justify-content: center; margin-bottom: calc(var(--spacing-unit) * 1.5); transition: background-color 0.3s ease, transform 0.3s ease; } .service-icon-wrapper i { font-size: 2rem; color: var(--primary-accent); transition: color 0.3s ease; } .service-card-playful:hover .service-icon-wrapper { background-color: var(--primary-accent); transform: scale(1.1); } .service-card-playful:hover .service-icon-wrapper i { color: var(--white); } .service-card-playful h3 { font-size: 1.3rem; color: var(--black); margin-bottom: calc(var(--spacing-unit) * 0.8); } .service-card-playful p { font-size: 0.95rem; color: var(--medium-grey); margin-bottom: calc(var(--spacing-unit) * 1.5); flex-grow: 1; } .service-card-link { color: var(--primary-accent); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; margin-top: auto; } .service-card-link i { margin-left: 5px; transition: transform 0.3s ease; } /* Default LTR */ .service-card-link:hover { color: var(--primary-accent-hover); } .service-card-link:hover i { transform: translateX(4px); } /* Default LTR */ /* --- Foodstuffs Section --- */ .foodstuffs-section-playful { background-color: var(--light-grey-bg); } .foodstuffs-section-playful .intro-paragraph { margin-bottom: calc(var(--spacing-unit) * 3); color: var(--medium-grey); } .foodstuffs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(var(--spacing-unit) * 2.5); } .product-card-playful { background-color: var(--white); border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--silver); } .product-card-playful:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); } .product-card-img { overflow: hidden; height: 220px; } .product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; border-radius: 0; } .product-card-playful:hover .product-card-img img { transform: scale(1.05); } .product-card-content { padding: calc(var(--spacing-unit) * 1.8); flex-grow: 1; display: flex; flex-direction: column; } .product-card-content h3 { color: var(--primary-accent); font-size: 1.4rem; margin-bottom: calc(var(--spacing-unit) * 0.7); display: flex; align-items: center; } .product-card-content p { font-size: 0.95rem; color: var(--medium-grey); margin-bottom: calc(var(--spacing-unit) * 1.5); flex-grow: 1; } .product-specs-playful { list-style: none; padding: 0; margin: 0 0 calc(var(--spacing-unit) * 1.5) 0; display: flex; flex-wrap: wrap; gap: calc(var(--spacing-unit) * 1); } .product-specs-playful li { font-size: 0.85rem; color: var(--dark-grey); display: flex; align-items: center; background-color: var(--light-grey-bg); padding: 5px 10px; border-radius: 4px; } .product-specs-playful li i { color: var(--primary-accent); margin-right: 6px; font-size: 0.9em; width: 16px; text-align: center; } /* Default LTR */ .product-specs-playful li strong { color: var(--black); margin-left: 4px; } /* Default LTR */ .product-card-btn { margin-top: auto; align-self: flex-start; border-color: var(--primary-accent); color: var(--primary-accent); } /* Default LTR */ .product-card-btn:hover { background-color: var(--primary-accent); border-color: var(--primary-accent); color: var(--white); } /* --- Compliance Section --- */ .compliance-section { background-color: var(--white); } .compliance-section .subtitle, .compliance-section h2 { text-align: center; } .compliance-section > .container > p { margin-bottom: calc(var(--spacing-unit) * 3); color: var(--medium-grey); } .compliance-split { align-items: flex-start; gap: calc(var(--spacing-unit) * 4); } .compliance-features { display: flex; flex-direction: column; gap: calc(var(--spacing-unit) * 2); flex-basis: 50%; } .feature-block { display: flex; align-items: flex-start; gap: calc(var(--spacing-unit) * 1.2); } .feature-icon-alt { font-size: 2rem; color: var(--primary-accent); flex-shrink: 0; width: 40px; text-align: center; margin-top: 5px; } .feature-block h3 { font-size: 1.2rem; margin-bottom: calc(var(--spacing-unit) * 0.3); color: var(--black); } .feature-block p { font-size: 0.95rem; margin-bottom: 0; color: var(--dark-grey); } .compliance-image-collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-unit); align-self: center; flex-basis: 50%; } .compliance-image-collage img { aspect-ratio: 4/3; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 1px solid var(--silver); border-radius: 6px; } /* --- FAQ Section --- */ .faq-section { background-color: var(--light-grey-bg); } .faq-image-container { flex-basis: 40%; } .faq-image-container img { border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); } .faq-content-container { flex-basis: 60%; } .faq-item { background-color: var(--white); margin-bottom: var(--spacing-unit); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid var(--silver-border); overflow: hidden; } .faq-question { background: none; border: none; width: 100%; text-align: left; padding: calc(var(--spacing-unit)*1.1) calc(var(--spacing-unit)*1.5); font-family: var(--font-secondary); font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--black); } /* Default LTR */ .faq-question:hover { background-color: #f8f8f8; } .faq-icon { transition: transform 0.3s ease; color: var(--primary-accent); } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding-top 0.4s ease-out, padding-bottom 0.4s ease-out; padding: 0 calc(var(--spacing-unit)*1.5); } .faq-item.active .faq-answer { padding-top: calc(var(--spacing-unit)*0.5); padding-bottom: calc(var(--spacing-unit)*1.2); } .faq-answer p { margin-bottom: 0; color: var(--medium-grey); font-size: 0.95rem; } /* --- CTA Section --- */ .cta-section { background-color: var(--black); padding: calc(var(--spacing-unit)*4) 0; } .cta-section h2 { font-size: 2rem; margin-bottom: calc(var(--spacing-unit)*0.5); color: var(--white); } .cta-section p { font-size: 1.1rem; color: var(--silver-text-on-dark); margin-bottom: calc(var(--spacing-unit)*2); } /* --- Footer --- */ .main-footer { padding-top: calc(var(--spacing-unit) * 4); background-color: var(--black); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: calc(var(--spacing-unit) * 2.5); margin-bottom: calc(var(--spacing-unit) * 3); } .footer-logo { max-height: 45px; margin-bottom: var(--spacing-unit); border-radius: 0; } .footer-about p { font-size: 0.9rem; color: var(--medium-grey); line-height: 1.6; } .footer-links h4, .footer-contact h4 { font-size: 1.1rem; margin-bottom: calc(var(--spacing-unit) * 1.2); color: var(--white); position: relative; padding-bottom: calc(var(--spacing-unit)*0.5); } .footer-links h4::after, .footer-contact h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background-color: var(--primary-accent); } /* Default LTR */ .footer-links ul li { margin-bottom: calc(var(--spacing-unit) * 0.6); } .footer-links ul li a, .footer-contact ul li a, .footer-contact ul li span { color: var(--medium-grey); font-size: 0.9rem; transition: color 0.3s ease; } .footer-links ul li a:hover, .footer-contact ul li a:hover { color: var(--white); } .footer-contact ul li { margin-bottom: calc(var(--spacing-unit) * 0.8); display: flex; align-items: flex-start; gap: calc(var(--spacing-unit) * 0.7); } .footer-contact ul li i { margin-top: 4px; color: var(--primary-accent); width: 16px; text-align: center; flex-shrink: 0; } .social-icons { margin-top: calc(var(--spacing-unit) * 1.5); display: flex; gap: calc(var(--spacing-unit)*0.75); } .social-icons a { display: inline-flex; justify-content: center; align-items: center; width: 35px; height: 35px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: var(--white); transition: background-color 0.3s ease, color 0.3s ease; font-size: 0.9rem; } .social-icons a:hover { background-color: var(--primary-accent); color: var(--white); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: calc(var(--spacing-unit) * 1.5) 0; text-align: center; font-size: 0.85rem; color: var(--medium-grey); } /* --- Back to Top Button --- */ .back-to-top { position: fixed; bottom: 25px; right: 25px; background-color: var(--primary-accent); color: var(--white); width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; z-index: 999; transition: all 0.3s ease; opacity: 0; visibility: hidden; box-shadow: 0 3px 8px rgba(0,0,0,0.2); } /* Default LTR */ .back-to-top:hover { background-color: var(--primary-accent-hover); color: var(--white); transform: translateY(-2px); } .back-to-top i { position: relative; top: 1px; } .back-to-top.visible { opacity: 1; visibility: visible; } /* --- Modal Styles --- */ .modal { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.65); display: none; align-items: center; justify-content: center; z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-out, visibility 0s linear 0.3s; } .modal.active { display: flex; opacity: 1; visibility: visible; transition: opacity 0.3s ease-out, visibility 0s linear 0s; } .modal-overlay { position: absolute; inset: 0; cursor: pointer; z-index: 1; } .modal-content { position: relative; z-index: 2; background: var(--white); padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5); border-radius: 8px; max-width: 700px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 5px 20px rgba(0,0,0,0.2); transform: scale(0.95) translateY(-10px); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; border: 1px solid var(--silver); } .modal.active .modal-content { transform: scale(1) translateY(0); opacity: 1; } .modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.8rem; line-height: 1; color: var(--medium-grey); background: none; border: none; cursor: pointer; padding: 5px; transition: color 0.3s ease, transform 0.3s ease; } /* Default LTR */ .modal-close:hover { color: var(--black); transform: rotate(90deg); } .modal-title { font-size: 1.8rem; margin-bottom: calc(var(--spacing-unit) * 1.5); color: var(--black); } .modal-body { padding-top: var(--spacing-unit); } .modal-body p { margin-bottom: var(--spacing-unit); color: var(--dark-grey); line-height: 1.7; } .modal-actions { margin-top: calc(var(--spacing-unit) * 2); text-align: right; border-top: 1px solid var(--silver-border); padding-top: var(--spacing-unit); } /* Default LTR */ /* About Us Modal Specific Styles */ .about-us-modal .modal-content { max-width: 800px; } .about-us-modal .modal-body { line-height: 1.8; } .about-us-modal .modal-body h2, .about-us-modal .modal-body h3 { margin-top: 1.5em; margin-bottom: 0.5em; color: var(--primary-accent); } .about-us-modal .modal-body h2:first-child, .about-us-modal .modal-body h3:first-child { margin-top: 0; } /* Contact Form Modal Specific Styles */ .contact-modal .modal-content { max-width: 600px; } .contact-modal .modal-title { text-align: center; margin-bottom: calc(var(--spacing-unit) * 1.8); } .contact-modal .form-group { margin-bottom: calc(var(--spacing-unit) * 1.2); } .contact-modal label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--dark-grey); font-size: 0.9em; } .contact-modal input[type="text"], .contact-modal input[type="email"], .contact-modal textarea { width: 100%; padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1); border: 1px solid var(--silver-border); border-radius: 4px; font-size: 0.95em; font-family: var(--font-primary); box-sizing: border-box; transition: border-color 0.3s ease; } .contact-modal input[type="text"]:focus, .contact-modal input[type="email"]:focus, .contact-modal textarea:focus { border-color: var(--primary-accent); outline: none; box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2); } .contact-modal textarea { min-height: 100px; resize: vertical; } .contact-modal .form-actions { text-align: right; margin-top: calc(var(--spacing-unit) * 1.5); border-top: none; padding-top: 0; } /* Default LTR */ .contact-modal #contact-submit-btn:disabled { background-color: var(--medium-grey); border-color: var(--medium-grey); cursor: not-allowed; opacity: 0.7; } .form-feedback { padding: 15px; margin-bottom: 20px; border-radius: 4px; font-size: 0.95em; text-align: center; display: none; } .form-feedback.success { background-color: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; } .form-feedback.error { background-color: #f2dede; color: #a94442; border: 1px solid #ebccd1; } /* --- Responsive Design --- */ @media (max-width: 1199.98px) { .values-grid-playful { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .foodstuffs-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } @media (max-width: 991.98px) { h1 { font-size: 2.5rem; } h2 { font-size: 1.9rem; } .split-layout { flex-direction: column; align-items: stretch; text-align: center; gap: calc(var(--spacing-unit)*2.5); } .split-layout > div { flex-basis: auto !important; max-width: 650px; margin: 0 auto calc(var(--spacing-unit)*2.5) auto; } .split-layout > div:last-child { margin-bottom: 0; } /* Keep left align for these even when stacked, unless specifically overridden for RTL */ .trusted-supplier-content, .about-content-container-restored, .compliance-features { text-align: left; } /* Center text content for About when stacked */ .about-content-container-restored { text-align: center; } .compliance-split .compliance-features, .compliance-split .compliance-image-collage { max-width: 100%; } .compliance-image-collage { margin-top: calc(var(--spacing-unit)*2); max-width: 500px; margin-left: auto; margin-right: auto; } .footer-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .services-grid-playful { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .trusted-supplier-section .split-layout, .about-section .split-layout { align-items: center; } .supplier-image, .about-image-container-restored { max-width: 80%; margin-bottom: calc(var(--spacing-unit) * 2); } /* Center underlines when stacked and centered */ .supplier-content h2.section-heading-accent::after, .about-content-container-restored h2::after { left: 50%; transform: translateX(-50%); } /* Centered, direction independent */ .about-buttons { justify-content: center; } .foodstuffs-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } @media (max-width: 767.98px) { :root { --spacing-unit: 0.9rem; } h1 { font-size: 2.1rem; } h2 { font-size: 1.7rem; } h3 { font-size: 1.3rem; } body { font-size: 15px; } .main-header .container { flex-wrap: wrap; padding: calc(var(--spacing-unit)*0.5) var(--spacing-unit); } .main-header .main-nav { order: 3; width: 100%; max-height: 0; overflow: hidden; background-color: var(--white); box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 0; margin-top: var(--spacing-unit); border-top: 1px solid var(--silver); transition: max-height 0.4s ease-out; } .main-header .main-nav.active { max-height: 500px; padding: var(--spacing-unit) 0; } .main-header .main-nav ul { flex-direction: column; align-items: center; gap: 0; } .main-header .main-nav ul li { margin-left: 0; width: 100%; text-align: center; border-bottom: 1px solid var(--silver); } /* Reset LTR margin */ .main-header .main-nav ul li:last-child { border-bottom: none; } .main-header .main-nav ul li a { padding: calc(var(--spacing-unit)*1); display: block; border-bottom: none;} .main-header .main-nav ul li a.active { background-color: var(--light-grey-bg); color: var(--primary-accent); font-weight: 700; } .mobile-menu-toggle { display: block; order: 2; margin-left: auto; } /* Default LTR */ .header-quote-btn { order: 1; } .hero-section { padding: calc(var(--spacing-unit) * 6) 0; min-height: 60vh; } .hero-section h1 { font-size: 2.5rem; } .hero-section p { font-size: 1rem; } .footer-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); text-align: center; gap: calc(var(--spacing-unit) * 2.5); } .footer-links h4::after, .footer-contact h4::after { left: 50%; transform: translateX(-50%); } /* Centered, direction independent */ .footer-contact ul { display: inline-block; text-align: left; } /* Default LTR */ .social-icons { justify-content: center; } .compliance-split .compliance-features { text-align: left; } .services-grid-playful { grid-template-columns: 1fr; /* Stack to 1 column on smaller screens */ } .supplier-text-wrapper, .about-text-wrapper { max-height: 8em; } .supplier-text-wrapper::after, .about-text-wrapper::after { height: 2.5em; } .modal-content { width: 95%; padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 1.8); } .values-grid-playful { grid-template-columns: 1fr; gap: calc(var(--spacing-unit) * 2); } .foodstuffs-grid { grid-template-columns: 1fr; gap: calc(var(--spacing-unit) * 2); } } @media (max-width: 575.98px) { h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } section { padding: calc(var(--spacing-unit) * 3.5) 0; } .hero-section { padding: calc(var(--spacing-unit) * 5) 0; min-height: 50vh; } .hero-section h1 { font-size: 2rem; } .compliance-image-collage { grid-template-columns: 1fr; } .split-layout { gap: calc(var(--spacing-unit)*1.5); } .header-quote-btn { padding: calc(var(--spacing-unit)*0.6) calc(var(--spacing-unit)*1.2); font-size: 0.85rem;} .footer-grid { grid-template-columns: 1fr; gap: calc(var(--spacing-unit) * 2); } .foodstuffs-grid { gap: calc(var(--spacing-unit) * 1.5); } .modal-title { font-size: 1.5rem; } .supplier-content h2.section-heading-accent::after { width: 40px; } .values-grid-playful { gap: calc(var(--spacing-unit) * 1.5); } .services-grid-playful { gap: calc(var(--spacing-unit) * 1.5); } } /* Page Content Area Styling */ .page-content-area { padding: calc(var(--spacing-unit) * 3) 0; min-height: 60vh; } .page-content-area h1 { font-size: 2rem; margin-bottom: var(--spacing-unit); } .page-content-area h2 { font-size: 1.6rem; margin-top: 1.8em; margin-bottom: 0.8em; } .page-content-area h3 { font-size: 1.3rem; margin-top: 1.5em; margin-bottom: 0.6em; } .page-content-area h1:first-child, .page-content-area h2:first-child, .page-content-area h3:first-child { margin-top: 0; } .page-content-area ul, .page-content-area ol { margin-left: 2em; margin-bottom: 1em; list-style: initial; padding-left: 0; } /* Default LTR */ .page-content-area ol { list-style: decimal; } .page-content-area li { margin-bottom: 0.5em; } .page-content-area a { text-decoration: underline; } .page-content-area strong, .page-content-area b { font-weight: bold; } .page-content-area em, .page-content-area i { font-style: italic; } /* ================================================ */ /* =============== RTL Overrides ================== */ /* ================================================ */ html[dir="rtl"] { /* --- Basic Setup --- */ body { text-align: right; } ul { padding-left: 0; padding-right: 0; /* Ensure no padding interference */ } /* --- Buttons & Icons --- */ .btn .icon-after { margin-left: 0; margin-right: 8px; } .icon-before { margin-right: 0; margin-left: 8px; } .hero-btn:hover .icon-after { transform: translateX(-5px); } /* Reverse arrow direction */ .service-card-link i { margin-left: 0; margin-right: 5px; } .service-card-link:hover i { transform: translateX(-4px); } /* Reverse arrow direction */ /* --- Header --- */ .main-header .main-nav ul li { margin-left: 0; margin-right: calc(var(--spacing-unit) * 1.8); } /* --- Hero Section --- */ .hero-section { text-align: right; } .hero-section h1::after { left: auto; right: 0; } .hero-section::after { right: auto; left: -100px; } .enhanced-hero .container::before { left: auto; right: -50px; } /* --- Trusted Supplier Section --- */ .supplier-content h2.section-heading-accent::after { left: auto; right: 0; } .btn-read-more { align-self: flex-end; } /* Align button to the end (right in RTL) */ /* --- About Section --- */ .about-badge-restored { right: auto; left: 20px; } .about-content-container-restored { padding-left: 0; padding-right: var(--spacing-unit); } /* --- Foodstuffs Section --- */ .product-specs-playful li i { margin-right: 0; margin-left: 6px; } .product-specs-playful li strong { margin-left: 0; margin-right: 4px; } .product-card-btn { align-self: flex-end; } /* Align button to the end (right in RTL) */ /* --- FAQ Section --- */ .faq-question { text-align: right; } /* Icon position typically handled by flex justify-content: space-between */ /* --- Footer --- */ .footer-links h4::after, .footer-contact h4::after { left: auto; right: 0; } .footer-contact ul li i { /* Icon position usually okay with flex gap */ } /* --- Back to Top Button --- */ .back-to-top { right: auto; left: 25px; } /* --- Modal Styles --- */ .modal-close { right: auto; left: 15px; } .modal-actions { text-align: left; } /* Align actions to the left */ .contact-modal label { /* Inherits text-align: right from body */ } .contact-modal .form-actions { text-align: left; } /* Align submit button left */ /* --- Page Content Area --- */ .page-content-area ul, .page-content-area ol { margin-left: 0; margin-right: 2em; } /* List markers (bullets/numbers) should automatically appear on the right in RTL browsers */ /* --- Responsive RTL Overrides --- */ @media (max-width: 991.98px) { /* Ensure specific left aligns become right aligns when stacked */ .trusted-supplier-content, .compliance-features { text-align: right; } /* Keep about centered when stacked */ .about-content-container-restored { text-align: center; } /* Center underlines if needed */ .supplier-content h2.section-heading-accent::after { left: 50%; transform: translateX(-50%); right: auto; } /* Override RTL rule */ /* .about-content-container-restored h2::after is handled by centering above */ } @media (max-width: 767.98px) { .mobile-menu-toggle { margin-left: 0; margin-right: auto; } .footer-contact ul { text-align: right; } .compliance-split .compliance-features { text-align: right; } /* Override 992px rule */ } } /* ====================================================== */ /* === START: Header Language Switcher (SVG Version) ==== */ /* ====================================================== */ .language-switcher-header { position: relative; display: inline-block; margin-left: 1rem; /* Space between nav and switcher */ margin-right: 1rem; /* Space between switcher and quote btn/mobile toggle */ } .language-switcher-button { display: flex; align-items: center; background-color: #f8f9fa; /* Lighter background */ border: 1px solid var(--silver); padding: 0.5rem 1rem; /* Slightly more padding */ border-radius: 5px; /* Match other buttons */ cursor: pointer; font-family: var(--font-secondary); font-size: 0.9rem; font-weight: 500; /* Medium weight */ color: var(--dark-grey); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle shadow */ } .language-switcher-button:hover, .language-switcher-button:focus, /* Add focus style */ .language-switcher-button[aria-expanded="true"] { background-color: var(--white); border-color: var(--medium-grey); box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Slightly larger shadow on hover/focus */ outline: none; /* Remove default focus outline if custom style added */ } /* Style for the IMG flag icon */ .language-switcher-button .lang-flag-icon, .language-dropdown-menu li a .lang-flag-icon { display: inline-block; width: 20px; /* Adjust width as needed */ height: auto; /* Maintain aspect ratio */ margin-right: 0.7rem; /* Space between flag and text */ vertical-align: middle; border-radius: 2px; /* Optional: slight rounding */ /* No font-size needed for img */ } .language-switcher-button .lang-name { margin-right: 0.5rem; line-height: 1; font-weight: 600; /* Make name slightly bolder */ } .language-switcher-button .dropdown-arrow { font-size: 0.7em; transition: transform 0.3s ease; line-height: 1; margin-left: auto; /* Push arrow to the right */ padding-left: 0.3rem; /* Space before arrow */ } .language-switcher-button[aria-expanded="true"] .dropdown-arrow { transform: rotate(180deg); } .language-dropdown-menu { position: absolute; top: calc(100% + 8px); /* Increased gap */ left: 0; background-color: var(--white); border: 1px solid var(--silver-border); /* Slightly lighter border */ border-radius: 6px; /* Slightly larger radius */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12); /* More noticeable shadow */ padding: 0.6rem 0; /* More padding */ margin: 0; list-style: none; min-width: 160px; /* Adjust as needed */ z-index: 1100; /* Ensure it's above other header content */ /* Hidden by default */ opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.98); /* Slight scale effect */ transform-origin: top center; transition: opacity 0.25s ease-out, visibility 0s linear 0.25s, transform 0.25s ease-out; } .language-dropdown-menu.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.25s ease-out, visibility 0s linear 0s, transform 0.25s ease-out; } .language-dropdown-menu li { margin: 0; } .language-dropdown-menu li a { display: flex; align-items: center; padding: 0.7rem 1.2rem; /* Increase padding */ color: var(--dark-grey); text-decoration: none; font-size: 0.95rem; /* Slightly larger font */ white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; border-bottom: 1px solid var(--silver-light-bg); /* Separator line */ } .language-dropdown-menu li:last-child a { border-bottom: none; /* Remove border from last item */ } .language-dropdown-menu li a:hover { background-color: var(--primary-accent-hover); /* Use theme hover color */ color: var(--white); } .language-dropdown-menu li a:hover .lang-flag-icon { /* Optional: style flag on hover, e.g., slight brightness change */ /* filter: brightness(1.1); */ } /* .language-dropdown-menu li a .lang-flag-icon defined above */ .language-dropdown-menu li a .lang-name { /* Style for name within dropdown link if needed */ } .language-dropdown-menu li a.current-lang { font-weight: 700; /* Bolder current */ color: var(--primary-accent); background-color: rgba(243, 156, 18, 0.1); /* Slightly stronger highlight */ /* pointer-events: none; Optional: disable clicking current lang */ } .language-dropdown-menu li a.current-lang:hover { background-color: rgba(243, 156, 18, 0.15); /* Maintain hover differentiation */ color: var(--primary-accent); } /* --- RTL Overrides --- */ html[dir="rtl"] { /* ... (Keep all previous general RTL overrides for body, icons, sections, footer, etc.) ... */ /* RTL Adjustments for Header Switcher (SVG Flags) */ .language-switcher-header { margin-left: 1rem; margin-right: 1rem; } .language-switcher-button .lang-flag-icon, .language-dropdown-menu li a .lang-flag-icon { margin-right: 0; margin-left: 0.7rem; /* Adjust spacing for RTL */ } .language-switcher-button .lang-name { margin-right: 0; margin-left: 0.5rem; } .language-switcher-button .dropdown-arrow { margin-left: 0; margin-right: auto; /* Push arrow to the left */ padding-left: 0; padding-right: 0.3rem; } .language-dropdown-menu { left: auto; right: 0; /* Align dropdown to the right */ } } /* End html[dir="rtl"] */ /* --- Responsive Adjustments --- */ /* ... (Keep all your existing responsive rules for 1199px, 991px, 575px etc. for other elements) ... */ /* Responsive Adjustments SPECIFICALLY for the Header Items & Language Switcher */ @media (max-width: 767.98px) { .language-switcher-header { order: 2; /* Position it between nav toggle and quote button */ margin-left: 0.5rem; margin-right: 0.5rem; } .mobile-menu-toggle { order: 3; /* Ensure toggle is after switcher */ margin-left: 0; /* Reset potentially inherited LTR margin */ margin-right: auto; /* Add for RTL consistency */ } .header-quote-btn { order: 4; /* Ensure quote button is last */ } .main-header .main-nav { order: 5; /* Nav drops below everything */ } /* Adjust dropdown position on mobile */ .language-dropdown-menu { min-width: 140px; left: 50%; /* Center relative to button parent */ transform: translateX(-50%) translateY(-10px) scale(0.98); /* Adjust transform origin if needed */ } html[dir="rtl"] .language-dropdown-menu { left: auto; right: 50%; /* Center relative to button parent in RTL */ transform: translateX(50%) translateY(-10px) scale(0.98); } .language-dropdown-menu.active { transform: translateX(-50%) translateY(0) scale(1); /* Adjust active state */ } html[dir="rtl"] .language-dropdown-menu.active { transform: translateX(50%) translateY(0) scale(1); /* Adjust active state in RTL */ } } /* ====================================================== */ /* ===== END: Header Language Switcher (SVG Version) ==== */ /* ====================================================== */