/* Google Font is loaded via in index.html for better performance */
/* base styles */
* {
font-family: "Quicksand";
color: #333;
}
body {
margin: 0;
font-family: "Quicksand", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
#root {
display: flex;
flex-direction: column;
}
/* Allow scrolling on payment pages */
.complete-page-container,
.checkout-container {
overflow-y: auto;
height: 100vh;
}
/* =============================================================================
ExamPedite theme tokens
-----------------------------------------------------------------------------
The app ships two palettes — the signature dark dashboard look (default) and a
light ("white") counterpart. Components reference these semantic variables via
`var(--ep-*)`; the active palette is selected by the `data-theme` attribute on
, toggled at runtime by the ThemeProvider (src/Theme/ThemeContext.tsx)
and persisted to localStorage.
Dark is the default (`:root`) so any element that has NOT yet been migrated to
a token keeps its original dark appearance — migration is therefore safe and
incremental. Switching to light only affects elements that already read a
token, so dark mode stays byte-identical to the pre-theme design.
============================================================================= */
:root,
html[data-theme='dark'] {
/* Surfaces (near-black -> raised greys) */
--ep-bg: #191919;
--ep-elevated: #212121;
--ep-surface: #262626;
--ep-surface-2: #2e2e2e;
--ep-surface-3: #404040;
--ep-slate: #2d3748;
/* Borders */
--ep-border: #383838;
--ep-border-strong: #4a4a4a;
/* Text */
--ep-text: #e0e0e0;
--ep-text-2: #a0a0a0;
--ep-text-3: #888888;
--ep-text-on-accent: #ffffff;
/* Brand / accent */
--ep-accent: #5bbadc;
--ep-accent-2: #4a94b0;
--ep-accent-soft: #7acbea;
/* Neon "tech glow" accent used across the dashboard */
--ep-glow: #00f7ff;
/* Glow tints (borders / fills / rings / glows). Kept as the neon cyan in dark;
flipped to a readable deep teal on white (below) so tabs, borders and text
stay legible instead of washing out. */
--ep-glow-a05: rgba(0, 247, 255, 0.05);
--ep-glow-a10: rgba(0, 247, 255, 0.1);
--ep-glow-a20: rgba(0, 247, 255, 0.2);
--ep-glow-a30: rgba(0, 247, 255, 0.3);
--ep-glow-a40: rgba(0, 247, 255, 0.4);
--ep-glow-a50: rgba(0, 247, 255, 0.5);
--ep-glow-a70: rgba(0, 247, 255, 0.7);
/* Translucent helpers (kept theme-agnostic by default) */
--ep-overlay: rgba(0, 0, 0, 0.6);
--ep-accent-fade: rgba(91, 186, 220, 0.14);
/* Layer overlays — how panels build "virtual layers" on top of a surface.
In DARK these are white-over-dark lifts (a slightly lighter layer); they keep
their original look. In LIGHT (below) they flip to a subtle dark-over-light
tint so the same stacking still reads as distinct layers instead of vanishing
into white. Four steps of increasing lift. */
--ep-raise-1: rgba(255, 255, 255, 0.04);
--ep-raise-2: rgba(255, 255, 255, 0.07);
--ep-raise-3: rgba(255, 255, 255, 0.11);
--ep-raise-4: rgba(255, 255, 255, 0.16);
/* Near-opaque dark panels (dropdowns, popovers, modals rendered over content). */
--ep-panel-strong: rgba(25, 25, 32, 0.95);
--ep-panel-strong-2: rgba(40, 40, 40, 0.95);
/* Elevation shadows. Dark relies on colour for depth, so shadows are subtle. */
--ep-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--ep-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
--ep-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
--ep-ring: 0 0 0 3px rgba(91, 186, 220, 0.35);
/* Semantic status colours (success / warning / danger). Brightened for dark so
they read on near-black surfaces; the light block below deepens them for
contrast on white. Each pairs with a faint *-fade tint for soft fills. */
--ep-success: #46b97f;
--ep-success-fade: rgba(70, 185, 127, 0.13);
--ep-warn: #e0a23c;
--ep-warn-fade: rgba(224, 162, 60, 0.13);
--ep-danger: #e06a60;
--ep-danger-fade: rgba(224, 106, 96, 0.13);
--ep-muted: #6b7280;
}
html[data-theme='light'] {
/* Surfaces — a layered light scale that mirrors the dark stack's depth.
Dark goes #191919 -> #212121 -> #262626 -> #2e2e2e -> #404040 (back -> front).
Light mirrors that hierarchy with a soft-grey backdrop, crisp-white primary
panels, and progressively tinted greys for nested / raised elements so the
"virtual layers" stay readable instead of collapsing into one flat white. */
--ep-bg: #e4e7ec; /* deepest backdrop (was #191919) — clear cool grey */
--ep-elevated: #eef0f4; /* secondary surfaces: tool panels, tab bars, sidebars */
--ep-surface: #ffffff; /* primary panels / cards (was #262626) — crisp white */
--ep-surface-2: #e9ecf1; /* inputs / nested fields / resizer (was #2e2e2e) */
--ep-surface-3: #dadfe7; /* raised / hover / active state (was #404040) */
--ep-slate: #e8ecf3; /* blue-grey accent panels (was #2d3748) */
/* Borders (light layers lean on borders + shadow for separation, not lightness) */
--ep-border: #d4d9e1;
--ep-border-strong: #bcc3ce;
/* Text */
--ep-text: #1f2329;
--ep-text-2: #586069;
--ep-text-3: #8a929c;
--ep-text-on-accent: #ffffff;
/* Brand / accent (slightly deepened for contrast on white) */
--ep-accent: #2f9ec2;
--ep-accent-2: #247c9a;
--ep-accent-soft: #5bb6d6;
/* Neon glow -> readable deep teal on white (used for tabs / borders / text) */
--ep-glow: #0a6675;
--ep-glow-a05: rgba(11, 122, 143, 0.06);
--ep-glow-a10: rgba(11, 122, 143, 0.1);
--ep-glow-a20: rgba(11, 122, 143, 0.16);
--ep-glow-a30: rgba(11, 122, 143, 0.28);
--ep-glow-a40: rgba(11, 122, 143, 0.4);
--ep-glow-a50: rgba(11, 122, 143, 0.52);
--ep-glow-a70: rgba(11, 122, 143, 0.68);
--ep-overlay: rgba(15, 23, 32, 0.35);
--ep-accent-fade: rgba(47, 158, 194, 0.12);
/* Layer overlays flipped: subtle dark-over-light tints so stacked layers stay
visible on white surfaces, plus near-white replacements for the dark panels. */
--ep-raise-1: rgba(15, 23, 42, 0.04);
--ep-raise-2: rgba(15, 23, 42, 0.06);
--ep-raise-3: rgba(15, 23, 42, 0.085);
--ep-raise-4: rgba(15, 23, 42, 0.12);
--ep-panel-strong: rgba(255, 255, 255, 0.98);
--ep-panel-strong-2: rgba(237, 240, 245, 0.98);
/* Light: soft, modern, slightly cool shadows (the primary depth cue). */
--ep-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
--ep-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
--ep-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);
--ep-ring: 0 0 0 3px rgba(47, 158, 194, 0.25);
/* Status colours deepened for contrast on white surfaces. */
--ep-success: #2f855a;
--ep-success-fade: rgba(47, 133, 90, 0.10);
--ep-warn: #b7791f;
--ep-warn-fade: rgba(183, 121, 31, 0.10);
--ep-danger: #c0524a;
--ep-danger-fade: rgba(192, 82, 74, 0.08);
--ep-muted: #8a929c;
}
/* =============================================================================
Global skeleton / shimmer loading pattern
Usage:
Automatically adapts to light and dark theme via --ep-surface-* tokens.
============================================================================= */
.ep-skel {
background: linear-gradient(
100deg,
var(--ep-surface-2) 30%,
var(--ep-surface-3) 50%,
var(--ep-surface-2) 70%
);
background-size: 200% 100%;
animation: ep-shimmer 1.3s ease-in-out infinite;
border-radius: 6px;
}
/* size variants */
.ep-skel--title { display: block; height: 1.5rem; width: 55%; }
.ep-skel--line { display: block; height: 0.85rem; }
.ep-skel--sm { height: 0.7rem !important; }
.ep-skel--pill { display: inline-block; width: 70px; height: 1.4rem; border-radius: 999px; }
.ep-skel--block { display: block; width: 100%; height: 5.5rem; border-radius: 10px; }
.ep-skel--card { display: block; width: 100%; height: 7.5rem; border-radius: 12px; }
.ep-skel--input { display: block; width: 100%; height: 2.2rem; border-radius: 9px; }
.ep-skel--circle { border-radius: 50%; }
/* layout helpers */
.ep-skel-wrap { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem; }
.ep-skel-row { display: flex; align-items: center; gap: 0.75rem; }
.ep-skel-grid { display: grid; gap: 0.75rem; }
.ep-skel-grid--2 { grid-template-columns: 1fr 1fr; }
.ep-skel-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ep-skel-trow {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.65rem 1rem;
border-bottom: 1px solid var(--ep-border);
}
.ep-skel-trow:last-child { border-bottom: none; }
.ep-skel-box {
background: var(--ep-surface);
border: 1px solid var(--ep-border);
border-radius: 12px;
padding: 1.25rem;
box-shadow: var(--ep-shadow-sm);
}
@keyframes ep-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* =============================================================================
Light-mode refinements — Examer panel
-----------------------------------------------------------------------------
The dark theme builds depth from many near-blacks + translucent lifts. On a
light surface that reads flat, and a few elements hardcode dark greys (#333,
#444) that look wrong on white. This layer gives the Examer panel a clean,
modern light treatment (grey backdrop, white cards, soft shadows, distinct
tabs / inputs / buttons) WITHOUT touching dark mode — every rule is gated on
html[data-theme='light']. Loaded after theme.css so it wins the cascade.
============================================================================= */
/* ---- Layout: white "document" panels floating on the grey backdrop ---------- */
html[data-theme='light'] .examer-dashboard-outside-container {
background-color: var(--ep-bg);
}
html[data-theme='light'] .examer-dashboard-container-header,
html[data-theme='light'] .examer-dashboard-footer {
background-color: var(--ep-surface);
border-color: var(--ep-border);
box-shadow: var(--ep-shadow-sm);
}
html[data-theme='light'] .examer-dashboard-answer-panel,
html[data-theme='light'] .examer-dashboard-materials-panel {
background-color: var(--ep-surface);
}
html[data-theme='light'] .examer-dashboard-tools-panel {
background-color: var(--ep-elevated);
border-left: 1px solid var(--ep-border);
}
html[data-theme='light'] .examer-dashboard-resizer {
background-color: var(--ep-surface-2);
}
/* ---- Tabs: modern segmented control (grey track, white active pill) --------- */
html[data-theme='light'] .examer-dashboard-functional-tools-tabs {
background-color: var(--ep-surface-2);
box-shadow: none;
border: 1px solid var(--ep-border);
padding: 3px;
gap: 2px;
}
html[data-theme='light'] .examer-dashboard-functional-tools-tab {
color: var(--ep-text-2);
border-bottom: none;
border-radius: 6px;
}
html[data-theme='light'] .examer-dashboard-functional-tools-tab:hover {
/* gentle lift toward the white active pill (was --ep-surface-3, too sharp) */
background-color: rgba(255, 255, 255, 0.55);
color: var(--ep-text);
}
html[data-theme='light'] .examer-dashboard-functional-tools-tab.active {
background-color: var(--ep-surface);
color: var(--ep-accent-2);
border-bottom: none;
box-shadow: var(--ep-shadow-sm);
}
/* ---- Mode select dropdown ---------------------------------------------------- */
html[data-theme='light'] .examer-dashboard-functional-tools-mode-select {
background-color: var(--ep-surface);
border: 1px solid var(--ep-border);
color: var(--ep-text);
}
/* ---- Chat input: clean white field with focus ring (was dark #333/#444) ----- */
html[data-theme='light'] .examer-dashboard-functional-tools-input-area {
background-color: var(--ep-elevated);
border-top: 1px solid var(--ep-border);
}
html[data-theme='light'] .examer-dashboard-functional-tools-input {
background-color: var(--ep-surface);
border: 1px solid var(--ep-border);
color: var(--ep-text);
}
html[data-theme='light'] .examer-dashboard-functional-tools-input:focus {
border-color: var(--ep-accent);
background-color: var(--ep-surface);
box-shadow: var(--ep-ring);
}
/* ---- Message bubbles --------------------------------------------------------- */
html[data-theme='light'] .examer-dashboard-functional-tools-message.user {
/* keep the blue bubble, but text must stay white on the saturated fill */
color: #ffffff;
box-shadow: var(--ep-shadow-sm);
}
html[data-theme='light'] .examer-dashboard-functional-tools-message.ai {
background-color: var(--ep-surface);
border: 1px solid var(--ep-border);
border-left: 3px solid var(--ep-accent);
box-shadow: var(--ep-shadow-sm);
}
html[data-theme='light'] .examer-dashboard-functional-tools-message.ai h2 {
border-bottom-color: var(--ep-border);
}
/* ---- Generic form fields inside the dashboard (answer inputs, title, etc.) --- */
html[data-theme='light'] .examer-dashboard-outside-container input[type='text'],
html[data-theme='light'] .examer-dashboard-outside-container input[type='number'],
html[data-theme='light'] .examer-dashboard-outside-container textarea,
html[data-theme='light'] .examer-dashboard-outside-container select {
background-color: var(--ep-surface);
border-color: var(--ep-border);
color: var(--ep-text);
}
/* ---- Footer action buttons: solid, modern, clearly coloured on white --------- */
html[data-theme='light'] .examer-dashboard-submit-button {
background: linear-gradient(45deg, var(--ep-accent), var(--ep-accent-2));
border: none;
color: #ffffff;
box-shadow: var(--ep-shadow-sm);
}
html[data-theme='light'] .examer-dashboard-submit-button:hover {
background: linear-gradient(45deg, var(--ep-accent-2), #1d6a85);
box-shadow: var(--ep-shadow-md);
}
html[data-theme='light'] .examer-dashboard-save-button {
background: linear-gradient(45deg, #22a06b, #16855a);
border: none;
color: #ffffff;
box-shadow: var(--ep-shadow-sm);
}
html[data-theme='light'] .examer-dashboard-save-button:hover {
background: linear-gradient(45deg, #1c8d5d, #12724c);
box-shadow: var(--ep-shadow-md);
}
html[data-theme='light'] .examer-dashboard-download-button {
background: linear-gradient(45deg, #7c5cf0, #6747d6);
border: none;
color: #ffffff;
box-shadow: var(--ep-shadow-sm);
}
html[data-theme='light'] .examer-dashboard-download-button:hover {
background: linear-gradient(45deg, #6b4ce0, #5739c2);
box-shadow: var(--ep-shadow-md);
}
html[data-theme='light'] .examer-dashboard-upload-button {
background: linear-gradient(45deg, #e8943a, #d97a1a);
border: none;
color: #ffffff;
box-shadow: var(--ep-shadow-sm);
}
html[data-theme='light'] .examer-dashboard-upload-button:hover {
background: linear-gradient(45deg, #d9822a, #c06a12);
box-shadow: var(--ep-shadow-md);
}
/* Small accent chips (time, back button, title meta) read better solid-tinted */
html[data-theme='light'] .examer-dashboard-back-button,
html[data-theme='light'] .examer-dashboard-time {
background-color: var(--ep-accent-fade);
border-color: var(--ep-border);
color: var(--ep-accent-2);
}
/* =============================================================================
Light-mode refinements — sidebar glow lines
-----------------------------------------------------------------------------
The sidebar draws thin neon-cyan rgba(0,253,255,a) lines for its borders,
scrollbar and chip fills. On white those wash out to almost nothing, so under
light we swap the cyan for the darker green var(--ep-glow) (#0a6675). Dark
mode keeps the original neon glow — every rule below is light-only.
============================================================================= */
/* ---- Sidebar scrollbar: green thumb on a light track ------------------------ */
html[data-theme='light'] .sidebar-button-wrapper {
scrollbar-color: var(--ep-glow) var(--ep-surface-2);
}
html[data-theme='light'] .sidebar-button-wrapper::-webkit-scrollbar-track {
background: var(--ep-surface-2);
}
html[data-theme='light'] .sidebar-button-wrapper::-webkit-scrollbar-thumb,
html[data-theme='light'] .collapsed .sidebar-button-wrapper::-webkit-scrollbar-thumb {
background: var(--ep-glow);
}
html[data-theme='light'] .sidebar-button-wrapper::-webkit-scrollbar-thumb:hover {
background: var(--ep-accent-2);
}
/* ---- Sidebar dividers / chip borders: solid green (were faint cyan) --------- */
html[data-theme='light'] .category-header {
border-bottom: 2px solid var(--ep-glow);
}
html[data-theme='light'] .zoom-controls-container,
html[data-theme='light'] .zoom-percentage-only {
background: var(--ep-surface);
border: 1px solid var(--ep-glow);
}
html[data-theme='light'] .zoom-level-display {
background: var(--ep-surface);
border: 1px solid var(--ep-glow);
}
/* =============================================================================
Light-mode refinements — Examer dashboard interior
-----------------------------------------------------------------------------
The answer book / materials / functional-tools interiors hardcode dark-blue
panels and dark editor chrome. With the text now readable (tokenized), these
surfaces still need to flip to light so the stacking + editors read on white.
============================================================================= */
/* ---- Nested question containers: light layer scale (lvl1 = --ep-slate) ------ */
html[data-theme='light'] .examer-dashboard-question-container
.examer-dashboard-question-container {
background-color: var(--ep-surface-2); /* was #3a4a63 */
}
html[data-theme='light'] .examer-dashboard-question-container
.examer-dashboard-question-container
.examer-dashboard-question-container {
background-color: var(--ep-surface-3); /* was #4a5a73 */
border-left-color: var(--ep-accent-2);
}
/* ---- Question header pill: dark gradient -> soft accent chip ----------------- */
html[data-theme='light'] .examer-dashboard-functional-tools-question {
background: var(--ep-accent-fade);
color: var(--ep-accent-2);
border: 1px solid var(--ep-border);
}
/* ---- Notes quill editor (ql-snow): white field, not grey -------------------- */
html[data-theme='light'] .examer-dashboard-functional-tools-quill-wrapper {
border-color: var(--ep-border);
}
html[data-theme='light'] .examer-dashboard-functional-tools-quill-wrapper .ql-container,
html[data-theme='light'] .examer-dashboard-functional-tools-quill-wrapper .ql-editor {
background-color: var(--ep-surface);
}
html[data-theme='light'] .examer-dashboard-functional-tools-quill-wrapper .ql-toolbar {
border-bottom-color: var(--ep-border); /* was #444 */
}
/* ---- Resizer: a clear grey handle that turns accent on hover/drag ----------- */
html[data-theme='light'] .examer-dashboard-resizer {
background-color: var(--ep-border-strong);
}
html[data-theme='light'] .examer-dashboard-resizer:hover,
html[data-theme='light'] .examer-dashboard-resizer:active {
background-color: var(--ep-accent);
}
/* ---- Toggle bars / nested-question toggle: light, not dark-blue ------------- */
html[data-theme='light'] .examer-dashboard-nested-question-toggle {
background-color: var(--ep-surface-2); /* was #374151 */
border-color: var(--ep-border); /* was #4a5568 */
}
html[data-theme='light'] .examer-dashboard-nested-question-toggle:hover {
background-color: var(--ep-surface-3); /* was #4a5568 */
border-color: var(--ep-accent);
}
html[data-theme='light'] .examer-dashboard-toggle-bar:hover {
background-color: var(--ep-surface-3); /* was #3a4a63, too dark */
}
/* ---- Answer-type section: light card, not a dark-blue translucent block ----- */
html[data-theme='light'] .examer-dashboard-answer-type-section {
background-color: var(--ep-surface-2); /* was rgba(45,55,72,0.5) */
}
html[data-theme='light'] .examer-dashboard-answer-type-section:hover {
background-color: var(--ep-surface-3); /* was rgba(45,55,72,0.7) */
}
/* ---- Answer Book header