Privacy
What we keep, and what we do not.
What we keep
…
3 free rides
Get Indore
- , the same
in every nav. js/nav.js, loaded in the , puts .has-navmenu on
before the page paints and builds the panel (.nav__panel) from the nav's
own links, so the links are written once. Without the script there is no
.has-navmenu: the button stays hidden and the row wraps instead, and every
link is still there.
Open, the bar and the panel are one white sheet, over a photograph and on
the frosted bar alike.
========================================================================== */
.nav__menu{display:none;flex:0 0 auto;align-items:center;justify-content:center;
width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;
color:var(--white);cursor:pointer;-webkit-tap-highlight-color:transparent}
.snav .nav__menu{color:var(--plum)}
.nav__menu svg{display:block;width:24px;height:24px}
.nav__menu path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
transform-origin:12px 12px;transition:transform .2s ease}
.nav__menu[aria-expanded="true"] path:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__menu[aria-expanded="true"] path:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:759px){
/* no script: let the row wrap rather than run off the screen */
html:not(.has-navmenu) .nav__in>ul,
html:not(.has-navmenu) .snav__in>ul{flex-wrap:wrap;justify-content:flex-end;column-gap:18px;row-gap:0}
html:not(.has-navmenu) .snav{height:auto}
html:not(.has-navmenu) .snav__in{padding-block:6px}
.has-navmenu .nav__in>ul>li:not(.nav__cta),
.has-navmenu .snav__in>ul>li:not(.nav__cta){display:none}
.has-navmenu .nav__in>ul,
.has-navmenu .snav__in>ul{margin-left:auto}
.has-navmenu .nav__in,
.has-navmenu .snav__in{gap:8px}
.has-navmenu .nav__menu{display:inline-flex}
}
@media (max-width:399px){
.capsule--nav .btn{height:38px;padding:0 14px;font-size:14px}
}
.nav.is-open,
.snav.is-open{background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.nav.is-open .mark path{fill:var(--plum)}
.nav.is-open .nav__menu{color:var(--plum)}
.nav.is-open :focus-visible,
.snav.is-open :focus-visible{outline-color:var(--primary)}
/* the white capsule on a white bar keeps its edge */
.nav.is-open .capsule--nav,
.snav.is-open .capsule--nav{box-shadow:inset 0 0 0 1px var(--border)}
.nav__panel{position:absolute;top:100%;left:0;right:0;background:var(--white);
border-bottom:1px solid var(--border);box-shadow:0 24px 32px -16px rgba(37,68,113,.18);
animation:nav-drop .2s ease}
.nav__panel[hidden]{display:none}
.nav__panel ul{display:block;max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) 16px}
.nav__panel li+li{border-top:1px solid var(--border)}
.nav .nav__panel a,
.snav .nav__panel a{display:flex;align-items:center;min-height:60px;
font-family:var(--disp);font-weight:600;font-size:28px;line-height:1;color:var(--plum)}
.nav .nav__panel a:hover,
.snav .nav__panel a:hover{color:var(--primary)}
.nav .nav__panel a[aria-current="page"],
.snav .nav__panel a[aria-current="page"]{color:var(--primary)}
@keyframes nav-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* ==========================================================================
PANEL — the white information card
A title, an optional note, then label/value rows. The value side is set in
the mono face, which is the site's register for a reading or a figure.
- Ride credits
- 10
10 ride pack
Still there, still the same price.
Gradient
8.9%
========================================================================== */
.mc{background:var(--white);border-radius:var(--r);padding:10px 18px 9px;
color:var(--card-ink);box-shadow:var(--lift-sm);text-align:left}
.mc .l{font-family:var(--mono);font-weight:300;font-size:12px;line-height:9px;letter-spacing:.05em;
text-transform:uppercase;opacity:.66;display:block}
.mc .v{display:flex;align-items:baseline;gap:4px;margin-top:12px}
.mc .v b{font-family:var(--mono);font-weight:400;font-size:32px;line-height:23px;letter-spacing:0}
.mc .v span{font-family:var(--mono);font-weight:300;font-size:12px;line-height:9px;letter-spacing:.05em;
text-transform:uppercase;opacity:.66}
/* ==========================================================================
FOOTER
The full four-column site footer. Every page that is not a door gets it.
========================================================================== */
.footer{background:var(--white);padding:72px 0 80px}
.footer__top{display:flex;flex-direction:column;gap:24px;padding-bottom:40px;border-bottom:1px solid var(--border)}
.footer__top img{height:22px;width:auto;flex:0 0 auto;align-self:flex-start}
.footer__tag{font-family:var(--disp);font-weight:500;font-size:20px;line-height:1.23;color:var(--plum)}
.footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:32px}
.footer__cols ul{display:flex;flex-direction:column}
.footer__cols a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--plum)}
.footer__cols a:hover{color:var(--plum50)}
/* A social link is a glyph, not a word. The mark is 20px and takes the link's
own colour through currentColor; the link itself keeps a 44px target at
every width, including desktop where the text links drop to 27px. Two
classes beat `.footer__cols a`, so the desktop rule below cannot shrink it.
Every glyph is drawn inline — nothing is fetched. */
.footer__cols .sicon{min-height:44px;min-width:44px;justify-content:flex-start}
.footer__cols .sicon svg{width:20px;height:20px}
@media (min-width:900px){
.footer{padding:96px 0 112px}
.footer__top{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:48px;padding-bottom:64px}
.footer__tag{font-size:26px;white-space:nowrap}
/* The three link columns may SHRINK below 200. Fixed at 200 with 48px gaps
the row demands 944px, but at a 900px window .wrap gives it 820 — so every
page on the site overflowed sideways by 84px between 900 and ~983, which
is a real window size. minmax lets them give way instead. */
.footer__cols{grid-template-columns:repeat(2,minmax(0,200px)) 1fr;gap:48px;margin-top:48px}
.footer__cols>div:last-child{justify-self:end;max-width:200px}
.footer__cols a{min-height:27px;font-size:12px}
}
/* ==========================================================================
RAIN CHECK
The email capture directly above the footer, on every page that has the
footer except the account page, whose readers are signed in (#651).
An off-white band, the heading and one line on the left, and on the right the form drawn as the site's white capsule: the field
where the capsule's label would be, the .btn where its button is.
js/rain-check.js runs it; the messages are in the markup, hidden until
one is true. The markup is the same on every page — the site editor
saves a change to it everywhere at once.
========================================================================== */
.raincheck{background:var(--surface);border-top:1px solid var(--border);padding:56px 0 64px;scroll-margin-top:72px}
.raincheck__in{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.raincheck__title{font-family:var(--disp);font-weight:600;line-height:1.15;
font-size:40px;color:var(--plum)} /* the size of the page's section titles */
@media (max-width:599px){.raincheck__title{font-size:32px}}
.raincheck__lede{margin-top:14px;max-width:40ch;font-size:18px;line-height:1.45;color:var(--plum70)}
.raincheck__form{display:flex;align-items:center;gap:8px;max-width:560px;min-width:0;
background:var(--white);border:1px solid transparent;border-radius:999px;padding:6px}
.raincheck__field{flex:1 1 auto;min-width:0;height:46px;padding:0 6px 0 18px;border:0;border-radius:999px;
background:transparent;color:var(--plum);font-family:var(--body);font-size:18px;
-webkit-appearance:none;appearance:none}
.raincheck__field::placeholder{color:var(--plum50);opacity:1}
.raincheck__btn{flex:0 0 auto;cursor:pointer;border:0}
.raincheck__btn[disabled]{opacity:.6;cursor:default}
.raincheck :focus-visible{outline-color:var(--primary)}
/* The field has no edge of its own, so the ring goes round the whole capsule. */
@supports selector(:has(a)){
.raincheck__field:focus-visible{outline:none}
.raincheck__form:has(.raincheck__field:focus-visible){outline:3px solid var(--primary);outline-offset:3px}
}
.raincheck__form.is-bad{border-color:#C42B1C}
.raincheck [hidden]{display:none}
.raincheck__fine{margin-top:14px}
.raincheck__fine a{color:var(--plum70);text-decoration:underline;text-underline-offset:3px}
.raincheck__fine a:hover{color:var(--primary)}
.raincheck__say p{margin-top:14px;max-width:48ch;font-size:17px;line-height:1.4;color:#C42B1C}
/* the good news stands where the form was, in the heading's voice */
.raincheck__say .is-good{margin-top:0;font-family:var(--disp);font-weight:500;
font-size:clamp(20px,1.8vw,24px);line-height:1.3;color:var(--plum)}
.raincheck__say p:focus{outline:none}
@media (max-width:399px){
.raincheck__field{padding-left:14px;font-size:17px}
}
@media (min-width:900px){
.raincheck{padding:96px 0}
.raincheck__in{grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:start;gap:48px}
/* the heading sits on the form's centre line and the lede on the fine
print's: the pill is 63px, the heading's line 46px, so 8px above it */
.raincheck__title{padding-top:8px}
.raincheck__lede{margin-top:23px}
}
/* ==========================================================================
DOCUMENT PAGE
The skeleton for the text-heavy pages: Help, Privacy, Terms, Refunds.
It is the homepage's own furniture, quietened: the .wrap column and the
same side padding, the title in Clash Display at the size a section head
takes, hairlines in --border, prose in --plum70 at the site's 18px, and
mono only where there is a figure or an index number. Nothing here is a
new treatment; it is the homepage's vocabulary arranged for reading.
Skeleton: