/* Webfonts — jarvis design system. The @import that used to live here has moved to app/views/shared/_webfonts.html.erb as a in the . An @import is invisible to the browser's preload scanner, so the font request could not start until application.css had been fetched and parsed — a serialized chain that delayed first paint on every page. Nothing else belongs in this file today. For a fully self-hosted build, download Newsreader + Hanken Grotesk into app/assets/fonts and declare local @font-face rules here (then drop the and the preconnects). */ /* --------------------------------------------------------------- jarvis — Color tokens Warm, calm, editorial. Paper surfaces on a warm canvas, deep warm ink for text, a muted forest green as the single primary, with terracotta and provider-purple as sparing accents. All base values are literal; semantic aliases reference the base. --------------------------------------------------------------- */ :root { /* --- Neutrals (warm) --- */ --canvas: #efece4; /* app background */ --canvas-hi: #f5f2ec; /* top of page gradient */ --canvas-lo: #eae6dd; /* bottom of page gradient */ --paper: #ffffff; /* card / sheet surface */ --paper-warm: #faf8f3; /* subtle raised strip, table headers */ --ink: #26221b; /* primary text */ --ink-soft: #6f6a5e; /* secondary text */ --ink-faint: #9a9384; /* tertiary / meta text */ --ink-ghost: #a49d8d; /* placeholders, monospace hints */ --border: #e6e1d6; /* default hairline */ --border-soft: #ece8df; /* inner dividers */ --border-strong: #d9d3c6; /* hover border */ /* --- Primary: forest green --- */ --primary: #2f6d5b; --primary-press: #28604f; --primary-tint: #eef4f1; /* green wash background */ --primary-tint-2: #f4f8f6; --primary-border: #cfe0d9; /* green hairline */ --primary-chip: #dcebe5; /* filled green chip bg */ /* --- Accent: terracotta (used sparingly for links/callouts) --- */ --accent: #b45b3e; --accent-soft: #b0623c; /* --- Danger: destructive actions (Danger Zone only — not the same as accent) --- */ --danger: #b0553a; --danger-press: #8f3f28; --danger-tint: #fdf6f2; --danger-border: #e8d3ca; --danger-disabled: #ecdcd4; --danger-disabled-text: #c4a99d; /* --- Provider: muted purple (AI model badges only) --- */ --provider: #6a4c86; --provider-tint: #efe9f2; /* --- Placeholder hatch (image / chart / map slots) --- */ --hatch-a: #f6f3ec; --hatch-b: #f1ede4; /* --- Focus ring --- */ --ring: rgba(47,109,91,.35); /* ============ Semantic aliases ============ */ --surface-page: var(--canvas); --surface-card: var(--paper); --surface-raised: var(--paper-warm); --text-body: var(--ink); --text-muted: var(--ink-soft); --text-faint: var(--ink-faint); --text-placeholder:var(--ink-ghost); --text-link: var(--accent); --border-default: var(--border); --border-divider: var(--border-soft); --action-primary: var(--primary); --action-primary-press:var(--primary-press); --focus-ring: var(--ring); --success: var(--primary); --warning: var(--accent); } /* --------------------------------------------------------------- jarvis — Typography tokens Two families: Newsreader (serif) carries editorial headlines and any "document" numerals; Hanken Grotesk (sans) carries all UI. Monospace only for placeholder / data hints. --------------------------------------------------------------- */ :root { --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Reading scale. Stays 1 outside the reading surface — see .reading-scope at the bottom of this file. */ --reading-scale: 1; /* Type scale. Baselines are a notch up from the original 10–15px set: this is a reading app and 13px body was under the 16px web norm. */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-ui: 14px; /* default control text */ --text-md: 15px; /* body */ --text-lg: 17px; /* long-form prose */ --display-sm: 22px; --display-md: 25px; --display-lg: 28px; --display-xl: 31px; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed:1.6; /* Letter spacing */ --tracking-label: .5px; /* small caps labels */ --tracking-tight: .2px; } /* --------------------------------------------------------------- Reading size (users.reading_scale). `.reading-scope` marks the one subtree the setting applies to: the brief body and the delivery templates. Everything outside it — nav, settings, admin, onboarding, and the .btn/.card sizes in components.css — keeps the baseline above, which is what the Settings copy promises. The scope has to redeclare the tokens rather than just setting --reading-scale, because a custom property's var() is substituted where it is DECLARED, not where it is used: tokens declared at :root would resolve against :root's scale and inherit down already-frozen. Declaring both the scale and the tokens on the same element is what makes them track. is rendered server-side so the first paint is already at the chosen size, with no flash-and-resize. --------------------------------------------------------------- */ :root[data-reading-scale="large"] .reading-scope { --reading-scale: 1.15; } :root[data-reading-scale="xlarge"] .reading-scope { --reading-scale: 1.32; } .reading-scope { --text-2xs: calc(11px * var(--reading-scale)); --text-xs: calc(12px * var(--reading-scale)); --text-sm: calc(13px * var(--reading-scale)); --text-ui: calc(14px * var(--reading-scale)); --text-md: calc(15px * var(--reading-scale)); --text-lg: calc(17px * var(--reading-scale)); --display-sm: calc(22px * var(--reading-scale)); --display-md: calc(25px * var(--reading-scale)); --display-lg: calc(28px * var(--reading-scale)); --display-xl: calc(31px * var(--reading-scale)); } /* --------------------------------------------------------------- jarvis — Spacing, radius, shadow & motion tokens --------------------------------------------------------------- */ :root { /* Spacing scale (4px base, plus a couple of editorial in-betweens) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 26px; --space-7: 34px; --space-8: 44px; /* Page gutter — the side padding on a full-page frame (.home, .hist, .rt, .acct-page, .sup, .adm-scroll). Phones drop to 16px: at 32px a side, a 390px screen spends 27% of its width on the frame plus the nested card and row padding inside it, and this is a reading app. */ --page-gutter: 32px; --page-top: 38px; /* Radii */ --radius-xs: 7px; --radius-sm: 9px; --radius-md: 11px; /* inputs, buttons */ --radius-lg: 14px; /* cards */ --radius-xl: 16px; /* feature cards */ --radius-2xl: 20px; /* sheets, modals */ --radius-pill:999px; /* Elevation — warm-tinted, low and soft */ --shadow-sm: 0 2px 6px rgba(50,42,28,.06); --shadow-card: 0 10px 34px rgba(50,42,28,.08); --shadow-pop: 0 16px 48px rgba(50,42,28,.11); --shadow-primary: 0 3px 10px rgba(47,109,91,.25); /* Borders */ --hairline: 1.5px; /* Placeholder hatch (reusable background) */ --hatch: repeating-linear-gradient(45deg, var(--hatch-a), var(--hatch-a) 8px, var(--hatch-b) 8px, var(--hatch-b) 16px); /* Motion */ --ease-out: cubic-bezier(.2,.6,.2,1); --dur-fast: .15s; --dur-mid: .3s; --dur-rise: .45s; } @media (max-width: 720px) { :root { --page-gutter: 16px; --page-top: 22px; } } /* --------------------------------------------------------------- jarvis — Base reset, page background & shared keyframes. --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; /* The app scrolls inside .app-main, not the document. Without this, hitting the end of that inner scroller chains the gesture out to the document, which drags the whole shell — and the top bar with it — before rubber- banding back. Also suppresses pull-to-refresh. */ overscroll-behavior: none; } body { font-family: var(--font-sans); color: var(--text-body); background: var(--surface-page); } a { color: inherit; text-decoration: none; } .jarvis-page { min-height: 100vh; min-height: 100dvh; width: 100%; background: radial-gradient(120% 120% at 50% 0%, var(--canvas-hi) 0%, var(--canvas-lo) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-5); } .jarvis-hidden { display: none !important; } @keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .5; } } @keyframes shimmer { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } } @keyframes spin { to { transform: rotate(360deg); } } .jarvis-rise { animation: riseIn var(--dur-rise) ease both; } /* --------------------------------------------------------------- jarvis — Core & form component classes Ported from the Claude Design handoff's Button/Card/Chip/Badge/ ProgressBar/BrandMark/Input/Textarea/Checkbox reference components. --------------------------------------------------------------- */ /* ============ Button ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--weight-semibold); line-height: 1; cursor: pointer; border: 1.5px solid transparent; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); padding: 13px 16px; font-size: var(--text-md); border-radius: var(--radius-md); } .btn--block { display: flex; width: 100%; } .btn--sm { padding: 7px 12px; font-size: var(--text-ui); border-radius: var(--radius-sm); } .btn--lg { padding: 14px 18px; font-size: 14.5px; border-radius: var(--radius-md); } .btn--primary { background: var(--action-primary); color: #fff; box-shadow: var(--shadow-primary); } .btn--primary:hover { background: var(--action-primary-press); } .btn--primary:active { background: var(--action-primary-press); } .btn--ghost { background: var(--surface-card); color: var(--primary); border-color: var(--primary-border); } .btn--ghost:hover { background: var(--primary-tint-2); } .btn--subtle { background: var(--surface-raised); color: var(--text-body); border-color: var(--border-default); } .btn--subtle:hover { background: var(--paper-warm); border-color: var(--border-strong); } .btn--danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn--danger:hover { background: var(--danger-press); border-color: var(--danger-press); } .btn--danger:disabled { background: var(--danger-disabled); border-color: var(--danger-disabled); color: var(--danger-disabled-text); cursor: default; } /* ============ Card ============ */ .card { background: var(--surface-card); border: var(--hairline) solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); overflow: hidden; } .card--pad-0 { padding: 0; } .card--flat { box-shadow: none; } .card--card { box-shadow: var(--shadow-card); } .card--pop { box-shadow: var(--shadow-pop); } .card--interactive { cursor: pointer; transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast); } .card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--primary-border); } .card--interactive:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); border-color: var(--primary-border); } /* ============ Chip ============ */ .chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-xs); padding: 5px 10px; border-radius: var(--radius-pill); white-space: nowrap; background: var(--hatch-b); color: var(--ink-soft); } .chip[data-clickable] { cursor: pointer; } .chip--green { background: var(--primary-tint); color: var(--primary); } .chip--purple { background: var(--provider-tint); color: var(--provider); } .chip--terracotta { background: rgba(180,91,62,.10); color: var(--accent); } .chip--selected { background: var(--primary); color: #fff; } /* ============ Badge ============ */ .badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-2xs); letter-spacing: .3px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--hatch-b); color: var(--ink-soft); } .badge--green { background: var(--primary-tint); color: var(--primary); } .badge--solid { background: var(--primary); color: #fff; } .badge--terracotta { background: rgba(180,91,62,.12); color: var(--accent); } /* ============ ProgressBar ============ */ .progress { height: 8px; border-radius: var(--radius-pill); background: var(--canvas); overflow: hidden; } .progress__fill { height: 100%; width: 0%; border-radius: inherit; background: var(--primary); transition: width .12s linear; } /* ============ BrandMark ============ */ .brandmark { display: inline-flex; align-items: center; gap: 10px; } .brandmark__glyph { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-primary); flex: none; overflow: hidden; } .brandmark__glyph span { color: #fff; font-size: 13px; } .brandmark__glyph img { width: 100%; height: 100%; display: block; object-fit: cover; } .brandmark__name { font-family: var(--font-display); font-size: var(--display-sm); font-weight: var(--weight-semibold); color: var(--ink); letter-spacing: var(--tracking-tight); } .brandmark--sm .brandmark__glyph { width: 24px; height: 24px; border-radius: 7px; } .brandmark--sm .brandmark__glyph span { font-size: 10px; } .brandmark--sm .brandmark__name { font-size: 17px; } .brandmark--lg .brandmark__glyph { width: 38px; height: 38px; border-radius: 11px; } .brandmark--lg .brandmark__glyph span { font-size: 16px; } .brandmark--lg .brandmark__name { font-size: 26px; } /* ============ Passkey prompt banner ============ */ .passkey-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; width: 100%; max-width: 640px; margin: var(--space-4) auto 0; padding: 12px 16px; background: var(--primary-tint); border: var(--hairline) solid var(--primary-border); border-radius: var(--radius-md); } .passkey-banner__msg { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-soft); } .passkey-banner__msg strong { color: var(--ink); font-weight: var(--weight-semibold); } .passkey-banner__icon { font-size: 17px; flex-shrink: 0; } .passkey-banner__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .passkey-banner__error { flex-basis: 100%; color: var(--accent); font-size: var(--text-xs); } /* Full-width variant: a notice bar that sits directly under the reader topbar, sharing its horizontal padding so the copy lines up with the topbar chips. */ .passkey-banner--bar { max-width: none; width: 100%; margin: 0; padding: 12px var(--space-5); border: 0; border-bottom: var(--hairline) solid var(--primary-border); border-radius: 0; } /* ============ Form field label ============ */ .field { display: block; } .field__label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); margin-bottom: 7px; } /* ============ Input / Textarea ============ */ .input, .textarea { width: 100%; border: var(--hairline) solid var(--border-default); border-radius: var(--radius-md); font-family: var(--font-sans); color: var(--text-body); background: var(--surface-card); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .input { padding: 12px 13px; font-size: var(--text-md); } .textarea { padding: 11px 13px; min-height: 76px; font-size: var(--text-ui); line-height: var(--leading-normal); color: var(--ink); resize: none; } .input:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } /* ============ Checkbox ============ */ .checkbox-row { display: inline-flex; align-items: center; gap: 10px; } .checkbox { width: 20px; height: 20px; flex: none; border-radius: var(--radius-xs); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; background: transparent; border: 1.5px solid var(--border-strong); transition: background var(--dur-fast), border-color var(--dur-fast); } .checkbox.is-checked { background: var(--primary); color: #fff; border-color: var(--primary); } .checkbox-row__label { font-family: var(--font-sans); font-size: var(--text-ui); color: var(--ink); } /* --------------------------------------------------------------- jarvis — Onboarding flow screens Sign in -> magic link -> setup -> running -> delivery. --------------------------------------------------------------- */ .ob-brand { margin-bottom: 26px; } .ob-screen { width: 100%; } .ob-screen--sm { max-width: 412px; } .ob-screen--setup{ max-width: 500px; } .ob-screen--run { max-width: 480px; } .ob-screen--delivery{ max-width: 640px; } /* ---- Sign in ---- */ .ob-signin-card { padding: 34px 30px; } .ob-title { font-family: var(--font-display); font-weight: var(--weight-medium); line-height: var(--leading-tight); margin: 0 0 8px; color: var(--ink); } .ob-title--signin { font-size: 28px; } .ob-subtitle { margin: 0 0 var(--space-6); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-muted); } .ob-google-btn { gap: 11px; background: var(--surface-card); border-color: var(--border-default); color: var(--ink); } .ob-google-btn:hover { background: var(--paper-warm); border-color: var(--border-strong); } .ob-google-dot { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); flex: none; } .ob-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; } .ob-divider__line { flex: 1; height: 1px; background: var(--border-soft); } .ob-divider__label { font-size: var(--text-xs); color: var(--ink-ghost); letter-spacing: var(--tracking-label); } .ob-passkey { text-align: center; margin-top: 16px; } .ob-passkey span { font-size: var(--text-md); color: var(--ink-faint); cursor: pointer; } .ob-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; } .ob-trust span { font-size: var(--text-sm); color: var(--ink-faint); } .ob-trust strong { color: var(--primary); font-weight: var(--weight-semibold); } /* ---- Magic link sent ---- */ .ob-magic-card { padding: 36px 30px; text-align: center; } .ob-magic-icon { width: 56px; height: 56px; border-radius: var(--radius-xl); background: var(--primary-tint); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 24px; } .ob-magic-copy { margin: 0 0 6px; font-size: var(--text-md); line-height: 1.55; color: var(--text-muted); } .ob-magic-copy strong { color: var(--ink); } .ob-magic-expiry { margin: 0 0 22px; font-size: 12.5px; color: var(--ink-faint); } .ob-magic-links { margin-top: 24px; padding-top: 18px; border-top: var(--hairline) solid var(--primary-border); display: flex; align-items: center; justify-content: center; gap: 12px; } /* Resend is a real POST (button_to), "use a different email" is a link — both render as matching, chrome-free text links so the row reads as one unit. */ .ob-linkbtn-form { margin: 0; display: inline-flex; } .ob-linkbtn { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1; font-weight: var(--weight-semibold); color: var(--primary); cursor: pointer; text-decoration: none; transition: opacity .15s ease; } .ob-linkbtn:hover { text-decoration: underline; } .ob-linkbtn--muted { color: var(--ink-faint); font-weight: var(--weight-medium); } .ob-magic-dot { color: var(--ink-ghost); font-size: var(--text-sm); user-select: none; } /* ---- Setup ---- */ .ob-setup-header { text-align: center; margin-bottom: 20px; } .ob-title--setup { font-size: 27px; } .ob-setup-card { padding: 22px; } .ob-field { margin-bottom: 16px; } .ob-setup-divider { height: 1px; background: var(--border-soft); margin: 0 0 16px; } .ob-row { display: flex; justify-content: space-between; align-items: center; } .ob-row--label { font-size: var(--text-ui); font-weight: var(--weight-semibold); color: var(--ink); } .ob-row-runs { margin-bottom: 13px; } .ob-row-model { margin-bottom: 16px; } .ob-row-actions { display: flex; align-items: center; gap: 8px; } .ob-link { font-size: var(--text-sm); color: var(--accent); font-weight: var(--weight-semibold); cursor: pointer; } .ob-calendar-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 13px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); margin-bottom: 18px; } .ob-calendar-row__title { font-size: var(--text-ui); font-weight: var(--weight-semibold); color: var(--ink); } .ob-calendar-row__hint { font-size: 11.5px; color: var(--ink-faint); } .ob-calendar-row__actions { display: flex; align-items: center; gap: 9px; } .ob-calendar-connect { font: var(--weight-semibold) var(--text-xs) var(--font-sans); padding: 6px 11px; border-radius: var(--radius-pill); background: var(--surface-card); border: 1.5px solid var(--primary-border); color: var(--primary); cursor: pointer; } .ob-calendar-skip { font-size: var(--text-sm); color: var(--ink-faint); cursor: pointer; } .ob-back { text-align: center; margin-top: 16px; } .ob-back span { font-size: var(--text-ui); color: var(--ink-faint); cursor: pointer; } /* ---- Running ---- */ .ob-run-card { padding: 30px 28px; } .ob-run-head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; } .ob-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--primary-chip); border-top-color: var(--primary); display: inline-block; animation: spin .8s linear infinite; flex: none; } .ob-title--run { font-size: 23px; margin: 0; } .ob-run-hint { margin: 0 0 var(--space-5) 37px; font-size: var(--text-ui); color: var(--ink-faint); } .ob-progress { margin-bottom: 22px; } .ob-steps { margin-bottom: 0; } .ob-step { display: flex; align-items: center; gap: var(--space-3); padding: 7px 0; } .ob-step__mark { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; } .ob-step__mark--done { background: var(--primary); color: #fff; font-size: var(--text-xs); } .ob-step__mark--active { border: 2px solid var(--primary); } .ob-step__mark--pending { border: 2px solid var(--border-default); } .ob-step__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: pulseDot 1s ease-in-out infinite; } .ob-step__label { font-size: 13.5px; color: #3a352c; } .ob-shimmer { margin-top: var(--space-5); height: 64px; border-radius: var(--radius-md); background: linear-gradient(100deg, var(--paper-warm) 30%, var(--canvas-lo) 50%, var(--paper-warm) 70%); background-size: 720px 100%; animation: shimmer 1.4s linear infinite; } /* ---- First delivery ---- */ .ob-delivery-card { padding: 0; } .ob-delivery-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: var(--hairline) solid var(--border-soft); background: var(--paper-warm); } .ob-delivery-head__chips { display: flex; align-items: center; gap: 8px; } .ob-delivery-head__version { font-size: var(--text-sm); color: var(--ink-faint); } .ob-celebrate { display: flex; align-items: center; gap: 9px; padding: 11px 20px; background: var(--primary-tint); border-bottom: var(--hairline) solid var(--primary-border); } .ob-celebrate__icon { font-size: 15px; } .ob-celebrate__text { font-size: var(--text-ui); color: var(--primary); font-weight: var(--weight-semibold); } .ob-delivery-body { padding: 26px 30px; } .ob-delivery-meta { font-size: var(--text-sm); color: var(--ink-faint); margin-bottom: var(--space-2); } .ob-title--delivery { font-size: 27px; line-height: 1.2; margin: 0 0 var(--space-4); } .ob-delivery-footer { display: flex; gap: var(--space-2); padding: 16px 20px; border-top: var(--hairline) solid var(--border-soft); background: var(--paper-warm); } .ob-delivery-footer .btn { flex: 1; } .ob-below { text-align: center; margin-top: 16px; } .ob-below span { font-size: 12.5px; color: var(--ink-faint); } /* -- Delivery: shared bits -- */ .ob-stat-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); } .ob-stat { flex: 1; border: var(--hairline) solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-3); } .ob-stat__label { font-size: var(--text-xs); color: var(--ink-faint); margin-bottom: 4px; } .ob-stat__value { font-family: var(--font-display); font-size: var(--display-md); } .ob-stat__value--up { color: var(--primary); } .ob-table { border: var(--hairline) solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); } .ob-table__head, .ob-table__row { display: flex; gap: var(--space-3); padding: 9px 14px; align-items: center; } .ob-table__head { background: var(--paper-warm); font-size: var(--text-xs); color: var(--ink-faint); font-weight: var(--weight-semibold); } .ob-table__row { border-top: var(--hairline) solid var(--border-soft); font-size: 13.5px; padding: 11px 14px; } .ob-table__col--name { flex: 1; } .ob-table__col--sets { width: 70px; color: var(--text-muted); } .ob-table__col--rpe { width: 44px; color: var(--text-muted); } .ob-body-copy { font-size: 14.5px; line-height: var(--leading-relaxed); color: #3a352c; margin: 0 0 var(--space-4); } .ob-body-copy--muted { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0; } /* -- Nutrition -- */ .ob-macro-row { display: flex; gap: 14px; margin-bottom: var(--space-4); } .ob-macro { flex: 1; } .ob-macro__label { font-size: var(--text-xs); color: var(--ink-faint); margin-bottom: 5px; } .ob-macro__track { height: 7px; border-radius: 5px; background: var(--canvas); } .ob-macro__fill { width: 0; height: 100%; border-radius: 5px; } .ob-macro__fill--protein { background: var(--primary); } .ob-macro__fill--carbs { background: var(--accent); } .ob-macro__fill--fat { background: var(--provider); } .ob-meal-grid { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-4); } .ob-meal-grid__head { font-size: var(--text-xs); color: var(--ink-faint); text-align: center; } .ob-meal-grid__day { font-size: var(--text-sm); color: var(--ink-faint); align-self: center; } .ob-meal { border: var(--hairline) solid var(--border-soft); border-radius: var(--radius-sm); padding: var(--space-2); } .ob-meal__name { font-size: 12.5px; font-weight: var(--weight-semibold); } .ob-meal__cal { font-size: var(--text-xs); color: var(--ink-faint); } .ob-callout { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: var(--hairline) solid var(--primary-border); border-radius: var(--radius-md); background: var(--primary-tint-2); } .ob-callout span:last-child { font-size: var(--text-ui); color: var(--primary); font-weight: var(--weight-semibold); } /* -- Brief -- */ .ob-listing-row { display: flex; gap: 14px; margin-bottom: var(--space-4); } .ob-listing { flex: 1; border: var(--hairline) solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; } .ob-listing__photo { height: 78px; background: var(--hatch); display: flex; align-items: center; justify-content: center; font: var(--weight-semibold) var(--text-2xs) var(--font-mono); color: var(--ink-ghost); } .ob-listing__body { padding: 11px; } .ob-listing__price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .ob-listing__price { font-family: var(--font-display); font-size: 17px; } .ob-listing__meta { font-size: var(--text-sm); color: var(--text-muted); } .ob-listing__sub { font-size: var(--text-sm); color: var(--ink-faint); margin: 4px 0 9px; } .ob-listing__actions { display: flex; gap: 6px; } .ob-listing__save, .ob-listing__hide { font: var(--weight-semibold) var(--text-xs) var(--font-sans); padding: 5px 10px; border-radius: var(--radius-sm); } .ob-listing__save { background: var(--primary); color: #fff; } .ob-listing__hide { background: var(--hatch-b); color: var(--text-muted); } .ob-map-placeholder { height: 90px; border-radius: var(--radius-md); background: var(--hatch); display: flex; align-items: center; justify-content: center; font: var(--weight-semibold) var(--text-2xs) var(--font-mono); color: var(--ink-ghost); } /* -- Finance -- */ /* Desktop: widen the auth / onboarding cards and add generous padding so the flow reads as desktop-native instead of a phone screen floating in space. Single-field cards stay comfortably narrow. */ @media (min-width: 768px) { .ob-screen--sm { max-width: 480px; } .ob-signin-card { padding: 44px 40px; } .ob-magic-card { padding: 44px 40px; } } /* --------------------------------------------------------------- jarvis — Home reader + timeline (1c: Journal & Reader) --------------------------------------------------------------- */ .reader-shell { display: flex; min-height: 100vh; min-height: 100dvh; width: 100%; background: var(--surface-page); } /* ============ Sidebar / timeline rail ============ */ .reader-sidebar { width: 260px; flex: none; display: flex; flex-direction: column; border-right: var(--hairline) solid var(--border-soft); background: var(--surface-raised); height: 100vh; height: 100dvh; position: sticky; top: 0; } .reader-sidebar__brand { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: var(--hairline) solid var(--border-soft); } .reader-sidebar__body { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .reader-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); } .reader-timeline-group__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); color: var(--text-faint); margin: var(--space-3) 0 4px; text-transform: uppercase; } .reader-timeline-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--text-body); } .reader-timeline-row:hover { background: var(--paper); } .reader-timeline-row.is-active { background: var(--primary-tint); } .reader-timeline-row__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-faint); } .reader-timeline-row__dot--success { background: var(--primary); } .reader-timeline-row__dot--failed { background: var(--accent); } .reader-timeline-row__dot--pending { background: var(--provider); } .reader-timeline-row__text { display: flex; flex-direction: column; min-width: 0; } .reader-timeline-row__title { font-size: var(--text-ui); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reader-timeline-row__meta { font-size: var(--text-xs); color: var(--text-faint); } .reader-timeline-empty { color: var(--text-faint); font-size: var(--text-ui); padding: var(--space-2); } .reader-sidebar__footer { padding: var(--space-3); border-top: var(--hairline) solid var(--border-soft); display: flex; flex-direction: column; gap: var(--space-2); } .reader-sidebar__links { display: flex; gap: 8px; justify-content: center; } /* ============ Main reader pane ============ */ .reader-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Sticky delivery top bar (design: Delivery.dc.html main top bar). */ .reader-topbar { height: 56px; flex: none; display: flex; align-items: center; gap: 9px; padding: 0 22px; border-bottom: 1.5px solid #e6e1d6; background: rgba(245, 242, 236, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; overflow-x: auto; } .reader-topbar__name { font-family: 'Newsreader', serif; font-weight: 600; font-size: 13.5px; white-space: nowrap; flex: none; } .reader-topbar__spacer { flex: 1; } .rtop-chip { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; background: #f1ede4; color: #6f6a5e; white-space: nowrap; flex: none; } .rtop-chip--web { background: #eef4f1; color: #2f6d5b; } .ver-nav { display: flex; align-items: center; background: #efece4; border: 1.5px solid #e6e1d6; border-radius: 999px; padding: 2px; flex: none; } .ver-nav a, .ver-nav span { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; color: #9a9384; text-decoration: none; white-space: nowrap; } .ver-nav a:hover { color: #2f6d5b; text-decoration: none; } .ver-nav .is-current { background: #2f6d5b; color: #fff; } .ver-nav .is-disabled { opacity: .4; } .rtop-btn { font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; padding: 8px 13px; border-radius: 10px; cursor: pointer; flex: none; text-decoration: none; } .rtop-btn--ghost { border: 1.5px solid #e6e1d6; background: #fff; color: #26221b; } .rtop-btn--ghost:hover { background: #faf8f3; text-decoration: none; } .rtop-btn--primary { border: none; background: #2f6d5b; color: #fff; box-shadow: 0 3px 10px rgba(47, 109, 91, .25); } .rtop-btn--primary:hover { background: #28604f; text-decoration: none; } .rtop-btn--primary:disabled, .rtop-btn--primary[disabled] { background: #9db8ae; box-shadow: none; cursor: default; pointer-events: none; } .rtop-btn--primary form, .rtop-btn--primary { margin: 0; } /* Reopen button — only visible in focus mode. */ .reader-topbar__reopen { width: 34px; height: 34px; flex: none; border-radius: 9px; border: 1.5px solid #e6e1d6; background: #fff; display: none; align-items: center; justify-content: center; color: #6f6a5e; cursor: pointer; } .reader-topbar__reopen:hover { background: #faf8f3; } .reader-topbar__reopen svg { width: 17px; height: 17px; } .reader-shell--focus .reader-topbar__reopen { display: flex; } .reader-shell--focus .reader-sidebar, .reader-shell--focus .ctx { display: none; } /* Mobile-only "Versions" pill — opens .ctx as a slide-in drawer instead of the desktop's persistent column. Hidden on desktop; see the mobile block near the end of this file for its @media (max-width: 720px) treatment. */ .reader-topbar__versions { display: none; align-items: center; gap: 5px; font: 600 11.5px "Hanken Grotesk", system-ui, sans-serif; color: #2f6d5b; padding: 6px 10px; border-radius: 9px; border: 1.5px solid #cfe1d9; background: #eef3f1; cursor: pointer; flex: none; } .reader-topbar__versions svg { width: 15px; height: 15px; } .ctx-scrim { display: none; } .chip--disabled { opacity: .4; cursor: default; } /* ============ Context panel (per-routine runs) ============ */ .ctx { width: 260px; flex: none; height: 100vh; height: 100dvh; position: sticky; top: 0; display: flex; flex-direction: column; border-right: 1.5px solid #ece8df; background: #faf8f2; } .ctx__head { height: 56px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 16px; border-bottom: 1.5px solid #ece8df; } .ctx__name { flex: 1; min-width: 0; font-family: 'Newsreader', serif; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx__focus { width: 30px; height: 30px; flex: none; border: none; background: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #9a9384; cursor: pointer; } .ctx__focus:hover { background: #efece4; } .ctx__focus svg { width: 17px; height: 17px; } /* RUNS filter row */ .ctx__runs-filter { flex: none; display: flex; align-items: center; gap: 6px; padding: 12px 14px 8px; } .ctx__runs-label { font-size: 10px; letter-spacing: .5px; color: #a49d8d; font-weight: 600; margin-right: 2px; } .ctx__filter { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 5px 11px; border-radius: 999px; background: #f1ede4; color: #6f6a5e; } .ctx__filter.is-active { background: #2f6d5b; color: #fff; } .ctx__body { flex: 1; overflow: auto; padding: 4px 12px 12px; } /* Routine card wrapping the version timeline */ .ctx-card { border: 1.5px solid #cfe0d9; border-radius: 12px; background: #fff; padding: 10px 10px 9px; } .ctx-card__head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; } .ctx-card__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #2f6d5b; } .ctx-card__name { font-weight: 600; font-size: 13px; color: #26221b; } .ctx-card__meta { font-size: 11px; color: #9a9384; margin-left: 15px; } .ctx-runs { margin: 11px 0 2px 4px; border-left: 1.5px solid #ece8df; padding-left: 12px; display: flex; flex-direction: column; gap: 2px; } .ctx-run { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: inherit; } .ctx-run:hover { background: #efece4; text-decoration: none; } .ctx-run.is-active { background: #eef3f1; } .ctx-run__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9a9384; } .ctx-run__dot--success { background: #2f6d5b; } .ctx-run__dot--failed { background: #b45b3e; } .ctx-run__dot--pending { background: #c8a24b; } .ctx-run__label { flex: 1; font-weight: 600; font-size: 12px; color: #26221b; } .ctx-run.is-active .ctx-run__label { color: #2f6d5b; } .ctx-run__time { font-size: 11px; color: #9a9384; white-space: nowrap; } .ctx__empty { color: #9a9384; font-size: 12px; padding: 4px; } .ctx__legend { display: flex; gap: 12px; padding: 14px 6px 0; font-size: 10.5px; color: #9a9384; } .ctx__legend span { display: flex; align-items: center; gap: 5px; } .ctx__legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .reader-body { flex: 1; padding: var(--space-6) clamp(var(--space-5), 8vw, 80px); max-width: 860px; width: 100%; margin: 0 auto; } .reader-meta { font-size: var(--text-sm); color: var(--text-faint); margin-bottom: var(--space-3); } .reader-running { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5); background: var(--surface-raised); border-radius: var(--radius-lg); color: var(--text-muted); } .reader-running__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--primary); animation: spin .8s linear infinite; flex: none; } .reader-error { padding: var(--space-4); background: rgba(180,91,62,.08); border: var(--hairline) solid rgba(180,91,62,.25); border-radius: var(--radius-lg); color: var(--ink); } .reader-error p { color: var(--text-muted); white-space: pre-wrap; } /* ============ Rendered markdown document ============ */ .reader-document { font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-body); } .reader-document h1, .reader-document h2, .reader-document h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--ink); margin: var(--space-5) 0 var(--space-2); } .reader-document h1 { font-size: var(--display-lg); font-variant-numeric: oldstyle-nums; } .reader-document h2 { font-size: var(--display-md); font-variant-numeric: oldstyle-nums; } .reader-document h3 { font-size: var(--display-sm); font-variant-numeric: oldstyle-nums; } .reader-document p { margin: 0 0 var(--space-3); } .reader-document ul, .reader-document ol { margin: 0 0 var(--space-3); padding-left: 1.4em; } .reader-document li { margin-bottom: 4px; } .reader-document strong { font-weight: var(--weight-semibold); } .reader-document blockquote { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--primary-border); color: var(--text-muted); } .reader-document code { font-family: var(--font-mono); font-size: .92em; background: var(--paper-warm); padding: 1px 5px; border-radius: 4px; } .reader-document pre { background: var(--paper-warm); padding: var(--space-3); border-radius: var(--radius-md); overflow-x: auto; } .reader-document pre code { background: none; padding: 0; } .reader-document table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--text-md); } .reader-document th, .reader-document td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: var(--hairline) solid var(--border-soft); } .reader-document th { background: var(--paper-warm); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-faint); white-space: nowrap; } .reader-document tbody tr:hover { background: var(--paper-warm); } .reader-document hr { border: none; border-top: var(--hairline) solid var(--border-soft); margin: var(--space-5) 0; } .reader-document img { max-width: 100%; border-radius: var(--radius-md); } /* Desktop: keep the prose column at its centered reading width, but let wide TABLES break out symmetrically (left + right) — centered on the same axis — so dense data isn't cramped. Capped so it never overflows the 260px sidebar. */ @media (min-width: 1200px) { .reader-document > table { position: relative; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(1180px, calc(100vw - 324px)); } } /* Narrow screens: let a wide table scroll instead of crushing every cell. */ @media (max-width: 640px) { .reader-document table { display: block; overflow-x: auto; white-space: nowrap; } } /* ============ Grounding citations ============ */ .reader-sources { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--hairline) solid var(--border-soft); } .reader-sources__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-2); } .reader-sources__list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; } .reader-sources__list li { font-size: var(--text-md); } .reader-sources__link { color: var(--text-link); } .reader-sources__link:hover { text-decoration: underline; } /* Feedback panel — captures a note that's fed into the routine's next run. */ .reader-feedback { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--hairline) solid var(--border-soft); } .reader-feedback__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-2); } .reader-feedback__saved { font-size: var(--text-sm); color: var(--primary); margin: 0 0 var(--space-2); } /* ── Mobile (<=720px): the versions/runs panel becomes a slide-in drawer ── The global mobile top bar (app_shell.css) already replaces the icon spine; this handles the delivery-page-specific runs panel on top of it. */ @media (max-width: 720px) { /* Folded into the global mobile bar — see deliveries/show.html.erb. It held 745px of content in a 390px viewport, so half of it (including both actions) sat off-screen behind a horizontal scroll nobody discovers. */ .reader-topbar { display: none; } .reader-topbar__reopen { display: none; } .reader-topbar__versions { display: flex; } .ctx__focus { display: none; } /* The clamp above resolves to 8vw — ~31px a side on a phone, the widest gutter in the app on the one surface where line length matters most. Use the page gutter instead. */ .reader-body { padding-left: var(--page-gutter); padding-right: var(--page-gutter); } .ctx { position: fixed; top: 0; right: 0; bottom: 0; width: 86%; max-width: 300px; height: auto; z-index: 56; border-right: none; box-shadow: -6px 0 26px rgba(50, 42, 28, .22); transform: translateX(102%); transition: transform .24s ease; } .reader-shell--versions-open .ctx { transform: translateX(0); } .ctx-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(38, 34, 27, .34); opacity: 0; pointer-events: none; transition: opacity .22s; } .reader-shell--versions-open .ctx-scrim { opacity: 1; pointer-events: auto; } } /* ----------------------------------------------------------------- jarvis — House-hunt output template (structured, interactive) Values mirror the Claude-Design spec (Delivery.dc.html), which already matches the brand palette. ----------------------------------------------------------------- */ .reader-body--template { max-width: 1040px; padding-top: var(--space-4); } .hh-layout { display: flex; gap: 34px; align-items: flex-start; } .hh-article { flex: 1; min-width: 0; max-width: 720px; } .hh-metarow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .hh-meta { font-size: calc(12.5px * var(--reading-scale)); color: #9a9384; } .hh-pin { font: 600 calc(11px * var(--reading-scale)) var(--font-sans); padding: 6px 11px; border-radius: 9px; border: 1.5px solid #e6e1d6; background: #fff; color: #6f6a5e; cursor: pointer; } .hh-pin.is-on { border-color: #cfe0d9; background: #eef4f1; color: #2f6d5b; } /* Pin never shrinks: the meta text was squeezing it to 60px, wrapping "☆ Pin" onto two lines and turning the pill into a stray blob. */ .hh-pin { flex: none; white-space: nowrap; } @media (max-width: 720px) { /* The pill's white fill and border outweigh everything near them on a phone. The glyph and label carry the state on their own. */ /* Stripping the pill also stripped its padding, so the hit area needs restating — min-height keeps it at 44px at every reading size. */ .hh-pin, .hh-pin.is-on { background: none; border-color: transparent; display: inline-flex; align-items: flex-start; justify-content: flex-end; min-height: 44px; padding: 0 2px 0 14px; } /* Date and time stay together on one line; the rest drops below. The date is unbreakable, so if it can't share the row with the pin the pin wraps under it rather than forcing the date to split — which is what happens with a long weekday and month at the largest reading size. */ /* baseline, not flex-start: the pin carries a 44px tap box, so aligning boxes would sit its label ~12px below the date it sits beside. Aligning text baselines lets the hit area extend without showing. */ .hh-metarow { align-items: baseline; flex-wrap: wrap; } .hh-meta__sep { display: none; } .hh-meta__date, .hh-meta__detail { display: block; } .hh-meta__date { white-space: nowrap; } .hh-pin { margin-left: auto; } } .hh-title { font-family: var(--font-display); font-weight: 500; font-size: calc(34px * var(--reading-scale)); line-height: 1.15; margin: 0 0 6px; color: var(--ink); } .hh-subtitle { font-size: calc(13px * var(--reading-scale)); color: #9a9384; margin-bottom: 22px; } .hh-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .hh-kpi { border: 1.5px solid #e6e1d6; border-radius: 13px; padding: 14px 15px; background: #fff; } .hh-kpi__value { font-family: var(--font-display); font-size: calc(27px * var(--reading-scale)); line-height: 1; color: var(--ink); } .hh-kpi__value--accent { color: #b45b3e; } .hh-kpi__label { font-size: calc(11.5px * var(--reading-scale)); color: #6f6a5e; margin-top: 6px; line-height: 1.35; } .hh-kpi__label p { margin: 0; } .hh-dofirst { border: 1.5px solid #cfe0d9; background: linear-gradient(180deg, #f4f8f6, #eef4f1); border-radius: 15px; padding: 18px 20px; margin-bottom: 30px; } .hh-dofirst__body { margin: 8px 0 0; font-size: calc(14.5px * var(--reading-scale)); line-height: 1.55; color: var(--ink); } /* "What changed since the last run" — the headline of a scheduled hunt, so it sits above the shortlist. Terracotta rather than the green used for recommendations: this is news, not advice. */ .hh-since { border: 1.5px solid #e8d3c8; background: linear-gradient(180deg, #fdf6f2, #faeee7); border-radius: 15px; padding: 18px 20px; margin-bottom: 26px; } .hh-since__body { margin: 8px 0 0; font-size: calc(14.5px * var(--reading-scale)); line-height: 1.55; color: var(--ink); } .hh-pill { font: 700 calc(10px * var(--reading-scale)) var(--font-sans); letter-spacing: .6px; padding: 4px 9px; border-radius: 999px; } .hh-pill--do { color: #2f6d5b; background: #dcebe5; } .hh-pill--match { font-size: calc(9.5px * var(--reading-scale)); letter-spacing: .5px; color: #2f6d5b; background: #dcebe5; padding: 3px 8px; } .hh-pill--since { color: #b45b3e; background: #f6e2d8; } .hh-pill--new { font-size: calc(9.5px * var(--reading-scale)); letter-spacing: .5px; color: #b45b3e; background: #f6e2d8; padding: 3px 8px; } .hh-pill--changed { font-size: calc(9.5px * var(--reading-scale)); letter-spacing: .3px; font-weight: 600; color: #6f6a5e; background: #efeae0; padding: 3px 8px; } .hh-h2 { font-family: var(--font-display); font-weight: 500; font-size: calc(21px * var(--reading-scale)); margin: 0 0 4px; scroll-margin-top: 20px; color: var(--ink); } .hh-note { font-size: calc(13px * var(--reading-scale)); color: #9a9384; margin: 0 0 16px; } .hh-verdict { font-size: calc(14.5px * var(--reading-scale)); line-height: 1.65; color: #3a352c; margin: 6px 0 34px; } .hh-cards { display: flex; flex-direction: column; gap: 11px; margin-bottom: 34px; } .hh-card { border: 1.5px solid #e6e1d6; border-radius: 14px; padding: 16px 18px; background: #fff; transition: opacity .15s; } .hh-card--top { border-color: #cfe0d9; background: #f8fbfa; } .hh-card.is-dismissed { opacity: .4; } .hh-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 11px; } .hh-card__title { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hh-card__name { font-weight: 600; font-size: calc(14.5px * var(--reading-scale)); } .hh-card__name a { color: var(--ink); } .hh-card__name a:hover { color: #b45b3e; } .hh-card__source { font-size: calc(12px * var(--reading-scale)); color: #9a9384; } .hh-card__source a { color: #2f6d5b; text-decoration: none; border-bottom: 1px solid #cfe0d9; } .hh-card__source a:hover { color: #b45b3e; border-bottom-color: #b45b3e; } .hh-card__actions { display: flex; gap: 6px; flex: none; } .hh-save { font: 600 calc(11px * var(--reading-scale)) var(--font-sans); padding: 6px 11px; border-radius: 9px; border: none; cursor: pointer; white-space: nowrap; background: #eef4f1; color: #2f6d5b; } .hh-save.is-on { background: #2f6d5b; color: #fff; } .hh-dismiss { font: 600 calc(11px * var(--reading-scale)) var(--font-sans); padding: 6px 10px; border-radius: 9px; border: none; cursor: pointer; background: #f1ede4; color: #9a9384; } .hh-dismiss.is-on { background: #b45b3e; color: #fff; } .hh-card__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; } .hh-card__k { font-size: calc(10px * var(--reading-scale)); letter-spacing: .4px; color: #a49d8d; margin-bottom: 3px; } .hh-card__v { font-size: calc(13px * var(--reading-scale)); font-weight: 600; } .hh-card__vs { font-size: calc(12px * var(--reading-scale)); color: #6f6a5e; } .hh-card__v2 { font-size: calc(13px * var(--reading-scale)); color: #3a352c; } .hh-card__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1.5px solid #f0ece3; padding-top: 11px; } .hh-card__why { font-size: calc(11px * var(--reading-scale)); color: #9a9384; margin-right: 2px; } .hh-tag { font: 600 calc(11px * var(--reading-scale)) var(--font-sans); padding: 4px 9px; border-radius: 999px; background: rgba(180,91,62,.1); color: #b45b3e; } .hh-otable { border: 1.5px solid #e6e1d6; border-radius: 13px; overflow: hidden; background: #fff; margin-bottom: 20px; } .hh-otable__head { display: flex; gap: 12px; padding: 10px 15px; background: #faf8f3; font: 600 calc(10.5px * var(--reading-scale)) var(--font-sans); letter-spacing: .4px; color: #a49d8d; } .hh-otable__row { display: flex; gap: 12px; padding: 12px 15px; border-top: 1.5px solid #f0ece3; align-items: flex-start; font-size: calc(12.5px * var(--reading-scale)); } .hh-oc1 { flex: 1.6; color: #3a352c; } .hh-oc1 a { color: #3a352c; } .hh-oc2 { flex: 1; font-weight: 600; } .hh-oc3 { flex: 1.2; color: #b45b3e; font-weight: 600; } .hh-flag { border-left: 4px solid #b45b3e; background: #fbf3ef; border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 0 0 34px; } .hh-flag__label { font: 700 calc(10px * var(--reading-scale)) var(--font-sans); letter-spacing: .6px; color: #b45b3e; margin-bottom: 6px; } .hh-flag__body { margin: 0; font-size: calc(13.5px * var(--reading-scale)); line-height: 1.6; color: #3a352c; } .hh-custom { margin: 0 0 30px; font-size: calc(14.5px * var(--reading-scale)); } .hh-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 38px; } .hh-step { display: flex; gap: 13px; align-items: flex-start; } .hh-step__n { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #eef4f1; color: #2f6d5b; font: 600 calc(12px * var(--reading-scale)) var(--font-sans); display: flex; align-items: center; justify-content: center; margin-top: 1px; } .hh-step__body { margin: 0; font-size: calc(14px * var(--reading-scale)); line-height: 1.6; color: #3a352c; } .hh-sources-label { font: 700 calc(11px * var(--reading-scale)) var(--font-sans); letter-spacing: .6px; color: #a49d8d; margin: 0 0 12px; scroll-margin-top: 20px; } .hh-sources { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; } .hh-sources li { font-size: calc(13px * var(--reading-scale)); line-height: 1.4; } .hh-sources a { color: #b45b3e; } /* top: clears the 56px sticky reader-topbar (+12px breathing room) so the nav parks just below it instead of sliding behind it. */ .hh-nav { width: 156px; flex: none; position: sticky; top: 68px; align-self: flex-start; } /* Anchor jumps (#verdict, #candidates …) must stop below the sticky topbar, not underneath it — matches the nav's 68px offset. */ .hh-h2, .hh-sources-label, .hh-shape { scroll-margin-top: 68px; } .hh-nav__label { font: 700 calc(10px * var(--reading-scale)) var(--font-sans); letter-spacing: .6px; color: #a49d8d; margin-bottom: 11px; } .hh-nav__links { display: flex; flex-direction: column; gap: 2px; border-left: 1.5px solid #e6e1d6; } .hh-nav__links a { font-size: calc(12.5px * var(--reading-scale)); color: #6f6a5e; padding: 5px 0 5px 13px; margin-left: -1.5px; border-left: 1.5px solid transparent; } .hh-nav__links a:hover { color: #2f6d5b; border-left-color: #2f6d5b; } .hh-nav__shape { display: flex; align-items: center; gap: 6px; font-size: calc(12.5px * var(--reading-scale)); color: #2f6d5b; font-weight: 600; margin-top: 16px; padding-top: 14px; border-top: 1.5px solid #e6e1d6; } .hh-shape { max-width: 720px; margin-top: 0; scroll-margin-top: 20px; } .hh-shape__card { border: 1.5px solid #cfe0d9; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 10px 34px rgba(50,42,28,.06); } .hh-shape__head { padding: 13px 20px; background: #f4f8f6; border-bottom: 1.5px solid #cfe0d9; font-size: calc(14px * var(--reading-scale)); color: #2f6d5b; } .hh-shape__head span { color: #8f8877; font-weight: 400; } .hh-shape__body { padding: 18px 20px; } .hh-shape__lbl { font-size: calc(12.5px * var(--reading-scale)); font-weight: 600; color: #6f6a5e; margin-bottom: 9px; } .hh-refine { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .hh-refine__chip { font: 600 calc(12px * var(--reading-scale)) var(--font-sans); padding: 7px 13px; border-radius: 999px; cursor: pointer; background: #f1ede4; color: #6f6a5e; transition: .15s; } .hh-refine__chip.is-on { background: #2f6d5b; color: #fff; } .hh-notes { width: 100%; min-height: 84px; padding: 12px 14px; border: 1.5px solid #e6e1d6; border-radius: 12px; font: 400 calc(13.5px * var(--reading-scale))/1.55 var(--font-sans); color: #3a352c; outline: none; resize: vertical; } .hh-notes:focus { border-color: #2f6d5b; box-shadow: 0 0 0 3px rgba(47,109,91,.2); } .hh-shape__foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 16px; } .hh-shape__count { font-size: calc(12px * var(--reading-scale)); color: #9a9384; } .hh-shape__foot-right { display: flex; align-items: center; gap: 14px; } .hh-shape__applies { font-size: calc(12px * var(--reading-scale)); color: #9a9384; } .hh-shape__save { font: 600 calc(13px * var(--reading-scale)) var(--font-sans); padding: 11px 18px; border-radius: 11px; border: none; background: #2f6d5b; color: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(47, 109, 91, .25); } .hh-shape__save:hover { background: #28604f; } .hh-shape__save:disabled { opacity: .6; cursor: default; } @media (max-width: 900px) { .hh-layout { flex-direction: column; } .hh-nav { display: none; } .hh-kpis, .hh-card__grid { grid-template-columns: repeat(2, 1fr); } } /* ── Brief provenance (collapsible; shared by reader + templates) ── */ .brief { max-width: 720px; margin: 40px 0 16px; border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; overflow: hidden; } .brief__summary { display: flex; align-items: center; gap: 11px; padding: 15px 18px; cursor: pointer; list-style: none; } .brief__summary::-webkit-details-marker { display: none; } .brief__icon { font-size: calc(16px * var(--reading-scale)); } .brief__headings { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .brief__title { font-weight: 600; font-size: calc(14px * var(--reading-scale)); color: var(--ink); } .brief__sub { font-size: calc(12px * var(--reading-scale)); color: #9a9384; } .brief__chev { font: 600 calc(11px * var(--reading-scale)) var(--font-sans); color: #9a9384; } .brief__chev--open { display: none; } .brief[open] .brief__chev--closed { display: none; } .brief[open] .brief__chev--open { display: inline; } .brief__body { border-top: 1.5px solid #f0ece3; padding: 18px; display: flex; flex-direction: column; gap: 18px; } .brief__ltag { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; } .brief__pill { font: 700 calc(10px * var(--reading-scale)) var(--font-sans); letter-spacing: .5px; color: #6f6a5e; background: #f1ede4; padding: 4px 9px; border-radius: 999px; } .brief__pill--accent { color: #2f6d5b; background: #dcebe5; } .brief__hint { font-size: calc(11.5px * var(--reading-scale)); color: #9a9384; margin: 0; } .brief__link { color: #b45b3e; } .brief__quote { margin: 0; font-size: calc(13.5px * var(--reading-scale)); line-height: 1.65; color: #3a352c; background: #faf8f3; border-left: 3px solid #cfe0d9; border-radius: 0 10px 10px 0; padding: 12px 15px; white-space: pre-wrap; } .brief__chips { display: flex; flex-wrap: wrap; gap: 7px; } .brief__chip { font: 600 calc(12px * var(--reading-scale)) var(--font-sans); padding: 6px 11px; border-radius: 999px; background: #eef4f1; color: #2f6d5b; } .brief__feedback { display: flex; flex-direction: column; gap: 10px; } .brief__fitem { display: flex; gap: 10px; align-items: flex-start; } .brief__forigin { font: 600 calc(10.5px * var(--reading-scale)) var(--font-sans); color: #9a9384; background: #f1ede4; padding: 3px 8px; border-radius: 6px; flex: none; margin-top: 1px; } .brief__ftext { font-size: calc(13px * var(--reading-scale)); line-height: 1.5; color: #3a352c; } .brief__foot { font-size: calc(11.5px * var(--reading-scale)); color: #9a9384; border-top: 1.5px solid #f0ece3; padding-top: 13px; } /* --------------------------------------------------------------- jarvis — Create-routine wizard --------------------------------------------------------------- */ .wizard-shell { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .wizard-brand { margin-bottom: var(--space-2); } .wizard-card { width: 100%; padding: 0; overflow: hidden; } .wizard-card__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--paper-warm); border-bottom: var(--hairline) solid var(--border-soft); } .wizard-step-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); color: var(--text-faint); text-transform: uppercase; } .wizard-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .wizard-card__body .field__label, .wizard-card__body label { margin-top: var(--space-2); } .wizard-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .wizard-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border: var(--hairline) solid var(--border-default); border-radius: var(--radius-md); } .wizard-nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); } .wizard-nav--end { justify-content: flex-end; } .wizard-nav [data-wizard-next], .wizard-nav [data-wizard-back] { cursor: pointer; } .wizard-review-card { display: flex; flex-direction: column; gap: 6px; } /* Preserve the user's line breaks / indentation in the direction preview. */ #wizard-review-direction { white-space: pre-wrap; word-break: break-word; } .wizard-errors { color: var(--accent); font-size: var(--text-sm); background: rgba(180,91,62,.08); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); } [data-skill-pick], [data-frequency-pick], [data-provider-pick] { cursor: pointer; } /* Desktop: give the wizard more room (roomier direction textarea, less cramped forms) and more generous padding. Mobile layout is unchanged. */ @media (min-width: 768px) { .wizard-shell { max-width: 600px; gap: var(--space-5); } .wizard-card__head { padding: var(--space-4) var(--space-6); } .wizard-card__body { padding: var(--space-6); gap: var(--space-3); } } /* --------------------------------------------------------------- jarvis — Settings screens (routines manage list, providers) --------------------------------------------------------------- */ .settings-shell { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: var(--space-2); } .settings-topbar { display: flex; align-items: center; justify-content: space-between; } .settings-list { display: flex; flex-direction: column; gap: var(--space-2); } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .settings-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .settings-row__actions { display: flex; align-items: center; gap: 6px; flex: none; } /* --- M3: routine management, edit tabs, history/compare --- */ .settings-row.is-paused { opacity: .6; } .edit-tabs { display: flex; gap: 6px; margin: var(--space-3) 0 var(--space-2); flex-wrap: wrap; } .edit-tab { font: 600 12px system-ui; padding: 6px 12px; border-radius: 999px; cursor: pointer; color: var(--ink-mut, #6b665c); background: var(--paper-2, #f4f2ec); } .edit-tab.is-active { background: var(--primary, #2f6d5b); color: #fff; } .history-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: var(--space-3); } .compare-grid .delivery-body { font-size: 13px; } /* --- M4: plans & usage --- */ .plan-grid { display: flex; gap: var(--space-3); flex-wrap: wrap; } .plan-card { flex: 1 1 240px; display: flex; flex-direction: column; gap: var(--space-2); } .plan-card--pro { border-color: var(--primary-border, #cfe0d9); background: var(--primary-tint-2, #f4f8f6); } .plan-card--current { outline: 2px solid var(--primary, #2f6d5b); outline-offset: -2px; } .plan-card__head { display: flex; align-items: baseline; justify-content: space-between; } .plan-card__price { font: 600 15px var(--font-sans, system-ui); color: var(--ink, #26221b); } .plan-card__rule { height: 1px; background: var(--border-soft, #ece8df); margin: 2px 0; } .plan-card__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .plan-card__features li { font-size: 13px; color: var(--ink-soft, #6f6a5e); } .plan-card__features li::before { content: "✓ "; color: var(--primary, #2f6d5b); font-weight: 600; } .plan-card__foot { margin-top: auto; padding-top: var(--space-2); } .usage-card { display: flex; flex-direction: column; } .usage-nudge { margin-top: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md, 11px); background: var(--primary-tint, #eef4f1); color: var(--ink, #26221b); font-size: 13px; } .usage-nudge--warn { background: rgba(180,91,62,.10); } .usage-nudge__link { color: var(--accent, #b45b3e); font-weight: 600; } .usage-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid var(--border-soft, #ece8df); } .usage-row__name { font-size: 13px; color: var(--ink, #26221b); } /* Standard account/settings page frame — matches Home/History/Routines (880px, left-aligned, hero + content) instead of the centered onboarding shell. */ .acct-page { width: 100%; max-width: 880px; margin: 0 auto; padding: var(--page-top) var(--page-gutter) 90px; } .acct-page .settings-shell { max-width: 620px; } /* Profile settings. */ .prof-divider { display: flex; align-items: baseline; gap: 9px; margin: 26px 0 12px; } .prof-divider > span:first-child { font: 700 10px "Hanken Grotesk"; letter-spacing: .6px; color: #9a9384; } .prof-divider__rule { flex: 1; height: 1.5px; background: #e2ddd0; } .prof-card { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 2px 6px rgba(50,42,28,.04); } /* Danger zone — same shell, terracotta-tinted. */ .prof-divider--danger > span:first-child { color: var(--danger); } .prof-divider--danger .prof-divider__rule { background: var(--danger-border); } .prof-card--danger { border-color: var(--danger-border); } .prof-danger-confirm { padding: 18px 20px; border-top: 1.5px solid var(--danger-border); background: var(--danger-tint); } .prof-danger-confirm__title { font-size: 12.5px; font-weight: 600; color: var(--danger-press); margin-bottom: 4px; } .prof-danger-confirm__body { font-size: 12px; color: #6f6a5e; line-height: 1.55; margin-bottom: 13px; } .prof-danger-confirm .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--danger); } .prof-danger-confirm .prof-input { margin-bottom: 13px; } .prof-danger-confirm__actions { display: flex; gap: 9px; } .prof-id { display: flex; align-items: center; gap: 15px; padding: 18px 20px; border-bottom: 1.5px solid #f3f0e8; } .prof-id__av { width: 52px; height: 52px; flex: none; border-radius: 50%; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font: 700 18px "Hanken Grotesk"; } .prof-id__main { flex: 1; min-width: 0; } .prof-id__name { font-weight: 600; font-size: 14px; } .prof-id__email { color: #9a9384; margin-top: 2px; } .prof-plan { flex: none; font: 600 10px "Hanken Grotesk"; padding: 5px 11px; border-radius: 999px; background: #efe9f2; color: #6a4c86; } .prof-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 20px; border-bottom: 1.5px solid #f3f0e8; } .prof-row--last { border-bottom: none; } .prof-row__lbl { width: 150px; flex: none; font-size: 12.5px; font-weight: 600; color: #3a352c; padding-top: 9px; } .prof-row__hint { font-size: 11px; font-weight: 400; color: #9a9384; margin-top: 2px; } .prof-row__field { flex: 1; min-width: 0; } .prof-row__note { font-size: 11px; color: #9a9384; margin-top: 7px; line-height: 1.5; } .prof-input { width: 100%; border: 1.5px solid #e6e1d6; border-radius: 10px; padding: 10px 13px; font: 400 13.5px "Hanken Grotesk"; color: #26221b; outline: none; background: #fff; } .prof-input:focus { border-color: #cfe0d9; } .prof-tz { width: 100%; appearance: none; -webkit-appearance: none; border: 1.5px solid #e6e1d6; border-radius: 10px; padding: 10px 34px 10px 13px; font: 500 13px "Hanken Grotesk"; color: #26221b; background: #fff; cursor: pointer; outline: none; } .prof-tz:focus { border-color: #cfe0d9; } .prof-seg { display: inline-flex; gap: 6px; } .prof-seg__opt { display: inline-flex; align-items: center; font: 600 11.5px "Hanken Grotesk"; padding: 8px 14px; border-radius: 9px; border: 1.5px solid #e6e1d6; background: #fff; color: #6f6a5e; cursor: pointer; } .prof-seg__opt.is-on { border-color: #2f6d5b; background: #eef4f1; color: #2f6d5b; } .prof-seg__radio { position: absolute; opacity: 0; width: 0; height: 0; } /* Reading-size preview. With the in-reader control gone this is the only feedback the setting has, so it renders the real brief template (see SettingsHelper#reading_size_sample_delivery) instead of a mock-up. .reading-scope (in tokens/typography.css) makes the type tokens track --reading-scale; reading_scale_preview.js sets that variable inline so the sample shows the PENDING selection rather than the saved one. */ .prof-rsize__preview { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1.5px solid #e6e1d6; background: #fcfbf7; } .prof-rsize__label { font: 700 9.5px "Hanken Grotesk"; letter-spacing: .5px; color: #a49d8d; padding: 10px 15px 0; } /* The brief template sets its own page-level padding and title size; rein both in so the sample sits as a card inside the settings row. */ .prof-rsize__doc { padding: 4px 15px 15px; } .prof-rsize__doc .db { padding: 0; } .prof-rsize__doc .db-title { margin-top: 6px; } /* The TL;DR block carries a page-flow bottom margin that leaves a gap at the end of the card here, since it's the last thing in the sample. */ .prof-rsize__doc .db > :last-child { margin-bottom: 0; } .prof-tf-now { margin-left: auto; flex: none; font-size: 12px; color: #9a9384; } .prof-tf-now strong { color: #3a352c; font-weight: 600; } /* Text-only rows (e.g. Email) center vertically — no input to align a top edge to. */ .prof-row--center { align-items: center; } .prof-row--center .prof-row__lbl { padding-top: 0; } /* Danger-zone row: label grows, the action stays pinned at the row's end (no fixed 150px label column like the label/input rows above it). */ .prof-row--wide .prof-row__lbl { width: auto; flex: 1; } .prof-email { display: flex; align-items: center; gap: 10px; } .prof-email .mono { color: #6f6a5e; } .prof-verified { display: inline-flex; align-items: center; gap: 4px; font: 600 10px "Hanken Grotesk"; color: #2f6d5b; } .prof-change { margin-left: auto; font: 600 11px "Hanken Grotesk"; padding: 7px 12px; border-radius: 9px; border: 1.5px solid #e6e1d6; background: #fff; color: #6f6a5e; cursor: pointer; } .prof-change:hover { border-color: #cfe0d9; color: #2f6d5b; } /* Email-change reveal — CSS-only, toggled by the row's "Change" label. */ .prof-echange { max-height: 0; overflow: hidden; transition: max-height .25s ease; } .prof-echange__cb:checked + .prof-echange { max-height: 220px; } .prof-echange__body { border: 1.5px solid #e6e1d6; border-radius: 14px; background: #faf8f3; padding: 15px 17px; margin-top: 14px; } .prof-echange__note { font-size: 12px; color: #6f6a5e; line-height: 1.5; margin: 0 0 11px; } .prof-echange__form { display: flex; gap: 9px; align-items: center; } .prof-echange__form .prof-input { flex: 1; } .prof-foot { font-size: 12px; color: #9a9384; line-height: 1.7; margin-top: 22px; } .prof-foot a { color: #b45b3e; font-weight: 600; } .prof-foot a:hover { text-decoration: underline; } /* Transparent plans page — 4-tier comparison. */ .plan-note { display: flex; gap: 11px; align-items: flex-start; border: 1.5px solid #cfe0d9; background: #f4f8f6; border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; font-size: 12.5px; line-height: 1.55; color: #2f5f52; } .plan-note strong { color: #245043; } .plan-note__icon { width: 26px; height: 26px; flex: none; border-radius: 8px; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font-size: 14px; } /* Shared CTA control (matrix footer + mobile cards). button_to wraps a form; display:contents lets the button sit directly in the grid cell / card. */ .pmx form.button_to, .plan-cards form.button_to { display: contents; } .plan-cta { display: inline-block; text-align: center; font: 600 11.5px "Hanken Grotesk"; padding: 8px 15px; border-radius: 9px; border: 1.5px solid transparent; cursor: pointer; } .plan-cta--block { display: block; width: 100%; padding: 12px; font-size: 12.5px; border-radius: 11px; } .plan-cta--go { background: #2f6d5b; color: #fff; border: none; box-shadow: 0 3px 10px rgba(47,109,91,.25); } .plan-cta--go:hover { background: #28604f; text-decoration: none; } .plan-cta--ghost { border-color: #e6e1d6; color: #26221b; background: #fff; } .plan-cta--ghost:hover { border-color: #cfe0d9; text-decoration: none; } .plan-cta--current { background: #faf8f3; border-color: #e6e1d6; color: #9a9384; cursor: default; } .plan-cta--muted { background: #fff; border-color: #e6e1d6; color: #c2bbac; cursor: default; } /* Desktop comparison matrix. */ .pmx { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 2px 6px rgba(50,42,28,.04); } .pmx__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } .pmx__corner { background: #f7f4ee; border-bottom: 1.5px solid #ece8df; } .pmx__col { padding: 14px 10px; text-align: center; background: #f7f4ee; border-bottom: 1.5px solid #ece8df; } .pmx__col.is-rec { background: #f4f8f6; box-shadow: inset 0 0 0 1.5px #cfe0d9; } .pmx__col.is-current { background: #eef3f1; box-shadow: inset 0 0 0 1.5px #2f6d5b; } .pmx__pname { font-family: "Newsreader", serif; font-size: 15px; font-weight: 600; } .pmx__tag { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; font: 700 9.5px "Hanken Grotesk"; letter-spacing: .5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: #f1ede4; color: #9a9384; } .pmx__tag--rec { background: #2f6d5b; color: #fff; } .pmx__tag--cur { background: #dcebe5; color: #2f6d5b; box-shadow: inset 0 0 0 1.5px #2f6d5b; } .pmx__tag--cur::before { content: "✓"; font-size: 9px; font-weight: 800; } .pmx__price { font-size: 11.5px; color: #9a9384; margin-top: 4px; } .pmx__trial { font: 600 9.5px "Hanken Grotesk"; color: #2f6d5b; margin-top: 4px; } .pmx__label { padding: 11px 16px; font-size: 12.5px; color: #3a352c; display: flex; align-items: center; gap: 6px; border-bottom: 1.5px solid #f3f0e8; } .pmx__q { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1.5px solid #cbc4b6; color: #9a9384; display: inline-flex; align-items: center; justify-content: center; font: 700 9px "Hanken Grotesk"; cursor: help; } .pmx__cell { padding: 11px 10px; display: flex; align-items: center; justify-content: center; text-align: center; border-bottom: 1.5px solid #f3f0e8; } .pmx__cell.is-rec { background: #f9fbfa; } .pmx__cell--cta { border-bottom: none; background: #faf8f3; padding: 14px 10px; } .pmx__cell--cta.is-rec { background: #f4f8f6; } .pmx__yes { width: 20px; height: 20px; border-radius: 6px; background: #eef4f1; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .pmx__no { width: 20px; height: 20px; border-radius: 6px; background: #f1ede4; color: #c2bbac; display: flex; align-items: center; justify-content: center; font-size: 11px; } .pmx__txt { font-size: 12px; font-weight: 600; color: #3a352c; white-space: pre-line; line-height: 1.5; } .pmx__txt--dim { color: #c2bbac; } .pmx__cell.is-rec .pmx__txt { color: #245043; } /* Mobile stacked plan cards. */ .plan-cards { display: none; flex-direction: column; gap: 12px; } .plan-card2 { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; padding: 16px; } .plan-card2--rec { border: 2px solid #2f6d5b; box-shadow: 0 10px 30px rgba(47,109,91,.13); } .plan-card2--current { box-shadow: inset 0 0 0 1.5px #2f6d5b; } .plan-card2__head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .plan-card2__name { font-family: "Newsreader", serif; font-size: 18px; font-weight: 500; } .plan-card2__price { margin-left: auto; font-family: "Newsreader", serif; font-size: 18px; font-weight: 500; } .plan-card2__tagline { font-size: 11.5px; color: #9a9384; margin-bottom: 12px; } .plan-card2__feats { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; } .plan-card2__feat { display: flex; gap: 9px; align-items: flex-start; } .plan-card2__ic { width: 18px; height: 18px; flex: none; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-top: 1px; } .plan-card2__ic.is-yes { background: #eef4f1; color: #2f6d5b; } .plan-card2__ic.is-hero { background: #dcebe5; color: #2f6d5b; } .plan-card2__ic.is-no { background: #f1ede4; color: #c2bbac; } .plan-card2__ft { font-size: 12px; line-height: 1.4; color: #3a352c; } .plan-card2__ft.is-dim { color: #9a9384; } .plan-foot { font-size: 11.5px; color: #9a9384; line-height: 1.6; margin-top: 16px; } /* Matrix → stacked cards on narrow screens. */ @media (max-width: 720px) { .pmx { display: none; } .plan-cards { display: flex; } /* The 150px label column plus a flex:1 field leaves ~180px for the control on a phone, which squeezes selects, segmented controls and the reading preview into a sliver. Stack label over field instead. */ .prof-row, .prof-row--center { flex-direction: column; align-items: stretch; gap: 10px; } .prof-row__lbl { width: auto; padding-top: 0; } .prof-seg { flex-wrap: wrap; } .prof-seg__opt { flex: 1 1 auto; justify-content: center; } } /* Usage page — web/thinking meters + by-routine (three states). */ .use-muted { color: #9a9384; font-weight: 400; } .use-card { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; padding: 20px 22px; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(50,42,28,.04); } .use-card--flush { padding: 0; overflow: hidden; } .use-trial { display: flex; align-items: center; gap: 13px; border: 1.5px solid #cfe0d9; border-radius: 16px; background: linear-gradient(#f4f8f6, #eef4f1); padding: 16px 19px; margin-bottom: 14px; } .use-trial__icon { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #2f6d5b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; } .use-trial__text { flex: 1; min-width: 0; } .use-trial__title { font-weight: 700; font-size: 13.5px; color: #245043; } .use-trial__sub { font-size: 12px; color: #2f5f52; } .use-trial__btn { flex: none; padding: 10px 17px; border-radius: 11px; background: #2f6d5b; color: #fff; font: 600 12.5px "Hanken Grotesk"; box-shadow: 0 3px 10px rgba(47,109,91,.25); } .use-trial__btn:hover { background: #28604f; text-decoration: none; } .use-meter__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } .use-meter__icon { width: 26px; height: 26px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; } .use-meter__icon--web { background: #dcebe5; } .use-meter__icon--think { background: #f1ede4; } .use-meter__label { font-weight: 600; font-size: 14px; flex: 1; } .use-meter__count { font-size: 13px; color: #9a9384; } .use-meter__used { font-family: "Newsreader", serif; font-size: 22px; font-weight: 500; } .use-bar { height: 11px; border-radius: 999px; background: #f0ece3; overflow: hidden; margin-bottom: 11px; } .use-bar__fill { height: 100%; border-radius: 999px; } .use-meter__foot { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #6f6a5e; } .use-thinking { display: flex; align-items: center; gap: 12px; padding: 16px 22px; } .use-thinking__text { flex: 1; } .use-thinking__title { font-weight: 600; font-size: 13.5px; } .use-thinking__sub { font-size: 11.5px; color: #9a9384; } .use-thinking__count { font-size: 11.5px; color: #9a9384; } .use-thinking__n { font-family: "Newsreader", serif; font-size: 20px; font-weight: 500; color: #26221b; } .use-warn { display: flex; align-items: center; gap: 11px; border: 1.5px solid #f0e6d6; background: #faf6ef; border-radius: 14px; padding: 13px 16px; margin-bottom: 12px; } .use-warn__icon { color: #a4712f; flex: none; font-size: 15px; } .use-warn__text { flex: 1; font-size: 12px; line-height: 1.5; color: #8a6420; } .use-warn__link { font: 600 11.5px "Hanken Grotesk"; color: #a4712f; flex: none; } .use-freeweb { display: flex; gap: 15px; align-items: flex-start; } .use-freeweb .use-meter__icon { width: 42px; height: 42px; font-size: 20px; color: #2f6d5b; background: #eef4f1; } .use-freeweb__text { flex: 1; } .use-freeweb__title { font-family: "Newsreader", serif; font-size: 18px; font-weight: 500; margin-bottom: 4px; } .use-freeweb__sub { font-size: 12.5px; line-height: 1.55; color: #6f6a5e; margin-bottom: 12px; } .use-freeweb__btn { display: inline-block; padding: 10px 16px; border-radius: 11px; background: #2f6d5b; color: #fff; font: 600 12.5px "Hanken Grotesk"; box-shadow: 0 3px 10px rgba(47,109,91,.25); } .use-freeweb__btn:hover { background: #28604f; text-decoration: none; } .use-divider { display: flex; align-items: baseline; gap: 9px; margin: 22px 0 12px; } .use-divider span:first-child { font: 700 10px "Hanken Grotesk"; letter-spacing: .6px; color: #9a9384; } .use-divider__rule { flex: 1; height: 1.5px; background: #e2ddd0; } .use-row { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1.5px solid #f3f0e8; } .use-row--last { border-bottom: none; } .use-row__emoji { font-size: 15px; flex: none; width: 22px; text-align: center; } .use-row__main { flex: 1; min-width: 0; } .use-row__head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .use-row__name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .use-tag { font: 600 9px "Hanken Grotesk"; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; flex: none; } .use-tag--web { background: #dcebe5; color: #2f6d5b; } .use-tag--think { background: #f1ede4; color: #9a9384; } .use-row__bar { height: 6px; border-radius: 999px; background: #f0ece3; overflow: hidden; max-width: 420px; } .use-row__fill { height: 100%; border-radius: 999px; } .use-row__count { flex: none; font-size: 13px; font-weight: 600; color: #26221b; width: 34px; text-align: right; } .use-empty { padding: 22px; text-align: center; color: #9a9384; font-size: 12.5px; border: 1.5px solid #f0ece3; border-radius: 16px; } .use-foot { font-size: 11.5px; color: #9a9384; margin-top: 16px; line-height: 1.55; } /* Plan page — current-plan card, upsell banner, compare head, upgrade modal. */ .plan-current { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; overflow: hidden; margin-bottom: 26px; box-shadow: 0 2px 6px rgba(50,42,28,.04); } .plan-current__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; } .plan-current__badge-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: #f1ede4; color: #6f6a5e; display: flex; align-items: center; justify-content: center; font: 700 15px "Hanken Grotesk"; } .plan-current__id { flex: 1; min-width: 0; } .plan-current__name { font-family: "Newsreader", serif; font-size: 19px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .plan-current__tag { font: 600 10px "Hanken Grotesk"; padding: 3px 9px; border-radius: 999px; background: #e8efe8; color: #2f6d5b; } .plan-current__desc { font-size: 12.5px; color: #9a9384; margin-top: 2px; } .plan-current__price { text-align: right; flex: none; } .plan-current__amount { font-family: "Newsreader", serif; font-size: 26px; font-weight: 500; line-height: 1; } .plan-current__per { display: block; font-size: 10.5px; color: #9a9384; } .plan-current__meter { padding: 0 20px 18px; } .plan-current__meterhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; font-size: 12px; color: #6f6a5e; } .plan-current__resets { font-size: 11.5px; color: #9a9384; margin-top: 8px; } /* Subscription management (Stripe portal) + the billing-trouble escape hatch. */ .plan-current__manage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1.5px solid #ece8df; } .plan-current__managenote { flex: 1 1 220px; font-size: 11.5px; line-height: 1.5; color: #9a9384; } .plan-help { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: -14px 0 26px; font-size: 12.5px; color: #6f6a5e; } .plan-help__form { display: inline; } .plan-help__link { border: none; background: none; padding: 0; font: inherit; color: #2f6d5b; text-decoration: underline; cursor: pointer; } .plan-help__link:hover { color: #28604f; } .plan-upsell { display: flex; align-items: center; gap: 14px; border: 1.5px solid #cfe0d9; background: #f4f8f6; border-radius: 16px; padding: 18px 20px; margin-bottom: 26px; } .plan-upsell__icon { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font-size: 20px; } .plan-upsell__text { flex: 1; min-width: 0; } .plan-upsell__title { font-weight: 700; font-size: 14px; color: #245043; margin-bottom: 2px; } .plan-upsell__sub { font-size: 12.5px; line-height: 1.5; color: #2f5f52; } .plan-upsell__btn { flex: none; padding: 11px 18px; border-radius: 11px; background: #2f6d5b; color: #fff; font: 600 13px "Hanken Grotesk"; box-shadow: 0 3px 10px rgba(47,109,91,.25); } .plan-upsell__btn:hover { background: #28604f; text-decoration: none; } .plan-compare-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 13px; } .plan-compare-head span:first-child { font: 700 10px "Hanken Grotesk"; letter-spacing: .6px; color: #9a9384; } .plan-compare-head__rule { flex: 1; height: 1.5px; background: #e2ddd0; } .plan-compare-head__note { font-size: 11px; color: #9a9384; } /* upgrade modal via :target */ .plan-modal { display: none; position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; padding: 30px; } .plan-modal:target { display: flex; } .plan-modal__scrim { position: absolute; inset: 0; background: rgba(38,34,27,.4); } .plan-modal__card { position: relative; width: 430px; max-width: 100%; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(50,42,28,.3); } .plan-modal__hero { position: relative; padding: 26px 26px 22px; background: linear-gradient(#f4f8f6, #eef4f1); } .plan-modal__close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #9a9384; } .plan-modal__close:hover { background: rgba(0,0,0,.05); text-decoration: none; } .plan-modal__icon { width: 46px; height: 46px; border-radius: 13px; background: #2f6d5b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; } .plan-modal__title { font-family: "Newsreader", serif; font-size: 23px; font-weight: 500; line-height: 1.15; margin-bottom: 6px; } .plan-modal__sub { font-size: 13.5px; line-height: 1.6; color: #5c6b62; } .plan-modal__body { padding: 20px 26px 24px; } .plan-modal__perks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .plan-modal__perk { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #3a352c; } .plan-modal__check { width: 20px; height: 20px; flex: none; border-radius: 6px; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; } .plan-modal__cta { width: 100%; padding: 14px; border: none; border-radius: 12px; background: #2f6d5b; color: #fff; font: 600 14px "Hanken Grotesk"; cursor: pointer; box-shadow: 0 3px 10px rgba(47,109,91,.25); margin-bottom: 9px; } .plan-modal__cta:hover { background: #28604f; } .plan-modal__fine { text-align: center; font-size: 11px; color: #9a9384; } /* Providers page — included (system) + BYOK (paid). */ .prov-divider { display: flex; align-items: baseline; gap: 9px; margin: 0 0 12px; } .prov-divider span:first-child { font: 700 10px "Hanken Grotesk"; letter-spacing: .6px; color: #9a9384; } .prov-divider__rule { flex: 1; height: 1.5px; background: #e2ddd0; } .prov-discount { font: 600 10px "Hanken Grotesk"; padding: 2px 8px; border-radius: 999px; background: #eef4f1; color: #2f6d5b; } .prov-card { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 2px 6px rgba(50,42,28,.04); margin-bottom: 26px; } .prov-row { display: flex; align-items: center; gap: 13px; padding: 14px 20px; border-bottom: 1.5px solid #f3f0e8; } .prov-row--last { border-bottom: none; } .prov-tile { width: 34px; height: 34px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; } .prov-row__main { flex: 1; min-width: 0; } .prov-row__name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; } .prov-row__model { color: #9a9384; margin-top: 2px; } .prov-def { font: 600 10px "Hanken Grotesk"; padding: 3px 9px; border-radius: 999px; background: #e8efe8; color: #2f6d5b; } .prov-keyok { display: inline-flex; align-items: center; gap: 4px; font: 600 10px "Hanken Grotesk"; color: #2f6d5b; } .prov-managed { font: 600 11px "Hanken Grotesk"; color: #9a9384; flex: none; } .prov-locked { display: flex; gap: 15px; align-items: flex-start; padding: 20px 22px; } .prov-locked__icon { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #f1ede4; color: #9a9384; display: flex; align-items: center; justify-content: center; font-size: 19px; } .prov-locked__text { flex: 1; } .prov-locked__title { font-family: "Newsreader", serif; font-size: 18px; font-weight: 500; margin-bottom: 4px; } .prov-locked__sub { font-size: 12.5px; line-height: 1.55; color: #6f6a5e; margin-bottom: 12px; } .prov-locked__sub strong { color: #3a352c; } .prov-locked__btn { display: inline-block; padding: 10px 16px; border-radius: 11px; background: #2f6d5b; color: #fff; font: 600 12.5px "Hanken Grotesk"; box-shadow: 0 3px 10px rgba(47,109,91,.25); } .prov-locked__btn:hover { background: #28604f; text-decoration: none; } .prov-byok { border-color: #cfe0d9; } .prov-byok__head { display: flex; align-items: center; gap: 13px; padding: 16px 20px; border-bottom: 1.5px solid #f0ece3; background: #f4f8f6; } .prov-byok__icon { width: 34px; height: 34px; flex: none; border-radius: 9px; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font-size: 16px; } .prov-byok__title { font-weight: 600; font-size: 13.5px; } .prov-byok__sub { font-size: 11.5px; color: #6f6a5e; } .prov-byok__row { display: flex; align-items: center; gap: 13px; padding: 14px 20px; border-bottom: 1.5px solid #f3f0e8; } .prov-byok__actions { display: flex; gap: 6px; flex: none; } .prov-btn { font: 600 11px "Hanken Grotesk"; padding: 6px 11px; border-radius: 8px; border: 1.5px solid #e6e1d6; background: #fff; color: #6f6a5e; cursor: pointer; } .prov-btn:hover { border-color: #cfe0d9; text-decoration: none; } .prov-byok__foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; } .prov-byok__add { font: 600 12px "Hanken Grotesk"; color: #2f6d5b; } .prov-foot { font-size: 11.5px; color: #9a9384; line-height: 1.55; margin-top: -14px; } /* Providers — BYOM provider picker + guided form. */ .prov-back { display: inline-block; font: 600 12px "Hanken Grotesk"; color: #6f6a5e; margin-bottom: 14px; } .prov-back:hover { color: #2f6d5b; text-decoration: none; } .prov-formcard { padding: 22px; } .prov-pick { display: flex; flex-direction: column; gap: 10px; max-width: 560px; } .prov-pick__card { display: flex; align-items: center; gap: 13px; border: 1.5px solid #e6e1d6; border-radius: 14px; background: #fff; padding: 15px 17px; color: inherit; } .prov-pick__card:hover { border-color: #cfe0d9; background: #fcfbf7; text-decoration: none; } .prov-pick__card.is-soon { opacity: .7; } .prov-pick__text { flex: 1; min-width: 0; } .prov-pick__name { font-weight: 600; font-size: 14px; } .prov-pick__hint { font-size: 11.5px; color: #9a9384; margin-top: 1px; } .prov-pick__auth { font: 600 10.5px "Hanken Grotesk"; color: #2f6d5b; background: #eef4f1; padding: 4px 9px; border-radius: 999px; flex: none; } .prov-pick__soon { font: 600 10px "Hanken Grotesk"; color: #9a9384; background: #f1ede4; padding: 4px 9px; border-radius: 999px; flex: none; } .prov-btn--danger { border-color: #e5c3ba; color: #b45b3e; } .prov-btn--danger:hover { border-color: #db9d8e; } /* Global app navigation shell (shared/_app_shell + layouts/app). Design: Delivery.dc.html — Option B (permanent icon spine + flyouts). At <=720px the spine gives way to a top bar + slide-in drawer instead (see the mobile nav block near the end of this file). */ /* dvh, not vh: on mobile browsers 100vh is the LARGE viewport (URL bar retracted), so with the bar showing the shell is taller than the visible area. The page then scrolls by the height of the browser chrome even when the content fits, carrying .mobile-topbar off the top. dvh tracks the viewport as the bar shows and hides. vh first as the fallback. */ .app-shell { display: flex; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; background: #efece4; } /* ── Icon spine (always present) ─────────────────────────────── */ .spine { width: 62px; flex: none; z-index: 12; border-right: 1.5px solid #ece8df; background: #f4f1ea; display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 5px; } .spine__mark { width: 32px; height: 32px; border-radius: 9px; flex: none; margin-bottom: 6px; overflow: hidden; cursor: pointer; border: none; box-shadow: 0 2px 7px rgba(47, 109, 91, .28); } .spine__mark img { width: 100%; height: 100%; display: block; object-fit: cover; } .spine__btn { width: 40px; height: 40px; border-radius: 11px; border: none; background: none; display: flex; align-items: center; justify-content: center; color: #6f6a5e; cursor: pointer; transition: background .12s, color .12s; } .spine__btn:hover { background: #ece7dd; } .spine__btn.is-active { background: #eef3f1; color: #2f6d5b; } .spine__btn--muted { color: #9a9384; } .spine__divider { width: 26px; height: 1.5px; background: #e0dacd; margin: 2px 0; } .spine__spacer { flex: 1; } .spine__new { width: 40px; height: 40px; border-radius: 11px; border: none; display: flex; align-items: center; justify-content: center; background: #2f6d5b; color: #fff; cursor: pointer; box-shadow: 0 3px 9px rgba(47, 109, 91, .28); transition: background .12s; } .spine__new:hover { background: #28604f; } .spine__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; border: none; margin-top: 6px; cursor: pointer; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font: 700 11px 'Hanken Grotesk', system-ui, sans-serif; } /* ── Main content area ───────────────────────────────────────── */ /* contain: stop a gesture that reaches the end of this scroller from chaining out to the document and dragging the shell (and the top bar) with it. */ .app-main { flex: 1; min-width: 0; overflow: auto; overscroll-behavior-y: contain; background: #efece4; } /* Sticky per-page top bar (design: Delivery.dc.html main top bar). */ .app-topbar { position: sticky; top: 0; z-index: 5; height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 22px; border-bottom: 1.5px solid #e6e1d6; background: rgba(245, 242, 236, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .app-topbar__title { font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; color: #26221b; } .app-topbar__spacer { flex: 1; } .app-topbar__actions { display: flex; align-items: center; gap: 8px; } /* A page under the top bar starts at the top, not vertically centered. */ .app-topbar + .jarvis-page { justify-content: flex-start; } /* Page hero — eyebrow + serif title + subtitle (Home/History/Routines). */ .page-hero__eyebrow { font-size: 12.5px; color: #9a9384; margin-bottom: 5px; } .page-hero__title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 30px; margin: 0 0 4px; color: #26221b; } .page-hero__sub { font-size: 13.5px; color: #6f6a5e; margin: 0 0 22px; } .page-hero__sub strong { color: #3a352c; font-weight: 600; } /* ── Flyouts (nav + account) ─────────────────────────────────── */ .flyout { position: fixed; inset: 0; z-index: 30; background: rgba(38, 34, 27, .12); display: none; } .flyout.is-open { display: block; } .acctflyout { position: absolute; left: 70px; bottom: 14px; width: 250px; background: #fff; border: 1.5px solid #e6e1d6; border-radius: 14px; box-shadow: 0 20px 50px rgba(50, 42, 28, .18); padding: 7px; } .acctflyout__head { display: flex; align-items: center; gap: 9px; padding: 8px 9px 10px; border-bottom: 1.5px solid #f0ece3; margin-bottom: 5px; } .acctflyout__head--link { border-radius: 10px; } .acctflyout__head--link:hover { background: #f4f1ea; text-decoration: none; } .acctflyout__row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: #26221b; font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; text-decoration: none; width: 100%; border: none; background: none; text-align: left; } .acctflyout__row:hover { background: #f4f1ea; text-decoration: none; } .acctflyout__row .meta { margin-left: auto; font-size: 10.5px; color: #9a9384; font-weight: 600; } .acctflyout__row--danger { color: #b45b3e; } .av { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font: 700 11px 'Hanken Grotesk', system-ui, sans-serif; } .av--sm { width: 28px; height: 28px; } .nav-name { font-weight: 600; font-size: 12.5px; color: #26221b; } .nav-sub { font-size: 11px; color: #9a9384; } .nav-ic { width: 18px; height: 18px; flex: none; } /* Icon sprite host */ .nav-sprite { position: absolute; width: 0; height: 0; } /* Impersonation banner — shown app-wide while an admin is "viewing as" a user. */ .imp-banner { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 9px 18px; background: #b45b3e; color: #fff; font: 600 12.5px "Hanken Grotesk"; box-shadow: 0 2px 8px rgba(50,42,28,.18); } .imp-banner strong { font-weight: 700; } .imp-banner__eye { font-size: 14px; } .imp-banner__spacer { flex: 1; } .imp-banner__stop { font: 600 11.5px "Hanken Grotesk"; padding: 6px 13px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.6); background: rgba(255,255,255,.14); color: #fff; cursor: pointer; } .imp-banner__stop:hover { background: rgba(255,255,255,.26); } /* ── Mobile top bar + nav drawer (<=720px) ─────────────────────── Replaces the icon spine: a hamburger opens .mobilenav as a slide-in drawer (reusing the .flyout backdrop/open mechanics used by the account flyout below), and the same avatar button reopens that existing flyout — repositioned for a top-anchored trigger instead of the spine's. */ .mobile-topbar { display: none; } .mobilenav { display: none; } @media (max-width: 720px) { .app-shell { flex-direction: column; } .spine { display: none; } .mobile-topbar { display: flex; align-items: center; gap: 10px; height: 52px; flex: none; padding: 0 14px; border-bottom: 1.5px solid #ece8df; background: #f4f1ea; z-index: 12; } .mobile-topbar__menu { width: 34px; height: 34px; flex: none; border: none; background: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #26221b; cursor: pointer; } .mobile-topbar__menu:hover { background: #ece7dd; } /* The page title and actions live here on mobile — .app-topbar is hidden at this width, so this is the only bar. */ .mobile-topbar__title { font-family: "Newsreader", serif; font-weight: 600; font-size: 17px; color: #26221b; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-topbar__actions { display: flex; align-items: center; gap: 8px; flex: none; } .mobile-topbar__spacer { flex: 1; } .app-topbar { display: none; } /* Reader: routine name + current version, doubling as the runs-drawer trigger, in place of the folded-away .reader-topbar. */ .mtop-ctx { display: flex; align-items: baseline; gap: 7px; min-width: 0; border: none; background: none; padding: 0; cursor: pointer; text-align: left; } .mtop-ctx__name { font-family: "Newsreader", serif; font-weight: 600; font-size: 17px; color: #26221b; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mtop-ctx__ver { flex: none; font: 600 11px "Hanken Grotesk"; color: #6f6a5e; } .mtop-ctx:active { opacity: .6; } .mobile-topbar__avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; border: none; cursor: pointer; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font: 700 11px "Hanken Grotesk", system-ui, sans-serif; } .mobilenav { display: flex; flex-direction: column; position: absolute; left: 0; top: 0; bottom: 0; width: 82%; max-width: 284px; background: #faf8f3; box-shadow: 6px 0 26px rgba(50,42,28,.22); padding: 14px 12px 18px; } .mobilenav__brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; color: #26221b; text-decoration: none; font-family: "Newsreader", serif; font-weight: 600; font-size: 17px; } .mobilenav__brand img { border-radius: 8px; box-shadow: 0 2px 7px rgba(47,109,91,.28); } .mobilenav__row { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px; color: #6f6a5e; text-decoration: none; font: 600 13.5px "Hanken Grotesk", system-ui, sans-serif; } .mobilenav__row:hover { background: #f1ede4; text-decoration: none; } .mobilenav__row.is-active { background: #eef3f1; color: #2f6d5b; } .mobilenav__spacer { flex: 1; } .mobilenav__cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 11px; background: #2f6d5b; color: #fff; text-decoration: none; font: 600 13.5px "Hanken Grotesk", system-ui, sans-serif; } .mobilenav__cta:hover { background: #28604f; text-decoration: none; } /* Reposition the account flyout to anchor under the mobile top bar's avatar (top-right) instead of the desktop spine's (bottom-left). */ .acctflyout { left: auto; right: 12px; bottom: auto; top: 60px; } } /* Home feed — "Latest across your routines" (design: Delivery.dc.html isHome). */ .home { max-width: 880px; margin: 0 auto; padding: var(--page-top) var(--page-gutter) 90px; } .home--empty { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .home--empty .jarvis-card { max-width: 420px; width: 100%; } .home__greet { font-size: 12.5px; color: #9a9384; margin-bottom: 5px; } .home__title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 30px; margin: 0 0 4px; color: #26221b; } .home__sub { font-size: 13.5px; color: #6f6a5e; margin: 0 0 24px; } .feed-card { display: block; text-decoration: none; color: inherit; border: 1.5px solid #e6e1d6; border-radius: 14px; background: #fff; padding: 16px 18px; margin-bottom: 12px; cursor: pointer; box-shadow: 0 2px 6px rgba(50, 42, 28, .05); transition: border-color .12s, box-shadow .12s; } .feed-card:hover { border-color: #cfe0d9; box-shadow: 0 8px 22px rgba(50, 42, 28, .08); text-decoration: none; } .feed-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .feed-card__routine { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; background: #eef4f1; color: #2f6d5b; } .feed-card__status { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; } .feed-card__status--success { background: #eef4f1; color: #2f6d5b; } .feed-card__status--failed { background: #fbf0ec; color: #b45b3e; } .feed-card__status--pending { background: #f1ede4; color: #8a8478; } .feed-card__time { margin-left: auto; font-size: 11.5px; color: #9a9384; white-space: nowrap; } .feed-card__title { font-family: 'Newsreader', serif; font-size: 19px; font-weight: 500; margin-bottom: 5px; color: #26221b; } .feed-card__snippet { font-size: 13.5px; line-height: 1.5; color: #6f6a5e; } .feed-empty { border: 1.5px dashed #ddd6c9; border-radius: 14px; padding: 28px; text-align: center; color: #8a8478; } .feed-empty p { margin: 0 0 14px; font-size: 13.5px; } .feed-empty__actions { display: flex; gap: 10px; justify-content: center; } /* History — searchable, date-grouped feed of every delivery. Design: Delivery.dc.html isHistory view. */ .hist { max-width: 880px; margin: 0 auto; padding: var(--page-top) var(--page-gutter) 90px; } /* All three controls share one height for a balanced search header. */ .hist-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; } .hist-search__field { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; max-width: 360px; height: 44px; padding: 0 14px; border: 1.5px solid #e6e1d6; border-radius: 11px; background: #fff; } .hist-search__field svg { width: 16px; height: 16px; color: #9a9384; flex: none; } .hist-search__field input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; font: 400 13.5px 'Hanken Grotesk', system-ui, sans-serif; color: #26221b; } .hist-search__field input::placeholder { color: #9a9384; } /* Select styled to match: same height/radius, custom chevron with breathing room. */ .hist-search__filter { height: 44px; max-width: 210px; margin: 0; padding: 0 38px 0 14px; border-radius: 11px; font-size: 13.5px; color: #26221b; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 13px center; } /* Search button matches the input height (was btn--sm, too small). */ .hist-search .btn { height: 44px; padding: 0 20px; border-radius: 11px; } .hist-day { font: 700 10.5px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .6px; color: #a49d8d; text-transform: uppercase; margin: 0 0 10px; } .hist-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; } .hist-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1.5px solid #e6e1d6; border-radius: 11px; background: #fff; cursor: pointer; text-decoration: none; color: inherit; transition: border-color .12s; } .hist-row:hover { border-color: #cfe0d9; text-decoration: none; } .hist-row__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9a9384; } .hist-row__dot--success { background: #2f6d5b; } .hist-row__dot--failed { background: #b45b3e; } .hist-row__dot--pending { background: #c8a24b; } .hist-row__chip { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 4px 9px; border-radius: 999px; background: #eef4f1; color: #2f6d5b; white-space: nowrap; flex: none; } .hist-row__title { flex: 1; min-width: 0; font-size: 13px; color: #3a352c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hist-row__meta { font-size: 11.5px; color: #9a9384; white-space: nowrap; flex: none; } .hist-empty { color: #8a8478; font-size: 13.5px; } /* Routines list — overview table (design: Delivery.dc.html isRoutinesView). */ .rt { max-width: 880px; margin: 0 auto; padding: var(--page-top) var(--page-gutter) 90px; } .rt-table { border: 1.5px solid #e6e1d6; border-radius: 14px; background: #fff; } .rt-head, .rt-row { display: flex; gap: 12px; align-items: center; padding: 12px 18px; } .rt-head { background: #faf8f3; border-radius: 14px 14px 0 0; font: 600 10.5px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .4px; color: #a49d8d; } .rt-row { border-top: 1.5px solid #f0ece3; } .rt-row:last-child { border-radius: 0 0 14px 14px; } .rt-row:hover { background: #faf8f3; } .rt-row.is-paused { opacity: .68; } /* Columns (header + rows share these widths) */ .rt-c-routine { flex: 1.6; display: flex; align-items: center; gap: 9px; min-width: 0; } .rt-c-schedule { width: 120px; flex: none; font-size: 12.5px; color: #6f6a5e; } .rt-c-provider { width: 96px; flex: none; } .rt-c-next { width: 96px; flex: none; font-size: 12px; color: #9a9384; } .rt-c-menu { width: 26px; flex: none; display: flex; justify-content: flex-end; } .rt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9a9384; } .rt-dot--on { background: #2f6d5b; } .rt-dot--paused { background: #c8a24b; } .rt-routine-link { min-width: 0; text-decoration: none; color: inherit; } .rt-routine-link:hover .rt-name { text-decoration: underline; } .rt-name { font-weight: 600; font-size: 13.5px; color: #26221b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-status { font-size: 11.5px; color: #9a9384; } .rt-provider-chip { font: 600 10.5px 'Hanken Grotesk', system-ui, sans-serif; padding: 4px 8px; border-radius: 999px; background: #efe9f2; color: #6a4c86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; } /* Row actions — native

menu (no JS), escapes the table via overflow. */ .rt-menu { position: relative; } .rt-menu > summary { list-style: none; cursor: pointer; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #9a9384; font-weight: 700; font-size: 16px; line-height: 1; } .rt-menu > summary::-webkit-details-marker { display: none; } .rt-menu > summary:hover { background: #ece7dd; color: #6f6a5e; } .rt-menu[open] > summary { background: #ece7dd; color: #2f6d5b; } .rt-menu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 172px; background: #fff; border: 1.5px solid #e6e1d6; border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px rgba(50, 42, 28, .16); display: flex; flex-direction: column; gap: 1px; } /* Uniform rows whether link_to () or button_to (