/* === 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 (Fraunces / JetBrains Mono / Inter) are imported at the top of app/assets/tailwind/application.css so the @import is at the very head of the bundle. */ /* 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 { color: var(--paper); } /* ---- Page-level scope ---------------------------------------------------- */ .cp-page { --paper: #f5f5f3; --paper-2: #ebebe8; --ink: #14141a; --ink-soft: #3d3d45; --ink-mute: #6b6b75; --ink-faint: #8e8e96; --line: rgba(20, 20, 26, 0.08); --line-soft: rgba(20, 20, 26, 0.04); --rule: rgba(20, 20, 26, 0.14); --accent: #5a4fff; --accent-soft: rgba(90, 79, 255, 0.08); font-family: "Geist", "Inter", "Helvetica Neue", system-ui, sans-serif; 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; } .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(--ink); color: var(--paper); border: 1px solid var(--ink); 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); border-color: var(--accent); 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: 28px; height: 28px; 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__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(--ink); color: var(--paper) !important; border: 1px solid var(--ink); transition: background 0.2s, border-color 0.2s; text-decoration: none; } .cp-page .cp-nav__cta:hover, .cp-nav__cta:hover { background: var(--accent); border-color: var(--accent); } .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; } @media (max-width: 760px) { .cp-hero { padding: 56px 0 64px; } } .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; } @media (max-width: 540px) { .cp-hero__meta { margin-left: 0; margin-top: 8px; } } .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); } /* ---- 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 .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); } .cp-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; } @media (max-width: 760px) { .cp-modes { grid-template-columns: 1fr; gap: 0; } } .cp-mode { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); transition: padding 0.25s; color: var(--ink); } .cp-mode:hover { padding-left: 6px; } .cp-mode .ic { width: 18px; height: 18px; display: grid; place-items: center; color: var(--ink-mute); align-self: start; padding-top: 4px; } .cp-mode .ic svg { width: 16px; height: 16px; } .cp-mode:hover .ic { color: var(--accent); } .cp-mode .ttl { font-family: "Geist", "Inter", sans-serif; font-weight: 400; font-size: 18px; letter-spacing: -0.01em; margin: 0; } .cp-mode .ttl em { font-style: italic; color: var(--accent); } .cp-mode .sub { font-size: 13px; color: var(--ink-mute); margin-top: 2px; } .cp-mode .meta { font-family: "Geist Mono", "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; align-self: center; } .cp-mode .meta.on { color: var(--accent); } /* Compact single-line variant: icon · title · meta · arrow */ .cp-mode--compact { align-items: center; padding: 16px 0; } .cp-mode--compact .ic { align-self: center; padding-top: 0; } .cp-mode--compact .ttl { font-size: 17px; } /* 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; } /* 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; } /* 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(34px, 4.4vw, 56px) !important; letter-spacing: -0.035em !important; line-height: 1 !important; color: var(--ink) !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(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !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(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; box-shadow: none !important; } .cp-page .listing-btn--primary:hover { background: var(--accent) !important; border-color: var(--accent) !important; box-shadow: none !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; } /* ---- 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; }