/* Benvenù website: a station concourse. Colours are the app's tokens (src/theme/colors.ts); the font is the app's Onest, hosted here (fonts/, SIL Open Font License). The departure board's per-tile timing is in board.css, generated by scripts/build-website.ts. */ @font-face { font-family: Onest; font-weight: 400; font-display: swap; src: url(/fonts/onest-400.woff2) format("woff2"); } @font-face { font-family: Onest; font-weight: 500; font-display: swap; src: url(/fonts/onest-500.woff2) format("woff2"); } @font-face { font-family: Onest; font-weight: 600; font-display: swap; src: url(/fonts/onest-600.woff2) format("woff2"); } :root { color-scheme: light dark; --platform: #ECEFEA; --surface: #FFFFFF; --ink: #1B2130; --ink-soft: #5E6678; --rail: #C9CEC6; --hairline: #DDE1DA; --board: #1E222B; --flap: #2A2F3A; --flap-ink: #F3EDDC; --line-before: #2A7F8F; --line-weeks: #4B3FB3; --line-settle: #9C6A1B; --accent: #4B3FB3; --on-line: #FFFFFF; --frame: #1B2130; --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; --gutter: 24px; } /* Dark: the device's setting, unless the visitor picked a theme with the header button (theme.js sets data-theme on ). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --platform: #12151B; --surface: #1C2029; --ink: #EDEFF3; --ink-soft: #A3AAB8; --rail: #3D4350; --hairline: #2A2F3A; --board: #0B0D11; --accent: #A9A0F4; --frame: #3D4350; } } :root[data-theme="dark"] { color-scheme: dark; --platform: #12151B; --surface: #1C2029; --ink: #EDEFF3; --ink-soft: #A3AAB8; --rail: #3D4350; --hairline: #2A2F3A; --board: #0B0D11; --accent: #A9A0F4; --frame: #3D4350; } :root[data-theme="light"] { color-scheme: light; } @media (max-width: 600px) { :root { --gutter: 16px; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--platform); color: var(--ink); font: 1.0625rem/1.55 Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); overflow-wrap: anywhere; } a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; } p, ul { margin: 0 0 12px; } ul { padding-inline-start: 22px; } li { margin-bottom: 4px; } h1, h2, h3 { font-weight: 600; line-height: 1.2; } .wrap { max-width: calc(1100px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.015em; margin: 0 0 10px; } .section-lead { color: var(--ink-soft); font-size: 1.125rem; max-width: 40em; margin: 0 0 40px; } /* Header: the "B" mark, the name, the language switch. */ .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 20px; } .brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.25rem; white-space: nowrap; } .brand svg { flex: none; border-radius: 9px; } .controls { display: flex; align-items: center; gap: 8px; } /* Each option is a full 44px target; a transparent border keeps the pill's inner margin. */ .lang { display: flex; border-radius: 999px; background: var(--surface); border: 1px solid var(--hairline); } .lang a, .lang span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 10px; border: 4px solid transparent; background-clip: padding-box; border-radius: 999px; font-size: 0.9375rem; font-weight: 600; text-decoration: none; color: var(--ink-soft); } .lang [aria-current] { background-color: var(--ink); color: var(--platform); } /* Light/dark switch: shows a moon in light mode and a sun in dark mode. */ .theme { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer; background: var(--surface); border: 1px solid var(--hairline); color: var(--ink); } /* Only with theme.js running (it adds .js to before the page is drawn). */ :root:not(.js) .theme { display: none; } .theme:hover { border-color: var(--rail); } .theme:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .theme svg { width: 20px; height: 20px; } .theme .sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .sun { display: block; } :root:not([data-theme="light"]) .theme .moon { display: none; } } :root[data-theme="dark"] .theme .sun { display: block; } :root[data-theme="dark"] .theme .moon { display: none; } /* The departure board, with split-flap tiles. */ .board { --tw: clamp(24px, 7.6vw, 58px); --th: calc(var(--tw) * 1.42); background: var(--board); border-radius: 24px; padding: clamp(18px, 3vw, 32px) clamp(16px, 3.4vw, 40px) clamp(22px, 3.4vw, 40px); color: var(--flap-ink); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55); } .board-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: clamp(14px, 2.4vw, 24px); font-size: 0.9375rem; font-weight: 500; color: #A3AAB8; letter-spacing: 0.04em; text-transform: uppercase; } .board-rows { display: flex; flex-wrap: wrap; column-gap: calc(var(--tw) * 0.55); row-gap: 8px; direction: ltr; } .word { display: flex; gap: 4px; } .flap { position: relative; width: var(--tw); height: var(--th); overflow: hidden; border-radius: 5px; background: var(--flap); font: 600 calc(var(--tw) * 0.9) / var(--th) var(--mono); text-align: center; } .flap::before { content: ""; position: absolute; inset: 0 0 50% 0; background: rgba(255, 255, 255, 0.045); z-index: 1; } .flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--board); z-index: 2; } .reel { display: flex; flex-direction: column; transform: translateY(calc(-100% + var(--th))); } .reel span { display: block; height: var(--th); } @media (prefers-reduced-motion: no-preference) { .reel { animation: flip 1s both; } } @keyframes flip { from { transform: translateY(0); } to { transform: translateY(calc(-100% + var(--th))); } } /* Hero. */ .hero { padding: 8px 0 72px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; align-items: center; margin-top: 56px; } .hero h1 { font-size: clamp(2.25rem, 5.6vw, 3.75rem); letter-spacing: -0.025em; margin: 0 0 18px; } .lead { font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.45; color: var(--ink-soft); max-width: 32em; margin: 0 0 14px; } .starting { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; margin: 0 0 30px; } .starting::before { /* Level with the first line of text. */ content: ""; flex: none; width: 14px; height: 14px; margin-top: calc(0.775em - 7px); border-radius: 50%; border: 4px solid var(--line-weeks); background: var(--surface); } .store { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 24px; margin: 0; border-radius: 14px; background: var(--ink); color: var(--platform); font-weight: 600; text-decoration: none; } .store.soon { background: transparent; color: inherit; border: 2px dashed var(--rail); } .store svg { flex: none; } /* A phone frame around an app screenshot. */ .phone { position: relative; width: 100%; max-width: 300px; margin: 0 auto; border: 10px solid var(--frame); border-radius: 44px; overflow: hidden; background: var(--platform); box-shadow: 0 30px 60px -30px rgba(27, 33, 48, 0.45); } /* The screenshots are cropped to the frames' shape, so they keep their natural height: no aspect-ratio or percentage heights, which WebKit sized differently inside the flex cards. */ .phone img, .shot img { width: 100%; height: auto; } /* Screenshots of the app in the site's theme. */ .dark-only { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dark-only { display: block; } :root:not([data-theme="light"]) .light-only { display: none; } } :root[data-theme="dark"] .dark-only { display: block; } :root[data-theme="dark"] .light-only { display: none; } /* Switching theme with the header button: a short crossfade (theme.js uses the View Transitions API where available; otherwise it switches at once). */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: ease-in-out; } /* The journey as a metro line: horizontal on wide screens, vertical on narrow ones. */ .journey { padding: 72px 0; background: var(--surface); border-block: 1px solid var(--hairline); } .metro { --dot: 26px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .metro li { position: relative; margin: 0; padding: calc(var(--dot) + 18px) 8px 0; text-align: center; } .metro li::before { /* The track from this station to the next. */ content: ""; position: absolute; top: calc(var(--dot) / 2 - 4px); left: 50%; width: 100%; height: 8px; background: var(--seg); } .metro li:last-child::before { display: none; } .metro li::after { content: ""; position: absolute; top: 0; left: calc(50% - var(--dot) / 2); width: var(--dot); height: var(--dot); border-radius: 50%; box-sizing: border-box; background: var(--surface); border: 6px solid var(--c); z-index: 1; } .metro .before { --c: var(--line-before); --seg: var(--line-before); } .metro .weeks { --c: var(--line-weeks); --seg: var(--line-weeks); } .metro .settle { --c: var(--line-settle); --seg: var(--line-settle); } .metro .to-settle { --seg: linear-gradient(90deg, var(--line-weeks), var(--line-settle)); } .metro .interchange { --c: var(--ink); --seg: var(--line-weeks); } .metro .interchange::after { --big: 38px; top: calc((var(--dot) - var(--big)) / 2); left: calc(50% - var(--big) / 2); width: var(--big); height: var(--big); border-width: 8px; } .metro strong { display: block; font-size: clamp(1.125rem, 1.9vw, 1.375rem); font-weight: 600; line-height: 1.2; margin-bottom: 6px; } .metro span { display: block; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-soft); } .legend { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 44px 0 0; padding: 0; font-size: 0.9375rem; font-weight: 500; } .legend li { display: flex; align-items: center; gap: 8px; margin: 0; } .legend li::before { content: ""; width: 26px; height: 8px; border-radius: 4px; background: var(--c); } .legend .before { --c: var(--line-before); } .legend .weeks { --c: var(--line-weeks); } .legend .settle { --c: var(--line-settle); } @media (max-width: 820px) { .metro { grid-template-columns: 1fr; } .metro li { padding: 0 0 30px calc(var(--dot) + 22px); text-align: start; min-height: 64px; } .metro li::before { top: calc(var(--dot) / 2); left: calc(var(--dot) / 2 - 4px); width: 8px; height: 100%; } .metro .to-settle { --seg: linear-gradient(180deg, var(--line-weeks), var(--line-settle)); } .metro li::after { left: 0; } .metro .interchange::after { left: calc((var(--dot) - var(--big)) / 2); } } /* Features, each as a station sign. */ .features { padding: 80px 0; } .signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .sign-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; overflow: hidden; } .sign { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 20px; background: var(--c); color: var(--on-line); font-size: 1.3125rem; font-weight: 600; line-height: 1.2; } .sign::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 5px solid var(--on-line); box-sizing: border-box; } .sign-card:nth-child(1) { --c: var(--line-before); } .sign-card:nth-child(2) { --c: var(--line-weeks); } .sign-card:nth-child(3) { --c: var(--line-settle); } .sign-card p { margin: 18px 20px 22px; color: var(--ink-soft); } .shot { margin: auto 20px 0; border: 8px solid var(--frame); border-bottom: 0; border-radius: 28px 28px 0 0; overflow: hidden; background: var(--platform); } @media (max-width: 900px) { .signs { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } } /* Closing band. */ .closing { background: var(--board); color: var(--flap-ink); padding: 76px 0; } .closing h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.015em; margin: 0 0 28px; max-width: 18em; } .facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 36px; padding: 0; } .facts li { margin: 0; padding: 10px 16px; border-radius: 6px; background: var(--flap); font: 600 1rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } .closing .store.soon { border-color: #5E6678; } .closing .store:not(.soon) { background: var(--flap-ink); color: var(--board); } /* Legal pages. */ .doc { max-width: 720px; padding-bottom: 24px; } .doc h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); letter-spacing: -0.015em; margin: 28px 0 6px; } .doc h2 { font-size: 1.3125rem; margin: 32px 0 6px; } .meta { color: var(--ink-soft); font-size: 0.9375rem; margin: 0 0 22px; } .summary { background: var(--surface); border-inline-start: 4px solid var(--line-weeks); border-radius: 12px; padding: 16px 18px; margin: 0 0 8px; } .summary p { margin: 0; } /* Footer. */ footer { border-top: 1px solid var(--hairline); color: var(--ink-soft); font-size: 0.9375rem; padding: 32px 0 48px; } .closing + footer { border-top: 0; } .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; } .foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; } .foot nav a { display: inline-flex; align-items: center; min-height: 44px; } .disclaimer { margin: 20px 0 0; max-width: 46em; } @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; margin-top: 40px; } .phone { max-width: 270px; } .hero { padding-bottom: 56px; } .journey, .features, .closing { padding: 56px 0; } }