/*
Theme Name: Bake Stand
Theme URI: https://opencollective.com/blankslate
Author: And Gao
Author URI: https://opencollective.com/blankslate#section-contributors
Description: A simple, clean, and responsive WordPress theme for bake Stand
Version: 2026
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2026
BlankSlate is distributed under the terms of the GNU GPL
*/

/* Fonts */
@font-face {
  font-family: 'Futura PT Book';
  src: url('fonts/FuturaCyrillicBook.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Futura PT Medium';
  src: url('fonts/FuturaCyrillicMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Printvetica';
  src: url('fonts/Printvetica.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* CSS Reset */
:root {
  --main-pink: #F9A0C6;
  --main-red: #CA3939;
  --main-yellow: #FFF47A;
  --main-green: #C2D500;
  --font-color: #000000;
}

html, body, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

body {
  line-height: 1;
  color: var(--font-color);
  font-family: 'Futura PT Book', Arial, sans-serif;
  font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
  font-size: .75rem;
  overflow-x: hidden;
}

#wrapper {
  width: 100dvw;
  overflow-x: hidden;
}

a {
  text-decoration-skip-ink: auto;
}

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}

button {
  outline: 0;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

q {
  display: inline;
  font-style: italic;
}

q:before {
  content: '"';
  font-style: normal;
}

q:after {
  content: '"';
  font-style: normal;
}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="search"],
input[type="password"] {
  appearance: none;
  border-radius: 0;
}

input[type="search"] {
  appearance: textfield;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  padding: 2px;
}

big {
  font-size: 120%;
}

small, sup, sub {
  font-size: 80%;
}

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

dd {
  margin-left: 20px;
}

kbd, tt {
  font-family: courier;
  font-size: 12px;
}

ins {
  text-decoration: underline;
}

del, strike, s {
  text-decoration: line-through;
}

dt {
  font-weight: bold;
}

address, cite, var {
  font-style: italic;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* WordPress Required Styles */
.sticky {}
.bypostauthor {}
.wp-caption {}
.wp-caption-text {}
.gallery-caption {}
.alignright {}
.alignleft {}
.aligncenter {}

/* Screen Reader Text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal;
}

.screen-reader-text:focus {
  background-color: #f7f7f7;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  clip-path: none;
  color: #007acc;
  display: block;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  right: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Skip Link */
.skip-link {
  left: -9999rem;
  top: 2.5rem;
  z-index: 999999999;
  text-decoration: underline;
}

.skip-link:focus {
  display: block;
  left: 6px;
  top: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: normal;
  padding: 15px 23px 14px;
  z-index: 100000;
  right: auto;
}

/* Visually Hidden */
.visually-hidden:not(:focus):not(:active),
.form-allowed-tags:not(:focus):not(:active) {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loading-animation.hidden {
  opacity: 0;
  visibility: hidden;
}

.site-header {
  padding-block: 35px;

  .nav-icon {
    width: 38px;
    height: 24px;
    position: relative;
    cursor: pointer;

    span {
      background-color: var(--main-red);
      position: absolute;
      height: 3px;
      width: 100%;
      border-radius: 2px;
      transition: all 0.3s ease-in-out;

      &:nth-child(1) {
        top: 0;
      }

      &:nth-child(2) {
        top: 10px;
      }

      &:nth-child(3) {
        top: 20px;
      }
    }
  }

  .main-menu {
    display: none;
    border: 3px solid var(--main-red);
    border-radius: 27px;
    margin-top: 15px;

    li {
      border-bottom: 3px solid var(--main-red);
      &:last-child {
        border-bottom: 0;
      }

      a {
        display: inline-block;
        width: 137px;
        font-size: 1.125rem;
        font-family: 'Futura PT Medium', Arial, sans-serif;
        color: var(--main-red);
        text-decoration: none;
        padding: 15px 22px;
        background-color: #FFFFFF;
        transition: background-color 0.3s ease-in-out;

        &:hover {
          background-color: var(--main-green);
        }
      }
    }
  }
}

.top-bar {
  background-color: var(--main-green);
  color: var(--main-red);
  font-size: 1.25rem;
  text-align: center;
  font-family: 'Futura PT Medium', Arial, sans-serif;
  overflow: hidden;

  .slick-container {
    width: 1920px;
  }

  .slick-slide {
    white-space: nowrap;
    margin: 0 15px;
    line-height: 40px;
  }
}

.site-footer {
  padding-top: 24px;
  padding-bottom: 32px;
  background-color: var(--main-green);
  border-top: 1px solid #000000;

  .footer-heading {
    font-family: "Instrument Serif", serif;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 12px;
    letter-spacing: -.48px;
  }

  .footer-wrapper {
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: -0.54px;
  }

  .left-part {
    .footer-wrapper {
      font-size: 1.5rem;
      width: 100%;
      max-width: 180px;
      line-height: 1.4;
      letter-spacing: -0.72px;
    }
  }

  .footer-newsletter {
    width: 100%;
    max-width: 550px;
    border-bottom: 1px solid #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    #email {
      width: 100%;
      font-family: 'Instrument Serif', serif;
      font-size: 5rem;
      font-weight: 400;
      line-height: 1.2;
      color: var(--font-color);

      &::placeholder {
        color: var(--font-color);
        opacity: 1;
      }

      @media (width < 480px) {
        font-size: 2rem;
      }
    }

    input[type="submit"] {
      background-color: transparent;
      outline: none;
      border: none;
      background-image: url('imgs/arrow.png');
      cursor: pointer;
      padding: 0;
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      max-width: 80px;
      height: 48px;
      text-indent: -9999rem;
      transition: transform 0.3s ease-in-out;

      &:hover {
        transform: translateX(5px);
      }

      @media (width < 480px) {
        max-width: 30px;
        height: 16px;
      }
    }
  }

  #copyright {
    font-size: 1rem;
  }
}

.container {
  width: 100%;
  max-width: 1346px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-template-page-home {
  background-color: var(--main-pink);

  .image-container {
    min-height: 1050px;
    @media (width >= 1024px) {
      min-height: 1120px;
    }
  }

  .homepage-image {
    position: absolute;
    will-change: transform;
  }

  #fresh-chunky-cookies {
    position: relative;
    z-index: 19;
    width: 250px;

    @media (width >= 480px) {
      width: auto;
      left: 15%;
    }
  }

  #cookie_1 {
    z-index: 1;
    top: 150px;
    right: -10%;
    height: 200px;

    @media (width >= 480px) {
      height: auto;
    }

    @media (width >= 1024px) {
      top: 0;
      right: 5%;
    }
  }

  #gif-1-cookie {
    z-index: 10;
    height: 300px;
    top: 225px;
    right: 20%;

    @media (width >= 1024px) {
      top: 230px;
      height: 540px;
      right: 23%;
      transform: rotate(55deg);
    }
    
  }

  #cookie_2 {
    top: 500px;
    left: -10%;
    z-index: 5;
    height: 250px;

    @media (width >= 1024px) {
      height: auto;
      top: 412px;
      left: 9%;
    }
  }

  #gif-2-cookie {
    bottom: 0;
    left: 10%;

    @media (width >= 1024px) {
      left: 35%;
      z-index: 7;
      transform: rotate(-35deg);
    }
  }

  #cookie_3 {
    bottom: 200px;
    height: 250px;
    right: -10%;

    @media (width >= 1024px) {
      height: auto;
      bottom: 0;
      right: 10%;
      z-index: 5;
    }
  }
}

/* Stores Page */
.page-template-page-stores {
  background-color: var(--main-pink);
}

.stores-page {
  padding-top: 40px;
  padding-bottom: 100px;
  position: relative;
  overflow: hidden;
}

h2.store-name {
  font-family: 'Printvetica', Arial, sans-serif;
  font-size: 3rem;
  font-weight: normal;
  margin-bottom: 20px;
  color: var(--main-red);
  line-height: 1.1;
}

.store-info {
  max-width: 275px;
  font-size: 1.125rem;
  line-height: 1.4;
  margin-inline: auto;

  @media (width >= 1024px) {
    margin-inline: 0;
  }

}

.store-1 {
  .store-image-container {
    #rabbit {
      bottom: 0;
      right: 0;
      width: 150px;
      transform: translateY(300px);
      transition: all .2s ease-in-out;

      @media (width >= 1024px) {
        right: -38%;
        width: auto;
      }
    }
  }
}

.store-2 {
  #bird {
    top: 30%;
    left: 15%;
    z-index: 5;
  }

  .store-image-container {
    #fan {
      top: -10%;
      right: 0;
      width: 150px;
      
      @media (width >= 1024px) {
        right: -8%;
        width: auto;
      }
    }

    #camel {
      bottom: 0;
      width: 150px;
      left: 0;
      transition: all 2s ease-in-out;
      
      @media (width >= 1024px) {
        left: -20%;
        width: auto;
      }
    }
  }
}

.stores-decorations {
  margin-top: 60px;
  
  .decoration-cookie {
    @media (width >= 1024px) {
      top: -40%;
      left: 12%;
    }
  }

  .decoration-ball {
    margin-left: auto;
    right: 0;

    @media (width >= 1024px) {
      right: 15%;
    }
  }
}

.page-template-page-contact {
  background-color: var(--main-yellow);

  h1 {
    font-family: 'Printvetica', Arial, sans-serif;
    font-size: 3rem;
    color: var(--main-red);
    line-height: 1.1;
    margin-bottom: 20px;
  }

  .contact-form-wrapper {
    max-width: 350px;
    margin-inline: auto;

    @media (width >= 1024px) {
      margin-inline: 0;
    }

    .main-content {
      font-size: 1rem;
      line-height: 1.4;
    }

    p {
      margin-block: 30px;
    }

    form {
      font-size: 1rem;
      input {
        border: 1px solid #000000;
        border-radius: 15px;
        line-height: 30px;
        margin-top: 8px;
        padding: 0 20px;
      }

      textarea {
        border: 1px solid #000000;
        border-radius: 15px;
        margin-top: 8px;
        padding: 20px;
      }

      input[type="submit"] {
        color: var(--main-red);
        border: none;
        border-radius: 50px;
        padding: 10px 30px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
        border: 2px solid var(--main-red);
        font-family: 'Printvetica', Arial, sans-serif;
        font-size: 22px;
        text-align: center;
        max-width: 150px;
        white-space: wrap;
        line-height: 1.1;

        &:hover {
          background-color: var(--main-red);
          color: #FFFFFF;
        }
      }
    }
  }
}

.page-template-page-about {
  background-color: var(--main-yellow);

  .about-layout {
    h2 {
      font-family: 'Printvetica', Arial, sans-serif;
      font-size: 2rem;
      color: var(--main-red);
      line-height: 1.1;
      margin-bottom: 20px;
    }
    .main-content {
      font-size: 1rem;
      line-height: 1.4;
    }
  }

  .first-section {
    .main-content {
      width: 100%;
      max-width: 390px;
      margin-inline: auto;

      @media (width >= 1024px) {
        margin-inline: 0;
      }
    }

    .about-image {
      display: flex;
      justify-content: center;

      @media (width >= 1024px) {
        justify-content: flex-start;
      }
    }

    .decoration-heading {
      width: 100%;
      margin-bottom: 36px;
    }
  }

  .second-section {
    .main-content {
      width: 100%;
      max-width: 405px;
      margin-inline: auto;

      @media (width >= 1024px) {
        margin-inline: 0;
      }

      p {
        max-width: 260px;
      }
    }

    .about-image {
      display: flex;
      justify-content: center;

      @media (width >= 1024px) {
        justify-content: flex-end;
      }
    }

    .decoration-about-2 {
      z-index: 4;
    }

    .decoration-bird {
      z-index: 4;
      top: -25%;
      left: 0%;
      
      @media (width >= 480px) {
        left: 10%;
      }

      @media (width >= 1024px) {
        top: -45%;
        left: -60%;
      }
    }

    .decoration-cloud-1 {
      z-index: 3;
      top: 50%;
      left: 0%;

      @media (width >= 480px) {
        left: 20%;
        top: 40%;
      }
      
      @media (width >= 1024px) {
        left: -100%;
        top: 20%;
      }
    }

    .decoration-cloud-2 {
      bottom: 10%;
      z-index: 5;
      right: -25%;

      @media (width >= 480px) {
        right: 0%;
      }

      @media (width >= 1024px) {
        bottom: 20%;
        right: -75%;
      }
    }

    .decoration-logo {
      top: 34%;
      right: 0;
      z-index: 1;
      transform: rotate(-15deg);

      @media (width >= 480px) {
        right: 20%;
      }
      
      @media (width >= 1024px) {
        right: -35%;
      }
    }
  }

  .third-section {
    .about-content {
      margin-inline: auto;
      margin-top: 100px;
      
      @media (width >= 1024px) {
        margin-top: 160px;
        margin-inline: 0;
      }
    }

    .about-image {
      display: flex;
      justify-content: center;

      @media (width >= 1024px) {
        justify-content: flex-start;
      }
    }

    .main-content {
      width: 100%;
      max-width: 385px;

      p {
        max-width: 280px;
      }
    }
  }

  .forth-section {
    padding-bottom: 100px;

    .main-content {
      width: 100%;
      max-width: 430px;
      margin-inline: auto;

      @media (width >= 1024px) {
        margin-inline: 0;
      }

      p {
        max-width: 260px;
      }
    }

    .about-image {
      display: flex;
      justify-content: center;

      @media (width >= 1024px) {
        justify-content: flex-end;
      }
    }

    .decoration-swing {
      z-index: 2;
    }
    
    .decoration-key {
      left: -35%;
      bottom: 10%;
      z-index: 1;
    }
  }
}