…
…
…
============================================================ */
.neon-frame {
position: relative;
border-radius: 28px;
padding: 56px 48px;
background:
radial-gradient(600px 350px at 50% 0%, rgba(255,140,224,0.10), transparent 65%),
#050505;
border: 2px solid #FF8CE0;
box-shadow:
0 0 0 1px rgba(255,140,224,0.30) inset;
}
.neon-frame::before {
/* inner hairline so the glow stays outside, the rule reads as one tube */
content: '';
position: absolute;
inset: 6px;
border-radius: 22px;
border: 1px solid rgba(255,140,224,0.18);
pointer-events: none;
}
.neon-frame--blue {
border-color: #5BD0E6;
box-shadow:
0 0 0 1px rgba(91,208,230,0.30) inset;
}
.neon-frame--blue::before { border-color: rgba(91,208,230,0.18); }
.neon-frame--sm { padding: 32px 28px; border-radius: 22px; }
.neon-frame--sm::before { inset: 4px; border-radius: 18px; }
@media (max-width: 720px) {
.neon-frame { padding: 32px 22px; border-radius: 22px; }
.neon-frame::before { inset: 4px; border-radius: 18px; }
}
/* ============================================================
FRANCHISE 12-STEP PROCESS · neon-route grid
------------------------------------------------------------
12 steps in a 4-row × 3-column grid. Pink tube outline wraps
the whole thing. Each step has a pink "STEP X" eyebrow, a
white Anton heading, a pink underline, and a short sub.
Milestone steps (3, 9, 12) carry a pink checkmark badge.
============================================================ */
.proc12 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px 48px;
position: relative;
}
.proc12__step {
position: relative;
padding: 0 8px;
}
.proc12__eyebrow {
font-family: var(--display, 'Anton', 'Bebas Neue', Impact, sans-serif);
text-transform: uppercase;
letter-spacing: 3px;
font-size: 13px;
color: #FF8CE0;
margin-bottom: 8px;
display: block;
}
.proc12__title {
font-family: var(--display, 'Anton', 'Bebas Neue', Impact, sans-serif);
text-transform: uppercase;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1;
color: #FFFFFF;
margin: 0 0 10px;
letter-spacing: -.3px;
}
.proc12__rule {
display: block;
width: 56px; height: 3px;
background: #FF8CE0;
border-radius: 2px;
margin: 0 0 14px;
box-shadow: none;
}
.proc12__sub {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.75);
max-width: 220px;
}
.proc12__check {
position: absolute; top: -6px; right: 4px;
width: 24px; height: 24px; border-radius: 50%;
background: #FF8CE0; color: #050505;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--display, 'Anton', 'Bebas Neue', Impact, sans-serif);
font-size: 14px; line-height: 1;
box-shadow: none;
}
.proc12__caption {
margin-top: 36px; text-align: center;
font-family: 'Inter', sans-serif; font-size: 13px;
color: rgba(255,255,255,0.55); letter-spacing: 1.5px;
text-transform: uppercase;
}
@media (max-width: 1024px) {
.proc12 { grid-template-columns: repeat(2, 1fr); gap: 30px 36px; }
}
@media (max-width: 600px) {
.proc12 { grid-template-columns: 1fr; gap: 26px; }
.neon-frame { padding: 28px 20px; }
}
/* ============================================================
GIANT PULL-QUOTE · section-break treatment
------------------------------------------------------------
Used between card-heavy sections on the homepage to give
the eye a moment to rest.
============================================================ */
.pull-quote {
padding: 120px 0;
text-align: center;
position: relative;
background:
radial-gradient(800px 400px at 50% 50%, rgba(255,140,224,0.15), transparent 60%),
#050505;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pull-quote__mark {
display: inline-block;
font-family: var(--display, 'Anton', 'Bebas Neue', Impact, sans-serif);
text-transform: uppercase;
font-size: 14px; letter-spacing: 4px;
color: #FF8CE0;
margin-bottom: 28px;
}
.pull-quote blockquote {
font-family: var(--display, 'Anton', 'Bebas Neue', Impact, sans-serif);
text-transform: uppercase;
font-size: clamp(40px, 6vw, 92px);
line-height: 0.95;
letter-spacing: -1px;
max-width: 1100px;
margin: 0 auto;
color: #FFFFFF;
}
.pull-quote blockquote .pink { color: #FF8CE0; }
.pull-quote blockquote .stroke {
color: #FFFFFF;
}
.pull-quote__cite {
display: block; margin-top: 32px;
font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: 2px;
color: rgba(255,255,255,0.5); text-transform: uppercase;
}
/* ============================================================
FULL-BLEED PHOTO BREAK
------------------------------------------------------------
Edge-to-edge atmospheric image. Use between two card-grid
sections to disrupt the visual rhythm.
============================================================ */
.photo-break {
position: relative;
height: clamp(280px, 42vw, 560px);
background-size: cover;
background-position: center;
background-color: #050505;
overflow: hidden;
}
.photo-break::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.20) 35%, rgba(5,5,5,0.55) 100%);
pointer-events: none;
}
.photo-break__inner {
position: relative; z-index: 2;
height: 100%;
display: flex; flex-direction: column; justify-content: center;
padding: 0 8%;
}
.photo-break__eyebrow {
display: inline-block; align-self: flex-start;
font-family: var(--display, 'Anton', 'Bebas Neue', Impact, sans-serif);
text-transform: uppercase;
font-size: 13px; letter-spacing: 3px;
color: var(--ml-ink, #0E0E10);
background: #FF8CE0;
padding: 6px 14px; border-radius: 999px;
margin-bottom: 18px;
box-shadow: 0 8px 24px -6px rgba(0,0,0,0.41);
}
.photo-break__title {
font-family: var(--display, 'Anton', 'Bebas Neue', Impact, sans-serif);
text-transform: uppercase;
font-size: clamp(36px, 5.5vw, 84px);
line-height: 0.9; letter-spacing: -1px;
color: #FFFFFF;
max-width: 760px;
}
.photo-break__title .pink { color: #FF8CE0; }
.photo-break__title .stroke {
color: #FFFFFF;
}
/* ============================================================
EDM VIBE SHIFT (2026-06-25)
------------------------------------------------------------
Pulls the site toward the EDM aesthetic · deeper black,
reusable graffiti-brick section dividers, drip social
icons, and a helper class for image-based headings.
============================================================ */
/* Deeper base black matching the EDM templates (#0A0A0C) */
body, .site-header, .hero-bg, .page-hero {
background-color: #0A0A0C;
}
/* ---------- .brick-break · graffiti-wall section divider ---------- */
/* Use sparingly between content blocks for a moment of visual rest. */
.brick-break {
position: relative;
min-height: clamp(240px, 32vw, 460px);
/* TELL 5 · the brick ground. This module and the asset have existed since
June but every .brick-break on the site overrode the background with a
photo, so the brick had never actually rendered anywhere. Served through
image-set so a phone pulls 26KB instead of the 132KB full-width plate. */
background-image: -webkit-image-set(
url('images/backgrounds/brick-drips-light-800w.webp') 1x,
url('images/backgrounds/brick-drips-light-1600w.webp') 2x);
background-image: image-set(
url('images/backgrounds/brick-drips-light-800w.webp') 1x,
url('images/backgrounds/brick-drips-light-1600w.webp') 2x);
background-size: cover;
background-position: center;
background-color: #0A0A0C;
overflow: hidden;
}
.brick-break--heavy {
background-image: -webkit-image-set(
url('images/backgrounds/brick-drips-heavy-800w.webp') 1x,
url('images/backgrounds/brick-drips-heavy-1600w.webp') 2x);
background-image: image-set(
url('images/backgrounds/brick-drips-heavy-800w.webp') 1x,
url('images/backgrounds/brick-drips-heavy-1600w.webp') 2x);
min-height: clamp(320px, 42vw, 560px);
}
/* .brick-break--stars removed 25 Aug 2026 · brick-stars.webp carries the retired
star mark (B3/B7). The asset stays on disk but nothing references it, so the
build no longer ships it. */
.brick-break__inner {
position: relative; z-index: 2;
height: 100%;
display: flex; flex-direction: column; justify-content: center; align-items: center;
padding: 40px 24px; text-align: center;
}
.brick-break__heading {
max-width: min(620px, 80vw);
height: auto;
filter: drop-shadow(0 12px 32px rgba(0,0,0,0.55));
}
/* Tagline banner content on top of the graffiti wall */
.brick-break--tagline .brick-break__inner {
max-width: 900px;
gap: 20px;
}
.brick-break__eyebrow {
font-family: var(--script);
font-size: clamp(22px, 2.6vw, 32px);
color: var(--ml-blue);
transform: rotate(-2deg);
display: inline-block;
}
.brick-break__title {
font-family: var(--display);
font-size: clamp(40px, 6vw, 80px);
line-height: 0.95;
letter-spacing: -0.5px;
text-transform: uppercase;
color: #fff;
margin: 0;
}
.brick-break__title .pink { color: var(--ml-pink); }
.brick-break__ctas {
display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
margin-top: 8px;
}
@media (max-width: 700px) {
.brick-break--tagline .brick-break__inner { padding: 30px 20px; gap: 14px; }
}
.brick-break::after {
/* Subtle vignette so any headline image stays legible */
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(5,5,5,0.45) 100%);
pointer-events: none;
}
/* ---------- .h-image · drop-in image heading ---------- */
/* Use anywhere we'd normally have an / and we have a custom image */
.h-image {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}
.h-image--sm { max-width: 320px; }
.h-image--md { max-width: 520px; }
.h-image--lg { max-width: 780px; }
.h-image--xl { max-width: 1000px; }
/* Tilt + rotate utilities for added attitude */
.h-image--tilt-l { transform: rotate(-2deg); }
.h-image--tilt-r { transform: rotate(2deg); }
/* ---------- Dripping social icons ---------- */
/* For footer + about + anywhere we want the graffiti social treatment */
.socials-drip {
display: inline-flex;
align-items: flex-start;
gap: 14px;
}
.socials-drip a {
display: inline-block;
width: 56px; height: 56px;
position: relative;
transition: transform .2s ease;
}
.socials-drip a:hover { transform: translateY(-3px) rotate(-3deg); }
.socials-drip img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.socials-drip--lg a { width: 78px; height: 78px; }
.socials-drip--xl a { width: 110px; height: 110px; }
/* ---------- Hot-pink emphasis token ---------- */
/* Brighter pink for one-off emphasis matching the EDMs (#FF8CE0) */
:root { --ml-pink-hot-edm: #FF8CE0; }
.pink-hot { color: var(--ml-pink-hot-edm); }
.bg-pink-hot { background-color: var(--ml-pink-hot-edm); color: var(--ml-ink); }
/* Responsive */
@media (max-width: 720px) {
.brick-break { min-height: 200px; }
.brick-break--heavy { min-height: 260px; }
.socials-drip a { width: 44px; height: 44px; }
.socials-drip--lg a { width: 56px; height: 56px; }
.socials-drip--xl a { width: 72px; height: 72px; }
}
/* ============================================================
THE MARK · RETIRED 30 Aug 2026
------------------------------------------------------------
There is no inline mark any more. Christian, having seen the
icon-scale version: "take all these off. I would prefer just
the text." 192 glyphs came out of 39 files - every eyebrow
bookend, every button prefix, and the runs of three and five
left over from the retired star.
Two uses were NOT deleted, because they were doing a job
rather than decorating:
· list markers, which became a plain dot (further down)
· the marquee separator, now a real middot (home.css) -
without something between them the items run together
--spray survives below and still points at the real poster
artwork. Its one consumer is .pillar::before, a 42px
watermark at 10% alpha, where the drip is legible and the
artwork is doing what it was drawn for.
If an inline mark is ever wanted back, the icon-scale token
and the .spray/.spray--sm/.spray--lg rules are in git at the
commit before this one - do not rebuild them from the poster
artwork, which is the mistake that started all this.
============================================================ */
:root { --spray: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22816%22 viewBox=%220 0 612 792%22 height=%221056%22%3E%3Cdefs%3E%3CclipPath id=%2232c100188f%22%3E%3Cpath d=%22M 21 41.6 L 591 41.6 L 591 750 L 21 750 Z M 21 41.6 %22 clip-rule=%22nonzero%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path=%22url(%2332c100188f)%22%3E%3Cpath fill=%22%23000000%22 d=%22M 62.6 436.8 C 62.7 433.7 62.8 430.4 63 427.3 C 63 426.8 63.5 426.4 64 426.3 C 64.4 426.1 65.1 426.4 65.3 426.8 C 66 428 66.4 429.2 67.1 430.4 C 67.4 430.8 68.5 431.4 68.5 431.4 C 71.2 427.5 75.4 429.4 78.8 428.5 C 79.4 428.4 79.9 427.3 79.8 426.7 C 79.8 426.1 78.8 425.5 78.2 425.4 C 76.9 425.1 75.5 425.1 74.2 425.3 C 70.5 425.5 69 423.7 68.7 420.1 C 68.5 418.4 65.7 414.6 64 413.7 C 63.1 413.3 62 413.2 61 412.9 L 60.8 412.7 C 60 411.7 58.8 410.9 58.3 409.7 C 57.9 408.7 57.7 406.9 58.3 406.5 C 59.1 405.6 60.8 405.3 62.1 405.2 C 62.7 405 63.4 405.9 64.1 406.3 C 66 407.3 68.2 409.3 69.7 408.9 C 71.5 408.3 72.7 405.8 74.1 403.9 C 74.7 403.2 75.4 402.1 75.2 401.2 C 74.8 398.9 73.9 396.8 73.2 394.6 C 72.8 394.9 72.1 395.4 72.1 395.6 C 72.2 399.5 68.8 398.2 67.1 399.3 C 63.8 401.5 64.7 396.9 63 396.4 C 61.7 395.9 60.6 395.6 59.3 395.2 L 59.4 395.4 C 57.7 391.8 62.7 387.9 59.1 384.2 C 58.8 384 59.8 381.5 60.7 381.1 C 61.6 380.7 63.3 381.4 64.1 382.1 C 64.8 382.8 65.1 384.2 65.3 385.4 C 65.3 386 64.1 386.5 64 387.2 C 63.7 388.1 63.7 389.1 63.7 389.9 C 65 390.1 66.3 390.4 67.5 390.1 C 68.1 389.9 68.8 388.4 68.5 387.8 C 66.7 383.4 66.7 380.3 71.2 376.8 C 73.1 375.4 76.9 372 74.1 367.7 C 73.8 367.2 74.8 365.4 75.5 364.6 C 77.1 362.7 78.8 361.2 80.4 359.3 C 82.2 357 83.2 355.1 80.4 352.5 C 78.6 351.1 77.6 348.8 76.5 346.8 C 74.9 344.1 74.1 343.4 71.1 342.7 C 70.4 342.5 69.2 342.1 69.2 341.5 C 69.1 340.7 69.2 339.2 69.8 338.7 C 71.5 337 74.4 336.5 74.9 333.6 C 74.9 333.3 78.4 333.3 79.9 333.8 C 82.5 334.8 84.1 334.1 84.9 331.7 C 85.8 329 86 326.1 87 323.4 C 88 320.9 87.8 320.4 84.9 319.6 C 81.8 318.7 80.8 309.3 83.3 306.9 C 85.2 305.2 84.5 304.8 83.2 303.5 C 78.1 298.1 77.9 297.4 80.8 292.8 C 81.1 292.4 82.8 292.1 82.9 292.4 C 85.5 295.8 87.6 299.5 90.3 302.9 C 92.3 305.5 92.2 307.5 89.8 309.8 C 88.3 311.2 90 319 92 320 C 93.2 320.6 95.4 320.4 96 319.6 C 97.6 317.6 99.7 315.5 96.6 312.6 C 95.4 311.6 95.2 309.3 94.7 307.6 C 94.2 305.2 94.6 303.6 97.4 302.9 C 100 302.4 102.9 297.4 102.3 295.1 C 101.6 291.5 99.9 291.3 95.9 293 C 94.3 293.7 92.5 293.4 90.6 293.5 C 90.6 292.1 90.6 290.7 90.5 289.3 C 90.5 288.1 90.5 287 90.2 285.8 C 89.2 281.1 89.2 281.3 93.9 279.6 C 94.9 279.3 95.6 278.2 96.2 277.2 C 96.6 276.6 96 275.2 96.4 274.9 C 98 273.7 99.9 273 101.6 272 C 100 270.8 98.3 269.5 96.7 268.2 C 97.9 266.9 98.9 265.5 100.1 264.5 C 100.4 264.2 102.1 264.9 102.6 265.5 C 103.3 266.6 103.1 268 103.8 269.2 C 105 271.2 106.1 273.7 107.8 274.9 C 110.5 276.6 110.7 272.3 112.7 272 C 117.5 271.2 116.4 269.3 114.1 266.6 C 113.2 265.6 114.1 263.5 113.4 262.2 C 112.4 260.1 112 257.1 108 258.1 C 105.6 258.6 103.4 257.4 103.7 254.1 C 104 251.5 105.1 250.8 107.3 252 C 109.3 253.1 111.1 254.5 113.2 255.4 C 115.7 256.2 117.8 255.5 119.7 253.5 C 121.5 251.5 122.4 248.8 120.5 247.1 C 118.5 245.3 119.5 244.8 120.8 243.8 C 120.2 243.1 119.9 242.3 119.2 241.8 C 114.4 239 114.4 239 117.5 234.9 C 120.2 231.2 122.2 226.7 127.9 226.6 C 130.1 226.6 130.6 222 128.1 220.2 C 124.4 217.5 124.2 215.5 128.1 213.2 C 130.2 211.9 130.9 210.9 128.5 209.4 C 128.1 209.1 127.5 208.8 127.2 208.4 C 126.2 206.1 123.8 203.4 126.2 201.3 C 127.1 200.4 130.2 201.5 132 202.1 C 133 202.4 133.9 203.8 134.2 204.8 C 134.6 206.8 135.8 207.5 137.6 207.1 C 140.3 206.4 138.5 204.8 138.2 203.5 C 137.6 201.3 138.5 200 140.9 200 C 141.9 200 143 199.8 144 199.7 C 147.6 199.5 148.4 197.4 148.1 194.3 C 148.1 193.6 147.7 192.7 147.4 192 C 146.1 187.9 144.6 184.3 150.6 181.7 C 153.3 180.6 154.3 175.8 156.1 172.6 C 158.4 168.6 160.8 164.7 163.1 160.5 C 163.8 159.2 164.4 157.5 164.2 156.3 C 163.9 154.8 163.5 154.5 165.2 153.5 C 168.6 151.8 171.9 149.6 174.9 147 C 179.3 143.2 183.2 138.9 189 137.2 C 190.1 136.9 191.3 135.7 192.1 134.8 C 194.6 131.8 197.6 131.2 201.3 131.2 C 204.2 131.2 207.4 130.2 210.2 129.1 C 212.9 128.1 215.4 126.6 217.9 125.2 C 220.3 123.8 222.9 122.5 225 120.7 C 227.2 118.9 228.9 117.2 232 119.2 C 233.4 120.1 235.9 119.1 237.9 118.8 C 238.6 118.7 239.1 117.9 239.7 117.5 C 239.1 116.8 238.4 116.2 237.9 115.5 C 237 114.5 236.1 113.4 235.3 112.2 C 236.9 111.1 238.4 109.7 240.3 109.1 C 240.8 109 243 111 243 112 C 242.8 115.1 243.6 115.7 246.4 114.2 C 251.8 111.5 257.5 109.5 262.5 106.3 C 266.8 103.4 270.9 102.3 275.9 102.6 C 277.9 102.7 280.3 102.6 281.9 101.6 C 282.9 100.9 282.4 98.3 283 96.6 C 283.3 95.7 284.3 94.4 284.8 94.4 C 286 94.6 287.3 95.2 288.3 96 C 288.6 96.2 288.1 97.9 287.7 98.3 C 285.3 100.9 285.4 102.3 289.1 102.9 C 289.7 102.9 290.1 103.1 290.7 103.3 C 297.4 105.1 301.8 102.6 303.9 95.7 C 304.9 92.5 306.6 91.6 308.6 94.2 C 311.5 97.7 313.9 95.7 316.9 94.9 C 322.3 93.3 328 92.3 333.7 91.6 C 335.7 91.3 337.4 91.5 337.5 88.9 C 337.7 87 337.7 85.3 335.1 84.8 C 333.7 84.5 331.8 83.6 331.4 82.5 C 330.6 80.1 330.6 77.5 330.1 74.9 C 330.1 74.7 330.8 74.2 331.1 74.2 C 332.4 74.4 334.7 74.7 334.7 75.1 C 335 80.2 338.5 80.6 342.4 81.1 C 343.4 81.2 344.7 82.6 344.8 83.8 C 345.2 86 346.2 88.6 348.5 87.9 C 350.9 87.2 353.8 85.1 354.8 82.9 C 357.5 76.9 359.8 75.8 365.7 78.1 C 368 78.9 371.3 79.1 373.4 78.1 C 376.3 76.9 378 77.5 379.7 79.5 C 382.7 83.1 386.2 82.9 389.7 80.8 C 394.6 77.8 399.6 78.5 404.9 79.1 C 406.2 79.2 408.3 79.1 408.6 78.4 C 409.5 76.6 408.5 75.4 406.3 75.2 C 404.8 75.1 403.5 74.4 404.8 72.8 C 405.5 71.9 407.9 71.1 408.5 71.5 C 411.2 73.7 413.9 75.8 413.4 79.9 C 413.2 82.3 413.3 84.8 413.4 87 C 413.6 88.2 414.3 89.3 414.7 90.5 C 415.3 89 416.4 87.8 416.4 86.3 C 416.3 82.5 415 78.5 415.3 74.7 C 415.4 72.4 417.7 70.1 419.1 68 C 419.3 67.8 420.7 68.2 420.8 68.7 C 421.1 69.7 421 70.8 421.3 71.8 C 421.4 72.4 422.1 73.4 422.6 73.4 C 423.6 73.2 424.8 72.9 425.3 72.2 C 427.1 69.4 427 66.4 425.3 63.4 C 424.3 61.7 423.7 59.7 423.3 57.7 C 423.1 57 424 56 424.4 55.1 C 425 55.9 425.5 56.6 426 57.3 C 426.8 59.1 427.5 61 428.5 62.7 C 429.7 64.7 432.4 66.5 432.2 68.2 C 432.1 71.5 431 74.9 429.2 77.8 C 428.4 79.2 426.8 80.2 428.4 81.5 C 429.5 82.5 432 83.5 433.1 82.9 C 435.8 81.5 438.2 79.5 440.4 77.4 C 441.1 76.6 440.5 74.8 440.5 73.5 L 440.4 73.7 C 442.8 73.8 444.8 74.1 445.9 76.9 C 447.1 79.8 449 77.1 450.5 76.8 C 450.6 76.8 450.8 75.2 450.6 75.2 C 447.6 73.9 447.9 72.1 450.3 71 C 451.6 70.2 453.5 70.8 455 70.8 C 457.6 71 457.2 72.2 456.6 73.9 C 456.4 74.4 456.9 75.5 457.4 75.9 C 460.3 78.1 459.9 80.6 459.7 84.1 C 459.3 90 460.4 96 461.1 102.1 C 461.1 102.7 462 103.3 462.4 103.8 C 463.1 103.3 463.9 102.7 464.4 102 C 465 101.3 465.4 100.4 466 99.7 C 466.4 100.7 467.3 101.9 467.3 102.9 C 467.4 105.4 465.8 106.8 463.4 107 C 461 107.1 458.6 106.8 456.3 107.4 C 455.2 107.7 454.3 109.5 453.5 110.5 C 454.5 111 455.7 112.1 456.6 112 C 460 111.4 464.1 113.8 466.8 109.7 C 467.6 110.1 468.8 110.5 468.8 111.1 C 469.1 113.8 469.8 115.2 473.1 115.4 C 475.8 115.7 478.4 117.4 480.8 118.8 C 481.5 119.2 482.4 120.5 482.2 121.2 C 481.4 124.9 484.4 127.3 485.1 130.3 C 485.8 133.6 487.4 135.6 489.5 137.6 C 493 141 497.3 143.6 498.9 148.7 C 499.3 150 501 151.4 502.3 151.8 C 507.9 153.1 512.6 155.5 515.6 160.7 C 516.1 161.7 518.3 161.9 518.4 160 C 518.7 156 521.1 155 524.4 155.5 C 525.7 155.7 527.7 156.7 527.8 157.5 C 528.2 159.4 528.8 161.4 526.1 162.9 C 520.8 165.9 521.1 166.1 524.2 170.8 C 526.1 173.6 527.8 176.8 528.5 179.9 C 529.5 185.4 532.4 190.1 534.6 195.1 C 536.3 198.8 538.3 202.2 543.3 202 C 544 202 545.6 203.5 545.6 204.2 C 545.6 205.1 544.3 206.1 543.3 206.7 C 542.3 207.2 541 207.5 540 207.9 C 540.8 209.2 541 211.4 542 211.8 C 548.9 214.9 550.2 221.9 552.4 227.7 C 556.6 238.7 560.6 249.8 562.7 261.2 C 564.1 268.6 566.4 276 565.5 284 C 565 289.3 565 295 568.5 299.7 C 569.1 300.4 569 301.7 568.8 302.6 C 567.5 310.8 566.7 318.7 569 326.7 C 569.1 327.1 569.2 328.1 569 328.1 C 562.7 331.1 565.8 337.5 563.8 342.2 C 561.7 347.5 563.1 349.4 568.5 350.5 C 569.8 350.8 571.9 351.4 572.2 352.2 C 572.7 353.9 572.4 355.9 571.8 357.6 C 570.8 360.2 568.4 359.9 566.5 357.5 C 565.8 356.5 565 355.8 564.1 354.9 C 563.3 355.8 561.5 356.6 561.5 357.6 C 561.1 362.3 559.1 364.9 554 364.7 C 553.4 364.7 552.3 366.7 552.4 367.6 C 553.1 378.3 547.7 386.7 542.5 395.1 C 541 397.4 542.2 397.6 543.5 398.6 C 544.7 399.6 547.3 400.6 547.3 401.6 C 547.3 403.8 546.6 406.6 545.2 408 C 542.9 410 542 411.9 542.8 414.7 C 544.9 424.8 545.9 435.1 545.9 445.3 C 545.9 452.6 546.6 459.9 544.2 466.8 C 543.7 468.3 543.7 470.3 544.3 471.5 C 547.4 478.7 544.5 485.1 542.3 491.5 C 541 495.5 537.9 496.8 533.6 495.3 C 531.4 494.6 529.1 493.9 527.1 492.8 C 523.8 490.6 521.2 488.3 521.8 483.5 C 522.8 474.7 523 465.7 523.4 456.7 C 523.5 454.7 523 452.6 522.7 450.5 C 522.5 449.5 522.1 448 522.5 447.6 C 526.5 443.6 524.7 439.4 523.5 435.1 C 523.1 433.5 522.7 432 522.2 430.4 C 521.2 431.8 519.7 433.1 519.1 434.8 C 517.8 438.2 514 441.2 516.4 445.6 C 516.5 445.9 516 446.5 515.7 446.9 C 512.7 450.3 512.6 452.9 515 457 C 515.6 458 516.5 459.6 516.3 460.3 C 514.3 463.6 514.6 466.7 516.3 470 C 516.5 470.5 515.8 472.3 515.3 472.4 C 514.4 472.7 512.7 472.5 512.4 472 C 511.1 469.6 509.9 466.8 509 464.3 C 508.6 462.9 509 461.1 508.7 459.6 C 508.4 458.7 507.3 458.2 506.6 457.4 C 506.1 458.2 505.7 459 505.3 459.9 C 504.7 460.9 504.4 462.9 503.9 462.9 C 499.7 463.4 498.9 467 496.6 469.6 C 490.5 476.4 483.9 482.7 477.5 489.2 C 474.2 492.6 471.1 496.2 467.8 499.6 C 467.4 500 467.1 500.5 466.8 500.7 C 462.6 505 458.9 510.6 453.7 513.1 C 447.6 516.1 445.2 519.4 445.6 526.1 C 445.8 528.6 443.6 531.4 441.2 533.9 C 433.2 541.9 422.6 544.6 413 549.3 C 407.7 552 402.5 555.7 395.9 554.6 C 395.4 554.4 394.1 555 393.9 555.6 C 392.1 560.3 388.1 558.8 384.5 559.1 C 371.1 560.6 358.5 556.4 345.5 554.1 C 341 553.4 336.8 550.9 332.4 549.2 C 329.1 547.9 326 546.2 322 547.7 C 319.7 548.6 316.6 546.6 313.8 546.3 C 311.1 546 310.3 548.2 311.5 549.9 C 313.2 552.6 315.8 554.9 312 557.8 C 312.5 558.3 313 558.7 313.2 559.3 C 313.6 560.4 314.5 562.1 314 562.7 C 308.9 568.2 312.5 573.2 314.9 578.4 C 315.3 579.2 315 580.8 314.8 581.8 C 314.2 583.9 313.2 586 312.8 588.3 C 312 592.4 311.3 596.6 311.3 600.9 C 311.3 609.1 311.9 617.4 312.3 625.6 C 312.3 626.9 312.8 628.3 312.5 629.6 C 311.1 635.9 313 642 312.8 648.3 C 312.5 654.7 312.8 661.1 312.6 667.4 C 312.3 681.9 314.2 696.1 317 710.4 C 318.9 719.6 319 729 315.9 738.3 C 315 741 313.6 743.7 311.9 745.8 C 308.1 750.4 302.6 750.2 297.9 746.7 C 289 739.8 287.1 729.6 284.1 719.8 C 283.7 718.6 284.4 717.2 284.4 715.9 C 284.7 706.1 286.1 696.3 284.8 686.6 C 283.7 676.9 285 667.8 285.8 658.4 C 287 647.1 286.6 635.6 286.7 624.2 C 286.7 621.1 285.4 617.9 285.4 614.8 C 286.1 598.1 283.7 581.8 281.1 565.2 C 280.1 559 279.3 552.9 277.3 546.9 C 276.6 544.5 275.3 541.3 273.3 540.5 C 269.9 538.9 265.8 538.8 261.8 538.3 C 261.2 538.3 259.6 540 259.8 540.9 C 260.1 548.3 260.6 555.6 260.9 563 C 260.9 564.7 260.5 566.4 259.8 568 C 257.6 572.4 253.9 575.1 249.2 574.8 C 244.5 574.4 241 571.4 240.3 566.2 C 239.4 560.1 236.7 554.1 238.9 547.7 C 239.4 545.7 239 543.5 239.1 541.3 C 240 534.6 238.1 530.8 231.2 527.2 C 222.2 522.7 214.4 515.5 208.8 506.6 C 207.9 505.3 207.1 503.9 206 502.9 C 204.7 501.7 203.2 501.2 202.3 503.3 C 201.1 506 198.3 506 197 504.6 C 195.1 502.6 194 502.3 191.3 503 C 188.7 503.7 187.4 501.2 187.6 498.2 C 187.7 497.2 186.9 495.5 186.2 495.3 C 182 494.5 178 493.8 173.9 493.6 C 172.1 493.5 170.2 494.9 168.4 495.5 C 167.2 495.9 165.9 496.8 164.8 496.8 C 163.1 496.8 160.4 495.3 160.1 495.9 C 158.8 497.7 158.2 500.2 157.5 502.4 C 156.4 506.7 155.8 507.1 152.1 504.4 C 149.3 502.3 146.7 499.6 143.7 497.5 C 142.4 496.5 141 496.2 139.9 498.3 C 138.5 501 134.3 502.6 131.9 501.4 C 131.2 501.2 130.5 499.6 130.6 499 C 131.3 496.8 132.8 494.8 130.8 492.5 C 131.5 491.9 132.2 490.9 132.8 490.9 C 136.5 491.2 140 491.6 143.7 492.1 C 144.3 492.1 145 491.6 145.7 491.5 C 145 491.2 144.2 491.1 143.7 490.6 C 141.9 488.2 140.2 485.6 138.5 483.1 C 137.6 481.8 136.6 480.7 135.6 479.5 C 131.2 474.4 127.2 479.7 123.1 480.2 C 120.9 480.5 119.2 482.4 117.1 483.1 C 116.1 483.5 114.7 482.9 113.5 482.9 C 113.7 481.7 113.7 480.4 114.1 479.2 C 114.7 477.5 115.8 476 116.1 474.1 C 116.2 473.3 115.2 471.5 114.5 471.4 C 113.8 471.1 112.1 472.1 111.7 473 C 111 474.2 111.1 477 110.4 477.1 C 107.6 477.7 104.7 477.8 101.7 477.7 C 100.7 477.5 99.1 476.2 98.9 475.2 C 98.6 474.4 99.6 473 100.4 472.1 C 101.3 471.1 103.6 471.3 102.9 468.8 C 102.1 466.1 102 463.3 101.1 460.7 C 101 460.3 98.2 460.3 97 460.9 C 93.9 462.7 91.2 465.3 87.2 462.1 C 86 461.1 84.5 462.1 83.9 464.3 C 83.6 465.4 82.1 466.3 80.8 467.1 C 80.2 467.4 79.4 467.3 78.6 467.3 C 78.8 466.6 78.8 465.8 78.9 465.1 C 79.1 464.1 79.6 462.7 79.2 462.3 C 74.7 457.7 77.5 456.4 81.8 455.2 C 82.9 454.9 84.3 451.6 83.9 450.8 C 81.9 447.2 83.2 444.8 86 442.8 C 88 441.4 87.8 440.5 85.8 439.5 C 84.6 438.9 83.6 437.9 82.6 437.2 C 80.9 435.9 79.2 435.5 77.9 437.7 C 76.8 439.9 75.2 440.1 73.4 438.9 C 70.7 437.1 70.5 439.8 69.5 440.9 C 70.4 441.6 71.4 442.9 72.2 442.9 C 75.9 442.6 76.4 445.1 75.7 447.5 C 75.1 449.8 73.7 451.9 72.2 454 C 71.9 454.5 70 454 69.1 453.5 C 68.4 453 67.8 451 67.8 450.9 C 70.1 449.5 69 449.5 67.2 449 C 61.8 447.9 60.3 444.2 62.6 436.8 C 62.7 437.8 63 438.6 63.1 439.6 C 63.4 439.4 63.8 439.1 64.1 438.8 C 63.7 438.1 63.1 437.5 62.6 436.8 Z M 99.7 438.8 C 98.6 439.5 97.2 440.4 96 441.4 C 95.6 441.6 95.6 443.2 96 443.6 C 97.6 445.2 99.3 446.9 101.1 448 C 101.7 448.5 103.3 447.9 103.8 447.2 C 105.1 445.8 101.9 439.1 99.7 438.8 Z M 150.1 493.8 C 151 496 151 498.3 152.1 499 C 153.6 499.9 157.4 495.3 156.7 493.6 C 155.7 491.3 153.8 490.5 151.6 491.2 C 150.7 491.5 150.4 493 150.1 493.8 Z M 202.7 496.2 C 202.8 493 201.7 491.3 199.3 491.2 C 198.7 491.2 198 492.2 197.3 492.8 C 199 494.2 197 497.9 200.4 498 C 201.3 498 202.3 496.6 202.7 496.2 Z M 96.3 418.4 C 96 418.1 95.4 417.1 94.9 416.3 C 93.6 417.6 92.3 418.9 91.2 420.3 C 91 420.4 92.6 422.3 93.5 422.6 C 95.9 423 96.4 421.4 96.3 418.4 Z M 123.4 474.5 C 124.4 472 125.4 470.4 125.1 469.4 C 124.8 468.4 123.2 467.4 121.9 467 C 121.5 466.8 119.7 468.8 119.9 469.4 C 120.4 471 121.5 472.1 123.4 474.5 Z M 78.4 405.5 C 79.2 406.8 79.6 407.7 80.1 407.7 C 81.6 407.7 83.1 407.5 84.6 407.3 C 84.2 406.6 83.8 405.2 83.2 405.2 C 81.9 405 80.4 405.3 78.4 405.5 Z M 451.3 95.3 C 452 95.7 452.6 96 453.3 96.4 C 454 95.2 455 93.7 455.3 92.3 C 455.5 91.6 453.9 90.2 453 90.2 C 452.2 90 450.8 91.2 450.5 92 C 450.2 93 450.9 94.3 451.3 95.3 Z M 97.7 453.3 C 97.7 453.2 97.3 452.6 96.9 451.9 C 95.7 453.5 94.7 455 93.6 456.6 C 93.6 456.6 94.4 457.6 94.9 457.6 C 97.6 457.9 97.7 456 97.7 453.3 Z M 454.7 86.3 C 455.2 84.6 455.6 83.6 455.5 82.8 C 455.3 82.1 454.3 81.5 453.7 80.8 C 453.2 81.5 452 82.3 452.2 82.6 C 452.6 83.8 453.5 84.6 454.7 86.3 Z M 88.2 423.7 C 87.6 423 87.2 422.3 87 422.3 C 85.8 422.7 84.5 423.3 83.3 424 C 83.3 424 83.8 425.3 83.8 425.3 C 85.2 424.7 86.6 424.3 88.2 423.7 Z M 91.2 454.9 C 91 454.3 90.7 453.9 90.6 453.5 C 90.5 453.6 90.2 453.9 90.2 454 C 90.3 454.5 90.5 454.9 90.6 455.3 C 90.7 455.2 90.9 455 91.2 454.9 Z M 454.6 75.8 C 454.7 75.7 455 75.5 455.2 75.4 C 455 75.2 454.9 75.1 454.6 74.8 C 454.5 75.1 454.2 75.4 454 75.5 C 454.2 75.5 454.3 75.7 454.6 75.8 Z M 73.7 352.3 C 73.2 351.5 71.7 350.6 70.7 350.6 C 69.7 350.6 68 351.4 67.7 352.1 C 67.1 353.9 67 355.2 64.5 355.8 C 61.8 356.3 62.3 359.2 63 360.9 C 63.5 362.3 65.5 363 66.4 363.6 C 70.5 363.5 75.4 355.5 73.7 352.3 Z M 501 133.6 C 499.9 134 498.7 135.7 498.5 137 C 498.3 137.7 499.6 139.3 500.6 139.9 C 503.4 141.4 506.4 142.9 509.4 144.3 C 511.6 145.3 512.8 144.4 512.8 141.9 C 512.8 137.6 505.3 132 501 133.6 Z M 212.4 551 C 208.7 552.4 205 554.3 202.1 549.6 C 201.7 549.9 200.8 550.3 200.8 550.6 C 201.1 551.6 201.7 552.4 202.1 553.4 C 204.2 559.4 204.7 559.4 209.7 555.1 C 210.4 554.6 211.7 554.7 212.5 554.3 C 213.1 554 213.4 553.1 213.9 552.3 C 213.4 551.9 212.6 551 212.4 551 Z M 393.8 75.5 C 394.6 75.1 395.9 73.1 395.6 72.5 C 394.6 70.5 392.9 68.8 391.5 67 C 390.4 68.2 389.1 69.5 388 70.7 C 387.5 71.1 387.2 71.4 387 71.9 C 386.4 73.1 386 74.2 385.4 75.2 C 386.7 75.5 388 75.8 388.9 75.9 C 390.8 75.9 392.5 76.1 393.8 75.5 Z M 48.2 440.1 C 47.9 437.8 47.9 435.4 47.2 433.1 C 46.9 432.1 44.9 430.8 43.9 430.8 C 42.6 431 41 432.2 40.6 433.4 C 39.2 437.4 40.8 439.6 45.2 439.9 C 46.2 440.1 47.2 439.9 48.2 440.1 C 48.3 439.9 48.2 440.1 48.2 440.1 Z M 560.7 218.8 C 560 218.6 557.7 221.2 557.8 221.5 C 559 223.6 560.4 226 562.4 227.2 C 564.3 228.2 566.7 225.2 566.5 221.6 C 565 220.8 563 219.3 560.7 218.8 Z M 225 111.3 C 225.2 109.3 225.6 106.8 222.2 106.8 C 220.2 106.8 217.9 106.1 217.6 109.4 C 217.5 112.4 218.9 115 221.3 115.2 C 223.2 115.5 225 113.7 225 111.3 Z M 371.7 67 C 368.3 65.8 370 69.8 368.7 71.1 C 368.6 71.2 368.3 71.5 368.3 71.8 C 368.3 72.9 367.9 74.7 368.6 75.2 C 369.4 75.9 371.1 76.1 372.1 75.7 C 373.4 75.1 374.3 73.8 376 72.2 C 374.4 70.1 373.4 67.5 371.7 67 Z M 122.1 496.6 C 122.8 493.8 124.8 492.5 127.3 491.8 C 126.9 490.5 126.8 488.5 126.1 488.2 C 122.6 487.1 117.7 492.8 118.8 496.2 C 118.9 496.8 119.9 496.9 120.5 497.3 C 121.2 497 121.9 496.9 122.1 496.6 Z M 35.8 455.7 C 35.8 458 36.6 460.6 38.9 460.2 C 40.5 459.9 42 457.3 43 455.5 C 43.3 455 41.2 453.3 40.9 453 C 37.5 452.9 35.8 453 35.8 455.7 Z M 434.9 46 C 434.2 47.7 436.7 50.6 438.5 50 C 439.9 49.6 441.5 47.9 441.8 46.6 C 441.9 45.3 440.4 43.9 438.9 41.6 C 437.1 43.6 435.7 44.6 434.9 46 Z M 199.5 126.3 C 202.3 126.6 206.1 123.8 205.2 122.5 C 204.1 120.8 202.1 119.5 200.4 118.1 C 199.4 119.7 198.4 121.1 197.4 122.6 C 198.4 124.2 199 126.2 199.5 126.3 Z M 151.3 517.8 C 152.1 517 153 515.5 153 514.6 C 152.8 513.8 151 512.4 150.1 512.7 C 148.1 513.3 146.3 514.6 144.4 515.5 C 144.3 515.5 144.7 517.1 145.3 517.4 C 146.1 517.8 147.3 517.8 147.6 518 C 149.3 518 150.7 518.4 151.3 517.8 Z M 534.1 180.9 C 536.5 181.7 539.8 178.9 539.5 175.9 C 539.3 175.1 537.9 173.9 536.9 173.8 C 533.6 173.1 532.8 175.1 533.2 179.3 C 533.4 179 533.5 180.6 534.1 180.9 Z M 45.9 400.8 C 46.7 400.2 47.6 399.3 48.6 398.9 C 50.7 398.1 52.6 396.9 51.2 394.4 C 50.6 393.4 48.5 392.2 48.3 392.4 C 46.9 393.8 45.6 395.5 44.8 396.6 C 45.5 398.8 45.6 399.8 45.9 400.8 Z M 249.2 100.1 C 249.7 98.3 249.2 96.4 246.5 96.4 C 244.7 96.4 242.4 96.4 242.8 99 C 243.1 101 244.3 103 245.7 106.7 C 247.5 103.4 248.8 101.9 249.2 100.1 Z M 136.6 510.3 C 134.5 508.3 132.3 508.4 130.6 510.6 C 129.8 511.6 129.3 513 128.8 514.3 C 130.3 514 132 513.6 133.6 513.4 C 134.9 513.3 136.2 513.6 137.5 513.6 C 137.7 513.6 138.2 513.1 139.6 512 C 138.5 511.3 137.3 511 136.6 510.3 Z M 138.3 189.4 C 136.6 190.3 135.2 191.7 133.6 192.9 C 135 194.3 136.3 195.6 137.7 197 C 138.7 195.3 139.9 193.7 141.2 191.6 C 140 190.6 138.7 189.1 138.3 189.4 Z M 61 412.7 C 59.7 412.7 58.4 412.7 57.1 412.9 C 54.7 413 53.9 414.7 54.7 416.6 C 55.4 418.1 56.7 420.3 58 420.3 C 60.6 420.4 61.3 418.3 61.1 415.9 C 61 415 61 413.9 61 412.7 Z M 54 345.8 C 55 347.8 56.1 349.5 57.1 351.4 C 58.3 349.9 59.8 348.5 60.4 346.8 C 60.7 346.1 58.6 344.7 57.4 343.5 C 55.9 344.7 54 345.7 54 345.8 Z M 329.1 562 C 328.1 563.1 326.4 564.1 326.4 565.2 C 326.4 566.4 328.1 567.5 329 568.5 C 330 567.5 331.1 566.7 332.6 565.2 C 331.3 563.8 330.1 563 329.1 562 Z M 174.3 497.7 C 172.5 498.9 171.2 500.7 169.6 502.3 C 170.4 502.9 171.1 503.9 171.8 504 C 174.2 504.3 176.6 504.4 177.8 500.7 C 176.8 499.7 174.8 497.5 174.3 497.7 Z M 51.2 406.8 C 49.4 406.5 46.9 406.2 47.2 408.9 C 47.3 410.3 49.3 412.3 50.6 412.4 C 51.9 412.6 53.3 410.7 55.6 409 C 53.6 407.9 52.4 406.9 51.2 406.8 Z M 62.8 372.6 C 62.8 370.3 61.8 369.3 59.6 369.3 C 57.4 369.3 56.1 370.1 56 372.4 C 55.9 374.4 56.3 376.1 59 376 C 61.3 376.1 62.8 375.4 62.8 372.6 Z M 559.7 385.4 C 562.8 385.2 561.7 383.5 560.8 381.7 C 560.6 381.1 561.4 380.1 561.8 379.3 C 562.3 378.6 562.7 377.7 563.1 377 C 562.3 377.1 561 376.8 560.4 377.4 C 559.1 378.6 558 380.1 556.6 381.8 C 558 383.5 559 385.4 559.7 385.4 Z M 324.4 85.6 C 322.9 85.3 317.6 88.6 318.2 89.6 C 318.7 90.7 320 91.9 321.3 92 C 323.9 92.5 325.9 90 325.9 86.8 C 325.4 86.5 325 85.8 324.4 85.6 Z M 63.8 331.8 C 60.8 331.6 60.7 334.1 61 336.1 C 61.1 337.3 62.6 338.2 63.4 339.2 C 64.4 338.1 65.4 337.1 66.7 335.8 C 65.4 334 64.7 332 63.8 331.8 Z M 38.6 413 C 38.5 415.6 40.2 415.9 42.3 415.9 C 44.2 415.9 45.9 414.7 45 413.2 C 44.3 411.6 42.2 410.7 39.9 408.9 C 39.2 410.9 38.6 411.9 38.6 413 Z M 59.4 395.4 C 58.1 395.5 56.6 395.2 55.6 395.8 C 54.4 396.5 53.7 398.1 52.9 399.3 C 54.4 400.2 55.9 401.3 57.4 401.8 C 57.9 401.9 59.1 399.6 59.6 398.5 C 59.8 397.5 59.4 396.4 59.4 395.4 Z M 23.8 432.2 C 23 433 21.4 433.9 21.5 434.4 C 22.1 436.2 23.2 437.8 24.2 439.5 C 24.8 438.4 25.5 437.1 26.4 435.5 C 25.4 434.2 24.7 433.2 23.8 432.2 Z M 493.6 120.9 C 491.9 120.4 490.5 121.4 490.5 123.4 C 490.5 124.5 491.1 125.6 491.3 126.9 C 493 126.2 494.9 125.5 497.6 124.4 C 495.9 122.6 494.9 121.4 493.6 120.9 Z M 490.2 102.4 C 489.6 101.7 488.8 100.4 488.5 100.4 C 486.5 101.4 484.8 102.6 482.8 103.7 C 483.5 104.1 484.2 104.6 485.8 105.4 C 487.4 104.4 488.8 103.4 490.2 102.4 Z M 590.6 362.6 C 589.5 361.9 588.3 360.8 587 360.5 C 586.5 360.3 585.6 362 584.9 362.9 C 585.8 363.6 586.8 364.3 588 365.3 C 589 364.2 589.9 363.5 590.6 362.6 Z M 56 380.5 C 55.9 379.6 54.6 378.1 53.7 378.1 C 50.9 378.1 51.4 380.5 51.7 382.3 C 51.9 383.1 53.2 383.8 54.9 385.5 C 55.4 383.1 56.3 381.7 56 380.5 Z M 58.1 448.3 C 57.1 448 55.9 448.8 54.7 449.2 C 55.7 450.5 56.6 452 58 452.9 C 58.6 453.3 60 452.3 62.1 451.5 C 60.3 449.9 59.3 448.6 58.1 448.3 Z M 115.1 512.4 C 114.7 513.6 114.1 514.6 114.1 515.7 C 114.1 516.3 115.7 517.5 115.8 517.4 C 117.1 516.5 118.2 515.4 119.5 514.4 C 117.9 513.6 116.5 513 115.1 512.4 Z M 71.7 303.2 C 71 304.2 69.7 305.2 69.7 306.1 C 69.7 306.9 71.2 307.6 72.1 308.3 C 72.7 307.6 73.2 306.9 73.9 305.9 C 73.1 304.9 72.4 304.1 71.7 303.2 Z M 271.9 555.8 C 271.7 556.4 273.3 557.8 273.5 557.8 C 274.5 557.4 275.4 556.7 276 555.7 C 276.3 555.3 275.2 554.1 274.3 552.7 C 273.2 554.1 272.2 554.9 271.9 555.8 Z M 117.9 527.4 C 117.9 526.7 117.1 525.4 116.5 525.2 C 115.8 525.1 114.2 525.9 114.2 526.2 C 114.2 527.2 115 528.2 115.8 530.1 C 116.9 528.8 117.9 528.1 117.9 527.4 Z M 516.3 515.7 C 516.8 516.5 518 517.1 518.8 517.7 C 519.2 516.8 520.1 516 520.1 515.3 C 520.1 514.6 519 514 517.8 512.7 C 517.1 514.1 516.1 515.3 516.3 515.7 Z M 48.3 439.9 C 48.5 441.4 48.2 442.9 48.7 444.2 C 49 444.9 50.6 445.2 51.6 445.6 C 52 444.3 53 442.2 52.7 441.9 C 51.4 440.9 49.7 440.6 48.3 439.9 C 48.2 440.1 48.3 439.9 48.3 439.9 Z M 573.4 379.4 C 572.8 380.1 571.7 381 571.9 381.5 C 572.2 382.5 573.1 383.5 574.1 384 C 574.6 384.2 575.6 383.4 577.4 382.7 C 575.5 381.1 574.4 380.3 573.4 379.4 Z M 581.8 331.7 C 581.1 332 580.1 333 580.1 333.7 C 580.1 334.4 581.1 335.1 581.6 335.8 C 582.5 335.1 583.5 334.3 585.2 332.8 C 583.5 332.1 582.5 331.4 581.8 331.7 Z M 151.7 156.5 C 151.4 157.1 150.7 158.2 150.8 158.4 C 151.6 159.1 152.6 159.8 153.6 160.2 C 153.7 160.4 154.4 159.4 155.3 158.5 C 153.8 157.7 152.8 157.1 151.7 156.5 Z M 102.4 500.5 C 102.9 498.6 102 497.3 99.9 497.5 C 99.3 497.5 98.6 498.2 98 498.6 C 98.7 499.7 99.6 500.9 100.6 502.4 C 101.4 501.6 102.3 501 102.4 500.5 Z M 399.1 55.6 C 398.8 54.4 398.3 53.4 397.9 52.4 C 397.5 52.7 396.8 53 396.8 53.2 C 397.2 54.6 397.9 56 398.8 58.1 C 398.9 56.9 399.2 56.1 399.1 55.6 Z M 105 532.6 C 104.3 532.2 103.7 531.5 102.9 531.4 C 102.4 531.2 101.4 532.1 101.4 532.5 C 101.4 533.3 101.9 534.3 102.3 535.6 C 104 533.6 104.4 533.1 105 532.6 Z M 504.4 508.1 C 505 507.4 505.9 506.9 506 506.1 C 506.1 505.7 505.3 505 505 504.4 C 504.3 505 503.6 505.6 502.7 506.1 C 503.6 507 504 507.6 504.4 508.1 Z M 92.6 472.4 C 92.3 471.7 91.3 471.3 90.6 470.7 C 90.3 471.4 89.8 472 89.8 472.7 C 89.9 473.5 90.5 474.2 91.5 476.2 C 92.2 474 92.9 473 92.6 472.4 Z M 53.2 486.9 C 52.4 487.4 51.9 488.2 51.7 488.9 C 51.6 489.3 52.4 489.9 52.9 490.5 C 53.4 489.9 54 489.3 55.4 487.9 C 54.3 487.4 53.4 486.6 53.2 486.9 Z M 560.7 427.5 C 560.6 427.5 560.3 428.1 560.1 428.4 C 561 428.8 561.8 429.2 562.7 429.8 C 562.8 429.4 563.1 429 563.5 428.1 C 562.4 427.8 561.5 427.7 560.7 427.5 Z M 476.2 112 C 476.1 112.4 476.4 113 476.5 113.4 C 477.2 112.8 478.1 112.4 478.7 111.7 C 478.9 111.4 478.4 110.5 477.8 108.7 C 477 110.5 476.5 111.3 476.2 112 Z M 113.2 222.8 C 113.2 222.5 112.7 221.8 112.5 221.8 C 112 221.9 111.3 222.3 111.1 222.8 C 111 223.2 111.7 223.8 112.2 224.8 C 112.7 223.8 113.1 223.3 113.2 222.8 Z M 158.4 143.4 C 158.1 143.3 157.2 143.9 157.2 144 C 157.4 144.6 157.7 145.3 158 145.9 C 158.5 145.6 159.1 145.4 160.2 144.9 C 159.2 144.1 158.8 143.7 158.4 143.4 Z M 49.9 449.5 C 49.2 449.5 48.5 450.5 48.2 451.2 C 48 451.5 48.9 452.7 49.3 452.7 C 50 452.7 50.9 452.3 52.4 451.8 C 51.2 450.5 50.4 449.5 49.9 449.5 Z M 569.8 438.2 C 569.8 437.9 569.2 437.2 569.1 437.2 C 568.5 437.5 567.8 437.8 567.7 438.2 C 567.5 438.6 568.2 439.2 568.8 440.2 C 569.4 439.4 569.8 438.8 569.8 438.2 Z M 579.5 288.1 C 580.1 288.1 580.8 287.4 580.9 287 C 581.1 286.6 580.3 285.7 579.9 285.6 C 579.5 285.4 578.8 286 576.5 287.3 C 578.2 287.7 578.9 288.1 579.5 288.1 Z M 25 394.2 C 25 394.4 26.1 394.8 26.1 394.8 C 26.5 394.2 26.7 393.6 26.9 393.1 C 26.5 392.9 26.1 392.7 25.4 392.4 C 25.1 393.1 24.8 393.6 25 394.2 Z M 436.7 62.4 C 436.5 62.8 436.2 63.3 436.2 63.7 C 436.2 64 436.8 64.1 437.1 64.4 C 437.2 64 437.4 63.5 437.5 63.1 C 437.2 62.8 436.9 62.6 436.7 62.4 Z M 430.4 46.5 C 430.5 46.3 430.7 46 430.8 45.9 C 430.8 45.6 430.8 45.5 430.7 45.2 C 430.7 45.2 430.4 45.2 430.4 45.2 C 430.4 45.6 430.4 46 430.4 46.5 Z M 440.8 74.5 C 440.6 74.2 440.6 74.1 440.5 73.9 C 440.4 73.8 440.2 73.8 440.1 73.7 C 440.4 73.9 440.6 74.1 440.8 74.5 Z M 440.8 74.5 %22 fill-opacity=%221%22 fill-rule=%22nonzero%22/%3E%3C/g%3E%3C/svg%3E"); }
/* Bullets and list markers */
.point-list li,
ul.includes li {
position: relative;
padding-left: 22px;
list-style: none;
}
/* A list still needs a marker, so these are the one place the mark is
not simply deleted - it becomes a plain dot. */
.point-list li::before,
ul.includes li::before {
content: "";
position: absolute;
left: 3px;
top: .62em;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
opacity: .8;
}
/* ============================================================
B10 · SECTION HEAD COLOUR ROTATION · Brand Kit §4a
Heads cycle white -> pink -> blue down the page, never two
alike consecutively; the script eyebrow never matches the
head below it. Applied by tools/brand/apply-head-rotation.py,
which is re-runnable after any section is added or moved.
Attribute selector so every one-off eyebrow class responds
to the same three modifiers.
============================================================ */
[class*="eyebrow"].pink { color: var(--ml-pink); }
[class*="eyebrow"].blue { color: var(--ml-blue); }
[class*="eyebrow"].white { color: var(--ml-white); }
/* ============================================================
PAGE HERO · Category E
Standard head for the pages split off the homepage
(/careers, /community). Same rhythm as a section head, sized
up for a page opener. Colour comes from the rotation classes.
============================================================ */
.page-hero {
padding: 140px 0 64px;
background:
radial-gradient(900px 520px at 50% 0%, rgba(255, 140, 224, 0.14), transparent 62%),
var(--ml-ink, #0E0E10);
text-align: center;
}
.page-hero .container { max-width: 900px; }
.page-hero .section-title { margin: 0 0 18px; }
.page-hero .section-sub {
color: var(--ml-body, #C9C9CE);
font-size: 18px;
line-height: 1.55;
max-width: 680px;
margin: 0 auto;
}
@media (max-width: 700px) {
.page-hero { padding: 110px 0 48px; }
.page-hero .section-sub { font-size: 16px; }
}
/* ============================================================
SPEC LINE · Tell 6 / web-implementation §4
Replaces the repeated four-up stat strip everywhere except
franchise, where numbers genuinely sell. Middot separators
are real · characters, per the Aug 2026 direction.
============================================================ */
.spec-line {
font-family: var(--body, "Inter", system-ui, sans-serif);
font-size: 15px;
letter-spacing: .04em;
line-height: 1.9;
color: var(--ml-body, #C9C9CE);
text-align: center;
max-width: 780px;
margin: 0 auto;
}
.spec-line strong { color: var(--ml-white, #fff); font-weight: 600; }
@media (max-width: 640px) { .spec-line { font-size: 14px; text-align: left; } }
/* ============================================================
F2 · SPRAY DRIP BACKGROUND ELEMENT
Brand Kit §12a · web-implementation §5
Atmosphere behind content, never a foreground graphic. Sized
off SECTION HEIGHT rather than pixels so the "at least a
quarter of the section" proportion survives every breakpoint.
The rules, and they are not stylistic:
· 22% opacity. Pink at 22% over ink lands around #432A3C,
which stays under the ground ceiling so headlines over it
still measure AAA. At 50% the type drops below spec.
· Alternating sides, never two sections in a row, never
more than two on one page.
· Never behind a light flare - flares need clean ink around
them or they read as a printing fault. Every section on
the homepage carrying a radial-gradient is therefore out.
· The artwork bleeds off its own artboard (open question
Q19), so the cut edge is turned to face the outer edge of
the section. That reads as a deliberate bleed rather than
an accidental slice. Once a re-export with clear margin
lands, the .drip-left flip can go.
Inlined as a data URI so it also renders from a local file://
preview, where Chrome blocks an external SVG used as a mask.
============================================================ */
:root { --drip-shape: url("images/brand/spray-drip-element-2.min.svg"); }
.has-drip { position: relative; overflow: hidden; }
.has-drip > .container,
.has-drip > .wrap { position: relative; z-index: 1; }
.drip-art {
position: absolute;
z-index: 0;
pointer-events: none;
height: min(78%, 720px);
max-width: 78%;
aspect-ratio: 612 / 792;
opacity: .22;
background-color: var(--drip-colour);
-webkit-mask: var(--drip-shape) center / contain no-repeat;
mask: var(--drip-shape) center / contain no-repeat;
}
.drip-top { top: 0; }
.drip-bottom { bottom: 0; }
.drip-right { right: 0; }
.drip-left { left: 0; transform: scaleX(-1); } /* cut edge to the outer edge */
.drip-pink { --drip-colour: var(--ml-pink, #FF8CE0); }
.drip-blue { --drip-colour: var(--ml-blue, #5BD0E6); }
@media (max-width: 640px) {
.drip-art { height: min(46%, 460px); max-width: 86%; opacity: .18; }
}
.boombox--photo .boombox__room { display: none; }
/* ============================================================
F4 · THE MILKY LANE STEREO · photoreal build
images/brand/boombox-hero.webp — rendered in Magnific from
the venue's own DJ podium (Venue Renders View 09), upscaled
2x at Creativity -3 so the neon and the script were not
redrawn.
The live Spotify player is positioned INTO the unit's centre
panel. Those percentages are measured off the master, not
guessed: cabinet spans x 8.5-91.5%, speakers centre on 33.1%
and 67.8%, and the panel's dark zone sits above the VU strip
at roughly y 18-42%. If the image is ever re-rendered,
re-measure before touching them.
Below 900px the player leaves the image and sits under it in
a matching neon deck — at phone width the panel is far too
small to hold a usable player.
============================================================ */
.boombox--photo { width: min(1320px, 100%); margin: 0 auto; position: relative; }
.boombox--photo .boombox__unit {
position: relative;
aspect-ratio: 2560 / 1086;
background: url("images/brand/boombox-hero.webp") center / contain no-repeat;
animation: ml-bb-breathe 6s ease-in-out infinite;
/* The render's own ground is #07090A and the section is #050505, so the
image edge showed as a faint rectangle. Feather the outer 6% away and
the unit sits in the section rather than on top of it. */
-webkit-mask:
linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
linear-gradient(180deg, transparent 0, #000 4%, #000 90%, transparent 100%);
-webkit-mask-composite: source-in;
mask:
linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
linear-gradient(180deg, transparent 0, #000 4%, #000 90%, transparent 100%);
mask-composite: intersect;
}
/* the neon has its own life - a slow, shallow lift. Nothing more. */
@keyframes ml-bb-breathe {
0%, 100% { filter: brightness(1) saturate(1); }
50% { filter: brightness(1.06) saturate(1.05); }
}
/* room glow picked up off the unit, background layer only */
.boombox--photo .boombox__room {
position: absolute; inset: 8% 2% -10%; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 34% 60% at 33% 52%, rgba(91,208,230,.30), transparent 68%),
radial-gradient(ellipse 34% 60% at 68% 52%, rgba(91,208,230,.30), transparent 68%),
radial-gradient(ellipse 62% 46% at 50% 88%, rgba(255,140,224,.34), transparent 72%);
filter: blur(54px);
}
/* the player, seated in the centre panel */
.boombox--photo .boombox__stage { position: relative; }
.boombox--photo .boombox__player {
position: absolute;
left: 38%; width: 24%;
top: 19%;
z-index: 2;
padding: 0; background: none; border: 0; box-shadow: none;
border-radius: 6px; overflow: hidden;
outline: 1px solid rgba(255,140,224,.35);
outline-offset: 3px;
}
.boombox--photo .boombox__player iframe { height: 80px; border-radius: 6px; }
/* eyebrow above the unit */
.boombox--photo .boombox__deckhead {
display: flex; align-items: center; justify-content: center; gap: 18px;
margin-bottom: 22px;
}
.boombox--photo .boombox__cta {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: -34px; z-index: 2; margin: 0;
}
@media (max-width: 900px) {
/* the centre panel is ~90px wide at phone width - unusable.
The player comes out of the image and sits under it. */
.boombox--photo .boombox__player {
position: static; width: 100%; margin-top: 20px;
outline: 0; padding: 9px; background: #060608;
border: 2px solid var(--ml-pink, #FF8CE0); border-radius: 9px;
box-shadow: inset 0 0 18px rgba(255,140,224,.12);
}
.boombox--photo .boombox__cta {
position: static; transform: none; display: block;
width: max-content; margin: 18px auto 0;
}
/* a 5% fade is only ~7px at phone height and clipped the reflection */
.boombox--photo .boombox__unit {
animation: none;
-webkit-mask: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
}
@media (prefers-reduced-motion: reduce) {
.boombox--photo .boombox__unit { animation: none; }
}
/* ============================================================
F4b · THE STEREO, RUNNING
Christian, 27 Aug: "rekon we could have some animation on the
stereo? Make it a little better?"
The unit is one flat render, so nothing in it can move on its
own. These overlays sit on top at coordinates measured off the
file (see the comment in index.html) - not a redraw, just the
two parts of a stereo that are supposed to move.
Deliberately NO glow anywhere. He asked for the outer glow to
come off the whole site the same day; a VU meter that halos
would put it straight back.
============================================================ */
/* ---- the VU meter -------------------------------------------
The render has a frozen meter baked into it, so the animated one
sits on a plate that covers it. Everything here is derived from
measurements of boombox-hero.webp (2560x1086):
bars bounding box x 970-1590 y 479-518
= 37.89-62.11% 44.11-47.70% of the unit
column width 51px = 1.99% pitch 63px = 2.469%
segment ~8px tall, ~3px gap -> 4 rows in the box
housing interior #141C23 at the left margin, #10181C at the
right - which is why the plate disappears
into the art instead of reading as a patch.
The plate is drawn a little larger than the bars so it also takes
the bloom around them; the columns are then placed back inside it
by absolute offset. An earlier version distributed them with flex
and space-between, which put the whole meter a column to the right
and short at both ends - the browser was dividing space I had
already measured. Each column is now placed where it actually is.
------------------------------------------------------------ */
.boombox--photo .boombox__unit { position: relative; }
.bb-vu {
position: absolute; z-index: 2; pointer-events: none;
/* the plate · slightly proud of the bars on every side */
left: 36.9%; right: 36.9%;
top: 43.2%; height: 5.2%;
border-radius: 5px;
background:
linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 55%),
linear-gradient(90deg, #141C23 0%, #10181C 100%);
}
.bb-vu i {
position: absolute;
/* all four values are fractions of the PLATE, converted from the
unit-percentages above: width 1.99/26.2, pitch 2.469/26.2, and so on. */
width: 7.60%;
left: calc(3.78% + var(--i) * 9.42%);
bottom: 13.5%;
height: 69%;
/* Segments come from a repeating gradient rather than four more elements,
so they never stretch: the column height is constant and clip-path is
the only thing that moves. 25% pitch = the four rows in the render. */
background: repeating-linear-gradient(
to top,
var(--c) 0 18%,
transparent 18% 25%);
--c: #FF8CE0;
animation: bb-vu-a var(--dur, 1.25s) steps(4, jump-none) infinite alternate;
animation-delay: calc(var(--i) * -0.19s);
}
/* the render alternates pink and blue across the ten columns */
.bb-vu i:nth-child(even) { --c: #5BD0E6; }
/* three cadences, dealt round-robin, so the meter never marches in step */
.bb-vu i:nth-child(3n) { --dur: 1.05s; animation-name: bb-vu-b; }
.bb-vu i:nth-child(3n+1) { --dur: 1.45s; }
.bb-vu i:nth-child(3n+2) { --dur: 0.85s; animation-name: bb-vu-c; }
@keyframes bb-vu-a {
0% { clip-path: inset(75% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
@keyframes bb-vu-b {
0% { clip-path: inset(50% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
@keyframes bb-vu-c {
0% { clip-path: inset(75% 0 0 0); }
100% { clip-path: inset(25% 0 0 0); }
}
/* ---- the cones ----------------------------------------------
A speaker moves air; it does not light up. So this is a scale
and a faint darkening at the rim, not a halo. At rest it is
invisible. */
.bb-cone {
position: absolute; z-index: 1; pointer-events: none;
width: 23.24%; aspect-ratio: 1; border-radius: 50%;
top: 48.85%; transform: translate(-50%, -50%);
background: radial-gradient(circle at 50% 50%,
transparent 46%, rgba(0,0,0,.34) 68%, transparent 78%);
opacity: 0;
animation: bb-cone 1.25s cubic-bezier(.36,.06,.28,.98) infinite alternate;
}
.bb-cone--l { left: 23.18%; }
.bb-cone--r { left: 76.82%; animation-delay: -.62s; }
@keyframes bb-cone {
0% { opacity: .10; transform: translate(-50%, -50%) scale(.988); }
100% { opacity: .30; transform: translate(-50%, -50%) scale(1.012); }
}
@media (max-width: 900px) {
/* At phone width the housing is ~40px across - ten animated columns
inside it is noise, not detail. The plate would also sit over art
too small to have needed covering. */
.bb-vu, .bb-cone { display: none; }
}
@media (prefers-reduced-motion: reduce) {
/* Frozen, not hidden: the meter still reads as a meter, it just
stops moving. */
.bb-vu i { animation: none; clip-path: inset(45% 0 0 0); }
.bb-cone { animation: none; opacity: .2; }
}
/* ============================================================
LANE STRIP · the "Find Your Lane" banner, running
Built by ml-lanes.js from locations-data.js. See that file for
why the store list is not read off the images folder.
The band keeps its pink ground and wordmark pattern - the strip
sits ON it rather than replacing it, so the section still reads
as the CTA it was. D1 applies throughout: this is a pink fill,
so every label is ink, never white.
============================================================ */
.cta-banner--lane .container { position: relative; z-index: 2; }
.lanestrip {
position: relative; z-index: 2;
margin: 38px calc(50% - 50vw) -8px; /* full-bleed out of the container */
width: 100vw;
overflow: hidden;
/* Cards fade in and out at the edges instead of being guillotined by the
section border. */
-webkit-mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.lanestrip__track {
display: flex; width: max-content; gap: 18px;
padding: 4px 9px;
animation: ml-lane-run 46s linear infinite;
}
/* -50% exactly, because the track holds the venues twice - at the end of a
cycle the second copy is where the first began, so the loop has no seam. */
@keyframes ml-lane-run {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.lanestrip.is-held .lanestrip__track { animation-play-state: paused; }
.lane {
flex: 0 0 220px; text-decoration: none; display: block;
transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.lane__shot {
display: block; border-radius: 12px; overflow: hidden;
border: 2px solid rgba(14,14,16,.55);
background: rgba(14,14,16,.2);
}
.lane__shot img { display: block; width: 100%; height: auto; }
.lane__name {
display: flex; align-items: baseline; justify-content: center; gap: 7px;
margin-top: 9px;
font-family: var(--display); text-transform: uppercase;
font-size: 14px; letter-spacing: .07em;
/* ink on the pink fill · white here is 2.08:1 */
color: var(--ml-ink, #0E0E10);
}
.lane__state {
font-size: 10px; letter-spacing: .16em;
color: rgba(14,14,16,.62);
}
.lane:hover, .lane:focus-visible { transform: translateY(-6px); outline: none; }
.lane:hover .lane__shot, .lane:focus-visible .lane__shot { border-color: var(--ml-ink, #0E0E10); }
@media (max-width: 760px) {
.lane { flex: 0 0 156px; }
.lanestrip__track { gap: 12px; animation-duration: 34s; }
.lane__name { font-size: 12px; }
.lanestrip { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
/* Stopped, but still reachable: the strip becomes a normal scroller so the
venues are not simply unavailable to anyone who turns motion off. */
.lanestrip { overflow-x: auto; -webkit-mask: none; mask: none; scrollbar-width: thin; }
.lanestrip__track { animation: none; }
}
/* ============================================================
Cookie consent · Hayley TECHNICAL tab
Ink ground with a pink keyline, per Brand Kit §3 (pink and
blue on dark grounds only). Ink type on the pink Accept fill,
never white - white on Milky Pink measures 2.08:1.
============================================================ */
.ml-consent {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
background: var(--ml-charcoal, #17171B);
border: 1px solid rgba(255,140,224,.28);
border-radius: 14px;
box-shadow: 0 18px 50px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
padding: 18px 20px;
transform: translateY(12px); opacity: 0;
transition: transform .26s ease, opacity .26s ease;
}
.ml-consent.is-in { transform: none; opacity: 1; }
.ml-consent__inner {
max-width: 1180px; margin: 0 auto;
display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.ml-consent__copy { flex: 1 1 340px; min-width: 0; }
.ml-consent__title {
font-family: var(--display, "Anton", Impact, sans-serif);
text-transform: uppercase; letter-spacing: .1em;
font-size: 15px; line-height: 1; margin: 0 0 6px;
color: var(--ml-pink, #FF8CE0);
}
.ml-consent__body {
margin: 0; font-size: 14px; line-height: 1.5;
color: var(--ml-text, #E9E9EE);
}
.ml-consent__body a { color: var(--ml-blue, #5BD0E6); text-decoration: underline; }
.ml-consent__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.ml-consent__btn {
font-family: var(--display, "Anton", Impact, sans-serif);
text-transform: uppercase; letter-spacing: .1em; font-size: 13px;
padding: 11px 22px; border-radius: 999px; cursor: pointer;
border: 1px solid transparent; transition: transform .16s ease, filter .16s ease;
}
.ml-consent__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.ml-consent__btn:focus-visible { outline: 2px solid var(--ml-blue, #5BD0E6); outline-offset: 3px; }
.ml-consent__btn--accept {
background: var(--ml-pink, #FF8CE0);
color: var(--ml-ink, #0E0E10); /* D1 · ink on pink, 9.26:1 */
}
.ml-consent__btn--ghost {
background: transparent;
color: var(--ml-text, #E9E9EE);
border-color: rgba(255,255,255,.28);
}
@media (max-width: 620px) {
.ml-consent__inner { flex-direction: column; align-items: stretch; gap: 14px; }
/* flex-basis is the MAIN axis, and the main axis here is now vertical, so
the 340px basis was reserving 340px of HEIGHT for two lines of text.
The banner came to 436px - half a phone screen - most of it empty. */
.ml-consent__copy { flex: 0 0 auto; }
.ml-consent__actions { justify-content: stretch; }
.ml-consent__btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ml-consent { transition: none; transform: none; }
}
/* ============================================================
GIFT CARD MODAL · .gcm
------------------------------------------------------------
Gift cards are sold by Gift-it, not by this site. Clicking
"Gift Cards" anywhere opens this panel so the handoff to an
external checkout is a choice rather than a surprise.
Brand Kit compliance:
· no text-shadow on type
· pink and blue on dark grounds only
· ink on any pink fill, never white (D1 · 9.26:1)
· no pink-to-blue gradient anywhere
============================================================ */
.gcm {
position: fixed; inset: 0; z-index: 12000;
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 0; visibility: hidden;
transition: opacity .2s ease, visibility .2s ease;
}
.gcm.is-open { opacity: 1; visibility: visible; }
.gcm__scrim {
position: absolute; inset: 0;
background: rgba(5, 5, 6, .82);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.gcm__panel {
position: relative;
width: 100%; max-width: 460px;
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 38px 34px 30px;
background: #131316;
border: 1px solid var(--ml-pink, #FF8CE0);
border-radius: 20px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
transform: translateY(14px) scale(.98);
transition: transform .24s cubic-bezier(.2, .8, .3, 1);
text-align: left;
}
.gcm.is-open .gcm__panel { transform: none; }
.gcm__x {
position: absolute; top: 12px; right: 14px;
width: 36px; height: 36px; line-height: 1;
font-size: 26px;
background: transparent; border: 0; border-radius: 999px;
color: var(--ml-text-dim, #B7B7BD);
cursor: pointer;
transition: color .16s ease, background .16s ease;
}
.gcm__x:hover { color: var(--ml-text, #E9E9EE); background: rgba(255, 255, 255, .07); }
.gcm__x:focus-visible { outline: 2px solid var(--ml-blue, #5BD0E6); outline-offset: 2px; }
.gcm__eyebrow {
display: block;
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
color: var(--ml-blue, #5BD0E6);
margin-bottom: 10px;
}
.gcm__title {
font-family: var(--display, "Anton", Impact, sans-serif);
font-size: clamp(28px, 6vw, 38px);
line-height: 1.02;
text-transform: uppercase;
color: var(--ml-text, #E9E9EE);
margin: 0 0 12px;
text-shadow: none;
}
.gcm__title-pink { color: var(--ml-pink, #FF8CE0); }
.gcm__body {
margin: 0 0 20px;
font-size: 15px; line-height: 1.55;
color: var(--ml-text-dim, #B7B7BD);
}
.gcm__points {
list-style: none; margin: 0 0 26px; padding: 0;
display: grid; gap: 12px;
}
.gcm__points li {
display: flex; align-items: center; gap: 12px;
font-size: 14.5px; line-height: 1.4;
color: var(--ml-text, #E9E9EE);
}
.gcm__points .mli {
font-size: 19px;
color: var(--ml-pink, #FF8CE0);
flex: 0 0 auto;
}
.gcm__actions { display: grid; gap: 10px; margin-bottom: 18px; }
.gcm__btn {
display: block; text-align: center; text-decoration: none;
font-family: var(--display, "Anton", Impact, sans-serif);
font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
padding: 15px 22px; border-radius: 999px;
border: 1px solid transparent;
transition: transform .16s ease, filter .16s ease;
}
.gcm__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.gcm__btn:focus-visible { outline: 2px solid var(--ml-blue, #5BD0E6); outline-offset: 3px; }
.gcm__btn--go {
background: var(--ml-pink, #FF8CE0);
color: var(--ml-ink, #0E0E10); /* D1 · ink on pink, 9.26:1 */
}
.gcm__btn--alt {
background: transparent;
color: var(--ml-text, #E9E9EE);
border-color: rgba(255, 255, 255, .26);
}
.gcm__fine {
margin: 0;
font-size: 12.5px; line-height: 1.5;
color: var(--ml-text-dim, #B7B7BD);
}
@media (max-width: 520px) {
.gcm { padding: 14px; align-items: flex-end; }
.gcm__panel { padding: 32px 22px 26px; border-radius: 20px 20px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
.gcm, .gcm__panel { transition: none; }
.gcm__panel { transform: none; }
.gcm__btn:hover { transform: none; }
}
/* ============================================================
TELL 5 + TELL 6 · break the rhythm, one stat strip
------------------------------------------------------------
Hayley Round 1. Five menu pages plus catering each opened with
the same module: a centred four-up grid of 48-84px numbers.
Same beat, same scale, every page - which is the rhythm she
was reacting to.
The facts themselves are good (11 burgers, 9 house sauces,
48hr catering notice), so nothing is deleted. The module is
demoted instead: left-aligned, roughly half the type size,
and deliberately off the page grid so it does not line up
with the section above it. Franchise keeps the one full-scale
stat strip, which is what Tell 6 asked for.
============================================================ */
.bg-stats, .sd-stats, .ds-stats, .sh-stats, .ck-stats, .ct-stats {
padding: 34px 0 !important;
}
.bg-stats-grid, .sd-stats-grid, .ds-stats-grid,
.sh-stats-grid, .ck-stats-grid, .ct-stats-grid {
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important;
gap: 20px 34px !important;
text-align: left !important;
/* Offset from the container edge so the band sits off the grid the rest of
the page is built on. That mismatch is the point. */
margin-left: clamp(0px, 4vw, 64px);
border-left: 2px solid var(--ml-pink, #FF8CE0);
padding-left: clamp(16px, 3vw, 34px);
}
.bg-stat .num, .sd-stat .num, .ds-stat .num,
.sh-stat .num, .ck-stat .num, .ct-stat .num {
font-size: clamp(26px, 2.8vw, 40px) !important;
letter-spacing: 0 !important;
}
.bg-stat .lbl, .sd-stat .lbl, .ds-stat .lbl,
.sh-stat .lbl, .ck-stat .lbl, .ct-stat .lbl {
font-size: 17px !important;
transform: none !important;
margin-top: 2px !important;
}
.bg-stat .small, .sd-stat .small, .ds-stat .small,
.sh-stat .small, .ck-stat .small, .ct-stat .small {
font-size: 12.5px !important;
max-width: 30ch;
}
/* Franchise keeps the one full-scale strip. Its CSS already lived in
franchise.html - it had simply lost the markup that used it - so the styles
are not duplicated here. */
/* ---------- .brick-break--offset · TELL 5, the asymmetric section ----------
Every other break on the site centres its content, which is part of why the
page rhythm reads the same all the way down. This one weights everything to
the left and leaves the wall bare on the right, so the section deliberately
does not balance. Falls back to centred below 760px, where an off-centre
column just reads as a mistake. */
/* image-set picks by pixel density, not viewport, so a 390px phone would still
pull the 800w plate. Serve the small end of the ladder below 700px. */
@media (max-width: 700px) {
.brick-break {
background-image: -webkit-image-set(
url('images/backgrounds/brick-drips-light-400w.webp') 1x,
url('images/backgrounds/brick-drips-light-800w.webp') 2x);
background-image: image-set(
url('images/backgrounds/brick-drips-light-400w.webp') 1x,
url('images/backgrounds/brick-drips-light-800w.webp') 2x);
}
.brick-break--heavy {
background-image: -webkit-image-set(
url('images/backgrounds/brick-drips-heavy-400w.webp') 1x,
url('images/backgrounds/brick-drips-heavy-800w.webp') 2x);
background-image: image-set(
url('images/backgrounds/brick-drips-heavy-400w.webp') 1x,
url('images/backgrounds/brick-drips-heavy-800w.webp') 2x);
}
}
.brick-break--offset .brick-break__inner {
align-items: flex-start;
text-align: left;
max-width: min(560px, 62%);
margin-right: auto;
padding: 48px clamp(24px, 6vw, 80px);
gap: 16px;
}
.brick-break--offset .brick-break__ctas { justify-content: flex-start; }
.brick-break--offset::after {
/* Push the vignette to the right so the type side stays clean. */
background: linear-gradient(90deg, rgba(5,5,5,0.86) 0%, rgba(5,5,5,0.62) 45%, rgba(5,5,5,0.20) 100%);
}
@media (max-width: 760px) {
.brick-break--offset .brick-break__inner {
align-items: center; text-align: center; max-width: 100%;
padding: 40px 24px;
}
.brick-break--offset .brick-break__ctas { justify-content: center; }
.brick-break--offset::after {
background: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.80) 100%);
}
}
/* ============================================================
F6 · LOGO ANIMATION
------------------------------------------------------------
Unblocked by B8. Two moments, both short:
1. On load the mark settles in - a quick overshoot and drop,
the way a stamp or a sticker lands. Runs once, never on
subsequent scrolls.
2. On hover it leans, like the hand-drawn sign it is. No
spin, no bounce loop - the Brand Kit voice is confident,
not cute.
Wholly disabled under prefers-reduced-motion. The logo is a
link to home; nothing here changes its hit area or its focus
ring, and no animation runs on the compact scrolled header
where it would fight the height transition.
============================================================ */
.logo img {
transform-origin: 50% 60%;
will-change: transform;
}
@keyframes ml-logo-land {
0% { transform: translateY(-14px) scale(.86) rotate(-5deg); opacity: 0; }
55% { transform: translateY(2px) scale(1.05) rotate(1.5deg); opacity: 1; }
78% { transform: translateY(0) scale(.985) rotate(-.6deg); }
100% { transform: none; opacity: 1; }
}
.site-header .logo img {
/* backwards, not both. A forwards-filled animation keeps its final keyframe
applied for the life of the element, and a filled animation outranks any
declared transform - which silently killed the hover lean below. The 100%
keyframe is already the base state, so nothing needs retaining. */
animation: ml-logo-land 720ms cubic-bezier(.22, 1.1, .36, 1) backwards;
}
.site-header .logo:hover img,
.site-header .logo:focus-visible img {
transform: rotate(-3deg) scale(1.045);
}
.site-header .logo img {
transition: height .3s ease, filter .3s ease, transform .28s cubic-bezier(.22, 1.1, .36, 1);
}
.site-header .logo:active img { transform: rotate(-1deg) scale(.97); }
/* The compact header already animates the logo's height; leave it alone. */
.site-header.compact .logo img { animation: none; }
@media (prefers-reduced-motion: reduce) {
.site-header .logo img,
.site-header.compact .logo img {
animation: none !important;
transition: height .3s ease, filter .3s ease;
}
.site-header .logo:hover img,
.site-header .logo:focus-visible img,
.site-header .logo:active img { transform: none; }
}
/* ============================================================
HEADER FIT · the logo is not the thing that gives
------------------------------------------------------------
26 Aug 2026. Adding "Gift Cards" as an eighth nav item pushed
.header-inner's content to 1448px inside a 1320px box. Every
child of that flex row is shrinkable by default, and the mark
is an ![]()
with width:auto - so the browser resolved the
overflow by collapsing the logo to ZERO width at every desktop
size. The logo was not missing, it was 0px wide.
Two fixes, both needed:
1. Pin the logo and the CTAs so they can never shrink.
2. Take the width back out of the nav so nothing has to.
My earlier nav-fit test measured .nav-main against
.header-ctas and the document scrollbar, and explicitly
ignored .header-inner's own overflow as "scrollWidth drift".
That dismissal is what hid this. The test now asserts on the
rendered logo width instead.
============================================================ */
.site-header .logo { flex: 0 0 auto; }
.site-header .logo img { flex: 0 0 auto; width: auto; }
.header-ctas { flex: 0 0 auto; }
/* The nav is the flexible one, and it needs ~64px back to fit
eight items. Taken from horizontal padding and tracking, which
costs nothing legible, rather than from font size. */
.nav-main { min-width: 0; }
.nav-main a { padding: 10px 9px !important; letter-spacing: 1px !important; }
.nav-dropdown__trigger { padding-left: 9px; padding-right: 9px; }
:root {
--stk-cut: url("data:image/svg+xml,![]()
's OWN currentSrc, not
hard-coded here. The cone is a second copy of the cabinet photograph
behind a mask, so if it names a fixed file it fetches a second,
differently-sized copy of the same picture: a phone was pulling 33KB
for the ![]()
and then another 113KB for the cones, and a retina screen
got a soft cone sitting inside a sharp cabinet. Taking currentSrc means
the browser reuses the one download it already made, at whatever rung of
the srcset ladder it picked, at any width or pixel ratio.
Deliberately no fallback value: with no JS, or under reduced motion,
--kick never moves, the copy would be pixel-identical to the image
underneath it, and painting it would cost a download to change nothing.
The declaration goes invalid, the layer paints nothing, and the render
itself shows through - which is exactly the right picture. */
.bb__cone--l{
/* an ELLIPSE, not a circle: radial-gradient(circle <%>) is invalid CSS -
a circle radius has to be a length. 12.137% of the width and 28.607% of
the height are the same number of pixels in a 3168x1344 box, so this is
a true circle that scales with the unit. */
-webkit-mask:radial-gradient(ellipse 12.137% 28.607% at 20.486% 54.018%,
#000 82%,rgba(0,0,0,.55) 92%,transparent 100%);
mask:radial-gradient(ellipse 12.137% 28.607% at 20.486% 54.018%,
#000 82%,rgba(0,0,0,.55) 92%,transparent 100%);
}
.bb__cone--l i{transform-origin:20.486% 54.018%}
.bb__cone--r{
-webkit-mask:radial-gradient(ellipse 12.137% 28.607% at 79.482% 54.018%,
#000 82%,rgba(0,0,0,.55) 92%,transparent 100%);
mask:radial-gradient(ellipse 12.137% 28.607% at 79.482% 54.018%,
#000 82%,rgba(0,0,0,.55) 92%,transparent 100%);
}
.bb__cone--r i{transform-origin:79.482% 54.018%}
/* ---------- the neon ------------------------------------------------
screen blend, so these only ever ADD to the render's own tubes.
Opacity and glow ride --pulse; the ring also breathes outward a
hair on the kick, which is what a tube next to a moving cone
actually looks like. */
.bb__neon{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.bb__ring{
position:absolute;border-radius:50%;
width:24.274%;aspect-ratio:1;
top:54.018%;transform:translateY(-50%) scale(calc(1 + var(--kick,0) * .006));
border:.28cqw solid rgba(91,208,230,var(--ring-a));
--ring-a:calc(.30 + var(--pulse,.5) * .45);
box-shadow:0 0 calc(1.1cqw + var(--pulse,.5) * 2.4cqw) rgba(91,208,230,calc(.34 + var(--pulse,.5) * .5)),
inset 0 0 1.2cqw rgba(91,208,230,.34);
will-change:transform,box-shadow;
}
.bb__ring--l{left:20.486%;margin-left:-12.137%}
.bb__ring--r{left:79.482%;margin-left:-12.137%}
.bb__tube{
position:absolute;left:6.629%;right:6.629%;top:19.196%;bottom:11.012%;
border-radius:2.4% / 5.6%;
border:.17cqw solid rgba(255,140,224,calc(.22 + var(--sweep,.5) * .3));
box-shadow:0 0 calc(.8cqw + var(--sweep,.5) * 1.6cqw) rgba(255,140,224,calc(.26 + var(--sweep,.5) * .34));
}
/* ---------- the spectrum -------------------------------------------
The render has twelve bars printed into it at fixed heights. They
are COVERED, not blended over: a screen-blended bar can only ever
ADD to what is printed, so every column keeps the printed bar as a
floor it can never drop below - which is exactly what gives a fake
EQ away. The cover repaints the recess, and the twelve bars below
are drawn from nothing, in the render's own column positions:
columns left edges 37.312% .. 61.187%, pitch 2.170%,
bar 1.626%, baseline 62.44% (measured, 12 runs)
------------------------------------------------------------------ */
.bb__eq{
position:absolute;left:37.312%;right:37.187%;top:58.40%;height:4.04%;
display:flex;align-items:flex-end;gap:2.133%;
pointer-events:none;
}
/* the cover · repaints the recess so the printed bars are gone.
Feathered on every edge, because the printed bars spill glow into
the panel around them and a hard rectangle would cut through it. */
.bb__eq::before{
content:'';position:absolute;left:-1.9%;right:-1.9%;top:-16%;bottom:-11%;
background:linear-gradient(180deg,#05090c 0%,#070d12 55%,#0a1117 100%);
-webkit-mask:radial-gradient(ellipse 52% 60% at 50% 50%,#000 62%,transparent 100%);
mask:radial-gradient(ellipse 52% 60% at 50% 50%,#000 62%,transparent 100%);
}
.bb__eq span{
position:relative;flex:1;border-radius:.18cqw .18cqw .06cqw .06cqw;
height:calc(12% + var(--lv,.4) * 88%);
background:linear-gradient(180deg,
rgba(255,255,255,calc(.18 + var(--lv,.4) * .34)) 0 7%,
var(--c) 30% 100%);
box-shadow:0 0 .5cqw var(--c),0 0 1.4cqw rgba(91,208,230,calc(.10 + var(--lv,.4) * .34));
--c:rgba(91,208,230,calc(.52 + var(--lv,.4) * .48));
will-change:height;
}
/* the top two columns of the strip run hot, the way a real display
clips - the pink is the peak colour, not decoration */
.bb__eq span:nth-child(3n+2){
--c:rgba(255,140,224,calc(.52 + var(--lv,.4) * .48));
box-shadow:0 0 .5cqw var(--c),0 0 1.4cqw rgba(255,140,224,calc(.10 + var(--lv,.4) * .34));
}
.bb__eq span:nth-child(1){--lv:var(--b0,.4)} .bb__eq span:nth-child(2){--lv:var(--b1,.4)}
.bb__eq span:nth-child(3){--lv:var(--b2,.4)} .bb__eq span:nth-child(4){--lv:var(--b3,.4)}
.bb__eq span:nth-child(5){--lv:var(--b4,.4)} .bb__eq span:nth-child(6){--lv:var(--b5,.4)}
.bb__eq span:nth-child(7){--lv:var(--b6,.4)} .bb__eq span:nth-child(8){--lv:var(--b7,.4)}
.bb__eq span:nth-child(9){--lv:var(--b8,.4)} .bb__eq span:nth-child(10){--lv:var(--b9,.4)}
.bb__eq span:nth-child(11){--lv:var(--b10,.4)} .bb__eq span:nth-child(12){--lv:var(--b11,.4)}
/* ---------- the VU needles -------------------------------------------
The needles are printed into the render, so they cannot be rotated.
Rotating a masked copy of the image was tried first and it drags the
printed scale round with the needle - the wedge reads as a notch cut
in the glass. So each meter gets two strokes instead:
the shadow a soft dark stroke laid exactly along the printed
needle, multiplied into the glass. It knocks the
printed needle back to about the brightness of the
glass around it, and what is left of it reads as the
needle's own shadow, which a real meter has anyway.
the needle a pink stroke with a glow, screen-blended, swinging
on the channel's ballistics.
Measured off the master:
pivot L 43.636% / 54.42% R 57.50% / 54.60%
length 2.94% of the width; at rest the printed needles sit
14deg (L) and 11.5deg (R) right of vertical - they are
not the same, so --rest is set per meter
glass L x 36.90..49.44% R x 50.56..63.30% y 46.0..54.6%
------------------------------------------------------------------ */
.bb__vu{
position:absolute;left:var(--px);top:var(--py);
width:.13cqw;height:5.65%;pointer-events:none;
transform-origin:50% 100%;
}
.bb__vu--l{--px:43.636%;--py:54.42%;--rest:14deg;--lv:var(--vu-l,.35)}
.bb__vu--r{--px:57.50%; --py:54.60%;--rest:11.5deg;--lv:var(--vu-r,.35)}
/* the shadow · sits still, on the printed needle */
.bb__vu::before{
content:'';position:absolute;left:-70%;right:-70%;top:-19%;bottom:0;
transform:translate(-50%,-100%) rotate(var(--rest));
transform-origin:50% 100%;
background:rgba(126,110,122,1);
mix-blend-mode:multiply;
-webkit-mask:radial-gradient(ellipse 40% 58% at 50% 72%,#000 20%,transparent 100%);
mask:radial-gradient(ellipse 40% 58% at 50% 72%,#000 20%,transparent 100%);
}
/* the needle · swings */
.bb__vu::after{
content:'';position:absolute;inset:0;
transform:translate(-50%,-100%) rotate(calc(var(--rest) + (var(--lv) - .64) * 34deg));
transform-origin:50% 100%;
border-radius:.09cqw;
background:linear-gradient(180deg,
rgba(255,168,232,.30) 0%, rgba(255,140,224,.80) 30%, rgba(255,124,216,.92) 100%);
box-shadow:0 0 .34cqw rgba(255,140,224,.55),0 0 1.1cqw rgba(255,140,224,.28);
mix-blend-mode:screen;
will-change:transform;
}
/* the lamp behind each meter's glass, riding the same channel */
.bb__lamp{
position:absolute;top:46.0%;height:8.6%;width:12.54%;
pointer-events:none;mix-blend-mode:screen;
background:radial-gradient(115% 130% at 50% 96%,
rgba(255,140,224,var(--a)) 0%, transparent 72%);
}
.bb__lamp--l{left:36.90%;--a:calc(var(--vu-l,.3) * .42)}
.bb__lamp--r{left:50.56%;--a:calc(var(--vu-r,.3) * .42)}
/* ---------- the player, seated in the cassette window ---------------
Christian, 30 Aug: "it needs some sizing work so the spotify thing
fits in properly".
It now FILLS the cassette window rather than floating inside it. The
window is measured off the master - x 36.553..63.573%, y 22.396..46.057%
- and those four numbers are the box, so the player is the deck's own
screen instead of a panel stuck on top of one.
The base .boombox__player carries a 2px pink border and 9px of padding,
which is right for the standalone deck on a phone and wrong inside the
cabinet: it drew a pink rectangle around the embed and pushed it off the
window's centre. Both are reset here, and the edge becomes an inset
hairline so the embed reads as recessed glass.
The window is 23.661% of the unit's height, which at the 1320px cap is
132px and at the 900px breakpoint is still 90px - above Spotify's 80px
minimum, so the embed never gets clipped on the way down. */
.boombox--v2 .boombox__player{
position:absolute;z-index:4;
left:36.553%;width:27.020%;
top:22.396%;height:23.661%;
padding:0;border:0;background:#04060a;
border-radius:.9% / 2.2%;overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(255,140,224,.20),
inset 0 3px 16px rgba(0,0,0,.9);
}
.boombox--v2 .boombox__player iframe{
width:100%;height:100%;min-height:80px;border:0;border-radius:0;display:block;
}
@media (max-width:900px){
/* the centre panel is ~90px wide on a phone - unusable. The player
leaves the image and sits under it in a matching neon deck. */
.boombox--v2 .boombox__player{
position:static;width:100%;height:auto;margin:18px 0 0;
padding:9px;background:#060608;
border:1px solid rgba(255,140,224,.34);border-radius:9px;
box-shadow:0 0 22px rgba(255,140,224,.18);
}
.boombox--v2 .boombox__player iframe{height:80px;border-radius:5px}
.bb__eq,.bb__vu,.bb__lamp{display:none}
}
@media (prefers-reduced-motion:reduce){
.bb__cone i,.bb__ring{transform:none}
.bb__cone--l i,.bb__cone--r i{transform:none}
.bb__ring{transform:translateY(-50%)}
}
/* ============================================================
STICKER STAMPS · .ml-sticker
------------------------------------------------------------
A die-cut vinyl badge for "Crowd Fave", "Best Seller",
"New Drop". Sits INSIDE its parent (positive insets) so a
card with overflow:hidden can never clip it. Parent needs
position: relative.
Markup - unchanged:
Crowd
Fave
Rebuilt 30 Aug 2026. Christian: "the badges or stickers also
need a lot of work. That just looks pathetic."
What it was: a plain circle, flat fill, a 1px inner hairline,
16px type in a 94px disc, and a 7px spray glyph underneath.
Nothing about it said sticker - it read as a sale roundel
with a lot of empty middle.
What it is now, and why each part is there:
· a scalloped die-cut edge, so the silhouette alone says
vinyl before you read a word of it
· a white cut edge offset evenly around that scallop
· a halftone dot screen over the fill, so it has print
texture instead of being a flat swatch
· a sheen off the top left, so it reads as a curved object
· type at 19px instead of 16px, filling the disc
· the 7px glyph removed - see the mark note further up this
file; a spray mark at 7px is a speck, and it was fighting
the words for the little space there was
The disc is a MASK, not a border-radius, which is why the
shadow is a filter. Anything here that needs a shadow must
use drop-shadow or it will trace the square element instead
of the cut line.
============================================================ */
.ml-sticker {
position: absolute;
width: 100px; height: 100px;
display: flex; align-items: center; justify-content: center;
text-align: center;
font-family: var(--display); text-transform: uppercase;
line-height: .88; letter-spacing: .005em;
color: var(--ml-ink, #0E0E10);
--stk-fill: var(--ml-pink, #FF8CE0);
--stk-rule: rgba(0, 0, 0, .3);
z-index: 6;
transform: rotate(-10deg);
pointer-events: none;
/* drop-shadow, not box-shadow: the disc is a mask, and box-shadow would
draw the shadow of the square element the mask is cut out of. */
filter: drop-shadow(0 10px 17px rgba(0, 0, 0, .5))
drop-shadow(0 2px 4px rgba(0, 0, 0, .36));
transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
/* The white cut edge. Same scallop, one size up: because both curves carry
the same bump radius the offset between them is even the whole way round,
which a scaled-up copy of the inner path would not be. */
.ml-sticker::before,
.ml-sticker::after { content: ''; position: absolute; inset: 0; }
.ml-sticker::before {
background: #fff;
-webkit-mask: var(--stk-edge) center / contain no-repeat;
mask: var(--stk-edge) center / contain no-repeat;
}
/* The face, in one stack, top to bottom:
· a halftone dot screen, so the fill has print texture rather than
reading as a flat swatch
· a soft sheen off the top left, so it reads as vinyl
· the fill itself
All of it cut to the scallop.
There was a pressed inner ring here as well, and it went: the disc is
small and the words are the point, so at any word longer than "FAVE" the
ring ran straight through the type. A ring that has to be dodged by the
copy is not worth the millimetre of stamp it buys, and the scalloped
edge already says stamp on its own. */
.ml-sticker::after {
background:
radial-gradient(circle at 1.3px 1.3px, var(--stk-rule) 0 1px,
transparent 1.1px) 0 0 / 4.4px 4.4px,
radial-gradient(115% 88% at 26% 17%, rgba(255,255,255,.36) 0%,
rgba(255,255,255,.07) 40%, transparent 64%),
var(--stk-fill);
-webkit-mask: var(--stk-cut) center / contain no-repeat;
mask: var(--stk-cut) center / contain no-repeat;
}
/* The words are the badge. They were 16px in a 94px disc, which left it
mostly empty and made the type the smallest thing on it. The padding
keeps the longest word off the pressed ring on the diagonal. */
.ml-sticker__text {
position: relative; z-index: 1;
display: block;
font-size: 19px;
padding: 0 9%;
max-width: 100%;
}
/* Colours · ink on every light fill, never white (D1 · 9.26:1 on pink) */
.ml-sticker--pink { --stk-fill: var(--ml-pink); color: var(--ml-ink, #0E0E10); }
.ml-sticker--blue { --stk-fill: var(--ml-blue); color: #05252B; }
.ml-sticker--yellow { --stk-fill: var(--ml-blue); color: #05252B; } /* legacy alias */
.ml-sticker--black { --stk-fill: #0A0A0C; color: #fff; --stk-rule: rgba(255,255,255,.28); }
/* Tilt */
.ml-sticker--tilt-l { transform: rotate(-12deg); }
.ml-sticker--tilt-r { transform: rotate(12deg); }
/* Placement · POSITIVE insets so nothing is ever clipped */
.ml-sticker--top-left { top: 12px; left: 12px; }
.ml-sticker--top-right { top: 12px; right: 12px; }
.ml-sticker--bottom-left { bottom: 12px; left: 12px; }
.ml-sticker--bottom-right { bottom: 12px; right: 12px; }
/* Sizes · only the disc and the type change; the die-cut, the ring and the
halftone are all proportional, so they follow on their own. */
.ml-sticker--small { width: 82px; height: 82px; }
.ml-sticker--small .ml-sticker__text { font-size: 15.5px; }
.ml-sticker--lg { width: 126px; height: 126px; }
.ml-sticker--lg .ml-sticker__text { font-size: 24px; }
.ml-sticker--lg { filter: drop-shadow(0 14px 24px rgba(0,0,0,.55))
drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
@media (prefers-reduced-motion: reduce) {
.ml-sticker { transition: none; }
}
/* Straighten and lift when the card it is stuck to is hovered. The transition
was declared on .ml-sticker from the start but home.css owned the only rules
that changed the transform, so on menu pages - which never load home.css -
nothing ever moved. */
.tile:hover .ml-sticker,
.card:hover .ml-sticker,
.product-card:hover .ml-sticker,
.monthly-card:hover .ml-sticker,
.burger-card:hover .ml-sticker,
.item-card:hover .ml-sticker,
.shake-card:hover .ml-sticker,
.week-card:hover .ml-sticker,
a:hover > .ml-sticker { transform: rotate(-4deg) scale(1.07); }
.tile:hover .ml-sticker--tilt-r,
.card:hover .ml-sticker--tilt-r,
.product-card:hover .ml-sticker--tilt-r,
.monthly-card:hover .ml-sticker--tilt-r,
.burger-card:hover .ml-sticker--tilt-r,
.item-card:hover .ml-sticker--tilt-r,
.shake-card:hover .ml-sticker--tilt-r,
.week-card:hover .ml-sticker--tilt-r,
a:hover > .ml-sticker--tilt-r { transform: rotate(4deg) scale(1.07); }
/* Phones · only the disc and the type change. The die-cut, the pressed
ring and the halftone are all proportional to the box now, so they come
along on their own - the old block had to resize each of them by hand
and left the glyph behind at 7.5px, which is where the row of specks
came from in the first place. Nothing may set inset on ::before/::after:
those two ARE the badge, and insetting them crops the cut edge off. */
@media (max-width: 640px) {
.ml-sticker { width: 80px; height: 80px; }
.ml-sticker__text { font-size: 14.5px; }
.ml-sticker--small { width: 68px; height: 68px; }
.ml-sticker--small .ml-sticker__text { font-size: 12.5px; }
.ml-sticker--lg { width: 100px; height: 100px; }
.ml-sticker--lg .ml-sticker__text { font-size: 18px; }
}
/* =============================================================
PER-STORE MENU DOWNLOAD BAND · .menudl
-------------------------------------------------------------
Rendered by ml-menudl.js into any [data-ml-menu-dl] mount.
This is also the first place the DL menu's own design language
lands on the website. The print menus price everything with a
pink-or-blue disc that has a WHITE sticker outline and a paint
DRIP hanging off the bottom, sitting on a dark brick wall. The
download button here is built from that same vocabulary:
· pink fill, 3px white outline, ink type (D1: ink on pink
is 9.26:1; white on #FF8CE0 is 2.08:1 and is never used)
· a drip tail hanging off the lower left
· a brick-dark panel behind it
HOW THE DRIP KEEPS ONE CONTINUOUS OUTLINE
Two outlined shapes butted together show a seam where the two
rings cross. The drip is therefore a child pseudo-element with
NO top border, overlapping the pill's bottom edge by more than
the ring width, and painting above it - so the pill's ring is
hidden exactly where the drip covers it and the silhouette
reads as one sticker.
============================================================= */
.menudl {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 22px 32px;
justify-content: space-between;
padding: 26px 30px 40px; /* extra bottom padding = drip + droplet clearance */
border-radius: var(--radius-lg, 28px);
border: 1px solid rgba(255,255,255,0.10);
background:
linear-gradient(180deg, rgba(255,140,224,.07) 0%, rgba(10,10,12,0) 60%),
#121216;
}
.menudl__copy { min-width: 240px; flex: 1 1 320px; }
.menudl__eyebrow {
display: block;
font-family: var(--script, cursive);
font-size: 21px;
line-height: 1;
color: var(--ml-blue, #5BD0E6);
margin-bottom: 4px;
}
.menudl__store {
font-family: var(--display, sans-serif);
font-size: clamp(24px, 3.4vw, 34px);
line-height: 1.02;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--ml-white, #fff);
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
}
/* State tag · blue fill, ink type. Same rule as the price discs. */
.menudl__state {
font-family: var(--body, sans-serif);
font-size: 12px;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--ml-ink, #0E0E10);
background: var(--ml-blue, #5BD0E6);
border-radius: 999px;
padding: 4px 10px;
transform: translateY(-3px);
}
.menudl__note {
margin-top: 10px;
max-width: 46ch;
color: var(--ml-text, #E9E9EE);
font-size: 15px;
line-height: 1.55;
}
.menudl__actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
/* ---- the drip sticker ---- */
.menudl__btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 26px;
border: 3px solid var(--ml-white, #fff);
border-radius: 999px;
background: var(--ml-pink, #FF8CE0);
color: var(--ml-ink, #0E0E10); /* D1 · never white on pink */
font-family: var(--display, sans-serif);
font-size: 19px;
letter-spacing: .6px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: transform .18s ease, background .18s ease;
}
.menudl__btn::after {
content: '';
position: absolute;
left: 30px;
top: calc(100% - 8px); /* overlaps the pill's 3px ring */
width: 21px;
height: 30px;
background: var(--ml-pink, #FF8CE0);
border: 3px solid var(--ml-white, #fff);
border-top: 0;
/* Elliptical radius: a small horizontal radius with a large vertical one
narrows the tail as it falls, which is what makes it read as paint
running rather than as a tab hanging off the button. */
border-radius: 0 0 10px 10px / 0 0 26px 26px;
pointer-events: none;
}
/* The detached droplet below the tail. The print menus almost always have
one - it is the difference between "a shape with a bump" and "wet paint". */
.menudl__btn::before {
content: '';
position: absolute;
left: 36px;
top: calc(100% + 26px);
width: 9px;
height: 9px;
background: var(--ml-pink, #FF8CE0);
border: 2.5px solid var(--ml-white, #fff);
border-radius: 50%;
pointer-events: none;
}
.menudl__btn:hover,
.menudl__btn:focus-visible {
transform: translateY(-2px);
background: #FFA3E7;
}
.menudl__btn:hover::after, .menudl__btn:focus-visible::after,
.menudl__btn:hover::before, .menudl__btn:focus-visible::before { background: #FFA3E7; }
.menudl__ico { flex: none; }
/* "PDF" tab · blue, to keep the pink/blue alternation the menus run on. */
.menudl__fmt {
font-family: var(--body, sans-serif);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
background: var(--ml-blue, #5BD0E6);
color: var(--ml-ink, #0E0E10);
border-radius: 6px;
padding: 3px 7px;
margin-left: 2px;
}
.menudl__btn.is-disabled {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.22);
color: var(--ml-text-dim, #B7B7BD);
cursor: default;
}
.menudl__btn.is-disabled::after,
.menudl__btn.is-disabled::before { display: none; }
.menudl__swap {
background: none;
border: 0;
padding: 0;
font: inherit;
font-size: 14px;
color: var(--ml-text-dim, #B7B7BD);
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
}
.menudl__swap:hover { color: var(--ml-blue, #5BD0E6); }
/* Compact variant · used inline inside an existing section head. */
/* Compact keeps the drip, so it keeps the drip's clearance. The tail hangs
30px below the button and the droplet finishes ~40px below it; anything
less than that here and the paint runs out the bottom of the panel. */
.menudl--compact { padding: 18px 22px 46px; gap: 16px 24px; }
.menudl--compact .menudl__store { font-size: clamp(20px, 2.6vw, 26px); }
.menudl--compact .menudl__btn { font-size: 17px; padding: 12px 22px; }
@media (max-width: 640px) {
.menudl { padding: 22px 20px 32px; }
.menudl__actions { width: 100%; }
.menudl__btn { width: 100%; justify-content: center; }
.menudl__btn::after { left: 50%; margin-left: -10.5px; }
.menudl__btn::before { left: 50%; margin-left: -4.5px; }
}
@media (prefers-reduced-motion: reduce) {
.menudl__btn { transition: none; }
.menudl__btn:hover, .menudl__btn:focus-visible { transform: none; }
}
/* Standalone dark band that hosts the compact .menudl on the menu pages.
Plain ground, so it sits legally between whatever precedes it and the
painted CTA banner underneath (blank -> ground -> blank). */
.menudl-band { padding: 56px 0 64px; background: var(--ml-black, #0E0E10); }
@media (max-width: 640px) { .menudl-band { padding: 40px 0 48px; } }
/* ============================================================
MOBILE · sitewide
------------------------------------------------------------
Christian, 30 Aug: "make sure the website is mobile friendly.
Do a good look at this. It needs to be totally mobile friendly
as most people will use this on their mobile."
Everything below is a phone-only correction to something that
was measurably wrong at 320-620px, not a restyle. Each block
says what it fixes.
============================================================ */
@media (max-width: 620px) {
/* ---- iOS zooms the whole page when you focus a field under 16px.
Careers has about thirty of them, so filling the form meant the
viewport jumping on every single tap. 16px is the threshold, not
a preference. -------------------------------------------- */
/* !important because every page-level
Fave Rebuilt 30 Aug 2026. Christian: "the badges or stickers also need a lot of work. That just looks pathetic." What it was: a plain circle, flat fill, a 1px inner hairline, 16px type in a 94px disc, and a 7px spray glyph underneath. Nothing about it said sticker - it read as a sale roundel with a lot of empty middle. What it is now, and why each part is there: · a scalloped die-cut edge, so the silhouette alone says vinyl before you read a word of it · a white cut edge offset evenly around that scallop · a halftone dot screen over the fill, so it has print texture instead of being a flat swatch · a sheen off the top left, so it reads as a curved object · type at 19px instead of 16px, filling the disc · the 7px glyph removed - see the mark note further up this file; a spray mark at 7px is a speck, and it was fighting the words for the little space there was The disc is a MASK, not a border-radius, which is why the shadow is a filter. Anything here that needs a shadow must use drop-shadow or it will trace the square element instead of the cut line. ============================================================ */ .ml-sticker { position: absolute; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--display); text-transform: uppercase; line-height: .88; letter-spacing: .005em; color: var(--ml-ink, #0E0E10); --stk-fill: var(--ml-pink, #FF8CE0); --stk-rule: rgba(0, 0, 0, .3); z-index: 6; transform: rotate(-10deg); pointer-events: none; /* drop-shadow, not box-shadow: the disc is a mask, and box-shadow would draw the shadow of the square element the mask is cut out of. */ filter: drop-shadow(0 10px 17px rgba(0, 0, 0, .5)) drop-shadow(0 2px 4px rgba(0, 0, 0, .36)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); } /* The white cut edge. Same scallop, one size up: because both curves carry the same bump radius the offset between them is even the whole way round, which a scaled-up copy of the inner path would not be. */ .ml-sticker::before, .ml-sticker::after { content: ''; position: absolute; inset: 0; } .ml-sticker::before { background: #fff; -webkit-mask: var(--stk-edge) center / contain no-repeat; mask: var(--stk-edge) center / contain no-repeat; } /* The face, in one stack, top to bottom: · a halftone dot screen, so the fill has print texture rather than reading as a flat swatch · a soft sheen off the top left, so it reads as vinyl · the fill itself All of it cut to the scallop. There was a pressed inner ring here as well, and it went: the disc is small and the words are the point, so at any word longer than "FAVE" the ring ran straight through the type. A ring that has to be dodged by the copy is not worth the millimetre of stamp it buys, and the scalloped edge already says stamp on its own. */ .ml-sticker::after { background: radial-gradient(circle at 1.3px 1.3px, var(--stk-rule) 0 1px, transparent 1.1px) 0 0 / 4.4px 4.4px, radial-gradient(115% 88% at 26% 17%, rgba(255,255,255,.36) 0%, rgba(255,255,255,.07) 40%, transparent 64%), var(--stk-fill); -webkit-mask: var(--stk-cut) center / contain no-repeat; mask: var(--stk-cut) center / contain no-repeat; } /* The words are the badge. They were 16px in a 94px disc, which left it mostly empty and made the type the smallest thing on it. The padding keeps the longest word off the pressed ring on the diagonal. */ .ml-sticker__text { position: relative; z-index: 1; display: block; font-size: 19px; padding: 0 9%; max-width: 100%; } /* Colours · ink on every light fill, never white (D1 · 9.26:1 on pink) */ .ml-sticker--pink { --stk-fill: var(--ml-pink); color: var(--ml-ink, #0E0E10); } .ml-sticker--blue { --stk-fill: var(--ml-blue); color: #05252B; } .ml-sticker--yellow { --stk-fill: var(--ml-blue); color: #05252B; } /* legacy alias */ .ml-sticker--black { --stk-fill: #0A0A0C; color: #fff; --stk-rule: rgba(255,255,255,.28); } /* Tilt */ .ml-sticker--tilt-l { transform: rotate(-12deg); } .ml-sticker--tilt-r { transform: rotate(12deg); } /* Placement · POSITIVE insets so nothing is ever clipped */ .ml-sticker--top-left { top: 12px; left: 12px; } .ml-sticker--top-right { top: 12px; right: 12px; } .ml-sticker--bottom-left { bottom: 12px; left: 12px; } .ml-sticker--bottom-right { bottom: 12px; right: 12px; } /* Sizes · only the disc and the type change; the die-cut, the ring and the halftone are all proportional, so they follow on their own. */ .ml-sticker--small { width: 82px; height: 82px; } .ml-sticker--small .ml-sticker__text { font-size: 15.5px; } .ml-sticker--lg { width: 126px; height: 126px; } .ml-sticker--lg .ml-sticker__text { font-size: 24px; } .ml-sticker--lg { filter: drop-shadow(0 14px 24px rgba(0,0,0,.55)) drop-shadow(0 3px 6px rgba(0,0,0,.4)); } @media (prefers-reduced-motion: reduce) { .ml-sticker { transition: none; } } /* Straighten and lift when the card it is stuck to is hovered. The transition was declared on .ml-sticker from the start but home.css owned the only rules that changed the transform, so on menu pages - which never load home.css - nothing ever moved. */ .tile:hover .ml-sticker, .card:hover .ml-sticker, .product-card:hover .ml-sticker, .monthly-card:hover .ml-sticker, .burger-card:hover .ml-sticker, .item-card:hover .ml-sticker, .shake-card:hover .ml-sticker, .week-card:hover .ml-sticker, a:hover > .ml-sticker { transform: rotate(-4deg) scale(1.07); } .tile:hover .ml-sticker--tilt-r, .card:hover .ml-sticker--tilt-r, .product-card:hover .ml-sticker--tilt-r, .monthly-card:hover .ml-sticker--tilt-r, .burger-card:hover .ml-sticker--tilt-r, .item-card:hover .ml-sticker--tilt-r, .shake-card:hover .ml-sticker--tilt-r, .week-card:hover .ml-sticker--tilt-r, a:hover > .ml-sticker--tilt-r { transform: rotate(4deg) scale(1.07); } /* Phones · only the disc and the type change. The die-cut, the pressed ring and the halftone are all proportional to the box now, so they come along on their own - the old block had to resize each of them by hand and left the glyph behind at 7.5px, which is where the row of specks came from in the first place. Nothing may set inset on ::before/::after: those two ARE the badge, and insetting them crops the cut edge off. */ @media (max-width: 640px) { .ml-sticker { width: 80px; height: 80px; } .ml-sticker__text { font-size: 14.5px; } .ml-sticker--small { width: 68px; height: 68px; } .ml-sticker--small .ml-sticker__text { font-size: 12.5px; } .ml-sticker--lg { width: 100px; height: 100px; } .ml-sticker--lg .ml-sticker__text { font-size: 18px; } } /* ============================================================= PER-STORE MENU DOWNLOAD BAND · .menudl ------------------------------------------------------------- Rendered by ml-menudl.js into any [data-ml-menu-dl] mount. This is also the first place the DL menu's own design language lands on the website. The print menus price everything with a pink-or-blue disc that has a WHITE sticker outline and a paint DRIP hanging off the bottom, sitting on a dark brick wall. The download button here is built from that same vocabulary: · pink fill, 3px white outline, ink type (D1: ink on pink is 9.26:1; white on #FF8CE0 is 2.08:1 and is never used) · a drip tail hanging off the lower left · a brick-dark panel behind it HOW THE DRIP KEEPS ONE CONTINUOUS OUTLINE Two outlined shapes butted together show a seam where the two rings cross. The drip is therefore a child pseudo-element with NO top border, overlapping the pill's bottom edge by more than the ring width, and painting above it - so the pill's ring is hidden exactly where the drip covers it and the silhouette reads as one sticker. ============================================================= */ .menudl { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; justify-content: space-between; padding: 26px 30px 40px; /* extra bottom padding = drip + droplet clearance */ border-radius: var(--radius-lg, 28px); border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,140,224,.07) 0%, rgba(10,10,12,0) 60%), #121216; } .menudl__copy { min-width: 240px; flex: 1 1 320px; } .menudl__eyebrow { display: block; font-family: var(--script, cursive); font-size: 21px; line-height: 1; color: var(--ml-blue, #5BD0E6); margin-bottom: 4px; } .menudl__store { font-family: var(--display, sans-serif); font-size: clamp(24px, 3.4vw, 34px); line-height: 1.02; letter-spacing: .5px; text-transform: uppercase; color: var(--ml-white, #fff); display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; } /* State tag · blue fill, ink type. Same rule as the price discs. */ .menudl__state { font-family: var(--body, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--ml-ink, #0E0E10); background: var(--ml-blue, #5BD0E6); border-radius: 999px; padding: 4px 10px; transform: translateY(-3px); } .menudl__note { margin-top: 10px; max-width: 46ch; color: var(--ml-text, #E9E9EE); font-size: 15px; line-height: 1.55; } .menudl__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } /* ---- the drip sticker ---- */ .menudl__btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border: 3px solid var(--ml-white, #fff); border-radius: 999px; background: var(--ml-pink, #FF8CE0); color: var(--ml-ink, #0E0E10); /* D1 · never white on pink */ font-family: var(--display, sans-serif); font-size: 19px; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .18s ease, background .18s ease; } .menudl__btn::after { content: ''; position: absolute; left: 30px; top: calc(100% - 8px); /* overlaps the pill's 3px ring */ width: 21px; height: 30px; background: var(--ml-pink, #FF8CE0); border: 3px solid var(--ml-white, #fff); border-top: 0; /* Elliptical radius: a small horizontal radius with a large vertical one narrows the tail as it falls, which is what makes it read as paint running rather than as a tab hanging off the button. */ border-radius: 0 0 10px 10px / 0 0 26px 26px; pointer-events: none; } /* The detached droplet below the tail. The print menus almost always have one - it is the difference between "a shape with a bump" and "wet paint". */ .menudl__btn::before { content: ''; position: absolute; left: 36px; top: calc(100% + 26px); width: 9px; height: 9px; background: var(--ml-pink, #FF8CE0); border: 2.5px solid var(--ml-white, #fff); border-radius: 50%; pointer-events: none; } .menudl__btn:hover, .menudl__btn:focus-visible { transform: translateY(-2px); background: #FFA3E7; } .menudl__btn:hover::after, .menudl__btn:focus-visible::after, .menudl__btn:hover::before, .menudl__btn:focus-visible::before { background: #FFA3E7; } .menudl__ico { flex: none; } /* "PDF" tab · blue, to keep the pink/blue alternation the menus run on. */ .menudl__fmt { font-family: var(--body, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .12em; background: var(--ml-blue, #5BD0E6); color: var(--ml-ink, #0E0E10); border-radius: 6px; padding: 3px 7px; margin-left: 2px; } .menudl__btn.is-disabled { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: var(--ml-text-dim, #B7B7BD); cursor: default; } .menudl__btn.is-disabled::after, .menudl__btn.is-disabled::before { display: none; } .menudl__swap { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--ml-text-dim, #B7B7BD); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .menudl__swap:hover { color: var(--ml-blue, #5BD0E6); } /* Compact variant · used inline inside an existing section head. */ /* Compact keeps the drip, so it keeps the drip's clearance. The tail hangs 30px below the button and the droplet finishes ~40px below it; anything less than that here and the paint runs out the bottom of the panel. */ .menudl--compact { padding: 18px 22px 46px; gap: 16px 24px; } .menudl--compact .menudl__store { font-size: clamp(20px, 2.6vw, 26px); } .menudl--compact .menudl__btn { font-size: 17px; padding: 12px 22px; } @media (max-width: 640px) { .menudl { padding: 22px 20px 32px; } .menudl__actions { width: 100%; } .menudl__btn { width: 100%; justify-content: center; } .menudl__btn::after { left: 50%; margin-left: -10.5px; } .menudl__btn::before { left: 50%; margin-left: -4.5px; } } @media (prefers-reduced-motion: reduce) { .menudl__btn { transition: none; } .menudl__btn:hover, .menudl__btn:focus-visible { transform: none; } } /* Standalone dark band that hosts the compact .menudl on the menu pages. Plain ground, so it sits legally between whatever precedes it and the painted CTA banner underneath (blank -> ground -> blank). */ .menudl-band { padding: 56px 0 64px; background: var(--ml-black, #0E0E10); } @media (max-width: 640px) { .menudl-band { padding: 40px 0 48px; } } /* ============================================================ MOBILE · sitewide ------------------------------------------------------------ Christian, 30 Aug: "make sure the website is mobile friendly. Do a good look at this. It needs to be totally mobile friendly as most people will use this on their mobile." Everything below is a phone-only correction to something that was measurably wrong at 320-620px, not a restyle. Each block says what it fixes. ============================================================ */ @media (max-width: 620px) { /* ---- iOS zooms the whole page when you focus a field under 16px. Careers has about thirty of them, so filling the form meant the viewport jumping on every single tap. 16px is the threshold, not a preference. -------------------------------------------- */ /* !important because every page-level