Spaces:
Running
Running
| /* ========================================================= | |
| AMARU DEEP-DIVE — style.css | |
| Palette: deep purple #1a0f2e · gold #d4af37 | |
| ========================================================= */ | |
| /* ---- Reset & tokens ------------------------------------ */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --purple-deep: #1a0f2e; | |
| --purple-mid: #2d1b5e; | |
| --purple-light: #3d2878; | |
| --gold: #d4af37; | |
| --gold-light: #e8cc6a; | |
| --gold-dim: #b8952e; | |
| --cream: #f5f0e8; | |
| --text-main: #e8e0f0; | |
| --text-muted: #a090c0; | |
| --text-dim: #7060a0; | |
| --border: rgba(212,175,55,0.18); | |
| --glass: rgba(45,27,94,0.55); | |
| --font-head: 'Cinzel', 'Palatino Linotype', Georgia, serif; | |
| --font-body: 'Inter', system-ui, -apple-system, sans-serif; | |
| --font-mono: 'JetBrains Mono', 'Fira Code', monospace; | |
| --radius: 12px; | |
| --radius-lg: 20px; | |
| --section-gap: 6rem; | |
| --content-max: 1100px; | |
| } | |
| html { scroll-behavior: smooth; font-size: 16px; } | |
| body { | |
| background: var(--purple-deep); | |
| color: var(--text-main); | |
| font-family: var(--font-body); | |
| line-height: 1.7; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ---- Typography ---------------------------------------- */ | |
| h1, h2, h3, h4 { | |
| font-family: var(--font-head); | |
| letter-spacing: 0.03em; | |
| line-height: 1.2; | |
| } | |
| h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); color: var(--gold); } | |
| h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); color: var(--gold-light); margin-bottom: 1.2rem; } | |
| h3 { font-size: 1.15rem; color: var(--gold); margin-bottom: 0.5rem; } | |
| h4 { font-size: 0.95rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } | |
| p { margin-bottom: 1rem; color: var(--text-main); } | |
| a { color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; } | |
| a:hover { border-color: var(--gold); } | |
| code, .mono { | |
| font-family: var(--font-mono); | |
| font-size: 0.85em; | |
| background: rgba(212,175,55,0.08); | |
| padding: 0.12em 0.4em; | |
| border-radius: 4px; | |
| color: var(--gold-light); | |
| } | |
| strong { color: var(--gold-light); font-weight: 600; } | |
| /* ---- Layout -------------------------------------------- */ | |
| .container { max-width: var(--content-max); margin: 0 auto; padding: 0 2rem; } | |
| section { padding: var(--section-gap) 0; position: relative; } | |
| section + section { border-top: 1px solid var(--border); } | |
| /* ---- Skip link ----------------------------------------- */ | |
| .skip { position: absolute; left: -9999px; top: 1rem; z-index: 9999; | |
| padding: 0.5rem 1.25rem; background: var(--gold); color: var(--purple-deep); | |
| font-weight: 700; border-radius: 4px; } | |
| .skip:focus { left: 1rem; } | |
| /* ---- Nav ----------------------------------------------- */ | |
| nav { | |
| position: sticky; top: 0; z-index: 100; | |
| background: rgba(26,15,46,0.92); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-inner { | |
| max-width: var(--content-max); margin: 0 auto; | |
| padding: 0.8rem 2rem; | |
| display: flex; align-items: center; justify-content: space-between; | |
| } | |
| .nav-logo { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-head); color: var(--gold); font-size: 1rem; font-weight: 700; } | |
| .nav-links { display: flex; gap: 1.5rem; flex-wrap: wrap; } | |
| .nav-links a { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: none; transition: color 0.2s; } | |
| .nav-links a:hover { color: var(--gold); } | |
| /* ---- Hero ---------------------------------------------- */ | |
| #hero { | |
| padding: 5rem 0 4rem; | |
| border-top: none; | |
| overflow: hidden; | |
| } | |
| .hero-inner { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .hero-text { } | |
| .hero-eyebrow { | |
| font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; | |
| color: var(--gold-dim); margin-bottom: 1.2rem; | |
| display: flex; align-items: center; gap: 0.6rem; | |
| } | |
| .hero-eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--gold-dim); } | |
| .hero-tagline { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-muted); margin: 1.2rem 0 2rem; font-style: italic; } | |
| .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; } | |
| .btn-primary { | |
| background: var(--gold); color: var(--purple-deep); font-weight: 700; | |
| padding: 0.7rem 1.6rem; border-radius: 6px; font-size: 0.9rem; | |
| transition: background 0.2s, transform 0.15s; border-bottom: none; | |
| display: inline-flex; align-items: center; gap: 0.5rem; | |
| } | |
| .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); } | |
| .btn-secondary { | |
| border: 1px solid var(--border); color: var(--text-muted); | |
| padding: 0.7rem 1.6rem; border-radius: 6px; font-size: 0.9rem; | |
| transition: border-color 0.2s, color 0.2s; background: transparent; | |
| display: inline-flex; align-items: center; gap: 0.5rem; | |
| } | |
| .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } | |
| .hero-images { | |
| display: flex; flex-direction: column; align-items: center; | |
| gap: 1.5rem; position: relative; | |
| } | |
| .hero-img-wrap { | |
| position: relative; | |
| display: flex; justify-content: center; | |
| } | |
| .hero-img-wrap::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -20px; | |
| background: radial-gradient(ellipse, rgba(212,175,55,0.12) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .hero-amaru-img { | |
| width: 220px; height: 220px; object-fit: cover; | |
| border-radius: 50%; | |
| border: 2px solid rgba(212,175,55,0.35); | |
| box-shadow: 0 0 40px rgba(212,175,55,0.2); | |
| } | |
| .hero-brain-img { | |
| width: 160px; height: 160px; object-fit: cover; | |
| border-radius: 50%; | |
| border: 2px solid rgba(212,175,55,0.2); | |
| opacity: 0.9; | |
| } | |
| .hero-connector { | |
| width: 1px; height: 2rem; | |
| background: linear-gradient(to bottom, rgba(212,175,55,0.6), transparent); | |
| } | |
| /* ---- Disclaimer pill ----------------------------------- */ | |
| .disclaimer-pill { | |
| display: inline-flex; align-items: center; gap: 0.5rem; | |
| background: rgba(212,175,55,0.08); border: 1px solid var(--border); | |
| border-radius: 100px; padding: 0.35rem 1rem; font-size: 0.78rem; | |
| color: var(--text-muted); margin-bottom: 2rem; | |
| } | |
| .disclaimer-pill::before { content: '⚠'; font-size: 0.9rem; } | |
| /* ---- Section labels ------------------------------------ */ | |
| .section-label { | |
| font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; | |
| color: var(--gold-dim); margin-bottom: 0.6rem; | |
| display: flex; align-items: center; gap: 0.6rem; | |
| } | |
| .section-label::before { content: ''; display: block; width: 1.5rem; height: 1px; background: var(--gold-dim); } | |
| /* ---- Chakra grid --------------------------------------- */ | |
| .chakra-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.2rem; | |
| margin-top: 2rem; | |
| } | |
| .chakra-card { | |
| background: var(--glass); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.4rem 1.6rem; | |
| transition: border-color 0.25s, transform 0.2s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .chakra-card::before { | |
| content: ''; | |
| position: absolute; top: 0; left: 0; right: 0; height: 2px; | |
| background: linear-gradient(90deg, var(--gold), transparent); | |
| } | |
| .chakra-card:hover { border-color: rgba(212,175,55,0.45); transform: translateY(-2px); } | |
| .chakra-number { | |
| font-family: var(--font-mono); font-size: 0.7rem; color: var(--gold-dim); | |
| margin-bottom: 0.3rem; letter-spacing: 0.05em; | |
| } | |
| .chakra-name { font-family: var(--font-head); font-size: 1.15rem; color: var(--gold); margin-bottom: 0.2rem; } | |
| .chakra-fn { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.6rem; } | |
| .chakra-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin: 0; } | |
| .chakra-cite { | |
| margin-top: 0.8rem; | |
| font-family: var(--font-mono); font-size: 0.72rem; | |
| color: var(--text-dim); | |
| display: flex; align-items: center; gap: 0.4rem; | |
| } | |
| .chakra-cite a { color: var(--text-dim); border-bottom-color: transparent; } | |
| .chakra-cite a:hover { color: var(--gold); } | |
| /* ---- Flow diagram -------------------------------------- */ | |
| .flow-wrap { | |
| background: var(--glass); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 2.5rem 2rem; | |
| margin-top: 2rem; | |
| overflow-x: auto; | |
| } | |
| .flow-svg-container { min-width: 700px; } | |
| /* ---- Info cards ---------------------------------------- */ | |
| .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 2rem; } | |
| .info-card { | |
| background: rgba(45,27,94,0.4); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 1.4rem; | |
| } | |
| .info-card .icon { font-size: 1.6rem; margin-bottom: 0.8rem; } | |
| .info-card p { font-size: 0.88rem; color: var(--text-muted); margin: 0; } | |
| /* ---- Iframe embed -------------------------------------- */ | |
| .iframe-container { | |
| background: var(--glass); border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); overflow: hidden; | |
| margin-top: 2rem; | |
| } | |
| .iframe-header { | |
| padding: 0.8rem 1.2rem; | |
| background: rgba(45,27,94,0.6); | |
| border-bottom: 1px solid var(--border); | |
| display: flex; align-items: center; gap: 0.7rem; | |
| font-size: 0.8rem; color: var(--text-muted); | |
| } | |
| .live-dot { | |
| width: 8px; height: 8px; border-radius: 50%; | |
| background: #4caf50; | |
| box-shadow: 0 0 6px #4caf50; | |
| animation: pulse-dot 2s infinite; | |
| } | |
| @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } } | |
| iframe { | |
| width: 100%; height: 700px; border: none; | |
| display: block; | |
| } | |
| /* ---- Comparison table ---------------------------------- */ | |
| .table-wrap { | |
| overflow-x: auto; margin-top: 2rem; | |
| border: 1px solid var(--border); border-radius: var(--radius); | |
| } | |
| table { | |
| width: 100%; border-collapse: collapse; | |
| font-size: 0.88rem; | |
| } | |
| th { | |
| background: rgba(45,27,94,0.7); | |
| color: var(--gold); font-family: var(--font-head); | |
| padding: 1rem 1.2rem; text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| white-space: nowrap; | |
| } | |
| td { | |
| padding: 0.85rem 1.2rem; border-bottom: 1px solid rgba(212,175,55,0.07); | |
| color: var(--text-muted); vertical-align: top; | |
| } | |
| tr:last-child td { border-bottom: none; } | |
| tr:hover td { background: rgba(212,175,55,0.03); } | |
| td:first-child { color: var(--text-main); font-weight: 500; } | |
| .check-yes { color: #4caf50; font-size: 1.1rem; } | |
| .check-no { color: #e53935; font-size: 1.1rem; } | |
| .check-partial { color: #ff9800; font-size: 0.85rem; } | |
| .row-amaru td { background: rgba(212,175,55,0.05); } | |
| .row-amaru td:first-child { color: var(--gold); } | |
| /* ---- Not-this section ---------------------------------- */ | |
| .not-this-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; } | |
| .not-this-card { | |
| background: rgba(229,57,53,0.07); border: 1px solid rgba(229,57,53,0.2); | |
| border-radius: var(--radius); padding: 1.2rem; | |
| } | |
| .not-this-card h3 { color: #ef9a9a; font-size: 1rem; } | |
| .not-this-card p { font-size: 0.85rem; color: var(--text-muted); margin: 0; } | |
| /* ---- Citations ----------------------------------------- */ | |
| .citations-list { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.5rem; } | |
| .citations-list li { | |
| background: rgba(45,27,94,0.4); border: 1px solid var(--border); | |
| border-radius: 8px; padding: 0.9rem 1.2rem; | |
| font-size: 0.83rem; | |
| } | |
| .citations-list li a { color: var(--gold-light); } | |
| .cite-label { font-family: var(--font-mono); color: var(--gold-dim); margin-right: 0.6rem; } | |
| /* ---- Footer -------------------------------------------- */ | |
| footer { | |
| background: rgba(10,5,20,0.8); | |
| border-top: 1px solid var(--border); | |
| padding: 3rem 0; | |
| } | |
| .footer-inner { | |
| max-width: var(--content-max); margin: 0 auto; padding: 0 2rem; | |
| display: grid; grid-template-columns: 1fr auto; | |
| gap: 2rem; align-items: start; | |
| } | |
| .footer-brand { font-family: var(--font-head); color: var(--gold); margin-bottom: 0.4rem; } | |
| .footer-tagline { font-size: 0.82rem; color: var(--text-dim); } | |
| .footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: flex-end; } | |
| .footer-links a { font-size: 0.8rem; color: var(--text-dim); border-bottom: none; } | |
| .footer-links a:hover { color: var(--gold); } | |
| .footer-bottom { | |
| max-width: var(--content-max); margin: 2rem auto 0; padding: 1.5rem 2rem 0; | |
| border-top: 1px solid var(--border); | |
| display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; | |
| font-size: 0.75rem; color: var(--text-dim); | |
| } | |
| /* ---- Responsive ---------------------------------------- */ | |
| @media (max-width: 768px) { | |
| .hero-inner { grid-template-columns: 1fr; } | |
| .hero-images { flex-direction: row; justify-content: center; } | |
| .hero-amaru-img { width: 140px; height: 140px; } | |
| .hero-brain-img { width: 100px; height: 100px; } | |
| .footer-inner { grid-template-columns: 1fr; } | |
| .footer-links { justify-content: flex-start; } | |
| } | |
| /* ---- Anim helpers -------------------------------------- */ | |
| @media (prefers-reduced-motion: no-preference) { | |
| .chakra-card { transition: border-color 0.25s, transform 0.2s, box-shadow 0.2s; } | |
| .chakra-card:hover { box-shadow: 0 6px 24px rgba(212,175,55,0.1); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { animation-duration: 0.01ms ; transition-duration: 0.01ms ; } | |
| } | |
| /* ---- Gold accent bar ----------------------------------- */ | |
| .gold-bar { width: 3rem; height: 3px; background: var(--gold); border-radius: 2px; margin: 0.8rem 0 1.5rem; } | |
| /* ---- Screenshot img ------------------------------------ */ | |
| .screenshot-img { | |
| width: 100%; border-radius: var(--radius); border: 1px solid var(--border); | |
| margin-top: 1.5rem; opacity: 0.9; | |
| } | |