/* ==========================================================================
OCTOLOGIC HEALTH — base.css
Baseline design tokens and defaults for octologichealth.com
This file defines every visual token used across the platform.
Product-specific stylesheets may override any value, but this is the
single source of truth for the default look and feel.
Load order: base.css → [product/page].css
========================================================================== */
/* Google Fonts are injected by oh-nav.js via tags in to avoid render-blocking @import chain. */
/* ==========================================================================
1. COLOR TOKENS (CSS Custom Properties)
========================================================================== */
:root {
/* --------------------------------------------------------------------------
BACKGROUNDS
-------------------------------------------------------------------------- */
/* --bg-page
Default page background, main content area, article body */
--bg-page: #F0F2F5;
/* --bg-surface
Cards, modals, popovers, tooltips, dropdown menus, toast notifications,
sidebar panels, drawer panels, accordion panels */
--bg-surface: #ffffff;
/* --bg-surface-alt
Alternating table rows, code blocks, pre-formatted text blocks,
input fields (idle), textarea (idle), select dropdowns (idle),
file upload zones (idle), sidebar background, settings panels, filter bars */
--bg-surface-alt: #f8fafb;
/* --bg-warm
Hero sections (warm variant), feature highlight sections,
testimonial blocks, quote blocks, CTA banners,
pricing section backgrounds, onboarding panels */
--bg-warm: #f6f3ee;
/* --bg-dark
Hero sections (dark variant), footer background, dark navigation bars,
dark mode card backgrounds */
--bg-dark: #142942;
/* --bg-dark-mid
Overlay backdrops (semi-transparent), dark section secondary panels,
footer secondary zones */
--bg-dark-mid: #1E3A5F;
/* --bg-tint
Selected sidebar item, active table row, selected chip/tag,
search result highlight, hover row in tables and lists,
selected card state, info alert background (subtle),
tooltip background (light variant), notification badge background (subtle) */
--bg-tint: #e8f5f3;
/* --bg-disabled
Disabled buttons, disabled inputs, disabled textareas, disabled selects,
disabled file upload zones, disabled toggle track,
skeleton loading placeholders */
--bg-disabled: #e2e8f0;
/* --------------------------------------------------------------------------
TEXT
-------------------------------------------------------------------------- */
/* --text-primary
Body text, headings (h1-h6), input field typed values,
dropdown selected-option text, modal titles, table header text,
sidebar nav text, card titles, accordion headers, dialog titles,
toolbar labels */
--text-primary: #1a2332;
/* --text-secondary
Subheadings, card descriptions, table cell text,
breadcrumb non-current items, tab labels (inactive),
dropdown option text, accordion body text, form labels, legend text,
list item secondary lines, sidebar section headers */
--text-secondary: #4a5568;
/* --text-muted
Placeholder text, disabled button text, disabled input text, captions,
help text under form fields, empty-state descriptions,
character/word count indicators, "last updated" timestamps,
footer secondary links, version numbers, watermarks */
--text-muted: #596673;
/* --text-on-dark
Hero heading text (on dark bg), hero body text (on dark bg),
footer text, footer links, dark navbar text, text inside dark toasts,
dark badge text, overlay text */
--text-on-dark: #ffffff;
/* --text-link
Inline text links, link buttons (text-only buttons that navigate),
breadcrumb links, skip-to-content links, "read more" links,
table-cell links */
--text-link: #1e7a70; /* darkened for WCAG AA (4.7:1 on white) */
/* --text-link-hover
All link elements on hover/focus */
--text-link-hover: #176b62;
/* --text-link-on-dark
Inline links inside dark hero sections, dark banners, footer */
--text-link-on-dark: #a5b4fc;
/* --text-error
Error messages, inline validation text (invalid),
required-field asterisks, form error summaries */
--text-error: #DC2626;
/* --text-success
Success messages, inline validation text (valid),
"complete" status text */
--text-success: #059669;
/* --text-warning
Warning messages, "expires soon" text, "work in progress" labels */
--text-warning: #b8860b;
/* --------------------------------------------------------------------------
BORDERS
-------------------------------------------------------------------------- */
/* --border-default
Input field borders (idle), card borders, dividers / horizontal rules,
table cell borders, dropdown borders, modal borders, sidebar dividers,
tab bar bottom border, accordion section dividers, popover borders,
tooltip borders, separator lines, fieldset borders */
--border-default: #e2e8f0;
/* --border-focus
Input field borders (focused), textarea borders (focused),
select borders (focused), search bar borders (focused),
any focusable control's border on keyboard/mouse focus */
--border-focus: #1e7a70;
/* --border-error
Input field borders (invalid), textarea borders (invalid),
select borders (invalid), file upload zone borders (invalid) */
--border-error: #DC2626;
/* --border-disabled
Disabled input borders, disabled textarea borders,
disabled select borders, disabled checkbox borders,
disabled radio borders */
--border-disabled: #d1d8e0;
/* --------------------------------------------------------------------------
BUTTONS — PRIMARY
Save, Submit, Create, Add, Confirm, Continue, Next, Sign Up, Log In
-------------------------------------------------------------------------- */
--btn-primary-bg: #1e7a70; /* darkened from #2a9d8f for WCAG AA (4.7:1 with white) */
--btn-primary-text: #ffffff;
--btn-primary-bg-hover: #176b62;
--btn-primary-bg-active: #125c54;
/* --------------------------------------------------------------------------
BUTTONS — SECONDARY (outline / ghost)
Edit, Settings, Filter, View, Details, Export
-------------------------------------------------------------------------- */
--btn-secondary-bg: transparent;
--btn-secondary-text: #1a2332;
--btn-secondary-border: #e2e8f0;
--btn-secondary-bg-hover: #f8fafb;
/* --------------------------------------------------------------------------
BUTTONS — TERTIARY / LINK BUTTON (text-only)
Cancel, Skip, Back, Dismiss, "Learn more", "View all"
-------------------------------------------------------------------------- */
--btn-tertiary-text: #1e7a70;
--btn-tertiary-text-hover: #238a7e;
/* --------------------------------------------------------------------------
BUTTONS — DESTRUCTIVE
Delete, Remove, Revoke, Disconnect, Deactivate, Unsubscribe,
Permanently delete
-------------------------------------------------------------------------- */
--btn-danger-bg: #DC2626;
--btn-danger-text: #ffffff;
--btn-danger-bg-hover: #B91C1C;
--btn-settings-bg: #C2610C; /* warm amber — WCAG AA on white (4.7:1) */
--btn-settings-text: #ffffff;
--btn-settings-bg-hover: #A8530A;
/* --------------------------------------------------------------------------
BUTTONS — ON DARK
CTAs on hero sections, dark banners, footer CTAs
-------------------------------------------------------------------------- */
--btn-on-dark-bg: #ffffff;
--btn-on-dark-text: #2a9d8f; /* lighter teal OK on dark backgrounds */
--btn-on-dark-bg-hover: #e8f5f3;
/* --------------------------------------------------------------------------
BUTTONS — DISABLED (any button type when disabled)
-------------------------------------------------------------------------- */
--btn-disabled-bg: #e2e8f0;
--btn-disabled-text: #8a95a3;
--btn-disabled-border: #d1d8e0;
/* --------------------------------------------------------------------------
FORM CONTROLS
-------------------------------------------------------------------------- */
/* --input-bg
Text inputs, textareas, select dropdowns, search bars, date pickers,
number inputs, file upload zones (idle state) */
--input-bg: #f8fafb;
/* --input-bg-focus
All of the above when focused */
--input-bg-focus: #ffffff;
/* --input-text
Typed text in all input types */
--input-text: #1a2332;
/* --input-placeholder
Placeholder text in all input types */
--input-placeholder: #6b7785;
/* --input-label
Form labels, fieldset legends, input group labels */
--input-label: #5a6978;
/* --toggle-track-off
Toggle/switch track when off */
--toggle-track-off: #d1d8e0;
/* --toggle-track-on
Toggle/switch track when on */
--toggle-track-on: #1e7a70;
/* --toggle-thumb
Toggle/switch thumb (both states) */
--toggle-thumb: #ffffff;
/* --checkbox-border
Checkbox border (unchecked), radio button border (unchecked) */
--checkbox-border: #d1d8e0;
/* --checkbox-checked-bg
Checkbox fill (checked), radio button fill (selected) */
--checkbox-checked-bg: #1e7a70;
/* --checkbox-check-color
Checkmark icon color, radio dot color */
--checkbox-check-color: #ffffff;
/* --range-track
Range/slider track (unfilled portion) */
--range-track: #e2e8f0;
/* --range-track-fill
Range/slider track (filled portion) */
--range-track-fill: #2a9d8f;
/* --range-thumb
Range/slider thumb */
--range-thumb: #2a9d8f;
/* --------------------------------------------------------------------------
NAVIGATION
-------------------------------------------------------------------------- */
/* --nav-text
Nav item text (idle), header nav links, sidebar nav items,
footer nav links */
--nav-text: #5a6978;
/* --nav-text-hover
All of the above on hover */
--nav-text-hover: #1a2332;
/* --nav-text-active
Active/current nav item text, selected sidebar item text */
--nav-text-active: #1e7a70;
/* --nav-indicator
Active tab underline, active sidebar left-border accent,
current breadcrumb indicator, active nav item underline */
--nav-indicator: #2a9d8f;
/* --nav-bg-hover
Nav item background on hover (header, sidebar, dropdowns) */
--nav-bg-hover: #f8fafb;
/* --------------------------------------------------------------------------
TAGS / BADGES / CHIPS
-------------------------------------------------------------------------- */
/* --tag-default-bg / --tag-default-text
Default informational tags, category labels, metadata chips */
--tag-default-bg: #e8f5f3;
--tag-default-text: #238a7e;
/* --tag-success-bg / --tag-success-text
"Active", "Complete", "Published", "Purchased" tags */
--tag-success-bg: #eafaf1;
--tag-success-text: #047857;
/* --tag-warning-bg / --tag-warning-text
"WIP", "Draft", "Pending", "Expiring" tags */
--tag-warning-bg: #fef9e7;
--tag-warning-text: #b8860b;
/* --tag-danger-bg / --tag-danger-text
"Error", "Failed", "Overdue", "Revoked" tags */
--tag-danger-bg: #fdedec;
--tag-danger-text: #DC2626;
/* --tag-info-bg / --tag-info-text
"Free", "New", "Beta", "Updated" tags */
--tag-info-bg: #eaf0fb;
--tag-info-text: #5b6abf;
/* --------------------------------------------------------------------------
ALERTS / BANNERS / TOASTS
-------------------------------------------------------------------------- */
/* Info: info alert background, info toast background, info banner background */
--alert-info-bg: #eaf0fb;
--alert-info-border: #5b6abf;
--alert-info-icon: #5b6abf;
/* Success: success alert, success toast, success banner */
--alert-success-bg: #eafaf1;
--alert-success-border: #059669;
--alert-success-icon: #059669;
/* Warning: warning alert, warning toast, warning banner */
--alert-warning-bg: #fef9e7;
--alert-warning-border: #b8860b;
--alert-warning-icon: #b8860b;
/* Error: error alert, error toast, error banner */
--alert-error-bg: #fdedec;
--alert-error-border: #DC2626;
--alert-error-icon: #DC2626;
/* --------------------------------------------------------------------------
PROGRESS / LOADING
-------------------------------------------------------------------------- */
/* --progress-track
Progress bar empty track, step wizard connector line (incomplete) */
--progress-track: #e2e8f0;
/* --progress-fill
Progress bar filled portion, step wizard connector line (complete) */
--progress-fill: #2a9d8f;
/* --progress-step-active
Active step marker, current step number */
--progress-step-active: #2a9d8f;
/* --progress-step-complete
Completed step marker, completed step checkmark */
--progress-step-complete: #059669;
/* --progress-step-incomplete
Future/incomplete step marker */
--progress-step-incomplete: #d1d8e0;
/* --spinner-color
Loading spinner stroke, skeleton pulse animation color */
--spinner-color: #2a9d8f;
/* --------------------------------------------------------------------------
SHADOWS
-------------------------------------------------------------------------- */
/* --shadow-sm
Dropdown menus, tooltips, popovers, small floating elements */
--shadow-sm: 0 1px 3px rgba(26, 35, 50, 0.08), 0 1px 2px rgba(26, 35, 50, 0.06);
/* --shadow-md
Cards (idle), toasts, notification panels,
elevated buttons on hover */
--shadow-md: 0 4px 20px rgba(26, 35, 50, 0.08);
/* --shadow-lg
Modals, dialogs, drawer panels, sticky headers on scroll */
--shadow-lg: 0 8px 30px rgba(26, 35, 50, 0.12);
/* --shadow-xl
Hero overlays, full-screen takeovers */
--shadow-xl: 0 20px 60px rgba(26, 35, 50, 0.15);
/* --shadow-overlay
Modal backdrop overlay, drawer backdrop overlay, lightbox backdrop */
--shadow-overlay: rgba(26, 35, 50, 0.5);
/* --------------------------------------------------------------------------
FOCUS
-------------------------------------------------------------------------- */
/* --focus-ring
Keyboard focus outline on every interactive element: buttons, inputs,
links, checkboxes, radios, toggles, tabs, nav items,
cards (if clickable), menu items, accordion triggers */
--focus-ring: 0 0 0 3px rgba(42, 157, 143, 0.35);
/* --------------------------------------------------------------------------
SCROLLBAR
-------------------------------------------------------------------------- */
/* --scrollbar-track
Scrollbar track background */
--scrollbar-track: #f8fafb;
/* --scrollbar-thumb
Scrollbar thumb */
--scrollbar-thumb: #d1d8e0;
/* --scrollbar-thumb-hover
Scrollbar thumb on hover */
--scrollbar-thumb-hover: #8a95a3;
/* --------------------------------------------------------------------------
TYPOGRAPHY
-------------------------------------------------------------------------- */
--font-body: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* --------------------------------------------------------------------------
SPACING SCALE (8px base grid)
-------------------------------------------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 40px;
--space-8: 48px;
--space-9: 64px;
--space-10: 80px;
/* --------------------------------------------------------------------------
BORDER RADIUS
-------------------------------------------------------------------------- */
/* Small elements: tags, badges, checkboxes, small buttons */
--radius-sm: 4px;
/* Standard elements: inputs, buttons, cards, dropdowns */
--radius-md: 8px;
/* Large elements: modals, panels, hero cards */
--radius-lg: 12px;
/* Extra-large elements: full card containers, featured sections */
--radius-xl: 16px;
/* Pill shape: tags, full-round buttons, avatars */
--radius-full: 9999px;
/* --------------------------------------------------------------------------
TRANSITIONS
-------------------------------------------------------------------------- */
/* Micro-interactions: color changes, opacity, border color */
--transition-fast: 0.15s ease;
/* Standard interactions: hover states, focus rings, button presses */
--transition-base: 0.2s ease;
/* Larger motions: panel slides, accordion open/close, card lifts */
--transition-slow: 0.3s ease;
/* --------------------------------------------------------------------------
BRAND IDENTITY
-------------------------------------------------------------------------- */
/* From business card */
--brand-rust: #D95A2B; /* warm accent — large text only (3.8:1 on white) */
--brand-deep-teal: #0E6B6B; /* dark teal variant — AA all sizes (5.0:1 on white) */
/* Product brands */
--brand-edu: #2563EB; /* EduForge — blue */
--brand-lume: #7C3AED; /* LumeLMS — purple */
--brand-guide: #059669; /* Guidelines — green */
--brand-lines: #1E3A5F; /* OctoLines — navy */
--brand-clues: #D97706; /* OctoClues — amber */
--brand-qbank: #0D9488; /* Question Bank — teal */
--brand-gamify: #E11D48; /* Gamify — rose */
/* --------------------------------------------------------------------------
SITE-LEVEL TOKENS (no base.css equivalent)
-------------------------------------------------------------------------- */
--color-bg: var(--bg-page);
--color-surface: var(--bg-surface);
--color-primary: var(--text-primary); /* chained to --text-primary for consistent text color */
--color-primary-dark: var(--bg-dark); /* chained to --bg-dark for consistent dark navy */
--color-accent: var(--btn-primary-bg);
--color-accent-hover: var(--btn-primary-bg-hover);
--color-accent-dark: #0E6B6B; /* business card deep teal */
--color-accent-on-dark: #5bc0b5; /* teal lightened for dark bgs — WCAG AA 5.98:1 on navy */
--color-accent-rgb: 30, 122, 112; /* RGB components of --color-accent for rgba() usage */
--color-accent-tint: var(--bg-tint);
--color-warning: #92400E; /* amber — WCAG AA on white (7.5:1) */
--color-warning-dot: #D97706; /* amber dot/icon — decorative only, not for text */
--color-text: var(--text-primary);
--color-muted: var(--text-secondary);
--color-border: var(--border-default);
--color-success: var(--text-success);
--color-error: var(--text-error);
/* Button intent tokens */
--btn-destructive: var(--color-error);
--btn-creative: var(--color-success);
--btn-cancel: var(--color-muted);
--btn-nav: var(--color-accent);
/* Typography aliases (backward compat) */
--font-head: var(--font-display);
/* Shape & elevation aliases */
--radius: var(--radius-md);
--shadow: var(--shadow-sm);
/* Layout */
--max-width: 1140px;
/* Breakpoints (reference only — CSS can't use vars in media queries,
but documenting them here keeps them in one place) */
--bp-xl: 1280px;
--bp-lg: 1024px;
--bp-md: 768px;
--bp-sm: 640px;
--bp-xs: 480px;
}
/* ==========================================================================
2. BASE RESETS & DEFAULTS
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px; /* explicit 16px floor for non-tech/older users (WCAG readability) */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
/* Bigger Text toggle — adds ~15% to all rem-based sizes.
Applied by oh-a11y-toggle.js when user enables the preference. */
html.oh-a11y-bigger-text { font-size: 18.4px; }
/* High-contrast theme — darkens text/borders, ups contrast on interactive elements.
Applied by oh-a11y-toggle.js when user enables the preference. */
html.oh-a11y-high-contrast {
--text-primary: #0A0F1A;
--text-secondary: #1E2A3A;
--text-muted: #364458;
--border-default: #0F172A;
--border-subtle: #334155;
--focus-ring: 0 0 0 3px #000, 0 0 0 5px #fde047;
}
html.oh-a11y-high-contrast a { text-decoration: underline; }
html.oh-a11y-high-contrast button,
html.oh-a11y-high-contrast .btn,
html.oh-a11y-high-contrast input,
html.oh-a11y-high-contrast select,
html.oh-a11y-high-contrast textarea { border-width: 2px !important; }
body {
font-family: var(--font-body);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
color: var(--text-primary);
background-color: var(--bg-page);
font-size: 1rem; /* inherits explicit 16px */
}
/* ==========================================================================
3. TYPOGRAPHY DEFAULTS
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--text-primary);
}
p, li, td, th, label, legend, figcaption {
color: var(--text-primary);
}
small, caption, .text-muted {
color: var(--text-muted);
}
/* ==========================================================================
4. LINKS
========================================================================== */
a {
color: var(--text-link);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover,
a:focus-visible {
color: var(--text-link-hover);
}
/* ==========================================================================
5. FOCUS RING (global — applies to every interactive element)
========================================================================== */
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* ==========================================================================
6. SCROLLBAR
========================================================================== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
/* ==========================================================================
7. SELECTION
========================================================================== */
::selection {
background-color: var(--bg-tint);
color: var(--text-primary);
}
/* ===================================================================
Octologic Health — Site Component Stylesheet
Shared oh-* and pub-* component classes for public pages.
Requires base.css to be loaded first (tokens, fonts, resets).
=================================================================== */
/* ===================================================================
BUTTONS
=================================================================== */
.oh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 22px;
border-radius: var(--radius);
border: 1.5px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
text-decoration: none;
white-space: nowrap;
}
.oh-btn:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.oh-btn-primary {
background: var(--color-accent);
color: var(--btn-primary-text, #FFFFFF);
border-color: var(--color-accent);
}
.oh-btn-primary:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
color: var(--btn-primary-text, #FFFFFF);
}
/* ===================================================================
TYPOGRAPHY
=================================================================== */
h1, h2, h3, h4 {
font-family: var(--font-head);
color: var(--color-primary);
letter-spacing: -0.3px;
line-height: 1.2;
}
h1 { font-size: 2.75rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
@media (max-width: 768px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.625rem; }
}
/* ===================================================================
FOOTER
=================================================================== */
.oh-footer {
background: var(--color-primary-dark);
color: rgba(255,255,255,0.5);
padding: 32px 24px;
font-size: 0.8125rem;
text-align: center;
border-top: 1px solid rgba(255,255,255,0.06);
}
/* ===================================================================
PAYWALL OVERLAY — shown when logged-in user lacks required service
=================================================================== */
.oh-paywall-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(20, 41, 66, 0.65);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.oh-paywall-card {
background: var(--color-surface, #fff);
border-radius: 16px;
padding: 48px 40px 40px;
max-width: 420px;
width: 100%;
text-align: center;
box-shadow: 0 24px 64px rgba(0,0,0,.18);
animation: oh-paywall-in 0.25s ease-out;
}
@keyframes oh-paywall-in {
from { opacity: 0; transform: scale(0.95) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.oh-paywall-icon {
width: 56px; height: 56px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
margin: 0 auto 20px;
color: #fff;
}
.oh-paywall-title {
font-size: 1.375rem;
font-weight: 700;
color: var(--text-primary, #1E293B);
margin: 0 0 10px;
}
.oh-paywall-desc {
font-size: 0.875rem;
color: var(--text-secondary, #5a6978);
line-height: 1.6;
margin: 0 0 16px;
}
.oh-paywall-sub {
font-size: 0.8125rem;
color: var(--text-muted, #596673);
margin: 0 0 24px;
font-weight: 500;
}
.oh-paywall-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.oh-paywall-btn-primary {
display: block;
padding: 12px 24px;
background: var(--brand-deep-teal, #0E6B6B);
color: #fff;
font-size: 0.9375rem;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
text-align: center;
transition: background 0.15s;
}
.oh-paywall-btn-primary:hover { background: #0a5555; }
.oh-paywall-btn-ghost {
display: block;
padding: 10px 24px;
background: transparent;
color: var(--text-secondary, #5a6978);
font-size: 0.875rem;
font-weight: 500;
border: 1.5px solid var(--border-default, #E2E8F0);
border-radius: 10px;
text-decoration: none;
text-align: center;
transition: border-color 0.15s, color 0.15s;
}
.oh-paywall-btn-ghost:hover { border-color: var(--brand-deep-teal, #0E6B6B); color: var(--text-primary, #1E293B); }
.oh-paywall-help {
font-size: 0.75rem;
color: var(--text-muted, #596673);
margin: 20px 0 0;
}
.oh-paywall-help a {
color: var(--brand-deep-teal, #0E6B6B);
font-weight: 500;
}
/* ===================================================================
LOGIN PAGE
=================================================================== */
.oh-login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
padding: 24px;
}
.oh-login-card {
width: 400px;
max-width: 100%;
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
overflow: hidden;
}
.oh-login-header {
background: var(--color-primary-dark);
padding: 32px 32px 28px;
text-align: center;
}
.oh-login-logo {
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-on-dark, #FFFFFF);
margin-bottom: 6px;
}
.oh-login-logo span { color: var(--color-accent); }
.oh-login-sub {
font-size: 0.8125rem;
color: rgba(255,255,255,0.5);
}
.oh-login-body {
padding: 32px;
}
.oh-field {
margin-bottom: 20px;
}
.oh-field label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 6px;
}
.oh-field input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius);
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--color-text);
background: var(--color-surface);
outline: none;
transition: border-color 0.15s;
}
.oh-field input:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(99,102,241,.25);
}
.oh-field input:disabled,
.oh-field input.oh-disabled {
background: var(--bg-disabled, #e2e8f0);
color: var(--text-muted, #6b7785);
cursor: not-allowed;
border-color: var(--border-disabled, #d1d8e0);
}
.oh-login-error {
display: none;
background: var(--alert-error-bg, #FEF2F2);
border: 1px solid var(--alert-error-border, #FECACA);
color: var(--text-error, #DC2626);
font-size: 0.8125rem;
padding: 10px 14px;
border-radius: var(--radius);
margin-bottom: 16px;
}
.oh-login-error.visible { display: block; }
.oh-login-success {
display: none;
padding: 12px 16px;
background: var(--tag-success-bg, #ECFDF5);
border: 1px solid var(--text-success, #059669);
border-radius: var(--radius);
color: var(--text-success, #065F46);
font-size: 0.875rem;
margin-bottom: 16px;
}
.oh-login-success.visible { display: block; }
.oh-check-inbox {
display: none;
text-align: center;
padding: 16px 0;
}
.oh-check-inbox-icon {
font-size: 2rem;
margin-bottom: 12px;
}
.oh-check-inbox h2 {
font-size: 1.125rem;
color: var(--text-primary);
margin: 0 0 8px;
}
.oh-check-inbox p {
color: var(--text-muted);
font-size: 0.875rem;
line-height: 1.5;
margin: 0 0 16px;
}
.oh-check-inbox-retry {
color: var(--text-muted);
font-size: 0.8125rem;
}
.oh-check-inbox-sub {
color: var(--text-muted, #596673);
font-size: 0.8125rem;
margin: 0 0 8px;
}
.oh-check-inbox-alt {
background: var(--bg-surface-alt, #F1F5F9);
border-radius: 10px;
padding: 16px;
margin: 16px 0;
text-align: center;
}
.oh-check-inbox-alt p {
margin: 0 0 8px;
font-size: 0.8125rem;
color: var(--text-secondary, #5a6978);
}
.oh-check-inbox-hint {
font-size: 0.75rem;
color: var(--text-muted, #596673);
margin: 10px 0 0;
line-height: 1.5;
}
/* Resend magic link */
.oh-check-inbox-resend {
margin: 16px 0 8px;
text-align: center;
}
.oh-btn-resend {
background: var(--btn-secondary-bg, transparent);
color: var(--text-primary, #1a2332);
border: 1.5px solid var(--border-default, #e2e8f0);
border-radius: var(--radius, 8px);
padding: 10px 16px;
font-size: 0.875rem;
font-family: var(--font-body);
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.oh-btn-resend:hover:not(:disabled) {
background: var(--btn-secondary-bg-hover, #f8fafb);
border-color: var(--border-focus, #1e7a70);
}
.oh-btn-resend:disabled {
color: var(--text-muted, #596673);
cursor: not-allowed;
opacity: 0.7;
}
.oh-resend-exhausted {
font-size: 0.8125rem;
color: var(--text-secondary, #4a5568);
margin-top: 12px;
line-height: 1.5;
}
/* Poll spinner — subtle animated dots */
.oh-poll-spinner {
display: flex;
gap: 6px;
justify-content: center;
margin: 8px 0 12px;
}
.oh-poll-spinner::before,
.oh-poll-spinner::after,
.oh-poll-spinner {
content: '';
}
@keyframes oh-poll-bounce {
0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
.oh-poll-spinner::before,
.oh-poll-spinner::after {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--brand-deep-teal, #0E6B6B);
animation: oh-poll-bounce 1.2s infinite ease-in-out;
}
.oh-poll-spinner::before { animation-delay: 0s; }
.oh-poll-spinner::after { animation-delay: 0.3s; }
/* Login code input — large centered digits */
.oh-login-code-input {
font-size: 28px !important;
letter-spacing: 8px;
text-align: center;
font-family: monospace;
font-weight: 700;
padding: 12px 16px !important;
}
/* Ghost button variant */
.oh-btn-ghost {
background: transparent;
color: var(--brand-deep-teal, #0E6B6B);
border: 1.5px solid var(--border-default, #E2E8F0);
font-weight: 500;
}
.oh-btn-ghost:hover {
background: var(--bg-surface-alt, #F1F5F9);
border-color: var(--brand-deep-teal, #0E6B6B);
}
.oh-btn-sm {
padding: 6px 14px;
font-size: 13px;
}
/* Logged-out sidebar user section */
.pub-sidebar-user.pub-logged-out {
padding: 16px;
border-bottom: 1px solid var(--border-default, #E2E8F0);
}
.pub-sidebar-user.pub-logged-out .pub-sidebar-user-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary, #1E293B);
margin: 0 0 8px;
}
.pub-sidebar-user.pub-logged-out .pub-sidebar-user-actions {
display: flex;
gap: 12px;
}
.pub-sidebar-user.pub-logged-out .pub-sidebar-user-actions a {
font-size: 13px;
font-weight: 500;
color: var(--brand-deep-teal, #0E6B6B);
text-decoration: none;
}
.pub-sidebar-user.pub-logged-out .pub-sidebar-user-actions a:hover {
text-decoration: underline;
}
.oh-login-link {
color: var(--brand-deep-teal, #0E6B6B);
font-weight: 500;
}
.oh-login-remember {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-secondary, #5a6978);
cursor: pointer;
margin: -8px 0 16px;
}
.oh-login-remember input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--brand-deep-teal, #0E6B6B);
cursor: pointer;
}
.oh-field-hint {
color: var(--text-muted);
font-size: 12px;
margin-top: 4px;
display: block;
}
.oh-field-optional {
color: var(--text-muted);
font-weight: 400;
}
.oh-login-info {
font-size: 12px;
color: var(--color-muted);
text-align: center;
margin-top: 16px;
line-height: 1.5;
}
.oh-login-footer {
padding: 16px 32px;
background: var(--color-bg);
border-top: 1px solid var(--color-border);
text-align: center;
font-size: 11px;
color: var(--color-muted);
}
/* Login — Demo CTA (moved from inline