/* * Shared styles for StockIntel AI public /tools pages. * * Theming mirrors artifacts/stockintel/src/index.css exactly: the same HSL * custom-property names/values for the light ("default") and dark-gold * themes, switched via the same `.dark-gold` class on . tools.js * applies that class based on the same `stockintel_theme` localStorage key * the main app's ThemeProvider uses, so a preference set in the app carries * over here on the same origin. */ /* ── DEFAULT THEME: Baby Pink background + Baby Blue (matches index.css :root) ── */ :root { --background: 344 100% 95%; --foreground: 222 47% 14%; --primary: 199 72% 48%; --primary-foreground: 0 0% 100%; --secondary: 351 100% 75%; --secondary-foreground: 0 0% 100%; --muted: 344 40% 88%; --muted-foreground: 222 20% 45%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --border: 344 30% 82%; --input: 344 30% 82%; --card: 0 0% 100%; --card-foreground: 222 47% 14%; --analyst-buy: 158 64% 52%; color-scheme: light; } /* ── DARK GOLD THEME: Pure Black + Deep Metallic Gold (matches index.css .dark-gold) ── */ .dark-gold { --background: 0 0% 3%; --foreground: 42 60% 92%; --primary: 36 72% 48%; --primary-foreground: 0 0% 4%; --secondary: 30 60% 42%; --secondary-foreground: 0 0% 4%; --muted: 0 0% 10%; --muted-foreground: 36 25% 50%; --destructive: 0 62.8% 45%; --destructive-foreground: 42 60% 92%; --border: 0 0% 14%; --input: 0 0% 14%; --card: 0 0% 7%; --card-foreground: 42 60% 92%; --analyst-buy: 158 64% 52%; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.15s ease, color 0.15s ease; } h1, h2, h3, h4 { font-family: "Outfit", "DM Sans", sans-serif; font-weight: 700; color: hsl(var(--foreground)); line-height: 1.25; } a { color: hsl(var(--primary)); } a:hover { filter: brightness(1.15); } .site-header { border-bottom: 1px solid hsl(var(--border)); padding: 1.25rem 1.5rem; } .site-header .brand { font-family: "Outfit", sans-serif; font-weight: 800; font-size: 1.25rem; color: hsl(var(--primary)); text-decoration: none; letter-spacing: 0.01em; } .site-header .brand:hover { filter: brightness(1.15); } .wrap { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } .breadcrumb { font-size: 0.85rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; } .breadcrumb a { color: hsl(var(--muted-foreground)); } .breadcrumb a:hover { color: hsl(var(--primary)); } h1 { font-size: 2rem; margin: 0 0 0.5rem; } .subtitle { color: hsl(var(--muted-foreground)); font-size: 1.05rem; margin: 0 0 2rem; } .card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 14px; padding: 1.75rem; margin-bottom: 2.5rem; } .currency-bar { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-bottom: 1.25rem; } .currency-bar label { margin: 0; font-size: 0.85rem; color: hsl(var(--muted-foreground)); } .currency-bar select { background: hsl(var(--background)); border: 1px solid hsl(var(--input)); border-radius: 8px; padding: 0.4rem 0.6rem; color: hsl(var(--foreground)); font-family: inherit; font-size: 0.9rem; } .currency-bar select:focus { outline: none; border-color: hsl(var(--primary)); } .field { margin-bottom: 1.1rem; } .field:last-child { margin-bottom: 0; } label { display: block; font-size: 0.9rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.35rem; } input[type="text"], input[type="number"] { width: 100%; background: hsl(var(--background)); border: 1px solid hsl(var(--input)); border-radius: 8px; padding: 0.65rem 0.8rem; color: hsl(var(--foreground)); font-size: 1rem; font-family: inherit; } input[type="text"]:focus, input[type="number"]:focus { outline: none; border-color: hsl(var(--primary)); } .mode-toggle { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; } .mode-toggle button { flex: 1; background: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); padding: 0.55rem 0.75rem; border-radius: 8px; font-family: inherit; font-size: 0.9rem; cursor: pointer; } .mode-toggle button.active { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 700; } .results { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); display: grid; gap: 0.9rem; } .field-note { margin-top: 1rem; padding: 0.75rem 1rem; background: hsl(var(--destructive) / 0.12); border: 1px solid hsl(var(--destructive) / 0.35); border-radius: 8px; color: hsl(var(--destructive)); font-size: 0.88rem; } .result-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .result-row .label { color: hsl(var(--muted-foreground)); font-size: 0.92rem; } .result-row .value { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.2rem; color: hsl(var(--foreground)); text-align: right; } .result-row.primary .value { color: hsl(var(--primary)); font-size: 1.55rem; } .result-row .value.negative { color: hsl(var(--destructive)); } .result-row .value.positive { color: hsl(var(--analyst-buy)); } .cta { background: linear-gradient(135deg, hsl(var(--primary) / 0.14), hsl(var(--secondary) / 0.08)); border: 1px solid hsl(var(--border)); border-radius: 14px; padding: 1.5rem 1.75rem; margin-bottom: 3rem; text-align: center; } .cta-promo { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto 1.25rem; border-radius: 10px; border: 1px solid hsl(var(--border)); } .cta p { margin: 0 0 1.1rem; font-size: 1.05rem; color: hsl(var(--foreground)); } .cta-badges { display: flex; gap: 0.9rem; justify-content: center; align-items: center; flex-wrap: wrap; } .cta-badges a { display: inline-flex; line-height: 0; opacity: 0.94; transition: opacity 0.15s ease, transform 0.15s ease; } .cta-badges a:hover { opacity: 1; transform: translateY(-1px); } .cta-badges .badge { height: 40px; width: auto; display: block; } .content h2 { font-size: 1.4rem; margin: 2.25rem 0 0.75rem; } .content h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; color: hsl(var(--primary)); } .content p { margin: 0 0 1rem; color: hsl(var(--foreground)); } .content ul, .content ol { margin: 0 0 1rem; padding-left: 1.4rem; } .content li { margin-bottom: 0.5rem; } .content .example-box { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1rem 0 1.5rem; } .content .example-box p:last-child { margin-bottom: 0; } .glossary-term { text-decoration: underline dotted; text-underline-offset: 2px; color: inherit; } .glossary-term:hover { color: hsl(var(--primary)); } .faq { margin-top: 2.25rem; } .faq h2 { font-size: 1.4rem; margin: 0 0 1rem; } .faq details { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 0.75rem; } .faq details[open] { border-color: hsl(var(--primary) / 0.5); } .faq summary { cursor: pointer; font-weight: 600; font-family: "Outfit", sans-serif; color: hsl(var(--foreground)); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: hsl(var(--primary)); font-size: 1.2rem; font-weight: 700; flex-shrink: 0; } .faq details[open] summary::after { content: "−"; } .faq summary:hover { color: hsl(var(--primary)); } .faq details p { margin: 0.75rem 0 0; color: hsl(var(--muted-foreground)); } .glossary-grid { display: grid; gap: 1.25rem; } .glossary-entry { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 1.25rem 1.5rem; } .glossary-entry h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: hsl(var(--primary)); } .glossary-entry p { margin: 0 0 0.75rem; color: hsl(var(--foreground)); } .glossary-entry p:last-child { margin-bottom: 0; } .glossary-entry .related { font-size: 0.88rem; color: hsl(var(--muted-foreground)); } .tools-index-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; } .tools-index-list a { display: block; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 1rem 1.25rem; text-decoration: none; color: hsl(var(--foreground)); font-weight: 600; } .tools-index-list a:hover { border-color: hsl(var(--primary)); } .tools-index-list .desc { display: block; font-weight: 400; color: hsl(var(--muted-foreground)); font-size: 0.88rem; margin-top: 0.25rem; } .site-footer { border-top: 1px solid hsl(var(--border)); padding: 1.5rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: 0.85rem; } @media (max-width: 480px) { .wrap { padding: 1.5rem 1rem 3rem; } h1 { font-size: 1.6rem; } .card { padding: 1.25rem; } }