@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

@import "../../common/style/reset.css";
@import "../../common/style/stdlayout.css";

@import "./component/site-header.css";
@import "./component/uber-menu.css";
@import "./component/site-header-scrolled-menu.css";
@import "./component/carousel.css";
@import "./component/card.css";
@import "./component/hero-banner.css";
@import "./component/button.css";
@import "./component/rating.css";
@import "./component/site-footer.css";
@import "./component/scrollfx.css";
@import "./component/faq.css";
@import "./component/breadcrumbs.css";

@font-face {

	font-family: "Adobe Handwriting";
	src:	url("../font/adobe-handwriting-ernie/adobe-handwriting-ernie.woff2") format("woff2"),
			url("../font/adobe-handwriting-ernie/adobe-handwriting-ernie.woff") format("woff"),
			url("../font/adobe-handwriting-ernie/adobe-handwriting-ernie.ttf") format("truetype");

	font-weight: normal;
	font-style: normal;
}

:root {

	--color-blue: #2B2D42;
	--color-beige: #BFA67A;
	--color-cream: #F7F7F7;
	--color-gray: #DDD;
	--color-black: #222;

	--font-size-n: 0.8rem;
	--font-size-s: 1rem;
	--font-size-m: 1.25rem;
	--font-size-l: 2.75rem;
	--font-size-x: 4rem;

	--time-n: .2s;
	--time-s: .4s;
}

/*
------------------------------------------------------------------------------------------------------------------------
Util.
*/

.separator { margin-right: auto; }

@media screen and (max-width: 60rem) { .hide-on-mobile, .site-header a.hide-on-mobile { display: none; } }
@media screen and (min-width: 80rem) { .hide-on-desktop { display: none; } }

/*
------------------------------------------------------------------------------------------------------------------------
Surface.
*/

.surf-blue {

	color: var(--color-cream);
	background: var(--color-blue);
}

.surf-beige {

	color: var(--color-black);
	background: var(--color-beige);
}

.surf-cream {

	color: var(--color-black);
	background: var(--color-cream);
}

.surf-gray {

	color: var(--color-black);
	background: var(--color-gray);
}

/*
------------------------------------------------------------------------------------------------------------------------
Typography.
*/

body {

	font-family: "Mona Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	font-size: var(--font-size-m);
	line-height: 1.25;
}

h1, .h1 {

	font-size: var(--font-size-x);
	font-weight: normal;
	line-height: 1;
}

h2, .h2 {

	font-size: var(--font-size-l);
	font-weight: 600;
}

h3, .h3 {

	font-size: var(--font-size-m);
	font-weight: 600;
}

.heading--fancy {

	color: var(--color-beige);

	font-family: "Adobe Handwriting", cursive;
	font-weight: normal;
	font-style: normal;
	font-size: 2rem;
}

a { text-decoration: none; }

small { font-size: var(--font-size-n); }

.align-text-center { text-align: center; }

.prose-image { border-radius: var(--space-s); }

.fg--beige { color: var(--color-beige); }

.bullet-list > li {
	
	list-style-type: circle;
}

/*
------------------------------------------------------------------------------------------------------------------------
Flipper.
*/

.flipper {

	animation: anim-special-offer-flip 6s infinite ease-in-out;
	perspective: 1024px;
	transform-style: preserve-3d;

	position: relative;

	width: 256px;
	height: 256px;
}

.flipper > * {

	backface-visibility: hidden;

	position: absolute;
	left: 0;
	top: 0;
}

.flipper > :first-child { transform: rotateY(0deg); }
.flipper > :nth-child(2) { transform: rotateY(180deg); }


/*
------------------------------------------------------------------------------------------------------------------------
scrollfx
*/

/* slide */

.scrollfx--slide-from-left,
.scrollfx--slide-from-right {

	opacity: 0;

	transition:	opacity var(--time-s) ease-in-out,
				transform var(--time-s) ease-in-out;
}

.scrollfx--slide-from-left { transform: translateX(-25%); }
.scrollfx--slide-from-right { transform: translateX(25%); }

.scrollfx--slide-from-left.scrollfx-on,
.scrollfx--slide-from-right.scrollfx-on {

	opacity: 1;
	transform: translateX(0);
}

/* pop */

@keyframes scrollfx-pop {

	0% { transform: scale(1); }
	50% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

.scrollfx--pop.scrollfx-on {

	animation: scrollfx-pop var(--time-s) ease-in-out;
}

@keyframes anim-special-offer-flip {

	0%, 35% { transform: rotateY(0deg); }
	45%, 85% { transform: rotateY(180deg); }
	100% { transform: rotateY(360deg); }
}