/* ============================================================= PRETEXT — project page styles The page is a fixed-aspect editorial frame ("the page") that the JS layout engine fills with text fragments and shapes. Visual identity is its own — paper white, deep ink, a single accent for the editorial chrome. The site palette is the baseline, not the starting point (per CLAUDE.md). - All selectors scoped under [data-page-root]. - Text fragments and shapes are absolutely positioned inside #pt-flow by JS. CSS only handles the frame, the chrome, the prompt dock, and the per-fragment + per-shape skeletons. ============================================================= */ /* ---------- Reset / shell ---------- */ html { overflow-x: clip; } body[data-enhanced] { overflow-x: clip; } body[data-enhanced] main[data-page-root] { position: relative; padding: 0; } /* .enhanced-only is shown only when JS is actually running. If JS is off, the bootstrap script never adds .js-on to , so the rule never applies and the elements stay hidden — leaving the prose source as the only visible content. */ .enhanced-only { display: none; } html.js-on [data-enhanced] .enhanced-only { display: block; } /* When JS is on, hide the source paragraphs — JS reads them and reflows. When JS is off, the rule never applies and the source stays visible as the fallback article. */ html.js-on [data-page-root] .pt-prose-source { display: none; } /* Site header + footer adopt the project's paper palette so they feel continuous with the page below. Doesn't bleed to other pages because everything is scoped. */ body[data-enhanced] { background: #efe9da; color: #1d1916; } body[data-enhanced] .site-header, body[data-enhanced] .site-footer { background: transparent; border-color: rgba(29, 25, 22, 0.12); } body[data-enhanced] .site-header .site-mark, body[data-enhanced] .site-header .site-nav a, body[data-enhanced] .site-footer { color: #1d1916; } /* ---------- The stage ---------- */ [data-page-root] .pt-stage { position: relative; width: 100%; min-height: calc(100vh - 8rem); padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) 6rem; display: flex; flex-direction: column; align-items: center; /* Subtle paper texture over the whole project */ background-image: radial-gradient(rgba(29, 25, 22, 0.025) 1px, transparent 1px), radial-gradient(rgba(29, 25, 22, 0.018) 1px, transparent 1px); background-size: 11px 11px, 17px 17px; background-position: 0 0, 5px 7px; } /* ---------- The page (the editorial frame) ---------- */ [data-page-root] .pt-page { position: relative; width: clamp(540px, 78vw, 880px); margin: 0 auto; padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 3vw, 3rem); background: #fbf6e9; color: #1d1916; border: 1px solid rgba(29, 25, 22, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 24px 60px -28px rgba(40, 32, 24, 0.35), 0 6px 18px -10px rgba(40, 32, 24, 0.18); } /* Page edge has a faint warm gradient — paper picking up light from above */ [data-page-root] .pt-page::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 250, 235, 0.55) 0%, rgba(255, 250, 235, 0) 35%, rgba(140, 110, 80, 0.04) 100% ); z-index: 0; } /* ---------- Article head ---------- */ [data-page-root] .pt-head { position: relative; z-index: 1; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); border-bottom: 1px solid rgba(29, 25, 22, 0.14); } [data-page-root] .pt-kicker { margin: 0 0 0.5rem; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8a4d2a; font-weight: 500; } [data-page-root] .pt-title { margin: 0 0 0.75rem; font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 0.98; letter-spacing: -0.015em; color: #1d1916; } [data-page-root] .pt-byline { margin: 0 0 0.75rem; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.92rem; color: #5a5046; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } [data-page-root] .pt-dot { color: #b8a890; } [data-page-root] .pt-hint { margin: 1rem 0 0; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.86rem; color: #8a4d2a; font-style: italic; opacity: 0.85; } /* ---------- The flow ---------- */ /* This is where the layout engine writes its results. */ [data-page-root] .pt-flow { position: relative; z-index: 1; width: 100%; /* Height set by JS after layout. Min-height keeps the frame from collapsing while shapes/images are loading. */ min-height: 320px; } /* Each text fragment is an absolutely-positioned span with its own width. Hand-tuned for Source Serif 4 at the chosen size. */ [data-page-root] .pt-frag { position: absolute; font-family: 'Source Serif 4', Georgia, serif; font-weight: 400; font-size: 17px; line-height: 28px; color: #1d1916; white-space: nowrap; pointer-events: none; /* No anti-aliasing tweaks — Source Serif 4 looks great at 17px on its own. */ } [data-page-root] .pt-frag em { font-style: italic; } [data-page-root] .pt-frag strong { font-weight: 600; } /* ---------- Shapes ---------- */ /* Each shape is a div positioned by JS. It contains an inline SVG sized to its base width/height. CSS handles the visual transform (translate, rotate, scale). The mask used by the layout engine is rasterized separately by JS. */ [data-page-root] .pt-shape { position: absolute; display: block; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; /* lets us own pointer events on touch devices */ will-change: transform, left, top; /* Translation lives on left/top (set per-frame by JS); rotation/scale live on transform so they don't fight with the position. */ transform: rotate(var(--pt-rot, 0deg)) scale(var(--pt-scale, 1)); transform-origin: center center; z-index: 5; } [data-page-root] .pt-shape.is-dragging { cursor: grabbing; z-index: 8; filter: drop-shadow(0 8px 14px rgba(40, 32, 24, 0.22)); } [data-page-root] .pt-shape.is-spinning { animation: pt-spin 1.4s cubic-bezier(0.5, 0, 0.5, 1); } [data-page-root] .pt-shape.is-pulsing { animation: pt-pulse 0.9s cubic-bezier(0.5, 0, 0.5, 1); } [data-page-root] .pt-shape.is-wobbling { animation: pt-wobble 0.7s cubic-bezier(0.4, 0.1, 0.5, 1); } [data-page-root] .pt-shape.is-just-arrived { animation: pt-arrive 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.05); } [data-page-root] .pt-shape svg { display: block; width: 100%; height: 100%; overflow: visible; } @keyframes pt-spin { from { transform: rotate(var(--pt-rot, 0deg)) scale(var(--pt-scale, 1)); } to { transform: rotate(calc(var(--pt-rot, 0deg) + 360deg)) scale(var(--pt-scale, 1)); } } @keyframes pt-pulse { 0% { transform: rotate(var(--pt-rot, 0deg)) scale(var(--pt-scale, 1)); } 40% { transform: rotate(var(--pt-rot, 0deg)) scale(calc(var(--pt-scale, 1) * 1.18)); } 100% { transform: rotate(var(--pt-rot, 0deg)) scale(var(--pt-scale, 1)); } } @keyframes pt-wobble { 0% { transform: rotate(var(--pt-rot, 0deg)) scale(var(--pt-scale, 1)); } 25% { transform: rotate(calc(var(--pt-rot, 0deg) + 8deg)) scale(var(--pt-scale, 1)); } 50% { transform: rotate(calc(var(--pt-rot, 0deg) - 6deg)) scale(var(--pt-scale, 1)); } 75% { transform: rotate(calc(var(--pt-rot, 0deg) + 4deg)) scale(var(--pt-scale, 1)); } 100% { transform: rotate(var(--pt-rot, 0deg)) scale(var(--pt-scale, 1)); } } @keyframes pt-arrive { from { transform: rotate(var(--pt-rot, 0deg)) scale(0.2); opacity: 0; } to { transform: rotate(var(--pt-rot, 0deg)) scale(var(--pt-scale, 1)); opacity: 1; } } /* ---------- The prompt dock ---------- */ [data-page-root] .pt-dock { position: relative; z-index: 2; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; width: clamp(540px, 78vw, 880px); max-width: 100%; } [data-page-root] .pt-prompt { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: #fbf6e9; border: 1px solid rgba(29, 25, 22, 0.16); box-shadow: 0 8px 24px -16px rgba(40, 32, 24, 0.22); } [data-page-root] .pt-prompt-label { display: flex; align-items: center; gap: 0.4rem; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8a4d2a; white-space: nowrap; user-select: none; } [data-page-root] .pt-prompt-marker { font-size: 0.72rem; opacity: 0.7; } [data-page-root] .pt-prompt-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0.4rem 0.5rem; font-family: 'Source Serif 4', Georgia, serif; font-size: 1rem; color: #1d1916; border-bottom: 1px solid transparent; } [data-page-root] .pt-prompt-input:focus { border-bottom-color: rgba(138, 77, 42, 0.5); } [data-page-root] .pt-prompt-input::placeholder { color: #9a8e80; font-style: italic; } [data-page-root] .pt-prompt-submit { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; color: #fbf6e9; background: #1d1916; border: 0; padding: 0.5rem 1rem; cursor: pointer; transition: background 160ms ease, transform 160ms ease; } [data-page-root] .pt-prompt-submit:hover:not(:disabled) { background: #8a4d2a; } [data-page-root] .pt-prompt-submit:active:not(:disabled) { transform: translateY(1px); } [data-page-root] .pt-prompt-submit:disabled { background: #6a6258; cursor: progress; } [data-page-root] .pt-prompt-status { margin: 0.5rem 0 0; min-height: 1.2em; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; color: #6a6258; font-style: italic; } [data-page-root] .pt-prompt-status[data-tone="error"] { color: #a04020; font-style: normal; } [data-page-root] .pt-prompt-status[data-tone="working"] { color: #8a4d2a; } /* Example prompts — small clickable chips below the status row. */ [data-page-root] .pt-prompt-examples { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.4rem; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.78rem; color: #6a6258; } [data-page-root] .pt-prompt-examples-label { font-style: italic; color: #8a8074; letter-spacing: 0.04em; } [data-page-root] .pt-prompt-example { font: inherit; background: rgba(138, 77, 42, 0.07); border: 1px solid rgba(138, 77, 42, 0.2); border-radius: 999px; padding: 0.18rem 0.7rem; color: #6a3618; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } [data-page-root] .pt-prompt-example:hover, [data-page-root] .pt-prompt-example:focus-visible { background: rgba(138, 77, 42, 0.14); border-color: rgba(138, 77, 42, 0.45); color: #1d1916; outline: none; } /* Hover/focus on draggable shapes: subtle lift on desktop, focus ring for keyboard users on every device. */ @media (hover: hover) { [data-page-root] .pt-shape:hover:not(.is-dragging) { filter: drop-shadow(0 4px 8px rgba(40, 32, 24, 0.18)); } } [data-page-root] .pt-shape:focus-visible { outline: 2px solid #8a4d2a; outline-offset: 4px; border-radius: 4px; } /* ---------- Reading mode / JS-off fallback ---------- */ /* In reading mode the page-css link is disabled by the inline boot script, so the rules above don't apply and the .pt-prose-source paragraphs render with the site's default article styles. The hint disappears (no .enhanced-only support without page-css). Nothing else needed. */ /* JS-off: page.css is loaded but page.js never ran, so .js-on is absent and .pt-prose-source is shown by default. We give it some sensible article-shaped styling so it at least feels intentional. */ [data-page-root] .pt-prose-source { max-width: 60ch; margin: 0 auto; font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; line-height: 1.65; color: #1d1916; } [data-page-root] .pt-prose-source .pt-para { margin: 0 0 1em; } [data-page-root] .pt-prose-source .pt-para:first-child::first-letter { font-weight: 700; } /* ---------- Mobile ---------- */ @media (max-width: 640px) { [data-page-root] .pt-page { width: 100%; padding: 1.75rem 1.25rem 1.5rem; } [data-page-root] .pt-title { font-size: 2.4rem; } [data-page-root] .pt-frag { font-size: 16px; line-height: 26px; } [data-page-root] .pt-prompt { flex-wrap: wrap; } [data-page-root] .pt-prompt-label { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { [data-page-root] .pt-shape.is-spinning, [data-page-root] .pt-shape.is-pulsing, [data-page-root] .pt-shape.is-wobbling, [data-page-root] .pt-shape.is-just-arrived { animation: none; } }