diff --git a/.gitignore b/.gitignore index 74a0078..61fda60 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,12 @@ /dist /public +/public_test /resources/_gen /static/install /static/center /static/installer -.DS_Store \ No newline at end of file +.DS_Store + +# Local Hugo dev output (not source) +hugo-server.log +hugo-server.err.log \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index ef3c515..d339f0a 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -5,15 +5,20 @@ :root { /* Color palette */ - --color-beam: #00FFE0; /* Teal accent */ - --color-beam-dim: #00CCB3; /* Teal for hover states */ - --color-beam-subtle: rgba(0, 255, 224, 0.1); /* Teal tint for backgrounds */ + --color-beam: #fff; /* Primary accent */ + --color-beam-dim: #d8d8d8; /* Accent hover states */ + --color-beam-subtle: rgba(255, 255, 255, 0.08); /* Subtle accent tint */ - --color-eclipse: #0F0F0F; /* Deepest background */ - --color-penumbra: #161616; /* Primary background */ - --color-umbra: #1E1E1E; /* Elevated surface */ - --color-surface: #262626; /* Cards, inputs */ - --color-surface-hover: #2E2E2E; /* Hover states */ + /* Cool mint — CTAs, active nav, small highlights */ + --color-laser: #00ffe0; + --color-laser-hover: #31ffe8; + --color-laser-subtle: rgba(0, 255, 224, 0.12); + + --color-eclipse: #080808; /* Deepest background */ + --color-penumbra: #090909; /* Primary background */ + --color-umbra: #151515; /* Elevated surface */ + --color-surface: #1b1b1b; /* Cards, inputs */ + --color-surface-hover: #222; /* Hover states */ --color-border: #2A2A2A; /* Subtle border */ --color-border-light: #333; /* Visible border */ @@ -42,6 +47,12 @@ /* Transitions */ --transition: 150ms ease; + + /* Header pill + home column (keep in sync with .header-inner horizontal padding) */ + --section-y: clamp(3rem, 6.5vw, 5rem); + --home-section-gap: clamp(7rem, 12vw, 10rem); + --layout-max-width: 1100px; + --layout-pad-inline: 1rem; } /* ---- Reset & Base ---- */ @@ -58,280 +69,2656 @@ html { scrollbar-gutter: stable; } -body { - font-family: var(--font-family); - color: var(--color-text); - background: var(--color-penumbra); - line-height: 1.6; +body { + font-family: var(--font-family); + color: var(--color-text); + background: var(--color-penumbra); + line-height: 1.6; + display: flex; + flex-direction: column; + min-height: 100vh; + position: relative; + overflow-x: hidden; +} + +body::before { + content: none; +} + +body::after { + content: none; +} + +@media (prefers-reduced-motion: reduce) { + body::after { + animation: none; + opacity: 0.34; + } +} + +main { + flex: 1; +} + +.site-header, +main, +.site-footer { + position: relative; + z-index: 1; +} + +a { + color: inherit; + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; +} + +/* ---- Layout ---- */ +.container { + max-width: var(--layout-max-width); + margin: 0 auto; + padding: 0 var(--space-xl); +} + +/* Home: same horizontal inset as .header-inner so cards align with the nav pill edges */ +.home-content > .container { + padding-left: var(--layout-pad-inline); + padding-right: var(--layout-pad-inline); +} + +/* ---- Header ---- */ +.site-header { + background: transparent; + position: sticky; + top: 0; + z-index: 100; + padding: var(--space-md) var(--space-md) 0; +} + +.header-inner { + max-width: var(--layout-max-width); + margin: 0 auto; + min-height: 56px; + padding: 0.65rem var(--layout-pad-inline); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-lg); + background: rgba(10, 10, 10, 0.92); + border: 1px solid var(--color-border); + border-radius: 999px; + box-shadow: 0 12px 36px rgba(255, 255, 255, 0.04); + backdrop-filter: blur(16px); +} + +.site-logo { + display: flex; + align-items: center; + gap: 0.7rem; + color: var(--color-text-heading); + font-weight: 600; + font-size: 1rem; + letter-spacing: 0; + white-space: nowrap; +} + +.logo-icon { + color: var(--color-beam); + width: 32px; + height: 32px; + max-width: none; + object-fit: contain; + flex-shrink: 0; +} + +.site-nav { + display: flex; + align-items: center; + gap: clamp(0.45rem, 1.2vw, 0.85rem); +} + +.nav-link { + color: var(--color-text-secondary); + font-size: 0.95rem; + font-weight: 500; + padding: var(--space-xs) 0; + transition: + color var(--transition), + background var(--transition); + white-space: nowrap; +} + +.nav-link:not(.nav-link--pill) { + padding: 0.4rem 0.85rem; + border-radius: 999px; +} + +.nav-link:not(.nav-link--pill):hover, +.nav-link:not(.nav-link--pill):focus-visible { + color: var(--color-text-heading); + background: rgba(255, 255, 255, 0.035); +} + +.nav-link.active:not(.nav-link--pill) { + color: var(--color-laser); + background: var(--color-laser-subtle); +} + +.nav-link--pill { + color: #030303; + border: 1px solid rgba(0, 255, 224, 0.9); + background: var(--color-laser); + border-radius: 999px; + padding: 0.6rem 1.25rem; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.35), + 0 0 0 1px rgba(0, 0, 0, 0.12); + transform: scale(1); + transform-origin: center center; + transition: + transform 0.55s cubic-bezier(0.34, 1.45, 0.45, 1), + background 0.22s ease, + border-color 0.22s ease, + color 0.22s ease, + box-shadow 0.22s ease; +} + +.nav-link--pill.active { + color: #030303; + background: var(--color-laser-hover); + border-color: rgba(0, 255, 224, 0.95); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.28), + 0 0 0 1px rgba(0, 0, 0, 0.14); +} + +.nav-link--pill:hover, +.nav-link--pill:focus-visible { + color: #030303; + background: var(--color-laser-hover); + border-color: var(--color-laser-hover); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.32), + 0 0 18px rgba(0, 255, 224, 0.3); + transform: scale(0.965) translateY(-1px); +} + +.nav-link--github { + display: inline-flex; + align-items: center; + gap: var(--space-xs); +} + +.nav-link--github svg { + width: 16px; + height: 16px; +} + +@media (prefers-reduced-motion: reduce) { + .nav-link--pill { + transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); + } + + .nav-link--pill:hover, + .nav-link--pill:focus-visible { + transform: none; + } +} + +/* ---- Hero (Homepage) ---- */ +.hero { + background: transparent; + /* Match .header-inner / .home-content horizontal inset; section spacing starts in .home-content. */ + padding: var(--space-3xl) var(--layout-pad-inline) 0; + text-align: center; +} + +.hero-inner { + max-width: 760px; + margin: 0 auto; +} + +.hero-title { + color: var(--color-text-heading); + font-size: 4.25rem; + font-weight: 700; + letter-spacing: -0.03em; + line-height: 1.1; + margin-bottom: var(--space-md); +} + +.hero-tagline { + color: var(--color-text-secondary); + font-size: 1.35rem; + font-weight: 400; + margin-bottom: var(--space-lg); +} + +.hero-actions { + display: flex; + gap: var(--space-lg); + justify-content: center; + margin-bottom: 0; +} + +.hero-preview-wrap { + width: 100%; + max-width: min(var(--layout-max-width), calc(100% - 2 * var(--layout-pad-inline))); + margin: clamp(1.75rem, 4vw, 2.75rem) auto 0; + padding: 0 var(--layout-pad-inline); + box-sizing: border-box; + /* Hero uses text-align: center; reset so bento card copy is left-aligned */ + text-align: left; +} + +.center-preview.center-preview--hero { + width: 100%; + max-width: 100%; + margin-left: auto; + margin-right: auto; + margin-top: 0; + transform: none; + text-align: left; +} + +.hero-cta { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + min-height: 54px; + padding: 0.65rem 1.75rem; + font-weight: 600; + font-size: 1.05rem; + border-radius: 999px; + transform: scale(1); + transform-origin: center center; + transition: + transform 0.55s cubic-bezier(0.34, 1.45, 0.45, 1), + background 0.22s ease, + border-color 0.22s ease, + color 0.22s ease, + box-shadow 0.22s ease; + background: var(--color-laser); + color: #030303; + border: 1px solid rgba(0, 255, 224, 0.9); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.35), + 0 0 0 1px rgba(0, 0, 0, 0.12); +} + +.hero-cta:hover, +.hero-cta:focus-visible { + background: var(--color-laser-hover); + border-color: var(--color-laser-hover); + color: #030303; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.32), + 0 0 18px rgba(0, 255, 224, 0.3); + transform: scale(0.965) translateY(-1px); +} + +.hero-cta--secondary { + background: transparent; + color: var(--color-text-secondary); + border: 1px solid var(--color-border-light); + border-radius: 999px; + box-shadow: none; +} + +.hero-cta--secondary:hover, +.hero-cta--secondary:focus-visible { + background: rgba(255, 255, 255, 0.035); + border-color: var(--color-border-light); + color: var(--color-text-heading); + box-shadow: none; + transform: scale(0.965) translateY(-1px); +} + +.hero-cta--secondary svg { + width: 18px; + height: 18px; +} + +.content-cta { + margin-top: var(--space-xl); + text-align: center; +} + +.article-body .hero-cta { + color: #000; + text-decoration: none; +} + +.article-body .hero-cta:hover { + color: #000; +} + +@media (prefers-reduced-motion: reduce) { + .hero-cta { + transition: + background var(--transition), + border-color var(--transition), + color var(--transition), + box-shadow var(--transition); + } + + .hero-cta:hover, + .hero-cta:focus-visible { + transform: none; + } +} + +/* ---- Home Content ---- */ +.home-content { + padding: var(--home-section-gap) 0 var(--section-y); +} + +.home-content > .container > h2 { + font-size: 1.4rem; + font-weight: 600; + color: var(--color-text-heading); + letter-spacing: -0.01em; + margin-top: var(--space-sm); + margin-bottom: var(--space-sm); +} + +.home-content > .container > p { + color: var(--color-text-secondary); + font-size: 0.95rem; + line-height: 1.75; + margin-bottom: var(--space-md); +} + +.home-content > .container > p a { + color: var(--color-beam); + text-decoration: underline; + text-underline-offset: 2px; + transition: color var(--transition); +} + +.home-content > .container > p a:hover { + color: var(--color-beam-dim); +} + +/* ---- Home Intro ---- */ +.callout { + background: var(--color-umbra); + border: 1px solid var(--color-border); + padding: var(--space-lg) var(--space-xl); + border-radius: var(--radius-sm); + margin-bottom: var(--space-xl); +} + +.callout-body p { + color: var(--color-text-secondary); + font-size: 0.95rem; + line-height: 1.75; + margin: 0; +} + +.callout-warning { + border: none; + border-left: 4px solid #D94040; + background: rgba(255, 255, 255, 0.05); +} + +.callout-label { + display: flex; + align-items: center; + gap: var(--space-sm); + color: var(--color-text-heading); + font-weight: 600; + font-size: 0.9rem; + margin-bottom: var(--space-sm); +} + +/* ---- Origin timeline (zigzag cards + dashed connector) ---- */ +.origin-story { + position: relative; + max-width: var(--layout-max-width); + margin: 0 auto var(--space-3xl); + padding: 0; +} + +.origin-story-frame { + position: relative; + display: flex; + flex-direction: column; + gap: 0; + background: transparent; + border: 0; + padding: 0; +} + +.origin-step { + position: relative; + z-index: 1; + /* Same content width as .header-inner (full .container column) */ + width: 100%; + max-width: none; + align-self: stretch; + margin-left: 0; + margin-right: 0; + padding: clamp(1.4rem, 2.8vw, 1.85rem) clamp(1.4rem, 3vw, 2rem); + background: var(--color-eclipse); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius-lg); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.05), + 0 0 38px rgba(255, 255, 255, 0.05); + text-align: center; + opacity: 1; + transform: none; + filter: none; + transition: + opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), + transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), + filter 0.58s ease, + border-color 0.5s ease; + transition-delay: calc(var(--stagger, 0) * 70ms); +} + +.origin-step--release { + border-color: rgba(255, 255, 255, 0.22); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.09), + 0 0 56px rgba(255, 255, 255, 0.1); +} + +.origin-story-frame[data-scroll-anim] .origin-step:not(.is-visible) { + opacity: 0; + transform: translateY(2.25rem) scale(0.985); + filter: blur(8px); +} + +.origin-story-frame[data-scroll-anim] .origin-step.is-visible { + opacity: 1; + transform: translateY(0) scale(1); + filter: blur(0); +} + +/* Connector: vertical segment between centered cards (path built in JS) */ +.origin-connector { + position: relative; + z-index: 0; + align-self: stretch; + width: 100%; + height: clamp(3.25rem, 7vw, 4.75rem); + margin: 0; + margin-top: -2px; + display: block; + pointer-events: none; +} + +.origin-connector__svg { + display: block; + width: 100%; + height: 100%; + overflow: visible; +} + +.origin-connector__path { + pointer-events: none; + /* Larger dashes so motion reads clearly; period = sum of dash + gap */ + stroke-dasharray: 0.07 0.09; + stroke-dashoffset: 0; + animation: origin-flow 0.75s linear infinite; + filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35)); +} + +@keyframes origin-flow { + from { stroke-dashoffset: 0; } + to { stroke-dashoffset: -0.16; } +} + +@media (prefers-reduced-motion: reduce) { + .origin-connector__path { + animation: none; + } + + .origin-story-frame .origin-step { + opacity: 1 !important; + transform: none !important; + filter: none !important; + transition: border-color var(--transition); + } +} + +/* Match landing blocks: pill label + display heading */ +.origin-step__intro.section-copy { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: clamp(var(--space-md), 2vw, var(--space-lg)); + text-align: center; +} + +.origin-step__intro .section-label { + letter-spacing: 0.1em; +} + +.origin-step__intro h2 { + max-width: min(28ch, 100%); + margin: 0 auto; + color: var(--color-text-heading); + font-size: clamp(1.85rem, 3.4vw, 3.35rem); + font-weight: 750; + line-height: 1.05; + letter-spacing: -0.032em; +} + +.origin-step__body { + margin: 0 auto; + max-width: min(52ch, 100%); + color: rgba(255, 255, 255, 0.68); + font-size: clamp(1.05rem, 1.25vw, 1.22rem); + line-height: 1.7; + text-align: center; +} + +.origin-step--release .origin-step__intro h2 { + color: var(--color-text-heading); +} + +/* ---- Landing sections (home, below timeline) ---- */ +/* Stay inside .container like the timeline—no full-bleed strips (those read as “cut off” at edges). + No section-wide overlay: gradients were clipping card shadows and boxing each block. */ +.landing-section { + position: relative; + padding: var(--section-y) 0; + overflow: visible; +} + +.landing-section + .landing-section { + /* No border—hairlines read as “black cuts” on pure black; spacing only */ + padding-top: var(--section-y); +} + +.landing-section > * { + position: relative; + z-index: 1; + margin-left: 0; + margin-right: 0; +} + +.section-label { + display: inline-block; + margin: 0 0 var(--space-md); + padding: 0.38rem 0.9rem; + font-size: 0.72rem; + font-weight: 650; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.82); + border: 1px solid rgba(255, 255, 255, 0.26); + border-radius: 999px; + background: rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); +} + +.section-copy { + margin-bottom: clamp(var(--space-xl), 4vw, var(--space-3xl)); +} + +.section-copy h2 { + margin: 0; + max-width: 18ch; + color: var(--color-text-heading); + font-size: clamp(1.85rem, 3.4vw, 3.35rem); + font-weight: 750; + line-height: 1.05; + letter-spacing: -0.032em; +} + +.landing-section--why .section-copy h2 { + max-width: 22ch; +} + +.landing-section--restore .section-copy h2, +.landing-section--control .section-copy h2, +.landing-section--requirements .section-copy h2 { + max-width: 24ch; +} + +/* Why: editorial story column (not equal “product” tiles) */ +.why-narrative { + --why-spine-x: 11px; + counter-reset: why-beat; + position: relative; + max-width: 42rem; + padding: 0.25rem 0 0.35rem; + margin-top: 0.25rem; +} + +.why-narrative::before { + content: ""; + position: absolute; + left: var(--why-spine-x); + top: 0.35rem; + bottom: 0.35rem; + width: 1px; + transform: translateX(-50%); + background: linear-gradient( + 180deg, + transparent 0%, + rgba(255, 255, 255, 0.1) 6%, + rgba(255, 255, 255, 0.12) 50%, + rgba(255, 255, 255, 0.1) 94%, + transparent 100% + ); + pointer-events: none; +} + +.why-narrative p { + counter-increment: why-beat; + position: relative; + margin: 0 0 clamp(1.85rem, 4.5vw, 2.75rem); + padding: 1.35rem 0 0.35rem clamp(2.35rem, 5vw, 3rem); + color: rgba(255, 255, 255, 0.72); + font-size: clamp(1.06rem, 1.2vw, 1.22rem); + line-height: 1.82; + letter-spacing: 0.01em; + background: none; + border: none; + border-radius: 0; + box-shadow: none; + transition: color 220ms ease, border-color 220ms ease; +} + +.why-narrative p:last-child { + margin-bottom: 0; +} + +.why-narrative p::before { + content: "0" counter(why-beat); + position: absolute; + left: clamp(2.35rem, 5vw, 3rem); + top: 0; + font-size: 0.62rem; + font-weight: 750; + font-variant-numeric: tabular-nums; + letter-spacing: 0.16em; + color: var(--color-text-muted); + line-height: 1; +} + +.why-narrative p::after { + content: ""; + position: absolute; + left: var(--why-spine-x); + top: 1.15rem; + width: 9px; + height: 9px; + border-radius: 50%; + transform: translate(-50%, 0); + background: var(--color-penumbra); + border: 2px solid rgba(255, 255, 255, 0.45); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 255, 255, 0.12); + transition: border-color 220ms ease, box-shadow 220ms ease; +} + +.why-narrative p:first-of-type { + color: rgba(255, 255, 255, 0.82); + font-size: clamp(1.12rem, 1.28vw, 1.28rem); +} + +.why-narrative p:hover { + color: rgba(255, 255, 255, 0.88); +} + +.why-narrative p:hover::after { + border-color: rgba(255, 255, 255, 0.85); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 255, 255, 0.22); +} + +/* Why: centered header, then body row (narrative | timeline stack) */ +.landing-section--why-scroll { + padding-top: var(--section-y); + padding-bottom: var(--section-y); + scroll-margin-top: 6.75rem; +} + +.timeline-page { + padding-top: clamp(2rem, 4vw, 3rem); + padding-bottom: var(--section-y); +} + +.timeline-page .landing-section--why-scroll { + padding-top: 0; +} + +/* Tighter handoff into the next block than generic .landing-section + .landing-section */ +.landing-section--why-scroll + .landing-section { + padding-top: var(--section-y); +} + +.why-scroll-scene { + position: relative; + min-height: 0; +} + +.why-scroll-sticky { + position: relative; + top: auto; + z-index: 2; + padding-top: clamp(0.35rem, 1.2vw, 0.85rem); + padding-bottom: clamp(1.5rem, 4vw, 2.75rem); +} + +.why-scroll-header { + width: 100%; + margin-bottom: clamp(2.75rem, 6.5vw, 4.5rem); +} + +.why-scroll-header .section-copy { + margin-bottom: 0; +} + +.section-copy--why-header { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.section-copy--why-header .section-label { + margin-left: auto; + margin-right: auto; +} + +.section-copy--why-header h2 { + margin-left: auto; + margin-right: auto; + max-width: min(32ch, 100%); + text-align: center; +} + +/* Why: alternating milestone cards + narrative columns along a center spine */ +.why-timeline { + --why-timeline-progress: 0; + position: relative; + width: 100%; + max-width: min(1120px, 100%); + margin: 0 auto; + padding: 0 clamp(0.25rem, 1.5vw, 0.75rem); + box-sizing: border-box; +} + +.why-timeline-line-wrap { + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 0; + transform: translateX(-50%); + z-index: 0; + pointer-events: none; +} + +.why-timeline-line--track { + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 2px; + transform: translateX(-50%); + background: rgba(255, 255, 255, 0.1); + border-radius: 1px; +} + +.why-timeline-line--fill { + position: absolute; + left: 50%; + top: 0; + width: 3px; + height: 100%; + transform: translateX(-50%) scaleY(var(--why-timeline-progress, 0)); + transform-origin: center top; + border-radius: 2px; + background: linear-gradient( + 180deg, + var(--color-laser) 0%, + rgba(0, 255, 224, 0.88) 42%, + var(--color-laser-hover) 72%, + var(--color-laser) 100% + ); + box-shadow: + 0 0 14px rgba(0, 255, 224, 0.28), + 0 0 28px rgba(0, 255, 224, 0.1); + will-change: transform; +} + +.why-timeline-row { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + gap: clamp(1rem, 2.5vw, 2rem); + align-items: start; + margin-bottom: clamp(1.25rem, 3vw, 2rem); +} + +.why-timeline-row:last-child { + margin-bottom: 0; +} + +.why-timeline-row--card-left > .why-tl-card { + grid-column: 1; +} + +.why-timeline-row--card-left > .why-timeline-spine { + grid-column: 2; +} + +.why-timeline-row--card-left > .why-timeline-aside { + grid-column: 3; +} + +.why-timeline-row--card-right > .why-timeline-aside { + grid-column: 1; +} + +.why-timeline-row--card-right > .why-timeline-spine { + grid-column: 2; +} + +.why-timeline-row--card-right > .why-tl-card { + grid-column: 3; +} + +.why-timeline-spine { + position: relative; + width: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + align-self: start; + padding-top: 0; +} + +.why-timeline-dot { + display: block; + width: 12px; + height: 12px; + margin-top: 0; + border-radius: 50%; + background: var(--color-laser); + box-shadow: + 0 0 0 3px var(--color-penumbra), + 0 0 18px rgba(0, 255, 224, 0.34); + flex-shrink: 0; + /* Sit on the top edge of the card row: half above the box reads like a classic timeline pin */ + transform: translateY(-50%); +} + +.why-timeline-aside { + min-width: 0; + align-self: stretch; + display: flex; + align-items: center; +} + +.why-timeline-aside__text { + margin: 0; + padding-top: 0; + font-size: clamp(0.95rem, 1.08vw, 1.05rem); + line-height: 1.84; + letter-spacing: 0.01em; + color: rgba(255, 255, 255, 0.78); + text-align: left; +} + +.why-timeline-row--card-left .why-tl-card::after, +.why-timeline-row--card-right .why-tl-card::after { + content: ""; + position: absolute; + top: 0; + transform: translateY(-50%); + border: 7px solid transparent; + pointer-events: none; +} + +.why-timeline-row--card-left .why-tl-card::after { + right: -7px; + border-left-color: var(--color-eclipse); +} + +.why-timeline-row--card-right .why-tl-card::after { + left: -7px; + border-right-color: var(--color-eclipse); +} + +.why-tl-card { + position: relative; + overflow: visible; + padding: clamp(1.15rem, 2.4vw, 1.5rem); + background: var(--color-eclipse); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius-lg); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); + transition: + border-color 0.22s ease, + background 0.22s ease, + box-shadow 0.22s ease; + opacity: 1; + will-change: auto; +} + +.why-tl-card__meta { + margin: 0 0 var(--space-sm); + font-size: 0.68rem; + font-weight: 750; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--color-text-muted); + line-height: 1.2; +} + +.why-tl-card--release { + border-color: rgba(255, 255, 255, 0.18); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); +} + +.why-tl-card__title { + margin: 0 0 var(--space-xs); + font-size: clamp(1.02rem, 1.65vw, 1.28rem); + font-weight: 750; + letter-spacing: -0.02em; + line-height: 1.15; + color: var(--color-text-heading); +} + +.why-tl-card__body { + margin: 0; + font-size: clamp(0.92rem, 1.05vw, 1.02rem); + line-height: 1.62; + color: rgba(255, 255, 255, 0.72); +} + +@media (max-width: 960px) { + .why-timeline-line-wrap { + display: none; + } + + .why-timeline-row { + grid-template-columns: 1fr; + gap: var(--space-md); + } + + .why-timeline-row--card-left > *, + .why-timeline-row--card-right > * { + grid-column: 1; + } + + .why-timeline-spine { + display: none; + } + + .why-timeline-row--card-left .why-tl-card, + .why-timeline-row--card-right .why-tl-card { + order: 1; + } + + .why-timeline-row--card-left .why-timeline-aside, + .why-timeline-row--card-right .why-timeline-aside { + order: 2; + } + + .why-tl-card::after { + display: none !important; + } + + .why-timeline-aside__text { + padding-top: 0; + } +} + +/* Restore: feature cards — same shell + type as .requirements-card */ +.restore-list { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-lg); +} + +.restore-item { + position: relative; + overflow: hidden; + padding: clamp(1.15rem, 2.4vw, 1.5rem); + background: var(--color-eclipse); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius-lg); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); + transition: + border-color 0.22s ease, + background 0.22s ease, + box-shadow 0.22s ease; +} + +.restore-item > :not(.restore-item__watermark) { + position: relative; + z-index: 1; +} + +.restore-item__watermark { + position: absolute; + z-index: 0; + top: 52%; + right: clamp(-7.5rem, -10vw, -4.75rem); + transform: translateY(-50%) rotate(-4deg); + display: flex; + align-items: center; + justify-content: flex-end; + pointer-events: none; + color: #fff; + opacity: 0.045; + -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 28%, rgba(0, 0, 0, 0.55) 58%, #000 100%); + mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 28%, rgba(0, 0, 0, 0.55) 58%, #000 100%); +} + +.restore-item__watermark svg { + display: block; + width: clamp(13.5rem, 30vw, 19.5rem); + height: auto; + flex-shrink: 0; + stroke-width: 1.35; +} + +.restore-item__icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + margin: 0 0 clamp(0.85rem, 2.2vw, 1.25rem); + flex-shrink: 0; + border-radius: 50%; + color: rgba(255, 255, 255, 0.9); + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); +} + +.restore-item__icon svg { + display: block; + width: 1.125rem; + height: 1.125rem; +} + +.restore-item h3 { + margin: 0 0 var(--space-xs); + font-size: clamp(1.02rem, 1.65vw, 1.28rem); + font-weight: 750; + letter-spacing: -0.02em; + line-height: 1.15; + color: var(--color-text-heading); +} + +.restore-item p { + margin: 0; + font-size: clamp(0.92rem, 1.05vw, 1.02rem); + line-height: 1.62; + color: rgba(255, 255, 255, 0.72); +} + +/* Center UI preview (Humane-style masonry under restore cards) */ +.center-preview { + width: min(1364px, calc(100vw - 56px)); + margin-top: clamp(2rem, 4vw, 3rem); + margin-left: 50%; + margin-right: 0; + transform: translateX(-50%); +} + +.center-preview__lede { + display: none; +} + +.center-preview__grid { + width: 100%; + --cp-gap: 24px; + /* One column width → use as row height so every 1×1 cell is a square */ + --cp-cell: calc((100% - 5 * var(--cp-gap)) / 6); + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + grid-template-rows: repeat(3, var(--cp-cell)); + gap: var(--cp-gap); +} + +.center-preview__grid > * { + min-height: 0; + height: 100%; +} + +/* 1 AI Mic | 2 Bike capture (large) | 3 Call Jenna | 4 Music TIDAL */ +.center-preview__grid > :nth-child(1) { + grid-column: 1 / span 2; + grid-row: 1; +} + +.center-preview__grid > :nth-child(2) { + grid-column: 3 / span 2; + grid-row: 1 / span 2; +} + +.center-preview__grid > :nth-child(3) { + grid-column: 5; + grid-row: 1; +} + +.center-preview__grid > :nth-child(4) { + grid-column: 6; + grid-row: 1; +} + +/* 5 Notes (yellow) | 6 Call Bethany | 7 Hike capture (large) */ +.center-preview__grid > :nth-child(5) { + grid-column: 1; + grid-row: 2; +} + +.center-preview__grid > :nth-child(6) { + grid-column: 2; + grid-row: 2; +} + +.center-preview__grid > :nth-child(7) { + grid-column: 5 / span 2; + grid-row: 2 / span 2; +} + +/* 8 Listened | 9 Notes (yellow) | 10 Health */ +.center-preview__grid > :nth-child(8) { + grid-column: 1; + grid-row: 3; +} + +.center-preview__grid > :nth-child(9) { + grid-column: 2; + grid-row: 3; +} + +.center-preview__grid > :nth-child(10) { + grid-column: 3 / span 2; + grid-row: 3; +} + +.cp-card { + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: flex-end; + border-radius: 28px; + padding: 24px; + background: #151719; + color: #fff; + font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; + min-height: 0; + height: 100%; +} + +.cp-card--media, +.cp-card--tidal { + padding: 0; +} + +.cp-tag { + display: inline-flex; + align-items: center; + gap: 7px; + align-self: flex-start; + padding: 7px 13px 8px; + margin: 0 0 18px; + border-radius: 999px; + font-size: 13px; + line-height: 1; + font-weight: 650; + letter-spacing: -0.01em; + background: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.9); +} + +/* Ai Mic: pill pinned top; threads sit on bottom */ +.cp-card--ai { + padding: 76px 24px 22px; +} + +.cp-card--ai > .cp-tag { + position: absolute; + top: 30px; + left: 24px; + margin: 0; +} + +.cp-card--ai .cp-ai__thread { + margin-bottom: 24px; +} + +.cp-card--ai .cp-ai__q { + font-size: 17px; + line-height: 1.15; +} + +.cp-card--ai .cp-ai__a { + font-size: 15px; + line-height: 1.28; +} + +.cp-tag__icon { + display: block; + width: 14px; + height: 14px; + flex-shrink: 0; +} + +/* Stroke “image” glyph for Captures (replaces camera icon) */ +.cp-tag__icon--captures { + overflow: visible; +} + +.center-preview__grid--simple .cp-tag--on-photo .cp-tag__icon--captures { + width: 16px; + height: 16px; +} + +.cp-tag--on-photo { + position: absolute; + top: 28px; + left: 28px; + z-index: 4; + margin: 0; + background: rgba(16, 21, 24, 0.82); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.cp-tag--icon-only { + padding: 16px; + border-radius: 50%; +} + +.cp-tag--icon-only .cp-tag__icon { + width: 18px; + height: 18px; +} + +.cp-tag--dark { + background: rgba(0, 0, 0, 0.08); + color: rgba(0, 0, 0, 0.82); +} + +/* AI Mic threads */ +.cp-ai__thread { + margin-bottom: 16px; +} + +.cp-ai__thread:last-child { + margin-bottom: 0; +} + +.cp-ai__q { + margin: 0 0 7px; + font-size: 17px; + font-weight: 700; + letter-spacing: -0.01em; + color: #fff; +} + +.cp-ai__a { + margin: 0; + font-size: 15px; + line-height: 1.28; + color: rgba(255, 255, 255, 0.55); +} + +/* Photo capture cards */ +.cp-media-bg { + position: absolute; + inset: 0; + z-index: 0; + background-image: var(--cp-media); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.cp-media-shade { + position: absolute; + inset: 0; + z-index: 1; + background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.32) 40%, transparent 72%); +} + +.cp-media-shade--light { + background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 80%); +} + +.cp-media-footer { + position: absolute; + left: 0; + right: 0; + bottom: 0; + z-index: 2; + padding: 28px 32px 30px; +} + +.cp-media-title { + margin: 0 0 10px; + font-size: clamp(20px, 1.9vw, 25px); + font-weight: 750; + line-height: 1.18; + letter-spacing: -0.02em; + color: #fff; +} + +.cp-media-title span { + display: block; +} + +.cp-media-meta { + margin: 0; + font-size: 15px; + color: rgba(255, 255, 255, 0.65); +} + +.cp-media-meta--time { + margin-top: 4px; + font-size: 14px; + color: rgba(255, 255, 255, 0.5); +} + +.cp-media-meta--artist { + display: flex; + align-items: center; + gap: 0.4rem; + margin-top: 3px; + color: rgba(255, 255, 255, 0.78); +} + +.cp-explicit { + display: inline-flex; + align-items: center; + justify-content: center; + width: 14px; + height: 14px; + border-radius: 3px; + font-size: 0.55rem; + font-weight: 700; + letter-spacing: 0; + color: #000; + background: rgba(255, 255, 255, 0.85); +} + +/* Call card: phone icon top-left; text stack bottom-left */ +.cp-card--call { + align-items: flex-start; + padding: 82px 24px 25px; +} + +.cp-call-icon { + position: absolute; + top: 28px; + left: 24px; + display: flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + margin: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.06); + color: rgba(255, 255, 255, 0.85); +} + +.cp-call-action { + margin: 0 0 2px; + font-size: 18px; + font-weight: 500; + color: rgba(255, 255, 255, 0.7); +} + +.cp-call-name { + margin: 0 0 2px; + font-size: clamp(24px, 2vw, 27px); + font-weight: 750; + letter-spacing: -0.02em; + color: #fff; +} + +.cp-call-meta { + margin: 0; + font-size: 14px; + color: rgba(255, 255, 255, 0.5); +} + +/* Yellow note: Notes pill top-left; copy + time bottom */ +.cp-card--note { + background: #ffd119; + color: #111; + padding: 76px 24px 25px; + justify-content: flex-start; +} + +.cp-card--note .cp-tag { + position: absolute; + top: 28px; + left: 24px; + margin: 0; +} + +.cp-note-body { + margin: 0 0 24px; + font-size: clamp(16px, 1.25vw, 18px); + line-height: 1.3; + font-weight: 560; + color: rgba(0, 0, 0, 0.88); +} + +.cp-note-time { + margin: 0; + font-size: 15px; + font-weight: 600; + color: rgba(0, 0, 0, 0.5); +} + +/* TIDAL music card (no photo provided — atmospheric gradient) */ +.cp-tidal-art { + position: absolute; + inset: 0; + z-index: 0; + background: + radial-gradient(circle at 76% 45%, rgba(231, 62, 42, 0.9) 0 7%, transparent 8%), + radial-gradient(70% 62% at 58% 52%, rgba(180, 34, 42, 0.9) 0%, rgba(116, 23, 36, 0.65) 38%, transparent 63%), + linear-gradient(180deg, rgba(49, 83, 99, 0.9) 0%, rgba(35, 54, 65, 0.65) 36%, rgba(84, 20, 27, 0.94) 100%), + #151719; +} + +.cp-card--tidal .cp-tag--on-photo { + z-index: 4; + top: 60px; + right: 28px; + left: auto; +} + +.cp-card--tidal .cp-media-footer { + z-index: 3; +} + +.cp-card--tidal .cp-media-title { + font-size: clamp(15px, 1.25vw, 18px); + line-height: 1.16; +} + +/* Listened-to card: art top-left; text bottom */ +.cp-card--listen { + align-items: flex-start; + padding: 94px 24px 24px; +} + +.cp-listen-art { + position: absolute; + top: 24px; + left: 24px; + width: 56px; + height: 56px; + margin: 0; + border-radius: 10px; + background: + radial-gradient(circle at 50% 50%, transparent 0 10px, rgba(255,255,255,0.98) 11px 13px, transparent 14px), + conic-gradient(from 30deg, #eceff8, #b9c1d0, #f8fbff, #9aa4b5, #eceff8); + border: 1px solid rgba(255, 255, 255, 0.06); +} + +.cp-listen-prefix { + margin: 0 0 2px; + font-size: 18px; + font-weight: 500; + color: rgba(255, 255, 255, 0.7); +} + +.cp-listen-title { + margin: 0 0 8px; + font-size: 18px; + font-weight: 600; + line-height: 1.3; + letter-spacing: -0.015em; + color: rgba(255, 255, 255, 0.92); +} + +.cp-listen-title strong { + font-weight: 750; + color: #fff; +} + +/* Health card: copy bottom-left; faint line chart as decoration bottom-right */ +.cp-card--health { + position: relative; + padding: 78px 24px 24px; + padding-right: 170px; + overflow: hidden; +} + +.cp-card--health > .cp-tag { + position: absolute; + top: 28px; + left: 24px; + margin: 0; + z-index: 2; +} + +.cp-health__sparkline { + position: absolute; + right: 30px; + bottom: 24px; + width: 134px; + height: 134px; + opacity: 1; + z-index: 0; + pointer-events: none; + border-radius: 50%; + background: + radial-gradient(circle at 50% 50%, #151719 0 42%, transparent 43%), + conic-gradient(from -18deg, #30f2ca 0 27%, transparent 27% 31%, rgba(255,255,255,0.18) 31% 64%, transparent 64% 68%, rgba(255,255,255,0.22) 68% 100%); + transform: rotate(12deg); +} + +.cp-health__sparkline svg { + display: none; +} + +.cp-health__copy { + position: relative; + z-index: 2; + max-width: 100%; +} + +.cp-health__headline { + margin: 0 0 10px; + font-size: clamp(17px, 1.35vw, 19px); + font-weight: 500; + line-height: 1.45; + color: rgba(255, 255, 255, 0.94); +} + +.cp-health__headline strong { + font-weight: 750; + color: #fff; +} + +.cp-health__time { + margin: 0; + font-size: 15px; + color: rgba(255, 255, 255, 0.58); +} + +@media (max-width: 1100px) { + .center-preview__grid { + --cp-cell: calc((100% - 3 * var(--cp-gap)) / 4); + grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-rows: repeat(5, var(--cp-cell)); + } + .center-preview__grid > :nth-child(1) { grid-column: 1 / span 2; grid-row: 1; } + .center-preview__grid > :nth-child(2) { grid-column: 3 / span 2; grid-row: 1 / span 2; } + .center-preview__grid > :nth-child(3) { grid-column: 1; grid-row: 2; } + .center-preview__grid > :nth-child(4) { grid-column: 2; grid-row: 2; } + .center-preview__grid > :nth-child(5) { grid-column: 1; grid-row: 3; } + .center-preview__grid > :nth-child(6) { grid-column: 2; grid-row: 3; } + .center-preview__grid > :nth-child(7) { grid-column: 3 / span 2; grid-row: 3 / span 2; } + .center-preview__grid > :nth-child(8) { grid-column: 1; grid-row: 4; } + .center-preview__grid > :nth-child(9) { grid-column: 2; grid-row: 4; } + .center-preview__grid > :nth-child(10) { grid-column: 1 / span 2; grid-row: 5; } +} + +@media (max-width: 720px) { + .center-preview__grid { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + } + + .center-preview__grid > * { + grid-column: unset !important; + grid-row: unset !important; + width: min(100%, 380px); + aspect-ratio: 1 / 1; + height: auto !important; + } + + .cp-card--media.cp-card--media-a, + .cp-card--media.cp-card--media-b { + min-height: 0; + } + + .cp-card--tidal { + min-height: 0; + } +} + +/* Center preview: same max width as the page, organized as left / middle / right columns. */ +.center-preview { + width: 100%; + max-width: var(--layout-max-width); + margin-left: auto; + margin-right: auto; + transform: none; +} + +.center-preview__grid { + width: 100%; + --cp-gap: clamp(12px, 1.6vw, 18px); + --cp-cell: calc((100% - 5 * var(--cp-gap)) / 6); + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + grid-template-rows: repeat(3, var(--cp-cell)); + gap: var(--cp-gap); +} + +.center-preview__grid > * { + position: relative; + width: auto; + height: 100%; + min-height: 0; +} + +.center-preview__grid > :nth-child(1) { grid-column: 1 / span 2; grid-row: 1; } +.center-preview__grid > :nth-child(2) { grid-column: 3 / span 2; grid-row: 1 / span 2; } +.center-preview__grid > :nth-child(3) { grid-column: 5; grid-row: 1; } +.center-preview__grid > :nth-child(4) { grid-column: 6; grid-row: 1; } +.center-preview__grid > :nth-child(5) { grid-column: 1; grid-row: 2; } +.center-preview__grid > :nth-child(6) { grid-column: 2; grid-row: 2; } +.center-preview__grid > :nth-child(7) { grid-column: 5 / span 2; grid-row: 2 / span 2; } +.center-preview__grid > :nth-child(8) { grid-column: 1; grid-row: 3; } +.center-preview__grid > :nth-child(9) { grid-column: 2; grid-row: 3; } +.center-preview__grid > :nth-child(10) { grid-column: 3 / span 2; grid-row: 3; } + +.cp-card { + border-radius: 24px; + padding: clamp(16px, 1.6vw, 22px); + height: 100%; + justify-content: flex-end; +} + +.cp-tag { + gap: clamp(5px, 0.51vw, 7px); + padding: clamp(6px, 0.52vw, 7px) clamp(10px, 0.95vw, 13px) clamp(7px, 0.58vw, 8px); + margin-bottom: clamp(12px, 1.32vw, 18px); + font-size: clamp(10px, 0.95vw, 13px); +} + +.cp-tag__icon { + width: clamp(11px, 1.03vw, 14px); + height: clamp(11px, 1.03vw, 14px); +} + +.cp-card--ai { + padding: 48px clamp(16px, 1.6vw, 22px) clamp(14px, 1.35vw, 18px); +} + +.cp-card--ai > .cp-tag { + top: 16px; + left: clamp(16px, 1.6vw, 22px); +} + +.cp-card--ai .cp-ai__thread { + margin-bottom: 10px; +} + +.cp-card--ai .cp-ai__q, +.cp-ai__q { + margin-bottom: 4px; + font-size: clamp(12px, 1.14vw, 14px); + line-height: 1.18; +} + +.cp-card--ai .cp-ai__a, +.cp-ai__a { + font-size: clamp(10px, 1.04vw, 13px); + line-height: 1.22; +} + +.cp-tag--on-photo { + top: clamp(18px, 2.05vw, 28px); + left: clamp(18px, 2.05vw, 28px); +} + +.cp-media-footer { + padding: clamp(20px, 2.05vw, 28px) clamp(22px, 2.34vw, 32px) clamp(22px, 2.2vw, 30px); +} + +.cp-media-title { + font-size: clamp(16px, 1.72vw, 23px); +} + +.cp-media-meta { + font-size: clamp(11px, 1.1vw, 15px); +} + +.cp-card--call { + justify-content: flex-end; + padding: 64px clamp(16px, 1.6vw, 22px) clamp(15px, 1.45vw, 20px); +} + +.cp-call-icon { + top: 18px; + left: clamp(16px, 1.6vw, 22px); + width: 42px; + height: 42px; +} + +.cp-call-action { + margin-bottom: 0; + font-size: clamp(12px, 1.16vw, 15px); + line-height: 1.1; +} + +.cp-call-name { + margin-bottom: 1px; + font-size: clamp(17px, 1.5vw, 21px); + line-height: 1.05; +} + +.cp-call-meta { + font-size: clamp(10px, 1.03vw, 14px); +} + +.cp-card--note { + padding: 50px clamp(16px, 1.6vw, 22px) clamp(14px, 1.35vw, 18px); + justify-content: flex-start; +} + +.cp-card--note .cp-tag { + top: 16px; + left: clamp(16px, 1.6vw, 22px); +} + +.cp-note-body { + margin-bottom: auto; + font-size: clamp(12px, 1.16vw, 15px); + line-height: 1.28; + letter-spacing: 0; +} + +.cp-note-time { + font-size: clamp(11px, 1.1vw, 15px); +} + +.cp-card--tidal .cp-tag--on-photo { + top: 22px; + right: clamp(16px, 1.6vw, 22px); +} + +.cp-card--tidal .cp-media-title { + font-size: clamp(14px, 1.17vw, 16px); + line-height: 1.16; +} + +.cp-card--listen { + padding: 64px clamp(16px, 1.6vw, 22px) clamp(15px, 1.45vw, 20px); +} + +.cp-listen-art { + top: 18px; + left: clamp(16px, 1.6vw, 22px); + width: 42px; + height: 42px; +} + +.cp-listen-prefix, +.cp-listen-title { + font-size: clamp(12px, 1.14vw, 15px); +} + +.cp-card--health { + padding: 48px clamp(100px, 11.5vw, 124px) clamp(14px, 1.35vw, 18px) clamp(16px, 1.6vw, 22px); +} + +.cp-card--health > .cp-tag { + top: 16px; + left: clamp(16px, 1.6vw, 22px); +} + +.cp-health__sparkline { + right: 18px; + bottom: 18px; + width: clamp(76px, 9vw, 100px); + height: clamp(76px, 9vw, 100px); +} + +.cp-health__headline { + margin-bottom: 6px; + font-size: clamp(12px, 1.14vw, 15px); + line-height: 1.28; +} + +.cp-health__time { + font-size: clamp(11px, 1.1vw, 15px); +} + +@media (max-width: 720px) { + .center-preview { + width: 100%; + } + + .center-preview__grid { + display: grid; + grid-template-columns: 1fr; + gap: 12px; + aspect-ratio: auto; + } + + .center-preview__grid > * { + position: relative; + left: auto; + top: auto; + width: 100%; + height: auto; + aspect-ratio: 1 / 1; + } + + .center-preview__grid > :nth-child(1), + .center-preview__grid > :nth-child(2), + .center-preview__grid > :nth-child(7), + .center-preview__grid > :nth-child(10) { + aspect-ratio: 2 / 1; + } +} + +.home-content--centered .center-preview { + max-width: var(--layout-max-width); +} + +.center-preview__grid--simple { + --cp-gap: clamp(14px, 1.7vw, 20px); + --cp-card-h: clamp(138px, 16.5vw, 190px); + display: grid; + width: 100%; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: var(--cp-card-h) calc(var(--cp-card-h) * 2 + var(--cp-gap)); + gap: var(--cp-gap); + text-align: left; +} + +.center-preview__grid--simple > * { + position: relative; + width: auto; + height: 100%; + min-width: 0; + min-height: 0; +} + +.center-preview__grid--simple > :nth-child(1) { + grid-column: 1; + grid-row: 1; +} + +.center-preview__grid--simple > :nth-child(2) { + grid-column: 2; + grid-row: 1; +} + +.center-preview__grid--simple > :nth-child(3) { + grid-column: 3; + grid-row: 1; +} + +.center-preview__grid--simple > :nth-child(4) { + grid-column: 1 / span 2; + grid-row: 2; +} + +.center-preview__grid--simple > :nth-child(5) { + grid-column: 3; + grid-row: 2; +} + +.center-preview__grid--simple .cp-stack { + display: grid; + grid-template-rows: 1fr 1fr; + gap: var(--cp-gap); +} + +.center-preview__grid--simple .cp-simple-card { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + overflow: hidden; + width: auto; + height: 100%; + border-radius: 24px; + min-height: 0; + background: #151719; + color: #fff; + padding: clamp(1rem, 1.8vw, 1.35rem); + transition: + box-shadow 0.22s ease, + border-color 0.22s ease, + filter 0.22s ease; +} + +.center-preview__grid--simple .cp-simple-card--media { + min-height: 0; + padding: 0; + justify-content: flex-end; +} + +.center-preview__grid--simple .cp-simple-card--note { + justify-content: space-between; + background: var(--color-eclipse); + color: rgba(255, 255, 255, 0.92); + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); + padding-top: clamp(4.4rem, 7vw, 5.2rem); +} + +.center-preview__grid--simple .cp-simple-card--note .cp-note-body { + color: rgba(255, 255, 255, 0.78); + font-weight: 500; +} + +.center-preview__grid--simple .cp-simple-card--note .cp-note-time { + color: rgba(255, 255, 255, 0.45); +} + +.center-preview__grid--simple .cp-note-icon { + position: absolute; + top: clamp(1rem, 1.8vw, 1.35rem); + left: clamp(1rem, 1.8vw, 1.35rem); + display: flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + margin: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); + color: rgba(255, 255, 255, 0.9); +} + +.center-preview__grid--simple .cp-note-icon svg { + display: block; +} + +.center-preview__grid--simple .cp-media-icon { + z-index: 4; + background: rgba(28, 28, 28, 0.92); + border-color: rgba(255, 255, 255, 0.12); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.center-preview__grid--simple .cp-simple-card--call { + align-items: stretch; + justify-content: flex-start; + background: #151719; + padding-top: clamp(4.4rem, 7vw, 5.2rem); + min-height: 0; +} + +.center-preview__grid--simple .cp-simple-card--call .cp-call-icon { + top: clamp(1rem, 1.8vw, 1.35rem); + left: clamp(1rem, 1.8vw, 1.35rem); +} + +.center-preview__grid--simple .cp-simple-card--call .cp-call-action, +.center-preview__grid--simple .cp-simple-card--call .cp-call-name, +.center-preview__grid--simple .cp-simple-card--call .cp-call-meta { + width: 100%; + max-width: 100%; + margin-left: 0; + margin-right: 0; + text-align: left; + box-sizing: border-box; +} + +.center-preview__grid--simple .cp-simple-card--call .cp-call-action { + margin-top: 0; + margin-bottom: 0.2rem; +} + +.center-preview__grid--simple .cp-simple-card--call .cp-call-name { + margin-top: 0; + margin-bottom: 0; +} + +.center-preview__grid--simple .cp-simple-card--call .cp-call-meta { + margin-top: auto; + padding-top: clamp(0.65rem, 1.8vw, 1.05rem); +} + +.center-preview__grid--simple .cp-simple-card--tidal { + padding: 0; + justify-content: flex-end; +} + +.center-preview__grid--simple .cp-tag { + position: relative; + top: auto; + left: auto; + margin: 0; +} + +.center-preview__grid--simple .cp-tag--on-photo { + position: absolute; + top: clamp(1rem, 1.8vw, 1.35rem); + left: clamp(1rem, 1.8vw, 1.35rem); + z-index: 4; +} + +.center-preview__grid--simple .cp-note-body { + margin: 0; + font-size: clamp(0.9rem, 1.35vw, 1.1rem); + line-height: 1.25; +} + +.center-preview__grid--simple .cp-call-name { + font-size: clamp(1.25rem, 2vw, 1.6rem); +} + +.center-preview__grid--simple .cp-media-title { + font-size: clamp(1.35rem, 2.35vw, 2rem); +} + +.center-preview__grid--simple .cp-stack .cp-media-title { + font-size: clamp(1rem, 1.5vw, 1.2rem); +} + +.center-preview__grid--simple .cp-stack .cp-card--note { + justify-content: space-between; +} + +@media (prefers-reduced-motion: reduce) { + .center-preview__grid--simple .cp-simple-card { + transition: box-shadow 0.22s ease, border-color 0.22s ease, filter 0.22s ease; + } + +} + +@media (max-width: 700px) { + .center-preview__grid--simple { + grid-template-columns: 1fr; + grid-template-rows: none; + } + + .center-preview__grid--simple > *, + .center-preview__grid--simple > :nth-child(1), + .center-preview__grid--simple > :nth-child(2), + .center-preview__grid--simple > :nth-child(3), + .center-preview__grid--simple > :nth-child(4), + .center-preview__grid--simple > :nth-child(5) { + grid-column: auto; + grid-row: auto; + min-height: 170px; + } + + .center-preview__grid--simple > :nth-child(4) { + min-height: 320px; + } +} + +/* Center: text card (half row) · Pin + provider row — row height = taller column; left card stretches */ +.center-hub { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: clamp(1.25rem, 4vw, 2.75rem); + align-items: stretch; + width: 100%; +} + +.center-hub__copy { + display: flex; + flex-direction: column; + min-width: 0; + min-height: 0; +} + +.center-hub__orbit { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + width: 100%; + max-width: min(100%, 360px); + margin-left: auto; + margin-right: auto; + min-height: 0; +} + +.center-hub__stack { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.center-hub__data-lines { + position: absolute; + inset: 0; + z-index: 1; + width: 100%; + height: 100%; + pointer-events: none; + overflow: visible; +} + +.center-hub__data-lines .center-hub__data-path { + fill: none; + stroke: rgba(255, 255, 255, 0.38); + stroke-width: 1.15; + stroke-linecap: round; + stroke-linejoin: round; + vector-effect: non-scaling-stroke; + stroke-dasharray: 2.25 6; + paint-order: stroke fill; +} + +.center-hub__pin { + position: relative; + z-index: 2; + width: min(92%, 300px); + max-width: 300px; + margin: 0; +} + +.center-hub__pin img { + display: block; + width: 100%; + height: auto; + border-radius: var(--radius-lg); + filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55)); +} + +.center-hub__providers { + position: relative; + z-index: 2; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: stretch; + gap: clamp(0.4rem, 1.5vw, 0.65rem); + width: 100%; + max-width: 100%; + margin-top: clamp(1rem, 3vw, 1.5rem); + padding: 0 0.15rem; +} + +.center-hub__provider { + flex: 1 1 0; + min-width: 0; + max-width: 5.25rem; + display: flex; + align-items: center; + justify-content: center; + padding: clamp(0.45rem, 1.2vw, 0.65rem); + border-radius: 14px; + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.28); + -webkit-backdrop-filter: blur(18px) saturate(1.1); + backdrop-filter: blur(18px) saturate(1.1); + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.22) inset, + 0 8px 22px rgba(0, 0, 0, 0.28); +} + +.center-hub__provider img { + display: block; + width: clamp(28px, 6.5vw, 40px); + height: clamp(28px, 6.5vw, 40px); + object-fit: contain; +} + +.center-hub__provider--gemini img { + width: clamp(30px, 7vw, 44px); + height: clamp(30px, 7vw, 44px); +} + +@media (max-width: 380px) { + .center-hub__providers { + gap: 0.3rem; + } + + .center-hub__provider { + padding: 0.35rem 0.25rem; + } + + .center-hub__provider img { + width: clamp(24px, 6vw, 32px); + height: clamp(24px, 6vw, 32px); + } + + .center-hub__provider--gemini img { + width: clamp(26px, 6.5vw, 34px); + height: clamp(26px, 6.5vw, 34px); + } +} + +.center-panel { + flex: 1; + display: flex; + flex-direction: column; + min-height: 0; + width: 100%; + max-width: 100%; + padding: clamp(1.35rem, 3.2vw, 2.25rem); + background: var(--color-eclipse); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius-lg); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.center-panel__main { + flex: 1; + min-width: 0; + min-height: 0; + display: flex; + flex-direction: column; + align-items: flex-start; + text-align: left; +} + +.center-panel__intro { + width: 100%; + padding-bottom: clamp(0.35rem, 1.2vw, 0.65rem); +} + +.center-panel .section-label { + margin-left: 0; + margin-right: 0; + margin-bottom: clamp(0.85rem, 2vw, 1.15rem); + padding: 0.35rem 0.85rem; + font-size: 0.68rem; + font-weight: 750; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--color-text-muted); + border-color: rgba(255, 255, 255, 0.14); + background: rgba(255, 255, 255, 0.05); +} + +.center-panel h2 { + margin: 0 0 clamp(1rem, 2.5vw, 1.5rem); + max-width: min(22ch, 100%); + font-size: clamp(1.35rem, 2.4vw, 2.15rem); + font-weight: 750; + line-height: 1.15; + letter-spacing: -0.02em; + color: var(--color-text-heading); +} + +.center-copy { + padding-top: 0; + width: 100%; + max-width: 52ch; + text-align: left; +} + +.center-copy p { + margin: 0 0 clamp(0.85rem, 2vw, 1.15rem); + font-size: clamp(0.92rem, 1.05vw, 1.02rem); + line-height: 1.62; + color: rgba(255, 255, 255, 0.72); + text-align: left; +} + +.center-copy p:last-child { + margin-bottom: 0; +} + +/* Data ownership: checklist (same chrome as .requirements-card) */ +.control-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0; + overflow: hidden; + background: var(--color-eclipse); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius-lg); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.control-grid > p { + margin: 0; + padding: clamp(1.1rem, 2.2vw, 1.45rem) clamp(1.2rem, 2.6vw, 1.75rem); + padding-left: clamp(3.05rem, 5vw, 3.85rem); + font-size: clamp(0.92rem, 1.05vw, 1.02rem); + font-weight: 600; + line-height: 1.62; + color: rgba(255, 255, 255, 0.72); + background: transparent; + border: 0; + border-radius: 0; + position: relative; + transition: background 0.22s ease; +} + +.control-grid > p:nth-child(odd) { + border-right: 1px solid rgba(255, 255, 255, 0.1); +} + +.control-grid > p:nth-child(n + 3) { + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.control-grid > p::before { + content: "✓"; + position: absolute; + left: clamp(1.1rem, 2.2vw, 1.5rem); + top: 50%; + transform: translateY(-50%); + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.38rem; + height: 1.38rem; + border-radius: 50%; + color: #050505; + background: var(--color-laser); + font-size: 0.72rem; + font-weight: 800; + line-height: 1; + box-shadow: + 0 0 0 1px rgba(0, 0, 0, 0.35), + 0 0 14px rgba(0, 255, 224, 0.28); +} + +.landing-section--control .center-hub { + margin-top: clamp(1rem, 2.5vw, 1.75rem); + margin-bottom: clamp(1.75rem, 4vw, 2.75rem); +} + +/* Requirements: individual cards (no hero image) */ +.requirements-cards { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: clamp(0.75rem, 2vw, 1.25rem); + width: 100%; +} + +.requirements-card { display: flex; flex-direction: column; - min-height: 100vh; + align-items: flex-start; + text-align: left; + min-width: 0; + padding: clamp(1.15rem, 2.4vw, 1.5rem); + background: var(--color-eclipse); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius-lg); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); + transition: + border-color 0.22s ease, + background 0.22s ease; } -main { - flex: 1; +@media (prefers-reduced-motion: reduce) { + .requirements-card { + transition: border-color 0.18s ease, background 0.18s ease; + } + + .why-tl-card { + transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; + } + + .restore-item { + transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; + } } -a { - color: inherit; - text-decoration: none; +.requirements-card__index { + margin: 0 0 var(--space-sm); + font-size: 0.68rem; + font-weight: 750; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--color-text-muted); + line-height: 1.2; } -img { - max-width: 100%; - height: auto; +.requirements-card__title { + margin: 0 0 var(--space-xs); + font-size: clamp(1.02rem, 1.65vw, 1.28rem); + font-weight: 750; + letter-spacing: -0.02em; + line-height: 1.15; + color: var(--color-text-heading); } -/* ---- Layout ---- */ -.container { - max-width: 1100px; - margin: 0 auto; - padding: 0 var(--space-xl); +.requirements-card__body { + margin: 0; + font-size: clamp(0.92rem, 1.05vw, 1.02rem); + line-height: 1.62; + color: rgba(255, 255, 255, 0.72); } -/* ---- Header ---- */ -.site-header { - background: var(--color-eclipse); - position: sticky; - top: 0; - z-index: 100; - border-bottom: 1px solid var(--color-border); +@media (max-width: 960px) { + .requirements-cards { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } -.header-inner { - max-width: 1100px; - margin: 0 auto; - height: 64px; - display: flex; - align-items: center; - justify-content: space-between; +@media (max-width: 520px) { + .requirements-cards { + grid-template-columns: 1fr; + } } -.site-logo { - display: flex; - align-items: center; - gap: var(--space-sm); - color: var(--color-text-heading); - font-weight: 600; - font-size: 1rem; - letter-spacing: -0.01em; +/* Final CTA */ +.landing-final { + text-align: center; + padding: 0 0 clamp(1rem, 3vw, 2rem); + margin-top: 0; + border-top: none; + background: transparent; } -.logo-icon { - color: var(--color-beam); +.landing-final h2 { + margin: 0 0 var(--space-xl); + font-size: clamp(1.75rem, 3vw, 2.75rem); + font-weight: 750; + letter-spacing: -0.03em; + line-height: 1.1; + color: var(--color-text-heading); } -.site-nav { - display: flex; - align-items: center; - gap: var(--space-lg); +.landing-final .hero-actions { + justify-content: center; } -.nav-divider { - width: 1px; - height: 18px; - background: var(--color-border-light); - margin: 0 calc(var(--space-sm) * -0.5); +/* ---- Home below hero: centered column (matches hero + nav rhythm) ---- */ +.home-content--centered { + display: flex; + flex-direction: column; + gap: var(--home-section-gap); } -.nav-link { - color: var(--color-text-secondary); - font-size: 0.875rem; - font-weight: 500; - padding: var(--space-xs) 0; - transition: color var(--transition); +.home-content--centered .landing-section { + padding: 0; } -.nav-link:hover { - color: var(--color-text-heading); +.home-content--centered .landing-section + .landing-section { + padding-top: 0; } -.nav-link.active { - color: var(--color-beam); +.home-content--centered .section-copy { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; } -.nav-link--pill { - color: var(--color-beam); - border: 1px solid var(--color-beam-subtle); - background: var(--color-beam-subtle); - border-radius: 999px; - padding: var(--space-xs) var(--space-md); - transition: background var(--transition), border-color var(--transition), color var(--transition); +.home-content--centered .section-copy h2 { + margin-left: auto; + margin-right: auto; + max-width: min(30ch, 92vw); } -.nav-link--pill:hover, -.nav-link--pill.active { - color: var(--color-beam); - background: rgba(0, 255, 224, 0.18); - border-color: var(--color-beam-dim); +.home-content--centered .landing-section--why .section-copy h2 { + max-width: min(32ch, 92vw); } -.nav-link--github { - display: inline-flex; +.home-content--centered .landing-section--why-scroll .section-copy--why-header { align-items: center; + text-align: center; } -.nav-link--github svg { - width: 20px; - height: 20px; +.home-content--centered .landing-section--why-scroll .section-copy--why-header h2 { + margin-left: auto; + margin-right: auto; + max-width: min(32ch, 92vw); + text-align: center; } -/* ---- Hero (Homepage) ---- */ -.hero { - background: var(--color-eclipse); - padding: var(--space-2xl) var(--space-xl) var(--space-2xl); - text-align: center; - border-bottom: 1px solid var(--color-border); +.home-content--centered .landing-section--why-scroll .section-copy--why-header .section-label { + margin-left: auto; + margin-right: auto; } -.hero-inner { - max-width: 600px; - margin: 0 auto; +.home-content--centered .why-timeline-aside__text { + text-align: left; } -.hero-title { - color: var(--color-text-heading); - font-size: 3rem; - font-weight: 700; - letter-spacing: -0.03em; - line-height: 1.1; - margin-bottom: var(--space-md); +.home-content--centered .landing-section--restore .section-copy h2, +.home-content--centered .landing-section--control .section-copy h2, +.home-content--centered .landing-section--requirements .section-copy h2 { + max-width: min(34ch, 92vw); } -.hero-tagline { - color: var(--color-text-secondary); - font-size: 1.125rem; - font-weight: 400; - margin-bottom: var(--space-xl); +.home-content--centered .section-label { + margin-left: auto; + margin-right: auto; } -.hero-actions { - display: flex; - gap: var(--space-md); - justify-content: center; +.home-content--centered .center-panel .section-label { + margin-left: 0; + margin-right: 0; } -.hero-cta { - display: inline-flex; - align-items: center; - gap: var(--space-sm); - padding: var(--space-sm) var(--space-xl); - font-weight: 600; - font-size: 0.95rem; - border-radius: var(--radius-md); - transition: background var(--transition), border-color var(--transition); - background: var(--color-beam); - color: #000; +.home-content--centered .why-narrative:not(.why-narrative--split) { + width: 100%; + max-width: none; + margin-left: 0; + margin-right: 0; + text-align: center; } -.hero-cta:hover { - background: var(--color-beam-dim); - color: #000; +.home-content--centered .why-narrative:not(.why-narrative--split)::before { + display: none; } -.hero-cta--secondary { - background: transparent; - color: var(--color-text-secondary); - border: 1px solid var(--color-border-light); +.home-content--centered .why-narrative:not(.why-narrative--split) p { + padding: 0; + margin-bottom: clamp(1.75rem, 4vw, 2.5rem); + text-align: center; } -.hero-cta--secondary:hover { - background: var(--color-surface); - border-color: var(--color-text-muted); - color: var(--color-text-heading); +.home-content--centered .why-narrative:not(.why-narrative--split) p:last-child { + margin-bottom: 0; } -.hero-cta--secondary svg { - width: 18px; - height: 18px; +.home-content--centered .why-narrative:not(.why-narrative--split) p::before, +.home-content--centered .why-narrative:not(.why-narrative--split) p::after { + display: none; } -.content-cta { - margin-top: var(--space-xl); - text-align: center; +.home-content--centered .restore-list { + margin-left: 0; + margin-right: 0; + max-width: none; + width: 100%; } -.article-body .hero-cta { - color: #000; - text-decoration: none; +.home-content--centered .restore-item { + text-align: left; } -.article-body .hero-cta:hover { - color: #000; +.home-content--centered .center-hub { + width: 100%; + max-width: none; + margin-left: 0; + margin-right: 0; } -/* ---- Home Content ---- */ -.home-content { - padding: var(--space-2xl) 0 var(--space-3xl); +.home-content--centered .center-panel { + display: flex; + flex-direction: column; + width: 100%; + max-width: none; + margin-left: 0; + margin-right: 0; + text-align: left; } -.home-content > .container > h2 { - font-size: 1.4rem; - font-weight: 600; - color: var(--color-text-heading); - letter-spacing: -0.01em; - margin-top: var(--space-sm); - margin-bottom: var(--space-sm); +.home-content--centered .center-panel__main { + align-items: flex-start; + text-align: left; } -.home-content > .container > p { - color: var(--color-text-secondary); - font-size: 0.95rem; - line-height: 1.75; - margin-bottom: var(--space-md); +.home-content--centered .center-panel__intro { + display: flex; + flex-direction: column; + align-items: flex-start; } -.home-content > .container > p a { - color: var(--color-beam); - text-decoration: underline; - text-underline-offset: 2px; - transition: color var(--transition); +.home-content--centered .center-copy { + padding-top: 0; + width: 100%; + text-align: left; } -.home-content > .container > p a:hover { - color: var(--color-beam-dim); +.home-content--centered .center-copy p { + text-align: left; } -/* ---- Home Intro ---- */ -.callout { - background: var(--color-umbra); - border: 1px solid var(--color-border); - padding: var(--space-lg) var(--space-xl); - border-radius: var(--radius-sm); - margin-bottom: var(--space-xl); +.home-content--centered .control-grid { + max-width: none; + margin-left: 0; + margin-right: 0; + width: 100%; } -.callout p { - color: var(--color-text-secondary); - font-size: 0.95rem; - line-height: 1.75; - margin: 0; +.home-content--centered .control-grid > p { + text-align: left; + padding: clamp(1.1rem, 2.2vw, 1.45rem) clamp(1.2rem, 2.6vw, 1.75rem); + padding-left: clamp(3.05rem, 5vw, 3.85rem); } -.callout-warning { - border: none; - border-left: 4px solid #D94040; - background: rgba(217, 64, 64, 0.06); +.home-content--centered .control-grid > p::before { + left: clamp(1.1rem, 2.2vw, 1.5rem); + top: 50%; + transform: translateY(-50%); } -.callout-label { - display: flex; - align-items: center; - gap: var(--space-sm); - color: #D94040; - font-weight: 600; - font-size: 0.9rem; - margin-bottom: var(--space-sm); +@media (max-width: 992px) { + .center-hub { + grid-template-columns: 1fr; + gap: var(--space-xl); + } + + .center-hub__orbit { + max-width: min(360px, 88vw); + margin-inline: auto; + } } -.home-intro { - margin-bottom: var(--space-xl); +@media (max-width: 720px) { + .restore-list { + grid-template-columns: 1fr; + } } -.home-intro p { - font-size: 1.05rem; - line-height: 1.8; - color: rgba(255, 255, 255, 0.75); +@media (max-width: 640px) { + .control-grid { + grid-template-columns: 1fr; + } } /* ---- Home Card Grid ---- */ @@ -339,7 +2726,7 @@ img { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); - margin-top: var(--space-xl); + margin-top: var(--space-2xl); margin-bottom: var(--space-xl); } @@ -352,11 +2739,6 @@ img { transition: border-color var(--transition), background var(--transition); } -.home-card:hover { - border-color: var(--color-beam); - background: var(--color-surface); -} - .home-card-icon { color: var(--color-beam); margin-bottom: var(--space-md); @@ -950,13 +3332,12 @@ img { /* ---- Footer ---- */ .site-footer { - background: var(--color-eclipse); - border-top: 1px solid var(--color-border); + background: transparent; padding: var(--space-xl); } .footer-inner { - max-width: 1100px; + max-width: var(--layout-max-width); margin: 0 auto; display: flex; justify-content: space-between; @@ -971,7 +3352,9 @@ img { .footer-links { display: flex; - gap: var(--space-lg); + flex-wrap: wrap; + justify-content: flex-end; + gap: var(--space-md) var(--space-lg); } .footer-link { @@ -989,7 +3372,7 @@ img { } .footer-link:hover { - color: var(--color-beam); + color: var(--color-laser); } /* ---- Pagefind Search ---- */ @@ -1066,18 +3449,33 @@ img { padding: 0 var(--space-md); } + .home-content > .container { + padding-left: var(--layout-pad-inline); + padding-right: var(--layout-pad-inline); + } + .hero { - padding: var(--space-2xl) var(--space-md); + padding: var(--space-2xl) var(--layout-pad-inline) 0; } .hero-title { - font-size: 2.25rem; + font-size: 3rem; + } + + .hero-tagline { + font-size: 1.1rem; } .home-grid { grid-template-columns: 1fr 1fr; } + .origin-step { + width: 100%; + max-width: none; + align-self: stretch; + } + .article-title { font-size: 1.5rem; } @@ -1088,6 +3486,10 @@ img { text-align: center; } + .footer-links { + justify-content: center; + } + .site-nav { gap: var(--space-md); } @@ -1099,7 +3501,16 @@ img { @media (max-width: 480px) { .hero-title { - font-size: 1.75rem; + font-size: 2.35rem; + } + + .hero-actions { + align-items: stretch; + flex-direction: column; + } + + .hero-cta { + justify-content: center; } .section-header h1 { diff --git a/content/_index.md b/content/_index.md index ebf62c1..e42473b 100644 --- a/content/_index.md +++ b/content/_index.md @@ -3,16 +3,123 @@ title = "PenumbraOS" description = "Make your Humane Ai Pin usable again" +++ -{{< callout >}} -Humane shut down all Ai Pin cloud services on February 28, 2025, without providing any local access or alternative usage paths. All Ai Pins became paperweights. -{{< /callout >}} +
+
+

What it restores

+

The original experience, under your control.

+
+
+
+ + +

Talk to your Pin

+

Hold a single finger to speak, just like the device was designed to work.

+
+
+ + +

Capture naturally

+

Double tap two fingers for a photo, or hold to capture video like before.

+
+
+ + +

Keep cosmOS familiar

+

PenumbraOS restores what the Humane cloud handled.

+
+
+
-{{< intro >}} -PenumbraOS is an open source jailbreak and reverse engineering platform to restore access to the Humane Ai Pin. It provides an exploit and a series of tools, including a custom Humane-like API server, to restore core functionality through the original apps on the device. -{{< /intro >}} +
+
+

Data ownership

+

No more mystery cloud.

+
+
+
+
+
+
+

Dashboard

+

A local Humane-style server, owned by you.

+
+
+

PenumbraOS runs a local replacement for Humane's cloud services. Center becomes the place where your memories appear automatically, including photos captured from the Pin.

+

Bring your own intelligence layer. You provide the endpoint, key, and model. You decide where the data goes.

+
+
+
+
+
+
+
+ Humane Ai Pin +
+ +
+
+ OpenAI +
+
+ Anthropic +
+
+ Google Gemini +
+
+ Custom API +
+
+
+
+
+
+

Your Pin can use the services you choose.

+

Your memories surface in Center.

+

Your API keys stay under your control.

+

Your hardware gets a second life.

+
+
-{{< cards >}} -{{< card title="Getting Started" url="/getting-started/" icon="rocket" description="Install PenumbraOS on your Ai Pin and get up and running" >}} -{{< card title="About" url="/about/" icon="cpu" description="Hardware and software documentation for the Humane Ai Pin" >}} -{{< card title="Archive" url="/archive/" icon="archive" description="Preserved official content from Humane websites and marketing" >}} -{{< /cards >}} +
+
+

Requirements

+

What you need to revive a Pin.

+
+
+
+ +

Humane Ai Pin

+

You need a Humane Ai Pin that you connect when the installer asks for the device.

+
+
+ +

Interposer

+

You need an interposer that touches the debug pads hidden under the bottom sticker.

+
+
+ +

Chrome or Edge

+

You need Chrome or Edge when you run the PenumbraOS installer inside the browser.

+
+
+ +

LLM API key

+

You need a model URL plus an API key and a model name from the LLM host you use.

+
+
+
+ +
+

Ready to make your Ai Pin usable again?

+
+ Get Started + Open Dashboard +
+
diff --git a/content/timeline/_index.md b/content/timeline/_index.md new file mode 100644 index 0000000..1647071 --- /dev/null +++ b/content/timeline/_index.md @@ -0,0 +1,84 @@ ++++ +title = "The Journey" +description = "How PenumbraOS brought the Humane Ai Pin back to life." ++++ + +
+
+
+
+
+

The Journey

+

The Ai Pin still works.
The cloud around it disappeared.

+
+
+
+ + +
+
+

February 28, 2025

+

The shutdown

+

Humane shut down the cloud services every Ai Pin depended on. Devices that once felt like the future went dark in people's hands, with no local access and no official path forward.

+
+
+ +
+ +
+ +
+
+

March 1, 2025

+

The work began

+

The next morning, Adam started pulling at the thread. Not because the answer was obvious, but because the device was still there, still capable, and still worth fighting for.

+
+
+ +
+
+

March 21, 2025

+

The first door opened

+

Weeks of quiet work turned into the first real breakthrough. The Ai Pin was no longer a sealed object. It could be reached, studied, and understood on its own terms.

+
+
+ +
+ +
+ +
+
+

April 10, 2026

+

The breakthrough

+

The final barrier fell. What had been fragments of research became a working path back to something familiar: an Ai Pin that could respond, connect, and feel alive again.

+
+
+ +
+
+

May 1, 2026

+

PenumbraOS arrived

+

The work became something anyone could use. PenumbraOS gave the community a way to bring the Ai Pin back from the edge, and turned abandoned hardware into a platform with a second life.

+
+
+ +
+ +
+
+
+
diff --git a/hugo.toml b/hugo.toml index e899ea6..fc72eca 100644 --- a/hugo.toml +++ b/hugo.toml @@ -17,23 +17,17 @@ title = 'PenumbraOS' [params.footer] note = 'PenumbraOS is not affiliated with Humane Inc. or HP Inc. The Ai Pin trademark and archived content remains property of HP.' - [[params.footer.links]] - name = 'GitHub' - url = 'https://github.com/PenumbraOS/' - [[params.footer.links]] - name = 'Blog' - url = 'https://writings.agg.im/' [menu] [[menu.main]] identifier = 'center' - name = 'Center' + name = 'Dashboard' url = '/center/' pageRef = '/center' weight = 10 [[menu.main]] identifier = 'getting-started' - name = 'Getting Started' + name = 'Get Started' url = '/getting-started/' pageRef = '/getting-started' weight = 20 @@ -45,7 +39,7 @@ title = 'PenumbraOS' weight = 30 [[menu.main]] identifier = 'archive' - name = 'Humane Archive' + name = 'Archive' url = '/archive/' pageRef = '/archive' weight = 40 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index dfbd106..d29f166 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,14 +5,14 @@ {{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }} - + {{ $css := resources.Get "css/main.css" }} {{ block "head" . }}{{ end }} - + {{ partial "header.html" . }}
@@ -32,6 +32,30 @@ resetStyles: false }); } + + var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + var whyTimeline = document.querySelector('.landing-section--why-scroll .why-timeline'); + if (whyTimeline) { + var updateWhyTimelineLine = function() { + if (reducedMotion) { + whyTimeline.style.setProperty('--why-timeline-progress', '1'); + return; + } + var rect = whyTimeline.getBoundingClientRect(); + var viewport = window.innerHeight || document.documentElement.clientHeight; + var h = rect.height; + if (h <= 0) return; + var denom = viewport + h; + var p = (viewport - rect.top) / denom; + p = Math.max(0, Math.min(1, p)); + whyTimeline.style.setProperty('--why-timeline-progress', p.toFixed(4)); + }; + updateWhyTimelineLine(); + window.addEventListener('scroll', updateWhyTimelineLine, { passive: true }); + window.addEventListener('resize', updateWhyTimelineLine); + } + }); diff --git a/layouts/index.html b/layouts/index.html index bd86f4c..4e400e2 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -14,9 +14,12 @@

{{ .Site.Title }}

> +
+ {{ partial "hero-center-preview.html" . }} +
-
{{ .Content }}
+
{{ .Content }}
{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index e647526..f5718e0 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -5,12 +5,9 @@

{{ . }}

{{ end }} - {{ with .Site.Params.footer.links }}
- {{ range . }} - {{ if eq .name "GitHub" }}{{ partial "icons/github.html" }}{{ end }}{{ .name }} - {{ end }} + The Journey + {{ partial "icons/github.html" }}GitHub
- {{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 8e5bd61..eb1610a 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,19 +1,21 @@
diff --git a/layouts/partials/hero-center-preview.html b/layouts/partials/hero-center-preview.html new file mode 100644 index 0000000..03ed11b --- /dev/null +++ b/layouts/partials/hero-center-preview.html @@ -0,0 +1,46 @@ +
+
+
+ +

Remember to follow up with the team about sales numbers.

+

6:50am

+
+
+ +

Call

+

Hannah

+

7:01am - 1 min

+
+
+ +

Add coconut milk and apples to my grocery list.

+

7:35am

+
+
+ +
+ +
+

Biking throughToronto, Canada

+

Yesterday

+
+
+
+
+ +

Call

+

Terri

+

7:12am - 1 min

+
+
+ +
+ +
+

Afternoon hike at
Rattlesnake Point

+

Saturday

+
+
+
+
+
diff --git a/layouts/shortcodes/callout.html b/layouts/shortcodes/callout.html index 892908f..99b19bb 100644 --- a/layouts/shortcodes/callout.html +++ b/layouts/shortcodes/callout.html @@ -11,5 +11,5 @@ Warning {{ end }} -

{{ .Inner | markdownify }}

+
{{ .Inner | markdownify }}
diff --git a/layouts/timeline/list.html b/layouts/timeline/list.html new file mode 100644 index 0000000..51c2248 --- /dev/null +++ b/layouts/timeline/list.html @@ -0,0 +1,5 @@ +{{ define "main" }} +
+ {{ .Content }} +
+{{ end }} diff --git a/static/img/dashboard-capture-bike.png b/static/img/dashboard-capture-bike.png new file mode 100644 index 0000000..c281085 Binary files /dev/null and b/static/img/dashboard-capture-bike.png differ diff --git a/static/img/dashboard-capture-hike.png b/static/img/dashboard-capture-hike.png new file mode 100644 index 0000000..197ea39 Binary files /dev/null and b/static/img/dashboard-capture-hike.png differ diff --git a/static/img/humane-pin-white.png b/static/img/humane-pin-white.png new file mode 100644 index 0000000..9be902f Binary files /dev/null and b/static/img/humane-pin-white.png differ diff --git a/static/img/humane-pins.png b/static/img/humane-pins.png new file mode 100644 index 0000000..f8f1e45 Binary files /dev/null and b/static/img/humane-pins.png differ diff --git a/static/img/logo.png b/static/img/logo.png index 36f4678..0abfbc8 100644 Binary files a/static/img/logo.png and b/static/img/logo.png differ diff --git a/static/img/penumbra-logo-original.png b/static/img/penumbra-logo-original.png new file mode 100644 index 0000000..0abfbc8 Binary files /dev/null and b/static/img/penumbra-logo-original.png differ diff --git a/static/img/penumbra-logo-square.png b/static/img/penumbra-logo-square.png new file mode 100644 index 0000000..4933c37 Binary files /dev/null and b/static/img/penumbra-logo-square.png differ diff --git a/static/img/penumbra-logo-yellow.png b/static/img/penumbra-logo-yellow.png new file mode 100644 index 0000000..0abfbc8 Binary files /dev/null and b/static/img/penumbra-logo-yellow.png differ diff --git a/static/img/providers/anthropic.svg b/static/img/providers/anthropic.svg new file mode 100644 index 0000000..47aeb6a --- /dev/null +++ b/static/img/providers/anthropic.svg @@ -0,0 +1 @@ + diff --git a/static/img/providers/custom-api.svg b/static/img/providers/custom-api.svg new file mode 100644 index 0000000..33712ea --- /dev/null +++ b/static/img/providers/custom-api.svg @@ -0,0 +1,34 @@ + diff --git a/static/img/providers/gemini.svg b/static/img/providers/gemini.svg new file mode 100644 index 0000000..60b6698 --- /dev/null +++ b/static/img/providers/gemini.svg @@ -0,0 +1,12 @@ + diff --git a/static/img/providers/openai.svg b/static/img/providers/openai.svg new file mode 100644 index 0000000..51ad297 --- /dev/null +++ b/static/img/providers/openai.svg @@ -0,0 +1 @@ + diff --git a/static/img/requirements-penumbra-palm.png b/static/img/requirements-penumbra-palm.png new file mode 100644 index 0000000..270e44d Binary files /dev/null and b/static/img/requirements-penumbra-palm.png differ