/* =========================================================
AYAR Delivery — Design System
Palette: Deep Navy (#0B1F3A) + Delivery Orange (#FF6B35)
Type: Poppins (headings) / Inter (body)
========================================================= */
:root {
--ayar-navy: #0B1F3A;
--ayar-navy-light: #142A4D;
--ayar-orange: #FF6B35;
--ayar-orange-dark: #E5551F;
--ayar-gray-50: #F5F7FA;
--ayar-gray-100: #EDF0F5;
--ayar-gray-400: #8792A2;
--ayar-gray-700: #3A4256;
--ayar-ink: #1B1F27;
--ayar-white: #FFFFFF;
--ayar-radius: 10px;
--ayar-container: 1240px;
--ayar-font-heading: 'Poppins', 'Inter', sans-serif;
--ayar-font-body: 'Inter', sans-serif;
--ayar-shadow: 0 10px 30px rgba(11, 31, 58, 0.08);
}
* { box-sizing: border-box; }
body {
font-family: var(--ayar-font-body);
color: var(--ayar-ink);
background: var(--ayar-white);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .ayar-page-title {
font-family: var(--ayar-font-heading);
font-weight: 700;
line-height: 1.2;
color: var(--ayar-navy);
margin: 0 0 20px;
}
h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 16px; }
.ayar-container {
max-width: var(--ayar-container);
margin: 0 auto;
padding: 0 24px;
}
/* ---------- Buttons ---------- */
.ayar-btn,
.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--ayar-radius);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
border: 2px solid transparent;
cursor: pointer;
}
.ayar-btn-primary,
.elementor-button.elementor-button-link:not(.ayar-btn-light),
.elementor-widget-button .elementor-button {
background: var(--ayar-orange);
color: var(--ayar-white) !important;
}
.ayar-btn-primary:hover { background: var(--ayar-orange-dark); transform: translateY(-2px); box-shadow: var(--ayar-shadow); }
.ayar-btn-secondary {
background: transparent;
border-color: var(--ayar-white);
color: var(--ayar-white) !important;
}
.ayar-btn-secondary:hover { background: var(--ayar-white); color: var(--ayar-navy) !important; }
.ayar-btn-light {
background: var(--ayar-white);
color: var(--ayar-navy) !important;
}
.ayar-btn-light:hover { transform: translateY(-2px); box-shadow: var(--ayar-shadow); }
/* ---------- Header ---------- */
.ayar-header { position: sticky; top: 0; z-index: 999; background: var(--ayar-white); box-shadow: 0 1px 0 rgba(11,31,58,0.06); }
.ayar-header-top { background: var(--ayar-navy); color: var(--ayar-white); font-size: 0.85rem; }
.ayar-header-top-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; flex-wrap: wrap; gap: 8px; }
.ayar-top-contact { display: flex; gap: 20px; flex-wrap: wrap; }
.ayar-top-contact-item { color: var(--ayar-white); opacity: 0.9; display: inline-flex; align-items: center; gap: 6px; }
.ayar-top-contact-item:hover { opacity: 1; color: var(--ayar-orange); }
.ayar-top-cta a { color: var(--ayar-orange); font-weight: 600; }
.ayar-header-main { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; gap: 24px; }
.ayar-site-title { font-family: var(--ayar-font-heading); font-weight: 800; font-size: 1.4rem; color: var(--ayar-navy); }
.ayar-site-title-link { text-decoration: none; }
.ayar-primary-nav { flex: 1; display: flex; justify-content: center; }
.ayar-menu { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.ayar-menu li a { color: var(--ayar-ink); font-weight: 600; font-size: 0.95rem; text-decoration: none; padding: 8px 0; }
.ayar-menu li a:hover { color: var(--ayar-orange); }
.ayar-header-cta { white-space: nowrap; }
.ayar-menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.ayar-menu-toggle span { width: 24px; height: 2px; background: var(--ayar-navy); display: block; }
/* ---------- Footer ---------- */
.ayar-footer { background: var(--ayar-navy); color: var(--ayar-gray-100); }
.ayar-footer-cta { background: var(--ayar-orange); }
.ayar-footer-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 24px; flex-wrap: wrap; }
.ayar-footer-cta-inner h2 { color: var(--ayar-white); margin-bottom: 6px; }
.ayar-footer-cta-inner p { color: rgba(255,255,255,0.9); margin: 0; }
.ayar-footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 24px; }
.ayar-footer-col h4, .footer-widget-title { color: var(--ayar-white); font-family: var(--ayar-font-heading); margin-bottom: 16px; font-size: 1.05rem; }
.ayar-footer-col ul { list-style: none; margin: 0; padding: 0; }
.ayar-footer-col li { margin-bottom: 10px; }
.ayar-footer-col a { color: var(--ayar-gray-100); text-decoration: none; }
.ayar-footer-col a:hover { color: var(--ayar-orange); }
.ayar-footer-about p { color: var(--ayar-gray-100); opacity: 0.85; }
.ayar-footer-contact { display: flex; flex-direction: column; gap: 10px; }
.ayar-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 24px; }
.ayar-footer-bottom-inner { text-align: center; font-size: 0.85rem; opacity: 0.75; }
/* ---------- Content layouts ---------- */
.ayar-content-layout { display: flex; gap: 48px; padding: 60px 24px; align-items: flex-start; }
.ayar-content { flex: 1; min-width: 0; }
.ayar-sidebar { width: 300px; flex-shrink: 0; }
.ayar-page-header { padding: 60px 0 20px; text-align: center; }
.ayar-page-content { padding-bottom: 60px; }
.ayar-full-width { padding: 0; }
.ayar-post-card { display: flex; gap: 24px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--ayar-gray-100); }
.ayar-post-thumb img { border-radius: var(--ayar-radius); }
.entry-meta { color: var(--ayar-gray-400); font-size: 0.85rem; margin-bottom: 12px; }
.entry-meta span { margin-right: 12px; }
.ayar-404 { text-align: center; padding: 100px 24px; }
.ayar-404-inner h1 { font-size: 5rem; color: var(--ayar-orange); }
/* ---------- Elementor helpers (used on the generated Home page) ---------- */
.ayar-section-hero h1, .ayar-section-hero p, .ayar-section-hero .elementor-heading-title { color: var(--ayar-white) !important; }
.ayar-section-careers h2, .ayar-section-careers p, .ayar-section-careers .elementor-heading-title { color: var(--ayar-white) !important; }
.ayar-section-final-cta h2, .ayar-section-final-cta p, .ayar-section-final-cta .elementor-heading-title { color: var(--ayar-white) !important; }
.ayar-section-final-cta .ayar-btn-primary { background: var(--ayar-navy); }
.elementor-widget-icon-box .elementor-icon { color: var(--ayar-orange); }
.elementor-widget-icon-list .elementor-icon-list-icon { color: var(--ayar-orange); }
body.ayar-canvas, body.ayar-landing { margin: 0; }
/* ---------- Search form ---------- */
.ayar-search-form { display: flex; gap: 8px; }
.ayar-search-field { flex: 1; padding: 10px 14px; border: 1px solid var(--ayar-gray-100); border-radius: var(--ayar-radius); }
.ayar-search-submit { background: var(--ayar-navy); color: #fff; border: none; padding: 10px 18px; border-radius: var(--ayar-radius); cursor: pointer; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.ayar-content-layout { flex-direction: column; }
.ayar-sidebar { width: 100%; }
.ayar-footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 782px) {
.ayar-menu-toggle { display: flex; }
.ayar-primary-nav { position: relative; }
.ayar-menu { display: none; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--ayar-white); box-shadow: var(--ayar-shadow); padding: 12px 24px; }
.ayar-menu.is-open { display: flex; }
.ayar-menu li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--ayar-gray-100); }
.ayar-header-cta { display: none; }
.ayar-footer-main { grid-template-columns: 1fr; }
.ayar-footer-cta-inner { flex-direction: column; text-align: center; }
}
