/
You
A landing page for a website on awareness and consciousness essays
You
A landing page for a website on awareness and consciousness essays
Assistant
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Clear Field — Essays on Awareness and Consciousness</title>
<meta name="description" content="Clear Field is a thoughtful essay library for readers exploring awareness, consciousness, attention, and the inner life." />
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
:root {
--paper: #fafaf9;
--ink: #1c1917;
--accent: #2563eb;
--rule: #e7e5e4;
--radius: 4px;
--max: 1120px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.6;
font-weight: 400;
color: var(--ink);
background: var(--paper);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
svg {
display: block;
}
.container {
width: min(100% - 40px, var(--max));
margin: 0 auto;
}
.nav {
position: sticky;
top: 0;
z-index: 20;
background: color-mix(in srgb, var(--paper) 94%, transparent);
border-bottom: 1px solid var(--rule);
backdrop-filter: blur(12px);
}
.nav-inner {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 600;
letter-spacing: -0.02em;
}
.brand-mark {
width: 28px;
height: 28px;
border: 1px solid var(--ink);
border-radius: var(--radius);
display: grid;
place-items: center;
flex: 0 0 auto;
}
.brand-mark svg {
width: 18px;
height: 18px;
}
.nav-links {
display: flex;
align-items: center;
gap: 28px;
color: color-mix(in srgb, var(--ink) 70%, var(--paper));
font-size: 14px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border-radius: var(--radius);
border: 1px solid var(--accent);
background: var(--accent);
color: var(--paper);
font-size: 14px;
font-weight: 600;
line-height: 1;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
white-space: nowrap;
}
.button:hover {
background: var(--ink);
border-color: var(--ink);
}
.button.secondary {
background: transparent;
color: var(--ink);
border-color: var(--rule);
}
.button.secondary:hover {
border-color: var(--accent);
color: var(--accent);
background: transparent;
}
.tertiary {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
border-bottom: 1px solid var(--rule);
padding-bottom: 2px;
}
.tertiary:hover {
color: var(--accent);
border-color: var(--accent);
}
.section {
padding: 96px 0;
}
.hero {
padding: 112px 0 96px;
border-bottom: 1px solid var(--rule);
}
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 64px;
align-items: center;
}
.eyebrow {
margin: 0 0 18px;
color: var(--accent);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1 {
margin-bottom: 22px;
font-size: 56px;
line-height: 1.02;
letter-spacing: -0.055em;
font-weight: 600;
max-width: 680px;
}
h2 {
margin-bottom: 18px;
font-size: 32px;
line-height: 1.15;
letter-spacing: -0.035em;
font-weight: 600;
}
h3 {
margin-bottom: 10px;
font-size: 20px;
line-height: 1.3;
letter-spacing: -0.02em;
font-weight: 600;
}
.lead {
max-width: 620px;
margin-bottom: 30px;
font-size: 20px;
line-height: 1.45;
color: color-mix(in srgb, var(--ink) 76%, var(--paper));
}
.hero-actions {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.hero-card {
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--paper);
padding: 28px;
}
.essay-preview {
border-bottom: 1px solid var(--rule);
padding-bottom: 24px;
margin-bottom: 24px;
}
.essay-meta {
display: flex;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
color: color-mix(in srgb, var(--ink) 56%, var(--paper));
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.essay-title {
margin: 0 0 14px;
font-size: 32px;
line-height: 1.15;
letter-spacing: -0.04em;
font-weight: 600;
}
.essay-text {
margin: 0;
color: color-mix(in srgb, var(--ink) 72%, var(--paper));
}
.note-list {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.note-list li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
align-items: start;
color: color-mix(in srgb, var(--ink) 72%, var(--paper));
font-size: 14px;
}
.note-list svg {
margin-top: 3px;
width: 18px;
height: 18px;
color: var(--accent);
}
.value-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}
.value-card {
background: var(--paper);
padding: 34px;
min-height: 260px;
}
.icon {
width: 42px;
height: 42px;
margin-bottom: 26px;
color: var(--accent);
}
.value-card p,
.feature-copy p,
.pricing-card p,
.footer p {
color: color-mix(in srgb, var(--ink) 70%, var(--paper));
}
.proof {
padding: 56px 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.proof-inner {
display: grid;
grid-template-columns: 220px 1fr;
gap: 36px;
align-items: center;
}
.proof-label {
margin: 0;
color: color-mix(in srgb, var(--ink) 58%, var(--paper));
font-size: 14px;
}
.logos {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 22px;
align-items: center;
}
.logo-word {
color: color-mix(in srgb, var(--ink) 48%, var(--paper));
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
text-align: center;
white-space: nowrap;
}
.feature-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 64px;
align-items: center;
}
.feature-list {
display: grid;
gap: 18px;
margin: 30px 0 0;
padding: 0;
list-style: none;
}
.feature-list li {
padding-top: 18px;
border-top: 1px solid var(--rule);
}
.feature-list strong {
display: block;
margin-bottom: 4px;
font-weight: 600;
}
.feature-list span {
color: color-mix(in srgb, var(--ink) 68%, var(--paper));
}
.mock {
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--paper);
overflow: hidden;
}
.mock-top {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
border-bottom: 1px solid var(--rule);
font-size: 14px;
color: color-mix(in srgb, var(--ink) 60%, var(--paper));
}
.mock-dots {
display: flex;
gap: 6px;
}
.mock-dot {
width: 8px;
height: 8px;
border: 1px solid var(--rule);
border-radius: 50%;
}
.mock-body {
display: grid;
grid-template-columns: 220px 1fr;
min-height: 480px;
}
.mock-sidebar {
border-right: 1px solid var(--rule);
padding: 22px;
}
.mock-label {
display: inline-flex;
margin-bottom: 18px;
padding: 4px 8px;
border: 1px solid var(--rule);
border-radius: var(--radius);
color: var(--accent);
font-size: 14px;
font-weight: 600;
}
.mock-menu {
display: grid;
gap: 10px;
}
.mock-menu div {
height: 34px;
border: 1px solid var(--rule);
border-radius: var(--radius);
display: flex;
align-items: center;
padding: 0 10px;
color: color-mix(in srgb, var(--ink) 62%, var(--paper));
font-size: 14px;
}
.mock-menu div.active {
border-color: var(--accent);
color: var(--accent);
}
.mock-content {
padding: 34px;
}
.mock-kicker {
margin: 0 0 12px;
color: var(--accent);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mock-heading {
margin: 0 0 22px;
font-size: 32px;
line-height: 1.15;
letter-spacing: -0.035em;
font-weight: 600;
}
.mock-lines {
display: grid;
gap: 12px;
margin-bottom: 28px;
}
.mock-line {
height: 10px;
background: var(--rule);
border-radius: var(--radius);
}
.mock-line:nth-child(1) { width: 94%; }
.mock-line:nth-child(2) { width: 82%; }
.mock-line:nth-child(3) { width: 88%; }
.mock-line:nth-child(4) { width: 64%; }
.annotation {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 28px;
}
.annotation-card {
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 16px;
}
.annotation-card b {
display: block;
margin-bottom: 4px;
font-size: 14px;
font-weight: 600;
}
.annotation-card span {
color: color-mix(in srgb, var(--ink) 62%, var(--paper));
font-size: 14px;
}
.pricing {
border-top: 1px solid var(--rule);
}
.section-head {
max-width: 640px;
margin-bottom: 42px;
}
.section-head p {
margin-bottom: 0;
color: color-mix(in srgb, var(--ink) 70%, var(--paper));
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.pricing-card {
position: relative;
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 34px;
}
.pricing-card.recommended {
border-color: var(--accent);
}
.badge {
position: absolute;
top: 24px;
right: 24px;
padding: 4px 8px;
border: 1px solid var(--accent);
border-radius: var(--radius);
color: var(--accent);
font-size: 14px;
font-weight: 600;
}
.price {
margin: 26px 0 8px;
font-size: 56px;
line-height: 1;
letter-spacing: -0.055em;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.price small {
font-size: 16px;
letter-spacing: 0;
font-weight: 500;
color: color-mix(in srgb, var(--ink) 58%, var(--paper));
}
.pricing-features {
display: grid;
gap: 12px;
margin: 28px 0 30px;
padding: 0;
list-style: none;
}
.pricing-features li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
color: color-mix(in srgb, var(--ink) 74%, var(--paper));
}
.pricing-features svg {
width: 18px;
height: 18px;
margin-top: 4px;
color: var(--accent);
}
.footer {
padding: 64px 0 36px;
border-top: 1px solid var(--rule);
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr repeat(3, 1fr);
gap: 44px;
margin-bottom: 56px;
}
.footer-brand p {
max-width: 280px;
margin-top: 16px;
}
.footer h3 {
margin-bottom: 16px;
font-size: 14px;
letter-spacing: 0;
}
.footer ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.footer a {
color: color-mix(in srgb, var(--ink) 66%, var(--paper));
font-size: 14px;
}
.footer a:hover {
color: var(--accent);
}
.legal {
padding-top: 24px;
border-top: 1px solid var(--rule);
color: color-mix(in srgb, var(--ink) 56%, var(--paper));
font-size: 14px;
font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
.nav-links {
display: none;
}
.hero,
.section {
padding: 64px 0;
}
.hero-grid,
.feature-grid,
.proof-inner,
.footer-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 56px;
}
.lead {
font-size: 20px;
}
.value-grid,
.pricing-grid,
.logos {
grid-template-columns: 1fr;
}
.logo-word {
text-align: left;
}
.mock-body {
grid-template-columns: 1fr;
}
.mock-sidebar {
border-right: 0;
border-bottom: 1px solid var(--rule);
}
.annotation {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.container {
width: min(100% - 32px, var(--max));
}
.nav-inner {
min-height: 66px;
}
h1 {
font-size: 56px;
}
h2,
.essay-title,
.mock-heading {
font-size: 32px;
}
.hero-card,
.value-card,
.pricing-card,
.mock-content {
padding: 24px;
}
.price {
font-size: 56px;
}
.badge {
position: static;
display: inline-flex;
margin-bottom: 18px;
}
}
</style>
</head>
<body>
<nav class="nav" aria-label="Primary navigation">
<div class="container nav-inner">
<a class="brand" href="#" aria-label="Clear Field home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="7" stroke="currentColor" stroke-width="1.5" />
<path d="M12 5v14M5 12h14" stroke="#2563eb" stroke-width="1.5" stroke-linecap="round" />
</svg>
</span>
<span>Clear Field</span>
</a>
<div class="nav-links" aria-label="Section links">
<a href="#essays">Essays</a>
<a href="#library">Library</a>
<a href="#pricing">Membership</a>
</div>
<a class="button" href="#pricing">Join the circle</a>
</div>
</nav>
<main>
<section class="hero" id="top">
<div class="container hero-grid">
<div>
<p class="eyebrow">Essays on consciousness</p>
<h1>Read essays that steady attention</h1>
<p class="lead">A weekly library of clear reflections on awareness, perception, and the practice of being awake.</p>
<div class="hero-actions">
<a class="button" href="#pricing">Start reading</a>
<a class="tertiary" href="#essays">
See latest essay
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
<aside class="hero-card" aria-label="Featured essay preview" id="essays">
<div class="essay-preview">
<div class="essay-meta">
<span>Featured essay</span>
<span>12 min read</span>
</div>
<h2 class="essay-title">The space before thought</h2>
<p class="essay-text">Attention is not another object in the mind. It is the quiet capacity in which objects appear, change, and pass.</p>
</div>
<ul class="note-list" aria-label="Reader notes">
<li>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Plain-language essays without mystical performance.</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Reading paths for attention, selfhood, time, and perception.</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>New letters every Sunday morning.</span>
</li>
</ul>
</aside>
</div>
</section>
<section class="section" aria-labelledby="value-title">
<div class="container">
<div class="section-head">
<h2 id="value-title">A quieter way to study the mind</h2>
<p>Clear Field is built for careful readers who want rigor, warmth, and practical inquiry without noise.</p>
</div>
<div class="value-grid">
<article class="value-card">
<svg class="icon" viewBox="0 0 48 48" fill="none" aria-hidden="true">
<path d="M24 8v32M12 18c3.5-4 7.5-6 12-6s8.5 2 12 6M12 30c3.5 4 7.5 6 12 6s8.5-2 12-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="24" cy="24" r="4" stroke="currentColor" stroke-width="1.5" />
</svg>
<h3>Direct observation</h3>
<p>Essays return to lived experience: breath, thought, sensation, memory, and the strange fact of being aware.</p>
</article>
<article class="value-card">
<svg class="icon" viewBox="0 0 48 48" fill="none" aria-hidden="true">
<path d="M14 10h20a4 4 0 0 1 4 4v24H14a4 4 0 0 1-4-4V14a4 4 0 0 1 4-4Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
<path d="M18 18h12M18 24h16M18 30h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<h3>Careful language</h3>
<p>Each piece favors precision over certainty, making difficult questions readable without flattening their depth.</p>
</article>
<article class="value-card">
<svg class="icon" viewBox="0 0 48 48" fill="none" aria-hidden="true">
<path d="M24 6v8M24 34v8M6 24h8M34 24h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M15.5 15.5 10 10M32.5 15.5 38 10M15.5 32.5 10 38M32.5 32.5 38 38" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<circle cx="24" cy="24" r="7" stroke="currentColor" stroke-width="1.5" />
</svg>
<h3>Practice included</h3>
<p>Short prompts and contemplative exercises help readers test ideas in ordinary moments, not just admire them.</p>
</article>
</div>
</div>
</section>
<section class="proof" aria-label="Social proof">
<div class="container proof-inner">
<p class="proof-label">Read by writers, meditators, therapists, and researchers from</p>
<div class="logos" aria-label="Reader communities and publications">
<div class="logo-word">Stillpoint Review</div>
<div class="logo-word">Mind & Matter</div>
<div class="logo-word">The Quiet Lab</div>
<div class="logo-word">Noetic Notes</div>
<div class="logo-word">Open Practice</div>
</div>
</div>
</section>
<section class="section" id="library" aria-labelledby="feature-title">
<div class="container feature-grid">
<div class="feature-copy">
<p class="eyebrow">The reading room</p>
<h2 id="feature-title">Follow a question, not a feed</h2>
<p>Browse essays by theme, save passages that matter, and return to a personal thread of inquiry over time.</p>
<ul class="feature-list">
<li>
<strong>Guided paths</strong>
<span>Start with curated sequences on attention, the sense of self, non-duality, grief, and time.</span>
</li>
<li>
<strong>Margin notes</strong>
<span>Collect passages and private reflections without turning reading into another productivity system.</span>
</li>
<li>
<strong>Monthly seminars</strong>
<span>Members receive a live discussion letter with questions, references, and suggested practices.</span>
</li>
</ul>
</div>
<div class="mock" role="img" aria-label="Labelled mock interface showing the Clear Field essay library">
<div class="mock-top">
<span>Clear Field Library</span>
<div class="mock-dots" aria-hidden="true">
<span class="mock-dot"></span>
<span class="mock-dot"></span>
<span class="mock-dot"></span>
</div>
</div>
<div class="mock-body">
<aside class="mock-sidebar">
<span class="mock-label">Labelled mock</span>
<div class="mock-menu">
<div class="active">Awareness</div>
<div>Attention</div>
<div>Selfhood</div>
<div>Perception</div>
<div>Practice notes</div>
</div>
</aside>
<div class="mock-content">
<p class="mock-kicker">Path 03</p>
<h3 class="mock-heading">Where does experience appear?</h3>
<div class="mock-lines" aria-hidden="true">
<span class="mock-line"></span>
<span class="mock-line"></span>
<span class="mock-line"></span>
<span class="mock-line"></span>
</div>
<div class="annotation">
<div class="annotation-card">
<b>Reader note</b>
<span>“Notice the difference between thought content and knowing it.”</span>
</div>
<div class="annotation-card">
<b>Practice</b>
<span>Three pauses during the day, each lasting one quiet minute.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section pricing" id="pricing" aria-labelledby="pricing-title">
<div class="container">
<div class="section-head">
<h2 id="pricing-title">Choose your depth of reading</h2>
<p>Begin with the public archive, or join the member circle for full access and monthly discussion letters.</p>
</div>
<div class="pricing-grid">
<article class="pricing-card">
<h3>Reader</h3>
<p>For occasional visits and the public essay archive.</p>
<div class="price">$0 <small>/ month</small></div>
<ul class="pricing-features">
<li>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Access to public essays</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Sunday digest newsletter</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Three introductory reading paths</span>
</li>
</ul>
<a class="button secondary" href="#">Start free</a>
</article>
<article class="pricing-card recommended">
<span class="badge">Recommended</span>
<h3>Circle</h3>
<p>For readers who want the full library and deeper inquiry.</p>
<div class="price">$8 <small>/ month</small></div>
<ul class="pricing-features">
<li>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Full archive and new weekly essays</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Private notes and saved passages</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Monthly seminar letters and prompts</span>
</li>
</ul>
<a class="button" href="#">Join the circle</a>
</article>
</div>
</div>
</section>
</main>
<footer class="footer" aria-labelledby="footer-title">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a class="brand" href="#top" id="footer-title">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="7" stroke="currentColor" stroke-width="1.5" />
<path d="M12 5v14M5 12h14" stroke="#2563eb" stroke-width="1.5" stroke-linecap="round" />
</svg>
</span>
<span>Clear Field</span>
</a>
<p>Essays and practices for examining awareness with patience, honesty, and care.</p>
</div>
<nav aria-label="Explore">
<h3>Explore</h3>
<ul>
<li><a href="#essays">Latest essays</a></
Idle
The latest HTML artifact appears here.