/* Theme Name: JNDL Theme URI: https://www.pixouls.com/ Author: Pixouls Author URI: https://www.pixouls.com/ Description: Custom website for Jaindl Farms. Version: 5.0.0 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: basics Tags: */ /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $RESET --------------------------------------------------------| --------------------------------------------------------| */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } ::-moz-selection { color: var(--c-fog); background-color: var(--c-sec); text-shadow: none; } ::selection { color: var(--c-fog); background-color: var(--c-sec); text-shadow: none; } audio, canvas, iframe, img, svg, video { max-width: 100%; vertical-align: middle; } button { background-color: transparent; border: none; margin: 0; padding: 0; text-align: inherit; font: inherit; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } hr { display: block; height: .2rem; border: 0; border-top: .2rem solid var(--c-10); margin: 4.0rem 0; padding: 0;} code { line-height: 1.5; color: var(--c-75); } [id] { scroll-margin-top: 13.6rem; } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $GLOBAL --------------------------------------------------------| --------------------------------------------------------| */ :root { /* Width */ --w-xs: min(70%, 51.2rem); --w-sm: min(70%, 76.8rem); --w-md: min(80%, 89.6rem); --w-lg: min(90%, 115.2rem); --w-xl: min(100%, 140.8rem); /* Spacing */ --s-xs: .8rem; --s-sm: 1.6rem; --s-md: 2.4rem; --s-lg: 4.0rem; --s-xl: 8.0rem; /* Color - Brand */ --c-pri: #be8c00; --c-sec: #dcaa1e; /* Color - Utilities */ --c-cool-december: #fefefd; --c-white-crest: #fafaf0; --c-glisten-green: #f0f0dc; --c-fog: #142832; --c-black-feather: #0a1e28; --c-winning-ticket: #646450; --c-cannon-ball: #464632; --c-smokey-slate: #a0a08c; --c-goldenrod: #be8c00; --c-olive: #648246; --c-denim: #14506e; --c-tawny: #b45014; /* Color - Light/Dark */ --c-bd: rgba(10, 30, 40, 0.9); --c-75: light-dark(rgba(0, 0, 0, .75), rgba(255, 255, 255, .75)); --c-50: light-dark(rgba(0, 0, 0, .50), rgba(255, 255, 255, .50)); --c-25: light-dark(rgba(0, 0, 0, .25), rgba(255, 255, 255, .25)); --c-10: light-dark(rgba(0, 0, 0, .10), rgba(255, 255, 255, .10)); --c-05: light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05)); } [data-theme="goldenrod"] { --c-pri: #be8c00; --c-sec: #dcaa1e; } [data-theme="olive"] { --c-pri: #648246; --c-sec: #82a064; } [data-theme="denim"] { --c-pri: #14506e; --c-sec: #326e8c; } [data-theme="tawny"] { --c-pri: #b45014; --c-sec: #d26e32; } html { -webkit-tap-highlight-color: transparent; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; -ms-overflow-style: -ms-autohiding-scrollbar; scroll-behavior: smooth; font-family: "objektiv-mk2", sans-serif; font-weight: 400; font-style: normal; font-size: 10px; } body { background: var(--c-pri); margin: 0; min-height: 100vh; color: var(--c-fog); font-size: 1.6rem; line-height: 1; } .app { position: relative; background: var(--c-white-crest); } @media only screen and (max-width: 768px) { html { font-size: 9px; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $VIEW-TRANSITIONS --------------------------------------------------------| --------------------------------------------------------| */ @view-transition { navigation: auto; } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $TYPE --------------------------------------------------------| --------------------------------------------------------| */ .adobe-caslon-pro { font-family: "adobe-caslon-pro", serif; font-weight: 700; font-style: normal; } .objektiv-mk2-italic { font-family: "objektiv-mk2", sans-serif; font-weight: 400; font-style: italic; } .objektiv-mk2-regular { font-family: "objektiv-mk2", sans-serif; font-weight: 400; font-style: normal; } .objektiv-mk2-medium { font-family: "objektiv-mk2", sans-serif; font-weight: 500; font-style: normal; } .objektiv-mk2-medium-italic { font-family: "objektiv-mk2", sans-serif; font-weight: 500; font-style: italic; } .objektiv-mk2-bold { font-family: "objektiv-mk2", sans-serif; font-weight: 700; font-style: normal; } .objektiv-mk2-bold-italic { font-family: "objektiv-mk2", sans-serif; font-weight: 700; font-style: italic; } .trailmade-regular { font-family: "trailmade", script; font-weight: 400; font-style: normal; } h1, h2, h3, h4, h5 { font-family: "adobe-caslon-pro", serif; font-weight: 700; font-style: normal; margin: 4.8rem 0 2.4rem; line-height: 1.25; text-wrap: pretty; } h1 { font-size: 4.8rem; } h2 { font-size: 4.4rem; } h3 { font-size: 2.8rem; } h4 { font-size: 2.4rem; line-height: 1.5; } h5 { font-size: 1.6rem; font-family: "objektiv-mk2", sans-serif; font-weight: 500; font-style: normal; } p { line-height: 2; margin: 0 0 1.6rem; text-wrap: pretty; color: var(--c-cannon-ball); } b, strong { font-weight: 700; } a { color: var(--c-pri); text-decoration: none; -webkit-transition: color .15s linear; -o-transition: color .15s linear; transition: color .15s linear; } /* a:link { color: var(--c-pri); } a:visited { color: var(--c-pri); } a:hover { color: var(--c-pri); } a:active { color: var(--c-pri); } */ /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $ANIMATIONS --------------------------------------------------------| --------------------------------------------------------| */ @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SKIP-LINK --------------------------------------------------------| --------------------------------------------------------| */ .skip-link { /* Visually hidden off-screen */ position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; /* Ensure it's still in the document flow for screen readers */ clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Make it clearly visible when focused (e.g. with Tab) */ .skip-link:focus { left: auto; width: auto; height: 3.2rem; padding: 0 1.6rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; clip: auto; overflow: visible; /* Some visual styling for clarity */ background: var(--c-pri); color: var(--c-white-crest); font-size: 1.4rem; text-decoration: none; z-index: 10000; /* Ensures it's on top */ } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $HEADER --------------------------------------------------------| --------------------------------------------------------| */ .hdr { z-index: 900; position: sticky; top: 0; background: var(--c-fog); } .hdr__outer { background: var(--c-fog); } .hdr__inner { width: var(--w-lg); height: 10.4rem; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4.0rem; } .hdr__logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: auto; } img.hdr__logo-img { height: 7.2rem; width: auto; } /* .hdr__search { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; margin-left: auto; padding-left: 1.6rem; } .hdr__search-icon { width: 1.6rem; height: auto; fill: var(--c-pri); } */ .hdr__nav-toggle { display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .hdr__nav-toggle-icon { position: relative; width: 3.2rem; height: 3.2rem; margin: auto; } .hdr__nav-toggle-icon-rect { fill: var(--c-pri); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transition: fill .15s linear, opacity .15s linear, -webkit-transform .3s ease; transition: fill .15s linear, opacity .15s linear, -webkit-transform .3s ease; -o-transition: transform .3s ease, fill .15s linear, opacity .15s linear; transition: transform .3s ease, fill .15s linear, opacity .15s linear; transition: transform .3s ease, fill .15s linear, opacity .15s linear, -webkit-transform .3s ease; } .hdr__nav-toggle--open .hdr__nav-toggle-icon-rect--top { -webkit-transform: rotate(225deg) translateY(8px); -ms-transform: rotate(225deg) translateY(8px); transform: rotate(225deg) translateY(8px); } .hdr__nav-toggle--open .hdr__nav-toggle-icon-rect--mid { opacity: 0; } .hdr__nav-toggle--open .hdr__nav-toggle-icon-rect--bot { -webkit-transform: rotate(-225deg) translateY(-8px); -ms-transform: rotate(-225deg) translateY(-8px); transform: rotate(-225deg) translateY(-8px); } @media only screen and (max-width: 1024px) { .hdr__nav-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; outline: none; } } @media only screen and (max-width: 768px) { .hdr__inner { height: 8.0rem; } img.hdr__logo-img { height: 6.4rem; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $NAV --------------------------------------------------------| --------------------------------------------------------| */ .nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; height: 100%; } .secondary-nav__list { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.2rem; } .secondary-nav__item { } .secondary-nav__link { color: var(--c-smokey-slate); display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 1.6rem; border-right: .1rem solid var(--c-smokey-slate); } .secondary-nav__link:hover, .secondary-nav__link:focus { color: var(--c-white-crest); } .secondary-nav__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding: 1.6rem .8rem; position: relative; color: var(--c-pri); -webkit-transition: color .15s linear; -o-transition: color .15s linear; transition: color .15s linear; } .secondary-nav__icon:hover, .secondary-nav__icon:focus { color: var(--c-sec); } .secondary-nav__icon--search { padding-left: 1.6rem; } .secondary-nav__icon-svg { width: auto; height: 1.6rem; fill: currentColor; } .secondary-nav__icon-count { position: absolute; top: .4rem; right: -.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem; font-size: 1rem; line-height: 1; font-weight: 700; color: var(--c-white-crest); background-color: var(--c-olive); border-radius: 50%; } .nav__list { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3.2rem; } .nav__item { } .nav__item--active { } .nav__link, .nav__button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; line-height: 1; padding: .8rem 0.4rem 2.8rem; color: var(--c-white-crest); -webkit-transition: color .15s linear; -o-transition: color .15s linear; transition: color .15s linear; } .nav__link:hover, .nav__link:focus, .nav__button:hover, .nav__button:focus { color: var(--c-pri); } .nav__button::after, .nav__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: .4rem; background: var(--c-pri); -webkit-transform-origin: center right; -ms-transform-origin: center right; transform-origin: center right; -webkit-transform: scale3d(0,1,1); transform: scale3d(0,1,1); -webkit-transition: background-color 0.3s ease, -webkit-transform .6s cubic-bezier(.19,1,.22,1); transition: background-color 0.3s ease, -webkit-transform .6s cubic-bezier(.19,1,.22,1); -o-transition: transform .6s cubic-bezier(.19,1,.22,1), background-color 0.3s ease; transition: transform .6s cubic-bezier(.19,1,.22,1), background-color 0.3s ease; transition: transform .6s cubic-bezier(.19,1,.22,1), background-color 0.3s ease, -webkit-transform .6s cubic-bezier(.19,1,.22,1); } .nav__item--active .nav__button::after, .nav__item--active .nav__link::after, .nav__button:hover::after, .nav__link:hover::after, .nav__button[aria-expanded="true"]::after { -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } .nav__item--active .nav__button::after, .nav__item--active .nav__link::after { background: var(--c-smokey-slate); } .nav__button:hover::after, .nav__link:hover::after, .nav__button[aria-expanded="true"]::after { background: var(--c-pri); } .nav__button-text { } .nav__button-icon { width: 1.2rem; height: 1.2rem; fill: currentColor; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .nav__button[aria-expanded="true"] .nav__button-icon { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .nav__sub { position: absolute; top: 100%; left: 0; width: 100%; background: var(--c-black-feather); -webkit-box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.1); box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.1); -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%); z-index: -1; /* opacity: 0; */ visibility: hidden; -webkit-transition: opacity 0.3s ease, visibility 0.3s linear, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s linear, -webkit-transform 0.3s ease; -o-transition: opacity 0.3s ease, visibility 0.3s linear, transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s linear, transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s linear, transform 0.3s ease, -webkit-transform 0.3s ease; } .nav__sub[hidden] { display: block; } .nav__button[aria-expanded="true"] + .nav__sub { opacity: 1; visibility: visible; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .nav__sub::before { content: ''; position: absolute; top: -0.8rem; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-bottom: 0.8rem solid var(--c-fog); display: none; } .nav__sub::after { content: ''; position: absolute; top: -1.6rem; left: 0; width: 100%; height: 1.6rem; } .nav__sub-inner { padding: 1.6rem; } .nav__sub-inner--grid { min-width: 48rem; display: -ms-grid; display: grid; -ms-grid-columns: 2fr 2.4rem 1fr; grid-template-columns: 2fr 1fr; gap: 2.4rem; } /* Sub List */ .nav__sub-list { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .nav__sub-item { } .nav__sub-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; gap: 0.8rem; width: 14.4rem; height: 100%; padding: 1.6rem .8rem; font-size: 1.2rem; line-height: 1.5; color: var(--c-smokey-slate); /* transition: background-color 0.15s linear; */ } .nav__sub-link:hover, .nav__sub-link:focus { color: var(--c-white-crest); background: var(--c-fog); } img.nav__sub-link-icon { height: 6.4rem; width: auto; -webkit-filter: brightness(0) saturate(100%) invert(83%) sepia(3%) saturate(2072%) hue-rotate(22deg) brightness(83%) contrast(63%); filter: brightness(0) saturate(100%) invert(83%) sepia(3%) saturate(2072%) hue-rotate(22deg) brightness(83%) contrast(63%); } .nav__sub-link:hover img.nav__sub-link-icon, .nav__sub-link:focus img.nav__sub-link-icon { -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(63%) saturate(249%) hue-rotate(337deg) brightness(106%) contrast(96%); filter: brightness(0) saturate(100%) invert(100%) sepia(63%) saturate(249%) hue-rotate(337deg) brightness(106%) contrast(96%); } /* Sub Group */ .nav__sub-group { list-style: none; margin: 0; padding: 0; } .nav__sub-group-item:not(:last-child) { border-bottom: 0.2rem dotted var(--c-black-feather); } .nav__sub-group-link { padding: 1.6rem; display: block; -webkit-transition: background-color 0.15s linear; -o-transition: background-color 0.15s linear; transition: background-color 0.15s linear; } .nav__sub-group-link:hover, .nav__sub-group-link:focus { background: var(--c-black-feather); border-radius: 0.4rem; } .nav__sub-group-heading { display: block; font-size: 1.4rem; font-weight: 700; color: var(--c-pri); margin-bottom: 0.8rem; } .nav__sub-group-text { font-size: 1.2rem; line-height: 1.5; color: var(--c-smokey-slate); margin: 0; } /* Sub Social */ .nav__sub-social { list-style: none; margin: 0; padding: 1.6rem; } .nav__sub-social-item:not(:last-child) { margin-bottom: .8rem; } .nav__sub-social-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; padding: 0.8rem; border-radius: 0.4rem; -webkit-transition: background-color 0.15s linear; -o-transition: background-color 0.15s linear; transition: background-color 0.15s linear; } .nav__sub-social-link:hover { background: var(--c-black-feather); } .nav__sub-social-icon { width: 1.6rem; height: 1.6rem; fill: var(--c-pri); } .nav__sub-social-text { font-size: 1.2rem; } @media only screen and (max-width: 1024px) { .nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* background-color: var(--c-bd); backdrop-filter: saturate(180%) blur(1.6rem); */ background: var(--c-fog); -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.86,0,0.07,1); transition: -webkit-transform 0.6s cubic-bezier(0.86,0,0.07,1); -o-transition: transform 0.6s cubic-bezier(0.86,0,0.07,1); transition: transform 0.6s cubic-bezier(0.86,0,0.07,1); transition: transform 0.6s cubic-bezier(0.86,0,0.07,1), -webkit-transform 0.6s cubic-bezier(0.86,0,0.07,1); overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 8.0rem 0; } .nav--open { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .nav__list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; padding: 4.0rem 4.0rem 8.0rem; gap: 0; } .nav__item { width: 100%; border-bottom: 0.4rem solid var(--c-10); } .nav__item::after { display: none; } .nav__link, .nav__button { width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 2.4rem; padding: 3.2rem .4rem; outline: none; } .nav__item--active .nav__button::after { background: transparent; } .nav__button:hover::after, .nav__button[aria-expanded="true"]::after { background: var(--c-pri); } .nav__button-icon { width: 2.4rem; height: 2.4rem; } .nav__sub { position: static; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; margin-top: 0; background: transparent; } .nav__sub[hidden] { display: none; } .nav__button[aria-expanded="true"] + .nav__sub { -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); } .nav__sub::before, .nav__sub::after { display: none; } .nav__sub-inner { width: 100%; padding: 1.6rem 0 2.4rem; } .nav__sub-inner--grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } /* Sub List */ .nav__sub-list { display: -ms-grid; display: grid; -ms-grid-columns: 1fr .8rem 1fr; grid-template-columns: repeat(2, 1fr); gap: .8rem; } .nav__sub-link { padding: 2.4rem; width: 100%; background: var(--c-black-feather); } .nav__sub-link:hover, .nav__sub-link:focus { background: var(--c-black-feather); } /* Sub Group */ .nav__sub-group { padding: 0; } .nav__sub-group-heading { font-size: 1.8rem; } .nav__sub-group-text { font-size: 1.4rem; } /* Sub Social */ .nav__sub-social { padding: 0; } .nav__sub-social-link { padding: 1.2rem; } .nav__sub-social-icon { width: 2.4rem; height: 2.4rem; } .nav__sub-social-text { font-size: 1.6rem; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $MAIN --------------------------------------------------------| --------------------------------------------------------| */ .main { position: relative; } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $BC --------------------------------------------------------| --------------------------------------------------------| */ .bc { background-color: var(--c-glisten-green); padding: 1.6rem 0; } .bc__inner { position: relative; width: var(--w-lg); margin-inline: auto; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.8rem; font-size: 1.2rem; line-height: 1; } .bc__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; color: var(--c-winning-ticket); } .bc__link--current { color: var(--c-cannon-ball); } .bc__arrow { width: 1.2rem; height: 1.2rem; fill: currentColor; } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $HERO --------------------------------------------------------| --------------------------------------------------------| */ .hero { position: relative; padding: 3.2rem 3.2rem 10.4rem; } .hero--secondary { padding-bottom: 3.2rem; } .hero__media { height: 70.4rem; } .hero__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hero__content { position: relative; background: var(--c-fog); color: var(--c-white-crest); padding: 6.4rem 8.0rem; width: var(--w-sm); margin-inline: auto; text-align: center; margin-top: -36.8rem; } .hero--secondary .hero__content { margin-top: 0; width: auto; overflow: clip; } .hero__watermark { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-5deg); -ms-transform: translate(-50%, -50%) rotate(-5deg); transform: translate(-50%, -50%) rotate(-5deg); font-family: "trailmade", script; font-weight: 400; font-style: normal; font-size: 25.6rem; opacity: .03; white-space: nowrap; pointer-events: none; } .hero__ol { position: relative; margin-top: 0; color: var(--c-pri); } .hero__hl { position: relative; margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; } .hero--secondary .hero__hl { margin-bottom: 0; } .hero__hl::after { content: ''; width: 6.4rem; height: .6rem; background-color: var(--c-pri); } .hero__sl { margin-bottom: 4.8rem; color: var(--c-glisten-green); } .hero__cta-button.button { color: var(--c-fog); } .hero__cta-scroll { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--c-white-crest); } .hero__cta-scroll:hover { color: var(--c-pri); } .hero__cta-scroll-arrow { width: auto; height: 5.6rem; fill: currentColor; } @media only screen and (max-width: 768px) { .hero { padding: 0; } .hero__media { height: auto; } .hero__image { aspect-ratio: 16 / 9; } .hero__content { margin-top: 0; width: var(--w-xl); padding: 6.4rem 5%; } .hero__cta-button.button { white-space: normal; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $FEATURE --------------------------------------------------------| --------------------------------------------------------| */ .feature { position: relative; background: var(--c-white-crest); padding-block: 16.0rem; } .feature::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 33%; background: var(--c-glisten-green); } .feature--alt::before { inset: 0 0 0 auto; } .feature__inner { position: relative; width: var(--w-lg); margin-inline: auto; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6.4rem; } .feature--alt .feature__inner { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .feature__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-block: 5.6rem; } .feature__ol { margin-top: 0; color: var(--c-winning-ticket); } .feature__hl { margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; } .feature__hl::after { content: ''; width: 6.4rem; height: .6rem; background-color: var(--c-pri); } .feature__wysiwyg { } .feature__cta.button { margin-top: 5.6rem; } .feature__media { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .feature__image { width: 100%; height: auto; } @media only screen and (max-width: 768px) { .feature::before { top: auto; width: 50%; aspect-ratio: 1 / 2.75; } .feature__inner { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .feature--alt .feature__inner { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .feature__content, .feature__media { width: 100%; max-width: 56rem; margin-inline: auto; } .feature__content { padding-block: 0; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $HIGHLIGHT --------------------------------------------------------| --------------------------------------------------------| */ .highlight { position: relative; background: var(--c-fog); color: var(--c-white-crest); padding-block: 12.8rem; overflow: clip; } .highlight__watermark { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-5deg); -ms-transform: translate(-50%, -50%) rotate(-5deg); transform: translate(-50%, -50%) rotate(-5deg); font-family: "trailmade", script; font-weight: 400; font-style: normal; font-size: 25.6rem; opacity: .03; white-space: nowrap; pointer-events: none; } .highlight__inner { position: relative; width: var(--w-sm); margin-inline: auto; padding: 11.2rem 6.4rem; border: .3rem solid var(--c-pri); text-align: center; } .highlight__hl { margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; } .highlight__hl::after { content: ''; width: 6.4rem; height: .6rem; background-color: var(--c-pri); } .highlight__sl { padding-bottom: 5.6rem; color: var(--c-glisten-green); } .highlight__cta.button { color: var(--c-fog); } @media only screen and (max-width: 768px) { .highlight { } .highlight__inner { width: var(--w-lg); padding: 6.4rem 2.4rem; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $VIDEO --------------------------------------------------------| --------------------------------------------------------| */ .video { position: relative; background: var(--c-fog); color: var(--c-white-crest); padding-block: 12.8rem; overflow: clip; } .video__header { width: var(--w-sm); margin-inline: auto; text-align: center; } .video__ol { position: relative; margin-top: 0; color: var(--c-pri); } .video__hl { margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; } .video__hl::after { content: ''; width: 6.4rem; height: .6rem; background-color: var(--c-pri); } .video__sl { color: var(--c-glisten-green); } .video__content { cursor: pointer; position: relative; width: var(--w-md); margin-inline: auto; margin-top: 4.8rem; } .video__trigger { pointer-events: none; position: absolute; inset: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: opacity .3s ease, visibility .3s ease; -o-transition: opacity .3s ease, visibility .3s ease; transition: opacity .3s ease, visibility .3s ease; } .video__trigger .vim--bg { pointer-events: none; } .video__play-icon { position: relative; width: 10.4rem; height: 10.4rem; } .video__loading-icon { display: none; width: 104px; height: 104px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; fill: currentColor; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media only screen and (max-width: 768px) { .video__header, .video__content { width: var(--w-lg); } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $EDITORIAL --------------------------------------------------------| --------------------------------------------------------| */ .editorial { position: relative; background: var(--c-white-crest); margin-block: 12.8rem; width: var(--w-sm); margin-inline: auto; } .editorial:first-child { margin-top: 6.4rem; } .editorial :first-child { margin-top: 0; } .editorial h5:first-child + h2 { margin-top: 0; } .editorial #hours, .editorial #retail-partners { scroll-margin-top: 23.2rem; } @media only screen and (max-width: 768px) { .editorial { width: var(--w-lg); } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $NEWS --------------------------------------------------------| --------------------------------------------------------| */ .news { position: relative; background: var(--c-white-crest); margin-block: 12.8rem; width: var(--w-md); margin-inline: auto; } .news:first-child { margin-top: 6.4rem; } .news__grid { margin-inline: auto; display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fit, minmax(24.8rem, 1fr)); gap: 2.4rem; } .news__bookmark { -ms-grid-column-span: 1; grid-column: span 1; background: var(--c-fog); color: var(--c-white-crest); text-align: center; position: relative; min-height: 32rem; } .news__bookmark::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2.4rem; background-image: url('data:image/svg+xml;utf8,'); background-size: 100% 100%; } .news__bookmark-inner { padding: 4.0rem 2.4rem; margin: .8rem; border-left: .1rem dashed var(--c-winning-ticket); border-right: .1rem dashed var(--c-winning-ticket); } .news__bookmark-title { font-size: 2.4rem; margin: 0; } .news__bookmark-title::after { content: ''; display: block; width: 4.8rem; height: .2rem; background: var(--c-pri); margin: 1.6rem auto; } .news__bookmark-text { color: var(--c-smokey-slate); margin-top: 1.6rem; font-size: 1.4rem; line-height: 1.5; } .news__bookmark-link { color: var(--c-pri); font-size: 1.4rem; } /* News items */ .news__item { -ms-grid-column-span: 1; grid-column: span 1; text-decoration: none; padding: 3.2rem; background: var(--c-cool-december); -webkit-transition: all .4s cubic-bezier(.19,1,.22,1); -o-transition: all .4s cubic-bezier(.19,1,.22,1); transition: all .4s cubic-bezier(.19,1,.22,1); position: relative; border: .1rem solid var(--c-glisten-green); border-top: 0.3rem solid var(--c-sec); } .news__item:hover { background: var(--c-pri); -webkit-transform: translateY(-0.4rem); -ms-transform: translateY(-0.4rem); transform: translateY(-0.4rem); -webkit-box-shadow: rgb(0 0 0 / 50%) 0 2rem 3rem -1rem; box-shadow: rgb(0 0 0 / 50%) 0 2rem 3rem -1rem; border-color: var(--c-pri); border-top-color: var(--c-sec); } .news__article { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; height: 100%; } .news__date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.2rem; } .news__date-text { font-size: 1.2rem; color: var(--c-pri); font-weight: 500; } .news__item:hover .news__date-text { color: var(--c-white-crest); } .news__title { font-size: 2.4rem; margin: 0; color: var(--c-fog); } .news__item:hover .news__title { color: var(--c-white-crest); } .news__image-wrapper { margin-inline: -.8rem; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .news__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: .8rem; border: .1rem solid var(--c-glisten-green); } .news__source { font-size: 1.2rem; color: var(--c-winning-ticket); margin-top: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; } .news__item:hover .news__source { color: var(--c-white-crest); } .news__source-icon { width: 1.6rem; height: 1.6rem; fill: var(--c-white-crest); opacity: 0; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } .news__item:hover .news__source-icon { opacity: 1; } @media only screen and (max-width: 768px) { .news { width: var(--w-lg); } .news__grid { gap: 2.4rem; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SHOP-WOO --------------------------------------------------------| --------------------------------------------------------| */ /* Woo Checkout */ .app .is-large .wc-block-checkout__sidebar { top: 16.8rem; } /* Woo My Account */ .woocommerce-account .woocommerce-MyAccount-navigation { background: var(--c-glisten-green); padding: 4.0rem; width: 30%; border-radius: .8rem; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-MyAccount-navigation ul li { margin-bottom: 1.6rem; } .woocommerce-MyAccount-navigation ul li a { } .woocommerce-account .woocommerce-MyAccount-content { width: 70%; padding-left: 6.4rem; } @media only screen and (max-width: 768px) { .woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; margin-bottom: 4.0rem; } .woocommerce-account .woocommerce-MyAccount-content { padding-left: 0; } } /* Woo Notices */ .woocommerce-notices-wrapper { } .woocommerce-error, .woocommerce-info, .woocommerce-message { outline: none; background: var(--c-glisten-green); color: var(--c-fog); } .woocommerce-message { border-top-color: var(--c-olive); } .woocommerce-message::before { color: var(--c-olive); } .woocommerce-error { } .woocommerce-error::before { } .woocommerce-info { border-top-color: var(--c-denim); } .woocommerce-info::before { color: var(--c-denim); } /* Woo Shop Archive */ .woocommerce .products ul li, .woocommerce ul.products li { text-align: center; } .woocommerce ul.products li.product .button { display: none; } .woocommerce ul.products li.product a { border-radius: .8rem; padding: .8rem; border: 1px solid transparent; -webkit-transition: border-color .15s linear, background .15s linear; -o-transition: border-color .15s linear, background .15s linear; transition: border-color .15s linear, background .15s linear; } .woocommerce ul.products li.product a:hover { border-color: var(--c-pri); background: -o-radial-gradient(circle,rgba(254, 254, 253, 1) 0%, rgba(240, 240, 220, 1) 100%); background: radial-gradient(circle,rgba(254, 254, 253, 1) 0%, rgba(240, 240, 220, 1) 100%); -webkit-box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, 0.1); box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, 0.1); } .woocommerce ul.products li.product .star-rating { margin-inline: auto; } .woocommerce .products ul li, .woocommerce ul.products li.post-943 .woocommerce-loop-product__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: .4rem; } .woocommerce .products ul li, .woocommerce ul.products li.post-943 .woocommerce-loop-product__title::after { content: '(Local Pickup Only)'; color: var(--c-black-feather); font-style: italic; font-size: .7em; } /* Woo Product Page */ .woocommerce div.product { } .woocommerce div.product::after { content: ""; display: table; /* or display: block; */ clear: both; } /* Gravity Forms */ .woocommerce div.product .gform_validation_errors { display: none; } /* Woo Product Gallery */ .woocommerce div.product div.images { margin-bottom: 4.8rem; padding-block: 4.8rem; } .woocommerce div.product div.images::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 66%; background: var(--c-glisten-green); } /* Variation Images */ .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { position: relative; } .woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder { border: none; } /* Woo Product Gallery Carousel */ .woocommerce div.product div.images .flex-control-thumbs { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: .8rem; padding: 0 15%; margin-top: 1.6rem; } .woocommerce div.product div.images .flex-control-thumbs li img { border-radius: .8rem; } /* Woo Product Gallery Lightbox */ .pswp__bg { background: rgba(20, 40, 50, 0.9); } .pswp__caption, .pswp__top-bar { background: transparent !important; } /* Woo Product Summary */ .woocommerce div.product div.summary { margin-bottom: 4.8rem; padding-block: 4.8rem; } body.postid-943 span.woocommerce-Price-amount.amount::after { /* Add Deposit to the price for pre-order turkey */ content: ' Deposit'; } .summary ul { line-height: 1.5; padding: 0; margin: 0 0 2.4rem; list-style: none; } .summary ul li { border-left: .1rem solid var(--c-pri); margin: 0; padding: .8rem 1.6rem .8rem 2.4rem; position: relative; } .summary ul li:before { content: ''; position: absolute; top: 2.0rem; left: 0; height: .1rem; width: 1.6rem; background: var(--c-pri); } .woocommerce-variation-add-to-cart { display: -webkit-box; display: -ms-flexbox; display: flex; } .product_meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.6rem; } .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { vertical-align: middle; text-align: left; } /* Woo Product Tabs */ .woocommerce div.product .woocommerce-tabs { width: var(--w-md); margin-inline: auto; } .woocommerce div.product .woocommerce-tabs ul.tabs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .woocommerce-tabs h2 { display: none; font-size: 2.8rem; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: 1px solid var(--c-pri); } .woocommerce div.product .woocommerce-tabs ul.tabs li { border: 1px solid var(--c-pri); background-color: var(--c-glisten-green); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--c-white-crest); border-bottom-color: var(--c-white-crest); } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce table.shop_attributes tr:nth-child(even) td, .woocommerce table.shop_attributes tr:nth-child(even) th { background: transparent; } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border-bottom: 1px solid var(--c-glisten-green); font-style: normal; } .woocommerce table.shop_attributes { border-top: 1px solid var(--c-glisten-green); } @media only screen and (max-width: 768px) { .woocommerce div.product .woocommerce-tabs { width: 100%; } } /* Woo Related Products */ .related { margin-top: 8.0rem; clear: both; } #product-943 .related { display: none; } .related > h2 { display: none; } .related h2 { font-size: 2.8rem; } /* Woo Buttons - Product page */ .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt { background-color: var(--c-pri) !important; color: var(--c-white-crest) !important; } .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover { background-color: var(--c-sec) !important; color: var(--c-white-crest) !important; } /* Woo Buttons - Banners, Product Grid, etc. */ .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button { background-color: var(--c-pri) !important; color: var(--c-white-crest) !important; } .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover { background-color: var(--c-sec) !important; color: var(--c-white-crest) !important; } /* Woo Buttons - Shop and Cart blocks */ .wp-element-button { background: var(--c-pri); color: var(--c-white-crest); } /* Woo item meta - cart, my account orders, etc. */ .wc-item-meta { } .wc-item-meta-label { line-height: 2; } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SHOP-SHIPPING-NOTICE --------------------------------------------------------| --------------------------------------------------------| */ .shop-shipping-notice { padding: 2.4rem; background: var(--c-glisten-green); border-radius: 2.4rem; margin-inline: auto; margin-block: 0; } .single-product .shop-shipping-notice { margin-bottom: 4.0rem; } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SHOP-HERO --------------------------------------------------------| --------------------------------------------------------| */ .shop-hero { position: relative; } .shop-hero__content { position: relative; background: transparent; color: var(--c-fog); padding: 9.6rem 0; margin-inline: auto; text-align: center; overflow: clip; } .shop-hero__watermark { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-5deg); -ms-transform: translate(-50%, -50%) rotate(-5deg); transform: translate(-50%, -50%) rotate(-5deg); font-family: "trailmade", script; font-weight: 400; font-style: normal; font-size: 25.6rem; color: var(--c-glisten-green); white-space: nowrap; pointer-events: none; } .shop-hero__ol { position: relative; margin-top: 0; color: var(--c-pri); display: -webkit-box; display: -ms-flexbox; display: flex; gap: .8rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .shop-hero__breadcrumb-arrow { width: 1.2rem; height: 1.2rem; fill: var(--c-winning-ticket); } .shop-hero__hl { position: relative; width: var(--w-md); margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; } .shop-hero__hl::after { content: ''; width: 6.4rem; height: .6rem; background-color: var(--c-pri); } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SHOP-CONTENT --------------------------------------------------------| --------------------------------------------------------| */ .shop-content { width: var(--w-lg); margin-inline: auto; padding-block: 4.8rem; line-height: 1.5; } .shop-content--single { padding-top: 0; } .shop-content--archive { width: var(--w-lg); font-size: 2.0rem; } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SHOP-CAROUSEL --------------------------------------------------------| --------------------------------------------------------| */ .shop-carousel { } .shop-carousel__swiper { width: var(--w-lg); margin-inline: auto; aspect-ratio: 21 / 9; } .shop-carousel__wrapper { } .shop-promo { position: relative; color: var(--c-white-crest); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; border-radius: 2.4rem; overflow: clip; } .shop-promo__img { position: absolute; inset: 0; background: center / cover no-repeat scroll; } .shop-promo__content { background: -o-linear-gradient(left, rgba(20, 40, 50, 1) 0%, rgba(20, 40, 50, 1) 30%, rgba(20, 40, 50, .25) 60%, rgba(20, 40, 50, 0) 100%); background: -webkit-gradient(linear, left top, right top, from(rgba(20, 40, 50, 1)), color-stop(30%, rgba(20, 40, 50, 1)), color-stop(60%, rgba(20, 40, 50, .25)), to(rgba(20, 40, 50, 0))); background: linear-gradient(to right, rgba(20, 40, 50, 1) 0%, rgba(20, 40, 50, 1) 30%, rgba(20, 40, 50, .25) 60%, rgba(20, 40, 50, 0) 100%); position: relative; z-index: 1; padding-inline: 10.4rem 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .shop-promo__hl { margin: 0 0 1.6rem; } .shop-promo__sl { margin: 0 0 2.4rem; color: var(--c-glisten-green); } .shop-promo__button.button { -ms-flex-item-align: start; align-self: flex-start; } @media only screen and (max-width: 1024px) { .shop-carousel__swiper { aspect-ratio: auto; } .shop-promo { height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .shop-promo__img { position: relative; aspect-ratio: 21/9; height: 20.0rem; } .shop-promo__content { background-color: var(--c-fog); padding: 4.8rem 2.4rem 6.4rem; text-align: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .shop-promo__hl { font-size: 4.0rem; } .shop-promo__button.button { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .shop-carousel .swiper-arr { top: 10.0rem; background-color: var(--c-pri); } .shop-carousel .swiper-arr .swiper-arr__arrow-icon { fill: var(--c-white-crest); } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SHOP-CAT-MENU --------------------------------------------------------| --------------------------------------------------------| */ .shop-cat-menu { width: var(--w-lg); margin-inline: auto; margin-block: 4.0rem; position: sticky; top: 13.6rem; background: var(--c-white-crest); z-index: 1; } .shop-cat-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: .4rem solid var(--c-glisten-green); list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .shop-cat-menu__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .shop-cat-menu__item a { color: var(--c-winning-ticket); padding: 2.4rem; border-top-left-radius: .8rem; border-top-right-radius: .8rem; -webkit-transition: all .15s linear; -o-transition: all .15s linear; transition: all .15s linear; } .shop-cat-menu__item a:hover { color: var(--c-pri); background: var(--c-cool-december); } .shop-cat-menu__item--active a, .shop-cat-menu__item--active a:hover { color: var(--c-pri); background: var(--c-glisten-green); } .shop-cat-menu__item--active::after { content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .4rem; height: .4rem; background: var(--c-pri); } @media only screen and (max-width: 768px) { .shop-cat-menu { top: 11.0rem; width: auto; overflow-x: auto; padding-inline: 1.6rem; border-bottom: .4rem solid var(--c-glisten-green); } .shop-cat-menu__inner { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; border-bottom: none; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SHOP-CAT-MENU --------------------------------------------------------| --------------------------------------------------------| */ .shop-cat-thumbs { width: var(--w-xl); margin-inline: auto; margin-bottom: 10.4rem; } .shop-cat-thumbs--grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 2.4rem 1fr 2.4rem 1fr; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } .shop-cat-thumbs--swiper { position: relative; padding-inline: 8.0rem; } .shop-cat-thumbs-swiper { opacity: 0; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; } .shop-cat-thumbs-swiper.swiper-initialized { opacity: 1; } .shop-cat-thumbs-swiper .swiper-slide { padding-inline: .8rem; } .shop-cat-thumbs .swiper-pagination { display: none; } .shop-cat-thumbs .swiper-arr { margin-top: -2.0rem; } .shop-cat-thumbs .swiper-arr--next { right: 3.2rem; } .shop-cat-thumbs .swiper-arr--prev { left: 3.2rem; } .shop-cat-thumbs__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; } .shop-cat-thumbs__item img { width: 100%; height: auto; /* border-radius: .8rem; */ border: .8rem solid var(--c-glisten-green); -webkit-transition: border-color .15s linear; -o-transition: border-color .15s linear; transition: border-color .15s linear; } .shop-cat-thumbs__item:hover img { border-color: var(--c-pri); } .shop-cat-thumbs__item h3 { margin: 0; text-align: center; font-size: 2.0rem; } .shop-cat-thumbs .swiper-scrollbar { display: none; } @media only screen and (max-width: 768px) { .home .shop-cat-thumbs--swiper { margin-block: 4.8rem -4.8rem; } .shop-cat-thumbs--swiper { padding-inline: 0; } .shop-cat-thumbs--swiper .swiper-slide { width: 20.0rem; } .shop-cat-thumbs .swiper-arr { display: none; } .shop-cat-thumbs .swiper-scrollbar { display: block; position: relative; height: .4rem; margin-top: 1.6rem; background: var(--c-10); left: 2.4rem; width: calc(100% - 4.8rem); } .shop-cat-thumbs .swiper-scrollbar-drag { background: var(--c-pri); } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $PRODUCT-LOGOS --------------------------------------------------------| --------------------------------------------------------| */ .product-logos { width: var(--w-lg); margin-inline: auto; gap: 3.2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product-logos__logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 9.6rem; } .product-logos__logo img { width: 100%; } @media only screen and (max-width: 768px) { .product-logos { width: 100%; gap: 1.6rem; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $NL-SIGNUP --------------------------------------------------------| --------------------------------------------------------| */ .nl-signup { background: var(--c-glisten-green); padding-block: 8.0rem; } .nl-signup__inner { width: var(--w-md); margin-inline: auto; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 3.2rem; padding: 4.0rem; background: var(--c-glisten-green); border-radius: 2.4rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: .2rem dashed var(--c-pri); } .nl-signup__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .nl-signup__hl { margin: 0 0 .8rem; } .nl-signup__sl { margin: 0; } .nl-signup__form { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .nl-signup__form form { display: -webkit-box; display: -ms-flexbox; display: flex; gap: .8rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nl-signup__form .gform-body { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .nl-signup__form .gform-footer { margin: 0 !important; } @media only screen and (max-width: 768px) { .nl-signup__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $UTILITY --------------------------------------------------------| --------------------------------------------------------| */ .utility { position: relative; background: var(--c-white-crest); margin-block: 4.0rem 12.8rem; width: var(--w-xs); margin-inline: auto; text-align: center; } .utility :first-child { margin-top: 0; } @media only screen and (max-width: 768px) { .utility { width: var(--w-lg); } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $FORM --------------------------------------------------------| --------------------------------------------------------| */ .form { position: relative; background: var(--c-white-crest); margin-block: 12.8rem; width: var(--w-sm); margin-inline: auto; } .form:first-child { margin-top: 0; } @media only screen and (max-width: 768px) { .form { width: var(--w-lg); } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $TEASERS --------------------------------------------------------| --------------------------------------------------------| */ .teasers { position: relative; background: var(--c-white-crest); padding-block: 12.8rem; background-color: var(--c-glisten-green); } .teasers--general { background-color: var(--c-cool-december); } .teasers__header { width: var(--w-sm); margin-inline: auto; text-align: center; } .teasers__ol { margin-top: 0; color: var(--c-winning-ticket); } .teasers__hl { margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; } .teasers__hl::after { content: ''; width: 6.4rem; height: .6rem; background-color: var(--c-pri); } .teasers__sl { margin-bottom: 6.4rem; } .teasers__empty { text-align: center; font-style: italic; } .teasers__grid { width: var(--w-lg); margin-inline: auto; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 3.2rem 1fr 3.2rem 1fr; grid-template-columns: repeat(3, 1fr); gap: 3.2rem; } .teaser { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--c-cool-december); color: var(--c-fog); -webkit-box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, 0.1); box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, 0.1); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; } .teaser:hover { -webkit-transform: translateY(-0.8rem); -ms-transform: translateY(-0.8rem); transform: translateY(-0.8rem); } .teaser__media { } .teaser__image { aspect-ratio: 16/9; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .teaser__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 3.2rem; border-bottom: .8rem solid var(--c-smokey-slate); -webkit-transition: border-color .15s linear; -o-transition: border-color .15s linear; transition: border-color .15s linear; } .teaser:hover .teaser__content { border-bottom-color: var(--c-pri); } .teaser__hl { font-size: 2.4rem; margin: 0 0 1.6rem; } .teasers--general .teaser__hl { font-size: 2.8rem; } .teaser__sl { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 1.4rem; margin: 0 0 2.4rem; } .teaser__cta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; line-height: 1.5; color: var(--c-winning-ticket); font-weight: 700; -webkit-transition: color .15s linear; -o-transition: color .15s linear; transition: color .15s linear; } .teaser:hover .teaser__cta { color: var(--c-pri); } .teaser__cta-arrow { width: auto; height: 1.6rem; fill: currentColor; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; } .teaser:hover .teaser__cta-arrow { -webkit-transform: translateX(0.8rem); -ms-transform: translateX(0.8rem); transform: translateX(0.8rem); } @media only screen and (max-width: 768px) { .teasers__header { width: var(--w-lg); } .teasers__grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .teasers__sl { width: auto; } .teaser { max-width: 56rem; margin-inline: auto; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $GLOBAL-CTA --------------------------------------------------------| --------------------------------------------------------| */ .global-cta { position: relative; background: var(--c-pri); color: var(--c-white-crest); padding-block: 12.8rem; } .global-cta__content { position: relative; width: var(--w-sm); margin-inline: auto; text-align: center; } .global-cta__hl { margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; } .global-cta__sl { padding-bottom: 2.4rem; color: var(--c-glisten-green); } .global-cta__cta-button.button { border: .2rem solid var(--c-white-crest); } @media only screen and (max-width: 768px) { .global-cta__content { width: var(--w-lg); } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $WYSIWYG --------------------------------------------------------| --------------------------------------------------------| */ .wysiwyg { } .wysiwyg ul, .wysiwyg ol { color: var(--c-cannon-ball); line-height: 1.5; margin: 0 0 2.4rem; padding-left: 3.2rem; } .wysiwyg ul li, .wysiwyg ol li { margin-bottom: 1.6rem; } .wysiwyg h5 { color: var(--c-winning-ticket); } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $ARROWS --------------------------------------------------------| --------------------------------------------------------| */ .arr { margin: 8.0rem auto; width: var(--w-sm); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .arr--index { gap: 4.0rem; } .arr__item { display: -webkit-box; display: -ms-flexbox; display: flex; gap: .8rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .arr__item--index-next { margin-left: auto; } .arr__arrow { -ms-flex-negative: 0; flex-shrink: 0; width: 4.0rem; height: 4.0rem; border-radius: 50%; border: .2rem solid var(--c-pri); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: background-color .15s linear; -o-transition: background-color .15s linear; transition: background-color .15s linear; } .arr__item:hover .arr__arrow, .arr__item:focus-within .arr__arrow { background-color: var(--c-pri); } .arr__arrow-icon { fill: var(--c-pri); width: 2.4rem; height: auto; -webkit-transition: fill .15s linear; -o-transition: fill .15s linear; transition: fill .15s linear; } .arr__item:hover .arr__arrow-icon, .arr__item:focus-within .arr__arrow-icon { fill: var(--c-white-crest); } .arr__text { } @media only screen and (max-width: 768px) { .arr__text { display: none; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $NOTIF --------------------------------------------------------| --------------------------------------------------------| */ .notif { width: 100%; padding: 0 2.4rem; background-color: var(--c-pri); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; font-size: 1.2rem; line-height: 3.2rem; color: var(--c-white-crest); -webkit-transition: background-color .15s linear; -o-transition: background-color .15s linear; transition: background-color .15s linear; } .notif:hover { background-color: var(--c-sec); } .notif__text { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .notif__button { font-weight: 700; text-transform: uppercase; padding: 0 1.6rem; white-space: nowrap; background-color: var(--c-sec); -webkit-transition: background-color .15s linear; -o-transition: background-color .15s linear; transition: background-color .15s linear; } .notif:hover .notif__button { background-color: var(--c-pri); } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $GAL --------------------------------------------------------| --------------------------------------------------------| */ .gal-grid { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fit, minmax(25.6rem, 1fr)); gap: 1.6rem; margin-inline: auto; margin-block: 8.0rem; } .gal-grid a { } .gal-grid img { aspect-ratio: 4/3; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .gal-swiper { --ar: 16/9; aspect-ratio: var(--ar); margin-inline: auto; margin-block: 8.0rem; color-scheme: dark; } .gal-swiper .swiper-slide { } .gal-swiper .swiper-slide img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .gal-swiper__caption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2.4rem; font-size: 1.2rem; margin: 0; } .gal-swiper--basic { } .gal-swiper--auto { } .gal-swiper--auto .swiper-slide { width: auto; } .gal-swiper--auto .swiper-slide img { height: 100%; width: auto; } .gal-swiper--thumbs { margin-block: 8.0rem 0; } .gal-swiper--thumbs-nav { aspect-ratio: auto; margin-block: 0 8.0rem; } .gal-swiper--thumbs-nav .swiper-slide { padding: .4rem .4rem 0 0; cursor: pointer; opacity: .25; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; } .gal-swiper--thumbs-nav .swiper-slide:last-child { padding-right: 0; } .gal-swiper--thumbs-nav .swiper-slide-thumb-active { opacity: 1; } .gal-swiper--thumbs-nav .swiper-slide img { aspect-ratio: var(--ar); } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SWIPER-ARR --------------------------------------------------------| --------------------------------------------------------| */ .swiper-arr { z-index: 1; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 2.4rem; -ms-flex-negative: 0; flex-shrink: 0; width: 4.0rem; height: 4.0rem; border-radius: 50%; border: .2rem solid var(--c-pri); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; -webkit-transition: background-color .15s linear; -o-transition: background-color .15s linear; transition: background-color .15s linear; } .swiper-arr--next { left: auto; right: 2.4rem; } .swiper-arr.swiper-button-disabled { opacity: 50%; pointer-events: none; } .swiper-arr:hover { background-color: var(--c-pri); } .swiper-arr__arrow-icon { fill: var(--c-pri); width: 2.4rem; height: auto; -webkit-transition: fill .15s linear; -o-transition: fill .15s linear; transition: fill .15s linear; } .swiper-arr:hover .swiper-arr__arrow-icon { fill: var(--c-white-crest); } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SWIPER-PAGINATION --------------------------------------------------------| --------------------------------------------------------| */ .swiper-pagination { bottom: 2.4rem !important; } .swiper-pagination-bullet { margin: 0 .4rem !important; width: .8rem !important; height: .8rem !important; background: var(--c-glisten-green) !important; opacity: 1 !important; } .swiper-pagination-bullet-active { background: var(--c-pri) !important; opacity: 1 !important; } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $FOOTER --------------------------------------------------------| --------------------------------------------------------| */ .ftr { position: relative; background: var(--c-black-feather); color: var(--c-white-crest); padding-block: 10.4rem; font-size: 1.2rem; overflow: clip; } .ftr__watermark { position: absolute; top: 6.4rem; left: 50%; -webkit-transform: translateX(-50%) rotate(-5deg); -ms-transform: translateX(-50%) rotate(-5deg); transform: translateX(-50%) rotate(-5deg); font-family: "trailmade", script; font-weight: 400; font-style: normal; font-size: 25.6rem; opacity: .03; white-space: nowrap; pointer-events: none; } .ftr__inner { width: var(--w-lg); margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .ftr__content { display: -ms-grid; display: grid; -ms-grid-columns: minmax(0, 1fr) 3.2rem minmax(0, 1fr) 3.2rem minmax(0, 1fr) 3.2rem minmax(0, 1fr) 3.2rem minmax(0, 1fr); grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3.2rem; } .ftr__col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .ftr__heading { font-size: 1.6rem; margin: 0 0 1.6rem; color: var(--c-white-crest); } .ftr__list { list-style: none; margin: 0; padding: 0; line-height: 1.5; } .ftr__list a { display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--c-smokey-slate); text-decoration: none; -webkit-transition: color .15s linear; -o-transition: color .15s linear; transition: color .15s linear; padding-block: .8rem; } .ftr__list a:hover { color: var(--c-pri); } .ftr__contact { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-block: 6.4rem 3.2rem; } .ftr__address { font-style: normal; line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 3.2rem; } .ftr__logo { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1.2rem; } img.ftr__logo-img { height: 4.8rem; width: auto; } .ftr__address-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.2rem; color: var(--c-smokey-slate); margin: 0; } .ftr__address-icon { -ms-flex-negative: 0; flex-shrink: 0; width: 1.6rem; height: 1.6rem; fill: var(--c-pri); } .ftr__address a { color: var(--c-smokey-slate); text-decoration: none; -webkit-transition: color .15s linear; -o-transition: color .15s linear; transition: color .15s linear; } .ftr__address a:hover { color: var(--c-pri); } .ftr__social { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1.6rem; } .ftr__social-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 4.0rem; height: 4.0rem; border-radius: 50%; background: var(--c-fog); -webkit-transition: background-color .15s linear; -o-transition: background-color .15s linear; transition: background-color .15s linear; } .ftr__social-link:hover { background: var(--c-pri); } .ftr__social-icon { width: 2.0rem; height: 2.0rem; fill: var(--c-white-crest); } .ftr__colophon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 3.2rem; border-top: 0.2rem solid var(--c-fog); } .ftr__colophon-cr { color: var(--c-smokey-slate); } .ftr__colophon-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .ftr__colophon-links a { color: var(--c-smokey-slate); text-decoration: none; } .ftr__colophon-links a:hover { color: var(--c-pri); } .ftr__colophon-sep { color: var(--c-smokey-slate); } @media only screen and (max-width: 768px) { .ftr__watermark { white-space: normal; text-align: center; line-height: .76; } .ftr__content { display: none; } .ftr__contact { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3.2rem; margin-top: 0; } .ftr__address { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; } .ftr__logo { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .ftr__address-item { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .ftr__colophon { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; text-align: center; } .ftr__colophon-sep { display: none; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $SEARCH --------------------------------------------------------| --------------------------------------------------------| */ .s-form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2.4rem; } .s-form__input { width: 100%; } .s-form__button { } .s-results { margin-block: 8.0rem; text-align: left; } .s-results__count { margin-bottom: 4.0rem; } .s-results__item { margin: 0; margin-bottom: 2.4rem; border-radius: .8rem; -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease; transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease; -o-transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease; } .s-results__item:hover { -webkit-transform: translateY(-.4rem); -ms-transform: translateY(-.4rem); transform: translateY(-.4rem); -webkit-box-shadow: 0 .4rem 1.6rem var(--c-10); box-shadow: 0 .4rem 1.6rem var(--c-10); } .s-results__item-link { display: block; padding: 2.4rem 1.6rem; color: inherit; text-decoration: none; border: .2rem solid var(--c-10); border-radius: .8rem; color: var(--c-cannon-ball); line-height: 1.5; } .s-results__title { color: var(--c-pri); margin: 0 0 .8rem; } .s-results__url { margin-bottom: .8rem; font-size: 1.2rem; } .s-results__description { margin-bottom: .8rem; } .s-results__meta { font-size: 1.2rem; display: none; } .search-highlight { background-color: var(--c-05); color: currentColor; } .s-results__pagination { } .s-results__pagination .nav-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: .8rem; } .s-results__pagination .page-numbers { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.4rem; height: 2.4rem; border-radius: .4rem; background-color: var(--c-05); } .s-results__pagination .prev, .s-results__pagination .next { display: none; } .s-results-none { text-align: center; margin-block: 8.0rem; } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $VIMEO --------------------------------------------------------| --------------------------------------------------------| */ .vim { position: relative; --ar: 16/9; } .vim__iframe { aspect-ratio: var(--ar); background: transparent; border: 0; } .vim--bg { position: absolute; inset: 0; overflow: hidden; background-size: cover; background-position: center; } .vim--bg .vim__iframe { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-height: 100%; min-width: 100%; max-width: none; opacity: 0; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .vim--bg::after { display: none; content: ''; position: absolute; inset: 0; background: -o-linear-gradient(bottom, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .1) 80%, rgba(0, 0, 0, .5) 100%); background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .75)), color-stop(40%, rgba(0, 0, 0, .1)), color-stop(80%, rgba(0, 0, 0, .1)), to(rgba(0, 0, 0, .5))); background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .1) 80%, rgba(0, 0, 0, .5) 100%); } .vim--content { } .vim--content .vim__iframe { width: 100%; } @media (prefers-reduced-motion: reduce) { .vim--bg .vim__iframe { display: none; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $POP --------------------------------------------------------| --------------------------------------------------------| */ .pop { z-index: 900; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; top: 0; left: -100%; width: 100%; height: 100%; padding: 4.0rem 0; background-color: var(--c-bd); -webkit-backdrop-filter: saturate(180%) blur(1.6rem); backdrop-filter: saturate(180%) blur(1.6rem); overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; opacity: 0; -webkit-transition: opacity 0.3s ease, left 0s ease 0.3s; -o-transition: opacity 0.3s ease, left 0s ease 0.3s; transition: opacity 0.3s ease, left 0s ease 0.3s; } .pop--active { left: 0; opacity: 1; -webkit-transition: opacity 0.3s ease, left 0s ease 0s; -o-transition: opacity 0.3s ease, left 0s ease 0s; transition: opacity 0.3s ease, left 0s ease 0s; } .pop__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } .pop__item { position: relative; margin: auto; background: var(--c-white-crest); width: var(--w-xs); -webkit-transform: scale3d(0.9, 0.9, 1); transform: scale3d(0.9, 0.9, 1); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .pop--active .pop__item { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .pop__close { z-index: 1; position: absolute; top: 0; right: 0; width: 7.2rem; height: 7.2rem; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pop__close-icon { width: 4.0rem; height: 4.0rem; fill: var(--c-cool-december); background: var(--c-pri); padding: .8rem; border-radius: 50%; } /* Pop Search */ .pop--search { } .p-search { padding: 8rem; text-align: center; } .p-search__title { margin: 0 0 2.4rem; } /* Pop Promo */ .pop--promo { } .p-promo { display: block; outline: none; } .p-promo__img { max-width: 100%; width: 100%; height: auto; } .p-promo__content { text-align: center; } .p-promo__content-inner { position: relative; padding: 4rem; } .p-promo__content-inner:has(.p-promo__btn) { padding: 0 4rem 4rem; } .p-promo__btn { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .p-promo__title { margin-top: 0; text-align: center; color: var(--c-fog); margin-bottom: 1.6rem; } .p-promo__text { text-wrap: pretty; margin: 0; } .p-promo__text p:last-child { margin-bottom: 0; } .p-promo__form { margin-top: 2.4rem; text-align: left; } .p-promo__form .gform_footer { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-promo__form .gform_confirmation_message { text-align: center; } @media only screen and (max-width: 768px) { .pop__item { width: var(--w-lg); max-width: 51.2rem; } .p-search { padding: 8.0rem 4.0rem; } } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $FORMS --------------------------------------------------------| --------------------------------------------------------| */ /*-------------------------------------| $Gravity-Forms */ .app .gform_wrapper.gravity-theme { } /*General*/ .app .gform_wrapper.gravity-theme .gfield_required { font-size: .9em; } /*Heading*/ .app .gform_wrapper.gravity-theme .gform_heading { } .app .gform_wrapper.gravity-theme .gform_required_legend { display: none; } .app .gform_wrapper.gravity-theme .gform_required_legend .gfield_required { } /*Body*/ .app .gform_wrapper.gravity-theme .gform_body { } .app .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 2.4rem; } .app .gform_wrapper.gravity-theme .gfield { } .app .gform_wrapper.gravity-theme .gsection { border-bottom: .2rem solid var(--c-10); padding: 0 1.6rem .8rem 0; } .app .gform_wrapper.gravity-theme fieldset { } .app .gform_wrapper.gravity-theme .gfield_label { font-size: 1.6rem; margin-bottom: .8rem; } .app .gform_wrapper.gravity-theme .gfield_header_item, .app .gform_wrapper.gravity-theme .gform_fileupload_rules, .app .gform_wrapper.gravity-theme .ginput_complex label { font-size: 1.2rem; padding-top: 0.4rem; margin-bottom: 0.8rem; } .app .gform_wrapper.gravity-theme input[type=color], .app .gform_wrapper.gravity-theme input[type=date], .app .gform_wrapper.gravity-theme input[type=datetime-local], .app .gform_wrapper.gravity-theme input[type=datetime], .app .gform_wrapper.gravity-theme input[type=email], .app .gform_wrapper.gravity-theme input[type=month], .app .gform_wrapper.gravity-theme input[type=number], .app .gform_wrapper.gravity-theme input[type=password], .app .gform_wrapper.gravity-theme input[type=search], .app .gform_wrapper.gravity-theme input[type=tel], .app .gform_wrapper.gravity-theme input[type=text], .app .gform_wrapper.gravity-theme input[type=time], .app .gform_wrapper.gravity-theme input[type=url], .app .gform_wrapper.gravity-theme input[type=week], .app .gform_wrapper.gravity-theme select, .app .gform_wrapper.gravity-theme textarea { font-size: 1.6rem; padding: .8rem; } .app .gform_wrapper.gravity-theme .description, .app .gform_wrapper.gravity-theme .gfield_description, .app .gform_wrapper.gravity-theme .gsection_description, .app .gform_wrapper.gravity-theme .instruction { font-size: 1.2rem; padding-top: 1.6rem; } .app .gsection_title { margin: 2.4rem 0 0; } .app .gform_wrapper.gravity-theme .field_sublabel_above .description, .app .gform_wrapper.gravity-theme .field_sublabel_above .gfield_description, .app .gform_wrapper.gravity-theme .field_sublabel_above .gsection_description { margin-top: .4rem; } .app .gform_wrapper.gravity-theme .field_description_above .description, .app .gform_wrapper.gravity-theme .field_description_above .gfield_description, .app .gform_wrapper.gravity-theme .field_description_above .gsection_description, .app .gform_wrapper.gravity-theme .field_description_above .instruction { padding-bottom: .8rem; } .app .gform_wrapper.gravity-theme .gfield textarea.small { height: 9.6rem; } .app .gform_wrapper.gravity-theme .gfield textarea.medium { height: 19.2rem; } .app .gform_wrapper.gravity-theme .gfield textarea.large { height: 28.8rem; } /*Drop Area*/ .app .gform_wrapper.gravity-theme .gform_drop_area { background-color: var(--c-05); border: 0.2rem dotted var(--c-10); border-radius: 0; margin-bottom: .8rem; padding: 3.2rem; text-align: center; color: var(--c-50); } .app .gform_wrapper.gravity-theme .gform_drop_area .button { background-color: var(--c-05); border: 0.2rem solid var(--c-10); color: var(--c-50); } /*Checkbox & Radio*/ .app .gfield_checkbox, .app .gfield_radio { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 2.4rem; margin: 1.6rem 0; } .app .gchoice { position: relative; } .app .gform_wrapper.gravity-theme .gfield-choice-input { position: absolute; -webkit-appearance: none; -moz-appearance: none; appearance: none; inset: 0; margin: 0; } .app .gform_wrapper.gravity-theme .gfield-choice-input:checked { } .app .gform_wrapper.gravity-theme .gfield_checkbox label, .app .gform_wrapper.gravity-theme .gfield_radio label { position: relative; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: .8rem; width: 100%; max-width: 100% !important; font-size: 1.6rem !important; cursor: pointer; -webkit-transition: color .15s linear; -o-transition: color .15s linear; transition: color .15s linear; } .app .gform_wrapper.gravity-theme .gfield-choice-input:checked + label { } .app .gform_wrapper.gravity-theme .gfield_checkbox label::after, .app .gform_wrapper.gravity-theme .gfield_radio label::after { content: ""; background: center / 0 0 no-repeat scroll var(--c-05); width: 3.2rem; height: 3.2rem; border: 0.2rem solid var(--c-10); z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all .15s linear; -o-transition: all .15s linear; transition: all .15s linear; } .app .gform_wrapper.gravity-theme .gfield_checkbox label::after { } .app .gform_wrapper.gravity-theme .gfield_radio label::after { border-radius: 50%; } .app .gform_wrapper.gravity-theme .gfield-choice-input:checked + label::after { border: .2rem solid var(--c-pri); background-size: 2.0rem 2.0rem; } .app .gform_wrapper.gravity-theme .gfield_checkbox .gfield-choice-input:checked + label::after { background-image: url('assets/img/icon-check.svg'); } .app .gform_wrapper.gravity-theme .gfield_radio .gfield-choice-input:checked + label::after { background-image: url('assets/img/icon-radio.svg'); } /*Footer*/ .app .gform_wrapper.gravity-theme .gform_footer { position: relative; margin: 2.4rem 0 0; padding: 0; } .app .gform_wrapper.gravity-theme .gform_footer button, .app .gform_wrapper.gravity-theme .gform_footer input, .app .gform_wrapper.gravity-theme .gform_page_footer button, .app .gform_wrapper.gravity-theme .gform_page_footer input { margin-bottom: 0; } .app .gform_wrapper.gravity-theme .gform-loader { width: 2.4rem; height: 2.4rem; border-top: .4rem solid var(--c-pri); border-right: .4rem solid var(--c-pri); border-bottom: .4rem solid var(--c-25); border-left: .4rem solid var(--c-25); margin-left: 1.6rem; } .app .gform_confirmation_message { line-height: 1.5; } /*Validation Errors*/ .app .gform_wrapper.gravity-theme .gform_validation_errors { background: transparent; border: .2rem dotted var(--c-10); border-radius: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-margin-after: .8rem; margin-block-end: .8rem; -webkit-margin-before: .8rem; margin-block-start: .8rem; padding-block: 1.6rem; -webkit-padding-end: 1.6rem; padding-inline-end: 1.6rem; -webkit-padding-start: 4.8rem; padding-inline-start: 4.8rem; } .app .gform_wrapper.gravity-theme .gfield_error [aria-invalid=true] { border-width: 0.2rem; } .app .gform_wrapper.gravity-theme .gfield_validation_message, .app .gform_wrapper.gravity-theme .validation_message { background: transparent; border: .2rem dotted var(--c-10); -webkit-margin-before: .8rem !important; margin-block-start: .8rem !important; padding: 1.6rem 2.4rem !important; } /* Previous & Save Buttons */ .app .gform_wrapper.gravity-theme .gform_previous_button.button, .app .gform_wrapper.gravity-theme .gform_save_link.button { background-color: var(--c-winning-ticket); color: var(--c-white-crest); } /* Progress Bar */ .app .gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_blue { background-color: var(--c-pri); } /*-------------------------------------| $Holiday Feast Box Form */ #gform_wrapper_7 .gchoice { width: 100%; } /*-------------------------------------| $Pre-Order Turkey Form */ /* Turkey Cut - Bone-In Turkey Breast */ #field_4_5 .gchoice_4_5_2 { display: none; } /* Bone-In Turkey Breast Types */ #input_4_8 option[value="Organic Grand Champion Turkey"] { display: none; } /* Whole Turkey Types */ #input_4_6 option[value="Heirloom Bronze Turkey ($3.99/lb)"], #input_4_6 option[value="Brined Turkey ($4.39/lb)"] { display: none; } #gfield_description_4_15 { padding: 0; } /*-------------------------------------| $Buttons */ .button, input[type="submit"], input[type="reset"], input[type="button"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; padding: 1.6rem 6.4rem; margin: 0; background-color: var(--c-pri); color: var(--c-white-crest); text-align: center; font-size: 1.6rem; font-weight: 700; line-height: 1.5; text-decoration: none; white-space: nowrap; border-radius: 0; border: none; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background-color .15s linear; -o-transition: background-color .15s linear; transition: background-color .15s linear; } .button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { /* outline: 0; */ background-color: var(--c-sec); } .button__arrow { width: auto; height: 1.6rem; fill: currentColor; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; -o-transition: transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; } .button:hover .button__arrow { -webkit-transform: translateX(0.8rem); -ms-transform: translateX(0.8rem); transform: translateX(0.8rem); } /*-------------------------------------| $Fields */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--c-05); border: 0.2rem solid var(--c-10); -webkit-box-shadow: none; box-shadow: none; color: var(--c-fog); font: inherit; font-size: 1.6rem; padding: 0.8rem; -webkit-transition: border-color 0.3s ease, background-color 0.3s ease; -o-transition: border-color 0.3s ease, background-color 0.3s ease; transition: border-color 0.3s ease, background-color 0.3s ease; } textarea { line-height: 1.5; resize: vertical; } select { height: 4.3rem; line-height: 1.25; background: right 1.6rem center / 1.6rem auto no-repeat scroll var(--c-05); background-image: url('data:image/svg+xml,'); } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color: var(--c-pri); outline: 0; } ::-webkit-input-placeholder { color: var(--c-25); opacity: 1; } ::-moz-placeholder { color: var(--c-25); opacity: 1; } :-ms-input-placeholder { color: var(--c-25); opacity: 1; } ::-ms-input-placeholder { color: var(--c-25); opacity: 1; } ::placeholder { color: var(--c-25); opacity: 1; } /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $RESPONSIVE --------------------------------------------------------| --------------------------------------------------------| */ @media only screen and (min-height: 1152px) and (min-width: 2048px) { html { font-size: 11px; } } /* Option 2: Scale 16:9 (1152x648) to 2x in 10% increments @media only screen and (min-height: 713px) and (min-width: 1267px) { html { font-size: 11px; } } @media only screen and (min-height: 777px) and (min-width: 1382px) { html { font-size: 12px; } } @media only screen and (min-height: 843px) and (min-width: 1498px) { html { font-size: 13px; } } @media only screen and (min-height: 907px) and (min-width: 1613px) { html { font-size: 14px; } } @media only screen and (min-height: 972px) and (min-width: 1728px) { html { font-size: 15px; } } @media only screen and (min-height: 1037px) and (min-width: 1843px) { html { font-size: 16px; } } @media only screen and (min-height: 1101px) and (min-width: 1958px) { html { font-size: 17px; } } @media only screen and (min-height: 1167px) and (min-width: 2074px) { html { font-size: 18px; } } @media only screen and (min-height: 1231px) and (min-width: 2189px) { html { font-size: 19px; } } @media only screen and (min-height: 1296px) and (min-width: 2304px) { html { font-size: 20px; } } */ /* Option 2: Scale as octal design pattern in increments of 128 */ /* @media only screen and (max-width: 896px) { html { font-size: 9.5px; } } @media only screen and (max-width: 768px) { html { font-size: 9px; } } @media only screen and (max-width: 640px) { html { font-size: 8.5px; } } @media only screen and (max-width: 512px) { html { font-size: 8px; } } @media only screen and (min-height: 720px) and (min-width: 1280px) { html { font-size: 11px; } } } @media only screen and (min-height: 792px) and (min-width: 1408px) { html { font-size: 12px; } } @media only screen and (min-height: 864px) and (min-width: 1536px) { html { font-size: 13px; } } @media only screen and (min-height: 936px) and (min-width: 1664px) { html { font-size: 14px; } } @media only screen and (min-height: 1008px) and (min-width: 1792px) { html { font-size: 15px; } } @media only screen and (min-height: 1080px) and (min-width: 1920px) { html { font-size: 16px; } } @media only screen and (min-height: 1152px) and (min-width: 2048px) { html { font-size: 17px; } } */ /* --------------------------------------------------------| --------------------------------------------------------| --------------------------------------------------------| $PRINT --------------------------------------------------------| --------------------------------------------------------| */ @media print{blockquote,img,pre,tr{page-break-inside:avoid}*,::after,::before{background:#fff!important;color:#000!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")"}abbr[title]::after{content:" (" attr(title) ")"}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}