/** * Art Deco — “Gatsby” aesthetic + dark / light themes * Tokens: data-theme="dark" | "light" on */ :root, [data-theme="dark"] { --color-background: #0a0a0a; --color-background-alt: #0f0f0f; --color-surface: #141414; --color-foreground: #f2f0e4; --color-muted: #1a1a1a; --color-muted-foreground: #888888; --color-accent: #d4af37; --color-accent-light: #f2e8c4; --color-accent-secondary: #1e3d59; --color-accent-tertiary: #f2e8c4; --color-accent-fg: #0a0a0a; --color-border: rgba(212, 175, 55, 0.45); --color-border-subtle: rgba(212, 175, 55, 0.22); --color-ring: #d4af37; --color-glass: #141414; --color-glass-hover: #1a1a1a; --color-glass-border: rgba(212, 175, 55, 0.32); --color-input-bg: transparent; --color-panel-head-bg: rgba(212, 175, 55, 0.06); --color-noise-opacity: 0.028; --glow-sm: 0 0 15px rgba(212, 175, 55, 0.22); --glow-md: 0 0 22px rgba(212, 175, 55, 0.32); --glow-gold: 0 0 20px rgba(212, 175, 55, 0.25); --crosshatch: rgba(212, 175, 55, 0.045); } [data-theme="light"] { --color-background: #ebe6de; --color-background-alt: #e3ddd4; --color-surface: #f5f2eb; --color-foreground: #141210; --color-muted: #dcd6cc; --color-muted-foreground: #5c5852; --color-accent: #9a7b1a; --color-accent-light: #c9a227; --color-accent-secondary: #1e3d59; --color-accent-tertiary: #7a6214; --color-accent-fg: #0a0a0a; --color-border: rgba(154, 123, 26, 0.5); --color-border-subtle: rgba(154, 123, 26, 0.28); --color-ring: #9a7b1a; --color-glass: #f5f2eb; --color-glass-hover: #faf8f3; --color-glass-border: rgba(154, 123, 26, 0.35); --color-input-bg: transparent; --color-panel-head-bg: rgba(154, 123, 26, 0.08); --color-noise-opacity: 0.035; --glow-sm: 0 0 14px rgba(154, 123, 26, 0.2); --glow-md: 0 0 22px rgba(154, 123, 26, 0.28); --glow-gold: 0 0 18px rgba(154, 123, 26, 0.22); --crosshatch: rgba(154, 123, 26, 0.07); } .md-shell { min-height: 100vh; background-color: var(--color-background); color: var(--color-foreground); position: relative; } /* Sunburst + diagonal crosshatch (spec) */ .ad-pattern-bg { background-image: radial-gradient(ellipse 85% 55% at 50% -8%, rgba(212, 175, 55, 0.11) 0%, transparent 48%), repeating-linear-gradient(45deg, transparent, transparent 13px, var(--crosshatch) 13px, var(--crosshatch) 14px), repeating-linear-gradient(-45deg, transparent, transparent 13px, var(--crosshatch) 13px, var(--crosshatch) 14px); } [data-theme="light"] .ad-pattern-bg { background-image: radial-gradient(ellipse 85% 55% at 50% -8%, rgba(154, 123, 26, 0.09) 0%, transparent 48%), repeating-linear-gradient(45deg, transparent, transparent 13px, var(--crosshatch) 13px, var(--crosshatch) 14px), repeating-linear-gradient(-45deg, transparent, transparent 13px, var(--crosshatch) 13px, var(--crosshatch) 14px); } .btc-header { border-bottom: 1px solid var(--color-border-subtle); background: var(--color-background); } [data-theme="light"] .btc-header { background: var(--color-background); } .md-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .md-orb { position: absolute; border-radius: 50%; filter: blur(64px); } .md-orb-1 { width: min(400px, 70vw); height: min(400px, 70vw); background: #d4af37; top: -15%; left: 8%; opacity: 0.04; } .md-orb-2 { width: min(320px, 60vw); height: min(320px, 60vw); background: #1e3d59; bottom: 0; right: -5%; opacity: 0.07; } [data-theme="light"] .md-orb-1 { opacity: 0.06; } [data-theme="light"] .md-orb-2 { opacity: 0.05; } @media (max-width: 640px) { .md-orb { filter: blur(48px); } } .md-noise::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: var(--color-noise-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .md-content { position: relative; z-index: 10; } .font-heading { font-family: "Marcellus", "Palatino Linotype", serif; } /* Hero sunburst */ .ad-sunburst { position: absolute; width: min(320px, 55vw); height: min(320px, 55vw); border-radius: 50%; background: repeating-conic-gradient( from 0deg at 50% 50%, transparent 0deg 7deg, rgba(212, 175, 55, 0.07) 7deg 8deg ); opacity: 0.85; } [data-theme="light"] .ad-sunburst { background: repeating-conic-gradient( from 0deg at 50% 50%, transparent 0deg 7deg, rgba(154, 123, 26, 0.09) 7deg 8deg ); } @media (prefers-reduced-motion: reduce) { .ad-sunburst { opacity: 0.55; } } /* Framed cards + corner brackets */ .glass-card { position: relative; background: var(--color-glass); border: 1px solid var(--color-glass-border); border-radius: 0; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.35); transition: transform 500ms ease-out, border-color 300ms ease-out, background 300ms ease-out, box-shadow 300ms ease-out; } [data-theme="light"] .glass-card { box-shadow: inset 0 0 0 1px rgba(20, 18, 16, 0.06); } .glass-card::before, .glass-card::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--color-accent); opacity: 0.55; pointer-events: none; z-index: 1; transition: opacity 300ms ease-out; } .glass-card::before { top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; } .glass-card::after { bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; } a.glass-card:hover::before, a.glass-card:hover::after, button.glass-card:hover::before, button.glass-card:hover::after, .glass-card--interactive:hover::before, .glass-card--interactive:hover::after { opacity: 1; } a.glass-card:hover, button.glass-card:hover, .glass-card--interactive:hover { border-color: var(--color-accent); background: var(--color-glass-hover); transform: translateY(-8px); box-shadow: var(--glow-md), inset 0 0 0 1px rgba(212, 175, 55, 0.15); } @media (prefers-reduced-motion: reduce) { .glass-card, a.glass-card, .glass-card--interactive { transition: border-color 300ms ease-out, background 300ms ease-out, box-shadow 300ms ease-out; } a.glass-card:hover, .glass-card--interactive:hover { transform: none; } } .glass-card--accent { border-color: rgba(212, 175, 55, 0.65); box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25), var(--glow-sm), inset 0 0 0 1px rgba(10, 10, 10, 0.35); } [data-theme="light"] .glass-card--accent { box-shadow: 0 0 0 1px rgba(154, 123, 26, 0.35), var(--glow-sm), inset 0 0 0 1px rgba(20, 18, 16, 0.06); } .ad-display-gold { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.12em; } a.btn-primary, a.btn-outline, a.btn-ghost { text-decoration: none; } /* Solid gold (primary CTA) */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(180deg, #e4c349 0%, #d4af37 45%, #b8941f 100%); color: var(--color-accent-fg); border: 2px solid var(--color-accent); border-radius: 0; font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.25; padding: 0.65rem 1.4rem; min-height: 3rem; box-shadow: var(--glow-sm); transition: background 400ms ease-out, box-shadow 400ms ease-out, color 300ms ease-out, transform 200ms ease-out; cursor: pointer; } .btn-primary:hover { background: linear-gradient(180deg, #f2e8c4 0%, #e4c95a 100%); color: #0a0a0a; box-shadow: 0 0 24px rgba(212, 175, 55, 0.38); } .btn-primary:active { transform: scale(0.98); } /* Art Deco default: outline gold → hover solid */ .btn-outline { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--color-accent); border: 2px solid var(--color-accent); border-radius: 0; font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.55rem 1.2rem; min-height: 3rem; transition: background 400ms ease-out, color 300ms ease-out, border-color 300ms ease-out, box-shadow 400ms ease-out, transform 200ms ease-out; cursor: pointer; } .btn-outline:hover { background: var(--color-accent); color: var(--color-accent-fg); border-color: var(--color-accent); box-shadow: 0 0 22px rgba(212, 175, 55, 0.35); } [data-theme="light"] .btn-outline:hover { color: #0a0a0a; } .btn-outline:active { transform: scale(0.98); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--color-foreground); border: none; border-radius: 0; font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.5rem 0.85rem; min-height: 3rem; transition: background 400ms ease-out, color 300ms ease-out; cursor: pointer; } .btn-ghost:hover { background: var(--color-accent-secondary); color: var(--color-accent-light); } [data-theme="light"] .btn-ghost:hover { color: #f2f0e4; } .btn-theme-toggle { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 0; border: 2px solid var(--color-border-subtle); background: var(--color-surface); color: var(--color-accent); align-items: center; justify-content: center; box-shadow: var(--glow-sm); transition: border-color 300ms ease-out, box-shadow 300ms ease-out; } .btn-theme-toggle:hover { border-color: var(--color-accent); box-shadow: var(--glow-md); } .btn-theme-toggle .icon-light { display: none; } [data-theme="light"] .btn-theme-toggle .icon-dark { display: none; } [data-theme="light"] .btn-theme-toggle .icon-light { display: block; } .btn-sm { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.625rem; } .btn-xs { min-height: 2.5rem; padding: 0.4rem 0.85rem; font-size: 0.5625rem; } .focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-ring); } .input-wrap { position: relative; } .input-wrap .input-prefix { position: absolute; left: 0.75rem; bottom: 0.55rem; color: var(--color-muted-foreground); font-family: "Josefin Sans", sans-serif; font-size: 0.8125rem; pointer-events: none; } .input-field { width: 100%; min-height: 3rem; padding: 0.5rem 0.75rem 0.5rem 1.75rem; background: var(--color-input-bg); border: none; border-bottom: 2px solid var(--color-accent); border-radius: 0; color: var(--color-foreground); font-family: "Josefin Sans", system-ui, sans-serif; font-size: 1rem; transition: border-color 300ms ease-out, box-shadow 300ms ease-out; } .input-field::placeholder { color: var(--color-muted-foreground); } .input-field:focus { outline: none; border-bottom-color: var(--color-accent-light); box-shadow: 0 4px 12px rgba(212, 175, 55, 0.18); } .select-field { min-height: 3rem; padding: 0.45rem 0.5rem; background: var(--color-input-bg); border: none; border-bottom: 2px solid var(--color-accent); border-radius: 0; color: var(--color-foreground); font-family: "Josefin Sans", system-ui, sans-serif; font-size: 0.9375rem; } .select-field:focus { outline: none; border-bottom-color: var(--color-accent-light); box-shadow: 0 4px 12px rgba(212, 175, 55, 0.18); } .md-badge-pulse { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted-foreground); font-family: "Josefin Sans", sans-serif; } .md-badge-pulse::before { content: ""; width: 6px; height: 6px; border-radius: 0; transform: rotate(45deg); background: var(--color-accent); box-shadow: var(--glow-sm); animation: md-pulse-dot 2.5s ease-in-out infinite; } @keyframes md-pulse-dot { 0%, 100% { opacity: 1; transform: rotate(45deg) scale(1); } 50% { opacity: 0.75; transform: rotate(45deg) scale(1.12); box-shadow: 0 0 14px rgba(212, 175, 55, 0.45); } } @media (prefers-reduced-motion: reduce) { .md-badge-pulse::before { animation: none; } } .md-panel-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border-subtle); background: var(--color-panel-head-bg); border-radius: 0; } .md-panel-dot { width: 7px; height: 7px; border-radius: 0; transform: rotate(45deg); background: var(--color-accent); box-shadow: var(--glow-sm); } /* Section divider accent lines (utility for headings) */ .ad-rule { background: linear-gradient(90deg, transparent, var(--color-accent), transparent); opacity: 0.45; } .page-variant-apps .md-variant-tag { color: var(--color-accent); } .page-variant-data_eng .md-variant-tag { color: var(--color-accent-secondary); } .page-variant-ai .md-variant-hint, .page-variant-ai .page-ai-pulse-hint { color: var(--color-accent); opacity: 0.92; animation: md-ai-hint 3s ease-in-out infinite; } @keyframes md-ai-hint { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } } .page-variant-ai .page-ai-filter-glow { box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.28), var(--glow-sm); } .page-variant-data_eng .de-pipeline-step { border-radius: 0 !important; border-color: var(--color-border-subtle) !important; color: var(--color-muted-foreground) !important; } .page-variant-data_eng .de-pipeline-step:hover { border-color: var(--color-accent) !important; color: var(--color-foreground) !important; box-shadow: var(--glow-sm) !important; } .page-home .page-home-datasets a.glass-card:focus-visible { transform: translateY(-4px); } article.glass-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-ring), var(--glow-md); } .alert-destructive { border: 2px solid rgba(239, 68, 68, 0.45); background: var(--color-glass); border-radius: 0; } .btc-modal-backdrop { background: rgba(0, 0, 0, 0.62); } [data-theme="light"] .btc-modal-backdrop { background: rgba(20, 18, 16, 0.45); }