/* Clean, round 2: game night is a trip (design/looks-round-2/clean, approved 30 Oct). Home is your upcoming trip and its boarding pass, the round is online check-in, the plan is the e-ticket, a player card is a passport photo page. Paper, ink and one blue. Full-bleed bands and real objects with their real edges (a pass's perforation and notches, a passport page's security print); hairlines and type everywhere else. Never a stack of rounded cards. Square buttons. Every rule here is scoped to Clean, except the line that keeps Clean's extra bits out of the other looks. The pieces themselves are built in js/looks/clean.js. */ /* Clean's extra bits inside shared rows (the question screen): never shown in another look. */ .cl-tick, .cl-num, .cl-seat, .cl-bname { display: none; } /* ===================== the look's tokens ===================== */ :root[data-theme="clean"] { --cl-blue: #2457E6; --cl-blue-press: #1A45C2; --cl-ink: #0B1020; --cl-ink-2: #4E5465; /* 7.5:1 on white */ --cl-rule: rgba(11, 16, 32, .12); --cl-rule-2: rgba(11, 16, 32, .30); --cl-on-blue-2: #DCE4FC; /* 4.6:1 on the blue */ --cl-on-blue-rule: rgba(255, 255, 255, .34); --cl-page: #F2F5FD; --cl-live: #3DDC84; --cl-gut: max(16px, env(safe-area-inset-left, 0px)); /* env() here: --safe-left is set on body, below :root */ --cl-archivo: 'Archivo', 'Arial Narrow', 'Figtree', sans-serif; --fg: var(--cl-ink); --muted: var(--cl-ink-2); --muted-2: var(--cl-ink-2); --line: var(--cl-rule); --line-2: var(--cl-rule-2); --f-display: var(--cl-archivo); --h1-size: 40px; --h2-size: 24px; --title-size: 17px; --display-tracking: -0.015em; --radius: 0px; --radius-lg: 0px; --input-radius: 0px; --chip-radius: 2px; --card-bg: #FFFFFF; --card-rule: var(--cl-rule); --card-fg: var(--cl-ink); --card-muted: var(--cl-ink-2); --card-muted-2: var(--cl-ink-2); --card-eyebrow: var(--cl-ink); --avatar-ring: #FFFFFF; --btn-bg: #FFFFFF; --btn-fg: var(--cl-ink); --btn-border: 1.5px solid var(--cl-ink); --card-btn-bg: #FFFFFF; --card-btn-fg: var(--cl-ink); --card-btn-border: 1.5px solid var(--cl-ink); --btn-weight: 600; --btn-size: 17px; --input-border: var(--cl-rule-2); --chip-bg: transparent; --chip-fg: var(--cl-ink-2); --nav-border: 1px solid var(--cl-rule); --nav-fg: var(--cl-ink-2); --nav-size: 12px; --nav-weight: 500; --sheet-radius: 0px; } /* ===================== type ===================== */ :root[data-theme="clean"] h1 { font-weight: 800; font-stretch: 75%; line-height: .98; letter-spacing: -0.02em; } :root[data-theme="clean"] h2 { font-weight: 700; font-stretch: 85%; line-height: 1.1; } :root[data-theme="clean"] .topbar .title, :root[data-theme="clean"] .podname-text { font-family: var(--f-body); font-weight: 600; font-size: 17px; letter-spacing: 0; } /* Section labels read as section titles: big condensed type, sentence case. */ :root[data-theme="clean"] .eyebrow { font-family: var(--cl-archivo); font-stretch: 85%; font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -0.005em; text-transform: none; color: var(--cl-ink); } /* ===================== surfaces: hairline sections, not boxes ===================== */ :root[data-theme="clean"] .screen .card:not(.hero):not(.gold) { background: transparent; border: 0; border-top: 1px solid var(--cl-rule); border-radius: 0; box-shadow: none; padding: 22px 0 4px; } :root[data-theme="clean"] .screen .card.gold { background: var(--cl-page); border: 0; border-radius: 0; padding: 16px; } :root[data-theme="clean"] .sheet { border-radius: 0; } /* ===================== controls: square, like a printed form ===================== */ :root[data-theme="clean"] .btn { min-height: 56px; border-radius: 0; font-weight: 600; } :root[data-theme="clean"] .btn.primary { font-weight: 600; border: 0; } :root[data-theme="clean"] .btn.primary:active { background: var(--cl-blue-press); } :root[data-theme="clean"] .btn.quiet { border: 1px solid var(--cl-rule-2); color: var(--cl-ink); } :root[data-theme="clean"] .btn.small { min-height: 44px; } :root[data-theme="clean"] .icon-btn { background: transparent; border: 0; border-radius: 50%; } :root[data-theme="clean"] .icon-btn:active { background: rgba(11, 16, 32, .06); } :root[data-theme="clean"] .chip { border: 1px solid var(--cl-rule-2); font-weight: 600; } :root[data-theme="clean"] .chip.accent { background: transparent; color: var(--cl-blue); border-color: var(--cl-blue); } :root[data-theme="clean"] .pill { border-radius: 0; } :root[data-theme="clean"] .pill.on { background: var(--cl-blue); border-color: var(--cl-blue); color: #FFFFFF; } /* The tab bar: the tab you are on is blue with a bar along its top edge. */ :root[data-theme="clean"] .nav a { position: relative; } :root[data-theme="clean"] .nav a.on { font-weight: 600; } :root[data-theme="clean"] .nav a.on::before { content: ""; position: absolute; top: -8px; left: 28%; right: 28%; height: 3px; background: var(--cl-blue); } /* ===================== shared pieces of the trip ===================== */ :root[data-theme="clean"] .cl-band { background: var(--cl-blue); color: #FFFFFF; } :root[data-theme="clean"] .cl-lbl { display: block; font: 500 13px/1.25 var(--f-body); color: var(--cl-ink-2); } :root[data-theme="clean"] .cl-band .cl-lbl { color: var(--cl-on-blue-2); } :root[data-theme="clean"] .cl-band .cl-pass .cl-lbl { color: var(--cl-ink-2); } :root[data-theme="clean"] .cl-i { display: inline-flex; flex: none; } :root[data-theme="clean"] .cl-i svg { width: 22px; height: 22px; display: block; } :root[data-theme="clean"] .cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :root[data-theme="clean"] .cl-h1 { margin: 10px 0 0; font-size: 46px; color: #FFFFFF; } :root[data-theme="clean"] .cl-sub { margin: 10px 0 0; font-size: 17px; line-height: 1.4; color: var(--cl-on-blue-2); } /* A top bar that is part of the blue band: on Home, the plan and a player card in Clean. */ :root[data-theme="clean"] .screen:has(> .week), :root[data-theme="clean"] .screen:has(> .look-clean.look-plan), :root[data-theme="clean"] .screen:has(> .look-clean.look-card) { --gap: 20px; } :root[data-theme="clean"] .screen:has(> .week) > .topbar, :root[data-theme="clean"] .screen:has(> .look-clean.look-plan) > .topbar, :root[data-theme="clean"] .screen:has(> .look-clean.look-card) > .topbar { margin: calc(-14px - var(--safe-top)) calc(-1 * var(--cl-gut)) 0; padding: calc(14px + var(--safe-top)) calc(var(--cl-gut) - 4px) 6px; background: var(--cl-blue); color: #FFFFFF; } :root[data-theme="clean"] .screen:has(> .week) > .topbar .icon-btn, :root[data-theme="clean"] .screen:has(> .look-clean.look-plan) > .topbar .icon-btn, :root[data-theme="clean"] .screen:has(> .look-clean.look-card) > .topbar .icon-btn { color: #FFFFFF; } :root[data-theme="clean"] .screen:has(> .look-clean.look-card) > .topbar .btn.small { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, .7); } :root[data-theme="clean"] .screen:has(> .week) > .topbar .podname { background: transparent; border: 0; color: #FFFFFF; padding-left: 4px; } :root[data-theme="clean"] .screen:has(> .week) > .topbar .avatar { border-color: #FFFFFF; } /* Home: the trip comes straight under the bar, before anything else on the screen. */ :root[data-theme="clean"] .screen:has(> .week) > * { order: 3; } :root[data-theme="clean"] .screen:has(> .week) > .topbar { order: 1; } :root[data-theme="clean"] .screen:has(> .week) > .week { order: 2; margin-top: calc(-1 * var(--gap)); } /* Until the week arrives (or when it fails), the plain card wears the band too. */ :root[data-theme="clean"] .week:not(:has(> .look-clean)) > .week-card { margin: 0 calc(-1 * var(--cl-gut)); padding: 8px var(--cl-gut) 24px; background: var(--cl-blue); color: #FFFFFF; --fg: #FFFFFF; --muted: var(--cl-on-blue-2); --card-muted: var(--cl-on-blue-2); } :root[data-theme="clean"] .week:not(:has(> .look-clean)) > .week-card .eyebrow { font: 500 17px/1.3 var(--f-body); color: var(--cl-on-blue-2); } :root[data-theme="clean"] .week:not(:has(> .look-clean)) > .week-card h1 { font-size: 46px; color: #FFFFFF; } :root[data-theme="clean"] .week:not(:has(> .look-clean)) > .week-card .chip { color: #FFFFFF; border-color: var(--cl-on-blue-rule); } :root[data-theme="clean"] .week:not(:has(> .look-clean)) > .week-card .btn.primary { background: #FFFFFF; color: var(--cl-blue); margin-top: 6px; } :root[data-theme="clean"] .week:not(:has(> .look-clean)) > .week-card .btn:not(.primary) { background: transparent; color: #FFFFFF; border: 1.5px solid #FFFFFF; } :root[data-theme="clean"] .week:not(:has(> .look-clean)) > .week-card .error { color: #FFFFFF; } /* ===================== Home: the trip ===================== */ :root[data-theme="clean"] .look-clean.look-home { margin: 0 calc(-1 * var(--cl-gut)); } :root[data-theme="clean"] .cl-trip { padding: 4px var(--cl-gut) 22px; } :root[data-theme="clean"] .cl-dep { display: flex; align-items: center; justify-content: space-between; margin: 0; font: 500 17px/1.3 var(--f-body); color: var(--cl-on-blue-2); } :root[data-theme="clean"] .cl-live { display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF; font: 600 15px/1 var(--f-body); } :root[data-theme="clean"] .cl-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--cl-live); box-shadow: 0 0 0 3px rgba(61, 220, 132, .28); } :root[data-theme="clean"] .cl-cd { display: flex; align-items: flex-start; margin: 0; padding-top: 16px; } :root[data-theme="clean"] .cl-cd-u { display: flex; flex-direction: column; padding-right: 18px; } :root[data-theme="clean"] .cl-cd-u[hidden] { display: none; } :root[data-theme="clean"] .cl-cd-u:not([hidden]) ~ .cl-cd-u:not([hidden]) { padding-left: 18px; box-shadow: inset 1px 0 0 var(--cl-on-blue-rule); } :root[data-theme="clean"] .cl-cd-n { font-family: var(--cl-archivo); font-weight: 800; font-stretch: 62%; font-size: 104px; line-height: .8; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; } :root[data-theme="clean"] .cl-cd-l { margin-top: 12px; font: 500 15px/1 var(--f-body); color: var(--cl-on-blue-2); } /* The boarding pass: a real paper object, so it alone keeps corners, notches and holes. */ :root[data-theme="clean"] .cl-pass { display: block; margin-top: 22px; text-decoration: none; color: var(--cl-ink); filter: drop-shadow(0 16px 18px rgba(5, 20, 90, .32)); } :root[data-theme="clean"] .cl-pass-top { background: #FFFFFF; border-radius: 8px 8px 0 0; padding: 14px 18px 8px; --cl-route-bg: #FFFFFF; } :root[data-theme="clean"] .cl-pass-stub { background: #FFFFFF; border-radius: 0 0 8px 8px; padding: 16px 18px 18px; } :root[data-theme="clean"] .cl-pass-strip { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 8px; } :root[data-theme="clean"] .cl-brand { display: inline-flex; align-items: center; gap: 7px; font: 800 17px/1 var(--cl-archivo); font-stretch: 112%; letter-spacing: .06em; color: var(--cl-blue); } :root[data-theme="clean"] .cl-brand .cl-i svg { width: 20px; height: 20px; } :root[data-theme="clean"] .cl-pax { text-align: right; } :root[data-theme="clean"] .cl-pax b { font: 600 15px/1.2 var(--f-body); } /* Perforation: real holes, not dots. The upper piece's bottom edge and the lower piece's top edge each carry half-holes and a half-notch at both ends, so flush they read as one perforated line. */ :root[data-theme="clean"] .cl-perf-b, :root[data-theme="clean"] .cl-perf-t { --hole: 3px; --pitch: 14px; --notch: 13px; } :root[data-theme="clean"] .cl-perf-b { -webkit-mask: radial-gradient(circle at calc(var(--pitch) / 2) 100%, #0000 var(--hole), #000 calc(var(--hole) + .5px)) 0 0 / var(--pitch) 100% repeat-x, radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)), radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)); -webkit-mask-composite: source-in, source-in; mask: radial-gradient(circle at calc(var(--pitch) / 2) 100%, #0000 var(--hole), #000 calc(var(--hole) + .5px)) 0 0 / var(--pitch) 100% repeat-x, radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)), radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)); mask-composite: intersect; } :root[data-theme="clean"] .cl-perf-t { -webkit-mask: radial-gradient(circle at calc(var(--pitch) / 2) 0, #0000 var(--hole), #000 calc(var(--hole) + .5px)) 0 0 / var(--pitch) 100% repeat-x, radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)), radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)); -webkit-mask-composite: source-in, source-in; mask: radial-gradient(circle at calc(var(--pitch) / 2) 0, #0000 var(--hole), #000 calc(var(--hole) + .5px)) 0 0 / var(--pitch) 100% repeat-x, radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)), radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)); mask-composite: intersect; } /* The route: two "airport" codes and the flight line between them. */ :root[data-theme="clean"] .cl-route { display: grid; grid-template-columns: minmax(0, auto) 1fr minmax(0, auto); align-items: start; gap: 12px; padding: 2px 0 13px; border-bottom: 1px solid var(--cl-rule); } :root[data-theme="clean"] .cl-route-end { min-width: 0; } :root[data-theme="clean"] .cl-route-end.r { text-align: right; } :root[data-theme="clean"] .cl-code { display: block; font-family: var(--cl-archivo); font-weight: 800; font-size: 48px; line-height: .9; letter-spacing: -0.01em; } :root[data-theme="clean"] .cl-code.tbd { color: var(--cl-ink-2); font-stretch: 85%; } :root[data-theme="clean"] .cl-route-end .cl-lbl { margin-top: 8px; max-width: 132px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-theme="clean"] .cl-route-end.r .cl-lbl { margin-left: auto; } :root[data-theme="clean"] .cl-route-line { position: relative; height: 40px; display: grid; place-items: center; color: var(--cl-blue); } :root[data-theme="clean"] .cl-route-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed currentColor; opacity: .55; } :root[data-theme="clean"] .cl-route-line .cl-i { position: relative; padding: 0 3px; background: var(--cl-route-bg, #FFFFFF); } :root[data-theme="clean"] .cl-route-line .cl-i svg { width: 26px; height: 26px; } /* Fields: label over value, divided by hairlines. */ :root[data-theme="clean"] .cl-fields { display: grid; grid-template-columns: 1fr 1.32fr; margin: 0; } :root[data-theme="clean"] .cl-fields > div { min-width: 0; padding: 9px 0 9px 14px; box-shadow: inset 1px 0 0 var(--cl-rule); } :root[data-theme="clean"] .cl-fields > div:nth-child(odd) { padding-left: 0; box-shadow: none; } :root[data-theme="clean"] .cl-fields > div:nth-child(n+3) { border-top: 1px solid var(--cl-rule); } :root[data-theme="clean"] .cl-fields dd { margin: 0; } :root[data-theme="clean"] .cl-fv { display: block; margin-top: 4px; font-family: var(--cl-archivo); font-weight: 700; font-stretch: 85%; font-size: 23px; line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-theme="clean"] .cl-fv.tbd { font-size: 19px; color: var(--cl-ink-2); } :root[data-theme="clean"] .cl-fs { display: block; margin-top: 3px; font: 400 15px/1.3 var(--f-body); color: var(--cl-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The stub: online check-in, one segment per member. */ :root[data-theme="clean"] .cl-ci { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } :root[data-theme="clean"] .cl-ci b { display: block; font: 600 17px/1.2 var(--f-body); } :root[data-theme="clean"] .cl-ci span:not(.cl-ci-n) { display: block; margin-top: 2px; font: 400 15px/1.3 var(--f-body); color: var(--cl-ink-2); } :root[data-theme="clean"] .cl-ci-n { font: 700 22px/1 var(--cl-archivo); font-stretch: 85%; color: var(--cl-blue); white-space: nowrap; } :root[data-theme="clean"] .cl-steps { display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; } :root[data-theme="clean"] .cl-steps > li { height: 4px; background: var(--cl-rule); } :root[data-theme="clean"] .cl-steps > li.on { background: var(--cl-blue); } :root[data-theme="clean"] .cl-steps > li.now { background: linear-gradient(90deg, var(--cl-blue) 50%, var(--cl-rule) 0); } /* Under the band: the one thing to do next, then the travel party. */ :root[data-theme="clean"] .cl-cta { padding: 16px var(--cl-gut) 0; } :root[data-theme="clean"] .cl-cta.stack { gap: 10px; } :root[data-theme="clean"] .cl-cta .btn .cl-i svg { width: 20px; height: 20px; } :root[data-theme="clean"] .cl-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--cl-blue); font: 600 16px/1.2 var(--f-body); text-decoration: none; } :root[data-theme="clean"] .cl-textlink .cl-i svg { width: 18px; height: 18px; } :root[data-theme="clean"] .cl-party { padding: 32px var(--cl-gut) 0; } :root[data-theme="clean"] .cl-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } :root[data-theme="clean"] .cl-sec-head h2 { margin: 0; font-size: 26px; } :root[data-theme="clean"] .cl-meta { margin: 0; font-size: 15px; color: var(--cl-ink-2); } /* The party as person blocks: each member's colour as a flat block, their character standing in it. */ :root[data-theme="clean"] .cl-party .face-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 10px 6px; } :root[data-theme="clean"] .cl-party .face { width: 100%; } :root[data-theme="clean"] .cl-party .face .avatar { width: 100%; height: 60px; border: 0; border-radius: 0; box-shadow: none; } :root[data-theme="clean"] .cl-party .face .avatar.pixel svg { width: auto; height: 100%; margin: 0 auto; } :root[data-theme="clean"] .cl-party .face.waiting .avatar { opacity: 1; background: #FFFFFF; outline: 1.5px dashed rgba(11, 16, 32, .5); outline-offset: -1.5px; } :root[data-theme="clean"] .cl-party .face.waiting .avatar svg { filter: grayscale(1); opacity: .42; } :root[data-theme="clean"] .cl-party .face-tick { top: -7px; right: -4px; width: 22px; height: 22px; background: var(--cl-ink); color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF; } :root[data-theme="clean"] .cl-party .face-row .face-name { display: block; margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.2 var(--f-body); color: var(--cl-ink); } :root[data-theme="clean"] .cl-party .hint { margin-top: 8px; font-size: 14px; } /* ===================== Round: online check-in ===================== */ :root[data-theme="clean"] .row:has(> .round-progress) { display: none; } :root[data-theme="clean"] .cl-checkin { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; } :root[data-theme="clean"] .cl-step { margin: 0; font-size: 15px; color: var(--cl-ink-2); } :root[data-theme="clean"] .cl-step b { color: var(--cl-ink); font-weight: 600; } :root[data-theme="clean"] .cl-kicker { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font: 600 20px/1.2 var(--f-body); color: var(--cl-blue); } :root[data-theme="clean"] .cl-kicker .cl-i svg { width: 26px; height: 26px; } :root[data-theme="clean"] .qcard { gap: 0; } :root[data-theme="clean"] .qcard > h1 { margin: 12px 0 0; font-size: 46px; } :root[data-theme="clean"] .qcard > p.muted { margin: 14px 0 0; font-size: 17px; } :root[data-theme="clean"] .qcard > p.hint { margin-top: 14px; } :root[data-theme="clean"] .qcard > .toggle { margin-top: 12px; } :root[data-theme="clean"] .qcard > .btn, :root[data-theme="clean"] .qcard > .input, :root[data-theme="clean"] .qcard > textarea { margin-top: 18px; } :root[data-theme="clean"] .qcard > .same-last { margin-top: 20px; } /* Answers: full-width hairline rows. The picked one is a solid blue band with a tick. */ :root[data-theme="clean"] .qcard > .choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "num lab x seat tick" "num sub x seat tick"; align-items: center; column-gap: 0; width: auto; min-height: 76px; margin: 0 calc(-1 * var(--cl-gut)); padding: 12px var(--cl-gut); background: transparent; border: 0; border-bottom: 1px solid var(--cl-rule); border-radius: 0; box-shadow: none; font: 600 19px/1.25 var(--f-body); color: var(--cl-ink); transition: background-color 180ms cubic-bezier(.22, .7, .2, 1); } :root[data-theme="clean"] .cl-pass .travel-line { margin-top: 12px; color: var(--cl-ink-2); font-size: 15px; } :root[data-theme="clean"] .qcard > h1 ~ .choice:first-of-type, :root[data-theme="clean"] .qcard > p + .choice { margin-top: 22px; border-top: 1px solid var(--cl-rule); } :root[data-theme="clean"] .qcard > .choice .cl-lab { grid-area: lab; } :root[data-theme="clean"] .qcard > .choice .cl-sub { grid-area: sub; margin-top: 2px; font: 400 16px/1.3 var(--f-body); color: var(--cl-ink-2); } :root[data-theme="clean"] .qcard > .choice .cl-x { grid-area: x; margin-left: 10px; } :root[data-theme="clean"] .qcard > .choice .cl-bname { display: inline; font-weight: 400; color: var(--cl-ink-2); } :root[data-theme="clean"] .qcard > .choice.on .cl-bname { color: var(--cl-on-blue-2); } :root[data-theme="clean"] .qcard > .choice .cl-num { display: block; grid-area: num; width: 44px; font: 800 52px/.85 var(--cl-archivo); font-stretch: 75%; } :root[data-theme="clean"] .qcard > .choice .cl-seat { display: block; grid-area: seat; margin: 0 16px 0 10px; color: var(--cl-ink-2); } :root[data-theme="clean"] .qcard > .choice .cl-seat svg { display: block; } :root[data-theme="clean"] .qcard > .choice .cl-tick { display: grid; place-items: center; grid-area: tick; width: 30px; height: 30px; margin-left: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cl-rule-2); color: transparent; } :root[data-theme="clean"] .qcard > .choice .cl-tick svg { width: 18px; height: 18px; } :root[data-theme="clean"] .qcard > .choice.on { background: var(--cl-blue); color: #FFFFFF; border-color: var(--cl-blue); } :root[data-theme="clean"] .qcard > .choice.on .cl-sub, :root[data-theme="clean"] .qcard > .choice.on .cl-seat { color: var(--cl-on-blue-2); } :root[data-theme="clean"] .qcard > .choice.on .cl-tick { background: #FFFFFF; color: var(--cl-blue); box-shadow: none; } :root[data-theme="clean"] .qcard > .choice:active { transform: none; background: rgba(11, 16, 32, .04); } :root[data-theme="clean"] .qcard > .choice.on:active { background: var(--cl-blue-press); } :root[data-theme="clean"] .qcard .toggle { border-top: 1px solid var(--cl-rule); } :root[data-theme="clean"] .card-actions { background: linear-gradient(to top, #FFFFFF 70%, rgba(255, 255, 255, 0)); } /* ===================== Plan: the e-ticket ===================== */ :root[data-theme="clean"] .look-clean.look-plan { margin: calc(-1 * var(--gap)) calc(-1 * var(--cl-gut)) 0; } /* The e-ticket says these itself, right under the ticket. */ :root[data-theme="clean"] .screen:has(> .look-clean.look-plan) > .you-row, :root[data-theme="clean"] .screen:has(> .look-clean.look-plan) > .plan-travel, :root[data-theme="clean"] .screen:has(> .look-clean.look-plan) > .grid-2 > a[download] { display: none; } :root[data-theme="clean"] .screen:has(> .look-clean.look-plan) > .grid-2 { grid-template-columns: 1fr; } :root[data-theme="clean"] .cl-ticket { padding: 6px var(--cl-gut) 22px; --cl-route-bg: var(--cl-blue); } :root[data-theme="clean"] .cl-ticket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } :root[data-theme="clean"] .cl-posted { display: inline-flex; align-items: center; gap: 12px; font: 600 20px/1.2 var(--f-body); } :root[data-theme="clean"] .cl-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; color: var(--cl-blue); } :root[data-theme="clean"] .cl-dot .cl-i svg { width: 18px; height: 18px; } :root[data-theme="clean"] .cl-booking { text-align: right; } :root[data-theme="clean"] .cl-booking b { display: block; font: 700 22px/1.1 var(--cl-archivo); font-stretch: 100%; letter-spacing: .02em; } :root[data-theme="clean"] .cl-ticket-when { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 12px; margin-top: 20px; } :root[data-theme="clean"] .cl-bigday { font: 800 172px/.78 var(--cl-archivo); font-stretch: 62%; letter-spacing: -0.04em; font-variant-numeric: lining-nums; } :root[data-theme="clean"] .cl-ticket-right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; } :root[data-theme="clean"] .cl-wd { font: 700 28px/1 var(--cl-archivo); font-stretch: 85%; color: var(--cl-on-blue-2); } :root[data-theme="clean"] .cl-mo { font: 800 66px/.9 var(--cl-archivo); font-stretch: 75%; letter-spacing: -0.02em; } :root[data-theme="clean"] .cl-time { font: 800 54px/.95 var(--cl-archivo); font-stretch: 75%; letter-spacing: -0.02em; white-space: nowrap; } :root[data-theme="clean"] .cl-until { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin: 22px 0 0; font: 500 19px/1.3 var(--f-body); color: var(--cl-on-blue-2); } :root[data-theme="clean"] .cl-until b { font: 800 32px/1 var(--cl-archivo); font-stretch: 85%; color: #FFFFFF; } :root[data-theme="clean"] .cl-until .cl-i { align-self: center; } /* The tear line across the band: a row of holes with a notch at each edge. */ :root[data-theme="clean"] .cl-ticket-stub { position: relative; margin-top: 24px; padding-top: 26px; } :root[data-theme="clean"] .cl-ticket-stub::before { content: ""; position: absolute; top: 0; left: calc(-1 * var(--cl-gut)); right: calc(-1 * var(--cl-gut)); height: 12px; background: radial-gradient(circle at 0 50%, #FFFFFF 12px, transparent 12.5px) 0 50% / 26px 26px no-repeat, radial-gradient(circle at 100% 50%, #FFFFFF 12px, transparent 12.5px) 100% 50% / 26px 26px no-repeat, radial-gradient(circle, #FFFFFF 4px, transparent 4.5px) 20px 50% / 14px 12px repeat-x; } :root[data-theme="clean"] .cl-ticket .cl-route { border-bottom-color: var(--cl-on-blue-rule); } :root[data-theme="clean"] .cl-ticket .cl-route-line { color: #FFFFFF; } :root[data-theme="clean"] .cl-ticket .cl-code.tbd { color: var(--cl-on-blue-2); } :root[data-theme="clean"] .cl-ticket .cl-fields > div { box-shadow: inset 1px 0 0 var(--cl-on-blue-rule); } :root[data-theme="clean"] .cl-ticket .cl-fields > div:nth-child(odd) { box-shadow: none; } :root[data-theme="clean"] .cl-ticket .cl-fields > div:nth-child(n+3) { border-top-color: var(--cl-on-blue-rule); } :root[data-theme="clean"] .cl-ticket .cl-fv.tbd { color: var(--cl-on-blue-2); } :root[data-theme="clean"] .cl-ticket .cl-fs { color: var(--cl-on-blue-2); } /* Under the ticket, on paper: the tie dice, then the things you do from here. */ :root[data-theme="clean"] .cl-ticket-ties { padding: 6px var(--cl-gut) 0; } :root[data-theme="clean"] .cl-ticket-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px var(--cl-gut) 0; } :root[data-theme="clean"] .cl-ticket-actions:empty { display: none; } :root[data-theme="clean"] .cl-ticket-actions > .btn { width: 100%; padding: 0 10px; gap: 8px; font-size: 15px; white-space: nowrap; } :root[data-theme="clean"] .cl-ticket-actions > .btn.primary, :root[data-theme="clean"] .cl-ticket-actions > .btn.quiet, :root[data-theme="clean"] .cl-ticket-actions > .btn:only-child, :root[data-theme="clean"] .cl-ticket-actions > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; } :root[data-theme="clean"] .cl-ticket-actions .cl-i svg { width: 20px; height: 20px; } :root[data-theme="clean"] .cl-mine { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 16px var(--cl-gut) 0; font: 600 16px/1.3 var(--f-body); } /* ===================== Card: the passport photo page ===================== */ :root[data-theme="clean"] .look-clean.look-card { margin: calc(-1 * var(--gap)) calc(-1 * var(--cl-gut)) 0; } :root[data-theme="clean"] .cl-ppage { padding: 20px var(--cl-gut) 24px; background-color: var(--cl-page); background-repeat: repeat-x; background-position: 0 80px; background-size: 390px 300px; } :root[data-theme="clean"] .cl-pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } :root[data-theme="clean"] .cl-pp-title { display: block; font: 800 30px/1 var(--cl-archivo); font-stretch: 112%; letter-spacing: .01em; color: var(--cl-blue); } :root[data-theme="clean"] .cl-pp-head .cl-lbl { margin-top: 6px; } :root[data-theme="clean"] .cl-pp-no { text-align: right; } :root[data-theme="clean"] .cl-pp-no b { display: block; margin-top: 4px; font: 700 22px/1.1 var(--cl-archivo); font-stretch: 85%; } :root[data-theme="clean"] .cl-pp-main { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; margin-top: 18px; } :root[data-theme="clean"] .cl-photo { display: flex; align-items: flex-end; justify-content: center; width: 120px; height: 150px; overflow: hidden; box-shadow: 0 0 0 1px var(--cl-rule-2); } :root[data-theme="clean"] .cl-photo svg { display: block; width: 108px; height: auto; image-rendering: pixelated; } :root[data-theme="clean"] .cl-photo img { width: 100%; height: 100%; object-fit: cover; } :root[data-theme="clean"] .cl-pp-id { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; } :root[data-theme="clean"] .cl-pp-id dd { margin: 2px 0 0; font: 600 18px/1.2 var(--f-body); overflow-wrap: anywhere; } :root[data-theme="clean"] .cl-pp-id dd.cl-pp-name { font: 800 clamp(38px, 15vw, 64px)/.9 var(--cl-archivo); font-stretch: 75%; letter-spacing: -0.02em; } :root[data-theme="clean"] .cl-pp-fields { margin-top: 18px; border-top: 1px solid var(--cl-rule); grid-template-columns: 1fr 1fr; } :root[data-theme="clean"] .cl-pp-fields dd { margin-top: 4px; font: 600 18px/1.25 var(--f-body); } :root[data-theme="clean"] .cl-pp-motto { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--cl-rule); } :root[data-theme="clean"] .cl-pp-motto p { margin: 4px 0 0; font: italic 500 21px/1.3 var(--f-body); } /* The machine-readable lines along the bottom, like the real thing. */ :root[data-theme="clean"] .cl-mrz { padding: 14px var(--cl-gut); border-bottom: 1px solid var(--cl-rule); overflow: hidden; } :root[data-theme="clean"] .cl-mrz code { display: block; font: 500 14px/1.7 'JetBrains Mono', ui-monospace, Consolas, monospace; letter-spacing: .04em; white-space: nowrap; color: var(--cl-ink); } @media (prefers-reduced-motion: reduce) { :root[data-theme="clean"] .qcard > .choice { transition: none; } }