Upload 4 files
Browse files
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
-
pinned: false
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Brægn
|
| 3 |
+
emoji: "🧠"
|
| 4 |
+
colorFrom: indigo
|
| 5 |
+
colorTo: purple
|
| 6 |
sdk: static
|
|
|
|
| 7 |
---
|
| 8 |
|
| 9 |
+
# Brægn
|
| 10 |
+
|
| 11 |
+
This Space is the public organization portal for **Brægn — AI Research & Engineering**.
|
| 12 |
+
|
| 13 |
+
The interactive organization page is implemented in `index.html`, with styling in `style.css` and behavior in `script.js`.
|
index.html
ADDED
|
@@ -0,0 +1,238 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!doctype html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="utf-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
| 6 |
+
<meta name="description" content="Brægn — AI research and engineering. Building intelligent systems from first principles.">
|
| 7 |
+
<meta name="theme-color" content="#f4f3ee">
|
| 8 |
+
<title>Brægn — AI Research & Engineering</title>
|
| 9 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 10 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 11 |
+
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap" rel="stylesheet">
|
| 12 |
+
<link rel="stylesheet" href="./style.css">
|
| 13 |
+
</head>
|
| 14 |
+
<body>
|
| 15 |
+
<div class="noise" aria-hidden="true"></div>
|
| 16 |
+
|
| 17 |
+
<header class="site-header">
|
| 18 |
+
<a class="brand" href="#top" aria-label="Brægn home">
|
| 19 |
+
<span class="brand-mark">æ</span>
|
| 20 |
+
<span class="brand-name">Brægn</span>
|
| 21 |
+
</a>
|
| 22 |
+
|
| 23 |
+
<nav class="nav" aria-label="Primary navigation">
|
| 24 |
+
<a href="#research">Research</a>
|
| 25 |
+
<a href="#releases">Releases</a>
|
| 26 |
+
<a href="#principles">Principles</a>
|
| 27 |
+
<a href="#connect">Connect</a>
|
| 28 |
+
</nav>
|
| 29 |
+
|
| 30 |
+
<div class="header-actions">
|
| 31 |
+
<a class="nav-button" href="https://huggingface.co/BraegnAI" target="_blank" rel="noopener noreferrer">Hugging Face ↗</a>
|
| 32 |
+
<button class="theme-toggle" id="themeToggle" type="button" aria-label="Toggle theme" aria-pressed="false">
|
| 33 |
+
<span class="theme-icon" aria-hidden="true">◐</span>
|
| 34 |
+
</button>
|
| 35 |
+
<button class="menu-toggle" id="menuToggle" type="button" aria-label="Open menu" aria-expanded="false">☰</button>
|
| 36 |
+
</div>
|
| 37 |
+
</header>
|
| 38 |
+
|
| 39 |
+
<main id="top">
|
| 40 |
+
<section class="hero section">
|
| 41 |
+
<div class="hero-grid">
|
| 42 |
+
<div class="hero-copy reveal">
|
| 43 |
+
<p class="eyebrow"><span class="status-dot"></span> AI RESEARCH & ENGINEERING</p>
|
| 44 |
+
<h1>Building intelligent systems <em>from first principles.</em></h1>
|
| 45 |
+
<p class="hero-lede">
|
| 46 |
+
Brægn explores the foundations of capable, reliable, and useful AI —
|
| 47 |
+
from models and reasoning to agents, infrastructure, and evaluation.
|
| 48 |
+
</p>
|
| 49 |
+
<div class="hero-actions">
|
| 50 |
+
<a class="button button-primary" href="#research">Explore research <span>↓</span></a>
|
| 51 |
+
<a class="button button-quiet" href="https://huggingface.co/BraegnAI" target="_blank" rel="noopener noreferrer">View organization ↗</a>
|
| 52 |
+
</div>
|
| 53 |
+
</div>
|
| 54 |
+
|
| 55 |
+
<div class="hero-visual reveal reveal-delay" aria-label="Brægn system architecture visualization">
|
| 56 |
+
<div class="orbit orbit-one"></div>
|
| 57 |
+
<div class="orbit orbit-two"></div>
|
| 58 |
+
<div class="orbit orbit-three"></div>
|
| 59 |
+
<div class="core">
|
| 60 |
+
<span class="core-symbol">æ</span>
|
| 61 |
+
<span class="core-label">BRÆGN</span>
|
| 62 |
+
</div>
|
| 63 |
+
<div class="signal signal-a">MODEL</div>
|
| 64 |
+
<div class="signal signal-b">REASON</div>
|
| 65 |
+
<div class="signal signal-c">ACT</div>
|
| 66 |
+
<div class="signal signal-d">VERIFY</div>
|
| 67 |
+
</div>
|
| 68 |
+
</div>
|
| 69 |
+
|
| 70 |
+
<div class="hero-meta reveal">
|
| 71 |
+
<div><span>01</span><strong>Research</strong></div>
|
| 72 |
+
<div><span>02</span><strong>Engineering</strong></div>
|
| 73 |
+
<div><span>03</span><strong>Evaluation</strong></div>
|
| 74 |
+
<div><span>04</span><strong>Deployment</strong></div>
|
| 75 |
+
</div>
|
| 76 |
+
</section>
|
| 77 |
+
|
| 78 |
+
<section class="manifesto section" id="principles">
|
| 79 |
+
<div class="section-kicker">01 — THESIS</div>
|
| 80 |
+
<div class="manifesto-content">
|
| 81 |
+
<p class="manifesto-label">The work</p>
|
| 82 |
+
<h2>More than bigger models.<br><em>Better systems.</em></h2>
|
| 83 |
+
<p>
|
| 84 |
+
Brægn treats intelligence as a complete computational system:
|
| 85 |
+
<strong>data → architecture → training → reasoning → tools → memory → evaluation → deployment.</strong>
|
| 86 |
+
We investigate how these layers interact, and how they can be engineered into systems that are useful in the real world.
|
| 87 |
+
</p>
|
| 88 |
+
</div>
|
| 89 |
+
</section>
|
| 90 |
+
|
| 91 |
+
<section class="section" id="research">
|
| 92 |
+
<div class="section-heading reveal">
|
| 93 |
+
<div>
|
| 94 |
+
<div class="section-kicker">02 — RESEARCH</div>
|
| 95 |
+
<h2>Where we work.</h2>
|
| 96 |
+
</div>
|
| 97 |
+
<p>Research directions evolve as evidence accumulates.</p>
|
| 98 |
+
</div>
|
| 99 |
+
|
| 100 |
+
<div class="research-grid">
|
| 101 |
+
<article class="research-card reveal">
|
| 102 |
+
<span class="card-number">01</span>
|
| 103 |
+
<span class="card-icon">◌</span>
|
| 104 |
+
<h3>Foundation Models</h3>
|
| 105 |
+
<p>Architectures, pretraining, adaptation, efficient scaling, and specialized intelligence.</p>
|
| 106 |
+
<div class="tags"><span>LLMs</span><span>Training</span><span>Architecture</span></div>
|
| 107 |
+
</article>
|
| 108 |
+
|
| 109 |
+
<article class="research-card reveal reveal-delay">
|
| 110 |
+
<span class="card-number">02</span>
|
| 111 |
+
<span class="card-icon">◉</span>
|
| 112 |
+
<h3>Multimodal AI</h3>
|
| 113 |
+
<p>Systems that connect language, vision, documents, and other modalities into coherent representations.</p>
|
| 114 |
+
<div class="tags"><span>Vision</span><span>Documents</span><span>Fusion</span></div>
|
| 115 |
+
</article>
|
| 116 |
+
|
| 117 |
+
<article class="research-card reveal">
|
| 118 |
+
<span class="card-number">03</span>
|
| 119 |
+
<span class="card-icon">⌁</span>
|
| 120 |
+
<h3>Reasoning</h3>
|
| 121 |
+
<p>Inference, planning, problem solving, verification, and reliable long-horizon execution.</p>
|
| 122 |
+
<div class="tags"><span>Planning</span><span>Inference</span><span>Verification</span></div>
|
| 123 |
+
</article>
|
| 124 |
+
|
| 125 |
+
<article class="research-card reveal reveal-delay">
|
| 126 |
+
<span class="card-number">04</span>
|
| 127 |
+
<span class="card-icon">↗</span>
|
| 128 |
+
<h3>AI Agents</h3>
|
| 129 |
+
<p>Tool use, memory, orchestration, environment interaction, and autonomous workflows.</p>
|
| 130 |
+
<div class="tags"><span>Tools</span><span>Memory</span><span>Agents</span></div>
|
| 131 |
+
</article>
|
| 132 |
+
|
| 133 |
+
<article class="research-card reveal">
|
| 134 |
+
<span class="card-number">05</span>
|
| 135 |
+
<span class="card-icon">▧</span>
|
| 136 |
+
<h3>Infrastructure</h3>
|
| 137 |
+
<p>Training systems, inference, data pipelines, observability, and developer infrastructure.</p>
|
| 138 |
+
<div class="tags"><span>Inference</span><span>Systems</span><span>Data</span></div>
|
| 139 |
+
</article>
|
| 140 |
+
|
| 141 |
+
<article class="research-card reveal reveal-delay">
|
| 142 |
+
<span class="card-number">06</span>
|
| 143 |
+
<span class="card-icon">✓</span>
|
| 144 |
+
<h3>Evaluation</h3>
|
| 145 |
+
<p>Capability, reliability, robustness, safety, reproducibility, and honest measurement.</p>
|
| 146 |
+
<div class="tags"><span>Benchmarks</span><span>Reliability</span><span>Safety</span></div>
|
| 147 |
+
</article>
|
| 148 |
+
</div>
|
| 149 |
+
</section>
|
| 150 |
+
|
| 151 |
+
<section class="release-section section" id="releases">
|
| 152 |
+
<div class="section-heading reveal">
|
| 153 |
+
<div>
|
| 154 |
+
<div class="section-kicker">03 — PUBLIC WORK</div>
|
| 155 |
+
<h2>Open when ready.</h2>
|
| 156 |
+
</div>
|
| 157 |
+
<p>We publish artifacts with documentation, limitations, and evaluation context.</p>
|
| 158 |
+
</div>
|
| 159 |
+
|
| 160 |
+
<div class="release-grid">
|
| 161 |
+
<a class="release-card reveal" href="https://huggingface.co/BraegnAI/models" target="_blank" rel="noopener noreferrer">
|
| 162 |
+
<div class="release-top"><span>MODELS</span><span>↗</span></div>
|
| 163 |
+
<strong>Foundation & specialized models</strong>
|
| 164 |
+
<p>Public releases will appear here as they reach an appropriate level of maturity.</p>
|
| 165 |
+
<span class="release-status">NO PUBLIC RELEASES YET</span>
|
| 166 |
+
</a>
|
| 167 |
+
|
| 168 |
+
<a class="release-card reveal reveal-delay" href="https://huggingface.co/BraegnAI/datasets" target="_blank" rel="noopener noreferrer">
|
| 169 |
+
<div class="release-top"><span>DATASETS</span><span>↗</span></div>
|
| 170 |
+
<strong>Research & evaluation data</strong>
|
| 171 |
+
<p>Datasets will include documentation describing provenance, scope, and intended use.</p>
|
| 172 |
+
<span class="release-status">NO PUBLIC RELEASES YET</span>
|
| 173 |
+
</a>
|
| 174 |
+
|
| 175 |
+
<a class="release-card reveal" href="https://huggingface.co/BraegnAI" target="_blank" rel="noopener noreferrer">
|
| 176 |
+
<div class="release-top"><span>SPACES</span><span>↗</span></div>
|
| 177 |
+
<strong>Interactive experiments</strong>
|
| 178 |
+
<p>Demonstrations and research interfaces will live alongside the models they showcase.</p>
|
| 179 |
+
<span class="release-status">IN DEVELOPMENT</span>
|
| 180 |
+
</a>
|
| 181 |
+
</div>
|
| 182 |
+
</section>
|
| 183 |
+
|
| 184 |
+
<section class="quote-section section">
|
| 185 |
+
<div class="quote-mark">“</div>
|
| 186 |
+
<blockquote class="reveal">
|
| 187 |
+
Build privately. Verify rigorously.<br>
|
| 188 |
+
<em>Release responsibly.</em>
|
| 189 |
+
</blockquote>
|
| 190 |
+
</section>
|
| 191 |
+
|
| 192 |
+
<section class="section principles-section">
|
| 193 |
+
<div class="section-kicker">04 — PRINCIPLES</div>
|
| 194 |
+
<div class="principles-list">
|
| 195 |
+
<div class="principle reveal">
|
| 196 |
+
<span>01</span>
|
| 197 |
+
<div><h3>Sovereignty first.</h3><p>Build fundamental capabilities rather than depending entirely on opaque systems.</p></div>
|
| 198 |
+
</div>
|
| 199 |
+
<div class="principle reveal">
|
| 200 |
+
<span>02</span>
|
| 201 |
+
<div><h3>Verified before shipped.</h3><p>Capability claims should be backed by evaluation, not presentation.</p></div>
|
| 202 |
+
</div>
|
| 203 |
+
<div class="principle reveal">
|
| 204 |
+
<span>03</span>
|
| 205 |
+
<div><h3>Foundation before scale.</h3><p>Strong fundamentals matter more than premature scaling.</p></div>
|
| 206 |
+
</div>
|
| 207 |
+
<div class="principle reveal">
|
| 208 |
+
<span>04</span>
|
| 209 |
+
<div><h3>Research meets engineering.</h3><p>Ideas become useful when they survive implementation and measurement.</p></div>
|
| 210 |
+
</div>
|
| 211 |
+
</div>
|
| 212 |
+
</section>
|
| 213 |
+
|
| 214 |
+
<section class="connect section" id="connect">
|
| 215 |
+
<div class="connect-panel reveal">
|
| 216 |
+
<div>
|
| 217 |
+
<div class="section-kicker">05 — CONNECT</div>
|
| 218 |
+
<h2>Follow the work.</h2>
|
| 219 |
+
<p>Research, releases, experiments, and engineering notes will be published as Brægn develops.</p>
|
| 220 |
+
</div>
|
| 221 |
+
<div class="connect-links">
|
| 222 |
+
<a href="https://huggingface.co/BraegnAI" target="_blank" rel="noopener noreferrer"><span>Hugging Face</span><b>↗</b></a>
|
| 223 |
+
<a href="https://github.com/BraegnAI" target="_blank" rel="noopener noreferrer"><span>GitHub</span><b>↗</b></a>
|
| 224 |
+
<a href="https://x.com/BraegnAI" target="_blank" rel="noopener noreferrer"><span>X / Twitter</span><b>↗</b></a>
|
| 225 |
+
</div>
|
| 226 |
+
</div>
|
| 227 |
+
</section>
|
| 228 |
+
</main>
|
| 229 |
+
|
| 230 |
+
<footer class="footer">
|
| 231 |
+
<div class="footer-brand"><span class="brand-mark">æ</span><strong>Brægn</strong></div>
|
| 232 |
+
<p>Sovereignty first. Verified before shipped. Foundation before scale.</p>
|
| 233 |
+
<span id="year"></span>
|
| 234 |
+
</footer>
|
| 235 |
+
|
| 236 |
+
<script src="./script.js" defer></script>
|
| 237 |
+
</body>
|
| 238 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
(() => {
|
| 2 |
+
"use strict";
|
| 3 |
+
|
| 4 |
+
const root = document.documentElement;
|
| 5 |
+
const body = document.body;
|
| 6 |
+
const header = document.querySelector(".site-header");
|
| 7 |
+
const menuToggle = document.getElementById("menuToggle");
|
| 8 |
+
const themeToggle = document.getElementById("themeToggle");
|
| 9 |
+
const year = document.getElementById("year");
|
| 10 |
+
|
| 11 |
+
// Theme ---------------------------------------------------------
|
| 12 |
+
const storedTheme = localStorage.getItem("braegn-theme");
|
| 13 |
+
const preferredDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
| 14 |
+
const initialTheme = storedTheme || (preferredDark ? "dark" : "light");
|
| 15 |
+
|
| 16 |
+
function applyTheme(theme) {
|
| 17 |
+
if (theme === "dark") {
|
| 18 |
+
root.setAttribute("data-theme", "dark");
|
| 19 |
+
themeToggle?.setAttribute("aria-pressed", "true");
|
| 20 |
+
if (themeToggle) themeToggle.querySelector(".theme-icon").textContent = "☼";
|
| 21 |
+
} else {
|
| 22 |
+
root.removeAttribute("data-theme");
|
| 23 |
+
themeToggle?.setAttribute("aria-pressed", "false");
|
| 24 |
+
if (themeToggle) themeToggle.querySelector(".theme-icon").textContent = "◐";
|
| 25 |
+
}
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
applyTheme(initialTheme);
|
| 29 |
+
|
| 30 |
+
themeToggle?.addEventListener("click", () => {
|
| 31 |
+
const next = root.getAttribute("data-theme") === "dark" ? "light" : "dark";
|
| 32 |
+
localStorage.setItem("braegn-theme", next);
|
| 33 |
+
applyTheme(next);
|
| 34 |
+
});
|
| 35 |
+
|
| 36 |
+
// Mobile navigation ---------------------------------------------
|
| 37 |
+
menuToggle?.addEventListener("click", () => {
|
| 38 |
+
const open = header.classList.toggle("menu-open");
|
| 39 |
+
body.classList.toggle("menu-open", open);
|
| 40 |
+
menuToggle.setAttribute("aria-expanded", String(open));
|
| 41 |
+
menuToggle.textContent = open ? "×" : "☰";
|
| 42 |
+
});
|
| 43 |
+
|
| 44 |
+
document.querySelectorAll(".nav a").forEach((link) => {
|
| 45 |
+
link.addEventListener("click", () => {
|
| 46 |
+
header.classList.remove("menu-open");
|
| 47 |
+
body.classList.remove("menu-open");
|
| 48 |
+
menuToggle?.setAttribute("aria-expanded", "false");
|
| 49 |
+
if (menuToggle) menuToggle.textContent = "☰";
|
| 50 |
+
});
|
| 51 |
+
});
|
| 52 |
+
|
| 53 |
+
// Reveal-on-scroll ----------------------------------------------
|
| 54 |
+
const revealItems = document.querySelectorAll(".reveal");
|
| 55 |
+
|
| 56 |
+
if ("IntersectionObserver" in window) {
|
| 57 |
+
const observer = new IntersectionObserver((entries, obs) => {
|
| 58 |
+
entries.forEach((entry) => {
|
| 59 |
+
if (!entry.isIntersecting) return;
|
| 60 |
+
entry.target.classList.add("is-visible");
|
| 61 |
+
obs.unobserve(entry.target);
|
| 62 |
+
});
|
| 63 |
+
}, { threshold: 0.12, rootMargin: "0px 0px -35px 0px" });
|
| 64 |
+
|
| 65 |
+
revealItems.forEach((item) => observer.observe(item));
|
| 66 |
+
} else {
|
| 67 |
+
revealItems.forEach((item) => item.classList.add("is-visible"));
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
// Dynamic year ---------------------------------------------------
|
| 71 |
+
if (year) year.textContent = new Date().getFullYear();
|
| 72 |
+
|
| 73 |
+
// Respect reduced-motion preferences ---------------------------
|
| 74 |
+
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
| 75 |
+
document.querySelectorAll(".reveal").forEach((item) => {
|
| 76 |
+
item.classList.add("is-visible");
|
| 77 |
+
item.style.transition = "none";
|
| 78 |
+
});
|
| 79 |
+
document.querySelectorAll(".orbit").forEach((item) => {
|
| 80 |
+
item.style.animation = "none";
|
| 81 |
+
});
|
| 82 |
+
}
|
| 83 |
+
})();
|
style.css
ADDED
|
@@ -0,0 +1,322 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
:root {
|
| 2 |
+
--canvas: #f4f3ee;
|
| 3 |
+
--paper: #faf9f5;
|
| 4 |
+
--ink: #171717;
|
| 5 |
+
--muted: #6d6b66;
|
| 6 |
+
--line: rgba(23, 23, 23, .13);
|
| 7 |
+
--line-strong: rgba(23, 23, 23, .23);
|
| 8 |
+
--accent: #6d4aff;
|
| 9 |
+
--accent-soft: rgba(109, 74, 255, .09);
|
| 10 |
+
--warm: #de7356;
|
| 11 |
+
--shadow: 0 18px 60px rgba(23, 23, 23, .07);
|
| 12 |
+
--radius: 22px;
|
| 13 |
+
--max: 1220px;
|
| 14 |
+
}
|
| 15 |
+
|
| 16 |
+
[data-theme="dark"] {
|
| 17 |
+
--canvas: #11110f;
|
| 18 |
+
--paper: #171714;
|
| 19 |
+
--ink: #f1efe7;
|
| 20 |
+
--muted: #aaa79f;
|
| 21 |
+
--line: rgba(241, 239, 231, .12);
|
| 22 |
+
--line-strong: rgba(241, 239, 231, .24);
|
| 23 |
+
--accent: #9a83ff;
|
| 24 |
+
--accent-soft: rgba(154, 131, 255, .12);
|
| 25 |
+
--warm: #e78a70;
|
| 26 |
+
--shadow: 0 18px 60px rgba(0, 0, 0, .28);
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
* { box-sizing: border-box; }
|
| 30 |
+
html { scroll-behavior: smooth; }
|
| 31 |
+
body {
|
| 32 |
+
margin: 0;
|
| 33 |
+
background: var(--canvas);
|
| 34 |
+
color: var(--ink);
|
| 35 |
+
font-family: "DM Sans", system-ui, sans-serif;
|
| 36 |
+
line-height: 1.55;
|
| 37 |
+
transition: background .3s ease, color .3s ease;
|
| 38 |
+
}
|
| 39 |
+
body.menu-open { overflow: hidden; }
|
| 40 |
+
a { color: inherit; text-decoration: none; }
|
| 41 |
+
button { font: inherit; color: inherit; }
|
| 42 |
+
|
| 43 |
+
.noise {
|
| 44 |
+
position: fixed;
|
| 45 |
+
inset: 0;
|
| 46 |
+
pointer-events: none;
|
| 47 |
+
z-index: 50;
|
| 48 |
+
opacity: .025;
|
| 49 |
+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
.site-header {
|
| 53 |
+
width: min(calc(100% - 48px), var(--max));
|
| 54 |
+
margin: 0 auto;
|
| 55 |
+
min-height: 78px;
|
| 56 |
+
display: flex;
|
| 57 |
+
align-items: center;
|
| 58 |
+
justify-content: space-between;
|
| 59 |
+
gap: 28px;
|
| 60 |
+
border-bottom: 1px solid var(--line);
|
| 61 |
+
}
|
| 62 |
+
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.03em; }
|
| 63 |
+
.brand-mark {
|
| 64 |
+
width: 30px; height: 30px; display: grid; place-items: center;
|
| 65 |
+
border: 1px solid var(--line-strong); border-radius: 50%;
|
| 66 |
+
font-family: "Playfair Display", serif; font-size: 18px;
|
| 67 |
+
}
|
| 68 |
+
.brand-name { font-size: 20px; }
|
| 69 |
+
|
| 70 |
+
.nav { display: flex; gap: 26px; margin-left: auto; }
|
| 71 |
+
.nav a, .nav-button {
|
| 72 |
+
font: 500 13px "DM Mono", monospace;
|
| 73 |
+
color: var(--muted);
|
| 74 |
+
transition: color .2s ease;
|
| 75 |
+
}
|
| 76 |
+
.nav a:hover, .nav-button:hover { color: var(--ink); }
|
| 77 |
+
|
| 78 |
+
.header-actions { display: flex; align-items: center; gap: 9px; }
|
| 79 |
+
.nav-button {
|
| 80 |
+
border: 1px solid var(--line);
|
| 81 |
+
padding: 9px 12px;
|
| 82 |
+
border-radius: 999px;
|
| 83 |
+
}
|
| 84 |
+
.theme-toggle, .menu-toggle {
|
| 85 |
+
width: 38px; height: 38px; border: 1px solid var(--line);
|
| 86 |
+
background: transparent; border-radius: 50%; cursor: pointer;
|
| 87 |
+
display: grid; place-items: center;
|
| 88 |
+
}
|
| 89 |
+
.theme-toggle:hover, .menu-toggle:hover { border-color: var(--line-strong); }
|
| 90 |
+
.menu-toggle { display: none; border-radius: 10px; }
|
| 91 |
+
|
| 92 |
+
.section {
|
| 93 |
+
width: min(calc(100% - 48px), var(--max));
|
| 94 |
+
margin: 0 auto;
|
| 95 |
+
padding: 110px 0;
|
| 96 |
+
}
|
| 97 |
+
.hero { padding-top: 92px; padding-bottom: 48px; }
|
| 98 |
+
.hero-grid {
|
| 99 |
+
min-height: 620px;
|
| 100 |
+
display: grid;
|
| 101 |
+
grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
|
| 102 |
+
align-items: center;
|
| 103 |
+
gap: 70px;
|
| 104 |
+
}
|
| 105 |
+
.eyebrow, .section-kicker, .release-status, .tags, .hero-meta {
|
| 106 |
+
font-family: "DM Mono", monospace;
|
| 107 |
+
}
|
| 108 |
+
.eyebrow {
|
| 109 |
+
display: flex; align-items: center; gap: 9px;
|
| 110 |
+
font-size: 11px; letter-spacing: .11em; color: var(--muted);
|
| 111 |
+
margin: 0 0 26px;
|
| 112 |
+
}
|
| 113 |
+
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warm) 12%, transparent); }
|
| 114 |
+
h1, h2, h3, p { margin-top: 0; }
|
| 115 |
+
h1 {
|
| 116 |
+
max-width: 780px;
|
| 117 |
+
font-size: clamp(54px, 7vw, 92px);
|
| 118 |
+
line-height: .96;
|
| 119 |
+
letter-spacing: -.065em;
|
| 120 |
+
margin-bottom: 30px;
|
| 121 |
+
font-weight: 600;
|
| 122 |
+
}
|
| 123 |
+
h1 em, h2 em { font-family: "Playfair Display", serif; font-weight: 500; }
|
| 124 |
+
.hero-lede { max-width: 650px; font-size: 18px; color: var(--muted); line-height: 1.7; }
|
| 125 |
+
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
|
| 126 |
+
.button {
|
| 127 |
+
display: inline-flex; align-items: center; gap: 15px;
|
| 128 |
+
padding: 13px 18px; border-radius: 999px;
|
| 129 |
+
border: 1px solid var(--line); font-weight: 600; font-size: 14px;
|
| 130 |
+
transition: transform .2s ease, background .2s ease, border-color .2s ease;
|
| 131 |
+
}
|
| 132 |
+
.button:hover { transform: translateY(-2px); border-color: var(--line-strong); }
|
| 133 |
+
.button-primary { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
|
| 134 |
+
.button-quiet { background: transparent; }
|
| 135 |
+
|
| 136 |
+
.hero-visual {
|
| 137 |
+
position: relative;
|
| 138 |
+
width: min(100%, 520px);
|
| 139 |
+
aspect-ratio: 1;
|
| 140 |
+
margin: auto;
|
| 141 |
+
border: 1px solid var(--line);
|
| 142 |
+
border-radius: 50%;
|
| 143 |
+
background:
|
| 144 |
+
radial-gradient(circle at center, var(--accent-soft) 0 13%, transparent 13.5%),
|
| 145 |
+
radial-gradient(circle at center, transparent 0 42%, var(--line) 42.2% 42.35%, transparent 42.5%),
|
| 146 |
+
radial-gradient(circle at center, transparent 0 67%, var(--line) 67.2% 67.35%, transparent 67.5%);
|
| 147 |
+
}
|
| 148 |
+
.orbit {
|
| 149 |
+
position: absolute; inset: 11%; border: 1px solid var(--line);
|
| 150 |
+
border-radius: 50%; animation: spin 24s linear infinite;
|
| 151 |
+
}
|
| 152 |
+
.orbit-two { inset: 24%; animation-duration: 18s; animation-direction: reverse; }
|
| 153 |
+
.orbit-three { inset: 38%; animation-duration: 13s; }
|
| 154 |
+
.core {
|
| 155 |
+
position: absolute; inset: 39%; display: flex; flex-direction: column;
|
| 156 |
+
align-items: center; justify-content: center; gap: 3px;
|
| 157 |
+
border-radius: 50%; background: var(--paper); border: 1px solid var(--line-strong);
|
| 158 |
+
box-shadow: var(--shadow);
|
| 159 |
+
}
|
| 160 |
+
.core-symbol { font: 600 43px/1 "Playfair Display", serif; }
|
| 161 |
+
.core-label { font: 9px "DM Mono", monospace; letter-spacing: .18em; color: var(--muted); }
|
| 162 |
+
.signal {
|
| 163 |
+
position: absolute; padding: 6px 8px; background: var(--paper);
|
| 164 |
+
border: 1px solid var(--line); border-radius: 6px;
|
| 165 |
+
font: 9px "DM Mono", monospace; letter-spacing: .08em;
|
| 166 |
+
box-shadow: 0 8px 30px rgba(0,0,0,.05);
|
| 167 |
+
}
|
| 168 |
+
.signal-a { top: 16%; left: 47%; }
|
| 169 |
+
.signal-b { right: 8%; top: 47%; }
|
| 170 |
+
.signal-c { bottom: 15%; left: 45%; }
|
| 171 |
+
.signal-d { left: 7%; top: 47%; }
|
| 172 |
+
|
| 173 |
+
.hero-meta {
|
| 174 |
+
display: grid; grid-template-columns: repeat(4, 1fr);
|
| 175 |
+
border-top: 1px solid var(--line); margin-top: 70px;
|
| 176 |
+
}
|
| 177 |
+
.hero-meta div {
|
| 178 |
+
display: flex; justify-content: space-between; padding: 16px 15px 0 0;
|
| 179 |
+
font-size: 10px; color: var(--muted);
|
| 180 |
+
}
|
| 181 |
+
.hero-meta strong { color: var(--ink); font-weight: 500; }
|
| 182 |
+
|
| 183 |
+
.manifesto {
|
| 184 |
+
border-top: 1px solid var(--line);
|
| 185 |
+
display: grid; grid-template-columns: .32fr 1fr; gap: 60px;
|
| 186 |
+
}
|
| 187 |
+
.section-kicker { font-size: 10px; letter-spacing: .12em; color: var(--muted); }
|
| 188 |
+
.manifesto-label { font: 11px "DM Mono", monospace; color: var(--warm); }
|
| 189 |
+
.manifesto h2, .section-heading h2, .connect h2 {
|
| 190 |
+
font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -.055em;
|
| 191 |
+
font-weight: 600; margin: 0 0 28px;
|
| 192 |
+
}
|
| 193 |
+
.manifesto-content > p:last-child { max-width: 760px; color: var(--muted); font-size: 17px; line-height: 1.8; }
|
| 194 |
+
.manifesto strong { color: var(--ink); font-weight: 600; }
|
| 195 |
+
|
| 196 |
+
.section-heading {
|
| 197 |
+
display: flex; justify-content: space-between; align-items: end;
|
| 198 |
+
gap: 40px; margin-bottom: 45px;
|
| 199 |
+
}
|
| 200 |
+
.section-heading > p { max-width: 390px; color: var(--muted); margin-bottom: 8px; }
|
| 201 |
+
|
| 202 |
+
.research-grid {
|
| 203 |
+
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
|
| 204 |
+
}
|
| 205 |
+
.research-card {
|
| 206 |
+
min-height: 310px; padding: 25px; border: 1px solid var(--line);
|
| 207 |
+
border-radius: var(--radius); background: var(--paper);
|
| 208 |
+
position: relative; overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
|
| 209 |
+
}
|
| 210 |
+
.research-card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow); }
|
| 211 |
+
.card-number { position: absolute; top: 24px; right: 25px; font: 10px "DM Mono", monospace; color: var(--muted); }
|
| 212 |
+
.card-icon { display: block; font-size: 32px; margin-bottom: 55px; color: var(--accent); }
|
| 213 |
+
.research-card h3 { font-size: 23px; letter-spacing: -.03em; margin-bottom: 10px; }
|
| 214 |
+
.research-card p { color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 330px; }
|
| 215 |
+
.tags { display: flex; gap: 7px; flex-wrap: wrap; position: absolute; left: 25px; bottom: 24px; }
|
| 216 |
+
.tags span { border: 1px solid var(--line); padding: 5px 7px; border-radius: 5px; font-size: 8px; color: var(--muted); }
|
| 217 |
+
|
| 218 |
+
.release-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
| 219 |
+
.release-card {
|
| 220 |
+
min-height: 260px; padding: 25px; border: 1px solid var(--line);
|
| 221 |
+
border-radius: var(--radius); background: var(--paper);
|
| 222 |
+
display: flex; flex-direction: column;
|
| 223 |
+
transition: transform .25s ease, border-color .25s ease;
|
| 224 |
+
}
|
| 225 |
+
.release-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
|
| 226 |
+
.release-top { display: flex; justify-content: space-between; font: 10px "DM Mono", monospace; color: var(--muted); margin-bottom: 52px; }
|
| 227 |
+
.release-card strong { font-size: 21px; letter-spacing: -.025em; margin-bottom: 9px; }
|
| 228 |
+
.release-card p { color: var(--muted); font-size: 14px; line-height: 1.6; }
|
| 229 |
+
.release-status { margin-top: auto; font-size: 8px; letter-spacing: .1em; color: var(--warm); }
|
| 230 |
+
|
| 231 |
+
.quote-section {
|
| 232 |
+
text-align: center; padding-top: 130px; padding-bottom: 130px;
|
| 233 |
+
}
|
| 234 |
+
.quote-mark { font: 70px/1 "Playfair Display", serif; color: var(--accent); }
|
| 235 |
+
blockquote {
|
| 236 |
+
margin: 8px auto 0; max-width: 850px;
|
| 237 |
+
font-size: clamp(38px, 5vw, 66px); line-height: 1.08; letter-spacing: -.05em;
|
| 238 |
+
}
|
| 239 |
+
blockquote em { font-family: "Playfair Display", serif; font-weight: 500; }
|
| 240 |
+
|
| 241 |
+
.principles-section { border-top: 1px solid var(--line); }
|
| 242 |
+
.principles-list { margin-top: 45px; border-top: 1px solid var(--line); }
|
| 243 |
+
.principle {
|
| 244 |
+
display: grid; grid-template-columns: 100px 1fr; gap: 20px;
|
| 245 |
+
padding: 25px 0; border-bottom: 1px solid var(--line);
|
| 246 |
+
}
|
| 247 |
+
.principle > span { font: 10px "DM Mono", monospace; color: var(--muted); }
|
| 248 |
+
.principle h3 { margin: 0 0 5px; font-size: 22px; }
|
| 249 |
+
.principle p { margin: 0; color: var(--muted); font-size: 14px; }
|
| 250 |
+
|
| 251 |
+
.connect-panel {
|
| 252 |
+
padding: 50px; border: 1px solid var(--line); border-radius: 28px;
|
| 253 |
+
background: var(--paper); display: grid; grid-template-columns: 1fr .7fr;
|
| 254 |
+
gap: 60px; box-shadow: var(--shadow);
|
| 255 |
+
}
|
| 256 |
+
.connect-panel > div:first-child p { max-width: 550px; color: var(--muted); font-size: 16px; }
|
| 257 |
+
.connect-links { display: flex; flex-direction: column; }
|
| 258 |
+
.connect-links a {
|
| 259 |
+
display: flex; justify-content: space-between; align-items: center;
|
| 260 |
+
padding: 16px 0; border-bottom: 1px solid var(--line);
|
| 261 |
+
font-weight: 600; transition: padding .2s ease;
|
| 262 |
+
}
|
| 263 |
+
.connect-links a:hover { padding-left: 7px; }
|
| 264 |
+
.connect-links b { font-weight: 400; color: var(--muted); }
|
| 265 |
+
|
| 266 |
+
.footer {
|
| 267 |
+
width: min(calc(100% - 48px), var(--max)); margin: 0 auto;
|
| 268 |
+
min-height: 120px; border-top: 1px solid var(--line);
|
| 269 |
+
display: grid; grid-template-columns: 1fr 2fr auto; gap: 30px;
|
| 270 |
+
align-items: center; color: var(--muted); font-size: 11px;
|
| 271 |
+
}
|
| 272 |
+
.footer-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
|
| 273 |
+
.footer .brand-mark { width: 25px; height: 25px; font-size: 15px; }
|
| 274 |
+
.footer p { margin: 0; text-align: center; }
|
| 275 |
+
.footer #year { font: 10px "DM Mono", monospace; }
|
| 276 |
+
|
| 277 |
+
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
|
| 278 |
+
.reveal.is-visible { opacity: 1; transform: none; }
|
| 279 |
+
.reveal-delay { transition-delay: .1s; }
|
| 280 |
+
|
| 281 |
+
@keyframes spin { to { transform: rotate(360deg); } }
|
| 282 |
+
|
| 283 |
+
@media (max-width: 900px) {
|
| 284 |
+
.nav { display: none; }
|
| 285 |
+
.menu-toggle { display: grid; }
|
| 286 |
+
.site-header.menu-open .nav {
|
| 287 |
+
display: flex; position: fixed; inset: 78px 24px auto;
|
| 288 |
+
background: var(--paper); border: 1px solid var(--line);
|
| 289 |
+
padding: 18px; border-radius: 16px; flex-direction: column; z-index: 40;
|
| 290 |
+
box-shadow: var(--shadow);
|
| 291 |
+
}
|
| 292 |
+
.hero-grid { grid-template-columns: 1fr; gap: 55px; }
|
| 293 |
+
.hero-visual { width: min(100%, 440px); }
|
| 294 |
+
.research-grid, .release-grid { grid-template-columns: repeat(2, 1fr); }
|
| 295 |
+
.manifesto { grid-template-columns: 1fr; gap: 30px; }
|
| 296 |
+
.connect-panel { grid-template-columns: 1fr; gap: 35px; }
|
| 297 |
+
.footer { grid-template-columns: 1fr; gap: 8px; padding: 25px 0; text-align: left; }
|
| 298 |
+
.footer p { text-align: left; }
|
| 299 |
+
}
|
| 300 |
+
|
| 301 |
+
@media (max-width: 620px) {
|
| 302 |
+
.site-header, .section, .footer { width: min(calc(100% - 30px), var(--max)); }
|
| 303 |
+
.site-header { min-height: 68px; }
|
| 304 |
+
.nav-button { display: none; }
|
| 305 |
+
.hero { padding-top: 65px; }
|
| 306 |
+
.hero-grid { min-height: auto; }
|
| 307 |
+
h1 { font-size: clamp(48px, 15vw, 68px); }
|
| 308 |
+
.hero-lede { font-size: 16px; }
|
| 309 |
+
.hero-meta { grid-template-columns: repeat(2, 1fr); gap: 8px; }
|
| 310 |
+
.hero-meta div { padding-top: 12px; }
|
| 311 |
+
.section { padding: 80px 0; }
|
| 312 |
+
.research-grid, .release-grid { grid-template-columns: 1fr; }
|
| 313 |
+
.research-card { min-height: 290px; }
|
| 314 |
+
.section-heading { display: block; }
|
| 315 |
+
.section-heading > p { margin-top: 20px; }
|
| 316 |
+
.principle { grid-template-columns: 45px 1fr; }
|
| 317 |
+
.connect-panel { padding: 28px; border-radius: 20px; }
|
| 318 |
+
blockquote { font-size: 40px; }
|
| 319 |
+
.hero-visual { max-width: 330px; }
|
| 320 |
+
.core { inset: 37%; }
|
| 321 |
+
.signal { font-size: 7px; }
|
| 322 |
+
}
|