/* ========================================================================== ToGo Specialty Coffee - Premium CSS Design System Color Palette: Royal Blue (#0047AB), White (#FFFFFF), Coral Red (#E53E3E) Aesthetic: Sophisticated Modern Minimalist Dark Slate / Glassmorphism ========================================================================== */ /* Clean Arabic webfont, used when (Tajawal). */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap'); /* Variables Definition */ :root { --brand-blue: #0047AB; --brand-blue-hover: #003fa3; --brand-blue-light: rgba(0, 71, 171, 0.15); --brand-white: #FFFFFF; --brand-red: #E53E3E; --brand-red-hover: #c53030; /* Premium Slate Neutrals */ --bg-dark: #070b16; --bg-card: #0f1526; --bg-card-hover: #151d33; --border-glass: rgba(255, 255, 255, 0.08); --text-primary: #f3f4f6; --text-muted: #9ca3af; --text-light: #ffffff; /* Specialized Gradients */ --gradient-blue: linear-gradient(135deg, #0047AB 0%, #002d70 100%); --gradient-gold: linear-gradient(135deg, #FFB000 0%, #D48C00 100%); --gradient-red: linear-gradient(135deg, #E53E3E 0%, #9B2C2C 100%); --gradient-matcha: linear-gradient(135deg, #4E9F3D 0%, #19540E 100%); --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%); /* Box Shadows */ --shadow-premium: 0 12px 40px -10px rgba(0, 0, 0, 0.5); --shadow-blue-glow: 0 0 25px rgba(0, 71, 171, 0.35); --shadow-red-glow: 0 0 20px rgba(229, 62, 62, 0.3); --shadow-green-glow: 0 0 20px rgba(78, 159, 61, 0.3); /* Transition standard */ --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background-color: var(--bg-dark); color: var(--text-primary); overflow-x: hidden; line-height: 1.6; } h1, h2, h3, h4, .brand-title { font-family: 'Outfit', sans-serif; font-weight: 700; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .highlight { color: var(--brand-blue); background: linear-gradient(to right, #0077ff, #0047AB); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Header & Navigation */ .main-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 1000; background: rgba(7, 11, 22, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-glass); } .header-container { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; } .logo-wrapper { display: flex; align-items: center; gap: 12px; } .togo-logo { width: 48px; height: 48px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); } .logo-text { display: flex; flex-direction: column; } .brand-title { font-size: 1.25rem; font-weight: 800; color: var(--brand-white); letter-spacing: 0.5px; line-height: 1.2; } .brand-subtitle { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); } .main-nav { display: flex; align-items: center; gap: 32px; } .nav-link { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: var(--transition-smooth); position: relative; padding: 6px 0; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--brand-blue); transition: var(--transition-smooth); } .nav-link:hover { color: var(--brand-white); } .nav-link:hover::after { width: 100%; } .nav-btn { text-decoration: none; color: var(--brand-white); background-color: var(--brand-blue); padding: 10px 24px; border-radius: 30px; font-size: 0.9rem; font-weight: 600; transition: var(--transition-smooth); box-shadow: var(--shadow-blue-glow); } .nav-btn:hover { background-color: var(--brand-blue-hover); transform: translateY(-2px); box-shadow: 0 0 30px rgba(0, 71, 171, 0.5); } /* Hero Section */ .hero-section { position: relative; padding: 180px 0 100px 0; background-color: var(--bg-dark); overflow: hidden; } .hero-bg-accent { position: absolute; top: -30%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 71, 171, 0.12) 0%, transparent 70%); z-index: 1; pointer-events: none; } .hero-container { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; position: relative; z-index: 2; } .hero-content { display: flex; flex-direction: column; align-items: flex-start; } .slogan-badge { display: flex; align-items: center; gap: 8px; background: rgba(229, 62, 62, 0.1); border: 1px solid rgba(229, 62, 62, 0.2); padding: 6px 14px; border-radius: 20px; margin-bottom: 24px; animation: pulseRed 3s infinite ease-in-out; } .badge-dot { width: 8px; height: 8px; background-color: var(--brand-red); border-radius: 50%; } .badge-text { font-size: 0.85rem; font-weight: 700; color: var(--brand-red); letter-spacing: 0.5px; text-transform: uppercase; } .hero-title { font-size: 3.5rem; font-weight: 900; line-height: 1.15; color: var(--brand-white); margin-bottom: 20px; letter-spacing: -1px; } .hero-description { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 32px; max-width: 580px; } .hero-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; } .info-badge { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border-glass); padding: 8px 16px; border-radius: 30px; font-size: 0.85rem; font-weight: 500; color: var(--text-primary); } .badge-icon { width: 16px; height: 16px; color: var(--brand-blue); } .status-open { border-color: rgba(78, 159, 61, 0.3); background: rgba(78, 159, 61, 0.08); } .status-open .badge-icon { color: #4E9F3D; } .hero-cta-group { display: flex; align-items: center; gap: 20px; } .cta-primary { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--brand-white); background-color: var(--brand-blue); padding: 16px 36px; border-radius: 40px; font-size: 1rem; font-weight: 600; transition: var(--transition-smooth); box-shadow: var(--shadow-blue-glow); } .cta-primary:hover { background-color: var(--brand-blue-hover); transform: translateY(-2px); box-shadow: 0 0 35px rgba(0, 71, 171, 0.55); } .arrow-icon { width: 18px; height: 18px; transition: var(--transition-smooth); } .cta-primary:hover .arrow-icon { transform: translateX(4px); } .cta-secondary { text-decoration: none; color: var(--brand-white); border: 1px solid var(--border-glass); background-color: transparent; padding: 16px 36px; border-radius: 40px; font-size: 1rem; font-weight: 600; transition: var(--transition-smooth); } .cta-secondary:hover { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); } /* CSS Storefront Mockup (Mimicking Al Buraimi Drive-Thru Store) */ .hero-visual { display: flex; justify-content: center; align-items: center; } .storefront-card { width: 100%; max-width: 440px; height: 480px; background: linear-gradient(180deg, #10162b 0%, #0a0f1d 100%); border-radius: 24px; border: 1px solid var(--border-glass); box-shadow: var(--shadow-premium); overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; } .building-skyline { position: absolute; top: 10%; left: 10%; right: 10%; height: 120px; background: radial-gradient(circle, rgba(0, 71, 171, 0.08) 0%, transparent 60%); border-radius: 50%; } .building-facade { width: 80%; margin: 0 auto; background-color: #E2E8F0; /* Clean White Facade */ border-radius: 12px 12px 0 0; position: relative; border: 3px solid #CBD5E1; height: 240px; z-index: 2; box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.05); } .building-roof { position: absolute; top: -15px; left: -5%; width: 110%; height: 30px; background-color: #94A3B8; border-radius: 4px; border-bottom: 4px solid #475569; display: flex; justify-content: center; align-items: center; } .store-sign { background-color: var(--brand-blue); /* Royal Blue Brand Badge */ border: 2px solid var(--brand-white); padding: 4px 16px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .badge-logo-container { color: var(--brand-white); font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 0.95rem; letter-spacing: 1px; } .building-glass-window { position: absolute; bottom: 25px; left: 15%; width: 70%; height: 120px; background-color: rgba(15, 23, 42, 0.85); /* Black tinted glass */ border: 3px solid #64748B; border-radius: 8px 8px 0 0; overflow: hidden; position: relative; } .barista-silhouette { position: absolute; bottom: 0; left: 40%; width: 24px; height: 48px; background: #090d16; border-radius: 50% 50% 0 0; } .barista-light { position: absolute; top: 0; left: 30%; width: 40px; height: 100%; background: linear-gradient(180deg, rgba(255, 176, 0, 0.15) 0%, transparent 80%); transform: skewX(-15deg); pointer-events: none; } .drive-thru-counter { position: absolute; bottom: 0; width: 100%; height: 14px; background-color: #475569; display: flex; justify-content: center; } .drive-thru-sign { background-color: var(--brand-blue); color: var(--brand-white); font-size: 0.45rem; font-weight: 800; padding: 1px 6px; border-radius: 2px; position: absolute; top: -24px; right: 10px; border: 1px solid var(--brand-white); letter-spacing: 0.5px; } .building-foundation { position: absolute; bottom: 0; width: 100%; height: 25px; background-color: #64748B; } .storefront-base { width: 100%; height: 60px; background-color: #1e293b; /* Dark tarmac road */ border-radius: 0 0 12px 12px; position: relative; z-index: 1; overflow: hidden; border-top: 5px solid #475569; } .road-line { position: absolute; top: 50%; left: 0; width: 100%; height: 3px; background-image: linear-gradient(to right, #94a3b8 50%, transparent 50%); background-size: 30px 100%; } .mock-car { position: absolute; width: 55px; height: 22px; border-radius: 6px 6px 2px 2px; bottom: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .orange-car { background-color: #FFB000; left: -60px; animation: driveCarOrange 14s infinite linear; } .orange-car::after { content: ''; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; background-color: #ffeb3b; border-radius: 50%; } .grey-car { background-color: #94A3B8; right: -60px; animation: driveCarGrey 18s infinite linear; animation-delay: 4s; } .grey-car::after { content: ''; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; background-color: #ffeb3b; border-radius: 50%; } /* Animations */ @keyframes driveCarOrange { 0% { left: -60px; } 35% { left: 40px; } 55% { left: 40px; } /* pause at counter */ 100% { left: 450px; } } @keyframes driveCarGrey { 0% { right: -60px; } 100% { right: 450px; } } @keyframes pulseRed { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.03); opacity: 0.95; box-shadow: 0 0 15px rgba(229, 62, 62, 0.2); } } /* Section Header */ .section-header { max-width: 650px; margin: 0 auto 60px auto; } .text-center { text-align: center; } .section-title { font-size: 2.5rem; font-weight: 800; color: var(--brand-white); margin-bottom: 16px; } .section-divider { width: 60px; height: 4px; background-color: var(--brand-blue); margin: 0 auto 20px auto; border-radius: 2px; } .section-subtitle { font-size: 1.05rem; color: var(--text-muted); } /* Nature of Business Section (About) */ .about-section { padding: 100px 0; background-color: #090d1a; border-top: 1px solid var(--border-glass); } .about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .about-card { background: var(--gradient-glass); border: 1px solid var(--border-glass); padding: 40px 32px; border-radius: 20px; transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: flex-start; } .about-card:hover { transform: translateY(-8px); border-color: rgba(0, 71, 171, 0.3); box-shadow: var(--shadow-premium); } .about-icon-wrapper { width: 64px; height: 64px; background: rgba(0, 71, 171, 0.1); border: 1px solid rgba(0, 71, 171, 0.2); border-radius: 16px; display: flex; justify-content: center; align-items: center; margin-bottom: 24px; color: var(--brand-blue); box-shadow: var(--shadow-blue-glow); } .about-icon { width: 32px; height: 32px; } .matcha-wrapper { background: rgba(78, 159, 61, 0.1); border-color: rgba(78, 159, 61, 0.2); color: #4E9F3D; box-shadow: var(--shadow-green-glow); } .red-wrapper { background: rgba(229, 62, 62, 0.1); border-color: rgba(229, 62, 62, 0.2); color: var(--brand-red); box-shadow: var(--shadow-red-glow); } .about-card h3 { font-size: 1.4rem; color: var(--brand-white); margin-bottom: 12px; } .about-card p { font-size: 0.95rem; color: var(--text-muted); } /* Products Section */ .products-section { padding: 100px 0; background-color: var(--bg-dark); border-top: 1px solid var(--border-glass); } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .product-card { background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: 20px; overflow: hidden; transition: var(--transition-smooth); display: flex; flex-direction: column; position: relative; } .product-card:hover { transform: translateY(-6px); background-color: var(--bg-card-hover); border-color: rgba(255, 255, 255, 0.15); box-shadow: var(--shadow-premium); } .product-tag { position: absolute; top: 16px; left: 16px; background: var(--brand-blue); color: var(--brand-white); font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .product-icon-box { width: 100%; height: 180px; display: flex; justify-content: center; align-items: center; background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%); border-bottom: 1px solid var(--border-glass); padding: 24px; } .product-svg { width: 100px; height: 100px; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3)); transition: var(--transition-smooth); } .product-card:hover .product-svg { transform: scale(1.1); } .product-info { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; } .product-info h3 { font-size: 1.2rem; color: var(--brand-white); margin-bottom: 8px; } .product-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; flex-grow: 1; } .product-price { font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--brand-blue); background: linear-gradient(to right, #2563eb, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .matcha-color { background: linear-gradient(180deg, rgba(78, 159, 61, 0.12) 0%, rgba(25, 84, 14, 0.04) 100%); } .coffee-color { background: linear-gradient(180deg, rgba(19, 181, 234, 0.1) 0%, rgba(0, 71, 171, 0.04) 100%); } .dessert-color { background: linear-gradient(180deg, rgba(255, 176, 0, 0.12) 0%, rgba(92, 61, 46, 0.04) 100%); } .highlight-product { border-color: rgba(0, 71, 171, 0.4); background: linear-gradient(180deg, rgba(0, 71, 171, 0.05) 0%, rgba(15, 21, 38, 0.5) 100%); } .highlight-product::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background-color: var(--brand-blue); } .products-footer { display: flex; align-items: center; gap: 20px; margin-top: 48px; justify-content: center; } .products-footer-note { font-size: 0.85rem; color: var(--text-muted); } /* Location Section */ .location-section { padding: 100px 0; background-color: #090d1a; border-top: 1px solid var(--border-glass); } .location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .location-info-card { display: flex; flex-direction: column; align-items: flex-start; } .blue-dot { background-color: var(--brand-blue); } .text-blue { color: var(--brand-blue); } .location-info-card h2 { font-size: 2.8rem; color: var(--brand-white); line-height: 1.15; margin-bottom: 20px; } .location-address { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 32px; } .location-address strong { color: var(--brand-white); } .hours-box { width: 100%; max-width: 440px; background: var(--bg-card); border: 1px solid var(--border-glass); padding: 24px; border-radius: 16px; margin-bottom: 32px; } .hours-box h3 { font-size: 1.1rem; color: var(--brand-white); margin-bottom: 16px; } .hours-row { display: flex; justify-content: space-between; font-size: 0.95rem; color: var(--text-muted); border-bottom: 1px solid var(--border-glass); padding-bottom: 12px; margin-bottom: 16px; } .hours-row .time { color: var(--brand-white); font-weight: 600; } .service-type-row { display: flex; flex-wrap: wrap; gap: 8px; } .service-pill { background: rgba(255,255,255,0.05); border: 1px solid var(--border-glass); padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; color: var(--text-primary); } .map-action-btn { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--brand-white); background-color: var(--brand-blue); padding: 14px 28px; border-radius: 30px; font-size: 0.95rem; font-weight: 600; transition: var(--transition-smooth); box-shadow: var(--shadow-blue-glow); } .map-action-btn:hover { background-color: var(--brand-blue-hover); transform: translateY(-2px); box-shadow: 0 0 30px rgba(0, 71, 171, 0.5); } .external-icon { width: 16px; height: 16px; } /* Premium Visual Mock Map */ .location-map-visual { width: 100%; } .mock-map { width: 100%; height: 380px; background-color: #121829; border: 1px solid var(--border-glass); border-radius: 24px; box-shadow: var(--shadow-premium); overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; } .map-grid-overlay { position: absolute; width: 100%; height: 100%; background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; background-position: 0 0, 10px 10px; } .map-roads { position: absolute; width: 100%; height: 100%; z-index: 1; } .road { background-color: rgba(255, 255, 255, 0.04); position: absolute; } .horizontal-road-1 { width: 100%; height: 24px; top: 30%; } .horizontal-road-2 { width: 100%; height: 30px; bottom: 25%; } .vertical-road-1 { width: 40px; height: 100%; left: 45%; } .map-places { position: absolute; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .place { position: absolute; background-color: rgba(7, 11, 22, 0.85); border: 1px solid var(--border-glass); padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; color: var(--text-muted); } .place-bus { top: 20%; left: 10%; } .place-univ { bottom: 12%; right: 15%; } .map-pin-container { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; cursor: pointer; left: calc(45% + 20px); top: calc(30% + 40px); } .pulse-ring { position: absolute; width: 50px; height: 50px; border: 2px solid var(--brand-blue); border-radius: 50%; animation: mapPulse 2s infinite ease-out; } .pulse-ring-2 { position: absolute; width: 50px; height: 50px; border: 2px solid var(--brand-red); border-radius: 50%; animation: mapPulse 2s infinite ease-out; animation-delay: 0.8s; } .map-pin { width: 44px; height: 44px; background-color: var(--brand-white); border: 3px solid var(--brand-blue); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; justify-content: center; align-items: center; box-shadow: 0 8px 16px rgba(0,0,0,0.4); transition: var(--transition-smooth); } .pin-inner-logo { transform: rotate(45deg); font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 0.65rem; color: var(--brand-blue); } .map-pin-container:hover .map-pin { background-color: var(--brand-blue); border-color: var(--brand-white); transform: rotate(-45deg) scale(1.1); } .map-pin-container:hover .pin-inner-logo { color: var(--brand-white); } .map-label { margin-top: 10px; background-color: var(--brand-blue); border: 1px solid var(--brand-white); color: var(--brand-white); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.25); white-space: nowrap; } .map-controls { position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 6px; z-index: 10; } .control-btn { width: 32px; height: 32px; background-color: rgba(7, 11, 22, 0.9); border: 1px solid var(--border-glass); color: var(--text-primary); border-radius: 6px; font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: var(--transition-smooth); } .control-btn:hover { background-color: var(--brand-blue); color: var(--brand-white); } @keyframes mapPulse { 0% { transform: scale(0.2); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } } /* Real Google Maps Embed */ .real-map { width: 100%; height: 420px; border: none; border-radius: 24px; box-shadow: var(--shadow-premium); display: block; } /* Order Online Platforms */ .order-platforms { width: 100%; max-width: 440px; margin-bottom: 32px; } .order-platforms-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; } .order-platforms-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .platform-btn { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-glass); padding: 14px; border-radius: 14px; text-decoration: none; color: var(--text-primary); transition: var(--transition-smooth); } .platform-logo { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-muted); } .platform-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .platform-name { font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--brand-white); line-height: 1.2; } .platform-action { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .platform-arrow { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); transition: var(--transition-smooth); } .talabat-btn:hover { border-color: rgba(255, 102, 0, 0.4); background: rgba(255, 102, 0, 0.06); transform: translateY(-3px); box-shadow: var(--shadow-premium); } .talabat-btn:hover .platform-name { color: #FF6600; } .talabat-btn:hover .platform-logo { color: #FF6600; } .talabat-btn:hover .platform-arrow { color: #FF6600; transform: translateX(3px); } .beanz-btn { cursor: default; border-color: rgba(160, 100, 50, 0.2); } .beanz-btn .platform-logo { color: #C8855A; } .beanz-btn .platform-name { color: #C8855A; } /* First-party pickup ordering — the primary, brand-accented option */ .pickup-btn { border-color: rgba(0, 71, 171, 0.45); background: rgba(0, 71, 171, 0.08); } .pickup-btn .platform-logo, .pickup-btn .platform-name { color: #4d8bff; } .pickup-btn:hover { border-color: rgba(0, 71, 171, 0.7); background: rgba(0, 71, 171, 0.14); transform: translateY(-3px); box-shadow: var(--shadow-premium); } .pickup-btn:hover .platform-arrow { color: #4d8bff; transform: translateX(3px); } /* Connect Section (Contact) */ .contact-section { padding: 100px 0; background-color: var(--bg-dark); border-top: 1px solid var(--border-glass); } .contact-methods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 60px; } .contact-method-card { background: var(--gradient-glass); border: 1px solid var(--border-glass); padding: 48px 32px; border-radius: 24px; text-decoration: none; color: var(--text-primary); display: flex; flex-direction: column; align-items: center; transition: var(--transition-smooth); position: relative; overflow: hidden; } .contact-method-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top, rgba(255,255,255,0.03) 0%, transparent 70%); pointer-events: none; } .contact-icon-wrapper { width: 72px; height: 72px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); border-radius: 20px; display: flex; justify-content: center; align-items: center; margin-bottom: 24px; transition: var(--transition-smooth); } .contact-icon { width: 32px; height: 32px; color: var(--text-primary); } .contact-method-card h3 { font-size: 1.35rem; color: var(--brand-white); margin-bottom: 8px; } .contact-val { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 24px; } .contact-cta { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--brand-blue); transition: var(--transition-smooth); } .contact-method-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-premium); } /* Phone Card Hover */ .phone-card:hover { border-color: rgba(0, 71, 171, 0.4); } .phone-card:hover .contact-icon-wrapper { background-color: var(--brand-blue); color: var(--brand-white); box-shadow: 0 0 25px rgba(0, 71, 171, 0.6); } .phone-card:hover .contact-cta { color: var(--brand-white); } /* WhatsApp Card Hover */ .whatsapp-card:hover { border-color: rgba(78, 159, 61, 0.4); } .whatsapp-card:hover .contact-icon-wrapper { background-color: #25D366; color: var(--brand-white); border-color: #25D366; box-shadow: 0 0 25px rgba(37, 211, 102, 0.6); } .whatsapp-card:hover .contact-cta { color: #25D366; } /* Instagram Card Hover */ .instagram-card:hover { border-color: rgba(229, 62, 62, 0.4); } .instagram-card:hover .contact-icon-wrapper { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: var(--brand-white); border-color: transparent; box-shadow: 0 0 25px rgba(220, 39, 67, 0.6); } .instagram-card:hover .contact-cta { color: #e6683c; } /* Footer Styles */ .main-footer { background-color: #050810; border-top: 1px solid var(--border-glass); padding: 40px 0; } .footer-container { display: flex; flex-direction: column; align-items: center; gap: 16px; } .footer-brand { display: flex; align-items: center; gap: 8px; } .togo-logo-small { width: 32px; height: 32px; } .footer-title { font-size: 1.1rem; font-weight: 800; color: var(--brand-white); } .copyright { font-size: 0.85rem; color: var(--text-muted); text-align: center; } /* Responsive Rules */ @media (max-width: 1024px) { .hero-container { grid-template-columns: 1fr; gap: 56px; text-align: center; } .hero-content { align-items: center; } .hero-description { margin: 0 auto 32px auto; } .hero-badges { justify-content: center; } .about-grid { grid-template-columns: 1fr 1fr; } .products-grid { grid-template-columns: repeat(2, 1fr); } .location-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { .nav-toggle { display: flex; } /* Nav becomes a full-screen slide-in overlay. NOTE: .main-header has backdrop-filter, which makes it the containing block for this fixed child — so we size by viewport units (vw/vh) and anchor top/left:0 (the header sits at the viewport origin) to truly cover the screen, instead of `inset:0` (which would fill only the header). */ .main-nav { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: rgba(7, 11, 22, 0.98); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateX(100%); transition: transform 0.3s ease; z-index: 999; } .main-header.nav-open .main-nav { transform: translateX(0); } .main-nav .nav-link { font-size: 1.4rem; } .main-nav .nav-btn { font-size: 1.1rem; padding: 14px 40px; } .hero-title { font-size: 2.6rem; } .about-grid { grid-template-columns: 1fr; } .products-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .contact-methods-grid { grid-template-columns: 1fr; max-width: 400px; margin: 40px auto 0 auto; } } /* ── Mobile hamburger toggle (B-1) ───────────────────────────────────────── Hidden on desktop; shown ≤768px. Bars morph into an X when the menu opens. */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: none; cursor: pointer; z-index: 1001; /* above the .main-nav overlay (999) */ } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--brand-white); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .main-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .main-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .main-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Must come AFTER the base `.nav-toggle { display:none }` above so it wins the source-order tie at ≤768px (otherwise the desktop default keeps it hidden). */ @media (max-width: 768px) { .nav-toggle { display: flex; } } /* ========================================================================== Bilingual (EN/AR) + Appearance (Dark/Light) — added for the themeable, localized landing. Dark is the default (see :root). Light overrides apply under ; RTL applies under . ========================================================================== */ /* ── Header language + theme switcher ─────────────────────────────────── */ .ui-toggles { display: flex; align-items: center; gap: 8px; margin-inline-start: 10px; } .ui-toggle { width: 38px; height: 38px; padding: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-glass); cursor: pointer; font-size: 15px; font-weight: 800; font-family: 'Outfit', sans-serif; line-height: 1; transition: var(--transition-smooth); } .ui-toggle:hover { background: var(--bg-card-hover); border-color: var(--brand-blue); color: var(--brand-blue); } /* ── Light appearance ─────────────────────────────────────────────────── */ html[data-theme="light"] { --bg-dark: #f6f7f9; --bg-card: #ffffff; --bg-card-hover: #eceff3; --border-glass: rgba(15, 21, 38, 0.12); --text-primary: #11161f; --text-muted: #586173; --gradient-glass: linear-gradient(180deg, rgba(15,21,38,0.04) 0%, rgba(15,21,38,0.01) 100%); --shadow-premium: 0 12px 40px -12px rgba(20, 30, 60, 0.16); } /* Sections/header with hardcoded dark fills → light so their text stays readable */ html[data-theme="light"] .about-section, html[data-theme="light"] .location-section { background-color: #eceff3; } html[data-theme="light"] .main-header { background: rgba(255, 255, 255, 0.82); } html[data-theme="light"] .nav-toggle span { background: var(--text-primary); } /* The footer stays a dark band (its title is brand-white) — keep its secondary text legible */ html[data-theme="light"] .main-footer .copyright { color: rgba(255, 255, 255, 0.55); } html[data-theme="light"] .main-footer .legal-footer-links a { color: rgba(255, 255, 255, 0.78); } /* Faint white-glass fills read invisible on light surfaces → give them a real surface */ html[data-theme="light"] .info-badge, html[data-theme="light"] .hours-box, html[data-theme="light"] .order-platforms, html[data-theme="light"] .cat-tabs-wrapper { background: var(--bg-card); border: 1px solid var(--border-glass); } /* .order-platforms gets the border above, but its base rule has no radius/padding → a square box around the rounded buttons. Round + pad it to match the card design language. */ html[data-theme="light"] .order-platforms { border-radius: 18px; padding: 16px; } /* Headings/links that use --brand-white as "heading text" → dark on light surfaces. (Text on brand-blue/dark fills — nav-btn, cta-primary, badges, footer — keeps white.) */ html[data-theme="light"] .brand-title, html[data-theme="light"] .hero-title, html[data-theme="light"] .section-title, html[data-theme="light"] .about-card h3, html[data-theme="light"] .product-info h3, html[data-theme="light"] .location-info-card h2, html[data-theme="light"] .location-address strong, html[data-theme="light"] .hours-box h3, html[data-theme="light"] .hours-row .time, html[data-theme="light"] .contact-method-card h3, html[data-theme="light"] .contact-val { color: var(--text-primary); } html[data-theme="light"] .nav-link:hover { color: var(--brand-blue); } html[data-theme="light"] .cta-secondary { color: var(--text-primary); } html[data-theme="light"] .cta-secondary:hover { background-color: rgba(15, 21, 38, 0.05); border-color: rgba(15, 21, 38, 0.2); } /* Cards: the faint white-glass fills are invisible on light → use real surfaces */ html[data-theme="light"] .about-card, html[data-theme="light"] .product-card, html[data-theme="light"] .contact-method-card { background: var(--bg-card); border: 1px solid var(--border-glass); } /* Featured product card: replace the dark-navy gradient with a light blue tint */ html[data-theme="light"] .highlight-product { background: linear-gradient(180deg, rgba(0, 71, 171, 0.09) 0%, rgba(0, 71, 171, 0.02) 100%); border-color: rgba(0, 71, 171, 0.3); } /* Talabat platform name uses the base white (Pickup/Beanz set their own colour) → dark on light */ html[data-theme="light"] .talabat-btn .platform-name { color: var(--text-primary); } /* ── RTL (Arabic) ─────────────────────────────────────────────────────── */ html[dir="rtl"] body { font-family: 'Tajawal', 'Inter', sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .brand-title, html[dir="rtl"] .hero-title, html[dir="rtl"] .section-title { font-family: 'Tajawal', 'Outfit', sans-serif; } /* Flip directional arrows so they point the right way in RTL */ html[dir="rtl"] .arrow-icon, html[dir="rtl"] .platform-arrow, html[dir="rtl"] .external-icon { transform: scaleX(-1); } /* Latin/number runs (phone, @handle, prices) keep their natural L-to-R order inside RTL; Arabic content in the same selector still renders RTL (plaintext = per-content). */ html[dir="rtl"] .contact-val, html[dir="rtl"] .product-price, html[dir="rtl"] .menu-item-price { unicode-bidi: plaintext; }