1807 lines
27 KiB
CSS
1807 lines
27 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: calc(var(--header-height) + 40px);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: var(--font-sans);
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
word-break: keep-all;
|
|
overflow-wrap: break-word;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select {
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
button,
|
|
a {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
figure,
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
dl,
|
|
dd {
|
|
margin: 0;
|
|
}
|
|
|
|
fieldset {
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.wrap {
|
|
width: min(var(--wrap), calc(100% - (var(--gutter) * 2)));
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.skip-link {
|
|
position: fixed;
|
|
z-index: 100;
|
|
top: 12px;
|
|
left: 12px;
|
|
padding: 12px 16px;
|
|
background: var(--ink);
|
|
color: white;
|
|
transform: translateY(-180%);
|
|
}
|
|
|
|
.skip-link:focus {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 3px solid var(--focus);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.truth-bar {
|
|
padding: 7px var(--gutter);
|
|
background: var(--blue);
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.site-head {
|
|
position: sticky;
|
|
z-index: 20;
|
|
top: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgb(244 241 233 / 94%);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.head-row {
|
|
min-height: var(--header-height);
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: clamp(20px, 4vw, 54px);
|
|
}
|
|
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
font-size: 20px;
|
|
font-weight: 850;
|
|
letter-spacing: -0.07em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: grid;
|
|
align-content: center;
|
|
gap: 3px;
|
|
padding: 5px;
|
|
background: var(--blue);
|
|
}
|
|
|
|
.brand-mark i {
|
|
display: block;
|
|
height: 2px;
|
|
background: white;
|
|
}
|
|
|
|
.brand-mark i:nth-child(2) {
|
|
width: 75%;
|
|
}
|
|
|
|
.brand-mark i:nth-child(3) {
|
|
width: 52%;
|
|
}
|
|
|
|
.head-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(18px, 3vw, 34px);
|
|
font-size: 14px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.head-nav a {
|
|
position: relative;
|
|
min-width: 24px;
|
|
min-height: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.head-nav a::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -8px;
|
|
left: 0;
|
|
height: 2px;
|
|
background: var(--blue);
|
|
transform: scaleX(0);
|
|
transform-origin: right;
|
|
transition: transform 180ms ease;
|
|
}
|
|
|
|
.head-nav a:hover::after,
|
|
.head-nav a:focus-visible::after {
|
|
transform: scaleX(1);
|
|
transform-origin: left;
|
|
}
|
|
|
|
.head-action {
|
|
min-height: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px 16px;
|
|
background: var(--ink);
|
|
color: white;
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.hero {
|
|
min-height: min(820px, calc(100svh - var(--header-height) - 30px));
|
|
display: grid;
|
|
grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
|
|
position: relative;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.hero-copy {
|
|
align-self: center;
|
|
max-width: 630px;
|
|
padding: clamp(72px, 9vw, 132px) var(--gutter);
|
|
padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
|
|
}
|
|
|
|
.section-kicker {
|
|
color: var(--blue);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.hero h1 {
|
|
max-width: 620px;
|
|
margin-top: 22px;
|
|
font-size: clamp(54px, 5.7vw, 80px);
|
|
font-weight: 900;
|
|
letter-spacing: -0.085em;
|
|
line-height: 0.98;
|
|
}
|
|
|
|
.hero-lead {
|
|
max-width: 520px;
|
|
margin-top: 30px;
|
|
color: var(--ink-soft);
|
|
font-size: clamp(17px, 1.5vw, 21px);
|
|
line-height: 1.72;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 22px;
|
|
margin-top: 38px;
|
|
}
|
|
|
|
.button {
|
|
min-height: 48px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
padding: 12px 20px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 750;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.button-primary {
|
|
border-color: var(--blue);
|
|
background: var(--blue);
|
|
color: white;
|
|
}
|
|
|
|
.button-primary:hover {
|
|
background: var(--blue-dark);
|
|
}
|
|
|
|
.text-link {
|
|
font-weight: 750;
|
|
border-bottom: 1px solid var(--ink);
|
|
}
|
|
|
|
.hero-facts {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-top: 54px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.hero-facts dt {
|
|
color: var(--ink-faint);
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.hero-facts dd {
|
|
margin-top: 5px;
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.hero-media {
|
|
min-height: 650px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--steel);
|
|
}
|
|
|
|
.hero-media img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: 52% center;
|
|
}
|
|
|
|
.hero-media picture {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.hero-media figcaption {
|
|
position: absolute;
|
|
right: 18px;
|
|
bottom: 18px;
|
|
left: 18px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
padding: 10px 12px;
|
|
background: rgb(33 31 28 / 82%);
|
|
color: white;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.hero-order {
|
|
position: absolute;
|
|
right: clamp(20px, 4vw, 60px);
|
|
bottom: -38px;
|
|
width: min(350px, calc(100% - 40px));
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 0 16px;
|
|
padding: 20px;
|
|
background: var(--blue);
|
|
color: white;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.order-index {
|
|
grid-row: 1 / 4;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hero-order p {
|
|
font-size: 22px;
|
|
font-weight: 850;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.hero-order strong {
|
|
margin-top: 2px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.hero-order button {
|
|
justify-self: start;
|
|
margin-top: 12px;
|
|
padding: 0 0 3px;
|
|
border: 0;
|
|
border-bottom: 1px solid white;
|
|
background: transparent;
|
|
color: white;
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.service-strip {
|
|
padding: 58px 0 20px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.service-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, auto);
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
color: var(--ink-soft);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.service-row p:first-child span {
|
|
margin-right: 7px;
|
|
color: var(--success);
|
|
font-size: 8px;
|
|
}
|
|
|
|
.mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.section {
|
|
padding-block: var(--section);
|
|
}
|
|
|
|
.section-head {
|
|
margin-bottom: clamp(38px, 6vw, 72px);
|
|
}
|
|
|
|
.split-head {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
|
|
align-items: end;
|
|
gap: 44px;
|
|
}
|
|
|
|
.section h2,
|
|
.franchise-callout h2 {
|
|
margin-top: 14px;
|
|
font-size: clamp(40px, 5.4vw, 72px);
|
|
font-weight: 880;
|
|
letter-spacing: -0.075em;
|
|
line-height: 1.06;
|
|
}
|
|
|
|
.section-note {
|
|
max-width: 440px;
|
|
color: var(--ink-soft);
|
|
font-size: 14px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.menu-section {
|
|
background: var(--paper-bright);
|
|
}
|
|
|
|
.menu-toolbar {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 22px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.filter-button,
|
|
.region-filters button {
|
|
min-height: 44px;
|
|
flex: 0 0 auto;
|
|
padding: 9px 17px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.filter-button.is-active,
|
|
.region-filters button.is-active {
|
|
border-color: var(--ink);
|
|
background: var(--ink);
|
|
color: white;
|
|
}
|
|
|
|
.menu-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
border-top: 1px solid var(--ink);
|
|
}
|
|
|
|
.menu-item {
|
|
min-width: 0;
|
|
grid-column: span 4;
|
|
border-right: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--paper-bright);
|
|
}
|
|
|
|
.menu-item:nth-child(3n) {
|
|
border-right: 0;
|
|
}
|
|
|
|
.menu-item-featured {
|
|
grid-column: span 6;
|
|
}
|
|
|
|
.menu-item-graphic,
|
|
.menu-item-blue {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.menu-item-small {
|
|
grid-column: span 4;
|
|
}
|
|
|
|
.menu-photo,
|
|
.ingredient-stack,
|
|
.menu-poster {
|
|
aspect-ratio: 4 / 3;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu-photo img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.menu-number {
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 14px;
|
|
width: 38px;
|
|
height: 38px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--paper-bright);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ingredient-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
background: var(--steel);
|
|
}
|
|
|
|
.ingredient-stack span {
|
|
width: 62%;
|
|
height: 9%;
|
|
display: block;
|
|
border-radius: 45% 45% 15% 15%;
|
|
background: var(--ink);
|
|
}
|
|
|
|
.ingredient-stack .bun {
|
|
height: 19%;
|
|
background: #d89643;
|
|
}
|
|
|
|
.ingredient-stack .bun.bottom {
|
|
height: 11%;
|
|
border-radius: 10% 10% 35% 35%;
|
|
}
|
|
|
|
.ingredient-stack .pickle {
|
|
height: 4%;
|
|
background: #4e6726;
|
|
}
|
|
|
|
.ingredient-stack .cheese {
|
|
width: 67%;
|
|
height: 5%;
|
|
background: var(--cheese);
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
.ingredient-stack .patty {
|
|
height: 11%;
|
|
border-radius: 30%;
|
|
background: #4a2118;
|
|
}
|
|
|
|
.ingredient-stack b {
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 14px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.menu-poster {
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--blue);
|
|
color: white;
|
|
}
|
|
|
|
.menu-poster span {
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 14px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.menu-poster i {
|
|
width: 68%;
|
|
height: 14px;
|
|
position: absolute;
|
|
background: white;
|
|
transform: rotate(-8deg);
|
|
}
|
|
|
|
.menu-poster i:nth-child(3) {
|
|
transform: rotate(8deg) translateY(25px);
|
|
}
|
|
|
|
.menu-poster i:nth-child(4) {
|
|
width: 42%;
|
|
transform: translateY(-28px);
|
|
}
|
|
|
|
.menu-body {
|
|
display: grid;
|
|
align-content: space-between;
|
|
gap: 24px;
|
|
min-height: 280px;
|
|
padding: clamp(20px, 3vw, 30px);
|
|
}
|
|
|
|
.menu-item-small .menu-body {
|
|
min-height: 240px;
|
|
}
|
|
|
|
.menu-state {
|
|
color: var(--blue);
|
|
font-size: 11px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.menu-body h3 {
|
|
margin-top: 6px;
|
|
font-size: clamp(24px, 2.5vw, 34px);
|
|
font-weight: 850;
|
|
letter-spacing: -0.055em;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.menu-body > p {
|
|
color: var(--ink-soft);
|
|
font-size: 14px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.menu-foot {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding-top: 18px;
|
|
border-top: 1px solid var(--line);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.menu-foot small {
|
|
display: block;
|
|
color: var(--ink-faint);
|
|
font-size: 10px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.menu-foot button,
|
|
.empty-state button,
|
|
.store-card button {
|
|
min-height: 44px;
|
|
padding: 9px 14px;
|
|
border: 1px solid var(--ink);
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.menu-foot button:hover,
|
|
.store-card button:hover {
|
|
background: var(--ink);
|
|
color: white;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 44px 24px;
|
|
border: 1px solid var(--line);
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-state strong {
|
|
display: block;
|
|
margin-bottom: 18px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.builder-section {
|
|
background: var(--ink);
|
|
color: white;
|
|
}
|
|
|
|
.builder-section > .wrap > .section-head .section-kicker {
|
|
color: #8ea5ff;
|
|
}
|
|
|
|
.builder-summary .section-kicker {
|
|
color: var(--blue);
|
|
}
|
|
|
|
.builder-section .section-note {
|
|
color: #bbb5ad;
|
|
}
|
|
|
|
.builder-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.9fr);
|
|
gap: clamp(28px, 5vw, 70px);
|
|
align-items: start;
|
|
}
|
|
|
|
.builder-form {
|
|
border-top: 1px solid #625f5a;
|
|
}
|
|
|
|
.builder-form fieldset {
|
|
padding: 28px 0 32px;
|
|
border-bottom: 1px solid #625f5a;
|
|
}
|
|
|
|
.builder-form legend {
|
|
width: 100%;
|
|
margin-bottom: 18px;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.builder-form legend span {
|
|
margin-right: 12px;
|
|
color: #8ea5ff;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.choice-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.choice-row label {
|
|
position: relative;
|
|
}
|
|
|
|
.choice-row input {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.choice-row label > span {
|
|
min-height: 70px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 14px 16px;
|
|
border: 1px solid #625f5a;
|
|
border-radius: var(--radius-sm);
|
|
color: #d7d2ca;
|
|
}
|
|
|
|
.choice-row label > span small {
|
|
color: #9f9a92;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.choice-row input:checked + span {
|
|
border-color: #8ea5ff;
|
|
background: var(--blue);
|
|
color: white;
|
|
}
|
|
|
|
.choice-row input:checked + span small {
|
|
color: #dce4ff;
|
|
}
|
|
|
|
.choice-row input:focus-visible + span {
|
|
outline: 3px solid #8ea5ff;
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.choice-row-compact label > span {
|
|
min-height: 54px;
|
|
}
|
|
|
|
.field-label,
|
|
.select-grid label {
|
|
display: block;
|
|
color: #c9c3bb;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.field-label {
|
|
margin: 18px 0 7px;
|
|
}
|
|
|
|
.builder-form select {
|
|
width: 100%;
|
|
min-height: 48px;
|
|
padding: 10px 38px 10px 12px;
|
|
border: 1px solid #625f5a;
|
|
border-radius: var(--radius-sm);
|
|
background: #2b2926;
|
|
color: white;
|
|
}
|
|
|
|
.select-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.select-grid label select {
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.set-options {
|
|
margin-top: 18px;
|
|
padding: 18px;
|
|
border: 1px solid #4d4a46;
|
|
background: #292724;
|
|
}
|
|
|
|
.set-options > p {
|
|
margin-bottom: 12px;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.set-options.is-disabled {
|
|
opacity: 0.48;
|
|
}
|
|
|
|
.field-help {
|
|
margin-top: 8px;
|
|
color: #9f9a92;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.builder-summary {
|
|
min-width: 0;
|
|
position: sticky;
|
|
top: calc(var(--header-height) + 24px);
|
|
background: var(--paper-bright);
|
|
color: var(--ink);
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.summary-photo {
|
|
min-width: 0;
|
|
aspect-ratio: 4 / 3;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--steel);
|
|
}
|
|
|
|
.summary-photo img {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.summary-stamp {
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 14px;
|
|
padding: 6px 9px;
|
|
background: var(--blue);
|
|
color: white;
|
|
font-size: 10px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.summary-body {
|
|
padding: clamp(22px, 4vw, 34px);
|
|
}
|
|
|
|
.summary-body h3 {
|
|
margin-top: 8px;
|
|
font-size: 35px;
|
|
font-weight: 880;
|
|
letter-spacing: -0.06em;
|
|
}
|
|
|
|
#summary-lines {
|
|
margin-top: 8px;
|
|
color: var(--ink-soft);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.summary-list {
|
|
margin-top: 24px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.summary-list div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.summary-list dt {
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
.summary-list dd {
|
|
text-align: right;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.allergen-note {
|
|
margin-top: 18px;
|
|
padding: 14px;
|
|
border-left: 3px solid var(--cheese);
|
|
background: #fff4d5;
|
|
}
|
|
|
|
.allergen-note strong,
|
|
.allergen-note p,
|
|
.allergen-note small {
|
|
display: block;
|
|
}
|
|
|
|
.allergen-note strong {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.allergen-note p {
|
|
margin-top: 3px;
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.allergen-note small {
|
|
margin-top: 6px;
|
|
color: #5d4b1e;
|
|
font-size: 10px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.summary-total {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.summary-total span {
|
|
color: var(--ink-faint);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.summary-total strong {
|
|
font-family: var(--font-mono);
|
|
font-size: 23px;
|
|
}
|
|
|
|
.truth-inline {
|
|
margin-top: 7px;
|
|
color: var(--danger);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.button-full {
|
|
width: 100%;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.button-ghost {
|
|
margin-top: 8px;
|
|
border-color: var(--line);
|
|
background: transparent;
|
|
}
|
|
|
|
.save-status {
|
|
min-height: 23px;
|
|
margin-top: 10px;
|
|
color: var(--success);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.save-status.is-error {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.process-section {
|
|
padding-block: 0;
|
|
background: var(--steel);
|
|
}
|
|
|
|
.process-grid {
|
|
width: 100%;
|
|
max-width: none;
|
|
display: grid;
|
|
grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
|
|
}
|
|
|
|
.process-copy {
|
|
padding: var(--section) max(var(--gutter), calc((100vw - var(--wrap)) / 2));
|
|
}
|
|
|
|
.process-copy h2 {
|
|
font-size: clamp(40px, 4.8vw, 68px);
|
|
}
|
|
|
|
.process-list {
|
|
margin: 52px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
border-top: 1px solid var(--line-strong);
|
|
}
|
|
|
|
.process-list li {
|
|
display: grid;
|
|
grid-template-columns: 38px 1fr;
|
|
gap: 16px;
|
|
padding: 22px 0;
|
|
border-bottom: 1px solid var(--line-strong);
|
|
}
|
|
|
|
.process-list li > span {
|
|
color: var(--blue);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.process-list strong {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.process-list p {
|
|
margin-top: 3px;
|
|
color: var(--ink-soft);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.process-media {
|
|
min-height: 720px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #b5b9b8;
|
|
}
|
|
|
|
.process-media img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.process-media figcaption {
|
|
position: absolute;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
padding: 7px 10px;
|
|
background: var(--paper-bright);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.stores-section {
|
|
background: var(--paper-bright);
|
|
}
|
|
|
|
.store-tools {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 1fr) auto;
|
|
gap: 18px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
border-bottom: 2px solid var(--ink);
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
min-height: 50px;
|
|
padding: 8px 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.search-box input:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.search-box button {
|
|
border: 0;
|
|
background: transparent;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.region-filters {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.store-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
|
|
gap: 28px;
|
|
}
|
|
|
|
.store-list {
|
|
border-top: 1px solid var(--ink);
|
|
}
|
|
|
|
.store-card {
|
|
padding: 24px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
transition: padding 160ms ease, background 160ms ease;
|
|
}
|
|
|
|
.store-card.is-selected {
|
|
padding-inline: 20px;
|
|
background: var(--blue-pale);
|
|
}
|
|
|
|
.store-card-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
color: var(--ink-faint);
|
|
font-size: 10px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.store-state {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.store-state::before {
|
|
content: "";
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
.state-open {
|
|
color: var(--success);
|
|
}
|
|
|
|
.state-closed {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.state-pause {
|
|
color: #70571a;
|
|
}
|
|
|
|
.store-card h3 {
|
|
margin-top: 12px;
|
|
font-size: 29px;
|
|
font-weight: 850;
|
|
letter-spacing: -0.055em;
|
|
}
|
|
|
|
.store-card > p {
|
|
margin-top: 3px;
|
|
color: var(--ink-soft);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.store-card dl {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.store-card dt {
|
|
color: var(--ink-faint);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.store-card dd {
|
|
margin-top: 3px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.store-card ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin: 16px 0 18px;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.store-card li {
|
|
padding: 5px 8px;
|
|
border: 1px solid var(--line);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.store-map {
|
|
min-height: 610px;
|
|
position: sticky;
|
|
top: calc(var(--header-height) + 24px);
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
background: #e2e0db;
|
|
}
|
|
|
|
.map-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.48;
|
|
background-image: linear-gradient(#b9b6af 1px, transparent 1px), linear-gradient(90deg, #b9b6af 1px, transparent 1px);
|
|
background-size: 54px 54px;
|
|
}
|
|
|
|
.map-river {
|
|
position: absolute;
|
|
top: 58%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 80px;
|
|
background: var(--blue-pale);
|
|
clip-path: polygon(0 28%, 100% 0, 100% 72%, 0 100%);
|
|
}
|
|
|
|
.map-pin {
|
|
width: 46px;
|
|
height: 46px;
|
|
position: absolute;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 3px solid white;
|
|
border-radius: 50%;
|
|
background: var(--ink);
|
|
color: white;
|
|
box-shadow: 0 5px 16px rgb(33 31 28 / 24%);
|
|
}
|
|
|
|
.map-pin span {
|
|
position: absolute;
|
|
top: 50px;
|
|
padding: 4px 7px;
|
|
background: white;
|
|
color: var(--ink);
|
|
font-size: 10px;
|
|
font-weight: 750;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.map-pin.is-active {
|
|
background: var(--blue);
|
|
transform: scale(1.16);
|
|
}
|
|
|
|
.pin-seongsu {
|
|
top: 38%;
|
|
left: 64%;
|
|
}
|
|
|
|
.pin-yeonnam {
|
|
top: 28%;
|
|
left: 24%;
|
|
}
|
|
|
|
.pin-mullae {
|
|
top: 63%;
|
|
left: 34%;
|
|
}
|
|
|
|
.store-map > p {
|
|
position: absolute;
|
|
right: 14px;
|
|
bottom: 14px;
|
|
left: 14px;
|
|
padding: 8px 10px;
|
|
background: rgb(255 253 248 / 90%);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.store-empty {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.store-empty p {
|
|
margin: -10px 0 18px;
|
|
color: var(--ink-soft);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.franchise-callout {
|
|
display: grid;
|
|
grid-template-columns: 1.08fr 0.92fr;
|
|
background: var(--blue);
|
|
color: white;
|
|
}
|
|
|
|
.franchise-image {
|
|
min-height: 650px;
|
|
overflow: hidden;
|
|
background: var(--steel);
|
|
}
|
|
|
|
.franchise-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.franchise-copy {
|
|
align-self: center;
|
|
padding: var(--section) var(--gutter);
|
|
}
|
|
|
|
.franchise-copy .section-kicker {
|
|
color: #c8d3ff;
|
|
}
|
|
|
|
.franchise-copy h2 {
|
|
max-width: 520px;
|
|
}
|
|
|
|
.franchise-copy > p:not(.section-kicker) {
|
|
max-width: 470px;
|
|
margin-top: 28px;
|
|
color: #e4e9ff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.button-light {
|
|
margin-top: 34px;
|
|
background: white;
|
|
color: var(--blue-dark);
|
|
}
|
|
|
|
.franchise-copy small {
|
|
display: block;
|
|
margin-top: 16px;
|
|
color: #c8d3ff;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.site-foot {
|
|
padding: 72px 0 36px;
|
|
background: #141311;
|
|
color: #ddd8d0;
|
|
}
|
|
|
|
.foot-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 0.7fr 1fr 1.3fr;
|
|
gap: 44px;
|
|
}
|
|
|
|
.brand-foot {
|
|
color: white;
|
|
}
|
|
|
|
.foot-grid > div:first-child > p {
|
|
margin-top: 15px;
|
|
color: #8f8a83;
|
|
}
|
|
|
|
.foot-grid > div:not(:first-child) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 9px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.foot-grid strong {
|
|
margin-bottom: 7px;
|
|
color: white;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.foot-grid a:not(.brand) {
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.foot-grid a:hover {
|
|
color: white;
|
|
}
|
|
|
|
.foot-truth {
|
|
padding-left: 20px;
|
|
border-left: 1px solid #3b3935;
|
|
}
|
|
|
|
.foot-truth .mono {
|
|
margin-top: 12px;
|
|
color: #aaa59d;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.image-shell {
|
|
position: relative;
|
|
}
|
|
|
|
.image-fallback {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: none;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background: var(--steel);
|
|
color: var(--ink-soft);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.image-shell.is-broken img {
|
|
display: none;
|
|
}
|
|
|
|
.image-shell.is-broken .image-fallback {
|
|
display: grid;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
@media (max-width: 1040px) {
|
|
.head-row {
|
|
grid-template-columns: auto 1fr;
|
|
}
|
|
|
|
.head-nav {
|
|
justify-self: end;
|
|
}
|
|
|
|
.head-action {
|
|
display: none;
|
|
}
|
|
|
|
.hero {
|
|
grid-template-columns: 0.9fr 1.1fr;
|
|
}
|
|
|
|
.hero-copy {
|
|
padding-left: var(--gutter);
|
|
}
|
|
|
|
.hero-order {
|
|
right: 20px;
|
|
}
|
|
|
|
.menu-item-featured {
|
|
grid-column: span 6;
|
|
}
|
|
|
|
.menu-item-graphic,
|
|
.menu-item-blue {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.builder-layout {
|
|
grid-template-columns: minmax(0, 1fr) 380px;
|
|
gap: 30px;
|
|
}
|
|
|
|
.process-copy {
|
|
padding-inline: var(--gutter);
|
|
}
|
|
|
|
.foot-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.head-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
padding: 12px 0 9px;
|
|
}
|
|
|
|
.brand {
|
|
justify-self: start;
|
|
}
|
|
|
|
.head-nav {
|
|
width: 100%;
|
|
justify-self: stretch;
|
|
margin-top: 9px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--line);
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hero-copy {
|
|
max-width: none;
|
|
padding: 72px var(--gutter) 48px;
|
|
}
|
|
|
|
.hero-media {
|
|
min-height: 560px;
|
|
}
|
|
|
|
.hero-media img {
|
|
object-position: 57% center;
|
|
}
|
|
|
|
.hero-order {
|
|
bottom: 20px;
|
|
}
|
|
|
|
.service-strip {
|
|
padding-top: 22px;
|
|
}
|
|
|
|
.service-row {
|
|
grid-template-columns: 1fr 1fr;
|
|
justify-content: start;
|
|
}
|
|
|
|
.split-head,
|
|
.builder-layout,
|
|
.process-grid,
|
|
.store-layout,
|
|
.franchise-callout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.split-head {
|
|
align-items: start;
|
|
gap: 22px;
|
|
}
|
|
|
|
.menu-item-featured,
|
|
.menu-item-graphic,
|
|
.menu-item-blue {
|
|
grid-column: span 6;
|
|
}
|
|
|
|
.menu-item-small {
|
|
grid-column: span 4;
|
|
}
|
|
|
|
.builder-summary {
|
|
position: static;
|
|
display: grid;
|
|
grid-template-columns: 0.8fr 1.2fr;
|
|
}
|
|
|
|
.summary-photo {
|
|
min-height: 0;
|
|
aspect-ratio: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.summary-photo img {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.process-media {
|
|
min-height: 560px;
|
|
}
|
|
|
|
.store-map {
|
|
position: relative;
|
|
min-height: 440px;
|
|
grid-row: auto;
|
|
}
|
|
|
|
.franchise-image {
|
|
min-height: 520px;
|
|
}
|
|
|
|
.franchise-copy {
|
|
padding-inline: var(--gutter);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.truth-bar {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.head-nav {
|
|
gap: 20px;
|
|
padding-bottom: 3px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(51px, 16vw, 70px);
|
|
}
|
|
|
|
.hero-copy {
|
|
padding: 44px var(--gutter) 28px;
|
|
}
|
|
|
|
.hero-lead {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.hero-actions {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.hero-facts,
|
|
.hero-order {
|
|
display: none;
|
|
}
|
|
|
|
.hero-media {
|
|
min-height: 360px;
|
|
}
|
|
|
|
.hero-media picture {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.hero-media img {
|
|
object-position: center bottom;
|
|
}
|
|
|
|
.hero-media figcaption {
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.hero-order {
|
|
right: 14px;
|
|
bottom: 14px;
|
|
left: 14px;
|
|
width: auto;
|
|
}
|
|
|
|
.service-row {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.section h2,
|
|
.franchise-callout h2 {
|
|
font-size: clamp(38px, 12vw, 54px);
|
|
}
|
|
|
|
.menu-grid {
|
|
display: block;
|
|
}
|
|
|
|
.menu-item {
|
|
border-right: 0;
|
|
}
|
|
|
|
.menu-item-small .menu-body {
|
|
min-height: 210px;
|
|
}
|
|
|
|
.builder-summary {
|
|
display: block;
|
|
}
|
|
|
|
.summary-photo {
|
|
height: auto;
|
|
aspect-ratio: 4 / 3;
|
|
}
|
|
|
|
.choice-row,
|
|
.select-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.store-tools {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.region-filters {
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.store-map {
|
|
min-height: 300px;
|
|
}
|
|
|
|
.process-media,
|
|
.franchise-image {
|
|
min-height: 420px;
|
|
}
|
|
|
|
.foot-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.foot-truth {
|
|
padding: 20px 0 0;
|
|
border-top: 1px solid #3b3935;
|
|
border-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 380px) {
|
|
.brand {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.hero-copy {
|
|
padding-top: 58px;
|
|
}
|
|
|
|
.hero-facts {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hero-media {
|
|
min-height: 340px;
|
|
}
|
|
|
|
.summary-total {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.store-card dl {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.truth-bar,
|
|
.site-head,
|
|
.hero-order,
|
|
.menu-toolbar,
|
|
.builder-form,
|
|
.store-tools,
|
|
.store-map,
|
|
.franchise-callout,
|
|
.button,
|
|
button {
|
|
display: none !important;
|
|
}
|
|
|
|
body,
|
|
.builder-section {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
.builder-summary {
|
|
position: static;
|
|
box-shadow: none;
|
|
border: 1px solid #777;
|
|
}
|
|
}
|