@font-face {
font-family: 'Nite';
src: url(//nitecreamery.com/wp-content/themes/nite-2026/nite/nite-regular-webfont.woff2) format('woff2'),
url(//nitecreamery.com/wp-content/themes/nite-2026/nite/nite-regular-webfont.woff) format('woff');
font-weight: normal;
font-style: normal;
}
html, body {
scroll-behavior: smooth;
font-family: 'Montserrat', sans-serif;
@apply antialiased;
font-size: 20px;
margin: 0;
padding: 0;
color: #6b4e38;
background: #6b4e38;
width: 100%;
height: 100%;
}
h1, h2, h3, h4, h5 {
font-family: 'Nite', 'Montserrat', sans-serif;
}
h1 {
font-size: 48px;
margin: 0 auto 30px;
}
a {
transition: all 0.5s ease;
}
.button, button, input[type="submit"] {
color: #6b4e38;
font-family: 'Nite', 'Montserrat', sans-serif;
background: #fff1e4;
display: inline-block;
padding: 15px 60px 12px;
border-radius: 999px;
text-decoration: none;
border: 0 none !important;
transition: all 0.5s ease;
cursor: pointer;
}
.button:hover, button:hover, input[type="submit"]:hover {
scale: 1.05;
}
img {
display: block;
object-fit: cover;
height: auto;
pointer-events: none !important;
}
video {
object-fit: cover;
}
p {
line-height: 160%;
}
.flex {
display: flex;
}
.col {
flex-direction: column;
align-items: center;
}
.revr {
flex-direction: row-reverse;
text-align: right;
}
.box {
box-sizing: border-box;
}
.zoom {
scale: 1.3;
}
.maxwl {
width: 90%;
max-width: 1600px;
margin: auto;
}
.maxwm {
width: 90%;
max-width: 1200px;
margin: auto;
}
.maxwsm {
width: 90%;
max-width: 900px;
margin: auto;
} .display-none, .wpcf7-spinner {
display: none !important;
}
.grecaptcha-badge { 
visibility: hidden !important;
} .preloader {
animation: fadeInAnimation ease-in-out 5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100dvh;
width: 100%;
background-color: #000;
pointer-events: none;
z-index: 999;
}
@keyframes fadeInAnimation {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.preloader dotlottie-player {
max-width: 700px;
width: 60%;
height: auto;
animation: fadeInAnimationLogo ease-in-out 4.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimationLogo {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
30% {
opacity: 1;
}
75% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.preloader-generic {
animation: fadeInGeneric ease-in-out 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background-color: #000;
pointer-events: none;
z-index: 999;
}
@keyframes fadeInGeneric {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
} header {
position: absolute;
z-index: 100;
width: 100%;
box-sizing: border-box;
padding: 30px 5% 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
color: #fff1e4;
}
.mobilize-toggle {
cursor: pointer;
}
.mobilize-toggle span {
text-transform: uppercase;
font-family: 'Nite', 'Montserrat', sans-serif;
font-size: 14px;
}
header img {
width: 60px;
margin: 0 auto;
}
.mobilize-menu-content .mobilize-toggle {
font-size: 36px !important;
}
#menu-mobile {
font-family: 'Nite', 'Montserrat', sans-serif;
text-transform: uppercase;
}
#menu-mobile a:hover {
text-decoration: none;
color: #f3dfd1;
opacity: .8;
}
#mobilize-menu {
background-color: rgba(0,0,0,0);
box-shadow: none;
}
.mobilize-menu-content  {
background-color: #fff1e4;
width: 400px;
} #desktop-vid {
width: 100vw;
height: 100vh;
object-fit: cover;
display: block;
position: absolute;
z-index: 10;
}
#mobile-vid {
display: none;
}
#video-container {
position: absolute;
z-index: 50;
bottom: 0;
width: 100%;
padding: 0 30px 3vw;
box-sizing: border-box;
}
#video-content {
width: 40vw;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
#video-content div {
position: relative;
display: block;
width: 30%;
background: #000;
height: 10vw;
transition: all 0.5s ease;
box-sizing: border-box;
transition: all 0.5s ease;
border: 3px solid #042140;
}
#video-content div:hover {
border: 3px solid #fff;
}
#video-content div:hover video {
opacity: 1;
}
#video-content video {
position: absolute;
width: 100%;
height: 100%;
opacity: .5;
z-index: 120;
transition: all 0.5s ease;
}
#video-content div:last-of-type video {
opacity: .2;
}
#video-content div:last-of-type:hover video {
opacity: .5;
}
#video-content a {
position: absolute;
width: 100%;
height: 100%;
z-index: 150;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 1vw;
text-align: center;
justify-content: space-around;
font-family: 'Nite', 'Montserrat', sans-serif;
color: #fff;
font-size: 1vw;
text-decoration: none;
} .spacer {
width: 100%;
height: 180px;
}
#page-body {
background: url(//nitecreamery.com/wp-content/uploads/2025/11/page-bg.png) bottom right no-repeat, #fff1e4;
background-size: 300px auto;
padding: 100px 200px;
box-sizing: border-box;
text-align: center;
}
#page-body input[type="submit"] {
color: #fff1e4 !important;
background: #6b4e38 !important;
} #hand-left, #hand-right {
position: absolute;
width: 100%;
height: 70vh;
}
#hand-left {
z-index: 50;
}
#hand-right {
z-index: 40;
}
.hand-float-1 {  
animation-name: hand-float-1;
animation-duration: 18s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes hand-float-1 {
0% { transform: translate(0,  -1%) scale(1, 1); }
25%  { transform: translate(0, -3%) scale(1.01, 1.01); }
50% { transform: translate(0,  -1%) scale(1, 1); }
75%  { transform: translate(0, -5%) scale(1.01, 1.01); }
100%   { transform: translate(0, -1%) scale(1, 1); }    
}
.hand-float-2 {  
animation-name: hand-float-2;
animation-duration: 18s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes hand-float-2 {
0%  { transform: translate(0, -3%) scale(1.01, 1.01); }
25% { transform: translate(0,  -1%) scale(1, 1); }
50%  { transform: translate(0, -5%) scale(1.01, 1.01); }
75%   { transform: translate(0, -1%) scale(1, 1); }  
100%  { transform: translate(0, -3%) scale(1.01, 1.01); }  
}
#flavor-title {
margin: 0 auto;
width: 40%;
max-width: 800px;
}
.flavor-copy {
display: block;
margin: 0 auto;
padding: 30px 0;
text-align: center;
font-family: 'Nite', 'Montserrat', sans-serif;
text-transform: uppercase;
width: 90%;
max-width: 900px;
color: #fdf1e5;
box-sizing: border-box;
}
#flavor-container {
display: flex;
flex-wrap: wrap;
width: 90%;
max-width: 1400px;
margin: 0 auto;
justify-content: center;
gap: 1%;
}
#flavor-container div {
width: calc((100% - (3 * 20px)) / 4);
min-width: 23%;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 0 3vw;
transition: all 0.5s ease;
}
#flavor-container div:hover {
scale: 1.05;
}
#flavor-container img {
width: 90%;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
}
#flavor-container span {
display: block;
box-sizing: border-box;
padding: 15px 30px;
font-family: 'Nite', 'Montserrat', sans-serif;
text-align: center;
color: #fdf1e5;
border: 3px solid #fff;
font-size: 16px;
width: 100%;
} #franchise-intro {
width: 100%;
align-items: center;
text-align: center;
font-family: 'Nite', 'Montserrat', sans-serif;
color: #fff1e4;
padding: 200px 30px 160px;
background: url(//nitecreamery.com/wp-content/uploads/2025/11/franchise-header.png) center center no-repeat;
background-size: contain;
box-sizing: border-box;
}
#franchise-intro h1 {
margin: 0 auto;
}
#franchise-intro h1 br {
display: none;
}
#franchise-content {
width: 100%;
padding: 80px 0;
background: #fff1e4;
text-transform: uppercase;
}
#franchise-content nav {
width: 70%;
max-width: 700px;
justify-content: space-between;
}
#franchise-content nav a {
font-family: 'Nite', 'Montserrat', sans-serif;
color: #6b4e38;
display: inline-block;
padding: 10px 20px 8px;
text-decoration: none;
}
#franchise-content nav a.selected, #franchise-content nav a:hover {
background: #6b4e38;
color: #fff1e4;
}
.step {
align-items: center;
padding: 50px 0;
justify-content: space-between;
}
.step h3 {
font-size: 36px;
margin: 0 0 10px;
}
.step-copy {
width: 40%;
}
.step img {
width: 50%;
}
.step p {
margin: 0;
line-height: 120%;
}
#experience-container {
width: 50%;
background: #6b4e38;
box-sizing: border-box;
padding: 10px;
justify-content: space-between;
}
#experience-container video {
width: 23%;
height: 10vw;
}
#experience-container img {
width: 50%;
height: 10vw;
}
#vibe-container {
width: 50%;
padding: 0 0 40px;
position: relative;
}
#vibe-container img {
width: 100%;
border: 10px solid #6b4e38;
position: relative;
z-index: 200;
box-sizing: border-box;
}
#vibe-video {
position: absolute;
z-index: 210;
bottom: 0;
width: 100%;
text-align: center;
}
#vibe-container video {
margin: auto;
width: 10vw;
height: auto;
outline: 10px solid #6b4e38;
outline-offset: -2px;
box-sizing: border-box;
}
#franchise-proven {
border-top: 1px solid #6b4e38;
padding: 50px;
background: #fff1e4;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
#franchise-proven h3 {
margin: 0 0 10px;
}
#franchise-proven p {
font-size: 16px;
line-height: 120%;
margin: 0;
}
#franchise-proven img {
width: 15%;
height: auto;
object-fit: contain;
}
#proven-content {
width: 80%;
}
#how-it-works {
padding: 100px 0 80px;
}
#content-steps {
text-transform: uppercase;
}
#content-steps-intro {
background: #8d6348;
color: #fff1e4;
padding: 30px 20px;
justify-content: space-between;
align-items: center;
}
#content-steps-intro h2 {
font-size: 48px;
margin: 0;
padding: 10px 0 0;
}
#content-steps-intro div {
width: 60%;
}
#content-steps-intro div p {
font-size: 15px;
line-height: 110%;
margin: 0;
}
#content-steps-container {
background: url(//nitecreamery.com/wp-content/uploads/2025/11/how-it-works-bg.png) center center no-repeat #fff1e4;
background-size: contain;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 30px 60px;
padding: 40px 90px;
color: #000;
font-size: 14px;
line-height: 100%;
}
#content-steps-container p {
margin: 0;
}
#investment-container {
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 60px 60px 0;
}
#investment {
width: 45%;
}
#apply {
color: #fff1e4;
width: 45%;
text-align: center;
}
#apply h3 {
font-family: 'Nite', 'Montserrat', sans-serif;
}
#apply p {
font-size: 7px;
font-style: italic;
line-height: 110%;
margin: 0;
text-align: left;
padding: 30px 0 0;
}
#territories {
background: #fff1e4;
padding: 80px 30px;
color: #000;
text-transform: uppercase;
}
#territories h2 {
color: #000;
font-size: 48px;
}
#territories img {
margin: 0 auto 40px;
object-fit: contain;
}
#territories a {
text-decoration: none;
color: #000;
}
#franchise-footer {
width: 100%;
clear: both;
} #story-border {
position: absolute;
top: 2vw;
bottom: 2vw;
left: 2vw;
right: 2vw;
border-radius: 10vw;
border: 1vw solid #d8d6c5;
z-index: 200;
pointer-events: none !important;
}
.story-page {
padding: 5vw 7vw 0;
}
.story-page img {
width: 4vw !important;
}
#story-page-container {
position: relative;
width: 100%;
}
.story-title, .story-footer {
width: 80%;
margin: 0 auto;
padding: 17vw 0 5vw;
color: #fff1e4;
text-align: center;
text-transform: uppercase;
}
.story-title h1, .story-footer h2 {
font-size: 4.25vw;
margin: 0 auto;
}
.story-title p, .story-footer p {
font-size: 1.75vw;
margin: 0 auto;
}
.story-section {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
width: 80%;
margin: 0 auto;
justify-content: space-between;
z-index: 160;
margin: 0 auto 2%;
}
.story-text-section-title {
text-transform: uppercase;
font-family: 'Nite', 'Montserrat', sans-serif;
color: #fff1e4;
font-size: 4vw;
line-height: 120%;
display: block;
}
.story-section p {
margin: 0 0 5%;
color: #fff1e4;
}
.story-text-section {
width: 50%;
font-size: 1.75vw;
line-height: 120%;
}
.story-section img {
width: 48%;
height: auto;
}
.align-right {
text-align: right !important;
}
#path-container {
position: absolute;
z-index: 100;
width: 77%;
margin: 6% 12.5% 0;
}
#path-container img {
display: block;
clear: both;
width: 100%;
height: auto;
}
#path-image-2 {
margin-top: -4vw !important;
}
#path-image-3 {
margin-top: 2vw !important;
}
#path-image-4 {
margin-top: 9vw !important;
}
#path-image-5 {
margin-top: 8vw !important;
}
#path-image-6 {
margin-top: 3vw !important;
}
#path-image-7 {
margin-top: 7vw !important;
}
#story-outro {
position: relative;
margin-top: -35%;
z-index: 50;
}
.story-footer {
padding: 5vw 0 10vw;
}
.story-footer h2 {
margin: 0 auto 1vw;
}
.story-footer a {
text-decoration: none;
color: #fff1e4;
}
.story-margin {
margin-top: -2vw !important;
} form label {
text-align: center;
text-transform: uppercase;
display: block;
}
input[type=text], input[type=email], textarea, input[type=url] {
text-align: center;
border: 1px solid #000;
padding: 10px;
box-sizing: border-box;
width: 100%;
max-width: 400px;
margin: 0 auto;
color: #000 !important;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
background: 0 none;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
border: 0 !important;
text-align: center;
max-width: 400px;
margin: auto;
}  @media only screen and (max-width: 600px) {
#desktop-vid {
display: none;
}
#mobile-vid {
width: 100%;
height: auto;
display: block;
clear: both;
}
#video-container {
position: inherit;
bottom: auto;
width: 100%;
padding: 60px 30px;
box-sizing: border-box;
background: #000;
}
#video-content {
width: 100%;
flex-direction: column;
}
#video-content div {
width: 100%;
height: 260px;
margin: 0 auto 30px;
}
#video-content a {
font-size: 30px;
}
} @media only screen and (max-width: 900px) {
.spacer-last {
height: 60px !important;
}
html, body {
font-size: 16px;
}
h1 {
font-size: 36px;
margin: 0 auto 30px;
}
.spacer {
height: 130px;
}
#page-body {
background-size: 180px auto;
padding: 60px 30px;
} 
} @media only screen and (max-width: 900px) {
#hand-left, #hand-right {
display: none;
}
#flavor-title {
margin: 80px auto 0;
width: 70%;
}
#flavor-container div {
min-width: 31%;
}
#flavor-container span {
padding: 10px;
}
}
@media only screen and (max-width: 700px) {
#flavor-container div {
min-width: 46%;
}
}
@media only screen and (max-width: 600px) {
#flavor-title {
margin: 50px auto 0;
width: 80%;
}
#flavor-container {
gap: 15px;
}
#flavor-container div {
margin: 0 0 20px;
}
#flavor-container span {
font-size: 3vw;
}
} @media only screen and (max-width: 850px) {
#franchise-intro {
background: 0 none;
}
#franchise-intro {
padding: 160px 20px 80px;
}
#franchise-intro h1 br {
display: block;
}
#franchise-content {
padding: 60px 0;
}
#franchise-content nav {
width: 90%;
}
#franchise-content nav a {
padding: 10px 10px 8px;
text-decoration: none;
font-size: 14px;
}
.step {
flex-direction: column;
padding: 60px 0 0;
}
.step-copy, .step img, #experience-container, #vibe-container {
width: 80%;
text-align: center;
}
#experience-container video {
width: 30%;
height: 120px;
}
#experience-container img {
width: 30%;
height: 120px;
}
#vibe-container video {
width: 120px;
}
.step p {
margin: 0 auto 30px;
}
#franchise-proven {
border-top: 1px solid #6b4e38;
padding: 50px 0 0;
margin: 50px auto 0;
flex-direction: column;
}
#franchise-proven h3 {
margin: 0 auto 30px;
font-size: 24px;
text-align: center;
}
#franchise-proven p {
margin: 0 auto 30px;
}
#franchise-proven img {
width: 30%;
}
#how-it-works {
padding: 40px 10px;
}
#content-steps-intro {
flex-direction: column;
text-align: left;
}
#content-steps-intro h2 {
font-size: 36px;
width: 100%;
margin: 0 0 10px;
padding: 0;
text-align: left;
}
#content-steps-intro p {
width: 100%;
}
#content-steps-container {
background: #fff1e4;;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, auto);
gap: 20px;
padding: 30px;
}
#investment-container {
padding: 40px 30px 0;
flex-direction: column;
}
#investment, #apply {
width: 100%;
}
#investment {
margin: 0 auto 30px;
}
#territories {
padding: 40px 30px;
color: #000;
text-align: center;
}
#territories h2 {
font-size: 36px;
}
#territories p {
font-size: 10px;
margin: 0;
}
} @media only screen and (max-width: 850px) {
#path-image-2 {
margin-top: -5vw !important;
}
#path-image-3 {
margin-top: 5vw !important;
}
#path-image-4 {
margin-top: 4vw !important;
}
#path-image-5 {
margin-top: 4vw !important;
}
#path-image-6 {
margin-top: 0 !important;
}
#path-image-7 {
margin-top: 7vw !important;
}
}