/* Google Fonts now loaded via in instead of @import - @import blocks the critical rendering path because the browser must fetch and parse this whole file before it can even discover the font request. */ :root{ --red:#ff3838; /* bright brand red - decorative use only (large text, icons, borders) */ --red-text:#d81f1f; /* darker red - meets WCAG AA 4.5:1 for normal-size text/buttons on white */ } *{ font-family: 'Nunito', sans-serif; margin:0; padding:0; box-sizing: border-box; outline: none; border:none; text-decoration: none; text-transform: capitalize; transition:all .2s linear; } *::selection{ background:var(--red); color:#fff; } /* Visible keyboard focus indicator - the reset above removes the default outline, so this restores one for keyboard users without adding a ring to every mouse click. */ :focus-visible{ outline: .2rem solid var(--red-text); outline-offset: .2rem; } .skip-link{ position: absolute; left: -999px; top: auto; background:#fff; color:#333; padding: 1rem 2rem; z-index: 2000; border-radius: .5rem; font-size: 1.6rem; } .skip-link:focus{ left: 1rem; top: 1rem; } html{ font-size: 62.5%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 6rem; } body{ background:#f7f7f7; } section{ padding:2rem 9%; } .heading{ text-align: center; font-size: 3.5rem; padding:1rem; color:#666; } .heading span{ color:var(--red); } .btn{ display: inline-block; padding:.8rem 3rem; border:.2rem solid var(--red); color:var(--red-text); cursor: pointer; font-size: 1.7rem; border-radius: .5rem; position: relative; overflow: hidden; z-index: 0; margin-top: 1rem; } .btn::before{ content: ''; position: absolute; top:0; right: 0; width:0%; height:100%; background:var(--red-text); transition: .3s linear; z-index: -1; } .btn:hover::before{ width:100%; left: 0; } .btn:hover{ color:#fff; } header{ position: fixed; top:0; left: 0; right:0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; background:#fff; padding:1.3rem 9%; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); } header .logo{ font-size: 2.5rem; font-weight: bolder; color:#666; } header .logo i{ padding-right: .5rem; color:var(--red); } header .navbar a{ font-size: 2rem; margin-left: 2rem; color:#666; } header .navbar a:hover{ color:var(--red-text); } #menu-bar{ font-size: 3rem; cursor: pointer; color:#666; background:none; border:.1rem solid #666; border-radius: .3rem; padding:.5rem 1.5rem; display: none; } .home{ display: flex; flex-wrap: wrap; gap:1.5rem; min-height: 100vh; align-items: center; background:url(../images/home-bg.jpg) no-repeat; background-size: cover; background-position: center; } .home .content{ flex:1 1 40rem; padding-top: 6.5rem; } .home .image{ flex:1 1 40rem; } .home .image img{ width:100%; padding:1rem; animation:float 3s linear infinite; } @keyframes float{ 0%, 100%{ transform: translateY(0rem); } 50%{ transform: translateY(3rem); } } .home .content h3{ font-size: 5rem; color:#333; } .home .content p{ font-size: 1.7rem; color:#666; padding:1rem 0; } .speciality .box-container{ display: flex; flex-wrap: wrap; gap:1.5rem; } .speciality .box-container .box{ flex:1 1 30rem; position: relative; overflow: hidden; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border:.1rem solid rgba(0,0,0,.3); cursor: pointer; border-radius: .5rem; } .speciality .box-container .box .image{ height:100%; width:100%; object-fit: cover; position: absolute; top:0; left:0; transform: translateY(-100%); } .speciality .box-container .box .content{ text-align: center; background:#fff; padding:2rem; } .speciality .box-container .box .content img{ margin:1.5rem 0; } .speciality .box-container .box .content h3{ font-size: 2.5rem; color:#333; } .speciality .box-container .box .content p{ font-size: 1.6rem; color:#666; padding:1rem 0; } .speciality .box-container .box:hover .image{ transform: translateY(0); } .speciality .box-container .box:hover .content{ transform: translateY(100%); } .popular .box-container{ display: flex; flex-wrap: wrap; gap:1.5rem; } .popular .box-container .box{ padding:2rem; background:#fff; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border:.1rem solid rgba(0,0,0,.3); border-radius: .5rem; text-align: center; flex:1 1 30rem; position: relative; } .popular .box-container .box img{ height:25rem; object-fit: cover; width:100%; border-radius: .5rem; } .popular .box-container .box .price{ position: absolute; top:3rem; left:3rem; background:var(--red-text); color:#fff; font-size: 2rem; padding:.5rem 1rem; border-radius: .5rem; } .popular .box-container .box h3{ color:#333; font-size: 2.5rem; padding-top: 1rem; } .popular .box-container .box .stars i{ color:#b8860b; font-size: 1.7rem; padding:1rem .1rem; } .steps{ display: flex; flex-wrap: wrap; gap:1.5rem; padding:1rem; } .steps .box{ flex:1 1 25rem; padding:1rem; text-align: center; } .steps .box img{ border-radius: 50%; border:1rem solid #fff; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); } .steps .box h3{ font-size: 3rem; color:#333; padding:1rem; } .gallery .box-container{ display: flex; flex-wrap: wrap; gap:1.5rem; } .gallery .box-container .box{ height:25rem; flex:1 1 30rem; border:1rem solid #fff; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; position: relative; overflow: hidden; } .gallery .box-container .box img{ height:100%; width:100%; object-fit: cover; } .gallery .box-container .box .content{ position: absolute; top:-100%; left:0; height: 100%; width:100%; background:rgba(255,255,255,.9); padding:2rem; padding-top: 5rem; text-align: center; } .gallery .box-container .box .content h3{ font-size: 2.5rem; color:#333; } .gallery .box-container .box .content p{ font-size: 1.5rem; color:#666; padding:1rem 0; } .gallery .box-container .box:hover .content{ top:0; } .review .box-container{ display: flex; flex-wrap: wrap; gap:1.5rem; } .review .box-container .box{ text-align: center; padding:2rem; border:1rem solid #fff; box-shadow: 0 .5rem 1rem rgba(0,0,0,.3); border-radius: .5rem; flex:1 1 30rem; background:#333; margin-top: 6rem; } .review .box-container .box img{ height: 12rem; width:12rem; border-radius: 50%; border:1rem solid #fff; margin-top: -8rem; object-fit: cover; } .review .box-container .box h3{ font-size: 2.5rem; color:#fff; padding:.5rem 0; } .review .box-container .box .stars i{ font-size: 2rem; color:var(--red); padding:.5rem 0; } .review .box-container .box p{ font-size: 1.5rem; color:#eee; padding:1rem 0; } .order .row{ padding:2rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); background:#fff; display: flex; flex-wrap: wrap; gap:1.5rem; border-radius: .5rem; } .order .row .image{ flex:1 1 30rem; } .order .row .image img{ height: 100%; width:100%; object-fit: cover; border-radius: .5rem; } .order .row form{ flex:1 1 50rem; padding:1rem; } .order .row form .inputBox{ display: flex; justify-content: space-between; flex-wrap: wrap; } .order .row form .inputBox input, .order .row form textarea{ padding:1rem; margin:1rem 0; font-size: 1.7rem; color:#333; text-transform: none; border:.1rem solid rgba(0,0,0,.3); border-radius: .5rem; width:49%; } .order .row form textarea{ width:100%; resize: none; height:15rem; } .order .row form .btn{ background:none; } .order .row form .btn:hover{ background:var(--red-text); } .footer{ background:#000; text-align: center; } /* Decorative ingredient-doodle watermarks, extended across sections beyond the hero. Kept behind all content via negative z-index; larger and more varied than the original two hero clusters, per request. */ .speciality, .popular, .review, .order{ position: relative; overflow: hidden; } .speciality::before, .speciality::after, .popular::before, .popular::after, .review::before, .review::after, .order::before, .order::after{ content: ''; position: absolute; background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: -1; } .speciality::before{ top: -3.5rem; left: -3.5rem; width: 26rem; height: 22rem; background-image: url(../images/wm-berries.png); transform: rotate(-8deg); } .speciality::after{ bottom: -4.5rem; right: -3.5rem; width: 24rem; height: 24rem; background-image: url(../images/wm-garlic1.png); transform: rotate(12deg); } .popular::before{ top: -2.5rem; right: -2.5rem; width: 23rem; height: 23rem; background-image: url(../images/wm-parsley.png); transform: rotate(14deg) scaleX(-1); } .popular::after{ bottom: -3.5rem; left: -3.5rem; width: 22rem; height: 20rem; background-image: url(../images/wm-mushroom.png); transform: rotate(-6deg); } .review::before{ top: -3.5rem; left: -2.5rem; width: 21rem; height: 21rem; background-image: url(../images/wm-garlic2.png); transform: rotate(-10deg); } .review::after{ bottom: -2.5rem; right: -2.5rem; width: 18rem; height: 16rem; background-image: url(../images/wm-leaf-sliver.png); transform: rotate(15deg) scaleX(-1); } .order::before{ top: -3.5rem; right: -3.5rem; width: 23rem; height: 21rem; background-image: url(../images/wm-mushroom.png); transform: scaleX(-1) rotate(8deg); } .order::after{ bottom: -3.5rem; left: -3.5rem; width: 23rem; height: 21rem; background-image: url(../images/wm-berries.png); transform: scaleX(-1) rotate(6deg); } @media (max-width: 768px){ .speciality::before, .speciality::after, .popular::before, .popular::after, .review::before, .review::after, .order::before, .order::after{ width: 14rem; height: 14rem; opacity: .7; } } .footer .share{ display: flex; gap:1.5rem; justify-content: center; flex-wrap: wrap; } .footer .credit{ padding:2.5rem 1rem; color:#fff; font-weight: normal; font-size: 2rem; } .footer .credit span{ color:var(--red); } #scroll-top{ position: fixed; right: 2rem; bottom: 2rem; padding:.5rem 1.5rem; font-size: 4rem; background:var(--red); color:#fff; border-radius: .5rem; z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(1.5rem); transition: opacity .35s ease, transform .35s ease, visibility .35s; } #scroll-top.active{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* media queries */ @media(max-width:991px){ html{ font-size: 55%; } header{ padding:1.4rem 2rem; } section{ padding:2rem; } } @media(max-width:768px){ #menu-bar{ display: initial; } header .navbar{ position: absolute; top:100%; left: 0; right:0; background: #f7f7f7; border-top: .1rem solid rgba(0,0,0,.1); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } header .navbar.active{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } header .navbar a{ margin: 1.5rem; padding:1.5rem; display: block; border:.2rem solid rgba(0,0,0,.1); border-left:.5rem solid var(--red); background:#fff; } #scroll-top{ display: none; } } @media(max-width:450px){ html{ font-size: 50%; } .order .row form .inputBox input{ width:100%; } }