/*
  Theme Name: M8
  Author: Roodee Creative
Version: 1.3
*/

/* Variables */
:root {

  /* Colour Palette */
  --font-color: #111;
  --brand-green: #ed8330;
  --dark-green: #ed8330;
  --brand-red: #9b2623;
  --light-grey: rgba(17, 17, 17, 0.05);

  /* Utilities */
  --transition: all .3s ease-in-out;
}

/* Global Layout & Styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  font-family: 'Poppins', Helvetica, sans-serif;
  font-size: 18px;
  line-height: 28px;
background: #ffffcc;
}

/* Typography & Elements */

h1, h2, h3,
h4, h5, h6 {
  color: #9b2623;
  font-weight: 600;
  margin: 0;
}

h1 {color: #9b2623;
  font-size: 60px;
  line-height: 70px;
}

h2 {
	color: #9b2623;
  font-size: 32px;
  line-height: 42px;
}

h3 {margin: 0px 0px 20px 0px;}
h3 a {color: #9b2623;}
h6 {
  font-size: 14px;
  line-height: 24px;
}

p {
  margin: 10px 0;
  font-weight: 100;
  font-size: 18px;
  line-height: 28px;
  color: #9b2623;
  opacity: .8;
}

.car-park {color: #fff; text-shadow: 0px 0px 3px #000;}





ul li {color: #9b2623;
 opacity: .8;
}

.table {margin: 30px 0px 30px 0px;}

td {padding: 10px;
}

.eat-out {display: block; width: 300px; height: auto; margin: 0px auto;}
.btn {
  padding: 15px 40px;
  border: none;
  cursor: pointer;
  background: #9b2623;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.btn:hover {
  background: #c9151e;
}


/* Site Header */



#site-header {
  background-color: #ffffcc;
}


#topbar {
  padding: 10px 0;
  align-items: center;
  border-bottom: 1px solid #9b2623;
}


.site-menu ul,
#topbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}







.site-menu {
  transition: var(--transition);
}


.site-menu ul {
  font-size: 16px;
}

.site-menu ul li, #topbar ul li {
  margin-right: 20px;
}

.site-menu ul li:last-child, #topbar ul li:last-child {
  margin-right: 0;
}

.site-menu ul li a,
#topbar ul li a {
  color: #4B4B4B;
  text-decoration: none;
  transition: var(--transition);
}

.site-menu ul li a:hover, #topbar ul li a:hover {
color: #825E1B;
}

#topbar h6 {



  color: #9b2623;



}







#site-nav {



  padding: 10px 0;



  display: flex;



  align-items: center;



  justify-content: space-between;



}







#site-nav img {



  max-width: 300px;



  height: auto;



}







#site-nav .nav-switch {



  fill: #9b2623;



  cursor: pointer;



}







.nav-active {


  transform: translateX(0) !important;



}







/* Dropdown */



.sub-menu {



  position: absolute;



  flex-direction: column;



  z-index: 999;



  text-align: left;



  padding: 10px!important;



  background: #fff !important;



  min-width: 250px;



  display: none !important;



  transition: var(--transition);



  border-top: 45px solid #000;



}







.menu-item-has-children::after {



  content: "▾";



  color: #fff;



  cursor: pointer;



  margin-left: 5px;



}







.show-subnav {



  display: flex !important;



}







.sub-menu li {
margin-right: 0 !important;
  padding: 10px 0;
  width: 100%;
  font-weight: 400;
  border-bottom: 1px solid var(--light-grey);
}




.sub-menu li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}







.sub-menu li a {
  color: #fff !important;

}







.sub-menu li a:hover {



  color: var(--brand-green) !important;



}



/* slider */



.slider {



  min-height: 75vh;



  display: block;



}







.slide {



  min-height: 75vh;



  display: flex!important;



  justify-content: center;



  text-align: center;



  align-items: center;



  padding: 120px 0;



}







.slide h2 {



  color: #fff;



	text-shadow: 2px 2px 60px #000;



  font-size: 60px;



  line-height: 70px;



  margin-bottom: 30px;



}







.slick-dots {



  list-style: none;



  width: 100%;



  display: flex;



  justify-content: center;



  position: absolute;



  margin-top: -60px;



  z-index: 300;



}







.slick-dots li button {



  font-size: 0;



  line-height: 0;



  display: block;



  width: 10px;



  height: 10px;



  padding: 5px;



  margin: 0 10px;



  border-radius: 50%;



  cursor: pointer;



  color: transparent;



  border: 0;



  outline: none;



  background: rgba(255, 255, 255, 0.3);



  transition: all .2s ease-in-out;



  text-align: center;



}







.slick-dots .slick-active button {



  background: #fff;;



}







.r-arrow,



.l-arrow {



  fill: #fff;



  cursor: pointer;



  position: absolute;



  margin: 30px;



  z-index: 300;



  transition: all .2s ease-in-out;



  width: 32px;



  height: 32px;



}







.r-arrow {



  right: 0;



  top: 50%;



}







.r-arrow:hover {



  transform: translateX(10px);



}







.l-arrow:hover {



  transform: translateX(-10px);



}







.l-arrow {



  left: 0;



  top: 50%;



}














/* video hero */



.full-video {



  width: 100%;



  height: 80vh;



  z-index: -999 !important;



  overflow: hidden;



  background-position: center!important;



  background-repeat: no-repeat!important;



  -webkit-background-size: cover!important;



  -moz-background-size: cover!important;



  -o-background-size: cover!important;



  background-size: cover!important;



}







.full-video-src {



  width: auto;



  height: auto;



  min-width: 100%;



  min-height: 100%;



}







.video-content h2 {
  color: #fff;
  font-size: 60px;
  line-height: 70px;
  margin-bottom: 0px;
}

.video-content h3 {
  color: #fff;
  font-size: 40px;
  line-height: 50px;
  margin-bottom: 30px;
}










.video-content {



  position: absolute;



  margin-top: -80vh;



  width: 100%;



  height: 80vh;



  display: flex;



  justify-content: center;



  align-items: center;



  text-align: center;



  background: rgba(0,0,0,0.3);



  color: #fff;



}



/* Cards */



.card {



  display: block;



  margin-bottom: 30px;



  height: 420px;



  background-position: center center;



  background-repeat: no-repeat;



  background-size: cover;



  -webkit-background-size: cover;



  -moz-background-size: cover;



  text-decoration: none;



  transition: all .2s ease-in-out;



  box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3);



}







.card:hover {



  transition:



  box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);



  transform: scale(1.02);



}







.card:hover .card-inner {



  background: rgba(0,0,0,0.4)



}







.card-inner {



  display: flex;



  flex-direction: column;



  justify-content: center;



  align-items: center;



  text-align: center;



  padding: 30px;



  height: 100%;



  background-color: rgba(0,0,0,0.2);



  transition: all .2s ease-in-out;



}







.card h2 {



  font-size: 38px;



  line-height: 48px;



  color: #fff;



  margin-bottom: 30px;



}







.card-tall {



  height: 870px;



  background-image: url(/wp-content/uploads/2023/12/m8hotpot-cocktail-xmas.jpg);



}







.farm-shop {

  background-image: url(/wp-content/uploads/2025/10/kebab-2025-01-10-15-14-54-utc.jpg);



}







.garden-centre {



  background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/uploads/2019/06/Cocktail-15.jpg);



}

.christmas {background-image: url(/wp-content/uploads/2025/06/chinese-food-blank-background-2025-02-12-22-40-10-utc.jpg);}


.pyo {



  background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/themes/sakura/img/card-strawberry.jpg);



}







.children {



  background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/themes/sakura/img/child.jpg);



}



.offer-students {background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/uploads/2019/06/Student.jpg);}

.offer-birthday {background-image: url(https://www.tops-restaurants.co.uk/wp-content/uploads/2019/06/Cocktail-3.jpg);}

.card-tall-takeaway {height: 870px;background-image: url(https://www.tops-restaurants.co.uk/wp-content/uploads/2019/07/stir-fry-with-chicken-mushrooms-broccoli-and-P92AP7S.jpg);}





/* Content Layout */



#page-main {



  margin: 60px 0;



}







#page-main p a {color: #9b2623;}



#page-main p a:hover {color: red !important;}







#page-intro {



  padding-top: 60px;



  text-align: center;





}







#page-banner {



  background-color: var(--light-grey);



  padding: 60px 0 30px 0;



}







#card-grid {



  padding-bottom: 60px;



}







#page-banner .card {



  background-position: center center;



  background-size: cover;



  height: 320px;



  box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3);



}







#page-banner .card h2 {



  font-size: 24px;



  line-height: 34px;



}







#page-banner .card:hover {



  transform: scale(1.05);



  box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);



}







.gifts {background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/themes/sakura/img/card-gifts.jpg);}



.events {background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/themes/sakura/img/events.jpg);}



.farm-butcher {background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/themes/sakura/img/butcher.jpg);}



.gardening {background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/themes/sakura/img/card-seed-potatoes.jpg);}



.plant {background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/themes/sakura/img/plant.jpg);}



.customer {background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/themes/sakura/img/farm-shop.jpg);}



.community {background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/themes/sakura/img/card-community.jpg);}



.c-news {background-image: url(https://sakura-japanese-restaurant.co.uk/wp-content/themes/sakura/img/card-farm.jpg);}







#clubcards {



  padding: 60px 0;



  text-align: left;



}







#clubcards .row {



  align-items: center;



}







#clubcards img {



  max-width: 100%;



  height: auto;



  margin: 0 auto;



}







#clubcards h2 {



  margin-bottom: 30px;



}







#callout {
  height: 50vh;
  background: url(/wp-content/uploads/2023/10/Hot-Pot-seating.jpg) no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
}







.callout-inner {



  padding: 60px 0;



  display: flex;



  align-items: center;



  height: 100%;



  background: rgba(0, 0, 0, 0.3);



}







#callout h2 {



  font-size: 38px;



  line-height: 48px;



  color: #fff;



  margin-bottom: 30px;



}







/* Site Footer */



#site-footer {



  padding: 30px 0;



}







#site-footer ul {



  margin: 0;



  padding: 0;



  list-style: none;



  font-size: 14px;



  font-weight: 400;



  display: flex;



  align-items: center;



  justify-content: flex-end;



}







#site-footer ul li {



  margin-right: 20px;



}







#site-footer ul li:last-child {



  margin-right: 0;



}







#site-footer ul li a {



  color: #9b2623 !important;



  text-decoration: none;



  transition: var(--transition);



}







#site-footer ul li a:hover {



  color: red;



}







.footer-nav ul li a {color: #fff;}



.footer-nav ul li a:hover {color: #red;}







.copyright {



  font-size: 12px;



}







.social {



  display: flex;



}







.social svg {



  fill: #9b2623;



  margin-right: 20px;



  transition: var(--transition);



}







.social svg:hover {



  fill: red;



}







#page-hero {



  min-height: 50vh;



  background-position: center;



  background-repeat: no-repeat;



  background-size: cover !important;



  -webkit-background-size: cover !important;



  -moz-background-size: cover !important;



}







#page-hero h1 {



  color: #fff;



}







.hero-inner {



  min-height: 50vh;



  display: flex;



  text-align: center;



  justify-content: center;



  align-items: center;



  background: rgba(0, 0, 0, 0.3);



}







/* Form Styles */



.contact-form {display: block; width: 100%; height: auto; overflow:hidden;}
.white {color: #fff !important;}
.contact-form-red{display: block; width: 100%; height: auto; overflow:hidden; padding: 20px; background-color: #9B0103; margin: 20px 0px;}

.contact-form a {color: #9b2623 !important;}

label {



  font-weight: 100;



  margin-bottom: 10px;



}







.form-input {



  border: none;



  background: #fff;



  padding: 15px;



  width: 100%;



  margin: 0px 0px 20px 0px;



}







.form-input:focus {



  outline: 0;



}







.wpcf7-list-item {



  margin: 0 !important;



}







.wpcf7-response-output {color: #9b2623 !important; border-color: #9b2623 !important;}



.wpcf7-response-output p {color: #9b2623 !important; }







.map-responsive{



    overflow:hidden;



    padding-bottom:56.25%;



    position:relative;



    height:0;



}



.map-responsive iframe{



    left:0;



    top:0;



    height:100%;



    width:100%;



    position:absolute;



}







/* Blog  Layout */



.news-card {



  padding: 60px 0;



  border-bottom: 1px solid var(--light-grey);



}







.news-card .btn {



  margin-top: 30px !important;



  display: inline-block;



}







.date {



  color: rgba(17, 17, 17, 0.6);



}







.news-card a {



  text-decoration: none;



}







.post-img {



  display: block;



  width: 100%;



  height: 280px;



  background-repeat: no-repeat;



  background-position: center center;



  background-size: cover;



  -moz-background-size: cover;



  -webkit-background-size: cover;



  box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3);



}







.sidebar {



  border-left: 1px solid var(--light-grey);



  padding: 0 30px;



  list-style: none;



}







.sidebar ul {



  list-style: none !important;



  margin: 0;



  padding: 0;



}







.sidebar ul li {



  padding: 5px 0;



}







.sidebar a {



  color: var(--font-color);



  text-decoration: none;



  transition: var(--transition);



}







.sidebar a:hover {



  color: var(--brand-green);



}







.responsive-img {width: 100%; max-width: 300px; height: auto;}



.responsive-img img {width: 100%; height: auto;}

.full-image {width: 100%; height: auto;}

.full-image img {width: 100%; height: auto;}



.dish-row {width: 100%; height: auto; overflow: hidden; color: #000; margin-top: 20px; }

.dish {width: 23%; height: auto; display: inline-block; margin: 0px 1% 20px 0px !important; text-align: center; vertical-align: top;}

.dish-image {width: 100%; height: auto;}

.dish-image img {width: 100%; height: auto;}



/* Responsive Breakpoints */



@media (max-width: 992px) {



  #topbar {



    display: none;



  }







  .site-menu {



    background-color: var(--brand-green);



    position: fixed;



    height: 100vh;



    width: 50%;



    top: 114px;



    right: 0;



    padding: 60px 60px 120px 60px;



    transform: translateX(100%);



    overflow-y: auto;



    z-index: 99999;



  }







  .site-menu ul {



    flex-direction: column;



    align-items: flex-start;







  }







  .site-menu ul li {



    margin: 20px 0;



    margin-right: 0;



  }



}







@media (min-width: 992px) {



  .nav-switch {



    display: none;



  }



}







@media (max-width: 768px) {



  .video-content h2,



  .slide h2 {



    font-size: 32px;



    line-height: 42px;



  }







  .full-video-src {



    display: none;



  }







  #site-header img {



    max-width: 120px;



  }







  .site-menu {



    top: 82px;



    width: 100%;



  }







  h1 {



    font-size: 32px;



    line-height: 42px;



  }


.btn {display: block; float: none; margin-bottom: 20px; }




  .card-tall {



    height: 420px;



  }







  #clubcards {



    text-align: center;



  }







  #clubcards img {



    margin-top: 30px;



  }



.dish {width: 48% !important;}



  .news-card h2 {



    margin-top: 30px;



  }







  .sidebar {



    display: none;



  }



}