/* ========================================================== SHUFFLE PLAY REWIND ========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;800;900&family=Roboto+Mono:wght@500;700&display=swap'); :root { /* THE FLYER'S TWO COLOURS. Each month's flyer ships in a new colourway, so the real values live in event.js (theme.ground / theme.type) and are applied from the before first paint. These are only the no-JS fallback. Every other colour below is derived from the pair, so a recolour is never more than those two values. The contrast rule this forces: the type colour on the ground colour is a print relationship — 1.8:1 for September's orange on blue, 2.6:1 for August's yellow on pink. It is allowed only at display size, as the flyer uses it. Anything readable on the ground is ink. The type colour does its small-text work on ink, where it clears 4.5:1. */ --ground: #61d0ec; --type: #ff5529; --ink: color-mix(in oklch, var(--ground) 8%, #06070b); --ink-2: color-mix(in oklch, var(--ground) 14%, #0e1118); --cream: color-mix(in oklch, var(--ground) 10%, #fffdf8); /* Headings and small labels on cream, shadows and photo tint on ground. */ --ground-deep: color-mix(in oklch, var(--ground) 58%, #000); /* Fixed, not derived: an error must not change meaning with the month. */ --error: #ffb4ab; --display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --meter: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* spacing rhythm */ --s1: 0.5rem; --s2: 0.75rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4.5rem; --s8: 7rem; --edge: clamp(1.25rem, 5vw, 4.5rem); --bar-h: 68px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video { max-width: 100%; display: block; } ::selection { background: var(--type); color: var(--ink); } :focus-visible { outline: 3px solid var(--type); outline-offset: 3px; border-radius: 2px; } /* The type colour misses 3:1 against the ground, so focus rings on the ground sections are ink. */ #play :focus-visible, #rewind :focus-visible { outline-color: var(--ink); } .skip { position: absolute; left: var(--s3); top: -100px; z-index: 200; background: var(--type); color: var(--ink); font-weight: 800; padding: var(--s2) var(--s4); border-radius: 999px; text-decoration: none; transition: top .18s ease; } .skip:focus { top: var(--s3); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- shared type ---------------------------------- */ .wordmark { font-weight: 900; text-transform: lowercase; letter-spacing: -0.045em; line-height: 0.82; margin: 0; } .section-title { font-weight: 900; text-transform: lowercase; letter-spacing: -0.045em; line-height: 0.85; font-size: clamp(2.75rem, 9vw, 6rem); margin: 0 0 var(--s5); } .data-label { font-family: var(--meter); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; } .lede { font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); max-width: 34ch; } /* ---------- tape texture --------------------------------- */ .scanlines::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 1px, transparent 4px ); mix-blend-mode: multiply; pointer-events: none; z-index: 3; } /* ========================================================== HERO ========================================================== */ .hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: var(--ink); isolation: isolate; } .hero__video, .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; /* Low-light club footage: lift it hard before tinting, or the duotone crushes to black and the brand colour disappears. */ filter: grayscale(1) brightness(1.28) contrast(1.02); } /* Duotone in two passes: multiply tints the highlights, screen drags the blacks up into the ground colour so the frame reads drenched, not dark. */ .hero__wash { position: absolute; inset: 0; z-index: 1; background: var(--ground); mix-blend-mode: multiply; } .hero__wash::before { content: ''; position: absolute; inset: 0; background: var(--ground); mix-blend-mode: screen; opacity: .30; } /* Legibility floor, kept light so it does not undo the drench. */ .hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient( to bottom, color-mix(in srgb, var(--ink) 30%, transparent) 0%, color-mix(in srgb, var(--ink) 0%, transparent) 26%, color-mix(in srgb, var(--ink) 6%, transparent) 52%, color-mix(in srgb, var(--ink) 62%, transparent) 100% ); } .hero__inner { position: relative; z-index: 4; grid-row: 1; display: grid; grid-template-columns: 1fr; align-content: end; gap: var(--s5); padding: calc(var(--bar-h) + var(--s5)) var(--edge) var(--s6); min-width: 0; } /* Grid and flex children default to min-content; without this a long unbreakable child can push the whole hero past the viewport. */ .hero__left, .hero__right { min-width: 0; } @media (min-width: 900px) { .hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: end; gap: var(--s4) clamp(var(--s5), 4vw, var(--s7)); padding-bottom: var(--s7); } .hero__right { padding-bottom: .5rem; } } .hero__cadence { color: var(--type); margin: 0 0 var(--s3); } .hero__mark { color: var(--type); font-size: clamp(3.1rem, 11.5vw, 8.25rem); text-shadow: 0 6px 40px color-mix(in srgb, var(--ink) 45%, transparent); } .hero__mark span { display: block; } /* Real logo artwork replaces the typeset wordmark when a file exists. The heading text stays in the DOM for screen readers. */ .hero__logo { width: min(100%, 34rem); height: auto; filter: drop-shadow(0 6px 34px color-mix(in srgb, var(--ink) 50%, transparent)); } .hero__mark.has-logo span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .hero__mark.has-logo .hero__logo { animation: tapelock .9s cubic-bezier(.16,1,.3,1) backwards; } } /* One authored moment: the wordmark locks onto the tape. */ @media (prefers-reduced-motion: no-preference) { .hero__mark span { animation: tapelock .9s cubic-bezier(.16,1,.3,1) backwards; } .hero__mark span:nth-child(1) { animation-delay: .05s; } .hero__mark span:nth-child(2) { animation-delay: .16s; } .hero__mark span:nth-child(3) { animation-delay: .27s; } } @keyframes tapelock { 0% { opacity: 0; transform: translate3d(-14px,0,0) scaleX(1.06); filter: blur(6px); text-shadow: 7px 0 0 rgba(0,255,240,.9), -7px 0 0 rgba(255,0,110,.9); } 55% { opacity: 1; filter: blur(0); text-shadow: 2px 0 0 rgba(0,255,240,.55), -2px 0 0 rgba(255,0,110,.55); } 100% { opacity: 1; transform: none; filter: blur(0); text-shadow: 0 6px 40px color-mix(in srgb, var(--ink) 45%, transparent); } } .hero__genres { color: var(--cream); font-weight: 600; letter-spacing: 0.02em; margin: var(--s4) 0 0; max-width: 52ch; text-wrap: pretty; } .hero__genres i { font-style: normal; color: var(--type); padding: 0 .35em; } /* Never split a genre name across lines. */ .hero__genres em { font-style: normal; white-space: nowrap; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s5); } .hero__when { color: #fff; font-weight: 800; font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem); letter-spacing: -0.025em; line-height: 1.1; margin: 0; } .hero__when small { display: block; font-family: var(--meter); font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); margin-top: .35rem; } /* countdown ------------------------------------------------ */ .count { display: flex; gap: var(--s4); margin: var(--s4) 0 0; padding: 0; list-style: none; } .count li { text-align: center; } .count b { display: block; font-family: var(--meter); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 2vw, 2.6rem); line-height: 1; color: var(--type); font-variant-numeric: tabular-nums; } .count span { font-family: var(--meter); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); } .count[hidden] { display: none; } /* ========================================================== BUTTONS ========================================================== */ .btn { --btn-bg: var(--type); --btn-fg: var(--ink); display: inline-flex; align-items: center; gap: .6em; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; text-decoration: none; border: 0; cursor: pointer; padding: 1.05rem 2rem; border-radius: 999px; box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 28%, transparent); transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease, background-color .16s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 34%, transparent); } .btn:active { transform: translateY(0); box-shadow: 0 5px 14px color-mix(in srgb, var(--ink) 30%, transparent); } .btn--ink { --btn-bg: var(--ink); --btn-fg: var(--type); } /* Dark, not translucent-white — this button also sits on the ground colour, where a white veil leaves the label unreadable. */ .btn[aria-disabled='true'] { --btn-bg: color-mix(in srgb, var(--ink) 82%, transparent); --btn-fg: var(--cream); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cream) 38%, transparent); cursor: default; } .btn[aria-disabled='true']:hover { transform: none; } .price-note { font-family: var(--meter); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); } /* ========================================================== TRANSPORT BAR — the brand device doing real work ========================================================== */ .transport { position: sticky; top: 0; z-index: 60; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 0 var(--edge); background: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--type) 22%, transparent); } .transport__home { display: flex; align-items: center; gap: .55rem; color: var(--type); text-decoration: none; font-weight: 900; letter-spacing: -0.04em; font-size: 1.02rem; text-transform: lowercase; line-height: 1; } .transport__home svg { width: 20px; height: 20px; flex: none; } .transport__nav { display: flex; align-items: center; gap: var(--s1); } .tbtn { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 0; cursor: pointer; color: var(--cream); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: lowercase; padding: .5rem .75rem; border-radius: 999px; transition: color .15s ease, background-color .15s ease; } .tbtn__disc { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--type); transition: transform .2s cubic-bezier(.16,1,.3,1); } .tbtn__disc svg { width: 15px; height: 15px; fill: var(--ink); } .tbtn:hover { color: #fff; background: color-mix(in srgb, var(--type) 10%, transparent); } .tbtn:hover .tbtn__disc { transform: scale(1.12); } .tbtn[aria-current='true'] { color: var(--type); } .transport__cta { padding: .62rem 1.25rem; font-size: .88rem; box-shadow: none; } @media (max-width: 860px) { .tbtn__label { display: none; } .tbtn { padding: .4rem; } .transport { gap: var(--s2); } } @media (max-width: 460px) { .transport__home span { display: none; } } /* ========================================================== SECTIONS ========================================================== */ .section { padding: var(--s8) var(--edge); position: relative; } .section--ink { background: var(--ink); color: var(--cream); } .section--cream { background: var(--cream); color: var(--ink); } .section__head { max-width: 60ch; margin-bottom: var(--s6); } /* ---------- THIS MONTH (play) ---------------------------- */ #play { background: var(--ground); } /* On the ground only ink is readable, so every label, fact, link and note here is ink. The type colour appears only at display size. */ #play .data-label, #play .price-note, #play .facts a, #play .facts dd small { color: var(--ink); } #play .facts a { text-decoration-color: color-mix(in srgb, var(--ink) 50%, transparent); } #play .facts a:hover { color: var(--ink); text-decoration-color: var(--ink); } .now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s5), 5vw, var(--s7)); align-items: start; } @media (max-width: 900px) { .now { grid-template-columns: 1fr; } } .flyer { position: relative; border-radius: 4px; overflow: hidden; background: var(--ink-2); box-shadow: 0 26px 60px color-mix(in srgb, var(--ground-deep) 42%, transparent); aspect-ratio: 4 / 5; } /* contain, never cover: a flyer carries door times, address and age policy at its edges, and next month's export may not be exactly 4:5. Letterboxing against the ink well is better than clipping the facts. */ .flyer img { width: 100%; height: 100%; object-fit: contain; } /* Shown only when the flyer file is missing — never a broken image. */ .flyer__missing { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; align-items: center; gap: var(--s2); text-align: center; padding: var(--s5); background: var(--ink-2); color: var(--cream); } .flyer.is-missing .flyer__missing { display: flex; } .flyer.is-missing img { opacity: 0; } .flyer__missing code { font-family: var(--meter); font-size: .78rem; background: color-mix(in srgb, var(--type) 14%, transparent); color: var(--type); padding: .35rem .6rem; border-radius: 3px; } .facts { margin: 0; } .facts div + div { margin-top: var(--s4); } .facts dt { color: var(--type); margin-bottom: .3rem; } .facts dd { margin: 0; font-weight: 800; letter-spacing: -0.025em; font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.15rem); line-height: 1.1; color: var(--ink); } .facts dd small { display: block; font-weight: 600; font-size: .82rem; letter-spacing: 0; color: var(--cream); margin-top: .3rem; } .facts a { color: inherit; text-decoration-color: var(--type); text-underline-offset: 4px; } .facts a:hover { color: var(--type); } .now__actions { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); } .venue-mark { display: block; /* never runs on into the address line */ font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: .06em; color: var(--cream); font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1; margin: 0 0 .45rem; } .facts .venue-mark { color: var(--ink); } .facts a { display: inline-block; font-size: .92rem; font-weight: 600; } /* ---------- MUSIC (shuffle) ------------------------------ */ #shuffle { background: var(--ink); color: var(--cream); } #shuffle .section-title { color: var(--type); } .policy { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); } .policy li { border-bottom: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); display: flex; align-items: baseline; padding: clamp(.9rem, 2vw, 1.5rem) 0; } .policy__name { font-weight: 900; letter-spacing: -0.04em; text-transform: lowercase; font-size: clamp(1.6rem, 1.1rem + 3.4vw, 3.4rem); line-height: 1; color: var(--cream); transition: color .18s ease, transform .18s cubic-bezier(.16,1,.3,1); } .policy li:hover .policy__name { color: var(--type); transform: translateX(10px); } .dj-line { margin-top: var(--s7); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); } .dj-line b { font-weight: 900; letter-spacing: -0.03em; font-size: clamp(2rem, 1.4rem + 4vw, 4rem); color: var(--type); line-height: 1; } /* ---------- REWIND (gallery) ----------------------------- */ #rewind { background: var(--ground); } /* Explicit column counts rather than auto-fill: at 375px auto-fill collapses to one column and turns 12 photos into ~5000px of scroll on the exact device most of the ad traffic arrives on. A contact sheet reads better here than a stack of full-bleed portraits. */ .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } @media (min-width: 620px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .shot { position: relative; margin: 0; overflow: hidden; background: var(--ink-2); aspect-ratio: 4 / 5; border-radius: 3px; } .shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); transition: transform .5s cubic-bezier(.16,1,.3,1), filter .3s ease; } .shot:hover img { transform: scale(1.045); filter: saturate(1.2) contrast(1.04); } .shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--ground-deep) 35%, transparent), transparent 55%); mix-blend-mode: multiply; pointer-events: none; } /* Closes the last-row gap with a real destination. */ .shot--more { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: var(--s4); background: var(--ink); color: var(--type); text-decoration: none; font-weight: 900; letter-spacing: -0.04em; text-transform: lowercase; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem); line-height: .95; transition: background-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1); } .shot--more::after { content: none; } .shot--more svg { width: 30px; height: 30px; transition: transform .2s cubic-bezier(.16,1,.3,1); } .shot--more:hover { background: var(--ink-2); transform: translateY(-2px); } .shot--more:hover svg { transform: translateX(5px); } .gallery--empty { border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 4px; padding: var(--s7) var(--s5); text-align: center; color: var(--ink); } .gallery--empty code { font-family: var(--meter); font-size: .8rem; background: var(--ink); color: var(--type); padding: .35rem .6rem; border-radius: 3px; } /* ---------- TABLES --------------------------------------- */ #tables { background: var(--cream); color: var(--ink); } #tables .section-title { color: var(--ground-deep); } .tables__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(var(--s5), 5vw, var(--s7)); align-items: center; } @media (max-width: 860px) { .tables__grid { grid-template-columns: 1fr; } } .tables__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); } /* The four things to send. Numbered because it is a checklist the reader works through, not a ranking. */ .ask { list-style: none; margin: var(--s5) 0 0; padding: 0; counter-reset: ask; max-width: 32ch; } .ask li { counter-increment: ask; display: flex; align-items: baseline; gap: var(--s3); padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-weight: 600; } .ask li::before { content: counter(ask); font-family: var(--meter); font-weight: 700; font-size: .72rem; color: var(--ground-deep); flex: none; width: 1.5ch; } /* Real proof: an actual booth from the last one, menu on the table. */ .tables__proof { margin: 0; } .tables__proof img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 24px 54px color-mix(in srgb, var(--ink) 22%, transparent); } .tables__proof figcaption { font-family: var(--meter); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ground-deep); margin-top: var(--s3); } /* ---------- LIST ----------------------------------------- */ #list { background: var(--ink); color: var(--cream); } #list .section-title { color: var(--type); } .signup { display: flex; flex-wrap: wrap; gap: var(--s2); max-width: 40rem; } .signup__field { flex: 1 1 15rem; } .signup input { width: 100%; font-family: var(--display); font-size: 1rem; font-weight: 500; color: #fff; background: rgba(255,255,255,.07); border: 2px solid color-mix(in srgb, var(--cream) 32%, transparent); border-radius: 999px; padding: 1rem 1.4rem; transition: border-color .15s ease, background-color .15s ease; } .signup input::placeholder { color: color-mix(in srgb, var(--cream) 62%, transparent); } .signup input:hover { border-color: color-mix(in srgb, var(--cream) 50%, transparent); } .signup input:focus { border-color: var(--type); background: rgba(255,255,255,.11); outline: none; } .signup input[aria-invalid='true'] { border-color: var(--error); } /* Honeypot. Not display:none — some bots skip hidden fields, and this still has to be unreachable for keyboard and screen-reader users. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-msg { margin-top: var(--s3); font-weight: 600; min-height: 1.5em; display: flex; align-items: center; gap: .5rem; } .form-msg[data-state='error'] { color: var(--error); } .form-msg[data-state='ok'] { color: var(--type); } .form-msg[data-state='note'] { color: var(--cream); } .form-msg:empty { min-height: 0; } .fineprint { font-size: .82rem; color: color-mix(in srgb, var(--cream) 70%, transparent); margin-top: var(--s3); max-width: 46ch; } /* ---------- FOOTER --------------------------------------- */ .footer { background: var(--ink); color: var(--cream); padding: var(--s7) var(--edge) var(--s5); border-top: 1px solid color-mix(in srgb, var(--type) 22%, transparent); } .footer__grid { display: flex; flex-wrap: wrap; gap: var(--s6); justify-content: space-between; align-items: flex-start; } .footer h2 { font-weight: 900; text-transform: lowercase; letter-spacing: -0.045em; line-height: .82; font-size: clamp(2.2rem, 6vw, 3.6rem); color: var(--type); margin: 0 0 var(--s3); } .footer a { color: var(--cream); text-decoration-color: color-mix(in srgb, var(--cream) 40%, transparent); text-underline-offset: 4px; } .footer a:hover { color: var(--type); } .footer__sponsor { font-family: var(--meter); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 75%, transparent); max-width: 28ch; line-height: 1.7; } .footer__legal { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--cream) 16%, transparent); font-size: .78rem; color: color-mix(in srgb, var(--cream) 60%, transparent); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); } /* ---------- reveal --------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translate3d(0, 22px, 0); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); } } /* ---------- mobile sticky buy ---------------------------- */ .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--ink) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid color-mix(in srgb, var(--type) 28%, transparent); display: none; transform: translateY(110%); transition: transform .3s cubic-bezier(.16,1,.3,1); } .buybar.is-up { transform: none; } .buybar .btn { width: 100%; justify-content: center; } @media (max-width: 720px) { .buybar { display: block; } .transport__cta { display: none; } /* Clearance so the fixed bar never sits on top of the footer. */ .footer { padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom)); } }