html.sb-lock, body.sb-lock { margin: 0; height: 100%; overflow: hidden; background: #f0eeea; color: #1c1a17; } body.sb-lock > nav, body.sb-lock > footer, body.sb-lock .w-nav, body.sb-lock .navbar, body.sb-lock .footer, body.sb-lock .page-wrapper > nav { display: none !important; } body.sb-lock .page-wrapper, body.sb-lock .main-wrapper, body.sb-lock main { height: 100%; min-height: 0; padding: 0 !important; margin: 0 !important; background: #f0eeea !important; } body.sb-lock .section, body.sb-lock .w-richtext { padding: 0 !important; margin: 0 !important; background: transparent !important; } .sbp, .sbp-on, .sbp-modal { --ink: #1c1a17; --muted: #5c5a56; --faint: #8a8884; --line: #e0deda; --cream: #f0eeea; --plat: #ebe6de; --white: #fff; --ok: #2f5d3a; --warn: #8a5a1a; --sans: Geist, "Avenir Next", sans-serif; font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; } .sbp *, .sbp-on *, .sbp-modal * { box-sizing: border-box; } .sbp { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-columns: 248px minmax(0, 1fr); background: var(--cream); } .sbp-side { display: flex; flex-direction: column; padding: 28px 18px 20px; background: var(--white); border-right: 1px solid var(--line); } .sbp-mark { display: block; padding: 4px 10px 0; color: var(--ink); text-decoration: none; } .sbp-mark img { display: block; height: 28px; width: auto; } .sbp-mark small { display: block; margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .sbp-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 36px; } .sbp-nav .nv { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 12px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-align: left; cursor: pointer; } .sbp-nav .nv-k { width: 22px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--faint); } .sbp-nav .nv:hover { color: var(--ink); background: var(--cream); } .sbp-nav .nv.on { background: var(--ink); color: var(--cream); } .sbp-nav .nv.on .nv-k { color: rgba(240, 238, 234, 0.55); } .sbp-plan { margin-top: auto; padding: 16px 12px 4px; border-top: 1px solid var(--line); } .sb-mem-k, .sb-eyebrow, .sb-panel-sub, .sb-fine, .sb-st-k, .sb-j-date, .sb-idx, .sb-go, .sb-brief-k { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .sb-mem-v { margin-top: 6px; font-size: 18px; font-weight: 500; letter-spacing: -0.03em; } .sb-mem-e { margin-top: 4px; font-size: 13px; color: var(--muted); word-break: break-all; } .sbp-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .sbp-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px 48px 6px; } #sbp-title, h1#sbp-title { margin: 0 !important; padding: 0 !important; font-family: var(--sans) !important; font-weight: 600 !important; font-size: 11px !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--muted) !important; max-height: none !important; overflow: visible !important; } #sbp-title:empty::before { content: attr(data-view); } .sbp-who { text-align: right; font-size: 14px; font-weight: 500; color: var(--ink); } #sbp-date { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .sbp-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 48px 64px; } .sb-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: 28px; align-items: stretch; margin: 18px 0 28px; } .sb-display { margin: 10px 0 16px; max-width: 11ch; font-weight: 500; font-size: 56px; line-height: 0.95; letter-spacing: -2.8px; } .sb-display.sm { font-size: 44px; line-height: 50px; letter-spacing: -2.2px; max-width: 16ch; } .sb-lede, .sb-copy { margin: 0; max-width: 42ch; font-size: 18px; line-height: 28px; letter-spacing: -0.32px; color: var(--muted); } .sb-copy.light, .sb-fine.light { color: rgba(240, 238, 234, 0.72); } .sb-copy strong { color: var(--ink); font-weight: 600; } .sb-hero-fig, .sb-panel, .sb-track, .sb-card-mem { background: var(--white); border: 1px solid var(--line); border-radius: 20px; } .sb-hero-fig { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; min-height: 280px; } .sb-ring-wrap { display: flex; align-items: center; gap: 18px; } .sb-ring { width: 120px; height: 120px; flex-shrink: 0; } .sb-ring-track { fill: none; stroke: var(--plat); stroke-width: 8; } .sb-ring-val { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 70px 70px; } .sb-ring-num { font-size: 44px; font-weight: 500; line-height: 0.9; letter-spacing: -2.2px; } .sb-ring-num span { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .sb-hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .sb-hero-meta span, .sb-due span, .sb-compare span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .sb-hero-meta strong { font-size: 18px; font-weight: 500; letter-spacing: -0.03em; } .sb-empty-path { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 160px; } .sb-empty-path span { flex: 1; height: 1px; background: var(--line); position: relative; } .sb-empty-path span::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 99px; background: var(--plat); box-shadow: inset 0 0 0 1.5px var(--ink); } .sb-panel { padding: 28px; margin-bottom: 16px; } .sb-panel-dark { background: var(--ink); border-color: var(--ink); color: var(--cream); } .sb-panel-dark .sb-eyebrow, .sb-panel-dark .sb-fine { color: rgba(240, 238, 234, 0.55); } .sb-panel-h { margin-bottom: 8px; } .sb-serif { margin: 8px 0 12px; font-weight: 500; font-size: 32px; line-height: 40px; letter-spacing: -0.64px; } .sb-serif.sm { font-size: 20px; line-height: 28px; letter-spacing: -1.08px; } .sb-quote { margin: 12px 0 14px; font-size: 32px; font-weight: 500; line-height: 40px; letter-spacing: -0.64px; } .sb-fine { margin: 18px 0 0; line-height: 1.5; } .sb-route { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr; align-items: stretch; gap: 0; margin-top: 18px; } .sb-station { position: relative; padding: 4px 8px 8px 0; } .sb-station.now .sb-st-a { color: var(--ink); } .sb-station.done .sb-dot { background: var(--ink); } .sb-station.now .sb-dot { background: var(--ink); box-shadow: 0 0 0 6px rgba(28, 26, 23, 0.08); } .sb-station.wait .sb-dot { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); } .sb-dot { display: block; width: 9px; height: 9px; margin-bottom: 22px; border-radius: 99px; } .sb-st-a { margin-top: 12px; font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: -0.8px; } .sb-st-d { margin-top: 8px; font-size: 13px; color: var(--muted); } .sb-leg { align-self: start; margin-top: 8px; height: 1px; background: var(--line); } .sb-leg.done { background: var(--ink); } .sb-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; } .sb-status { display: inline-flex; margin: 10px 0 10px; padding: 5px 10px; border-radius: 999px; background: var(--plat); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .sb-status.ok { color: var(--ok); background: #dce8df; } .sb-status.warn { color: var(--warn); background: #efe4d4; } .sb-actions, .sb-row, .sbp-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .sbp-btn, .sbp-on .sbp-btn, .sbp-modal .sbp-btn, #n1 { display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 0 !important; border-radius: 100px; background: var(--ink) !important; color: #fff !important; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none !important; cursor: pointer; visibility: visible !important; opacity: 1 !important; width: auto; } .sbp-btn.ghost { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px #bbb6ab; } .sbp-btn.light { background: var(--cream) !important; color: var(--ink) !important; } .sbp-btn.full, #n1 { width: 100%; } .sbp-btn:hover { opacity: 0.9; } .sb-pagehead { margin: 8px 0 28px; } .sb-pagehead.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .sb-tracks { display: flex; flex-direction: column; gap: 16px; } .sb-track { padding: 28px; } .sb-track-h { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; } .sb-pct { font-size: 56px; font-weight: 500; line-height: 0.85; letter-spacing: -2.8px; } .sb-pct span { font-size: 24px; color: var(--faint); } .sb-track-foot { margin-top: 18px; } .sb-ms { margin: 16px 0 0; padding: 0; list-style: none; } .sb-ms li { border-top: 1px solid var(--line); } .sb-ms label { display: flex; gap: 12px; align-items: center; padding: 14px 0; cursor: pointer; } .sb-ms input { width: 16px; height: 16px; accent-color: var(--ink); } .sb-ms strong { display: block; font-weight: 600; } .sb-ms em { display: block; margin-top: 3px; font-style: normal; color: var(--muted); font-size: 13px; } .sb-ms li.done { opacity: 0.5; } .sbp-field { margin: 0 0 16px; } .sbp-field.slim { max-width: 240px; } .sbp-field label, .sbp label, .sbp-on label, .sbp-modal label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); } .sbp-field input, .sbp-field select, .sbp-field textarea, .sbp input, .sbp select, .sbp textarea, .sbp-on input, .sbp-on select, .sbp-on textarea, .sbp-modal input, .sbp-modal select, .sbp-modal textarea { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--white); color: var(--ink); font: inherit; font-size: 16px; outline: none; } .sbp select, .sbp-on select, .sbp-modal select, .sbp-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231c1a17' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; } .sbp input:focus, .sbp select:focus, .sbp textarea:focus, .sbp-on input:focus, .sbp-on select:focus, .sbp-modal input:focus, .sbp-modal select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28, 26, 23, 0.08); } .sb-fields, .sb-compare, .sb-due { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sb-compare { margin-top: 18px; } .sb-compare > div, .sb-due > div, .sb-result { padding: 18px; border-radius: 16px; background: var(--cream); border: 1px solid var(--line); } .sb-compare strong, .sb-due strong, .sb-result strong, .sb-big { font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -0.8px; } .sb-compare em, .sb-due em, .sb-result span { display: block; margin-top: 8px; font-style: normal; color: var(--muted); font-size: 14px; line-height: 1.45; } .sb-result { margin-top: 16px; } .sb-journal { margin: 8px 0 0; padding: 0; list-style: none; } .sb-journal li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); } .sb-index { margin-top: 8px; } .sb-index-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; } .sb-index-row strong { display: block; font-size: 24px; font-weight: 500; letter-spacing: -0.6px; } .sb-index-row em { display: block; margin-top: 4px; font-style: normal; color: var(--muted); } .sb-index-row:hover strong { text-decoration: underline; text-underline-offset: 4px; } .sb-mem-rule { height: 1px; margin: 16px 0; background: var(--line); } .sbp-chk { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--ink); cursor: pointer; } .sbp-chk input { width: 18px; height: 18px; min-height: 0; margin-top: 3px; accent-color: var(--ink); } .sb-empty { padding: 36px; } .sbp-modal, .sbp-on { position: fixed; inset: 0; z-index: 80; display: none; } .sbp-modal.show, .sbp-on.show { display: block; } .sbp-modal { background: rgba(28, 26, 23, 0.42); } .sbp-sheet { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(640px, calc(100% - 32px)); max-height: min(86vh, 820px); overflow: auto; border-radius: 20px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(28, 26, 23, 0.16); } .sbp-sheet-body { padding: 32px 32px 8px; } .sbp-sheet-act { padding: 8px 32px 28px; background: var(--white); } .sb-brief { min-height: 100%; display: grid; grid-template-columns: 0.9fr 1.1fr; background: var(--cream); } .sb-brief-side { display: flex; flex-direction: column; justify-content: space-between; padding: 40px; background: var(--ink); color: var(--cream); } .sb-brief-mark { font-size: 28px; font-weight: 500; letter-spacing: -0.8px; } .sb-brief-side p { max-width: 10ch; margin: 0; font-size: 56px; font-weight: 500; line-height: 0.95; letter-spacing: -2.8px; color: var(--cream); } .sb-steps { display: flex; gap: 8px; } .sb-steps i { width: 28px; height: 3px; border-radius: 99px; background: rgba(240, 238, 234, 0.22); } .sb-steps i.on { background: var(--cream); } .sb-brief-main { display: flex; flex-direction: column; justify-content: center; padding: 56px 72px; overflow: auto; background: var(--cream); } .sb-brief-main .sb-display { max-width: 14ch; } .sb-brief-main .sb-brief-k { color: var(--muted); } .sb-brief-actions { display: flex; gap: 10px; margin-top: 32px; max-width: 280px; } .sb-brief-actions .sbp-btn { width: auto; } html.sb-briefing .sbp-side, html.sb-briefing .sbp-bar { visibility: hidden; } .sbp-bar { align-items: center; padding-top: 22px; padding-bottom: 0; } .sb-path { margin: 4px 0 8px; } .sb-path-rail { position: relative; height: 3px; margin: 0 6px 26px; background: #ddd8d0; border-radius: 99px; } .sb-path-fill { height: 100%; width: calc(var(--p) * 1%); max-width: 100%; background: var(--ink); border-radius: 99px; animation: sb-draw .7s ease; } .sb-path-you { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 99px; background: var(--cream); box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 6px rgba(28, 26, 23, 0.08); } .sb-path-stations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .sb-path .sb-station { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; } .sb-path .sb-station:hover .sb-st-a { transform: translateY(-1px); } .sb-path .sb-station.done { opacity: 0.42; } .sb-path .sb-station.done .sb-dot, .sb-path .sb-station.now .sb-dot { background: var(--ink); } .sb-path .sb-station.now .sb-dot { box-shadow: 0 0 0 6px rgba(28, 26, 23, 0.1); animation: sb-pulse 1.8s ease infinite; } .sb-path .sb-station.wait .sb-dot { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); } .sb-path .sb-dot { margin-bottom: 16px; } .sb-path-note { margin: 6px 0 28px; font-size: 13px; color: var(--faint); } .sb-open { margin: 6px 0 18px; animation: sb-rise .45s ease; } .sb-open-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .sb-open-pct { font-size: 72px; font-weight: 500; line-height: 0.8; letter-spacing: -3.2px; } .sb-open-pct span { font-size: 28px; color: var(--faint); } .sb-instrument { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; margin: 6px 0 26px; } .sb-pace-block, .sb-now-block, .sb-stand { padding: 28px; border-radius: 24px; } .sb-pace-block, .sb-stand { background: var(--white); border: 1px solid var(--line); } .sb-pace-num { margin: 8px 0 10px; font-size: 64px; font-weight: 500; line-height: 0.9; letter-spacing: -3px; } .sb-pace-block p, .sb-now-meta, .sb-now-stats { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; } .sb-now-block { background: var(--ink); color: var(--cream); } .sb-now-block .sb-eyebrow { color: rgba(240, 238, 234, 0.55); } .sb-now-title { margin: 10px 0 8px; font-size: 36px; font-weight: 500; line-height: 1.05; letter-spacing: -1.2px; } .sb-now-title.light { color: var(--cream); } .sb-now-meta { color: rgba(240, 238, 234, 0.72); } .sb-now-stats { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; color: rgba(240, 238, 234, 0.62); font-size: 13px; } .sb-split-late { margin-top: 4px; } .sb-ring-stage { display: flex; align-items: center; gap: 16px; padding: 28px; border-radius: 24px; background: var(--white); border: 1px solid var(--line); } .sb-index-row { transition: padding .2s ease; } .sb-index-row:hover { padding-left: 8px; } @keyframes sb-draw { from { width: 0; } } @keyframes sb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes sb-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(28, 26, 23, 0.08); } 50% { box-shadow: 0 0 0 10px rgba(28, 26, 23, 0.04); } } @media (max-width: 980px) { .sbp { grid-template-columns: 1fr; } .sbp-side { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; overflow: auto; border-right: 0; border-bottom: 1px solid var(--line); } .sbp-mark small, .sbp-plan { display: none; } .sbp-mark img { height: 22px; } .sbp-nav { flex-direction: row; margin: 0; } .sbp-nav .nv { white-space: nowrap; padding: 8px 12px; } .sbp-bar, .sbp-body { padding-left: 18px; padding-right: 18px; } #sbp-title, h1#sbp-title { font-size: 11px !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; } .sb-display { font-size: 40px; letter-spacing: -1.6px; } .sb-hero, .sb-split, .sb-fields, .sb-compare, .sb-due, .sb-brief, .sb-journal li, .sb-index-row, .sb-route { grid-template-columns: 1fr; } .sb-leg { display: none; } .sb-route { gap: 16px; } .sb-brief-side { display: none; } .sb-brief-main { padding: 28px 20px; } .sb-instrument, .sb-path-stations, .sb-open-top { grid-template-columns: 1fr; display: grid; } .sb-open-pct { font-size: 48px; } .sb-pace-num { font-size: 44px; } }