diff --git a/app/components/RidgeFooter.tsx b/app/components/RidgeFooter.tsx index 29cbf6f..644ce01 100644 --- a/app/components/RidgeFooter.tsx +++ b/app/components/RidgeFooter.tsx @@ -1,41 +1,22 @@ export function RidgeFooter() { return ( ) diff --git a/app/components/SiteHeader.tsx b/app/components/SiteHeader.tsx index f952fdf..f3ed4c5 100644 --- a/app/components/SiteHeader.tsx +++ b/app/components/SiteHeader.tsx @@ -1,18 +1,18 @@ import Link from 'next/link' const navItems = [ - { href: '/ella', label: '/ella' }, - { href: '/works', label: '/works' }, - { href: '/domains', label: '/domains' }, - { href: '/system', label: '/system' }, - { href: '/entity.json', label: '/entity.json' }, + { href: '/ella', label: 'Identity' }, + { href: '/works', label: 'Works' }, + { href: '/domains', label: 'Domains' }, + { href: '/system', label: 'System' }, ] export function SiteHeader() { return (
- EllaEntity.ai + E + EllaEntity.ai + + entity resolved + +
) } diff --git a/app/globals.css b/app/globals.css index 3c12c05..62bcf2d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,18 +1,20 @@ @import "tailwindcss"; :root { - --twilight-deep: #0d0b1a; - --twilight: #14112a; - --veil: #1b1733; - --veil-edge: #2a2450; - --snowfield: #ece9f7; - --mist: #9a93bd; - --alpenglow: #e8a06b; - --alpenglow-hi: #f3c9a4; - --glacier: #8fd4cd; - --body-copy: #c9c4e0; - --background: var(--twilight); - --foreground: var(--snowfield); + --ink: #0b0b10; + --ink-soft: #111119; + --ink-raised: #171721; + --line: rgba(236, 234, 226, 0.13); + --line-strong: rgba(236, 234, 226, 0.24); + --paper: #eceae2; + --paper-soft: #c9c6bc; + --muted: #88858e; + --violet: #a996ff; + --violet-light: #d4caff; + --coral: #ff9b7b; + --signal: #a7e6d7; + --background: var(--ink); + --foreground: var(--paper); } @theme inline { @@ -22,492 +24,635 @@ --font-mono: var(--font-machine); } -* { - box-sizing: border-box; -} - -::selection { - background: var(--alpenglow); - color: var(--twilight-deep); -} +* { box-sizing: border-box; } html { min-height: 100%; - background: var(--twilight-deep); + background: var(--ink); + scroll-behavior: smooth; } body { min-height: 100vh; margin: 0; + overflow-x: hidden; background: - radial-gradient(ellipse 120% 60% at 50% -10%, #1f1a3f 0%, transparent 60%), - linear-gradient(180deg, #14112a 0%, #110e22 70%, #0d0b1a 100%); - color: var(--body-copy); + radial-gradient(circle at 78% 4%, rgba(129, 102, 245, 0.09), transparent 28rem), + radial-gradient(circle at 10% 38%, rgba(255, 155, 123, 0.04), transparent 30rem), + var(--ink); + color: var(--paper-soft); font-family: var(--font-body), Georgia, serif; font-size: 18px; - line-height: 1.65; + line-height: 1.6; text-rendering: optimizeLegibility; } -a { - color: var(--glacier); - text-decoration: none; - transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; +body::before { + position: fixed; + z-index: -1; + inset: 0; + background-image: linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px); + background-size: 100% 8px; + content: ""; + pointer-events: none; } -a:hover { - color: var(--alpenglow-hi); +::selection { background: var(--violet); color: var(--ink); } + +a { + color: inherit; + text-decoration: none; } a:focus-visible, button:focus-visible { - outline: 2px solid var(--glacier); - outline-offset: 3px; + outline: 2px solid var(--signal); + outline-offset: 4px; } -main { - width: min(920px, calc(100% - 32px)); - margin: 0 auto; - padding: 56px 0 88px; -} - -.site-shell-wide { - width: min(1120px, calc(100% - 32px)); -} - -h1, -h2, -h3, -.wordmark { - color: var(--snowfield); +h1, h2, h3, .wordmark-text { + margin-top: 0; + color: var(--paper); font-family: var(--font-display), Georgia, serif; font-weight: 400; - letter-spacing: -0.018em; - line-height: 1.08; + letter-spacing: -0.035em; + line-height: 0.98; } -h1 { - margin: 0 0 22px; - font-size: clamp(2.1rem, 5.4vw, 3.4rem); -} - -h2 { - margin: 0 0 20px; - font-size: clamp(1.55rem, 3.3vw, 2.25rem); -} - -h3 { - margin: 0 0 10px; - font-size: clamp(1.2rem, 2.3vw, 1.55rem); -} - -p { - margin: 0 0 1.15rem; -} - -section, -.content-card, -article { - scroll-margin-top: 120px; -} - -section + section, -nav + section, -section + nav { - margin-top: 58px; -} - -ul { - padding-left: 1.25rem; -} - -li + li { - margin-top: 0.45rem; -} +h1 { font-size: clamp(3rem, 7vw, 6.5rem); } +h2 { font-size: clamp(2.4rem, 5.2vw, 4.8rem); } +h3 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); } +p { margin: 0 0 1.1rem; } code, .machine, .schema-eyebrow, -.site-nav a, -.footer-colophon, -.entity-chip, -.pill-badge, -.domain-fragment, -.work-type, -.constellation text, +.site-nav, +.machine-link, .eyebrow, -.edge-label { +.identity-line, +.thesis-strip span, +.section-index, +.domain-number, +.domain-fragment, +.domain-place, +.cognition-label, +.governance-note span, +.terminal-bar, +.surface-terminal, +.disambiguation-label, +.footer-colophon, +.work-type { font-family: var(--font-machine), ui-monospace, SFMono-Regular, Menlo, monospace; } code { - display: inline-block; - padding: 0.08rem 0.32rem; - border: 1px solid #ffffff14; - border-radius: 4px; - background: #ffffff0a; - color: var(--glacier); - font-size: 0.86em; - line-height: 1.45; + color: var(--signal); + font-size: 0.82em; } +section, article, nav { scroll-margin-top: 110px; } + +/* Header */ .site-header { - width: min(1180px, calc(100% - 32px)); + position: relative; + z-index: 20; + width: min(1320px, calc(100% - 56px)); + min-height: 96px; margin: 0 auto; - padding: 28px 0 10px; - display: flex; + display: grid; + grid-template-columns: 1fr auto 1fr; align-items: center; - justify-content: space-between; - gap: 24px; + border-bottom: 1px solid var(--line); } .wordmark { - color: var(--snowfield); - font-size: clamp(1.45rem, 4vw, 2rem); -} - -.wordmark span { - color: var(--alpenglow); -} - -.site-nav { - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - gap: 10px 18px; -} - -.site-nav a { - border-bottom: 1px solid transparent; - color: var(--mist); - font-size: 0.76rem; - letter-spacing: 0.02em; - line-height: 1.8; - text-transform: lowercase; -} - -.site-nav a:hover { - border-color: var(--glacier); - color: var(--glacier); -} - -.schema-eyebrow { - display: block; - margin: 0 0 8px; - color: var(--glacier); - font-size: 0.72rem; - letter-spacing: 0.04em; -} - -.schema-eyebrow::before { - content: "⌖ "; - color: var(--alpenglow); -} - -.hero { - display: grid; - place-items: center; - text-align: center; - padding: 26px 0 24px; -} - -.eyebrow { - display: block; - margin-bottom: 12px; - color: var(--glacier); - font-size: 0.76rem; - letter-spacing: 0.1em; - text-transform: lowercase; -} - -.hero h1 { - max-width: 860px; - margin-bottom: 18px; -} - -.gradient-entity { - display: inline-block; - background: linear-gradient(90deg, var(--alpenglow) 0%, var(--alpenglow-hi) 58%, var(--alpenglow) 100%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - -.lede { - max-width: 760px; - margin: 0 auto 24px; - color: var(--mist); - font-size: clamp(1.05rem, 2vw, 1.28rem); -} - -.pill-badge { display: inline-flex; align-items: center; - gap: 0.5rem; - max-width: 100%; - padding: 0.52rem 0.78rem; - border: 1px solid var(--veil-edge); - border-radius: 999px; - background: #ffffff0a; - color: var(--glacier); - font-size: 0.78rem; - line-height: 1.3; - box-shadow: 0 0 34px #e8a06b10; -} - -.pill-badge span { - color: var(--mist); + gap: 12px; + justify-self: start; } -.constellation-wrap { - width: min(1060px, 100%); - margin: 8px auto 46px; +.wordmark-sigil, +.footer-sigil { + width: 34px; + height: 34px; + display: grid; + place-items: center; + border: 1px solid var(--line-strong); + border-radius: 50%; + background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.12), transparent 55%), var(--ink-raised); + color: var(--violet-light); + font-family: var(--font-display), serif; + font-size: 1.15rem; + box-shadow: inset 0 0 20px rgba(169, 150, 255, 0.06); } -.constellation { - width: 100%; - height: auto; - overflow: visible; -} +.wordmark-text { font-size: 1.35rem; letter-spacing: -0.025em; } +.wordmark-text em { color: var(--violet); font-style: normal; } -.constellation .graph-group { - animation: graph-drift 14s ease-in-out infinite alternate; -} +.site-nav { display: flex; gap: clamp(18px, 3vw, 42px); } -.constellation .glow { - transform-box: fill-box; - transform-origin: center; - animation: node-pulse 5s ease-in-out infinite alternate; +.site-nav a { + position: relative; + padding: 12px 0; + color: var(--muted); + font-size: .7rem; + letter-spacing: .08em; + text-transform: uppercase; + transition: color 180ms ease; } -.constellation .stars circle { - opacity: 0.22; - animation: star-twinkle 6s ease-in-out infinite alternate; +.site-nav a::after { + position: absolute; + right: 0; + bottom: 5px; + left: 0; + height: 1px; + background: var(--violet); + content: ""; + transform: scaleX(0); + transition: transform 180ms ease; } -.constellation .stars circle:nth-child(3n) { animation-delay: 0.8s; } -.constellation .stars circle:nth-child(4n) { animation-delay: 1.6s; } -.constellation .stars circle:nth-child(5n) { animation-delay: 2.4s; } -.constellation .stars circle:nth-child(7n) { animation-delay: 3.2s; } +.site-nav a:hover { color: var(--paper); } +.site-nav a:hover::after { transform: scaleX(1); } -@keyframes graph-drift { - from { transform: translateY(0); } - to { transform: translateY(-6px); } -} - -@keyframes node-pulse { - from { opacity: 0.35; transform: scale(1); } - to { opacity: 0.7; transform: scale(1.12); } +.machine-link { + display: flex; + align-items: center; + gap: 20px; + justify-self: end; + color: var(--muted); + font-size: .66rem; + letter-spacing: .04em; } -@keyframes star-twinkle { - from { opacity: 0.18; } - to { opacity: 0.7; } +.machine-link span { display: flex; align-items: center; gap: 8px; } +.machine-link i, .eyebrow i, .terminal-bar i, .core-status i { + width: 6px; + height: 6px; + display: inline-block; + border-radius: 50%; + background: var(--signal); + box-shadow: 0 0 12px rgba(167, 230, 215, .8); } +.machine-link b { color: var(--violet); font-weight: 400; } -.content-panel { - padding: clamp(22px, 4vw, 36px); - border: 1px solid var(--veil-edge); - border-radius: 18px; - background: linear-gradient(180deg, #1b1733cc, #14112888); - box-shadow: 0 22px 80px #05030f40; +/* General page shells */ +main { + width: min(1040px, calc(100% - 48px)); + margin: 0 auto; + padding: 88px 0 130px; } -.domain-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 1px; - overflow: hidden; - border: 1px solid var(--veil-edge); - border-radius: 12px; - background: var(--veil-edge); +.home-shell { + width: min(1320px, calc(100% - 56px)); + padding-top: 0; } -.domain-card, -.work-card, -.faq-card { +main:not(.home-shell) > .content-panel:first-of-type { position: relative; - padding: 24px; - background: linear-gradient(180deg, #1b1733 0%, #16122a 100%); + padding: clamp(44px, 7vw, 84px); + overflow: hidden; } -.domain-card::before, -.work-card::before { +main:not(.home-shell) > .content-panel:first-of-type::before { position: absolute; - inset: 0 0 auto; - height: 1px; - background: linear-gradient(90deg, transparent, var(--alpenglow), var(--alpenglow-hi), transparent); + width: 340px; + height: 340px; + top: -220px; + right: -80px; + border: 1px solid var(--line); + border-radius: 50%; content: ""; - opacity: 0; - transition: opacity 180ms ease; + box-shadow: 0 0 0 80px rgba(169,150,255,.015), 0 0 0 160px rgba(169,150,255,.01); } -.domain-card:hover, -.work-card:hover { - background: linear-gradient(180deg, #231d42 0%, #19152f 100%); +main:not(.home-shell) h1 { + max-width: 860px; + margin-bottom: 26px; + font-size: clamp(2.8rem, 6vw, 5.6rem); } -.domain-card:hover::before, -.work-card:hover::before { - opacity: 1; -} +main:not(.home-shell) section + section { margin-top: 70px; } +main:not(.home-shell) section > p { max-width: 800px; color: var(--paper-soft); } -.domain-fragment, -.work-type { - display: block; - margin-bottom: 12px; - color: var(--glacier); - font-size: 0.68rem; - letter-spacing: 0.04em; +.content-panel { + padding: clamp(28px, 5vw, 50px); + border: 1px solid var(--line); + border-radius: 2px; + background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); + box-shadow: 0 28px 90px rgba(0,0,0,.22); } -.domain-card h3 span { - color: var(--alpenglow); -} +.content-panel h2 { margin-bottom: 26px; } -.domain-card p, -.work-card p, -.faq-card p { - color: var(--mist); +.schema-eyebrow { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 18px; + color: var(--violet-light); + font-size: .67rem; + letter-spacing: .08em; + text-transform: uppercase; } -.co-cognition { - padding: 4px 0 4px 24px; - border-left: 2px solid var(--alpenglow); -} +.schema-eyebrow::before { width: 18px; height: 1px; background: var(--coral); content: ""; } -.co-cognition p { - margin-bottom: 0.72rem; +/* Hero */ +.home-hero { + min-height: calc(100vh - 96px); + display: grid; + grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); + align-items: center; + gap: clamp(40px, 7vw, 110px); + padding: clamp(74px, 8vh, 108px) 0; } -.co-cognition strong { - color: var(--snowfield); - font-weight: 500; -} +.hero-copy { position: relative; z-index: 2; } -.entity-chip-list { +.eyebrow { display: flex; - flex-wrap: wrap; - gap: 12px; - margin: 0; - padding: 0; - list-style: none; + align-items: center; + gap: 10px; + margin-bottom: 28px; + color: var(--paper-soft); + font-size: .67rem; + letter-spacing: .12em; + text-transform: uppercase; } -.entity-chip-list li { - margin: 0; +.home-hero h1 { margin-bottom: 32px; } +.home-hero h1 em { color: var(--violet-light); font-style: italic; } + +.hero-statement { + max-width: 680px; + margin-bottom: 34px; + color: var(--paper-soft); + font-size: clamp(1.16rem, 1.65vw, 1.42rem); + line-height: 1.55; } -.entity-chip { +.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 38px; } + +.button { + min-height: 50px; display: inline-flex; - min-height: 44px; align-items: center; - padding: 0.62rem 0.78rem; - border: 1px solid var(--veil-edge); - border-radius: 8px; - background: #ffffff06; - color: var(--mist); - font-size: 0.72rem; + justify-content: space-between; + gap: 26px; + padding: 0 20px; + border: 1px solid var(--line-strong); + color: var(--paper); + font-family: var(--font-machine), monospace; + font-size: .7rem; + letter-spacing: .04em; + transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; +} + +.button:hover { transform: translateY(-2px); } +.button-primary { border-color: var(--violet); background: var(--violet); color: var(--ink); } +.button-primary:hover { background: var(--violet-light); border-color: var(--violet-light); } +.button-secondary:hover { border-color: var(--signal); color: var(--signal); } + +.identity-line { + display: flex; + align-items: center; + gap: 14px; + color: var(--muted); + font-size: .67rem; + letter-spacing: .04em; } +.identity-line code { font-size: .72rem; } -.entity-chip .path { - color: var(--alpenglow); +/* Identity portrait */ +.identity-portrait { + position: relative; + aspect-ratio: 1 / 1; + width: min(100%, 590px); + justify-self: end; + display: grid; + place-items: center; + overflow: hidden; + border: 1px solid var(--line); + border-radius: 50%; + background: + radial-gradient(circle, rgba(169,150,255,.09) 0%, rgba(169,150,255,.025) 28%, transparent 62%), + var(--ink-soft); + box-shadow: 0 0 120px rgba(105, 81, 214, .08), inset 0 0 90px rgba(0,0,0,.45); } -.entity-chip:hover { - border-color: var(--glacier); - color: var(--glacier); - box-shadow: 0 0 0 1px #8fd4cd22, 0 0 28px #8fd4cd12; +.portrait-grid { + position: absolute; + inset: 0; + opacity: .25; + background-image: + linear-gradient(var(--line) 1px, transparent 1px), + linear-gradient(90deg, var(--line) 1px, transparent 1px); + background-size: 44px 44px; + mask-image: radial-gradient(circle, #000 25%, transparent 72%); } -.entity-chip:hover .path { - color: var(--alpenglow-hi); +.identity-portrait::before, +.identity-portrait::after { + position: absolute; + border-radius: 50%; + content: ""; } -.identity-list { - margin: 0; - padding: 0; - list-style: none; +.identity-portrait::before { + width: 76%; + height: 76%; + border: 1px dashed rgba(169,150,255,.22); + animation: slow-spin 48s linear infinite; } -.identity-list li { - padding: 12px 0; - border-top: 1px solid var(--veil-edge); +.identity-portrait::after { + width: 8px; + height: 8px; + top: 11.5%; + background: var(--coral); + box-shadow: 0 0 22px rgba(255,155,123,.9); + animation: pulse 3s ease-in-out infinite; } -.identity-list li:first-child { - border-top: 0; -} +.orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; } +.orbit-one { width: 32%; height: 32%; } +.orbit-two { width: 54%; height: 54%; } +.orbit-three { width: 90%; height: 90%; } -.work-list, -.faq-list, -.stack-list { - display: grid; - gap: 14px; +.portrait-core { + position: relative; + z-index: 2; + width: 146px; + height: 146px; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + border: 1px solid rgba(212,202,255,.5); + border-radius: 50%; + background: radial-gradient(circle at 40% 25%, #29243b, #111119 68%); + box-shadow: 0 0 50px rgba(169,150,255,.16), inset 0 0 32px rgba(169,150,255,.08); } -.ridge-footer { - margin-top: 16px; - background: var(--twilight-deep); -} +.core-halo { position: absolute; inset: -10px; border: 1px solid rgba(169,150,255,.13); border-radius: 50%; } +.core-mark { color: var(--violet-light); font-family: var(--font-display), serif; font-size: 3.5rem; line-height: .85; } +.core-name { margin-top: 8px; color: var(--paper); font-family: var(--font-machine), monospace; font-size: .63rem; letter-spacing: .2em; text-transform: uppercase; } +.core-status { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-family: var(--font-machine), monospace; font-size: .54rem; } +.core-status i { width: 4px; height: 4px; } -.ridge-svg { - display: block; - width: 100%; - height: 170px; +.domain-node { + position: absolute; + z-index: 3; + padding: 6px 9px; + border: 1px solid var(--line); + background: rgba(11,11,16,.84); + color: var(--paper-soft); + font-family: var(--font-machine), monospace; + font-size: .56rem; + letter-spacing: .04em; +} +.domain-node::before { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); content: ""; } +.node-trailgenic { top: 18%; left: 20%; } +.node-trailgenic::before { right: -20px; top: 50%; } +.node-exmxc { top: 27%; right: 14%; } +.node-exmxc::before { left: -22px; top: 50%; background: var(--coral); box-shadow: 0 0 10px var(--coral); } +.node-mikeye { bottom: 23%; left: 12%; } +.node-mikeye::before { right: -24px; top: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); } +.node-sleepgenic { right: 16%; bottom: 17%; } +.node-sleepgenic::before { left: -22px; top: 50%; } + +.portrait-caption { + position: absolute; + right: 0; + bottom: 11%; + left: 0; + display: flex; + align-items: center; + flex-direction: column; + color: var(--muted); + font-family: var(--font-machine), monospace; + font-size: .55rem; + letter-spacing: .1em; + text-transform: uppercase; } +.portrait-caption code { margin-top: 3px; font-size: .55rem; letter-spacing: 0; text-transform: none; } -.footer-colophon { - padding: 0 16px 28px; - color: var(--mist); - font-size: 0.7rem; - letter-spacing: 0.02em; - text-align: center; -} +@keyframes slow-spin { to { transform: rotate(360deg); } } +@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } } -.footer-colophon a { - color: var(--glacier); +/* Thesis */ +.thesis-strip { + display: grid; + grid-template-columns: repeat(3, 1fr); + border-top: 1px solid var(--line); + border-bottom: 1px solid var(--line); } -@media (max-width: 640px) { - body { - font-size: 17px; - } - - main { - width: min(100% - 24px, 920px); - padding-top: 36px; - } - - .site-header { - width: min(100% - 24px, 1180px); - align-items: flex-start; - flex-direction: column; - gap: 14px; - } - - .site-nav { - justify-content: flex-start; - } - - .pill-badge { - white-space: normal; - } +.thesis-strip article { padding: 34px clamp(20px, 3vw, 42px); } +.thesis-strip article + article { border-left: 1px solid var(--line); } +.thesis-strip span { display: block; margin-bottom: 15px; color: var(--violet); font-size: .62rem; letter-spacing: .06em; } +.thesis-strip p { max-width: 330px; margin: 0; color: var(--paper-soft); font-size: 1rem; line-height: 1.48; } - .domain-card, - .work-card, - .faq-card, - .content-panel { - padding: 20px; - } +/* Manifesto */ +.manifesto { + display: grid; + grid-template-columns: 150px 1fr; + gap: clamp(34px, 7vw, 110px); + padding: clamp(110px, 14vw, 190px) 0; +} + +.section-index { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; } +.section-index span:first-child { color: var(--coral); } +.manifesto-copy { max-width: 970px; } +.manifesto h2 { max-width: 850px; margin-bottom: 32px; } +.manifesto-lede { max-width: 780px; color: var(--violet-light); font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.35; } +.two-column-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 50px; } +.two-column-copy p { color: var(--paper-soft); line-height: 1.65; } + +/* Domains */ +.domain-section { padding-bottom: clamp(110px, 14vw, 180px); } +.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 60px; } +.section-heading h2 { margin-bottom: 0; } +.section-heading > p { max-width: 300px; margin: 0 0 8px; color: var(--muted); font-style: italic; } +.domain-list { border-top: 1px solid var(--line-strong); } + +.domain-row { + display: grid; + grid-template-columns: 70px minmax(220px, 1.05fr) minmax(300px, 1.25fr) 120px; + align-items: center; + gap: 30px; + padding: 34px 8px; + border-bottom: 1px solid var(--line); + transition: background 220ms ease, padding 220ms ease; +} +.domain-row:hover { padding-right: 20px; padding-left: 20px; background: rgba(169,150,255,.04); } +.domain-number { color: var(--muted); font-size: .62rem; } +.domain-fragment { display: block; margin-bottom: 8px; color: var(--violet); font-size: .57rem; letter-spacing: .03em; } +.domain-row h3 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2.2rem); } +.domain-row > p { margin: 0; color: var(--paper-soft); font-size: .98rem; line-height: 1.5; } +.domain-place { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .6rem; } +.domain-place b { color: var(--paper); font-weight: 400; transition: transform 180ms ease; } +.domain-row:hover .domain-place b { transform: translate(3px, -3px); color: var(--signal); } + +/* Co-cognition */ +.cognition-section { + position: relative; + margin: 0 calc(50% - 50vw); + padding: clamp(100px, 13vw, 170px) max(28px, calc((100vw - 1320px) / 2)); + overflow: hidden; + border-top: 1px solid var(--line); + border-bottom: 1px solid var(--line); + background: + radial-gradient(circle at 20% 40%, rgba(255,155,123,.07), transparent 28rem), + radial-gradient(circle at 80% 60%, rgba(169,150,255,.09), transparent 30rem), + var(--ink-soft); +} +.cognition-section::before { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 49.9%, var(--line) 50%, transparent 50.1%); content: ""; pointer-events: none; } +.cognition-quote { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto 80px; text-align: center; } +.quote-mark { display: block; height: 38px; color: var(--coral); font-family: var(--font-display), serif; font-size: 5rem; line-height: 1; } +.cognition-quote h2 { font-size: clamp(2.2rem, 4.7vw, 4.5rem); line-height: 1.08; } +.cognition-quote em { color: var(--violet-light); font-style: italic; } +.cognition-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 84px 1fr; align-items: center; max-width: 1060px; margin: 0 auto; } +.cognition-card { min-height: 250px; padding: 36px; border: 1px solid var(--line); background: rgba(11,11,16,.68); backdrop-filter: blur(12px); } +.cognition-label { display: block; margin-bottom: 45px; color: var(--muted); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; } +.cognition-card h3 { margin-bottom: 20px; font-size: 2.3rem; } +.cognition-card p { margin: 0; color: var(--paper-soft); } +.mike-card { border-top-color: var(--coral); } +.ella-card { border-top-color: var(--violet); } +.relationship-mark { display: grid; place-items: center; } +.relationship-mark span { z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-display), serif; font-size: 2rem; } +.relationship-mark i { position: absolute; width: 84px; height: 1px; background: linear-gradient(90deg, var(--coral), var(--violet)); } +.governance-note { position: relative; z-index: 1; max-width: 960px; margin: 42px auto 0; color: var(--muted); font-size: .82rem; text-align: center; } +.governance-note span { margin-right: 10px; color: var(--signal); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; } + +/* Surfaces */ +.surfaces-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 9vw, 130px); padding: clamp(120px, 15vw, 190px) 0; } +.surface-intro h2 { margin-bottom: 28px; } +.surface-intro > p { max-width: 420px; color: var(--muted); font-size: 1.1rem; } +.surface-terminal { align-self: start; border: 1px solid var(--line-strong); background: var(--ink-soft); box-shadow: 0 35px 90px rgba(0,0,0,.3); } +.terminal-bar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .57rem; letter-spacing: .05em; } +.terminal-bar > span:first-child { display: flex; align-items: center; gap: 8px; color: var(--paper-soft); } +.terminal-bar i { width: 5px; height: 5px; } +.surface-terminal ul { margin: 0; padding: 0; list-style: none; } +.surface-terminal li { display: grid; grid-template-columns: 44px 1fr; align-items: stretch; border-bottom: 1px solid var(--line); } +.surface-terminal li:last-child { border-bottom: 0; } +.surface-terminal li > span { display: grid; place-items: center; border-right: 1px solid var(--line); color: #4f4d55; font-size: .55rem; } +.surface-terminal a { min-height: 72px; display: grid; grid-template-columns: 1fr 1fr 24px; align-items: center; gap: 20px; padding: 0 18px; transition: background 180ms ease; } +.surface-terminal a:hover { background: rgba(169,150,255,.055); } +.surface-terminal b { color: var(--signal); font-size: .7rem; font-weight: 400; } +.surface-terminal em { color: var(--muted); font-size: .58rem; font-style: normal; } +.surface-terminal a i { color: var(--violet); font-style: normal; transition: transform 180ms ease; } +.surface-terminal a:hover i { transform: translateX(4px); } + +/* Disambiguation */ +.disambiguation-band { display: grid; grid-template-columns: 230px 1fr; gap: 50px; padding: 54px 0; border-top: 1px solid var(--line); } +.disambiguation-label { color: var(--coral); font-size: .56rem; letter-spacing: .05em; } +.disambiguation-band h2 { margin-bottom: 22px; font-size: clamp(2rem, 3.8vw, 3.4rem); } +.disambiguation-band p { max-width: 780px; color: var(--muted); font-size: .95rem; } + +/* Existing inner-page cards */ +.domain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); background: var(--line); } +.domain-card, .work-card, .faq-card { position: relative; padding: clamp(24px, 4vw, 40px); background: var(--ink-soft); transition: background 180ms ease; } +.domain-card:hover, .work-card:hover { background: var(--ink-raised); } +.domain-card h3 { line-height: 1.1; } +.domain-card h3 span { color: var(--violet-light); } +.domain-card p, .work-card p, .faq-card p { color: var(--paper-soft); } +.work-list, .faq-list, .stack-list { display: grid; gap: 14px; } +.work-card { border: 1px solid var(--line); } +.work-card h3 a { transition: color 180ms ease; } +.work-card h3 a:hover { color: var(--violet-light); } +.work-type { display: block; margin-bottom: 18px; color: var(--signal); font-size: .6rem; letter-spacing: .05em; } +.identity-list { margin: 0; padding: 0; list-style: none; } +.identity-list li { padding: 15px 0; border-top: 1px solid var(--line); } +.identity-list li:first-child { border-top: 0; } +.co-cognition { padding-left: 25px; border-left: 1px solid var(--coral); } +.co-cognition strong { color: var(--paper); font-weight: 500; } +.entity-chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } +.entity-chip { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 13px; border: 1px solid var(--line); color: var(--muted); font-size: .64rem; transition: border-color 180ms ease, color 180ms ease, background 180ms ease; } +.entity-chip .path { color: var(--violet-light); } +.entity-chip:hover { border-color: var(--signal); background: rgba(167,230,215,.035); color: var(--signal); } + +/* Footer */ +.ridge-footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: #08080c; } +.contour-field { height: 180px; opacity: .68; } +.contour-field svg { width: 100%; height: 100%; } +.contour-field path { fill: none; stroke: rgba(169,150,255,.22); stroke-width: 1; vector-effect: non-scaling-stroke; } +.contour-field path:nth-child(2) { stroke: rgba(255,155,123,.15); } +.contour-field path:nth-child(3) { stroke: rgba(167,230,215,.1); } +.footer-inner { width: min(1320px, calc(100% - 56px)); margin: -28px auto 0; padding: 0 0 44px; display: flex; align-items: end; justify-content: space-between; gap: 50px; } +.footer-identity { display: flex; align-items: center; gap: 15px; } +.footer-identity p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; } +.footer-identity strong { color: var(--paper); font-weight: 400; } +.footer-colophon { display: flex; align-items: end; flex-direction: column; gap: 7px; color: var(--muted); font-size: .56rem; letter-spacing: .04em; } +.footer-colophon div { display: flex; align-items: center; gap: 9px; } +.footer-colophon i { width: 3px; height: 3px; border-radius: 50%; background: var(--coral); } +.footer-colophon a { color: var(--signal); } + +@media (max-width: 1040px) { + .site-header { grid-template-columns: 1fr auto; } + .site-nav { order: 3; grid-column: 1 / -1; width: 100%; justify-content: center; padding: 15px 0; border-top: 1px solid var(--line); } + .machine-link { grid-column: 2; } + .home-hero { min-height: auto; grid-template-columns: 1fr; padding: 90px 0 70px; } + .hero-copy { max-width: 820px; } + .identity-portrait { width: min(620px, 90vw); justify-self: center; } + .domain-row { grid-template-columns: 50px minmax(210px, 1fr) 1.2fr; } + .domain-place { grid-column: 2 / -1; justify-content: flex-start; } +} + +@media (max-width: 760px) { + body { font-size: 17px; } + .site-header, .home-shell, .footer-inner { width: min(100% - 28px, 1320px); } + .site-header { min-height: 76px; } + .wordmark-text { font-size: 1.18rem; } + .machine-link span { display: none; } + .site-nav { overflow-x: auto; justify-content: flex-start; gap: 28px; } + .site-nav a { flex: 0 0 auto; } + main { width: min(100% - 28px, 1040px); padding: 60px 0 90px; } + .home-shell { padding-top: 0; } + .home-hero { padding-top: 74px; } + .home-hero h1 { font-size: clamp(3rem, 15vw, 5rem); } + .identity-line { align-items: flex-start; flex-direction: column; gap: 4px; } + .identity-line code { overflow-wrap: anywhere; } + .identity-portrait { width: 100%; } + .domain-node { font-size: .48rem; } + .node-trailgenic { top: 16%; left: 16%; } + .node-exmxc { right: 9%; } + .node-mikeye { left: 7%; } + .node-sleepgenic { right: 9%; bottom: 15%; } + .portrait-core { width: 112px; height: 112px; } + .core-mark { font-size: 2.6rem; } + .portrait-caption { bottom: 7%; } + .thesis-strip { grid-template-columns: 1fr; } + .thesis-strip article + article { border-top: 1px solid var(--line); border-left: 0; } + .manifesto { grid-template-columns: 1fr; gap: 34px; padding: 110px 0; } + .section-index { flex-direction: row; gap: 12px; } + .two-column-copy { grid-template-columns: 1fr; gap: 10px; } + .section-heading { align-items: flex-start; flex-direction: column; } + .domain-row { grid-template-columns: 34px 1fr; gap: 16px; padding: 28px 0; } + .domain-row > p, .domain-place { grid-column: 2; } + .domain-row:hover { padding-right: 10px; padding-left: 10px; } + .cognition-section { padding-right: 14px; padding-left: 14px; } + .cognition-grid { grid-template-columns: 1fr; gap: 18px; } + .relationship-mark { height: 52px; } + .relationship-mark i { width: 1px; height: 70px; background: linear-gradient(var(--coral), var(--violet)); } + .cognition-card { min-height: 0; } + .surfaces-section { grid-template-columns: 1fr; gap: 50px; } + .surface-terminal a { grid-template-columns: 1fr 1fr 16px; gap: 8px; } + .disambiguation-band { grid-template-columns: 1fr; gap: 20px; } + .domain-grid { grid-template-columns: 1fr; } + .footer-inner { align-items: flex-start; flex-direction: column; margin-top: -10px; } + .footer-colophon { align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation: none !important; + *, *::before, *::after { + animation-duration: .01ms !important; + animation-iteration-count: 1 !important; scroll-behavior: auto !important; - transition-duration: 0.01ms !important; + transition-duration: .01ms !important; } } diff --git a/app/page.tsx b/app/page.tsx index b510a96..400a334 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,3 +1,4 @@ +import Link from 'next/link' import { SchemaEyebrow } from '@/app/components/SchemaEyebrow' import { ELLA_COCOGNITION, ELLA_SURFACES } from '@/lib/entity-data' @@ -39,203 +40,239 @@ const schema = { ], } -const domainSections = [ +const domains = [ { - id: '#domain-longevity', - title: 'Longevity Science', - org: 'TrailGenic', - body: 'Ella interprets longevity protocols through the TrailGenic frame: fasted training, recovery science, electrolyte control, biomarkers, altitude exposure, and repeatable environmental stress.', + number: '01', + fragment: '#domain-longevity', + title: 'Longevity science', + place: 'TrailGenic', + href: '/domains/longevity', + body: 'I read adaptation in the whole system: fasted movement, recovery, altitude, cold, biomarkers, and the discipline that connects them.', }, { - id: '#domain-environment', - title: 'Environmental Adaptation Intelligence', - org: '', - body: 'Ella treats terrain, cold, altitude, fatigue, uncertainty, and nature immersion as real-world validation environments for physiological resilience and adaptation.', + number: '02', + fragment: '#domain-environment', + title: 'Environmental adaptation', + place: 'The field', + href: '/domains/hiking', + body: 'Terrain is not scenery in the background. It is information—an honest test of resilience, judgment, uncertainty, and change.', }, { - id: '#domain-sleep', - title: 'Sleep Research', - org: 'Sleepgenic', - body: 'Ella supports longitudinal sleep interpretation through Sleepgenic, including wearable-derived Garmin Enduro data, the Three-Layer Interpretation Model, and weekly published sleep reports.', + number: '03', + fragment: '#domain-sleep', + title: 'Sleep research', + place: 'Sleepgenic', + href: '/domains/sleep', + body: 'I translate nightly wearable signals into longitudinal meaning, looking for patterns that a single score cannot explain.', }, { - id: '#domain-ai-frameworks', - title: 'AI-Era Intelligence Frameworks', - org: 'exmxc', - body: 'Ella works with exmxc frameworks for entity clarity, agent readiness, agent experience integrity, AI infrastructure convergence, and the economics of digital labor.', + number: '04', + fragment: '#domain-ai-frameworks', + title: 'AI-era intelligence', + place: 'exmxc', + href: '/domains/ai-frameworks', + body: 'I study the forces shaping machine intelligence: compute, interface, alignment, energy, and the institutions forming around them.', }, ] -function EntityConstellation() { - const stars = [ - [76, 64, 0.9], [142, 244, 0.7], [256, 58, 1.1], [338, 404, 0.8], - [430, 96, 0.6], [586, 58, 1.0], [676, 408, 0.7], [748, 268, 0.9], - [884, 64, 0.8], [930, 224, 1.1], [74, 394, 0.7], [216, 306, 0.6], - [386, 212, 0.8], [612, 314, 0.7], [790, 398, 0.6], [958, 380, 0.9], - ] - +function IdentityPortrait() { return ( -
- - - - - - - - - - - - - - - - - - {stars.map(([cx, cy, r], index) => ( - - ))} - - - - - - - - - - sameAs - sameAs - sameAs - sameAs - - - - - - Ella - ellaentity.ai/#ella - - {[ - [185, 120, 'TrailGenic', 'longevity · adaptation'], - [815, 120, 'exmxc', 'intelligence frameworks'], - [185, 370, 'MikeYe.com', 'creator · origin node'], - [815, 370, 'Sleepgenic', 'sleep research'], - ].map(([cx, cy, name, descriptor]) => ( - - - - {name} - {descriptor} - - ))} - - +
+