/* ====================================================================== QueroCura shared theme stylesheet ---------------------------------------------------------------------- Design tokens + base element styling lifted from the querocura.com marketing site (see /export/index.html for the source of truth) so the CurasenseAI / CuraVault product UI reads as one visual system with the marketing site. Light palette is the default; dark palette activates via html[data-theme="dark"], set + persisted by querocura_theme_toggle.js under localStorage key "qc-theme" (mirrors the marketing site exactly). ====================================================================== */ :root { /* ---- Brand colors ---- */ --qc-teal: #0e8f83; --qc-teal-hover: #0b6f66; --qc-teal-light: #7ee0d4; --qc-blue: #2f8fd1; --qc-purple: #7c6fdb; --qc-coral: #f0765a; --qc-amber: #e0a52c; /* ---- Text ---- */ --qc-text: #100e2a; /* headings / primary text (navy) */ --qc-text-secondary: #34324a; /* body copy */ --qc-text-muted: #46435f; /* secondary copy */ --qc-text-faint: #6b6885; /* tertiary / labels */ --qc-text-placeholder: #8a879c; --qc-text-on-dark: #f2f0f8; /* text on navy/dark panels */ --qc-text-on-dark-muted: #c8c6de; /* ---- Surfaces ---- */ --qc-bg: #f6f5f1; /* page background */ --qc-bg-alt: #ebe9e2; /* secondary panel background */ --qc-surface: #ffffff; /* card / input background */ --qc-navy-panel: #100e2a; /* deep navy section background */ --qc-navy-panel-alt: #1a1740; /* tile background on navy sections */ /* ---- Tinted accent panels ---- */ --qc-tint-teal: #e6f6f4; --qc-tint-purple: #eae8fb; --qc-tint-coral: #fdece7; --qc-tint-blue: #e4f1fb; --qc-tint-amber: #fbf1dc; /* ---- Borders ---- */ --qc-border: rgba(16, 14, 42, 0.12); --qc-border-strong: rgba(16, 14, 42, 0.18); --qc-border-on-dark: rgba(255, 255, 255, 0.14); /* ---- Radii ---- */ --qc-radius-sm: 10px; --qc-radius-md: 16px; --qc-radius-lg: 20px; --qc-radius-xl: 28px; --qc-radius-pill: 999px; /* ---- Shadows ---- */ --qc-shadow-card: 0 24px 40px -20px rgba(16, 14, 42, 0.22); --qc-shadow-cta: 0 12px 24px -8px rgba(14, 143, 131, 0.45); --qc-shadow-lift: 0 14px 28px -18px rgba(14, 143, 131, 0.45); /* ---- Gradient accent ---- */ --qc-gradient: linear-gradient(95deg, #0e8f83, #2f8fd1); /* ---- Fonts ---- */ --qc-font-display: 'Space Grotesk', system-ui, sans-serif; --qc-font-body: 'Manrope', system-ui, sans-serif; } /* ---- Dark theme remap (data-theme="dark" on , same mechanism as querocura.com's toggleTheme()/qc-theme localStorage key) ---- */ html[data-theme="dark"] { --qc-text: #f2f0f8; --qc-text-secondary: #d7d4e8; --qc-text-muted: #cfccdf; --qc-text-faint: #b7b3cc; --qc-text-placeholder: #a9a6bd; --qc-text-on-dark: #f2f0f8; --qc-text-on-dark-muted: #c8c6de; --qc-bg: #0d0c1f; --qc-bg-alt: #221f3d; --qc-surface: #18162e; --qc-navy-panel: #100e2a; --qc-navy-panel-alt: #1a1740; --qc-tint-teal: rgba(14, 143, 131, 0.18); --qc-tint-purple: rgba(124, 111, 219, 0.18); --qc-tint-coral: rgba(240, 118, 90, 0.16); --qc-tint-blue: rgba(47, 143, 209, 0.16); --qc-tint-amber: rgba(224, 165, 44, 0.16); --qc-border: rgba(255, 255, 255, 0.14); --qc-border-strong: rgba(255, 255, 255, 0.2); --qc-teal: #7ee0d4; --qc-teal-hover: #9beee0; } /* ====================================================================== Base element styling ====================================================================== */ .qc-theme-root, body.qc-theme-root, body { background: var(--qc-bg); color: var(--qc-text); font-family: var(--qc-font-body); transition: background 0.2s ease, color 0.2s ease; } .qc-theme-root h1, .qc-theme-root h2, .qc-theme-root h3, .qc-theme-root h4, .qc-theme-root .display, h1, h2, h3, h4, .display { font-family: var(--qc-font-display); letter-spacing: -0.02em; color: var(--qc-text); } a.qc-link, .qc-theme-root a { color: var(--qc-teal); text-decoration: none; } a.qc-link:hover, .qc-theme-root a:hover { color: var(--qc-teal-hover); } /* ---- Buttons ---- */ .qc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--qc-font-body); font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: var(--qc-radius-pill); border: none; cursor: pointer; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .qc-btn-primary { background: var(--qc-teal); color: #fff; } .qc-btn-primary:hover { background: var(--qc-teal-hover); transform: translateY(-2px); box-shadow: var(--qc-shadow-cta); } .qc-btn-dark { background: var(--qc-navy-panel); color: #fff; } .qc-btn-dark:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(16, 14, 42, 0.35); } .qc-btn-ghost { background: transparent; color: var(--qc-text); border: 1.5px solid var(--qc-border-strong); } .qc-btn-ghost:hover { background: rgba(16, 14, 42, 0.06); transform: translateY(-2px); } /* ---- Cards / panels ---- */ .qc-card { background: var(--qc-surface); border: 1px solid var(--qc-border); border-radius: var(--qc-radius-lg); padding: 20px; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .qc-card:hover { transform: translateY(-4px); box-shadow: var(--qc-shadow-card); border-color: rgba(14, 143, 131, 0.35); } .qc-panel { background: var(--qc-bg-alt); border-radius: var(--qc-radius-xl); padding: clamp(20px, 6vw, 48px); } .qc-panel-teal { background: var(--qc-tint-teal); } .qc-panel-purple { background: var(--qc-tint-purple); } .qc-panel-coral { background: var(--qc-tint-coral); } .qc-panel-blue { background: var(--qc-tint-blue); } .qc-panel-amber { background: var(--qc-tint-amber); } /* ---- Badges / pills ---- */ .qc-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--qc-surface); border: 1px solid var(--qc-border); border-radius: var(--qc-radius-pill); padding: 7px 16px; font-size: 13px; font-weight: 700; color: var(--qc-teal); letter-spacing: 0.02em; } .qc-badge-solid { background: var(--qc-teal); color: #fff; border-color: transparent; } /* ---- Inputs ---- */ .qc-input { width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: var(--qc-radius-sm); border: 1.5px solid var(--qc-border); font-family: var(--qc-font-body); font-size: 15px; color: var(--qc-text); background: var(--qc-surface); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .qc-input:focus { outline: none; border-color: var(--qc-teal); box-shadow: 0 0 0 3px rgba(14, 143, 131, 0.15); } .qc-input::placeholder { color: var(--qc-text-placeholder); } /* ---- Gradient text ---- */ .qc-gradient-text { background: var(--qc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Theme toggle button ---- */ .qc-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--qc-radius-sm); border: 1.5px solid var(--qc-border); background: var(--qc-surface); cursor: pointer; padding: 0; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; flex: 0 0 auto; } .qc-theme-toggle:hover { transform: translateY(-2px); } .qc-theme-toggle-fixed { position: fixed; right: 18px; bottom: 18px; z-index: 9999; box-shadow: var(--qc-shadow-card); } /* Scrollbar niceties (non-essential, cheap) */ html { scroll-behavior: smooth; }