Restyle manifesto: larger text, brighter colors, Open Machine aesthetic
Pure black background, Cormorant Garamond serif, dramatically larger type sizes, high-contrast teal-white text, generous whitespace. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett
parent
54861e4123
commit
2852db6db9
177
index.html
177
index.html
|
|
@ -11,27 +11,34 @@
|
|||
<meta property="og:url" content="https://polyanarchy.us">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--ink: #1a1a1a;
|
||||
--paper: #f5f0e8;
|
||||
--accent: #8b0000;
|
||||
--dim: #6b6359;
|
||||
--bg: #000000;
|
||||
--text: #f0fdfa;
|
||||
--text-secondary: #c8d8d4;
|
||||
--accent: #f0fdfa;
|
||||
--accent-dim: rgba(240,253,250,0.2);
|
||||
--serif: 'Cormorant Garamond', 'Georgia', serif;
|
||||
--sans: 'Inter', -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
font-family: 'EB Garamond', Georgia, serif;
|
||||
line-height: 1.7;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--serif);
|
||||
line-height: 1.8;
|
||||
overflow-x: hidden;
|
||||
transition: background 200ms linear;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* --- HERO --- */
|
||||
|
|
@ -46,35 +53,24 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 30%, rgba(139,0,0,0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(139,0,0,0.06) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: clamp(3rem, 10vw, 8rem);
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(4rem, 12vw, 10rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
margin-bottom: 1.5rem;
|
||||
background: linear-gradient(135deg, var(--paper) 0%, var(--accent) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 0.9;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.hero .subtitle {
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(1.3rem, 3vw, 2rem);
|
||||
font-style: italic;
|
||||
color: var(--dim);
|
||||
max-width: 600px;
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
max-width: 650px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
|
|
@ -82,76 +78,69 @@
|
|||
position: absolute;
|
||||
bottom: 2rem;
|
||||
animation: drift 2.5s ease-in-out infinite;
|
||||
color: var(--dim);
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@keyframes drift {
|
||||
0%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
50% { transform: translateY(10px); opacity: 1; }
|
||||
0%, 100% { transform: translateY(0); opacity: 0.3; }
|
||||
50% { transform: translateY(10px); opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* --- MANIFESTO --- */
|
||||
.manifesto {
|
||||
max-width: 720px;
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 2rem 6rem;
|
||||
padding: 6rem 2rem 8rem;
|
||||
}
|
||||
|
||||
.manifesto section {
|
||||
margin-bottom: 4rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.manifesto h2 {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: clamp(1.4rem, 3vw, 2rem);
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.manifesto h2::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.15em;
|
||||
width: 4px;
|
||||
height: 1em;
|
||||
background: var(--accent);
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.manifesto p {
|
||||
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
|
||||
margin-bottom: 1.5rem;
|
||||
color: #d4cfc6;
|
||||
font-size: clamp(1.25rem, 2.2vw, 1.45rem);
|
||||
margin-bottom: 1.6rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.manifesto p.lead {
|
||||
font-size: clamp(1.2rem, 2.2vw, 1.5rem);
|
||||
color: var(--paper);
|
||||
font-size: clamp(1.5rem, 2.8vw, 1.9rem);
|
||||
color: var(--text);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.manifesto em {
|
||||
color: var(--paper);
|
||||
color: var(--text);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.manifesto strong {
|
||||
color: var(--paper);
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pullquote {
|
||||
border-left: 3px solid var(--accent);
|
||||
padding: 1rem 0 1rem 2rem;
|
||||
margin: 2.5rem 0;
|
||||
font-size: clamp(1.3rem, 2.5vw, 1.7rem);
|
||||
border-left: 2px solid var(--accent-dim);
|
||||
padding: 1.5rem 0 1.5rem 2.5rem;
|
||||
margin: 3rem 0;
|
||||
font-size: clamp(1.5rem, 3vw, 2rem);
|
||||
font-style: italic;
|
||||
color: var(--paper);
|
||||
font-weight: 400;
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
@ -159,15 +148,16 @@
|
|||
.principles {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 2rem 0;
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
|
||||
.principles li {
|
||||
padding: 1rem 0 1rem 2rem;
|
||||
padding: 1.2rem 0 1.2rem 2rem;
|
||||
position: relative;
|
||||
font-size: clamp(1.05rem, 1.8vw, 1.2rem);
|
||||
color: #d4cfc6;
|
||||
border-bottom: 1px solid rgba(139,0,0,0.15);
|
||||
font-size: clamp(1.2rem, 2vw, 1.4rem);
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--accent-dim);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.principles li:last-child {
|
||||
|
|
@ -175,32 +165,40 @@
|
|||
}
|
||||
|
||||
.principles li::before {
|
||||
content: '\2726';
|
||||
content: '\2014';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent);
|
||||
font-size: 0.9em;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.principles li strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* --- DIVIDER --- */
|
||||
.divider {
|
||||
text-align: center;
|
||||
margin: 4rem 0;
|
||||
color: var(--accent);
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 1em;
|
||||
opacity: 0.5;
|
||||
margin: 5rem 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
letter-spacing: 1.5em;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
/* --- FOOTER --- */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
color: var(--dim);
|
||||
font-size: 0.9rem;
|
||||
border-top: 1px solid rgba(139,0,0,0.15);
|
||||
max-width: 720px;
|
||||
padding: 4rem 2rem;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--sans);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.03em;
|
||||
border-top: 1px solid var(--accent-dim);
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
footer p {
|
||||
|
|
@ -210,10 +208,13 @@
|
|||
/* --- RESPONSIVE --- */
|
||||
@media (max-width: 480px) {
|
||||
.manifesto {
|
||||
padding: 3rem 1.25rem 4rem;
|
||||
padding: 4rem 1.5rem 5rem;
|
||||
}
|
||||
.pullquote {
|
||||
padding-left: 1.25rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.manifesto section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue