/* === CALM PAPER =========================================================== Aesthetic for the landing page and main dashboard. Cream paper, soft warm+cool radial mesh, single indigo accent, Fraunces serif headlines with italic accent, Inter body, JetBrains Mono for tiny eyebrows. Hairline rules instead of card borders. Scoped to so other pages (admin, exam, stats…) are unaffected. ========================================================================== */ /* Fonts (Geist / Geist Mono / Fraunces) are imported at the top of app/assets/tailwind/application.css so the @import is at the very head of the bundle. */ /* =========================================================================== DESIGN TOKENS — single source of truth for the whole app. These live at :root so that calm-paper components, the legacy application.css chrome, AND the Tailwind @theme remap (in app/assets/tailwind/application.css) all read from the same values. Change the palette here and it propagates everywhere. Keep the native iOS/Android CalmPaperTokens in lockstep. Current palette: "Plum Dusk" — refined aubergine accent on cool mauve-grey paper. See design/theme-explorer.html for sibling variants. =========================================================================== */ :root { /* Surfaces */ --paper: #f4f2f4; --paper-2: #e8e4ea; --paper-inset: #dfd9e2; --cp-card: #fcfbfd; /* lifted card surface for the dashboard deck */ /* Ink */ --ink: #1a1620; --ink-soft: #423a48; --ink-mute: #6c6474; --ink-faint: #938c9b; /* Hairlines */ --line: rgba(20, 20, 26, 0.08); --line-soft: rgba(20, 20, 26, 0.04); --rule: rgba(20, 20, 26, 0.14); /* Accent */ --accent: #7a3e86; --accent-hover: #683472; --accent-soft: rgba(122, 62, 134, 0.08); /* Semantic */ --good: #3f7d5a; --warn: #b0852f; --bad: #a8394f; /* Category / "mode" hues (GSSE practice dashboard, drills, analytics) */ --mode-1: #7a3e86; --mode-2: #4a6fa5; --mode-3: #a8394f; --mode-4: #b9952f; --mode-5: #2e8b74; /* Type families */ --font-ui: "Geist", "Inter", "Helvetica Neue", system-ui, sans-serif; --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; } /* On cp-page, all dark "ink" buttons need their text in paper-cream. The marketing layout's body adds text-slate-900 which otherwise overrides. */ .cp-page .cp-btn, .cp-page .cp-btn:hover, .cp-page .cp-nav__cta, .cp-page .cp-feature-row__cta, .cp-page .cp-resume-checkout__cta, .cp-page .dashboard-top-nav__create, .cp-page .dashboard-top-nav__create:hover { color: var(--paper); } /* ---- Page-level scope ---------------------------------------------------- */ .cp-page { /* Color tokens inherit from :root (single source of truth above). */ font-family: var(--font-ui); color: var(--ink); background: var(--paper); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; line-height: 1.55; } /* Dashboard-only ambient mesh — soft plum/blue/teal wash behind the card deck. Scoped via :has(.cp-deck) so every other cp-page surface stays flat. */ .cp-page:has(.cp-deck)::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 48% at 86% -6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(52% 42% at 2% 4%, color-mix(in srgb, var(--mode-2) 12%, transparent), transparent 58%), radial-gradient(72% 60% at 102% 104%, color-mix(in srgb, var(--mode-5) 12%, transparent), transparent 56%); } .cp-page ::selection { background: var(--accent); color: #fff; } .cp-page a { color: inherit; text-decoration: none; } /* The marketing footer is rendered on the landing — match the paper tone. */ .cp-page footer.bg-white, .cp-page .site-footer { background: transparent !important; border-top-color: var(--line) !important; } /* ---- Type tokens --------------------------------------------------------- */ .cp-serif { font-family: "Geist", "Inter", sans-serif; letter-spacing: -0.01em; } .cp-mono { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; } .cp-kicker { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; display: inline-block; } .cp-h1 { margin: 0; font-family: "Geist", "Inter", sans-serif; color: var(--ink); font-weight: 300; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.04em; } .cp-h1 em { font-style: italic; font-weight: 400; color: var(--accent); } .cp-h2 { margin: 0; font-family: "Geist", "Inter", sans-serif; color: var(--ink); font-weight: 300; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.03em; } .cp-h2 em { font-style: italic; font-weight: 400; color: var(--accent); } .cp-h3 { margin: 0; font-family: "Geist", "Inter", sans-serif; font-weight: 400; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); } .cp-h3 em { font-style: italic; color: var(--accent); font-weight: 400; } .cp-lede { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; margin: 0; } .cp-muted { color: var(--ink-mute); } .cp-faint { color: var(--ink-faint); } /* ---- Container ---------------------------------------------------------- */ .cp-container { max-width: 1240px; margin: 0 auto; padding: 0 36px; position: relative; z-index: 1; } .cp-narrow { max-width: 880px; } @media (max-width: 760px) { .cp-container { padding: 0 20px; } } /* ---- Rules -------------------------------------------------------------- */ .cp-rule { height: 1px; background: var(--line); margin: 32px 0; border: 0; } .cp-rule-soft { height: 1px; background: var(--line-soft); margin: 18px 0; border: 0; } /* ---- Buttons ------------------------------------------------------------ */ .cp-page .cp-btn, .cp-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-family: "Geist", "Inter", sans-serif; font-weight: 500; font-size: 14px; background: var(--accent); color: var(--paper); border: 1px solid var(--accent); transition: background 0.2s, transform 0.2s, border-color 0.2s; cursor: pointer; text-decoration: none; } .cp-page .cp-btn:hover, .cp-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--paper); transform: translateY(-1px); } .cp-page .cp-btn--ghost, .cp-btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); } .cp-page .cp-btn--ghost:hover, .cp-btn--ghost:hover { background: rgba(11, 11, 20, 0.04); color: var(--ink); border-color: rgba(11, 11, 20, 0.18); transform: translateY(-1px); } .cp-alink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); transition: color 0.2s, gap 0.2s; } .cp-alink::after { content: "→"; font-size: 14px; opacity: 0.6; } .cp-alink:hover { color: var(--accent); gap: 12px; } .cp-alink:hover::after { opacity: 1; } /* ---- Nav --------------------------------------------------------------- */ .cp-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 36px; max-width: 1240px; margin: 0 auto; } .cp-nav__brand { display: flex; align-items: center; gap: 12px; font-family: "Geist", "Inter", sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); } .cp-nav__brand .cp-nav__logo { width: auto; height: 22px; display: block; flex: 0 0 auto; } .cp-nav__brand .cp-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--ink), var(--accent)); } .cp-nav__brand em { font-style: italic; color: var(--accent); font-weight: 500; } .cp-nav__brand-stack { display: inline-flex; flex-direction: column; line-height: 1; gap: 2px; } .cp-nav__brand-name { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); } .cp-nav__brand-tag { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-style: italic; font-size: 11px; font-weight: 400; letter-spacing: 0.01em; color: var(--ink-soft, #5a5a66); opacity: 0.72; } .cp-nav__links { display: flex; gap: 6px; align-items: center; } .cp-nav__links a { padding: 8px 14px; font-size: 13px; color: var(--ink-soft); font-weight: 500; border-radius: 999px; transition: background 0.2s, color 0.2s; } .cp-nav__links a:hover { background: rgba(11, 11, 20, 0.05); color: var(--ink); } .cp-nav__links a.on { color: var(--accent); } .cp-nav__actions { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .cp-nav__auth-link { padding: 9px 4px; font-size: 13px; color: var(--ink-soft); font-weight: 500; transition: color 0.2s; } .cp-nav__auth-link:hover { color: var(--ink); } .cp-page .cp-nav__cta, .cp-nav__cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--accent); color: var(--paper) !important; border: 1px solid var(--accent); transition: background 0.2s, border-color 0.2s; text-decoration: none; } .cp-page .cp-nav__cta:hover, .cp-nav__cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .cp-nav__account { position: relative; } .cp-nav__avatar { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 4px 7px 4px 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); background: color-mix(in srgb, var(--paper) 88%, white); color: var(--ink); cursor: pointer; box-shadow: 0 1px 0 rgba(11, 11, 20, 0.04); transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s; } .cp-nav__avatar:hover, .cp-nav__avatar[aria-expanded="true"] { background: var(--paper); border-color: var(--ink-faint); box-shadow: 0 8px 24px rgba(11, 11, 20, 0.08); color: var(--accent); } .cp-nav__avatar span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; } .cp-nav__avatar-arrow { width: 13px; height: 13px; color: var(--ink-faint); transition: transform 0.2s; } .cp-nav__account-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: min(18rem, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); background: color-mix(in srgb, var(--paper) 94%, white); box-shadow: 0 18px 52px rgba(11, 11, 20, 0.14), 0 1px 0 rgba(255, 255, 255, 0.7) inset; } .cp-nav__account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 10px 6px; color: var(--ink-faint); font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; } .cp-nav__account-divider { height: 1px; margin: 6px 4px; background: var(--line); } .cp-nav__account-item, .cp-nav__account-form .cp-nav__account-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-soft); font-family: "Geist", "Inter", sans-serif; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; } .cp-nav__account-item:hover, .cp-nav__account-form .cp-nav__account-item:hover { background: rgba(11, 11, 20, 0.05); color: var(--ink); } .cp-nav__account-item--danger, .cp-nav__account-form .cp-nav__account-item--danger { color: #9f2f3f; } .cp-nav__account-item--danger:hover, .cp-nav__account-form .cp-nav__account-item--danger:hover { background: rgba(159, 47, 63, 0.08); color: #7f1d2d; } .cp-nav__account-icon { width: 17px; height: 17px; color: currentColor; flex: 0 0 auto; } .cp-nav__account-language { padding: 4px 10px 8px; } .cp-nav__account-language label { display: block; margin-bottom: 6px; color: var(--ink-faint); font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; } .cp-nav__locale-select { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink-soft); padding: 8px 10px; font-size: 13px; } .cp-nav__locale-select:focus { border-color: var(--accent); outline: 0; } /* Products hover dropdown in cp-nav */ .cp-nav__dropdown { position: relative; display: inline-flex; align-items: center; } .cp-nav__dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; font-size: 13px; color: var(--ink-soft); font-weight: 500; border-radius: 999px; transition: background 0.2s, color 0.2s; cursor: pointer; background: transparent; border: 0; font-family: inherit; } .cp-nav__dropdown-trigger svg { width: 12px; height: 12px; opacity: 0.55; transition: transform 0.2s, opacity 0.2s; } .cp-nav__dropdown:hover .cp-nav__dropdown-trigger, .cp-nav__dropdown-trigger.on { background: rgba(11, 11, 20, 0.05); color: var(--ink); } .cp-nav__dropdown:hover .cp-nav__dropdown-trigger svg { transform: rotate(180deg); opacity: 0.9; } .cp-nav__dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); z-index: 60; min-width: 240px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--paper) 94%, white); box-shadow: 0 18px 52px rgba(11, 11, 20, 0.12), 0 1px 0 rgba(255, 255, 255, 0.7) inset; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .cp-nav__dropdown::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; } .cp-nav__dropdown:hover .cp-nav__dropdown-menu, .cp-nav__dropdown:focus-within .cp-nav__dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .cp-nav__dropdown-item { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink-soft); text-decoration: none; transition: background 0.15s, color 0.15s; } .cp-nav__dropdown-item:hover { background: rgba(11, 11, 20, 0.05); color: var(--ink); } .cp-nav__dropdown-item__title { display: block; font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; } .cp-nav__dropdown-item__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-faint); } .cp-nav__dropdown-item:hover .cp-nav__dropdown-item__title { color: var(--accent); } @media (max-width: 760px) { .cp-nav { padding: 18px 20px; gap: 12px; flex-wrap: wrap; } .cp-nav__links { display: none; } .cp-nav__actions { margin-left: auto; } } /* The dashboard cp-nav header (top of _page.html.erb) is desktop-only. Tailwind's `hidden lg:flex` only flips the *display* of `hidden`; our `.cp-nav { display: flex }` rule defeats that hide. Wire it back. */ .cp-page header.cp-page-top.hidden { display: none; } @media (min-width: 1024px) { .cp-page header.cp-page-top.hidden { display: flex; } } /* ---- Sections ---------------------------------------------------------- */ .cp-section { padding: 80px 0; } .cp-section--tight { padding: 48px 0; } @media (max-width: 760px) { .cp-section { padding: 56px 0; } } .cp-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-bottom: 36px; } .cp-head h2 { max-width: 22ch; } /* ---- Landing hero ------------------------------------------------------ */ .cp-hero { padding: 120px 0; position: relative; overflow: clip; } @media (max-width: 760px) { .cp-hero { padding: 56px 0 64px; } } /* Decorative "dangling stethoscope" flourish — the brand motif from the native auth screens, recoloured to the accent on the paper hero. Sits behind the content (the .cp-container is z-index:1) and bleeds off the right edge. */ .cp-hero__steth { position: absolute; top: -28px; right: -48px; width: min(720px, 64%); height: auto; z-index: 0; color: var(--accent); pointer-events: none; } .cp-hero__steth svg { display: block; width: 100%; height: auto; } @media (max-width: 1080px) { .cp-hero__steth { top: auto; bottom: -44px; right: -70px; width: min(520px, 88%); opacity: 0.75; } } @media (max-width: 640px) { .cp-hero__steth { width: 420px; right: -120px; bottom: -24px; opacity: 0.5; } } .cp-hero__h1 { margin: 24px 0 28px; max-width: 14ch; } .cp-hero__lede { margin-bottom: 36px; max-width: 48ch; } .cp-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .cp-hero__signup-note { max-width: 42ch; margin: 14px 0 0; color: var(--ink-mute); font-size: 14px; line-height: 1.55; } .cp-hero__meta { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-left: 12px; } /* App-store download badges under the hero CTAs. */ .cp-hero__apps { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; } .cp-page .cp-store-badge, .cp-store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; min-height: 48px; border-radius: 12px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); text-decoration: none; transition: transform 0.2s, opacity 0.2s; } .cp-page .cp-store-badge:hover, .cp-store-badge:hover { transform: translateY(-1px); opacity: 0.9; color: var(--paper); } .cp-store-badge svg { width: 21px; height: 21px; flex: none; fill: currentColor; } .cp-store-badge__text { display: flex; flex-direction: column; line-height: 1.12; } .cp-store-badge__small { font-family: "Geist", "Inter", sans-serif; font-size: 10px; letter-spacing: 0.03em; opacity: 0.85; } .cp-store-badge__big { font-family: "Geist", "Inter", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; } @media (max-width: 540px) { .cp-hero__meta { margin-left: 0; margin-top: 8px; } } /* Two-column hero: copy on the left, rotating showcase on the right. */ .cp-hero:has(.cp-hero__grid) { padding: 64px 0 80px; } .cp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; } .cp-hero__copy { min-width: 0; } .cp-hero__media { display: flex; justify-content: center; } @media (max-width: 1080px) { .cp-hero__grid { grid-template-columns: 1fr; gap: 44px; } .cp-hero__media { justify-content: flex-start; } } @media (max-width: 640px) { .cp-hero__media { display: none; } } /* Compact rotating-demo block placed between product hero and station panel. */ .cp-product-showcase { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; } .cp-product-showcase__head { max-width: 28ch; } .cp-product-showcase__title { margin: 14px 0 0; font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); } .cp-product-showcase__body { display: flex; justify-content: flex-end; } @media (max-width: 1080px) { .cp-product-showcase { grid-template-columns: 1fr; gap: 32px; } .cp-product-showcase__body { justify-content: flex-start; } } @media (max-width: 640px) { .cp-product-showcase { display: none; } } .cp-shoulder { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 56px; color: var(--ink-mute); font-size: 13px; } .cp-shoulder > div { display: inline-flex; align-items: center; gap: 10px; } .cp-shoulder .cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .cp-shoulder .cp-dot.ink { background: var(--ink); } .cp-shoulder .cp-dot.faint { background: var(--ink-faint); } .cp-shoulder b { color: var(--ink); font-weight: 600; } /* ---- Three-column "what it does" -------------------------------------- */ .cp-threecol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding-top: 36px; border-top: 1px solid var(--line); } @media (max-width: 880px) { .cp-threecol { grid-template-columns: 1fr; gap: 32px; } } .cp-threecol h3 { margin: 14px 0 8px; } .cp-threecol p { font-size: 14px; line-height: 1.65; color: var(--ink-mute); margin: 0; } .cp-threecol .cp-num { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); } /* ---- Quote band -------------------------------------------------------- */ .cp-quote { padding: 96px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cp-quote p { font-family: "Geist", "Inter", sans-serif; font-weight: 300; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.25; color: var(--ink); max-width: 24ch; margin: 0; letter-spacing: -0.02em; } .cp-quote p em { font-style: italic; color: var(--accent); font-weight: 400; } .cp-quote .by { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 28px; display: block; } /* ---- Product rows ------------------------------------------------------ */ .cp-products .cp-row { display: grid; grid-template-columns: 60px 1.2fr 1.8fr auto auto; gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); transition: padding 0.25s; } .cp-products .cp-row:hover { padding-left: 8px; } @media (max-width: 880px) { .cp-products .cp-row { grid-template-columns: 60px 1fr; gap: 8px 18px; } .cp-products .cp-row .cp-desc { grid-column: 2; margin-top: 4px; } .cp-products .cp-row .cp-meta { grid-column: 2; margin-top: 6px; text-align: left; } .cp-products .cp-row .cp-arr { display: none; } } .cp-products .cp-num { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.22em; color: var(--ink-faint); text-transform: uppercase; padding-top: 6px; } .cp-products h3 { font-family: "Geist", "Inter", sans-serif; font-size: 28px; font-weight: 400; letter-spacing: -0.02em; margin: 0; } .cp-products h3 em { font-style: italic; color: var(--accent); font-weight: 400; } .cp-products .cp-desc { color: var(--ink-mute); font-size: 14px; line-height: 1.6; max-width: 48ch; } .cp-products .cp-meta { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; text-align: right; text-transform: uppercase; } .cp-products .cp-arr { font-family: "Geist", "Inter", sans-serif; font-style: italic; color: var(--ink-mute); font-size: 18px; transition: color 0.2s, transform 0.2s; align-self: center; } .cp-products .cp-row:hover .cp-arr { color: var(--accent); transform: translateX(4px); } /* ---- Audience directory (compact products strip) ----------------------- */ .cp-dir__title { font-family: "Geist", "Inter", sans-serif; font-weight: 400; font-size: 23px; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); margin: 0 0 28px; max-width: 30ch; } .cp-dir { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 26px; } .cp-dir__col h4 { margin: 0 0 11px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; color: var(--col, var(--ink)); } .cp-dir__col h4 a { display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s; } .cp-dir__col h4 a:hover { gap: 9px; } .cp-dir__col h4 a .x { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-style: italic; font-size: 12px; color: var(--ink-faint); opacity: 0; transition: opacity 0.2s; } .cp-dir__col h4 a:hover .x { opacity: 1; } .cp-dir__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .cp-dir__col li { font-size: 12px; color: var(--ink-mute); line-height: 1.35; display: flex; gap: 7px; align-items: flex-start; } .cp-dir__col li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--col, var(--ink-faint)); opacity: 0.5; flex: none; /* center the dot on the first line of text: (line-height - dot) / 2 */ margin-top: calc((1.35em - 4px) / 2); } .cp-dir__col li a { color: var(--ink-mute); border-bottom: 1px solid var(--line); transition: color 0.18s, border-color 0.18s; } .cp-dir__col li a:hover { color: var(--col, var(--accent)); border-color: var(--col, var(--accent)); } @media (max-width: 880px) { .cp-dir { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; } } @media (max-width: 480px) { .cp-dir { grid-template-columns: 1fr 1fr; } } /* ---- Method ------------------------------------------------------------ */ .cp-method { padding: 96px 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; } @media (max-width: 880px) { .cp-method { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; } } .cp-method--features-only { grid-template-columns: 1fr; } .cp-method--features-only .cp-method-list { width: min(100%, 760px); margin: 0 auto; } .cp-method-list { counter-reset: m; list-style: none; padding: 0; margin: 0; } .cp-method-list li { counter-increment: m; display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); } .cp-method-list li:last-child { border-bottom: 0; } .cp-method-list li::before { content: counter(m, decimal-leading-zero); font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.18em; padding-top: 4px; } .cp-method-list h4 { font-family: "Geist", "Inter", sans-serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 4px; } .cp-method-list p { font-size: 14px; color: var(--ink-mute); margin: 0; line-height: 1.6; max-width: 50ch; } /* ---- Manifesto / closing CTA ------------------------------------------ */ .cp-manifesto { padding: 140px 0; text-align: center; } @media (max-width: 760px) { .cp-manifesto { padding: 96px 0; } } .cp-manifesto h2 { margin: 18px auto 14px; max-width: 20ch; } .cp-manifesto p { max-width: 50ch; margin: 0 auto 32px; color: var(--ink-soft); font-size: 17px; line-height: 1.6; } .cp-manifesto .cp-meta { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 24px; display: block; } /* ---- Contact form (kept, but quieted) --------------------------------- */ .cp-contact-form { display: grid; gap: 14px; padding-top: 16px; } .cp-contact-form input, .cp-contact-form textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color 0.2s; font-family: inherit; } .cp-contact-form textarea { resize: vertical; min-height: 90px; } .cp-contact-form input::placeholder, .cp-contact-form textarea::placeholder { color: var(--ink-faint); } .cp-contact-form input:focus, .cp-contact-form textarea:focus { border-bottom-color: var(--ink); } .cp-flash { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); font-family: "Geist", "Inter", sans-serif; font-style: italic; } /* ---- Dashboard layout ------------------------------------------------- */ .cp-dash { display: grid; grid-template-columns: 220px 1fr; gap: 64px; max-width: 1240px; margin: 0 auto; padding: 24px 36px 96px; align-items: start; position: relative; z-index: 1; } @media (max-width: 980px) { .cp-dash { grid-template-columns: 1fr; gap: 32px; padding: 24px; } } /* sidebar — text only, sparse */ .cp-side { position: sticky; top: 24px; align-self: start; padding-right: 24px; border-right: 1px solid var(--line); } @media (max-width: 980px) { .cp-side { position: static; padding-right: 0; border-right: 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); } } .cp-side h5 { margin: 24px 0 10px; font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } .cp-side h5:first-child { margin-top: 0; } .cp-side ul { list-style: none; margin: 0; padding: 0; } .cp-side li { padding: 0; } .cp-side a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 0; color: var(--ink-mute); font-size: 14px; line-height: 1.4; transition: color 0.15s, padding 0.2s; } .cp-side a:hover { color: var(--ink); padding-left: 6px; } .cp-side a.on { color: var(--accent); padding-left: 6px; } .cp-side a.on::before { content: "·"; color: var(--accent); margin-right: 8px; font-weight: 700; margin-left: -12px; } .cp-side a span.cp-meta { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; } .cp-side a.on span.cp-meta { color: var(--accent); } .cp-you { margin-top: 32px; padding: 16px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; text-decoration: none; } .cp-you .av { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: "Geist", "Inter", sans-serif; font-weight: 500; font-size: 14px; flex-shrink: 0; } .cp-you .nm { font-size: 13px; color: var(--ink); font-weight: 500; } .cp-you .ml { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-faint); letter-spacing: 0.06em; margin-top: 2px; } /* dashboard head */ .cp-dhead { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin-bottom: 40px; } @media (max-width: 760px) { .cp-dhead { grid-template-columns: 1fr; } } .cp-dhead h1 { font-family: "Geist", "Inter", sans-serif; font-size: clamp(40px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.035em; font-weight: 300; margin: 14px 0 0; color: var(--ink); } .cp-dhead h1 em { font-style: italic; font-weight: 400; color: var(--accent); } .cp-dhead .sub { color: var(--ink-mute); margin: 8px 0 0; font-size: 15px; } .cp-dhead .strip { display: flex; gap: 24px; flex-wrap: wrap; color: var(--ink-mute); font-size: 13px; align-self: end; } .cp-dhead .strip .item { display: inline-flex; align-items: center; gap: 8px; } .cp-dhead .strip .cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .cp-dhead .strip .cp-dot.ink { background: var(--ink); } .cp-dhead .strip .cp-dot.faint { background: var(--ink-faint); } .cp-dhead .strip b { color: var(--ink); font-weight: 600; } /* resume */ .cp-resume { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 40px; transition: padding 0.25s; color: inherit; } .cp-resume:hover { padding-left: 8px; } .cp-resume .lbl { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; } .cp-resume .ttl { font-family: "Geist", "Inter", sans-serif; font-weight: 400; font-size: 22px; letter-spacing: -0.015em; margin: 6px 0 4px; color: var(--ink); } .cp-resume .stem { font-family: "Geist", "Inter", sans-serif; font-style: italic; color: var(--ink-mute); font-size: 14px; margin: 0; } .cp-resume .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; flex-shrink: 0; } .cp-resume .ic svg { width: 14px; height: 14px; margin-left: 1px; } .cp-resume .cta { font-family: "Geist", "Inter", sans-serif; font-weight: 500; font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s, gap 0.2s; } .cp-resume:hover .cta { color: var(--accent); gap: 10px; } /* Resume checkout banner (pending plan) — keep functional, restyle */ .cp-resume-checkout { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 24px 0; } .cp-resume-checkout__body { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .cp-resume-checkout__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; } .cp-resume-checkout__title { font-family: "Geist", "Inter", sans-serif; font-weight: 500; font-size: 16px; margin: 0 0 2px; color: var(--ink); } .cp-resume-checkout__sub { font-size: 13px; color: var(--ink-mute); margin: 0; } .cp-resume-checkout__cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background 0.2s, border-color 0.2s; } .cp-resume-checkout__cta:hover { background: var(--accent); border-color: var(--accent); } /* No-plan callout — quiet hairline-bordered row */ .cp-noplan { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 24px 0; } .cp-noplan__body { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .cp-noplan__icon { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; } .cp-noplan__text { font-size: 14px; color: var(--ink-soft); font-family: "Geist", "Inter", sans-serif; font-style: italic; margin: 0; max-width: 60ch; } /* preview notice (unauth) */ .cp-notice { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 24px 0; font-size: 14px; font-family: "Geist", "Inter", sans-serif; font-style: italic; color: var(--ink-soft); } /* ask composer (study-companion) */ .cp-ask { margin-bottom: 48px; } .cp-ask__form { display: flex; align-items: center; gap: 14px; padding: 18px 4px; border-bottom: 1px solid var(--ink); } .cp-ask__form::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .cp-ask__input { flex: 1; background: transparent; border: 0; outline: 0; font: inherit; font-family: "Geist", "Inter", sans-serif; font-style: italic; font-weight: 300; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; resize: none; line-height: 1.4; padding: 0; } .cp-ask__input::placeholder { color: var(--ink-faint); } .cp-ask__send { width: 36px; height: 36px; border-radius: 50%; background: transparent; color: var(--ink-mute); border: 1px solid var(--rule); display: grid; place-items: center; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0; } .cp-ask__send:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* chips & scrolling prompts (calm-paper variant) */ .cp-chips { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; } .cp-chips a, .cp-chips button { font-family: "Geist", "Inter", sans-serif; font-style: italic; font-size: 14px; color: var(--ink-mute); background: transparent; border: 0; border-bottom: 1px dotted transparent; padding: 0 0 1px; cursor: pointer; transition: color 0.15s, border-color 0.15s; text-align: left; } .cp-chips a:hover, .cp-chips button:hover { color: var(--accent); border-color: var(--accent); } /* override scrolling-prompts container to fit the paper aesthetic */ .cp-page .scrolling-prompts-container { border-top: 1px solid var(--line); background: transparent; padding-top: 14px; padding-bottom: 14px; overflow: hidden; } .cp-page .scrolling-prompts-container > p { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; padding-left: 0; padding-right: 0; } .cp-page .scrolling-prompt-pill { background: transparent !important; border: 0 !important; border-bottom: 1px dotted rgba(11, 11, 20, 0.18) !important; border-radius: 0 !important; padding: 2px 0 4px !important; margin: 0 18px; font-family: "Geist", "Inter", sans-serif !important; font-style: italic; font-weight: 400; font-size: 14px !important; color: var(--ink-mute) !important; white-space: nowrap; box-shadow: none !important; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .cp-page .scrolling-prompt-pill:hover { color: var(--accent) !important; border-color: var(--accent) !important; transform: none !important; } /* practice modes */ .cp-practice { padding-top: 24px; border-top: 1px solid var(--line); } .cp-practice.cp-practice--lead { padding-top: 0; border-top: 0; } .cp-practice__actions { display: flex; justify-content: flex-start; margin-bottom: 22px; } .cp-practice .cp-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; } .cp-practice .right { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } /* Section header labels read in sentence case, not all-caps. */ .cp-label-row .cp-kicker, .cp-label-row .right { text-transform: none; letter-spacing: 0.04em; } /* =========================================================================== PRACTICE / TOOL CARDS — "Focus" deck. Shared by every product workspace. .cp-practice--lead → primary practice cards (colour-coded chips) .cp-practice (no --lead) → secondary "More" tools (neutral, compact) =========================================================================== */ .cp-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; } @media (max-width: 900px) { .cp-modes { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 480px) { .cp-modes { grid-template-columns: 1fr; } } /* The "quick start" wrapper becomes a flex shell so its card fills the cell. */ .cp-mode-wrap { position: relative; display: flex; } .cp-mode-wrap > .cp-mode { flex: 1; } .cp-mode-wrap--feature { grid-column: span 2; } @media (max-width: 480px) { .cp-mode-wrap--feature { grid-column: span 1; } } .cp-mode { --mode-accent: var(--accent); position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 138px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--cp-card); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; color: var(--ink); overflow: hidden; transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease; } .cp-mode:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(26, 22, 32, 0.5); border-color: color-mix(in srgb, var(--mode-accent) 30%, var(--line)); } .cp-mode:focus-visible { outline: 0; border-color: var(--mode-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-accent) 22%, transparent); } .cp-mode .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient( 135deg, color-mix(in srgb, var(--mode-accent), white 16%), color-mix(in srgb, var(--mode-accent), black 14%) ); box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--mode-accent) 75%, transparent); transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1); } .cp-mode .ic svg { width: 21px; height: 21px; } .cp-mode:hover .ic { transform: scale(1.07) rotate(-5deg); } .cp-mode .ttl { margin: auto 0 0; font-family: var(--font-ui); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; line-height: 1.2; } .cp-mode .ttl em { font-style: italic; color: var(--accent); } .cp-mode .sub { font-size: 13px; color: var(--ink-mute); margin-top: 4px; line-height: 1.4; } .cp-mode .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; } .cp-mode .meta.on { color: var(--accent); } .cp-mode--compact { /* legacy hook — base card already handles layout */ } /* Non-interactive panel (e.g. the review-tips card): same look as .cp-mode but no hover lift/shadow/accent — it isn't a link. */ .cp-mode--static { min-height: 0; cursor: default; } .cp-mode--static:hover { transform: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; border-color: var(--line); } .cp-mode--static:hover .ic { transform: none; } /* Per-card accent cycling — only the primary practice deck is colour-coded. Each rule targets the grid child AND a wrapped inner card, because .cp-mode declares its own --mode-accent (which would otherwise block inheritance). */ .cp-practice--lead .cp-modes > :nth-child(5n + 1), .cp-practice--lead .cp-modes > :nth-child(5n + 1) > .cp-mode { --mode-accent: var(--mode-1); } .cp-practice--lead .cp-modes > :nth-child(5n + 2), .cp-practice--lead .cp-modes > :nth-child(5n + 2) > .cp-mode { --mode-accent: var(--mode-2); } .cp-practice--lead .cp-modes > :nth-child(5n + 3), .cp-practice--lead .cp-modes > :nth-child(5n + 3) > .cp-mode { --mode-accent: var(--mode-5); } .cp-practice--lead .cp-modes > :nth-child(5n + 4), .cp-practice--lead .cp-modes > :nth-child(5n + 4) > .cp-mode { --mode-accent: var(--mode-4); } .cp-practice--lead .cp-modes > :nth-child(5n + 5), .cp-practice--lead .cp-modes > :nth-child(5n + 5) > .cp-mode { --mode-accent: var(--mode-3); } /* Feature card — 2-wide hero tile (e.g. oscelab SimPatient). */ .cp-mode--feature { display: grid; grid-template-columns: 50px 1fr; column-gap: 16px; align-content: center; background: linear-gradient( 135deg, var(--cp-card), color-mix(in srgb, var(--accent) 9%, var(--cp-card)) ); } .cp-mode--feature .ic { width: 50px; height: 50px; grid-row: 1 / span 3; align-self: center; } .cp-mode--feature .ttl { grid-column: 2; margin: 0; font-size: 21px; } .cp-mode--feature .sub { grid-column: 2; max-width: 46ch; } .cp-mode--feature .meta { grid-column: 2; } /* "Quick start" chip — pinned to the card's top-right corner. */ .cp-mode-wrap--has-quick > .cp-mode { padding-top: 18px; padding-right: 18px; } /* Scoped under .cp-page so the white text out-ranks `.cp-page a { color: inherit }`. */ .cp-page .cp-mode__quick { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: lowercase; color: #fff; padding: 7px 11px; border: 0; border-radius: 9px; background: var(--accent); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform 0.18s ease, background 0.18s ease; white-space: nowrap; line-height: 1; } .cp-page .cp-mode__quick:hover { transform: translateY(-2px); background: var(--accent-hover); } /* Secondary "More" tools — compact, neutral chips in a denser grid. */ .cp-practice:not(.cp-practice--lead) .cp-modes { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } @media (max-width: 480px) { .cp-practice:not(.cp-practice--lead) .cp-modes { grid-template-columns: 1fr; } } .cp-practice:not(.cp-practice--lead) .cp-mode { display: grid; grid-template-columns: 34px 1fr; grid-auto-rows: min-content; column-gap: 12px; align-content: center; min-height: 0; padding: 15px 16px; } .cp-practice:not(.cp-practice--lead) .cp-mode .ic { grid-row: 1 / 3; align-self: center; width: 34px; height: 34px; border-radius: 10px; background: var(--paper-2); color: var(--ink-soft); box-shadow: none; } .cp-practice:not(.cp-practice--lead) .cp-mode:hover .ic { background: var(--accent); color: #fff; transform: none; } .cp-practice:not(.cp-practice--lead) .cp-mode .ic svg { width: 17px; height: 17px; } .cp-practice:not(.cp-practice--lead) .cp-mode .ttl { grid-column: 2; margin: 0; align-self: end; font-size: 14.5px; } .cp-practice:not(.cp-practice--lead) .cp-mode .meta { grid-column: 2; align-self: start; margin: 1px 0 0; } /* The static review-tips panel must NOT adopt the 34px-icon + title grid that the non-lead deck applies to its tool tiles — it has no icon, so its copy would otherwise be squeezed into the 34px first column (one word per line). Render it as a normal flowing block instead. */ .cp-practice:not(.cp-practice--lead) .cp-mode--static { display: block; } /* GSSE dashboard: one fully clickable exam entry before question modes */ .cp-exam-card { display: grid; grid-template-columns: 42px 1fr auto; gap: 18px; align-items: center; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--cp-card); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; margin-bottom: 24px; color: var(--ink); transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease; } .cp-exam-card--quiz { grid-template-columns: 48px 1fr; gap: 20px; padding: 26px 24px; background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 11%, var(--cp-card)), var(--cp-card) 70% ); } .cp-exam-card.cp-exam-card--quiz:hover, .cp-exam-card.cp-exam-card--quiz:focus-visible, .cp-exam-card:hover, .cp-exam-card:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(26, 22, 32, 0.5); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); outline: 0; } .cp-exam-card__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .cp-exam-card--quiz .cp-exam-card__icon { border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .cp-exam-card__title { font-family: "Geist", "Inter", sans-serif; font-weight: 400; font-size: 22px; letter-spacing: -0.015em; margin: 0; color: var(--ink); } .cp-exam-card__action { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background 0.2s, border-color 0.2s, gap 0.2s; } .cp-exam-card__action--blue { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); color: var(--accent); } .cp-exam-card__action--blue:hover, .cp-exam-card__action--blue:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); color: var(--accent); gap: 10px; outline: 0; } .cp-exam-card:hover .cp-exam-card__action, .cp-exam-card:focus-visible .cp-exam-card__action { background: var(--accent); border-color: var(--accent); gap: 10px; } @media (max-width: 640px) { .cp-exam-card { grid-template-columns: 38px 1fr; gap: 14px; } .cp-exam-card__icon { width: 38px; height: 38px; } .cp-exam-card__action { grid-column: 2; justify-self: start; } .cp-practice__actions { justify-content: flex-start; } } /* exam mode highlight (gsse) */ .cp-feature-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 18px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px; transition: padding 0.25s; } .cp-feature-row:hover { padding-left: 8px; } .cp-feature-row__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .cp-feature-row__title { font-family: "Geist", "Inter", sans-serif; font-weight: 400; font-size: 22px; letter-spacing: -0.015em; margin: 0 0 4px; color: var(--ink); } .cp-feature-row__title em { font-style: italic; color: var(--accent); } .cp-feature-row__sub { font-size: 14px; color: var(--ink-mute); margin: 0; max-width: 60ch; } .cp-feature-row__cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background 0.2s, border-color 0.2s, gap 0.2s; } .cp-feature-row__cta:hover { background: var(--accent); border-color: var(--accent); gap: 10px; } /* exam results list (gsse) */ .cp-results { padding: 0; } .cp-results h3 { font-family: "Geist", "Inter", sans-serif; font-weight: 400; font-size: 24px; margin: 0 0 18px; letter-spacing: -0.015em; } .cp-results h3 em { font-style: italic; color: var(--accent); } .cp-results ol { list-style: none; margin: 0; padding: 0; counter-reset: rl; } .cp-results li { counter-increment: rl; display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); transition: padding 0.25s; } .cp-results li:hover { padding-left: 6px; } .cp-results li::before { content: counter(rl, decimal-leading-zero); font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.1em; padding-top: 4px; } .cp-results .ttl { font-family: "Geist", "Inter", sans-serif; font-weight: 400; font-size: 17px; margin: 0; letter-spacing: -0.005em; } .cp-results .sub { font-family: "Geist", "Inter", sans-serif; font-style: italic; color: var(--ink-mute); font-size: 13px; margin: 2px 0 0; } .cp-results .pct { font-family: "Geist", "Inter", sans-serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; align-self: center; text-align: right; } .cp-results .pct.good { color: var(--accent); } .cp-results .pct.warn { color: #c08a2e; } .cp-results .pct.poor { color: #9b3a3a; } .cp-results .pct .raw { display: block; font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-faint); letter-spacing: 0.06em; font-weight: 400; margin-top: 2px; } /* fade-in keyframes (reused from preview) */ @keyframes cp-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .cp-fade-in { animation: cp-fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .cp-fade-in.delay-1 { animation-delay: 0.08s; } .cp-fade-in.delay-2 { animation-delay: 0.16s; } .cp-fade-in.delay-3 { animation-delay: 0.24s; } .cp-fade-in.delay-4 { animation-delay: 0.32s; } .cp-fade-in.delay-5 { animation-delay: 0.40s; } /* Footer override on cp-page */ .cp-foot { padding: 48px 36px; max-width: 1240px; margin: 80px auto 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-mute); border-top: 1px solid var(--line); } .cp-foot .cp-mono { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } /* Hide the app's default top nav and footer chrome on cp-page so the landing/dashboard own their own quiet nav. The dashboard mobile menu stays (it's inside the page partial, not the app nav). */ .cp-page > body > nav.app-nav, .cp-page nav.app-nav { display: none !important; } .cp-page footer { display: none !important; } .cp-page footer.cp-foot { display: flex !important; } /* Make existing native banners / tab bars sit on the paper background. */ .cp-page .native-tab-bar, .cp-page .native-auth-banner { background: var(--paper) !important; } /* ---- Space selection ---------------------------------------------------- */ .cp-space-nav { border-bottom: 1px solid var(--line); } .cp-space-select { min-height: calc(100vh - 88px); padding: 76px 0 96px; } .cp-space-select__head { max-width: 680px; margin-bottom: 42px; } .cp-space-select__head .cp-h2 { margin-top: 16px; max-width: 12ch; } .cp-space-select__head .cp-lede { margin-top: 18px; } .cp-space-picker { border-top: 1px solid var(--line); } .cp-space-picker__form { margin: 0; } .cp-space-picker__row { display: grid; grid-template-columns: 56px 42px minmax(0, 1fr) auto; align-items: center; gap: 22px; width: 100%; min-height: 116px; padding: 26px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; } .cp-space-picker__row:hover, .cp-space-picker__row:focus-visible { color: var(--accent); border-bottom-color: var(--rule); outline: 0; } .cp-space-picker__row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-soft); } .cp-space-picker__row--locked { color: var(--ink-mute); cursor: pointer; } .cp-space-picker__row--locked:hover, .cp-space-picker__row--locked:focus-visible { color: var(--ink); } .cp-space-picker__num { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--ink-faint); } .cp-space-picker__icon { display: grid; place-items: center; width: 34px; height: 34px; color: currentColor; } .cp-space-picker__icon svg { width: 26px; height: 26px; } .cp-space-picker__body { display: grid; gap: 5px; min-width: 0; } .cp-space-picker__name { font-family: "Geist", "Inter", sans-serif; font-size: 32px; line-height: 1.05; font-weight: 400; color: var(--ink); } .cp-space-picker__row:hover .cp-space-picker__name, .cp-space-picker__row:focus-visible .cp-space-picker__name { color: var(--accent); } .cp-space-picker__row--locked .cp-space-picker__name { color: var(--ink-soft); } .cp-space-picker__tagline { max-width: 54ch; color: var(--ink-mute); font-size: 14px; line-height: 1.55; } .cp-space-picker__action { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 96px; color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; transition: gap 0.2s ease, color 0.18s ease; } .cp-space-picker__row:hover .cp-space-picker__action, .cp-space-picker__row:focus-visible .cp-space-picker__action { gap: 12px; color: var(--accent); } .cp-space-picker__action svg { width: 15px; height: 15px; } .cp-space-picker__row--locked .cp-space-picker__action { color: var(--ink-mute); } .cp-space-select__note { margin: 18px 0 0; color: var(--ink-faint); font-size: 13px; } @media (max-width: 760px) { .cp-space-select { min-height: auto; padding: 44px 0 72px; } .cp-space-select__head { margin-bottom: 32px; } .cp-space-picker__row { grid-template-columns: 42px minmax(0, 1fr); gap: 10px 16px; min-height: 0; padding: 24px 0; } .cp-space-picker__num { grid-column: 1; grid-row: 1; } .cp-space-picker__icon { grid-column: 1; grid-row: 2; justify-self: start; } .cp-space-picker__body { grid-column: 2; grid-row: 1 / span 2; } .cp-space-picker__action { grid-column: 2; min-width: 0; justify-content: flex-start; margin-top: 4px; } .cp-space-picker__name { font-size: 24px; } } /* Dashboard chrome (.dashboard-sidebar / .dashboard-menu-bar) renders with its original Tailwind-driven styling on cp-page — no overrides */ /* ---- Stats page (progress/ledger) — gentle blend with cp-page ----------- */ /* The stats page renders its existing progress.css markup. We only soften surfaces, typography, and accents so it sits naturally on the paper. */ .cp-page .progress-page--ledger { background: transparent !important; } /* Title block: Fraunces serif, mono kicker */ .cp-page .ledger-header__title { font-family: "Geist", "Inter", sans-serif !important; font-weight: 300 !important; letter-spacing: -0.025em !important; color: var(--ink) !important; } .cp-page .ledger-header__kicker, .cp-page .ledger-header__dates, .cp-page .coach-section__kicker, .cp-page .ledger-activity__kicker, .cp-page .ledger-body__kicker { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--ink-faint) !important; font-weight: 500 !important; } /* Section titles: Fraunces */ .cp-page .ledger-body__title, .cp-page .ledger-activity__panel-title, .cp-page .ledger-focus-panel__title { font-family: "Geist", "Inter", sans-serif !important; font-weight: 400 !important; letter-spacing: -0.015em !important; color: var(--ink) !important; } /* 7D / 30D / 90D / ALL window pills */ .cp-page .ledger-header__windows { border-radius: 999px !important; padding: 4px !important; background: transparent !important; border: 1px solid var(--rule) !important; gap: 0 !important; } .cp-page .ledger-header__window-pill { border-radius: 999px !important; font-size: 12px !important; letter-spacing: 0.02em !important; padding: 8px 14px !important; background: transparent !important; color: var(--ink-mute) !important; border: 0 !important; } .cp-page .ledger-header__window-pill[aria-pressed="true"] { background: var(--ink) !important; color: var(--paper) !important; } /* Coach insight cards: white → paper-2, soften shadow, hairline border */ .cp-page .coach-section__cards > * { background: var(--paper-2) !important; border: 1px solid var(--line) !important; box-shadow: none !important; border-radius: 14px !important; } .cp-page .coach-section__cards .coach-section__action, .cp-page .coach-section__cards button { background: var(--ink) !important; color: var(--paper) !important; border: 1px solid var(--ink) !important; border-radius: 999px !important; font-weight: 500 !important; } .cp-page .coach-section__cards button:hover { background: var(--accent) !important; border-color: var(--accent) !important; } /* The dismiss × button stays neutral */ .cp-page .coach-section__cards button[aria-label*="ismiss" i], .cp-page .coach-section__cards .coach-section__dismiss { background: transparent !important; color: var(--ink-faint) !important; border: 0 !important; } /* KPI strip: Fraunces numbers, no card bg */ .cp-page .progress-kpis, .cp-page .progress-kpi { background: transparent !important; border: 0 !important; box-shadow: none !important; } .cp-page .progress-kpi__num { font-family: "Geist", "Inter", sans-serif !important; font-weight: 300 !important; letter-spacing: -0.035em !important; color: var(--ink) !important; } .cp-page .progress-kpi__label { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--ink-faint) !important; font-weight: 500 !important; font-size: 10px !important; } /* Specialty / focus / trend panels: drop heavy white card backgrounds */ .cp-page .ledger-body__col, .cp-page .ledger-focus-panel, .cp-page .ledger-activity__panel, .cp-page .ledger-insights { background: transparent !important; border-color: var(--line) !important; box-shadow: none !important; } /* Section dividers — make hairline */ .cp-page .ledger-body, .cp-page .ledger-activity, .cp-page .ledger-insights, .cp-page .coach-section, .cp-page .ledger-header { border-color: var(--line) !important; } /* Generic links / accent hovers */ .cp-page .ledger-body__more:hover, .cp-page .ledger-body__toggle:hover, .cp-page .ledger-focus-tabs__btn[aria-pressed="true"] { color: var(--accent) !important; } /* ---- Listings (simpatients / drills / MCQ / flashcards / etc.) ---------- */ /* Adopts calm-paper typography + surfaces while keeping all functional markup. */ .cp-page .listing-page { --listing-bg: transparent; --listing-surface: var(--paper-2); --listing-surface-soft: rgba(255, 255, 255, 0.4); --listing-border: var(--line); --listing-border-strong: var(--rule); --listing-ink: var(--ink); --listing-ink-soft: var(--ink-mute); --listing-ink-faint: var(--ink-faint); --listing-brand: var(--ink); --listing-brand-hover: var(--accent); --listing-primary: var(--accent); --listing-accent: var(--accent); } /* Header */ .cp-page .listing-eyebrow { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--ink-faint) !important; font-weight: 500 !important; } .cp-page .listing-title { font-family: "Geist", "Inter", sans-serif !important; font-weight: 300 !important; font-size: clamp(28px, 3.2vw, 40px) !important; letter-spacing: -0.025em !important; line-height: 1.08 !important; color: var(--ink) !important; } .cp-page .listing-header--compact { margin-bottom: 1rem !important; } .cp-page .listing-header--compact .listing-title { font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.12 !important; } .cp-page .listing-subtitle { color: var(--ink-soft) !important; font-size: 15px !important; line-height: 1.55 !important; } /* Hero stats (TOTAL QUESTIONS / ATTEMPTED / MEAN ACCURACY etc.) */ .cp-page .listing-stat__num { font-family: "Geist", "Inter", sans-serif !important; font-weight: 300 !important; letter-spacing: -0.035em !important; color: var(--ink) !important; } .cp-page .listing-stat__label { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace !important; font-size: 10px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--ink-faint) !important; } /* List cards (drills, MCQ recent activity, etc.) */ .cp-page .listing-list-card, .cp-page .listing-card { background: var(--paper-2) !important; border: 1px solid var(--line) !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s; } .cp-page .listing-list-card:hover, .cp-page .listing-card:hover { background: rgba(255, 255, 255, 0.55) !important; border-color: var(--rule) !important; box-shadow: none !important; } .cp-page .listing-list-card__title, .cp-page .listing-card__title { font-family: "Geist", "Inter", sans-serif !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: var(--ink) !important; } /* Filter bar — softer pills */ .cp-page .listing-chip { border-color: var(--line) !important; background: transparent !important; color: var(--ink-mute) !important; } .cp-page .listing-chip:hover { background: rgba(20, 20, 26, 0.04) !important; color: var(--ink) !important; border-color: var(--rule) !important; } .cp-page .listing-chip[aria-pressed="true"], .cp-page .listing-chip[aria-selected="true"] { background: var(--accent) !important; color: var(--paper) !important; border-color: var(--accent) !important; } .cp-page .listing-chip-group__label { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: 0.18em !important; color: var(--ink-faint) !important; font-weight: 500 !important; } .cp-page .listing-search__input { background: var(--paper-2) !important; border-color: var(--line) !important; color: var(--ink) !important; } .cp-page .listing-search__input:focus { background: rgba(255, 255, 255, 0.55) !important; border-color: var(--rule) !important; outline: 0 !important; box-shadow: none !important; } /* Primary brand button (Random question, Start practice, etc.) */ .cp-page .listing-btn--primary { background: var(--accent) !important; color: var(--paper) !important; border-color: var(--accent) !important; box-shadow: 0 10px 22px -14px rgba(122, 62, 134, 0.95) !important; } .cp-page .listing-btn--primary:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; box-shadow: 0 14px 28px -16px rgba(72, 61, 232, 1) !important; } .cp-page .listing-btn--ghost { background: transparent !important; color: var(--ink-soft) !important; border-color: var(--rule) !important; } .cp-page .listing-btn--ghost:hover { background: rgba(20, 20, 26, 0.04) !important; color: var(--ink) !important; border-color: var(--rule) !important; } /* Section title used inside listings (e.g. "EMERGENCY MEDICINE") */ .cp-page .listing-section__label, .cp-page .listing-group__label { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--ink-faint) !important; font-weight: 500 !important; } /* "Recent activity" header & rows */ .cp-page .listing-activity__title, .cp-page .listing-activity__heading { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--ink-faint) !important; font-weight: 500 !important; } /* ---- Practice players and small app chrome ----------------------------- */ /* MCQ, drills, flashcards, viva, exam mode, and SimPatient keep their existing markup/controllers. These rules only replace the heavy white and fuchsia treatment with the paper, hairline, and ink/accent language above. */ .cp-page .dashboard-menu-bar { background: color-mix(in srgb, var(--paper) 90%, white) !important; border-color: var(--line) !important; border-radius: 16px !important; box-shadow: none !important; } .cp-page .dashboard-menu-hamburger, .cp-page .dashboard-menu-bar a[href] { color: var(--ink-soft) !important; } .cp-page .dashboard-menu-bar a[aria-label="Profile"] { background: var(--ink) !important; color: var(--paper) !important; box-shadow: none !important; } .cp-page .dashboard-menu-hamburger { background: transparent !important; border-color: var(--line) !important; box-shadow: none !important; } .cp-page .dashboard-menu-hamburger:hover { background: rgba(20, 20, 26, 0.04) !important; border-color: var(--rule) !important; color: var(--ink) !important; } .cp-page .cp-player { color: var(--ink); font-family: "Geist", "Inter", "Helvetica Neue", system-ui, sans-serif; } .cp-page .cp-player-card, .cp-page .listing-player, .cp-page .listing-panel { background: color-mix(in srgb, var(--paper) 86%, white) !important; border-color: var(--line) !important; border-radius: 16px !important; box-shadow: none !important; } .cp-page .listing-create-shell { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; } .cp-page .listing-player__tabs, .cp-page .listing-player__body { background: transparent !important; border-color: var(--line) !important; } .cp-page .listing-marksheet-section, .cp-page .listing-viva__feedback { background: color-mix(in srgb, var(--paper) 72%, white) !important; border-color: var(--line) !important; box-shadow: none !important; } .cp-page .listing-marksheet-section__head, .cp-page .listing-marksheet-item:hover { background: rgba(20, 20, 26, 0.025) !important; } .cp-page .listing-panel__title, .cp-page .listing-viva__q-text, .cp-page .listing-marksheet-section__title, .cp-page .listing-marksheet-item__text { font-family: "Geist", "Inter", sans-serif !important; color: var(--ink) !important; letter-spacing: -0.01em !important; } .cp-page .listing-panel__eyebrow, .cp-page .listing-marksheet-item__points, .cp-page .listing-marksheet-section__meta { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: 0.18em !important; color: var(--ink-faint) !important; } .cp-page .listing-panel__body, .cp-page .listing-viva__feedback-text, .cp-page .listing-viva__list, .cp-page .listing-marksheet-item__detail { color: var(--ink-mute) !important; } .cp-page .cp-player .bg-white, .cp-page .cp-player .bg-white\/80, .cp-page .cp-player .bg-slate-50, .cp-page .cp-player .bg-slate-50\/50, .cp-page .cp-player .bg-slate-50\/60, .cp-page .cp-player .bg-slate-50\/70, .cp-page .cp-player .bg-slate-50\/80 { background: color-mix(in srgb, var(--paper) 82%, white) !important; } .cp-page .cp-player .border-slate-100, .cp-page .cp-player .border-slate-200, .cp-page .cp-player .border-slate-300, .cp-page .cp-player .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; } .cp-page .cp-player .shadow, .cp-page .cp-player .shadow-sm { box-shadow: none !important; } .cp-page .cp-player :is(h1, h2, h3, .text-xl, .text-2xl, .text-3xl) { font-family: "Geist", "Inter", sans-serif; letter-spacing: -0.02em; } .cp-page .cp-player .text-slate-900, .cp-page .cp-player .text-slate-800, .cp-page .cp-player .text-slate-700 { color: var(--ink) !important; } .cp-page .cp-player .text-slate-600, .cp-page .cp-player .text-slate-500 { color: var(--ink-mute) !important; } .cp-page .cp-player .text-slate-400 { color: var(--ink-faint) !important; } .cp-page .cp-player .text-fuchsia-600, .cp-page .cp-player .text-fuchsia-700, .cp-page .cp-player .text-fuchsia-800, .cp-page .cp-player .hover\:text-fuchsia-700:hover { color: var(--accent) !important; } .cp-page .cp-player .bg-fuchsia-700, .cp-page .cp-player .hover\:bg-fuchsia-600:hover, .cp-page .cp-player .active\:bg-fuchsia-800:active { background: var(--accent) !important; color: var(--paper) !important; border-color: var(--accent) !important; } .cp-page .cp-player .bg-fuchsia-700:hover, .cp-page .cp-player .hover\:bg-fuchsia-600:hover { background: color-mix(in srgb, var(--accent) 82%, var(--ink)) !important; border-color: color-mix(in srgb, var(--accent) 82%, var(--ink)) !important; } .cp-page .cp-player .bg-fuchsia-50, .cp-page .cp-player .bg-fuchsia-50\/40, .cp-page .cp-player .bg-fuchsia-50\/80, .cp-page .cp-player .bg-fuchsia-100 { background: var(--accent-soft) !important; } .cp-page .cp-player .border-fuchsia-100, .cp-page .cp-player .border-fuchsia-200, .cp-page .cp-player .border-fuchsia-300, .cp-page .cp-player .hover\:border-fuchsia-200:hover, .cp-page .cp-player .focus\:border-fuchsia-400:focus { border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important; } .cp-page .cp-player .ring-fuchsia-100, .cp-page .cp-player .ring-fuchsia-200, .cp-page .cp-player .ring-fuchsia-600, .cp-page .cp-player .focus\:ring-fuchsia-200:focus, .cp-page .cp-player .focus\:ring-fuchsia-600:focus { --tw-ring-color: color-mix(in srgb, var(--accent) 20%, transparent) !important; } .cp-page .cp-player :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { background: color-mix(in srgb, var(--paper) 86%, white) !important; border-color: var(--line) !important; border-radius: 12px !important; color: var(--ink) !important; box-shadow: none !important; } .cp-page .cp-player :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus { background: color-mix(in srgb, var(--paper) 72%, white) !important; border-color: var(--rule) !important; outline: 0 !important; box-shadow: 0 0 0 3px rgba(20, 20, 26, 0.05) !important; } .cp-page .cp-player :is(input[type="checkbox"], input[type="radio"]), .cp-page .listing-marksheet-item__check { accent-color: var(--accent); border-color: var(--rule) !important; } .cp-page .cp-player .prose, .cp-page .cp-player .prose :where(p, li, td, th) { color: var(--ink-soft) !important; } .cp-page .cp-player .prose :where(strong, h1, h2, h3, h4) { color: var(--ink) !important; } .cp-page .cp-player .prose a { color: var(--accent) !important; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; } .cp-page .cp-player :is(.bg-emerald-50\/40, .bg-emerald-50\/60, .bg-emerald-50\/70, .bg-emerald-100) { background: rgba(5, 150, 105, 0.08) !important; } .cp-page .cp-player :is(.bg-amber-50\/50, .bg-amber-50\/60, .bg-amber-50\/70, .bg-amber-50\/80, .bg-amber-100) { background: rgba(192, 138, 46, 0.1) !important; } .cp-page .cp-player :is(.bg-rose-50\/60, .bg-rose-50\/70, .bg-rose-100) { background: rgba(159, 47, 63, 0.08) !important; } .cp-page .cp-player :is(.border-emerald-100, .border-emerald-200) { border-color: rgba(5, 150, 105, 0.2) !important; } .cp-page .cp-player :is(.border-amber-100, .border-amber-200, .border-amber-300) { border-color: rgba(192, 138, 46, 0.22) !important; } .cp-page .cp-player :is(.border-rose-100, .border-rose-200) { border-color: rgba(159, 47, 63, 0.2) !important; } .cp-page .cp-mcq-player label[class*="rounded-lg"], .cp-page .cp-mcq-player label[class*="rounded-2xl"] { background: color-mix(in srgb, var(--paper) 86%, white) !important; border-color: var(--line) !important; border-radius: 12px !important; } .cp-page .cp-mcq-player label[class*="rounded-lg"]:hover, .cp-page .cp-mcq-player label[class*="rounded-2xl"]:hover { background: color-mix(in srgb, var(--paper) 72%, white) !important; border-color: var(--rule) !important; } .cp-page .cp-mcq-player label.bg-fuchsia-50\/40, .cp-page .cp-mcq-player label.bg-fuchsia-50 { background: var(--accent-soft) !important; border-color: color-mix(in srgb, var(--accent) 26%, transparent) !important; } .cp-page .cp-mcq-player .rounded-xl, .cp-page .cp-mcq-player .rounded-lg { border-radius: 12px !important; } .cp-page .cp-flashcard-player .flashcard-flip { background: color-mix(in srgb, var(--paper) 82%, white) !important; border-color: var(--line) !important; border-radius: 16px !important; } .cp-page .cp-flashcard-player .flashcard-flip__face--back { background: var(--accent-soft) !important; color: var(--ink) !important; } .cp-page .cp-flashcard-player [data-rating] { background: color-mix(in srgb, var(--paper) 84%, white) !important; border-color: var(--line) !important; border-width: 1px !important; color: var(--ink) !important; box-shadow: none !important; } .cp-page .cp-flashcard-player [data-rating]:hover { background: color-mix(in srgb, var(--paper) 70%, white) !important; border-color: var(--rule) !important; } .cp-page .cp-flashcard-player kbd { background: transparent !important; border-color: var(--line) !important; color: var(--ink-mute) !important; } /* Legacy purple/fuchsia/indigo aliases inside calm-paper listing pages. Quiz mode renders the shared MCQ player inside `.listing-page`, not `.cp-player`, so map those hard-coded Tailwind accent classes to the blue calm-paper token. */ .cp-page .listing-page :is(.text-fuchsia-600, .text-fuchsia-700, .text-fuchsia-800, .text-fuchsia-900, .text-violet-600, .text-violet-700, .text-violet-800, .text-indigo-600, .text-indigo-700, .text-indigo-800), .cp-page .listing-page :is(.hover\:text-fuchsia-600:hover, .hover\:text-fuchsia-700:hover, .hover\:text-fuchsia-800:hover, .hover\:text-violet-600:hover, .hover\:text-violet-700:hover, .hover\:text-indigo-600:hover, .hover\:text-indigo-700:hover) { color: var(--accent) !important; } .cp-page .listing-page :is(.bg-fuchsia-700, .bg-fuchsia-600, .bg-violet-700, .bg-violet-600, .bg-indigo-700, .bg-indigo-600), .cp-page .listing-page :is(.hover\:bg-fuchsia-600:hover, .hover\:bg-fuchsia-700:hover, .active\:bg-fuchsia-800:active, .hover\:bg-violet-600:hover, .hover\:bg-violet-700:hover, .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover) { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--paper) !important; box-shadow: none !important; } .cp-page .listing-page :is(.bg-fuchsia-700:hover, .bg-fuchsia-600:hover, .bg-violet-700:hover, .bg-violet-600:hover, .bg-indigo-700:hover, .bg-indigo-600:hover), .cp-page .listing-page :is(.hover\:bg-fuchsia-600:hover, .hover\:bg-fuchsia-700:hover, .hover\:bg-violet-600:hover, .hover\:bg-violet-700:hover, .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover) { background: color-mix(in srgb, var(--accent) 82%, var(--ink)) !important; border-color: color-mix(in srgb, var(--accent) 82%, var(--ink)) !important; } .cp-page .listing-page :is(.bg-fuchsia-50, .bg-fuchsia-50\/40, .bg-fuchsia-50\/70, .bg-fuchsia-50\/80, .bg-fuchsia-100, .bg-violet-50, .bg-violet-100, .bg-indigo-50, .bg-indigo-100) { background: var(--accent-soft) !important; } .cp-page .listing-page :is(.border-fuchsia-100, .border-fuchsia-200, .border-fuchsia-300, .border-fuchsia-400, .border-violet-100, .border-violet-200, .border-violet-300, .border-indigo-100, .border-indigo-200, .border-indigo-300), .cp-page .listing-page :is(.hover\:border-fuchsia-200:hover, .hover\:border-fuchsia-300:hover, .hover\:border-fuchsia-400:hover, .focus\:border-fuchsia-300:focus, .focus\:border-fuchsia-400:focus, .focus\:border-fuchsia-500:focus, .hover\:border-violet-200:hover, .hover\:border-violet-300:hover, .focus\:border-violet-300:focus, .focus\:border-violet-400:focus, .hover\:border-indigo-200:hover, .hover\:border-indigo-300:hover, .focus\:border-indigo-300:focus, .focus\:border-indigo-400:focus) { border-color: color-mix(in srgb, var(--accent) 24%, transparent) !important; } .cp-page .listing-page :is(.ring-fuchsia-100, .ring-fuchsia-200, .ring-fuchsia-500, .ring-fuchsia-600, .ring-violet-100, .ring-violet-200, .ring-violet-500, .ring-indigo-100, .ring-indigo-200, .ring-indigo-500), .cp-page .listing-page :is(.focus\:ring-fuchsia-100:focus, .focus\:ring-fuchsia-200:focus, .focus\:ring-fuchsia-500:focus, .focus\:ring-fuchsia-600:focus, .focus\:ring-violet-100:focus, .focus\:ring-violet-500:focus, .focus\:ring-indigo-100:focus, .focus\:ring-indigo-200:focus, .focus\:ring-indigo-500:focus, .focus\:ring-indigo-600:focus) { --tw-ring-color: color-mix(in srgb, var(--accent) 20%, transparent) !important; } .cp-page .listing-page :is(input[type="checkbox"], input[type="radio"]).text-fuchsia-700, .cp-page .listing-page :is(input[type="checkbox"], input[type="radio"]).text-violet-700, .cp-page .listing-page :is(input[type="checkbox"], input[type="radio"]).text-indigo-700 { accent-color: var(--accent); color: var(--accent) !important; } /* SimPatient desktop and native panels */ .cp-page .native-simpatient-card, .cp-page .native-simpatient-panel, .cp-page .native-simpatient-marksheet-card, .cp-page .native-simpatient-marksheet-actions, .cp-page .native-simpatient-marksheet-attempts { background: color-mix(in srgb, var(--paper) 86%, white) !important; border-color: var(--line) !important; box-shadow: none !important; } .cp-page .native-simpatient-card { border-radius: 18px !important; } .cp-page .native-simpatient-sidebar, .cp-page .native-simpatient-chat, .cp-page .native-simpatient-meta, .cp-page .native-simpatient-input, .cp-page .native-simpatient-assistant-header { background: transparent !important; border-color: var(--line) !important; } .cp-page .native-simpatient-patient .rounded-2xl { background: var(--accent-soft) !important; color: var(--accent) !important; border-radius: 16px !important; } .cp-page .native-simpatient-actions-title, .cp-page .native-simpatient-message-label, .cp-page .native-simpatient-system-label, .cp-page .native-simpatient-assistant-header p:first-child { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace !important; color: var(--ink-faint) !important; letter-spacing: 0.18em !important; } .cp-page .native-simpatient-action-button, .cp-page .native-simpatient-action-disabled { border: 1px solid transparent !important; border-radius: 12px !important; color: var(--ink-mute) !important; background: transparent !important; } .cp-page .native-simpatient-action-button:hover { background: rgba(20, 20, 26, 0.04) !important; border-color: var(--line) !important; color: var(--accent) !important; } .cp-page .native-simpatient-action-icon, .cp-page .native-simpatient-message-avatar { background: color-mix(in srgb, var(--paper) 74%, white) !important; color: var(--ink-mute) !important; } .cp-page .native-simpatient-log { background: transparent !important; border-radius: 0 !important; } .cp-page .native-simpatient-system-card { background: transparent !important; border-color: var(--line) !important; color: var(--ink-soft) !important; box-shadow: none !important; } .cp-page .native-simpatient-message.justify-start .native-simpatient-message-bubble { background: color-mix(in srgb, var(--paper) 78%, white) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; box-shadow: none !important; } .cp-page .native-simpatient-message.justify-end .native-simpatient-message-bubble { background: var(--accent) !important; border: 1px solid var(--accent) !important; color: #fff !important; box-shadow: none !important; } .cp-page .native-simpatient-input-field { background: color-mix(in srgb, var(--paper) 90%, white) !important; border-color: var(--line) !important; box-shadow: none !important; } .cp-page .native-simpatient-input-field:focus-within { border-color: var(--rule) !important; box-shadow: 0 0 0 3px rgba(20, 20, 26, 0.05) !important; } .cp-page .native-simpatient-input-field textarea { color: var(--ink) !important; } .cp-page .native-simpatient-voice, .cp-page .native-simpatient-send, .cp-page .native-simpatient-meta button[type="submit"] { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--paper) !important; box-shadow: none !important; } .cp-page .native-simpatient-voice:hover, .cp-page .native-simpatient-send:hover, .cp-page .native-simpatient-meta button[type="submit"]:hover { background: color-mix(in srgb, var(--accent) 82%, var(--ink)) !important; border-color: color-mix(in srgb, var(--accent) 82%, var(--ink)) !important; } .cp-page .native-simpatient-meta .rounded-2xl.border-fuchsia-100, .cp-page .native-simpatient-assistant-body .rounded-2xl, .cp-page .native-simpatient-assistant-panel { background: color-mix(in srgb, var(--paper) 82%, white) !important; border-color: var(--line) !important; box-shadow: none !important; } .cp-page .native-simpatient-meta .text-fuchsia-700, .cp-page .native-simpatient-meta .text-fuchsia-800, .cp-page .native-simpatient-assistant-body .text-fuchsia-700 { color: var(--accent) !important; } /* SimPatient marking modal */ .cp-page [data-controller~="marking-modal"] { background: rgba(20, 20, 26, 0.38) !important; } .cp-page [data-controller~="marking-modal"] [role="dialog"], .cp-page [data-controller~="marking-modal"] .bg-white { background: color-mix(in srgb, var(--paper) 90%, white) !important; border-color: var(--line) !important; box-shadow: 0 24px 80px rgba(20, 20, 26, 0.18) !important; } .cp-page [data-controller~="marking-modal"] .border-slate-100, .cp-page [data-controller~="marking-modal"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; } .cp-page [data-controller~="marking-modal"] .bg-slate-50\/80, .cp-page [data-controller~="marking-modal"] .bg-slate-200\/70 { background: color-mix(in srgb, var(--paper) 72%, white) !important; } .cp-page [data-controller~="marking-modal"] .text-fuchsia-700 { color: var(--accent) !important; } /* Full-screen exam mode */ .cp-exam-player { /* Color tokens inherit from :root (single source of truth). */ background: var(--paper) !important; color: var(--ink); font-family: var(--font-ui); } .cp-exam-player .sticky { background: color-mix(in srgb, var(--paper) 92%, white) !important; border-color: var(--line) !important; box-shadow: none !important; } .cp-exam-player .bg-slate-50, .cp-exam-player .bg-slate-50\/60, .cp-exam-player .bg-white { background: color-mix(in srgb, var(--paper) 84%, white) !important; } .cp-exam-player .border-slate-100, .cp-exam-player .border-slate-200, .cp-exam-player .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; } .cp-exam-player .text-slate-900, .cp-exam-player .text-slate-800, .cp-exam-player .text-slate-700 { color: var(--ink) !important; } .cp-exam-player .text-slate-600, .cp-exam-player .text-slate-500 { color: var(--ink-mute) !important; } .cp-exam-player .text-slate-400 { color: var(--ink-faint) !important; } .cp-exam-player .bg-fuchsia-700, .cp-exam-player .hover\:bg-fuchsia-600:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--paper) !important; } .cp-exam-player .bg-fuchsia-700:hover, .cp-exam-player .hover\:bg-fuchsia-600:hover { background: color-mix(in srgb, var(--accent) 82%, var(--ink)) !important; border-color: color-mix(in srgb, var(--accent) 82%, var(--ink)) !important; } .cp-exam-player .bg-fuchsia-50, .cp-exam-player .bg-fuchsia-100 { background: var(--accent-soft) !important; } .cp-exam-player .text-fuchsia-700, .cp-exam-player .text-fuchsia-800 { color: var(--accent) !important; } .cp-exam-player .border-fuchsia-200, .cp-exam-player .border-fuchsia-300 { border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important; } .cp-exam-player label, .cp-exam-player summary { border-radius: 12px !important; } .cp-exam-player input[type="checkbox"], .cp-exam-player input[type="radio"] { accent-color: var(--accent); } /* ---- Coaching marketing page ------------------------------------------- */ /* Hero shoulder text variant for coaching */ .cp-page .cp-hero--coaching .cp-hero__h1 { max-width: 16ch; } /* Two-column "meet the coach" — sticky lead + numbered traits list */ .cp-page .cp-coach-meet { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; padding: 96px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } @media (max-width: 880px) { .cp-page .cp-coach-meet { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; } } .cp-page .cp-coach-meet__lead { position: sticky; top: 32px; } @media (max-width: 880px) { .cp-page .cp-coach-meet__lead { position: static; } } .cp-page .cp-coach-meet__name { font-family: "Geist", "Inter", sans-serif; font-weight: 300; font-size: clamp(32px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); margin: 14px 0 8px; max-width: 14ch; } .cp-page .cp-coach-meet__role { font-family: "Fraunces", Georgia, serif; font-style: italic; color: var(--ink-mute); font-size: 18px; margin: 0 0 24px; letter-spacing: -0.005em; } .cp-page .cp-coach-meet__bio { color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 42ch; margin: 0 0 32px; } .cp-page .cp-coach-meet__portrait { display: flex; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); } .cp-page .cp-coach-meet__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: "Geist", "Inter", sans-serif; font-weight: 400; font-size: 20px; letter-spacing: 0.04em; flex-shrink: 0; } .cp-page .cp-coach-meet__signature { font-family: "Geist", "Inter", sans-serif; font-style: italic; font-size: 15px; color: var(--ink); letter-spacing: -0.005em; margin: 0; } .cp-page .cp-coach-meet__credential { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; display: block; } .cp-page .cp-coach-traits { list-style: none; margin: 0; padding: 0; counter-reset: ct; border-top: 1px solid var(--line); } .cp-page .cp-coach-traits li { counter-increment: ct; display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); } .cp-page .cp-coach-traits li:last-child { border-bottom: 0; } .cp-page .cp-coach-traits li::before { content: counter(ct, decimal-leading-zero); font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.22em; color: var(--ink-faint); padding-top: 4px; } .cp-page .cp-coach-traits h4 { font-family: "Geist", "Inter", sans-serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); } .cp-page .cp-coach-traits p { font-size: 14px; color: var(--ink-mute); line-height: 1.6; margin: 0; max-width: 56ch; } /* Editorial story stack — hairline-divided italic quotes */ .cp-page .cp-stories { border-top: 1px solid var(--line); } .cp-page .cp-story { display: grid; grid-template-columns: 80px 1fr 220px; gap: 36px; padding: 40px 0; border-bottom: 1px solid var(--line); align-items: start; transition: padding 0.25s; } .cp-page .cp-story:hover { padding-left: 8px; } @media (max-width: 880px) { .cp-page .cp-story { grid-template-columns: 60px 1fr; gap: 14px 18px; padding: 32px 0; } .cp-page .cp-story__by { grid-column: 2; text-align: left; margin-top: 4px; } } .cp-page .cp-story__num { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); padding-top: 10px; } .cp-page .cp-story__quote { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--ink); margin: 0; max-width: 52ch; font-weight: 400; letter-spacing: -0.01em; } .cp-page .cp-story__by { font-family: "Geist", "Inter", sans-serif; font-size: 13px; color: var(--ink-mute); text-align: right; align-self: end; line-height: 1.5; } .cp-page .cp-story__by b { display: block; color: var(--ink); font-weight: 500; font-size: 14px; margin-bottom: 2px; } .cp-page .cp-story__by .cp-story__role { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } /* ---- Headline accent ------------------------------------------------------ Per design: the accent inside headlines uses the same Geist family as the rest of the page — no italic, no serif. The accent is expressed through color and a slightly heavier weight only. */ .cp-page .cp-h1 em, .cp-page .cp-h2 em, .cp-page .cp-h3 em, .cp-page .cp-dhead h1 em, .cp-page .cp-resume__greeting em, .cp-page main h1 em, .cp-page main h2 em, .cp-page main h3 em, .cp-page .ledger-header__title em, .cp-page .listing-title em, .cp-page .cp-quote p em, .cp-page .cp-manifesto h2 em, .cp-page .cp-coach-meet__name em { font-family: inherit !important; font-style: normal !important; font-weight: 500 !important; letter-spacing: -0.02em !important; color: var(--accent) !important; } /* =========================================================================== SIMPATIENT PLAYER — "clinical station" redesign (web only). The .spx wrapper exists only in the desktop/web branch of simpatients/show.html.erb; the native app renders a different branch, so everything here is scoped under .spx and cannot leak into native. Shared conversation partials keep their native-simpatient-* hooks — rules below intentionally out-rank the older .cp-page .native-simpatient-* overrides via the extra .spx class. =========================================================================== */ .cp-page .spx { display: flex; flex-direction: column; min-height: 0; background: var(--cp-card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 2px rgba(26, 22, 32, 0.04), 0 28px 56px -36px rgba(26, 22, 32, 0.2); overflow: hidden; } @media (min-width: 1024px) { .cp-page .spx { height: calc(100vh - 6rem); } } /* ---- Station header ------------------------------------------------------ */ .cp-page .spx-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); background: radial-gradient(120% 240% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 52%), color-mix(in srgb, var(--paper) 30%, white); } .cp-page .spx-identity { display: flex; align-items: center; gap: 0.95rem; min-width: 0; } .cp-page .spx-avatar { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; flex: none; border-radius: 16px; overflow: hidden; background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); } .cp-page .spx-avatar img { width: 100%; height: 100%; object-fit: cover; } .cp-page .spx-kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); } .cp-page .spx-name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); } .cp-page .spx-demographics { margin-top: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .cp-page .spx-header-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-left: auto; } .cp-page .spx-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-right: 1.25rem; border-right: 1px solid var(--line); } .cp-page .spx-clock-label { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .cp-page .spx-clock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: spx-pulse 2.2s ease-in-out infinite; } .cp-page .spx-clock-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.45rem; font-weight: 500; line-height: 1; color: var(--ink); } @keyframes spx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } .cp-page .spx-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .cp-page .spx-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-mute); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .cp-page .spx-icon-btn:hover { border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); background: color-mix(in srgb, var(--bad) 6%, transparent); } .cp-page .spx-chip-btn { display: inline-flex; align-items: center; gap: 0.45rem; height: 2.25rem; padding: 0 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .cp-page .spx-chip-btn:hover { border-color: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--accent); background: var(--accent-soft); } /* Finish & mark (shared marking_actions partial, restyled in the header) */ .cp-page .spx-finish .max-w-xs { width: auto !important; max-width: 18rem !important; margin-left: 0 !important; } .cp-page .spx-finish button[data-marking-request-target="button"] { border-radius: 999px !important; background: var(--accent) !important; color: #fff !important; padding: 0.7rem 1.35rem !important; font-size: 0.85rem; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 70%, transparent) !important; transition: background 0.15s ease, transform 0.15s ease; } .cp-page .spx-finish button[data-marking-request-target="button"]:hover:not(:disabled) { background: var(--accent-hover) !important; } .cp-page .spx-finish button[data-marking-request-target="button"]:active:not(:disabled) { transform: translateY(1px); } .cp-page .spx-finish a[data-turbo-frame] { border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important; color: var(--accent) !important; background: transparent !important; padding: 0.65rem 1.25rem !important; font-size: 0.85rem; box-shadow: none !important; } .cp-page .spx-finish a[data-turbo-frame]:hover { background: var(--accent-soft) !important; } .cp-page .spx-finish p { font-size: 0.68rem !important; color: var(--ink-faint) !important; text-align: right; } /* ---- Body grid ----------------------------------------------------------- */ .cp-page .spx-body { display: flex; flex-direction: column; flex: 1; min-height: 0; } @media (min-width: 1024px) { .cp-page .spx-body { display: grid; grid-template-columns: 16rem minmax(0, 1fr); } } /* ---- Clinical rail ------------------------------------------------------- */ .cp-page .spx-rail { display: flex; flex-direction: column; gap: 1.9rem; padding: 1.4rem 1.1rem; border-right: 1px solid var(--line); overflow-y: auto; } .cp-page .spx-rail-title { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); padding: 0 0.35rem; } .cp-page .spx-actions { display: flex; flex-direction: column; gap: 2px; margin-top: 0.7rem; } .cp-page .spx-action { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.55rem 0.55rem; border: 1px solid transparent; border-radius: 12px; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); text-align: left; transition: background 0.15s ease, color 0.15s ease; } .cp-page .spx-action-key { display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--paper) 65%, white); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: var(--ink-mute); transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .cp-page .spx-action-label { flex: 1; min-width: 0; } .cp-page .spx-action-arrow { width: 0.8rem; height: 0.8rem; flex: none; opacity: 0; transform: translateX(-3px); transition: opacity 0.15s ease, transform 0.15s ease; } .cp-page .spx-action:hover:not(.spx-action--disabled) { background: var(--accent-soft); color: var(--accent); } .cp-page .spx-action:hover:not(.spx-action--disabled) .spx-action-key { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); } .cp-page .spx-action:hover:not(.spx-action--disabled) .spx-action-arrow { opacity: 0.85; transform: none; } /* Active state classes are toggled by assistant_actions_controller.js */ .cp-page .spx-action.bg-indigo-100 { background: var(--accent-soft) !important; color: var(--accent) !important; } .cp-page .spx-action.bg-indigo-100 .spx-action-key { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); } .cp-page .spx-action--disabled { color: var(--ink-faint); cursor: default; } /* Previous attempts (shared partial, restyled) */ .cp-page .spx-rail-attempts ul { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; } .cp-page .spx-rail-attempts ul a { border-radius: 12px !important; border: 1px solid var(--line) !important; background: color-mix(in srgb, var(--paper) 45%, white) !important; box-shadow: none !important; transition: border-color 0.15s ease, background 0.15s ease; } .cp-page .spx-rail-attempts ul a:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important; background: var(--accent-soft) !important; } .cp-page .spx-rail-attempts ul a .text-sm { font-size: 0.8rem !important; color: var(--ink) !important; } .cp-page .spx-rail-attempts ul a .text-xs { font-size: 0.68rem !important; color: var(--ink-faint) !important; } .cp-page .spx-rail-attempts > turbo-frame > p, .cp-page .spx-rail-attempts p.text-sm { margin-top: 0.6rem; font-size: 0.78rem !important; line-height: 1.5; color: var(--ink-faint) !important; padding: 0 0.35rem; } .cp-page .spx-rail-attempts .mt-3 a { border-radius: 999px !important; border: 1px solid var(--line) !important; color: var(--ink-soft) !important; font-size: 0.72rem !important; } .cp-page .spx-rail-attempts .mt-3 a:hover { border-color: color-mix(in srgb, var(--accent) 32%, transparent) !important; color: var(--accent) !important; background: var(--accent-soft) !important; } /* ---- Encounter canvas ---------------------------------------------------- */ .cp-page .spx-chat { display: flex; min-height: 0; min-width: 0; position: relative; background: radial-gradient(circle at 1px 1px, rgba(26, 22, 32, 0.05) 1px, transparent 1.2px), color-mix(in srgb, var(--paper) 42%, white); background-size: 22px 22px, auto; } .cp-page .spx .native-simpatient-conversation-inner { max-width: 52rem; } .cp-page .spx .native-simpatient-log { background: transparent !important; gap: 1.1rem !important; padding: 1rem 0.25rem !important; } /* Examiner brief — editorial block with a plum spine */ .cp-page .spx .native-simpatient-system-card { border: 0 !important; border-left: 2px solid var(--accent) !important; border-radius: 4px 16px 16px 4px !important; background: color-mix(in srgb, var(--accent) 5%, white) !important; box-shadow: none !important; color: var(--ink-soft) !important; padding: 1rem 1.25rem !important; line-height: 1.65; } .cp-page .spx .native-simpatient-system-label { color: var(--accent) !important; margin-bottom: 0.35rem; } /* Bubbles hug their content instead of stretching to 40rem */ .cp-page .spx .native-simpatient-message .flex-1 { flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; } .cp-page .spx .native-simpatient-message-label { font-size: 0.62rem !important; padding: 0 0.35rem; } .cp-page .spx .native-simpatient-message.justify-start .native-simpatient-message-label { color: var(--ink-faint) !important; } .cp-page .spx .native-simpatient-message.justify-end .native-simpatient-message-label { color: color-mix(in srgb, var(--accent) 65%, var(--ink-faint)) !important; } .cp-page .spx .native-simpatient-message-bubble { padding: 0.7rem 1rem !important; } .cp-page .spx .native-simpatient-message.justify-start .native-simpatient-message-bubble { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 16px 16px 16px 5px !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgba(26, 22, 32, 0.04) !important; } .cp-page .spx .native-simpatient-message.justify-end .native-simpatient-message-bubble { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 82%, #241026)) !important; border: 0 !important; border-radius: 16px 16px 5px 16px !important; color: #fff !important; box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--accent) 70%, transparent) !important; } .cp-page .spx .native-simpatient-message.justify-start .native-simpatient-message-avatar { background: var(--accent-soft) !important; color: var(--accent) !important; } .cp-page .spx .native-simpatient-message.justify-end .native-simpatient-message-avatar { background: var(--accent) !important; color: #fff !important; } .cp-page .spx .native-simpatient-log-empty { color: var(--ink-faint) !important; font-size: 0.85rem; padding: 0.5rem 0.35rem; } /* ---- Composer ------------------------------------------------------------ */ .cp-page .spx .native-simpatient-input { border-top: 1px solid var(--line) !important; padding-top: 0.9rem !important; } .cp-page .spx .native-simpatient-input-row { flex-direction: row !important; align-items: center !important; gap: 0.6rem !important; } .cp-page .spx .native-simpatient-input-row > div:first-child { flex: none; } .cp-page .spx .native-simpatient-input-row > div:last-child { flex: 1 1 auto; min-width: 0; flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; } .cp-page .spx .native-simpatient-voice { height: 3rem !important; width: 3rem !important; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 70%, transparent) !important; } .cp-page .spx .native-simpatient-input-field { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 999px !important; padding: 0.5rem 1.15rem !important; box-shadow: 0 1px 2px rgba(26, 22, 32, 0.03) !important; } .cp-page .spx .native-simpatient-input-field:focus-within { border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; } .cp-page .spx .native-simpatient-send { height: 3rem !important; border-radius: 999px !important; padding: 0 1.15rem !important; } /* ---- Assistant tools modal ------------------------------------------------ */ .cp-page .spx-modal { background: var(--cp-card) !important; border-radius: 20px !important; box-shadow: 0 24px 80px rgba(26, 22, 32, 0.22) !important; --tw-ring-color: var(--line) !important; } .cp-page .spx-modal-header { border-color: var(--line) !important; } .cp-page .spx-modal-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } /* ---- Entrance ------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .cp-page .spx-header, .cp-page .spx-rail, .cp-page .spx-chat { animation: spx-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .cp-page .spx-rail { animation-delay: 0.05s; } .cp-page .spx-chat { animation-delay: 0.1s; } } @keyframes spx-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---- Mobile -------------------------------------------------------------- */ @media (max-width: 1023px) { .cp-page .spx-clock { align-items: flex-start; padding-right: 0; border-right: 0; } .cp-page .spx-header-tools { width: 100%; justify-content: space-between; } .cp-page .spx-rail { display: contents; } .cp-page .spx-rail-actions { order: -1; padding: 0.85rem 1rem 0; } .cp-page .spx-actions { flex-direction: row; gap: 0.45rem; margin-top: 0.5rem; overflow-x: auto; padding-bottom: 0.65rem; -webkit-overflow-scrolling: touch; } .cp-page .spx-action { width: auto; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.8rem 0.4rem 0.5rem; background: #fff; } .cp-page .spx-action-arrow { display: none; } .cp-page .spx-chat { order: 0; min-height: 26rem; border-top: 1px solid var(--line); } .cp-page .spx-rail-attempts { order: 1; padding: 1.1rem 1rem 1.25rem; border-top: 1px solid var(--line); } } /* Avatars at the outer edge: patient far-left, user far-right */ .cp-page .spx .native-simpatient-message.justify-start > div { flex-direction: row-reverse !important; } .cp-page .spx .native-simpatient-message.justify-end > div { flex-direction: row !important; } @media (max-width: 640px) { .cp-page .spx .native-simpatient-send-label { display: none; } .cp-page .spx .native-simpatient-send { width: 3rem; flex: none; padding: 0 !important; justify-content: center; } .cp-page .spx-header { padding: 1rem 1.1rem; } .cp-page .spx-name { font-size: 1.25rem; } .cp-page .spx-chip-btn { height: 2rem; padding: 0 0.75rem; font-size: 0.72rem; } .cp-page .spx-icon-btn { width: 2rem; height: 2rem; } .cp-page .spx-clock-time { font-size: 1.2rem; } } /* =========================================================================== SIMPATIENT MARKSHEET — "examiner's clipboard" (.msx), used by the marksheet modal and the standalone marksheet page. Web only (native uses _marksheet_mobile). =========================================================================== */ .cp-page .msx { padding: 0 1.5rem 1.75rem; font-family: var(--font-ui); } .cp-page .msx-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); } .cp-page .msx-eyebrow--accent { color: var(--accent); } .cp-page .msx-heading { padding: 1.5rem 0 0.25rem; } .cp-page .msx-heading-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); } .cp-page .msx-heading-subtitle { margin-top: 0.25rem; font-size: 0.85rem; color: var(--ink-mute); } /* Segmented tabs */ .cp-page .msx-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 1.1rem 0 0.4rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 55%, white); } .cp-page .msx-tab { border: 0; border-radius: 999px; padding: 0.45rem 1.1rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-mute); background: transparent; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .cp-page .msx-tab:hover { color: var(--ink); } .cp-page .msx-tab[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent) 70%, transparent); } /* Sticky tabs inside the modal scroll area only */ .cp-page .msx-modal-body .msx-tabs { position: sticky; top: 0.65rem; z-index: 5; } /* ---- Stem tab ------------------------------------------------------------ */ .cp-page .msx-stem { max-width: 46rem; margin: 1.1rem 0 0.75rem; padding: 1.2rem 1.4rem; border-left: 2px solid var(--accent); border-radius: 4px 16px 16px 4px; background: color-mix(in srgb, var(--accent) 5%, white); } .cp-page .msx-stem .msx-eyebrow { margin-bottom: 0.5rem; } .cp-page .msx-stem-body { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); } .cp-page .msx-stem-body p + p { margin-top: 0.75em; } /* ---- Case & marksheet tab -------------------------------------------------- */ .cp-page .msx-grid { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.1rem; } @media (min-width: 1024px) { .cp-page .msx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.25rem; align-items: start; } } /* Case details — quiet typeset document */ .cp-page .msx-case { min-width: 0; padding-top: 0.35rem; } .cp-page .msx-case-body { margin-top: 0.75rem; font-size: 0.92rem; line-height: 1.68; color: var(--ink-soft); } .cp-page .msx-case-body :is(h1, h2, h3, h4) { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 1.5em 0 0.45em; } .cp-page .msx-case-body :is(h1, h2, h3, h4):first-child { margin-top: 0; } .cp-page .msx-case-body p { margin: 0.55em 0; } .cp-page .msx-case-body :is(ul, ol) { margin: 0.55em 0; padding-left: 1.25rem; } .cp-page .msx-case-body ul { list-style: disc; } .cp-page .msx-case-body ol { list-style: decimal; } .cp-page .msx-case-body li { margin: 0.3em 0; } .cp-page .msx-case-body strong { color: var(--ink); font-weight: 600; } /* The marksheet — interactive checklist card */ .cp-page .msx-sheet { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(26, 22, 32, 0.04), 0 20px 40px -32px rgba(26, 22, 32, 0.16); overflow: hidden; } .cp-page .msx-sheet-head { padding: 1.1rem 1.3rem 1rem; border-bottom: 1px solid var(--line); background: radial-gradient(140% 260% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%), color-mix(in srgb, var(--paper) 35%, white); } .cp-page .msx-tally-score { display: flex; align-items: baseline; gap: 0.45rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 500; line-height: 1; color: var(--ink); } .cp-page .msx-tally-total { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .cp-page .msx-tally-hint { margin-top: 0.4rem; font-size: 0.78rem; color: var(--ink-mute); } .cp-page .msx-tally-bar { margin-top: 0.7rem; height: 4px; border-radius: 999px; background: var(--paper-inset); overflow: hidden; } .cp-page .msx-tally-fill { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } /* Sections */ .cp-page .msx-sections { padding-bottom: 0.5rem; } .cp-page .msx-section + .msx-section { border-top: 1px solid var(--line); } .cp-page .msx-section-head { display: flex; align-items: baseline; gap: 0.6rem; padding: 1rem 1.3rem 0.45rem; } .cp-page .msx-section-index { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; color: var(--accent); } .cp-page .msx-section-title { flex: 1; min-width: 0; font-size: 0.94rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); } .cp-page .msx-section-pts { flex: none; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } /* Items */ .cp-page .msx-items { list-style: none; margin: 0; padding: 0; } .cp-page .msx-item + .msx-item { border-top: 1px solid var(--line-soft); } .cp-page .msx-item-row { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.75rem 1.3rem; cursor: pointer; transition: background 0.15s ease; } .cp-page .msx-item-row:hover { background: rgba(20, 20, 26, 0.025); } .cp-page .msx-check { appearance: none; -webkit-appearance: none; flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; border: 1.5px solid var(--rule); border-radius: 6px; background: #fff; cursor: pointer; display: grid; place-content: center; transition: background 0.15s ease, border-color 0.15s ease; } .cp-page .msx-check::after { content: ""; width: 0.62rem; height: 0.62rem; transform: scale(0); transition: transform 0.15s cubic-bezier(0.2, 0.7, 0.2, 1); background: #fff; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .cp-page .msx-check:checked { background: var(--accent); border-color: var(--accent); } .cp-page .msx-check:checked::after { transform: scale(1); } .cp-page .msx-check:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .cp-page .msx-item-main { flex: 1; min-width: 0; } .cp-page .msx-item-text { display: block; font-size: 0.9rem; line-height: 1.5; color: var(--ink); } .cp-page .msx-item-detail { display: block; margin-top: 0.2rem; font-size: 0.78rem; line-height: 1.5; color: var(--ink-faint); } .cp-page .msx-item-pts { flex: none; margin-top: 0.1rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--paper) 60%, white); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; color: var(--ink-mute); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } /* Earned state */ .cp-page .msx-item-row:has(.msx-check:checked) { background: color-mix(in srgb, var(--accent) 4%, transparent); } .cp-page .msx-item-row:has(.msx-check:checked) .msx-item-pts { background: var(--accent); color: #fff; box-shadow: none; } .cp-page .msx-empty { padding: 1rem 1.3rem 1.25rem; font-size: 0.85rem; color: var(--ink-faint); } .cp-page .msx-case .msx-empty { padding: 0.75rem 0; } /* ---- Modal chrome ---------------------------------------------------------- */ .cp-page .msx-modal[role="dialog"] { background: var(--cp-card) !important; --tw-ring-color: var(--line) !important; box-shadow: 0 24px 80px rgba(26, 22, 32, 0.24) !important; } .cp-page .msx-modal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); background: radial-gradient(120% 240% at 100% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 52%), color-mix(in srgb, var(--paper) 30%, white); } .cp-page .msx-modal-name { margin-top: 1px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); } .cp-page .msx-modal-sub { margin-top: 1px; font-size: 0.78rem; color: var(--ink-mute); } .cp-page .msx-modal-tools { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; } .cp-page .msx-modal-pts { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; } /* Mobile: checklist first, case reading below */ @media (max-width: 1023px) { .cp-page .msx { padding: 0 1.1rem 1.25rem; } .cp-page .msx-sheet { order: -1; } .cp-page .msx-modal-head { padding: 1rem 1.1rem; } } @media (max-width: 640px) { .cp-page .msx-item-row { flex-wrap: wrap; } .cp-page .msx-item-main { flex: 1 1 calc(100% - 2.2rem); } .cp-page .msx-item-pts { margin-left: 1.95rem; margin-top: 0.1rem; } }