/* ═══════════════════════════════════════════════════════ COSMICLOGY BASE — Imported by EVERY page Single source of truth for design tokens ═══════════════════════════════════════════════════════ */ :root { --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Josefin Sans', 'Trebuchet MS', sans-serif; --gold: #c9a84c; --gold-light: #e2c878; --gold-dark: #a8862e; --ease: 0.4s cubic-bezier(.25,.46,.45,.94); --ease-spring: 0.6s cubic-bezier(.16,1,.3,1); /* ── Cross-page aliases (preserve historical variable names) ── */ --transition: var(--ease); /* legacy alias used by Homepage-index.html */ --border-color-hover: var(--border-hover); /* legacy alias used by Homepage-index.html */ } /* ── Dark Theme (Default) ── */ /* Canonical values reconciled to Homepage 2026-06-15 (P1-1). */ [data-theme="dark"], :root { --bg-primary: #080d1f; --bg-secondary: #0c1229; --bg-card: rgba(12,18,42,0.82); --bg-card-hover: rgba(18,26,55,0.95); --border-color: rgba(201,168,76,0.28); --border-hover: rgba(201,168,76,0.55); --text-primary: #f0e6d0; --text-secondary: #cbc4d8; --text-muted: #aaa3b8; --shadow-card: 0 4px 24px rgba(0,0,0,0.25); --shadow-elevated: 0 12px 48px rgba(0,0,0,0.4); --line: rgba(255,255,255,0.06); --green: rgba(74,222,128,0.7); } /* ── Global Resets ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--ease), color var(--ease); animation: pageIn 0.4s ease both; } /* Opacity-only — NO transform on . Any transform animation (with fill-mode `both`) leaves with a filling transform value; a filling transform makes the element a containing block for every position:fixed descendant REGARDLESS of the value (even `none`/identity serialises to a matrix and still traps). That trapped Razorpay's modal AND the Cosmo panel — the fixed panel then expands document height by its own size = the "blank space below the footer" on mobile. Dropping the transform keyframe removes the trap site-wide; the fade-in is preserved. (Verified: with a transform keyframe scrollHeight inflated by the panel's height; opacity-only does not.) */ @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; } /* ── Selection ── */ ::selection { background: rgba(201,168,76,.3); color: var(--text-primary); } ::-moz-selection { background: rgba(201,168,76,.3); color: var(--text-primary); } /* ── Focus ── */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(201,168,76,.15); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,.3); } /* ── Skeleton Loading ── */ .skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, rgba(201,168,76,0.04) 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 14px; margin-bottom: 8px; width: 60%; } .skeleton-text-short { height: 14px; margin-bottom: 8px; width: 35%; } .skeleton-circle { border-radius: 50%; } .skeleton-card { height: 80px; border-radius: 10px; margin-bottom: 12px; } /* ── Card Hover ── */ .card-interactive { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card-interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); border-color: var(--border-hover); } /* ── Error States ── */ .error-state { text-align: center; padding: 48px 20px; animation: fadeIn 0.5s ease; } .error-state-icon { font-size: 28px; opacity: 0.2; margin-bottom: 16px; } .error-state-title { font-family: var(--font-display); font-size: 18px; color: var(--text-primary); font-weight: 300; margin-bottom: 8px; } .error-state-body { font-family: var(--font-display); font-size: 14px; color: var(--text-muted); font-style: italic; margin-bottom: 20px; } .error-state-retry { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); background: none; border: 1px solid var(--border-color); border-radius: 4px; padding: 8px 20px; cursor: pointer; transition: all 0.2s; } .error-state-retry:hover { background: rgba(201,168,76,0.06); border-color: var(--gold); } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Button Hierarchy ── */ .btn-primary { background: var(--gold); color: #080d1f; border: 1px solid var(--gold); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 24px; border-radius: 2px; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-block; } .btn-primary:hover { background: var(--gold-light); box-shadow: 0 0 28px rgba(201,168,76,0.25); transform: translateY(-1px); } .btn-secondary { background: transparent; color: var(--gold); border: 1px solid var(--border-color); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 18px; border-radius: 4px; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-block; } .btn-secondary:hover { border-color: var(--gold); background: rgba(201,168,76,0.06); } .btn-ghost { background: none; border: none; color: var(--gold); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em; cursor: pointer; text-decoration: none; transition: color 0.2s; } .btn-ghost:hover { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; } /* ── Common Footer ── */ .site-footer { position: relative; z-index: 1; text-align: center; padding: 32px 20px; margin-top: 40px; border-top: 1px solid var(--line); } .site-footer p { font-family: var(--font-display); font-size: 0.82rem; color: var(--text-muted); font-style: italic; line-height: 1.6; } .site-footer a { color: var(--gold); text-decoration: none; transition: color 0.2s; } .site-footer a:hover { color: var(--gold-light); } /* ── Empty State Breathing ── */ .empty-icon { animation: breathe 3s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.35; transform: scale(1.05); } } /* ── Back to Top ── */ .back-to-top { position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px; border-radius: 50%; background: rgba(10,16,36,0.85); backdrop-filter: blur(12px); border: 1px solid var(--border-color); color: var(--gold); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s; z-index: 90; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { border-color: var(--gold); background: rgba(201,168,76,0.1); } @media (max-width: 640px) { .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; } } /* ── Chat Typing Cursor ── */ .chat-message-typing::after { content: '\u258A'; color: var(--gold); opacity: 0.7; animation: cursorBlink 1s step-end infinite; margin-left: 2px; font-size: 0.9em; } @keyframes cursorBlink { 0%, 50% { opacity: 0.7; } 51%, 100% { opacity: 0; } } /* ── Chat Skip Animation ── */ .chat-skip-animation { position: absolute; bottom: 80px; right: 20px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; color: var(--text-muted); background: transparent; border: 1px solid var(--border-color); border-radius: 2px; padding: 6px 14px; cursor: pointer; text-transform: uppercase; transition: all 0.2s; opacity: 0; animation: skipFadeIn 0.3s 1s forwards; } .chat-skip-animation:hover { color: var(--gold); border-color: var(--gold); } @keyframes skipFadeIn { to { opacity: 1; } } /* ── Report Watermarks ── */ .report-watermark-header { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; font-weight: 300; color: rgba(201, 168, 76, 0.5); letter-spacing: 0.06em; text-align: center; padding: 16px 24px 0; margin: 0 0 24px; user-select: none; -webkit-user-select: none; } .report-watermark-footer { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; font-weight: 300; color: rgba(201, 168, 76, 0.5); letter-spacing: 0.06em; text-align: center; padding: 40px 24px 24px; margin-top: 60px; border-top: 1px solid rgba(201, 168, 76, 0.12); user-select: none; -webkit-user-select: none; } .report-watermark-footer::before { content: '\2726'; display: block; margin-bottom: 14px; opacity: 0.7; font-style: normal; font-size: 10px; } @media print { .report-watermark-header, .report-watermark-footer { color: rgba(0, 0, 0, 0.55) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } @media (max-width: 640px) { .report-watermark-header, .report-watermark-footer { font-size: 11px; padding-left: 16px; padding-right: 16px; } } /* ── Mobile Defensive Pass ── */ /* Prevent horizontal scroll WITHOUT trapping position:fixed widgets. overflow-x:hidden on html/body makes the body a scroll/clip container on mobile, which re-roots fixed elements (e.g. the Cosmo float) so they scroll with the page and land at the bottom instead of pinning to the viewport. overflow-x:clip stops the horizontal scroll the same way but does NOT create a scroll container, so position:fixed / position:sticky keep working. The :hidden line is a fallback for browsers without clip support (Safari <16); the clip line overrides it everywhere else. */ html, body { overflow-x: hidden; /* fallback for browsers without clip (Safari <16) */ overflow-x: clip !important; /* wins over page-level body{overflow-x:hidden} so fixed widgets (Cosmo float, sticky headers) pin to the viewport on every page, not just those that rely on base.css. Only the x-axis: a page's overflow-y stays as authored (e.g. the dashboard app-shell keeps overflow-y:hidden). */ max-width: 100vw; } img, video, iframe, svg { max-width: 100%; height: auto; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-wrap: break-word; } /* Tap highlight removal + focus-visible */ * { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Momentum scrolling on iOS */ .chat-messages, .scrollable-content, .report-body { -webkit-overflow-scrolling: touch; } /* Mobile font size floor */ @media (max-width: 640px) { body { font-size: 14px; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], textarea, select { font-size: 16px !important; } .field-label, .field-value, .small-text, small { font-size: 12px !important; } .caption, .legal, figcaption { font-size: 11px !important; } } /* Touch target minimums */ @media (max-width: 640px) { button, a.btn, .nav-link, .tap-target, [role="button"], input[type="submit"], input[type="button"] { min-height: 44px; min-width: 44px; } nav a, .footer-col a { padding: 8px 0; display: inline-block; } } /* Modal/overlay viewport safety */ @media (max-width: 640px) { .modal, .overlay-content, [role="dialog"] { max-width: calc(100vw - 32px) !important; max-height: calc(100vh - 32px) !important; overflow-y: auto; } } /* Table wrapping on narrow screens */ @media (max-width: 640px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } table.mobile-ok { display: table; overflow: visible; white-space: normal; } } /* Form spacing on mobile */ @media (max-width: 640px) { form .field + .field, form .form-row + .form-row, form > input + input, form > input + button, form > input + select { margin-top: 14px; } form label { display: block; margin-bottom: 4px; } form button[type="submit"], form .submit-btn { width: 100%; margin-top: 20px; } } /* Safe area support for notched devices */ @supports (padding: max(0px)) { .fixed-header, header.hdr { padding-top: max(16px, env(safe-area-inset-top)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .fixed-footer, .bottom-bar { padding-bottom: max(16px, env(safe-area-inset-bottom)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ═══════════════════════════════════════════════════════ PHASE 1 — DESIGN SYSTEM EXTENSIONS Token additions only — no behavior changes. See STYLEGUIDE.md for usage guidelines. ═══════════════════════════════════════════════════════ */ /* ── Spacing Scale (4-based) ── */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; } /* ── Type Scale ── */ :root { /* Sizes (clamp = floor / fluid / ceiling) */ --text-eyebrow: clamp(10px, 0.7vw, 11px); --text-caption: clamp(11px, 0.85vw, 13px); --text-body-sm: clamp(13px, 1.1vw, 15px); --text-body: clamp(15px, 1.4vw, 17px); --text-body-lg: clamp(17px, 1.95vw, 20px); /* the reading default */ --text-display-sm: clamp(20px, 2.4vw, 24px); --text-display-md: clamp(24px, 3vw, 30px); --text-display-lg: clamp(28px, 4vw, 46px); --text-display-xl: clamp(40px, 7vw, 72px); --text-hero: clamp(64px, 10vw, 128px); /* Line height */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.65; --leading-relaxed: 1.85; /* the reading default */ /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.12em; --tracking-widest: 0.22em; } /* ── Semantic Colors (Dark) ── */ [data-theme="dark"], :root { --color-success: #4ade80; --color-success-bg: rgba(74,222,128,0.08); --color-warning: #fb923c; --color-warning-bg: rgba(251,146,60,0.08); --color-danger: #f87171; --color-danger-bg: rgba(248,113,113,0.08); --color-info: #5878a0; --color-info-bg: rgba(88,120,160,0.08); --shadow-floating: 0 16px 48px rgba(0,0,0,0.55); --shadow-popover: 0 16px 40px rgba(0,0,0,0.45); } /* ═══════════════════════════════════════════════════════ READING SURFACE — long-form prose container Apply to any container holding multi-paragraph reading. Honours reader font-size preferences via --prose-size. ═══════════════════════════════════════════════════════ */ .reading-surface { max-width: 65ch; /* ~640px — optimal reading width */ margin-left: auto; margin-right: auto; font-family: var(--font-display); font-size: var(--prose-size, var(--text-body-lg)); font-weight: 300; line-height: var(--leading-relaxed); color: var(--text-secondary); letter-spacing: 0.005em; } .reading-surface > p { margin-bottom: var(--space-5); } .reading-surface > p:last-child { margin-bottom: 0; } .reading-surface em { color: var(--gold); font-style: italic; } .reading-surface strong { color: var(--text-primary); font-weight: 500; font-style: normal; } .reading-surface h2 { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 400; line-height: var(--leading-snug); color: var(--text-primary); margin-bottom: var(--space-5); letter-spacing: var(--tracking-tight); } .reading-surface h3 { font-family: var(--font-display); font-size: var(--text-display-sm); font-weight: 400; line-height: var(--leading-snug); color: var(--text-primary); margin-bottom: var(--space-4); } .reading-surface a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(201,168,76,.35); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; } .reading-surface a:hover { color: var(--gold-light); text-decoration-color: var(--gold); } @media (max-width: 640px) { .reading-surface { font-size: 17px; line-height: 1.78; } } /* ═══════════════════════════════════════════════════════ READER PREFERENCES — styles live inside each report reader's inline