/* Advanced animated dual-theme CSS for AtlasPulse */ /* Baseline and variables */ :root { --bg: #f8fafc; --bg-elev: #ffffff; --text: #0b1220; --text-muted: #475569; --border: rgba(15, 23, 42, 0.12); --brand: #2563eb; --brand-2: #10b981; --accent: #7c3aed; --card-bg: rgba(255, 255, 255, 0.8); --glass-blur: 16px; --shadow-soft: 0 10px 30px -12px rgba(2,6,23,0.25); } .dark { --bg: #0b1220; --bg-elev: #0f172a; --text: #e5e7eb; --text-muted: #9ca3af; --border: rgba(148, 163, 184, 0.16); --brand: #60a5fa; --brand-2: #34d399; --accent: #a78bfa; --card-bg: rgba(15, 23, 42, 0.8); --shadow-soft: 0 10px 30px -14px rgba(0,0,0,0.6); } /* Stories page intent palettes (applied on ) */ html.stories-stories { --brand: #06b6d4; /* cyan */ --brand-2: #f59e0b; /* amber */ --accent: #ef4444; /* red */ } html.stories-edu { --brand: #2563eb; /* blue */ --brand-2: #10b981; /* green */ --accent: #22c55e; /* emerald accent */ } html.stories-research { --brand: #7c3aed; /* purple */ --brand-2: #06b6d4; /* cyan */ --accent: #a78bfa; /* lavender accent */ } html.dark.stories-research { --brand: #a78bfa; --brand-2: #22d3ee; --accent: #c4b5fd; } html.dark.stories-stories { --brand: #22d3ee; /* brighter cyan */ --brand-2: #fbbf24; /* bright amber */ --accent: #f87171; /* soft red */ } * { box-sizing: border-box; } html, body { height: 100%; } html { color-scheme: light dark; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; line-height: 1.6; background: var(--bg); color: var(--text); } /* Global form controls */ input, textarea, select { border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); border-radius: 12px; padding: 12px 14px; } input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--text-muted) 80%, transparent); } /* Animated atmospheric background (global) */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; } body::before { background: radial-gradient(1200px 600px at 10% 10%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 60%), radial-gradient(1000px 500px at 85% 25%, color-mix(in oklab, var(--brand-2) 18%, transparent), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg-elev)); animation: bgPan 22s linear infinite; } body::after { z-index: -1; background: conic-gradient(from 180deg at 50% 50%, color-mix(in oklab, var(--brand) 8%, transparent), color-mix(in oklab, var(--brand-2) 6%, transparent), color-mix(in oklab, var(--accent) 6%, transparent)); filter: blur(48px) saturate(120%); opacity: 0.35; transform: translate3d(0,0,0); animation: aurora 28s ease-in-out infinite alternate; } @keyframes bgPan { 0%{background-position:0 0, 100% 25%, 0 0} 50%{background-position:6% 3%, 92% 22%, 0 0} 100%{background-position:0 0, 100% 25%, 0 0} } @keyframes aurora { 0%{transform:translate3d(-2%, -1%, 0) rotate(0deg)} 50%{transform:translate3d(1%, 2%, 0) rotate(12deg)} 100%{transform:translate3d(-1%, 1%, 0) rotate(-8deg)} } @keyframes hueshift { 0% { filter: hue-rotate(0deg) } 100% { filter: hue-rotate(360deg) } } /* Index page: richer animated background */ .index-animated::before { background: radial-gradient(1100px 520px at 8% 12%, color-mix(in oklab, var(--brand) 25%, transparent), transparent 60%), radial-gradient(1000px 500px at 92% 18%, color-mix(in oklab, var(--brand-2) 22%, transparent), transparent 60%), radial-gradient(900px 460px at 50% 90%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg-elev)); animation: bgPan 26s linear infinite; } .dark.index-animated::before { background: radial-gradient(1100px 520px at 8% 12%, color-mix(in oklab, var(--brand) 35%, transparent), transparent 60%), radial-gradient(1000px 500px at 92% 18%, color-mix(in oklab, var(--brand-2) 28%, transparent), transparent 60%), radial-gradient(900px 460px at 50% 90%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg-elev)); } .index-animated::after { background: conic-gradient(from 0deg at 50% 50%, color-mix(in oklab, var(--brand) 10%, transparent), color-mix(in oklab, var(--brand-2) 8%, transparent), color-mix(in oklab, var(--accent) 8%, transparent)); filter: blur(52px) saturate(130%); opacity: .42; animation: aurora 30s ease-in-out infinite alternate, hueshift 60s linear infinite; } /* Subtle animated grid layer for extra depth */ .bg-net { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .08; mix-blend-mode: overlay; } .bg-net::before { content: ""; position: absolute; inset: -50%; background: repeating-linear-gradient(0deg, currentColor 0px, currentColor 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, currentColor 0px, currentColor 1px, transparent 1px, transparent 40px); color: color-mix(in oklab, var(--brand) 40%, var(--accent)); transform: rotate(12deg); animation: netScroll 40s linear infinite; } @keyframes netScroll { 0% { transform: rotate(12deg) translateY(0) } 100% { transform: rotate(12deg) translateY(-40px) } } /* Smooth theme switching */ html.theme-switching body, html.theme-switching header, html.theme-switching .glass, html.theme-switching .card, html.theme-switching input, html.theme-switching textarea, html.theme-switching select, html.theme-switching button { transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease; } html.intent-switching body, html.intent-switching header, html.intent-switching .glass, html.intent-switching .card, html.intent-switching input, html.intent-switching textarea, html.intent-switching select, html.intent-switching button { transition: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease, filter .5s ease; } html.intent-switching body::after { transition: filter .5s ease, opacity .5s ease; filter: saturate(130%) hue-rotate(20deg); } /* Header / navbar */ header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(10px); background: color-mix(in oklab, var(--bg-elev) 85%, transparent); border-bottom: 1px solid var(--border); } header nav { max-width: 1200px; margin: 0 auto; height: 64px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } header a { color: inherit; text-decoration: none; } header a:hover { color: var(--brand); } /* Enhanced nav link hover: gradient text + glow; no underline */ header nav a { position: relative; text-decoration: none; transition: color .25s ease, filter .25s ease, background-position .6s ease, transform .15s ease; } header nav a:hover, header nav a:focus-visible { text-decoration: none !important; color: transparent; background-image: linear-gradient(90deg, var(--brand), var(--brand-2)); background-size: 200% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 14px color-mix(in oklab, var(--brand) 35%, transparent)); transform: translateY(-1px) scale(1.04); } header nav a:hover { background-position: 100% 50%; } /* Responsive nav */ .nav-links, .nav-cta { display: flex; } #menuBtn { display: none; } @media (max-width: 768px) { .nav-links, .nav-cta { display: none; } #menuBtn { display: inline-flex; } #mobileMenu { display: none; padding: 12px 16px; } #mobileMenu a { display: block; padding: 8px 0; } } /* Announcement bar (top band) */ .announcement { background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand)); color: #fff; } .announcement .inner { max-width: 1200px; margin: 0 auto; padding: 6px 16px; text-align: center; font-size: 0.9rem; } /* Animated announcement content */ .ann-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 9999px; font-weight: 800; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } .ann-sep { margin: 0 8px; opacity: .85; } .ann-rotator { display: inline-block; min-height: 1em; position: relative; padding-right: 3px; } .ann-rotator.enter { animation: annSlideIn .45s cubic-bezier(.2,.8,.2,1); } .ann-rotator.leave { animation: annSlideOut .35s cubic-bezier(.2,.8,.2,1); position: absolute; } .ann-rotator[data-typing="true"]::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 1.1em; background: currentColor; border-radius: 1px; animation: caretBlink 1s steps(1) infinite; } @keyframes caretBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } } @keyframes annSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes annSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } /* Buttons */ button, .btn { appearance: none; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); padding: 10px 14px; border-radius: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,0.03); } button:hover, .btn:hover { box-shadow: var(--shadow-soft); border-color: color-mix(in oklab, var(--brand) 25%, var(--border)); } .btn-primary { background: var(--brand); color: #fff; border-color: color-mix(in oklab, var(--brand) 60%, var(--border)); } .btn-primary:hover { background: color-mix(in oklab, var(--brand) 85%, black 0%); } /* Theme toggle icon button */ [data-theme-toggle] { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; } /* Cards / glass */ .glass, .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; backdrop-filter: blur(var(--glass-blur)) saturate(160%); padding: 20px; box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease; } .glass:hover, .card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -18px rgba(0,0,0,.4), var(--shadow-soft); } /* Sections and general layout */ section { padding: 25px 16px; } section > div { max-width: 1200px; margin: 0 auto; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .section-head h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0; } .muted { color: var(--text-muted); } /* Dashboard */ .dashboard-shell { min-height: 100vh; display: grid; gap: 16px; align-content: start; } .dash-hero { max-width: 1200px; margin: 16px auto 0; position: relative; overflow: hidden; } .dash-hero::before { content: ""; position: absolute; inset: -20% -10% -10% -20%; z-index: 0; pointer-events:none; background: radial-gradient(600px 300px at 15% 20%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%), radial-gradient(520px 260px at 85% 60%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%); filter: blur(22px) saturate(120%); opacity: .35; animation: contactGlow 22s ease-in-out infinite alternate; } .dash-hero-head { position: relative; z-index: 1; display:flex; align-items:center; justify-content: space-between; gap: 12px; } .dash-title { position: relative; z-index: 1; margin: 6px 0 0 0; font-size: clamp(1.6rem, 4vw, 2.25rem); } .dash-title { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .dash-subtitle { position: relative; z-index: 1; margin: 4px 0 0 0; } .dash-welcome { position: relative; z-index: 1; margin-top: 12px; } .dash-welcome-inner { display:flex; align-items:center; justify-content: space-between; gap: 12px; } .dash-welcome-level { display:flex; flex-direction: column; gap: 2px; } .dash-welcome-level .k { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); } .dash-welcome-level .v { font-size: 20px; font-weight: 800; } .dash-stats { position: relative; z-index: 1; margin-top: 12px; } .stat-card { position: relative; overflow: hidden; border-radius: 16px; padding: 16px; background: linear-gradient(180deg, color-mix(in oklab, var(--bg-elev) 96%, transparent), color-mix(in oklab, var(--bg-elev) 90%, transparent)); border: 1px solid var(--border); } .stat-card::before { content: ""; position: absolute; inset: -20% -10% -10% -20%; pointer-events:none; z-index: 0; background: radial-gradient(200px 100px at 20% 30%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 60%); filter: blur(12px); opacity: .4; } .stat-k { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); position: relative; z-index: 1; } .stat-v { font-size: 22px; font-weight: 800; margin-top: 6px; position: relative; z-index: 1; } .dash-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .action-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 14px; border-radius: 12px; font-weight: 700; border: 0; cursor: pointer; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow-soft); transition: transform .15s ease, box-shadow .25s ease, background-position .6s ease; background-size: 200% 200%; } .action-btn:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 40px -18px rgba(0,0,0,.4), var(--shadow-soft); } .action-btn.alt { background: linear-gradient(135deg, var(--accent), var(--brand)); } .action-btn.ghost { color: var(--text); background: transparent; border: 1px solid var(--border); } .dash-shortcuts { padding-top: 0; } .dash-grid { max-width: 1200px; margin: 0 auto; } .dash-tile { display:flex; align-items:center; gap: 12px; transition: transform .2s ease, box-shadow .2s ease; } .dash-tile:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -18px rgba(0,0,0,.4), var(--shadow-soft); } .tile-icon { width: 44px; height: 44px; display:inline-flex; align-items:center; justify-content:center; border-radius: 14px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: var(--shadow-soft); font-size: 22px; } .tile-body h3 { margin: 0; } .tile-body p { margin: 4px 0 0 0; } /* Hero */ #top { position: relative; overflow: hidden; text-align-last: center;} #top h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.1; margin: 16px 0; } #top p { max-width: 720px; margin: 8px auto; color: var(--text-muted); } /* Assistant */ #assistant-form { display: flex; gap: 12px; max-width: 720px; margin: 12px auto 0; } #assistant-form input { flex: 1; } #assistant-form button { border: none; border-radius: 12px; padding: 12px 18px; background: var(--brand); color: #fff; } #assistant-results { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 960px; margin: 16px auto 0; } #assistant-results article h3 { margin: 8px 0 0 0; font-weight: 700; } #assistant-results article p { margin: 8px 0 0 0; color: var(--text-muted); } /* Stories and themes grids */ #stories-grid, #themes-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { #stories-grid, #themes-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { #stories-grid, #themes-grid { grid-template-columns: repeat(3, 1fr); } } /* Stories listing page */ .stories-shell { max-width: 1200px; margin: 0 auto; padding: 24px 16px; } .stories-page { transition: background .4s ease; } .stories-page.mode-education { } .stories-page.mode-research { } .mode-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; background: color-mix(in oklab, var(--bg-elev) 92%, transparent); padding: 6px; border-radius: 9999px; border: 1px solid var(--border); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 18%, transparent); } .mode-switch--3 { grid-template-columns: 1fr 1fr 1fr; } .mode-btn { position: relative; z-index: 1; appearance: none; border: 0; background: transparent; color: var(--text); font-weight: 800; padding: 10px 14px; border-radius: 9999px; cursor: pointer; transition: color .3s ease, transform .15s ease; } .mode-btn:hover { transform: translateY(-1px); } .mode-btn[aria-selected="true"] { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.12); } .mode-indicator { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(33.333% - 0px); border-radius: 9999px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 26px rgba(2,6,23,0.35); transition: left .5s cubic-bezier(.2,.8,.2,1), width .4s ease, background .35s ease, box-shadow .35s ease; } /* Indicator responds to page mode AND global html classes so switch can live in navbar */ .stories-page.mode-stories .mode-indicator, html.stories-stories .mode-indicator { background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .stories-page.mode-education .mode-indicator, html.stories-edu .mode-indicator { background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .stories-page.mode-research .mode-indicator, html.stories-research .mode-indicator { background: linear-gradient(135deg, var(--accent), var(--brand)); } /* Mode-specific background accents for stronger differentiation */ html.stories-stories body::after { opacity: .42; filter: blur(52px) saturate(130%) hue-rotate(0deg); } html.stories-edu body::after { opacity: .48; filter: blur(56px) saturate(140%) hue-rotate(-15deg); } html.stories-research body::after { opacity: .5; filter: blur(60px) saturate(150%) hue-rotate(35deg); } .edu-panel { margin-bottom: 16px; } .edu-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .edu-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .edu-grid { grid-template-columns: repeat(3, 1fr); } } .cert-card { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); display: grid; gap: 6px; } .cert-meta { display:flex; align-items:center; gap: 8px; } .cert-badge { display:inline-flex; align-items:center; padding: 2px 8px; border-radius: 9999px; font-size: 12px; border: 1px solid var(--border); } .cert-badge.free { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.35); } .cert-badge.paid { background: rgba(234,88,12,.12); color: #c2410c; border-color: rgba(234,88,12,.35); } .stories-search { display:flex; gap:8px; align-items:center; justify-content:center; margin: 8px 0 25px 0; } .stories-search input { flex: 1; max-width: 600px; border: 1px solid transparent; background-image: linear-gradient(var(--bg-elev), var(--bg-elev)), linear-gradient(135deg, var(--brand), var(--brand-2)); background-origin: border-box; background-clip: padding-box, border-box; } .stories-search input::placeholder { color: color-mix(in oklab, var(--text-muted) 70%, transparent); } .stories-search input:focus { outline: none; box-shadow: 0 8px 30px -18px rgba(2,6,23,.35); } .stories-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .stories-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .stories-grid { grid-template-columns: repeat(3, 1fr); } } /* Education mode: hide search and story cards */ .stories-page.mode-education .stories-search, .stories-page.mode-education #stories-cards { display: none !important; } /* Hide price filter in research mode */ .stories-page.mode-research #stories-price, .stories-page.mode-research label[for="stories-price"] { display: none !important; } /* Reader overlay */ .reader-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .reader-backdrop.show { display: flex; animation: fadeIn .3s ease-out; } .reader-panel { width: 100%; max-width: 860px; max-height: 90vh; overflow-y: auto; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.5); padding: 16px; transform: translateY(10px); animation: modalSlideIn .3s ease-out forwards; } .reader-head { display:flex; align-items:center; justify-content: space-between; gap: 8px; position: sticky; top: 0; background: var(--bg-elev); padding-bottom: 8px; margin-bottom: 8px; } .reader-body h2 { margin: 4px 0; } .reader-actions { display:flex; gap:8px; margin-top: 12px; } .pagination { display:flex; gap: 8px; align-items:center; justify-content:center; margin-top: 16px; } .pagination button { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); } .pagination .active { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border: 0; } .topic-chip { display:inline-flex; align-items:center; padding: 4px 8px; border-radius: 9999px; font-size: 12px; border: 1px solid var(--border); background: var(--bg-elev); } /* Story summary clamp / toggle */ #stories .story-card { position: relative; } .story-badges { display:flex; gap: 8px; align-items:center; margin-bottom: 6px; } .level-badge { display:inline-flex; align-items:center; padding: 4px 8px; border-radius: 9999px; font-size: 12px; border: 1px solid var(--border); background: var(--bg-elev); } .level-badge.level-novice { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.35); } .level-badge.level-beginner { background: rgba(59,130,246,.12); color: #1d4ed8; border-color: rgba(59,130,246,.35); } .level-badge.level-intermediate { background: rgba(99,102,241,.12); color: #4f46e5; border-color: rgba(99,102,241,.35); } .level-badge.level-advanced { background: rgba(234,88,12,.12); color: #c2410c; border-color: rgba(234,88,12,.35); } .level-badge.level-researcher { background: rgba(147,51,234,.12); color: #6d28d9; border-color: rgba(147,51,234,.35); } .story-summary { max-height: 4.5em; /* ~3 lines */ overflow: hidden; position: relative; } .story-summary.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5em; background: linear-gradient(180deg, color-mix(in oklab, var(--bg-elev) 10%, transparent), var(--bg-elev)); } .story-summary.is-expanded { max-height: none; } .story-controls { display: flex; gap: 8px; margin-top: 8px; align-items: center; justify-content: space-between; } .summary-toggle { appearance: none; border: 0; background: transparent; color: color-mix(in oklab, var(--brand) 85%, #fff 0%); padding: 0; font-weight: 800; cursor: pointer; } .summary-toggle::after { content: ' ↓'; } .summary-toggle[aria-expanded="true"]::after { content: ' ↑'; } /* Generic grid helpers */ .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } /* New intake panel */ .intake { max-width: 960px; margin: 0 auto; padding: 0 16px; } .intake-card { position: relative; overflow: hidden; border-radius: 24px; padding: 20px; background: var(--card-bg); background-image: radial-gradient(1200px 600px at 120% -20%, color-mix(in oklab, var(--brand) 6%, transparent), transparent 60%), repeating-linear-gradient(135deg, color-mix(in oklab, var(--text) 4%, transparent) 0 1px, transparent 1px 16px); border: 1px solid var(--border); box-shadow: var(--shadow-soft); } .intake-card::before { content: ""; position: absolute; inset: -20% -10% -10% -20%; z-index: 0; pointer-events: none; background: radial-gradient(600px 300px at 20% 30%, color-mix(in oklab, var(--intake-a, var(--brand)) 22%, transparent), transparent 60%), radial-gradient(520px 260px at 80% 60%, color-mix(in oklab, var(--intake-b, var(--brand-2)) 18%, transparent), transparent 60%); filter: blur(22px) saturate(120%); opacity: .35; animation: contactGlow 22s ease-in-out infinite alternate; } .intake-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .intake-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 9999px; background: linear-gradient(90deg, color-mix(in oklab, var(--intake-a, var(--brand)) 60%, transparent), color-mix(in oklab, var(--intake-b, var(--brand-2)) 60%, transparent)); opacity: .75; transform: scaleX(.6); transform-origin: left; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .intake-card:hover .intake-head::after { transform: scaleX(1); } .intake-titles h2 { margin: 0; } .intake-titles h2 { background: linear-gradient(90deg, var(--intake-a, var(--brand)), var(--intake-b, var(--brand-2))); -webkit-background-clip: text; background-clip: text; color: transparent; } .intake-titles p { margin: 4px 0 0 0; } .intake-mode select { appearance: none; border-radius: 12px; padding: 10px 12px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); background-image: linear-gradient(var(--bg-elev), var(--bg-elev)), linear-gradient(135deg, var(--intake-a, var(--brand)), var(--intake-b, var(--brand-2))); background-origin: border-box; background-clip: padding-box, border-box; transition: box-shadow .25s ease, transform .2s ease; } .intake-mode select:hover { transform: translateY(-1px); box-shadow: 0 8px 30px -18px rgba(2,6,23,.35); } .intake-mode select:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--intake-a, var(--brand)) 40%, transparent); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .intake-form { position: relative; z-index: 1; margin-top: 12px; } .intake-fields { display: grid; gap: 10px; } .intake-fields .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .intake-fields .row textarea { grid-column: 1 / -1; } .intake-fields input, .intake-fields textarea, .intake-fields select { width: 100%; } .intake-fields input, .intake-fields textarea, .intake-fields select { border-radius: 14px; border: 1px solid var(--border); background: color-mix(in oklab, var(--bg-elev) 90%, transparent); transition: border-color .2s ease, box-shadow .25s ease, transform .12s ease; } .intake-fields input:hover, .intake-fields textarea:hover, .intake-fields select:hover { border-color: color-mix(in oklab, var(--intake-a, var(--brand)) 35%, var(--border)); } .intake-fields input:focus, .intake-fields textarea:focus, .intake-fields select:focus { outline: none; border-color: color-mix(in oklab, var(--intake-a, var(--brand)) 55%, var(--border)); box-shadow: 0 10px 30px -14px rgba(2,6,23,.35), 0 0 0 3px color-mix(in oklab, var(--intake-a, var(--brand)) 35%, transparent), 0 0 0 6px color-mix(in oklab, var(--intake-b, var(--brand-2)) 28%, transparent); } .group { opacity: 0; transform: translateY(6px) scale(.995); pointer-events: none; height: 0; overflow: hidden; transition: opacity .35s ease, transform .35s ease, height .35s ease; } .group[data-active="true"] { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; height: auto; } .intake-actions { display: flex; justify-content: flex-end; margin-top: 8px; } .intake-form::before { content: ""; display: block; height: 1px; margin: 12px 0; border-radius: 9999px; background: linear-gradient(90deg, color-mix(in oklab, var(--intake-a, var(--brand)) 50%, transparent), color-mix(in oklab, var(--intake-b, var(--brand-2)) 50%, transparent)); filter: saturate(120%); } /* Intent color ribbons */ .intake-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, var(--intake-a, var(--brand)), var(--intake-b, var(--brand-2))); transition: background .4s ease; } /* Mode color variables */ #intake { --intake-a: var(--brand); --intake-b: var(--brand-2); } #intake[data-mode="bug"] { --intake-a: #ef4444; --intake-b: #f59e0b; } #intake[data-mode="collab"] { --intake-a: #7c3aed; --intake-b: #06b6d4; } #intake[data-mode="other"] { --intake-a: #10b981; --intake-b: #60a5fa; } .intake-card .btn.btn-primary { position: relative; border: none; background: linear-gradient(135deg, var(--intake-a, var(--brand)), var(--intake-b, var(--brand-2))); background-size: 200% 200%; box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--intake-a, var(--brand)) 40%, transparent); transition: transform .15s ease, box-shadow .25s ease, background-position .6s ease; } .intake-card .btn.btn-primary:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 40px -18px color-mix(in oklab, var(--intake-b, var(--brand-2)) 55%, transparent); } .intake-card .btn.btn-primary:active { transform: translateY(0); } @media (max-width: 720px) { .intake-fields .row { grid-template-columns: 1fr; } } /* Reduced motion safety */ @media (prefers-reduced-motion: reduce) { .intake-card::before, .intake-head::after, .intake-card .btn.btn-primary { animation: none; transition: none; } } /* (restored) removed intake-section special background */ /* Theme per intent */ #contact .contact-panel[data-intent="suggest"] { background: linear-gradient(135deg, var(--brand), var(--brand-2)); } #contact .contact-panel[data-intent="bug"] { background: linear-gradient(135deg, #ef4444, #f59e0b); } #contact .contact-panel[data-intent="collab"] { background: linear-gradient(135deg, #7c3aed, #06b6d4); } #contact .contact-panel[data-intent="other"] { background: linear-gradient(135deg, #10b981, #60a5fa); } /* Themes cards accent */ #themes .card { position: relative; padding-left: 20px; } #themes .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--brand), var(--brand-2)); border-radius: 4px; transform: scaleY(.6); opacity: .6; transition: width .25s ease, transform .25s ease, opacity .25s ease; } #themes .card:hover::before { width: 8px; transform: scaleY(1); opacity: 1; } /* Modal and overlays */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; overflow-y: auto; } .modal-backdrop.show { display: flex; animation: fadeIn 0.3s ease-out; } .modal { width: 100%; max-width: 500px; max-height: 90vh; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); padding: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); margin: auto; overflow-y: auto; transform: translateY(-20px); animation: modalSlideIn 0.3s ease-out forwards; backdrop-filter: none; filter: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Page dimming effect - DISABLED to prevent modal blur */ #page-root { transition: opacity 0.3s ease; } #page-root.dimmed { /* Intentionally left without pointer-event blocking so overlays inside remain clickable */ } /* Footer */ footer { border-top: 1px solid var(--border); } footer .inner { max-width: 1200px; margin: 0 auto; padding: 24px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* Links */ a { color: color-mix(in oklab, var(--brand) 82%, #fff 0%); text-decoration: none; } a:hover { text-decoration: underline; } /* Mobile menu */ #mobileMenu { border-top: 1px solid var(--border); background: color-mix(in oklab, var(--bg-elev) 92%, transparent); padding: 16px; } .skeleton { position: relative; overflow: hidden; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* FAQ */ details { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-elev); } summary { cursor: pointer; font-weight: 700; list-style: none; } summary::-webkit-details-marker { display: none; } details[open] { box-shadow: var(--shadow-soft); } /* Blockquotes */ blockquote { font-style: italic; color: var(--text); position: relative; padding-left: 16px; } blockquote::before { content: "\201C"; position: absolute; left: -6px; top: -8px; font-size: 2rem; color: var(--brand-2); opacity: .6; } /* Accessibility focus */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } /* Subscribe button with charging animation */ .subscribe-btn-container { position: relative; display: inline-block; } .subscribe-btn { position: relative; border: 2px solid transparent; background: linear-gradient(135deg, var(--brand), var(--brand-2), var(--accent)); background-size: 300% 300%; color: #ffffff; padding: 12px 24px; border-radius: 20px; font-weight: 700; cursor: pointer; overflow: hidden; transition: all 0.3s ease; transform: perspective(1000px); box-shadow: 0 4px 20px rgba(37, 99, 235, 0.2); animation: gradientShift 4s ease-in-out infinite; } .subscribe-btn:hover { transform: translateY(-2px) perspective(1000px) rotateX(10deg) rotateY(-5deg); box-shadow: 0 8px 30px rgba(37, 99, 235, 0.4), 0 0 20px rgba(16, 185, 129, 0.3); animation-play-state: paused; } .subscribe-btn-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; } .subscribe-text { position: relative; z-index: 3; transition: transform 0.3s ease; } .subscribe-btn:hover .subscribe-text { transform: scale(1.05); } /* Charging bar animation */ .subscribe-charge-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, #ffffff, rgba(255,255,255,0.8), #ffffff); border-radius: 0 0 20px 20px; opacity: 0; width: 0; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(255,255,255,0.5); } .subscribe-btn:hover .subscribe-charge-bar { opacity: 1; width: 100%; animation: chargeUp 1.5s ease-in-out; } /* Sparkles animation */ .subscribe-sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 20px; } .sparkle { position: absolute; width: 4px; height: 4px; background: #ffffff; border-radius: 50%; opacity: 0; box-shadow: 0 0 6px rgba(255,255,255,0.8); } .subscribe-btn:hover .sparkle { animation: sparkleFloat 2s ease-in-out infinite; } .sparkle-1 { top: 20%; left: 15%; animation-delay: 0.2s; } .sparkle-2 { top: 70%; right: 20%; animation-delay: 0.8s; } .sparkle-3 { top: 40%; right: 15%; animation-delay: 1.4s; } /* Keyframes */ @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes chargeUp { 0% { width: 0; opacity: 0; } 20% { opacity: 1; } 100% { width: 100%; opacity: 1; } } @keyframes sparkleFloat { 0%, 100% { opacity: 0; transform: translateY(0) scale(1); } 20% { opacity: 1; } 50% { opacity: 1; transform: translateY(-8px) scale(1.2); } 80% { opacity: 1; transform: translateY(0) scale(0.8); } } /* Pulsing glow effect for the whole button */ .subscribe-btn::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, var(--brand), var(--brand-2), var(--accent)); background-size: 300% 300%; border-radius: 22px; z-index: -1; opacity: 0; transition: opacity 0.3s ease; animation: gradientShift 4s ease-in-out infinite; filter: blur(8px); } .subscribe-btn:hover::before { opacity: 0.7; animation: pulseGlow 1.5s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 0.9; } } /* Mobile adjustments */ @media (max-width: 768px) { .subscribe-btn { padding: 10px 20px; font-size: 14px; } .mobile-subscribe-btn { width: 100%; margin-top: 8px; } } /* Charge completion effect */ .subscribe-btn.charge-complete { transform: scale(1.05); box-shadow: 0 0 30px rgba(37, 99, 235, 0.8), 0 0 50px rgba(16, 185, 129, 0.6); animation: chargeComplete 0.5s ease-out; } @keyframes chargeComplete { 0% { box-shadow: 0 4px 20px rgba(37, 99, 235, 0.2); } 50% { box-shadow: 0 0 40px rgba(37, 99, 235, 1), 0 0 60px rgba(16, 185, 129, 0.8); transform: scale(1.1); } 100% { box-shadow: 0 0 30px rgba(37, 99, 235, 0.8), 0 0 50px rgba(16, 185, 129, 0.6); transform: scale(1.05); } } /* Dark mode adjustments */ .dark .subscribe-btn { box-shadow: 0 4px 20px rgba(96, 165, 250, 0.3); } .dark .subscribe-btn:hover { box-shadow: 0 8px 30px rgba(96, 165, 250, 0.5), 0 0 20px rgba(52, 211, 153, 0.4); } .dark .subscribe-btn.charge-complete { box-shadow: 0 0 30px rgba(96, 165, 250, 0.8), 0 0 50px rgba(52, 211, 153, 0.6); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } html.theme-switching * { transition: none !important; } .subscribe-btn { animation: none; } .subscribe-btn::before { animation: none; } .subscribe-btn:hover .subscribe-charge-bar { animation: none; } .subscribe-btn:hover .sparkle { animation: none; } } /* ========================= */ /* Auth experience (login UI) */ /* ========================= */ .auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; } .auth-theme { position: fixed; top: 16px; right: 16px; } .auth-theme button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--text); } .auth-card { width: 100%; max-width: 760px; border-radius: 20px; padding: 24px; overflow: hidden; position: relative; } .auth-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .auth-header .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; } .auth-header .brand .logo-badge { display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow-soft)} .auth-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: color-mix(in oklab, var(--bg-elev) 92%, transparent); padding: 6px; border: 1px solid var(--border); border-radius: 9999px; margin-top: 8px; } .auth-tab { position: relative; z-index: 1; appearance: none; border: 0; background: transparent; color: var(--text); font-weight: 700; padding: 10px 12px; border-radius: 9999px; cursor: pointer; } .auth-tab[aria-selected="true"] { color: #fff; } .auth-tab-indicator { position: absolute; inset: 6px; width: calc(33.333% - 0px); border-radius: 9999px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 20px rgba(2,6,23,0.35); transform: translateX(0%); transition: transform .5s cubic-bezier(.2,.8,.2,1); } .auth-panels { position: relative; margin-top: 16px; min-height: 260px; } .auth-panel { animation: panelIn .5s cubic-bezier(.2,.8,.2,1); } .auth-card[data-state="signup"] #panel-signup, .auth-card[data-state="login"] #panel-login, .auth-card[data-state="reset"] #panel-reset { display: block; } .auth-card[data-state="signup"] #panel-login, .auth-card[data-state="signup"] #panel-reset, .auth-card[data-state="login"] #panel-signup, .auth-card[data-state="login"] #panel-reset, .auth-card[data-state="reset"] #panel-login, .auth-card[data-state="reset"] #panel-signup { display: none; } @keyframes panelIn { from { opacity: 0; transform: translateY(8px) scale(.98); filter: saturate(.9); } to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); } } .auth-panel h1 { margin: 4px 0 6px 0; font-size: clamp(1.5rem, 3vw, 2rem); } .auth-actions { display: grid; gap: 12px; margin-top: 10px; } .auth-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 12px; } .auth-form input { width: 100%; } .auth-alt { display:flex; align-items:center; gap:8px; justify-content:center; margin-top: 8px; } .auth-alt .link { background: none; border: 0; color: color-mix(in oklab, var(--brand) 82%, #fff 0%); cursor: pointer; font-weight: 700; } /* Subtle premium ornament behind the card */ .auth-card::before { content: ""; position: absolute; inset: -20% -10% -10% -20%; z-index: -1; pointer-events: none; background: radial-gradient(600px 300px at 10% 20%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%), radial-gradient(520px 260px at 85% 60%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%); filter: blur(24px) saturate(120%); opacity: .6; animation: contactGlow 22s ease-in-out infinite alternate; } @media (max-width: 680px) { .auth-form { grid-template-columns: 1fr; } .auth-card { padding: 18px; } } /* Removed inline reset sheet styles (restored full panel) */