@charset "UTF-8";
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.clearfix,.cf{zoom:1}.clearfix:before,.clearfix:after,.cf:before,.cf:after{display:table;content:""}.clearfix:after,.cf:after{clear:both}*{box-sizing:border-box}.image-replacement,.ir{overflow:hidden;text-indent:100%;white-space:nowrap}p{-ms-word-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;-webkit-hyphenate-before:2;-webkit-hyphenate-after:3;hyphenate-lines:3;-ms-font-feature-settings:"liga", "dlig";-o-font-feature-settings:"liga", "dlig";font-feature-settings:"liga", "dlig"}.foo{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.foo-parent{position:relative}.container{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;min-height:100vh}@supports (grid-area: auto){.grid{display:grid;margin:0 auto;width:100%;height:100vh;grid-gap:12px}.grid #content{-webkit-box-flex:1;flex:1;background-color:ghostwhite}.grid aside{background-color:honeydew;min-height:80px}.grid #footer{background-color:powderblue}.grid-aside{grid-template-rows:auto 1fr auto}@media only screen and (min-width: 768px){.grid-aside{grid-template-columns:repeat(12, minmax(0, 1fr));grid-template-rows:auto 1fr auto}.grid-aside #header,.grid-aside #footer{grid-column:span 12}.grid-aside #content{grid-column:1/8}.grid-aside aside{grid-column:8/-1}.grid-full{grid-template-columns:repeat(12, minmax(0, 1fr));grid-template-rows:auto 1fr auto}.grid-full #header,.grid-full #footer{grid-column:span 12}.grid-full #content{grid-column:1/-1}.grid-full aside{display:none}}@media only screen and (min-width: 1170px){.grid-aside #content{grid-column:2/8}.grid-aside aside{grid-column:8/12}.grid-full #content{grid-column:0/12}}@media only screen and (min-width: 1600px){.grid-aside #content{grid-column:3/8}.grid-aside aside{grid-column:8/11}.grid-full #content{grid-column:0/12}}}.alert-help,.alert-info,.alert-error,.alert-success{margin:10px;padding:5px 18px;border:1px solid}.alert-help{border-color:#e8dc59;background:#ebe16f}.alert-info{border-color:#bfe4f4;background:#d5edf8}.alert-error{border-color:#f8cdce;background:#fbe3e4}.alert-success{border-color:#deeaae;background:#e6efc2}.button,.blue-button{position:relative;display:inline-block;margin-bottom:.5em;padding:0.5em 1em;border:0;border-radius:2px;text-decoration:none}.button:active,.blue-button:active{top:1px}.blue-button{background:#0056ac;color:#fff}.blue-button:hover,.blue-button:focus{color:#fff}input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],select,textarea,.field{display:block}input[type="text"][disabled],input[type="text"].is-disabled,input[type="password"][disabled],input[type="password"].is-disabled,input[type="datetime"][disabled],input[type="datetime"].is-disabled,input[type="datetime-local"][disabled],input[type="datetime-local"].is-disabled,input[type="date"][disabled],input[type="date"].is-disabled,input[type="month"][disabled],input[type="month"].is-disabled,input[type="time"][disabled],input[type="time"].is-disabled,input[type="week"][disabled],input[type="week"].is-disabled,input[type="number"][disabled],input[type="number"].is-disabled,input[type="email"][disabled],input[type="email"].is-disabled,input[type="url"][disabled],input[type="url"].is-disabled,input[type="search"][disabled],input[type="search"].is-disabled,input[type="tel"][disabled],input[type="tel"].is-disabled,input[type="color"][disabled],input[type="color"].is-disabled,select[disabled],select.is-disabled,textarea[disabled],textarea.is-disabled,.field[disabled],.field.is-disabled{opacity:0.6;cursor:not-allowed}input[type="password"]{letter-spacing:0.3em}textarea{max-width:100%;width:100%}fieldset{border:1px solid #ccc}fieldset label{font-weight:600}fieldset p{margin-bottom:0}legend{padding:0 0.5em}.radio-buttons{margin-top:0}.radio-buttons li{margin-left:2px;list-style-type:none}.radio-buttons label{font-weight:normal}html{font-size:1em}body{color:#333333;font-size:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{display:block;max-width:100%;height:auto}pre code{white-space:pre-line}a,a:visited{text-decoration:none}a:hover,a:focus,a:visited:hover,a:visited:focus{text-decoration:underline}a:link,a:visited:link{-webkit-tap-highlight-color:rgba(0,0,0,0.3)}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{margin:0;color:#303030;font-weight:500;line-height:1.2;text-rendering:optimizelegibility}h1::before,.h1::before,h2::before,.h2::before,h3::before,.h3::before,h4::before,.h4::before,h5::before,.h5::before,h6::before,.h6::before{content:'';display:block;height:0;width:0;margin-top:calc((.7 - 1.2) * 0.5em)}h1::after,.h1::after,h2::after,.h2::after,h3::after,.h3::after,h4::after,.h4::after,h5::after,.h5::after,h6::after,.h6::after{content:'';display:block;height:0;width:0;margin-bottom:calc((.7 - 1.2) * 0.5em)}h1 a,.h1 a,h2 a,.h2 a,h3 a,.h3 a,h4 a,.h4 a,h5 a,.h5 a,h6 a,.h6 a{text-decoration:none}h1,.h1{margin-top:0;font-size:3.157em}h2,.h2{font-size:2.369em}h3,.h3{font-size:1.777em}h4,.h4{font-size:1.333em}h5,.h5{font-size:1em}h6,.h6{text-transform:uppercase;letter-spacing:4.333px}.header{background:#efefef}#inner-header{display:-webkit-box;display:flex}#site-title{margin:0 0.5em 0 0;font-size:2em;line-height:inherit}#site-title a{color:#303030}#bloginfo{display:-webkit-box;display:flex}#logo{margin-right:8px}#logo img{width:50px;height:50px}ul,ol{-webkit-padding-start:20px}.list-square{margin-bottom:1.5em;list-style-position:outside;list-style-type:square}.nostyle{margin-left:0;padding-left:0;list-style-type:none}.related-posts-list{display:-webkit-box;display:flex}.page-numbers{margin:1em 0;padding-left:0;list-style-type:none;display:-webkit-box;display:flex}.page-numbers li{margin-right:1em}.error404 .search-outer{padding:1.5em 0}.error404 .search-input{display:-webkit-box;display:flex;width:100%}.error404 input[type="search"]{margin:0 1em 0 0;height:40px;min-width:250px}.error404 .search-submit{width:100px}.page-blog .entry-content .alignfull,.page-blog .entry-content .alignwide{margin:0;max-width:100%}.byline-wrap{margin-bottom:1.5em}.entry-content table{margin-bottom:1.5em;width:100%;border:1px solid #ccc}.entry-content tr{border-bottom:1px solid #ccc}.entry-content tr:nth-child(even){background-color:#dedede}.entry-content td{padding:7px;border-right:1px solid #ccc}.entry-content td:last-child{border-right:0}.entry-content th{border-right:1px solid #ccc;border-bottom:1px solid #ccc;background-color:#dedede}.entry-content th:last-child{border-right:0}.screen-reader-text{position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;white-space:nowrap}.screen-reader-text:focus{top:5px;left:5px;z-index:100000;display:block;clip:auto !important;padding:15px 23px 14px;width:auto;height:auto;border-radius:3px;background-color:#f1f1f1;box-shadow:0 0 2px 2px rgba(0,0,0,0.6);color:#21759b;text-decoration:none;font-weight:bold;font-size:0.875rem;font-size:14px;line-height:normal}.wp-prev-next .prev-link{float:left}.wp-prev-next .next-link{float:right}.commentlist{margin:0;list-style-type:none}.comment{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px dotted #ccc}.comment .comment-author{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.comment .vcard .avatar{margin-right:1rem}.comment-edit-link{margin-right:6px}.footer{clear:both}@media only screen and (min-width: 481px){.entry-content .alignleft,.entry-content img.alignleft{margin-right:1.5em;display:inline;float:left;margin-top:11px}.entry-content .alignright,.entry-content img.alignright{margin-left:1.5em;display:inline;float:right;margin-top:11px}.entry-content .aligncenter,.entry-content img.aligncenter{margin-right:auto;margin-left:auto;display:table;clear:both;margin-top:11px}.entry-content .wp-block-media-text.alignfull{max-width:100%;margin-left:0;margin-right:0}}@media only screen and (max-width: 767px){.wrap{padding:1em}.nav{margin:0;padding:0;border-bottom:0;list-style-type:none}.nav li a{display:block;padding:0.2em;text-decoration:none}.nav li ul.sub-menu li a,.nav li ul.children li a{padding-left:30px}}@media only screen and (min-width: 768px){.entry-content .alignfull{margin-left:calc( -100vw / 2 + 100% / 2);margin-right:calc( -100vw / 2 + 100% / 2);max-width:100vw}.entry-content .alignwide{margin-right:calc(25% - 25vw);margin-left:calc(25% - 25vw);max-width:1000%;width:auto}.entry-content .alignwide img,.entry-content .alignfull img{display:block;margin:0 auto}.wrap{padding:1em 1.5em}.header-nav{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.nav{margin:0;padding:0;border:0;list-style-type:none}.nav li{float:left;list-style:none}.nav li a{display:block;border-bottom:0;padding:0 0.5em;text-decoration:none}.nav li a:hover,.nav li a:focus{text-decoration:underline}.nav li ul.sub-menu,.nav li ul.children{position:absolute;z-index:8999;visibility:hidden}.nav li ul.sub-menu li:last-child a,.nav li ul.children li:last-child a{border-bottom:0}.nav li:hover>ul{top:auto;visibility:visible}.single-full #main{max-width:640px;float:none;margin:0 auto} }@media only screen and (min-width: 1030px){#inner-header,#inner-footer{max-width:1200px;margin:0 auto}}@media only screen and (min-width: 1600px){#inner-header,#inner-footer{max-width:1272px;margin:0 auto}}@media print{*{background:transparent !important;color:black !important;text-shadow:none !important;-ms-filter:none !important;-webkit-filter:none !important;filter:none !important}#content{width:100%;margin:0;float:none}@page{margin:2cm}@page :left{margin:1cm}@page :right{margin:1cm}@page :first{margin:1cm 2cm}body{font-size:13pt;line-height:1.3;background:#fff !important;color:#000}h1{font-size:24pt}h2,h3,h4{font-size:14pt;margin-top:25px}p,h2,h3{orphans:3;widows:3}a{page-break-inside:avoid}blockquote{page-break-inside:avoid}h1,h2,h3,h4,h5,h6{page-break-after:avoid;page-break-inside:avoid}img{page-break-inside:avoid;page-break-after:avoid}table,pre{page-break-inside:avoid}ul,ol,dl{page-break-before:avoid}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}a:link,a:visited,a{background:transparent;color:#0088cc;font-weight:bold;text-decoration:underline;text-align:left}a[href^=http]:after{content:" < " attr(href) "> "}article a[href^="#"]:after{content:""}a:not(:local-link):after{content:" < " attr(href) "> "}.entry-content iframe,ins{display:none;width:0 !important;height:0 !important;overflow:hidden !important;line-height:0pt !important;white-space:nowrap}.embed-youtube,.embed-responsive,.embed-container{display:none;position:absolute;height:0;overflow:hidden}#header-widgets,nav,aside,.sidebar,.content-ads,.make-comment,.author-bio,.heading,.related-posts,#decomments-form-add-comment,#breadcrumbs,#footer,.post-byline,.byline,.meta-single,.site-title img,.post-tags,.readability,.sidebar,.page-navigation,.wp-prev-next,.respond-form{display:none}}

@font-face {
font-family: "F37Analogue";
src: url(//bricksandbrews.co.uk/wp-content/themes/bricksandbrews/bricks/fonts/F37AnalogTrial-Bold.woff2.otf) format("woff2"), url(//bricksandbrews.co.uk/wp-content/themes/bricksandbrews/bricks/fonts/F37AnalogTrial-Bold.woff.otf) format("woff"), url(//bricksandbrews.co.uk/wp-content/themes/bricksandbrews/bricks/fonts/F37AnalogTrial-Bold.otf) format("opentype");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
.nav-menu__booking, .nav-menu__link, .contact__email, .contact__text, .about__toggle, .about__text p, .about__eyebrow, .site-footer__cols, .builder__subtitle, .where__line, .why__cta-text, .why__feature-text, .why__feature-badge, .cafe-progress__follow, .lego-sets__detail, .lego-sets__caption, .lego-sets__intro, .how__faqs, .how__card-link, .how__note, .how__card-body, .how__card-num, .hero__desc, .hero__headline, .nav__booking-label, .nav__link, .btn {
font-variation-settings: "opsz" 14;
}
.t-bold {
font-weight: 700;
}
.t-medium {
font-weight: 500;
}
.t-normal {
font-weight: 400;
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
scroll-padding-top: 80px;
}
body {
margin: 0;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
font-family: "DM Sans", sans-serif;
background-color: #FFFFFF;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: none;
}
.stage {
position: relative;
width: 1920px;
left: 50%;
transform: translateX(-50%);
}
.section {
width: 100%;
min-width: 1920px;
}
@keyframes fade-in-up {
from {
opacity: 0;
translate: 0 14px;
}
to {
opacity: 1;
translate: 0 0;
}
}
@keyframes cup-wiggle {
0% {
transform: rotate(0deg);
}
18% {
transform: rotate(-8deg);
}
36% {
transform: rotate(6deg);
}
54% {
transform: rotate(-4deg);
}
72% {
transform: rotate(2.5deg);
}
88% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes brick-place {
0% {
transform: scale(1.7) translateY(-18px);
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
z-index: 10;
}
28% {
transform: scale(0.85) translateY(5px);
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
}
50% {
transform: scale(1.1) translateY(-3px);
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.18));
}
68% {
transform: scale(0.96) translateY(1px);
filter: none;
}
84% {
transform: scale(1.03) translateY(0);
}
100% {
transform: scale(1) translateY(0);
filter: none;
}
}
.brick-place {
animation: brick-place 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
position: relative;
z-index: 2;
}
[data-reveal-delay] {
opacity: 0;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.error404 #content {
padding-top: 150px;
text-align: center;
}
a:hover,
a:focus,
a:visited:hover,
a:visited:focus {
text-decoration: none;
}
.entry-content a, .entry-content a:hover, .entry-content a:focus, .entry-content a:visited, .entry-content a:visited:hover, .entry-content a:visited:focus {
text-decoration: underline;
}
sup.reg {
font-size: 0.55em;
line-height: 0;
vertical-align: super;
}
.btn {
display: inline-block;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: normal;
border: 2px solid currentColor;
border-radius: 8px;
padding: 12px 32px;
background: transparent;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.btn--outline-white {
border-color: #FFFFFF;
color: #FFFFFF;
}
.btn--outline-white:hover {
background-color: #FFFFFF;
}
.btn--outline-black {
border-color: #000000;
color: #000000;
}
.btn--outline-black:hover {
background-color: #000000;
color: #FFFFFF;
}
.btn--hover-blue:hover {
color: #0066FF;
}
.btn--hover-black:hover {
color: #000000;
}
.btn--hover-white:hover {
color: #FFFFFF;
}
.btn--sm {
padding: 10px 30px;
border-radius: 6px;
}
.social {
display: block;
width: 48px;
height: 48px;
transition: transform 0.2s;
}
.social:hover {
transform: scale(1.1);
}
.social__img {
display: block;
width: 100%;
height: 100%;
}
.social__tiktok {
position: relative;
width: 100%;
height: 100%;
}
.social__tiktok-layer {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.social__tiktok-logo {
position: absolute;
width: 24px;
height: 28px;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 4px));
}
.social--footer {
width: 46px;
height: 51px;
}
.social--footer .social__tiktok {
width: 46px;
height: 51px;
}
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 50;
pointer-events: none;
}
.nav__bg {
position: absolute;
left: 336px;
top: -20px;
width: 1232px;
height: 95px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.5);
pointer-events: none;
}
.nav__home-cup {
position: absolute;
left: 356px;
top: 0;
width: 80px;
height: 50px;
overflow: clip;
cursor: pointer;
pointer-events: auto;
transform-origin: 50% 100%;
}
.nav__home-cup:hover {
animation: cup-wiggle 0.55s ease-in-out;
}
.nav__home-cup-layer {
position: absolute;
}
.nav__home-cup-layer--saucer {
inset: 85.11% 20.6% 0 0;
}
.nav__home-cup-layer--detail {
inset: 30.22% 56.75% 55.8% 34.61%;
}
.nav__home-cup-layer--body {
inset: 0 0 21.9% 0.27%;
}
.nav__home-cup-img {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.nav__pill {
position: absolute;
left: 470px;
top: 0;
width: 841px;
height: 50px;
background: #FFFFFF;
border-radius: 10px;
box-shadow: 8px 10px 26px 0 rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 26px;
box-sizing: border-box;
pointer-events: auto;
}
.nav__link {
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: normal;
color: #000000;
white-space: nowrap;
text-decoration: none;
pointer-events: auto;
transition: color 0.2s;
}
.nav__link:hover {
color: #FF8200;
}
.nav__booking {
position: absolute;
left: 1328px;
top: 0;
width: 220px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 2px solid #FF8200;
background: #FFFFFF;
border-radius: 8px;
cursor: pointer;
pointer-events: auto;
}
.nav__btn-blocks {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(4, 1fr);
pointer-events: none;
}
.nav__btn-block {
background: #FF8200;
opacity: 0;
}
.nav__booking:hover .nav__btn-block {
opacity: 1;
}
.nav__booking-label {
position: relative;
z-index: 10;
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: normal;
color: #000000;
text-align: center;
white-space: nowrap;
transition: color 0.15s ease 150ms;
}
.nav__booking:hover .nav__booking-label {
color: #FFFFFF;
}
@media (max-width: 1030px) {
.nav {
padding: 0 40px;
}
}
.hero {
position: relative;
overflow: hidden;
}
.hero__card {
position: relative;
z-index: 1;
max-width: 1504px;
margin: clamp(40px, 5vw, 80px) auto clamp(96px, 11vw, 190px);
padding: clamp(96px, 12vw, 16rem) clamp(24px, 10vw, 20rem) clamp(56px, 10vw, 16rem);
background: #FFFFFF;
border-radius: clamp(24px, 2.2vw, 40px);
box-shadow: 30px 24px 84px 0 rgba(0, 0, 0, 0.25);
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "stamp    headline" "lockup   lockup" "desc     desc";
align-items: start;
column-gap: clamp(24px, 4vw, 72px);
row-gap: clamp(28px, 4vw, 72px);
}
.hero__badge {
grid-area: stamp;
justify-self: end;
align-self: start;
width: clamp(110px, 11vw, 164px);
margin-top: clamp(6px, 1.5vw, 28px);
pointer-events: none;
animation: spin 10s linear infinite;
}
.hero__badge-img {
display: block;
width: 100%;
height: auto;
}
.hero__headline {
grid-area: headline;
justify-self: start;
align-self: start;
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: clamp(30px, 3.4vw, 50px);
line-height: 1.18;
color: #000000;
}
.hero__headline-line {
display: block;
}
.hero__headline-line:nth-child(1) {
animation: fade-in-up 0.5s ease-out 0s both;
}
.hero__headline-line:nth-child(2) {
animation: fade-in-up 0.5s ease-out 0.35s both;
}
.hero__headline-line:nth-child(3) {
animation: fade-in-up 0.5s ease-out 0.7s both;
}
.hero__lockup {
grid-area: lockup;
justify-self: start;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(4px, 0.8vw, 14px);
margin-top: clamp(8px, 2vw, 32px);
max-width: 50%;
}
.hero__wordmark {
display: flex;
gap: clamp(3px, 0.5vw, 10px);
}
.hero__wordmark--bricks {
align-items: flex-end;
}
.hero__wordmark--brews {
align-items: flex-start;
}
.hero__desc {
grid-area: desc;
justify-self: start;
max-width: 900px;
margin-top: clamp(8px, 2vw, 24px);
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: clamp(18px, 1.7vw, 32px);
line-height: 1.4;
color: #000000;
}
.hero__desc-line {
display: inline;
}
.hero__desc-link, .hero__desc-link:hover, .hero__desc-link:focus, .hero__desc-link:visited, .hero__desc-link:visited:hover, .hero__desc-link:visited:focus {
text-decoration: underline;
}
.hero__desc-link {
text-decoration-skip-ink: none;
color: inherit;
transition: color 0.2s;
}
.hero__desc-link:hover {
color: #FF8200;
}
@media (max-width: 1030px) {
section.hero {
padding: 0 24px;
}
.hero__card {
grid-template-columns: 1fr;
grid-template-areas: "stamp headline" "lockup" "desc";
justify-items: flex-start;
text-align: left;
padding: clamp(120px, 16vw, 140px) clamp(20px, 6vw, 48px) clamp(48px, 10vw, 80px);
row-gap: clamp(24px, 5vw, 44px);
}
.hero__headline {
justify-self: flex-start;
text-align: left;
}
.hero__headline span {
display: inline;
}
.hero__lockup {
justify-self: flex-start;
align-items: center;
width: 100%;
max-width: 75%;
}
.hero__wordmark {
justify-content: center;
width: 100%;
}
.hero__desc {
justify-self: flex-start;
text-align: left;
max-width: 60ch;
padding-left: 0;
}
.hero__desc-line {
display: inline;
}
.hero__badge {
grid-area: stamp;
width: 80px;
}
}
.how {
padding-top: 160px;
padding-bottom: 80px;
}
.how__title {
text-align: center;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: normal;
color: #000000;
margin: 0;
margin-top: 40px;
}
.how__cards {
display: flex;
justify-content: center;
gap: 33px;
margin-top: 38px;
}
.how__card {
cursor: pointer;
transition: transform 0.35s ease-out;
}
.how__card:hover {
transform: scale(1.05);
}
.how__card--book {
width: 415px;
}
.how__card--build {
width: 413px;
}
.how__card--relax {
width: 414px;
}
.how__card-panel {
position: relative;
width: 100%;
height: 500px;
border-radius: 20px;
overflow: hidden;
transition: box-shadow 0.35s ease-out;
}
.how__card:hover .how__card-panel {
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.how__card--book .how__card-panel {
background-color: #FF8200;
}
.how__card--build .how__card-panel {
background-color: #0080FF;
}
.how__card--relax .how__card-panel {
background-color: #DCC8AA;
}
.how__card-num, .how__card-title, .how__card-body {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 0;
text-align: center;
white-space: nowrap;
}
.how__card-num {
top: 50px;
font-family: "DM Sans", sans-serif;
font-weight: 900;
font-size: 36px;
line-height: normal;
}
.how__card-title {
top: 103px;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 96px;
line-height: normal;
}
.how__card-body {
top: 244px;
white-space: normal;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: normal;
}
.how__card--book .how__card-num, .how__card--book .how__card-title, .how__card--book .how__card-body, .how__card--book .how__card-link {
color: #000000;
}
.how__card--book .how__card-body {
width: 280px;
}
.how__card--build .how__card-num, .how__card--build .how__card-title, .how__card--build .how__card-body, .how__card--build .how__card-link {
color: #FFFFFF;
}
.how__card--build .how__card-body {
width: 342px;
}
.how__card--relax .how__card-num, .how__card--relax .how__card-title, .how__card--relax .how__card-body, .how__card--relax .how__card-link {
color: #000000;
}
.how__card--relax .how__card-body {
width: 316px;
}
.how__note {
text-align: center;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 32px;
line-height: normal;
color: #000000;
margin-top: 44px;
}
.how__card-link {
position: absolute;
top: 400px;
left: 50%;
transform: translateX(-50%);
margin: 0;
text-align: center;
white-space: nowrap;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 16px;
}
.how__card-link a {
color: inherit;
}
.how__card-link a, .how__card-link a:hover, .how__card-link a:focus, .how__card-link a:visited, .how__card-link a:visited:hover, .how__card-link a:visited:focus {
text-decoration: underline;
}
.how__card-link a {
text-underline-offset: 3px;
}
.how__faqs {
margin-top: 20px;
text-align: center;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 20px;
color: #000000;
}
.how__faqs a {
color: inherit;
}
.how__faqs a, .how__faqs a:hover, .how__faqs a:focus, .how__faqs a:visited, .how__faqs a:visited:hover, .how__faqs a:visited:focus {
text-decoration: underline;
}
.how__faqs a {
text-underline-offset: 3px;
}
.lego-sets {
margin-top: 120px;
padding-bottom: 80px;
}
.lego-sets__panel {
margin: 0 208px;
background: #EADFCF;
border-radius: 20px;
overflow: hidden;
}
.lego-sets__header {
display: flex;
align-items: flex-start;
gap: 60px;
padding: 80px 48px 32px;
}
.lego-sets__header-title {
flex: none;
}
.lego-sets__intro-wrap {
flex: 1;
min-width: 0;
padding-top: 12px;
}
.lego-sets__title {
margin: 0;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 64px;
line-height: normal;
color: #000000;
white-space: nowrap;
}
.lego-sets__intro {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: #000000;
}
.lego-sets__controls {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 0 48px;
margin-bottom: -32px;
position: relative;
z-index: 2;
}
.lego-sets__controls[hidden] {
display: none;
}
.lego-sets__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 2px solid #000000;
border-radius: 50%;
background: transparent;
color: #000000;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.lego-sets__arrow:hover:not(:disabled) {
background: #000000;
color: #FFFFFF;
}
.lego-sets__arrow:disabled {
opacity: 0.25;
cursor: default;
}
.lego-sets__stage-outer {
padding: 0;
}
.lego-sets__stage {
--sets-in-view: 3.5;
--sets-gaps: 3;
--sets-gap: 80px;
position: relative;
height: auto;
min-height: 420px;
display: flex;
align-items: flex-end;
gap: var(--sets-gap);
overflow-x: auto;
overflow-y: hidden;
padding: 80px 48px 48px;
scroll-snap-type: x mandatory;
scroll-padding-inline: 48px;
-webkit-overflow-scrolling: touch;
cursor: grab;
transition: min-height 0.45s ease;
scrollbar-gutter: stable;
}
.lego-sets__stage.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.lego-sets__stage.is-grid {
min-height: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: end;
gap: 48px 36px;
overflow: visible;
padding-bottom: 48px;
scroll-snap-type: none;
cursor: default;
}
.lego-sets__cell {
display: flex;
align-items: flex-end;
flex: 0 0 calc((100% - var(--sets-gaps) * var(--sets-gap)) / var(--sets-in-view));
scroll-snap-align: center;
}
.lego-sets__stage.is-grid .lego-sets__cell {
flex-direction: column;
align-items: center;
justify-content: flex-end;
scroll-snap-align: none;
}
.lego-sets__caption {
display: none;
margin: 16px 0 0;
text-align: center;
font-family: "DM Sans", sans-serif;
color: #000000;
}
.lego-sets__stage.is-grid .lego-sets__caption {
display: block;
}
.lego-sets__caption .t-bold {
display: block;
font-weight: 700;
font-size: 20px;
line-height: 1.2;
}
.lego-sets__caption-sub {
display: block;
margin-top: 4px;
font-weight: 500;
font-size: 15px;
color: rgba(0, 0, 0, 0.4);
}
.lego-sets__item {
position: relative !important;
left: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: none;
max-height: 360px !important;
height: auto;
flex: 0 0 auto;
object-fit: contain;
object-position: bottom;
scroll-snap-align: center;
cursor: pointer;
transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.35s ease, max-height 0.35s ease;
}
.lego-sets__stage.is-grid .lego-sets__cell .lego-sets__item {
width: 100% !important;
max-height: 300px !important;
justify-self: center;
scroll-snap-align: none;
}
.lego-sets__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
padding: 0 48px 24px;
}
.lego-sets__detail-wrap {
padding: 24px 48px 70px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.lego-sets__detail {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 24px;
text-align: center;
color: #000000;
transition: opacity 0.25s ease;
}
.lego-sets__detail--empty {
color: rgba(0, 0, 0, 0.4);
}
.lego-sets__item {
-webkit-user-drag: none;
user-drag: none;
user-select: none;
-webkit-user-select: none;
}
.cafe-progress {
margin-top: 120px;
padding-bottom: 80px;
}
.cafe-progress__panel {
margin: 0 208px;
background: #FFFFFF;
border-radius: 20px;
box-shadow: 30px 24px 84px 0 rgba(0, 0, 0, 0.25);
padding: 80px 0 173px;
}
.cafe-progress__title {
margin: 0;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 64px;
line-height: normal;
color: #000000;
text-align: center;
}
.cafe-progress__timeline {
margin: 0 auto;
padding: 0 48px;
max-width: 1152px;
}
.cafe-progress__timeline-rail {
position: relative;
}
.cafe-progress__bricks {
display: flex;
align-items: flex-end;
position: relative;
z-index: 2;
}
.cafe-progress__track {
width: 100%;
height: 24px;
display: block;
margin-top: -2px;
position: relative;
z-index: 1;
}
.cafe-progress__milestones {
display: flex;
margin-top: 10px;
}
.cafe-progress__milestone {
text-align: center;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 13px;
line-height: 1.3;
flex-shrink: 0;
}
.cafe-progress__carousel-wrap {
margin-top: 40px;
}
.cafe-progress__carousel {
display: flex;
gap: 16px;
overflow-x: auto;
cursor: grab;
user-select: none;
padding: 69px 48px;
-webkit-overflow-scrolling: touch;
}
.cafe-progress__photo {
flex: none;
width: 300px;
height: 420px;
border-radius: 20px;
overflow: hidden;
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.cafe-progress__photo:hover {
transform: scale(1.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
}
.cafe-progress__photo-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.cafe-progress__follow {
margin: 30px 0 0;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 24px;
text-align: center;
color: #000000;
}
.cafe-progress__socials {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 20px;
}
.gallery-bar {
--gallery-thumb-studs: 4;
padding: 0 48px;
margin-top: 8px;
}
.gallery-bar.is-inactive {
visibility: hidden;
}
.gallery-bar__control {
position: relative;
height: 56px;
cursor: pointer;
touch-action: none;
}
.gallery-bar__control:focus-visible {
outline: 3px solid #FF8200;
outline-offset: 8px;
border-radius: 6px;
}
.gallery-bar__plate {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: block;
fill: #FFFFFF;
stroke: #000000;
stroke-width: 2;
overflow: visible;
pointer-events: none;
}
.gallery-bar__brick {
position: absolute;
left: 0;
top: 0;
display: block;
fill: #FF8200;
cursor: grab;
will-change: transform;
}
.gallery-bar.is-dragging .gallery-bar__brick {
cursor: grabbing;
}
@media (max-width: 1280px) {
.gallery-bar {
padding: 0 32px;
}
}
@media (max-width: 700px) {
.gallery-bar {
padding: 0 20px;
--gallery-thumb-studs: 2;
}
}
.why {
margin-top: 120px;
padding-bottom: 80px;
}
.why__panel {
margin: 0 208px;
background: #0066FF;
border-radius: 20px;
padding: 80px 48px 94px;
}
.why__title {
margin: 0;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 64px;
line-height: normal;
color: #FFFFFF;
text-align: center;
}
.why__features {
display: flex;
justify-content: center;
gap: 80px;
margin-top: 64px;
}
.why__feature {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 329px;
}
.why__feature-badge {
position: absolute;
top: 100px;
left: 40%;
transform: translateX(-40%) rotate(4deg);
z-index: 2;
padding: 8px 18px;
border-radius: 999px;
background: #FF8200;
color: #FFFFFF;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.why__feature-icon {
display: flex;
align-items: center;
justify-content: center;
height: 180px;
}
.why__feature-icon img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.why__feature-text {
margin: 32px 0 0;
font-family: "DM Sans", sans-serif;
font-size: 20px;
line-height: normal;
color: #FFFFFF;
}
.why__cta {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 48px;
}
.why__cta-title {
margin: 0;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: normal;
color: #FFFFFF;
}
.why__cta-text {
margin: 16px 0 0;
max-width: 845px;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 32px;
line-height: 44px;
text-align: center;
color: #FFFFFF;
}
.why__cta .btn {
margin-top: 40px;
}
.where {
margin-top: 120px;
padding-bottom: 80px;
}
.where__panel {
margin: 0 208px;
background: #FF8200;
border-radius: 20px;
box-shadow: 30px 24px 84px 0 rgba(0, 0, 0, 0.25);
padding: 130px 48px 156px;
}
.where__title {
margin: 0;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 64px;
line-height: normal;
color: #000000;
text-align: center;
}
.where__text {
margin: 32px auto 0;
max-width: 977px;
text-align: center;
}
.where__line {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 32px;
line-height: 44px;
color: #000000;
}
.where__line--bold {
font-weight: 700;
margin-top: 20px;
}
.where__socials {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 40px;
}
.where__map {
margin-top: 32px;
}
.where__map .btn {
color: #000000;
text-decoration: none;
font-size: 17px;
}
.where__map .btn:hover {
color: #FFFFFF;
}
.where a {
color: white;
}
.builder {
margin-top: 120px;
padding-bottom: 80px;
}
.builder__panel {
margin: 0 208px;
background: #111111;
border-radius: 20px;
padding: 80px 48px 64px;
}
.builder__intro {
text-align: center;
margin-bottom: 56px;
}
.builder__title {
margin: 0;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 64px;
line-height: normal;
color: #FFFFFF;
}
.builder__subtitle {
margin: 20px auto 0;
max-width: 845px;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: normal;
color: #FFFFFF;
}
.builder__layout {
display: flex;
gap: 48px;
align-items: center;
}
.builder__grid {
flex: none;
width: 848px;
height: 742px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.15);
user-select: none;
cursor: default;
}
.builder__row {
display: flex;
position: relative;
}
.builder__brick {
position: absolute;
object-fit: fill;
display: block;
pointer-events: none;
z-index: 1;
}
.builder__controls {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.builder__controls-title {
margin: 0;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 44px;
text-align: center;
color: #FFFFFF;
}
.builder__sizes {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 32px;
}
.builder__size-btn {
padding: 0;
border: none;
background: transparent;
cursor: pointer;
transition: transform 0.15s ease;
}
.builder__colors {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 32px;
}
.builder__color-btn {
width: 44px;
height: 44px;
border: none;
outline: none;
border-radius: 9999px;
cursor: pointer;
transition: transform 0.15s ease;
}
.builder__actions {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 48px;
}
.builder__actions--single {
margin-top: 12px;
}
.site-footer {
margin-top: 80px;
padding-bottom: 48px;
}
.site-footer__divider {
margin: 0 305px 48px;
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.site-footer__cols {
margin: 0 305px;
display: flex;
gap: 40px;
}
.site-footer__col--legal {
flex: 1;
}
.site-footer__col--find {
flex: none;
width: 216px;
}
.site-footer__col--hours, .site-footer__col--follow {
flex: none;
width: 188px;
}
.site-footer__heading {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: normal;
color: #000000;
}
.site-footer__text {
margin: 4px 0 0;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: normal;
color: #000000;
}
.site-footer__text--legal {
max-width: 325px;
}
.site-footer__text--nowrap {
white-space: nowrap;
}
.site-footer__text a {
color: inherit;
text-decoration: none;
}
.site-footer__text a:hover, .site-footer__text a:focus-visible, .site-footer__text a:visited:hover, .site-footer__text a:visited:focus-visible {
text-decoration: underline;
}
.site-footer__text a {
text-underline-offset: 3px;
word-break: normal;
overflow-wrap: normal;
}
.site-footer__policies a + a::before {
content: "·";
margin: 0 8px;
text-decoration: none;
display: inline-block;
}
.site-footer__col--hours .site-footer__heading,
.site-footer__col--hours .site-footer__text {
line-height: 30px;
}
.site-footer__socials {
display: flex;
gap: 10px;
margin-top: 8px;
}
.footer-bricks {
position: relative;
width: 100%;
height: clamp(300px, 30vw, 340px);
overflow: hidden;
}
.footer-bricks__piece {
position: absolute;
}
.about {
margin-top: 120px;
}
.about__panel {
padding: 80px 48px 72px;
}
.about__eyebrow {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(17, 17, 17, 0.55);
text-align: center;
}
.about__title {
margin: 14px 0 0;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 30px;
line-height: normal;
color: #FFFFFF;
text-align: center;
}
.about__text {
max-width: 1180px;
margin: 40px auto 0;
}
.about__text p {
margin: 0 0 22px;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.62;
color: #FFFFFF;
}
.about__text p:last-child {
margin-bottom: 0;
}
.about__lead {
font-weight: 500 !important;
font-size: 21px !important;
}
.about__signoff {
font-weight: 500 !important;
}
.about__more {
margin-top: 22px;
}
.about__more[hidden] {
display: none;
}
.about__toggle {
display: block;
margin: 40px auto 0;
padding: 14px 28px;
border: 2px solid #FFFFFF;
border-radius: 8px;
background: transparent;
cursor: pointer;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 1;
color: #FFFFFF;
transition: background-color 0.2s ease, color 0.2s ease;
}
.about__toggle:hover {
background: #FFFFFF;
color: #000000;
}
@media (max-width: 1030px) {
.about__panel {
margin: 0 0px;
padding: 56px 10px 48px;
text-align: center;
}
.about__title {
font-size: clamp(34px, 7vw, 52px);
}
.about__eyebrow {
font-size: 15px;
}
.about__text {
margin-top: 28px;
}
.about__text p {
font-size: 17px;
line-height: 1.6;
}
.about__lead {
font-size: 19px !important;
}
}
.contact {
margin-top: 120px;
padding-bottom: 40px;
}
.contact__panel {
margin: 0 208px;
padding: 80px 48px 88px;
background: #0066FF;
border-radius: 20px;
text-align: center;
}
.contact__title {
margin: 0;
font-family: "F37Analogue", sans-serif;
font-weight: 700;
font-size: 48px;
line-height: normal;
color: #FFFFFF;
}
.contact__text {
max-width: 640px;
margin: 24px auto 0;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1.5;
color: #FFFFFF;
}
.contact__email {
display: inline-block;
margin-top: 28px;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 1;
color: #FFFFFF;
text-decoration: none;
text-underline-offset: 5px;
transition: color 0.2s ease;
}
.contact__email:hover {
color: #000000;
}
.contact__btn {
margin-top: 36px;
}
@media (max-width: 1030px) {
.contact__panel {
margin: 0 24px;
padding: 56px 24px 64px;
}
.contact__title {
font-size: clamp(32px, 7vw, 44px);
}
.contact__text {
font-size: 18px;
margin-top: 20px;
}
.contact__email {
font-size: 18px;
word-break: break-word;
}
}
@media (max-width: 1280px) {
body {
align-items: stretch;
}
img {
max-width: 100%;
}
.section {
min-width: 0;
}
.stage {
width: 100%;
left: auto;
transform: none;
}
.nav__bg, .nav__pill, .nav__link {
display: none;
}
.nav__home-cup {
left: max(16px, env(safe-area-inset-left));
top: 12px;
width: 72px;
height: 45px;
}
.nav__booking {
left: auto;
right: max(16px, env(safe-area-inset-right));
top: 12px;
width: min(220px, 100vw - 120px);
}
.how {
padding: 0 24px 64px;
}
.how__cards {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.how__card {
width: 100% !important;
max-width: 100%;
}
.how__card:hover {
transform: none;
}
.how__card-panel {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
min-height: 420px;
padding: 40px 24px 44px;
}
.how__card-num, .how__card-title, .how__card-body, .how__card-link {
position: static;
transform: none;
white-space: normal;
width: auto !important;
}
.how__card-title {
margin-top: 10px;
}
.how__card-body {
margin-top: 20px;
}
.how__card-link {
margin-top: 18px;
}
.lego-sets,
.cafe-progress,
.why,
.where,
.builder {
margin-top: 80px;
padding: 0 24px 64px;
}
.lego-sets__panel,
.cafe-progress__panel,
.why__panel,
.where__panel,
.builder__panel {
margin: 0;
border-radius: 18px;
}
.lego-sets__header {
display: block;
padding: 56px 32px 24px;
}
.lego-sets__title {
white-space: normal;
font-size: 32px;
line-height: 1.2;
}
.lego-sets__intro-wrap {
padding-top: 20px;
}
.lego-sets__controls {
padding: 0 32px;
}
.lego-sets__stage {
--sets-in-view: 2.5;
--sets-gaps: 2;
--sets-gap: 28px;
min-height: 360px;
padding-top: 56px;
padding-inline: 32px;
}
.lego-sets__stage.is-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lego-sets__item {
max-height: 320px !important;
}
.lego-sets__detail-wrap {
padding: 22px 32px 48px;
}
.cafe-progress__panel {
padding: 56px 0 72px;
}
.cafe-progress__title {
font-size: 32px;
line-height: 1.2;
padding: 0 32px;
}
.why__panel {
padding: 56px 32px 72px;
}
.why__title {
font-size: 32px;
line-height: 1.2;
}
.why__features {
flex-wrap: wrap;
gap: 48px 32px;
}
.where__panel {
padding: 72px 32px 88px;
}
.where__title {
font-size: 32px;
line-height: 1.2;
}
.builder__panel {
padding: 56px 32px 56px;
}
.builder__title {
font-size: 32px;
line-height: 1.2;
}
.builder__layout {
flex-direction: column;
align-items: center;
}
.builder__grid {
width: min(848px, 100%);
height: auto;
touch-action: none;
}
.builder__controls {
width: 100%;
max-width: 520px;
}
.builder__actions {
flex-wrap: wrap;
}
.site-footer {
padding: 0 24px 48px;
}
.site-footer__divider, .site-footer__cols {
margin-left: 0;
margin-right: 0;
}
.site-footer__cols {
flex-wrap: wrap;
}
}
@media (max-width: 700px) {
.nav__home-cup {
width: 58px;
height: 36px;
}
.nav__booking {
width: 172px;
height: 44px;
}
.nav__booking-label {
font-size: 14px;
}
.how {
padding-left: 16px;
padding-right: 16px;
}
.how__title {
font-size: 32px;
}
.how__cards {
gap: 18px;
}
.how__card:hover {
transform: none;
}
.how__card-panel {
height: 100%;
min-height: 380px;
padding: 32px 20px 36px;
}
.how__card-num, .how__card-title, .how__card-body {
position: static;
transform: none;
white-space: normal;
width: auto !important;
}
.how__card-title {
font-size: 68px;
margin-top: 14px;
}
.how__card-body {
margin-top: 24px;
}
.how__note {
font-size: 24px;
}
.lego-sets,
.cafe-progress,
.why,
.where,
.builder {
margin-top: 56px;
padding-left: 16px;
padding-right: 16px;
}
.lego-sets__header {
padding: 40px 20px 16px;
}
.lego-sets__intro {
font-size: 18px;
line-height: 1.45;
}
.lego-sets__controls {
padding: 0 20px;
}
.lego-sets__stage {
--sets-in-view: 1.35;
--sets-gaps: 1;
--sets-gap: 20px;
min-height: 300px;
padding-top: 40px;
padding-bottom: 32px;
padding-inline: 20px;
}
.lego-sets__stage.is-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.lego-sets__item {
max-height: 260px !important;
}
.lego-sets__actions {
padding: 0 20px 20px;
}
.lego-sets__detail {
font-size: 18px;
line-height: 1.4;
}
.cafe-progress__panel,
.why__panel,
.where__panel,
.builder__panel {
padding-left: 20px;
padding-right: 20px;
}
.cafe-progress__carousel {
padding: 40px 20px;
gap: 12px;
}
.cafe-progress__photo {
width: min(78%, 300px);
height: auto;
aspect-ratio: 5/7;
border-radius: 14px;
}
.why__features {
display: block;
margin-top: 40px;
}
.why__feature {
width: 100%;
margin: 0 auto 42px;
}
.why__cta-text {
font-size: 22px;
line-height: 1.35;
}
.where__line {
font-size: 22px;
line-height: 1.4;
}
.builder__panel {
padding-top: 40px;
}
.builder__subtitle {
font-size: 18px;
line-height: 1.4;
}
.builder__layout {
gap: 32px;
}
.builder__controls-title {
font-size: 28px;
line-height: 1.2;
}
.builder__sizes {
gap: 14px;
}
.site-footer__cols {
display: block;
}
.site-footer__col {
width: auto !important;
margin-top: 28px;
}
.how__card-body,
.about__text p,
.about__lead,
.contact__text,
.why__feature-text {
font-size: 16px;
line-height: 1.6;
}
.about__lead {
font-size: 17px;
}
}
.nav__toggle {
display: none;
position: absolute;
top: 12px;
right: max(16px, env(safe-area-inset-right));
z-index: 2;
width: 48px;
height: 48px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
pointer-events: auto;
align-items: center;
justify-content: center;
}
.nav__toggle-burger, .nav__toggle-x {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__toggle-burger {
width: 30px;
height: auto;
opacity: 1;
}
.nav__toggle-x {
width: 28px;
height: 28px;
opacity: 0;
}
.nav__toggle-x-bar {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2.5px;
margin-top: -1.25px;
border-radius: 2px;
background: #FFFFFF;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.nav__toggle.is-active .nav__toggle-burger {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
.nav__toggle.is-active .nav__toggle-x {
opacity: 1;
}
.nav__toggle.is-active .nav__toggle-x .nav__toggle-x-bar:nth-child(1) {
transform: rotate(45deg);
}
.nav__toggle.is-active .nav__toggle-x .nav__toggle-x-bar:nth-child(2) {
transform: rotate(-45deg);
}
.nav-menu {
position: fixed;
inset: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 130, 0, 0.92);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.nav-menu.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.nav-menu__inner {
width: 100%;
max-width: 560px;
padding: 0 clamp(20px, 8vw, 40px);
margin-top: 64px;
}
.nav-menu__link {
display: block;
padding: clamp(12px, 3.4vw, 22px) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.28);
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: clamp(20px, 5vw, 30px);
line-height: 1.1;
color: #FFFFFF;
text-align: center;
text-decoration: none;
opacity: 0;
transform: translateY(14px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-menu__link:first-child {
border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.nav-menu__link:active {
color: rgba(255, 255, 255, 0.7);
}
.nav-menu__booking {
display: block;
width: 100%;
margin: clamp(28px, 6vw, 44px) auto 0;
padding: 18px 24px;
border: 2px solid #FFFFFF;
border-radius: 8px;
background: transparent;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: clamp(18px, 4.6vw, 24px);
line-height: 1;
color: #FFFFFF;
text-align: center;
opacity: 0;
transform: translateY(14px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-menu.is-open .nav-menu__link, .nav-menu.is-open .nav-menu__booking {
opacity: 1;
transform: translateY(0);
}
body.nav-open {
position: fixed;
left: 0;
right: 0;
overflow: hidden;
}
@media (max-width: 1280px) {
.nav__toggle {
display: flex;
}
.nav__booking {
display: none;
}
}
@media (min-width: 1281px) {
.nav-menu {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.nav-menu,
.nav-menu__link,
.nav-menu__booking,
.nav__toggle-bar {
transition-duration: 0.01ms !important;
}
.nav-menu__link,
.nav-menu__booking {
transform: none !important;
}
}