* { margin:0;padding:0;box-sizing:border-box} :root { --primary-color:#000000;--secondary-color:#ffffff;--accent-color:#333333;--text-color:#000000;--text-light:#666666;--background-color:#ffffff;--border-color:#e0e0e0;--shadow:0 4px 6px rgba(0, 0, 0, 0.1);--shadow-hover:0 8px 15px rgba(0, 0, 0, 0.15);--border-radius:8px;--transition:all 0.3s ease} body { font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--background-color);overflow-x:hidden} .container { max-width:1200px;margin:0 auto;padding:0 20px} h1, h2, h3, h4, h5, h6 { font-weight:600;line-height:1.2;margin-bottom:1rem} h1 { font-size:2.5rem} h2 { font-size:2rem} h3 { font-size:1.5rem} h4 { font-size:1.25rem} p { margin-bottom:1rem;color:var(--text-light)} .header { position:fixed;top:0;left:0;right:0;background:rgba(255, 255, 255, 0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);z-index:1000;transition:var(--transition)} .header-content { display:flex;justify-content:space-between;align-items:center;padding:1rem 0} .logo h1 { font-size:1.8rem;font-weight:700;color:var(--primary-color);margin:0} .nav-menu { display:flex;list-style:none;gap:2rem} .nav-menu a { text-decoration:none;color:var(--text-color);font-weight:500;transition:var(--transition);position:relative} .nav-menu a:hover { color:var(--primary-color)} .nav-menu a::after { content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--primary-color);transition:var(--transition)} .nav-menu a:hover::after { width:100%} .hamburger { display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:0.5rem;gap:4px} .hamburger span { width:25px;height:3px;background:var(--primary-color);transition:var(--transition);border-radius:2px} .hero { padding:120px 0 80px;background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');background-size:cover;background-position:center;background-attachment:fixed;text-align:center;min-height:100vh;display:flex;align-items:center;position:relative} .hero-content h2 { font-size:3rem;font-weight:700;margin-bottom:1rem;color:var(--secondary-color);text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5)} .hero-content p { font-size:1.25rem;margin-bottom:2rem;color:var(--secondary-color);text-shadow:1px 1px 2px rgba(0, 0, 0, 0.5)} .cta-button { display:inline-block;background:var(--secondary-color);color:var(--primary-color);padding:1rem 2rem;text-decoration:none;border-radius:var(--border-radius);font-weight:600;transition:var(--transition);border:2px solid var(--secondary-color);box-shadow:0 4px 15px rgba(0, 0, 0, 0.3)} .cta-button:hover { background:transparent;color:var(--secondary-color);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0, 0, 0, 0.4)} .section-title { text-align:center;font-size:2.5rem;margin-bottom:3rem;color:var(--primary-color)} .restaurants-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem} .view-controls { display:flex;gap:0.5rem} .view-btn { display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;border:2px solid var(--border-color);background:var(--secondary-color);color:var(--text-color);border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);font-weight:500} .view-btn:hover { border-color:var(--primary-color);color:var(--primary-color)} .view-btn.active { background:var(--primary-color);color:var(--secondary-color);border-color:var(--primary-color)} .view-btn .icon { width:20px;height:20px;flex-shrink:0} .back-to-list-btn .icon { width:18px;height:18px;flex-shrink:0} .info-icon { width:18px;height:18px;margin-right:8px;vertical-align:middle} .star-icon { width:16px;height:16px;color:#FFD700;margin-right:4px;vertical-align:middle} .restaurants { padding:80px 0;background:var(--background-color)} .restaurants-grid { display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;margin-top:2rem} .restaurant-card { background:var(--secondary-color);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);border:1px solid var(--border-color)} .restaurant-card:hover { transform:translateY(-5px);box-shadow:var(--shadow-hover)} .restaurant-image { height:200px;overflow:hidden} .restaurant-image img { width:100%;height:100%;object-fit:cover;transition:var(--transition)} .restaurant-card:hover .restaurant-image img { transform:scale(1.05)} .restaurant-info { padding:1.5rem} .restaurant-info h3 { font-size:1.5rem;margin-bottom:0.5rem;color:var(--primary-color)} .cuisine { color:var(--text-light);font-size:0.9rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:0.5rem} .description { margin-bottom:1rem;line-height:1.5} .restaurant-meta { display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem} .rating { font-weight:600;color:var(--primary-color)} .price { font-weight:600;color:var(--text-light)} .location { font-size:0.9rem;color:var(--text-light);background:#f0f0f0;padding:0.25rem 0.5rem;border-radius:4px} .restaurant-actions { display:flex;gap:0.5rem;margin-top:1rem} .book-button { flex:1;background:var(--primary-color);color:var(--secondary-color);border:none;padding:0.75rem;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:var(--transition);font-size:0.9rem} .book-button:hover { background:var(--accent-color);transform:translateY(-2px)} .takeaway-button { flex:1;background:var(--secondary-color);color:var(--primary-color);border:2px solid var(--primary-color);padding:0.75rem;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:var(--transition);font-size:0.9rem} .takeaway-button:hover { background:var(--primary-color);color:var(--secondary-color);transform:translateY(-2px)} .about { padding:80px 0;background:#f8f9fa} .about-content { text-align:center;max-width:800px;margin:0 auto} .about-content h2 { margin-bottom:1rem} .about-content p { font-size:1.1rem;margin-bottom:3rem} .features { display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:2rem;margin-top:3rem} .feature { text-align:center;padding:2rem;background:var(--secondary-color);border-radius:var(--border-radius);box-shadow:var(--shadow)} .feature-icon { font-size:3rem;margin-bottom:1rem} .feature h3 { margin-bottom:0.5rem;color:var(--primary-color)} .contact { padding:80px 0;background:var(--background-color)} .contact h2 { text-align:center;margin-bottom:3rem} .contact-content { display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:800px;margin:0 auto} .contact-info h3 { margin-bottom:1rem;color:var(--primary-color)} .contact-info p { margin-bottom:0.5rem;font-size:1.1rem} .contact-form { display:flex;flex-direction:column;gap:1rem} .contact-form input, .contact-form textarea { padding:1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-family:inherit;transition:var(--transition)} .contact-form input:focus, .contact-form textarea:focus { outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0, 0, 0, 0.1)} .submit-button { background:var(--primary-color);color:var(--secondary-color);border:none;padding:1rem;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:var(--transition)} .submit-button:hover { background:var(--accent-color);transform:translateY(-2px)} .footer { background:var(--primary-color);color:var(--secondary-color);padding:3rem 0 1rem} .footer-content { display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:2rem;margin-bottom:2rem} .footer-section h3, .footer-section h4 { margin-bottom:1rem;color:var(--secondary-color)} .footer-section ul { list-style:none} .footer-section ul li { margin-bottom:0.5rem} .footer-section ul li a { color:#cccccc;text-decoration:none;transition:var(--transition)} .footer-section ul li a:hover { color:var(--secondary-color)} .footer-bottom { text-align:center;padding-top:2rem;border-top:1px solid #333;color:#cccccc} .modal { display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:blur(5px)} .modal-content { background-color:var(--secondary-color);margin:5% auto;padding:2rem;border-radius:var(--border-radius);width:90%;max-width:500px;position:relative;animation:modalSlideIn 0.3s ease} @keyframes modalSlideIn { from { opacity:0;transform:translateY(-50px)} to { opacity:1;transform:translateY(0)} } .close { position:absolute;right:1rem;top:1rem;font-size:2rem;font-weight:bold;cursor:pointer;color:var(--text-light);transition:var(--transition)} .close:hover { color:var(--primary-color)} .modal h2 { margin-bottom:1.5rem;color:var(--primary-color)} .booking-form { display:flex;flex-direction:column;gap:1rem} .form-group { display:flex;flex-direction:column} .form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form-group label { font-weight:600;margin-bottom:0.5rem;color:var(--primary-color)} .form-group input, .form-group select, .form-group textarea { padding:0.75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-family:inherit;transition:var(--transition)} .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0, 0, 0, 0.1)} .submit-booking { background:var(--primary-color);color:var(--secondary-color);border:none;padding:1rem;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:var(--transition);margin-top:1rem} .submit-booking:hover { background:var(--accent-color);transform:translateY(-2px)} .success { text-align:center} .success-content { padding:2rem 0} .success-icon { width:64px;height:64px;margin-bottom:1rem;color:#4CAF50} .success-icon svg { width:100%;height:100%} .success h2 { color:var(--primary-color);margin-bottom:1rem} .close-success { background:var(--primary-color);color:var(--secondary-color);border:none;padding:0.75rem 2rem;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:var(--transition);margin-top:1rem} .close-success:hover { background:var(--accent-color)} .map-container { position:relative;height:600px;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow)} .map-controls { position:absolute;top:1rem;left:1rem;z-index:1000} .back-to-list-btn { display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:var(--secondary-color);color:var(--primary-color);border:2px solid var(--primary-color);border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);font-weight:600;box-shadow:var(--shadow)} .back-to-list-btn:hover { background:var(--primary-color);color:var(--secondary-color)} .map { width:100%;height:100%;border-radius:var(--border-radius)} .leaflet-container { font-family:'Inter', sans-serif} .leaflet-popup-content-wrapper { border-radius:var(--border-radius);box-shadow:var(--shadow)} .leaflet-popup-content { margin:0;border-radius:var(--border-radius)} .leaflet-popup-tip { background:var(--secondary-color)} .custom-marker { background:transparent;border:none} .restaurant-info-modal { max-width:800px;max-height:90vh;overflow-y:auto} .restaurant-header { display:flex;gap:1.5rem;margin-bottom:2rem;align-items:flex-start} .restaurant-header img { width:120px;height:120px;object-fit:cover;border-radius:var(--border-radius);flex-shrink:0} .restaurant-title h2 { margin-bottom:0.5rem;color:var(--primary-color)} .restaurant-title p { margin-bottom:1rem;color:var(--text-light);font-weight:500} .restaurant-stats { display:flex;gap:1rem;flex-wrap:wrap} .restaurant-stats span { font-weight:600;color:var(--primary-color)} .restaurant-content { display:flex;flex-direction:column;gap:2rem} .restaurant-description h3 { margin-bottom:1rem;color:var(--primary-color)} .restaurant-info-grid { display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:1.5rem} .info-item h4 { margin-bottom:0.5rem;color:var(--primary-color);font-size:1rem} .info-item p, .info-item a { color:var(--text-light);text-decoration:none} .info-item a:hover { color:var(--primary-color)} .restaurant-features h3 { margin-bottom:1rem;color:var(--primary-color)} .features-list { display:flex;flex-wrap:wrap;gap:0.5rem} .feature-tag { background:var(--primary-color);color:var(--secondary-color);padding:0.5rem 1rem;border-radius:20px;font-size:0.9rem;font-weight:500} .restaurant-actions-modal { display:flex;gap:1rem;flex-wrap:wrap} .book-button-modal, .takeaway-button-modal, .directions-button { padding:1rem 2rem;border:none;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none;display:inline-block;text-align:center} .book-button-modal { background:var(--primary-color);color:var(--secondary-color)} .book-button-modal:hover { background:var(--accent-color);transform:translateY(-2px)} .takeaway-button-modal { background:var(--secondary-color);color:var(--primary-color);border:2px solid var(--primary-color)} .takeaway-button-modal:hover { background:var(--primary-color);color:var(--secondary-color);transform:translateY(-2px)} .directions-button { background:var(--text-light);color:var(--secondary-color)} .directions-button:hover { background:var(--accent-color);transform:translateY(-2px)} .takeaway-form { display:flex;flex-direction:column;gap:1rem} .submit-takeaway { background:var(--primary-color);color:var(--secondary-color);border:none;padding:1rem;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:var(--transition);margin-top:1rem} .submit-takeaway:hover { background:var(--accent-color);transform:translateY(-2px)} @media (max-width:768px) { .container { padding:0 15px} .hamburger { display:flex} .nav-menu { position:fixed;top:100%;left:0;right:0;background:var(--secondary-color);flex-direction:column;padding:2rem;box-shadow:var(--shadow);transform:translateY(-100%);opacity:0;visibility:hidden;transition:var(--transition)} .nav-menu.active { transform:translateY(0);opacity:1;visibility:visible} .hero { background-attachment:scroll} .hero-content h2 { font-size:2rem} .hero-content p { font-size:1rem} .section-title { font-size:2rem} .restaurants-header { flex-direction:column;align-items:stretch} .view-controls { justify-content:center} .restaurants-grid { grid-template-columns:1fr} .restaurant-actions { flex-direction:column} .map-container { height:400px} .restaurant-header { flex-direction:column;text-align:center} .restaurant-header img { width:100px;height:100px;margin:0 auto} .restaurant-info-grid { grid-template-columns:1fr} .restaurant-actions-modal { flex-direction:column} .features { grid-template-columns:1fr} .contact-content { grid-template-columns:1fr;gap:2rem} .form-row { grid-template-columns:1fr} .modal-content { margin:10% auto;width:95%;padding:1.5rem} .footer-content { grid-template-columns:1fr;text-align:center} } @media (max-width:480px) { .hero { padding:100px 0 60px} .hero-content h2 { font-size:1.75rem} .section-title { font-size:1.75rem} .restaurant-info { padding:1rem} .feature { padding:1.5rem} } html { scroll-behavior:smooth} @keyframes fadeIn { from { opacity:0;transform:translateY(20px)} to { opacity:1;transform:translateY(0)} } .restaurant-card { animation:fadeIn 0.6s ease forwards} .restaurant-card:nth-child(1) { animation-delay:0.1s} .restaurant-card:nth-child(2) { animation-delay:0.2s} .restaurant-card:nth-child(3) { animation-delay:0.3s} .restaurant-card:nth-child(4) { animation-delay:0.4s}