/* ============================================================ Stravo — Manifest Console Design direction: the page reads like the routing table it actually configures. Paper-and-ink surface, monospace data, no gradients, no glow, no rounded-blob cards. ============================================================ */ :root{ /* --- surface --- */ --paper: #EDEFE6; --surface: #FFFFFF; --line: #CDD2C2; --line-strong: #AEB59D; /* --- ink --- */ --ink: #17201A; --ink-soft: #4C564C; --ink-faint: #7B8577; /* --- signal (active / verified) --- */ --signal: #2F6F4F; --signal-soft: #E1EBE1; --signal-ink: #1D4A34; /* --- premium (paid tier) --- */ --premium: #B5531A; --premium-soft: #F4E4D3; --premium-ink: #7E3B10; /* --- danger --- */ --danger: #A63B33; --danger-soft: #F5E1DE; --radius-sm: 4px; --radius-md: 8px; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; --display: "Space Grotesk", var(--sans); } /* Dark palette: follows system preference by default, or the explicit data-theme override set by the toggle. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper: #171A14; --surface: #1E2219; --line: #33392A; --line-strong: #454C39; --ink: #E7ECDD; --ink-soft: #AAB39B; --ink-faint: #767F6B; --signal: #6FBF95; --signal-soft: #1F3327; --signal-ink: #BFE8D0; --premium: #E08A46; --premium-soft: #3A2718; --premium-ink: #F2C08F; --danger: #E27D74; --danger-soft: #3A211D; } } :root[data-theme="dark"]{ --paper: #171A14; --surface: #1E2219; --line: #33392A; --line-strong: #454C39; --ink: #E7ECDD; --ink-soft: #AAB39B; --ink-faint: #767F6B; --signal: #6FBF95; --signal-soft: #1F3327; --signal-ink: #BFE8D0; --premium: #E08A46; --premium-soft: #3A2718; --premium-ink: #F2C08F; --danger: #E27D74; --danger-soft: #3A211D; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background-color .2s ease, color .2s ease; } a{ color:inherit; } button, input{ font:inherit; color:inherit; } ::selection{ background:var(--signal-soft); color:var(--signal-ink); } .shell{ max-width:920px; margin:0 auto; padding:48px 24px 96px; } /* ---------------- masthead ---------------- */ .masthead{ position:relative; display:flex; align-items:flex-start; gap:20px; padding-bottom:32px; padding-right:52px; border-bottom:1px solid var(--line); margin-bottom:40px; } .masthead img{ width:52px; height:52px; object-fit:contain; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:8px; } .masthead-text{ flex:1; min-width:0; } .eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:8px; } .masthead h1{ font-family:var(--display); font-size:clamp(1.9rem,4.4vw,2.6rem); font-weight:700; letter-spacing:-0.01em; margin-bottom:10px; } .masthead p{ color:var(--ink-soft); max-width:56ch; font-size:.98rem; } .theme-toggle{ position:absolute; top:0; right:0; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .15s ease, background-color .2s ease, color .2s ease; } .theme-toggle:hover{ border-color:var(--line-strong); } .theme-toggle:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; } .theme-toggle svg{ width:18px; height:18px; } /* ---------------- support / donate page ---------------- */ .shell-narrow{ max-width:560px; } .amount-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:20px 22px; border-bottom:1px solid var(--line); } .amount-chip{ border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:10px 6px; border-radius:var(--radius-sm); font-family:var(--mono); font-size:.85rem; font-weight:600; cursor:pointer; transition:border-color .15s ease, background-color .15s ease, color .15s ease; } .amount-chip:hover{ border-color:var(--line-strong); } .amount-chip.selected{ border-color:var(--signal); background:var(--signal-soft); color:var(--signal-ink); } .amount-chip:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; } .support-console .prompt-row:last-of-type{ border-bottom:none; } .support-actions{ padding:18px 22px 0; } .support-submit{ display:block; width:100%; text-align:center; border:none; cursor:pointer; font-size:.9rem; } /* ---------------- already-paid mini form (support page) ---------------- */ .already-paid{ border-top:1px solid var(--line); background:var(--paper); } .already-paid-divider{ display:flex; align-items:center; gap:10px; padding:20px 22px 0; } .already-paid-divider span{ font-family:var(--display); font-size:.85rem; font-weight:600; color:var(--ink); } .already-paid-divider::after{ content:""; flex:1; height:1px; background:var(--line); } .already-paid-hint{ margin:6px 22px 18px; padding-left:6px; border-left:2px solid var(--line); color:var(--ink-faint); font-weight:400; opacity:.85; font-size:.85rem; max-width:44ch; } .already-paid-hint a{ color:var(--signal-ink); text-decoration:underline; text-underline-offset:2px; opacity:1; } .already-paid-hint a:hover{ color:var(--signal); } .already-paid-form{ border-bottom:none; padding-top:0; } .already-paid-form button{ opacity:.82; transition:opacity .15s ease, background .15s ease; } .already-paid-form button:hover{ opacity:1; } /* Inherits the standard prompt-row input/button treatment (ink-filled button, same height and radius as Verify on the configure page) so the two flows read as one pattern, just dialed back slightly so it doesn't outweigh the primary Support Stravo action above it. */ /* ---------------- section labels ---------------- */ .section-label{ display:flex; align-items:baseline; gap:10px; margin-bottom:16px; } .section-label .tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } .section-label h2{ font-family:var(--display); font-size:1.3rem; font-weight:600; } .section-label .rule{ flex:1; height:1px; background:var(--line); } section{ margin-bottom:52px; } .hidden{ display:none !important; } /* ---------------- verify console ---------------- */ .console{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); overflow:hidden; } .console-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:20px 22px; border-bottom:1px solid var(--line); } .console-top p{ color:var(--ink-soft); font-size:.9rem; max-width:46ch; } .upgrade-link{ font-family:var(--mono); font-size:.82rem; font-weight:600; white-space:nowrap; padding:10px 16px; border-radius:var(--radius-sm); background:var(--premium); color:#fff; transition:background .15s ease; } .upgrade-link:hover{ background:var(--premium-ink); } .upgrade-link:focus-visible{ outline:2px solid var(--premium-ink); outline-offset:2px; } .premium-promo{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .promo-text{ font-family:var(--mono); font-size:.8rem; color:var(--signal-ink); } .upgrade-link.subscribe-again{ background:var(--signal); } .upgrade-link.subscribe-again:hover{ background:var(--signal-ink); } .upgrade-link.subscribe-again:focus-visible{ outline:2px solid var(--signal-ink); outline-offset:2px; } .prompt-row{ display:flex; align-items:stretch; gap:0; padding:18px 22px; border-bottom:1px solid var(--line); } .prompt-glyph{ font-family:var(--mono); color:var(--signal); font-size:.95rem; padding:12px 10px 12px 0; user-select:none; } .prompt-row input{ flex:1; min-width:0; border:1px solid var(--line); border-right:none; border-radius:var(--radius-sm) 0 0 var(--radius-sm); background:var(--paper); padding:12px 14px; font-family:var(--mono); font-size:.9rem; outline:none; transition:border-color .15s ease; } .prompt-row input::placeholder{ color:var(--ink-faint); } .prompt-row input:focus{ border-color:var(--signal); z-index:1; } .prompt-row button{ border:1px solid var(--ink); background:var(--ink); color:var(--paper); padding:0 20px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-weight:600; font-size:.85rem; cursor:pointer; transition:background .15s ease; } .prompt-row button:hover{ background:#2b362e; } .prompt-row button:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; } .verify-status{ display:flex; align-items:center; gap:9px; padding:14px 22px; font-family:var(--mono); font-size:.82rem; color:var(--ink-faint); } .verify-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex-shrink:0; } .verify-status.success{ color:var(--signal-ink); } .verify-status.success .dot{ background:var(--signal); } .verify-status.error{ color:var(--danger); } .verify-status.error .dot{ background:var(--danger); } /* ---------------- premium result panel ---------------- */ .premium-card{ border-top:1px solid var(--line); background:var(--signal-soft); padding:24px 22px; } .premium-card.hidden{ display:none; } .premium-status-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; } .premium-status-row .status-chip{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; background:var(--signal); color:#fff; padding:5px 10px; border-radius:var(--radius-sm); } .premium-status-row .expiry{ font-family:var(--mono); font-size:.8rem; color:var(--signal-ink); } .manifest-row{ display:flex; gap:0; margin-bottom:18px; } .manifest-row code{ flex:1; min-width:0; overflow-x:auto; white-space:nowrap; background:var(--surface); border:1px solid var(--line); border-right:none; border-radius:var(--radius-sm) 0 0 var(--radius-sm); padding:11px 14px; font-family:var(--mono); font-size:.82rem; color:var(--ink); } .manifest-row button{ border:1px solid var(--ink); background:transparent; color:var(--ink); padding:0 16px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:.78rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .15s ease, color .15s ease; } .manifest-row button:hover{ background:var(--ink); color:var(--signal-soft); } .manifest-row button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } .premium-install{ display:inline-block; background:var(--ink); color:var(--paper); font-weight:600; font-size:.85rem; padding:11px 20px; border-radius:var(--radius-sm); transition:background .15s ease; } .premium-install:hover{ background:#2b362e; } .premium-install:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } /* ---------------- tier comparison ---------------- */ .tiers{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); } .tier-row{ display:grid; grid-template-columns:1fr 1fr; } .tier-col{ padding:20px 22px; } .tier-col + .tier-col{ border-left:1px solid var(--line); } .tier-col.premium{ background:var(--premium-soft); } .tier-col h3{ font-family:var(--display); font-size:1.05rem; margin-bottom:14px; display:flex; align-items:center; gap:8px; } .tier-col.premium h3::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--premium); display:inline-block; } .tier-col ul{ list-style:none; } .tier-col li{ position:relative; padding-left:18px; margin-bottom:9px; font-size:.88rem; color:var(--ink-soft); } .tier-col li::before{ content:"–"; position:absolute; left:0; color:var(--ink-faint); } .tier-col.premium li::before{ color:var(--premium); content:"+"; } /* ---------------- routing table (profiles) ---------------- */ .routes{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); } .route-row{ display:grid; grid-template-columns:minmax(140px,1fr) 2fr auto; gap:18px; align-items:center; padding:18px 22px; } .route-row + .route-row{ border-top:1px solid var(--line); } .route-name{ display:flex; flex-direction:column; gap:6px; } .route-name strong{ font-family:var(--display); font-size:1.02rem; font-weight:600; } .route-name .badge{ align-self:flex-start; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); padding:2px 7px; border-radius:var(--radius-sm); } .route-name .badge.premium{ border-color:var(--premium); color:var(--premium-ink); background:var(--premium-soft); } .route-detail p{ color:var(--ink-soft); font-size:.88rem; margin-bottom:8px; } .route-detail .spec{ font-family:var(--mono); font-size:.78rem; color:var(--ink-faint); } .route-detail .spec span{ color:var(--signal-ink); } .route-actions{ display:flex; gap:8px; flex-shrink:0; } .route-actions .install{ font-size:.8rem; font-weight:600; padding:9px 14px; border-radius:var(--radius-sm); background:var(--ink); color:var(--paper); white-space:nowrap; transition:background .15s ease; } .route-actions .install:hover{ background:#2b362e; } .route-actions .install:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } .route-actions .copy{ font-size:.8rem; font-weight:600; padding:9px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:transparent; cursor:pointer; white-space:nowrap; transition:border-color .15s ease, color .15s ease; } .route-actions .copy:hover{ border-color:var(--ink); } .route-actions .copy:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } /* ---------------- FAQ ---------------- */ .faq-list{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); } .faq-item{ border-top:1px solid var(--line); } .faq-item:first-child{ border-top:none; } .faq-item summary{ list-style:none; cursor:pointer; padding:16px 22px; font-family:var(--display); font-size:.95rem; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:12px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; font-family:var(--mono); font-weight:600; color:var(--ink-faint); flex-shrink:0; } .faq-item[open] summary::after{ content:"–"; } .faq-item summary:focus-visible{ outline:2px solid var(--signal); outline-offset:-2px; } .faq-item p{ padding:0 22px 18px; color:var(--ink-soft); font-size:.88rem; max-width:66ch; } /* ---------------- 404 page ---------------- */ .not-found-console .prompt-row{ border-bottom:none; } .not-found-path{ flex:1; padding:12px 0; font-family:var(--mono); font-size:.9rem; color:var(--danger); overflow-wrap:anywhere; } .not-found-home{ display:block; width:100%; text-align:center; } /* ---------------- custom link generator ---------------- */ .link-console .console-top p{ max-width:60ch; } .link-field{ padding:18px 22px; border-bottom:1px solid var(--line); } .link-field-label-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .link-field-label{ font-family:var(--display); font-size:.88rem; font-weight:600; display:block; margin-bottom:10px; } .link-field-label-row .link-field-label{ margin-bottom:0; } .link-field-hint{ font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); } .link-field-label-meta{ display:flex; align-items:center; gap:8px; } .dub-count{ font-family:var(--mono); font-size:.76rem; color:var(--ink-faint); border:1px solid var(--line); border-radius:var(--radius-sm); padding:2px 8px; } /* token field — a small shared control system so the dropdown and the text input are pixel-identical, instead of stretching the button-paired prompt-row component to fit a buttonless field. */ .field-control{ display:block; box-sizing:border-box; width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); padding:11px 14px; font-family:var(--mono); font-size:.85rem; outline:none; transition:border-color .15s ease; } .field-control::placeholder{ color:var(--ink-faint); } .field-control:hover{ border-color:var(--line-strong); } .field-control:focus{ border-color:var(--signal); } .field-control:focus-visible{ outline:2px solid var(--signal); outline-offset:1px; } .field-select-wrap{ position:relative; margin-bottom:10px; } .field-select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; padding-right:38px; } .field-select-chevron{ position:absolute; top:50%; right:14px; transform:translateY(-50%); color:var(--ink-faint); font-size:.72rem; pointer-events:none; } .token-hint{ margin-top:10px; font-family:var(--sans); font-size:.78rem; color:var(--ink-faint); opacity:.85; } .token-hint code{ font-family:var(--mono); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1px 5px; font-size:.75rem; color:var(--ink-soft); } .token-hint.premium-hint{ color:var(--signal-ink); opacity:1; } /* selected dub chips */ .lang-selected{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; min-height:34px; align-items:center; } .lang-empty{ font-size:.85rem; color:var(--ink-faint); } .lang-empty.hidden{ display:none; } .lang-chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--signal); background:var(--signal-soft); color:var(--signal-ink); border-radius:var(--radius-sm); padding:5px 6px 5px 10px; font-family:var(--mono); font-size:.8rem; } .lang-chip-flag{ font-size:.9rem; } .lang-chip-remove{ border:none; background:transparent; color:var(--signal-ink); font-size:.95rem; line-height:1; cursor:pointer; padding:2px 4px; border-radius:var(--radius-sm); } .lang-chip-remove:hover{ background:var(--signal); color:#fff; } .lang-chip-remove:focus-visible{ outline:2px solid var(--signal-ink); outline-offset:1px; } /* dropdown picker */ .lang-picker{ position:relative; } .lang-picker-toggle{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:var(--radius-sm); padding:11px 14px; font-family:var(--mono); font-size:.85rem; cursor:pointer; transition:border-color .15s ease; } .lang-picker-toggle:hover{ border-color:var(--line-strong); } .lang-picker-toggle:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; } .lang-picker-toggle .chevron{ color:var(--ink-faint); transition:transform .15s ease; } .lang-picker-toggle.open .chevron{ transform:rotate(180deg); } .lang-picker-panel{ position:absolute; z-index:5; top:calc(100% + 6px); left:0; right:0; max-height:260px; overflow-y:auto; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); box-shadow:0 6px 18px rgba(0,0,0,.12); } .lang-picker-panel.hidden{ display:none; } .lang-option{ display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer; border-bottom:1px solid var(--line); } .lang-option:last-child{ border-bottom:none; } .lang-option:hover{ background:var(--paper); } .lang-option input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--signal); flex-shrink:0; } .lang-option-label{ display:flex; align-items:center; gap:8px; font-size:.86rem; flex:1; min-width:0; } .lang-option-flag{ font-size:.95rem; flex-shrink:0; } .lang-option-code{ margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--ink-faint); } .lang-option-disabled{ opacity:.4; cursor:not-allowed; } .lang-option-disabled:hover{ background:transparent; } /* display toggle */ .display-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; } .display-option{ border:none; background:var(--paper); color:var(--ink-soft); padding:9px 18px; font-family:var(--mono); font-size:.82rem; font-weight:600; cursor:pointer; transition:background .15s ease, color .15s ease; } .display-option + .display-option{ border-left:1px solid var(--line); } .display-option:hover{ color:var(--ink); } .display-option.selected{ background:var(--signal); color:#fff; } /* additional parameters */ .param-rows{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; } .param-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:8px; } .param-row input{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); padding:9px 12px; font-family:var(--mono); font-size:.82rem; outline:none; transition:border-color .15s ease; } .param-row input:focus{ border-color:var(--signal); } .param-remove{ border:1px solid var(--line); background:transparent; color:var(--ink-faint); border-radius:var(--radius-sm); width:34px; cursor:pointer; font-size:.95rem; } .param-remove:hover{ border-color:var(--danger); color:var(--danger); } .param-add{ border:none; background:transparent; color:var(--signal-ink); font-family:var(--mono); font-size:.8rem; font-weight:600; cursor:pointer; padding:4px 0; } .param-add:hover{ text-decoration:underline; } .param-warning{ margin-top:10px; font-size:.78rem; color:var(--premium-ink); opacity:.9; max-width:52ch; } /* generated link result actions */ .link-result-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .verify-link-btn{ border:1px solid var(--ink); background:transparent; color:var(--ink); padding:11px 18px; border-radius:var(--radius-sm); font-size:.82rem; font-weight:600; cursor:pointer; transition:background .15s ease, color .15s ease; } .verify-link-btn:hover{ background:var(--ink); color:var(--paper); } .verify-link-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } @media (max-width:640px){ .lang-picker-toggle{ font-size:.82rem; } .param-row{ grid-template-columns:1fr; gap:6px; padding-bottom:4px; border-bottom:1px dashed var(--line); } .param-row:last-child{ border-bottom:none; } .param-remove{ justify-self:end; width:auto; padding:6px 16px; } } /* ---------------- footer ---------------- */ .foot{ margin-top:56px; padding-top:20px; border-top:1px solid var(--line); font-family:var(--mono); font-size:.76rem; color:var(--ink-faint); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; } .foot .brand-link{ color:var(--ink-faint); text-decoration:none; } .foot .brand-link:hover{ color:var(--ink-soft); text-decoration:underline; } .foot .telegram-link{ display:inline-flex; align-items:center; gap:6px; margin-right:auto; } .foot .telegram-link svg{ flex-shrink:0; color:var(--ink-faint); } .foot .telegram-link:hover svg{ color:var(--signal); } /* ---------------- responsive ---------------- */ @media (max-width:640px){ .shell{ padding:32px 16px 72px; } .masthead{ flex-direction:column; } .console-top{ flex-direction:column; align-items:flex-start; } .upgrade-link{ width:100%; text-align:center; } .prompt-row{ flex-direction:column; } .prompt-row input{ border-radius:var(--radius-sm); border-right:1px solid var(--line); margin-bottom:8px; } .prompt-row button{ border-radius:var(--radius-sm); } .prompt-glyph{ display:none; } .manifest-row{ flex-direction:column; } .manifest-row code{ border-radius:var(--radius-sm); border-right:1px solid var(--line); margin-bottom:8px; } .manifest-row button{ border-radius:var(--radius-sm); } .tier-row{ grid-template-columns:1fr; } .tier-col + .tier-col{ border-left:none; border-top:1px solid var(--line); } .route-row{ grid-template-columns:1fr; } .route-actions{ width:100%; } .route-actions .install, .route-actions .copy{ flex:1; text-align:center; } .foot{ flex-direction:column; align-items:flex-start; } .foot .telegram-link{ margin-right:0; } } @media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }