/* Importing google fonts */ @import url("https://fonts.googleapis.com/css2?family=Kablammo&family=Miniver&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,400;0,600;0,800;1,400;1,500;1,700;1,800&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap"); /* here * is the universal selector that apply this to all elements on the page */ * { /* It targets all elements, not just the scrollable container. */ /* removes default margin and padding */ margin: 0; padding: 0; box-sizing: border-box; /* width = content + padding + border */ font-family: "Poppins", sans-serif; } html { /* */ scroll-behavior: smooth; } /* :root is intended more for CSS variables. */ :root { /* **Short Summary:** * `:root` targets the `` element. * It's used to define **global CSS variables**. * Variables here can be used anywhere in your CSS. * Helps keep your code **organized and reusable**. */ /* colors */ --white-color: #fff; --dark-color: #252525; --primary-color: #3b141c; --secondary-color: #f3961c; --light-pink-color: #faf4f5; --medium-grey-color: #ccc; /* Font size */ --font-size-s: 0.9rem; --font-size-n: 1rem; --font-size-m: 1.129rem; --font-size-l: 1.5rem; --font-size-xl: 2rem; --font-size-xxl: 2.3rem; /* Font Weight */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Border radius */ --border-radius-s: 8px; --border-radius-m: 30px; --border-radius-circle: 50%; /* Site max width */ --site-max-width: 1300px; } /* styling for the whole site */ ul { list-style: none; } a { text-decoration: none; /* remove the underline */ } button { cursor: pointer; border: none; background: none; /* The single background shorthand property can combine multiple background-related properties in one line instead of writing them separately. */ } img { width: 100%; } .section-content { margin: 0 auto; padding: 0 20px; max-width: var(--site-max-width); } .section-title { text-align: center; padding: 60px 0 100px; text-transform: uppercase; font-size: var(--font-size-xl); } .section-title::after { content: ""; width: 80px; height: 5px; display: block; margin: 10px auto 0; border-radius: var(--border-radius-s); background: var(--secondary-color); } /* nav bar style */ header { position: fixed; width: 100%; z-index: 5; /* z-index controls which elements appear in front of others when they overlap. The higher the z-index, the more "on top" the element will be. */ background: var(--primary-color); } header .navbar { display: flex; padding: 20px; align-items: center; justify-content: space-between; } .navbar .nav-menu { display: flex; gap: 10px; } .navbar .nav-logo .logo-text { color: var(--white-color); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); } .navbar .nav-menu .nav-link { color: var(--white-color); padding: 10px 18px; font-size: var(--font-size-m); background: var(--primary-color); border-radius: var(--border-radius-m); transition: 0.3s ease; } .navbar .nav-menu .nav-link:hover { color: var(--primary-color); background: var(--secondary-color); } /* :where(...) is a CSS selector list helper. It lets you target multiple selectors without increasing specificity. */ .navbar :where(#menu-close-button, #menu-open-button) { display: none; } /* hero section styling */ .hero-section { background: var(--primary-color); min-height: 100vh; } .hero-section .section-content { display: flex; align-items: center; min-height: 100vh; color: var(--white-color); justify-content: space-between; } .hero-section .hero-details .title { font-size: var(--font-size-xxl); color: var(--secondary-color); font-family: "Miniver", sans-serif; } .hero-section .hero-details .subtitle { margin-top: 8px; max-width: 70%; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); } .hero-section .hero-details .description { max-width: 70%; margin: 24px 0 40px; font-size: var(--font-size-m); } .hero-section .hero-details .buttons { display: flex; gap: 23px; } .hero-section .hero-details .button { padding: 10px 26px; border: 2px solid transparent; color: var(--primary-color); border-radius: var(--border-radius-m); background: var(--secondary-color); font-weight: var(--font-weight-medium); transition: 0.3s ease; } .hero-section .hero-details .button:hover, .hero-section .hero-details .contact-us { color: var(--white-color); border-color: var(--white-color); background: transparent; } .hero-section .hero-details .contact-us:hover { color: var(--primary-color); border-color: var(--secondary-color); background: var(--secondary-color); } .hero-section .hero-image-wrapper { max-width: 500px; margin-right: 30px; } /* About Section */ #about-section { scroll-margin-top: 80px; padding-top: 40px; } .about-section { padding: 120px 0; background: var(--light-pink-color); } .about-section .section-content { display: flex; align-items: center; gap: 50px; justify-content: space-between; } .about-section .about-image-wrapper .about-image { width: 400px; height: 400px; object-fit: cover; border-radius: var(--border-radius-circle); } .about-section .about-details .section-title { padding: 0; } .about-section .about-details { max-width: 50%; } .about-section .about-details .text { line-height: 30px; margin: 50px 0 30px; text-align: center; font-size: var(--font-size-m); } .about-section .social-link-list { display: flex; gap: 25px; justify-content: center; } .about-section .social-link-list .social-link { color: var(--primary-color); font-size: var(--font-size-l); transition: 0.2s ease; } .about-section .social-link-list .social-link:hover { color: var(--secondary-color); } /* Menu section styling */ .menu-section { color: var(--white-color); background: var(--dark-color); padding: 50px 0 100px; } .menu-section .menu-list { display: flex; flex-wrap: wrap; /*Use flex-wrap: wrap; when you want items to move to the next line if they don’t fit in a single row.*/ align-items: center; gap: 110px; justify-content: space-around; } .menu-section .menu-list .menu-item { display: flex; align-items: center; flex-direction: column; text-align: center; justify-content: space-between; width: calc( 100% / 3 - 110px ); /*I want this element to take up one-third of the parent's width, minus 110px.*/ } .menu-section .menu-list .menu-item .menu-image { max-width: 83%; aspect-ratio: 1; margin-bottom: 15px; object-fit: contain; } .menu-section .menu-list .menu-item .name { margin: 12px 0; font-size: var(--font-size-l); font-weight: var(--font-weight-semibold); } .menu-section .menu-list .menu-item .text { font-size: var(--font-size-m); } /* Testimonials section */ .testimonials-section .testimonials { display: flex; padding: 35px; text-align: center; flex-direction: column; align-items: center; } .testimonials-section .slider-wrapper { overflow: hidden; margin: 0 60px 50px; } .testimonials-section { padding: 50px 0 100px; background: var(--light-pink-color); } .testimonials-section .testimonials .user-image { width: 180px; height: 180px; object-fit: cover; border-radius: var(--border-radius-circle); margin-bottom: 50px; } .testimonials-section .testimonials .name { margin-bottom: 16px; font-size: var(--font-size-m); } .testimonials-section .testimonials .feedback { line-height: 25px; } .testimonials-section .swiper-pagination-bullet { width: 15px; height: 15px; opacity: 1; background: var(--secondary-color); } .testimonials-section .swiper-slide-button { color: var(--secondary-color); transform: 0.3s ease; margin-top: -50px; } .testimonials-section .swiper-slide-button:hover { color: var(--primary-color); } /* Gallery section styling */ .gallery-section { padding: 50px 0 100px; } .gallery-section .gallery-list{ display: grid; grid-template-columns: repeat(3,1fr); /* grid-template-columns: repeat(3, minmax(calc(100% / 3 - 32px), 1fr)); */ grid-template-rows: repeat(3,1f); gap: 32px; } /* .gallery-section .gallery-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 32px; } */ .gallery-section .gallery-list .gallery-item { overflow: hidden; border-radius: var(--border-radius-s); width: calc(100% / 3 -32px); } .gallery-section .gallery-item .gallery-image { width: 100%; height: 100%; cursor: zoom-in; /*This CSS property changes the mouse pointer to a magnifying glass with a plus sign, indicating that clicking the element will zoom in.*/ transition: 0.3s ease; } .gallery-section .gallery-item:hover .gallery-image { transform: scale(1.3); } /* contact page */ .contact-section { padding: 50px 0 100px; background: var(--light-pink-color); } .contact-section .section-content { display: flex; gap: 48px; align-items: flex-start; justify-content: space-between; } .contact-section .contact-info-list .contact-info { display: flex; gap: 20px; margin: 20px 0; align-items: center; } .contact-section .contact-info-list .contact-info i { font-size: var(--font-size-m); } .contact-section .contact-form .form-input { width: 100%; height: 50px; padding: 0 12px; outline: none; margin-bottom: 16px; background: var(--white-color); border-radius: var(--border-radius-s); border: 1px solid var(--medium-grey-color); } .contact-section .contact-form .form-input:focus { border-color: var(--secondary-color); } .contact-section .contact-form .submit-button { padding: 10px 26px; margin-top: 10px; font-size: var(--font-size-m); color: var(--white-color); font-weight: var(--font-weight-medium); border-radius: var(--border-radius-m); background: var(--primary-color); transition: 0.3s ease; } .contact-section .contact-form { max-width: 50%; } .contact-section .contact-form .submit-button:hover { color: var(--primary-color); background: transparent; border: 1px solid var(--primary-color); } .contact-section .contact-form textarea.form-input { height: 100px; padding: 12px; resize: vertical; } /* footer section */ .footer-section { padding: 20px 0; background: var(--dark-color); } .footer-section .section-content { display: flex; align-items: center; justify-content: space-between; } .footer-section .social-link-list { display: flex; gap: 25px; } .footer-section .social-link-list .social-link { font-size: var(--font-size-l); } .footer-section .social-link-list .social-link:hover, .footer-section .policy-text .policy-link:hover { color: var(--secondary-color); } .footer-section :where(.copyright-text, .social-link, .policy-link) { color: var(--white-color); } .footer-section .policy-text .separator { margin: 0 5px; color: var(--white-color); } /* responsive media query for max width 1024px */ @media screen and (max-width: 1024px) { .menu-section .menu-list { gap: 60px; } .gallery-list { grid-template-columns: repeat(3,1fr); } .menu-section .menu-list .menu-item { width: calc(100% / 3 - 60px); } } /* responsive media query for max width 900px */ @media screen and (max-width: 900px) { :root { --font-size-m: 1rem; --font-size-l: 1.3rem; --font-size-xl: 1.5rem; --font-size-xxl: 1.8rem; } /* overlay blur effect */ body.show-mobile-menu header::before { /* content isnecessary for before pseudo class */ content: ""; position: fixed; left: 0; top: 0; height: 100%; width: 100%; backdrop-filter: blur(5px); } .navbar :where(#menu-close-button, #menu-open-button) { display: block; font-size: var(--font-size-l); } .navbar #menu-close-button { position: absolute; right: 30px; top: 30px; } .navbar #menu-open-button { color: var(--white-color); } .navbar .nav-menu { display: block; position: fixed; left: -300px; top: 0; width: 300px; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 100px; background: var(--white-color); transition: left 0.2s ease; } /* You only toggle the class on in JS, and CSS handles the animation and visibility of .nav-menu. No need to touch .navbar or .nav-menu with JavaScript at all. */ body.show-mobile-menu .navbar .nav-menu { left: 0; /* left: 0; positions an element 0 pixels from the left edge of its closest positioned ancestor. */ overflow: hidden; } .navbar .nav-menu .nav-link { color: var(--primary-color); background: var(--white-color); display: block; margin-top: 17px; font-size: var(--font-size-l); } .hero-section .section-content { gap: 50px; text-align: center; padding: 30px 20px 20px; flex-direction: column-reverse; justify-content: center; } /* :is() is a CSS selector function that helps simplify long or repeated selector chains. */ .hero-section .hero-details :is(.subtitle, .description), .about-section .about-details, .contact-section .contact-form { max-width: 100%; } .hero-section .hero-details .buttons { justify-content: center; } .hero-section .hero-image-wrapper { max-width: 270px; margin-right: 0; } .about-section .section-content { gap: 70px; flex-direction: column-reverse; } .about-section .about-image-wrapper .about-image { width: 100%; height: 100%; max-width: 250px; aspect-ratio: 1; } .menu-section .menu-list { gap: 30px; } .menu-section .menu-list .menu-item { width: calc(100% / 2 - 30px); } .menu-section .menu-list .menu-item .menu-image { max-block-size: 200px; /*max-block-size is a logical CSS property that sets the maximum size of an element in the block direction*/ } .gallery-section .gallery-list { gap: 30px; grid-template-columns: repeat(2,1fr); } .gallery-section .gallery-list .gallery-item { width: calc(100% / 2 -30px); } .contact-section .section-content { align-items: center; flex-direction: column-reverse; } } /* responsive media query for max width 600px */ @media screen and (max-width: 640px) { .menu-section .menu-list .menu-item, .gallery-section .gallery-list .gallery-item { width: 100%; } .gallery-section .gallery-list { grid-template-columns: 1fr; } .menu-section .menu-list { gap: 60px; } .testimonials-section .slider-wrapper { margin: 0 0 30px; } .testimonials-section .swiper-slide-button { display: none; } .footer-section .section-content{ flex-direction: column; gap: 20px; } } /* scroll animation */ /* Hidden initially */ .scroll-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .scroll-reveal.show { opacity: 1; transform: translateY(0); }