/* ============================================================================ MakeAndUpdate — Brand Theme (framework-agnostic) Warm-paper monochrome + one locked persimmon accent. Inter Variable. Editorial, mechanical motion, hairline rules, generous whitespace. USAGE 1. Link this file: 2. inherits the paper background + ink text automatically. 3. Use the tokens (var(--color-signal) …) and the component classes below. 4. For scroll reveals, add reveal.js (defer) and put this in first so content never flashes hidden: FONT: Inter is loaded from Google Fonts for zero-setup portability. For production, self-host Inter Variable and replace the @import with the commented @font-face block — faster, not render-blocking. The stack falls back to system-ui if Inter never loads. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap'); /* Self-host alternative (preferred for production): @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/inter-latin-var.woff2") format("woff2"); } */ :root{ /* Warm paper monochrome */ --color-paper: #f4f3ef; --color-paper-2: #eae6dc; --color-paper-3: #ddd8cb; --color-ink: #0e0e0c; --color-ink-2: #52514c; --color-ink-3: #726f68; --color-rule: #d9d6cc; --color-rule-2: #c5c0b2; /* Single locked accent — persimmon. Never introduce a second hue. */ --color-signal: #e84e10; --color-signal-ink: #a83608; --color-signal-soft: #fbe1d3; /* Dark-section ("ink flip") palette — contrast-safe on #0e0e0c */ --dark-bg: #0e0e0c; --dark-text: #cdc8bd; --dark-text-2: #c7c2b7; --dark-head: #f7f5ee; --dark-label: #b8b3aa; /* Type */ --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; /* Radii — sharp by default */ --radius-card:4px; --radius-pill:9999px; /* Motion — mechanical, no bounce */ --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-out-expo:cubic-bezier(0.16,1,0.3,1); --reveal-distance:42px; } /* ── Base ─────────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--color-paper); } body{ margin:0; min-height:100dvh; background:var(--color-paper); color:var(--color-ink-2); font-family:var(--font-sans); font-feature-settings:"cv02","cv03","cv04","cv11","ss01"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.65; } h1,h2,h3,h4{ margin:0; font-family:var(--font-sans); color:var(--color-ink); font-weight:900; text-transform:uppercase; letter-spacing:-0.04em; line-height:0.92; text-wrap:balance; overflow-wrap:break-word; } /* Mixed-case (sentence-case) heading — opt in for long editorial lines */ .h-sentence{ text-transform:none; letter-spacing:-0.025em; line-height:1.0; } p{ text-wrap:pretty; line-height:1.65; overflow-wrap:break-word; } a{ color:inherit; text-decoration:none; } a:focus-visible{ outline:2px solid var(--color-signal); outline-offset:3px; border-radius:2px; } ::selection{ background:var(--color-ink); color:var(--color-paper); } /* The signature orange period:

Headline.

*/ .dot{ color:var(--color-signal); } /* ── Layout ───────────────────────────────────────────────────────────── */ .container-page{ margin:0 auto; width:100%; max-width:1180px; padding:0 1.5rem; } .container-wide{ margin:0 auto; width:100%; max-width:1320px; padding:0 1.5rem; } @media(min-width:768px){ .container-page,.container-wide{ padding:0 2.5rem; } } .rule-section{ border-top:1px solid var(--color-rule); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.875rem 1.5rem; border:0; border-radius:var(--radius-pill); background:var(--color-signal); color:var(--color-paper); font-size:.9375rem; font-weight:500; line-height:1; letter-spacing:-.005em; cursor:pointer; white-space:nowrap; transition:background-color 160ms var(--ease-out-expo), transform 140ms var(--ease-out); } .btn-primary:hover{ background:var(--color-signal-ink); } .btn-primary:active{ transform:scale(.97); } .btn-primary svg{ transition:transform 240ms var(--ease-out); } .btn-primary:hover svg{ transform:translateX(3px); } .btn-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8125rem 1.5rem; border-radius:var(--radius-pill); border:1px solid var(--color-ink); color:var(--color-ink); background:transparent; font-size:.9375rem; font-weight:500; line-height:1; cursor:pointer; white-space:nowrap; transition:background-color 160ms var(--ease-out-expo), color 160ms var(--ease-out-expo), transform 140ms var(--ease-out); } .btn-secondary:hover{ background:var(--color-ink); color:var(--color-paper); } .btn-secondary:active{ transform:scale(.97); } /* ── Inline link (underline grows from left) ──────────────────────────── */ .link-inline{ position:relative; display:inline-flex; align-items:center; gap:.4em; color:var(--color-ink); font-weight:500; padding-bottom:2px; } .link-inline::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform 320ms var(--ease-out); } .link-inline:hover{ color:var(--color-signal); } .link-inline:hover::after{ transform:scaleX(1); } .link-inline svg{ transition:transform 240ms var(--ease-out); } .link-inline:hover svg{ transform:translateX(3px); } /* ── Eyebrow (ration: <= 1 per ~3 sections) ───────────────────────────── */ .eyebrow{ display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#6b6760; } /* ── Surface (rare — only when a group truly needs walls) ─────────────── */ .surface{ background:var(--color-paper-2); border-radius:var(--radius-card); padding:1.75rem; } /* ── Form input ───────────────────────────────────────────────────────── */ .input{ width:100%; padding:.875rem 1rem; border:1px solid var(--color-rule-2); border-radius:var(--radius-card); background:var(--color-paper); color:var(--color-ink); font-size:1rem; font-family:inherit; transition:border-color 180ms var(--ease-out-expo); } .input:focus{ outline:none; border-color:var(--color-ink); } .input::placeholder{ color:var(--color-ink-3); } /* ── Dark-section flip (the one high-contrast moment) ─────────────────── */ .dark-flip{ background:var(--dark-bg); color:var(--dark-text); } .dark-flip h1,.dark-flip h2,.dark-flip h3,.dark-flip h4{ color:var(--dark-head); } .dark-flip .eyebrow{ color:var(--dark-label); } .dark-flip a{ color:var(--dark-text); } /* ── Card hover lift ──────────────────────────────────────────────────── */ .work-tile{ transition:transform 340ms var(--ease-out-expo), box-shadow 340ms var(--ease-out-expo); } .work-tile:hover{ transform:translateY(-8px); box-shadow:0 22px 48px rgba(0,0,0,.18); } /* ── Browser-frame mockup (the one place a soft shadow is allowed) ────── */ .browser-frame{ position:relative; border-radius:10px; overflow:hidden; background:#fdfcf9; border:1px solid var(--color-rule-2); box-shadow:0 1px 0 0 rgba(255,255,255,.7) inset, 0 24px 60px -32px rgba(14,14,12,.25), 0 8px 24px -16px rgba(14,14,12,.12); } .browser-chrome{ display:flex; align-items:center; gap:.6rem; padding:.6rem .85rem; background:rgba(14,14,12,.04); border-bottom:1px solid var(--color-rule-2); } .browser-dot{ width:9px; height:9px; border-radius:50%; background:var(--color-rule); } .browser-url{ flex:1; padding:.25rem .75rem; border-radius:4px; background:rgba(14,14,12,.05); font-size:.6875rem; color:var(--color-ink-3); } /* ── Decorative accents ───────────────────────────────────────────────── */ .accent-square{ width:30px; height:30px; background:var(--color-signal); } .ink-square{ width:64px; height:64px; background:var(--color-ink); } .thin-circle{ border-radius:50%; border:1px solid var(--color-rule-2); } /* ── Paper grain overlay (add class="mau-grain" to or ) ──── */ .mau-grain::after{ content:""; position:fixed; inset:0; z-index:-1; opacity:.16; pointer-events:none; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Scroll reveal — gated on html.js so it degrades gracefully without JS. Pair with reveal.js, which flips .is-revealed on enter. ──────────────── */ .js [data-reveal]{ opacity:0; transform:translateY(var(--reveal-distance)) scale(.97); transition:opacity 760ms var(--ease-out-expo), transform 860ms var(--ease-out-expo); transition-delay:calc(var(--i,0) * 60ms); will-change:opacity,transform; } .js [data-reveal].is-revealed{ opacity:1; transform:none; } .js [data-reveal-stagger] > *{ opacity:0; transform:translateY(var(--reveal-distance)) scale(.97); transition:opacity 760ms var(--ease-out-expo), transform 860ms var(--ease-out-expo); } .js [data-reveal-stagger].is-revealed > *{ opacity:1; transform:none; } .js [data-reveal-stagger].is-revealed > *:nth-child(1){ transition-delay:80ms; } .js [data-reveal-stagger].is-revealed > *:nth-child(2){ transition-delay:180ms; } .js [data-reveal-stagger].is-revealed > *:nth-child(3){ transition-delay:280ms; } .js [data-reveal-stagger].is-revealed > *:nth-child(4){ transition-delay:380ms; } .js [data-reveal-stagger].is-revealed > *:nth-child(5){ transition-delay:480ms; } .js [data-reveal-stagger].is-revealed > *:nth-child(6){ transition-delay:580ms; } .js [data-reveal-stagger].is-revealed > *:nth-child(n+7){ transition-delay:680ms; } @media (prefers-reduced-motion: reduce){ .js [data-reveal], .js [data-reveal-stagger] > *{ opacity:1 !important; transform:none !important; transition:none !important; } .work-tile:hover{ transform:none !important; } } @media (hover:none),(pointer:coarse){ .work-tile:hover{ transform:none !important; box-shadow:none !important; } .btn-primary:hover svg{ transform:none !important; } }